@charset "UTF-8";

body {font-family: "メイリオ";}

/**============================================================================================**/
/* Flexiteek(フレキシチーク)とは　TOP */
#about-top {
	overflow: hidden;	height: 800px;
	background: url(https://www.flexiteek.jp/about/images/about-top.jpg) no-repeat;
	background-position: center; text-align: center;}
	
@media screen and (max-width:699px){
	#about-top {height: 250px; padding: 0 15px;
	background: url(https://www.flexiteek.jp/about/images/about-top-smp.jpg) no-repeat;}
}


/* タイトル文字 */
#about-top h2 {
	top: 50%; left: 50%; width: 100%;
	transform: translateX(-50%) translateY(-50%);
	color: #fff; font-size: 45px; text-shadow: 1px 1px 5px #333;}
#about-top h2 span {margin: 20px 0 0; font-size: 22px;}

@media screen and (max-width:699px){
	#about-top h2 {font-size: 21px;}
	#about-top h2 span {width: 250px; margin: 10px auto 0; font-size: 18px; text-align: left;}
}


/* ページ内リンク矢印 */
#about-top a.posi-abs {
	display: block; bottom: 0; left: 50%;
	width: 60px; height: 60px; margin: 0 0 0 -30px;}
	
#about-top a.posi-abs::before,
#about-top a.posi-abs::after {
	content: ""; display: block;
	position: absolute; top: calc(50% - 5px);
	width: 51px;/*線の長さ*/
	height: 9px;/*線の太さ*/
	background: #fff;/*線の色*/
	transform: rotate(35deg);	transform-origin:calc(100% - 5px) 50%;}
	
#about-top a.posi-abs::before {right: calc(50% - 3px);}
#about-top a.posi-abs::after {right: calc(50% - 7px); transform: rotate(145deg);}

@media screen and (max-width:699px){
	#about-top a.posi-abs {display: none;}
}




/**============================================================================================**/
/* Flexiteek(フレキシチーク)とは　内容 */

/* スライダー隠し用 */
#about {overflow: hidden;}


/* テキスト部分 */
#about .m-0a {max-width: 1000px; padding: 90px 15px; line-height: 1.8em;}
@media screen and (max-width:699px){
	#about .m-0a {padding: 40px 15px;}
}


/* 画像スライダー */
#about .loop-slide {display: flex; align-items: center; overflow: hidden;}
#about .loop-slide ul {display: flex; animation: loop-slide 60s infinite linear 0.5s both;}
@keyframes loop-slide {
  from {transform: translateX(0);}
  to {transform: translateX(-100%);}
}
@media screen and (max-width:699px){
	#about .loop-slide li {width: 214px; height: 180px;}
	#about .loop-slide img {width: 247px; height: 180px;}
}




/**============================================================================================**/
/* Flexiteek(フレキシチーク)とは　TOP */
#customer-top {
	overflow: hidden; height: 520px;
	background: url(https://www.flexiteek.jp/our-customers/images/our-customers-top.jpg) no-repeat;
	background-position: center; text-align: center;}
	
@media screen and (max-width:699px){
	#customer-top {height: 574px; padding: 0 15px;
	background: url(https://www.flexiteek.jp/our-customers/images/our-customers-top-smp.jpg) no-repeat;}
}

                                                                                                                                  
/* タイトル文字 */
#customer-top .posi-abs {
	top: 50%; right: 0; margin: -43px 50px 0;
	transform: translateY(-50%);}
#customer-top h2 {color: #fff; font-size: 35px; text-shadow: 1px 1px 5px #333;}
#customer-top h2 span {margin: 20px 0 0; font-size: 22px; text-shadow: 1px 1px 5px #333;}

@media screen and (max-width:699px){
	#customer-top .posi-abs {margin: -43px 15px 0;}
	#customer-top h2 {font-size: 22px;}
	#customer-top h2 span {width: auto; margin: 10px auto 0; font-size: 16px; text-align: left;}
}


/* ページ内リンク矢印 */
#customer-top a::before,
#customer-top a::after {
	content: ""; display: block;
	position: absolute; 
	width: 55px;/*線の長さ*/
	height: 11px;/*線の太さ*/
	margin: 50px 0;
	background: #fff;/*線の色*/
	transform: rotate(40deg);	transform-origin: 50px;}
	
#customer-top a::before {right: calc(50% - 4px);}
#customer-top a::after {right: calc(50% - 6px); transform: rotate(140deg);}



/**============================================================================================**/
/* フレキシチークは、世界中の200以上のボートビルダーで採用されています。 */
#customer-top {margin: 0 0 20px;}

#customer01 {margin: 0 0 100px;}
@media screen and (max-width:699px){
	#customer01 {margin: 0 0 60px;}
}

/* タイトル */
#customer01 h3 {color: #000; font-size: 30px; text-align: center;}
@media screen and (max-width:699px){
	#customer01 h3 {font-size: 18px;}
}


/*アコーディオン外リスト*/
#customer01 ul.ta_c {max-width: 900px; margin: 0 auto 100px; font-size: 0;}
#customer01 ul.ta_c li {display: inline-block; width: 170px; margin: 80px 0 0;}
#customer01 ul.ta_c li img {width: 100%; height: auto;}
@media screen and (max-width:699px){
	#customer01 ul.ta_c {margin: 0 auto 60px;}
	#customer01 ul.ta_c li {width: 31%; margin: 40px 1% 0;}
}


