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

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


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

.fadeIn_up {
  /*transform: translate(0, 100px);*/
  transition: all .6s ease-in;
  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 {
/*min-width:0;*/
}


.index{
}

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

.areaInner{
width: 110rem;
}

.hero{
position: relative;
z-index: 1;
margin: 0 .5%;
padding: 0 .5%;
line-height: 1;
color: #fff;
}
.hero::before{
content: "";
position: absolute;
z-index: -1;
top: 10%;
left: 0;
width: 100%;
height: 90%;
background: rgba(241, 106, 44, 1.0);
border: 1px solid #2c2c2c;
}



/*--------------------------------------
　Global Nav
---------------------------------------*/
#gNav_pc{
opacity: 0;
visibility: hidden;
}

/*--------------------------------------
　fixNav_PC
---------------------------------------*/
#fixNav{
opacity: 0;
visibility: hidden;
}




/*--------------------------------------
　header_PC
---------------------------------------*/
#header{
position: relative;
z-index: 14;
width: 100%;
background:#fefcf5;
}

#header .topArea2{
padding: 2.5rem 0 0;
}

#header .siteName h1{
display: inline-block;
font-weight: 500;
}





/* mvArea */
.mvArea{
position: relative;
z-index: 1;
padding: 58vh 0 5rem;
}
.mvArea::before{
content: "";
position: absolute;
z-index: 2;
top: 12rem;
left: calc(50% - 87.3rem);
width: 183.9rem;
height: 66.9rem;
background: url("./img/idx_mv_bg.png") calc(50% - 1.0rem) 0 no-repeat;
}
.mvArea .flame{
position: absolute;
top: 6rem;
left: -0.1rem;
width: calc(50% + 22.5rem);
padding: 9.5rem 9rem 0 5rem;
height: 37.7rem;
background: #e0cb82;
box-shadow: 1rem 1rem 0 #2c2c2c;
border: 1px solid #2c2c2c;
}
.mvArea .flame img{
width: 88.5rem;
}

/* txtArea */
.mvArea .txtArea{
position: relative;
z-index: 3;
width: 110rem;
/* margin: 0 auto; */
    padding: 0 0 0 43vw;
}
.mvArea .txtArea h2{
position: relative;
width: 110rem;
margin: 0 auto 4rem;
padding: 4vh 4vw 5.5vh;
    font-size: 6.6vh;
}
.mvArea .txtArea h2::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
right: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #f7ffa0;
border: 1px solid #2c2c2c;
box-shadow: -1rem 1rem 0 #2c2c2c;
}
.mvArea .txtArea p{
padding: 0 0 0 5.5rem;
}



/* headNote */
.mvArea .headNote{
position: absolute;
top: 90.5vh;
    left: calc(50% - 7.5vw);
    font-size: 1.2vh;
}



/* #sect00 */
#sect00{
position: relative;
margin: 26rem 0 0;
padding: 7rem 0 0;
background: url(./img/sct00_bg.png) 50% 0 no-repeat;
min-height: 175rem;
}
#sect00 .inner{
width: 100rem;
margin: 0 auto;
}

#sect00 .mainArea h2{
margin: 0 0 8rem;
text-align: center;
font-size:4.0rem;
}
#sect00 p{
font-size:1.8rem;
font-weight: 700;
}
#sect00 .upper{
position: relative;
margin: 0 0 13rem;
padding: 0 50rem 0 0;
}
#sect00 .lower{
position: relative;
margin: 0 0 16rem;
padding: 0 0 0 50rem;
}


/* imgArea */
#sect00 .imgArea{
position: absolute;
}
#sect00 .upper .imgArea{
left: 50rem;
}
#sect00 .lower .imgArea{
left: 0;
}

#sect00 .imgArea .flame{
position: absolute;
}
#sect00 .upper .flame:nth-child(1){
top: 0;
left: 4.5rem;
}
#sect00 .upper .flame:nth-child(2){
top: 11rem;
left: 31rem;
}
#sect00 .lower .flame:nth-child(1){
top: -1rem;
left: -10.0rem;
}
#sect00 .lower .flame:nth-child(2){
top: 17.7rem;
left: 11rem;
}


#sect00 .imgArea .flame svg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
#sect00 .upper .flame:nth-child(1) svg{width: 36.8rem;}
#sect00 .upper .flame:nth-child(2) svg{width: 33.3rem;}
#sect00 .lower .flame:nth-child(1) svg{width: 34.5rem;}
#sect00 .lower .flame:nth-child(2) svg{width: 28.7rem;}

#sect00 .imgArea .flame svg image{
width: 100%;
height: 100%;
}

#sect00 .imgArea .fuki{
position: absolute;
width: 16.2rem;
padding: 0 0 2.4rem;
background: url(./img/sct00_fuki.png) 50% 100% no-repeat;
line-height: 1.3;
text-align: center;
font-family: "Caveat", cursive;
font-weight: 700;
font-size:2.4rem;
color: #5daf69;
}
#sect00 .upper .imgArea .fuki{
top: -1rem;
left: 43rem;
transform: rotate(10deg);
}
#sect00 .lower .imgArea .fuki{
top: 4rem;
left: 25.5rem;
transform: rotate(-10deg);
}




#sect00 .fontBold{
color: #f16a2c;
}

#sect00 p{
line-height: 2.1;
}
#sect00 p .flame{
display: inline-block;
width: 13.7rem;
	margin-right: -2rem;
}
#sect00 p .flame img {
    position: relative;
    top: 0.5rem;
    left: -1.2rem;
}



/* botArea */
#sect00 .botArea{
padding: 0 0 2rem;
}
#sect00 .botArea .headImg{
width: 30rem;
margin: 0 auto 2.5rem;
}
#sect00 .botArea h2{
margin: 0 0 4.5rem;
text-align: center;
font-size:3.2rem;
}
#sect00 .botArea .boxWt{
margin: 0 5rem;
padding: 4rem 5rem 5rem;
background: #fff;
border: 1px solid #2c2c2c;
text-align: center;
}
#sect00 .botArea .boxWt .catch{
margin: 0 11rem 2.5rem;
line-height: 1.3;
color: #f16a2c;
}
#sect00 .botArea .boxWt .logoArea{
position: relative;
}
#sect00 .botArea .boxWt .logoArea::before{
content: "";
position: absolute;
top: 0;
left: 42.5rem;
width: 3.1rem;
height: 100%;
background: url("./img/sct00_logobg.png") 0 50% no-repeat;
background-size: 3.1rem auto;
}
#sect00 .botArea .boxWt .flame{
display: inline-block;
vertical-align: middle;
margin: 0 5rem;
}
#sect00 .botArea .boxWt .flame:nth-child(1){
width: 27rem;
}
#sect00 .botArea .boxWt .flame:nth-child(2){
width: 19rem;
}






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

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

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



/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
}
.indexSect .areaInner{
padding: 7rem 0 2rem;
}

.indexSect .sectTtlArea{
position: relative;
margin: 0 5rem 7rem;
padding: 0 0 0 45rem;
min-height: 23rem;
}
.indexSect .ttlImg{
position: absolute;
left: 0;
width: 41rem;
}
.indexSect .sectTtl{
margin: 0 0 1.5rem;
padding: 0 0 1.5rem;
line-height: 1.6;
font-size:3.6rem;
}
.indexSect .sectTtl .fontS{
display: block;
font-size:3.2rem;
}


.indexSect .sectTtlArea .intro{
}
.indexSect .sectTtlArea p{

}

.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arr{
}
.indexSect .sectTtl a .arr::before{
}





/*------------
sect01_PC
------------*/
#sect01{
padding: 13rem 0 12rem;
background: url(./img/sct01_bg.png) 50% 32rem repeat-y #fcffd9;
background-size: 100% auto;
}
#sect01::before{
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 28rem;
background: url(./img/head_ccl.svg) 0 0 / 100% 28rem no-repeat;
transform: scale(1, -1);
}

#sect01 .sectTtlArea p .marker{
background: linear-gradient(transparent 5%, rgba(255, 255, 255, 1.0) 0%) no-repeat bottom 0 left;
}


/* tab */
#sect01 .tabArea{
position: relative;
padding: 0 0 12rem;
}
#sect01 .tab{
position: absolute;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
padding: 0 5rem;
	top: -1rem;
}
#sect01 .tablist{
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 24rem;
margin: 0 0 2.5rem;
padding: 1.2rem 2rem 1.6rem;
background: #5daf69;
border-radius: 9999px;
/*box-shadow: 0.5rem 0.5rem 0 #2c2c2c;*/
filter: drop-shadow(0.5rem 0.5rem 0 #2c2c2c);
border: 1px solid #2c2c2c;
line-height: 1;
font-weight: 700;
color: #fff;
cursor: pointer;
/* opacity: .7; */
}

#sect01 .tablist .numBox{
position: absolute;
top: calc(50% - 1.3rem);
left: 1rem;
display: block;
height: 2.2rem;
}
#sect01 .tablist .numBox img{
width: auto;
height: 100%;
}

#sect01 .tablist .fontM{
position: relative;
display: block;
font-size:1.8rem;
}
#sect01 .tablist .fontS{
position: relative;
display: block;
margin: 0.3rem 0 0;
    font-size: 1.5rem;
    line-height: 1.4;
}


#sect01 .tablist:nth-child(2){
background: #f7ffa0;
color: #2c2c2c;
}
#sect01 .tablist:nth-child(3){
background: #114da8;
}
#sect01 .tablist:nth-child(4){
background: #ccb152;
}


#sect01 .tablist:hover{
opacity: .6;
}


