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

/*--------------------------------------
　Main Index
---------------------------------------*/


/*===========
inview
===========*/

.fadeIn_up {
  transform: translate(0, 100px);
  transition: all .6s ease-in-out;
  opacity: 0;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up2 {
  transform: translate(0, 40px);
  transition: all .3s ease-in-out;
  opacity: 0;
}
.fadeIn_up2.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_up.delay1{
  transition-delay: 0.1s; 
}
.fadeIn_up.delay2{
  transition-delay: 0.2s; 
}


  

/*------------
　body_PC
------------*/
body {
background: none;
min-width:0;
}

.forTab{
position: relative;
z-index: 1;
}
.index{
}

img:not([width]) {
/*width:100%;*/
height:auto;
max-width: 100%;
}

.areaInner{
width: 1100px;
}





/*--------------------------------------
　header_PC
---------------------------------------*/
#header{
margin: 0 0 -14rem;
padding: 0 0 0;
height: auto;
}
#header::before{
width: 0;
height: 0;
background: none;
border: none;
}

#header .topArea2{
position: static;
padding: 1.5rem 2rem 2rem;
}
#header .siteName{
}

#BotNav {
    display: none;
}

/* mvArea */

#header .mvArea{
position: relative;
height: 38.99vw;
background: url("./img/mv_bg.webp") 50% 0 no-repeat;
	background-size: 85.99vw; /* または具体的な rem/パーセンテージ */

}
#header .mvArea .ttlBox{
position: absolute;
top: 0;
left: calc(50% - 42.5vw); 
width: 32.5vw;
padding: 1.33vw 2vw 1.33vw;
background: #fff;
border: 0.18vw solid #000;
border-radius: 1.66vw;
}
#header .mvArea .ttlBox::before{
content: "";
position: absolute;
z-index: -1;
top: 0.8vw;
left: -0.2vw;
width: 100%;
height: 100%;
background: #3fa7f3;
border: 0.18vw solid #000;
border-radius: 1.66vw;
}
#header .mvArea .ttlBox::after{
content: "";
position: absolute;
top: -4vw;
    left: -3.2vw;
width: 14.43vw;
height: 100%;
background: url(./img/mv_busstop.svg) 0 0 no-repeat;
background-size: 6vw auto;
}
#header .mvArea .ttlBox .fuki{
display: inline-block;
padding: 0.6vw 1.88vw 0.6vw;
background: #0576ca;
border-radius: 9999px;
line-height: 1;
font-size: 1.5vw;
font-weight: 700;
color: #fff;
}
#header .mvArea h2{
font-size:3vw;
}

#header .mvArea h2 .line1{
font-size: 3.6rem;
}
#header .mvArea h2 .line1 .fontL1{
font-size: 3.5vw;
}
#header .mvArea h2 .line1 .fontL2{
font-size: 3.5vw;
color: #50a229;
}

#header .mvArea .flame{
position: absolute;
bottom: 0.4vw;
    width: 42vw;
left: calc(50% + 1.11vw);
}



/* slideArea */

#header .slideArea{
padding: 10rem 0 5rem;
}

/* eng_slider1_PC */
#header .eng_slider1{
/*position: absolute;
z-index: 3;
top: 27vw;*/
}
#header .eng_slider1 .slick-slide{
/*height: 9vw;
margin-right: 2vw!important;
margin-left: 2vw!important;*/
}


/* mvArea2 */
#header .mvArea2{
padding: 0 0 26rem;
background: url("./img/mv_bot.png") 0 100% no-repeat;
background-size: 100% auto;
}
#header .mvArea2 .sttl{
z-index: 1;
width: 85rem;
margin: 0 auto;
padding: 6rem 2rem 7rem;
text-align: center;
line-height: 2.3;
font-size:3.0rem;
}
#header .mvArea2 .sttl .fontL{
position: relative;
padding: 0 4rem;
font-size:4.0rem;
}

#header .mvArea2 .sttl::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
opacity: .7;
}
#header .mvArea2 .sttl .fontL::before{
content: "";
position: absolute;
top: 1rem;
left: 1.5rem;
width: 2.3rem;
height: 3rem;
background: url(./img/dquote1.svg) 0 0 no-repeat;
background-size: 2.3rem auto;
}
#header .mvArea2 .sttl .fontL::after{
content: "";
position: absolute;
top: 1rem;
right: 1.3rem;
width: 2.3rem;
height: 3rem;
background: url(./img/dquote2.svg) 0 0 no-repeat;
background-size: 2.3rem auto;
}

#header .mvArea2 .btn-internal{
margin: -3.5rem 0 0;
}
#header .mvArea2 .btn-internal a::before{
background-image: url(./img/arrow_ccl_wt_vt.svg);
}



/*------------
contents_PC
------------*/

#contents{
margin: 0;
}
#contents::before{
}

.index{
width: 100%;
padding: 0 0 10rem;
}




/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
}
.indexSect .areaInner{
}
.indexSect .sectTtlArea{
position: relative;
}
.indexSect .sectTtl{
line-height: 1.7;
font-size:3.2rem;
}
.indexSect .sectTtl .fontL{
font-size:5.0rem;
}


/*------------
sect00_PC
------------*/
#sect00 {
    padding: 2rem 0 5rem;
}
#sect00::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 5rem;
    left: calc(50% + 5rem);
    width: 45rem;
    height: 23rem;
    background: url(./img/sct00_map.png) 0 0 no-repeat;
    opacity: 0.8;
}
#sect00::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 9rem;
    left: calc(50% + 17rem);
    width: 34rem;
    height: 23rem;
    /* background: url(./img/sct00_line.svg) 0 0 no-repeat; */
    background-size: 34rem auto;
}

#sect00 .areaInner {
    background: #fff;
    border: 2px solid #000;
    border-radius: 1.5rem;
    padding: 7rem 0rem 0rem 0rem;
}
#sect00 .areaInner::before {
content: "";
position: absolute;
z-index: -1;
top: 1.4rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect00 .headArea{
position: relative;
padding: 3rem 5rem 0 36rem;
}

#sect00 .headArea .flame{
position: absolute;
top: -2rem;
left: 5rem;
width: 28.8rem;
}
#sect00 .boxTtl{
position: relative;
left: -0.5rem;
display: inline-block;
margin: 0 0 .3rem;
background: #3fa6f3;
padding: 1.2rem 1.7rem 1.4rem;
border-radius: 9999px;
line-height: 1;
font-size:1.8rem;
font-weight: 700;
color: #fff;
}
#sect00 .headArea h2{
font-size:2.4rem;
	z-index: 2;
}
#sect00 .headArea .sttl{
display: block;
z-index: 1;
margin: 0 0 0;
font-size:4.0rem;
}

#sect00 .mainArea{
position: relative;
padding: 1rem 0 3rem;
}

#sect00 .txtArea{
padding: 0 5rem 1rem;
/* font-weight: 700; */
}
#sect00 .txtArea .txt_bold{
color: #e5a00c;
}











/*------------
sect01_PC
------------*/
#sect01{
padding: 18rem 0 31rem;
background: url(./img/pt_dot_gr2.png) 0 0 repeat;
background-size: 3rem auto;
}
#sect01::before{
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 40rem;
background: url(./img/sct01_top.svg) 50% 0 no-repeat;
background-size: 120% 40rem;
}
#sect01::after{
content: "";
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 40rem;
background: url(./img/sct01_bot.svg) 50% 100% no-repeat;
background-size: 120% 40rem;
}

#sect01 .areaInner::before{
content: "JOURNEY";
position: absolute;
top: -10rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 12.0rem;
text-align: center;
color: #d9efce;
}


#sect01 .sectTtlArea{
margin: 0 15rem 11rem;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect01 .sectTtlArea .inner{
position: relative;
z-index: 1;
border-radius: 1.3rem;
background: #fff;
}
#sect01 .sectTtlArea::before {
content: "";
position: absolute;
z-index: 0;
top: .8rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect01 .sectTtlArea .sttl{
padding: 1.8rem 4rem 2rem;
background: #151b40;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
color: #fff;
}
#sect01 .sectTtl{
padding: 3rem 4rem 4rem;
text-align: center;
}
#sect01 .sectTtl .line1{
display: block;
}
#sect01 .sectTtl .ccl{
margin: 0 1rem 0 0;
padding: .5rem 1.5rem .7rem;
background: #50a229;
border-radius: 9999px;
color: #fff;
}



#sect01 .mainBox{
position: relative;
z-index: 1;
background: #fff;
padding: 0 0 6rem;
border: 2px solid #000;
border-radius: 1.5rem;
} 
#sect01 .mainBox::before{
content: "CHECK！";
position: absolute;
z-index: 1;
top: -4.5rem;
left: calc(50% - 10.5rem);
width: 21rem;
padding: 3.0rem 0;
background: #ffb926;
border-radius: 50%;
border: 2px solid #000;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 2.4rem;
text-align: center;
color: #000;
}

#sect01 .mainBox .upperArea{
position: relative;
margin: 0 0 15rem;
padding: 10rem 0 0;
background: #FFFFF4;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
}
#sect01 .mainBox .upperArea::before{
content: "";
position: absolute;
bottom: -12rem;
left: 0;
width: 100%;
height: 12rem;
background: url(./img/sct01_tri2.svg) 50% 100% no-repeat;
background-size: 100% 12rem;
}
#sect01 .mainBox .upperArea::after{
content: "";
position: absolute;
bottom: -15rem;
left: 0;
width: 100%;
height: 8rem;
background: url(./img/sct01_tri.svg) 50% 100% no-repeat;
background-size: 11.5rem auto;
}

#sect01 .mainBox .upperArea h3{
margin: 0 0 3rem;
line-height: 1.8;
font-size:3.2rem;
}
#sect01 .mainBox .upperArea h3 .line1{
display: block;
}
#sect01 .mainBox .upperArea h3 .line2{
display: block;
margin: 0 0 .5rem;
font-size:2.4rem;
}
#sect01 .mainBox .upperArea h3 .line3{
display: block;
}
#sect01 .mainBox .upperArea h3 .line3 .fontL{
display: inline-block;
margin: 0 1rem 0 0;
padding: .5rem 1.2rem 1.2rem;
background: #3fa6f3;
border-radius: 1.5rem;
line-height: 1;
font-size:4.0rem;
color: #fff;
}


#sect01 .mainBox .illArea{
position: relative;
background: url(./img/sct01_ill02.png) 50% 100% no-repeat;
background-size: 32rem auto;
}
#sect01 .mainBox .illArea .inner{
position: relative;
height: 33rem;
background: url(./img/sct01_ill01.png) 50% 0 no-repeat;
background-size: 12.7rem auto;
}

#sect01 .mainBox .illArea .fuki{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 16rem;
height: 16rem;
background: #fff;
border-radius: 50%;
text-align: center;
font-weight: 700;
}
#sect01 .mainBox .illArea .fuki1{
top: 1rem;
left: 20rem;
}
#sect01 .mainBox .illArea .fuki2{
top: 14.5rem;
right: 22rem;
}
#sect01 .mainBox .mainTxt{
padding: 5rem 0 0;
font-size:2.2rem;
font-weight: 700;
}
#sect01 .mainBox .mainTxt p{
line-height: 2.1;
text-align: center;
}


#sect01 .mainBox .lowerArea{
margin: -7rem 0 0;
padding: 12rem 5rem 2rem;
}
#sect01 .mainBox .lowerArea h3{
margin: 0 0 4rem;
text-align: center;
line-height: 1.7;
font-size:3.0rem;
}
#sect01 .mainBox .lowerArea h3::before{
content: "";
position: absolute;
top: 1rem;
left: calc(50% - 42rem);
width: 4rem;
height: 5rem;
background: url(./img/sct01_deco.svg) 0 0 no-repeat;
background-size: 4rem auto;
}
#sect01 .mainBox .lowerArea h3::after {
    content: "";
    position: absolute;
    top: 1rem;
    left: calc(50% + 37rem);
    width: 4rem;
    height: 9rem;
    background: url(./img/sct01_deco.svg) 0 0 no-repeat;
    background-size: 4rem auto;
    transform: scaleX(-1);
}

#sect01 .mainBox .lowerArea h3 .line2{
display: block;
font-size:3.6rem;
}
#sect01 .mainBox .lowerArea h3 .line2 .fontL{
display: inline-block;
margin: 0 .7rem 0 0;
padding: .3rem 1.2rem .9rem;
background: #3fa6f3;
border-radius: .8rem;
line-height: 1;
font-size:4.0rem;
color: #fff;
}

#sect01 .mainBox .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5rem 0 5rem;
}
#sect01 .mainBox .liBox{
width: 31.2rem;
}
#sect01 .mainBox .liBox:nth-child(2){
top:-5rem;
}
#sect01 .mainBox .liBox .fuki{
position: relative;
background: #ebf8ff;
padding: 0 0 0rem;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect01 .mainBox .liBox .fuki::before {
content: "";
position: absolute;
bottom: -40px;
left: 50%;
margin-left: -14px;
border: 14px solid transparent;/* 幅 */
border-top: 26px solid #ebf8ff;/* 高さ */
z-index: 2;
}
#sect01 .mainBox .liBox .fuki::after {
content: "";
position: absolute;
bottom: -46px;
left: 50%;
margin-left: -16px;
border: 16px solid transparent;/* 幅 */
border-top: 28px solid #000;/* 高さ */
z-index: 1;
}
#sect01 .mainBox .liBox h4{
background: #fff;
padding: 2rem 1rem 2.5rem;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
line-height: 1.7;
font-size:2.0rem;
}
#sect01 .mainBox .liBox h4 .fontL{
display: block;
font-size:2.4rem;
}
#sect01 .mainBox .liBox p{
padding: 0 3rem;
line-height: 1.7;
}


