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

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



  
/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
  
@keyframes mmfadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
  
@keyframes mmslideIn {
  from { transform: translateY(15%); }
  to { transform: translateY(0); }
}
  
@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}
  


/*===========
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_down {
  transform: translate(0, -100px);
  transition: all .6s ease-in-out;
  opacity: 0;
}
.fadeIn_down.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_up2 {
  transform: translate(0, 100px) scale(.5,.5);
  transition: all .4s ease-in-out;
  opacity: 0;
}
.fadeIn_up2.is-show {
  transform: translate(0, 0) scale(1,1);
  opacity: 1;
}

.sideIn_up {
  transform: translate(200px, 0);
  transition: all .6s ease-in-out;
  opacity: 0;
}
.sideIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}






.inview_re.delay1{
  transition-delay: 0.5s; 
}
.inview_re.delay2{
  transition-delay: 0.55s; 
}
.inview_re.delay3{
  transition-delay: 0.6s; 
}
.inview_re.delay4{
  transition-delay: 0.7s; 
}
.inview_re.delay5{
  transition-delay: 0.8s; 
}
.inview_re.delay6{
  transition-delay: 0.9s; 
}




/*------------
　body_PC
------------*/
body {
background: none;
}

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

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

.areaInner {
width: 1100px;
}





/*--------------------------------------
　header_PC
---------------------------------------*/
#header{
position: absolute;
z-index: 100;
width: 100%;
min-height: 0;
background: none;
}
#header::before{
width: 0;
height: 0;
background: none;
border: none;
}
#header::after{
width: 0;
height: 0;
background: none;
border: none;
}


#header .topArea{
position: relative;
z-index: 1;
width: auto;
margin:  0;
padding: 1rem 2rem 0;
text-align: right;
}

#header .siteName,
#header .siteName a{
position: relative;
display: inline-block;
font-size:1.2rem;
line-height: 1.6;
color: #122a72;
}
#header .sps{
position: relative;
display: inline-block;
font-size:1.2rem;
line-height: 1.6;
color: #122a72;
}
#header .headNote{
position: relative;
font-size:1.2rem;
line-height: 1.6;
color: #122a72;
}





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

#contents{
padding: 0 0 0;
}

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




/*------------
mvArea_PC
------------*/
.introArea{
clip-path: inset(0);
/*display: none;*/
}

.mvArea{
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
transition: all .2s ease-in-out;
}
.mvArea.active{
opacity: .4;
}
.mvArea .inner{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(./img/pt_grid.png) 0 0 repeat;
background-size: 15px auto;
}
.mvArea h2{position: relative;z-index: 5;padding: 32vh 0 0;font-size: 10.4rem;color: #fff;line-height: 1;}
.mvArea h2 .fontS{font-size: 3.4rem;}
.mvArea h2 .txt_bold{
color: #f4d700;
}
.mvArea h2 .obiAnim{position: relative;display: inline-block;margin: .7rem 0;padding: 6px 1rem 10px;background: #28997a;overflow: hidden;box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);}
.mvArea h2 .obiAnim::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ddd;
transition: all 0.5s ease-in-out;
transform-origin: right center;
}


.mvArea .flame{
position: absolute;
}
.mvArea .ph01{z-index: 2;top: 10%;left: calc(50% - 10%);}
.mvArea .ph02{z-index: 2;top: 0%;left: calc(50% - 66rem);}
.mvArea .ph03{z-index: 2;top: 60%;left: 2%;}

.mvArea .bg01{
z-index: 1;
top: 10rem;
left: calc(50% - 82.5rem);
width: 1650px;
}
.mvArea .bg01 img{
width: 100%;
object-fit: cover;
}
.mvArea .bg02{
z-index: 0;
top: 0;
left: calc(50% - 73rem);
width: 1460px;
}
.mvArea .bg02 img{
width: 100%;
object-fit: cover;
}

.mvArea .eng01{
bottom: 0;
right: 8rem;
}




/*------------
sect00_PC
------------*/
#sect00{
position: relative;
z-index: 2;
padding: 14rem 0 7rem;
}
#sect00::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5.2rem;
background: url("./img/trim2_top.png") 50% 0 no-repeat;
}
#sect00::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 21rem;
background: url("./img/trim2_bot.png") 50% 100% no-repeat #33b491;
}


#sect00 .outer{
position: relative;
}
#sect00 .outer::before{
content: "";
position: absolute;
z-index: 2;
top: -7rem;
left: 0;
width: 100%;
height: 918px;
background: url("./img/sct00_bg.png") 50% 0 no-repeat;
}



#sect00 .outer2{
position: relative;
width: 1000px;
margin: 0 auto;
padding: 0 0 4rem;
}
#sect00 .outer2::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./img/pt.jpg") 0 0 repeat;
background-size: 128px auto;
border: 1px solid #28997a;
}


#sect00 .headArea{
position: relative;
z-index: 2;
}
#sect00 .headArea .flame1{
position: absolute;
top: 15rem;
left: 10rem;
}
#sect00 .headArea .txtArea{
width: 50%;
margin: 0 0 0 50%;
padding: 5rem 5rem 6rem;
}
#sect00 .headArea .logo{
width: 26rem;
margin: 0 auto 4rem;
}
#sect00 .headArea p{
margin: 0 0 2rem;
line-height: 2.2;
font-size:1.8rem;
font-weight: 700;
color: #28997a;
}




#sect00 .mainArea{
position: relative;
z-index: 10;
padding: 0 5rem;
}
#sect00 .mainArea .sttl{
margin: 0 0 2.2rem;
padding: 0 0 0 3rem;
font-size:2.2rem;
}
#sect00 .mainArea .sttl::before{
content: "";
position: absolute;
top: 9px;
left: 0;
width: 16px;
height: 16px;
background: #33b491;
}
#sect00 .mainArea .sttl::after{
content: "";
position: absolute;
top: 50%;
right: 0;
width: calc(100% - 28rem);
height: 1px;
background: #28997a;
}

#sect00 .mainArea .liBox{
width: 55rem;
height: 18rem;
float: right;
margin: 0 0 20px; 
background: #ccc;
}
#sect00 .mainArea .liBox:nth-child(1){
width: 33rem;
height: 38rem;
float: left;
}


#sect00 .mainArea .liBox a{
display: block;
width: 100%;
height: 100%;
}
#sect00 .mainArea .liBox:nth-child(1) a{
background: url(./img/sct00_ph01.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect00 .mainArea .liBox:nth-child(2) a{
background: url(./img/sct00_ph02.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect00 .mainArea .liBox:nth-child(3) a{
background: url(./img/sct00_ph03.jpg) 0 30% no-repeat;
background-size: cover;
}

#sect00 .mainArea .liBox a::before{
content: "";
position: absolute;
bottom: 2rem;
right: 2rem;
width: 3.3rem;
height: 3.3rem;
background: url("./img/arrow_sq_wt_down.svg") 0 0 no-repeat;
background-size: 3.3rem auto;
}
#sect00 .mainArea .liBox a::after{
content: "";
position: absolute;
top: .8rem;
left: .8rem;
width: 12rem;
height: 6rem;
background: url("./img/eng02.svg") 0 0 no-repeat;
background-size: auto 6rem;
}
#sect00 .mainArea .liBox:nth-child(1) a::after{
height: 7.4rem;
background: url("./img/eng01.svg") 0 0 no-repeat;
background-size: auto 7.4rem;
}
#sect00 .mainArea .liBox:nth-child(3) a::after{
background: url("./img/eng03.svg") 0 0 no-repeat;
background-size: auto 6rem;
}

#sect00 .mainArea .liBox .txtBox{
position: absolute;
bottom: 2rem;
left: 2rem;
line-height: 1.6;
font-size:1.8rem;
font-weight: 700;
color: #fff;
}
#sect00 .mainArea .liBox .fontL{
font-size:2.4rem;
}
#sect00 .mainArea .liBox .fontS{
font-size:1.4rem;
}

#sect00 .mainArea .liBox a:hover{
opacity: 1;
box-shadow:15px 15px 0 #122a72;
}



#sect00 .spv{
z-index: 2;
margin: 2rem 0;
padding: 70px 5rem 0;
}
#sect00 .spv::before{
top: 0;
left: 0;
}
#sect00 .spv .mainArea{
padding: 0 0;
}
#sect00 .spv .imgArea{
top: -16.8rem;
}
#sect00 .spv p{
margin: 15px 0;
}






/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
}

.indexSect .areaInner{
}

.indexSect .sectTtlArea{
position: relative;
z-index: 1;
}
.indexSect .sectTtl{
position: relative;
z-index: 1;
font-size:3.6rem;
}

.indexSect .sectTtl .obiAnim{
position: relative;
display: inline-block;
margin: 0 0 .4rem;
padding: 5px 1rem 7px;
line-height: 1;
overflow: hidden;
}

.indexSect .sectTtl .obiAnim::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ddd;
transition: all 0.5s ease-in-out;
transform-origin: right center;
}
.obi_out.is-show .obiAnim::before{
animation-name: bgOut;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
@keyframes bgOut{
  from {
    transform: scaleX(1) translateX(0);
  }
  to {
    transform: scaleX(0) translateX(0);
  }
}



.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arw{
position: relative;
display: inline-block;
padding: 0 3.5rem 0 0;
}
.indexSect .sectTtl a .arw::before{
content: "";
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 28px;
height: 100%;
background: url("./img/arrow_sq.svg") 99% calc(50% + 1px) no-repeat;
background-size: 28px auto;
transition: all .2s ease-in-out;
}

.indexSect .sectTtlArea p{
position: relative;
}




.indexSect .ulBox,
.indexSect .liBox{
position: relative;
z-index: 1;
}

.indexSect .box2,
.indexSect .box3{
display: flex;
flex-wrap: wrap;
}


.indexSect .box2 .liBox{
width: calc((100% - 80px) / 2);
margin: 0 80px 80px 0;
}
.indexSect .box2 .liBox:nth-child(2n){
margin: 0 0 80px 0;
}

.indexSect .box3 .liBox{
width: calc((100% - 70px) / 3);
margin: 0 35px 35px 0;
}
.indexSect .box3 .liBox:nth-of-type(3n){
margin: 0 0 35px 0;
}








/*------------
sect01_PC
------------*/
#sect01wrap{
margin: -12rem 0 0;
padding: 12rem 0 0;
}
#sect01{
margin: -1px 0 0;
background: #33b491;
padding: 22rem 0 0;
}
#sect01 .areaInner::before{
content: "";
position: absolute;
top: -16rem;
left: 0;
width: 100%;
height: 10rem;
background: url("./img/eng_intv2.svg") 0 0 no-repeat;
background-size: auto 10rem;
}

