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

img{ width:100%; display: block;}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


.sp{
    display: none;
}
a{
    text-decoration: none;
    transition: 0.5s ;
    color: #000000;
}
img.object-fit-img{
    object-fit: cover;
    object-position:center; 
    font-family: 'object-fit: cover; object-position: center;'
}

input::placeholder {
    color: #dddddd;
  }

p{
  text-align:justify; 
  text-justify:inter-ideograph; 
  text-justify:inter-character; 
  word-wrap:break-word; 
  overflow-wrap:break-word;
}



  .popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
  }
  .popup.is-show {
    opacity: 1;
    visibility: visible;
  }
  .popup-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    max-width: 600px;
    padding: 50px;
    background-color: #fff;
    z-index: 2;
  }
  .popup-inner img {
    width: 100%;
  }
  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
  .close-btn i {
    font-size: 20px;
    color: #333;
  }
  .black-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    z-index: 1;
    cursor: pointer;
  }


/*font*/
.min{font-family: 'BIZ UDPMincho', serif;}
.gos{font-family: 'BIZ UDPGothic', sans-serif;}

html{
    font-size: 62.5%;
    font-family: 'Zen Maru Gothic', sans-serif;
}
body{
    font-size:1.6rem;
    color: #000000;
    overflow: hidden;
}


/*COMMON*/


.overflow-wrap {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: 0 auto;
  scrollbar-width: auto; /* Firefox用 */
}

/* 強制的にスクロールバーを可視化したいときに */
.overflow-wrap::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
.overflow-wrap::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.overflow-wrap::-webkit-scrollbar-thumb {
  background: #ffe31c;
}
.overflow-wrap::-webkit-scrollbar-thumb:hover {
  background: #ffe31c;
}