/* accordion_grd */
#sect01 .mainBox .liBox .text {
height: 18rem;
    overflow: unset;

}
#sect01 .mainBox .liBox .show_more3{
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 14rem;
padding-top: 60px;
text-align: center;
line-height: 14rem;
background: linear-gradient(
180deg,
rgb(235, 248, 255, 0) 0%,
rgb(235, 248, 255, 1) 40%
);
border-radius:0 0 15px 15px;
cursor: pointer;
transition: bottom 0.2s;
}
#sect01 .mainBox .liBox .active{
background: none;
/*bottom: -20px;*/
}
#sect01 .mainBox .liBox .show_more3 span{
position: relative;
top: -4rem;
display: inline-block;
width: 70%;
min-height: 4rem;
padding: 1.0rem 3rem 1.2rem;
background: url(./img/plus_wt.svg) 90% calc(50% - 1px) no-repeat #0576ca;
background-size: 1.6rem auto;
border-radius:9999px;
text-align: center;
line-height: 1.5;
font-weight: 700;
color: #fff;
transition: all .2s ease-in-out;
}
#sect01 .mainBox .liBox .show_more3 span:hover{
opacity: .7;
}
#sect01 .mainBox .liBox .active span{
background: url(./img/minus_wt.svg) 90% 50% no-repeat #0576ca;
background-size: 1.6rem auto;
}


#sect01 .mainBox .liBox .imgArea{
width: 17rem;
margin: 4.5rem auto 0;
}
#sect01 .mainBox .liBox .flame{
width: 14.4rem;
margin: 0 auto;
}
#sect01 .mainBox .liBox .flame img{
border: 2px solid #000;
border-radius: 9999px;
}
#sect01 .mainBox .liBox .imgArea .cap{
margin: -1.2rem 0 0;
text-align: center;
font-weight: 700;
font-size:1.8rem;
}
#sect01 .mainBox .liBox .imgArea .cap span{
position: relative;
display: block;
padding: .8rem 2rem 1rem;
background: #ffffdf;
border-radius: 9999px;
border: 2px solid #000;
line-height: 1.3;
}



#sect01 .mainBox .botArea{
margin: 0 5rem;
padding: 3rem 5rem 2rem;
background: #ffffdf;
border-radius: 1.5rem;
}
#sect01 .mainBox .botArea .ttlArea{
position: relative;
padding: 2.0rem 0 1.0rem;
}
#sect01 .mainBox .botArea .flame{
position: absolute;
top: 1.0rem;
width: 7.5rem;
height: 7.5rem;
background: #fff;
border-radius: 50%;
border: 2px solid #000;}

#sect01 .mainBox .botArea .flame img{
display: block;
margin: 1.5rem auto 0;
width: 60%;
}
#sect01 .mainBox .botArea h3{
padding: 0 0 0 9rem;
font-size:3.0rem;
}
#sect01 .mainBox .botArea h3 .fontL{
font-size:3.6rem;
color: #0576ca;
}
#sect01 .mainBox .botArea .caption{
text-align: left;
}
#sect01 .mainBox .botArea .btn-link {
margin-top: 1rem;
}





/*------------
sect02_PC
------------*/
#sect02{
margin: 0 0 15rem;
}
#sect02 .sectTtlArea{
margin: 0 5rem 3rem;
padding: .8rem;
background: #0576ca;
border: 2px solid #000;
border-radius: 9999px;
}
#sect02 .sectTtlArea .inner{
position: relative;
z-index: 1;
padding: 8rem 4rem 3rem;
border: 2px solid #fff;
border-radius: 9999px;
}

#sect02 .sectTtlArea .sttl{
position: absolute;
top: -6.5rem;
left: calc(50% - 25rem);
width: 50rem;
padding: 1.8rem 4rem 2rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
text-align: center;
}
#sect02 .sectTtlArea .sttl:before {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -14px;
border: 10px solid transparent;/* 幅 */
border-top: 22px solid #fff;/* 高さ */
z-index: 2;
}
#sect02 .sectTtlArea .sttl:after {
content: "";
position: absolute;
bottom: -36px;
left: 50%;
margin-left: -16px;
border: 12px solid transparent;/* 幅 */
border-top: 24px solid #000;/* 高さ */
z-index: 1;
}

#sect02 .sectTtl{
text-align: center;
color: #fff;
}
#sect02 .sectTtl .line1{
display: block;
}
#sect02 .sectTtl .ccl{
margin: 0 1rem 0 0;
padding: .5rem 1.5rem .7rem;
background: #bbe7ff;
border-radius: 9999px;
color: #151b40;
}

#sect02 .intro{
margin: 0px 0 0rem;
text-align: center;
font-size:2.0rem;
font-weight: 700;
}
#sect02 .step3{
position: relative;
padding: 12rem 0 9rem;
}
#sect02 .step3::before{
content: "3STEP";
position: absolute;
top: 0;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 12.0rem;
color: #eaf7ff;
}
#sect02 .step3::after{
content: "";
position: absolute;
top: 7rem;
right: 0;
width: calc(100% - 56rem);
height: .2rem;
background: #eaf7ff;
}

#sect02 .step3 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 110rem;
margin: 0 auto;
}
#sect02 .step3 .liBox{
width: 32rem;
}
#sect02 .step3 .liBox a{
position: relative;
top: 0;
transition: all .2s ease-in-out;
}
#sect02 .step3 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
bottom: -1.0rem;
left: 0;
width: calc(100% - .4rem);
height: 6rem;
background: #3fa7f3;
border: 2px solid #000;
border-radius: 1.5rem;
transition: all .2s ease-in-out;
}
#sect02 .step3 .liBox a:hover{
opacity: 1;
top: 1.0rem;
}
#sect02 .step3 .liBox a:hover::before{
bottom: 0;
}


#sect02 .step3 .liBox .headNote{
margin: 0 0 2.5rem;
text-align: center;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .step3 .liBox .sttl{
display: grid;
    align-items: center;
    text-align: center;
    min-height: 11rem;
    padding: 1rem 7rem 1rem 7rem;
background: url("./img/arrow_ccl_vt.svg") calc(100% - 1.7rem) 50% no-repeat #fff;
background-size: 2.9rem auto;
border: 2px solid #000;
border-radius: 1.5rem;
font-size:1.7rem;
}
#sect02 .step3 .liBox .sttl::before{
content: "STEP01";
position: absolute;
top: -1.5rem;
left: calc(50% - 6rem);
width: 12rem;
padding: .5rem 0 .6rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.4rem;
text-align: center;
color: #000;
}
#sect02 .step3 .liBox:nth-child(2) .sttl::before{
content: "STEP02";
}
#sect02 .step3 .liBox:nth-child(3) .sttl::before{
content: "STEP03";
}

#sect02 .step3 .liBox .sttl::after{
content: "";
position: absolute;
top: calc(50% - 3rem);
left: -3rem;
width: 6rem;
height: 6rem;
background: url("./img/sct02_icon01.svg") 50% 50% no-repeat #fff;
background-size: 60% auto;
border: 2px solid #000;
border-radius: 50%;
}
#sect02 .step3 .liBox:nth-child(2) .sttl::after{
background-image: url("./img/sct02_icon02.svg");
}
#sect02 .step3 .liBox:nth-child(3) .sttl::after{
background-image: url("./img/sct02_icon03.svg");
}




/* sect2Box */
#sect02 .sect2BoxArea{
position: relative;
}
#sect02 .sect2BoxArea::before{
content: "";
position: absolute;
top: 3rem;
left: 0;
width: 100%;
height: calc(100% - 3rem);
background: url(./img/sct02_rptbg.png) 50% 0 repeat-y;
}
#sect02 .sect2BoxWrap{
margin: -2rem 0 0;
padding: 2rem 0 0;
}
#sect02 .sect2Box{
position: relative;
margin: 0 0 10rem;
} 
#sect02 .sect2Box::before{
content: "";
position: absolute;
top: -0.2rem;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #ebf7ff;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect02 #sect202 .sect2Box::before{
left: 0;
width: calc(100% + 100vw);
border-left: 2px solid #000;
border-right: none; 
border-radius: 1.5rem 0 0 1.5rem;
}

#sect02 .sect2Box .boxHead{
position: relative;
background: #3fa6f3;
padding: 2.5rem 5rem 3.5rem 0;
border-radius: 0 1.3rem 0 0;
color: #fff;
}
#sect02 #sect202 .boxHead{
margin: 0 0 0 .2rem;
border-radius: 1.3rem 0 0 0;
}
#sect02 .sect2Box .boxHead::before{
content: "";
position: absolute;
top: 0;
left: -100vw;
width: 100vw;
height: 100%;
background: #3fa6f3;
}
#sect02 #sect202 .boxHead::before{
left: auto;
right: -100vw;
}
#sect02 .sect2Box .boxHead::after{
content: "STEP01";
position: absolute;
top: -2.0rem;
left: 12rem;
width: 13.5rem;
padding: .7rem 0 .8rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.7rem;
text-align: center;
color: #000;
}
#sect02 #sect202 .boxHead::after{
left: 17rem;
content: "STEP02";
}
#sect02 #sect203 .boxHead::after{
content: "STEP03";
}


#sect02 .sect2Box .boxHead h3{
padding: 0 0 0 12rem;
line-height: 1.9;
font-size:3.0rem;
}
#sect02 #sect202 .boxHead h3{
padding: 0 0 0 17rem;
}
#sect02 .sect2Box .boxHead h3 .fontL{
display: inline-block;
margin: 0 .7rem 0 0;
padding: .3rem 1.2rem .9rem;
background: #151b40;
border-radius: .8rem;
line-height: 1;
font-size:3.6rem;
color: #fff;
}
#sect02 .sect2Box .boxHead h3 .fontL:nth-of-type(2){
margin-left: .7rem;
}
#sect02 .sect2Box .boxHead h3::before{
content: "";
position: absolute;
top: -4rem;
left: 0;
width: 9.8rem;
height: 16rem;
background: url("./img/sct02_busstop.svg") 0 0 no-repeat;
background-size: 9.8rem auto;
}
#sect02 #sect202 .boxHead h3::before{
left: 5rem;
}
#sect02 .sect2Box .boxHead h3::after{
content: "";
position: absolute;
top: -4rem;
left: 0;
width: 9.8rem;
height: 9.8rem;
background: url("./img/sct02_icon01.svg") 50% 50% no-repeat;
background-size: 4rem auto;
}
#sect02 #sect202 .boxHead h3::after{
left: 5rem;
background-image: url("./img/sct02_icon02.svg");
}
#sect02 #sect203 .boxHead h3::after{
background-image: url("./img/sct02_icon03.svg");
}


#sect02 .sect2Box .boxInner{
position: relative;
padding: 5rem 5rem 4rem;
}
#sect02 .sect2Box .mini{
padding: 0 0 8rem;
}
#sect02 .sect2Box .mini h4{
margin: 0 0 3rem;
text-align: center;
font-size:2.8rem;
}
#sect02 .sect2Box .mini .decoTtl{
position: relative;
display: inline-block;
padding: 0 3.5rem;
}
#sect02 .sect2Box .mini .decoTtl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.7rem;
height: 100%;
background: url("./img/sct02_deco01.svg") 0 50% no-repeat;
background-size: 2.7rem auto;
}
#sect02 .sect2Box .mini .decoTtl::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 2.7rem;
height: 100%;
background: url("./img/sct02_deco02.svg") 100% 50% no-repeat;
background-size: 2.7rem auto;
}
#sect02 .sect2Box .qa{
position: relative;
z-index: 1;
padding: 0;
}
#sect02 .sect2Box .qa .sttl{
margin: 0 0 -1.5rem 3rem;
font-size:2.2rem;
text-align: left;
}
#sect02 .sect2Box .qa .ansBox{
position: relative;
z-index: -2;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 5rem 5rem 4rem;
background: #ffffdf;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect02 .sect2Box .ansBox .imgArea{
width: 21rem;
}
#sect02 .sect2Box .ansBox2 .imgArea{
order: 2;
}
#sect02 .sect2Box .ansBox .txtArea{
width: 62rem;
}
#sect02 .sect2Box .ansBox .imgArea img{
border-radius: 1.5rem;  
}

