@charset "utf-8";

/* アニメーション */
.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}

.loader{background-image:url(../images/logo.webp);background-repeat : no-repeat; background-size:16%; background-position : 50% 46%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; }

.intro_loader .top_r{  -ms-filter: blur(40px); filter: blur(40px);}
body.intro_loader:before{ transform: scale(1.5)}

.intro_on .top_r{  -ms-filter: blur(0); filter: blur(0);}
body.intro_on:before{ transform: scale(1)}

/* 00 */
@media only screen and (max-width: 768px){
.loader{ background-size:40%;}
}

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

/******* btn arrow *******/
.arrow{ position:relative;}
.arrow::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 5px; height: 5px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg); transition: 0.3s;
}
.arrow.red::after{
    border-color: transparent var(--keyc) var(--keyc) transparent;
}
/******* ボタン *******/
.btn{ display: block; background-color: var(--keyc); color: #fff; line-height: 1em; font-size: 20px; position: relative; text-align: center; padding: 1.5em 0; text-decoration: none;}
.btn::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg);}


@media only screen and (max-width: 768px){
    .btn{ padding: 1.2em 0; font-size: 16px;}
}

/********************** top *******************************/
main{}
main.in{ padding-top: calc(50px + 7vw); }
main img{ max-width:100%;}

.container{ max-width:1200px; width:90%; margin:0 auto;}

.stit{color:var(--keyc); font-size: 40px; letter-spacing: 0.15em; font-weight: 600;line-height: 1em;position: relative;margin-bottom: 1.5em; display: flex; justify-content: center; align-items: center;}

.stit:before{ background-image:url("../images/stit_icon.webp"); display: block; content: ""; width: 1em; height: 1em; background-size: contain; background-position: top; background-repeat: no-repeat; margin-right: 0.7em;}


@media only screen and (max-width: 768px){
    .container{ }
    
    main.in{ padding-top: calc(50px + 10vw); }
    
    .stit{ font-size: 20px; margin-bottom: 1em; letter-spacing: 0.1em;}
	.stit:before{ width: 1.2em; height: 1.2em;}

}

/******* mainimg *******/
.top{margin-bottom: 10vw;position: relative;line-height: 0;width: 100%; display: flex; align-items: center; padding-top: calc(50px + 2vw);}

.top_left{ width: 35%; padding: 0 5% 10vw;}
.top_right{ width: 65%; position: relative;}

.cb-slideshow{ position: relative; width: 100%;height:50vw;top: 0;left: 0;z-index: 0;overflow:hidden; border-radius: 20px 0 0 20px;}
.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; animation: imageAnimation 24s linear infinite 0s;}
.cb-slideshow li:nth-child(1) span {}
.cb-slideshow li:nth-child(2) span {animation-delay: 6s;}
.cb-slideshow li:nth-child(3) span {animation-delay: 12s;}
.cb-slideshow li:nth-child(4) span {animation-delay: 18s;}
@keyframes imageAnimation {
    0% {opacity: 0;animation-timing-function: ease-in;}
    15% {opacity: 1;}
    25% {opacity: 1;}
    37% {opacity: 0;transform: scale(1.1);}
    100% { opacity: 0 }
}

@media only screen and (max-width: 768px){
    .top{display: inherit;margin-bottom: 70px;padding-top: calc(50px + 5vw);}
	.top_left{ padding: 0; width: 63%; margin: 0 auto 10vw;}
    .top_right{ width: 100%;}
	.cb-slideshow{ border-radius: 20px; height: 75vw; width: 92%; margin: 0 auto;}

}


/******* MESSAGE *******/
.message{margin-bottom:5vw;padding-top: 8vw;margin-top: -8vw; line-height: 2em;}
.message .mstit{font-size: 3.5vw; letter-spacing: 0.1em; line-height: 1.5em; font-weight: 600;color:var(--keyc);margin-bottom: 4vw; text-align: center;}
.message_txt{ text-align: left;  }

.message_img{ margin-bottom: 10vw; line-height: 0;}
.message_img img{ width: 100%;}

@media only screen and (max-width: 768px){
    .message{ line-height: 1.7em;  padding-top: 65px; margin:-65px 0 30px;}
	.message .mstit{ font-size: 6vw;}
	.message .mstit span{ display: block; margin-bottom: 1em;}	
	
	.message_img{ margin-bottom: 100px;}
}



