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

/* グーグルフォント */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700,900&display=swap');

/*----------------------------------
グーグルマップ
---------------------------------*/
.g-map{
  width: 100%;
  margin: 15px auto -60px;
  height: 0;
  overflow: hidden;
  padding-bottom: /*43.5%;*/99%;
  position: relative;
}

.g-map iframe{
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: 100%;
}

/*----------------------------------
申し込みダウンロード
---------------------------------*/
.download{
  width: 100%;
  text-align: center;
  background: rgba(255,255,153,0.8);
  position: fixed;
  bottom: 0;
  padding: 16px 0;
}

.download a{
  display: inline-block;
  background: red;
  border-radius: 40px;
  transition: 0.5s;
}

.download a p{
  font-size: 3rem;
  font-weight: bold;
  color: #fff;
  padding: 16px 32px;
}

.download a:hover{
  background: #005bac;
}

.dl-footer{
  width: 100%;
  margin-top: 10px;
  padding-bottom: 120px;
}


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

全体的な事

--------------------------------------------------------------------------------------*/
html{
  font-size: 62.5%;/*16px × 62.5%=10px*/
  background: -webkit-repeating-linear-gradient(-45deg, #dbedff, #dbedff 4px,#eef5fb 3px, #eef5fb 7px);
  background: repeating-linear-gradient(-45deg, #dbedff, #dbedff 4px,#eef5fb 3px, #eef5fb 7px);
  font-family: 'Noto Sans JP', sans-serif;
}

body{
  font-size:1.6rem;
  font-feature-settings: "palt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrapper{
  width: 1000px;
  margin: auto;
  background: #fff;
  box-shadow: 2px 2px 5px #aaa;
}

h1{
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
}

.h1-span{
  font-size: 2.4rem;
  font-weight: bold;
}

.title-cap{
  font-size: 2.2rem;
  font-weight: bold;
  color: #fff;
  margin-top: 13px;
  border-top: solid 1px #fff;
  padding-top: 10px;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {
    display: inline-table;
    min-height: 1%;
}

.text-center{
  text-align: center;
}

.fb-sp{
  display: none;
}

.fb-tb{ display:  none; }

.sp-br{
  display: none;
}

.accbox{display: none;}

.margin-top{
  margin-top: 12px;
}

/*--------------------コロナ対策--------------------*/
.covid{
  width: 95%;
  margin: 15px auto;
  border: solid 5px red;
  padding: 10px 25px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #ffefef;
}

.covid h2{
  font-size: 4rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  color: red;
  border-bottom: solid 4px red;
  padding-bottom: 8px;
}

.covid p{
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  margin: 20px 0 15px 0;
}

.icon-wrap{
  width: 100%;
  margin-bottom: 5px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.icon{
  width: 15%;
}

.icon img{
  width: 100%;
}

/* 中津市ブレザーバナー */
.nakatsu-seifuku-banner{
  width: 95%;
  margin: 0 auto;
}

.nakatsu-seifuku-banner img,
.seifuku-link-banner img{
  width: 100%;
}

.nakatsu-seifuku-banner a,
.seifuku-link-banner a{
  transition: 0.5s;
}

.nakatsu-seifuku-banner a:hover,
.seifuku-link-banner a:hover{
  opacity: 0.7;
}

/* 各制服ページへのバナー */
.seifuku-link-banner{
  width: 95%;
  margin: 0 auto 30px;
}

.blazer-banner{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.blazer-banner div{
  width: 49%;
}


/*--------パンくずリスト--------*/
.breadcrumb {
  margin: 15px 0 0 30px;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  font-size: 1.5rem;
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* ▶を表示*/
  font-family: "Font Awesome 5 Free";
  content: '\f0da';
  padding: 0 0.2em;
  color: silver;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #777;
}

.fa-home{
color:#00a0e9;
margin-right: 3px;}

.breadcrumb li a:hover {
  text-decoration: underline;
}



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

ヘッダー部分

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

.header-wrap{
  width: 100%;
}

#header{
  background: #005bac;
  width: 100%;
  padding-bottom: 18px;
}

.top-text{
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.6;
  color: #fff;
  background: #009fe8;
  text-align: center;
  margin-bottom: 3px;
}

.top-text span{
  font-size: 2.2rem;
  font-weight: bold;
}

.header-title{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-bottom: 3px;
}


.header-logo{
  margin: 18px 30px 0 0;
}

.logo-image{
  width: 220px;
}

.header-text{
  margin: 15px 0 0 40px;
}

/*-----------------------------------------------
トップ画像部分
-----------------------------------------------*/
.topimage{ width: 100%; }

.top-img{ width: 100%; }

/*--------------休業のお知らせ----------------*/
.corona{
width: 100%;
margin-top: 7px;}

.corona img{width: 100%;}


/* -----------------------------
ナビ部分
--------------------------------*/

.grobalnavi{
  width: 100%;
}

.navi-ul{
  margin-top: -1px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.navi-li{
  font-size: 1.8rem;
  line-height: 2em;
  flex: 1;
  background: /*--#fff8b0;--*/ linear-gradient(#e4e4e4, #a6a5a5);
  border-right: solid 2px #fff;
}

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

.navi-li a{
  font-weight: bold;
  display: block;
  color: #000;
}

.navi-li a:hover{
  background: #919090;
  color: #fff;
}


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

メイン部分

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

main{
  width: 100%;
}

.main-wrap{
  margin: 22px 0;
  padding: 0 10px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
}

.highschool-link-banner{
  width: 95%;
  margin: 25px auto;
}

.highschool-link-banner img{
  width: 100%;
  transition: 0.3s;
}

.highschool-link-banner img:hover{
  opacity: 0.8;
}

.main-wrap img{
  width: 100%;
}

.main-wrap a{
  display: block;
  color: #fff;
}

.main-wrap a:hover{
  opacity: 0.6;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
  transform: scale(1.02);
  transition-duration: 0.3s;
}

.main-left{
  width: 48%;
}

.main-right{
  width: 48%;
}

.link-text{
  font-size:1.5rem;
  font-weight: bold;
  width: 100%;
  line-height: 1.7em;
  background: #009fe8;
  margin: auto;
}

.link-tabletennis{
  margin-top: 27px;
}

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

.main-bottom{
  padding: 10px 10px 7px;
  box-sizing: border-box;
}

.fb-access{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
}

.facebook-timeline{
  width: 48%;
}

/* -----------------------------
右側アクセス部分
--------------------------------*/
.map-title{
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.5em;
  background: #005bac;
  border-radius: 5px;
}
.access{
  width: 48%;
}

.access img{
  width: 100%;
  margin-top: 10px;
}



/* -----------------------------
リンクバナー部分
--------------------------------*/
.seifuku-banner{
  width: 97%;
  margin: 0 auto 20px;
}

.link-top{
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.banner{
  width:47%;
  margin-top: 18px;
}

.seifuku-banner a{
  display: inline-block;
}

.seifuku-banner a:hover{
  opacity: 0.6;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.link-bottom{
  margin-top: 20px;
}

.link-banner{
  width: 100%;
}

.banner-sp{
  margin-bottom: 15px;
}

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

フッター部分

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

footer{
  width: 100%;
  margin-top: 10px;
  padding-bottom: 15px;
}

/*------------------------------------
フッターナビ部分
-------------------------------------*/
.footernavi{
  width: 100%;
}

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

.footer-navi-li{
  font-size: 1.4rem;
  font-weight: bold;;
  line-height: 1.5;
  border-right: solid 1px #fff;
  flex: 1;
}

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

.footer-navi-li a{
  color: #fff;
  background: #00a0e9;
  display: block;
}

.footer-navi-li a:hover{
  background: #005bac;
}

/*--------------------------------
店舗情報
---------------------------------*/

.store-info{
  width: 100%;
  background: #bae3f9;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
}

.footer-logo{
  display: flex;
  align-items: center;
}

.footer-logo img{
  padding: 8px;
}

.store-info p{
  font-size:1.2rem;
  line-height: 1.4;
  color: #000;
}


.store{
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1em;
}

.ushigami{
  padding-right: 50px;
  border-right: solid 1px #000;
}

.yumetown{
  margin-left: -15px;  
}

.copyright{
  font-size: 1.2rem;
  padding: 10px;
}

.gotop{
  font-size: 1.5rem;
  display: block;
}

.home{
  color: #fff;
  padding: 7px;
  font-weight: bold;
  display: inline-block;
  background: linear-gradient(#00a0e9, #0081cc);
  border-radius: 3px;
}

.home:hover{
  background: #005bac;
  color: #fff;
}







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

メディアクエリ スマホ

-------------------------------------------------*/
@media screen and (max-width:560px){
  body{ font-size: 1.3rem; }
  .wrapper{ width: 100%; box-shadow: none; }
  .fb-pc{ display: none; }
  .fb-tb{ display:  none; }
  .fb-sp{ display: block;margin: auto;}
  .sp-br{ display: block;}
  h1{ font-size: 2rem; margin: 3px 0 5px 0;}
  .title-cap{ display: none; }
  .h1-span{
    font-size: 1.4rem;
    line-height: 1.4;}
  .link-banner{ margin: 10px 0 0 0;}
  .facebook-timeline{ width: 100%;text-align: center;}
  .itiran-pc{display: none;}

/*----------------------------------
申し込みダウンロード
---------------------------------*/
.download{
  padding: 12px 0;
}

.download a p{
  font-size: 2rem;
  padding: 10px 16px 12px;
}

.dl-footer{
  padding-bottom: 80px;
}

/* ------------------------------------ヘッダー部分------------------------------------------*/
  #header{ padding: 0;}
  
  .top-text{
    font-size: 1.35rem;
    margin-bottom: 5px;}
  
  .top-text span{ display: none;}
  
  .header-logo{  margin: 3px 15px 0 0;}

  .logo-image{ width: 100px;}

  .header-text{ margin: 0 0 0 15px; }
  
  .header-title{
    padding-top: 2px;
    padding-bottom: 1px;
  }
    
/* ------------------------------------ナビ部分------------------------------------------*/
.navi-li{ font-size: 1.3rem; }
  
/*--------------------コロナ対策--------------------*/
.covid{
  width: 92%;
  margin: 13px auto 15px;
  border: solid 2px red;
  padding: 8px 12px;
  border-radius: 8px;
}

.covid h2{
  font-size: 1.6rem;
  line-height: 1.4;
  border-bottom: solid 2px red;
  padding-bottom: 5px;
}

.covid p{
  font-size: 1.5rem;
  margin: 7px 0 8px 0;
}


.highschool-link-banner{
  width: 95%;
  margin: 18px auto;
}

/* 中津市ブレザーバナー */
.nakatsu-seifuku-banner{
  width: 92%;
  margin: 0 auto;
}

/* 各制服ページへのバナー */
.seifuku-link-banner{
  width: 92%;
  margin: 0 auto 15px;
}

.blazer-banner{
  flex-direction: column;
  margin-bottom: 5px;
}

.blazer-banner div{
  width: 100%;
  margin-bottom: 15px;
}

.blazer-banner div:last-of-type{
  margin-bottom: 5px;
}
  
/* -----------------------------------メイン上部分-----------------------------------------*/
.main-wrap{ margin: 15px 0 10px; flex-direction: column; }

.main-wrap img{ width: 100%; }

.main-left,.main-right{ width: 95%; margin: auto; }

.link-text{ font-size:1.3rem; }
  
.link-tennis,.link-tabletennis{ margin-top: 15px; }
  
/*--------パンくずリスト--------*/
.breadcrumb {
  margin: 15px 0 15px 12px;
  padding: 0;
  list-style: none;
}
  
.breadcrumb li {
  font-size: 1.3rem;
}

.margin-top{
  margin-top: 0;
}
  
/*------------------------------------アクセス部分----------------------------------------*/
  .fb-access{
    flex-direction: column;
    flex-flow: column-reverse;}
  
  .access{width: 98%;margin: 0 auto 20px;}
  
/*------------------------------------リンクバナー部分----------------------------------------*/

  /* -----------------------------
リンクバナー部分
--------------------------------*/
.seifuku-banner{
  width: 97%;
  margin: 0 auto 20px;
}

.link-top{
  width: 95%;
  flex-direction: column;
  margin: 0 auto;
}

.banner{
  width:95%;
  margin: 5px auto 0;
}

.seifuku-banner a{
  display: inline-block;
}
  
 /*------------------------------------フッター部分----------------------------------------*/ 
  footer{ text-align: center;margin-top: 3px; }

  /*------------------------------------
  フッターナビ部分
  -------------------------------------*/
  .footer-navi-li{ font-size: 1.2rem; }
  
  /*--------------------------------
  店舗情報
  ---------------------------------*/
  .store-info{ flex-direction: column; padding: 8px 0 10px; }

  .footer-logo{
    display: block;
  }

  .footer-logo img{
    width: 130px;
    padding: 0;}

  .store-info p{
    font-size:1.1rem;
    line-height: 1.3;
    color: #000;}

  .store{ font-size: 1.5rem; line-height: 1.3; }

  .ushigami{ padding: 0; border-right: none; }

  .yumetown{ margin: 8px 0 0 0 ; }

  .copyright{ font-size: 1.1rem; padding: 7px; }

  .gotop{ font-size: 1.3rem; }
  
}


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

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

-------------------------------------------------*/
@media screen and (min-width:561px) and (max-width:840px){
  .wrapper{ width: 100%; box-shadow: none; }
  .fb-pc{ display: none; }
  .fb-tb{ display: block;margin: auto; }
  .fb-sp{ display:  none;}
  .sp-br{ display: none;}

/*----------------------------------
申し込みダウンロード
---------------------------------*/
.download{
  padding: 16px 0;
}

.download a p{
  font-size: 2.8rem;
  padding: 12px 18px 14px;
}

.dl-footer{
  padding-bottom: 100px;
}
/* -------------------------------------------------------------------------------------

全体的な事

--------------------------------------------------------------------------------------*/
h1{
  font-size: 2.5rem;
}

.h1-span{
  font-size: 1.7rem;
}

.title-cap{
  font-size: 1.4rem;
}

.accbox{display: none;}
  
/*--------------------コロナ対策--------------------*/
.covid{
  width: 95%;
  border: solid 3px red;
}

.covid h2{
  font-size: 2.5rem;
  border-bottom: solid 3px red;
  padding-bottom: 8px;
}

.covid p{
  font-size: 2rem;
  margin: 12px 0 12px 0;
}
  
/* -------------------------------------------------------------------------------------

ヘッダー部分

--------------------------------------------------------------------------------------*/
#header{
  width: 100%;
  padding-bottom: 0px;
}

.top-text{
  font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.top-text span{
  display: none;
}

.header-title{
  padding-bottom: 0;
}


.header-logo{
  width: 25%;
  margin: 15px 15px 0 0;
}

.logo-image{
  width: 100%;
}

.header-text{
  margin: 0 0 0 22px;
  padding: 15px 0;
  box-sizing: border-box;
}
  
/* -----------------------------
ナビ部分
--------------------------------*/
.navi-li{
  font-size: 1.6rem;
}

  /*--------パンくずリスト--------*/
.breadcrumb {
  margin: 15px 0 12px 13px;
  padding: 0;
  list-style: none;
}
  
.breadcrumb li {
  font-size: 1.5rem;
}


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

メイン部分

--------------------------------------------------------------------------------------*/
.main-wrap{
  margin: 22px 0;
  box-sizing: border-box;
}

.link-text{
  font-size:1.3rem;
  line-height: 1.6em;
}

.link-tabletennis{
  margin-top: 13px;
}
  
/* -----------------------------
メイン下部分
--------------------------------*/

.main-bottom{
  padding: 10px 10px 7px;
  box-sizing: border-box;
}
  
/* -----------------------------
右側アクセス部分
--------------------------------*/
.map-title{
  font-size: 2rem;
  border-radius: 4px;
}
.access{
  width: 45%;
}


  
/*------------------------------------フッター部分----------------------------------------*/ 
  footer{ text-align: center;margin-top: 3px; }

  /*------------------------------------
  フッターナビ部分
  -------------------------------------*/
  .footer-navi-li{ font-size: 1.2rem; }
  
  /*--------------------------------
  店舗情報
  ---------------------------------*/
  .store-info{ flex-direction: column; padding: 8px 0 10px; }
  
  .footer-logo{
    display: block;
  }
  .footer-logo img{
    width: 150px;
    padding: 0;}

  .store-info p{
    font-size:1.2rem;
    line-height: 1.5;
    color: #000;}

  .store{ font-size: 1.8rem; line-height: 1.3; }

  .ushigami{ padding: 0; border-right: none; }

  .yumetown{ margin: 12px 0 0 0 ; }

  .copyright{ font-size: 1.3rem; padding: 7px; }

  .gotop{ font-size: 1.7rem; }
  


  
}