#sect02 .sect2Box .ansBox .imgArea .specBox{
position: relative;
right: -4rem;
margin: -6.5rem 0 0;
width: calc(100% - 2rem);
}
#sect02 .sect2Box .ansBox2 .imgArea .specBox{
right: auto;
left: -4rem;
}
#sect02 .sect2Box .ansBox .imgArea .boxTtl{
display: inline-block;
padding: .5rem 1.6rem .6rem;
background: #d8eecd;
border: 2px solid #000;
border-bottom: none;
border-radius: .6rem .6rem 0 0;
line-height: 1;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .ansBox .imgArea .spec{
position: relative;
margin: -0.2rem 0 0;
padding: .6rem 1.6rem .8rem;
background: #d8eecd;
border: 2px solid #000;
border-radius: 0 .6rem .6rem .6rem;
}
#sect02 .sect2Box .ansBox .imgArea dl{
margin: 0 0 .6rem;
line-height: 1.5;
}
#sect02 .sect2Box .ansBox .imgArea dt{
display: inline-block;
background: #fff;
margin: 0 .6rem .3rem 0;
padding: .4rem .8rem;
border-radius: 9999px;
line-height: 1;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .ansBox .imgArea dd{
display: inline-block;
line-height: 1.5;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .ansBox .btn-link{
margin-bottom: 0;
}




#sect02 .sect2Box .botBox{
position: relative;
margin: 0 10rem 5rem;
padding: 4rem 5rem 4rem 6rem;
background: #fff;
border-radius: 1.5rem;
}
#sect02 .sect2Box .botBox::before{
content: "POINT";
position: absolute;
top: 2.3rem;
left: -3.9rem;
display: flex;
align-items: center;
justify-content: center;
width: 7.7rem;
height: 7.7rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 50%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.4rem;
text-align: center;
color: #000;
}
#sect02 .sect2Box .botBox h4{
font-size:2.8rem;
	margin: 0rem 0rem 3rem;
}




#sect02 #sect201 .mini1 .flame img{
border: 2px solid #000;
border-radius: 1.5rem;
}




/* カード反転基本設定 */
#sect02 #sect203 .card__inner {
transform-style: preserve-3d;
}
#sect02 #sect203 .card__visual {
backface-visibility: hidden;
perspective: 800px;
transform-style: preserve-3d;
}
#sect02 #sect203 .card__visual.-front {
z-index: 1;
}
#sect02 #sect203 .card__visual.-back {
position: absolute;
top:0;
z-index: -1;
rotate: y 180deg;
}



#sect02 #sect203 .ulBox{ 
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 0 3rem;
}
#sect02 #sect203 .liBox{ 
width: 31.2rem;
transition: all .2s ease-in-out;
cursor: pointer;
}
#sect02 #sect203 .liBox .card__inner::before{
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: 0;
width: calc(100% - .4rem);
height: calc(100% - .4rem);
background: #73ce47;
border: 2px solid #000;
border-radius: 1.5rem;
transition: all .2s ease-in-out;
}

#sect02 #sect203 .liBox:not(.is-flipped):hover{
opacity: 0.7;
}

#sect02 #sect203 .liBox .card__visual.-front{
position: relative;
background: url(./img/sct02_ccl.svg) 50% calc(100% + 6rem) no-repeat #fff;
background-size: 18rem auto;
padding: 0 0 7.5rem;
border: 2px solid #000;
border-radius: 1.5rem;
text-align: center;
transition: all .2s ease-in-out;
}
#sect02 #sect203 .liBox .card__visual.-front::after{
content: "CLICK";
position: absolute;
bottom: 1rem;
left: calc(50% - 5.2rem);
width: 10.4rem;
padding: .5rem 0 .6rem;
background: url(./img/arrow_ccl_bl.svg) 100% 50% no-repeat;
background-size: 2rem auto;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.8rem;
text-align: left;
color: #0576ca;
}

#sect02 #sect203 .liBox .card__visual.-back{
background: url(./img/sct02_ccl2.svg) 50% calc(100% + 6rem) no-repeat #ffffdf;
background-size: 18rem auto;
/*background: #fff;*/
padding: 0 0 7.5rem;
border: 2px solid #000;
border-radius: 1.5rem;
text-align: center;
transition: all .2s ease-in-out;
}
#sect02 #sect203 .liBox .card__visual.-back::after{
content: "BACK";
position: absolute;
bottom: 1rem;
left: calc(50% - 5.2rem);
width: 10.4rem;
padding: .5rem 0 .6rem;
background: url(./img/arrow_ccl_gr.svg) 100% 50% no-repeat;
background-size: 2rem auto;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.8rem;
text-align: left;
color: #50a229;
}


#sect02 #sect203 .liBox h4{
margin: 0 0 1.5rem;
padding: 3rem 3rem 2rem;
background: #ffffdf;
border-radius: 1.3rem 1.3rem 0 0;
font-size:2.0rem;
}
#sect02 #sect203 .liBox h4::before{
content: "01";
position: absolute;
top: .5rem;
left: 1rem;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 4.0rem;
text-align: left;
color: #d9efce;
}
#sect02 #sect203 .liBox:nth-child(2) h4::before{
content: "02";
}
#sect02 #sect203 .liBox:nth-child(3) h4::before{
content: "03";
}
#sect02 #sect203 .liBox h4 .fontL{
display: block;
font-size:2.4rem;
color: #50a229;
}
#sect02 #sect203 .catch{padding: 3rem 3rem 0;font-size: 2rem;}
#sect02 #sect203 .flame{
width: 100%;
height: 8rem;
transform-style: preserve-3d;
backface-visibility: hidden;
}
#sect02 #sect203 .flame img{height: auto;width: 11rem;object-fit: cover;backface-visibility: hidden;}

#sect02 #sect203 .liBox p{
margin: -1.5rem 0 0;
padding: 0 3rem 2rem;
}




/*------------
sect03_PC
------------*/
#sect03{
margin: -7rem 0 0;
padding: 7rem 0 10rem;
background: url(./img/sct03_ccl.svg) 50% 100% no-repeat;
background-size: 100% 80rem;
}
#sect03 .sectTtlArea{
margin: 0 5rem 13rem;
background: url(./img/pt_dot_gr.png) 0 0 repeat;
background-size: 3rem auto;
border: 2px solid #000;
padding: 4rem 4rem 4rem;
border-radius: 9999px;
}
#sect03 .sectTtlArea::before {
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 9999px;
}

#sect03 .sectTtlArea .sttl{
position: absolute;
top: -6.5rem;
left: 16rem;
width: 11rem;
height: 12rem;
padding: 4rem 1rem 0;
background: url(./img/sct03_fuki.png) 0 0 no-repeat;
background-size: 11rem auto;
text-align: center;
font-size:2.0rem;
}
#sect03 .sectTtl{
text-align: center;
}
#sect03 .sectTtl .line1{
display: block;
}
#sect03 .sectTtl .ccl{
margin: 0 1rem 0 0;
padding: .5rem 1.5rem .7rem;
background: #50a229;
border-radius: 9999px;
color: #fff;
}

#sect03 .relintv{
position: relative;
margin: 0 0;
}
#sect03 .ulBox{
z-index: 1;
padding: 0 5rem;
}
#sect03 .liBox{
width: 31.2rem;
}
#sect03 .liBox h3{
display: flex;
align-items: center;
justify-content: center;
min-height: 22rem;
}
#sect03 .liBox:nth-child(2){
top: -5rem;
}
#sect03 .liBox .botArea dl{
margin: 0 0 -.5rem;
}
#sect03 .liBox .botArea dd{
display: block;
}




/*------------
sect04_PC
------------*/
#sect04{
margin: 0 0 10rem;
padding: 10rem 0 10rem;
background: url(./img/pt_dot_gr2.png) 0 0 repeat;
background-size: 3rem auto;
}
#sect04 .wtBox{
position: relative;
padding: 3rem 0 0;
background: rgba(255,255,255,.60);
border-radius: 1.5rem;
}

#sect04 .slideArea{
position: absolute;
top: 11rem;
left: 0;
width: 110rem;
}


#sect04 .sectTtlArea{
width: 57rem;
margin: 0 0 3.5rem;
padding: 2.5rem 5rem 3rem;
}
#sect04 .sectTtlArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #50a229;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect04 .sectTtlArea::after{
content: "";
position: absolute;
top: 0.8rem;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #50a229;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect04 .sectTtlArea .inner{
position: relative;
z-index: 2;
}

#sect04 .sectTtlArea .sttl{
display: inline-block;
margin: 0 0 1rem;
padding:.8rem 3rem .9rem;
background: #fff;
border-radius: 9999px;
line-height: 1;
font-size:2.0rem;
}
#sect04 .sectTtlArea .sectTtl{
line-height: 1.4;
color: #fff;
}

#sect04 .intro{
padding: 0 5rem 3.5rem;
font-size:1.9rem;
font-weight: 700;
}

#sect04 .mini1{
margin: 0 10rem 2rem;
}
#sect04 .mini1 img{
border-radius: 1.5rem;
}



#sect04 .mini2{
margin: 4rem 0rem 2rem;
}
#sect04 .mini2 .tab{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0 0 -2.1rem;
}
#sect04 .mini2 .tablist{
width: calc(100% / 3);
}
#sect04 .mini2 .tablist span{
position: relative;
display: block;
width: 15.5rem;
margin: 0 auto;
padding: .6rem 0 .8rem;
border: 2px solid #000;
background: #ffffdf;
border-radius: 9999px;
text-align: center;
line-height: 1;
font-size:2.1rem;
font-weight: 700;
}
#sect04 .mini2 .tablist span::before{
content: "";
position: absolute;
top: 0;
left: -1.5rem;
width: 3.5rem;
height: 100%;
background-repeat: no-repeat;
        background-position: 50% 50%;
background-size: 3.5rem auto;
}

/* 1. 早番 (最初の子要素) */
#sect04 .mini2 .tablist:nth-child(1) span::before {
    /* ここに早番用のアイコンを指定 */
    background-image: url(./img/sct04_icon01.svg); 
}

/* 2. 遅番 (2番目の子要素) */
#sect04 .mini2 .tablist:nth-child(2) span::before {
    /* 遅番用のアイコンファイル名に置き換えてください */
    background-image: url(./img/sct04_icon02.svg); 
}

/* 3. 通し番 (3番目の子要素) */
#sect04 .mini2 .tablist:nth-child(3) span::before {
    /* 通し番用のアイコンファイル名に置き換えてください */
    background-image: url(./img/sct04_icon03.svg); 
}


#sect04 .mini2 .tabcontents{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: #ebf7ff;
/* border: 2px solid #000; */
    /* border-radius: 1.5rem; */

}
#sect04 .mini2 .tabcontents-list{
width: calc(100% / 3);
padding: 8.5rem 2.5rem 2.5rem;
}
#sect04 .mini2 .tabcontents-list:nth-child(2){
background: #fff;
}


#sect04 .btn-link{
margin: 0 10rem 7rem;
}


#sect04 .mini3{
position: relative;
padding: 8.5rem 0 45rem;
}
#sect04 .mini3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 18.6rem;
background: url(./img/sct04_ccl.svg) 0 0 no-repeat;
background-size: 100% 18.6rem;
}
#sect04 .mini3::after{
content: "";
position: absolute;
top: 18.6rem;
left: 0;
width: 100%;
height: calc(100% - 18.6rem);
background: #fff;
	border-radius: 0rem 0rem 1.5rem;
}
#sect04 .mini3 .inner{
position: relative;
z-index: 1;
}
#sect04 .mini3 h3{
margin: 0 0 6rem;
text-align: center;
}
#sect04 .mini3 h3 .decoTtl{
position: relative;
display: inline-block;
padding: 0 3.5rem;
font-size:2.6rem;
}
#sect04 .mini3 h3 .decoTtl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.7rem;
height: 100%;
background: url("./img/sct02_deco01.svg") 0 50% no-repeat;
background-size: 2.7rem auto;
}
#sect04 .mini3 h3 .decoTtl::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 2.7rem;
height: 100%;
background: url("./img/sct02_deco02.svg") 100% 50% no-repeat;
background-size: 2.7rem auto;
}
#sect04 .mini3 h3 .fontL{
display: block;
font-size:3.4rem;
}
#sect04 .mini3 .flame{
width: 74.6rem;
margin: 0 auto;
}

#sect04 .sum{
position: relative;
z-index: 1;
margin: -38rem 5rem 0 0;
}
#sect04 .sum::before{
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
border-right: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
	background: #ffffdf;
}
#sect04 .sum::after{
content: "SUMMARY";
top: -1.30rem;
left: 0;
font-size:8.0rem;
}
#sect04 .sum .inner{
position: relative;
padding: 8.5rem 48rem 4rem 0;
}
#sect04 .sum .inner::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .sum .inner::after{
content: "";
position: absolute;
top: .2rem;
right: 0;
width: 43.5rem;
height: 100%;
background: url(./img/sct04_sum.jpg) 0 50% no-repeat;
background-size: cover;
border-radius: 0 1.3rem 1.3rem 0;
}
#sect04 .sum .catch{
margin: 0 0 2rem;
line-height: 1.9;
font-size:3.0rem;
}
#sect04 .sum .catch .marker{
margin: 0;
border-bottom: 4px solid #72cd46;
font-size:3.6rem;
}
#sect04 .sum .btn-link{
margin: 0 0;
}


/*------------
sect05_PC
------------*/
#sect05{
background: #99d0f8;
margin: 0 0 0rem;
padding: 17rem 0 10rem;
}
#sect05::before{
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 40rem;
background: url(./img/sct05_top.svg) 50% 0 no-repeat;
background-size: 120% 40rem;
}
#sect05::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 37rem;
background: url(./img/sct05_bot.svg) 50% 0 no-repeat;
background-size: 100% 40rem;
}
#sect05 .areaInner::before{
content: "REASON";
position: absolute;
top: -15rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 12.0rem;
text-align: center;
color: #bbe7ff;
}