/* active */
#sect01 .tablist.active{
padding: 2.6rem 2rem 2.6rem;
opacity: 1;
}
#sect01 .tablist.active::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 22px 13px 0 13px;
border-color: #2c2c2c transparent transparent;
translate: -50% 100%;
}
#sect01 .tablist.active::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 20px 11.8px 0 11.8px;
border-color: #5daf69 transparent transparent;
translate: -50% 100%;
}
#sect01 .tablist:nth-child(2).active::after {
border-color: #f7ffa0 transparent transparent;
}
#sect01 .tablist:nth-child(3).active::after {
border-color: #114da8 transparent transparent;
}
#sect01 .tablist:nth-child(4).active::after {
border-color: #ccb152 transparent transparent;
}

/* 連続クリック防止 */
#sect01 .tablist.active{
pointer-events: none;
}

/* tabcontents */
#sect01 .tabcontents{
position: relative;
padding: 10.5rem 0 0;
}


#sect01 .tabcontents-list .ttlArea{
position: relative;
border: 1px solid #2c2c2c;
background: #5daf69;
padding: 2.2rem 36rem 2.0rem 9rem;
}
#sect01 .tab2 .ttlArea{background: #f7ffa0;}
#sect01 .tab3 .ttlArea{background: #114da8;}
#sect01 .tab4 .ttlArea{background: #ccb152;}


/* svg関連 */

#sect01 .tabcontents-list .ttlArea .flame{
position: absolute;
top: 5rem;
right: 30rem;
}
#sect01 .tab3 .ttlArea .flame{
top: 3.5rem;
right: 32rem;
}
#sect01 .tabcontents-list .ttlArea .flame svg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

#sect01 .tab1 .ttlArea .flame svg{width: 26.7rem;}
#sect01 .tab2 .ttlArea .flame svg{width: 26.6rem;}
#sect01 .tab3 .ttlArea .flame svg{width: 29.4rem;}
#sect01 .tab4 .ttlArea .flame svg{width: 24.8rem;}

#sect01 .tabcontents-list .ttlArea .flame svg image{
width: 100%;
height: 100%;
}

#sect01 .tabcontents-list .ttlArea .flame .outLine{
z-index: 3;
}


#sect01 .tabcontents-list .numBox{
position: absolute;
top: 2.5rem;
left: 2.5rem;
display: block;
height: 3.4rem;
}
#sect01 .tabcontents-list .numBox img{
width: auto;
height: 100%;
}

#sect01 .tabcontents-list .ttlArea .catch{
margin: 0 0 .5rem;
font-size:3.2rem; 
color: #fff;
}
#sect01 .tab2 .ttlArea .catch{
color: #2c2c2c;
}

#sect01 .tabcontents-list .ttlArea .cap{
line-height: 1.1;
font-weight: 700;
font-size:1.5rem;
color: #fff;
}
#sect01 .tabcontents-list .ttlArea .cap .fontL{
font-size: 2.4rem;
}

#sect01 .tabcontents-list .ttlArea .cap .facility{
padding: 5px 10rem .5rem 0;
    display: inline-block;
}
#sect01 .tabcontents-list.tab3 .ttlArea .cap .facility {
    padding: 5px 7rem .5rem 0;
}

#sect01 .tab2 .ttlArea .cap{
color: #2c2c2c;
}

#sect01 .tabcontents-list .ttlArea .tag{
position: relative;
display: inline-block;
margin: 0 1rem 1.1rem 0;
padding: .3rem 1.0rem .5rem;
background: rgba(255,255,255,.6);
border-radius: 9999px;
/* border: 1px solid #2c2c2c; */
line-height: 1;
font-weight: 700;
font-size:1.8rem;
}

.tabcontents-list.tab2 .tag{
   border:1px solid #939e1f 
}



#sect01 .tabcontents-list .txtArea{
position: relative;
padding: 2rem 5rem 2rem;
background: url(./img/sct01_tabbg01.png) 0 100% no-repeat #fff;
border: 1px solid #2c2c2c;
border-top: none;
}
#sect01 .tab2 .txtArea{
background-image: url(./img/sct01_tabbg02.png);
}
#sect01 .tab3 .txtArea{
background-image: url(./img/sct01_tabbg03.png);
}
#sect01 .tab4 .txtArea{
background-image: url(./img/sct01_tabbg04.png);
}


#sect01 .tabcontents-list .mini{
position: relative;
z-index: 2;
}
#sect01 .tabcontents-list .mini1{
margin: 0 0 6rem;
padding: 0 34rem 0 0;
}
#sect01 .tabcontents-list .mini dl{
position: relative;
}
#sect01 .tabcontents-list .mini dt{
position: relative;
z-index: 1;
display: inline-block;
margin: 0 0 0 2.5rem;
padding: .4rem 1rem .6rem;
background: #fff;
border-radius: 9999px;
border: 1px solid #2c2c2c;
line-height: 1;
font-size:1.5rem;
font-weight: 700;
color: #f16a2c;
}
#sect01 .tabcontents-list .mini dd{
position: relative;
margin: -1.2rem 0 0;
padding: 1.6rem 3rem;
background: #fbffd4;
border: 1px solid #2c2c2c;
}
#sect01 .tabcontents-list .mini dd::before{
content: "";
position: absolute;
z-index: 10;
top: 50%;
height: 0.1rem;
background: #2c2c2c;
}
#sect01 .tabcontents-list .mini1 dd::before{
width: 20rem;
right: -20rem;
transform: rotate(-30deg);
transform-origin: left;
}
#sect01 .tabcontents-list .mini2 dd::before{
width: 12rem;
left: -12rem;
transform: rotate(30deg);
transform-origin: right;
}
#sect01 .tabcontents-list.tab2 .mini2 dd::before{
  width: 14rem;
  left: -14rem;
  transform: rotate(50deg);
  }

#sect01 .tabcontents-list .mini2{
margin: 0 0 5rem;
padding: 0 0 0 70rem;
}
#sect01 .tabcontents-list .mini2 .imgArea{
position: absolute;
top: 1.5rem;
left: 0;
}
#sect01 .tabcontents-list .mini2 .flame{
position: absolute;
width: 33.3rem;
border: 1px solid #2c2c2c;
}
#sect01 .tabcontents-list.tab2 .mini2 .flame:nth-of-type(1)  {
        width: 23.3rem;
}

#sect01 .tabcontents-list .mini2 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: -1rem;
left: 1rem;
width: 100%;
height: 100%;
background: #5daf69;
border: 1px solid #2c2c2c;
}
#sect01 .tabcontents-list .mini2 .flame:nth-child(2){
top: 6rem;
left: 29rem;
}
#sect01 .tabcontents-list .mini2 .flame:nth-child(2)::before{
top: 1rem;
}

#sect01 .tab2 .mini2 .flame::before{background: #f7ffa0;}
#sect01 .tab3 .mini2 .flame::before{background: #114da8;}
#sect01 .tab4 .mini2 .flame::before{background: #ccb152;}






/* subArea */
#sect01 .subArea{
position: relative;
}
#sect01 .subArea .subHead{
position: absolute;
top: 0;
left: 0;
}
#sect01 .subArea h3{
padding: 3rem 0 24rem;
line-height: 1.4;
font-family: "Zen Kaku Gothic New vt";
font-size:3.2rem;
letter-spacing: 0.1em;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#sect01 .subArea h3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 10.5rem;
height: .6rem;
background: #114da8;
border-radius: 9999px;
}
#sect01 .subArea h3::after{
content: "";
position: absolute;
bottom: 0;
left: 3.5rem;
width: 4rem;
height: 22rem;
background: url(./img/sct01_eng_rs.png) 0 0 no-repeat;
background-size: 4rem auto;
}
#sect01 .subArea h3 .lineDeco{
position: relative;
}
#sect01 .subArea h3 .lineDeco::before{
}


/* REASON */

#sect01 .sub1{
margin: 0 0 11.5rem;
}
#sect01 .sub1 h3 span:not([class]){
position: relative;
left: .4rem;
}
#sect01 .sub1 .ulBox{
margin: 0 0 0 32rem;
}
#sect01 .sub1 .liBox{
margin: 0 0 4rem;
padding: 4.5rem 5rem 4.5rem 17.5rem;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect01 .sub1 .liBox .flame{
position: absolute;
top: calc(50% - 8.5rem);
left: -18rem;
width: 32rem;
height: 17rem;
}
#sect01 .sub1 .liBox img{
width: 100%;
object-fit: cover;
border: 1px solid #2c2c2c;
}
#sect01 .sub1 .liBox h4{
padding: 0 0 0 7rem;
font-size:2.0rem;
color: #114da8;
}
#sect01 .sub1 .liBox h4::before{
content: "01";
position: absolute;
top: calc(50% - 2.6rem);
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 5.3rem;
height: 5.3rem;
background: #e0cb82;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:3.2rem;
color: #fff;
}
#sect01 .sub1 .liBox:nth-child(2) h4::before{
content: "02";
}
#sect01 .sub1 .liBox:nth-child(3) h4::before{
content: "03";
}




/* QA */
#sect01 .sub2{
padding: 0 0 4rem;
min-height: 59rem;
}
#sect01 .sub2 h3{
padding: 3rem 0 14rem 2.7rem;
}
#sect01 .sub2 h3 span:not([class]){
position: relative;
left: .3rem;
}

#sect01 .sub2 h3::after{
left: 2.8rem;
width: 4.75rem;
height: 12rem;
background: url(./img/sct01_eng_qa.png) 0 0 no-repeat;
background-size: 4.75rem auto;
}
#sect01 .sub2 .ulBox{
margin: 0 0 0 18rem;
}
#sect01 .sub2 .liBox{
margin: 0 0 3rem;
padding: 0 3rem;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect01 .sub2 .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: .6rem;
height: 100%;
background: #90cd99;
}
#sect01 .sub2 .liBox:nth-child(2)::before{background: #e0cb82;}
#sect01 .sub2 .liBox:nth-child(3)::before{background: #a5c0f5;}

