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

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


/*------------
index_PC
------------*/
body{
position: relative;
}
body::before{
}

.forTab{
position: relative;
z-index: 1;
}
.index{
}
.eng{
font-size:1.2rem;
}


.fadeIn_up {
  opacity: 0;
  transform: translate(0, 20%);
  transition: .8s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}




/*--------------------------------------
　Header_PC
---------------------------------------*/
.headers{
background: url("./img/mainvis.jpg") 0 0 no-repeat;
background-size: cover;
}
#header{
position: relative;
z-index: 1;
height: 128px;
padding: 14px 20px 0 50px;
background: none;
font-size:1.1rem;
color: #000;
}
#header .note{
text-align: right;
}
#header .logo{
position: absolute;
top: 26px;
}
#header .siteName{
font-weight: 400;
}




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

#contents{
overflow-x: hidden;
}




/*------------
mainVis_PC
------------*/
.visArea{
  position: relative;
  margin: 0 0 100px;
  padding: 0 0 50px;
  height: 790px;
  overflow: hidden;
  }
  .visArea .inner0{position: relative;z-index: 4;margin: 0 50px;padding: 70px 0 50px 11%;}
  .visArea::before{
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50px;
  width: calc(100% - 100px);
  height: calc(100% - 50px);
  background: rgba(255,255,255,.70);
  }
  .visArea .inner{
  position: relative;
  z-index: 1;
  }
  .visArea .subTtl{
  padding: 0 0 290px;
  font-size:2.6rem;
  font-weight: 700;
  line-height: 1.4;
  }
  .visArea .subTtl::before{
  content: "";
  position: absolute;
  top: 80px;
  left: 0;
  width: 368px;
  height: 230px;
  background: url(./img/eng_car.svg) 0 0 no-repeat;
  background-size: 368px auto;
  }
  .visArea .subTtl::after{
  content: "";
  position: absolute;
  top: 163px;
  /* bottom: -50px; */
  left: 350px;
  width: 270px;
  height: 170px;
  background: url(./img/eng_app.svg) 0 0 no-repeat;
  background-size: 270px auto;
  }
  .visArea .eng{
  margin: 0 0 40px;
  }
  .visArea p{
  position: relative;
  margin: 0 0 20px;
  font-weight: 700;
  }
  
  #keyArea{
  position: absolute;
  }
  
  
  .p-top-mv{
  position: absolute;
  z-index: 2;
  height: 790px;
  }
  
  .p-top-mv .p-top-mv__wrap {
  overflow: visible;
  }
  
  
  .p-top-mv .p-top-mv__body {
  position: absolute;
  
  left:1200px!important;
  right: auto;
  
  width: 795px;
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  }
  .p-top-mv .p-top-mv__body .key_tile{
  position: relative;
  width: 225px;
  height: 300px;
  margin-bottom: 34px;
  }
  .p-top-mv .p-top-mv__body .key_tile::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  }
  
  .rail-left .key_tile:nth-child(4n+1){/* box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0; */}
  .rail-left .key_tile:nth-child(4n+2)::before{top: -26px;left: -14px;/* border: 1px solid #000; */}
  .rail-left .key_tile:nth-child(4n+3)::before{bottom: -14px;right: -14px;/* border: 1px solid #000; */}
  .rail-left .key_tile:nth-child(4n){/* box-shadow: rgba(0, 0, 0, 1.0) -14px -14px 0 0; */}
  
  
  .rail-right .key_tile:nth-child(4n+1)::before{top: -14px;left: -14px;/* border: 1px solid #000; */}
  .rail-right .key_tile:nth-child(4n+2){/* box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0; */}
  .rail-right .key_tile:nth-child(4n+3){/* box-shadow: rgba(0, 0, 0, 1.0) -14px 14px 0 0; */}
  .rail-right .key_tile:nth-child(4n){/* box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0; */}
  
  


/*--------------------------------------
　fixHead2_PC
---------------------------------------*/
.fixHead2{
position: fixed;
z-index: 100;
top:0;
width: 100%;
height: auto;
padding: 10px 0 22px;
background: #fff;
border-bottom: 1px solid #000;
transition: .3s;
display: flex;
justify-content :flex-end;
min-width: 1330px;
/*デフォルトで非表示にする*/
opacity: 0;
visibility: hidden;
}
/*このクラスが付与されると表示する*/
.fixHead2.active{
opacity: 1;
visibility: visible;
}
/*このクラスが付与されると停止する*/
.fixHead2.absolute{
/*position: absolute;
z-index: 10000;
top: -300px;
bottom: auto;
opacity: 0;*/
}

.fixHead2 .logo{
}
.fixHead2 .logoImg{
position: absolute;
width: 140px;
margin: 10px 0 0;
left: 20px;
}

.fixHead2 .areaR{
display: flex;
align-items: flex-start;
margin: 0 26px 0 170px;
}
.fixHead2 .navL{
display: flex;
margin: 36px 0 0;
text-align: center;
line-height: 1.2;
}
.fixHead2 .navL a{
position: relative;
display: flex;
align-items: center;
padding: 0 1.5vw;
font-size:1.4rem;
font-weight: 700;
}
.fixHead2 .navL a::before{
content: "";
position: absolute;
top: calc(50% - 15px);
left: 0;
width: 1px;
height: 30px;
background: #b2b2b2;
}


.fixHead2 .navR{
position: relative;
display: flex;
margin: 7px 20px 0 0;
line-height: 1.2;
}
.fixHead2 .navR a{
font-size:1.4rem;
font-weight: 700;
}
.fixHead2 .navR .sttl{
position: absolute;
width: 100%;
padding: 1px 10px 2px;
background: #f4f4f4;
font-size:1.3rem;
text-align: center;
}
.fixHead2 .navR .ulBox{
display: flex;
flex-wrap: wrap;
width: 40vw;
padding: 36px 0 0;
}
.fixHead2 .navR .liBox{
position: relative;
display: flex;
width: 25%;
min-height: 35px;
justify-content: center;
}
.fixHead2 .navR .liBox::before{
content: "";
position: absolute;
top: calc(50% - 15px);
right: 0;
width: 1px;
height: 30px;
background: #b2b2b2;
}
.fixHead2 .navR .liBox:first-child::after{
content: "";
position: absolute;
top: calc(50% - 15px);
left: 0;
width: 1px;
height: 30px;
background: #b2b2b2;
}


.fixHead2 .navR .liBox a{
display: flex;
align-items: center;
}
.fixHead2 a span{
position: relative;
}
.fixHead2 .navL a:hover,
.fixHead2 .navR a:hover{
opacity: 1;
}
.fixHead2 .navR a:hover span::before{
content: "";
position: absolute;
bottom: -14px;
left: 0;
width: 100%;
height: 2px;
background: #ec6b2e;
}
.fixHead2 .navL a:hover span::before{
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: #ec6b2e;
}

.fixHead2 .btn-web {
position: relative;
width: 290px;
margin: 0 0 0 0!important;
top:7px;
right: 0;
}



/*------------
mokuji_PC
------------*/
.mokuji{
width: 760px;
margin: 0 auto 200px;
}
.mokuji li a:last-child {
padding: 6px 20px 8px 0;
background: url("./img/arrow_bk_down.svg") calc(100% - 1px) 50% no-repeat;
background-size: auto 24px;
}
.mokuji .fontCol{
margin: 0 8px 0 0;
padding: 0 2px 1px;
background: #a9a17d;
color: #fff;
line-height: 1;
}




/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
margin: 0 0 200px;
}

.indexSect .headArea{
position: relative;
}

.engL{
position: relative;
z-index: 1;
padding: 0 0 5px;
border-bottom: 2px solid #000;
line-height: 1;
}
.engL::before{
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -100vw;
width: 100vw;
height: 2px;
background: #000;
}
.engL img{
display: inline-block;
}

.TextRandomAnime span,
.TextRandomAnime2 span{
opacity: .5;
}
.TextRandomAnime.appearRandomtext span,
.TextRandomAnime2.appearRandomtext2 span{ 
animation:text_randomanime_on .25s ease-out forwards;
}
/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
0% {opacity:.5;}
50% {
opacity:.5;
filter: invert(60%) sepia(80%) saturate(6428%) hue-rotate(1deg) brightness(95%) contrast(102%);
color: #ec6b2e;
}
90% {
opacity:1;
filter: invert(60%) sepia(80%) saturate(6428%) hue-rotate(1deg) brightness(95%) contrast(102%);
color: #ec6b2e;
}
100% {opacity:1;}
}

.TextRandomAnime.appearRandomtext span:nth-child(2n),
.TextRandomAnime2.appearRandomtext2 span:nth-child(2n){
animation-delay: .2s;/* spanのついた2の倍数の文字列の変化を0.2秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1),
.TextRandomAnime2.appearRandomtext2 span:nth-child(3n+1){
animation-delay: .1s;/* spanのついた3の倍数＋1の文字列の変化を0.1秒遅らせる*/
}


.sectEng{
margin: 15px 0 20px;
}
.sectTtl{z-index: 1;margin: 0 0 100px;padding: 40px 0 0;font-size:4.6rem;line-height: 1.7;}
.sectTtl .fontS{
font-size:3.4rem;
}
.sectTtl a{
position: relative;
display: inline-block;
padding: 0 45px 0 0;
}
.sectTtl a::after{
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/arrow_bk.svg) 99% calc(50% + 2px) no-repeat;
background-size: 30px auto;
}

.indexSect .intro{
}



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

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


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

.indexSect .box3 .liBox{
width: calc((100% - 60px) / 3);
margin: 0 30px 30px 0;
}
.indexSect .box3 .liBox:nth-child(3n){
margin: 0 0 30px 0;
}

.indexSect .box4 .liBox{
width: calc((100% - 60px) / 4);
margin: 0 20px 20px 0;
}
.indexSect .box4 .liBox:nth-child(4n){
margin: 0 0 20px 0;
}




/*------------
sect01_PC
------------*/
#sect01 {
}