#sect01 .sectTtlArea{
margin: 0 0 4rem;
}
#sect01 .sectTtl{
width: 58rem;
float: left;
}
#sect01 .sectTtl .obiAnim{
background: #122a72;
color: #fff;
}
#sect01 .sectTtlArea p{
width: 50rem;
float: right;
color: #fff;
}
#sect01 .sectTtlArea .txt_bold{
color: #ffee71;
}



#sect01 .ulBox1{
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 0 8rem;
}
#sect01 .ulBox1 .wrap{
display: flex;
justify-content: center;
padding: 2.7rem 0 0;
}
#sect01 .ulBox1 .liBox{
width: 32rem;
margin: 0 2.7rem;
}
#sect01 .ulBox1 .maindeco::before,
#sect01 .ulBox1 .maindeco::after,
#sect01 .ulBox1 .maindeco2::before,
#sect01 .ulBox1 .maindeco2::after{
border-color: #fff;
}
#sect01 .ulBox1 .liBox a{
width: 100%;
height: 45rem;
border: 1px solid #fff;
}

#sect01 .ulBox1 .liBox h3{
position: absolute;
top: 2rem;
right: 2rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
text-orientation: upright;/*for FF*/
font-size:2.0rem;
color: #fff;
}

#sect01 .ulBox1 .liBox .nailImg{
position: absolute;
z-index: -1;
display: block;
width: calc(100% - 1px);
height: calc(100% - 1px);
overflow: hidden;
}
#sect01 .ulBox1 .liBox img{
height: 100%;
object-fit: cover;
}


#sect01 .ulBox1 .liBox a:hover{
opacity: 1;
box-shadow:15px 15px 0 #122a72;
}
#sect01 .ulBox1 .liBox a::before{
content: "";
position: absolute;
bottom: 2rem;
right: 2rem;
width: 14rem;
height: 4rem;
background: url(./img/eng_more.png) 100% 0 no-repeat;
background-size: auto 3rem;
transition: all .2s ease-in-out;
opacity: 0;
}
#sect01 .ulBox1 .liBox a:hover::before{
opacity: 1;
}





/* modal */

/*infoエリアをはじめは非表示*/
#sect01 .infoBox{
display: none;
position: relative;
}


/*モーダルの横幅を変更したい場合*/
.md_style01 .modaal-container{
max-width: 1000px;
background: #fff;

background: none;
box-shadow: none;
}


.md_style01.modaal-wrapper .modaal-close {position: fixed;right: 3rem;top: 3rem;cursor: pointer;opacity: 1;width: 5rem;height: 5rem;background: url(./img/plus1_wt.svg) 0 0 no-repeat;background-size: 5rem auto;border-radius: 0;transition: all .2s ease-in-out;transform: rotate(45deg);}
.md_style01 .modaal-close:after, .md_style01 .modaal-close:before {
width: 0;
height: 0;
background: none;
border: none;
}

.md_style01 .modaal-content-container{
padding: 0;
}
.md_style01 .modalInner{
position: relative;
}


/* custom */
/*.md_style01 .slick-list {
overflow: visible;
}
*/

.md_style01 .modaal-container{
position: relative;
margin: 0;
}
.md_style01 .modaal-container .liBox{
padding: 50px 0 0;
position: relative;
}
.md_style01 .modaal-container .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 36rem;
height: 50px;
background: url("./img/intv_dk_wt.svg") 0 0 no-repeat;
background-size: 36rem 50px;
}
.md_style01 .modaal-container .liBox::after{
content: "";
position: absolute;
top: 1.2rem;
left: 3rem;
width: 22rem;
height: 50px;
background: url("./img/eng_intv01.svg") 50% 0 / auto 23px no-repeat;
}
.md_style01 #sl402b::after{
background-image: url("./img/eng_intv02.svg");
}
.md_style01 #sl403b::after{
background-image: url("./img/eng_intv03.svg");
}
.md_style01 #sl404b::after{
background-image: url("./img/eng_intv04.svg");
}





.md_style01 .modaal-container .inner{
position: relative;
padding: 30px 45rem 30px 4rem;
min-height: 58rem;
background: #fff;
}
.md_style01 .modaal-container .inner::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 36rem;
height: 1px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
}


.md_style01 .modaal-container .tags{
margin: 0 0 0;
}
.md_style01 .modaal-container .tag{
display: inline-block;
margin: 0 1rem .7rem 0;;
padding: 5px 1rem 7px;
border-radius:9999px;
border: 1px solid #777;
line-height: 1;
text-align: center;
font-weight: 700;
color: #777;
}

.md_style01 .modaal-container .catch0{
position: relative;
padding: 0 1.5rem;
margin: 0 0 2rem;
font-size:2.0rem;
font-weight: 700;
color: #122a72;
line-height: 1.3;
}
.md_style01 .modaal-container .catch0::before{
content: "";
position: absolute;
z-index: 1;
top: 12px;
left: -4rem;
width: calc(100% + 4rem);
height: 1px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
}
.md_style01 .modaal-container .catch0 span{
position: relative;
z-index: 2;
display: inline-block;
background: #fff;
padding: 0 1rem;
}


.md_style01 .modaal-container .catch{
line-height: 1;
font-size:2.6rem;
color: #fff;
}
.md_style01 .modaal-container .catch .txt_bold{
color: #ffee71;
}
.md_style01 .modaal-container .catch .obi{
display: inline-block;
margin: 0 0 1rem;
padding: 5px 1rem 7px;
background: #122a72;
}

.md_style01 .maindeco::before,
.md_style01 .maindeco::after{/* border-color: #fff; */}
.md_style01 .modaal-container .flame{position: absolute;top: 30px;right: 4rem;width: 34rem;height: 34rem;}
.md_style01 .modaal-container .flame .sttl{
position: absolute;
bottom: 1rem;
right: 2rem;
padding: 2px 1rem;
background: #122a72;
font-size:2.4rem;
line-height: 1;
color: #fff;
}
.md_style01 .modaal-container .flame img{width: 34rem;object-fit: cover;}

.md_style01 .modaal-container .txtArea{
}
.md_style01 .modaal-container p{
color: #122a72;
}
.md_style01 .modaal-container .btnArea{position: absolute;top: 42rem;right: 4rem;width: 34rem;}
.md_style01 .modaal-container .btnNote{
position: relative;
padding: 0 0 1rem;
border-bottom: 1px solid #122a72;
font-weight: 700;
font-size:1.3rem;
text-align: center;
color: #122a72;
}
.md_style01 .modaal-container .btnNote:before,
.md_style01 .modaal-container .btnNote:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.md_style01 .modaal-container .btnNote:before {
border: solid 11px transparent;
border-top: solid 11px #122a72;
}
.md_style01 .modaal-container .btnNote:after {
border: solid 14px transparent;
border-top: solid 14px #fff;
margin-top: -5px;
}

.md_style01 .modaal-container .inner .btn-internal{
  margin: 15px auto;
}


/* slider */
#slider4b .slick-arrow:before{
content:""!important;
}
#slider4b .slick-prev, #slider4b .slick-next {
z-index:2;
top: calc(50% - 3rem);
width: 60px;
height: 60px;
background: url("./img/arrow_sq_wt.svg") 0 0 no-repeat;
background-size: 60px auto;
transform: scale(-1, 1);
}
#slider4b .slick-next {
background: url("./img/arrow_sq_wt.svg") 0 0 no-repeat;
background-size: 60px auto;
transform: scale(1, 1);
}
#slider4b .slick-prev{
left:-10rem!important;
}
#slider4b .slick-next{
left:auto;
right:-10rem!important;
}
#slider4b .slick-slide{
/*margin-left: 2rem!important;*/
margin-right: 4rem!important;
}
.slick-track {
  will-change: transform;
}





/*------------
sect02_PC
------------*/
#sect02{
padding: 34rem 0 7rem;
background: url(./img/pt_grid.png) 0 0 repeat;
background-size: 15px auto;
}
#sect02::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40rem;
background: url(./img/sct02_ccl1.svg) 0 0 no-repeat;
background-size: 100% 40rem;
}
#sect02::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40rem;
background: url(./img/sct02_ccl2.svg) 0 0 no-repeat;
background-size: 100% 40rem;
}


#sect02 .areaInner{
z-index: 1;
}

#sect02 .areaInner::before{
content: "";
position: absolute;
top: -16rem;
left: 0;
width: 100%;
height: 10rem;
background: url(./img/eng_sch.svg) 50% 0 no-repeat;
background-size: auto 10rem;
}



#sect02 .sectTtl{
text-align: center;
}
#sect02 .sectTtl .obiAnim{
background: #d8d8d8;
}
#sect02 .sectTtl .obiAnim::before{
background: #28997a;
}
#sect02 .sectTtlArea p{
padding: 0 15rem 3rem;
}
#sect02 .sectTtlArea .cap{padding: 0 0 3rem;text-align:center;font-weight: 600;}


#sect02 .flow{
position: relative;
display: flex;
flex-wrap: wrap;
padding: 0 0 7rem;
}
#sect02 .fBox{
position: relative;
width: 50%;
}
#sect02 .fBox h3{
margin: 0 0 8rem;
background: #33b491;
padding: 8px 1rem 10px;
font-size:3.0rem;
line-height: 1;
text-align: center;
color: #fff;
}
#sect02 .boxR h3{
background: #e85510;
}
#sect02 .fBox h3::before{
content: "";
position: absolute;
bottom: -16px;
left: 0;
width: 100%;
height: 17px;
background: url(./img/tri_gr.svg) 50% 100% no-repeat;
background-size: 16px auto;
}
#sect02 .boxR h3::before{
background-image: url(./img/tri_red.svg);
}

#sect02 .fBox h3::after{
content: "";
position: absolute;
bottom: 0;
left: 2rem;
width: 10rem;
height: 93px;
background: url(./img/sct02_ttlicon01.png) 50% 100% no-repeat;
background-size: 10rem auto;
}
#sect02 .boxR h3::after{
left: auto;
right: 2rem;
background-image: url(./img/sct02_ttlicon02.png);
}



#sect02 .fBox .ulBox{
}
#sect02 .fBox .liBox{
margin: 0 7rem 3rem 0;
}
#sect02 .fBox .liBox::before{
content: "";
position: absolute;
top: 50%;
right: -7rem;
width: 7rem;
height: 1px;
background: #28997a;
}
#sect02 .fBox .liBox a{
padding: 15px 10rem;
background: url(./img/plus_sq_gr.svg) calc(100% - 3rem) 28px no-repeat #fff;
background-size: 28px auto;
border: 1px solid #28997a;
border-radius:6rem 0 0 0;
font-size:2.8rem;
font-weight: 700;
text-align: center;
color: #28997a;
}