#sect01 .sub2 .liBox h4{
font-size: 2.4rem;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect01 .sub2 .liBox h4:hover{
opacity: .6;
}
#sect01 .sub2 .liBox h4::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 5rem;
height: 100%;
background: url("./img/plus.svg") 50% 60% / 2.4rem auto no-repeat;
}
#sect01 .sub2 .liBox h4::after{
content: "MORE";
position: absolute;
top: calc(50% - 2.6rem);
right: 0;
width: 5rem;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:1.4rem;
}
/* open時 */
#sect01 .sub2 .liBox h4.open::before{
background-image: url("./img/minus.svg");
}
#sect01 .sub2 .liBox h4.open::after{
content: "CLOSE";
}




#sect01 .sub2 .liBox h4 span{
position: relative;
display: block;
padding: 2.5rem 6.5rem 2.5rem 7.5rem;
}
#sect01 .sub2 .liBox h4 span::before{
content: "Q1.";
position: absolute;
top: 1.6rem;
left: .8rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:3.2rem;
color: #E4D895;
}
#sect01 .sub2 .liBox:nth-child(2) h4 span::before{content: "Q2.";}
#sect01 .sub2 .liBox:nth-child(3) h4 span::before{content: "Q3.";}



#sect01 .sub2 .liBox .accChild{
padding: 2.5rem 2rem 2.5rem 7.5rem;
border-top: 1px solid rgba(44, 44, 44, .3);
}
#sect01 .sub2 .liBox .catch{
font-size:1.8rem;
color: #5daf69;
}
#sect01 .sub2 .liBox:nth-child(2) .catch{color: #ccb152;}
#sect01 .sub2 .liBox:nth-child(3) .catch{color: #6992e7;}

#sect01 .sub2 .liBox .catch::before{
content: "A.";
position: absolute;
top: -0.7rem;
left: -4.5rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:2.6rem;
color: #5daf69;
}
#sect01 .sub2 .liBox:nth-child(2) .catch::before{color: #ccb152;}
#sect01 .sub2 .liBox:nth-child(3) .catch::before{color: #8eace9;}


















/*------------
sect02_PC
------------*/
#sect02{
background: #fefcf5;
}

/* tab */
#sect02 .tabArea{
position: relative;
padding: 0 0 8rem;
}
#sect02 .tab_2{
position: absolute;
z-index: 1;
display: flex;
align-items: end;
justify-content: space-between;
width: 100%;
padding: 0 5rem;
}
#sect02 .tablist{
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 24rem;
margin: 0 0 2.5rem;
padding: 1.2rem 2rem 1.6rem;
background: #5daf69;
border-radius: 9999px;
/*box-shadow: 0.5rem 0.5rem 0 #2c2c2c;*/
filter: drop-shadow(0.5rem 0.5rem 0 #2c2c2c);
border: 1px solid #2c2c2c;
line-height: 1;
font-weight: 700;
color: #fff;
cursor: pointer;
opacity: 1;
}

#sect02 .tablist .numBox{
position: absolute;
top: calc(50% - 1.3rem);
left: 1rem;
display: block;
height: 2.2rem;
}
#sect02 .tablist .numBox img{
width: auto;
height: 100%;
}

#sect02 .tablist .fontM{
position: relative;
display: block;
font-size:1.8rem;
}
#sect02 .tablist .fontS{
position: relative;
display: block;
margin: .8rem 0 0;
font-size:1.3rem;
}


#sect02 .tablist:nth-child(2){
background: #f7ffa0;
color: #2c2c2c;
}
#sect02 .tablist:nth-child(3){
background: #114da8;
}
#sect02 .tablist:nth-child(4){
background: #ccb152;
}


#sect02 .tablist:hover{
opacity: .6;
}


/* active */
#sect02 .tablist.active{
padding: 2.2rem 2rem 2.6rem;
opacity: 1;
}
#sect02 .tablist.active::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 22px 13px 0 13px;
border-color: #2c2c2c transparent transparent;
translate: -50% 100%;
}
#sect02 .tablist.active::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 20px 11.8px 0 11.8px;
border-color: #5daf69 transparent transparent;
translate: -50% 100%;
}
#sect02 .tablist:nth-child(2).active::after {
border-color: #f7ffa0 transparent transparent;
}
#sect02 .tablist:nth-child(3).active::after {
border-color: #114da8 transparent transparent;
}
#sect02 .tablist:nth-child(4).active::after {
border-color: #ccb152 transparent transparent;
}


/* 連続クリック防止 */
#sect02 .tablist.active{
pointer-events: none;
}





/* tabcontents */
#sect02 .tabcontents{
position: relative;
padding: 10.5rem 0 0;
}

#sect02 .tabcontents-list2 .ttlArea{
position: relative;
padding: 2.5rem 5rem 1.5rem 3rem;
background: #5daf69;
border: 1px solid #2c2c2c;
border-left: none;
}
#sect02 .tabcontents-list2 .ttlArea::before{
content: "";
position: absolute;
top: -0.1rem;
left: -100vw;
width: 100vw;
height: calc(100% + .2rem);
background: #5daf69;
border: 1px solid #2c2c2c;
border-right: none;
}
#sect02 .tab2 .ttlArea, #sect02 .tab2 .ttlArea::before{
background: #f7ffa0;
}
#sect02 .tab3 .ttlArea, #sect02 .tab3 .ttlArea::before{
background: #114da8;
}
#sect02 .tab4 .ttlArea, #sect02 .tab4 .ttlArea::before{
background: #ccb152;
}



#sect02 .tabcontents-list2 .fontEng{
margin: 0 0 .5rem;
line-height: 1;
font-size:5.6rem;
color: #fff;
opacity: .3;
}
#sect02 .tab2 .fontEng{
color: #dfe978;
opacity: 1;
}
#sect02 .tabcontents-list2 .numBox{
position: absolute;
top: 9.4rem;
left: 2.5rem;
display: block;
height: 3.4rem;
}
#sect02 .tabcontents-list2 .numBox img{
width: auto;
height: 100%;
}

#sect02 .tabcontents-list2 .ttlArea .sttl{
margin: 0 0 .5rem;
padding: 0 0 0 5.5rem;
font-size:3.2rem; 
color: #fff;
}
#sect02 .tab2 .ttlArea .sttl{
color: #2c2c2c;
}



#sect02 .tabcontents-list2 .txtArea{
position: relative;
padding: 3rem 5rem 2rem;
background: #fff;
border: 1px solid #2c2c2c;
border-top: none;
border-left: none;
}
#sect02 .tabcontents-list2 .txtArea::before{
content: "";
position: absolute;
top: -0.1rem;
left: -100vw;
width: 100vw;
height: calc(100% + 0.2rem);
background: #fff;
border: 1px solid #2c2c2c;
border-right: none;
}

#sect02 .tabcontents-list2 .mini{
position: relative;
z-index: 2;
}
#sect02 .tabcontents-list2 .mini h4{
font-size:2.4rem;
color: #f16a2c;
}

#sect02 .tabcontents-list2 .mini1{
margin: 0 0 5rem;
padding: 0 38rem 0 0;
}
#sect02 .tabcontents-list2 .mini1 .flame{
position: absolute;
top: -7rem;
right: 0;
width: 33.2rem;
padding: 3rem 0 0;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect02 .tabcontents-list2 .mini1 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: 1rem;
left: 1rem;
width: 100%;
height: 100%;
background: #f7ffa0;
border: 1px solid #2c2c2c;
}
#sect02 .tab2 .mini1 .flame::before{background: #a5c0f5;}
#sect02 .tab3 .mini1 .flame::before{background: #ccb152;}
#sect02 .tab4 .mini1 .flame::before{background: #5daf69;}




#sect02 .tabcontents-list2 .mini2{
margin: 0 0 5rem;
padding: 5rem 0 0 25rem;
border-top: 1px solid rgba(44, 44, 44, .3);
}
#sect02 .tabcontents-list2 .mini2 .engTxt{
position: relative;
top: .6rem;
display: inline-block;
width: 11.5rem;
margin: 0 .6rem 0 0;
}
#sect02 .tabcontents-list2 .mini2 .catch{
padding: .5rem 0 0;
font-size:1.8rem;
color: #2c2c2c;
}






/* svg関連 */
#sect02 .tabcontents-list2 .mini2 .flame{
position: absolute;
top: 5rem;
left: 0;
}
#sect02 .tab3 .mini2 .flame{
top: 3.5rem;
right: 32rem;
}
#sect02 .tabcontents-list2 .mini2 .flame svg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

#sect02 .tab1 .mini2 .flame svg{width: 21.3rem;}
#sect02 .tab2 .mini2 .flame svg{width: 21.7rem;}
#sect02 .tab3 .mini2 .flame svg{width: 22.0rem;}
#sect02 .tab4 .mini2 .flame svg{width: 22.1rem;}

#sect02 .tabcontents-list2 .mini2 .flame svg image{
width: 100%;
height: 100%;
}

#sect02 .tabcontents-list2 .mini2 .flame .outLine{
z-index: 3;
}




/* botArea */
#sect02 .botArea{
position: relative;
padding: 0 50% 8rem 0;
}
#sect02 .botArea .fontEng{
margin: 0 0 1rem;
line-height: 1;
font-size:5.6rem;
color: #f3eedb;
}
#sect02 .botArea .tblArea{
position: absolute;
top: 8rem;
right: 0;
width: 48rem;
}
#sect02 .botArea table{
width: 100%;
margin: 0;
}
#sect02 .botArea th{
padding: .7rem 1.5rem .8rem;
background: #ccb152;
font-size:2.2rem;
color: #fff;
}
#sect02 .botArea th .fontS{
font-size:1.3rem;
}
#sect02 .botArea td{
padding: .3rem 1.5rem .5rem;
line-height: 1.4;
font-size:1.8rem;
font-weight: 700;
}
#sect02 .botArea td:nth-child(2){
text-align: center;
font-size:2.8rem;
}
#sect02 .botArea td:nth-child(2) .fontS{
font-size:1.6rem;
}
#sect02 .botArea tr:nth-child(2) .ccl{color: #5daf69;}
#sect02 .botArea tr:nth-child(3) .ccl{color: #eef977;}
#sect02 .botArea tr:nth-child(4) .ccl{color: #114da8;}
#sect02 .botArea tr:nth-child(5) .ccl{color: #ccb152;}


