@charset "UTF-8";

/* CSS Document */


/*
Theme Name:  北摂卓球カレッジ2025
Theme URI:
Description: A theme by <a href="https://hokusetsu-ttc.com">北摂卓球カレッジ</a>.
Version: 1.0
Author: d-strive
Author URI: https://www.d-strive.com
*/

html{
font-size: 62.5%; /*ベースを10pxにしています*/
}

body{
color: #333;
font-size: 10px;
font-size: 1.0rem;/*10px*/
overscroll-behavior: none;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
}



/* 共通css--------------------- */

* {
box-sizing: border-box;
}

.clear {
  clear: left;
}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}


img{
vertical-align: bottom;
}

a{
color: #333;
text-decoration: none;
}


a:hover{
transition: all 0.5s;
opacity: 0.8;
}



a img:hover{
transition: all 0.5s;
opacity: 0.8;
}


a img {
border-width: 0px;
border-style: none;
border-color: #fff;
background: transparent;
}

a.anchor{
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

.pc_none{
display:none;
}


.contents{
width:1000px;
margin:0 auto;
}

.all_boxs{
margin-bottom: 20px;
padding-bottom: 40px;
}

.all_box{
}


.all_box_l{
float: left;
width: 485px;
height: auto;
}

.all_box_r{
float: right;
width: 485px;
height: auto;
}

.all_box img,
.all_box img{
margin-bottom: 30px;

}




.all_boxs img{
width: 100%;
}


p{
font-size: 15px;
font-size: 1.5rem;
line-height: 1.5;
}

.pc_none{
display: none;
}


.postnavi{
font-size: 12px;
margin: 0 auto;
padding: 40px 0px;
}

.postnavi a{
}

.next{
float:right;
padding: 5px 10px;
}

.prev{
float:left;
padding: 5px 10px;
}


.thumb{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit: cover;
}


/* header----------------- */
.header_wrap{
width:100%;
height:260px;
border-top:5px solid #BD272D;
background-color: #fff;
}


.header{
width:1000px;
margin: 0 auto;
text-align: center;
}

.header img{
width: 100%;
}

.h_logo{
float: left;
width: 300px;
height: auto;
}

.h_logo a{
display: block;
}

.h_top{
color:#000;
margin:20px 0px 30px 0px;
}

.h_adress{
float: right;
}

.h_adress .fas{
font-size: 20px;
margin-right: 8px;
margin-top: 2px;
 }

.h_adress .fa{
margin-right: 10px;

}

.h_tel{
float: left;
font-size: 30px;
margin: 8px 15px 0 0;
line-height: 1;
}

.h_tel span{
float: right;
font-size: 12px;
}

.h_mail{
float: left;
}

.h_mail a{
float: left;
vertical-align: middle;
color:  #fff;
background-color:  #2E3178;
margin-top: 5px;
padding: 8px 15px 10px 15px;
border-radius: 5px;
}


.h_adress a{
}

.h_jusho{
float: left;
margin-top: 10px;
}


.h_navi_01 ul li,
.h_navi_02 ul li{
float: left;
width: 245px;
height: 45px;
font-size: 18px;
background-color: #bd272d;
margin-right: 6px;
margin-bottom: 5px;
}

.h_navi_01 ul li:last-child,
.h_navi_02 ul li:last-child{
margin-right:0px;
}

.h_navi_01 ul li a,
.h_navi_02 ul li a{
display: block;
color: #fff;
line-height: 45px;
}

.h_navi_01 ul li a:hover,
.h_navi_02 ul li a:hover{
background-color:  #A52029;
}

.fa-external-link-alt{
margin-left: 5px;}

/*　ハンバーガーボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 18px;
  width : 42px;
  height: 42px;
  background-color:   #A52029;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background :#fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 20px;
  left: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
  background : #fff;
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
      background : #fff;
}

nav.globalMenuSp {
position: fixed;
z-index : 2;
  top  : 0;
  left : 0;
  color: #000;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
  height: 100vh;
}

nav.globalMenuSp ul {
  margin-left: auto;
  padding-top: 58px;
  width: 80%;
  height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
  background: rgba(165,32,41,0.9);
  background: rgba(165,32,41,0.9);
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#A52029;
}

nav.globalMenuSp ul li a {
 font-size: 0.9rem;
  display: block;
  color: #fff;
  padding: 0.8em 0;
  text-decoration :none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}



/* footer----------------- */


.footer{
width: 100%;
background-color: #7F272D;
color: #fff;
font-size: 15px;
line-height: 1.5;
padding-top: 20px;
}

.f_boxs{
width: 1000px;
margin: 0 auto;
padding: 20px 0;
}

.fb_l{
float:left;
}

.f_company{
font-size:20px;
margin-bottom: 15px;
}


.fb_r{
float:right;
}

.fb_r ul{
float:left;
margin-left: 70px;
}

.fb_r ul li{
margin-bottom: 15px;
}

.fb_r ul li a{
font-size: 16px;
color: #fff;
}

.fa-twitter,.fa-youtube,.fa-facebook,.fa-line{
font-size:18px;
margin: 15px 5px 0 10px;
}


.sns a{
display: inline-block;
color: #fff;
}



.copy{
width: 100%;
font-size: 12px;
text-align: center;
margin: 0 auto;
background-color: #000;
padding: 20px 0;
}



/* mv_wrapper---------------- */

.mv_wrapper{
width: 100%;
margin-bottom: 80px;
}

input[type="radio"]{
  display: none;
}

.slide {
position: relative;
width: 100%;
height: 400px;
object-fit: cover;
}

.slide img {
position: absolute;
top: 0;
left: 0;
width      : 100%;
height     : 400px;
object-fit: cover;
opacity: 0;
}


.thumbnail_wrap{
width: 100%;
background: #2E3178;
}

.thumbnail_boxs{
width: 1000px;
margin: 0 auto;
padding-top:10px;
}

.thumbnail_l{
float: left;
width: 600px;
}

.thumbnail_r{
float: right;
width: 400px;
}


.thumbnail img {
width: 116px;
height: 55px;
object-fit: cover;
margin-right: 4px;
margin-bottom: 10px;
cursor: pointer;
}

.thumbnail li{
float: left;
}

.thumbnail_r img{
width: 100%;
}

.thumbnail_r ul{
text-align: right;
}

.thumbnail_r ul li{
display: inline-block;
width: 46%;
margin-top: 6px;
margin-left: 5px;
}


 /*=== ただのスライドの時だけ
.slide img {
display    : block;
position   : absolute;
width      : 100%;
height     : 400px;
object-fit: cover;
opacity    : 0;
animation  : slideAnime 40s ease infinite;
}

 /*=== スライドのアニメーションを段差で開始する =========
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 10s }
.slide img:nth-of-type(3) { animation-delay: 20s }
.slide img:nth-of-type(4) { animation-delay: 30s }

 /*=== スライドのアニメーション =========================
@keyframes slideAnime{
   0% { opacity: 0 }
   4% { opacity: 1 }
  25% { opacity: 1 }
  29% { opacity: 0 }
 100% { opacity: 0 }
}
---*/

@keyframes thumb1 {
 0% {
  filter: grayscale(0%);
 }
 6% {
  filter: grayscale(100%);
 }
 10% {
  filter: grayscale(100%);
 }
 28% {
  filter: grayscale(100%);
 }
 37% {
  filter: grayscale(0%);
 }
 100% {
  filter: grayscale(0%);
 }
}
@keyframes thumb2 {
 0% {
  filter: grayscale(0%);
 }
 6% {
  filter: grayscale(100%);
 }
 10% {
  filter: grayscale(100%);
 }
 28% {
  filter: grayscale(100%);
 }
 37% {
  filter: grayscale(0%);
 }
 100% {
  filter: grayscale(0%);
 }
}
@keyframes thumb3 {
 0% {
  filter: grayscale(0%);
 }
 6% {
  filter: grayscale(100%);
 }
 10% {
  filter: grayscale(100%);
 }
 28% {
  filter: grayscale(100%);
 }
 37% {
  filter: grayscale(0%);
 }
 100% {
  filter: grayscale(0%);
 }
}

@keyframes thumb4 {
 0% {
  filter: grayscale(0%);
 }
 6% {
  filter: grayscale(100%);
 }
 10% {
  filter: grayscale(100%);
 }
 28% {
  filter: grayscale(100%);
 }
 37% {
  filter: grayscale(0%);
 }
 100% {
  filter: grayscale(0%);
 }
}

@keyframes thumb5 {
 0% {
  filter: grayscale(0%);
 }
 6% {
  filter: grayscale(100%);
 }
 10% {
  filter: grayscale(100%);
 }
 28% {
  filter: grayscale(100%);
 }
 37% {
  filter: grayscale(0%);
 }
 100% {
  filter: grayscale(0%);
 }
}

@keyframes slideshow1 {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
25% {
  opacity: 1;
 }
35% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

@keyframes slideshow2 {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
25% {
  opacity: 1;
 }
35% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

@keyframes slideshow3 {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
25% {
  opacity: 1;
 }
35% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

@keyframes slideshow4 {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
25% {
  opacity: 1;
 }
35% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

@keyframes slideshow5 {
 0% {
  opacity: 0;
 }
 10% {
  opacity: 1;
 }
25% {
  opacity: 1;
 }
35% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

/*ページを開いたとき＆一つ目のサムネイルをクリックしたとき*/
#img1:checked ~ .thumbnail label[for="img1"] img {
 animation: thumb1 40s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img1:checked ~ .thumbnail label[for="img2"] img {
 animation: thumb1 40s linear infinite both;
 animation-delay: 8s;
}
#img1:checked ~ .thumbnail label[for="img3"] img {
 animation: thumb1 40s linear infinite both;
 animation-delay: 16s;
}
#img1:checked ~ .thumbnail label[for="img4"] img {
 animation: thumb1 40s linear infinite both;
 animation-delay: 24s;
}
#img1:checked ~ .thumbnail label[for="img5"] img {
 animation: thumb1 40s linear infinite both;
 animation-delay: 32s;
}

#img1:checked ~ .slide img {
 animation: slideshow1 40s linear infinite;
}
#img1:checked ~ .slide img:nth-child(1) {
 animation-delay: 0s;
}
#img1:checked ~ .slide img:nth-child(2) {
 animation-delay: 8s;
}
#img1:checked ~ .slide img:nth-child(3) {
 animation-delay: 16s;
}
#img1:checked ~ .slide img:nth-child(4) {
 animation-delay: 24s;
}
#img1:checked ~ .slide img:nth-child(5) {
 animation-delay: 32s;
}