#sect05 .sectTtlArea{
margin: 0 5rem 3.5rem;
padding: .8rem;
background: #0576ca;
border: 2px solid #000;
border-radius: 9999px;
}
#sect05 .sectTtlArea .inner{
position: relative;
z-index: 1;
padding: 8rem 6rem 3rem;
border: 2px solid #fff;
border-radius: 9999px;
}

#sect05 .sectTtlArea .sttl{
position: absolute;
top: -6.5rem;
left: calc(50% - 25rem);
width: 50rem;
padding: 1.8rem 4rem 2rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
text-align: center;
}
#sect05 .sectTtlArea .sttl:before {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -14px;
border: 10px solid transparent;/* 幅 */
border-top: 22px solid #fff;/* 高さ */
z-index: 2;
}
#sect05 .sectTtlArea .sttl:after {
content: "";
position: absolute;
bottom: -36px;
left: 50%;
margin-left: -16px;
border: 12px solid transparent;/* 幅 */
border-top: 24px solid #000;/* 高さ */
z-index: 1;
}

#sect05 .sectTtl{
margin: 0 0 1.5rem;
padding: 0 0 1.5rem;
border-bottom: 2px solid rgba(255,255,255,.5);
text-align: center;
color: #fff;
}
#sect05 .sectTtl .flame{
display: inline-block;
background: #fff;
border-radius: .8rem;
margin: 0 1rem 0 0;
padding: .7rem 2rem .9rem;
line-height: 1;
font-size:4.5rem;
color: #0576ca;
}

#sect05 .sectTtlArea .intro{
text-align: center;
font-weight: 700;
color: #fff;
}
#sect05 .sectTtlArea .intro .fontL{
position: relative;
padding: 0 2rem;
font-size:2.4rem;
}
#sect05 .sectTtlArea .intro .fontL::before{
content: "";
position: absolute;
top: 1rem;
left: .5rem;
width: 2rem;
height: 3rem;
background: url(./img/dquote1b.svg) 0 0 no-repeat;
background-size: 1.4rem auto;
}
#sect05 .sectTtlArea .intro .fontL::after{
content: "";
position: absolute;
top: 1rem;
right: .5rem;
width: 2rem;
height: 3rem;
background: url(./img/dquote2b.svg) 100% 0 no-repeat;
background-size: 1.4rem auto;
}


#sect05 .ulBox{
margin: 0 0 6.5rem;
height: 60rem;
background: url(./img/sct05_ill.png) 50% 8rem no-repeat;
}
#sect05 .liBox{
position: absolute;
top: 0;
left: calc(50% - 52rem);
width: 29rem;
padding: 6rem 1rem 2rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
}
#sect05 .liBox:nth-child(2){
top: 24rem;
left: calc(50% - 46rem);
}
#sect05 .liBox:nth-child(3){
top: 41.5rem;
left: calc(50% - 14.5rem);
}
#sect05 .liBox:nth-child(4){
top: 24rem;
left: calc(50% + 17rem);
}
#sect05 .liBox:nth-child(5){
top: 0;
left: calc(50% + 23rem);
}

#sect05 .liBox::before{
content: "01";
position: absolute;
top: 1.5rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 4.0rem;
text-align: center;
color: #d9efce;
}
#sect05 .liBox:nth-child(2)::before{
content: "02";
}
#sect05 .liBox:nth-child(3)::before{
content: "03";
}
#sect05 .liBox:nth-child(4)::before{
content: "04";
}
#sect05 .liBox:nth-child(5)::before{
content: "05";
}


#sect05 .liBox .sttl{
margin: 0;
text-align: center;
line-height: 1.7;
font-size:2.2rem;
}
#sect05 .liBox .sttl .fontL{
font-size:2.6rem;
}






/*------------
sect05b_PC
------------*/
#sect05b{
margin: 6rem 0 10rem;
}
#sect05b .slideArea{
position: absolute;
top: 7.5rem;
}

#sect05b .sectTtlArea{
width: 57rem;
margin: 0 0 3.5rem;
padding: 4.0rem 3rem 3.5rem 0;
}
#sect05b .sectTtlArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #0576ca;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect05b .sectTtlArea::after{
content: "";
position: absolute;
top: 0.8rem;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #0576ca;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect05b .sectTtlArea .inner{
position: relative;
z-index: 2;
}

#sect05b .sectTtlArea .sectTtl{
line-height: 1.4;
color: #fff;
}
#sect05b .sectTtl .fontL{
display: inline-block;
margin: 0 .7rem 1.3rem 0;
padding: .5rem 1.2rem 1.1rem;
background: #fff;
border-radius: 1.5rem;
line-height: 1;
color: #151b40;
}



#sect05b .blBox{
margin: -6rem 0 0;
padding: 7rem 5rem 6rem;
background: #99d0f8;
border: 2px solid #000;
border-radius: 1.5rem;;
}

#sect05b .ulBox1{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sect05b .ulBox1 .liBox{
width: 32.5rem;
margin: 0 0 1.6rem;
padding: 1.5rem 3rem 3rem;
background: #fff;
border-radius: 1.5rem;
text-align: center;
}
#sect05b .ulBox1 .boxN{
width: 29rem;
}
#sect05b .ulBox1 .boxW{
width: 35rem;
}
#sect05b .ulBox1 .boxWW{
width: 63rem;
}

#sect05b .ulBox1 .liBox h3{
display: inline-block;
margin: 0 0 1rem;
padding: .4rem 2rem .5rem;
background: #50a229;
border-radius: 9999px;
line-height: 1;
color: #fff;
}

#sect05b .ulBox1 .liBox .sttl{
margin: 0;
font-size:3.0rem;
}
#sect05b .ulBox1 .liBox .sttl .fontEng{
font-size:6.0rem;
}
#sect05b .ulBox1 .box03  .sttl{
padding: 1rem 0 0;
}
#sect05b .ulBox1 .liBox .sttl .fontL{
font-size:3.4rem;
}
#sect05b .ulBox1 .liBox .sttl .note{
	padding: 10px 0px 0 10px;
display: block;
text-align: left;
font-size:1.4rem;
font-weight: 400;
}
#sect05b .ulBox1 .liBox p{
line-height: 1.6;
	text-align: center;
}
#sect05b .ulBox1 .liBox .flame{
width: 16rem;
height: 9rem;
margin: 0 auto;
}
#sect05b .ulBox1 .box07 .flame{
width: 50rem;
height: auto;
padding: 2rem 0 0;
}
#sect05b .ulBox1 .box08 .flame{
width: 14.6rem;
    height: auto;
    padding: 2rem 0 0rem;

}
#sect05b .caption{
margin-top:0;
text-align: left;
color: #fff;
}

#sect05b .caption a {
        color: #fff;
    }

#sect05b .btns{
padding: 6rem 6% 9rem;
}
#sect05b .btns .fuki{
position: absolute;
top: -1.5rem;
padding: .4rem 1.5rem .5rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-size:1.5rem;
}

#sect05b .lowerArea{
position: relative;
background: url(./img/sct05b_map.png) calc(50% + 21rem) 0rem no-repeat;
    background-size: 48rem;

}
#sect05b .lowerArea::before{
content: "";
position: absolute;
bottom: -2rem;
right: -1.0rem;
width: 17.6rem;
height: 16rem;
background: url(./img/sct05b_bus.svg) 0 0 no-repeat;
background-size: 17.6rem auto;
/* opacity: .5; */
}
#sect05b .lowerArea h2{
width: 43rem;
margin: 0 0 2rem;
padding: 3rem 1rem 3rem 0;
background: #dbf1ff;
border-radius: 0 1.5rem 1.5rem 0;
font-size:3.2rem;
}
#sect05b .lowerArea h2::before{
content: "";
position: absolute;
top: 0;
left: -5rem;
width: 5rem;
height: 100%;
background: #dbf1ff;
}
#sect05b .lowerArea h2 .fontL{
font-size:5.0rem;
}
#sect05b .lowerArea h2 .ccl{
display: inline-block;
margin: 0 0 .2rem;
padding: .4rem 2.5rem .6rem;
background: #fff;
border-radius: 9999px;
font-size:2.8rem;
}
#sect05b .lowerArea h2 .line2{
display: block;
}

#sect05b .ulBox2{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 1rem 0;}
#sect05b .ulBox2 .liBox{
width: 49rem;
margin: 0 0 3.5rem;
}
#sect05b .ulBox2 .liBox a{
position: relative;
z-index: 0;
top: 0;
transition: all .2s ease-in-out;
}
#sect05b .ulBox2 .liBox a:hover{
opacity: 1;
top: 1rem;
}
#sect05b .ulBox2 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
top: 1rem;
left: 0;
width: calc(100% - .4rem);
height: calc(100% - .4rem);
background: #d8eece;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect05b .ulBox2 .liBox .ttlArea{
margin: 0 0 2.5rem;
    background: url(./img/arrow_ccl.svg) calc(100% - 3rem) 50% no-repeat #ffffdf;
    background-size: 2.9rem auto;
    text-align: center;
    padding: 2rem 3rem;
    border: 2px solid #000;
    border-radius: 1.5rem;
}
#sect05b .ulBox2 .liBox h3{
font-size:2.4rem;
}
#sect05b .ulBox2 .liBox .note{
font-size:1.5rem;
}
#sect05b .ulBox2 .liBox .map {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9のアスペクト比 */
height: 0;
}
#sect05b .ulBox2 .liBox .map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}





/*------------
sect06_PC
------------*/
#sect06{
margin: 0 0 5rem;
}
#sect06 .sectTtlArea{
margin: 0 0 8rem;
padding: 6.5rem 0 0;
text-align: center;
}

#sect06 .sectTtlArea::after{
content: "COLUMN";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 10.0rem;
text-align: center;
color: #eaf7ff;
}
#sect06 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 5rem;
}
#sect06 .liBox{
width: 31.2rem;
}
#sect06 .liBox::before{
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: 0;
width: calc(100% - .4rem);
height: calc(100% - .4rem);
background: #3fa7f3;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect06 .liBox a{
position: relative;
top: 0;
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect06 .liBox a:hover{
opacity: 1;
top: .8rem;
}


#sect06 .liBox .sttl{
position: absolute;
top: -2rem;
left: calc(50% - 7.2rem);
display: flex;
align-items: baseline;
justify-content: center;
width: 14.4rem;
height: 3.9rem;
padding: 0.6rem 0 .3rem;
background: url(./img/sct06_head.svg) 0 0 no-repeat;
background-size: 14.4rem 3.9rem;
font-size:1.4rem;
color: #fff;
}
#sect06 .liBox .sttl .fontL{
font-size:1.8rem;
}
#sect06 .liBox .flame{
height: 11.5rem;
}
#sect06 .liBox .flame img{
height: 11.5rem;
object-fit: cover;
border-radius: 1.3rem 1.3rem 0 0;
}

#sect06 .liBox .catch{
margin: 0;
padding: 1.5rem 6.5rem 2rem;
background: url("./img/arrow_ccl.svg") calc(100% - 2rem) 50% no-repeat;
background-size: 4rem auto;
text-align: center;
line-height: 1.7;
font-size:2.0rem;
}
#sect06 .liBox .catch .fontL{
font-size:2.4rem;
}

/* End_PC */





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



/*------------
index_SP
------------*/

.areaInner {
    width: auto;
}






/*--------------------------------------
　header_SP
---------------------------------------*/
#header{
margin: 0 0 0;
padding: 0 0 0;
height: auto;
}

#header .topArea2{
position: static;
margin: 0 3% .5rem;
padding: 1rem 0 0;
}
#header .siteName{
}

#header .logo{
margin: 1rem 3% 1.3rem;
	text-align: center;
}
#header .logoImg{
display: inline-block;
}
#header .sps{
}




/* mvArea */

#header .mvArea{
position: relative;
height: 46rem;
padding: 5.5rem 5% 0;
background: url("./img/mv_bg_sp.png") 50% 0 no-repeat;
background-size: 35.5rem auto;
}
#header .mvArea .ttlBox{
position: relative;
top: 0;
left: 0;
width: auto;
margin: 0 2%;
padding: 2.0rem 5% 1.8rem;
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
}
#header .mvArea .ttlBox::before{
content: "";
position: absolute;
z-index: -1;
top: .6rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #3fa7f3;
border: 2px solid #000;
border-radius: 1.5rem;
}
#header .mvArea .ttlBox::after{
width: 0;
height: 0;
background: none;
border: none;
}

#header .mvArea .ttlBox .fuki{
display: inline-block;
padding: .5rem 2.2rem .6rem;
background: #0576ca;
border-radius: 9999px;
line-height: 1;
font-size:1.9rem;
font-weight: 700;
color: #fff;
}
#header .mvArea h2{
font-size:2.5rem;
}

#header .mvArea h2 .line1{
font-size:2.5rem;
}
#header .mvArea h2 .line1 .fontL1{
font-size:3.3rem;
}
#header .mvArea h2 .line1 .fontL2{
font-size:3.3rem;
color: #50a229;
}

#header .mvArea .flame{
position: absolute;
bottom: 0;
left: auto;
right: -4rem;
width: 33rem;
}

#BotNav {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 1.5rem;
    z-index: 10000;
    border: 2px solid;
    border-bottom: none;
    border-radius: .75rem .75rem 0 0;
    min-height: 0;
    line-height: 1.4;
    font-size: 1.2rem;
    text-align: left;
}

#BotNav.active {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