#sect02 .botArea .sttl{
padding: 0 0 .5rem 2.5rem;
}
#sect02 .botArea h3{
font-size:3.2rem;
}
#sect02 .botArea .sttl .fontS{
display: block;
margin: .8rem 0 0;
font-size:2.0rem;
}
#sect02 .botArea h3 .lineDeco{
position: relative;
}
#sect02 .botArea h3 .lineDeco::before {
content: "";
position: absolute;
bottom: -0.2rem;
right: 0;
width: 100%;
height: .3rem;
background: url(./img/dotline.png) 0 0 repeat-x;
background-size: auto .3rem;
}
#sect02 .botArea .sttl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: .6rem;
height: 100%;
background: #114da8;
border-radius: 9999px;
}






/*------------
sect03_PC
------------*/
#sect03{
padding-bottom: 14rem;
background: url(./img/grid.png) 0 0 repeat #d5e1ff;
background-size: 2.4rem auto;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}


#sect03 .diagArea{
position: relative;
width: 80rem;
margin: 0 auto;
}
#sect03 .diagArea::before{
content: "";
position: absolute;
top: 2rem;
left: 2rem;
width: 100%;
height: 100%;
background: #ccb152;
border: 1px solid #2c2c2c;
}
#sect03.indexSect .sectTtlArea p {
    background: #d5e1ff;
}

/* start */
#sect03 #start-screen{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .6rem solid #114da8;
}
#sect03 #start-screen::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg.png) 0 0 no-repeat;
background-size: cover;
/*opacity: .5;*/
}
#sect03 #start-screen .mainArea{
position: relative;
width: 36.2rem;
height: 36.2rem;
padding: 4rem 0 0;
text-align: center;
transition: all .2s ease-in-out;
cursor: pointer;
}
#sect03 #start-screen .mainArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
}
#sect03 #start-screen .mainArea:hover{
opacity: .7;
}


#sect03 #start-screen .catch{
font-size:2.0rem;
}
#sect03 #start-screen .tags{
display: block;
margin: 0 0 .5rem;
}
#sect03 #start-screen .tag{
display: inline-block;
margin: 0 .25rem;
padding: .3rem .8rem .5rem;
background: #c6e6cc;
border-radius: 9999px;
line-height: 1;
font-size:1.3rem;
color: #2c2c2c;
}
#sect03 #start-screen .tag:nth-child(2){background: #fdffda;}
#sect03 #start-screen .tag:nth-child(3){background: #ccddfe;}
#sect03 #start-screen .tag:nth-child(4){background: #f4e4b0;}

#sect03 #start-screen .sttl{
margin: 0 0 2rem;
font-size:3.2rem;
}

#sect03 #start-screen .btn_start{
position: relative;
}






/* questions */
#sect03 #questions{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .6rem solid #114da8;
}
#sect03 #questions::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg.png) 0 0 no-repeat;
background-size: cover;
opacity: .5;
}
#sect03 .question{
position: relative;
padding: 1rem 0 0;
text-align: center;
}
#sect03 .question .fontEng{
margin: 0 0 -0.2rem;
font-size:1.8rem;
color: #e0cb82;
}
#sect03 .question .fontEng .fontL{
display: inline-block;
padding: 0 .5rem 0 0;
font-size:3.2rem;
}
#sect03 .question .qBox{
margin: 0 10rem 1.4rem;
padding: 2.0rem 5%;
border: 1px solid #2c2c2c;
background: #fff;
font-size:1.8rem;
font-weight: 700;
}
#sect03 .question .btn_item{
display: flex;
justify-content: space-between;
padding: 0 12.5rem 2rem;
}

#sect03 .question .btn_item .answer-btn{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 16rem;
height: 16rem;
background: #114da8;
border: 1px solid #2c2c2c;
border-radius: 50%;
box-shadow: .5rem .5rem 0 #2c2c2c;
line-height: 1.3;
color: #fff;
font-size:2.4rem;
font-weight: 700;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect03 .question .btn_item .answer-btn:nth-child(2){
background: #f16a2c;
}
#sect03 .question .btn_item .answer-btn:nth-child(3){
background: #e0dbc8;
color: #2c2c2c;
}

#sect03 .question .answer-btn:hover{
opacity: .7;
}

button.back-btn {
    position: relative;
    padding: 1rem 2rem 1rem 4.3rem;
    background: #fff;
    border-radius: 9999px;
    border: 1px solid #2c2c2c;
    box-shadow: .5rem .5rem 0 #2c2c2c;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

button.back-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2rem;
    width: 1.4rem;
    height: 100%;
    background: url(./img/arrow_rt.svg) 0 50% no-repeat;
    background-size: 1.4rem auto;
}



/* result */
#sect03 .result{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .6rem solid #114da8;
padding: 1.2rem 0 0;
text-align: center;

}
#sect03 .result::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg.png) 0 0 no-repeat;
background-size: cover;
opacity: .5;
}

#sect03 .result .fontEng{
position: relative;
margin: 0 0 .5rem;
font-size:2.4rem;
color: #e0cb82;
}

#sect03 .result .mainArea{
position: relative;
margin: 0 4% 1rem;
padding: 3.2rem 3rem;
border: 1px solid #2c2c2c;
background: #fff;
min-height: 26.8rem;
}
#sect03 .result .mainArea::before{
content: "";
position: absolute;
z-index: 0;
top: 2rem;
left: 1rem;
width: 12rem;
height: 12rem;
background: url(./img/sct03_rs01_deco.png) 0 0 no-repeat;
}
#sect03 #result-b .mainArea::before{
background-image: url(./img/sct03_rs02_deco.png);
}
#sect03 #result-c .mainArea::before{
background-image: url(./img/sct03_rs03_deco.png);
}
#sect03 #result-d .mainArea::before{
background-image: url(./img/sct03_rs04_deco.png);
}




#sect03 .result .mainArea .flame{
position: absolute;
top: 3.2rem;
left: 3rem;
width: 28rem;
height: 20rem;
}
#sect03 .result .mainArea .flame img{
border: 1px solid #2c2c2c;
}



#sect03 .result .txtArea{
padding: 0 0 0 31rem;
}
#sect03 .result .sttl{
font-size:1.8rem;
}
#sect03 .result .sttl .fontL{
display: block;
margin: 1.6rem 0;
font-size:3.0rem;
color: #5daf69;
}
#sect03 #result-b .sttl .fontL{color: #ccdb28;}
#sect03 #result-c .sttl .fontL{color: #114da8;}
#sect03 #result-d .sttl .fontL{color: #ccb152;}


#sect03 .result p{
line-height: 1.6;
font-size:1.6rem;
font-weight: 700;
}
#sect03 .result .btn-link{
margin: 0;
}
#sect03 .result .btn-wrap{
position: relative;
}
#sect03 .result .back-btn{
position: relative;
padding: 1rem 2rem 1rem 4.3rem;
background: #fff;
border-radius: 9999px;
border: 1px solid #2c2c2c;
box-shadow: .5rem .5rem 0 #2c2c2c;
line-height: 1;
font-weight: 700;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect03 .result .back-btn::before{
content: "";
position: absolute;
top: 0;
left: 2rem;
width: 1.4rem;
height: 100%;
background: url("./img/arrow_rt.svg") 0 50% no-repeat;
background-size: 1.4rem auto;
}
#sect03 .result .back-btn:hover{
opacity: .7;
}




/*------------
sect04_PC
------------*/
#sect04{
padding: 0 0 6rem;
background: url(./img/sct04_bg.png) 50% 0 no-repeat;
}
#sect04 .sectTtlArea{
padding: 0 0 0;
min-height: 0;
text-align: center;
}
#sect04 .ttlImg{
position: relative;
left: 0;
width: 29.5rem;
margin: 0 auto 2rem;
}
#sect04 .sectTtl{
margin: 0 0 1.5rem;
padding: 0 0 1.5rem;
line-height: 1.6;
font-size:3.6rem;
}

#sect04 .ulBox{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#sect04 .liBox{
display: flex;
margin: 0 0 6rem;
width: 52rem;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect04 .liBox h3{
width: 5.1rem;
padding: 3.5rem 1.3rem 0 0;
border-right: 1px solid #2c2c2c;
background: #5daf69;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
line-height: 1;
font-family: "Zen Kaku Gothic New vt";
font-size:2.4rem;
color: #fff;
}
#sect04 .box1 .liBox:nth-child(2) h3{
background: #eef977;
color: #2c2c2c;
}
#sect04 .box2 .liBox:nth-child(1) h3{
background: #114da8;
}
#sect04 .box2 .liBox:nth-child(2) h3{
background: #cab15a;
}

#sect04 .liBox h3::before{
content: "";
position: absolute;
top: 1.3rem;
left: calc(50% - 0.7rem);
width: 1.4rem;
height: 1.4rem;
background: #eef977;
border-radius: 50%;
}
#sect04 .box1 .liBox:nth-child(2) h3::before{
background: #a5c0f5;
}
#sect04 .box2 .liBox:nth-child(1) h3::before{
background: #ccb152;
}
#sect04 .box2 .liBox:nth-child(2) h3::before{
background: #29a03b;
}


#sect04 .liBox .mainArea{
width: calc(100% - 4.5rem);
padding: 0 0 1rem;
}
#sect04 .liBox .catch{
display: flex;
align-items: center;
margin: 0;
padding: 1.8rem 4rem 2rem;
background: url(./img/sct04_deco01.png) 100% 1rem no-repeat #45884f;
font-size:2.0rem;
color: #fff;
}
#sect04 .box1 .liBox:nth-child(2) .catch{
background: url(./img/sct04_deco02.png) 100% 1rem no-repeat #f8ffa0;
color: #2c2c2c;
}
#sect04 .box2 .liBox:nth-child(1) .catch{
background: url(./img/sct04_deco03.png) 100% 1rem no-repeat #1d5ec4;
}
#sect04 .box2 .liBox:nth-child(2) .catch{
background: url(./img/sct04_deco04.png) 100% 1rem no-repeat #c4a53e;
}