#sect02 .fBox .liBox a::after{content: "";position: absolute;top: 0;left: 2.5rem;width: 7rem;height: 100%;background: url(./img/sct02_icon_a02.png) 0 12px no-repeat;background-size: 7rem auto;}
#sect02 .boxL .liBox:nth-child(2) a::after{background-image: url(./img/sct02_icon_a01.png);}
#sect02 .boxL .liBox:nth-child(3) a::after{
background-image: url(./img/sct02_icon_a03.png);
}
#sect02 .boxL .liBox:nth-child(4) a::after{
background-image: url(./img/sct02_icon_a04.png);
}





#sect02 .boxR .liBox{margin: 0 0 3rem 7rem;}
#sect02 .boxR .liBox a{
background: url(./img/plus_sq_red.svg) 3rem 28px no-repeat #fff;
background-size: 28px auto;
border: 1px solid #e85510;
border-radius:0 6rem 0 0;
color: #e85510;
}

#sect02 .boxR.fBox .typeB a{
background-color: #ffe3d6;
}

#sect02 .boxR .liBox::before{
right: auto;
left: -7rem;
background: #e85510;
}

#sect02 .boxR .liBox a::after{
left: auto;
right: 2.5rem;
background: url(./img/sct02_icon_b01.png) 0 12px no-repeat;
background-size: 7rem auto;
}
#sect02 .boxR .liBox:nth-child(2) a::after{
background-image: url(./img/sct02_icon_b02.png);
}
#sect02 .boxR .liBox:nth-child(3) a::after{
background-image: url(./img/sct02_icon_b03.png);
}
#sect02 .boxR .liBox:nth-child(4) a::after{
background-image: url(./img/sct02_icon_b04.png);
}


#sect02 .fBox .typeB span{
position: relative;
display: block;
}
#sect02 .fBox .typeB span::before{
content: "";
position: absolute;
top: 0;
left: -30px;
width: calc(100% + 30px);
height: 1px;
background: #28997a;
}
#sect02 .fBox .typeB span::after{
content: "";
position: absolute;
bottom: 0;
left: -3.7rem;
width: 3.8rem;
height: 228px;
background: url(./img/sct02_ck01.png) 0 0 no-repeat;
}

#sect02 .fBox .typeB a{
padding: 15px 10rem 160px;
background-color: #d2f8ee;
}
#sect02 .fBox .typeB a::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 2px);
height: 140px;
background: url(./img/sct02_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
border: 1px solid #28997a;
border-top: none;
}



#sect02 .boxR .typeB span::before{
left: auto;
right: -30px;
background: #e85510;
}
#sect02 .boxR .typeB span::after{
left: auto;
right: -3.7rem;
background-image: url(./img/sct02_ck02.png);
}
#sect02 .boxR .typeB a::before{
background-image: url(./img/sct02_ph02.jpg);
border: 1px solid #e85510;
border-top: none;
}



#sect02 .boxL .ulBox{
border-right: 1px solid #122a72;
}
#sect02 .ulBox2{
position: absolute;
top: 8.5rem;
left: calc(50% - 3.5rem);
}
#sect02 .ulBox2 .liBox{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
background: #fff;
border: 1px solid #122a72;
border-radius:50%;
font-size:1.8rem;
font-weight: 700;
color: #122a72;
text-align: center;
}
#sect02 .ulBox2 .liBox span{
position: relative;
}
#sect02 .ulBox2 .liBox:nth-child(2){
top:22rem;
}
#sect02 .ulBox2 .liBox:nth-child(2)::before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background: #e6e9f3;
border-radius: 0 100% 100% 0% / 50%;
}

#sect02 .ulBox2 .liBox:nth-child(3){
background: #e6e9f3;
top:62rem;
}


#sect02 .btn-link{
text-align: center;
}
#sect02 .btn-link a{
background-color: #fff;
}



/* modal */

/*infoエリアをはじめは非表示*/
#sect02 .infoBox{
/* display: none;
position: relative; */
visibility: hidden;
position: absolute;
}


/*モーダルの横幅を変更したい場合*/
.md_style02a .modaal-container,
.md_style02b .modaal-container{
max-width: none;
width: auto;
background: #fff;
box-shadow: none;
border: 1px solid #28997a;
border-radius:6rem 0 0 0;
}
.md_style02b .modaal-container{
border: 1px solid #e85510;
}


.md_style02a.modaal-wrapper .modaal-close,
.md_style02b.modaal-wrapper .modaal-close{
position:absolute;
right: 3rem;
top: 3.3rem;
cursor: pointer;
opacity: 1;
width: 3.4rem;
height: 3.4rem;
background: url("./img/close_sq_gr.svg") 0 0 no-repeat;
background-size: 3.4rem auto;
border-radius: 0;
transition: all .2s ease-in-out;
}
.md_style02b.modaal-wrapper .modaal-close{
background-image: url("./img/close_sq_red.svg");
}




.md_style02a .modaal-close:after,
.md_style02a .modaal-close:before,
.md_style02b .modaal-close:after,
.md_style02b .modaal-close:before{
width: 0;
height: 0;
background: none;
border: none;
}
.md_style02a .modaal-content-container,
.md_style02b .modaal-content-container{
padding: 0;
}


/* ボックス内の設定（modal02Box） */
.modal02Box{
width: 70rem;
color: #122a72;
}
.modal02Box .sttl{
padding: 30px 10rem;
border-bottom: 1px solid #28997a;
font-size:2.8rem;
font-weight: 700;
text-align: center;
color: #28997a;
}
.boxB .sttl{
border-bottom: 1px solid #e85510;
color: #e85510;
}
.modal02Box .sttl::after{content: "";position: absolute;top: 0;left: 2.5rem;width: 7rem;height: 100%;background: url(./img/sct02_icon_a02.png) 0 50% no-repeat;background-size: 7rem auto;}
#md022a .sttl::after{background-image: url(./img/sct02_icon_a01.png);}
#md023a .sttl::after{
background-image: url(./img/sct02_icon_a03.png);
}
#md024a .sttl::after{
background-image: url(./img/sct02_icon_a04.png);
}

#md021b .sttl::after{
background-image: url(./img/sct02_icon_b01.png);
}
#md022b .sttl::after{
background-image: url(./img/sct02_icon_b02.png);
}
#md023b .sttl::after{
background-image: url(./img/sct02_icon_b03.png);
}
#md024b .sttl::after{
background-image: url(./img/sct02_icon_b04.png);
}


.modal02Box .txtArea{
padding: 2rem 4rem 5rem;
}


/* ボックス（大）の設定（boxLg） */
.boxLg{
width: 100rem;
padding: 0 0 0 23rem;
}
.boxLg::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 23rem;
height: 100%;
background: url(./img/sct02_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
border-radius:6rem 0 0 0;
}
.boxLg.boxB::before{
background: url(./img/sct02_ph02.jpg) 60% 50% no-repeat;
background-size: cover;
}

.boxLg .mini{
margin: 0 0 30px;
}
.boxLg h4{
display: inline-block;
margin: 0 0 20px;
padding: 2px 1rem 3px;
border: 1px solid #28997a;
line-height: 1.3;
font-size:2.0rem;
color: #28997a;
}
.boxLg.boxB h4{
border: 1px solid #e85510;
color: #e85510;
}
.boxLg h4::before{
content: "";
position: absolute;
top: 50%;
left: -4rem;
width: 4rem;
height: 1px;
background: #28997a;
}
.boxLg.boxB h4::before{
background: #e85510;
}


.boxLg .catch{
font-size:2.4rem;
color: #e85510;
}

.boxLg .btn-internal{
margin-bottom: 10px;
justify-content: flex-end;
}
.boxLg .btn-internal a{
padding: 14px 5rem 16px;
}












/*------------
sect03_PC
------------*/
#sect03{
padding: 0 0 13rem;
background: url(./img/pt.jpg) 0 0 repeat;
background-size: 128px auto;
}



/*------------
sect031_PC
------------*/

#sect031{
padding: 24rem 0 0;
}
#sect031::before{
content: "";
position: absolute;
top: 10rem;
left: 0;
width: 100%;
height: 10rem;
background: url("./img/eng_sps.svg") 50% 0 no-repeat;
background-size: auto 10rem;
}
#sect031 .areaInner::before{content: "";position: absolute;top: 0;left: -57rem;width: 61rem;height: 76rem;background: url(./img/sct031_bg1.png) 0 0 no-repeat;}
#sect031 .areaInner::after{content: "";position: absolute;top: 0;left: 59rem;width: 111rem;height: 76rem;background: url(./img/sct031_bg2.png) 0 0 no-repeat;}




#sect031 .sectTtlArea{
width: 58rem;
margin: 0 0 6rem;
padding: 6rem 7.5rem;
}
#sect031 .sectTtlArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4.2rem;
background: url(./img/sct03_trim1.png) 50% 0 no-repeat;
}
#sect031 .sectTtlArea::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4.2rem;
background: url(./img/sct03_trim2.png) 50% 0 no-repeat;
}

#sect031 .sectTtl{
margin: 0 0 4rem;
font-size:3.0rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
#sect031 .sectTtl .obiAnim{
background: #28997a;
color: #fff;
}
#sect031 .sectTtl .txt_bold{
color: #ffee71;
}
#sect031 h2{
margin: 0 0 5rem;
text-align: center;
font-size:4.0rem;
}
#sect031 h2 .fontS{
display: block;
font-size:2.2rem;
color: #e85510;
}


#sect031 .cntArea{
position: relative;
padding: 8rem 0 0;
}
#sect031 .cntArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 15rem;
height: 2.3rem;
background: url(./img/eng_cmp.svg) 0 0 no-repeat;
background-size: auto 2.3rem;
}
#sect031 .cntArea::after{
content: "";
position: absolute;
z-index: 1;
top: 12px;
right: 0;
width: calc(100% - 16rem);
height: 1px;
background: #28997a;
}


#sect031 .cntArea .ttlArea{
width: 38rem;
float: left;
}
#sect031 .cntArea .ulBox{
width: 62rem;
float: right;
}


#sect031 .cntArea .catch{
margin: 0 0 4rem;
color: #28997a;
text-align: center;
}
#sect031 .cntArea h3{
margin: 0 0 0 13rem;
line-height: 1.3;
font-size:4.0rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
}
#sect031 .cntArea h3 a{
padding: 0 0 5rem;
background: url("./img/arrow_sq.svg") 100% calc(100% - 6px) no-repeat;
background-size: 18px auto;
border-bottom: 1px solid #122a72;
}
#sect031 .cntArea h3 a::before{
content: "";
position: absolute;
bottom: 1rem;
left: 0;
width: 4rem;
height: 11px;
background: url(./img/eng_more_bl.svg) 0 100% no-repeat;
background-size: auto 11px;
}



#sect031 .cntArea .liBox{
width: 30rem;
height: 23rem;
float: left;
margin: 0 0 2rem; 
}
#sect031 .cntArea .liBox:nth-child(1){
width: 62rem;
float: left;
margin: 0 0 5rem; 
}
#sect031 .cntArea .liBox:nth-child(3){
float: right;
}