#sect01 .headArea::before{
content: "";
position: absolute;
z-index: 2;
top: -100px;
left: calc(50% + 30px);
width: 610px;
height: 374px;
background: url(./img/sct01_ph01.jpg) 0 0 no-repeat;
}
#sect01 .headArea::after{
content: "";
position: absolute;
z-index: 3;
top: 65px;
left: calc(50% + 450px);
width: 350px;
height: 500px;
background: url(./img/sct01_ph02.jpg) 0 0 no-repeat;
}
#sect01 .sectTtl{
width: 50%;
}
#sect01 h3{
z-index: 5;
width: 400px;
margin: 0 auto -40px;
padding: 8px 10px 24px;
background: #000;
font-size:2.0rem;
color: #fff;
text-align: center;
line-height: 1.1;
}
#sect01 h3 .fontL{
position: relative;
top: 5px;
font-size:4.0rem;
}

#sect01 .bdBox{
position: relative;
z-index: 4;
padding: 110px 50px 50px;
border: 1px solid #000;
}
#sect01 .bdBox .ulBox{
padding: 0 20px 50px;
}
#sect01 .bdBox .liBox{
width: calc((100% - 60px) / 2);
margin: 0 60px 70px 0;
transition: all .2s ease-in-out;
}
#sect01 .bdBox .liBox:nth-child(2n){
margin: 0 0 70px 0;
}
#sect01 .liBox:hover{
opacity: .5;
}
#sect01 .liBox h4{
display: flex;
align-items: center;
margin: 0;
padding: 25px 50px 35px 30px;
background: url(./img/plus.svg) calc(100% - 24px) 50% no-repeat rgba(240,240,240,.90);
background-size: 17px auto;
font-size:2.0rem;
line-height: 1.9;
cursor: pointer;
}
#sect01 .liBox h4.open{
background: url(./img/minus.svg) calc(100% - 24px) 50% no-repeat rgba(240,240,240,.90);
background-size: 17px auto;
}

#sect01 .liBox h4::before{
content: "";
position: absolute;
top: -24px;
left: -20px;
width: 60px;
height: 41px;
background: url("./img/sct01_num01.svg") 0 0 no-repeat;
background-size: auto 41px;
mix-blend-mode: multiply;
}
#sect01 .liBox:nth-child(2) h4::before{
background: url("./img/sct01_num02.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(3) h4::before{
background: url("./img/sct01_num03.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(4) h4::before{
background: url("./img/sct01_num04.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(5) h4::before{
background: url("./img/sct01_num05.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(6) h4::before{
background: url("./img/sct01_num06.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(7) h4::before{
background: url("./img/sct01_num07.svg") 0 0 no-repeat;
background-size: auto 41px;
}
#sect01 .liBox:nth-child(1),#sect01 .liBox:nth-child(2){z-index: 5;}
#sect01 .liBox:nth-child(3),#sect01 .liBox:nth-child(4){z-index: 4;}
#sect01 .liBox:nth-child(5),#sect01 .liBox:nth-child(6){z-index: 3;}
#sect01 .liBox:nth-child(7){z-index: 2;}

#sect01 .liBox h4::after{
content: "";
position: absolute;
bottom: 20px;
left: -20px;
width: 100%;
height: 1px;
background: #000;
}


#sect01 .liBox h4 .txt_bold{
color: #807d65;
}
#sect01 .liBox .accChild{
/*position: absolute;*/
margin: 0;
padding: 0 30px 20px;
background: rgba(240,240,240,.90);
}

#sect01 .botArea{
position: relative;
}
#sect01 .botArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 2px;
height: 28px;
background: #fff;
}
#sect01 .botArea::after{
content: "";
position: absolute;
top: -73px;
left: 50%;
width: 2px;
height: 73px;
background: #000;
}

#sect01 .botArea a:hover{
opacity: .8;
}
#sect01 .botArea .inner{
position: relative;
height: 234px;
padding: 40px 0 0;
background: url("./img/sct01_bot.jpg") 0 0 no-repeat;
text-align: center;
color: #fff;
}
#sect01 .botArea .inner::before{
content: "";
position: absolute;
top: -30px;
left: -25px;
width: 370px;
height: 150px;
background: url("./img/sct01_cj.svg") 0 0 no-repeat;
background-size: 370px auto;
}

#sect01 .botArea .sttl{
font-size:1.8rem;
}
#sect01 .botArea .btn-internal div{
position: relative;
display: inline-block!important;
width: 440px;
padding: 15px 75px 17px;
background: #a9a17d;
box-shadow: rgba(204, 204, 204, 1.0) 6px 6px 0 0;
text-align: center;
line-height: 1.5;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
text-decoration: none;
}
#sect01 .botArea .btn-internal div::before {
content: "";
position: absolute;
top: auto;
bottom: 14px;
right: 20px;
width: 45px;
height: 42px;
background: url(./img/sct01_ck.svg) 99% 0 no-repeat;
background-size: 45px auto;
}



/*------------
sect02_PC
------------*/
#sect02 {
}
#sect02::before{
content: "";
position: absolute;
z-index: -1;
top: 70px;
left: calc(50% - 375px);
width: calc(50% + 375px);
height: 340px;
background: #f4f4f4;
}
#sect02 .topArea{
padding: 0 50px 120px;
}
#sect02 .imgArea{
width: 480px;
float: left;
margin: 0 50px 0 0;
}
#sect02 .topArea h3{margin: 15px 0 23px;}

#sect02 .tab {
padding: 0;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#sect02 .tablist{
position: relative;
width: 200px;
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
text-align: center;
padding: 15px 0;
cursor: pointer;
font-size:1.6rem;
font-weight: 700;
color: #999999;
line-height: 1.3;
transition: all .2s ease-in-out;
}
#sect02 .tablist:hover{
opacity: .5;
}
#sect02 .tablist.active{
background: #000;
padding: 8px 0 22px;
border: none;
color: #fff;
font-size:1.8rem;
}
#sect02 .tablist.active::before{
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 10px;
background: #000;
}
#sect02 .tab-botom .tablist {
border-top: none;
border-bottom: 1px solid #bababa;
border-right: 1px solid #bababa;
}
#sect02 .tab-botom .tablist.active{
border: none;
padding: 18px 0 12px;
}
#sect02 .tab-botom .tablist.active::before{
top: auto;
bottom: -10px;
}

#sect02 .tabcontents-list {
position: relative;
padding: 50px 0 35px;
border: 1px solid #000;
}
#sect02 .tabcontents-list .ttlArea{
position: absolute;
top:85px;
left:10px;
width: 500px;
color: #fff;
}
#sect02 .tabcontents-list h3{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
font-family: "Noto Sans JP vt";
font-size:3.0rem;
letter-spacing: .2em;
}
#sect02 .tabcontents-list .eng{
position:absolute;
top: 0;
left: 70px;
transform: rotate(90deg);
transform-origin:0 0;
}

#sect02 .tabcontents-list:nth-child(1) .upper{
background: url(./img/sct02_bg01.jpg) 0 0 no-repeat;
}
#sect02 .tabcontents-list:nth-child(2) .upper{
background: url(./img/sct02_bg02.jpg) 0 0 no-repeat;
}
#sect02 .tabcontents-list:nth-child(3) .upper{
background: url(./img/sct02_bg03.jpg) 0 0 no-repeat;
}
#sect02 .tabcontents-list:nth-child(4) .upper{
background: url(./img/sct02_bg04.jpg) 0 0 no-repeat;
}
#sect02 .tabcontents-list:nth-child(5) .upper{
background: url(./img/sct02_bg05.jpg) 0 0 no-repeat;
}
#sect02 .tabcontents-list .upperR{margin: 0 0 66px;padding: 36px 48px 0 250px;}
#sect02 .upperR .mini{
padding: 35px 0 45px;
border-top: 1px solid #000;
}
#sect02 .mini h4{
padding: 0 0 10px 20px;
}
#sect02 .mini h4::before{
content: "";
position: absolute;
top: 5px;
left: 0;
width: 8px;
height: 26px;
background: #a9a17d;
}
#sect02 .upperR .liBox {
width: calc((100% - 40px) / 2);
margin: 0 40px 0 0;
}
#sect02 .upperR .liBox:nth-child(2n) {
margin: 0 0 0;
}
#sect02 .upperR .liBox h4{
display: flex;
align-items: center;
margin: 0 0 15px;
padding: 0 0 15px 80px;
border-bottom: 1px solid #000;
font-size:1.8rem;
}
#sect02 .upperR .liBox h4::before{
content: "";
position: absolute;
top: 2px;
left: 1px;
width: 60px;
height: 24px;
background: url(./img/sct02_good.svg) 0 0 no-repeat;
background-size: auto 24px;
}
#sect02 .upperR .liBox:nth-child(2n) h4::before{
background: url(./img/sct02_bad.svg) 0 0 no-repeat;
background-size: auto 24px;
}
#sect02 .upperR ul{
margin: 0;
padding: 0;
}
#sect02 .upperR li{
padding: 2px 0;
}
#sect02 .upperR li::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .upperR .liBox .fontCol{color: #EC6B2E;}
#sect02 .upperR .liBox:nth-child(2n) .fontCol{
color: #bababa;
}


.adv{
position: relative;
margin: 0 50px 50px;
background: #f4f4f4;
box-shadow: rgba(0, 0, 0, 1.0) 13px 13px 0 0;
}
.adv::before{
content: "";
position: absolute;
top: 20px;
left: 20px;
width: 212px;
height: 120px;
background: #fff;
}
.adv::after{
content: "";
position: absolute;
top: 70px;
left: 65px;
width: 62px;
height: 18px;
background: url(./img/sct02_adv.svg) 0 0 no-repeat;
background-size: auto 18px;
}
.adv .inner::before{
content: "";
position: absolute;
top: 40px;
left: 40px;
width: calc(100% - 80px);
height: 1px;
background: #000;
}
.adv .inner::after{
content: "";
position: absolute;
top: 40px;
left: 40px;
width: 1px;
height: calc(100% - 90px);
background: #000;
}
.adv .inner{
position: relative;
padding: 120px 40px 50px 80px;
}
.adv .catch{
margin: 0 0 30px;
color: #807d65;
}
.adv .btn-link {
margin: 20px 0 0;
}

#sect02 .note{
text-align: center;
}