#sect04 .liBox .flame{
margin: 0 0 2.0rem;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
#sect04 .liBox p{
padding: 0 4rem;
}




/*------------
sect05_PC
------------*/
#sect05{
padding: 17rem 0 24rem;
background: url(./img/grid.png) 0 0 repeat #f3eedb;
background-size: 2.4rem auto;
}
#sect05 .spv{
z-index: 1;
margin: 0;
}



/* End_PC */





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



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

.areaInner {
    width: auto;
}




/*--------------------------------------
　Global Nav_SP
---------------------------------------*/
#gNav{
opacity: 0;
visibility: hidden;
}
/*--------------------------------------
　fixNav_SP
---------------------------------------*/

#fixNav_sp{
opacity: 0;
visibility: hidden;
}




/*--------------------------------------
　header_SP
---------------------------------------*/
#header{
position: relative;
z-index: 14;
width: 100%;
background:#fefcf5;
}
#header .topArea2{
margin: 0 0 1.2rem;
padding: 1.5rem 3% 0;
}
#header .siteName h1{
display: inline-block;
font-weight: 500;
}




/* mvArea */
.mvArea{
position: relative;
z-index: 1;
padding: 0 0 1rem;
}
.mvArea::before{
content: "";
position: absolute;
z-index: 2;
top: 8.4rem;
left: calc(50% - 23.3rem);
width: 46.6rem;
height: 13.5rem;
background: url("./img/idx_mv_bg01_sp.png") 0 0 no-repeat;
background-size: 46.6rem auto;
}
.mvArea .flame{
position: absolute;
top: 0;
left: -0.1rem;
width: 95%;
padding: 2.0rem 3.5rem 0 3%;
height: 11.8rem;
background: #e0cb82;
box-shadow: .5rem .5rem 0 #2c2c2c;
border: 1px solid #2c2c2c;
}
.mvArea .flame img{
width: 88.5rem;
}

/* txtArea */
.mvArea .txtArea{
position: relative;
z-index: 3;
width: auto;
margin: 0 auto;
padding: 22.5rem 5% 10.0rem;
}
.mvArea .txtArea::before{
content: "";
position: absolute;
bottom: 1.0rem;
left: -1.1rem;
width: 28rem;
height: 8.2rem;
background: url("./img/idx_mv_bg02_sp.png") 0 0 no-repeat;
background-size: 28rem auto;
}
.mvArea .txtArea h2{
position: relative;
width: 98%;
margin: 1rem auto 1.5rem;
        padding: 1.4rem 5% 2.1rem 7%;
font-size:2.8rem;
}
.mvArea .txtArea h2::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
right: -100vw;
width: calc(100% + 100vw);
height: 100%;
background: #f7ffa0;
border: 1px solid #2c2c2c;
box-shadow: -0.5rem 0.5rem 0 #2c2c2c;
}
.mvArea .txtArea p{
padding: 0 0 0;
line-height: 1.6;
}



/* headNote */
.mvArea .headNote{
position: static;
padding: 2% 5%;
font-size:1.1rem;
line-height: 1.6;
}



/* #sect00 */
#sect00{
position: relative;
margin: 0 0 0;
padding: 5rem 0 2rem;
background: url(./img/sct00_bg_sp.png) 50% 3rem no-repeat;
background-size: 40rem auto;
min-height: 0;
}
#sect00 .inner{
width: auto;
margin: 0 5%;
}

#sect00 .mainArea h2{
margin: 0 0 3rem;
text-align: center;
font-size:2.2rem;
}
#sect00 p{
text-align: center;
font-size:1.6rem;
font-weight: 700;
}
#sect00 .upper{
position: relative;
margin: 0 0 5rem;
padding: 0 0 0 0;
}
#sect00 .lower{
position: relative;
margin: 0 0 7rem;
padding: 0 0 0 0;
}
#sect00 .lower::before{
content: "";
position: absolute;
top: calc(50% - 17rem);
left: calc(50% - 17rem);
width: 34rem;
height: 34rem;
background: #fff;
border-radius: 50%;
}


#sect00 .fontBold{
color: #f16a2c;
}

#sect00 p{
line-height: 1.7;
}
#sect00 p .flame{
display: inline-block;
width: 11.0rem;
margin: 0 .3rem 0 0;
}
#sect00 p .flame img {
    position: relative;
    top: 0rem;
    left: 1.2rem;
}
	
#sect00 p .adjPrg{
display: block;
padding: 0 0 1.5rem;
}


/* botArea */
#sect00 .botArea{
padding: 0 0 2rem;
}
#sect00 .botArea .headImg{
width: 17.6rem;
margin: 0 auto 1.5rem;
}
#sect00 .botArea h2{
margin: 0 0 2.5rem;
text-align: center;
font-size:2.0rem;
}
#sect00 .botArea .boxWt{
margin: 0 0;
padding: 2.5rem 5% 3rem;
background: #fff;
border: 1px solid #2c2c2c;
text-align: center;
}
#sect00 .botArea .boxWt .catch{
margin: 0 0 1.5rem;
line-height: 1.5;
font-size:1.6rem;
color: #f16a2c;
}
#sect00 .botArea .boxWt .logoArea{
position: relative;
}
#sect00 .botArea .boxWt .logoArea::before{
content: "";
position: absolute;
top: 5.5rem;
left: 0;
width: 100%;
height: 2.2rem;
background: url("./img/sct00_logobg.png") 50% 0 no-repeat;
background-size: 2.2rem auto;
}
#sect00 .botArea .boxWt .flame{
display: block;
vertical-align: middle;
margin: 0 auto;
}
#sect00 .botArea .boxWt .flame:nth-child(1){
padding: 0 0 4rem;
width: 23.5rem;
}
#sect00 .botArea .boxWt .flame:nth-child(2){
width: 13.3rem;
}




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

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

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








/*------------
indexSect_SP
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
}
.indexSect .areaInner{
padding: 2.5rem 5% 1rem;
}

.indexSect .sectTtlArea{
position: relative;
margin: 0 0 2.5rem;
padding: 0 0 0;
min-height: 0;
text-align: center;
}
.indexSect .ttlImg{
position: relative;
left: 0;
width: auto;
height: 4.5rem;
margin: 0 auto 2rem;
}
.indexSect .sectTtl{
margin: 0 0 1.0rem;
padding: 0 0 1.0rem;
line-height: 1.6;
font-size:2.5rem;
}
.indexSect .sectTtl .fontS{
display: block;
font-size:2.2rem;
}




.indexSect .sectTtlArea .intro{
}
.indexSect .sectTtlArea p{
}

.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arr{
}
.indexSect .sectTtl a .arr::before{
}





/*------------
sect01_SP
------------*/
#sect01{
padding: 5rem 0 4rem;
background: url(./img/sct01_bg_sp.png) 50% 8rem repeat-y #fcffd9;
background-size: 100% auto;
}
#sect01::before{
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 7rem;
background: url(./img/head_ccl.svg) 0 0 / 100% 7rem no-repeat;
transform: scale(1, -1);
}



#sect01 .sectTtlArea p .marker{
background: linear-gradient(transparent 5%, rgba(255, 255, 255, 1.0) 0%) no-repeat bottom 0 left;
}


/* tab */
#sect01 .tabArea{
position: relative;
padding: 0 0 0;
margin: 0 0 5rem;
}
#sect01 .tab{
position: absolute;
z-index: 1;
display: flex!important;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 0;
	top: auto;
}
#sect01 .tab-botom{
bottom: 0;
}

#sect01 .tablist{
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 48%;
margin: 0 0 1.7rem;
padding: .8rem 5% 1.2rem;
border-radius: 9999px;
filter: drop-shadow(0 0 0 #2c2c2c);
box-shadow: 0.3rem 0.3rem 0 #2c2c2c;

border: 1px solid #2c2c2c;
line-height: 1;
font-weight: 700;
color: #fff;
cursor: pointer;
opacity: .7;
}

#sect01 .tablist .numBox{
position: absolute;
top: calc(50% - 0.75rem);
left: .5rem;
display: block;
height: 1.5rem;
}
#sect01 .tablist .numBox img{
width: auto;
height: 100%;
}

#sect01 .tablist .fontM{
position: relative;
display: block;
font-size:1.3rem;
}
#sect01 .tablist .fontS{
position: relative;
display: block;
margin: .6rem 0 0;
font-size:1.1rem;
}




#sect01 .tablist:hover{
opacity: .7;
}


/* active */
#sect01 .tablist.active{
padding: 1.4rem 5% 1.8rem;
opacity: 1;
}
#sect01 .tablist.active::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 1.4rem .8rem 0 .8rem;
translate: -50% 100%;
}
#sect01 .tablist.active::after {
content: "";
position: absolute;
bottom: 0.1rem;
left: 50%;
border-style: solid;
border-width: 1.2rem .68rem 0 .68rem;
translate: -50% 100%;
}
/* active_bottom */
#sect01 .tab-botom .tablist.active::before {
bottom: auto;
top: 0;
border-width: 0 .8rem 1.4rem .8rem;
border-color: transparent transparent #2c2c2c;
translate: -50% -100%;
}
#sect01 .tab-botom .tablist.active::after {
bottom: auto;
top: 0;
left: 50%;
border-width: 0 .68rem 1.2rem .68rem;
border-color: transparent transparent #5daf69;
translate: -50% -100%;
}
#sect01 .tab-botom .tablist:nth-child(2).active::after {
border-color: transparent transparent #f7ffa0;
}
#sect01 .tab-botom .tablist:nth-child(3).active::after {
border-color: transparent transparent #114da8;
}
#sect01 .tab-botom .tablist:nth-child(4).active::after {
border-color: transparent transparent #ccb152;
}