#sect031 .cntArea .liBox h4{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
transition: all .2s ease-in-out;
}
#sect031 .cntArea .liBox a{
position: relative;
width: 100%;
height: 100%;
}
#sect031 .cntArea .liBox h4::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct031_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
transition: all .2s ease-in-out;
}
#sect031 .cntArea .liBox:nth-child(2) h4::before{
background: url(./img/sct031_ph02.jpg) 0 50% no-repeat;
background-size: cover;
}
#sect031 .cntArea .liBox:nth-child(3) h4::before{
background: url(./img/sct031_ph03.jpg) 10% 50% no-repeat;
background-size: cover;
}

#sect031 .cntArea .liBox h4:hover{
box-shadow:15px 15px 0 #122a72;
}
#sect031 .cntArea .liBox h4:hover::before{
transform: scale(1.1);
}
#sect031 .cntArea .liBox a:hover{
opacity: 1;
}





#sect031 .cntArea .liBox a::before{content: "";position: absolute;bottom: 2rem;right: 2rem;width: 6.5rem;height: 2.5rem;background: url("./img/arrow_sq_wt.svg") 100% 100% no-repeat;background-size: 2.5rem auto;}
#sect031 .cntArea .liBox a::after{
content: "";
position: absolute;
top: .6rem;
left: .6rem;
width: 10rem;
height: 4.4rem;
background: url("./img/eng02.svg") 0 0 no-repeat;
background-size: auto 4.4rem;
}
#sect031 .cntArea .liBox:nth-child(1) a::after{
height: 7.4rem;
background: url("./img/eng01.svg") 0 0 no-repeat;
background-size: auto 4.4rem;
}
#sect031 .cntArea .liBox:nth-child(3) a::after{
background: url("./img/eng03.svg") 0 0 no-repeat;
background-size: auto 4.4rem;
}

#sect031 .cntArea .liBox .txtBox{
position: absolute;
bottom: 2rem;
left: 2rem;
line-height: 1.6;
font-size:2.4rem;
font-weight: 700;
color: #fff;
}
#sect031 .cntArea .liBox:nth-child(1) .txtBox{
bottom: 5.5rem;
left: auto;
right: 2rem;
text-align: right;
}



/*------------
sect032_PC
------------*/

#sect032{
padding: 12rem 0 8rem;
}
#sect032 .areaInner{
border-top: 1px solid #28997a;
}
#sect032 .areaInner::before{
content: "";
position: absolute;
top: 2rem;
left: 0;
width: 100%;
height: 4.8rem;
background: url(./img/eng_3ess.svg) 50% 0 no-repeat;
background-size: auto 4.8rem;
}
#sect032 .ttlWrap{
display: flex; /* Firefox 対策 */
}
#sect032 h3{
z-index: 2;
margin: 11rem auto -12rem;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
font-size:3.0rem;
line-height: 6.2rem;
}
#sect032 h3 .obi{
background: #28997a;
padding: 1rem 0;
color: #fff;
}
#sect032 h3 .fontS{
font-size:2.0rem;
}
#sect032 h3 .fontL{
font-size:5.0rem;
}
#sect032 h3 .txt_bold{
color: #ffee71;
}


#sect032 .mainAreaWrap{
position: relative;
}
#sect032 .mainAreaWrap::before{
content: "";
position: absolute;
top: 0;
right: -5rem;
width: 5rem;
height: 100%;
background: url(./img/sct032_dk.svg) 0 0 no-repeat;
background-size: 5rem auto;
}
#sect032 .mainAreaWrap::after{
content: "";
position: absolute;
top: 0;
left: -100vw;
width: 100vw;
height: 100%;
background: #fff;
}

#sect032 .mainArea{
position: relative;
padding: 18rem 10rem 7rem;
background: #fff;
}
#sect032 .mainArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: url("./img/dash_vt.png") 0 0 repeat-y;
background-size: 1px auto;
}
#sect032 .mainArea::after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: url("./img/dash_vt.png") 0 0 repeat-y;
background-size: 1px auto;
}

#sect032 .mainArea .areaR{
width: 50rem;
margin: 0 0 0 41rem;
}
#sect032 .mainArea h4{
font-size:2.4rem;
}
#sect032 .mainArea .imgArea{position: absolute;top: 18rem;left: 12.5rem;width: 32rem;}
#sect032 .mainArea .imgArea .cap{
margin: 2rem 0 0;
text-align: center;
font-weight: 700;
line-height: 1.6;
}
#sect032 .mainArea .imgArea .cap .fontL{
font-size:2.0rem;
}

#sect032 .mainArea .grBox{
margin: 4rem 2rem 5rem;
}
#sect032 .mainArea .grBox .inner{
background: #f8f9fa;
}
#sect032 .mainArea .grBox .sttl{
padding: 10px 1rem 14px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
font-size:2.0rem;
text-align: center;
}
#sect032 .mainArea .grBox .ulBox{
padding: 2rem 0 3rem;
text-align: center;
}
#sect032 .mainArea .grBox .liBox{display: inline-block;transform: rotate(0deg);width: 12.5rem;height: 9.5rem;margin: 0 .6rem;text-align: center;font-size:2.0rem;font-weight: 700;}
#sect032 .mainArea .grBox .liBox span{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: url(./img/sct032_deco.svg) 0 0 no-repeat;
background-size: 12.5rem auto;
}


#sect032 .btn-internal a::before{
background-image: url(./img/arrow_sq_down.svg);
}



/*------------
sect033_PC
------------*/

#sect033{
padding: 12rem 0 8rem;
}

#sect033 .sectTtlArea{
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #28997a;
}
#sect033 .sectTtlArea::before{
content: "";
position: absolute;
top: 2.5rem;
left: 2.5rem;
width: 100%;
height: 5rem;
background: url(./img/eng_rec.svg) 0 0 no-repeat;
background-size: auto 5rem;
}

#sect033 .boxL{
position: relative;
width: 35rem;
padding: 5rem 5rem;
}
#sect033 .boxL h3{
font-size:2.4rem;
color: #28997a;
}
#sect033 .boxL h3 .txt_bold{
color: #122a72;
}
#sect033 .boxL .caption{
text-align: left;
font-size:1.4rem;
}

#sect033 .boxR{
width: calc(100% - 35rem);
border-left: 1px solid #28997a;
padding: 5rem 5rem;
}
#sect033 .boxR dl{
display: table;
width: 100%;
}
#sect033 .boxR dt{
display: table-cell;
width: 15rem;
padding: 1.5rem 1rem 1.7rem;
border-bottom: 1px solid #122a72;
}
#sect033 .boxR dd{
display: table-cell;
padding: 1.5rem 3rem 1.7rem;
font-weight: 700;
border-bottom: 1px solid #d8d8d8;
}


#sect033 .cntArea{
display: flex;
flex-wrap: wrap;
padding: 5rem 3rem 4rem;
}
#sect033 .cntArea .areaBox{
width: calc(50% - 4rem);
margin: 0 2rem;
}
#sect033 .cntArea .sttl{
width: 12rem;
background: #33b491;
padding: 5px 1rem 6px;
color: #fff;
text-align: center;
font-size:2.0rem;
}
#sect033 .cntArea .areaR .sttl{
background: #e85510;
}
#sect033 .cntArea dl{
display: table;
width: 100%;
}
#sect033 .cntArea dt{
display: table-cell;
width: 15rem;
padding: 1.5rem 1rem 1.7rem;
border-bottom: 1px solid #28997a;
color: #28997a;
}
#sect033 .cntArea .areaR dt{
border-bottom: 1px solid #e85510;
color: #e85510;
}
#sect033 .cntArea dd{
display: table-cell;
padding: 1.5rem 3rem 1.7rem;
border-bottom: 1px solid #d8d8d8;
}
#sect033 .cntArea p{
padding: .7rem 1rem 0;
font-size:1.4rem;
color: #999999;
}


/*------------
sect034_PC
------------*/
#sect034wrap{
margin: -12rem 0 0;
padding: 12rem 0 0;
}
#sect034{
}
#sect034 .entry{
margin: 0;
}
#sect034 .entryBox .inner {
padding: 90px 10rem 0;
}
#sect034 .entryBox{
background-position: 100px 55px;
}
#sect034 .entryBox .inner{
background-position: calc(100% - 10rem) 55px;
}

#sect034 .entryBox .btnArea {
justify-content: space-around;
}
#sect034 .entryBox .btn-internal a::before{
background-image: url(./img/arrow_sq_up.svg);
}





/*------------
sect04_PC
------------*/
#sect04{
padding: 25rem 0 0;
}
#sect04 .areaInner::before{
content: "";
position: absolute;
top: -16rem;
left: 0;
width: 100%;
height: 10rem;
background: url("./img/eng_know.svg") 0 0 no-repeat;
background-size: auto 10rem;
}

#sect04 .sectTtlArea{
margin: 0 0 4rem;
}
#sect04 .sectTtl{
width: 40rem;
float: left;
}
#sect04 .sectTtl .obiAnim{
background: #28997a;
color: #fff;
}
#sect04 .sectTtl a .arw::before {
background-image: url(./img/arrow_sq_wt.svg);
}

#sect04 .sectTtlArea p{
width: 68rem;
float: right;
}
#sect04 .sectTtlArea .txt_bold{
color: #ffee71;
}


#sect04 .ulBox{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#sect04 .liBox{
width: 50rem;
}
#sect04 .liBox a{
background: #fff;
border: 1px solid #28997a;
border-radius:60px 0 0 0;
}
#sect04 .liBox a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid #28997a;
}
#sect04 .liBox a::after{
content: "";
position: absolute;
bottom: 3rem;
right: 3rem;
width: 6.5rem;
height: 1.8rem;
background: url("./img/eng_more_gr.png") 100% 100% no-repeat;
background-size: auto 1.8rem;
}
#sect04 .liBox a:hover{
box-shadow:15px 15px 0 #122a72;
opacity: 1;
}


#sect04 .liBox h3{
display: flex;
align-items: center;
padding: 2.5rem 4rem 2.5rem;
font-size:3.0rem;
color: #28997a;
}
#sect04 .liBox h3 .fontS{
display: block;
font-size:2.2rem;
}
#sect04 .liBox .flame{
width: 100%;
overflow: hidden;
}
#sect04 .liBox .flame img{
width: 100%;
object-fit: cover;
transition: all .2s ease-in-out;
}
#sect04 .liBox p{
padding: 0 4rem 4rem;
}

#sect04 .liBox a:hover img{
transform: scale(1.1);
}



/* End_PC */





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



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

.areaInner {
    width: auto;
}