#sect02 .cp{
position: relative;
margin: 120px 0 0;
padding: 40px 0 70px;
}
#sect02 .cp::before{
content: "";
position: absolute;
top: 0;
left: calc(50% - 550px);
width: calc(50% + 550px);
height: 100%;
border: 1px solid #000;
}
#sect02 .cp::after{
content: "";
position: absolute;
z-index: -1;
top: 60px;
right: 0;
width: 332px;
height: 730px;
background: url(./img/sct02_cpbg.jpg) 0 0 no-repeat;
}

#sect02 .cp .sttl{
margin: 0 0 0 50px;
}
#sect02 .cp .sttl span{
position: relative;
display: block;
padding: 0 0 35px 240px;
border-bottom: 1px solid #000;
font-size:2.4rem;
line-height: 1.3;
}
#sect02 .cp .sttl::before{
content: "";
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct02_ck.svg) 0 0 no-repeat;
background-size: auto 45px;
}
#sect02 .cp .sttl::after{
content: "";
position: absolute;
top: -7px;
left: 225px;
width: 1px;
height: 50px;
background: #000;
}
#sect02 .cp .sttl span::before{
content: "";
position: absolute;
bottom: -1px;
right: -100vw;
width: 100vw;
height: 1px;
background: #000;
}
#sect02 .cp h2{
margin: 70px 50px 40px;
padding: 0 0 0 60px;
font-size:3.0rem;
}
#sect02 .cp h2::before{
content: "";
position: absolute;
top: -20px;
left: 0;
width: 45px;
height: 80px;
background: url(./img/sct02_q.svg) 0 0 no-repeat;
background-size: auto 80px;
}
#sect02 .cp .ulBox{
margin: 0 0 50px 88px;
}
#sect02 .cp .liBox,
#sect02 .cp .liBox:nth-child(2n){width: 426px;margin: 4px 0;padding: 0 0 0 30px;background: url(./img/sct02_icon.svg) 0 10px no-repeat;background-size: 22px auto;font-size:1.8rem;font-weight: 700;}
#sect02 .cp .adv{
margin: 0 50px 20px;
}






/*------------
sct345_PC
------------*/
.sct345{
  padding: 120px 0 130px;
  /*------------background: url(./img/sct345.jpg) 0 0 no-repeat #000;------------*/
  background-size: 100% auto;
  background-color: hsla(0,0%,0%,1);
  background-image:
radial-gradient(at 84% 87%, hsla(189,4%,35%,1) 0px, transparent 50%),
radial-gradient(at 40% 20%, hsla(22,0%,21%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(187,0%,21%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,0%,37%,1) 0px, transparent 50%), 
radial-gradient(at 0% 0%, hsla(340,0%,38%,1) 0px, transparent 50%);}

/*------------
sect03_PC
------------*/
#sect03 {
margin: 0 0 80px;
}
#sect03::after{
content: "";
position: absolute;
top: 150px;
left: calc(50% - 375px);
width: calc(50% + 375px);
height: 268px;
background: #f4f4f4;
}
#sect03 .upper{
position: relative;
padding: 200px 0 140px;
background: #fff;
}
#sect03 .upper::before{
content: "";
position: absolute;
z-index: 0;
top: 0;
left: -100px;
width: 100px;
height: 100%;
background: #fff;
}
#sect03 .upper::after{
content: "";
position: absolute;
z-index: 0;
top: 0;
right: -100vw;
width: 100vw;
height: 100%;
background: #fff;
}

#sect03 h3{
margin: 0 0 55px;
padding: 10px 0 10px 124px;
background: url(./img/sct03_talk.svg) 0 0 no-repeat;
background-size: 107px auto;
font-size:3.0rem;
}
#sect03 .sps{
margin: 0 0 60px;
text-align: right;
}
#sect03 .spsinner{
position: relative;
display: inline-block;
font-size:2.8rem;
font-weight: 700;
line-height: 1.1;
}
#sect03 .spsinner::before{
content: "";
position: absolute;
top: 20px;
left: -50px;
width: 40px;
height: 1px;
background: #000;
}
#sect03 .spsinner .fontS{
font-size:2.2rem!important;
}

#sect03 .mainArea{
min-height: 400px;
}

#sect03 .imgArea{
position: absolute;
width: 370px;
margin: 0 55px 0 0;
}
#sect03 .imgArea .flame{
position: relative;
z-index: 1;
box-shadow: rgba(236, 107, 46, 1.0) 14px 14px 0 0;
}
#sect03 .imgArea .flame::before{
content: "";
position: absolute;
top: -14px;
left: -14px;
width: calc(100% - 25px);
height: 1px;
background: #000;
}
#sect03 .imgArea .flame::after{
content: "";
position: absolute;
top: -14px;
left: -14px;
width: 1px;
height: calc(100% - 25px);
background: #000;
}

#sect03 .imgArea .note{
position: absolute;
z-index: 1;
left: -14px;
bottom: 25px;
width: 280px;
padding: 12px 10px 14px 25px;
background: #000;
color: #fff;
font-size:1.4rem;
font-weight: 700;
line-height: 1.6;
}
#sect03 .txtArea{
position: relative;
margin: 0 0 0 370px;
padding: 50px 0 0;
}
#sect03 .txtArea::before{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: calc(100% - 50px);
background: #000;
}
#sect03 .txtArea h4{
margin: 0 0 25px;
padding: 25px 50px 30px 95px;
background: url("./img/sct03_rs.png") 100% 0 no-repeat #000;
color: #fff;
}
#sect03 .txtArea p{
padding: 0 50px 0 55px;
}
#sect03 .txtArea h4::before{
content: "";
position: absolute;
top: 20px;
left: 60px;
width: 32px;
height: 40px;
background: url("./img/sct03_q.svg") 0 0 no-repeat;
background-size: auto 40px;
}

#sect03 .botArea{
padding: 70px 0 0;
}
#sect03 .botArea h4{
margin: 0 0 60px;
font-size:2.4rem;
text-align: center;
color: #fff;
}

#sect03 .botArea .ulBox{
background: url("./img/sct03_tri.svg") 50% 50% no-repeat;
background-size: 50px auto;
}
#sect03 .botArea .liBox{
margin-bottom: 0;
padding: 25px 30px 35px;
background: #f4f4f4;
}
#sect03 .botArea .liBox:nth-child(2){
background: #fff;
}
#sect03 .botArea .liBox .sttl::before{
content: "";
position: absolute;
bottom: 0;
left: -50px;
width: calc(100% + 50px);
height: 1px;
background: #000;
}
#sect03 .botArea .liBox:nth-child(2) .sttl::before{
background: #ec6b2e;
}
#sect03 .botArea .liBox .sttl{
display: flex;
align-items: center;
margin: 0 0 20px;
padding: 0 0 20px;
}
#sect03 .botArea ul{
margin: 0;
padding: 0;
}
#sect03 .botArea li{
padding: 3px 0 3px 30px;
}
#sect03 .botArea li::before {
position: absolute;
content: "";
top: 8px;
left: 0;
width: 22px;
height: 18px;
background: url("./img/sct03_icon01.svg") 0 0 no-repeat;
background-size: 22px auto;
}
#sect03 .botArea .liBox:nth-child(2) li::before {
background: url("./img/sct03_icon02.svg") 0 0 no-repeat;
background-size: 22px auto;
}
#sect03 .botArea .caption{padding: 8px 0 0;font-size: 1.5rem;text-align: right;color: #fff;}




/*------------
sect04_PC
------------*/
#sect04 {
margin: 0;
padding: 200px 0 0;
}
#sect04::before{
content: "";
position: absolute;
top: 0;
left: calc(50% - 650px);
width: calc(50% + 650px);
height: 100%;
background: #fff;
}
#sect04 .headArea::before{
content: "";
position: absolute;
z-index: 2;
top: -100px;
left: calc(50% + 275px);
width: 350px;
height: 510px;
background: url(./img/sct04_ph01.jpg) 0 0 no-repeat;
}
#sect04 .headArea::after{
content: "";
position: absolute;
z-index: 3;
top: 140px;
left: calc(50% + 518px);
width: 320px;
height: 320px;
background: url(./img/sct04_ph02.jpg) 0 0 no-repeat;
}
#sect04 .sectTtl {
width: 70%;
margin: 0 0 50px;
}
#sect04 .linkArea{
margin: 0 380px 60px 0;
}
#sect04 .linkArea .btn-link{
margin: 2px 0;
}
#sect04 .midArea{
margin: 0 50px 110px;
}
#sect04 h3{
margin: 0 0 30px;
padding: 10px 25px 12px;
background: #000;
color: #fff;
}
#sect04 .midArea p{
padding: 0 25px;
}

#sect04 .intv{
	margin: 0 50px;
	padding: 0 0 160px;
}

#sect04 div:nth-of-type(5){
  padding: 0 0 10rem;
}

#sect04 .btn-web {
  padding-bottom: 5rem;
}

#sect04 .intv::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .intv::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect04 a:hover img{
opacity: 1;
}
#sect04 .intv a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 270px;
background: #fff;
border: 1px solid #000;
}
#sect04 .intv a::after{
content: "";
position: absolute;
top: 0;
right: 18px;
width: 21px;
height: 88px;
background: url(./img/eng_intv.svg) 0 0 no-repeat;
background-size: 21px auto;
}
#sect04 .intv .flame{position: absolute;top: -30px;left: 20px;}

#sect04 .intv .sttl {
margin: 0 50px 14px 360px;
}
#sect04 .intv .mainArea{margin: 0 0 0 200px;padding: 30px 50px 60px 145px;background: url(./img/sct789_more.svg) calc(100% - 50px) calc(100% - 35px) no-repeat #f4f4f4;background-size: 852px auto;box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0;}

.intv .imgBox img {
    max-width: 46%;
}

/*------------
sect05_PC
------------*/
#sect05 {margin: 0;padding: 20rem 0 50px;}
#sect05::before{
content: "";
position: absolute;
top: 0;
left: calc(50% - 650px);
width: calc(50% + 650px);
height: 100%;
background: #fff;
}
#sect05 .sectTtl {
margin: 0 0 100px 50px;
}

#sect05 .topArea{position: relative;margin: 0 300px 100px 150px;min-height: 360px;}

