@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}
.junior-swimming .schedule a{ width:37%; position: absolute; bottom:0; right:5%; display: block;}
.seijin-course .introduction figure{ width:80%; margin:-7.5rem auto 5.0rem auto; transform: translateX(2.5rem); position: relative;}
.seijin-course .introduction figcaption{ position: absolute; width:18%; right:5%; top:3%}
.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:7rem; height:168.3rem; display:block; background-image:url(images/dec_seijin_trial_before.png); background-size:contain; background-position:top;  background-repeat: no-repeat; position: absolute; top:0; left:-10rem}
.senior-swimming .trial .inner:after{content: ''; width:6.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:20.5rem; right:-8.5rem}
.senior-swimming .tokuten figure{ width:75%; position: relative; z-index: 2; margin:0 auto}
.senior-swimming .tokuten { padding-bottom:10.0rem; }
.ecc-junior .ecc-tokuten { padding-bottom: 7.5rem;}
.ecc-junior .ecc-tokuten h2{ margin-bottom: 7.5rem;}
.ecc-junior .ecc-tokuten .spot{ position: absolute; width:27%; top:-10rem; right:-14%;}
.ecc-junior .ecc-tokuten .ecc-tokuten-table{ width:83%; margin:0 auto; position: relative;}
.ecc-junior .ecc-tokuten .ecc-tokuten-table picture{ position: relative;}
.ecc-junior .ecc-ikkan{ background-color: #ffe31c; padding:7.5rem 0; position: relative;}
.ecc-junior .ecc-ikkan figure{ width:74%; margin: 0 auto; position: relative;}
.ecc-junior .ecc-ikkan .spot{ position: absolute; width:30%; top:-15rem; left:-24%;}
.ecc-junior .ecc-ikkan picture{ position: relative;}
.ecc-junior .ecc-ikkan::after{ content: ''; width:5.8rem; height:6.0rem; display:block; background-image:url(images/dec_ikkan.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; bottom:2.5rem; left:2.5rem}

.ecc-junior .ecc_ryoukin{ padding:7.5rem 0; position: relative;}
.ecc-junior .ecc_ryoukin figure{ width:74%; margin: 0 auto; position: relative;}
.ecc-junior .ecc_ryoukin picture{ position: relative;}
.ecc-junior .ecc_ryoukin::before{ content: ''; width:8.4rem; height:11.6rem; display:block; background-image:url(images/dec_ecc_ryoukin_right.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; top:-2.5rem; right:2.5rem}
.ecc-junior .ecc_ryoukin::after{ content: ''; width:6.8rem; height:11.5rem; display:block; background-image:url(images/dec_ecc_ryoukin_left.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; bottom:2.5rem; left:2.5rem}

.ecc-junior .ecc-program{ padding:7.5rem 0; position: relative;}
.ecc-junior .ecc-program figure{ width:74%; margin: 0 auto; position: relative;}
.ecc-junior .ecc-program .spot{ position: absolute; width:30%; top:5rem; left:-15%;}
.ecc-junior .ecc-program picture{ position: relative;}
.ecc-junior .ecc-program figcaption{ width: 37.75%; position: absolute; top:2.5rem; right:4.1%}
.ecc-junior .ecc-program figcaption a{ display: block;}
.ecc-junior .ecc-program .overflow-wrap{ width:93%; height:fit-content; position: absolute; margin: auto; left:0; right:0; bottom:5.0rem}
.ecc-junior .ecc-program::before{content: ''; width:8.0rem; height:8.5rem; display:block; background-image:url(images/dec_ecc_program_left.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; left:4%; bottom:15.0rem}
.ecc-junior .ecc-program::after{content: ''; width:6.8rem; height:6.8rem; display:block; background-image:url(images/dec_ecc_program_right.png); background-size:contain; background-position:center;  background-repeat: no-repeat; position: absolute; right:4%; top:15.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-start; position: relative;}
.access .map iframe{ width:55%; aspect-ratio: 5 / 4; position: relative; z-index: 2;}
.access .map .text{ width:45%; padding-top: 2.5rem;}
.access .map .text h3{ width:90%;}
.access ul{ display: flex; width:90%; margin:0 auto 5.0rem auto; max-width:900px; justify-content: space-between;}
.access li{ width:46.1%}
.access li .icons{ display: flex; justify-content: center;}
.access li .icons a{ width:7.0rem; margin:2.5rem 1.25rem}





#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:820px; width:80%; margin: 0 auto; left:0; right:0; bottom:0; z-index: 5;}
.fix-bottom .oss{ position: absolute; width:36.14%; bottom:0.25rem; left:15%}
.fix-bottom .ecc{ position: absolute; width:42%; bottom:0.25rem; right: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%; flex-wrap: wrap;  justify-content: center;}
.inpage-navi li{ width:50%}
.inpage-navi ul{ background-image: url(images/bg_inpage-navi.png); background-size: contain; background-position: center bottom; background-repeat: no-repeat}
.fix-bottom .oss{ position: absolute; width:41.5%; bottom:0.25rem; left:6.5%}
.fix-bottom .ecc{ position: absolute; width:43.6%; bottom:0.25rem; right:6.5%}
.junior-swimming .schedule a{ width:52%}
.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:0}
.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 figure{ 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%}

.ecc-junior .ecc-tokuten .ecc-tokuten-table{ width:95%}
.ecc-junior .ecc-tokuten .spot{ display: none;}
.ecc-junior .ecc-tokuten h2{ margin-bottom: 2.5rem;}
.ecc-junior .ecc-ikkan{ padding:2.5rem 0}
.ecc-junior .ecc-ikkan .spot{ left:80%; top:-8rem; z-index: 3;}
.ecc-junior .ecc-ikkan figure{ width:90%}
.ecc-junior .ecc-ikkan::after{ bottom:auto; top:-5rem; left:2.5rem}
.ecc-junior .ecc_ryoukin{ padding:2.5rem;}
.ecc-junior .ecc_ryoukin figure{ width:100%}
.ecc-junior .ecc_ryoukin::before{ width:6.3rem; top:-8.5rem; right:1.5rem}
.ecc-junior .ecc_ryoukin::after{ width:4.2rem; left:0.5rem; bottom:-5rem}
.ecc-junior .ecc-program{ padding:0 0 2.5rem 0; width:100%}
.ecc-junior .ecc-program figure{ width:100%; padding-bottom:2.5rem}
.ecc-junior .ecc-program .overflow-wrap{ position: relative; bottom:0}
.ecc-junior .ecc-program .overflow-wrap img{ width:125%}
.ecc-junior .ecc-program .spot{ display: none;}
.ecc-junior .ecc-program::after{ display: none;}
.ecc-junior .ecc-program figcaption {width: 40%; top: 5.5rem; right: 8.1%;}
.ecc-junior .ecc-program::before{ display: none;}
.ecc-junior .ecc-program figure::before{ content: ''; width:100%; height:66%; background-color: #f5e46e;border-bottom: 2px solid #000000; position: absolute; bottom:0}
.access { padding: 0;}
.access .map{ width:100%; display: block; position: relative; margin-bottom: 5rem;}
.access .map .text h3{ position:absolute; top:-4rem; width:40%; z-index: 5; left:0}
.access .map iframe{ width:90%; margin:0 auto 2.5rem auto; display: block;}
.access .map .text figure{width:75%; margin:0 auto -0.2rem auto;;}
.access .map .text:after{ content: ''; width:100%; height:5rem; border-top:2px solid #000000; background-color: #ffe31c; display: block;}
.access ul{ display: block;}
.access li{ width:100%; margin-bottom: 5.0rem;}
.access h2{ margin-bottom: 7.5rem;}
.access .map .text{ width:100%}
.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 .contact{ width:90%}
#footer { padding:5.0rem 0 7.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;}