/*--------------------------------------
　header_SP
---------------------------------------*/
#header{
position: absolute;
z-index: 100;
width: 100%;
min-height: 0;
background: none;
}

#header .topArea{
position: relative;
z-index: 1;
width: auto;
margin:  0;
padding: 1rem 2rem 0;
text-align: center;
}

#header .siteName,
#header .siteName a{
position: relative;
display: block;
font-size:1.2rem;
line-height: 1.6;
color: #122a72;
}
#header .sps{
position: relative;
display: block;
font-size:1.2rem;
line-height: 1.6;
color: #122a72;
}


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

#contents{
padding: 0 0 0;
}

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


/*------------
mvArea_SP
------------*/
.introArea{
clip-path: inset(0);

/*display: none;
*/}

.mvArea{
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
}
.mvArea .inner{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(./img/pt_grid.png) 0 0 repeat;
background-size: 15px auto;
}
.mvArea h2{
position: relative;
z-index: 5;
padding: 30rem 0 0 5%;
font-size:4.2rem;
color: #fff;
line-height: 1;
}
.mvArea h2 .fontS{
font-size:1.9rem;
}
.mvArea h2 .txt_bold{
color: #f4d700;
}
.mvArea h2 .obiAnim{
position: relative;
display: inline-block;
margin: .5rem 0;
padding: 2px 1rem 4px;
background: #28997a;
overflow: hidden;
}
.mvArea h2 .obiAnim::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ddd;
transition: all 0.5s ease-in-out;
transform-origin: right center;
}


.mvArea .flame{
position: absolute;
}
.mvArea .ph01{
width: 32rem;
z-index: 2;
top: 20rem;
left: calc(50% - 7.5rem);
}
.mvArea .ph02{
width: 15rem;
z-index: 2;
top:7rem;
left: -2rem;
}
.mvArea .ph03{
width: 20rem;
z-index: 2;
top: 50rem;
left: -3rem;
}

.mvArea .bg01{
z-index: 1;
top: 10rem;
left: 0;
width: 100%;
}
.mvArea .bg01 img{
width: 100%;
object-fit: cover;
}
.mvArea .bg02{
z-index: 0;
top: 5rem;
left: 0;
width: 100%;
}
.mvArea .bg02 img{
width: 100%;
object-fit: cover;
}

.mvArea .headNote{position: absolute;width: 100%;padding: 0 5%;bottom: 1rem;font-size:1.1rem;text-align: center;}




/*------------
sect00_SP
------------*/
#sect00{
position: relative;
z-index: 2;
padding: 6rem 5% 3rem;
}
#sect00::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2.6rem;
background: url("./img/trim2_top_sp.png") 50% 0 no-repeat;
background-size: 100% auto;
}
#sect00::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
background: url("./img/trim2_bot_sp.png") 50% 100% no-repeat #33b491;
background-size: 100% auto;
}


#sect00 .outer{
position: relative;
}
#sect00 .outer::before{
content: "";
position: absolute;
z-index: 2;
top: -3.5rem;
left: 0;
width: 100.5%;
height: 3.5rem;
background: url("./img/sct00_bg_sp.png") 0 0 no-repeat;
background-size: cover;
}
#sect00 .outer::after{
content: "";
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
}



#sect00 .outer2{
position: relative;
width: auto;
margin: 0 auto;
padding: 0 0 2rem;
}
#sect00 .outer2::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./img/pt.jpg") 0 0 repeat;
background-size: 128px auto;
border: 1px solid #28997a;
border-top: none;
}


#sect00 .headArea{
position: relative;
z-index: 2;
}
#sect00 .headArea .flame1{
position: absolute;
width: 12rem;
top: 2.5rem;
left: 3rem;
}
#sect00 .headArea .txtArea{
width: auto;
margin: 0 0 0;
padding: 18rem 5% 2rem;
}
#sect00 .headArea .logo{
position: absolute;
top: 5.5rem;
right: 3rem;
width: 13rem;
margin: 0 auto 4rem;
}
#sect00 .headArea p{
margin: 0 0 2rem;
line-height: 2.0;
font-size:1.7rem;
font-weight: 700;
color: #28997a;
}




#sect00 .mainArea{
position: relative;
z-index: 10;
padding: 0 5%;
}
#sect00 .mainArea .sttl{
margin: 0 0 2.2rem;
padding: 0 0 0 1.6rem;
font-size:1.8rem;
}
#sect00 .mainArea .sttl::before{
content: "";
position: absolute;
top: 8px;
left: 0;
width: 1.3rem;
height: 1.3rem;
background: #33b491;
}
#sect00 .mainArea .sttl::after{
content: "";
position: absolute;
top: 50%;
right: 0;
width: calc(100% - 22rem);
height: 1px;
background: #28997a;
}

#sect00 .mainArea .liBox{
width: auto;
height: 14rem;
float: none;
margin: 0 0 2rem; 
background: #ccc;
}
#sect00 .mainArea .liBox:nth-child(1){
width: auto;
height: 14rem;
float: none;
}


#sect00 .mainArea .liBox a{
display: block;
width: 100%;
height: 100%;
}
#sect00 .mainArea .liBox:nth-child(1) a{
background: url(./img/sct00_ph01.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect00 .mainArea .liBox:nth-child(2) a{
background: url(./img/sct00_ph02.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect00 .mainArea .liBox:nth-child(3) a{
background: url(./img/sct00_ph03.jpg) 0 30% no-repeat;
background-size: cover;
}

#sect00 .mainArea .liBox a::before{
content: "";
position: absolute;
bottom: 1rem;
right: 1rem;
width: 2.3rem;
height: 2.3rem;
background: url("./img/arrow_sq_wt_down.svg") 0 0 no-repeat;
background-size: 2.3rem auto;
}
#sect00 .mainArea .liBox a::after{
content: "";
position: absolute;
top: .8rem;
left: .8rem;
width: 6rem;
height: 3rem;
background: url("./img/eng02.svg") 0 0 no-repeat;
background-size: auto 3rem;
}
#sect00 .mainArea .liBox:nth-child(1) a::after{
height: 3rem;
background: url("./img/eng01.svg") 0 0 no-repeat;
background-size: auto 3rem;
}
#sect00 .mainArea .liBox:nth-child(3) a::after{
background: url("./img/eng03.svg") 0 0 no-repeat;
background-size: auto 3rem;
}

#sect00 .mainArea .liBox .txtBox{
position: absolute;
bottom: 1rem;
left: 1rem;
line-height: 1.6;
font-size:1.3rem;
font-weight: 700;
color: #fff;
}
#sect00 .mainArea .liBox .fontL{
font-size:1.7rem;
}
#sect00 .mainArea .liBox .fontS{
font-size:1.2rem;
}


#sect00 .mainArea .liBox a:hover{
opacity: 1;
box-shadow: none;
}



#sect00 .spv{
z-index: 2;
margin: 2rem 0 0;
padding: 5rem 5% 0;
}
#sect00 .spv::before{
top: 0;
left: 0;
}
#sect00 .spv .mainArea{
padding: 0 0;
}
#sect00 .spv .imgArea{
top: 0;
}
#sect00 .spv p{
margin: 1.5rem 0;
}







/*------------
indexSect_SP
------------*/

.indexSect{
position: relative;
}
.indexSect::before{
}

.indexSect .areaInner{
margin: 0 5%;
}

.indexSect .sectTtlArea{
position: relative;
z-index: 1;
will-change: transform, opacity;
transform: translateZ(0); 
backface-visibility: hidden;
}


.indexSect .sectTtl{
position: relative;
z-index: 1;
font-size:2.3rem;
}
.indexSect .sectTtl .obiAnim{
position: relative;
display: inline-block;
margin: 0 0 .2rem;
padding: 5px 1rem 7px;
line-height: 1;
overflow: hidden;
}

.indexSect .sectTtl .obiAnim::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #ddd;
transition: all 0.5s ease-in-out;
transform-origin: right center;
}
.obi_out.is-show .obiAnim::before{
animation-name: bgOut;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
@keyframes bgOut{
  from {
    transform: scaleX(1) translateX(0);
  }
  to {
    transform: scaleX(0) translateX(0);
  }
}





.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arw{
position: relative;
display: inline;
padding: 0 3rem 0 0;
}
.indexSect .sectTtl a .arw::before{
content: "";
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 1.9rem;
height: 100%;
background: url("./img/arrow_sq.svg") 99% calc(100% - 5px) no-repeat;
background-size: 1.9rem auto;
transition: all .2s ease-in-out;
}

.indexSect .sectTtlArea p{
position: relative;
}


.indexSect .box2,
.indexSect .box3{
display: block;
padding: 0 0;
}
.indexSect .liBox{
}

.indexSect .box2 .liBox,
.indexSect .box3 .liBox{
width: auto;
margin: 0 0 20px;
}
.indexSect .box2 .liBox:nth-child(2n),
.indexSect .box3 .liBox:nth-child(3n){
margin: 0 0 20px;
}



/*------------
sect01_SP
------------*/
#sect01wrap{
margin: -5.2rem 0 0;
padding: 5.2rem 0 0;
}

#sect01{
margin: -1px 0 0;
background: #33b491;
padding: 10rem 0 0;
}
#sect01 .areaInner::before{
content: "";
position: absolute;
top: -7rem;
left: 0;
width: 100%;
height: 4.2rem;
background: url("./img/eng_intv2.svg") 0 0 no-repeat;
background-size: auto 4.2rem;
}

#sect01 .sectTtlArea{
margin: 0 0 1rem;
}
#sect01 .sectTtl{
width: auto;
float: none;
font-size:2.1rem;
}
#sect01 .sectTtl .obiAnim{
background: #122a72;
color: #fff;
}
#sect01 .sectTtlArea p{
width: auto;
float: none;
color: #fff;
}
#sect01 .sectTtlArea .txt_bold{
color: #ffee71;
}



#sect01 .ulBox1{
width: auto;
overflow: visible;
display: block;
padding: 3rem 0 4rem;
}
#sect01 .ulBox1 .wrap{
display: flex;
justify-content: flex-start;
width: auto;
padding: 0 0 0;
transform: translateZ(0); 
backface-visibility: hidden;
background-attachment: fixed;
}
#sect01 .ulBox1 .liBox{
float: none;
width: auto;
margin: 0 0;
transform: translateZ(0);
backface-visibility: hidden;
background-attachment: fixed;
}
#sect01 .ulBox1 .maindeco::before,
#sect01 .ulBox1 .maindeco::after,
#sect01 .ulBox1 .maindeco2::before,
#sect01 .ulBox1 .maindeco2::after{
border-color: #fff;
}
#sect01 .ulBox1 .liBox a{
width: 100%;
height: 32rem;
border: 1px solid #fff;
}
#sect01 .ulBox1 .liBox .nailImg{
position: absolute;
z-index: -1;
display: block;
width: calc(100% - 1px);
height: calc(100% - 1px);
overflow: hidden;
}
#sect01 .ulBox1 .liBox img{
height: 100%;
object-fit: cover;
}