#BotNav a {
    display: block;
    padding: .7rem 3.2rem .7rem 1.2rem;
    min-height: 0;
    border-radius: 0 .75rem 0 0;
    line-height: 1.4;
    font-size: 1.2rem;
    text-align: left;
    background: url(./img/arrow_ccl2_vt.svg) no-repeat center right 4%  / 16px auto #fff;
}

#BotNav a:first-child {
  border-radius: .5rem 0 0 0;
  border-right: 2px solid;
}

/* slideArea */

#header .slideArea{
padding: 3rem 0 2.5rem;
}

/* mvArea2 */
#header .mvArea2{
padding: 0 0 9rem;
background: url("./img/mv_bot_sp.png") 0 100% no-repeat;
background-size: 100% auto;
}
#header .mvArea2 .sttl{
z-index: 1;
width: auto;
margin: 0 auto;
padding: 4rem 0 5rem;
text-align: center;
line-height: 1.7;
font-size:2.1rem;
}
#header .mvArea2 .sttl .fontL{
position: relative;
display: block;
padding: 0 1.5rem;
font-size:2.8rem;
}

#header .mvArea2 .sttl::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -10%;
width: 120%;
height: 100%;
background: #fff;
border-radius: 50%;
opacity: .7;
}
#header .mvArea2 .sttl .fontL::before{
content: "";
position: absolute;
top: 1rem;
left: 1.5rem;
width: 1.6rem;
height: 3rem;
background: url(./img/dquote1.svg) 0 0 no-repeat;
background-size: 1.6rem auto;
}
#header .mvArea2 .sttl .fontL::after{
content: "";
position: absolute;
top: 1rem;
right: 1.3rem;
width: 1.6rem;
height: 3rem;
background: url(./img/dquote2.svg) 0 0 no-repeat;
background-size: 1.6rem auto;
}

#header .mvArea2 .btn-internal{
margin: -2.0rem auto 0;
}
#header .mvArea2 .btn-internal a::before{
background-image: url(./img/arrow_ccl_wt_vt.svg);
}





/*------------
contents_SP
------------*/

#contents{
margin: 0;
}
#contents::before{
}

.index{
width: 100%;
padding: 0 0 0;
}


/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
}
.indexSect .areaInner{
}
.indexSect .sectTtlArea{
position: relative;
}
.indexSect .sectTtl{
line-height: 1.7;
font-size:1.8rem;
}
.indexSect .sectTtl .fontL{
font-size:2.8rem;
}


/*------------
sect00_PC
------------*/
#sect00{
position: relative;
z-index: 1;
padding: 1rem 5% 5rem;
}
#sect00::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect00::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect00 .areaInner{
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect00 .areaInner::before {
content: "";
position: absolute;
z-index: -1;
top: .6rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect00 .headArea{
position: relative;
padding: 9rem 5% 14rem;
text-align: center;
}
#sect00 .headArea::before{
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 12rem;
background: url(./img/sct00_map.png) 50% 0 no-repeat;
background-size: 22.5rem auto;
}
#sect00 .headArea::after{
content: "";
position: absolute;
z-index: 1;
bottom: 7.5rem;
left: 50%;
width: 2.5rem;
height: 6rem;
background: url(./img/sct00_line_sp.svg) 0 0 no-repeat;
background-size: 2.5rem auto;
}

#sect00 .headArea .flame{
position: absolute;
top: -8rem;
left: calc(50% - 10.8rem);
width: 21.6rem;
}
#sect00 .boxTtl{
position: relative;
left: -0.5rem;
display: inline-block;
margin: 0 0 1rem;
background: #3fa6f3;
padding: .6rem 1.4rem .7rem;
border-radius: 9999px;
line-height: 1;
font-size:1.7rem;
font-weight: 700;
color: #fff;
}
#sect00 .headArea h2{
margin: 0 0 1rem;
font-size:2.0rem;
}
#sect00 .headArea .sttl{
z-index: 1;
margin: 0 0 0;
font-size:3.0rem;
}

#sect00 .mainArea{
position: relative;
padding: 0 0 3rem;
}

#sect00 .txtArea{
padding: 0 5% 1rem;
/* font-weight: 700; */
}
#sect00 .txtArea p{
line-height: 1.75;
}
#sect00 .txtArea .txt_bold{
color: #e5a00c;
}





/*------------
sect01_SP
------------*/
#sect01{
padding: 4rem 0 12rem;
background: url(./img/pt_dot_gr2.png) 0 0 repeat;
background-size: 3rem auto;
}
#sect01::before{
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 14rem;
background: url(./img/sct01_top.svg) 50% 0 no-repeat;
background-size: 120% 14rem;
}
#sect01::after{
content: "";
position: absolute;
bottom: 0;
left: -10%;
width: 120%;
height: 14rem;
background: url(./img/sct01_bot.svg) 50% 100% no-repeat;
background-size: 120% 14rem;
}

#sect01 .areaInner::before{
content: "JOURNEY";
position: absolute;
top: -3.5rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 4.0rem;
text-align: center;
color: #d9efce;
}


#sect01 .sectTtlArea{
margin: 0 5% 7rem;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect01 .sectTtlArea .inner{
position: relative;
z-index: 1;
border-radius: 1.3rem;
background: #fff;
}
#sect01 .sectTtlArea::before {
content: "";
position: absolute;
z-index: 0;
top: .6rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect01 .sectTtlArea .sttl{
margin: 0;
padding: 1.2rem 5% 1.4rem;
background: #151b40;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
font-size:1.6rem;
color: #fff;
}
#sect01 .sectTtl{
padding: 1.5rem 5% 2rem;
text-align: center;
}
#sect01 .sectTtl .line1{
display: block;
}
#sect01 .sectTtl .ccl{
margin: 0 .5rem 0 0;
padding: .2rem 1.2rem .3rem;
background: #50a229;
border-radius: 9999px;
color: #fff;
}



#sect01 .mainBox{
position: relative;
z-index: 1;
background: #fff;
margin: 0 5%;
padding: 0 0 3rem;
border: 2px solid #000;
border-radius: 1.5rem;
} 
#sect01 .mainBox::before{
content: "CHECK！";
position: absolute;
z-index: 1;
top: -2.5rem;
left: calc(50% - 5rem);
width: 10rem;
padding: 1.5rem 0;
background: #ffb926;
border-radius: 50%;
border: 2px solid #000;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.2rem;
text-align: center;
color: #000;
}

#sect01 .mainBox .upperArea{
position: relative;
margin: 0 0 7rem;
padding: 4.5rem 5% .5rem;
background: #FFFFF4;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
}
#sect01 .mainBox .upperArea::before{
content: "";
position: absolute;
bottom: -4rem;
left: 0;
width: 100%;
height: 4rem;
background: url(./img/sct01_tri2.svg) 50% 100% no-repeat;
background-size: 100% 4rem;
}
#sect01 .mainBox .upperArea::after{
content: "";
position: absolute;
bottom: -5rem;
left: 0;
width: 100%;
height: 5rem;
background: url(./img/sct01_tri.svg) 50% 100% no-repeat;
background-size: 6rem auto;
}

#sect01 .mainBox .upperArea h3{
margin: 0 0 0;
line-height: 1.8;
font-size:2.2rem;
}
#sect01 .mainBox .upperArea h3 .line1{
display: block;
}
#sect01 .mainBox .upperArea h3 .line2{
display: block;
margin: 0 0 .5rem;
font-size:1.7rem;
}
#sect01 .mainBox .upperArea h3 .line3{
display: block;
}
#sect01 .mainBox .upperArea h3 .line3 .fontL{
display: inline-block;
margin: 0 1rem 0 0;
padding: .5rem 1.2rem .7rem;
background: #3fa6f3;
border-radius: .75rem;
line-height: 1;
font-size:2.5rem;
color: #fff;
}


#sect01 .mainBox .illArea{
position: relative;
background: url(./img/sct01_ill02.png) 50% 100% no-repeat;
background-size: 22.5rem auto;
}
#sect01 .mainBox .illArea .inner{
position: relative;
height: 36rem;
background: url(./img/sct01_ill01.png) 50% 13.5rem no-repeat;
background-size: 9.0rem auto;
}

#sect01 .mainBox .illArea .fuki{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 13.5rem;
height: 13.5rem;
background: #fff;
border-radius: 50%;
text-align: center;
font-weight: 700;
font-size:1.4rem;
}
#sect01 .mainBox .illArea .fuki1{
top: 0;
left: 0;
}
#sect01 .mainBox .illArea .fuki2{
top: 1rem;
right: 0;
}
#sect01 .mainBox .mainTxt{
padding: 2rem 0 0;
font-size:1.8rem;
font-weight: 700;
}
#sect01 .mainBox .mainTxt p{
line-height: 2.1;
text-align: center;
}


#sect01 .mainBox .lowerArea{
margin: -7rem 0 0;
padding: 9rem 5% 1rem;
}
#sect01 .mainBox .lowerArea h3{
margin: 0 0 1rem;
text-align: center;
line-height: 1.7;
font-size:1.8rem;
}
#sect01 .mainBox .lowerArea h3::before{
content: "";
position: absolute;
top: -1rem;
left: calc(50% - 13rem);
width: 2.5rem;
height: 5rem;
background: url(./img/sct01_deco.svg) 0 0 no-repeat;
background-size: 2.5rem auto;
}
#sect01 .mainBox .lowerArea h3::after {
        content: "";
        position: absolute;
        top: -1rem;
        left: auto;
        right: calc(50% - 13rem);
        width: 5rem;
        height: 5rem;
        background: url(./img/sct01_deco.svg) 0 0 no-repeat;
        background-size: 2.5rem auto;
        transform: scaleX(-1);
    }

#sect01 .mainBox .lowerArea h3 .line2{
display: block;
font-size:2.2rem;
}
#sect01 .mainBox .lowerArea h3 .line2 .fontL{
display: inline-block;
margin: 0 .4rem 0 0;
padding: .4rem .6rem .6rem;
background: #3fa6f3;
border-radius: .4rem;
line-height: 1;
font-size:2.2rem;
color: #fff;
}

#sect01 .mainBox .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 2rem 0 .5rem;
}
#sect01 .mainBox .liBox{
width: auto;
margin: 0 0 2rem;
}
#sect01 .mainBox .liBox:nth-child(2){
top:0;
}
#sect01 .mainBox .liBox .fuki{
position: relative;
background: #ebf8ff;
padding: 0 0 2rem;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect01 .mainBox .liBox .fuki::before {
content: "";
position: absolute;
bottom: -39px;
left: 50%;
margin-left: -14px;
border: 14px solid transparent;/* 幅 */
border-top: 26px solid #ebf8ff;/* 高さ */
z-index: 2;
}
#sect01 .mainBox .liBox .fuki::after {
content: "";
position: absolute;
bottom: -45px;
left: 50%;
margin-left: -16px;
border: 16px solid transparent;/* 幅 */
border-top: 28px solid #000;/* 高さ */
z-index: 1;
}
#sect01 .mainBox .liBox h4{
background: #fff;
padding: 1.8rem 5% 2.0rem;
border-radius: 1.3rem 1.3rem 0 0;
text-align: center;
line-height: 1.7;
font-size:1.8rem;
}
#sect01 .mainBox .liBox h4 .fontL{
display: block;
font-size:2.2rem;
}
#sect01 .mainBox .liBox p{
padding: 1rem 5% 0;
line-height: 1.7;
}


/* accordion_grd */
#sect01 .mainBox .liBox .text {
height: 14.5rem;
overflow: hidden;
}
#sect01 .mainBox .liBox .show_more3 {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 14rem;
padding-top: 60px;
text-align: center;
line-height: 14rem;
background: linear-gradient(
180deg,
rgb(235, 248, 255, 0) 0%,
rgb(235, 248, 255, 1) 40%
);
border-radius:0 0 15px 15px;
cursor: pointer;
transition: bottom 0.2s;
}
#sect01 .mainBox .liBox .active{
background: none;
/*bottom: -20px;*/
}
#sect01 .mainBox .liBox .show_more3 span{
position: relative;
top: -4rem;
display: inline-block;
width: 70%;
min-height: 4rem;
padding: 1.0rem 3rem 1.2rem;
background: url(./img/plus_wt.svg) 90% calc(50% - 1px) no-repeat #0576ca;
background-size: 1.6rem auto;
border-radius:9999px;
text-align: center;
line-height: 1.5;
font-weight: 700;
color: #fff;
}
#sect01 .mainBox .liBox .show_more3 span:hover{
opacity: 1;
}
#sect01 .mainBox .liBox .active span{
background: url(./img/minus_wt.svg) 90% 50% no-repeat #0576ca;
background-size: 1.6rem auto;
}


#sect01 .mainBox .liBox .imgArea{
width: 17rem;
margin: 4.5rem auto 0;
}
#sect01 .mainBox .liBox .flame{
width: 13rem;
margin: 0 auto;
}
#sect01 .mainBox .liBox .flame img{
border: 2px solid #000;
border-radius: 9999px;
}
#sect01 .mainBox .liBox .imgArea .cap{
margin: -1.2rem 0 0;
text-align: center;
font-weight: 700;
font-size:1.7rem;
}
#sect01 .mainBox .liBox .imgArea .cap span{
position: relative;
display: block;
padding: .8rem 10% 1rem;
background: #ffffdf;
border-radius: 9999px;
border: 2px solid #000;
line-height: 1.3;
}



