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

/*ゴシック体*/
@font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/NotoSansJP-Regular.woff') format('woff');
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/NotoSansJP-Medium.woff') format('woff');
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/NotoSansJP-Bold.woff') format('woff');
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/NotoSansJP-Black.woff') format('woff');
    font-display: swap;
  }
  @font-face {
    font-family: 'Noto Sans CJK JP2';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/NotoSansJP-Black2.woff') format('woff');
    font-display: swap;
  }

  /*明朝体*/
@font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/NotoSansJP-Regular.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/NotoSansJP-Medium.woff') format('woff');
    font-display: swap;
  }
@font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/NotoSansJP-Bold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans CJK JP';
    font-style: normal;
    font-weight: 900;
    src: url('fonts/NotoSansJP-Black.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/NotoSerifCJKjp-Medium.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Serif JP';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/NotoSerifCJKjp-Bold.woff') format('woff');
    font-display: swap;
}

.gos{font-family:'Noto Sans CJK JP',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.min{font-family: 'Noto Serif JP', serif;}
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!important;
}
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;'
}

html{
    font-size: 62.5%;
}
body{
    font-family: "Noto Sans CJK JP", "Noto Sans", sans-serif;
    font-size:1.6rem;
}
.montserrat{
    font-family: 'Montserrat';
}

.shirofuchi{text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;}