#sect05 .imgArea{
position: absolute;
top: 0;
right: -420px;
width: 370px;
}
#sect05 .imgArea .flame{
position: relative;
z-index: 1;
box-shadow: rgba(236, 107, 46, 1.0) 14px 14px 0 0;
}
#sect05 .imgArea .flame::before{
content: "";
position: absolute;
top: -14px;
left: -14px;
width: calc(100% - 25px);
height: 1px;
background: #000;
}
#sect05 .imgArea .flame::after{
content: "";
position: absolute;
top: -14px;
left: -14px;
width: 1px;
height: calc(100% - 25px);
background: #000;
}

#sect05 .imgArea .note{
position: absolute;
z-index: 1;
left: -14px;
bottom: 25px;
width: 200px;
padding: 12px 10px 14px 25px;
background: #000;
color: #fff;
font-size:1.4rem;
font-weight: 700;
line-height: 1.6;
}

#sect05 .topArea .catch{
margin: 0 0 30px;
font-size:3.0rem;
}
#sect05 .topArea .catch::before {
content: "";
position: absolute;
top: -16px;
left: -16px;
width: 37px;
height: 37px;
background: url(./img/wquote.svg) 0 0 no-repeat;
background-size: 37px auto;
}
#sect05 .topArea .catch::after{content: "";position: absolute;bottom: 20px;right: -155px;width: 300px;height: 1px;background: #ec6b2e}

#sect05 .linkArea .btn-link {
margin: 2px 0;
}

#sect05 .slArea .sttl{
padding: 0 50px 60px;
}

#sect05 .ulBox{
/*width: 1100px;*/
overflow: visible;
padding: 0 0 60px;
}
#sect05 .liBox{
width: 500px;
box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0;
cursor: pointer;
}
#sect05 .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
opacity: 0;
transition: all .2s ease-in-out;
}
#sect05 .liBox:hover::before{
opacity: 1;
}

#sect05 .liBox .flame::before{
content: "";
position: absolute;
top: -15px;
left: -15px;
width: calc(100% - 15px);
height: 1px;
background: #000;
}
#sect05 .liBox .flame::after{
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 1px;
height: calc(100% - 15px);
background: #000;
}


#sect05 .hoverCnt{
position: absolute;
width: 100%;
bottom: 0;
padding: 15px 20px 5px 20px;
background: rgba(0,0,0,.3);
color: #fff;
opacity: 0!important;
transition: all .2s ease-in-out;
}
#sect05 .hoverCnt p{
margin: 0;
padding: 0;
font-size:1.4rem;
line-height: 1.7;
}
#sect05 .hoverCnt .caption,
#sect05 .hoverCnt .caption a{
text-align: right;
color: #fff;
}
#sect05 .liBox:hover .hoverCnt{
opacity: 1!important;
}


#sect05 .swp-prev,
#sect05 .swp-next{
width: 46px;
height: 20px;
position: absolute;
z-index: 1000;
bottom:0;
cursor: pointer;
}
#sect05 .swp-prev{
background: url(./img/arrow_bk_rv.svg) 50% 50% no-repeat;
background-size: 46px auto;
right: 75px;
}
#sect05 .swp-next{
background: url(./img/arrow_bk.svg) 50% 50% no-repeat;
background-size: 46px auto;
right: 0;
}
#sect05 .swp-prev:hover,
#sect05 .swp-next:hover{
opacity: .5;
}

#sect05 .btn-web a{
width: 440px;
padding: 25px 60px 27px;
}



/*------------
sect06_PC
------------*/
#sect06{
margin: 0 0 250px;
background: #f4f4f4;
}
#sect06 .sectinner{
position: relative;
padding: 200px 0 90px;
}
#sect06 .sectinner::before{
content: "";
position: absolute;
top: 0;
left: calc(50% - 400px);
width: calc(50% + 400px);
height: 371px;
background: url(./img/sct06_ph02.jpg) 50% 0 no-repeat;
background-size: cover;
}

#sect06::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(50% - 400px);
height: 600px;
background: url(./img/sct06_ph01.jpg) 50% 25% no-repeat;
background-size: cover;
}
#sect06::after{
content: "";
position: absolute;
bottom: 0;
left: calc(50% + 100px);
width: calc(50% - 100px);
height: 414px;
background: url(./img/sct06_ph04.jpg) 0 0 no-repeat;
background-size: cover;
}

#sect06 .headArea{
position: relative;
z-index: 1;
margin: 0 0 110px;
}
#sect06 .engL{
border: none;
text-align: right;
}
#sect06 .engL::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect06 .eng{
position: relative;
top: -10px;
text-align: right;
color: #fff;
}
#sect06 .sectTtl{margin: 0 0 40px;padding: 150px 0 0 250px;}
#sect06 .intro{
padding: 0 0 0 250px;
}
#sect06 .liBox{
display: flex;
margin-bottom: 110px;
}

#sect06 .liBox a{
position: relative;
display: flex;
height: 100%;
padding: 0 0 40px;
background: url(./img/sct789_rmore.svg) 100% 100% no-repeat;
}
#sect06 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
width: 170px;
height: 154px;
background: url(./img/sct06_num01.svg) 100% 0 no-repeat;
background-size: auto 152px;
}
#sect06 .liBox:nth-child(2) a::before{
background: url(./img/sct06_num02.svg) 100% 0 no-repeat;
background-size: auto 152px;
}
#sect06 .liBox:nth-child(3) a::before{
background: url(./img/sct06_num03.svg) 100% 0 no-repeat;
background-size: auto 152px;
}

#sect06 .liBox a::after{
content: "";
position: absolute;
top: -44px;
left: 0;
width: 32px;
height: 42px;
background: url(./img/sct06_q.svg) 0 0 no-repeat;
background-size: 31px auto;
}
#sect06 .liBox h3{
display: flex;
align-items: center;
margin: 0 0 25px;
font-size:2.2rem;
}




/*------------
sct789_PC
------------*/
.sct789 .engL{
border: none;
}
.sct789 .engL::before{
width: 0;
height: 0;
background: none;
border: none;
}
.sct789 .indexSect{
padding: 0 0 90px;
}
.sct789 .indexSect::before{
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 630px);
width: calc(50% + 630px);
height: calc(100% - 125px);
border: 1px solid #000;
border-right: none;
}
.sct789 .indexSect::after{
content: "";
position: absolute;
z-index: -1;
top: 70px;
left: calc(50% - 375px);
width: calc(50% + 375px);
height: 300px;
background: #f4f4f4;
}
.sct789 .engL{
position: relative;
left: -60px;
padding: 0 0 20px;
}
.sct789 .eng{
position: relative;
left: -60px;
margin: 0 0 10px;
}
.sct789 .sectTtl{width: 77%;margin: 0 0 40px;padding: 100px 0 0;}
.sct789 .intro{
width: 545px;
margin: 0 0 80px;
}


.sct789 .liBox{
display: flex;
}
.sct789 h3{
display: flex;
width: 100%;
}
.sct789 .liBox a{
position: relative;
display: flex;
align-items: flex-end;
width: 100%;
padding: 30px 0 55px;
background: url(./img/sct789_rmore.svg) 100% 100% no-repeat;
font-size:2.2rem;
}
.sct789 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: -22px;
width: 70px;
height: 60px;
background: url(./img/sct789_num01.svg) 0 0 no-repeat;
background-size: auto 60px;
}
.sct789 .botArea{padding: 60px 0 0;}
.sct789 .botArea h3{margin: 0 0 130px;padding: 16px 25px 18px;background: #000;font-size: 2.4rem;line-height: 1;color: #fff;}
.sct789 .botArea h3::before{
content: "";
position: absolute;
top: -45px;
left: -50px;
width: 148px;
height: 60px;
background: url(./img/sct789_cg.svg) 0 0 no-repeat;
background-size: 148px auto;
}

.sct789 .intv{
    padding-bottom: 160px;
}
.sct789 .intv:last-child{
	padding: 0 0 130px;
}

.sct789 .intv::before{
width: 0;
height: 0;
background: none;
border: none;
}
.sct789 .intv::after{
width: 0;
height: 0;
background: none;
border: none;
}

.sct789 .intv a:hover img{
opacity: 1;
}

.sct789 .intv a::after{
content: "";
position: absolute;
top: -30px;
left: 0;
width: 190px;
height: 270px;
background: #fff;
border: 1px solid #000;
}


.sct789 .intv .flame{
	position: absolute;
	top: -70px;
	left: 20px;
}

.sct789 .intv .mainArea{
	margin: 0 0 0 200px;
	padding: 30px 50px 60px 155px;
	background: url(./img/sct789_more.svg) calc(100% - 50px) calc(100% - 35px) no-repeat #f4f4f4;
	background-size: 852px auto;
	box-shadow: rgba(0, 0, 0, 1.0) 14px 14px 0 0;
}

.sct789 .botArea a::before{
content: "";
position: absolute;
z-index: 1;
top: -10px;
left: 360px;
width: 130px;
height: 19px;
background: url(./img/eng_int01.svg) 0 0 no-repeat;
background-size: auto 19px;
}
.sct789 .intv:nth-of-type(2) a::before{
background: url(./img/eng_int02.svg) 0 0 no-repeat;
background-size: auto 19px;
}









/*------------
sect07_PC
------------*/
#sect07{
}
#sect07 .headImg1{
position: absolute;
z-index: 1;
top: -100px;
left: calc(50% + 400px);
width: 420px;
height: 600px;
}
#sect07 .headImg2{position: absolute;z-index: 1;top: 320px;left: calc(50% + 300px);width: 320px;height: 320px;}
#sect07 .ulBox2 .liBox:nth-child(1) a::before{
background: url(./img/sct789_num02.svg) 0 0 no-repeat;
background-size: auto 60px;
}
#sect07 .ulBox2 .liBox:nth-child(2) a::before{
background: url(./img/sct789_num03.svg) 0 0 no-repeat;
background-size: auto 60px;
}