/******* WHAT'S NEW *******/
.top_news{margin: -8vw auto 15vw;padding-top: 8vw;}
.top_news .stit{ margin-bottom: 0.5em;}
.news_list{margin-bottom: 40px;}
.news_list li{text-align: left;border-bottom: 1px solid #aaa;}
.news_list li .news_link{color: #666;display: flex;align-items: center;padding: 2em 0;}
.news_list li .news_link:hover{background-color: rgba(255,255,255,0.5);}
.news_list li .news_link .date{width: 8em;color: var(--keyc);font-weight: bold;}
.news_list li .news_link .title{width: calc(100% - 8em);line-height: 1.5em;}
.news_btn{}
.news_btn a{display: block;width: 50%; background-color: var(--keyc); color: #fff;line-height: 1em;padding: 1em 0;margin: 0 auto; border-radius: 100vw;}
.news_btn a:hover{opacity: 0.8;}

.in_news{margin: 0 auto;}

@media only screen and (max-width: 768px){
    .top_news{margin: -65px auto 125px;padding-top: 65px;}
    .news_list ul{margin-bottom: 20px;}
    .news_list li .news_link{display: block;padding: 1em 0;}
    .news_list li .news_link .date{width: 100%;font-size: 0.9em;}
    .news_list li .news_link .title{width: 100%;font-size: 0.9em;}
    .news_btn a{width: 100%;font-size: 1em;}
}

.paging{ text-align: center;}
.pagination {clear: both;padding: 20px 0;position: relative;font-size: 14px;line-height: 14px;text-align: center;display: inline-block;}
.pagination-box {display: inline-block;}
.pagination span, .pagination a {display: block;float: left;margin: 2px 2px 2px 0;padding: 10px 15px 10px 15px;text-decoration: none;width: auto;color: var(--keyc); background: var(--keyc2);}
.pagination a:hover{color: var(--keyc2); background:var(--keyc) }
.pagination .current{padding: 10px 15px 10px 15px;color: var(--keyc2);background: var(--keyc);}

@media only screen and (max-width: 413px) {
	.pagination {font-size: 12px;line-height: 12px;}
	.pagination span, .pagination a {padding: 8px 10px 8px 10px;}
	.pagination .current{padding: 8px 10px 8px 10px;}
}

/* single */
.single{text-align:left;position:relative;margin-bottom: 100px;}

.single .tit{ font-weight: 600; font-size: 30px; line-height: 1.7em; color: var(--keyc); margin-bottom: 0.5em;}
.single .date{ border-bottom: 1px solid var(--keyc); padding-bottom: 1em; margin-bottom: 2em;}

.single .txt_box a{color: var(--keyc); font-weight: 600;text-decoration:underline;}
.single .txt_box img{ max-width:100%; width:auto; display: block; margin-bottom:1em;}

.single .txt_box h1,
.single .txt_box h2,
.single .txt_box h3,
.single .txt_box h4,
.single .txt_box h5{font-weight: bold;line-height: 1.7em;margin-bottom: 1em;letter-spacing: 0;}
.single .txt_box h1{ font-size: 26px; color:var(--keyc);}
.single .txt_box h2{font-size: 20px; border-left: 4px solid var(--keyc); padding: 0.3em 0 0.3em 1em;}
.single .txt_box h3{ font-size: 20px;}
.single .txt_box h4{ font-size: 18px;}

.single .txt_box blockquote{ border: 1px solid #ccc; padding: 5%; margin-bottom: 1em;}

.single .txt_box hr{margin: 2em 0;height: 1px;background-color: #8f8f8f;border: none;}

@media only screen and (max-width: 768px){
    
    .single{margin-bottom: 20px;}
    
    .single .news_tit_outer{margin-bottom: 20px;padding-bottom: 12px;}
    .single .news_tit_outer .container{display: block;}
    .single .news_tit_outer .news_tit{ line-height: 1.6em;width: 100%;}
    
    .single .txt_box{}
    
    .single .txt_box h1,
    .single .txt_box h2,
    .single .txt_box h3,
    .single .txt_box h4,
    .single .txt_box h5{ margin-bottom: 6px;}
    .single .txt_box h1{ font-size: 24px;}
    .single .txt_box h2{ font-size: 22px;}
    .single .txt_box h3{ font-size: 20px;}
    .single .txt_box h4{ font-size: 18px;}
    .single .txt_box h5{ font-size: 16px;}
    
    .single .txt_box hr{ margin: 2em 0;}
    }


/******* PRICE *******/
.price{margin-bottom: 8vw;padding-top: 8vw; padding-bottom: 8vw; margin-top: -8vw;text-align: left; background-color: #fff;}

.price_box{ border: 2px solid var(--keyc); text-align: center; padding: 3%;  margin-bottom: 50px; font-size: 16px;}
.price_box .price_row{ color:var(--keyc); font-size: 30px; line-height: 1.5em; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 0.5em;}
.price_box .price_row span{ font-size: 0.7em;}

.access{ display: flex; justify-content: space-between; margin-bottom: 40px; }
.access .access_l{ width: 45%;}
.access .access_l iframe{ width: 100%;}
.access .access_r{ width: 50%;}

.price_note{ border: 4px solid #ddd; padding: 3%; font-size: 16px; line-height: 1.7em;}


@media only screen and (max-width: 768px){
	.price{  padding: 65px 0; margin: -65px 0 50px;}
	.price_box{ padding: 7% 0; font-size: 14px; line-height: 1.5em; margin-bottom: 20px;}
	.price_box .price_row{ font-size: 20px;}
	
	.access{ display: inherit;}
	.access .access_l{ width: 100%; margin-bottom: 20px; line-height: 0;}
	.access .access_l iframe{ height: 50vw;}
	.access .access_r{ width: 100%;}
	.price_note{ padding: 5%; font-size: 15px; line-height: 1.7em;}
}

/******* COUNSELLOR *******/
.counsellor{margin-bottom: 12vw;padding-top: 8vw;margin-top: -8vw;text-align: left;}

.couns_list li{ background-color: #fff; padding: 4% 5%; margin-bottom: 30px;}
.couns_list li:last-child{ margin-bottom: 0px;}
.couns_list li .name{ text-align: center; color: var(--keyc); font-weight: 600; letter-spacing: 0.2em; margin-bottom: 2em;}
.couns_list li .name h3{ font-size: 30px; line-height: 1.7em; margin-bottom: 0.5em;font-weight: 600;}

.couns_list li .prof{}
.couns_list li .prof dt{ float: left;}
.couns_list li .prof dd{  padding-left: 7em; margin-bottom: 1em;}

@media only screen and (max-width: 768px){
	.counsellor{padding-top: 65px; margin:-65px 0 50px;}
	.couns_list li{ padding: 6%;}
	.couns_list li .name{ font-size: 15px; letter-spacing: 0.05em; margin-bottom: 1em;}
	.couns_list li .name h3{ font-size: 22px; margin-bottom: 0;}
	.couns_list li .prof dt{ float: none; border-bottom: 1px solid var(--keyc); color: var(--keyc); font-weight: 600; padding-bottom: 0.5em; margin-bottom: 0.5em;}
	.couns_list li .prof dd{  padding-left: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.7em;}
}


/******* FLOW *******/
.flow{margin-bottom: 15vw;padding-top: 8vw;margin-top: -8vw;text-align: left;}

.flow li{ background-color: #fff; padding: 4%; margin-bottom: 30px;}
.flow li .fl_tit{ display: flex; align-items: center; font-size: 24px; font-weight: 600; color: var(--keyc); margin-bottom: 1em;}
.flow li .fl_tit span{ display: block; background-color: var(--keyc); color: #fff; line-height: 1em; border-radius: 100vw; width: 2em; height: 2em;    display: flex; align-items: center; justify-content: center; font-weight: 100; margin-right: 1em;}

.flow_note{ font-size: 14px; line-height: 1.7em;}

@media only screen and (max-width: 768px){
	.flow{padding-top: 65px; margin:-65px 0 125px;}
	.flow ul{ margin-bottom: 20px;}
	.flow li{ padding: 6%; font-size: 15px; line-height: 1.7em; margin-bottom: 10px;}
	.flow li .fl_tit{ font-size: 17px;}
	
	.flow_note{ margin-bottom: 0;}
}

/******* CONTACT *******/
.contact{margin-bottom: 5vw;padding-top: 8vw; padding-bottom: 8vw; margin-top: -8vw;text-align: left; background-color: #fff;}


.contact .calendar{ margin-bottom: 30px;}

.form{}
.form_lead{ margin-bottom: 2em;}

.form input,
.form select,
.form textarea{ border: 1px solid #ccc; padding: 1em; width: 100%; font-size: 16px;}

.form dl{ display: flex; justify-content: space-between; background-color: #f2fdf1; padding: 20px 4%; margin-bottom: 15px;}
.form dt{ width: 30%; padding-top: 0.5em; font-weight: 600;}
.form dt span{ display: block; font-size: 0.8em; line-height: 1.7em;}
.form dd{ width: 70%;}

.form p{ margin: 0;}

.form .fdate{ display: flex; align-items: center; margin-bottom: 10px;}
.form .fdate:last-of-type{ margin-bottom: 0;}
.form .fdate .kibou{ width: 6em;}
.form .fdate .dselect{ width: calc(100% - 6em); display: flex; align-items: center;}
.form .fdate .dselect input{ width: auto; margin-right: 1em; padding: 0.5em;}
.form .fdate .dselect select{ width: 5em; padding: 0.5em;}

.form textarea{ line-height: 1.7em; height: 14em;}

.form .sendbtn{ border: none; background-color: var(--keyc); color: #fff; font-size: 24px; font-weight: 600;	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; width: 100%; margin: 25px 0 0 auto; display: block; transition: 0.5s;}
.form .sendbtn:hover{ cursor: pointer; opacity: 0.8;}

.wpcf7 form .wpcf7-response-output{ text-align: center; margin: 0!important; border-color: var(--keyc)!important;}
.form .wpcf7-spinner{ display: block; margin: 0.5em auto 0;}


@media only screen and (max-width: 768px){
	.contact{padding: 65px 0; margin: -65px 0 0px;}
	.form_lead{ font-size: 14px; line-height: 1.7em;}
    
    .map_sub{ margin-bottom: 2em; margin-top: -15px; display: block;}
	
	.contact .calendar iframe{ height: 80vw; }
	.form dl{ display: inherit; padding: 10px 4%; margin-bottom: 0px;}
	.form dt{ width: 100%; padding: 0;}
	.form dd{ width: 100%;}
	.form .sendbtn{ width: 100%; font-size: 18px; margin-top: 10px;}
    
    .form .fdate{    border-bottom: 1px solid #eaeaea;}
    .form .fdate .dselect input{ width: 100%; margin: 0 0 0.5em 0;}
}

/******* modal *******/
.modal_box{text-align: left;padding: 5%;}
.modal_box figure{border: 1px solid #ccc;line-height: 0;text-align: center;}
.modal_box figure img{ max-width: 60%;}
.modal_box .sstit{ font-size: 1.4em; border-left: 2px solid var(--keyc); padding: 0.25em 0 0.25em 1em; margin: 1.5em 0 1em; font-weight: bold;}
.modal_box .sstit .small{display: block;font-size: 0.6em;line-height: 1.5em;}
.modal_box .sns_list{display: flex;margin-bottom: 0;flex-wrap: wrap;}
.modal_box .sns_list li{width: 32%;margin-right: 2%;margin-bottom: 2%;}
.modal_box .sns_list li:nth-child(3n){margin-right: 0;}
.modal_box .sns_list li a{display: block;border: 1px solid;font-size: 0.8em;font-weight: bold;padding: 0.2em 1em;text-align: center;}
.modal_box .sns_list li a:hover{background-color: #72a98d38;}
.modal_box .txt_area{
    margin-bottom: 30px;
}

@media only screen and (max-width: 768px){
    .modal_box figure img{ max-width: 100%;}
    .modal_box .sstit{font-size: 1.2em;margin: 1em 0;}
    .modal_box .sns_list{margin-bottom: 12px;display: block;}
    .modal_box .sns_list li{width: 100%;margin-right: 2%;}
    .modal_box .sns_list li:nth-child(2n){margin-right: 0 !important;}
    .modal_box .sns_list li:nth-child(3n){margin-right: 2%;}
    .modal_box .sns_list li a{font-size: 0.7em;}
    .modal_box .txt_area{font-size: 0.8em;line-height: 1.8em;margin-bottom: 12px;}
}


/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background: #fff;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background: #ffffffbf;position:relative;z-index:10000;border: 1px solid var(--keyc);}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}