/* tabcontents */
#sect01 .tabcontents{
position: relative;
padding: 16.5rem 0 18rem;;
}


#sect01 .tabcontents-list .ttlArea{
position: relative;
border: 1px solid #2c2c2c;
padding: 1.6rem 5% 1.0rem;
}


/* svg関連 */

#sect01 .tabcontents-list .ttlArea .flame{
position: absolute;
top: 8.5rem;
right: 11.5rem;
}
#sect01 .tab3 .ttlArea .flame{
top: 7.5rem;
right: 11.5rem;
}
#sect01 .tabcontents-list .ttlArea .flame svg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

#sect01 .tab1 .ttlArea .flame svg{width: 10.8rem;}
#sect01 .tab2 .ttlArea .flame svg{width: 10.8rem}
#sect01 .tab3 .ttlArea .flame svg{width: 11.8rem;}
#sect01 .tab4 .ttlArea .flame svg{width: 10.8rem;}

#sect01 .tabcontents-list .ttlArea .flame svg image{
width: 100%;
height: 100%;
}

#sect01 .tabcontents-list .ttlArea .flame .outLine{
z-index: 3;
}



#sect01 .tabcontents-list .numBox{
position: absolute;
top: 1.5rem;
left: 5%;
display: block;
height: 2.2rem;
}
#sect01 .tabcontents-list .numBox img{
width: auto;
height: 100%;
}

#sect01 .tabcontents-list .ttlArea .catch{
margin: 0 0 .5rem 3.8rem;
line-height: 1.4;
font-size:2.0rem; 
color: #fff;
}
#sect01 .tab2 .ttlArea .catch{
color: #2c2c2c;
}

#sect01 .tabcontents-list .ttlArea .cap{
line-height: 1.1;
font-weight: 700;
font-size:1.3rem;
color: #fff;
}
#sect01 .tabcontents-list .ttlArea .cap .fontL{
font-size: 2rem;
}
#sect01 .tab2 .ttlArea .cap{
color: #2c2c2c;
}

#sect01 .tabcontents-list .ttlArea .tags{
padding: 0 10rem .5rem 0;
}
#sect01 .tabcontents-list .ttlArea .tag{
position: relative;
display: inline-block;
margin: 0 .7rem .2rem 0;
padding: .3rem .7rem .5rem;
background: rgba(255,255,255,.6);
border-radius: 9999px;
border: 1px solid #2c2c2c;
line-height: 1;
font-weight: 700;
font-size:1.2rem;
}




#sect01 .tabcontents-list .txtArea{
position: relative;
padding: 2rem 5% 2rem;
background-image: none;
border: 1px solid #2c2c2c;
border-top: none;
}
#sect01 .tab2 .txtArea{
background-image: none;
}
#sect01 .tab3 .txtArea{
background-image: none;
}
#sect01 .tab4 .txtArea{
background-image: none;
}


#sect01 .tabcontents-list .mini{
position: relative;
z-index: 2;
}
#sect01 .tabcontents-list .mini1{
margin: 0 0 3rem;
padding: 0 0 0 0;
}
#sect01 .tabcontents-list .mini dl{
position: relative;
padding: 1rem 0 0;
}
#sect01 .tabcontents-list .mini dt{
position: relative;
z-index: 1;
display: inline-block;
margin: 0 0 0 1.5rem;
padding: .3rem .7rem .5rem;
background: #fff;
border-radius: 9999px;
border: 1px solid #2c2c2c;
line-height: 1;
font-size:1.5rem;
font-weight: 700;
color: #f16a2c;
}
#sect01 .tabcontents-list .mini dd{
margin: -1.3rem 0 0;
padding: 1.5rem 5%;

}
#sect01 .tabcontents-list .mini dd::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}
#sect01 .tabcontents-list .mini1 dd::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}
#sect01 .tabcontents-list .mini2 dd::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}


#sect01 .tabcontents-list .mini2{
margin: 0 0 2rem;
padding: 0 0 0 0;
}
#sect01 .tabcontents-list .mini2 .imgArea{
position: relative;
top: 0;
left: 0;
height: 17rem;
}
#sect01 .tabcontents-list .mini2 .flame{
position: absolute;
width: 16.7rem;
border: 1px solid #2c2c2c;
}
#sect01 .tabcontents-list .mini2 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: -0.7rem;
left: 0.7rem;
width: 100%;
height: 100%;
border: 1px solid #2c2c2c;
}
#sect01 .tabcontents-list.tab2 .mini2 .flame:nth-of-type(1) {
    width: 11.3rem;
}
	
#sect01 .tabcontents-list .mini2 .flame:nth-child(2){
top: 6rem;
left: auto;
right: 0;
}
#sect01 .tabcontents-list .mini2 .flame:nth-child(2)::before{
top: 0.7rem;
}

#sect01 .tabcontents-list .btn-internal{
width: 95%;
}




/* subArea */
#sect01 .subArea{
position: relative;
}
#sect01 .subArea .subHead{
position: static;
margin: 0 0 3.0rem;
}
#sect01 .subArea h3{
padding: .2rem 0 .3rem 5%;
line-height: 1.6;
font-family: "Zen Kaku Gothic New";
font-size:2.0rem;
letter-spacing: 0;
-ms-writing-mode: tb-lr;
writing-mode: horizontal-tb;
}
#sect01 .subArea h3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: .4rem;
height: 100%;
background: #114da8;
border-radius: 9999px;
}
#sect01 .subArea h3::after{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}

#sect01 .subArea h3 .lineDeco{
position: relative;
}
#sect01 .subArea h3 .lineDeco::before{
content: "";
position: absolute;
top: 105%;
right: 0;
width: 100%;
height: .3rem;
background: url(./img/dotline.png) 0 0 repeat-x;
background-size: auto .2rem;
}


/* REASON */

#sect01 .sub1{
margin: 0 0 5rem;
}
#sect01 .sub1 h3 span:not([class]){
position: relative;
left: 0;
}
#sect01 .sub1 .ulBox{
margin: 0 0 0;
}
#sect01 .sub1 .liBox{
margin: 0 0 3rem;
padding: 20rem 5% 1.5rem;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect01 .sub1 .liBox .flame{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 16rem;
border: none;
}
#sect01 .sub1 .liBox img{
width: 100%;
height: 16rem;
object-fit: cover;
border: none;
border-bottom: 1px solid #2c2c2c;
}
#sect01 .sub1 .liBox h4{
padding: 0 0 0;
font-size:1.8rem;
color: #114da8;
}
#sect01 .sub1 .liBox h4::before{
content: "01";
position: absolute;
top: -6.2rem;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
background: #e0cb82;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:2.8rem;
color: #fff;
}




/* QA */
#sect01 .sub2{
margin: 0 0 -1rem;
padding: 0 0 0;
min-height: 0;
}
#sect01 .sub2 h3{
padding: .2rem 0 .3rem 5%;
}
#sect01 .sub2 h3 span:not([class]){
position: relative;
left: 0;
}

#sect01 .sub2 h3::after{
left: 2.8rem;
width: 4.75rem;
height: 12rem;
background: url(./img/sct01_eng_qa.png) 0 0 no-repeat;
background-size: 4.75rem auto;
}
#sect01 .sub2 .ulBox{
margin: 0 0 0;
}
#sect01 .sub2 .liBox{
margin: 0 0 2.0rem;
padding: 0 5%;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect01 .sub2 .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: .5rem;
height: 100%;
}

#sect01 .sub2 .liBox h4{
font-size: 1.7rem;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect01 .sub2 .liBox h4:hover{
opacity: 1;
}
#sect01 .sub2 .liBox h4::before{
content: "";
position: absolute;
top: 0;
right: -0.7rem;
width: 3.2rem;
height: 100%;
background: url("./img/plus.svg") 50% 60% / 1.6rem auto no-repeat;
}
#sect01 .sub2 .liBox h4::after{
content: "MORE";
position: absolute;
top: calc(50% - 1.8rem);
right: -0.7rem;
width: 3.2rem;
text-align: center;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:1.0rem;
transform: scale(0.9);
}
/* open時 */
#sect01 .sub2 .liBox h4.open::before{
background-image: url("./img/minus.svg");
}
#sect01 .sub2 .liBox h4.open::after{
content: "CLOSE";
}




#sect01 .sub2 .liBox h4 span{
position: relative;
display: block;
padding: 1.3rem 2.6rem 1.4rem 3.7rem;
}
#sect01 .sub2 .liBox h4 span::before{

top: .5rem;
left: -0.4rem;

font-size:2.2rem;

}
#sect01 .sub2 .liBox:nth-child(2) h4 span::before{content: "Q2.";}
#sect01 .sub2 .liBox:nth-child(3) h4 span::before{content: "Q3.";}



#sect01 .sub2 .liBox .accChild{
padding: 1.5rem 0 1.0rem;
border-top: 1px solid rgba(44, 44, 44, .3);
}
#sect01 .sub2 .liBox .catch{
padding: 0 0 0 3.7rem;
font-size:1.6rem;
}

#sect01 .sub2 .liBox .catch::before{
content: "A.";
position: absolute;
top: -0.6rem;
left: -0.2rem;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size:2.2rem;
}









/*------------
sect02_SP
------------*/
#sect02{
background: #fefcf5;
}

/* tab */
#sect02 .tabArea{
position: relative;
padding: 0 0 0;
margin: 0 0 3rem;
}
#sect02 .tab_2{
position: absolute;
z-index: 1;
display: flex!important;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 0 0;
}
#sect02 .tab-botom{
bottom: 0;
}