/*5つ目のサムネイルをクリックしたとき*/
#img5:checked ~ .thumbnail label[for="img1"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 8s;
}
#img5:checked ~ .thumbnail label[for="img2"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 16s;
}
#img5:checked ~ .thumbnail label[for="img3"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 24s;
}
#img5:checked ~ .thumbnail label[for="img4"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 32s;
}
#img5:checked ~ .thumbnail label[for="img5"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}

#img5:checked ~ .slide img {
 animation: slideshow2 40s linear infinite;
}
#img5:checked ~ .slide img:nth-child(1) {
 animation-delay: 8s;
}
#img5:checked ~ .slide img:nth-child(2) {
 animation-delay: 16s;
}
#img5:checked ~ .slide img:nth-child(3) {
 animation-delay: 24s;
}
#img5:checked ~ .slide img:nth-child(4) {
 animation-delay: 32s;
}
#img5:checked ~ .slide img:nth-child(5) {
 animation-delay: 0s;
}

/*4つ目のサムネイルをクリックしたとき*/
#img4:checked ~ .thumbnail label[for="img1"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 16s;
}
#img4:checked ~ .thumbnail label[for="img2"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 24s;
}
#img4:checked ~ .thumbnail label[for="img3"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 32s;
}
#img4:checked ~ .thumbnail label[for="img4"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img4:checked ~ .thumbnail label[for="img5"] img {
 animation: thumb2 40s linear infinite both;
 animation-delay: 8s;
}