#sect01 .ulBox1 .liBox h3{
position: absolute;
top: 2rem;
right: 2rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
text-orientation: upright;/*for FF*/
font-size:1.6rem;
color: #fff;
}


#sect01 .ulBox1 .liBox a:hover{
opacity: 1;
box-shadow:none;
}
#sect01 .ulBox1 .liBox a::before{
content: "";
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
width: 10rem;
height: 2.8rem;
background: url(./img/eng_more.png) 100% 0 no-repeat;
background-size: auto 2.8rem;
transition: all .2s ease-in-out;
opacity: 1;
}
#sect01 .ulBox1 .liBox a:hover::before{
opacity: 1;
}

#sect01 .swp-next, 
#sect01 .swp-prev{
top: 0;
width: 3rem;
height: 100%;
position: absolute;
z-index: 1;
cursor: pointer;
}
#sect01 .swp-next {
background: url("./img/arrow_sq_wt.svg") 0% 50% no-repeat;
background-size: 3rem auto;
left: auto;
right: 9vw;
}
#sect01 .swp-prev {
background: url("./img/arrow_sq_wt.svg") 0% 50% no-repeat;
background-size: 3rem auto;
left: calc(50% - 500px - 40px);
left: 9vw;
transform: scale(-1, 1);
}
#sect01 .swp-next.swiper-button-disabled,
#sect01 .swp-prev.swiper-button-disabled{
opacity: .5;
}



/* modal */

/*infoエリアをはじめは非表示*/
#sect01 .infoBox{
display: none;
position: relative;
}


/*モーダルの横幅を変更したい場合*/
.md_style01 .modaal-container{
max-width: 90vw;
width: 90vw;
background: none;
box-shadow: none;
}

.md_style01 .modaal-inner-wrapper {
padding: 80px 0;
}


.md_style01.modaal-wrapper .modaal-close {
position: fixed;
right: 1rem;
top: 1rem;
cursor: pointer;
opacity: 1;
width: 2.5rem;
height: 2.5rem;
background: url(./img/plus1_wt.svg) 0 0 no-repeat;
background-size: 2.5rem auto;
border-radius: 0;
transition: all .2s ease-in-out;
transform: rotate(45deg);
}
.md_style01 .modaal-close:after, .md_style01 .modaal-close:before {
width: 0;
height: 0;
background: none;
border: none;
}

.md_style01 .modaal-content-container{
padding: 0;
}
.md_style01 .modalInner{
position: relative;
}


/* custom */
/*.md_style01 .slick-list {
overflow: visible;
}
*/

.md_style01 .modaal-container{
position: relative;
margin: 0;
}
.md_style01 .modaal-container .liBox{
padding: 3.5rem 0 0;
position: relative;
}
.md_style01 .modaal-container .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3.5rem;
background: url("./img/intv_dk_wt.svg") 0 0 no-repeat;
background-size: 100% 3.5rem;
}
.md_style01 .modaal-container .liBox::after{
content: "";
position: absolute;
top: 1.0rem;
left: 0;
width: 100%;
height: 3.5rem;
background: url("./img/eng_intv01.svg") 50% 0 / auto 1.9rem no-repeat;
}
.md_style01 #sl402b::after{
background-image: url("./img/eng_intv02.svg");
}
.md_style01 #sl403b::after{
background-image: url("./img/eng_intv03.svg");
}
.md_style01 #sl404b::after{
background-image: url("./img/eng_intv04.svg");
}





.md_style01 .modaal-container .inner{
position: relative;
padding: 2rem 5%;
min-height: 0;
background: #fff;
}
.md_style01 .modaal-container .inner::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
}


.md_style01 .modaal-container .tags{margin: 0 0 0;font-size: 3vw;}
.md_style01 .modaal-container .tag{display: inline-block;margin: 0 1rem .7rem 0;padding: 5px 1rem 7px;border-radius:9999px;border: 1px solid #777;line-height: 1;text-align: center;font-weight: 700;color: #777;}

.md_style01 .modaal-container .catch0{
position: relative;
padding: 0 0;
margin: 2rem 0 2rem;
font-size:1.5rem;
font-weight: 700;
color: #122a72;
line-height: 1.3;
}
.md_style01 .modaal-container .catch0::before{
content: "";
position: absolute;
z-index: 1;
top: 12px;
left: -5%;
width: 110%;
height: 1px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
}
.md_style01 .modaal-container .catch0 span{
position: relative;
z-index: 2;
display: inline-block;
background: #fff;
padding: 0 1rem;
}


.md_style01 .modaal-container .catch{
line-height: 1;
font-size:2.0rem;
color: #fff;
}
.md_style01 .modaal-container .catch .txt_bold{
color: #ffee71;
}
.md_style01 .modaal-container .catch .obi{
display: inline-block;
margin: 0 0 1rem;
padding: 5px 1rem 7px;
background: #122a72;
}

.md_style01 .maindeco::before,
.md_style01 .maindeco::after{
border-color: #28997a;
}
.md_style01 .modaal-container .flame{
position: relative;
top: 0;
right: auto;
left: 10%;
width: 80%; 
height: 25rem;
margin: 0 0 4rem;
}
.md_style01 .modaal-container .flame .sttl{
position: absolute;
bottom: 1rem;
right: 1rem;
padding: 2px 1rem;
background: #122a72;
font-size:1.9rem;
line-height: 1;
color: #fff;
}
.md_style01 .modaal-container .flame img{
height: 25rem;
object-fit: cover;
}

.md_style01 .modaal-container .txtArea{
}
.md_style01 .modaal-container p{
margin: 0 0 2rem;
color: #122a72;
}
.md_style01 .modaal-container .btnArea{
position: relative;
top: 0;
right: auto;
left: 0;
width: auto; 
}
.md_style01 .modaal-container .btn-internal,
.md_style01 .modaal-container .btn-web{
width: 100%;
}

.md_style01 .modaal-container .btnNote{
position: relative;
padding: 0 0 1rem;
border-bottom: 1px solid #122a72;
line-height: 1.4;
font-weight: 700;
font-size:1.4rem;
text-align: center;
color: #122a72;
}
.md_style01 .modaal-container .btnNote:before,
.md_style01 .modaal-container .btnNote:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.md_style01 .modaal-container .btnNote:before {
border: solid 11px transparent;
border-top: solid 11px #122a72;
}
.md_style01 .modaal-container .btnNote:after {
border: solid 14px transparent;
border-top: solid 14px #fff;
margin-top: -5px;
}



/* slider */
#slider4b .slick-arrow:before{
content:""!important;
}
#slider4b .slick-prev, #slider4b .slick-next{
position: fixed;
z-index:2;
top: calc(50vh - 1.5rem);
width: 3rem;
height: 3rem;
background: url("./img/arrow_sq.svg") 0 0 no-repeat;
background-size: 3rem auto;
transform: scale(-1, 1);
}
#slider4b .slick-next {
background: url("./img/arrow_sq.svg") 0 0 no-repeat;
background-size: 3rem auto;
transform: scale(1, 1);
}
#slider4b .slick-prev{
left:0.5rem!important;
}
#slider4b .slick-next{
left:auto;
right:0.5rem!important;
}
#slider4b .slick-slide{
margin-left: 1rem!important;
margin-right: 1rem!important;
}





/*------------
sect02_SP
------------*/
#sect02{
padding: 20rem 0 4.5rem;
background: url(./img/pt_grid.png) 0 0 repeat;
background-size: 15px auto;
will-change: transform, opacity;
}

#sect02::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10rem;
background: url(./img/sct02_ccl1.svg) 0 0 no-repeat;
background-size: 100% 10rem;
will-change: transform, opacity;
transform: translateZ(0); 
backface-visibility: hidden;
}
#sect02::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10rem;
background: url(./img/sct02_ccl2.svg) 0 0 no-repeat;
background-size: 100% 10rem;
}




#sect02 .areaInner::before{
content: "";
position: absolute;
top: -13rem;
left: 0;
width: 100%;
height: 10rem;
background: url(./img/eng_sch_sp.svg) 50% 0 no-repeat;
background-size: auto 10rem;
}



#sect02 .sectTtl{
font-size:2.1rem;  
text-align: center;
}
#sect02 .sectTtl .obiAnim{
background: #d8d8d8;
}
#sect02 .sectTtl .obiAnim::before{
background: #28997a;
}
#sect02 .sectTtlArea p{
padding: 0 0 3rem;
}


#sect02 .flow{
position: relative;
display: flex;
flex-wrap: wrap;
padding: 2rem 0 0;
}
#sect02 .fBox{
position: relative;
width: 50%;
}
#sect02 .fBox h3{
margin: 0 0 0;
background: #33b491;
padding: 8px 1rem 10px;
font-size:1.7rem;
line-height: 1;
text-align: center;
color: #fff;
}
#sect02 .boxR h3{
background: #e85510;
}
#sect02 .fBox h3::before{
content: "";
position: absolute;
bottom: -1.2rem;
left: 0;
width: 100%;
height: 17px;
background: url(./img/tri_gr.svg) 50% 100% no-repeat;
background-size: 1.2rem auto;
}
#sect02 .boxR h3::before{
background-image: url(./img/tri_red.svg);
}

#sect02 .fBox h3::after{
content: "";
position: absolute;
bottom: auto;
top:-5rem;
left: 0;
width: 100%;
height: 5rem;
background: url(./img/sct02_ttlicon01.png) 50% 100% no-repeat;
background-size: 5rem auto;
}
#sect02 .boxR h3::after{
left: auto;
right: 0;
background-image: url(./img/sct02_ttlicon02.png);
}



#sect02 .fBox .ulBox{
padding: 3rem 0 2rem;
}
#sect02 .fBox .liBox{
margin: 0 .5rem 1.5rem 0;
}
#sect02 .fBox .liBox:nth-child(2){
margin-bottom: 5rem;
}
#sect02 .fBox .liBox::before{
content: "";
position: absolute;
top: 50%;
right: -.5rem;
width: .5rem;
height: 1px;
background: #28997a;
}
#sect02 .fBox .liBox a{
padding: 1rem 2.5rem;
background: url(./img/plus_sq_gr.svg) calc(100% - 1rem) 1.2rem no-repeat #fff;
background-size: 1.6rem auto;
border: 1px solid #28997a;
border-radius:3rem 0 0 0;
line-height: 1.3;
font-size:1.5rem;
font-weight: 700;
text-align: center;
color: #28997a;
}
#sect02 .boxL .liBox:nth-child(4) a{
background-position: calc(100% - 1rem) 2.2rem;
}

