@charset "UTF-8";
/* CSS Document */

/*-------------------------------------------

name: uniq.css

-------------------------------------------*/


/*=========================================
      gNav
=========================================*/
#header #headInner ul.gNav li#n02 a{ color:#40E0D0;}

/*=========================================
      mv
=========================================*/
#mv{ background:url(../img/mv.jpg) center no-repeat;}

/*=========================================
      container
=========================================*/
#container{}


/*=========================================
      intro
=========================================*/
#intro{ padding:60px 5%; background:url(../img/bg_intro.gif) center no-repeat; background-size:cover; text-align:center;}


/*=========================================
      クラブスタイルサイクルスタジオとは？
=========================================*/
#what{ background:#d1edff; padding:50px 0;}
#what .inner{ max-width:900px; width:95%; margin:0 auto;}
#what h3{ font-size:22px; margin:0 0 20px; color:#000; text-align:center;}


/*=========================================
      選ばれる理由
=========================================*/
#reason{ padding:80px 0;}
#reason .block{ max-width:1300px; width:90%; margin:0 auto 60px;}
#reason .block .inBlock{ width:40%;}
#reason .block .inBlock .en{ font-size:24px; color:#999; font-weight:400; letter-spacing:0.3em;}
#reason .block .inBlock .en:after{ content:""; display:block; background:#999; width:15px; height:1px; margin:15px 0 20px;}
#reason .block .inBlock h4{ font-size:22px; margin:0 0 15px; color:#00abd6;}
#reason .block .inBlock .txt{ margin:0 0 40px;}
#reason .block .inBlock .btnMore{ width:60%;}
#reason .block .inBlock .btnMore a{ padding:12px 0;}
#reason .block .ph{ width:50%; text-align:center;}

#reason .block:nth-child(even) .inBlock{ margin:0 0 0 5%;}
#reason .block:nth-child(odd) .inBlock{ margin:0 5% 0 0;}
#reason .block:last-child{ margin-bottom:0;}


/*=========================================
      体験レッスンの流れ
=========================================*/
#flow{ background:#d1edff; padding:80px 0 0;}
#flow .flowBlock .block .fltR{ padding-left:20px; min-width: 200px; /*width:35%; text-align:center;*/}
#flow .flowBlock .block .fltR img{ max-width: 200px;}
#flow .flowBlock{ /*padding:30px 0;*/ padding:40px 0; position:relative;}
#flow .flowBlock .block{ max-width:900px; width:90%; margin:0 auto; display: flex; align-items: flex-end; justify-content: space-between;}
#flow .flowBlock .block .fltL{ /*width:60%;*/padding-left:15%;}
#flow .flowBlock .block h4{ font-size:22px; margin:0 0 5px;}
#flow .flowBlock .block h4 .en{ font-size:25px; font-weight:normal;}
#flow .flowBlock .block .txt{ margin:0 0 5px;}
#flow .flowBlock .block .tel{ font-size:30px;}

#flow .flowBlock:nth-child(odd){ background:#fff;}

#flow .flowBlock:after{ content: ""; position: absolute; left: 0; right: 0; top: 0; margin: auto;  box-sizing: border-box; width: 0; height: 0; border: 45px solid transparent; border-top: 18px solid #fff;}
#flow .flowBlock:nth-child(even):after{}
#flow .flowBlock:nth-child(odd):after{ border-top:18px solid #d1edff;}
#flow .flowBlock:first-of-type:after{ display:none !important;}
#flow .flowBlock .block .btnMore{ max-width: 500px; width: 100%; margin-left: 0;}


/*=========================================
      当日必要な持ち物
=========================================*/
#item{ padding:80px 0;}
#item > ul{ max-width:1100px; width:90%; margin:0 auto; overflow:hidden;}
#item > ul li{ float:left; width:48%; margin:0 1% 20px; overflow:hidden;}
#item > ul li .ph{ float:left; width:35%;}
#item > ul li dl{ float:right; width:60%;}
#item > ul li dl dt{ font-size:22px; margin:0 0 10px; line-height:1.4; letter-spacing:-0.01em;}
#item > ul li dl dd{}


/* 24.5.15.added */

#item .block{ max-width:1300px; width:90%; margin:0 auto 60px;}
#item .block .inBlock{ width:40%;}
#item .block .inBlock .en{ font-size:24px; color:#999; font-weight:400; letter-spacing:0.3em;}
#item .block .inBlock .txt{ margin:0 0 40px;}
#item .block .inBlock .btnMore{ width:60%;}
#item .block .inBlock .btnMore a{ padding:12px 0;}
#item .block .ph{ width:50%; text-align:center;}

