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

/*------------------------------------
制服ナビまで
------------------------------------*/

.seifuku-topimage{
  margin-top: -3px;
  width: 100%;
}

.seifuku-topimage img{
  width: 100%;
}

.top-image,
.top-image img{
  width: 100%;
}

.seifukunavi-li{
  flex: 1;
  font-size: 1.8rem;
  border-right: solid 2px #fff;
}

.sp-navi{font-weight: bold;}

.seifukunavi-li a{
  display: block;
  font-weight: bold;
  color: #000;
  background: #ffe893;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 12px 0;
  line-height: 1.4;
}

.seifukunavi-li a:hover{
  background: #e60012;
  color:#fff;
}

.seifukunavi-li:last-of-type{
  border-right: none;
}

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

メイン部分

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

/*------------------------
制服メイン大枠
-------------------------*/

.seifukumain-wrap{
  width: 95%;
  margin: 15px auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
}

/*-----------------------------------
  採寸予約バナー部分
-----------------------------------*/
.yoyaku-wrap{
  width: 95%;
  text-align: center;
  margin: 20px auto 35px;
  padding-bottom: 35px;
  box-sizing: border-box;
  border-bottom: solid 2px #9FA0A0;
}

.yoyaku-wrap h2{
  font-size: 4rem;
  line-height: 1.4;
  font-weight: bold;
  color: #e60012;
}

.yoyaku-wrap-banner{
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.yoyaku-img{
  width: 48.5%;
  margin: 20px 0 0;
}

.yoyaku-img img{ width: 100%; }

.yoyaku-img a{ transition: 0.3s; }

.yoyaku-img a:hover{
  opacity: 0.7;
}

/*---------------------------------------
左側取り扱い中学校部分
-----------------------------------------*/
.itiran{
  width: 40%;
  margin-top: 7px;
  padding: 0 20px 0 5px;
  border-right: solid 1px gray;
}

.itiran-title{
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.5em;
  background: #005bac;
  border-radius: 5px;
}

.school-list{
  width: 100%;
}

.list{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between
}

.itiran h4{
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  background: #009fe8;
  border-radius: 5px;
  text-align: center;
  margin: 15px 0 5px 0;
  padding: 4px 0;
}

.itiran ul{
  display: block;
}

.itiran li{
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
}

.itiran li::before{
  content: "● ";
  color: #7ecef4;
}

.nakatsu{
  width: 47%;
}

.usa{
  width: 47%;
}

.bungotakada{
  width: 47%;
}

.fukuoka{
  width: 47%;
}

/*-----------------------スマホ用アコーディオン----------------------*/
.sp-actitle{
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.5em;
  background: #005bac;
  border-radius: 5px;
}
/*ボックス全体*/
.accbox { width: 100%;/*最大幅*/ }
    

/*ラベル*/
.accbox label {
    font-size: 1.7rem;
    display: block;
    margin: 5px 0;
    padding : 5px 12px;
    color :#696969;
    font-weight: bold;
    background: linear-gradient(to right,#bbdbf3,#fff);
    cursor :pointer;
}

/*ラベルホバー時*/
.accbox label:hover{
    background :#00a1e9;
    color: #fff;
}


/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px 10px;
    background: #fff;
    opacity: 1;
}

/*----------------------------------------
右側テキスト部分
----------------------------------------*/
.main-text{
  width: 55%;
  padding: 0 5px 0 15px;
  margin-left: 10px;
}

.kanko-text{
  font-size: 2.7rem;
  line-height: 2;
  font-weight: 900;
  margin-top: 5px;
}

.section-text{
  font-size: 1.5rem;
  line-height: 1.6;
  text-align: justify;
}

.store-photo{
  width: 100%;
  margin: auto;
  margin-top: 15px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between
}

.ushigami-photo{ width: 48%; }

.youmetown-photo{ width: 48%; }

.ushigami-photo img,.youmetown-photo img{width: 100%;}

.store-name{ margin-top: 7px; }

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

下層ページ（特典ページ等）

------------------------------------------------------------------------------------------*/
/*----------------------------------------
2025用追記 共通部分
------------------------------------------*/
.uniform-info, .uniform-info img{
  width: 100%;
}

/*----------------------------------------
早期ご予約特典ページ
------------------------------------------*/
.tokuten-img{ width: 100%; }

.tokuten-img img{ width: 100%; }

/*----------------------------------------
中津市指定ブレザーページ
------------------------------------------*/
.tab_contents {
	width: 100%;
	text-align: center;
}

.tab_wrap {
	width: 100%;
	margin: 40px auto 0;
}

/*タブボタンデザイン*/
.tab_lab1, .tab_lab2{
	font-size: 2.8rem;
	font-weight: bold;
	color: #fff;
	padding: 15px 0;
	box-sizing: border-box;
	display: inline-block;
	width: 48%;
	text-align: center;
  cursor :pointer;
}

.tab_lab1{
	background: #89ccea;
	border-radius: 15px 15px 0 0;
	margin: 0 3px;
}

.tab_lab2{
	background: #efb4bf;
	border-radius: 15px 15px 0 0;
	margin: 0 3px;
}

/*タブにチェック入ったとき*/
#tab1:checked~.tab_lab1 {
	background: #004ea2;
}
#tab2:checked~.tab_lab2 {
	background: #dd365d;
}