/*common*/
.std1{ color:#74C5CB; font-size:3.2rem; text-align: center;}
.std1::after{ content: ''; width:100%; height:14px; display: block; background-image: url(images/bg_std1.svg); background-position: center bottom; background-repeat: no-repeat; background-size: contain; margin:15px 0 50px 0;}
.std2{ color:#74C5CB; font-size:3.2rem; text-align: center;}
.std2 small{ font-size: 1.6rem; display: block;}
.std2::after{ content: ''; width:100%; height:8px; display: block; background-image: url(images/bg_std2.svg); background-position: center bottom; background-repeat: no-repeat; background-size: contain; margin:15px 0 50px 0;}
.std3{ display: flex; background-color: #E3F3F5; font-size:2.4rem; height:4.5rem; align-items: center; border-left:7px solid #74C5CB; padding:0 0 0 15px; width:40.0rem; margin-bottom:25px;}
.button a{ width:225px; padding:15px 0; position: relative; background-color: #F28AAD; color: #ffffff; font-size: 1.4rem; text-align: center; display: block; margin:0 auto; border-radius: 5px 0 0 5px; }
.button a::after{ content: ''; display:block; background-image: url(images/arrow_button.svg); background-position: center; background-repeat: no-repeat; background-size: 8px 15px; width:25px; height:100%; position: absolute; right:-25px; top:0; background-color: #F5A1BD; border-radius:0 5px 5px 0}
.button a:hover{ background-color: #F5A1BD;}

/*CONTENT*/
body{ color:#4D4D4D}
header{ height: 60px; background-color: #74C5CB; display: flex; align-items: center; justify-content: center; position: fixed; top:0; left:0; width:100%; z-index: 5; border-bottom:5px solid #D5EEEF}

header .wrap{ width:95%; max-width:1000px; margin:0 auto; display: flex; justify-content: space-between; align-items: center;}
header .wrap h1{ display: flex; align-items: center;}
header .wrap h1 img{ width:160px; height: auto;}
header .navi{ display: flex; max-width:740px; width:100%; justify-content: flex-end; align-items: center;}
header .navi li{ border-left:1px solid #ffffff;}
header .navi a{ padding:0 15px; color: #ffffff; font-size: 1.6rem; text-align: center; display: block; }
header .navi a:hover{ color: antiquewhite;}
header .navi a small{ font-size: 1.0rem; display: block;}
.mv { padding-top:65px;}
.mv figure{ position: relative; display: flex; align-items: center; justify-content: center;}
.mv img{ width:100%; display: block;}
.mv figcaption{ font-size:3.2rem; text-align: center; position: absolute;}
.ninki{ padding:75px 0; background-color: #EAF6F7;}
.ninki .block{ max-width:800px; width:90%; margin:0 auto}
.ninki .block h2{ font-size:2.4rem; color: #ffffff; text-align: center; position: relative; margin-bottom:50px}
.ninki .block h2 .wrap{ display: block; background-color:#74C5CB; border: 1px solid #EAF6F7; position: relative; z-index: 2; padding:5px 0; width:calc(100% - 30px); margin: 0 auto;}
.ninki .block h2::before{ content:''; width:37px; height:46px; background-image: url(images/bfr_h2_ninki.svg); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; left:0; bottom:-5px;z-index: 1;}
.ninki .block h2::after{ content:''; width:37px; height:46px; background-image: url(images/aft_h2_ninki.svg); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; right:0; bottom:-5px;z-index: 1;}
.ninki .block .box{ display: flex; justify-content: space-between;}
.ninki .block .text{ width:51.5%; max-width:412px; line-height: 1.8;}
.ninki .block figure{ width:44%; max-width:352px;}
.ninki .block figure img{ display: block; width:100%;}
.yume{ padding:75px 0;}
.yume .block{ max-width:778px; margin:0 auto}
.yume .block figure{ margin-bottom:25px}
.yume .block figure img{ width:100%; display: block;}
.yume .block .text{ width:80%; max-width: 540px; margin:25px auto 50px auto; line-height: 1.8;}
.feature{ padding:75px 0 0 0; overflow: hidden;}
.feature .block{ background-color: #F9F9F3;}
.feature .box{ display: flex; position: relative; align-items: center; min-height: 406px; justify-content: center;}
.feature .box .text{ width:90%; display: flex; align-items: center; margin:0 auto; position: relative; z-index: 2;}
.feature .box figure{ position: absolute; top:0; height: 100%;}
.feature .box figure img{ width:100%; display: block; height: 100%; object-fit: cover;}
.feature .box:nth-child(odd) figure{ right:0; z-index: 1;}
.feature .box:nth-child(even) figure{ left:0; z-index: 1;}
.feature .box:nth-child(odd) .text{ justify-content: flex-start;}
.feature .box:nth-child(even) .text{ justify-content: flex-end;}
.feature .box h3{font-size:2.4rem; font-weight: bold; color: #74C5CB; margin-bottom:15px}
.feature .box h3 img{ width:66px; height:66px; display: block; margin-bottom:5px}
.feature .box .text p{ max-width: 400px; line-height: 1.8;}
/*.feature .box:last-child .text p{ min-width:600px}*/
.feature .box .text .wrap{ background-color: rgba(249,249,243,.85); padding:15px}

.voice{ padding:75px 0}
.voice .block{  width:90%; max-width:760px; margin:0 auto}
.voice .box{ display: flex; justify-content: space-between; padding:25px 0}
.voice .box figure{ align-self: flex-end;}
.voice .box figure img{ height:185px;}
.voice .box:nth-child(even){ flex-direction: row-reverse;}
.voice .box .text{ position: relative; width:100%; display: flex; align-items:center; justify-content: center;}
.voice .box .text img{ width:100%}
.voice .box .text .wrap{ position: absolute; width:80%}
.voice .box.voice02 .text .wrap{ width:88%}
.voice .box .text h3 { margin-bottom:15px}
.voice .box .text h3 span{ font-size:1.8rem; font-weight: bold; display: inline-block; position: relative; z-index: 2;}
.voice .box .text h3 i{ font-size:1.8rem; font-weight: bold; display: inline-block; position: relative;}
.voice .box .text h3 i::before{ content: ''; width:100%; height:10px; transform: skewX(45deg); background-color: #c3e1e4; display: block; position: absolute; bottom:0; z-index: 1;}
.voice .box .text p{ line-height: 1.8;}
.voice .box:nth-child(odd) .text h3 i::before{ background-color: #f2c7d6;}

.access{ background-color:#EAF6F7; padding:75px 0}
.access .block{ width:90%; max-width:750px; margin:0 auto}
.access ul{ display: flex;}
.access li{ width:48%; margin:1%}
.access .schoolinfo { text-align: center; margin-bottom:1.5rem}
.access .schoolinfo i{ display: block; font-size:2.4rem;}
.access iframe{ display: block; width:100%; height: 320px; margin-bottom:25px}
.access .schooltel{ text-align: center; margin-bottom:1.5rem; font-size:1.2rem}
.access .schooltel strong{ font-weight: bold; font-size:1.8rem; display: block;}
/*.access h2+p { font-size:2.4rem; text-align: center; margin-bottom:25px}*/
/*.access h2+p img{ display: block; width:60%; margin:15px auto; max-width:240px}*/
/*.access h2+p strong{ display: block; font-size:1.6rem}*/
/*.access h2+p small{ display: block; font-size:1.2rem}*/
/*.access iframe{ display: block; width:100%; height: 450px; margin-bottom:25px}*/

footer{ background-color:#EAF6F7; }
footer a{ color: #74C5CB;}
footer .navi{ display: flex; width:100%; justify-content: center; align-items: center; margin-bottom:25px}
footer .navi li{ border-left:1px solid #74C5CB;}
footer .navi li:last-child{ border-right:1px solid #74C5CB;}
footer .navi a{ padding:0 25px; font-size: 1.6rem; text-align: center; display: block; }
footer .navi a small{ font-size: 1.0rem; display: block;}


footer .branding img{ width:150px;}
footer .branding a{ font-size:1.4rem; margin-left: 15px;}
footer .tel a{ display: flex; align-items: center;}
footer .tel a small{ font-size:1.2rem; margin-right:15px}
footer .tel a strong{ font-weight: 900; font-size:4.0rem; line-height: 1;}
footer .tel .data{ display:block; font-size:1.1rem; text-align: right; }
footer .copyright{ padding:25px 0; text-align: center; font-size:1.1rem; background-color: #74C5CB; color: #ffffff;}



/*職業訓練について*/
.nani-training{ padding:75px 0; background-color:#F9F9F3; }
.nani-training .block{ width:90%; max-width: 800px; margin:0 auto; display: flex; justify-content: space-between;}
.nani-training .text{ width:51%; max-width:407px; line-height: 1.8;}
.nani-training figure{ width:46%; max-width:363px; }
.nani-training figure img{ width:100%; display: block;}
.merit{ padding:75px 0}
.merit .block{ width:90%; max-width: 800px; margin:0 auto; }
.merit .box{ display: flex; justify-content: space-between; padding:50px 0; border-bottom:1px solid #C5C5C5}
.merit .box:first-child{ padding-top: 25px;}
.merit .box:last-child{ border-bottom: none;}
.merit .box:nth-child(odd){ flex-direction: row-reverse;}
.merit .text{ width:51%; max-width:407px; line-height: 1.8;}
.merit figure{ width:46%; max-width:363px; }
.merit figure img{ width:100%; display: block;}
.merit h3{ font-size:2.4rem; color: #74C5CB; margin-bottom:15px; line-height: 1.2;}

/*カリキュラム*/
.manabukoto{ padding:75px 0;}
.manabukoto h2+figure{ max-width: 400px; margin:0 auto 50px auto;}
.manabukoto h2+figure img{ width:100%; display: block;}
.manabukoto .block{ max-width:600px; width:90%; margin:0 auto}
.manabukoto .block p{ margin-bottom:25px; line-height: 1.8;}
.gijutsu .block{ max-width:600px; width:90%; margin:0 auto}
.gijutsu h4{ font-size:2.4rem; font-weight: bold; color: #74C5CB; text-indent: -1.2rem; margin-bottom:25px}
.gijutsu ul{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.gijutsu li{ width:47%; max-width:280px; font-size:1.6rem; margin-bottom:25px}
.gijutsu li img{width:100%; margin-bottom:5px; display: block;}
.gijutsu .narrow{ letter-spacing: -0.1em;}
.gijutsu p{ font-size:2.4rem; font-weight: bold;}
.jugyou{ padding:75px 0}
.jugyou .block{ max-width:600px; width:90%; margin:0 auto;}
.jugyou .wrap{ border:2px solid #74C5CB;}
.jugyou .wrap .box{ padding:25px; display: flex; justify-content: space-between; width:calc(95% - 50px); margin:0 auto}
.jugyou .wrap h4{ font-size: 2.4rem; display: flex; align-items: flex-end; margin-bottom:25px}
.jugyou .wrap h4 img{ height:38px; margin-right:15px;}
.jugyou .wrap .jikan { border-bottom: 1px dotted #74C5CB;}
.jugyou .wrap .jikan figure{ width:37.5%; max-width:225px}
.jugyou .wrap .naiyou { border-bottom: 1px dotted #74C5CB;}
.jugyou .wrap .naiyou figure{ width:34%; max-width:204px}
.jugyou .wrap .naiyou .step{ display: flex; align-items: flex-start; padding-bottom:2.4rem; position: relative; white-space: nowrap;}
.jugyou .wrap .naiyou .step i{ font-size: 1.2rem; color: #ffffff; background-color: #74C5CB; line-height: 1; padding: 5px; margin-right:5px; white-space: nowrap;}
.jugyou .wrap .naiyou .step::after{ content: ''; width:2.2rem; height:1.1rem; background-image: url(images/arrow_down_pink.svg); background-size: contain; background-repeat: no-repeat; margin:0 auto; display: block; position: absolute; bottom:0.5rem; left:0; right:0}
.jugyou .wrap .naiyou .step:last-child:after{ display: none;}
.jugyou .wrap figure img{ width:100%; display: block;}
.jugyou .wrap h4.igai{ padding:25px 25px 0 25px; width:calc(95% - 50px); margin:0 auto 25px auto}
.jugyou .wrap .box.igai{ padding: 0 25px 25px 25px; display: flex; justify-content: space-between;}
.jugyou .wrap .box.igai figure{ width:38.8%; max-width:194px;}
.jugyou .wrap .box.igai .text{ width:60%; max-width:360px;}
.jugyou .wrap .box.igai h5{ font-size:2.0rem;}
.jugyou .wrap p{ line-height: 1.8;}
.faq-list{ padding:75px 0;}
.faq-list .block{ width:90%; max-width: 800px; margin:0 auto; background-color: #EAF6F7; padding: 0.1px 0;}
.faq-list .block .box{ margin:25px; background-color: #ffffff; padding:25px; position: relative;}
.faq-list .block .box:after{ content:''; width:15px; height:15px; display: block; background-image: url(images/bg_box_faq.svg); background-size: contain; background-repeat: no-repeat; position: absolute; bottom:0; right:0}
.faq-list .block .question{ display: flex; font-size:2.4rem; color: #74C5CB; padding-bottom:15px; margin-bottom:15px; border-bottom: 1px solid #74C5CB;}
.faq-list .block .question:before{ content:''; display: block; min-width:4.2rem; height:4.2rem;background-image: url(images/bfr_question.svg); background-size: contain; background-repeat: no-repeat; margin-right:15px}
.faq-list .block .answer{ display: flex; line-height: 1.8;}
.faq-list .block .answer:before{ content:''; display: block; min-width:4.2rem; height:4.2rem;background-image: url(images/aft_answer.svg); background-size: contain; background-repeat: no-repeat; margin-right:15px}





/*フォーム*/
.contact{ padding-top:150px }
.contact { background-image: url(images/bg_contact.jpg); background-size: cover;}
.contact.scheme .block{ padding:25px 0}
.contact.scheme .wrap{ width:90%; max-width:800px; margin:0 auto; padding:50px 0}
.contact dl{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 auto}
.contact dt{ width:225px; display: flex; align-items: center; padding:15px 0; border-bottom:1px solid #EAF6F7}
.contact dt i{ font-size:1.0rem; color: #F28AAD; margin-left:5px}
.contact dd{ width:calc(100% - 225px); padding:15px 0; border-bottom:1px solid #EAF6F7; display: flex; justify-content: center; align-items: center;}
.contact dd input,
.contact dd textarea{ width:90%; font-size:1.8rem; padding:5px 0;}
.contact dd textarea{ height:80px}
.contact .submit{ justify-content: center; display: flex; padding: 15px 0;}
.contact .submit { display: flex; align-items: center; justify-content: center; padding:25px 0}
.contact .submit input{ border:none; background-color:#74C5CB; color:#ffffff; padding: 15px 25px; border-radius:5px; font-size:2.4rem}
.contact .submit input:hover{ background-color:#F28AAD}
.contact .back { display: flex; align-items: center; justify-content: center; padding:25px 0}
.contact .back input{ border:none; background-color:#74C5CB; color:#ffffff; padding: 15px 25px; border-radius:5px; font-size:2.4rem}
.contact .back input:hover{ background-color:#F28AAD}
.contact .error_messe{ line-height: 2; }
.confirmation-wrap{ max-width:600px; width:80%; margin:0 auto}
.confirmation-wrap .caution{ margin-bottom:25px}
.contact.confirm { min-height: 100vh;}
.contact .formTable{ width:90%; margin:0 auto}
.contact .formTable th,
.contact .formTable td{ border-bottom:1px solid #74C5CB; padding:25px 0}
.contact .submitset { display: flex; align-items: center; justify-content: center; padding:25px 0}
.contact .submitset input{ border:none; background-color:#74C5CB; color:#ffffff; padding: 15px 25px; border-radius:5px; font-size:2.4rem; margin:5px}
.contact .submitset input:hover{ background-color:#F28AAD}
.contact.thanks .box p{ font-size:2.0rem; text-align: center; line-height: 2; margin-bottom:50px}
.contact.thanks h4{ text-align: center; font-size: 2.4rem; margin-bottom:15px; font-weight: bold;}


/*responsive*/

@media screen and (max-width:1070px){
    html{font-size: 1vw;}
    
}
@media screen and (max-width:940px){
}

@media screen and (max-width:599px){
    body{overflow: hidden;}
    .pc{ display: none!important;}
    .sp{ display: block!important;}
    html{font-size: 1.8vw;}
    header{ height:42px}
    .mv{ padding-top:42px}
    .mv figcaption{ font-size: 2.8rem;}
    .ninki{ padding:25px 0}
    .ninki .block h2{ margin-bottom:25px}
    .ninki .block .box{ flex-direction: column-reverse; width:80%; margin:0 auto}
    .ninki .block figure{ width:100%; margin-bottom: 15px;}
    .ninki .block .text{ width:100%}
    .yume{ padding:25px 0}
    .feature .box{ min-height: auto; flex-direction: column;}
    .feature .box figure{ position: relative; height: auto; overflow: hidden;}
    .feature .box figure img{ width:125%;object-fit: cover;object-position: right;height: 280px;}
    .feature .box:nth-child(even) figure img{object-position: left}
    .feature .box .text{ margin:-50px 0 25px 0}
    .voice .box .text .wrap{ position: relative;}
    .voice .box .text img{ display: none;}
    .voice .box figure img{ height:100px}
    .mv.sub img{height: 25vh;object-fit: cover;object-position: center;}
    .nani-training{ padding:25px 0}
    .nani-training .block{ width:80%; flex-direction: column-reverse;}
    .nani-training .block figure{ width:100%; margin-bottom: 15px;}
    .nani-training .block .text{ width:100%}
    .merit .block{ width:80%;}
    .merit .box{ padding:25px 0}
    .merit .box,
    .merit .box:nth-child(odd){ flex-direction: column; }
    .merit .box figure{ width:100%; margin-bottom: 15px;}
    .merit .box .text{ width:100%;}
    .jugyou .wrap .box{ flex-direction: column;}
    .jugyou .wrap .jikan figure,
    .jugyou .wrap .naiyou figure{ width:100%; padding:25px 0 0 0; margin:0 auto}
    .jugyou .wrap .box.igai figure,
    .jugyou .wrap .box.igai .text{ width:100%}
    .jugyou .wrap .box.igai figure{ max-width: none;}
    .gijutsu p{ text-align: center; font-size:2.8rem}
    .nani-training .text{ letter-spacing: -0.01em;}
    .access ul{ display: block;}
    .access li{ width:80%; margin:0 auto 5.0rem auto; padding-bottom:5.0rem}
    .access li:first-child{ border-bottom:1px solid #74C5CB}
    .access .schooltel strong{ font-size:2.1rem}



    footer .wrap{ flex-direction: column; align-items: center;}
    footer .branding {margin-bottom:25px}
    footer .branding img{ width:100px;}
    footer .tel a strong{ font-size: 7.0rem;}
    footer ul{ flex-wrap: wrap;}
    footer li{ margin-bottom:15px; font-size:2.2rem}
    footer li:nth-child(2){ border-right: 1px solid #ffffff; }
    footer .copyright{ padding:5px 0}
    .contact dt,
    .contact dd{ display: block; width:100%}
    .contact dt{ border-bottom:none; padding-bottom:0}


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



/*　ハンバーガーボタン　*/
.hamburger {
    background-color: rgba(255, 255, 255, 0.75);
    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 :#2D4B45;
    -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: #ffffff;
    background: rgba(116, 193, 203 , .75);
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    }  
    
    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
    transform: translateY(0%);
    }
    /*メニューレイアウト*/
    
    
    .globalMenuSp .wrap{ z-index:99998; overflow: scroll; height: 100vh; position: relative; -webkit-overflow-scrolling: touch; display: flex; align-items: center; justify-content: center; color: #ffffff; width:80%; max-width:520px; margin:0 auto}
    .globalMenuSp .wrap .inner{  max-width:520px; width:80%; margin:0 auto; }
    .globalMenuSp .wrap .logo{ max-width:180px; margin:0 auto 50px auto}
    
    .globalMenuSp{ background-color: rgba(116, 193, 203 , .75);}

    .globalMenuSp .navi{}
    .globalMenuSp .navi li{ border-left:1px solid #74C5CB; margin-bottom:15px}
    .globalMenuSp .navi a{ padding:15px 25px; font-size: 2.4rem; text-align: center; display: block; color: #ffffff; border: 1px solid #ffffff;}
    .globalMenuSp .navi a small{ font-size: 1.2rem; display: block;}