#img4:checked ~ .slide img {
 animation: slideshow3 40s linear infinite;
}
#img4:checked ~ .slide img:nth-child(1) {
 animation-delay: 16s;
}
#img4:checked ~ .slide img:nth-child(2) {
 animation-delay: 24s;
}
#img4:checked ~ .slide img:nth-child(3) {
 animation-delay: 32s;
}
#img4:checked ~ .slide img:nth-child(4) {
 animation-delay: 0s;
}
#img4:checked ~ .slide img:nth-child(5) {
 animation-delay: 8s;
}

/*3つ目のサムネイルをクリックしたとき*/
#img3:checked ~ .thumbnail label[for="img1"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 24s;
}
#img3:checked ~ .thumbnail label[for="img2"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 32s;
}
#img3:checked ~ .thumbnail label[for="img3"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img3:checked ~ .thumbnail label[for="img4"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 8s;
}
#img3:checked ~ .thumbnail label[for="img5"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 16s;
}

#img3:checked ~ .slide img {
 animation: slideshow4 40s linear infinite
}
#img3:checked ~ .slide img:nth-child(1) {
 animation-delay: 24s;
}
#img3:checked ~ .slide img:nth-child(2) {
 animation-delay: 32s;
}
#img3:checked ~ .slide img:nth-child(3) {
 animation-delay: 0s;
}
#img3:checked ~ .slide img:nth-child(4) {
 animation-delay: 8s;
}
#img3:checked ~ .slide img:nth-child(5) {
 animation-delay: 16s;
}