/*タブボタンとボックス連動*/
#tab1:checked~.panels #area1 {
	display: block;
	background: #eaf5fd;
}
#tab2:checked~.panels #area2 {
	display: block;
	background: #fef5f7;
}

/*チェックボックスとボックス非表示*/
input[name="check"] {
	display: none;
}

.panel{
	display: none;
	padding: 12px 0;
	position: relative;
	z-index: 3;
}

/* パネル内のデザイン */
.boy-panel{
	width: 100%;
	border-top: solid 2px #004ea2;
}

.girl-panel{
	width: 100%;
	border-top: solid 2px #dd365d;
}

.boy-panel img, .girl-panel img{
	width: 100%;
}

.b-tai_text{
	font-size: 1.8rem;
	margin: 15px 30px 20px;
	text-align: right;
}
/*----------------------------------------
男女制服紹介ページ
------------------------------------------*/

.seifuku-jump{
  width: 85%;
  margin: auto;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between
}

.link-btn{
  width: 47%;
  text-align: center;
  margin: 25px 0;
}

.boy-btn{
  color: #fff;
  display: block;
  line-height: 2;
  background: linear-gradient(#00a0e9, #0068b7);
  border-radius: 8px;
}

.boy-btn:hover{
  background: #005bac;
}

.girl-btn{
  color: #fff;
  display: block;
  line-height: 2;
  background: linear-gradient(#ec6d81, #c82b55);
  border-radius: 8px;
}

.girl-btn:hover{
  background: #e5004f;
}


.boy-btn p,.girl-btn p{
  font-size: 3rem;
  font-weight: bold;
}

.uni-img{
  width: 100%;
}

.uni-img img{
  width: 100%;
}

.boys-list,
.girls-list{
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
}

.boys-list li,
.girls-list li{
  width: 50%;
}

.boys-list img,
.girls-list img{
  width: 100%;
}

.girl-top{ margin-top: 15px; }

.boys-list .full-width,
.girls-list .full-width{
  width: 100%;
}

.b-tai{
  margin-top: 0px;
}

/*----------------------------------------
Q&Aページ
------------------------------------------*/
.faq-top{margin-top: 10px;}

.faq-img{ width: 100%;}

.faq-img img{width: 100%;}

.question-top{
  margin: 10px auto 20px;
}

/*----------------------------------------
レンタルブレザーページ
------------------------------------------*/
.rental-img{ width: 100%; }

.rental-img img{ width: 100%; }


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

メディアクエリ（スマホ用）

-------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:640px){
/*------------------------------------
制服ナビまで
------------------------------------*/
.sp-navi{display: none;}
  
.seifukunavi-li{
  flex: 1;
  font-size: 1.25rem;
  border-right: solid 2px #fff;
}

.seifukunavi-li a{
  line-height: 1.35;
}

.seifukunavi-li a:hover{
  background: #e60012;
  color:#fff;
}

.seifukunavi-li:last-of-type{
  border-right: none;
}

  
/*------------------------------------
メイン部分
------------------------------------*/

/*------------------------
制服メイン大枠
-------------------------*/

.seifukumain-wrap{
  width: 95%;
  margin: 10px auto;
  flex-direction: column-reverse;
  justify-content: space-around;
}

/*-----------------------------------
  採寸予約バナー部分
-----------------------------------*/
.yoyaku-wrap{
  margin: 18px auto 18px;
  padding-bottom: 22px;
}

.yoyaku-wrap h2{
  font-size: 2.5rem;
}

.yoyaku-wrap-banner{
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
  flex-direction: column;
}

.yoyaku-wrap-banner div:first-child{
  margin: 12px 0 0;
}

.yoyaku-img{
  width: 100%;
  margin: 18px 0 0;
}

/*---------------------------------------
左側取り扱い中学校部分
-----------------------------------------*/
.accbox{display: block;}
.sp-actitle{margin-bottom: 10px;} 
.itiran{
  width: 95%;
  margin: 7px auto 0;
  padding: 0;
  border-right: none;
}

.school-list{ width: 100%; }

.itiran ul{
  display: block;
}

.itiran li{
  font-size: 1.5rem;
  line-height: 1.6;
  font-weight: bold;
}

/*----------------------------------------
右側テキスト部分
----------------------------------------*/
.main-text{ width: 95%; padding: 0; margin: 0 auto 8px; }
.kanko-sp{ width: 60%; }
.kanko-text{ font-size: 1.6rem; line-height: 1.4; margin: 5px 0 8px;}

.section-text{
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: justify;
}

.store-name{ font-size: 1.3rem; }

/*----------------------------------------
中津市指定ブレザーページ
------------------------------------------*/
.tab_wrap {
	width: 100%;
	margin: 16px auto 0;
}

/*タブボタンデザイン*/
.tab_lab1, .tab_lab2{
	font-size: 2rem;
	padding: 6px 0;
	width: 47.5%;
}

.tab_lab1{
	border-radius: 10px 10px 0 0;
	margin: 0 2px;
}

.tab_lab2{
	border-radius: 10px 10px 0 0;
	margin: 0 2px;
}

.b-tai_text{
	font-size: 1.6rem;
	margin: 8px auto 10px;
  text-align: center;
}
  
/*-------------------制服紹介------------------*/
  .seifuku-jump{  width: 90%;  }
  
  .link-btn{  margin: 15px 0;  }
  
  .seifuku-jump p{  font-size: 1.5rem;  } 

  .boys-list,
  .girls-list{
    flex-direction: column;
  }
  
  .boys-list li,
  .girls-list li{
    width: 100%;
    margin-top: -10px;
  }

  .boys-list li:first-of-type,
  .girls-list li:first-of-type{
    margin-top: 0;
  }
  
  .girl-top{ margin-top: 15px; }

  .b-tai{
    margin-top: -10px;
  }
  
}

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

メディアクエリ タブレット

-------------------------------------------------*/
@media screen and (min-width:561px) and (max-width:840px){
.seifukumain-wrap{
  width: 92%;
  margin: auto;
  }
  
.itiran-pc{display: none;}
/*.sp-navi{display: none;}*/
  
.seifukunavi-li{
  flex: 1;
  font-size: 1.7rem;
  border-right: solid 2px #fff;
}
  
.seifukunavi-li a{
  padding: 20px 0;
}


.seifukunavi-li a:hover{
  background: #e60012;
  color:#fff;
}

  
/*------------------------------------
メイン部分
------------------------------------*/

/*------------------------
制服メイン大枠
-------------------------*/

.seifukumain-wrap{
  width: 95%;
  margin: 10px auto;
  flex-direction: column-reverse;
  justify-content: space-around;
}

/*-----------------------------------
  採寸予約バナー部分
-----------------------------------*/
.yoyaku-wrap{
  margin: 20px auto 30px;
  padding-bottom: 35px;
}

.yoyaku-wrap h2{
  font-size: 3.5rem;
}

/*---------------------------------------
左側取り扱い中学校部分
-----------------------------------------*/
.accbox{display: block;}
.sp-actitle{ margin-bottom: 10px; } 
.itiran{
  width: 95%;
  margin: 15px auto 0;
  padding: 0;
  border-right: none;
}

.school-list{ width: 100%; }

.itiran ul{
  display: block;
}

.itiran li{
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
}

/*----------------------------------------
右側テキスト部分
----------------------------------------*/
.main-text{ width: 95%; padding: 0; margin: 0 auto 8px; }
.kanko-sp{ width: 60%; }
.kanko-text{ font-size: 2rem; line-height: 1.4; margin: 7px 0 12px;}

.section-text{
  font-size: 1.6rem;
  line-height: 1.8;
}
.store-name{ font-size: 1.3rem; }
  
/*-------------------制服紹介------------------*/
  .seifuku-jump{  width: 90%;  }
  
  .link-btn{  margin: 15px 0;  }
  
  .seifuku-jump p{  font-size: 2rem;  } 

  .b-tai{
    margin-top: 0px;
  }
}