#sect02 .tablist{
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 48%;
margin: 0 0 1.7rem;
padding: .8rem 5% 1.2rem;
border-radius: 9999px;
filter: drop-shadow(0 0 0 #2c2c2c);
box-shadow: 0.3rem 0.3rem 0 #2c2c2c;

border: 1px solid #2c2c2c;
line-height: 1;
font-weight: 700;
color: #fff;
cursor: pointer;

}

#sect02 .tablist .numBox{
position: absolute;
top: calc(50% - 0.75rem);
left: .5rem;
display: block;
height: 1.5rem;
}
#sect02 .tablist .numBox img{
width: auto;
height: 100%;
}

#sect02 .tablist .fontM{
position: relative;
display: block;
font-size:1.3rem;
}
#sect02 .tablist .fontS{
position: relative;
display: block;
margin: .6rem 0 0;
font-size:1.1rem;
}




#sect02 .tablist:hover{
opacity: .7;
}


/* active */
#sect02 .tablist.active{
padding: 1.4rem 5% 1.8rem;
opacity: 1;
}
#sect02 .tablist.active::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
border-style: solid;
border-width: 1.4rem .8rem 0 .8rem;
translate: -50% 100%;
}
#sect02 .tablist.active::after {
content: "";
position: absolute;
bottom: 0.1rem;
left: 50%;
border-style: solid;
border-width: 1.2rem .68rem 0 .68rem;
translate: -50% 100%;
}
/* active_bottom */
#sect02 .tab-botom .tablist.active::before {
bottom: auto;
top: 0;
border-width: 0 .8rem 1.4rem .8rem;
border-color: transparent transparent #2c2c2c;
translate: -50% -100%;
}
#sect02 .tab-botom .tablist.active::after {
bottom: auto;
top: 0;
left: 50%;
border-width: 0 .68rem 1.2rem .68rem;
border-color: transparent transparent #5daf69;
translate: -50% -100%;
}
#sect02 .tab-botom .tablist:nth-child(2).active::after {
border-color: transparent transparent #f7ffa0;
}
#sect02 .tab-botom .tablist:nth-child(3).active::after {
border-color: transparent transparent #114da8;
}
#sect02 .tab-botom .tablist:nth-child(4).active::after {
border-color: transparent transparent #ccb152;
}



/* tabcontents */
#sect02 .tabcontents{
position: relative;
padding: 15rem 0 17rem;
}

#sect02 .tabcontents-list2 .ttlArea{
position: relative;
padding: 1.0rem 5% 1.5rem;
border: 1px solid #2c2c2c;
border-left: 1px solid #2c2c2c;
min-height: 12.5rem;
}
#sect02 .tabcontents-list2 .ttlArea::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}


#sect02 .tabcontents-list2 .fontEng{
margin: 0 0 .5rem;
min-height: 3.4rem;
line-height: 1;
font-size:3.3rem;
color: #fff;
opacity: .3;
}
#sect02 .tab2 .fontEng{
color: #dfe978;
opacity: 1;
}
#sect02 .tab4 .fontEng{
font-size:2.6rem;
}

#sect02 .tabcontents-list2 .numBox{
position: absolute;
top: 5.2rem;
left: 5%;
display: block;
height: 2.1rem;
}
#sect02 .tabcontents-list2 .numBox img{
width: auto;
height: 100%;
}

#sect02 .tabcontents-list2 .ttlArea .sttl{
margin: 0 0 .5rem;
padding: 0 8rem 0 4.0rem;
font-size: 1.8rem; 
color: #fff;
}
#sect02 .tab2 .ttlArea .sttl{
color: #2c2c2c;
}



#sect02 .tabcontents-list2 .txtArea{
position: relative;
padding: 3rem 5% 2rem;
background: #fff;
border: 1px solid #2c2c2c;
border-top: none;
border-left: 1px solid #2c2c2c;
}
#sect02 .tabcontents-list2 .txtArea::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}

#sect02 .tabcontents-list2 .mini{
position: relative;
z-index: 2;
}
#sect02 .tabcontents-list2 .mini h4{
line-height: 1.8;
font-size:1.8rem;
color: #f16a2c;
}

#sect02 .tabcontents-list2 .mini1{
margin: 0 0 2.5rem;
padding: 2.5rem 0 3rem;
}
#sect02 .tabcontents-list2 .mini1 .flame{
position: absolute;
top: -10rem;
right: -0.2rem;
width: 14.0rem;
padding: 1.0rem 0 0;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect02 .tabcontents-list2 .mini1 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: .8rem;
left: .8rem;
width: 100%;
height: 100%;
border: 1px solid #2c2c2c;
}



#sect02 .tabcontents-list2 .mini2{
margin: 0 0 2.5rem;
padding: 2.5rem 0 3rem;
border-top: 1px solid rgba(44, 44, 44, .3);
}
#sect02 .tabcontents-list2 .mini2 .engTxt{
position: relative;
top: .6rem;
display: inline-block;
width: 8.5rem;
margin: 0 .6rem 0 0;
}
#sect02 .tabcontents-list2 .mini2 h4{
margin: 2.6rem 0 4rem 11.5rem;
}
#sect02 .tabcontents-list2 .mini2 .catch{
padding: .5rem 0 0;
font-size:1.6rem;
color: #2c2c2c;
}






/* svg関連 */
#sect02 .tabcontents-list2 .mini2 .flame{
position: absolute;
top: 2rem;
left: 0;
}
#sect02 .tab3 .mini2 .flame{
top: 1.5rem;
right: auto;
left: 0;
}
#sect02 .tabcontents-list2 .mini2 .flame svg{
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

#sect02 .tab1 .mini2 .flame svg{width: 10.8rem;}
#sect02 .tab2 .mini2 .flame svg{width: 10.8rem;}
#sect02 .tab3 .mini2 .flame svg{width: 11.8rem;}
#sect02 .tab4 .mini2 .flame svg{width: 10.8rem;}

#sect02 .tabcontents-list2 .mini2 .flame svg image{
width: 100%;
height: 100%;
}

#sect02 .tabcontents-list2 .mini2 .flame .outLine{
z-index: 3;
}



#sect02 .tabcontents-list2 .btn-internal{
width: 95%;
}




/* accordion_grd */
#sect02 .mini .text {
height: 14rem;
overflow: hidden;
}
#sect02 .mini .show_more3 {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 70px;
padding-top: 6.5rem;
text-align: center;
line-height: 6.5rem;
background: linear-gradient(
180deg,
rgb(255, 255, 255, 0) 0%,
rgb(255, 255, 255, 1) 50%
);
cursor: pointer;
transition: bottom 0.2s;
}
#sect02 .mini .active{
background: none;
/*bottom: -20px;*/
}
#sect02 .mini .show_more3 span{
position: relative;
top: -4.5rem;
display: inline-block;
padding: .3rem 7% .3rem 0;
background: url(./img/plus.svg) 95% calc(50% + 0.1rem) no-repeat #fff;
background-size: 1.3rem auto;
border-bottom: 1px solid rgba(44, 44, 44, .3);
text-align: center;
line-height: 1.5;
font-weight: 700;
font-size:1.4rem;
}
#sect02 .mini .active span{
background: url(./img/minus.svg) 95% calc(50% + 0.1rem) no-repeat #fff;
background-size: 1.3rem auto;
}







/* botArea */
#sect02 .botArea{
position: relative;
padding: 0 0 4rem;
}
#sect02 .botArea .fontEng{
margin: 0 0 1rem;
line-height: 1;
font-size:3.0rem;
color: #f3eedb;
}
#sect02 .botArea .tblArea{
position: static;
width: auto;
margin: 0 0 1.5rem;
}
#sect02 .botArea table{
width: 100%;
margin: 0;
}
#sect02 .botArea th{
display: table-cell;
width: auto;
padding: .7rem 1.0rem .8rem;
background: #ccb152;
font-size:1.5rem;
color: #fff;
}
#sect02 .botArea th .fontS{
font-size:1.1rem;
}
#sect02 .botArea td{
display: table-cell;
width: 60%;
padding: .3rem 1.0rem .5rem;
text-align: left;
line-height: 1.4;
font-size:1.3rem;
font-weight: 700;
}
#sect02 .botArea td:nth-child(2){
width: 40%;
text-align: center;
font-size:2.0rem;
}
#sect02 .botArea td:nth-child(2) .fontS{
font-size:1.1rem;
}



#sect02 .botArea .sttl{
margin: 0 0 2.5rem;
padding: 0 0 .5rem 1.8rem;
}
#sect02 .botArea h3{
font-size:2.0rem;
}
#sect02 .botArea .sttl .fontS{
display: block;
margin: .6rem 0 0;
font-size:1.5rem;
}
#sect02 .botArea h3 .lineDeco{
position: relative;
}
#sect02 .botArea h3 .lineDeco::before {
content: "";
position: absolute;
bottom: -0.2rem;
right: 0;
width: 100%;
height: .2rem;
background: url(./img/dotline.png) 0 0 repeat-x;
background-size: auto .3rem;
}
#sect02 .botArea .sttl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: .4rem;
height: 100%;
background: #114da8;
border-radius: 9999px;
}






/*------------
sect03_SP
------------*/
#sect03{
padding: 2rem 0 6rem;
background: url(./img/grid.png) 0 0 repeat #d5e1ff;
background-size: 1.8rem auto;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}



#sect03 .diagArea{
position: relative;
width: auto;
margin: 0 auto;
}
#sect03 .diagArea::before{
content: "";
position: absolute;
top: 1rem;
left: 1rem;
width: 100%;
height: 100%;
background: #ccb152;
border: 1px solid #2c2c2c;
}

/* start */
#sect03 #start-screen{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .4rem solid #114da8;
}
#sect03 #start-screen::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg_sp.png) 0 0 no-repeat;
background-size: cover;
/*opacity: .5;*/
}
#sect03 #start-screen .mainArea{
position: relative;
width: 27rem;
height: 27rem;
padding: 1.5rem 0 0;
text-align: center;
transition: all .2s ease-in-out;
cursor: pointer;
}
#sect03 #start-screen .mainArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
}
#sect03 #start-screen .mainArea:hover{
opacity: 1;
}


