@charset "UTF-8";
/* CSS Document */
html{scroll-behavior: smooth;}
body {
    font-family: Noto Sans, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.8px;
    color:#444;
    padding: 0;
    margin: 0;
    position: relative;
    -webkit-text-size-adjust: 100%;
}
body { visibility:hidden;  }

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
h1,h2,h3,h4,dl,dd,dt,p,ul{
    margin:0;
    padding:0;
    font-weight: normal;
}
p{line-height: 1.4; color: #444; }
img {
	width: 100%;
    vertical-align:bottom;
    -ms-interpolation-mode: bicubic;
}
a img{ border: none; }
a{
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
ul,li {list-style-type: none;}
.attend{letter-spacing: normal; text-indent: -0.5rem; padding-left: 0.5rem; }
.attend p{font-size: 11px;  line-height: 1.1rem;}
html, body{width: 100%; overflow-x: hidden; }
.txtrt { text-align: right !important; margin-bottom: 1em;}

.fv{background: #fff;}

.fnt_min{font-family: "Sawarabi Mincho", “tel_times New Roman”, “游明朝”, YuMincho, 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho',serif;}

.caution {
	font-size: 0.7em;/*　文字サイズ調整 */
	vertical-align: top;  /* 文字の位置調整 */
}

/* ======================main====================== */

.course_area {
    width: 100%; background: #fff;  overflow: hidden;
    padding: 5% 0 0;
}

.course_area:nth-child(2){
    padding-bottom: 10%;
}

.course_area_hed{
    background: #6c7f96;
    color: #fff;
    font-size: 19px;
    line-height: 1.8;
    position: relative;
    text-align: center;
    letter-spacing: 0;
    padding: 2px;
}

.course_area_hed::before{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #6c7f96;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}

.container{width: 95%; margin: 0 auto;}
.course_area h3{ margin: 5% auto 3%;}
.pullinner { margin: 5% 0 0;}
.f_cs_details { margin: 0 auto 3%;}

.course_area.csinfo .pull {
    border-radius: 4px; border: solid 1px #6b5959 ;
    padding: 5% 3%;  margin: 0 auto 5%;
}

.course_area_family{width: 95%; margin: 3% auto;}


.pull{display: none;}

.pcg_nm {
    font-size: 1rem;
    line-height: 1.3rem;
    color: #122c4f;
    margin-bottom: 3%;
    font-weight: 550;
    letter-spacing: 0.04rem;
}

.pullinner .attend{margin-top: 3%;}
.epiparts{margin-top: 5%;}

.pulldis .pull{
    background: #f2f6f7;
    display: none;
    text-align: left;
    border-radius: 4px;
    margin: 5% auto 0;
    padding: 3% 2% 10%;
}
.pulldis .f_cs_details {
    padding: 6% 3.5% 1%;
    background: #fff;
    border-radius: 8px;
    width: 98%;
    margin-bottom: 2.5%;
}
.friend_area .pullbtn.pullbtn_btn{width: 86%; margin: 0 auto;}
.f_cs_details p{margin: 2% 0;}

.pull_con{
    background: #fff;
    border-radius: 10px;
    padding: 10% 3%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pull_ex{
    width: 80%;
    display: block;
    margin: 3% auto -4%;
}

.pull_con_list .attend{
    margin-top: 3px;
    letter-spacing: normal;
    font-size: 11px;
}

.pull_con_line{
    border: dashed 0.5px #436996;
}

.pull_friend{
    background-color: #fff;
    border-radius: 10px;
    margin: 8% 0 5%;
    padding: 7% 3% 6%;
}

.pull_ordermade{margin: 7% auto 0; width: 90%; }


/* about */
.about{
    padding: 0 0 10%;
    background: #fff;
}
.ttl{text-align: center;  position: relative;
    margin: 0 auto 3%;
    font-size: 1.375rem;
    color: #122c4f;
}
.ttl::after{
    content: "";
    display: inline-block;
    border-bottom: 1px solid #3a3012;
    width: 20%;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    position: absolute;
}
.about{color: #122c4f;}
.about_con{
    display: flex;

    align-items: center;
    flex-direction: column; gap: 10px 0;
}
.about_img{width: 50%; margin: 5% auto 3%;}
.about_text{width: 100%;text-align: center; font-size: 1rem; }
.about_text p{color: #122c4f;}



/* STEP */
.step3{
    background: #f2f7f4;
    padding: 5% 0 10%;
}
.stepiinner {
    border: solid 2px #6c7f96; border-radius: 8px;
    width: 95%; margin: 0 auto 4%; background: #fff;
    position: relative; padding: 4% 3% 5%; overflow: hidden;
}
.stepiinner h3 span{display: block;}
.stepiinner h3 span img{height: 20px; width: auto;}
.stepiinner h3 .numb{width: 19px;}
.stepiinner h3 .numb {
    background: #6c7f96;
    display: inline-block;
    text-align: center;
    padding: 0.8em 1.8em;
    border-radius: 40px;
    text-align: center;
    position: absolute;
    top: -0.65em;
    left: -1.3em;
}
.stepttl {
    text-align: center;
    font-size: 1.375rem;
    letter-spacing: normal;
    font-weight: 600;
}
.step3 h2 {width: 90%; margin: 3% auto 0;}
.stepiinner a{display: block; margin: 2% 0 0 ;}
.attendred{width: 80%; margin: 0 auto;}
.stepbox .attend{margin: 4% 0 0; text-align: left;}
.stepttl.blue{color: #2685b1;}
.stepttl.green{color: #42aa0f;}
.stepttl.pink, .stepbox_add .pink{color: #d1493b;}

.reservation .stepbox_text,.stepbox_add{text-align: left; display: block;}


.stepbox_add{margin-top: 10px;}
.border{
    background:linear-gradient(transparent 75%, #e1e6ec 30%);
}
.stepbox_text .pink{color: #d1493b;  font-weight: 500; font-size: 22px;}
.stepbox_text{display: inline; }

.stepbox h3{margin-bottom: 5px;}

.step3_attend{
    background: #fff;
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    padding: 3% 2%;
}

.step3_attend_sub{
    background-color: #436996;
    color: #fff;
    padding: 5px 8px;
    width: 20%;
    text-align: center;
}

.step3_attend_text{width: 80%; font-size: 0.875rem; color: #436996; font-weight: 600;}


/* ======================map====================== */
.map{margin: 2% 0 0; position:relative;}
.map a{display: block;} .map li{height: 60px;}
.hokkaido {position: absolute; width: 22%; top: 5%; right: 5%;}
.tohoku { position: absolute; width: 18%; height: 30px; top: 35%; right: 14%;}
.kanto {position: absolute; width: 20%; right: 18%; top: 70%;}
.hokuriku {position: absolute; width: 14%; top: 43%; right: 36%;}
.tokai {position: absolute; width: 14%; bottom: 5%; right: 42%;}
.kansai {position: absolute; top: 56%; right: 55%; width: 13%;}
.chugoku {position: absolute; width: 17%; bottom: 25%; left: 10%;}
.kyusyu {position: absolute;  width: 20%; bottom: 5%; left: 0%;}
.foot_yoyaku {width: 100%; margin: 0 auto; padding: 0 4% 5%; background: #daedfd;}

/* ======================footer====================== */
.footer {
    padding: 10% 3% 12%; background: #fff;
}
.footer .ttl{
    margin-bottom: 7%;
}
.footer h3 {background: #fff; width: 100%; margin: 0 auto 5%; line-height: 1.8;
    font-size: 0.875rem; letter-spacing: 2px; color: #f6488d;;
}
.footer h4{font-size: 0.86em; margin: 3% 0 1%; }
.tel { width: 80%; margin: 8% auto 0;}
.arrow {
    width: 30px;
    height: 30px;
    border: 3px solid;
    border-color: transparent transparent #6c7f96 #6c7f96;
    transform: rotate(-45deg);
    margin: -5% auto 4%;
}

.tel_area{
    background: #f2f6f7;
    border: 1px solid #6c7f96;
    margin:10% 0 0;
    text-align: center;
    padding: 5% 0;
}

.tel_message{font-size: 15px;}
.tel_message .pink{color: #436996;}

.tel_num{display: flex; gap: 0 5px; align-items: center; justify-content: center; margin: 2% 0;}
.tel_num_text{font-size: 13px; background: #436996; color: #fff; padding: 3px 6px;}
.tel_num_call{font-size: 1.5rem; font-family: "Noto Sans CJK JP";}
.tel_time{font-size: 13px;}



/*	iframe
=======================================*/
body.overh{overflow: hidden;}
#mapset {
    width: 88%;
    margin: 0 auto 0 6%;
    position: fixed;
    top: 8%;
    z-index: 950;
    height: 80vh;
    background: #fff;
    padding: 2%;
    border: solid 1px #ccc;
    display: none;
    z-index: 500;

}
@media (orientation: landscape){
    #mapset { height: 80vh;}
}


#mapset.madd {display: block;}
.bwrap {
    width: 100%;
    height: 100vh;
    z-index: 500;
    position: fixed;
    top: 0;
    background: rgba(0,0,0,0.15);
    display: none;
}
.bwrap p{
    font-size: 30px;
    position: absolute;
    z-index: 200;
    right: 2%;
    top: 2%;
    color: #fff;
    background: #333;
    border-radius: 8px;
    line-height: 1;
    width: 36px;
    height: 33px;
    padding: 0;
    text-align: center;
}

.daytxt, .daytxt2 {text-align: center; margin: 0 0 0.5%;  font-weight: bold; }
.daytxt{color: #42aa0f;} .daytxt2{color: #d1493b;}
.stepbox2 p{font-size: 0.9em; color: #d1493b; margin: 0 0 1%;}
.limit_over{text-align: center; font-weight: bold;} .limit_over p{margin: 0;}
.no_friend/*, .limit_over*/{display: none;}

.limit_day{width: 80%; margin-top: 10px;}


/*	limit
=======================================*/
.limit_over {
    width: 100%; height: 100%;
    position: fixed;
    background: #fff;
    top: 0; left: 0;
    z-index: 9999;
    border: solid 8px #fce4f1;
    overflow: hidden; display: none;
}
.limit_inner {
    position: absolute;
    width: 90%; left: 5%;  top: 50%;
    transform: translateY(-50%); color: #d1493b;
    border: solid 1px #ccc;
    padding: 2.5% 3%;
}
.limit_inner p {font-size: 16px; color: #d1493b; font-weight: bold;}

@media screen and (min-width: 768px){ /*タブレット*/
    .wrapper {  width: 90%; max-width: 550px; margin: 0 auto; }
    body{font-size: 1.2em; background: #e1e7ef;}
    h3 {font-size: 1.16em;}
    p{font-size: 0.86em;}
    .attend {font-size: 0.85em;}
    .stepiinner h3 span img {height: 0.8em;}
    .stepiinner h3 .numb { padding: 0.6em 1.4em; top: -0.7em; left: -0.8em;}
    .pcg_nm{font-size: 1.125rem; line-height: 1.5rem;}
    .attend p{font-size: 0.875rem; line-height: 1.4rem;}
    .ttl{font-size: 1.75rem;}
    .about_text p{font-size: 1.125rem; line-height: 1.7rem;}
    .about_con{gap: 20px 0;}
    .stepttl{font-size: 1.5rem;}
    .stepbox_text,.stepbox_add{font-size: 1.375rem;}
    .daytxt, .daytxt2,.tel_message{font-size: 1.125rem;}
    .tel_num_text{font-size: 1rem;}
    .tel_num_call{font-size: 1.75rem;}
    .tel_time{font-size: 1rem;}
    .step3_attend_text{width: 60%; font-size: 1rem;}
    .step3_attend_sub{font-size: 1rem;}
    .tokai {width: 14%; bottom: 13%; right: 42%;}
    .chugoku {bottom: 32%; left: 10%;}
    .kyusyu { bottom: 13%; left: 0%;}
    .course_area_hed{padding: 3px;}
    .pull_con_list .attend{font-size: 14px;}
}