#sect01 .mainBox .botArea{
margin: 0 5%;
padding: 2rem 5% 2rem;
background: #ffffdf;
border-radius: 1.5rem;
}
#sect01 .mainBox .botArea .ttlArea{
position: relative;
padding: 2.0rem 0 .5rem;
}
#sect01 .mainBox .botArea .flame{
position: absolute;
top: 1.0rem;
width: 5.0rem;
height: 5.0rem;
background: #fff;
border-radius: 50%;
border: 2px solid #000;
}

#sect01 .mainBox .botArea .flame img{
display: block;
margin: 1.5rem auto 0;
width: 60%;
}
#sect01 .mainBox .botArea h3{
padding: 0 0 0 5.7rem;
font-size:2.0rem;
}
#sect01 .mainBox .botArea h3 .fontL{
font-size:2.2rem;
color: #0576ca;
}
#sect01 .mainBox .botArea .caption{
text-align: left;
}
#sect01 .mainBox .botArea .btn-link {
margin-top: 1rem;
margin-left: 0;
margin-right: 0;
}





/*------------
sect02_SP
------------*/
#sect02{
margin: 0 0 7.5rem;
}
#sect02 .sectTtlArea{
margin: 0 5% 1.5rem;
padding: .4rem;
background: #0576ca;
border: 2px solid #000;
border-radius: 9999px;
}
#sect02 .sectTtlArea .inner{
position: relative;
z-index: 1;
padding: 3rem 5% 2rem;
border: 1px solid #fff;
border-radius: 9999px;
}

#sect02 .sectTtlArea .sttl{
position: absolute;
top: -6.5rem;
left: 0;
width: 100%;
padding: 1.2rem 5% 1.3rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
text-align: center;
font-size:1.6rem;
}
#sect02 .sectTtlArea .sttl:before {
content: "";
position: absolute;
bottom: -19px;
left: 50%;
margin-left: -8px;
border: 6px solid transparent;/* 幅 */
border-top: 14px solid #fff;/* 高さ */
z-index: 2;
}
#sect02 .sectTtlArea .sttl:after {
content: "";
position: absolute;
bottom: -25px;
left: 50%;
margin-left: -10px;
border: 8px solid transparent;/* 幅 */
border-top: 16px solid #000;/* 高さ */
z-index: 1;
}

#sect02 .sectTtl{
line-height: 1.5;
text-align: center;
color: #fff;
}
#sect02 .sectTtl .line1{
display: block;
margin: 0 0 .5rem;
}
#sect02 .sectTtl .ccl{
margin: 0 .5rem 0 0;
padding: .2rem 1.0rem .3rem;
background: #bbe7ff;
border-radius: 9999px;
color: #151b40;
}

#sect02 .intro{
margin: 0 5% 0.5rem;
text-align: center;
font-size:1.7rem;
font-weight: 700;
}

#sect02 .step3{
position: relative;
padding: 6rem 0 3rem;
}
#sect02 .step3::before{
content: "3STEP";
position: absolute;
top: 0;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 5.0rem;
color: #eaf7ff;
}
#sect02 .step3::after{
content: "";
position: absolute;
top: 3rem;
right: 0;
width: calc(100% - 24rem);
height: .2rem;
background: #eaf7ff;
}

#sect02 .step3 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
justify-content: center;
width: auto;
margin: 0 3%;
}
#sect02 .step3 .liBox{
width: 45%;
margin: 0 2% 1.5rem;
}
#sect02 .step3 .liBox::before{
content: "";
position: absolute;
z-index: 1;
bottom: -0.3rem;
left: 0;
width: 100%;
height: 2.7rem;
background: url("./img/arrow_ccl2_vt.svg") 50% 100% no-repeat;
background-size: 2.7rem auto;
}
#sect02 .step3 .liBox a{
position: relative;
top: 0;
transition: all .2s ease-in-out;
}
#sect02 .step3 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
bottom: -.8rem;
left: 0;
width: calc(100% - .4rem);
height: 6rem;
background: #3fa7f3;
border: 2px solid #000;
border-radius: 1.5rem;
transition: all .2s ease-in-out;
}
#sect02 .step3 .liBox a:hover{
opacity: 1;
top: 0;
}
#sect02 .step3 .liBox a:hover::before{
bottom: -.8rem;
}


#sect02 .step3 .liBox .headNote{
margin: 0 0 1.2rem;
text-align: center;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .step3 .liBox .sttl{
display: flex;
align-items: center;
justify-content: center;
min-height: 9rem;
padding: 1rem 2% 1rem;
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
text-align: center;
font-size:1.4rem;
}
#sect02 .step3 .liBox .sttl::before{
content: "STEP01";
position: absolute;
top: -1.3rem;
left: calc(50% - 4.4rem);
width: 8.8em;
padding: .4rem 0 .5rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.0rem;
text-align: center;
color: #000;
}
#sect02 .step3 .liBox:nth-child(2) .sttl::before{
content: "STEP02";
}
#sect02 .step3 .liBox:nth-child(3) .sttl::before{
content: "STEP03";
}

#sect02 .step3 .liBox .sttl::after{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .step3 .liBox:nth-child(2) .sttl::after{
background-image: none;
}
#sect02 .step3 .liBox:nth-child(3) .sttl::after{
background-image: none;
}




/* sect2Box */
#sect02 .sect2BoxArea{
position: relative;
}
#sect02 .sect2BoxArea::before{
content: "";
position: absolute;
top: 3rem;
left: 0;
width: 100%;
height: calc(100% - 3rem);
background: url(./img/sct02_rptbg.png) 50% 0 repeat-y;
background-size: 22rem auto;
}
#sect02 .sect2BoxWrap{
margin: -2rem 0 0;
padding: 2rem 0 0;
}
#sect02 .sect2Box{
position: relative;
margin: 0 5% 5rem 0;
background: #ebf7ff;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect02 #sect202 .sect2Box{
margin: 0 0 5rem 5%;
border-left: 2px solid #000;
border-right: none;
border-radius: 1.5rem 0 0 1.5rem;
} 

#sect02 .sect2Box::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 #sect202::before{
width: 0;
height: 0;
background: none;
border: none;
}


#sect02 .sect2Box .boxHead{
position: relative;
background: #3fa6f3;
padding: 2.5rem 2% 2rem 0;
border-radius: 0 1.3rem 0 0;
color: #fff;
}
#sect02 #sect202 .boxHead{
margin: 0;
padding: 2.5rem 2% 2rem 0;
border-radius: 1.3rem 0 0 0;
}
#sect02 .sect2Box .boxHead::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 #sect202 .boxHead::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect02 .sect2Box .boxHead::after{
content: "STEP01";
position: absolute;
top: -1.5rem;
left: 8rem;
width: 10.5rem;
padding: .5rem 0 .6rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.3rem;
text-align: center;
color: #000;
}
#sect02 #sect202 .boxHead::after{
left: 8rem;
content: "STEP02";
}
#sect02 #sect203 .boxHead::after{
content: "STEP03";
}


#sect02 .sect2Box .boxHead h3{
padding: 0 0 0 8.5rem;
line-height: 1.9;
font-size:1.8rem;
}
#sect02 #sect202 .boxHead h3{
padding: 0 0 0 8.5rem;
}
#sect02 .sect2Box .boxHead h3 .fontL{
display: inline-block;
margin: 0 .7rem .3rem 0;
padding: .5rem .7rem .7rem;
background: #151b40;
border-radius: .4rem;
line-height: 1;
font-size:2.2rem;
color: #fff;
}
#sect02 .sect2Box .boxHead h3 .fontL:nth-of-type(2){
margin-left: 0;
}
#sect02 .sect2Box .boxHead h3::before{
content: "";
position: absolute;
top: -1.0rem;
left: 2%;
width: 6.9rem;
height: 11rem;
background: url("./img/sct02_busstop.svg") 0 0 no-repeat;
background-size: 6.9rem auto;
}
#sect02 #sect202 .boxHead h3::before{
left: 2%;
}
#sect02 .sect2Box .boxHead h3::after{
content: "";
position: absolute;
top: -1.0rem;
left: 2%;
width: 6.9rem;
height: 6.9rem;
background: url("./img/sct02_icon01.svg") 50% 50% no-repeat;
background-size: 3rem auto;
}
#sect02 #sect202 .boxHead h3::after{
left: 2%;
background-image: url("./img/sct02_icon02.svg");
}
#sect02 #sect203 .boxHead h3::after{
background-image: url("./img/sct02_icon03.svg");
}


#sect02 .sect2Box .boxInner{
position: relative;
padding: 2.5rem 5% 2rem;
}
#sect02 .sect2Box .mini{
padding: 0 0 3rem;
}
#sect02 .sect2Box .mini h4{
margin: 0 0 1.5rem;
text-align: center;
font-size:1.8rem;
}
#sect02 .sect2Box .mini .decoTtl{
position: relative;
display: inline-block;
padding: 0 3.2rem;
}
#sect02 .sect2Box .mini .decoTtl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.4rem;
height: 100%;
background: url("./img/sct02_deco01.svg") 0 50% no-repeat;
background-size: 2.4rem auto;
}
#sect02 .sect2Box .mini .decoTtl::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 2.4rem;
height: 100%;
background: url("./img/sct02_deco02.svg") 100% 50% no-repeat;
background-size: 2.4rem auto;
}






#sect02 .sect2Box .qa{
position: relative;
z-index: 1;
padding: 0;
}
#sect02 .sect2Box .qa .sttl{
display: block;
width: 90%;
margin: 0 0 -3.5rem 1.5rem;
font-size: 2.0rem;
text-align: left;
}
#sect02 .sect2Box .qa .ansBox{
position: relative;
z-index: -2;
display: block;
padding: 7.0rem 5% 8rem;
background: #ffffdf;
border: 2px solid #000;
border-radius: 1.5rem;
}

#sect02 .sect2Box .ansBox .imgArea{
width: 100%;
margin: 0 auto 2.5rem;
}
#sect02 .sect2Box .ansBox .imgArea .flame{
width: 50%;
margin: 0 auto;
}
#sect02 .sect2Box .ansBox .txtArea{
width: 100%;
margin: 0 auto;
}
#sect02 .sect2Box .ansBox .imgArea img{
border-radius: 1.0rem;  
}

#sect02 .sect2Box .ansBox .imgArea .specBox{
position: relative;
right: auto;
margin: -4rem auto 0;
width: 80%;
}
#sect02 .sect2Box .ansBox2 .imgArea .specBox{
right: auto;
left: 0;
}
#sect02 .sect2Box .ansBox .imgArea .boxTtl{
display: inline-block;
padding: .5rem 1.2rem .6rem;
background: #d8eecd;
border: 2px solid #000;
border-bottom: none;
border-radius: .6rem .6rem 0 0;
line-height: 1;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .ansBox .imgArea .spec{
position: relative;
margin: -0.3rem 0 0;
padding: .6rem 1.6rem .8rem;
background: #d8eecd;
border: 2px solid #000;
border-radius: 0 .6rem .6rem .6rem;
}
#sect02 .sect2Box .ansBox .imgArea dl{
margin: 0 0 .6rem;
line-height: 1.5;
}
#sect02 .sect2Box .ansBox .imgArea dt{
display: inline-block;
background: #fff;
margin: 0 .6rem .3rem 0;
padding: .4rem .8rem;
border-radius: 9999px;
line-height: 1;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .ansBox .imgArea dd{
display: inline-block;
line-height: 1.5;
font-size:1.4rem;
font-weight: 700;
}
#sect02 .sect2Box .qa .catch {
padding: 0 0 0 20%;
}
#sect02 .sect2Box .ansBox .btn-link{
margin: -1rem 0 0;
}
#sect02 .sect2Box .btn-link{
position: relative;
z-index: 1;
margin: -1rem 0 0;
}




/* accordion_grd */
#sect02 .ansBox .text{
height: 14rem;
overflow: hidden;
}
#sect02 .ansBox .show_more5 {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 14rem;
padding-top: 6rem;
text-align: center;
line-height: 14rem;
background: linear-gradient(
180deg,
rgb(255, 255, 244, 0) 0%,
#ffffdf 40%
);
border-radius:0 0 15px 15px;
cursor: pointer;
transition: bottom 0.2s;
}
#sect02 .ansBox .active{
background: none;
}
#sect02 .ansBox .show_more5 span{
position: relative;
top: -4rem;
display: inline-block;
width: 60%;
min-height: 4rem;
padding: 1.2rem 10% 1.4rem;
background: url(./img/plus.svg) 90% calc(50% - 1px) no-repeat #f4f4ba;
background-size: 1.6rem auto;
border-radius:9999px;
text-align: center;
line-height: 1.5;
font-weight: 700;
}
#sect02 .ansBox .active span{
background: url(./img/minus.svg) 90% 50% no-repeat #f4f4ba;
background-size: 1.6rem auto;
}




#sect02 .sect2Box .botBox{
position: relative;
margin: 2.5rem 0 2.5rem;
padding: 4rem 5% 2rem;
background: #fff;
border-radius: 1.5rem;
}
#sect02 .sect2Box .botBox::before{
content: "POINT";
position: absolute;
top: -2.8rem;
left:calc(50% - 2.8rem);
display: flex;
align-items: center;
justify-content: center;
width: 5.6rem;
height: 5.6rem;
background: #ffba26;
border: 2px solid #000;
border-radius: 50%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.1rem;
text-align: center;
color: #000;
}
#sect02 .sect2Box .botBox h4{
text-align: center;
font-size:2.2rem;
	margin: 0rem 0rem 2rem;
}