/*CONTENT*/
body{ background-color: #faf8f5; }
.inpage-navi{ background-color: #faf8f5; padding:5.0rem 0; position: relative;}
.inpage-navi ul{display: flex; width: 80%; margin: 0 auto; justify-content: space-between;}
.inpage-navi li{ width: 48%;}
.inpage-navi:before{ content: ''; width:12.0rem; height:3.3rem; display:block; background-image:url(images/dec_inpage-navi_before.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; bottom:2.5rem; left:2.5rem}
.inpage-navi:after{ content: ''; width:6.4rem; height:6.2rem; display:block; background-image:url(images/dec_inpage-navi_after.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:5.0rem; right:2.5rem}
.junior-swimming h2{ margin-bottom: 5.0rem;}
.junior-swimming ul{ width:75%; margin:0 auto; position: relative;}
.junior-swimming ul:before{content: ''; width:8.6rem; height:162.3rem; display:block; background-image:url(images/dec_junior-swimming_before.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:15.4rem; left:-9.6rem}
.junior-swimming ul:after{content: ''; width:9.9rem; height:175.6rem; display:block; background-image:url(images/dec_junior-swimming_after.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:40.5rem; right:-10.9rem}
.junior-swimming li{ margin-bottom: 5.0rem;}
.junior-swimming .tokuten{ background-color: #ffe31c; padding:5.0rem 0}
.junior-swimming .tokuten figure{ width:75%; position: relative; z-index: 2; margin:0 auto}
.junior-swimming .schedule{ position: relative; padding:5rem 0 10.0rem 0}
.junior-swimming .schedule:before{ content:''; display: block; width:100%; height:60rem; background-color: #ffe31c; clip-path: polygon(0 0,100% 0,100% 60%,0 100% ); z-index: 0; position: absolute; top:0; left:0}
.junior-swimming .schedule figure { position: relative; z-index: 2; width:90%; margin:0 auto}
.seijin-course .introduction figure{ width:80%; margin:0 auto 5.0rem auto; transform: translateX(2.5rem); position: relative;}
.seijin-course .introduction figcaption{ position: absolute; width:18%; right:5%; top:5%}
.seijin-course .program-table{ padding:5.0rem 0; position: relative;}
.seijin-course .program-table figure{ width:80%; margin:0 auto; position: relative;}
.seijin-course .program-table figure:before{ content:''; width:24.3rem; height:24.3rem; display: block; background-image: url(images/dec_seijin_program_title_before.png); background-size: contain; position: absolute; top:-5.0rem; left:-7.5rem}
.seijin-course .program-table figcaption{ width:30%; margin:0 auto 2.5rem auto;}
/*.seijin-course .program-table .overflow-wrap{ overflow: hidden;}*/
.seijin-course .program-table:before{ content:''; width:2.6rem; height:2.6rem; display: block; background-image: url(images/dec_seijin_program_before.png); background-size: contain; position: absolute; bottom:20rem; left:2.5%}
.seijin-course .program-table:after{ content:''; width:7.6rem; height:12.4rem; display: block; background-image: url(images/dec_seijin_program_after.png); background-size: contain; position: absolute; top:10rem; right:1.5%}
.matanity-course { position: relative;}
.matanity-course .introduction { position: relative;}
.matanity-course .introduction figure{ width:80%; margin:0 auto 5.0rem auto; transform: translateX(2.5rem); position: relative; z-index: 2;}
.matanity-course .introduction figcaption{ position: absolute; width:18%; right:3.5%; top:5%}
.matanity-course .spot{ width:24.3rem; height:24.3rem; position: absolute; bottom:-7.5rem; z-index: 1;}
.matanity-course .introduction:before{ content: ''; width:2.6rem; height:2.6rem; display:block; background-image:url(images/dec_matanity_before.png); background-size:contain; background-position:center;  background-repeat: no-repeat; left:2.5rem; top:7.5rem; position: absolute;}
.matanity-course .introduction:after{ content: ''; width:3.3rem; height:3.3rem; display:block; background-image:url(images/dec_matanity_after.png); background-size:contain; background-position:center;  background-repeat: no-repeat; right:5rem; bottom:2.5rem; position: absolute;}

.baby-course { position: relative; z-index: 2;}
.baby-course .introduction { position: relative; padding-bottom:17.5rem}
.baby-course .introduction figure{ width:80%; margin:0 auto 5.0rem auto; transform: translateX(2.5rem); position: relative; z-index: 2;}
.baby-course .introduction figcaption{ position: absolute; width:18%; right:3.5%; top:5%}
.baby-course .introduction:before{ content: ''; width:24.3rem; height:24.3rem; display:block; background-image:url(images/dec_baby_before.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; bottom:2.5rem; left:5.0rem}
.baby-course .introduction:after{ content: ''; width:24.8rem; height:11.0rem; display:block; background-image:url(images/dec_baby_after.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; bottom:5.0rem; right:5.0rem}
.senior-swimming .trial { position: relative; padding:7.5rem 0}
.senior-swimming .trial .inner{ width:75%; margin:0 auto; position: relative; z-index: 2;}
.senior-swimming .trial:before{ content: ''; width:100%; height:116.1rem; clip-path: polygon(0 0,100% 0,100% 100%, 0 87.5% ); background-color: #ffe31c; position: absolute; top:0; left:0; z-index: 1;}
.senior-swimming .trial .inner:before{content: ''; width:9rem; height:168.3rem; display:block; background-image:url(images/dec_seijin_trial_before.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:10.4rem; left:-10rem}
.senior-swimming .trial .inner:after{content: ''; width:7.5rem; height:91.8rem; display:block; background-image:url(images/dec_seijin_trial_after.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:40.5rem; right:-8.5rem}
.senior-swimming .tokuten figure{ width:75%; position: relative; z-index: 2; margin:0 auto}
.senior-swimming .tokuten { padding-bottom:5.0rem}

.access { padding-bottom: 5.0rem;}
.access h2{ margin-bottom: 5.0rem;}
.access .map{ display: flex; width:90%; margin:0 auto 5.0rem auto; max-width:900px; justify-content: space-between; align-items: flex-end; position: relative;}
.access .map iframe{ width:55%; aspect-ratio: 5 / 4; position: relative; z-index: 2;}
.access .map .text{ width:40%;}
.access .map .text h3{ width:25%; position: absolute; top:2.5rem; z-index: 1;}
.access .map.sennan .text h3 { transform: translateX(-20%);}
.access .map.ozaki .text h3 { transform: translateX(80%);}
.access .map.ozaki{ flex-direction: row-reverse;}
.access .map .branding{ margin-bottom:1.5rem}
.access .map dt{ font-size:2.1rem; font-weight: bold; display: flex; align-items: center; white-space: nowrap;}
.access .map dt i{ font-size:1.6rem; font-weight: bold; display: block; display: flex; align-items: center; justify-content: center; border-radius:0.5rem; width:100%; padding:0.5rem 0; margin-left:1.5rem; line-height: 1; background-color: #ffe31c; border:2px solid #000000}
.access .map .tel{ font-size:3.2rem; line-height: 1;}
.access .map .tel strong{ font-size:4.8rem; font-weight: bold; letter-spacing: 0.25rem;}
.access .map .location{ font-size:1.8rem; margin-bottom: 1.5rem;}
.access .map .parking{ font-size:2.0rem; text-align: center; font-weight: bold; padding:0.5rem 0; border:2px solid #000000; line-height: 1; display: flex; align-items: center; justify-content: center;}
.access .map .parking:before{content: ''; width:2.4rem; height:2.4rem; display:block; background-image:url(images/icon_parking.png); background-size:contain; background-position:center;  background-repeat: no-repeat; margin-right: 0.5rem; transform: translateY(0.15rem);}

#footer{ background-color: #ffe31c; padding:7.5rem 0 15.0rem 0; text-align: center;}
#footer .contact{width:80%; max-width:800px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 5.0rem;}
#footer .contact dt{ font-size:1.8rem; font-weight: bold; text-align: center; border-bottom:1px solid #000000; padding:1.5rem 0; margin-bottom: 5.0rem; width:100%;}
#footer .contact dd{ height:7.0rem;; padding:0 2.5rem}
#footer .contact dd img{ height: 100%; object-fit: contain;}
.copyright{ text-align: center; font-size:1.2rem; letter-spacing: 0.25rem; font-weight: 600;}
.fix-bottom{ position: fixed; max-width:900px; width:80%; margin: 0 auto; left:0; right:0; bottom:0; z-index: 5;}

/*responsive*/
@media screen and (max-width:1000px){
  html{font-size:1vw}
}
@media screen and (max-width:769px){
}
@media screen and (max-width:599px){
  html{ font-size:2vw;line-height: 1.5;}
  .pc{ display: none!important;}
  .sp{ display: block!important;}
.inpage-navi{ padding:2.5rem 0}
.inpage-navi:before,
.inpage-navi:after{ display: none;}
.inpage-navi ul{ width:97.5%}
.inpage-navi li{ width:50%}
.junior-swimming ul{ width:90%}
.junior-swimming ul:before,
.junior-swimming ul:after{ display: none;}
.junior-swimming li{ margin-bottom: 2.5rem;}
.junior-swimming .tokuten figure{ width:90%;padding-bottom: 0;}
.junior-swimming .schedule{ padding:0 0 5.0rem 0}
.junior-swimming .schedule:before{ height: 30rem;}
.seijin-course .introduction figure{ width:90%;transform:translateX(0)}
.seijin-course .introduction figcaption{ width:25%; top:3%}
.program-table .overflow-wrap{overflow-x: scroll;overflow-y: hidden; }
.program-table .overflow-wrap img{ width:200%}
.program-table figure{ width:90%}
.program-table figcaption{ width:40%}
.seijin-course .program-table:after{ top:-3rem}
.seijin-course .program-table figure:before{ width:25%; aspect-ratio: 1 / 1; height: auto; left:0}
.seijin-course .program-table figure{ width:90%}
.seijin-course .program-table figcaption{ width:45%}
.matanity-course .introduction { margin-top:-5.0rem}
.matanity-course .introduction figure{ width:90%;transform:translateX(0)}
.matanity-course .introduction figcaption{ width: 26%;top: 5%; right: 4.5%;}
.matanity-course .introduction:before,
.matanity-course .introduction:after{ display: none;}
.baby-course .introduction { margin-top:-5.0rem}
.baby-course .introduction figure{ width:90%;transform:translateX(0)}
.baby-course .introduction figcaption{ width: 26%;top: 15%; right: 4.5%;}
.baby-course .introduction:before,
.baby-course .introduction:after{ display: none;}
.baby-course .introduction{ padding-bottom: 0;}
.senior-swimming .trial .inner{ width:90%}
.senior-swimming .trial .inner img{ position: relative; z-index: 2;}
.senior-swimming .trial:before{ height:75rem}
.senior-swimming .trial .inner:before{ width:12.7%; background-position: top; left:-2.0rem; top:0; z-index: 1;}
.senior-swimming .trial .inner:after{ width:12.7%; background-position: top; right:-2.5rem; top:0; z-index: 1;}
.senior-swimming .tokuten figure{ width:90%}


.access h2{ margin-bottom: 7.5rem;}
.access .map{ width:90%; display: block; position: relative; margin-bottom: 10rem;}
.access .map iframe{ width:100%; margin-bottom: 2.5rem;}
.access .map .text{ width:100%}
.access .map .text h3{ top:-4rem; width:40%; z-index: 5;}
.access .map.ozaki .text h3 {right:-7.5%; width:40%; z-index: 5; transform: translateX(0);}
.access .map dt{ font-size:3.0rem}
.access .map .tel strong{ font-size: 6.0rem; letter-spacing: 0.5rem;}
.access .map .tel a{ font-weight: 600;}
.access .map .parking{ font-size:2.4rem}

#footer { padding:5.0rem 0 12.5rem 0}
#footer .contact dd{ padding: 0 1.5rem;}
.copyright{ letter-spacing: 0.1rem;}
.fix-bottom{ width:95%}
}
@media screen and (max-width:340px){
}



/*ハンバーガーメニュー*url(http://127.0.0.1:5500/images/pic_school_02.png)/
.hamburger {
background-color: #ffffff;
display : block;
position: fixed;
z-index : 3000;
right : 0;
top   : 0;
width : 42px;
height: 42px;
cursor: pointer;
text-align: center;
}
.hamburger span {
display : block;
position: absolute;
width   : 30px;
height  : 3px ;
left    : 6px;
background : #070030;
-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);
}  
.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);
}
nav.globalMenuSp {
position: fixed;
z-index : 2999;
top  : 0;
left : 0;
color: #070030;
background: rgba(255, 255, 255, 0.95);
text-align: center;
transform: translateY(-100%);
transition: all 0.6s;
width: 100%;
}
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
  transform: translateY(0%);
  }
  /*メニューレイアウト*/
  
  .globalMenuSp .wrap{ z-index:99999; overflow-y: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch;}
  .globalMenuSp .wrap .block{ width:80%; margin:0 auto;}
  .globalMenuSp .wrap .branding{ width:80%; margin:5.0rem auto;}
  .globalMenuSp .wrap .branding img{ display: block; width:100%}
  .globalMenuSp .wrap .tel{ display: flex; justify-content: space-around; flex-wrap: wrap;}
  .globalMenuSp .wrap .tel li{ width:85%; margin-bottom:1.5rem}
  .globalMenuSp .wrap .tel li img{ width:100%; display: block;}
  .globalMenuSp .wrap .navigation{ width:75%; margin:0 auto; padding:5.0rem 0}
  .globalMenuSp .wrap .navigation a{ font-size:1.8rem; display: block; text-align: left; padding: 1.5rem; background-color: #184e77; color: #ffffff; border-radius:0.5rem; margin:0.5rem 0; display: flex; align-items: center; justify-content: space-between;}
  .globalMenuSp .wrap .navigation a small{ font-weight: bold; font-size: 1.2rem;}