/*------------
sect08_PC
------------*/
#sect08::before{
left: 0;
height: calc(100% - 225px);
border: 1px solid #000;
border-right: 1px solid #000;
border-left: none;
} 
#sect08 .headArea{
text-align: right;
}
#sect08 .engL,
#sect08 .eng{
left: auto;
right: -60px;
}
#sect08::after{
top: 170px;
left: 0;
width: calc(50% + 410px);
}
#sect08 .headImg1{
position: absolute;
z-index: 1;
top: 0;
left: calc(50% - 830px);
width: 500px;
height: 500px;
}
#sect08 .headImg2{position: absolute;z-index: 1;top: 385px;left: calc(50% - 596px);width: 320px;height: 320px;}
#sect08 .sectTtl{
margin: 0 0 40px 23%; 
}
#sect08 .intro{
margin: 0 0 80px 555px;
text-align: left;
}
#sect08 .ulBox{
position: relative;
left: 600px;
}




/*------------
sect09_PC
------------*/
#sect09{
}
#sect09 .headImg1{
position: absolute;
z-index: 1;
top: -100px;
left: calc(50% + 400px);
width: 420px;
height: 600px;
background: url(./img/sct09_ph01.jpg) 0 0 no-repeat;
}
#sect09 .headImg2{position: absolute;z-index: 1;top: 320px;left: calc(50% + 287px);width: 320px;height: 320px;background: url(./img/sct09_ph02.jpg) 0 0 no-repeat;}


/*------------
sect10_PC
------------*/
#sect10{
margin: 0 0 100px;
}
#sect10 .areaInner{
padding: 80px 50px 30px;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
}
#sect10 .areaInner::before{
content: "";
position: absolute;
top: 40px;
left: 50px;
width: 115px;
height: 12px;
background: url(./img/eng_about.svg) 0 0 no-repeat;
background-size: auto 12px;
}
#sect10 h2{
margin: 0 0 25px;
font-size:2.2rem;
}





/*  End_PC */



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



/*------------
index_SP
------------*/
.btn-link {
width: 98%;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 5%);
  transition: .8s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


/*--------------------------------------
　Header_SP
---------------------------------------*/
.headers{
margin: 0 0 40px;
background: url("./img/mainvis_sp.jpg") 0 0 no-repeat;
background-size: cover;
}

#header{
position: relative;
z-index: 1;
height: auto;
padding: 0 0 0;
font-size:1.1rem;
line-height: 1.5;
color: #000;
text-align: left;
}
#header .note{
position: relative;
z-index: 1;
padding: 8px 15% 10px;
background: #777;
font-size:1.1rem;
line-height: 1.5;
color: #fff;
text-align: center;
}
#header .logo{
position: static;
padding: 18px 4%;
}
#header .siteName{
font-weight: 400;
}
.headers .logoImg{
width: 110px;
float: left;
margin: 3px 10px 0 0;
}
.headers .logoTxt{
width: 65%;
float: left;
font-size:1.0rem;
line-height: 1.2;
}
.headers .logoTxt .line1{
display: block;
margin: 0 0 3px;
padding: 0 0 4px;
border-bottom: 1px solid #000;
font-size:1.1rem;
}
.headers .logoTxt .line2{
display: block;
margin: 0 0 2px;
}
.headers .logoTxt .fontL{
font-size:1.6rem;
font-weight: 700;
}


/*--------------------------------------
　gNav_SP
---------------------------------------*/
#gNav{
  transition: .3s;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
/*このクラスが付与されると表示する*/
#gNav.active{
  opacity: 1;
  visibility: visible;
}
/*このクラスが付与されると表示する*/
#gNav.absolute{
}




/*------------
mainVis_SP
------------*/
.visArea{
margin: 0 0 50px;
padding: 0 0 50px;
height: 640px;
}
.visArea .inner0{margin: 0 20% 0 0;padding: 35px 5% 20px;background: rgba(255,255,255,.90);}
.visArea::before{
width: 0;
height: 0;
background: none;
border: none;
}


.visArea .inner{
position: relative;
z-index: 1;
}
.visArea .subTtl{padding: 0 0 198px;font-size:1.8rem;}
.visArea .subTtl::before{
content: "";
position: absolute;
bottom: 20px;
left: 0;
width: 210px;
height: 140px;
background: url(./img/eng_car.svg) 0 0 no-repeat;
background-size: 210px auto;
}
.visArea .subTtl::after{content: "";position: absolute;bottom: -50px;left: 178px;width: 135px;height: 130px;background: url(./img/eng_app.svg) 0 0 no-repeat;background-size: 135px auto;}
.visArea .eng{
margin: 0 0 40px;
}
.visArea p{
margin: 0 0 20px;
font-weight: 700;
}


.p-top-mv{
position: absolute;
z-index: 0;
width: 500px;
height: 640px;
}

.p-top-mv .p-top-mv__body {
top: -100px;
left: auto!important;
right: -30%;
width: 400px;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.p-top-mv .p-top-mv__body .key_tile{
position: relative;
width: 112px;
height: 150px;
margin-bottom: 17px;
}
.p-top-mv .p-top-mv__body .key_tile::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}

.rail-left .key_tile:nth-child(4n+1){
box-shadow: rgba(0, 0, 0, 1.0) 7px 7px 0 0;
}
.rail-left .key_tile:nth-child(4n+2)::before{
top: -13px;
left: -7px;
border: 1px solid #000;
}
.rail-left .key_tile:nth-child(4n+3)::before{
bottom: -7px;
right: -7px;
border: 1px solid #000;
}
.rail-left .key_tile:nth-child(4n){
box-shadow: rgba(0, 0, 0, 1.0) -7px -7px 0 0;
}


.rail-right .key_tile:nth-child(4n+1)::before{
top: -7px;
left: -7px;
border: 1px solid #000;
}
.rail-right .key_tile:nth-child(4n+2){
box-shadow: rgba(0, 0, 0, 1.0) 7px 7px 0 0;
}
.rail-right .key_tile:nth-child(4n+3){
box-shadow: rgba(0, 0, 0, 1.0) -7px 7px 0 0;
}
.rail-right .key_tile:nth-child(4n){
box-shadow: rgba(0, 0, 0, 1.0) 7px 7px 0 0;
}







/*------------
mokuji_SP
------------*/

.mokuji{
width: auto;
margin: 0 5% 100px;
}
.mokuji li a:last-child {
display: block;
padding: 6px 4% 8px 0;
background: url("./img/arrow_bk_down.svg") calc(100% - 1px) 50% no-repeat;
background-size: auto 20px;
line-height: 1.6;
}
.mokuji .fontCol{
margin: 0 4px 0 0;
padding: 0 4px 2px;
background: #a9a17d;
color: #fff;
line-height: 1;
}



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




.indexSect{
position: relative;
margin: 0 0 100px;
}
.indexSect .headArea{
position: relative;
padding: 0 5%;
}

.engL{
position: relative;
z-index: 3;
padding: 0 0 5px;
border-bottom: 2px solid #000;
line-height: 1;
}
.engL::before{
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -100vw;
width: 100vw;
height: 2px;
background: #000;
}
.engL img{
display: inline-block;
width: auto;
height: 60px;
}

.TextRandomAnime span,
.TextRandomAnime2 span{
opacity: 1;
}

.sectTtl{
z-index: 1;
margin: 0 0 50px;
padding: 20px 0 0;
font-size:2.6rem;
line-height: 1.7;
}
.sectTtl .fontS{
font-size:2.0rem;
}
.sectTtl a{
position: relative;
display: block;
padding: 0 36px 0 0;
}
.sectTtl a::after{
content: "";
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/arrow_bk.svg) 99% calc(50% + 2px) no-repeat;
background-size: 27px auto;
}




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

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


.indexSect .box3 .liBox{
width:100%;
margin: 0 0 20px;
}
.indexSect .box3 .liBox:nth-child(3n){
margin: 0 0 20px;
}






/*------------
sect01_SP
------------*/
#sect01 {
}

#sect01 .headArea::before{
content: "";
position: absolute;
z-index: 4;
top: -10px;
left: calc(50% + 25px);
width: 153px;
height: 94px;
background: url(./img/sct01_ph01.jpg) 0 0 no-repeat;
background-size: 153px auto;

}
#sect01 .headArea::after{
content: "";
position: absolute;
z-index: 5;
top: 40px;
left: calc(50% + 100px);
width: 88px;
height: 125px;
background: url(./img/sct01_ph02.jpg) 0 0 no-repeat;
background-size: 88px auto;
}
#sect01 .sectTtl{
width: 80%;
font-size:2.8rem;
}

#sect01 h3{
z-index: 5;
width: 80%;
margin: 0 auto -35px;
padding: 8px 2% 24px;
background: #000;
font-size:1.5rem;
color: #fff;
text-align: center;
line-height: 1.1;
}
#sect01 h3 .fontL{
position: relative;
top: 5px;
font-size:3.0rem;
}

#sect01 .bdBox{
position: relative;
z-index: 4;
margin: 0 5%;
padding: 70px 0 0 0;
border: 1px solid #000;
}
#sect01 .bdBox .ulBox{
padding: 0 5% 30px 10%;
}
#sect01 .bdBox .liBox{
width: auto;
margin: 0 0 40px;
}
#sect01 .bdBox .liBox:nth-child(2n){
margin: 0 0 40px;
}
#sect01 .liBox:hover{
opacity: 1;
}
#sect01 .liBox h4{
display: block;
margin: 0;
padding: 15px 10% 25px 5%;
background: url(./img/plus.svg) calc(100% - 14px) 50% no-repeat rgba(240,240,240,.90);
background-size: 12px auto;
font-size:1.5rem;
line-height: 1.9;
cursor: pointer;
}
#sect01 .liBox h4.open{
background: url(./img/minus.svg) calc(100% - 14px) 50% no-repeat rgba(240,240,240,.90);
background-size: 12px auto;
}