/*2つ目のサムネイルをクリックしたとき*/
#img2:checked ~ .thumbnail label[for="img1"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 32s;
}
#img2:checked ~ .thumbnail label[for="img2"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 0s;
 cursor: auto;
}
#img2:checked ~ .thumbnail label[for="img3"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 8s;
 cursor: auto;
}
#img2:checked ~ .thumbnail label[for="img4"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 16s;
}
#img2:checked ~ .thumbnail label[for="img5"] img {
 animation: thumb3 40s linear infinite both;
 animation-delay: 24s;
}

#img2:checked ~ .slide img {
 animation: slideshow5 40s linear infinite;
}
#img2:checked ~ .slide img:nth-child(1) {
 animation-delay: 32s;
}
#img2:checked ~ .slide img:nth-child(2) {
 animation-delay: 0s;
}
#img2:checked ~ .slide img:nth-child(3) {
 animation-delay: 8s;
}
#img2:checked ~ .slide img:nth-child(4) {
 animation-delay: 16s;
}
#img2:checked ~ .slide img:nth-child(5) {
 animation-delay: 24s;
}



/* info_wrapper---------------- */

.info_wrap{
width: 100%;
margin-bottom: 100px;
}

.info_boxs{
width: 1000px;
margin: 0 auto;
}

.info_tit {
border-bottom: 2px solid #bd272d;
padding: 5px;
margin-bottom: 20px;
}

.info_tit h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #bd272d;
margin-bottom: 3px;
}

.info_boxs table{
width:100%;
border-collapse: collapse;
font-size: 16px;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}

.info_boxs table th,
.info_boxs table td {
padding: 20px 0;
border-top: solid 1px #555;
border-bottom: solid 1px #555;
}

.info_boxs table th:first-child{
border-top: none;
}

.info_boxs table td:last-child{
border-top: none;
}

.info_boxs table th {
width: 20%;
padding-left: 20px;
}

.info_boxs table td {
width:80%;
}

.info_link{
text-align: right;
font-size: 12px;
}

.t_tit_list{
font-weight: 800;
}

.news_box{
width: 1000px;
margin: 0 auto;
padding: 50px 0;
}

.news_date{
font-size: 15px;
margin-bottom: 20px;
}

.news_tit{
font-size: 18px;
font-weight: 800;
margin-bottom: 40px;
}
.news_txt{
font-size: 18px;
line-height: 1.5;
}

/* banner_wrapper---------------- */
.banner_wrap{
width: 100%;
margin-bottom: 100px;
}

.banner_box{
width: 1000px;
margin: 0 auto;
padding: 50px 0;
}

/* blog_wrapper---------------- */
.blog_wrap{
width: 100%;
margin-bottom: 100px;
}

.blog_boxs{
width: 1000px;
margin: 0 auto;
}

.blog_tits {
border-bottom: 2px solid #2e3178;
padding: 5px;
margin-bottom: 40px;
}

