@charset "UTF-8";
/* CSS Document */
*, *:before, *:after{margin:0;padding:0;border: 0;vertical-align:baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#nanka-fg-cp {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
font-size:14px;
line-height:1.5;
color:#474747;
letter-spacing:0;
width:100%;
max-width: 1920px;
margin: 0 auto;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
#nanka-fg-cp h1, #nanka-fg-cp h2, #nanka-fg-cp h3, #nanka-fg-cp h4, #nanka-fg-cp h5,#nanka-fg-cp h6 {
font-family: "Noto Sans JP", sans-serif;
transform: rotate(0deg);
}
ol, ul {
list-style: none;
list-style-type: none;
}
a:focus, *:focus { outline:none; }
a{
text-decoration: none;
color:#333;
}
a:hover{
cursor: pointer;
}
@media (min-width: 768px) {
a:hover{
opacity:0.7;
transition: .4s opacity;
}
}
#nanka-fg-cp img{
vertical-align:bottom;
}
img.w100{
width: 100%;
}
.sp-only,
.sp_display,
.for-sp{
display: none;
}

@media (min-width: 698px) {
.att_txt{
position: absolute;
right: 2%;
top: 22px;
font-size: 14px;
z-index: 101;
}
.for-sp{
display: none;
}
}


@media (min-width: 768px) {
.small-device{
display: none!important;
}

.main-kv{
background: url("../images/main-kv-bg_pc.jpg") no-repeat center bottom;
background-size: cover;
overflow: hidden;
}
.main-kv .inner-cp{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.main-kv .contents{
width: 100%;
max-width: 1360px;
margin: 0 auto;
position: relative;
}
.main-kv-model{
position: absolute;
bottom: 0;
right: -7.5%;
width: 60.5%;
}
.main-kv-model{
opacity: 0;
transform: translateX(100px);
}
.loaded .main-kv-model.ose{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.3s,transform 0.8s 0.3s;
}
.main-kv-img{
position: relative;
width: 100%;
}
.main-kv h1{
width: 37.5%;
position: absolute;
left: 8.6%;
top: 11.3%;
}
.main-kv h1 img{
opacity: 0;
transform: translateX(-80px);
}
.loaded .main-kv h1 img{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.9s,transform 0.8s 0.9s;
}
.main-kv-date{
position: absolute;
width: 29.7%;
left: 12.5%;
bottom: 11.6%;
}
.main-kv-date{
opacity: 0;
transform: translateY(80px);
}
.loaded .main-kv-date{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 1.4s,transform 0.8s 1.4s;
}
.main-kv-catch{
position: absolute;
width: 18.5%;
left: 47.2%;
top: 3.3%;
}
.main-kv-catch{
transform: scale(0.3);
opacity:0;
}
.loaded .main-kv-catch{
transform: scale(1);
opacity:1;
transition:transform 1s 1.7s,opacity 1s 1.7s;
}

.course-ex-sec{
position: relative;
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 400px auto;
overflow: hidden;
}
.course-ex-sec .sec-inner{
width: 92%;
max-width: 1160px;
margin: 0 auto;
}
.course-ex-sec-oj01{
position: absolute;
top: 0;
left: 0;
width: 19%;
max-width: 270px;
}
.course-ex-sec-oj02{
position: absolute;
top: 0;
right: 0;
width: 19%;
max-width: 270px;
}

.course-ex-sec .sec-cont-wrap{
padding: 5% 0 9.5%;
}

.course-ex-head{
width: 64%;
margin: 0 auto 7.4%;
}
.course-ex-head{
opacity:0;
}
.loaded .course-ex-head{
opacity:1;
transition:opacity 1s 1.9s;
}
.course-ex-first{
position: relative;
background: #fff;
margin: 0 0 11.4%;
padding: 5.8% 0 4%;
}
.course-ex-first{
opacity:0;
}
.loaded .course-ex-first{
opacity:1;
transition:opacity 1s 1.9s;
}
.course-ex-first-inner{
width: 85.6%;
margin: 0 auto;
}
.course-ex-first::before{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
top: 0;
background: url("../images/course-ex-first-top-line_pc.svg") no-repeat center top;
background-size: 100% auto;
}
.course-ex-first::after,
.course-ex-second::after{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
bottom: 0;
background: url("../images/course-ex-first-bottom-line_pc.svg") no-repeat center bottom;
background-size: 100% auto;
}
.course-ex-first-side-line{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -0%;
background: url("../images/course-ex-first-side-line_pc.svg") repeat-y center top;
background-size: 100% auto; 
}

.course-ex-first h2{
position: absolute;
width: 25.8%;
left: 0;
right: 0;
margin: auto;
top: -34px;
}

.course-ex-first-ttl{
text-align: center;
margin: 0 0 6.5%;
}
.course-ex-first-ttl img{
width: 66%;
}
.course-ex-item-wrap{
display: flex;
justify-content: space-between;
margin: 0 0 3%;
}
.course-ex-item-once{
width: 48%;
}
.course-ex-item-once:nth-child(2){
padding: 1.2% 0 0;
}


.course-ex-item{
margin: 0 auto; 
}
.course-ex-item{
position: relative;
}
.course-ex-item.item-a{
margin: 0 auto 11.5%; 
}
.item-a-flug,
.item-b-flug{
position: absolute;
width: 27%;
left: 4%;
top: -40px;
}
.item-a-flug{
top: -26px;
}
.oj-star01{
position: absolute;
width: 5.3%;
top: -7%;
right: -5%;
}
.oj-star02{
position: absolute;
width: 5.3%;
bottom: -14%;
left: -7%;
}
.oj-star03{
position: absolute;
width: 4.2%;
top: -19%;
right: 4%;
}
.oj-star04{
position: absolute;
width: 5.3%;
bottom: -14%;
right: -7%;
}
.course-ex-att-text{
padding: 4% 0;
font-size: 12px;
line-height: 1.4;
}
.course-ex-att-text dl{
display: flex;
}
.course-ex-att-text dt{
width: 18px;
flex-shrink: 0;
}
.course-ex-att-text dd{
flex-grow: 1;
}
.course-ex-att-text p{
font-size: 13px;
text-indent: -1.4em;
padding-left: 1.4em;
line-height: 1.4;
}
.course-ex-term-ttl{
text-align: center;
}
.course-ex-term-ttl img{
width: 100%;
}
.course-ex-term{
text-align: center;
}
.course-ex-term img{
width: 83%;
}
.oj-spoon{
position: absolute;
bottom: 29%;
right: -70px;
width: 33.5%;
z-index: 10;
}
.oj-cont-furuit{
position: absolute;
bottom: 26%;
right: 3%;
width: 47%;
z-index: 0;
}

.course-ex-second{
position: relative;
background: #fff;
padding: 13.6% 0 8%;
}
.course-ex-second-inner{
}
.course-ex-second h2 {
position: absolute;
width: 47%;
left: 0;
right: 0;
margin: auto;
top: -60px;
}
.course-ex-second-dl-box{
display: flex;
justify-content: space-between;
width: 92%;
max-width: 720px;
margin: 0 auto 6%;
}
.course-ex-second-phone{
width: 63.8%;
}
.course-ex-second-dl-cont{
width: 28.6%;
padding: 4% 0 0;
}
.course-ex-second-phone img{
width: 100%;
}
.course-ex-second-download-ttl{
text-align: center;
margin: 0 0 6%;
}
.course-ex-second-download-ttl img{
width: 100%;
}
.download-btn-box{
width: 100%;
}
.download-btn-box img{
width: 100%;
}
.download-btn-box a{
display: block;
width: 100%;
margin: 0 0 5%;
}
.step-cont-box{
width: 85.6%;
margin: 0 auto 7.7%;
padding: 0;
position: relative;
}
.step-cont-box .att01{
position: absolute;
width: 100%;
left: 0;
top: 40%;
font-size: 13px;
text-align: center;
}
.step-cont-box .att02{
position: absolute;
width: 100%;
left: 0;
bottom: 12%;
font-size: 13px;
text-align: center;
}
.step-cont-box:nth-of-type(2){
margin: 0 auto 2%;
}
.step-cont-box.end-step{
}
.step-cont-box:nth-of-type(3){
margin: 0 auto 2%;
}
.step-cont-ttl{
position: absolute;
width: 100%;
top: -40px;
left: -1.7%;
}
.step-cont-box:nth-of-type(1) .step-cont-ttl img.w100{
width: 37.7%;
position: relative;
left: 0.3%;
}
.step-cont-box:nth-of-type(2) .step-cont-ttl img.w100{
width: 62.2%;
}
.step-cont-box:nth-of-type(3) .step-cont-ttl img.w100{
width: 56.5%;
}
.step-package{
position: absolute;
width: 44%;
top: 43%;
left: 28%;
}
.step-btn01{
position: absolute;
width: 60%;
bottom: 21%;
left: 20%;
}
.step-btn02{
position: absolute;
width: 42%;
bottom: 11.3%;
left: 5.7%;
}
.step-btn03{
position: absolute;
width: 42%;
bottom: 11.3%;
right: 5.7%;
}
.course-ex-second-att-box{
width: 85.6%;
margin: 0 auto 0;
}
.course-ex-second-att-box p{
font-size:13px;
text-indent: -1em;
padding-left: 1em;
}

.course-ex-second::before{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
top: 0;
background: url("../images/course-ex-second-top-line_pc.svg") no-repeat center top;
background-size: 100% auto;
}
.course-ex-wrap{
position: relative;
}
.course-ex-wrap::after{
position: absolute;
content: '';
top: 1.2%;
left: -6.5%;
width: 12.2%;
height: 100%;
background: url("../images/ex-oj-left_pc.png") no-repeat center top;
background-size: 100% auto;
}
.course-ex-wrap::before{
position: absolute;
content: '';
top: 6%;
right: -7.5%;
width: 12.5%;
height: 100%;
background: url("../images/ex-oj-right_pc.png") no-repeat center top;
background-size: 100% auto;
z-index: 100;
}
.attention-sec{
background: url("../images/bg-pink.jpg") repeat center top ;
background-size: 400px auto;
}
.attention-sec .sec-inner{
width: 92%;
max-width: 1160px;
margin: 0 auto;
}
.attention-sec .sec-cont-wrap{
padding: 10.5% 0 10%;
}
.attention-once{
position: relative;
margin: 0 0 11%;
background: #fff;
border: 5px solid #EB0100;
}
.attention-once:last-child{
margin: 0 0;
}
.attention-once-ttl{
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: -40px;
}
.attention-once-ttl img{
width: 320px;
}
.attention-once-ttl img.qa-ttl{
width: 45.6%;
}
.attention-once-inner{
background: #fff;
padding: 6% 6% 5%;
border: 10px solid #FBCAC9;
}
.attention-once:last-child .attention-once-inner{
padding: 6% 6% 2%;
}
.attention-once-inner-cont{
}
.attention-once dl{
margin: 0 0 3%;
padding: 0 2%;
}
.attention-once dt{
font-size: 20px;
font-weight: 700;
color: #EB0100;
margin: 0 0 1%;
}
.attention-once dd{
font-size: 17px;
font-weight: 500;
}
.attention-once .att-ttl-img{
width: 61.2%;
margin: 0 auto 3%;
}
.attention-once .att-ttl{
font-size: 22px;
font-weight: 700;
color: #EB0100;
text-align: center;
margin: 0 0 3%;
}
.attention-once p{
font-size: 15px;
font-weight: 500;
}
.attention-once p a{
text-decoration: underline;
}
.with-scrl01{
height: 450px;
overflow-y: scroll;
padding: 0 2%;
}
.with-scrl02{
height: 350px;
overflow-y: scroll;
padding: 0 2%;
}
.list-ttl-box{
display: flex;
flex-wrap: wrap;
}
.list-name-ttl{
width: 85%;
font-size: 22px;
padding: 10px 16px 12px 0;
text-align: center;
}
.list-point-ttl{
display: flex;
justify-content: center;
align-items: center;
width: 15%;
font-size: 18px;
}
.list-of-item{
display: flex;
flex-wrap: wrap;
border-top: 2px solid #EB0100;
}
.list-name{
width: 85%;
font-size: 22px;
font-weight: 500;
padding: 16px 16px 16px 0;
border-bottom: 2px solid #EB0100;
border-right: 2px solid #EB0100;
}
.list-point{
display: flex;
justify-content: center;
align-items: center;
width: 15%;
font-size: 28px;
color: #EB0100;
border-bottom: 2px solid #EB0100;
}

.how-to-sec{
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 400px auto;
}
.how-to-sec .sec-inner{
width: 92%;
max-width: 980px;
margin: 0 auto;
}
.how-to-sec .sec-cont-wrap{
padding: 11% 0 13%;
}
.how-to-cont-once{
background: #ffd200;
border-radius: 30px;
padding: 0;
position: relative;
}
.how-to-cont-once h2{
margin: 0;
font-size: 1em;
}
.how-to-cont-once.active{
padding: 0 0 1px;
}
.js-acc-head.is-close::after{
position: absolute;
content: '';
bottom: -52px;
left: 0;
right: 0;
margin: auto;
width: 60px;
height: 50px;
background: url("../images/how-to-head-arrow.svg") no-repeat center bottom;
background-size: 100% auto;
}
.how-to-cont-once.active::after{
display: none;
}
.how-to-cont-once .ac-close{
}
.how-to-cont-once .ac-close{
display: block;
position: absolute;
width: 60px;
height: 50px;
left: 0;
right: 0;
margin: auto;
bottom: -52px;
transform: rotate(-180deg);
background: url("../images/how-to-head-arrow.svg") no-repeat center top;
background-size: 100% auto;
}
.how-to-cont-once .ac-close:hover{
opacity: 0.7;
}
.how-to-cont-once.check  .ac-close{
display: none;
}
.pt-d{
margin: 0 0 10%;
}
.pt-d.active{
margin: 0 0 10%;
}
.how-to-cont-ttl{
text-align: center;
padding: 4% 0 3.5%;
}
.how-to-cont-ttl:hover{
cursor: pointer;
opacity: 0.6;
}
.how-to-cont-ttl img{
width: 50%;
}
.how-to-cont-ttl img.for-d-ttl{
width: 69%;
}
.how-to-cont-ttl img.for-b-ttl{
width: 72%;
}
.how-to-cont{
width: 85%;
text-align: center;
background: #FDF4E2;
margin: 0 auto 6%;
padding: 7% 0 8%;
border-radius: 24px;
position: relative;
}
.how-to-cont-inner{
width: 85%;
max-width: 580px;
margin: 0 auto;
}
.ht-movie-thumb-box{
margin: 0 0 10%;
}
.step-once{
width: 100%;
display: flex;
}

.ht-step-img{
width: 30.5%;
margin: 0 4% 0 0;
flex-shrink: 0;
}
.ht-step-img img{
width: 100%;
}
.ht-step-cont{
flex-grow: 1;
padding: 2% 0 0;
}
.ht-step-ttl{
font-size: 24px;
font-weight: 700;
color: #EC6101;
margin: 0 0 4%;
line-height: 1.4;
text-align: left;
}
.ht-step-ttl span{
font-size: 21px;
}
.how-to-cont p{
font-size: 16px;
font-weight: 500;
text-align: left;
}

.ht-step-arrow{
text-align: center;
}
.ht-step-arrow img{
width: 7%;
padding: 7% 0 0;
}
.ht-step-finish{
width: 80%;
margin: 0;
}
.ajust01{
padding: 4% 0 0;
}
.ajust02{
padding: 6% 0 0;
}
.ajust03{
padding: 10% 0 0;
}
.end-ex-sec{
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 400px auto;
}

.end-bnr-wrap{
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.end-bnr-box01{
margin: 0 0 10%;
position: relative;
pointer-events:none;
transition:0.8s;
}
.end-bnr-box01:hover{
opacity: 0.7;
}
.end-bnr-box01:hover img{
opacity: 0.7;
transition: .4s opacity;
}
.end-bnr-box01 a{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events:auto;
}
.end-bnr-box02{
padding: 0 0 10%;
}
.page-top{
position: fixed;
width: 50px;
height: 50px;
bottom: 64px;
right: 2%;
cursor: pointer;
display: none;
z-index: 1000;
}
.cs-x-cp{
width: 85.6%;
max-width: 800px;
margin: 0 auto 7%;
}
.x-campaign-wrap{
background: #EB0100;
border-radius: 30px;
margin: 0 0 9%;
padding: 2% 0 7%;
}
.x-campaign-wrap h2{
margin: 0;
}
.x-campaign-ttl{
width: 88%;
position: relative;
left: 6%;
}
.x-campaign-btn{
width: 32%;
position: relative;
margin: 0 auto 3%;
}
.x-campaign-btn a{
display: block;
}
.x-campaign-att{
width: 48%;
margin: 0 auto;
}
.x-campaign-item-box{
width: 85%;
margin: 0 auto;
padding: 2% 0 3%;
display: flex;
justify-content: space-between;
}
.x-campaign-item-left{
width: 46.5%;
}
.x-campaign-item-right{
width: 45.2%;
padding: 2.7% 0 0;
}
.x-campaign-item-left img,
.x-campaign-item-right img{
width: 100%;
}
.attention-for-x{
width: 96%;
border-radius: 14px;
border: 2px solid #EB0100;
padding: 1.5% 270px 1.5% 1.5%;
margin: 0 auto 3%;
position: relative;
}
.attention-for-x-btn{
width: 250px;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 1.5%;
margin: auto 0;
display: flex;
align-items: center;
}
.attention-for-x p{
font-size: 16px;
font-weight: 500;
margin: 0 0 1%;
}
.attention-for-x span{
font-size: 14px;
}



}

/*==============================================================================================*/
@media (max-width: 1100px) and (min-width: 768px) {
.oj-cont-furuit {
display: none;
}
.oj-spoon {
bottom: 27%;
right: -120px;
width: 31%;
z-index: 10;
}
.step-cont-ttl {
top: -28px;
    }
    .item-a-flug, .item-b-flug {
top: -30px;
    }
.course-ex-first h2 {
top: -2.6vw;
}
} 
@media (max-width: 900px) and (min-width: 768px) {
.oj-spoon {
bottom: 22%;
right: -120px;
width: 31%;
z-index: 10;
}
.attention-for-x{
padding: 1.5% 210px 1.5% 1.5%;
}
.attention-for-x-btn{
width: 200px;
}
} 
@media (max-width: 1000px) and (min-width: 768px) {
.step-cont-box .att01 {
top: 40%;
font-size: 12px;
}      
    .step-cont-box .att02 {
position: absolute;
width: 100%;
left: 0;
bottom: 8%;
font-size: 12px;
    }
    .course-ex-second-att-box p {
font-size: 12px;
    }
    .attention-once-inner {
padding: 6% 3.4% 5%;
    }
    .attention-once:last-child .attention-once-inner {
padding: 6% 3.4% 2%;
    }
    .list-point-ttl {
width: 15%;
font-size: 14px;
    }
    .list-name {
font-size: 17px;
padding: 16px 16px 16px 0;
border-bottom: 2px solid #EB0100;
border-right: 2px solid #EB0100;
    }
    .list-point {
font-size: 20px;
    }
    .attention-once p {
font-size: 14px;
    }
    .attention-once dd {
font-size: 16px;
    }
    .how-to-cont-ttl img {
width: 60%;
    }
    .how-to-cont {
width: 90%;
background: #FDF4E2;
margin: 0 auto 6%;
padding: 7% 0 8%;
border-radius: 24px;
    }
    .how-to-cont-inner {
width: 90%;
margin: 0 auto;
}





}


@media (max-width: 697px) {
.att_txt{
position: absolute;
z-index: 101;
font-size: 2.2vw;
font-weight: 400;
top: 1.9em;
right: 1rem;
}
.for-sp{
display: block;
}
}


/*==============================================================================================*/
@media (max-width: 767px) {
.oj-cont-furuit,
.step-cont-box .att01,
.step-cont-box .att02,
.oj-star02,
.oj-star04{
display: none;
}
.sp-only{
display: inline;
}

section{
overflow: hidden;
}

.sec-inner{
width: 100%;

}
.sec-cont-wrap{
width: 100%;
}



.main-kv{
background: #f90a05;
}
.main-kv .inner-cp{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.main-kv .contents{
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.main-kv-model{
position: absolute;
bottom: 0;
right: 0;
width: 66%;
}
.main-kv-img{
position: relative;
width: 100%;
}

.main-kv h1{
width: 45.8%;
position: absolute;
left: 2%;
top: 19%;
}
.main-kv-date{
position: absolute;
width: 37.3%;
left: 4%;
bottom: 19.2%;
}
.main-kv-catch{
position: absolute;
width: 26%;
left: 50%;
top: 3.5%;
}

.main-kv-model{
opacity: 0;
transform: translateX(100px);
}
.loaded .main-kv-model.ose{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.3s,transform 0.8s 0.3s;
}

.main-kv h1 img{
opacity: 0;
transform: translateX(-80px);
}
.loaded .main-kv h1 img{
opacity: 1;
transform: translateX(0);
transition:opacity 1s 0.9s,transform 0.8s 0.9s;
}
.main-kv-date{
opacity: 0;
transform: translateY(80px);
}
.loaded .main-kv-date{
opacity: 1;
transform: translateY(0);
transition:opacity 1s 1.4s,transform 0.8s 1.4s;
}
.main-kv-catch{
transform: scale(0.3);
opacity:0;
}
.loaded .main-kv-catch{
transform: scale(1);
opacity:1;
transition:transform 1s 1.7s,opacity 1s 1.7s;
}


.course-ex-sec{
position: relative;
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 280px auto;
}
.course-ex-sec-oj01{
position: absolute;
top: 0;
left: 0;
width: 23%;
}
.course-ex-sec-oj02{
position: absolute;
top: 0;
right: 0;
width: 23%;
}
.course-ex-head{
width: 88%;
margin: 0 auto 11.7%;
}

.course-ex-sec .sec-cont-wrap{
padding: 6% 3.7% 12.5%;
}

.course-ex-first{
position: relative;
background: #fff;
margin: 0 0 25.2%;
padding: 9.7% 0 10%;
}
.course-ex-first{
opacity:0;
}
.loaded .course-ex-first{
opacity:1;
transition:opacity 1s 2.2s;
}
.course-ex-first::before{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
top: 0;
background: url("../images/course-ex-first-top-line.svg") no-repeat center top;
background-size: 100% auto;
}
.course-ex-first::after,
.course-ex-second::after{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
bottom: 0;
background: url("../images/course-ex-first-bottom-line.svg") no-repeat center bottom;
background-size: 100% auto;
}
.course-ex-first-side-line{
position: absolute;
width: 101%;
height: 100%;
top: 0;
left: -0.5%;
background: url("../images/course-ex-first-side-line.svg") repeat-y center top;
background-size: 100% auto; 
}

.course-ex-first h2{
position: absolute;
width: 49.5%;
left: 0;
right: 0;
margin: auto;
top: -5.7vw;
}

.course-ex-first-ttl{
text-align: center;
margin: 0 0 4%;
}
.course-ex-first-ttl img{
width: 85%;
}
.course-ex-item{
width: 92%;
margin: 0 auto; 
}
.course-ex-item{
position: relative;
}
.oj-star01,.oj-star03{
position: absolute;
width: 4.4%;
top: -1vw;
right: 0;
}
.oj-star03{
position: absolute;
width: 4.4%;
top: -6.5vw;
right: 0;
}

.course-ex-item.item-a{
margin: 0 auto 11.5%; 
}
.item-a-flug,
.item-b-flug{
position: absolute;
width: 27%;
left: 1%;
top: -7vw;
}
.item-a-flug{
top: -1.5vw;
}
.course-ex-att-text{
padding: 4% 5%;
font-size: min(3.2vw, 14px);
}
.course-ex-att-text dl{
display: flex;
}
.course-ex-att-text dt{
width: 18px;
flex-shrink: 0;
}
.course-ex-att-text dd{
flex-grow: 1;
}
.course-ex-att-text p{
font-size: 13px;
  text-indent: -1.4em;
  padding-left: 1.4em;
line-height: 1.4;
}
.course-ex-term-ttl{
text-align: center;
}
.course-ex-term-ttl img{
width: 92%;
}
.course-ex-term{
text-align: center;
}
.course-ex-term img{
width: 66%;
}

.oj-spoon{
position: absolute;
bottom: -10vw;
right: -4%;
width: 52.5%;
z-index: 10;
}



.course-ex-second{
position: relative;
background: #fff;
padding: 21.6% 0 10%;
}
.course-ex-second-inner{

}
.course-ex-second h2 {
position: absolute;
width: 72.3%;
left: 0;
right: 0;
margin: auto;
top: -6.5vw;
}
.course-ex-second-phone{
text-align: center;
margin: 0 0 5%;
position: relative;
z-index: 1;
}
.course-ex-second-phone img{
width: 77%;
}
.course-ex-second-download-ttl{
text-align: center;
margin: 0 0 3%;
}
.course-ex-second-download-ttl img{
width: 35%;
}
.download-btn-box{
width: 85.5%;
margin: 0 auto 14%;
display: flex;
justify-content: space-between;
}
.download-btn-box img{
width: 100%;
}
.download-btn-box a{
display: block;
width: 48%;
}
.step-cont-box{
margin: 0 0 13%;
padding: 0 5%;
position: relative;
}
.step-cont-box.end-step{
}
.step-cont-box:nth-of-type(3){
margin: 0 0 4%;
}
.step-cont-ttl{
position: absolute;
width: 89%;
top: -4.5vw;
left: 2.2%;
}
.step-cont-ttl .t-step01{
width: 73%;
}




.step-cont-ttl.ajust-center{
text-align: center;
}
.step-package{
position: absolute;
width: 62%;
top: 41%;
left: 19%;
}
.step-btn01{
position: absolute;
width: 83%;
top: 50%;
left: 8.5%;
}
.step-btn02{
position: absolute;
width: 83%;
top: 46.5%;
left: 8.5%;
}
.step-btn03{
position: absolute;
width: 83%;
bottom: 8vw;
left: 8.5%;
}
.course-ex-second-att-box{
width: 90%;
margin: 0 auto 0;
}
.course-ex-second-att-box p{
font-size: min(3.2vw, 15px);
  text-indent: -1em;
  padding-left: 1em;
}

.course-ex-second::before{
position: absolute;
content: '';
width: 100%;
height: 2%;
left: 0;
top: 0;
background: url("../images/course-ex-second-top-line.svg") no-repeat center top;
background-size: 100% auto;
}
.course-ex-wrap{
position: relative;
}
.course-ex-wrap::after{
position: absolute;
content: '';
top: 2vw;
left: -3.7vw;;
width: 11.6%;
height: 100%;
background: url("../images/ex-oj-left.png") no-repeat center top;
background-size: 100% auto;
}
.course-ex-wrap::before{
position: absolute;
content: '';
top: 22vw;
right: -3.7vw;
width: 11.6%;
height: 100%;
background: url("../images/ex-oj-right.png") no-repeat center top;
background-size: 100% auto;
z-index: 100;
}


.attention-sec{
background: url("../images/bg-pink.jpg") repeat center top ;
background-size: 180px auto;
padding: 14.5% 4.2% 10%;
}

.sec-cont-wrap .sec-cont-wrap{
}
.attention-once{
position: relative;
margin: 0 0 16%;
background: #fff;
border: 2px solid #EB0100;
}
.attention-once:last-child{
margin: 0 0;
}
.attention-once-ttl{
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: -5.3vw;
}
.attention-once-ttl img{
width: 40%;
}
.attention-once-ttl img.faq-ttl{
width: 45%;
}

.attention-once-ttl img.qa-ttl{
width: 45.6%;
}
.attention-once-inner{
background: #fff;
padding: 10% 3.2% 5%;
border: 5px solid #FBCAC9;
}
.attention-once-inner-cont{

}
.attention-once dl{
margin: 0 0 6%;
padding: 0 2%;
}
.attention-once dt{
font-size: min(3.5vw, 18px);
font-weight: 700;
color: #EB0100;
margin: 0 0 2%;
}
.attention-once dd{
font-size: min(3.2vw, 15px);
font-weight: 500;
}
.attention-once .att-ttl-img{
width: 94%;
margin: 0 auto 6%;
}
.attention-once .att-ttl{
font-size: min(3.2vw, 18px);
font-weight: 700;
color: #EB0100;
text-align: center;
margin: 0 0 5%;
}
.attention-once p{
font-size: min(3.2vw, 15px);
}
.attention-once p a{
text-decoration: underline;
}
.attention-for-x{
width: 96%;
border-radius: 3vw;
border: 2px solid #EB0100;
padding: 4%;
margin: 0 auto 6%;
}
.attention-for-x-btn{
margin: 0 0 2%;
}
.attention-for-x p{
font-size: min(3.2vw, 15px);
font-weight: 500;
margin: 0 0 3%;
}
.attention-for-x span{
font-size: min(2.8vw, 14px);
}





.with-scrl01{
height: 120vw;
overflow-y: scroll;
padding: 0 2%;
}
.with-scrl02{
height: 65vw;
overflow-y: scroll;
padding: 0 2%;
}
.list-ttl-box{
display: flex;
flex-wrap: wrap;
}
.list-name-ttl{
width: 85%;
font-size: min(3.2vw, 15px);
padding: 10px 16px 12px 0;
text-align: center;
}
.list-point-ttl{
display: flex;
justify-content: center;
align-items: center;
width: 15%;
font-size: min(2.8vw, 15px);
padding: 4px 0;
text-align: center;
}
.list-of-item{
display: flex;
flex-wrap: wrap;
border-top: 1px solid #EB0100;
}
.list-name{
width: 85%;
font-size: min(3.2vw, 15px);
font-weight: 500;
padding: 10px 12px 10px 0;
border-bottom: 1px solid #EB0100;
border-right: 1px solid #EB0100;
}
.list-point{
display: flex;
justify-content: center;
align-items: center;
width: 15%;
font-size: min(4.2vw, 18px);
color: #EB0100;
border-bottom: 1px solid #EB0100;
}













.end-bnr-box01{
padding: 0 5.3% 10%;
position: relative;
}
.end-bnr-box01 a{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
}
.end-bnr-box02{
padding: 0 5.3% 10%;
}



.how-to-sec{
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 280px auto;
}
.how-to-sec .sec-cont-wrap{
margin: 0 auto;
padding: 9.6% 4.2% 10.6%;
}
.how-to-cont-once{
background: #ffd200;
border-radius: 4vw;
padding: 0;
position: relative;
}
.how-to-cont-once h2{
margin: 0;
font-size: 1em;
}
.how-to-cont-once.active{
padding: 0 0 1px;
}
.how-to-cont-once::after{
position: absolute;
content: '';
top: 103%;
left: 0;
right: 0;
margin: auto;
width: 12%;
height: 8vw;
background: url("../images/how-to-head-arrow.svg") no-repeat center top;
background-size: 100% auto;
}
.how-to-cont-once.active::after{
display: none;
}
.pt-d{
margin: 0 0 15%;
}
.pt-d.active{
margin: 0 0 15%;
}
.how-to-cont-once .ac-close{
display: none;
}
.how-to-cont-once .ac-close{
display: block;
position: absolute;
width: 10vw;
height: 8vw;
left: 0;
right: 0;
margin: auto;
bottom: -8.5vw;
transform: rotate(-180deg);
background: url("../images/how-to-head-arrow.svg") no-repeat center top;
background-size: 100% auto;
}
.js-acc-head.is-close::after {
position: absolute;
content: '';
bottom: -8.8vw;
left: 0;
right: 0;
margin: auto;
width: 10vw;
height: 8vw;
background: url(../images/how-to-head-arrow.svg) no-repeat center bottom;
background-size: 100% auto;
}


.how-to-cont-ttl{
text-align: center;
padding: 7.2% 0 7.2%;
}
.how-to-cont-ttl img{
width: 59%;
}
.how-to-cont{
width: 90%;
text-align: center;
background: #FDF4E2;
margin: 0 auto 6%;
padding: 7% 5.3% 12%;
border-radius: 3vw;
}
    .how-to-cont-once.check .ac-close {
display: none;
    }
.ht-movie-thumb-box{
margin: 0 0 7%;
}
.ht-step-img{
text-align: center;
margin: 0 0 3%;
}
.ht-step-img img{
width: 72%;
}
.ht-step-ttl{
font-size: 17px;
font-size: min(4.5vw, 28px);
font-weight: 700;
text-align: center;
color: #EC6101;
margin: 0 0 2%;
line-height: 1.4;
}
.how-to-cont p{
width: 90%;
margin: 0 auto;
font-size: min(3.3vw, 16px);
text-align: left;
}
.how-to-cont p.ajust-center{
text-align: center;
}
.ht-step-arrow{
text-align: center;
}
.ht-step-arrow img{
width: 13%;
padding: 7% 0 8%;
}
.ht-step-finish{
width: 70%;
margin: 0 auto;
}

.end-ex-sec{
background: url("../images/bg-beige.jpg") repeat center top ;
background-size: 280px auto;
}
.end-ex-sec .sec-inner{
padding: 14% 0 0;
}
.end-ex-sec .sec-cont-wrap{
position: relative;
}
.cp-x-box{
position: relative;
margin: 0 0 12.5%;
padding: 0 3%;
}
.end-ex-ttl{
position: absolute;
width: 100%;
left: 0;
top: -12vw;
text-align: center;
}
.end-ex-ttl img{
width: 61%;
}
.end-ex-cont01{
position: absolute;
width: 75.4%;
top: 19%;
left: 12%;
}
.end-ex-cont02{
position: absolute;
width: 86%;
top: 45%;
left: 7.5%;
z-index: -1;
}

.end-ex-date{
position: absolute;
width: 43.2%;
top: 12%;
left: 28.4%;
}
.end-ex-count{
position: absolute;
width: 21.6%;
top: 7.5%;
right: 6%;
}

.end-ex-under-text{
position: absolute;
width: 63.2%;
bottom: 11%;
left: 18.4%;
}
.end-ex-btn{
position: absolute;
width: 71%;
bottom: 4%;
left: 14.5%;
}
.page-top{
position: fixed;
width: 34px;
height: 34px;
bottom: 44px;
right: 3%;
cursor: pointer;
display: none;
z-index: 1000;
}
.cs-x-cp{
width: 100%;
margin: 0 auto 12%;
}
.x-campaign-wrap{
background: #EB0100;
border-radius: 4vw;
margin: 0 0 11%;
padding: 4% 0 13%;
}
.x-campaign-wrap h2{
margin: 0;
}
.x-campaign-ttl{
width: 95%;
position: relative;
left: 2.5%;
margin: 0 0 3%;
}
.x-campaign-item01{
width: 75.4%;
position: relative;
left: 17.5%;
margin: 0 0 8%;
}
.x-campaign-item02{
width: 85.5%;
position: relative;
left: 10%;
margin: 0 0 7%;
}
.x-campaign-btn{
width: 77.6%;
position: relative;
margin: 0 auto 7%;
}
.x-campaign-btn a{
display: block;
}
.x-campaign-att{
width: 82%;
margin: 0 auto;
}

}

/*==============================================================================================*/
@media (max-width: 617px) {
header {
height: 15vw;
padding: 3vw 0;
border-bottom: 0;
}

#header_calbeeroot .logo img {
width: 25vw;
}
header .logo {
font-size: 0px;
width: 25vw;
position: absolute;
left: .8rem;
top: 2.3vw;
}
.attention_txt {
top: 4vw;
font-size: 2.5vw;
}
}




.swing01 {animation:swing01 6s infinite linear;}
.swing02 {animation:swing02 3.7s infinite linear;}
.swing03 {animation:swing03 5.7s infinite ease-in-out;}
.swing04 {animation:swing04 2.7s infinite ease-in-out;}
.up-down01 {animation:up-down01 3.9s infinite ease-in-out;}
.up-down02 {animation:up-down02 3.4s infinite ease-in-out;}
@keyframes swing01 {
0% {transform:translate(0, 0) rotate(0deg);}
20% {transform:translate(0, 0) rotate(0deg);}
24% {transform:translate(0, 0) rotate(-8deg);}
28% {transform:translate(0, 0) rotate(8deg);}
32% {transform:translate(0, 0) rotate(-8deg);}
36% {transform:translate(0, 0) rotate(0deg);}
100% {transform:translate(0, 0) rotate(0deg);}
}


.zoom01 {
  animation: zoom01 3s ease-out infinite;
  opacity: 1;
}
.zoom02 {
  animation: zoom01 3s ease-out infinite;
  opacity: 1;
}
@keyframes zoom01 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(1.1);
  }
}
.zoom02 {
  animation: zoom02 3s ease-out infinite;
  opacity: 1;
}
@keyframes zoom02 {
  0%, 30%, 50%, 70% {
    transform: scale(1.0);
  }
  40%, 60% {
    transform: scale(1.1);
  }
}


.blink {
  animation: blink 3s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
48% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
52% {
    opacity: 1;
  }
58% {
    opacity: 1;
  }
60% {
    opacity: 0;
  }
62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}


.main-kv-model,
.course-ex-item img,
.end-bnr-box01 img,
.x-campaign-item01{
pointer-events: none;
}




@media print {
  body {
    display: none !important;
  }
}