#sect01 .liBox h4::before{
content: "";
position: absolute;
top: -18px;
left: -20px;
width: 40px;
height: 27px;
background: url("./img/sct01_num01.svg") 0 0 no-repeat;
background-size: auto 27px;
mix-blend-mode: multiply;
}
#sect01 .liBox:nth-child(2) h4::before{
background: url("./img/sct01_num02.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(3) h4::before{
background: url("./img/sct01_num03.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(4) h4::before{
background: url("./img/sct01_num04.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(5) h4::before{
background: url("./img/sct01_num05.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(6) h4::before{
background: url("./img/sct01_num06.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(7) h4::before{
background: url("./img/sct01_num07.svg") 0 0 no-repeat;
background-size: auto 27px;
}
#sect01 .liBox:nth-child(1),#sect01 .liBox:nth-child(2){z-index: 5;}
#sect01 .liBox:nth-child(3),#sect01 .liBox:nth-child(4){z-index: 4;}
#sect01 .liBox:nth-child(5),#sect01 .liBox:nth-child(6){z-index: 3;}
#sect01 .liBox:nth-child(7){z-index: 2;}

#sect01 .liBox h4::after{
content: "";
position: absolute;
bottom: 12px;
left: -5%;
width: 100%;
height: 1px;
background: #000;
}


#sect01 .liBox h4 .txt_bold{
color: #807d65;
}
#sect01 .liBox .accChild{
position: static;
margin: 0;
padding: 0 5% 25px;
background: rgba(240,240,240,.90);
font-size:1.4rem;
}

#sect01 .botArea{
position: relative;
margin: 20px 0 0;
}
#sect01 .botArea::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 2px;
height: 15px;
background: #fff;
}
#sect01 .botArea::after{
content: "";
position: absolute;
top: -46px;
left: 50%;
width: 2px;
height: 46px;
background: #000;
}


#sect01 .botArea a:hover{
opacity: 1;
}

#sect01 .botArea .inner{
position: relative;
height: auto;
padding: 40px 5% 30px;
background: url("./img/sct01_bot_sp.jpg") 50% 50% no-repeat;
background-size: cover;
text-align: center;
color: #fff;
}
#sect01 .botArea .inner::before{
content: "";
position: absolute;
top: -30px;
left: 20px;
width: 135px;
height: 55px;
background: url("./img/sct01_cj.svg") 0 0 no-repeat;
background-size: 135px auto;
}

#sect01 .botArea .sttl{
font-size:1.8rem;
}
#sect01 .botArea .btn-internal{
width: 100%;
margin: 0!important;
}
#sect01 .botArea .btn-internal div{
width: 100%;
padding: 10px 15% 12px 5%;
box-shadow: rgba(204, 204, 204, 1.0) 4px 4px 0 0;
font-size: 1.5rem;
text-align: left;
}
#sect01 .botArea .btn-internal div::before {
content: "";
position: absolute;
top: auto;
bottom: 10px;
right: 10px;
width: 35px;
height: 32px;
background: url(./img/sct01_ck.svg) 99% 0 no-repeat;
background-size: 35px auto;
}



/*------------
sect02_SP
------------*/
#sect02 {
}
#sect02::before{
content: "";
position: absolute;
z-index: -1;
top: 35px;
left: 75px;
width: calc(100% - 75px);
height: 165px;
background: #f4f4f4;
}
#sect02 .topArea{
padding: 0 5% 60px;
}
#sect02 .imgArea{
width: auto;
float: none;
margin: 0 0 10px 0;
}
#sect02 .topArea h3{
margin: 15px 0 0;
}
#sect02 .topArea p{
padding: 0;
}
#sect02 .tab {
padding: 0 2%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#sect02 .tablist{
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 19%;
height: 50px!important;
padding: 8px 2%;
border-top: 1px solid #bababa;
border-right: 1px solid #bababa;
text-align: center;
cursor: pointer;
font-size:1.3rem;
font-weight: 700;
color: #999999;
line-height: 1.3;
}
#sect02 .tablist:hover{
opacity: 1;
}
#sect02 .tablist.active{
background: #000;
padding: 10px 0 22px;
border: none;
color: #fff;
font-size:1.4rem;
}
#sect02 .tablist.active::before{
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 8px;
background: #000;
}
#sect02 .tab-botom .tablist {
border-top: none;
border-bottom: 1px solid #bababa;
border-right: 1px solid #bababa;
}
#sect02 .tab-botom .tablist.active{
border: none;
padding: 16px 0 16px;
}
#sect02 .tab-botom .tablist.active::before{
top: auto;
bottom: -6px;
}

#sect02 .tabcontents-list {
position: relative;
padding: 0 0 25px;
border: none;
border-bottom: 1px solid #000;
}
#sect02 .tabcontents-list .ttlArea{
position: static;
width: 100%;
padding: 25px 5% 110px;
color: #fff;
}
#sect02 .tabcontents-list:nth-child(1) .ttlArea{
background: url(./img/sct02_bg01_sp.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect02 .tabcontents-list:nth-child(2) .ttlArea{
background: url(./img/sct02_bg02_sp.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect02 .tabcontents-list:nth-child(3) .ttlArea{
background: url(./img/sct02_bg03_sp.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect02 .tabcontents-list:nth-child(4) .ttlArea{
background: url(./img/sct02_bg04_sp.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect02 .tabcontents-list:nth-child(5) .ttlArea{
background: url(./img/sct02_bg05_sp.jpg) 0 0 no-repeat;
background-size: cover;
}
#sect02 .tabcontents-list h3{
-ms-writing-mode: tb-lr;
writing-mode: horizontal-tb;
font-family: "Noto Sans JP";
font-size:2.0rem;
letter-spacing: .2em;
}
#sect02 .tabcontents-list .eng{
position:absolute;
top: 55px;
left: 5%;
transform: rotate(0);
transform-origin:0 0;
}

#sect02 .tabcontents-list:nth-child(1) .upper{
background: none;
}
#sect02 .tabcontents-list:nth-child(2) .upper{
background: none;
}
#sect02 .tabcontents-list:nth-child(3) .upper{
background: none;
}
#sect02 .tabcontents-list:nth-child(4) .upper{
background: none;
}
#sect02 .tabcontents-list:nth-child(5) .upper{
background: none;
}
#sect02 .tabcontents-list .upperR{
margin: -1px 0 30px;
padding: 0 5% 0;
}
#sect02 .upperR .mini{
padding: 28px 0 20px;
border-top: 1px solid #000;
}
#sect02 .mini h4{
padding: 0 0 0 5%;
}
#sect02 .mini .flame{
margin: 25px 0 0;
}
#sect02 .mini h4::before{
content: "";
position: absolute;
top: 2px;
left: 0;
width: 7px;
height: 25px;
background: #a9a17d;
}
#sect02 .mini p{
padding: 0;
}
#sect02 .upperR .ulBox {
padding: 10px 0 0;
}
#sect02 .upperR .liBox {
width: auto;
margin: 0 0 30px;
}
#sect02 .upperR .liBox:nth-child(2n) {
margin: 0 0 30px;
}
#sect02 .upperR .liBox h4{
display: block;
margin: 0 0 15px;
padding: 0 0 10px 17%;
border-bottom: 1px solid #000;
font-size:1.6rem;
}
#sect02 .upperR .liBox h4::before{
content: "";
position: absolute;
top: 2px;
left: 1px;
width: 50px;
height: 20px;
background: url(./img/sct02_good.svg) 0 0 no-repeat;
background-size: auto 20px;
}
#sect02 .upperR .liBox:nth-child(2n) h4::before{
background: url(./img/sct02_bad.svg) 0 0 no-repeat;
background-size: auto 20px;
}
#sect02 .upperR ul{
margin: 0;
padding: 0;
}
#sect02 .upperR li{
padding: 2px 0;
}
#sect02 .upperR li::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .upperR .liBox .fontCol{
color: #807d65;
}
#sect02 .upperR .liBox:nth-child(2n) .fontCol{
color: #bababa;
}


.adv{
position: relative;
margin: 0 5% 30px;
background: #f4f4f4;
box-shadow: rgba(0, 0, 0, 1.0) 8px 8px 0 0;
}
.adv::before{
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 106px;
height: 55px;
background: #fff;
}
.adv::after{
content: "";
position: absolute;
top: 30px;
left: 30px;
width: 40px;
height: 12px;
background: url(./img/sct02_adv.svg) 0 0 no-repeat;
background-size: auto 12px;
}
.adv .inner::before{
content: "";
position: absolute;
top: 20px;
left: 5%;
width: 90%;
height: 1px;
background: #000;
}
.adv .inner::after{
content: "";
position: absolute;
top: 20px;
left: 5%;
width: 1px;
height: 35px;
background: #000;
}
.adv .inner{
position: relative;
padding: 75px 5% 35px;
}
.adv .catch{
margin: 0 0 20px;
color: #807d65;
}
.adv p{
margin: 1rem 0 0;
padding: 0;
}
.adv .btn-link {
margin: 10px 0 0!important;
}

#sect02 .note{
text-align: center;
}


#sect02 .cp{
position: relative;
margin: 60px 0 0;
padding: 20px 0 0;
}
#sect02 .cp::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .cp::after{
content: "";
position: absolute;
z-index: -1;
top: 200px;
right: 0;
width: 141px;
height: 365px;
background: url(./img/sct02_cpbg.jpg) 0 0 no-repeat;
background-size: 141px auto;

}

#sect02 .cp .sttl{
margin: 0 5%;
}
#sect02 .cp .sttl span{
position: relative;
display: block;
padding: 35px 0 15px;
border-bottom: 1px solid #000;
font-size:1.8rem;
line-height: 1.3;
}
#sect02 .cp .sttl::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(./img/sct02_ck.svg) 0 0 no-repeat;
background-size: auto 31px;
}
#sect02 .cp .sttl::after{
width: 0;
height: 0;
background: none;
border: none;
}
#sect02 .cp .sttl span::before{
content: "";
position: absolute;
bottom: -1px;
right: -100vw;
width: 100vw;
height: 1px;
background: #000;
}
#sect02 .cp h2{
margin: 30px 5% 20px;
padding: 0 0 0 10%;
font-size:2.0rem;
}
#sect02 .cp h2::before{
content: "";
position: absolute;
top: -10px;
left: 0;
width: 28px;
height: 50px;
background: url(./img/sct02_q.svg) 0 0 no-repeat;
background-size: auto 50px;
}
#sect02 .cp .ulBox{
width: 65%;
margin: 0 0 30px;
}
#sect02 .cp .liBox,
#sect02 .cp .liBox:nth-child(2n){
width: auto;
margin: 3px 0;
padding: 3px 0 3px 10%;
background: url(./img/sct02_icon.svg) 0 6px no-repeat;
background-size: 18px auto;
font-size:1.5rem;
font-weight: 700;
line-height: 1.6;
}
#sect02 .cp .adv{
margin: 0 5% 20px;
}