.blog_tits h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #2e3178;
margin-bottom: 3px;
}

.re_box{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

.blog_box{
float: left;
width: 318px;
height: 400px;
border: 1px solid #eee;
margin-right: 20px;
position: relative;
margin-bottom: 20px;
}

.blog_box img{
width: 100%;
object-fit: cover;
}

.blog_box:last-child{
margin-right: 0px;
}


.blog_box02{
width: 320px;
height: 450px;
border: 1px solid #eee;
position: relative;
margin-bottom: 20px;
}

.blog_box02 img{
width: 100%;
height: 240px;
object-fit: cover;
}

.blog_l img{
width: 100%;
object-fit: cover;
}



.blog_r{
padding: 20px;
}

.blog_date{
font-size: 15px;
margin-bottom: 10px;
}

.blog_tit{
font-size: 16px;
margin-bottom: 15px;
}

.blog_txt{
font-size: 15px;
line-height: 1.5;
margin-bottom: 20px;
display: block;
}

.blog_more{
font-size: 10px;
position: absolute;
right: 20px;
bottom: 20px;
}

.blog_link{
width: 1000px;
font-size: 12px;
margin: 0 auto;
}


.blog_link_next{
float: right;
}

.blog_link_prev{
float:left;
}

.blog_list_date{
font-size: 15px;
margin-bottom: 20px;
}

.blog_list_tit{
font-size: 18px;
font-weight: 800;
margin-bottom: 40px;
}

.blog_list_boxs{
width: 900px;
margin: 0 auto;
padding-bottom: 50px;
}

.blog_list_l{
float: left;
width: 350px;
height: auto;
}

.blog_list_l img{
width: 100%;
}

.blog_list_r{
float: right;
font-size: 16px;
line-height: 2;
width: 500px;
}


 /* ボックス全体リンク */
.blog_box {
    position: relative;
    z-index: 1;
}
.blog_box a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2;
}
.blog_box:hover {
    transition: all 0.5s;
    filter:alpha(opacity=70);/* IE 6,7*/
    -ms-filter: "alpha(opacity=70)";/* IE 8,9 */
    -moz-opacity:0.7;/* FF , Netscape */
    -khtml-opacity: 0.7;/* Safari 1.x */
    opacity:0.7;
    zoom:1;/*IE*/
}

/* common_wrapper---------------- */

.common_wrap{
width: 100%;
background-color: #bd272d;
padding: 80px 0 100px 0;
}

.hello_boxs,
.prevention_boxs,
.contact_boxs{
width: 1000px;
margin: 0 auto;
}

.hello_box,
.prevention_boxs{
margin-bottom: 100px;
}

.hello_l{
float: left;
height: auto;
width: 480px;

}

.hello_l img{
width: 100%;
text-align: center;
}

.hello_r{
float: left;
width: 480px;
height: auto;
padding: 0 35px;
font-size: 18px;
line-height: 1.8;
color: #fff;
}

.hello_r p{
display: block;
margin: 35px 0;
}

.hello_r a{
display: block;
width: 440px;
height: 56px;
line-height: 56px;
text-align: center;

}

.sp_hello{
clear: both;
}

.sp_hello a{
display: block;
padding: 11px 0;
font-size: 14px;
color: #bd272d;
text-align: center;
background-color: rgba(255,255,255,1);
}