#sect02 .fBox .liBox a::after{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .boxL .liBox:nth-child(2) a::after{
background-image: url(./img/sct02_icon_a02.png);
}
#sect02 .boxL .liBox:nth-child(3) a::after{
background-image: url(./img/sct02_icon_a03.png);
}
#sect02 .boxL .liBox:nth-child(4) a::after{
background-image: url(./img/sct02_icon_a04.png);
}





#sect02 .boxR .liBox{
margin: 0 0 1.5rem .5rem;
}
#sect02 .boxR .liBox a{
background: url(./img/plus_sq_red.svg) 1rem 1.2rem no-repeat #fff;
background-size: 1.6rem auto;
border: 1px solid #e85510;
border-radius:0 3rem 0 0;
color: #e85510;
}
#sect02 .boxR .liBox::before{
right: auto;
left: -.5rem;
background: #e85510;
}

#sect02 .boxR .liBox a::after{
left: auto;
right: 2.5rem;
background: url(./img/sct02_icon_b01.png) 0 12px no-repeat;
background-size: 7rem auto;
}
#sect02 .boxR .liBox:nth-child(2) a::after{
background-image: url(./img/sct02_icon_b02.png);
}
#sect02 .boxR .liBox:nth-child(3) a::after{
background-image: url(./img/sct02_icon_b03.png);
}
#sect02 .boxR .liBox:nth-child(4) a::after{
background-image: url(./img/sct02_icon_b04.png);
}


#sect02 .fBox .typeB span{
position: relative;
display: block;
}
#sect02 .fBox .typeB span::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect02 .fBox .typeB span::after{
width: 0;
height: 0;
background: none;
border: none;
}


#sect02 .fBox .typeB a{
padding: 1rem 2.5rem 6.5rem;
background-color: #d2f8ee;
}
#sect02 .fBox .typeB a::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 2px);
height: 5.5rem;
background: url(./img/sct02_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
border: 1px solid #28997a;
border-top: none;
}



#sect02 .boxR .typeB span::before{
left: auto;
right: -30px;
background: #e85510;
}
#sect02 .boxR .typeB span::after{
left: auto;
right: -3.7rem;
background-image: url(./img/sct02_ck02.png);
}
#sect02 .boxR .typeB a::before{
background-image: url(./img/sct02_ph02.jpg);
border: 1px solid #e85510;
border-top: none;
}



#sect02 .boxL .ulBox{
border-right: 1px solid #122a72;
}

#sect02 .ulBox2{
position: absolute;
top: 4rem;
left: calc(50% - 1.75rem);
}
#sect02 .ulBox2 .liBox{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
background: #fff;
border: 1px solid #122a72;
border-radius:50%;
font-size:1.2rem;
font-weight: 700;
color: #122a72;
text-align: center;
}
#sect02 .ulBox2 .liBox span{
position: relative;
}
#sect02 .ulBox2 .liBox:nth-child(2){
top:15rem;
}
#sect02 .ulBox2 .liBox:nth-child(2)::before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background: #e6e9f3;
border-radius: 0 100% 100% 0% / 50%;
}

#sect02 .ulBox2 .liBox:nth-child(3){
background: #e6e9f3;
top:37rem;
}


#sect02 .btn-link{
text-align: center;
}
#sect02 .btn-link a{
background-color: #fff;
}


/* modal */

/*infoエリアをはじめは非表示*/
#sect02 .infoBox{
display: none;
position: relative;
}


/*モーダルの横幅を変更したい場合*/
.md_style02a .modaal-container,
.md_style02b .modaal-container{
max-width: none;
width: auto;
background: #fff;
box-shadow: none;
border: 1px solid #28997a;
border-radius:3rem 0 0 0;
}
.md_style02b .modaal-container{
border: 1px solid #e85510;
}


.md_style02a.modaal-wrapper .modaal-close,
.md_style02b.modaal-wrapper .modaal-close{
position:absolute;
right: 1.5rem;
top: 2.5rem;
cursor: pointer;
opacity: 1;
width: 2.3rem;
height: 2.3rem;
background: url("./img/close_sq_gr.svg") 0 0 no-repeat;
background-size: 2.3rem auto;
border-radius: 0;
transition: all .2s ease-in-out;
}
.md_style02b.modaal-wrapper .modaal-close{
background-image: url("./img/close_sq_red.svg");
}


.md_style02a .modaal-close:after,
.md_style02a .modaal-close:before,
.md_style02b .modaal-close:after,
.md_style02b .modaal-close:before{
width: 0;
height: 0;
background: none;
border: none;
}
.md_style02a .modaal-content-container,
.md_style02b .modaal-content-container{
padding: 0;
}


/* ボックス内の設定（modal02Box） */
.modal02Box{
width: 85vw;
color: #122a72;
}
.modal02Box .sttl{
padding: 20px 5rem;
border-bottom: 1px solid #28997a;
font-size:2.0rem;
font-weight: 700;
text-align: center;
color: #28997a;
}
.boxB .sttl{
border-bottom: 1px solid #e85510;
color: #e85510;
}
.modal02Box .sttl::after{content: "";position: absolute;top: 0;left: 1.8rem;width: 5rem;height: 100%;background: url(./img/sct02_icon_a02.png) 0 50% no-repeat;background-size: 5rem auto;}
#md022a .sttl::after{background-image: url(./img/sct02_icon_a01.png);}
#md023a .sttl::after{
background-image: url(./img/sct02_icon_a03.png);
}
#md024a .sttl::after{
background-image: url(./img/sct02_icon_a04.png);
}

#md021b .sttl::after{
background-image: url(./img/sct02_icon_b01.png);
}
#md022b .sttl::after{
background-image: url(./img/sct02_icon_b02.png);
}
#md023b .sttl::after{
background-image: url(./img/sct02_icon_b03.png);
}
#md024b .sttl::after{
background-image: url(./img/sct02_icon_b04.png);
}


.modal02Box .txtArea{
position: relative;
padding: 1rem 5% 3rem;
}


/* ボックス（大）の設定（boxLg） */
.boxLg{
width: 85vw;
padding: 0 0 0;
}
.boxLg::before,
.boxLg.boxB::before{
width: 0;
height: 0;
background: none;
border: none;
}
.boxLg .sttl{
margin: 0;
}
.boxLg .txtArea{
padding-top: 15rem;
}
.boxLg .txtArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 13rem;
background: url(./img/sct02_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
}
.boxLg.boxB .txtArea::before{
background: url(./img/sct02_ph02.jpg) 60% 50% no-repeat;
background-size: cover;
}

.boxLg .mini{
margin: 0 0 2rem;
}
.boxLg h4{
display: inline-block;
margin: 0 0 1rem;
padding: 2px 1rem 3px;
border: 1px solid #28997a;
line-height: 1.3;
font-size:1.3rem;
color: #28997a;
}
.boxLg.boxB h4{
border: 1px solid #e85510;
color: #e85510;
}
.boxLg h4::before{
content: "";
position: absolute;
top: 50%;
left: -2rem;
width: 2rem;
height: 1px;
background: #28997a;
}
.boxLg.boxB h4::before{
background: #e85510;
}

.boxLg .catch{
font-size:1.9rem;
color: #e85510;
}

.boxLg .btn-internal{
width: 95%;
margin-bottom: 10px;
justify-content: center;
}
.boxLg .btn-internal a{
padding: 1.2rem 18% 1.4rem;
}







/*------------
sect03_SP
------------*/
#sect03{
padding: 0 0 5rem;
background: url(./img/pt.jpg) 0 0 repeat;
background-size: 128px auto;
}



/*------------
sect031_SP
------------*/

#sect031{
padding: 32rem 0 0;
}
#sect031::before{
content: "";
position: absolute;
top: 3.5rem;
left: 0;
width: 100%;
height: 3.5rem;
background: url("./img/eng_sps.svg") 50% 0 no-repeat;
background-size: auto 3.5rem;
}
#sect031 .areaInner::before{content: "";position: absolute;top: -23rem;left: -5%;width: 110%;height: 35rem;background: url(./img/sct031_bg1_sp.png) 50% 0 no-repeat;background-size: auto 35rem;}
#sect031 .areaInner::after{
width: 0;
height: 0;
background: none;
border: none;
}




#sect031 .sectTtlArea{width: auto;margin: 0 0 6rem;padding: 10.5rem 0 0;}
#sect031 .sectTtlArea::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect031 .sectTtlArea::after{
width: 0;
height: 0;
background: none;
border: none;
}


#sect031 .sectTtl{
margin: 0 0 1.5rem;
font-size:2.0rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
#sect031 .sectTtl .obiAnim{
background: #28997a;
color: #fff;
}
#sect031 .sectTtl .txt_bold{
color: #ffee71;
}
#sect031 h2{
margin: 0 0 2rem;
text-align: center;
font-size:2.4rem;
}
#sect031 h2 .fontS{
display: block;
font-size:1.4rem;
color: #e85510;
}
#sect031 .sectTtlArea .btn-internal,
#sect031 .sectTtlArea .btn-web{
width: 90%;
}

#sect031 .cntArea{
position: relative;
padding: 3rem 0 0;
}
#sect031 .cntArea::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 7.5rem;
height: 1.2rem;
background: url(./img/eng_cmp.svg) 0 0 no-repeat;
background-size: auto 1.2rem;
}
#sect031 .cntArea::after{
content: "";
position: absolute;
z-index: 1;
top: 6px;
right: 0;
width: calc(100% - 8rem);
height: 1px;
background: #28997a;
}


#sect031 .cntArea .ttlArea{
width: auto;
float: none;
}
#sect031 .cntArea .ulBox{
width: auto;
float: none;
}


#sect031 .cntArea .catch{
margin: 0 0 2rem;
font-size:1.4rem;
color: #28997a;
text-align: center;
}
#sect031 .cntArea h3{
margin: 0 auto 3rem;
line-height: 1.3;
font-size:2.4rem;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
}
#sect031 .cntArea h3 a{
min-height: 18rem;
padding: 0 0 3.5rem;
background: url("./img/arrow_sq.svg") 100% calc(100% - .5rem) no-repeat;
background-size: 1.5rem auto;
border-bottom: 1px solid #122a72;
}
#sect031 .cntArea h3 a::before{
content: "";
position: absolute;
bottom: 1rem;
left: 0;
width: 5rem;
height: .9rem;
background: url(./img/eng_more_bl.svg) 0 100% no-repeat;
background-size: auto .9rem;
}



#sect031 .cntArea .liBox{
width: auto;
height: 11.5rem;
float: none;
margin: 0 0 2rem; 
}
#sect031 .cntArea .liBox:nth-child(1){
width: auto;
float: none;
margin: 0 0 2rem; 
}
#sect031 .cntArea .liBox:nth-child(3){
float: none;
}