#sect02 #sect201 .mini1 .flame{
padding: 0 0 1rem;
	margin: 0rem -0.7rem 0rem -0.7rem;
overflow: auto;
}
#sect02 #sect201 .mini1 .flame img{
border: 2px solid #000;
border-radius: 1.5rem;
width: 150%;
max-width: 150%;
object-fit: cover;
}




/* カード反転基本設定 */
#sect02 #sect203 .card__inner {
transform-style: preserve-3d;
}
#sect02 #sect203 .card__visual {
backface-visibility: hidden;
perspective: 800px;
transform-style: preserve-3d;
}
#sect02 #sect203 .card__visual.-front {
z-index: 1;
}
#sect02 #sect203 .card__visual.-back {
position: absolute;
top:0;
z-index: -1;
rotate: y 180deg;
}



#sect02 #sect203 .ulBox{ 
z-index: 1;
display: block;
padding: 0 0 1rem;
}
#sect02 #sect203 .liBox{
margin: 0 0 3rem;
width: auto;
}
#sect02 #sect203 .liBox .card__inner::before{
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: 0;
width: calc(100% - .4rem);
height: calc(100% - .4rem);
background: #73ce47;
border: 2px solid #000;
border-radius: 1.5rem;
transition: all .2s ease-in-out;
}

#sect02 #sect203 .liBox:hover{
opacity: 1;
}


#sect02 #sect203 .liBox .card__visual.-front{
position: relative;
background: url(./img/sct02_ccl.svg) 50% calc(100% + 6rem) no-repeat #fff;
background-size: 18rem auto;
/*background: #fff;*/
padding: 0 0 7.5rem;
border: 2px solid #000;
border-radius: 1.5rem;
text-align: center;
transition: all .2s ease-in-out;
	transform-style: preserve-3d;
}
#sect02 #sect203 .liBox .card__visual.-front::after{
content: "CLICK";
position: absolute;
bottom: 1rem;
left: calc(50% - 5.2rem);
width: 10.4rem;
padding: .5rem 0 .6rem;
background: url(./img/arrow_ccl_bl.svg) 100% 50% no-repeat;
background-size: 2rem auto;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.8rem;
text-align: left;
color: #0576ca;
}

#sect02 #sect203 .liBox .card__visual.-back{
background: url(./img/sct02_ccl2.svg) 50% calc(100% + 6rem) no-repeat #ffffdf;
background-size: 18rem auto;
/*background: #fff;*/
padding: 0 0 7.5rem;
border: 2px solid #000;
border-radius: 1.5rem;
text-align: center;
transition: all .2s ease-in-out;
}
#sect02 #sect203 .liBox .card__visual.-back::after{
content: "BACK";
position: absolute;
bottom: 1rem;
left: calc(50% - 5.2rem);
width: 10.4rem;
padding: .5rem 0 .6rem;
background: url(./img/arrow_ccl_gr.svg) 100% 50% no-repeat;
background-size: 2rem auto;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 1.8rem;
text-align: left;
color: #50a229;
}



#sect02 #sect203 .liBox h4{
margin: 0 0 1.5rem;
padding: 2rem 5% 1.5rem;
background: #ffffdf;
border-radius: 1.3rem 1.3rem 0 0;
font-size:1.8rem;
}
#sect02 #sect203 .liBox h4::before{
content: "01";
position: absolute;
top: .5rem;
left: 1rem;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 3.5rem;
text-align: left;
color: #d9efce;
}
#sect02 #sect203 .liBox:nth-child(2) h4::before{
content: "02";
}
#sect02 #sect203 .liBox:nth-child(3) h4::before{
content: "03";
}
#sect02 #sect203 .liBox h4 .fontL{
display: block;
font-size:2.2rem;
color: #50a229;
}
#sect02 #sect203 .catch{padding: 1rem 5% 0;font-size: 2rem;}
#sect02 #sect203 .flame{
width: 100%;
height: 7rem;
transform-style: preserve-3d;
backface-visibility: hidden;
}
#sect02 #sect203 .flame img{
width: auto;
height: 7rem;
object-fit: cover;
backface-visibility: hidden;
}


#sect02 #sect203 .liBox p{
margin: -1.5rem 0 0;
padding: 0 5% 2rem;
}







/*------------
sect03_SP
------------*/
#sect03{
margin: 0;
padding: 3rem 0 2rem;
background: none;
}
#sect03 .sectTtlArea{
margin: 0 5% 4.5rem;
background: url(./img/pt_dot_gr.png) 0 0 repeat;
background-size: 3rem auto;
border: 2px solid #000;
padding: 2.5rem 5% 2rem;
border-radius: 9999px;
}
#sect03 .sectTtlArea::before {
content: "";
position: absolute;
z-index: -1;
top: .6rem;
left: -0.2rem;
width: 100%;
height: 100%;
background: #151b40;
border: 2px solid #000;
border-radius: 9999px;
}

#sect03 .sectTtlArea .sttl{
position: absolute;
top: -6.0rem;
left: 0;
width: 7.8rem;
height: 8rem;
padding: 2.8rem 1rem 0;
background: url(./img/sct03_fuki_sp.png) 0 0 no-repeat;
background-size: 7.8rem auto;
text-align: center;
font-size:1.6rem;
}
#sect03 .sectTtl{
line-height: 1.5;
text-align: center;
}
#sect03 .sectTtl .line1{
display: block;
margin: 0 0 1rem;
}
#sect03 .sectTtl .ccl{
margin: 0 .5rem 0 0;
padding: .2rem 1.0rem .3rem;
background: #50a229;
border-radius: 9999px;
color: #fff;
}

#sect03 .relintv{
position: relative;
margin: 0 0;
}
#sect03 .ulBox{
z-index: 1;
padding: 0 5%;
}
#sect03 .liBox{
width: auto;
margin: 0 0 4rem;
}
#sect03 .liBox h3{
display: block;
min-height: 0;
}
#sect03 .liBox:nth-child(2){
top: 0;
}
#sect03 .liBox .botArea dl{
margin: 0 0 0;
}
#sect03 .liBox .botArea dd{
display: inline-block;
}




/*------------
sect04_SP
------------*/
#sect04{
margin: 0 0 2rem;
padding: 3rem 0 4rem;
background: url(./img/pt_dot_gr2.png) 0 0 repeat;
background-size: 3rem auto;
}
#sect04 .wtBox{
position: relative;
margin: 0 5%;
padding: 6.8rem 0 0;
background: rgba(255,255,255,.60);
border-radius: 1.5rem;
overflow: visible;
}

#sect04 .slideArea{
position: absolute;
left: -5%;
top: 2.5rem;
}
#sect04 .slideArea .slick-slide img{
width: auto;
height: 3.3rem;
}



#sect04 .sectTtlArea{
width: 94%;
margin: 0 0 3.5rem;
padding: 2.5rem 5% 2rem 0;
}
#sect04 .sectTtlArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #50a229;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect04 .sectTtlArea::after{
content: "";
position: absolute;
top: 0.8rem;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #50a229;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect04 .sectTtlArea .inner{
position: relative;
z-index: 2;
}

#sect04 .sectTtlArea .sttl{
display: inline-block;
margin: 0 0 1rem;
padding:.4rem 1.5rem .5rem;
background: #fff;
border-radius: 9999px;
line-height: 1;
font-size:1.6rem;
}
#sect04 .sectTtlArea .sectTtl{
line-height: 1.5;
color: #fff;
}

#sect04 .intro{
padding: 0 5% 1.5rem;
font-size:1.6rem;
font-weight: 700;
}

#sect04 .mini1{
margin: 0 5% 1rem;
}
#sect04 .mini1 .flame{
padding: 0 0 1rem;
overflow: auto;
}
#sect04 .mini1 img{
width: 150%;
object-fit: cover;
border-radius: 1.5rem;
}



#sect04 .mini2{
margin: 7rem 5% 1.5rem;
}
#sect04 .mini2 .tab{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: 0 0 0;
	bottom: 0rem;
}
#sect04 .mini2 .tablist{
width: 32%;
}
#sect04 .mini2 .tablist span{
position: relative;
display: block;
width: 100%;
margin: 0 auto;
padding: 1rem 0 .7rem;
background: #e4e4e4;
border: 2px solid #000;
border-bottom: none;
border-radius: 1rem 1rem 0 0;
text-align: center;
line-height: 1;
font-size:1.4rem;
font-weight: 700;
color: #151b40;
}
#sect04 .mini2 .tablist.active span{
background-color: #f4f4ba;
	margin: -1rem 0 -0rem;
        padding: 1.3rem 1rem 1.1rem 1rem;
        font-size: 1.6rem;
}
#sect04 .mini2 .tablist span::before{
content: "";
position: absolute;
top: -2.2rem;
left: calc(50% - 1.4rem);
width: 2.5rem;
height: 2.5rem;
background-color: #fff; /* 背景色を共通化 */
        background-repeat: no-repeat;
        background-position: 50% 50%;
background-size: 1.8rem auto;
border: 2px solid #000;
border-radius: 50%;;
}
	#sect04 .mini2 .tablist:nth-child(1) span::before {
        /* ここに早番用のアイコンを指定 */
        background-image: url(./img/sct04_icon01_sp.svg); 
    }

    /* 2. 遅番 (2番目の子要素: nth-child(2)) */
    #sect04 .mini2 .tablist:nth-child(2) span::before {
        /* 遅番用のアイコンファイル名に置き換えてください */
        background-image: url(./img/sct04_icon02_sp.svg); 
    }

    /* 3. 通し番 (3番目の子要素: nth-child(3)) */
    #sect04 .mini2 .tablist:nth-child(3) span::before {
        /* 通し番用のアイコンファイル名に置き換えてください */
        background-image: url(./img/sct04_icon03_sp.svg); 
    }


#sect04 .mini2 .tabcontents{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: #ebf7ff;
border: 2px solid #000;
border-radius: 0 0 1.5rem 1.5rem;
}
#sect04 .mini2 .tabcontents-list{
width: auto;
padding: 2.5rem 4rem;
border-radius: 0 0 1.5rem 1.5rem;
}
#sect04 .mini2 .tabcontents-list:nth-child(2){
background: #fff;
}


#sect04 .btn-link{
margin: 0 5% 3rem;
}


#sect04 .mini3{
position: relative;
padding: 5rem 0 10rem;
}
#sect04 .mini3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5.7rem;
background: url(./img/sct04_ccl.svg) 0 0 no-repeat;
background-size: 100% 5.7rem;
}
#sect04 .mini3::after{
content: "";
position: absolute;
top: 5.7rem;
left: 0;
width: 100%;
height: calc(100% - 5.7rem);
background: #fff;
}
#sect04 .mini3 .inner{
position: relative;
z-index: 1;
}
#sect04 .mini3 h3{
margin: 0 0 2rem;
text-align: center;
}
#sect04 .mini3 h3 .decoTtl{
position: relative;
display: inline-block;
margin: 0 0 1rem;
padding: 0 3.5rem;
font-size:1.8rem;
}
#sect04 .mini3 h3 .decoTtl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.4rem;
height: 100%;
background: url("./img/sct02_deco01.svg") 0 50% no-repeat;
background-size: 2.4rem auto;
}
#sect04 .mini3 h3 .decoTtl::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 2.4rem;
height: 100%;
background: url("./img/sct02_deco02.svg") 100% 50% no-repeat;
background-size: 2.4rem auto;
}
#sect04 .mini3 h3 .fontL{
display: block;
font-size:2.2rem;
}
#sect04 .mini3 .flame{
width: 90%;
margin: 0 auto;
}

#sect04 .sum{
position: relative;
z-index: 1;
margin: -6rem 5% 0 0;
border-right: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect04 .sum::before{
width: 0;
height: 0;
background: #ffffdf;
border: none;
}

#sect04 .sum::after{
content: "SUMMARY";
top: -0.75rem;
left: 0;
font-size:4.0rem;
}
#sect04 .sum .inner{
position: relative;
padding: 5.5rem 5% 2rem;
}
#sect04 .sum .inner::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .sum .inner::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect04 .sum .catch{
margin: 0 0 2rem;
line-height: 1.9;
font-size:1.8rem;
}
#sect04 .sum .catch .marker{
margin: 0;
border-bottom: 3px solid #72cd46;
font-size:2.2rem;
}
#sect04 .sum .btn-link{
margin: -1rem 0 0;
}




/*------------
sect05_SP
------------*/
#sect05{
background: #99d0f8;
margin: 0 0 8rem;
padding: 10rem 0 5rem;
}
#sect05::before{
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 14rem;
background: url(./img/sct05_top.svg) 50% 0 no-repeat;
background-size: 120% 14rem;
}
#sect05::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4rem;
background: url(./img/sct05_bot.svg) 50% 0 no-repeat;
background-size: 100% 4rem;
}
#sect05 .areaInner::before{
content: "REASON";
position: absolute;
top: -9rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 4.0rem;
text-align: center;
color: #bbe7ff;
}