/*------------
sct345_SP
------------*/
.sct345{
padding: 60px 0 50px;
background: url(./img/sct345_sp.jpg) 0 0 no-repeat #000;
background-size: 100% auto;
}

/*------------
sect03_SP
------------*/
#sect03 {
margin: 0 0 40px;
}
#sect03::after{
content: "";
position: absolute;
top: 50px;
left: 75px;
width: calc(100% + 75px);
height: 165px;
background: #f4f4f4;
}
#sect03 .upper{
position: relative;
margin: 0 0 0 5%;
padding: 40px 0 30px;
background: #fff;
}
#sect03 .upper::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 .upper::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect03 h3{
margin: 0 0 15px;
padding: 60px 5% 10px;
background: url(./img/sct03_talk.svg) 50% 0 no-repeat;
background-size: 53px auto;
font-size:2.0rem;
text-align: center;
}
#sect03 .sps{
margin: 0 0 50px;
text-align: center;
}
#sect03 .spsinner{
position: relative;
display: inline-block;
font-size:1.8rem;
font-weight: 700;
line-height: 1.1;
}
#sect03 .spsinner::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 .spsinner .fontS{
font-size:1.3rem!important;
}

#sect03 .mainArea{
min-height: 400px;
}

#sect03 .imgArea{
position: relative;
width: 75%;
margin: 0 auto 10px;
}
#sect03 .imgArea .flame{
position: relative;
z-index: 1;
box-shadow: rgba(236, 107, 46, 1.0) 8px 8px 0 0;
}
#sect03 .imgArea .flame::before{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 100%;
height: 1px;
background: #000;
}
#sect03 .imgArea .flame::after{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 1px;
height: 100%;
background: #000;
}

#sect03 .imgArea .note{
position: absolute;
z-index: 1;
left: -14px;
bottom: 25px;
width: 22rem;
padding: 8px 4% 10px;
background: #000;
color: #fff;
font-size:1.1rem;
font-weight: 700;
line-height: 1.6;
}
#sect03 .txtArea{
margin: 0 0 0;
padding: 25px 0 0;
}
#sect03 .txtArea::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 .txtArea h4{
margin: 0 5% 25px;
padding: 15px 5% 20px 13%;
background: #000;
color: #fff;
}
#sect03 .txtArea p{
padding: 0 5%;
}
#sect03 .txtArea h4::before{
content: "";
position: absolute;
top: 15px;
left: 15px;
width: 25px;
height: 32px;
background: url("./img/sct03_q.svg") 0 0 no-repeat;
background-size: auto 32px;
}

#sect03 .botArea{
padding: 35px 0 0;
}
#sect03 .botArea h4{
margin: 0 10% 30px 15%;
font-size:1.8rem;
text-align: center;
color: #fff;
}

#sect03 .botArea .ulBox{
padding: 0;
background: none;
}
#sect03 .botArea .liBox{
margin-left: 5%;
margin-bottom: 85px;
padding: 15px 5% 20px;
background: #f4f4f4;
}
#sect03 .botArea .liBox:nth-child(2){
margin-bottom: 10px;
background: #fff;
}
#sect03 .botArea .liBox .sttl::before{
content: "";
position: absolute;
bottom: 0;
left: -6%;
width: 105%;
height: 1px;
background: #000;
}
#sect03 .botArea .liBox:nth-child(2) .sttl::before{
background: #ec6b2e;
}
#sect03 .botArea .liBox:nth-child(2)::after{
content: "";
position: absolute;
top: -65px;
left: 0;
width: 100%;
height: 100%;
background: url("./img/sct03_tri_sp.svg") 50% 0 no-repeat;
background-size: 25px auto;
}



#sect03 .botArea .liBox .sttl{
display: block;
margin: 0 0 15px;
padding: 0 0 15px;
font-size:2.0rem;
}
#sect03 .botArea ul{
margin: 0;
padding: 0;
}
#sect03 .botArea li{
margin: 2px 0;
padding: 3px 0 3px 8%;
line-height: 1.7;
}
#sect03 .botArea li::before {
position: absolute;
content: "";
top: 7px;
left: 0;
width: 18px;
height: 18px;
background: url("./img/sct03_icon01.svg") 0 0 no-repeat;
background-size: 18px auto;
}
#sect03 .botArea .liBox:nth-child(2) li::before {
background: url("./img/sct03_icon02.svg") 0 0 no-repeat;
background-size: 18px auto;
}
#sect03 .botArea .caption{
padding: 8px 5%;
font-size:1.2rem;
text-align: right;
color: #cecece;
}




/*------------
sect04_SP
------------*/
#sect04 {
margin: 0 0 0 5%;
padding: 40px 0 20px;
background: #fff;
}
#sect04::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .engL .line2{
display: block;
margin: -5px 0 0;
}
#sect04 .headArea::before{
content: "";
position: absolute;
z-index: 2;
top: -18px;
left: calc(50% + 80px);
width: 88px;
height: 128px;
background: url(./img/sct04_ph01.jpg) 0 0 no-repeat;
background-size: 88px auto;
}
#sect04 .headArea::after{
content: "";
position: absolute;
z-index: 3;
top: 60px;
left: calc(50% + 110px);
width: 80px;
height: 80px;
background: url(./img/sct04_ph02.jpg) 0 0 no-repeat;
background-size: 80px auto;
}
#sect04 .sectTtl {
width: auto;
margin: 0 0 30px;
}
#sect04 .linkArea{
margin: 0 5% 40px;
}
#sect04 .linkArea .btn-link{
margin: 2px 0!important;
}
#sect04 .midArea{
margin: 0 5% 50px;
}
#sect04 h3{
margin: 0 0 20px;
padding: 10px 5% 12px;
background: #000;
color: #fff;
}
#sect04 .midArea p{
padding: 0 0;
}

#sect04 .intv{margin: 0 5% 5rem;padding: 0;}
	
#sect04 div:nth-of-type(5) {
    padding: 0;
}
	
#sect04 .intv::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect04 .intv::after{
width: 0;
height: 0;
background: none;
border: none;
}

#sect04 a:hover img{
  opacity: 1;
  max-width: 100%;
}

#sect04 img{
  opacity: 1;
  max-width: 100%;
}
  
#sect04 .intv a::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: -5px;
width: 87px;
height: 114px;
background: #fff;
border: 1px solid #000;
}
#sect04 .intv a::after{
content: "";
position: absolute;
top: 75px;
right: 2%;
width: 18px;
height: 74px;
background: url(./img/eng_intv.svg) 0 0 no-repeat;
background-size: 18px auto;
}
#sect04 .intv .flame{
position: absolute;
width: 40%;
top: -10px;
left: 10px;
}

#sect04 .intv .sttl {
margin: 0 8% 20px 45%;
padding: 30px 0 0;
}
#sect04 .intv .mainArea{
margin: 0 0 0;
padding: 60px 5% 60px;
background: url(./img/sct789_more_sp.svg) calc(100% - 10px) calc(100% - 20px) no-repeat #f4f4f4;
background-size: 100% auto;
box-shadow: rgba(0, 0, 0, 1.0) 8px 8px 0 0;
}












/*------------
sect05_SP
------------*/
#sect05 {
margin: 0 0 0 5%;
padding: 70px 0 20px;
background: #fff;
}
#sect05::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect05 .sectTtl {
margin: 0 0 30px;
}

#sect05 .topArea{
position: relative;
margin: 0 0 40px;
min-height: 0;
}

#sect05 .imgArea{
position: relative;
top:0;
left: 0;
width: 70%;
margin: 0 auto 30px;
}
#sect05 .imgArea .flame{
position: relative;
z-index: 1;
box-shadow: rgba(236, 107, 46, 1.0) 8px 8px 0 0;
}
#sect05 .imgArea .flame::before{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 100%;
height: 1px;
background: #000;
}
#sect05 .imgArea .flame::after{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 1px;
height: 100%;
background: #000;
}

#sect05 .imgArea .note{
position: absolute;
z-index: 1;
left: -8px;
bottom: 8px;
width: 15rem;
padding: 8px 4% 10px;
background: #000;
color: #fff;
font-size:1.1rem;
font-weight: 700;
line-height: 1.6;
}

#sect05 .topArea .catch{
margin: 0 5% 30px;
font-size:2.0rem;
}
#sect05 .topArea .catch::before {
content: "";
position: absolute;
top: -12px;
left: -10px;
width: 24px;
height: 24px;
background: url(./img/wquote.svg) 0 0 no-repeat;
background-size: 24px auto;
}
#sect05 .topArea .catch::after{
width: 0;
height: 0;
background: none;
border: none;
}
#sect05 .linkArea{
padding: 0 5%;
}
#sect05 .linkArea .btn-link {
margin: 2px 0!important;
}

#sect05 .slArea .sttl{
padding: 0 5% 30px;
}

#sect05 .ulBox{
overflow: visible;
margin: 0 0 40px;
padding: 0 0 50px;
}
#sect05 .liBox{
width: auto;
box-shadow: rgba(0, 0, 0, 1.0) 8px 8px 0 0;
cursor: pointer;
}
#sect05 .liBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.25);
opacity: 0;
transition: all .2s ease-in-out;
}
#sect05 .liBox:hover::before{
opacity: 1;
}

#sect05 .liBox .flame::before{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: calc(100% - 8px);
height: 1px;
background: #000;
}
#sect05 .liBox .flame::after{
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 1px;
height: calc(100% - 8px);
background: #000;
}


#sect05 .hoverCnt{
position: absolute;
width: 100%;
bottom: 0;
padding: 8px 3% 5px;
background: rgba(0,0,0,.3);
color: #fff;
opacity: 0!important;
transition: all .2s ease-in-out;
}
#sect05 .hoverCnt p{
margin: 0;
padding: 0;
font-size:1.2rem;
line-height: 1.7;
}
#sect05 .hoverCnt .caption,
#sect05 .hoverCnt .caption a{
text-align: right;
color: #fff;
}
#sect05 .liBox:hover .hoverCnt{
opacity: 1!important;
}


