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

/*--------------------------------------------------------------------------------
																	mainContents
--------------------------------------------------------------------------------*/
#mainContents{}

#fastViewSec{
	background-image:url(../../images/headerbg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:top center;
}
#fastViewSec .sectionInner{	padding:3em 1em 0;}
#fastViewSec .sectionInner h2{ font-size:250%; margin:0; color:#fff;}
#fastViewSec .sectionInner p{ color:#fff; margin:0 0 1em; line-height:1.4em;}
#fastViewSec .sectionInner .specialTag{ text-align:center; background-color:#263765; max-width:240px; box-shadow:1px 1px 3px #333;}
#fastViewSec .sectionInner .specialTag strong{ padding:0.5em; color:#fff; font-size:125%; display:block;}
#fastViewSec .sectionInner .specialTag strong span{ text-align:center; color:#fff; font-size:67.5%; font-weight:normal; display:block;}
#fastViewSec .sectionInner .sliderpanel{margin:0;height:auto;top:auto;max-width: 440px;}
#fastViewSec .sectionInner ul.slider-img-list li{ padding:0;}
#fastViewSec .sectionInner .sliderTextHolder{margin:0 0 1em;position: relative;}
#fastViewSec .sectionInner .sliderTextHolder ul li{ margin:0; line-height:1.4em;}
#fastViewSec .sectionInner .sliderTextHolder .buttons{position:absolute;right:0;top:0;bottom:0;margin:auto;padding:0;width:auto;height: auto;}
#fastViewSec .sectionInner .sliderTextHolder .buttons p{ margin:0 0.2em; padding:0; cursor:pointer; transition:opacity .3s;}
#fastViewSec .sectionInner .sliderTextHolder .buttons p:hover{ opacity:0.6;}
#fastViewSec .sectionInner .sliderBox{width:100%; max-width:440px;}

/*--------------------------------------------------------------------------------
schoolSec
--------------------------------------------------------------------------------*/
:root{ --photo-box-height:200px;}
#schoolSec{ background-color:#F7F7F7;}
#schoolSec .sectionInner{ padding:2em 1em 4em;}
#schoolSec h3{ position:absolute; top:-0.5em; padding:0 0 0 0.5em; text-align:left;}
#schoolSec h3:before{
    content:"";
    width:8px;
    height:100%;
    display:block;
    position:absolute;
    left:0;
    background-color:#00A1C9;
}

#schoolSec .photoSlider{ padding:2em 1em; background:rgba(251,176,59,.1); margin:0 0 1em;}
#schoolSec .photoSlider li .photo_box{ display:block; margin:0; padding:0.5em; text-align:center; max-height:200px;}
#schoolSec .photoSlider .slick-slide{ text-align:center;}
#schoolSec .photoSlider .slick-slide img{ width:100%; height:100%; object-fit:cover;}
#schoolSec .photoSlider .slick-next{ right:0;}
#schoolSec .photoSlider .slick-prev{ left:0;}
/*-----------------------------------------------------*/
#schoolSec .photoSlider .slick-next,
#schoolSec .photoSlider .slick-prev{
    font-size: 10px;
    top: calc(var(--photo-box-height)/2);
    transform: translate(0, -50%);
    width: auto;
    height: auto;
    z-index: 1;
}
/*-----------------------------------------------------*/
#schoolSec .photoSlider .slick-next:before,
#schoolSec .photoSlider .slick-prev:before{ content:normal;}
/*-----------------------------------------------------*/
#schoolSec .schoolInfoBox{ max-width:480px;}
#schoolSec .schoolInfoBox p{ font-size:137.5%; font-weight:bold; margin:0 0 1em;}
#schoolSec .schoolInfoBox .telLink a{ font-size:200%; color:#000; text-decoration:none; transition:color .3s;}
#schoolSec .schoolInfoBox .telLink a:hover{ color:#FA387D;}
#schoolSec .schoolInfoBox .formBtn{ max-width:240px; font-size:150%; text-align:center;}
#schoolSec .mapBox{ max-width:399px; width:100%;}
#schoolSec .mapBox iframe{ border:none; width:100%; height:100%;}