#sect031 .cntArea .liBox h4{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
transition: all .2s ease-in-out;
}
#sect031 .cntArea .liBox a{
position: relative;
width: 100%;
height: 100%;
}
#sect031 .cntArea .liBox h4::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct031_ph01.jpg) 50% 50% no-repeat;
background-size: cover;
transition: all .2s ease-in-out;
}
#sect031 .cntArea .liBox:nth-child(2) h4::before{
background: url(./img/sct031_ph02.jpg) 0 50% no-repeat;
background-size: cover;
}
#sect031 .cntArea .liBox:nth-child(3) h4::before{
background: url(./img/sct031_ph03.jpg) 10% 50% no-repeat;
background-size: cover;
}

#sect031 .cntArea .liBox h4:hover{
box-shadow:none;
}
#sect031 .cntArea .liBox h4:hover::before{
transform: scale(1);
}
#sect031 .cntArea .liBox a:hover{
opacity: 1;
}





#sect031 .cntArea .liBox a::before{
content: "";
position: absolute;
bottom: 1rem;
right: 1rem;
width: 4.5rem;
height: 2rem;
background: url("./img/eng_more.png") 100% 100% no-repeat;
background-size: 4.5rem auto;
}
#sect031 .cntArea .liBox a::after{
content: "";
position: absolute;
top: 1rem;
left: 1rem;
width: 10rem;
height: 2.2rem;
background: url("./img/eng02.svg") 0 0 no-repeat;
background-size: auto 2.2rem;
}
#sect031 .cntArea .liBox:nth-child(1) a::after{
height: 2.2rem;
background: url("./img/eng01.svg") 0 0 no-repeat;
background-size: auto 2.2rem;
}
#sect031 .cntArea .liBox:nth-child(3) a::after{
background: url("./img/eng03.svg") 0 0 no-repeat;
background-size: auto 2.2rem;
}

#sect031 .cntArea .liBox .txtBox{
position: absolute;
bottom: 3rem;
left: auto;
right: 1rem;
line-height: 1.6;
font-size:1.6rem;
font-weight: 700;
color: #fff;
text-align: right;
}
#sect031 .cntArea .liBox:nth-child(1) .txtBox{
bottom: 3rem;
left: auto;
right: 1rem;
text-align: right;
}



/*------------
sect032_SP
------------*/

#sect032{
padding: 2rem 0 2rem;
}
#sect032 .areaInner{
border-top: 1px solid #28997a;
}
#sect032 .areaInner::before{
content: "";
position: absolute;
top: 2rem;
left: 0;
width: 100%;
height: 6rem;
background: url(./img/eng_3ess_sp.svg) 50% 0 no-repeat;
background-size: auto 6rem;
}

#sect032 h3{
z-index: 2;
margin: 5rem auto -10rem;
writing-mode: vertical-rl;
font-family: 'Noto Sans JP vt', sans-serif;
font-size:2.4rem;
line-height: 5rem;
}
#sect032 h3 .obi{
background: #28997a;
padding: 1rem 0;
color: #fff;
}
#sect032 h3 .fontS{
font-size:1.6rem;
}
#sect032 h3 .fontL{
font-size:4.0rem;
}
#sect032 h3 .txt_bold{
color: #ffee71;
}


#sect032 .mainAreaWrap{
position: relative;
}
#sect032 .mainAreaWrap::before{
content: "";
position: absolute;
top: 0;
right: -5rem;
width: 5rem;
height: 100%;
background: url(./img/sct032_dk.svg) 0 0 no-repeat;
background-size: 5rem auto;
}
#sect032 .mainAreaWrap::after{
content: "";
position: absolute;
top: 0;
left: -100vw;
width: 100vw;
height: 100%;
background: #fff;
}

#sect032 .mainArea{
position: relative;
padding: 12rem 0 3rem;
background: #fff;
}
#sect032 .mainArea::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect032 .mainArea::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect032 .mainArea .areaR{
width: auto;
margin: 0 0 0;
}
#sect032 .mainArea h4{
margin: 0 0 4rem;
font-size:1.9rem;
text-align: center;
}
#sect032 .mainArea .imgArea{
position: relative;
top: 0;
left: 25%;
width: 50%;
}
#sect032 .mainArea .imgArea .cap{
margin: 1rem 0 0;
text-align: center;
font-size:1.1rem;
font-weight: 700;
line-height: 1.6;
}
#sect032 .mainArea .imgArea .cap .fontL{
font-size:1.5rem;
}


#sect032 .mainArea .grBox{
margin: 4rem 1rem 4rem;
}
#sect032 .mainArea .grBox .inner{
background: #f8f9fa;
}
#sect032 .mainArea .grBox .sttl{
padding: 10px 1rem 14px;
background: url(./img/dash.png) 0 100% repeat-x;
background-size: auto 1px;
font-size:1.8rem;
text-align: center;
}
#sect032 .mainArea .grBox .ulBox{
padding: 0 0 2rem;
text-align: center;
}
#sect032 .mainArea .grBox .liBox{display: inline-block;transform: rotate(0deg);width: 9.0rem;height: 6rem;margin: 0 .2rem;text-align: center;font-size:1.6rem;font-weight: 700;}
#sect032 .mainArea .grBox .liBox span{height: 100%;display: flex;align-items: center;justify-content: center;background: url(./img/sct032_deco.svg) 0 0 no-repeat;background-size: 9rem auto;}

#sect032 .btn-internal,
#sect032 .btn-web{
width: 90%;
}
#sect032 .btn-internal a::before{
background-image: url(./img/arrow_sq_down.svg);
}



/*------------
sect033_SP
------------*/

#sect033{
padding: 6rem 0 8rem;
}

#sect033 .sectTtlArea{
display: block;
border-bottom: 1px solid #28997a;
}
#sect033 .sectTtlArea::before{
content: "";
position: absolute;
top: 1.2rem;
left: 1.2rem;
width: 100%;
height: 3rem;
background: url(./img/eng_rec.svg) 0 0 no-repeat;
background-size: auto 3rem;
}

#sect033 .boxL{
position: relative;
width: auto;
padding: 5rem 5% 3rem;
}
#sect033 .boxL h3{
font-size:2.0rem;
color: #28997a;
text-align: center;
}
#sect033 .boxL h3 .txt_bold{
color: #122a72;
}
#sect033 .boxL .caption{
text-align: center;
font-size:1.2rem;
}

#sect033 .boxR{
width: auto;
border-left: none;
border-top: 1px solid #28997a;
padding: 1rem 5% 4rem;
}
#sect033 .boxR dl{
display: table;
width: 100%;
}
#sect033 .boxR dt{
display: table-cell;
width: 25%;
padding: 1.3rem .5rem 1.5rem;
border-bottom: 1px solid #122a72;
font-size:1.4rem;
}
#sect033 .boxR dd{
display: table-cell;
padding: 1.3rem 1rem 1.5rem;
font-weight: 700;
border-bottom: 1px solid #d8d8d8;
font-size:1.4rem;
}


#sect033 .cntArea{
display: block;
padding: 2.5rem 5% 0;
}
#sect033 .cntArea .areaBox{
width: auto;
margin: 0 0 3rem;
}
#sect033 .cntArea .sttl{
margin: 0 0 .5rem;
width: 8.5rem;
background: #33b491;
padding: 3px 1rem 4px;
color: #fff;
text-align: center;
font-size:1.6rem;
}
#sect033 .cntArea .areaR .sttl{
background: #e85510;
}
#sect033 .cntArea dl{
display: table;
width: 100%;
}
#sect033 .cntArea dt{
display: table-cell;
width: 25%;
padding: 1.3rem .5rem 1.5rem;
border-bottom: 1px solid #28997a;
color: #28997a;
font-size:1.4rem;
}
#sect033 .cntArea .areaR dt{
border-bottom: 1px solid #e85510;
color: #e85510;
}
#sect033 .cntArea dd{
display: table-cell;
padding: 1.3rem 1rem 1.5rem;
border-bottom: 1px solid #d8d8d8;
font-size:1.4rem;
}
#sect033 .cntArea p{
padding: .7rem .5rem 0;
font-size:1.2rem;
color: #999999;
}


/*------------
sect034_SP
------------*/
#sect034wrap{
margin: -5.2rem 0 0;
padding: 5.2rem 0 0;
}

#sect034{
}
#sect034 .areaInner{
margin: 0;
}
#sect034 .entry{
margin: 0;
}
#sect034 .entryBox .inner {
padding: 6rem 5% 2.5rem;
}
#sect034 .entryBox{
background-position: 5% 2.5rem;
}
#sect034 .entryBox .inner{
background-position: 95% 2.5rem;
}

#sect034 .entryBox .btnArea {
justify-content: space-around;
}
#sect034 .entryBox .btn-internal a::before{
background-image: url(./img/arrow_sq_up.svg);
}



/*------------
sect04_SP
------------*/
#sect04{
padding: 12.5rem 0 0;
}
#sect04 .areaInner::before{
content: "";
position: absolute;
top: -7rem;
left: 0;
width: 100%;
height: 4.3rem;
background: url("./img/eng_know.svg") 0 0 no-repeat;
background-size: auto 4.3rem;
}

#sect04 .sectTtlArea{
margin: 0 0 4rem;
}
#sect04 .sectTtl{
width: auto;
float: none;
}
#sect04 .sectTtl .obiAnim{
background: #28997a;
color: #fff;
}
#sect04 .sectTtl a .arw::before {
background-image: url(./img/arrow_sq_wt.svg);
}

#sect04 .sectTtlArea p{
width: auto;
float: none;
}
#sect04 .sectTtlArea .txt_bold{
color: #ffee71;
}


#sect04 .ulBox{
display: block;
}
#sect04 .liBox{
width: auto;
margin: 0 0 4rem;
}
#sect04 .liBox a{
background: #fff;
border: 1px solid #28997a;
border-radius:30px 0 0 0;
}
#sect04 .liBox a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid #28997a;
}
#sect04 .liBox a::after{
content: "";
position: absolute;
bottom: 2rem;
right: 5%;
width: 6.5rem;
height: 1.8rem;
background: url("./img/eng_more_gr.png") 100% 100% no-repeat;
background-size: auto 1.8rem;
}
#sect04 .liBox a:hover{
box-shadow:15px 15px 0 #122a72;
opacity: 1;
}


#sect04 .liBox h3{
display: flex;
align-items: center;
padding: 2rem 5% 2rem;
font-size:2.0rem;
color: #28997a;
}
#sect04 .liBox h3 .fontS{
display: block;
font-size:1.4rem;
}
#sect04 .liBox .flame{
width: 100%;
overflow: hidden;
}
#sect04 .liBox .flame img{
width: 100%;
object-fit: cover;
}
#sect04 .liBox p{
padding: 0 5% 3rem;
}


#sect04 .liBox a:hover img{
transform: scale(1.0);
}




/*  End_SP */

}