#sect05 .swp-prev,
#sect05 .swp-next{
width: 30px;
height: 10px;
position: absolute;
z-index: 1000;
bottom:0;
cursor: pointer;
}
#sect05 .swp-prev{
background: url(./img/arrow_bk_rv.svg) 50% 50% no-repeat;
background-size: 30px auto;
right: 18%;
}
#sect05 .swp-next{
background: url(./img/arrow_bk.svg) 50% 50% no-repeat;
background-size: 30px auto;
right: 5%;
}
#sect05 .swp-prev:hover,
#sect05 .swp-next:hover{
opacity: .5;
}

#sect05 .btn-web a{
width: auto;
padding: 1.1em 12% 1.2em;
}



/*------------
sect06_SP
------------*/
#sect06{
margin: 0 0 125px;
background: #f4f4f4;
}
#sect06 .sectinner{
position: relative;
padding: 50px 0 100px;
}
#sect06 .sectinner::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 116px;
background: url(./img/sct06_ph02_sp.jpg) 50% 0 no-repeat;
background-size: cover;
}

#sect06::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect06::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 116px;
background: url(./img/sct06_ph04_sp.jpg) 0 0 no-repeat;
background-size: cover;
}

#sect06 .headArea{
position: relative;
z-index: 1;
margin: 0 0 55px;
}
#sect06 .engL{
border: none;
text-align: right;
}
#sect06 .engL::before{
width: 0;
height: 0;
background: none;
border: none;
}

#sect06 .sectTtl{
margin: 0 0 20px;
padding: 30px 0 0;
}
#sect06 .intro{
padding: 0 0 0;
}
#sect06 .liBox{
display: block;
margin-bottom: 70px;
}

#sect06 .liBox a{
position: relative;
display: block;
height: 100%;
padding: 0 0 35px;
background: url(./img/intv2_more.svg) 100% 100% no-repeat;
background-size: 110% auto;
}
#sect06 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
top: -35px;
right: 0;
width: 130px;
height: 108px;
background: url(./img/sct06_num01.svg) 100% 0 no-repeat;
background-size: auto 108px;
}
#sect06 .liBox:nth-child(2) a::before{
background: url(./img/sct06_num02.svg) 100% 0 no-repeat;
background-size: auto 108px;
}
#sect06 .liBox:nth-child(3) a::before{
background: url(./img/sct06_num03.svg) 100% 0 no-repeat;
background-size: auto 108px;
}

#sect06 .liBox a::after{
content: "";
position: absolute;
top: -33px;
left: 0;
width: 22px;
height: 30px;
background: url(./img/sct06_q.svg) 0 0 no-repeat;
background-size: 22px auto;
}
#sect06 .liBox h3{
display: block;
margin: 0 0 15px;
font-size:1.8rem;
}
#sect06 .liBox p{
padding: 0;
}



/*------------
sct789_SP
------------*/
.sct789 .engL{
border-bottom: 2px solid #000;
}
.sct789 .engL::before{
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -100vw;
width: 100vw;
height: 2px;
background: #000;
}
.sct789 .indexSect{
padding: 0 0 45px;
}
.sct789 .indexSect::before{
width: 0;
height: 0;
background: none;
border: none;
}
.sct789 .indexSect::after{
content: "";
position: absolute;
z-index: -1;
top: 40px;
left: 75px;
width: calc(100% - 75px);
height: 165px;
background: #f4f4f4;
}
.sct789 .engL{
position: relative;
left: 0;
padding: 0 0 5px;
}
.sct789 .eng{
position: relative;
left: -60px;
margin: 0 0 10px;
}
.sct789 .sectTtl{
width: auto;
margin: 0 0 30px;
padding: 30px 0 0;
}
.sct789 .intro{
width: auto;
margin: 0 0 20px;
padding: 0;
}

.sct789 .ulBox{
margin: 0 0 40px;
}
.sct789 .liBox{
display: block;
}
.sct789 h3{
display: block;
width: 100%;
}
.sct789 .liBox a{
position: relative;
display: block;
width: 100%;
padding: 20px 0 40px;
background: url(./img/intv2_more.svg) 100% 100% no-repeat;
background-size: 110% auto;
font-size:1.8rem;
}
.sct789 .liBox a::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: url(./img/sct789_num01.svg) 0 0 no-repeat;
background-size: auto 36px;
}
.sct789 .botArea{
padding: 30px 5% 0;
}
.sct789 .botArea h3{margin: 0 0 20px;padding: 12px 5% 14px;background: #000;font-size:1.8rem;line-height: 1.4;color: #fff;}
.sct789 .botArea h3::before{
content: "";
position: absolute;
top: -35px;
left: -15px;
width: 110px;
height: 45px;
background: url(./img/sct789_cg.svg) 0 0 no-repeat;
background-size: 106px auto;
}

.sct789 .intv{
padding: 0 0 55px;
}
.sct789 .intv:last-child{
padding: 0 0 0;
}
.sct789 .intv::before{
width: 0;
height: 0;
background: none;
border: none;
}
.sct789 .intv::after{
width: 0;
height: 0;
background: none;
border: none;
}

.sct789 .intv a:hover img{
opacity: 1;
}
.sct789 .intv img{
max-width: 100%;
}

  
.sct789 .intv a::after{
content: "";
position: absolute;
top: 12px;
left: -5px;
width: 87px;
height: 114px;
background: #fff;
border: 1px solid #000;
}


.sct789 .intv .flame{
position: absolute;
top: -5px;
left: 10px;
}
.sct789 .intv .mainArea{
margin: 0 0 0;
padding: 50px 5% 60px;
background: none;
box-shadow: none;
}
.sct789 .intv .mainArea::before{
content: "";
position: absolute;
z-index: -1;
top: 120px;
left: 0;
width: 100%;
height: calc(100% - 120px);
background: url(./img/sct789_more_sp.svg) calc(100% - 10px) calc(100% - 20px) no-repeat #f4f4f4;
background-size: 100% auto;
box-shadow: rgba(0, 0, 0, 1.0) 8px 8px 0 0;
}

.sct789 .intv .catch{
margin: 0 0 20px 40%;
min-height: 90px;
}
.sct789 .botArea a::before{
content: "";
position: absolute;
z-index: 1;
top: 30px;
left: 41%;
width: 90px;
height: 15px;
background: url(./img/eng_int01.svg) 0 0 no-repeat;
background-size: auto 12px;
}
.sct789 .intv:nth-of-type(2) a::before{
background: url(./img/eng_int02.svg) 0 0 no-repeat;
background-size: auto 12px;
}









/*------------
sect07_SP
------------*/
#sect07{
}
#sect07 .line2{
display: block;
margin: -5px 0 0;
}
#sect07 .headImg1{
position: absolute;
z-index: 2;
top: -45px;
left: calc(50% + 35px);
width: 105px;
height: 150px;
background: url(./img/sct07_ph01.jpg) 0 0 no-repeat;
background-size: 105px auto;
}
#sect07 .headImg2{
content: "";
position: absolute;
z-index: 3;
top: 60px;
left: calc(50% + 100px);
width: 80px;
height: 80px;
background: url(./img/sct07_ph02.jpg) 0 0 no-repeat;
background-size: 80px auto;
}
#sect07 .ulBox2 .liBox:nth-child(1) a::before{
background: url(./img/sct789_num02.svg) 0 0 no-repeat;
background-size: auto 36px;
}
#sect07 .ulBox2 .liBox:nth-child(2) a::before{
background: url(./img/sct789_num03.svg) 0 0 no-repeat;
background-size: auto 36px;
}





/*------------
sect08_SP
------------*/
#sect08::before{
width: 0;
height: 0;
background: none;
border: none;
}
#sect08 .headArea{
text-align: left;
}
#sect08 .engL,
#sect08 .eng{
padding: 0 0 10px;
left: 0;
right: auto;
}
#sect08 .engL img {
width: auto;
height: 54px;
}
#sect08::after{
top: 90px;
left: 75px;
width: calc(100% - 75px);
height: 170px;
}
#sect08 .headImg1{
position: absolute;
z-index: 1;
top: -75px;
left: calc(50% + 60px);
width: 125px;
height: 125px;
background: url(./img/sct08_ph01.jpg) 0 0 no-repeat;
background-size: 125px auto;
}
#sect08 .headImg2{
position: absolute;
z-index: 1;
top: 10px;
left: calc(50% + 110px);
width: 80px;
height: 80px;
background: url(./img/sct08_ph02.jpg) 0 0 no-repeat;
background-size: 80px auto;
}
#sect08 .sectTtl{
margin: 0 0 30px; 
}
#sect08 .intro{
margin: 0 0 20px;
text-align: left;
}
#sect08 .ulBox{
position: relative;
left: 0;
}




/*------------
sect09_SP
------------*/
#sect09{
margin: 0 0 40px;
}
#sect09 .headImg1{
content: "";
position: absolute;
z-index: 5;
top: -60px;
left: calc(50% + 45px);
width: 105px;
height: 150px;
background: url(./img/sct09_ph01.jpg) 0 0 no-repeat;
background-size: 105px auto;
}
#sect09 .headImg2{
content: "";
position: absolute;
z-index: 6;
top: 20px;
left: calc(50% + 100px);
width: 80px;
height: 80px;
background: url(./img/sct09_ph02.jpg) 0 0 no-repeat;
background-size: 80px auto;
}


/*------------
sect10_SP
------------*/
#sect10{
margin: 0 5% 100px;
}
#sect10 .areaInner{
padding: 65px 0 10px;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
}
#sect10 .areaInner::before{
content: "";
position: absolute;
top: 30px;
left: 5px;
width: 115px;
height: 10px;
background: url(./img/eng_about.svg) 0 0 no-repeat;
background-size: auto 10px;
}
#sect10 h2{
margin: 0 0 15px;
font-size:1.8rem;
}
#sect10 p{
padding: 0;
}



/*  End_SP */

}