#sect05 .sectTtlArea{
margin: 0 5% 3.5rem;
padding: .5rem;
background: #0576ca;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect05 .sectTtlArea .inner{
position: relative;
z-index: 1;
padding: 3.5rem 5% 2.0rem;
border: 1px solid #fff;
border-radius: 1.5rem;
}

#sect05 .sectTtlArea .sttl{
position: absolute;
top: -6.5rem;
left: 0;
width: 100%;
padding: 1.2rem 5% 1.3rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
text-align: center;
font-size:1.6rem;
}
#sect05 .sectTtlArea .sttl:before {
content: "";
position: absolute;
bottom: -19px;
left: 50%;
margin-left: -8px;
border: 6px solid transparent;/* 幅 */
border-top: 14px solid #fff;/* 高さ */
z-index: 2;
}
#sect05 .sectTtlArea .sttl:after {
content: "";
position: absolute;
bottom: -25px;
left: 50%;
margin-left: -10px;
border: 8px solid transparent;/* 幅 */
border-top: 16px solid #000;/* 高さ */
z-index: 1;
}


#sect05 .sectTtl{
margin: 0 0 1.0rem;
padding: 0 0 1.0rem;
border-bottom: 2px solid rgba(255,255,255,.5);
text-align: center;
color: #fff;
}
#sect05 .sectTtl .flame{
display: inline-block;
background: #fff;
border-radius: .8rem;
margin: 0 .5rem 0 0;
padding: .4rem 1.5rem .6rem;
line-height: 1;
font-size:2.4rem;
color: #0576ca;
}


#sect05 .sectTtlArea .intro{
text-align: center;
line-height: 1.7;
font-weight: 700;
font-size:1.6rem;
color: #fff;
}
#sect05 .sectTtlArea .intro .fontL{
position: relative;
padding: 0 1.5rem;
font-size:2.0rem;
}
#sect05 .sectTtlArea .intro .fontL::before{
content: "";
position: absolute;
top: .5rem;
left: .5rem;
width: 2rem;
height: 3rem;
background: url(./img/dquote1b.svg) 0 0 no-repeat;
background-size: .9rem auto;
}
#sect05 .sectTtlArea .intro .fontL::after{
content: "";
position: absolute;
top: .5rem;
right: .5rem;
width: 2rem;
height: 3rem;
background: url(./img/dquote2b.svg) 100% 0 no-repeat;
background-size: .9rem auto;
}


#sect05 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 3% .5rem;
padding: 16rem 0 0;
height: auto;
background: url(./img/sct05_ill_sp.png) 50% 0 no-repeat;
background-size: 33rem auto;
}
#sect05 .liBox{
position: relative;
top: 0;
left: 0;
width: 46%;
margin: 0 2% 1.5rem;
padding: 3.7rem 2% 1rem;
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect05 .liBox:nth-child(2){
top: 0;
left: 0;
}
#sect05 .liBox:nth-child(3){
top: 0;
left: 0;
}
#sect05 .liBox:nth-child(4){
top: 0;
left: 0;
}
#sect05 .liBox:nth-child(5){
top: 0;
left: 0;
}

#sect05 .liBox::before{
content: "01";
position: absolute;
top: .8rem;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 2.4rem;
text-align: center;
color: #d9efce;
}
#sect05 .liBox:nth-child(2)::before{
content: "02";
}
#sect05 .liBox:nth-child(3)::before{
content: "03";
}
#sect05 .liBox:nth-child(4)::before{
content: "04";
}
#sect05 .liBox:nth-child(5)::before{
content: "05";
}


#sect05 .liBox .sttl{
margin: 0;
text-align: center;
line-height: 1.7;
font-size:1.6rem;
}
#sect05 .liBox .sttl .fontL{
font-size:2.0rem;
}




#sect05 .btn-internal{
margin-top: 2rem;
}



/*------------
sect05b_SP
------------*/
#sect05b{
margin: 0 0 4.5rem;;
}
#sect05b .slideArea{
position: absolute;
top: -4.5rem;
}
#sect05b .slideArea .slick-slide img{
width: auto;
height: 3.3rem;
}



#sect05b .sectTtlArea{
width: 95%;
margin: 0 0 3.5rem;
padding: 2.5rem 5% 2.0rem;
}
#sect05b .sectTtlArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #0576ca;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect05b .sectTtlArea::after{
content: "";
position: absolute;
top: 0.8rem;
left: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #0576ca;
border: 2px solid #000;
border-left: none;
border-radius: 0 1.5rem 1.5rem 0;
}
#sect05b .sectTtlArea .inner{
position: relative;
z-index: 2;
}

#sect05b .sectTtlArea .sectTtl{
line-height: 1.4;
color: #fff;
}
#sect05b .sectTtl .fontL{
display: inline-block;
margin: 0 .7rem .9rem 0;
padding: .5rem 1.2rem .9rem;
background: #fff;
border-radius: .75rem;
line-height: 1;
color: #151b40;
}



#sect05b .blBox{
margin: -6rem 5% 0;
padding: 6rem 5% 1.5rem;
background: #99d0f8;
border: 2px solid #000;
border-radius: 1.5rem;
overflow: hidden;
}

#sect05b .ulBox1{
display: block;
}
#sect05b .ulBox1 .liBox{
width: auto;
margin: 0 0 4.5rem;
padding: 1.0rem 5% 1rem;
background: #fff;
border-radius: 1.5rem;
text-align: center;
}
	
	#sect05b .ulBox1 .liBox.boxWW.box07 {
    margin: 0 0 2rem;
}
	
#sect05b .ulBox1 .boxN{
width: auto;
}
#sect05b .ulBox1 .boxW{
width: auto;
}
#sect05b .ulBox1 .boxWW{
width: auto;
}

#sect05b .ulBox1 .liBox h3{
display: inline-block;
margin: 0 0 1rem;
padding: .8rem 1.5rem .9rem;
background: #50a229;
border-radius: 9999px;
line-height: 1;
color: #fff;
}

#sect05b .ulBox1 .liBox .sttl{
margin: 0;
padding: 0 0 0 12rem;
text-align: left;
font-size:2.0rem;
}
#sect05b .ulBox1 .liBox .sttl .fontEng{
font-size:3.6rem;
}
#sect05b .ulBox1 .box03 .sttl{
padding: 0 0 0;
text-align: center;
}
#sect05b .ulBox1 .liBox .sttl .fontL{
font-size:3.0rem;
}
#sect05b .ulBox1 .liBox .sttl .note{
display: block;
padding: 0 0 0 12rem;
text-align: left;
font-size:1.4rem;
font-weight: 400;
}
#sect05b .ulBox1 .liBox .flame{
position: absolute;
top: 6rem;
left: 5%;
width: 10rem;
height: 8rem;
margin: 0;
}
#sect05b .ulBox1 .box03 .flame{
top: 10rem;
left: 7%;
}
#sect05b .ulBox1 .box07 .flame{
position: static;
width: 25rem;
height: auto;
margin:  0 auto;
padding: 2rem 0 0;
}
#sect05b .ulBox1 .box07 .sttl{
padding: 0 0 0;
text-align: center;
}
#sect05b .ulBox1 .box08 .flame{
position: static;
        width: 12rem;
        height: auto;
        margin: 0 auto;
        padding: 0rem 0 0rem;

}

#sect05b .ulBox1 p{
padding: 1rem 0 2rem;
	text-align: center;
}

#sect05b .caption{
margin-top:0;
text-align: left;
color: #fff;
}

#sect05b .caption a {
        color: #fff;
    }


/* accordion_grd */
#sect05b .ulBox1 .liBox .text {
height: 2rem;
overflow: hidden;
}
#sect05b .ulBox1 .liBox .show_more4 {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 14rem;
padding-top: 70px;
text-align: center;
line-height: 14rem;
background: linear-gradient(
180deg,
rgb(235, 248, 255, 0) 0%,
rgb(235, 248, 255, 1) 40%
);
background: none;
border-radius:0 0 15px 15px;
cursor: pointer;
transition: bottom 0.2s;
}
#sect05b .ulBox1 .liBox .active{
background: none;
/*bottom: -20px;*/
}
#sect05b .ulBox1 .liBox .show_more4 span{
position: relative;
top: 0rem;
display: inline-block;
width: 70%;
min-height: 4rem;
padding: 1.0rem 3rem 1.2rem;
background: url(./img/plus.svg) 90% calc(50% - 1px) no-repeat #ebf8ff;
background-size: 1.6rem auto;
border-radius:9999px;
text-align: center;
line-height: 1.5;
font-weight: 700;
}
#sect05b .ulBox1 .liBox .active span{
background: url(./img/minus.svg) 90% 50% no-repeat #ebf8ff;
background-size: 1.6rem auto;
}









#sect05b .btns{
padding: 2rem 0 4rem;
}
#sect05b .btns div{
width: 97%;
}

#sect05b .btns .fuki{
position: absolute;
top: -1.9rem;
padding: .4rem 1.5rem .5rem;
background: #fff;
border: 2px solid #000;
border-radius: 9999px;
line-height: 1;
font-size:1.5rem;
}

#sect05b .lowerArea{
position: relative;
background: none;
}
#sect05b .lowerArea::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect05b .lowerArea h2{
width: 100%;
margin: 0 0 3rem;
padding: 1.5rem 5% 2rem 0;
background: #dbf1ff;
border-radius: 0 1.5rem 1.5rem 0;
font-size:2.0rem;
}
#sect05b .lowerArea h2::before{
content: "";
position: absolute;
top: 0;
left: -20%;
width: 20%;
height: 100%;
background: #dbf1ff;
}
#sect05b .lowerArea h2 .fontL{
font-size:2.8rem;
}
#sect05b .lowerArea h2 .ccl{
display: inline-block;
margin: 0 0 .2rem;
padding: .2rem 1.0rem .3rem;
background: #fff;
border-radius: 9999px;
font-size:1.8rem;
}
#sect05b .lowerArea h2 .line2{
display: block;
}

#sect05b .ulBox2{
display: block;
}
#sect05b .ulBox2 .liBox{
width: auto;
margin: 0 0 3.5rem;
}
#sect05b .ulBox2 .liBox a{
position: relative;
z-index: 1;
top: 0;
transition: all .2s ease-in-out;
}
#sect05b .ulBox2 .liBox a:hover{
opacity: 1;
top: 0;
}
#sect05b .ulBox2 .liBox .ttlArea
	{margin: 0 0 2.6rem;
		background-size: 2.4rem auto;
		text-align: center;
		background-position: calc(100% - 2rem) 50%;
	}
#sect05b .ulBox2 .liBox h3{
padding: 0 10%;
font-size:1.8rem;
}
#sect05b .ulBox2 .liBox .note{
padding: 0 10%;
font-size:1.3rem;
}
#sect05b .ulBox2 .liBox .map {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9のアスペクト比 */
height: 0;
}
#sect05b .ulBox2 .liBox .map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/*------------
sect06_SP
------------*/
#sect06{
margin: 0 0 4rem;
}
#sect06 .sectTtlArea{
margin: 0 0 3rem;
padding: 2.5rem 0 0;
text-align: center;
}

#sect06 .sectTtlArea::after{
content: "COLUMN";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
line-height: 1;
font-family: "DelaGothicOne";
font-size: 4.0rem;
text-align: center;
color: #eaf7ff;
}
#sect06 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 5%;
}
#sect06 .liBox{
margin: 0 0 4.5rem;
width: 47%;
}

#sect06 .liBox::before{
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: 0;
width: calc(100% - .4rem);
height: calc(100% - .4rem);
background: #3fa7f3;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect06 .liBox a{
position: relative;
top: 0;
background: #fff;
border: 2px solid #000;
border-radius: 1.5rem;
}
#sect06 .liBox a:hover{
opacity: 1;
top: .8rem;
}


#sect06 .liBox .sttl{
position: absolute;
z-index: 1;
top: -1.35rem;
left: calc(50% - 6rem);
display: flex;
align-items: baseline;
justify-content: center;
width: 12.0rem;
height: 2.7rem;
padding: 0 0 .3rem;
background: url(./img/sct06_head.svg) 0 0 no-repeat;
background-size: 12.0rem 2.7rem;
font-size:1.4rem;
color: #fff;
}
#sect06 .liBox .sttl .fontL{
font-size:1.6rem;
}
#sect06 .liBox .flame{
height: 11rem;
}
#sect06 .liBox .flame img{
height: 11rem;
object-fit: cover;
border-radius: 1.3rem 1.3rem 0 0;
}

#sect06 .liBox .catch{
padding: 1.5rem 10% 2rem 10%;
background: url("./img/arrow_ccl.svg") calc(100% - .8rem) 50% no-repeat;
background-size: 2.4rem auto;
text-align: left;
line-height: 1.7;
font-size:1.7rem;
}
#sect06 .liBox .catch .fontL{
font-size:2.0rem;
}


#sect06 .liBox:last-child{
width: 100%;
}
#sect06 .liBox:last-child .flame{
position: absolute;
width: 50%;
height: 100%;
}
#sect06 .liBox:last-child .flame img{
height: 100%;
border-radius: 1.3rem 0 0 1.3rem;
}
#sect06 .liBox:last-child .catch{
margin: 0 0 0 50%;
padding: 3rem 8% 3rem 5%;
}



/*  End_SP */

}



.scroll{
        padding: 0 5%;
        text-align: center;
        color: #151b40;
        font-size: 1.3rem;
   margin: 0px 0px 3px 0px;
    }