#sect03 #start-screen .catch{
margin: 0 0 0.8rem;
        font-size: 1.8rem;

}
#sect03 #start-screen .tags{
display: block;
margin: .5rem 4rem .5rem;
}
#sect03 #start-screen .tag{
display: inline-block;
margin: 0 .25rem .2rem;
padding: .3rem .6rem .5rem;
background: #c6e6cc;
border-radius: 9999px;
line-height: 1;
font-size:1.5rem;
color: #2c2c2c;
}
#sect03 #start-screen .tag:nth-child(2){background: #fdffda;}
#sect03 #start-screen .tag:nth-child(3){background: #ccddfe;}
#sect03 #start-screen .tag:nth-child(4){background: #f4e4b0;}

#sect03 #start-screen .sttl{
margin: 0 0 1.5rem;
font-size:2.5rem;
}

#sect03 #start-screen .btn_start{
position: relative;
width: 7.3rem;
margin: 0 auto;
}






/* questions */
#sect03 #questions{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .6rem solid #114da8;
}
#sect03 #questions::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg_sp.png) 0 0 no-repeat;
background-size: cover;
opacity: .5;
}
#sect03 .question{
position: relative;
padding: 0rem 0 0;
text-align: center;
}
#sect03 .question .fontEng{
margin: 0 0 0;
font-size:1.4rem;
color: #e0cb82;
}
#sect03 .question .fontEng .fontL{
display: inline-block;
padding: 0 .5rem 0 0;
font-size:2.5rem;
}
#sect03 .question .qBox {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 5% 1rem;
        padding: 0.8rem 5% 1rem;
        border: 1px solid #2c2c2c;
        background: #fff;
        line-height: 1.7;
        font-size: 1.6rem;
        font-weight: 700;
        min-height: 11rem;
    }

#sect03 .question .btn_item{
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
padding: 0 2rem;
}

#sect03 .question .btn_item .answer-btn{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 10rem;
height: 10rem;
margin: 0 1rem .5rem;
background: #114da8;
border: 1px solid #2c2c2c;
border-radius: 50%;
box-shadow: .3rem .3rem 0 #2c2c2c;
line-height: 1.3;
color: #fff;
font-size:1.8rem;
font-weight: 700;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect03 .question .btn_item .answer-btn:nth-child(2){
background: #f16a2c;
}
#sect03 .question .btn_item .answer-btn:nth-child(3){
background: #e0dbc8;
color: #2c2c2c;
}

#sect03 .question .answer-btn:hover{
opacity: .7;
}

button.back-btn {
        padding: 0.8rem 5% 0.8rem 10%;
        box-shadow: .2rem .2rem 0 #2c2c2c;
        font-size: 1.1rem;
        margin: 0.8rem;
    }

	
	button.back-btn::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 1.5rem;
        width: 1.4rem;
        height: 100%;
        background: url(./img/arrow_rt.svg) 0 50% no-repeat;
        background-size: 1.1rem auto;
    }

/* result */
#sect03 .result{
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 44rem;
background: #fefcf5;
border: .6rem solid #114da8;
padding: .5rem 0 0;
text-align: center;

}
#sect03 .result::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct03_boxbg_sp.png) 0 0 no-repeat;
background-size: cover;
opacity: .5;
}

#sect03 .result .fontEng{
position: relative;
margin: 0 0 0;
font-size:2.1rem;
color: #e0cb82;
}

#sect03 .result .mainArea{
position: relative;
margin: 0 4% 2.0rem;
padding: 1.2rem 4%;
border: 1px solid #2c2c2c;
background: #fff;
min-height: 26.8rem;
}
#sect03 .result .mainArea::before{
display: none;
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 #result-b .mainArea::before{
background-image: none;
}
#sect03 #result-c .mainArea::before{
background-image: none;
}
#sect03 #result-d .mainArea::before{
background-image: none;
}




#sect03 .result .mainArea .flame{
position: static;
width: 14rem;
height: 10rem;
margin: 0 auto;
}
#sect03 .result .mainArea .flame img{
border: 1px solid #2c2c2c;
}




#sect03 .result .txtArea{
padding: 0 0 0;
}
#sect03 .result .sttl{
font-size:1.6rem;
}
#sect03 .result .sttl .fontL{
display: block;
margin: 1.0rem 0;
font-size:2.2rem;
}

#sect03 .result p{
line-height: 1.6;
font-size:1.4rem;
font-weight: 700;
}
#sect03 .result .btn-link{
margin: 0;
}
#sect03 .result .btn-link a{
font-size:1.3rem;
}
#sect03 .result .btn-wrap{
position: relative;
}
#sect03 .result .back-btn{
position: relative;
padding: .8rem 5% 1rem 10%;
background: #fff;
border-radius: 9999px;
border: 1px solid #2c2c2c;
box-shadow: .2rem .2rem 0 #2c2c2c;
line-height: 1;
font-size:1.1rem;
font-weight: 700;
cursor: pointer;
transition: all .2s ease-in-out;
}
#sect03 .result .back-btn::before{
content: "";
position: absolute;
top: 0;
left: 1.5rem;
width: 1.4rem;
height: 100%;
background: url("./img/arrow_rt.svg") 0 50% no-repeat;
background-size: 1.1rem auto;
}
#sect03 .result .back-btn:hover{
opacity: 1;
}







/*------------
sect04_SP
------------*/
#sect04{
padding: 1.5rem 0 3rem;
background: url(./img/sct04_bg_sp.png) 50% -2rem no-repeat;
background-size: 100% auto;
}
#sect04 .sectTtlArea{
padding: 0 0 0;
min-height: 0;
text-align: center;
}
#sect04 .ttlImg{
position: relative;
left: 0;
width: 13.8rem;
margin: 0 auto 1rem;
}
#sect04 .sectTtl{
margin: 0 0 1.0rem;
padding: 0 0 1.0rem;
line-height: 1.6;
font-size:2.5rem;
}

#sect04 .ulBox{
display: block;
}
#sect04 .liBox{
display: block;
margin: 0 0 3rem;
width: auto;
background: #fff;
border: 1px solid #2c2c2c;
}
#sect04 .liBox h3{
width: auto;
padding: 1.1rem 5% 1.5rem 11%;
border-right: none;
border-bottom: 1px solid #2c2c2c;
background: #5daf69;
-ms-writing-mode: tb-lr;
writing-mode: horizontal-tb;
line-height: 1;
font-family: "Zen Kaku Gothic New";
font-size:2.0rem;
color: #fff;
}
#sect04 .box1 .liBox:nth-child(2) h3{
background: #eef977;
color: #2c2c2c;
}
#sect04 .box2 .liBox:nth-child(1) h3{
background: #114da8;
}
#sect04 .box2 .liBox:nth-child(2) h3{
background: #cab15a;
}

#sect04 .liBox h3::before{
content: "";
position: absolute;
top: 1.6rem;
left: 5%;
width: 1.3rem;
height: 1.3rem;
background: #eef977;
border-radius: 50%;
}
#sect04 .box1 .liBox:nth-child(2) h3::before{
background: #a5c0f5;
}
#sect04 .box2 .liBox:nth-child(1) h3::before{
background: #ccb152;
}
#sect04 .box2 .liBox:nth-child(2) h3::before{
background: #29a03b;
}


#sect04 .liBox .mainArea{
width: auto;
padding: 0 0 1rem;
}
#sect04 .liBox .catch{
display: block;
margin: 0;
padding: 1.4rem 5% 1.6rem;
background: url(./img/sct04_deco01.png) 97% 0.8rem no-repeat #45884f;
background-size: 7.5rem auto;
font-size: 1.6rem;
color: #fff;
}
#sect04 .box1 .liBox:nth-child(2) .catch{
background: url(./img/sct04_deco02.png) 97% 0.8rem no-repeat #f8ffa0;
background-size: 7.5rem auto;
color: #2c2c2c;
}
#sect04 .box2 .liBox:nth-child(1) .catch{
background: url(./img/sct04_deco03.png) 97% 0.8rem no-repeat #1d5ec4;
background-size: 7.5rem auto;
}
#sect04 .box2 .liBox:nth-child(2) .catch{
background: url(./img/sct04_deco04.png) 97% 0.8rem no-repeat #c4a53e;
background-size: 7.5rem auto;
}



#sect04 .liBox .flame{
margin: 0 0 2.0rem;
border-top: 1px solid #2c2c2c;
border-bottom: 1px solid #2c2c2c;
}
#sect04 .liBox p{
padding: 0 5%;
}

#sect04 .liBox .btn-internal{
width: 89%;
}

#sect04 .btnset05{
text-align: center;
}
#sect04 .btnset05 a{
position: relative;
top: 0;
display: inline-block;
width: 40%;
min-height: 4rem;
padding: .6rem 10% .7rem;
background: url(./img/plus.svg) 90% calc(50% - 1px) no-repeat #fff;
background-size: 1.3rem auto;
border-radius: 9999px;
border: 1px solid #2c2c2c;
text-align: center;
line-height: 1.5;
font-weight: 700;
font-size: 1.5rem;
}
#sect04 .btnset05 a.boxclose{
background-image: url("./img/minus.svg");
}



/*------------
sect05_SP
------------*/
#sect05{
padding: 8rem 0 11rem;
background: url(./img/grid.png) 0 0 repeat #f3eedb;
background-size: 1.8rem auto;
}
#sect05 .spv{
z-index: 1;
margin: 0 0 0 5%;
}


/*------------
about_SP
------------*/
.about .inner::before {
top: -0.1rem;
left: -15%;
width: 130%;
height: 50%;
background: none;
border: none;
}
footer::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 17rem;
background: url(./img/grid.png) 0 0 repeat #f3eedb;
background-size: 1.8rem auto;
}

/*  End_SP */

}