.button{
background:#fff;
color:#bd272d;
border:none;
position:relative;
font-size:18px;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
.button:hover{
background:#fff;
color:#bd272d;
opacity: 1;
}
.button:before,.button:after{
content:'';
position:absolute;
top:2px;
right:0;
height:2px;
width:0;
background: #bd272d;
transition:400ms ease all;
}
.button:after{
right:inherit;
top:inherit;
left:0;
bottom:2px;
}
.button:hover:before,.button:hover:after{
width:100%;
transition:800ms ease all;
}



.prevention_box{
font-size: 15px;
line-height: 1.5;
color: #bd272d;
}

.prevention_box img{
width: 100%;
margin-bottom: 20px;
}

.protection_box1{
margin-bottom: 20px;
}

.pb_bg{
padding: 30px 20px 20px 20px;
background-color: rgba(255,255,255,0.8)
}

.pbox_01_l{
width: 539px;
margin: 0 auto 20px;
}

.pbox_01_r{
width: 539px;
margin: 0 auto;
}

.pbox_01{
width: 490px;
height: 250px;
margin-right: 20px;
}

.pbox_01 p{
font-size: 17px;
font-weight: 800;
}

.pbox_02{
float: left;
width: 235px;
height: 250px;
margin-right: 20px;
}

.pbox_03{
float: right;
width: 235px;
height: 250px;
}

.protection_box2{
}

.pbox_02_l{
float:left;
}

.pbox_02_r{
float:right;
}

.pbox_04{
float: left;
width: 235px;
height: 250px;
margin-right: 20px;
}

.pbox_05{
float: right;
width: 235px;
height: 250px;
}


.contact_box{
width: 1000px;
margin: 0 auto;
font-size: 15px;
line-height: 1.5;
color: #fff;
}

.contact_box h3{
font-size: 21px;
color: #ff0;
margin-bottom: 40px;
text-align: center;
}

.cb_l{
float:left;
text-align: left;
width: 500px;
font-size: 15px;
}

.cb_tel{
font-size: 25px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 5px;
}

.cb_tel .fa{
margin-right: 10px;
}

.cb_time{
margin-bottom: 10px;}

.cb_txt{
margin-bottom: 20px;}

.cb_mail{
color: #FFF;
font-size: 20px;
font-weight: bold;
text-align: center;
padding: 10px;
display: block;
background-color: #ffb83b;
padding: 10px 24px;
border-radius: 4px;
border-bottom: 4px solid #d37800;
}

.cb_mail:active {
transform: translateY(4px);
border-bottom: none;
}

.cb_mail .fas{
margin-right: 10px;
}

.cb_note{
font-size: 14px;
margin-bottom: 10px;
}

.cb_r{
float:right;
width: 480px;
}

.cb_r img{
width: 100%;
}

.cb_r ul li{
width: 44%;
text-align: left;
margin-left: 20px;
display: inline-block;
}

.mv_tit_wrap{
width:100%;
background-position: center;
background-image: url(img/sub_mv.png);
object-fit: cover;
background-repeat  : no-repeat;
margin-bottom: 80px;
background-color: #000;
}

.mv_tit_boxs{
width:1000px;
height: 100px;
margin: 0 auto;}

.mv_tit_boxs h2{
font-size: 18px;
font-weight: 800;
text-align: left;
color: #fff;
line-height: 100px;
}


/* coach_wrapper---------------- */
.coach_wrap{
width: 100%;
}
.coach_boxs{
width: 1000px;
margin: 0 auto;
}

.coach_tits {
border-bottom: 2px solid #000;
padding: 5px;
margin-bottom: 40px;
}

.coach_tits h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #000;
margin-bottom: 3px;
}

.version{
font-size: 15px;
line-height: 1.5;
margin-bottom: 40px;
}

.coach_box{
margin-bottom: 50px;
}

.coach_box img{
width: 100%;
}

.coach_box_l{
float: left;
width: 25%;
}

.coach_box_r{
float: right;
width: 70%;
}

.coach_info{
width: 100%;
height: auto;
padding: 15px;
font-size: 15px;
margin-bottom: 10px;
border: 1px solid #ccc;
line-height: 1.5;
}

.coach_info img{
margin-bottom: 20px;
}

.coach_name{
font-size: 18px;
margin-bottom: 10px;
}

.coach_type{
margin: 10px 0;
padding: 5px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

.coach_lesson{
margin: 10px 0;
padding: 5px 10px ;
background-color: #eee;
}

.coach_att{
margin: 10px 0;
padding: 5px 10px ;
background-color: #eee;
}



.coach_info table{
width:100%;
border-collapse: collapse;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}

.coach_info table th,
.coach_info table td {
padding: 8px;
text-align: left;
border-top: solid 1px #eee;
border-bottom: solid 1px #eee;
}

.coach_info table th:first-child{
border-top: none;
}

.coach_info table td:last-child{
border-top: none;
}


.coach_info table th {
width: 20%;
}

.coach_info table td {

}
/* lesson_wrapper---------------- */

.lesson_wrap{
width: 100%;
}

.lesson_boxs{
width: 1000px;
margin: 0 auto;
font-size: 16px;
}

.lesson_tits {
border-bottom: 2px solid #000;
padding: 5px;
margin-bottom: 40px;
}

.lesson_tits h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #000;
margin-bottom: 3px;
}