/*--------------------------------------------------------------------------------
formSec
--------------------------------------------------------------------------------*/
#formSec{ padding:4em;}
#formSec > .sectionInner{ background-color:#fff; padding:2em 6em;}
#formSec h2{ color:#FA387D; font-size:200%;}
#formSec p{ font-size:87.5%; font-weight:500; color:#000;}
#formSec form .inputBox p{ color:#333; margin:0 auto;}
#formSec form .inputBox .textNote{ display:inline-block; margin:0 0 0 0.5em; color:#ED1E79;}
#formSec form .inputBox .inputItemList{ padding:0; position:relative;}
#formSec form .inputBox .inputItemList:not(:last-child):after{
    content:"";
    width:100%;
    height:1px;
    background:linear-gradient(-90deg, #ccc 0%, #ccc 70%, #00A1C9 70%, #00A1C9 100%);
    background: -moz-linear-gradient(180deg, #ccc 0%, #ccc 70%, #00A1C9 70%, #00A1C9 100%); 
    background: -webkit-linear-gradient(180deg, #ccc 0%, #ccc 70%, #00A1C9 70%, #00A1C9 100%);
    display:block;
}
#formSec form .inputBox dt{ width:30%; padding:1.5em 0;}
#formSec form .inputBox dd{ width:70%; padding:1.5em 3em;}
#formSec form .inputBox dd p{ margin:0 0 0.5em; font-size:87.5%; font-weight:normal; color:#666;}
#formSec form .inputBox dd ul{ width:100%;}
#formSec form .inputBox dd ul li{ margin:0 1.5em 0.5em 0;}
#formSec form .inputBox dd ul li .checkItem{ width:1.5em; height:1.5em; vertical-align:sub; margin:0 0.5em 0 0;}
#formSec form .inputBox dd .inputItem{ width:100%; padding:0.5em; font-size:100%; border:none; background-color:#F5F5F5; border-radius:5px;}
#formSec form .inputBox dd .mailCheck{ display:block; margin:0.5em auto 0;}
#formSec form .inputBox dd select[name="visa"]{ border:1px solid #999;}
/*---------------------------------------------------------*/
#formSec form .inputBox dt,
#formSec form .inputBox dd{ font-weight:500; line-height:1.2em;}
/*---------------------------------------------------------*/
#formSec form .inputBox dd ul li .inputItem,
#formSec form .inputBox dd input[name="Mail2"]{ margin:0.5em 0;}
/*---------------------------------------------------------*/
#formSec form .inputBox .inputItemList dd .radioItem{ display:none;}
#formSec form .inputBox .inputItemList dd .radioItem + label{
    padding-left:25px;
    position:relative;
}
#formSec form .inputBox .inputItemList dd .radioItem + label::before{
    content:"";
    display:block;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    width:16px;
    height:16px;
    border:1px solid #999;
    border-radius:50%;
}
#formSec form .inputBox .inputItemList dd .radioItem:checked + label{ color:#00A1C9;}
#formSec form .inputBox .inputItemList dd .radioItem:checked + label::after{
    content:"";
    display:block;
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:3px;
    width:12px;
    height:12px;
    background:#00A1C9;
    border-radius:50%;
}
::placeholder{ color:#999;}
/* 旧Edge対応 */
::-ms-input-placeholder{ color:#999;}
/* IE対応 */
:-ms-input-placeholder{ color:#999;}


/*---------------------------------------------------------*/
#formSec .sendBtn{ text-align:center; margin:2em auto;}
#formSec .sendBtn button{
    color:#fff;
    padding:0.6em 3em 0.7em;
    text-align:center;
    font-size:150%;
    font-weight:bold;
    line-height:1em;
    text-decoration:none;
    border:none;
    border-radius:100px;
    background:linear-gradient(180deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%);
    background: -moz-linear-gradient(-90deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%); 
    background: -webkit-linear-gradient(-90deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%);
    cursor:pointer;
}


#formSec .privacy_check{ text-align:center;}
#formSec .privacy_check label{ padding: 0;}
#formSec .privacy_check input[type="checkbox"]{vertical-align: middle;transform: scale(1.4);margin-bottom: 0.5rem;margin-right: 1em;}

/*--------------------------------------------------------------------------------
Confirm
--------------------------------------------------------------------------------*/
#confirmSec{}
#confirmSec .sectionInner{ padding:4em 1em;}
#confirmSec .sectionInner h2{ color:#FA387D; font-size:200%; margin:0 auto;}



#confirmSec #confirmArea{ max-width:800px; margin:0 auto; padding:1em;}
#confirmSec #confirmArea .inputItemList{ padding:0; position:relative;}
#confirmSec #confirmArea .inputItemList:not(:last-child):after{
    content:"";
    width:100%;
    height:1px;
    background:linear-gradient(-90deg, #ccc 0%, #ccc 75%, #00A1C9 75%, #00A1C9 100%);
    background: -moz-linear-gradient(180deg, #ccc 0%, #ccc 75%, #00A1C9 75%, #00A1C9 100%); 
    background: -webkit-linear-gradient(180deg, #ccc 0%, #ccc 75%, #00A1C9 75%, #00A1C9 100%);
    display:block;
}
#confirmSec #confirmArea .inputItemList dt{ width:25%; padding:1em 0;}
#confirmSec #confirmArea .inputItemList dd{ width:75%; padding:1em 3em; font-weight:500;}



#confirmSec .backBtn{ text-align:center; margin:2em;}
#confirmSec .backBtn a{
    font-size:75%;
    font-weight:bold;
    text-decoration:none;
    border-radius:50%;
    border:2px solid #666;
    color:#666;
    padding:1em;
    display:inline-block;
}

#confirmSec .sendBtn{ text-align:center; margin:2em;}
#confirmSec .sendBtn button{
    color:#fff;
    padding:0.6em 3em 0.7em;
    text-align:center;
    font-size:150%;
    font-weight:bold;
    line-height:1em;
    text-decoration:none;
    border:none;
    border-radius:100px;
    background:linear-gradient(180deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%);
    background: -moz-linear-gradient(-90deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%); 
    background: -webkit-linear-gradient(-90deg,#9755D8 0%,#9755D8 50%,#884CC2 50%,#884CC2 100%);
    cursor:pointer;
}




/*--------------------------------------------------------------------------------
Thanks
--------------------------------------------------------------------------------*/
#thanksSec{}
#thanksSec .sectionInner{ padding:4em 1em;}
#thanksSec .sectionInner h2{ color:#FA387D; font-size:200%; margin:0 auto 1em;}
#thanksSec .sectionInner p{ font-size:112.5%; margin:0 auto;}
#thanksSec .sectionInner .backBtn{ max-width:240px; text-align:center; margin:3em auto 0;}
#thanksSec .sectionInner .backBtn a{
    display:block;
    font-size:112.5%;
    font-weight:bold;
    color:#fff;
    padding:0.4em 1.5em 0.5em;
    border-radius:100px;
    line-height:1em;
    position:relative;
    text-decoration:none;
    font-feature-settings:normal;
    transition:opacity .3s;
    background-color:#9755D8;
}
#thanksSec .sectionInner .backBtn a:hover{ opacity:0.6;}