/* アコーディオン 開閉ボタン */
#customer01 label[for="menu_bar"] {
	display: block; position: relative; 
	padding: 14px 50px; border-radius: 10px; background: #000;
	color: #fff; font-size: 22px; font-weight: bold; text-align: center; cursor: pointer;}
     
#customer01 label[for="menu_bar"]:after {
	content: '+';
	display: inline-block; position: absolute; top: 50%; right: 15px;
	margin: -22px 0 0; font-size: 30px;}
@media screen and (max-width:699px){
	#customer01 label[for="menu_bar"] {padding: 10px 50px 10px 20px; font-size: 16px;}
}


/* アコーディオンをクリックした場合 */
#menu_bar:checked ~ .area {height:auto; max-height: 50000px; margin: 80px 0 0; opacity: 1;}
#menu_bar:checked ~ label[for="menu_bar"]:after {
	content: '-'; right: 20px; margin: -26px 0 0; font-size: 35px;}
@media screen and (max-width:699px){
	#menu_bar:checked ~ .area {margin: 20px 0 0;}
}

 
/* アコーディオン 表示・非表示エリア */
#customer01 .area {
  overflow-y: hidden;
  height: 0; max-height: 0; margin: 0; padding:0; opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/*アコーディオン内リスト*/
#customer01 .area ul {margin: 0 0 50px; font-size: 0}
#customer01 .area ul li {
	display: inline-block; width: 170px; margin: 0 0 40px;
	font-size: 12px; text-align: center; vertical-align: middle;}
#customer01 .area ul li img {width: 100%; height: auto;}
@media screen and (max-width:699px){
	#customer01 .area ul {margin: 0 0 30px;}
	#customer01 .area ul li {width: 31%; margin: 0 1% 20px;}
}




/**============================================================================================**/
/*ボートビルダーの声*/

/* タイトル */
#customer02 h3 {margin: 0 0 50px; color: #000; font-size: 30px; text-align: center;}
#customer02 h3 span {display: block; margin: 10px 0 0; font-size: 18px;}
@media screen and (max-width:699px){
	#customer02 h3 {margin: 0 0 30px;}
}


/* スライド */
#customer02 .slick01 {display: flex; flex-wrap: wrap; flex-direction: row;}
#customer02 .dis-ilblk {
	box-sizing: border-box; width: 380px; height: 360px; margin: 0 10px 30px; padding: 20px 15px 0;
	border: solid 1px #000;	font-size: 14px; vertical-align: top;}
#customer02 .dis-ilblk img {display: block; width: auto; height: 90px; margin: 0 auto;}
#customer02 .dis-ilblk .posi-abs {right: 15px; bottom: 30px; text-align: right;}

@media screen and (max-width:699px){
	#customer02 .slick01 {width: 85%; margin: 0 auto;}
	#customer02 .slick-prev:before, .slick-next:before {color: red;}
	
	/* スライド矢印 */
	/* 左 */
	#customer02 .slick-prev {left: -68px;}
	#customer02 .slick-prev:before,
	#customer02 .slick-prev:after{
		content: ""; display: block;
		position: absolute; 
		width: 43px;/*線の長さ*/
		height: 7px;/*線の太さ*/
		margin: -37px 0 0;
		border-radius: 5px;
		background: #999;/*線の色*/
		opacity: 1;
		transform: rotate(130deg);	transform-origin: 40px;}
		
	#customer02 .slick-prev:before {left: 0;}
	#customer02 .slick-prev:after {left: 0; transform: rotate(230deg);}
	
	/* 右 */
	#customer02 .slick-next {right: -33px;}
	#customer02 .slick-next:before,
	#customer02 .slick-next:after {
		content: ""; display: block;
		position: absolute; 
		width: 43px;/*線の長さ*/
		height: 7px;/*線の太さ*/
		margin: -37px 0 0;
		border-radius: 5px;
		background: #999;/*線の色*/
		opacity: 1;
		transform: rotate(50deg);	transform-origin: 40px;}

	#customer02 .slick-next:before {right: 0;}
	#customer02 .slick-next:after {right: 0; transform: rotate(-50deg);}	
}






/**============================================================================================**/
/* 環境への約束 */

/* 背景画像 */
#promise {
	overflow: hidden;
	height: 800px;
	background: url(https://www.flexiteek.jp/about/images/promise.jpg) no-repeat;
	background-position: center;
	color: #000;}


/* 白ぼかし */
#promise .posi-abs {
	display: flex; align-items: center;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: 7% 0; padding: 50px 15px;
	background: rgba(255,255,255,0.6); backdrop-filter: blur(10px);
	line-height: 2em;}
	
@media screen and (max-width:699px){
	#promise .posi-abs {margin: 12% 0;}
}


/* テキスト部分 */
#promise .m-0a {max-width: 1000px;}

#promise h3 {font-size: 22px;}
#promise p.m-b50 {font-size: 16px;}

@media screen and (max-width:699px){
	#promise h3 {font-size: 18px;}
	#promise p.m-b50 {font-size: 14px;}
}


/*--LastUp2025.04.11_kobayashi--*/