.lesson_cautions {
  line-height: 1.5em;
  margin: 0 0 2.0em 1.0em;
}

.border_plus {
  border: 1px solid #000;
  padding: 20px;
  margin: 0 0 20px 0;
}

.lesson_cautions li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style: decimal none outside;
}

.txt_red {
  color: #BD272D;
}

.marker {
  background: linear-gradient(transparent 70%, #ff99aa 70%);
}

.pc_none {
  display: none;
}

.version{
font-size: 16px;
margin-bottom: 40px;
}

.lesson_box{
margin-bottom: 50px;
}

.lesson_box img{
width: 100%;
}

.lesson_box_02{
margin-bottom: 100px;
}

.lesson_box_02 img{
width: 100%;
}

.lesson_box table{
width:100%;
border-collapse: collapse;
font-size: 16px;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}

.lesson_box table th,
.lesson_box table td {
padding: 20px;
border-top: solid 1px #555;
border-bottom: solid 1px #555;
}

.lesson_box table th {
background-color: #eee;
}

.lesson_box_02 table{
width:100%;
border-collapse: collapse;
font-size: 16px;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
}

.lesson_box_02 table th,
.lesson_box_02 table td {
padding: 20px;
border-top: solid 1px #555;
border-bottom: solid 1px #555;
}

.lesson_box_02 table th {
background-color: #eee;
}


.lesson_box_02 table th {
width: 30%;
}

.lesson_box_02 table td {
width:60%;
}

/* hello_wrapper---------------- */
.hellos_wrap{
width: 100%;
}
.hellos_boxs{
width: 1000px;
margin: 0 auto;
font-size: 18px;
}

.hellos_box{
padding: 10px 60px;
}

.hellos_tits {
border-bottom: 2px solid #000;
padding: 5px;
margin-bottom: 40px;
}

.hellos_tits h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #000;
margin-bottom: 3px;
}

.ceo_hello_01{
font-size: 18px;
line-height: 2;
padding: 20px 60px 40px 60px;
}
.ceo_hello{
font-size: 18px;
line-height: 2;
padding: 40px 60px;
}

.ceo{
text-align: right;
line-height: 1.5;
margin-bottom: 100px;
}


.hellos_boxs table {
width: 100%;
border-collapse: collapse;
line-height: 1.5;
}
.hellos_boxs table th {
padding: 10px;
font-weight: bold;
background: #000;
color: #ffffff;
}

.hellos_boxs table td {
width: 33.333%;
padding: 10px;
text-align: center;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}


/* facility_wrapper---------------- */
.facility_wrap{
width: 100%;
}
.facility_boxs{
width: 1000px;
margin: 0 auto;
}

.facility_tits {
border-bottom: 2px solid #000;
padding: 5px;
margin-bottom: 40px;
}

.facility_tits h2 {
font-size: 18px;
font-weight: 800;
padding:5px 8px;
border-left: 6px solid #000;
margin-bottom: 3px;
}


.facility_box{
margin-bottom: 50px;
}

.fb_list_l{
margin-bottom: 80px;
}

.fb_boxs{
}

.fb_box{
float: left;
display: flex;
justify-content: center;
align-items: center;
width: 320px;
height: 90px;
margin-bottom: 15px;
margin-right: 20px;
border-radius:10px;
}

.fb_box:last-child{
margin-right: 0px;
}

.fb_box p{
color:#BD272D;
font-size: 16px;
font-weight: 800;
line-height: 1.5;
text-align: center;
}

.fb_box p span{
font-size: 13px;

}

.fb_sp_boxs{
margin-bottom: 20px;
}

.fb_sp_box{
float: left;
display: flex;
justify-content: center;
align-items: center;
width: 48%;
height: 70px;
margin-bottom: 15px;
border-radius:10px;
}