#item .campaign{ max-width:1300px; width:90%; margin:60px auto 40px;}
#item .campaign h3{font-weight: bold; font-size: 28px; margin: 0 0 15px; text-align: center; color: #000;}
#item .campaign p{font-size: 18px; text-align: center; line-height: 1.3;}
#item .campaign p span{font-weight: bold; font-size: 24px;}
#item ul{padding-left: 40px; margin-bottom: 40px;}
#item li{font-weight: bold;}
#item li span{font-weight: 400;}

#item .arrow01{position:relative;}
#item .arrow01 a:after{content:"»"; margin: auto; position: absolute; right: 15px;}


/*==============================================

	スマホ

==============================================*/
@media only screen and (max-width: 739px) {


/*=========================================
      クラブスタイルサイクルスタジオとは？
=========================================*/
#what{ padding:30px 0;}
#what .inner{ max-width:inherit; width:90%;}
#what h3{ font-size:15px; margin:0 0 15px;}

/*=========================================
      選ばれる理由
=========================================*/
#reason{ padding:40px 0;}
#reason .block .ph{ margin:0 0 20px;}
#reason .block{ max-width:inherit; margin:0 auto 30px;}
#reason .block .inBlock{ margin:0 !important;}
#reason .block .inBlock .en{ font-size:22px; text-align:center;}
#reason .block .inBlock .en:after{ margin:10px auto 15px;}
#reason .block .inBlock h4{ font-size:18px; margin:0 0 10px; text-align:center;}
#reason .block .inBlock .txt{ margin:0 0 15px;}
#reason .block .inBlock .btnMore{ width:80%;}
#reason .block .inBlock .btnMore a{ padding:10px 0;}


/*=========================================
      体験レッスンの流れ
=========================================*/
#flow{ padding:40px 0 0;}
#flow .flowBlock .block { flex-direction: column;}
#flow .flowBlock .block .fltR{ width:auto;}
#flow .flowBlock{ padding:30px 0;}
#flow .flowBlock .block{ max-width:inherit;}
#flow .flowBlock .block .fltL{padding-left: 0; width: 100% !important;}
#flow .flowBlock .block h4{ font-size:18px;}
#flow .flowBlock .block h4 .en{ font-size:20px;}
#flow .flowBlock .block .txt{ margin:0 0 15px;}
#flow .flowBlock .block .tel{ font-size:25px; text-align:center;}
#flow .flowBlock .block .tel a{ background:#00abd6; color:#fff; border:none;}

#flow .flowBlock:nth-child(odd){}

#flow .flowBlock:after{ border-top: 15px solid #fff;}
#flow .flowBlock:nth-child(even):after{}
#flow .flowBlock:nth-child(odd):after{ border-top:15px solid #d1edff;}
#flow .flowBlock:first-of-type:after{}
#flow .flowBlock:first-of-type{ padding-top:0;}
#flow .flowBlock .block .btnMore {margin-bottom: 15px;}

/*=========================================
      当日必要な持ち物
=========================================*/
#item{ padding:40px 0;}
#item > ul{ max-width:inherit;}
#item > ul li{ float:none; width:auto; margin:0 0 15px;}
#item > ul li .ph{ float:left; width:35%;}
#item > ul li dl{ float:right; width:60%;}
#item > ul li dl dt{ font-size:16px; margin:0 0 5px; line-height:1;}
#item > ul li dl dd{ line-height:1.3;}

/* 24.5.15.added */


#item .block .ph{ margin:0 0 20px;}
#item .block{ max-width:inherit; margin:0 auto 30px;}
#item .block .inBlock{ margin:0 !important;}
#item .block .inBlock .en{ font-size:22px; text-align:center;}
#item .block .inBlock .en:after{ margin:10px auto 15px;}
#item .block .inBlock h4{ font-size:18px; margin:0 0 10px; text-align:center;}
#item .block .inBlock .txt{ margin:0 0 15px;}
#item .block .inBlock .btnMore{ width:80%;}
#item .block .inBlock .btnMore a{ padding:10px 0;}

#item .campaign{ margin:40px auto 20px;}
#item .campaign h3{font-weight: bold; font-size: 18px; margin: 0 0 10px; text-align: center; color: #000;}
#item .campaign p{font-size: 16px; text-align: center; line-height: 1.3;}
#item .campaign p span{font-weight: bold; font-size: 22px;}
#item ul{padding-left: 20px; margin-bottom: 20px;}
#item li{font-weight: bold;}
#item li span{font-weight: 400;}

}