.fb_sp_box p{
color: #fff;
font-size: 14px;
line-height: 1.2;
text-align: center;
}

.fb_sp_box p span{
font-size: 13px;
}


.fb_l{
float:left;
}

.fb_r{
float:right;
}

.fb_bg_red_b{
border: solid 1px #BD272D;
}


.fb_bg_red{
background-color: #BD272D;
}

.fb_bg_dred{
background-color: #7F272D;
}


.facility_room_floor{
padding-bottom: 100px;
text-align: center;
}

.facility_room_floor img{
width: 100%;
}



.facility_room{
}

.facility_room img{
width: 100%;
}

.fr_l{
float: left;
width: 485px;
height: 430px;
}

.fr_r{
float: right;
width: 485px;
height: 430px;
}

.fr_l img,
.fr_r img{
margin-bottom: 15px;
}



.r_tit{
font-size: 18px;
margin-bottom: 15px;
}

.r_txt{
font-size: 15px;
line-height: 1.5;
}


.facility_txt{
font-size: 15px;
line-height: 1.5;
margin-bottom: 30px;
}


.map_box{
margin-bottom: 100px;
position: relative;
}

.map {
width: 1000px;
height: 450px;
margin: 0 auto;
}

.map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
/* filter: grayscale(1); */
}



/* contact_wrapper---------------- */
.contact_wrap{
width: 100%;
margin-bottom: 100px;
}
.contact_boxs01{
width: 700px;
margin: 0 auto;
padding: 0 20px;
}

.contact_boxs02{
width: 1000px;
margin: 0 auto;
padding: 0 0 150px 0;
}

.contact_boxs02 p{
padding: 20px 0;
line-height: 1.5;
}

.thanks_tit{
font-size: 20px;
font-weight: 800;
}

/* line 追加----------------- */

.line_boxs{
width: 100%;
background-color:#7F272D;
color: #fff;
font-size: 15px;
line-height: 1.5;
padding: 30px 0 0 0 ;
}

.line_boxs img{
width: 100%;
}

.line_box{
width: 1000px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
display: flex;
border: 1px solid #fff;
}

.line_box img{
width: 100%;
}


.line_box_01{
width: 30%;
font-size: 20px;
font-weight: 800;
color: #fff;
text-align: center;
background: #06c755;
padding: 40px 0 0 0 ;
border-radius: 10px;
}

.line_box_02{
width: 50%;
font-size: 18px;
padding: 30px 0 0 40px ;

}

.line_box_03{
width: 20%;
}

.line_box_03 img{
width: 60%;
}



.line_box_l{
float: left;
width: 65%;
font-size: 18px;
color: #333;
text-align: right;
padding: 30px 20px 0 0;
}


.line_info{
font-size: 20px;
font-weight: 800;
color: #fff;
padding: 40px 30px;
width: 180px;
text-align: center;
background: #06c755;
border-radius: 10px;
position: absolute;
top:20px;
left: 20px;
}

.line_box_r{
float: right;
width: 35%;
padding: 0 0 0 20px;
}

.line_box_r img{
width: 35%;
}


@media screen and (max-width:640px){

.line_boxs{
padding: 20px 0 0 0 ;
}

.line_box{
width: 100%;
border: none;
display: flex;
flex-flow: row wrap;
}

.line_box_01{
width: 80%;
font-size: 16px;
font-weight: 800;
color: #7F272D;
text-align: center;
background: #fff;
padding: 10px 0 10px 0 ;
border-radius: 10px;
margin: 0 auto;
}

.line_box_02{
width: 100%;
font-size: 14px;
text-align: center;
padding: 20px 0 10px 0;
margin: 0 auto;
}

.line_box_03{
width: 100%;
font-size: 14px;
text-align: center;
padding: 10px 0;
}

.line_box_03 img{
width: 100%;
}

.line_box_04{
width: 100%;
font-size: 14px;
text-align: center;
padding: 10px 0;
}

.line_box_04 a{
width: 40%;
margin: 0 auto;
display: block;
}

.sns{
margin: 0 auto;
}

.sns .fab{
font-size: 20px;
}

.sns a{
text-align: center;
}

}