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

/*--------------------------------------
　Main Index
---------------------------------------*/
/*===========
inview
===========*/

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

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

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






/*------------
　body_PC
------------*/


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

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



/*--------------------------------------
　opening_PC
---------------------------------------*/
.opening{
position: fixed;
z-index: 2;
width: 100vw;
height: 100vh;
background: #fbfbfb;

/*display: none;*/
}
.opening::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #cdcdcd;

animation-delay:2s;
animation-name: bgOut;
animation-duration:6s;
animation-fill-mode:forwards;
}
@keyframes bgOut{
  from {
opacity: 1;
  }
  to {
opacity: 0;
  }
}


.sc{
display: none;
position: relative;
width: 100%;
height: 100%;
}

.sc .txt{
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.8;
font-size:3.0rem;
font-weight: 500;
}
.sc .txt2{
padding: 0 0 10.0rem;
}
.sc .txt2 .line{
display: block;
}
.sc .txt2 .fontL{
font-size:4.4rem;
color: #388177;
}

.sc .txt .char{
position: relative;
opacity: 0;
display: inline-block;
animation: inAnime 0.5s forwards;
}


.sc .flame{
position: fixed;
opacity: 0;
}
.sc .flame1{
width: 1200px;
top: calc(50vh - 10.0rem);
left: calc(50vw - 60.0rem);
opacity: 1;
}
.sc .flame1b{
width: 1200px;
top: calc(50vh - 10.0rem);
left: calc(50vw - 60.0rem);
opacity: 0;
}
.sc .flame2{
width: 60rem;
top: calc(50vh - 31vh);
left: calc(50vw - 80.0rem);
z-index: 2;
}
.sc .flame3{
width: 100%;
top: calc(50vh + 3vh);
}
.sc .flame3 img{
width: 100%;
}

.sc .flame img{
width: 100%;
}
.sc .flame svg{
width: 100%;
}



.fdin{
animation-name: inAnime;
animation-delay:0;
animation-duration:.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes inAnime{
  from {
opacity: 0;
  }
  to {
opacity: 1;
  }
}

.fdout{
animation-name: outAnime;
animation-duration:.5s;
animation-fill-mode:forwards;
}
@keyframes outAnime{
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
}
}

.fdout2{
animation-name: outAnime2;
animation-duration:2s;
animation-fill-mode:forwards;
animation-timing-function: ease-out;
}
@keyframes outAnime2{
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.fdin2{
animation-name: inAnime2;
animation-duration:4s;
animation-fill-mode:forwards;
animation-timing-function: ease-out;
opacity: 0;
}
@keyframes inAnime2{
  from {
opacity: 0;
  }
  to {
opacity: 1;
  }
}



/***************************************************
 * Generated by SVG Artista on 3/8/2025, 3:41:36 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 1331.2333984375px;
  stroke-dasharray: 1331.2333984375px;
  -webkit-transition: stroke-dashoffset 0.8s ease-in-out 0s;
          transition: stroke-dashoffset 0.8s ease-in-out 0s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
  
/*animation-name: outAnime;*/
animation-delay:2.0s;
animation-duration:.5s;
animation-fill-mode:forwards;
}


/***************************************************
 * Generated by SVG Artista on 3/9/2025, 12:33:08 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-2 {
  stroke-dashoffset: 2662.466796875px;
  stroke-dasharray: 1331.2333984375px;
  -webkit-transition: stroke-dashoffset 0.5s ease-in 0s;
          transition: stroke-dashoffset 0.5s ease-in 0s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 1331.2333984375px;
}


/*--------------------------------------
　container_PC
---------------------------------------*/
.container{
position: relative;
z-index: 1;
background: #fbfbfb;
scrollbar-gutter: stable;/* スクロールバーガタつき防止 */
}





/*--------------------------------------
　header_PC
---------------------------------------*/
#header{
min-height: 0;
background: none;
}
#header .mvArea{
position: relative;
padding: 145px 0 50px;
}

/* ill */
#header .mvArea .flame{
position: absolute;
}


#header .mvArea .rainbow{
right: 0;
bottom: 0;
clip-path: inset(0 100% 0 0);
}
.rbin{
animation-name: rbinAnime;
animation-delay:1.2s;
animation-duration:1s;
animation-fill-mode:forwards;
/*animation-timing-function: ease-in;*/
}
@keyframes rbinAnime{
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0);
}
}



#header .mvArea .ill01{
z-index: 1;
top: 420px;
left: calc(50% + 330px);
}
#header .mvArea .ill03{
top: 260px;
left: calc(50% - 725px);
}
#header .mvArea .ill04{
top: 500px;
left: calc(50% + 565px);
}
#header .mvArea .ill05{
top: 50px;
left: calc(50% - 545px);
}
#header .mvArea .ill06{
top: 95px;
left: calc(50% + 530px);
}
#header .mvArea .ill07{
top: 575px;
left: calc(50% - 670px);
}

/* #header .mvArea .ill{
position: absolute;
  animation: floating-x 2.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translate(-2%);
  }
  100% {
    transform: translate(2%);
  }
} */
#header .mvArea .ill img{
opacity: 0;
}
.fdin2{
animation-name: inAnime2;
animation-duration:1s;
animation-delay:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes inAnime2{
  from {
opacity: 0;
  }
  to {
opacity: 1;
  }
}



/* ywBox */
#header .mvArea .ywBox{
position: relative;
width: 800px;
margin: 0 auto 30px;
padding: 50px 50px;
background:rgba(248, 235, 183,.9);
border-radius:50px;
overflow: hidden;
}
#header .mvArea .ywBox::before{
content: "";
position: absolute;
z-index: 0;
top: -520px;
left: -200px;
width: 708px;
height: 580px;
background: url("./img/shape2.svg") 0 0 no-repeat;
background-size: 708px auto;
transform: scale(1, -1) rotate(-156deg);
}
#header .mvArea .ywBox .inner{
position: relative;
text-align: center;
font-weight: 500;
font-size:2.4rem;
letter-spacing: .05em;
}
#header .mvArea .ywBox .fontL{
text-decoration: underline;
font-size:3.6rem;
}
#header .mvArea .note{
text-align: center;
font-size:1.2rem;
color: #777;
}



/* mokuji2 */
#header .mokuji2{
display: flex;
flex-wrap: wrap;
align-items: center;
width: 800px;
margin: 90px auto 0;
background: rgba(255,255,255,.90);
border-radius:20px;
}
#header .mokuji2 .sttl{
width: 210px;
padding: 60px 0 0;
background: url("./img/mv_icon.png") 50% 0 no-repeat;
text-align: center;
font-size:1.5rem;
}
#header .mokuji2 .ulBox{
padding: 30px 50px 30px 0;
}
#header .mokuji2 .liBox{
margin: 3px 0;
padding: 0 0 0 3rem;
background: url("./img/arrow_ccl.svg") 0 6px no-repeat;
background-size: 22px auto;
}
#header .mokuji2 a{
line-height: 1.5;
font-size:1.6rem;
font-weight: 500;
letter-spacing: .05em;
}
#header .mokuji2 .fontL{
text-decoration: underline;
font-size:2.0rem;
}


/*------------
#page-top_PC
------------*/




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

#contents{
padding: 0 0 0;
}

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



/*------------
indexSect_PC
------------*/
.indexSect{
position: relative;
}
.indexSect::before{
content: "";
position: absolute;
top: 30px;
right: 40px;
width: 330px;
height: 61px;
background: url(./img/eng_mth.svg) 100% 0 no-repeat;
background-size: auto 61px;
}

.indexSect .areaInner{
}

.indexSect .sectTtlArea{
position: relative;
z-index: 1;
padding: 0 0 70px;
}

.indexSect .sectTtl{
position: relative;
z-index: 1;
margin: 0 0 35px;
text-align: center;
}
.indexSect .sectTtl .fuki{
display: block;
margin-bottom: -2rem;
}
.indexSect .sectTtl .fuki span{
display: inline-block;
margin: 0 0 15px;
padding: 2px 20px 6px;
background: #533c2e;
border-radius:10px;
line-height: 1;
font-size:2.4rem;
font-weight: 500;
color: #fff;
}
.indexSect .sectTtl .mainTtl{
margin: 0 0 20px;
font-size:4.0rem;
}
.indexSect .sectTtl .mainTtl .fontL{
display: inline;
background: url(./img/marker2_yw.png) 0 90% repeat-x;
background-size: 78px auto;
font-size:5.0rem;
}
.indexSect .sectTtl .mainTtl .fontS{
display: block;
margin: 5px 0 0;
line-height: 1.2;
font-size:3.0rem;
}

.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arw{
position: relative;
display: block;
padding: 0 25px 0 0;
}
.indexSect .sectTtl a .arw::before{
content: "";
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 41px;
height: 100%;
background: url("./img/arrow_ccl.svg") 99% calc(50% - 0px) no-repeat;
background-size: 41px 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% - 40px) / 2);
margin: 0 40px 0 0;
}
.indexSect .box2 .liBox:nth-child(2n){
margin: 0 0 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
------------*/
#sect01{
padding: 100px 0 0;
background: url("./img/lineart2.svg") 50% 365px no-repeat #efeeea;
background-size: 1560px auto;
}
#sect01::after{
content: "";
position: absolute;
top: 50px;
left: calc(50% - 380px);
width: 240px;
height: 210px;
background: url("./img/shape3.svg") 0 0 no-repeat;
background-size: 240px auto;
opacity: .5;
}
#sect01 .inner{
position: relative;
}
#sect01 .inner::before{
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./img/lineart3.svg") 50% 250px no-repeat;
background-size: 1273px auto;
}
#sect01 .areaInner{
z-index: 1;
}
#sect01 .sectTtl .mainTtl .fontL{
background-image: url(./img/marker2_wt.png);
}
#sect01 .sectTtlArea p{
padding: 0 100px;
}


#sect01 .tabcontents{
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
padding: 0 0 30px;
}
#sect01 .tabcontents-list{
position: relative;
width: calc((100% - 60px) / 2);
margin: 0 60px 0 0;
padding: 80px 40px 20px;
background: #fff;
border-radius:20px;
}
#sect01 .tabcontents-list:nth-child(2){
margin: 0 0 0 0;
}
#sect01 .tabcontents-list .boxhead{
position: absolute;
top: -55px;
left: calc(50% - 55px);
display: flex;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
background: #f8cb50;
line-height: 1.3;
border-radius:50%;
font-size:2.8rem;
text-align: center;
}
#sect01 .tabcontents-list:nth-child(2) .boxhead{
background: #fde580;
}

#sect01 .tabcontents-list .headArea{
margin: 0 0 50px;
}
#sect01 .tabcontents-list .headArea h4{
z-index: 2;
width: 160px;
margin: 0 auto -15px;
padding: 4px 10px 6px;
background: #f8cb50;
border-radius:10px;
text-align: center;
line-height: 1;
font-size:2.0rem;
}
#sect01 .tabcontents-list:nth-child(2) .headArea h4{
background: #fde580;
}
#sect01 .tabcontents-list .headArea .ulBox{
position: relative;
padding: 35px 20px;
background: #f9f9f9;
border-radius:20px;
overflow: hidden;
}
#sect01 .tabcontents-list .headArea .ulBox::before{
content: "";
position: absolute;
bottom: -120px;
right: -80px;
width: 255px;
height: 210px;
background: url("./img/shape4.svg") 0 0 no-repeat;
background-size: 255px auto;
transform: scale(1, -1) rotate(15deg);
}
#sect01 .tabcontents-list .headArea .liBox{
margin: 10px 0;
font-size:1.6rem;
font-weight: 500;
letter-spacing: .05em;
}
#sect01 .tabcontents-list .headArea .ccl{
display: inline-block;
margin: 0 .5rem 0 0;
width: 32px;
height: 32px;
background: #533c2e;
border-radius:50%;
font-size:1.4rem;
color: #fff;
text-align: center;
}

#sect01 .tabcontents-list .mini{
padding: 0 10px 30px;
}
#sect01 .tabcontents-list .mini h4{
margin: 0 0 25px;
text-align: center;
font-size:2.0rem;
}
#sect01 .tabcontents-list .mini .ulBox{
display: flex;
flex-wrap: wrap;
}
#sect01 .tabcontents-list .mini .liBox{
width: calc((100% - 50px) / 2);
margin: 0 50px 0 0;
}
#sect01 .tabcontents-list .mini .liBox:nth-child(2n){
margin: 0;
}

#sect01 .tabcontents-list .mini .flame{
position: relative;
margin: 0 0 10px;
}
#sect01 .tabcontents-list .mini .flame img{width: 80%;   /* 元のサイズの80%に */height: auto; /* アスペクト比を保ったまま縮小 */display: block;margin: 0 auto; /* 中央寄せ */}
#sect01 .tabcontents-list .mini1 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: -15px;
left: -15px;
width: 59px;
height: 50px;
background: url(./img/sct01_deco1.png) 0 0 no-repeat;
background-size: 59px auto;
}
#sect01 .tabcontents-list:nth-child(2) .mini1 .flame::before{
background-image: url(./img/sct01_deco2.png);
}
#sect01 .tabcontents-list .mini img{/* object-fit: cover; *//* height: 154px; */object-fit: cover;/* border-radius: 20px; */}
#sect01 .tabcontents-list .mini .note{
line-height: 1.3;
text-align: center;
}



#sect01 .botArea2{
position: relative;
padding: 140px 0 120px;
background: url(./img/sct01_home.svg) calc(50% - 900px) 50px no-repeat #f6f2e7;
background-size: 436px auto;
}
#sect01 .botArea2::before{
content: "";
position: absolute;
z-index: 0;
bottom: 50px;
left: calc(50% + 320px);
width: 180px;
height: 210px;
background: url(./img/shape3.svg) 100% 0 no-repeat;
background-size: 180px auto;
transform:rotate(-100deg)
}

#sect01 .botArea2 .wtBox{
position: relative;
width: 800px;
margin: 0 auto;
background: #fff;
border-radius:30px;
}
#sect01 .botArea2 .wtBox::before{
content: "";
position: absolute;
top: -110px;
left: 0;
width: 100%;
height: 80px;
background: url("./img/arrow3.svg") 50% 0 no-repeat;
background-size: 45px auto;
}

#sect01 .botArea2 .headcopy{
display: block;
padding: 6px 40px 8px;
background: #533c2e;
border-radius:30px 30px 0 0;
font-size:2.0rem;
color: #fff;
}
#sect01 .botArea2 .headcopy .txt_bold{
color: #f8cb50;
}
#sect01 .botArea2 .mainTtl{
display: block;
padding: 20px 350px 10px 40px;
font-size:2.4rem;
}
#sect01 .botArea2 .mainTtl .fontL{
text-decoration: underline;
font-size:3.0rem;
}
#sect01 .botArea2 .flame{
position: absolute;
top: -67px;
right: 40px;
width: 30%;
border: #533c2e solid 1px;
border-radius: 2rem;
}
#sect01 .botArea2 .flame img{
height: 173px;
object-fit: cover;
border-radius:20px;
}
#sect01 .botArea2 .txtArea{
padding: 0 40px 20px;
}


/*------------
sect02_PC
------------*/
#sect02{
padding: 140px 0 130px;
background: #fff;
}
#sect02::before{
width: 210px;
height: 58px;
background: url("./img/eng_case.svg") 100% 0 no-repeat;
background-size: auto 58px;
}

#sect02 .sectTtlArea{
padding: 0 0 4rem;
}
#sect02 .sectTtlArea::before{
content: "";
position: absolute;
top: 30px;
right: -85px;
width: 216px;
height: 200px;
background: url(./img/shape3.svg) 0 0 no-repeat;
background-size: 216px auto;
transform: rotate(-175deg);
opacity: .5;
}
#sect02 .sectTtlArea .fuki span{/* display: block; */text-align: center;}
#sect02 .sectTtl{
width: 370px;
float: left;
text-align: left;
}
#sect02 .sectTtlArea p{
margin: 60px 0 0;
width: 555px;
float: right;
}

#sect02 .ulBox{
padding: 70px 0 30px;
}
#sect02 .ulBox::before{
content: "";
position: absolute;
top: 0;
left: calc(50% - 400px);
width: calc(50vw + 400px);
height: 100%;
background: #efeeea;
border-radius:30px 0 0 30px;
}
#sect02 .liBox{
min-height: 410px;
margin: 0 0 50px;
padding: 20px 0;
}
#sect02 .liBox::before{
content: "";
position: absolute;
top: 0;
left: calc(500px - 50vw);
width: calc(50vw + 550px);
height: 100%;
background: #fff;
border-radius:0 30px 30px 0;
border: 2px solid #efeeea;
}
#sect02 .liBox .headArea{
position: relative;
width: 525px;
margin: 0 0 15px;
}
#sect02 .liBox .headArea .ccl{
position: relative;
top: 5px;
display: inline-block;
width: 100px;
height: 100px;
margin: 0 2rem 0 0;
padding: 20px 0 0;
background: #fde580;
border-radius:50%;
line-height: 1.1;
text-align: center;
font-size:1.6rem;
}
#sect02 .liBox .headArea .ccl .fontL{
display: block;
font-size:3.6rem;
}
#sect02 .liBox .headArea h3{
display: inline-block;
font-size:2.8rem;
}
#sect02 .liBox .headArea h3 .fontL{
text-decoration: underline;
font-size:3.6rem;
}
#sect02 .liBox .imgArea{
position: absolute;
top: 50px;
right: 0;
width: 410px;
}
#sect02 .liBox .flame{
width: 410px;
}
#sect02 .liBox .flame img{
height: 290px;
}
#sect02 .liBox .txtArea{
position: relative;
width: 525px;
}
#sect02 .liBox .txtArea p{
line-height: 1.9;
}


/*------------
sect03_PC
------------*/
#sect03{
padding: 50px 0 0;
}
#sect03::before{
width: 370px;
height: 61px;
background: url("./img/eng_prob.svg") 100% 0 no-repeat;
background-size: auto 61px;
}
#sect03::after{
content: "";
position: absolute;
top: 100px;
left: calc(50% - 450px);
width: 255px;
height: 210px;
background: url("./img/shape5.svg") 0 0 no-repeat;
background-size: 255px auto;
transform: scale(1, -1) rotate(120deg);
}
#sect03 .sectTtlArea {
position: relative;
z-index: 1;
padding: 0 0 110px;
}
#sect03 .sectTtl{
margin: 0 0 0 425px;
width: 390px;
}

#sect03 .ill{
position: absolute;
z-index: 2;
top: 75px;
left: calc(50% - 350px);
width: 170px;
}

#sect03 .obi{
position: relative;
padding: 25px 0 27px;
background: #533c2e;
text-align: center;
line-height: 1.4;
font-size:2.4rem;
font-weight: 500;
letter-spacing: .05em;
color: #fff;
}
#sect03 .obi::before{
content: "";
position: absolute;
z-index: 1;
bottom: -31px;
left: 0;
width: 100%;
height: 32px;
background: url("./img/tri3.svg") 50% 0 no-repeat;
background-size: auto 32px;
}


#sect03 .botCommon2 .areaInner{
padding: 90px 0 30px;
}
#sect03 .botCommon2 .btns{
margin: 0 80px;
}
#sect03 .botCommon2 .mainArea{
position: relative;
width: 470px;
margin: 0 0 60px 530px;
}
#sect03 .botCommon2 .mainArea::before {
content: "";
position: absolute;
z-index: 2;
bottom: -177px;
right: -20px;
width: 143px;
height: 170px;
background: url(./img/ohkuma-cat.png) 0 0 no-repeat;
background-size: 143px auto;
}
#sect03 .botCommon2 .mainArea::after {
content: "";
position: absolute;
bottom: -170px;
right: -40px;
width: 166px;
height: 150px;
background: url(./img/shape3.svg) 100% 100% no-repeat;
background-size: 166px auto;
opacity: .5;
}
#sect03 .botCommon2 .imgArea{
position: absolute;
top: 0;
left: -480px;
width: 450px;
}
#sect03 .caption{
margin: 5px 0 0;
}
#sect03 .botCommon2 .catch{
padding: 0 25px;
}



/* .slider4 */
#slider4{
position: relative;
z-index: 1;
margin: 0 0 60px;
padding: 40px 0 60px;
}
#slider4::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 220px;
background: #efeeea;
}

#slider4 .slick-slide{
height: 244px;
background: url(./img/slide.svg) 0 0 no-repeat;
background-size: 100% 244px;
margin-right: 1.5vw !important;
margin-left: 1.5vw !important;
}
#slider4 .slick-slide a{
display: flex;
align-items: center;
justify-content: center;
height: 244px;
padding: 0 2.0vw;
background: url("./img/arrow_slide.svg") 50% 90% no-repeat;
background-size: 70px auto;
text-align: center;
font-size:2.4rem;
}


#slider4 .slick-arrow:before{
content:""!important;
}
#slider4 .slick-prev, #slider4 .slick-next {
z-index:2;
top: 0;
width: 58px;
height: 58px;
background: url("./img/arrow_ccl_rv.svg") 0 0 no-repeat;
background-size: 58px auto;
opacity: .5;
}
#slider4 .slick-next {
background: url(./img/arrow_ccl.svg) 0 0 no-repeat;
background-size: 58px auto;
}
#slider4 .slick-prev{
left:calc(50% + 195px)!important;
}
#slider4 .slick-next{
left:calc(50% + 265px)!important;
}

#slider4 .slick-dots{
bottom: 0px;
margin: 0;
padding: 0;
}
#slider4 .slick-dots li::before {
width: 0;
height: 0;
background: none;
border: none;
}
#slider4 .slick-dots li {
margin: 0 15px;
}
#slider4 .slick-dots li button:before{
font-size:16px;
color: #e2dddb;
opacity: 1;
}
#slider4 .slick-dots li.slick-active button:before{
color: #4c1015;
}





/*------------
sect04_PC
------------*/
#sect04{
padding: 140px 0 60px;
background: url(./img/lineart1.svg) 100% 55px no-repeat #efeae0;
background-size: 100vw auto;
}
#sect04::before{
width: 490px;
height: 76px;
background: url("./img/eng_kn.svg") 100% 0 no-repeat;
background-size: auto 76px;
}

#sect04 .sectTtlArea{
padding: 0 0 5rem;
}
#sect04 .sectTtlArea .fuki span{/* display: block; */text-align: center;}
#sect04 .sectTtl{
width: 402px;
float: left;
text-align: left;
}
#sect04 .sectTtl .mainTtl .fontL{
background-image: url(./img/marker2_wt.png);
}
#sect04 .sectTtlArea p{
margin: 20px 0 0;
width: 500px;
float: right;
}

#sect04 .note {
width: 470px;
margin: 0 auto;
padding: 15px 20px;
line-height: 1;
background: rgba(240, 224, 192,.50);
border-radius:20px;
text-align: center;
}


#sect04 .ulBox {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1110px;
margin: 0 auto;
padding: 50px 0 0;
}
#sect04 .liBox{
width: 320px;
height: 320px;
margin: 0 25px 50px;
background: #fff;
border-radius:50%;
}
#sect04 .liBox::before{
content: "";
position: absolute;
z-index: -1;
bottom: -4px;
right: -10px;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius:50%;
}

#sect04 .liBox a{
height: 100%;
}
#sect04 .liBox a:hover{
opacity: 1;
}
#sect04 .liBox a::before{
content: "";
position: absolute;
z-index: 2;
bottom: -5px;
right: -5px;
width: 105px;
height: 78px;
background: url(./img/sct04_more.png) 0 0 no-repeat;
background-size: 105px auto;
}

#sect04 .item_content{
position: relative;
height: 100%;
overflow: hidden;
}
#sect04 .item_image{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
font-size:2.2rem;
}
#sect04 .item_image::before{
content: "";
position: absolute;
top: 25px;
left: 0;
width: 100%;
height: 80px;
background: url(./img/shape3.svg) 50% 50% no-repeat;
background-size: 78px auto;
transform: rotate(22deg);
}
#sect04 .item_image::after{
content: "01";
position: absolute;
top: 50px;
left: 0;
width: 100%;
font-size:1.6rem;
color: #cda331;
}
#sect04 .liBox:nth-child(2) .item_image::after{content: "02";}
#sect04 .liBox:nth-child(3) .item_image::after{content: "03";}
#sect04 .liBox:nth-child(4) .item_image::after{content: "04";}
#sect04 .liBox:nth-child(5) .item_image::after{content: "05";}

#sect04 .item_mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fde580;
border-radius:50%;
opacity: 0;
}
#sect04 .item_mask-text{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 60px 40px;
text-align: center;
}
#sect04 .item_link:hover .item_mask {
opacity: 1;
}
/* -fade-in */
#sect04 .-fade-in .item_mask {
transition: opacity .6s ease;
}

#sect04 .item_mask-text p{
margin: 3px 0;
font-size: 1.5rem;
line-height: 1.5;
}

#sect04 .item_mask-text .btn-link span{
position: relative;
display: block;
padding: 4px 22px 5px 0;
background: url(./img/arrow.svg) 99% calc(50% - 0px) no-repeat;
background-size: 16px auto;
font-size:1.3rem;
line-height: 1.5;
font-weight: 500;
text-align: center;
text-decoration: none;
}

#sect04 .item_mask-text .btn-link::after {
  content: "";
  background: url(./img/arrow.svg) no-repeat;
  background-size: 13px auto;
  width: 13px;
  display: block;
  height: 45px;
  position: relative;
  left: 145px;
  top: -19px;
}


/*------------
sect05_PC
------------*/
#sect05{
padding: 180px 0 190px;
}
#sect05 .grBox{
position: relative;
padding: 60px 50px 30px 275px;
background: #eae9e5;
border-radius:20px;
}
#sect05 .grBox .flame{
position: absolute;
top: 40px;
left: 50px;
display: flex;
align-items: center;
padding: 0 25px;
width: 180px;
height: 180px;
background: #fbfbfa;
border-radius:50%;
}
#sect05 .grBox .sttl{
font-size:2.0rem;
}



/* End_PC */




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



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


/*--------------------------------------
　opening_SP
---------------------------------------*/
.opening{
position: fixed;
z-index: 2;
width: 100vw;
height: 100vh;
background: #fbfbfb;

/*display: none;*/
}

.sc{
position: relative;
width: 100%;
height: 100%;
}

.sc .txt{
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.8;
font-size:2.0rem;
font-weight: 500;
}
.sc .txt2{
padding: 0 0 5.0rem;
}
.sc .txt2 .line{
display: block;
}
.sc .txt2 .fontL{
font-size:3.2rem;
color: #388177;
}

.sc .txt .char{
opacity: 0;
display: inline-block;
animation: inAnime 0.5s forwards;
}


.sc .flame{
position: fixed;
opacity: 0;
}
.sc .flame1{
width: 98vw;
top: calc(50vh - 10.0rem);
left: 1vw;
opacity: 1;
}
.sc .flame1b{
width: 98vw;
top: calc(50vh - 10.0rem);
left: 1vw;
opacity: 0;
}
.sc .flame2{
width: 10rem;
top: calc(50vh - -10vh);
left: 5vw;
z-index: 2;
}
.sc .flame3{
width: 100%;
top: calc(50vh + 5vh);
}
.sc .flame img{
width: 100%;
}
.sc .flame svg{
width: 100%;
}



/*--------------------------------------
　header_SP
---------------------------------------*/
#header{
position: relative;
z-index: 14;
min-height: 0;
margin: 0;
padding: 0 3% 30px;
background: none;
}
#header .mvArea{
position: relative;
padding: 30px 0 25px;
}

/* ill */
#header .mvArea .flame{
position: absolute;
}

#header .mvArea .rainbow{
width: 18.0rem;
right: -3%;
top: -120px;
clip-path: inset(0 100% 0 0);
}
.rbin{
animation-name: rbinAnime;
animation-delay:1s;
animation-duration:1s;
animation-fill-mode:forwards;
/*animation-timing-function: ease-in;*/
}
@keyframes rbinAnime{
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0);
}
}


#header .mvArea .flame img{
width: 100%;
}
#header .mvArea .rainnow{
display: none;
}
#header .mvArea .ill01{
z-index: 1;
width: 6.8rem;
top: 28.0rem;
left: calc(100% - 6.0rem);
}
#header .mvArea .ill03{
width: 6.0rem;
top: -7.0rem;
left: calc(100% - 7.0rem);
}
#header .mvArea .ill04{
width: 5.7rem;
top: -11.0rem;
left: calc(100% - 11.0rem);
}
#header .mvArea .ill06{
width: 9.0rem;
top: 40.0rem;
left: calc(50% - 10.0rem);
}
#header .mvArea .ill07{
width: 9.3rem;
top: 42.0rem;
left: calc(50% + 2.0rem);
}

/* #header .mvArea .ill{
position: absolute;
  animation: floating-x 2.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translate(-5%);
  }
  100% {
    transform: translate(5%);
  }
} */
#header .mvArea .ill img{
opacity: 0;
}



/* ywBox */
#header .mvArea .ywBox{
position: relative;
width: auto;
margin: 0 auto 20px;
padding: 30px 5%;
background:rgba(248, 235, 183,.9);
border-radius:25px;
overflow: hidden;
}
#header .mvArea .ywBox::before{
content: "";
position: absolute;
z-index: 0;
top: -20.0rem;
left: -10.0rem;
width: 35.0rem;
height: 30.0rem;
background: url("./img/shape2.svg") 0 0 no-repeat;
background-size: 350px auto;
transform: scale(1, -1) rotate(-156deg);
}
#header .mvArea .ywBox .inner{
position: relative;
text-align: center;
font-weight: 500;
font-size:1.6rem;
letter-spacing: .05em;
line-height: 2.2;
}

#header .mvArea .ywBox .fontL{
text-decoration: underline;
font-size:2.0rem;
}
#header .mvArea .note{
text-align: left;
font-size:1.2rem;
color: #777;
}



/* mokuji2 */
#header .mokuji2{
display: block;
width: auto;
margin: 130px auto 0;
background: rgba(255,255,255,.90);
border-radius:20px;
}
#header .mokuji2 .sttl{
width: auto;
margin: 0 5%;
padding: 20px 0 15px 3.0rem;
background: url("./img/mv_icon.png") calc(50% - 25px) 16px no-repeat;
background-size: 35px auto;
border-bottom: 2px solid rgba(83, 60, 46, .50);
text-align: center;
font-size:1.5rem;
}
#header .mokuji2 .ulBox{
padding: 15px 5% 50px;
}
#header .mokuji2 .liBox{
margin: 3px 0;
padding: 0 0 0 3rem;
background: url("./img/arrow_ccl.svg") 0 6px no-repeat;
background-size: 20px auto;
}
#header .mokuji2 a{
line-height: 1.5;
font-size:1.6rem;
font-weight: 500;
letter-spacing: .05em;
}
#header .mokuji2 .fontL{
text-decoration: underline;
font-size:1.8rem;
}


/* accordion_grd */
.mokuji2 .text {
height: 16.0rem;
overflow: hidden;
}
.mokuji2 .show_more3 {
position: absolute;
bottom: 0;
left: 0px;
width: 100%;
height: 5.0rem;
padding-top: 4.0rem;
text-align: center;
line-height: 7.0rem;
background: linear-gradient(
180deg,
rgb(255, 255, 255, 0) 0%,
rgb(255, 255, 255, 1) 60%
);
border-radius:0 0 15px 15px;
cursor: pointer;
transition: bottom 0.2s;
}
.mokuji2 .active{
background: none;
/*bottom: -20px;*/
}
.mokuji2 .show_more3 span{
position: relative;
top: -3.0rem;
display: inline-block;
width: 14.0rem;
padding: 8px 3.0rem 10px;
background: url(./img/plus.svg) 90% calc(50% - 1px) no-repeat #fff;
background-size: 12px auto;
border-radius:9999px;
border: 1px solid #c1b6b0;
text-align: center;
line-height: 1.5;
color: #4c1015;
font-weight: 500;
font-size:1.3rem;
}
.mokuji2 .active span{
background: url(./img/minus.svg) 90% 50% no-repeat #fff;
background-size: 12px auto;
}





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

.indexSect{
position: relative;
}
.indexSect::before{
content: "";
position: absolute;
top: 17px;
right: 5%;
width: 253.0rem;
height: 2.3rem;
background: url(./img/eng_mth.svg) 100% 0 no-repeat;
background-size: auto 23px;
}

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

.indexSect .sectTtlArea{
position: relative;
z-index: 1;
padding: 0 0 35px;
}


.indexSect .sectTtl{
position: relative;
z-index: 1;
margin: 0 0 15px;
text-align: center;
}
.indexSect .sectTtl .fuki{
display: block;
}
.indexSect .sectTtl .fuki span{
display: inline-block;
margin: 0 0 12px;
padding: 2px 5% 6px;
background: #533c2e;
border-radius: 5px;
line-height: 1;
font-size: 1.8rem;
font-weight: 500;
color: #fff;
}
.indexSect .sectTtl .mainTtl{
margin: 0 0 20px;
font-size:2.4rem;
}
.indexSect .sectTtl .mainTtl .fontL{
display: inline;
background: url(./img/marker2_yw.png) 0 90% repeat-x;
background-size: 46px auto;
font-size:3.0rem;
}
.indexSect .sectTtl .mainTtl .fontS{
display: block;
margin: 25px 0 0;
line-height: 1.2;
font-size:2.0rem;
}

.indexSect .sectTtl a{
}
.indexSect .sectTtl a .arw{
position: relative;
display: block;
padding: 0 10% 0 0;
}
.indexSect .sectTtl a .arw::before{
content: "";
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 2.6rem;
height: 100%;
background: url("./img/arrow_ccl.svg") 99% calc(50% - 0px) no-repeat;
background-size: 26px 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
------------*/
#sect01{
padding: 60px 0 0;
background: #efeeea;
}
#sect01::after{
content: "";
position: absolute;
top: 4.0rem;
left: 2%;
width: 12.0rem;
height: 10.5rem;
background: url("./img/shape3.svg") 0 0 no-repeat;
background-size: 120px auto;
opacity: .5;
}
#sect01 .inner{
position: relative;
}
#sect01 .inner::before{
width: 0;
height: 0;
background: none;
border: none;
}


#sect01 .sectTtl .mainTtl .fontL{
background-image: url(./img/marker2_wt.png);
}
#sect01 .sectTtlArea p{
padding: 0 0;
}


#sect01 .tab{
display: flex!important;
flex-wrap: wrap;
}
#sect01 .tablist{
width: calc((100% - 2.8rem) / 2);
margin: 0 .7rem;
padding: 12px 5% 13px;
background: #f8cb50;
border-radius:25px 25px 0 0;
text-align: center;
font-size:2.1rem;
font-weight: 500;
}
#sect01 .tablist:nth-child(2){
background: #fde580;
}

#sect01 .tab-botom{
margin: 0 0 40px;
}
#sect01 .tab-botom .tablist{
border-radius:0 0 25px 25px;
}



#sect01 .tabcontents{
position: relative;
z-index: 2;
display: block;
padding: 0 0 0;
}
#sect01 .tabcontents-list{
position: relative;
width: auto;
margin: 0 0 0 0;
padding: 40px 5% 10px;
background: #fff;
border-radius:0;
border-top: 5px solid #f8cb50;
border-bottom: 5px solid #f8cb50;
}
#sect01 .tabcontents-list:nth-child(2){
margin: 0 0 0 0;
border-top: 5px solid #fde580;
border-bottom: 5px solid #fde580;
}


#sect01 .tabcontents-list .headArea{
margin: 0 0 25px;
}
#sect01 .tabcontents-list .headArea h4{
z-index: 2;
width: 13rem;
margin: 0 auto -15px;
padding: 6px 5% 7px;
background: #f8cb50;
border-radius:5px;
text-align: center;
line-height: 1;
font-size:1.6rem;
}
#sect01 .tabcontents-list:nth-child(2) .headArea h4{
background: #fde580;
}
#sect01 .tabcontents-list .headArea .ulBox{
position: relative;
padding: 25px 5%;
background: #f9f9f9;
border-radius:10px;
overflow: hidden;
}
#sect01 .tabcontents-list .headArea .ulBox::before{
content: "";
position: absolute;
bottom: -6.0rem;
right: -4.0rem;
width: 12.5rem;
height: 10.5rem;
background: url("./img/shape4.svg") 0 0 no-repeat;
background-size: 125px auto;
transform: scale(1, -1) rotate(15deg);
}
#sect01 .tabcontents-list .headArea .liBox{
margin: 10px 0;
font-size:1.6rem;
font-weight: 500;
letter-spacing: .05em;
}
#sect01 .tabcontents-list .headArea .ccl{
position: relative;
top: -2px;
display: inline-block;
margin: 0 .5rem 0 0;
padding: 2px 0 0;
width: 3.1rem;
height: 3.1rem;
background: #533c2e;
border-radius:50%;
font-size:1.3rem;
color: #fff;
text-align: center;
}

#sect01 .tabcontents-list .mini{
padding: 0 0 15px;
}
#sect01 .tabcontents-list .mini h4{
margin: 0 0 25px;
text-align: center;
font-size:1.6rem;
}
#sect01 .tabcontents-list .mini .ulBox{
display: flex;
flex-wrap: wrap;
}
#sect01 .tabcontents-list .mini .liBox{
width: calc((100% - 10%) / 2);
margin: 0 10% 0 0;
}
#sect01 .tabcontents-list .mini .liBox:nth-child(2n){
margin: 0;
}

#sect01 .tabcontents-list .mini .flame{
position: relative;
margin: 0 0 5px;
}
#sect01 .tabcontents-list .mini1 .flame::before{
content: "";
position: absolute;
z-index: -1;
top: -1.5rem;
left: -1.2rem;
width: 5.9rem;
height: 5.0rem;
background: url(./img/sct01_deco1.png) 0 0 no-repeat;
background-size: 59px auto;
}
#sect01 .tabcontents-list:nth-child(2) .mini1 .flame::before{
background-image: url(./img/sct01_deco2.png);
}
#sect01 .tabcontents-list .mini img{height: 100%;object-fit: cover;border-radius:10px;}
#sect01 .tabcontents-list .mini .note{
line-height: 1.3;
text-align: center;
font-size:1.3rem;
padding-bottom: 1rem;
}



#sect01 .botArea2{
position: relative;
padding: 90px 0 60px;
background: url(./img/sct01_home.svg) -25px 25px no-repeat #f6f2e7;
background-size: 218px auto;
}
#sect01 .botArea2::before{
content: "";
position: absolute;
z-index: 0;
bottom: 2.5rem;
left: auto;
right: -3%;
width: 9.0rem;
height: 10.5rem;
background: url(./img/shape3.svg) 100% 0 no-repeat;
background-size: 90px auto;
transform:rotate(-100deg)
}

#sect01 .botArea2 .wtBox{
position: relative;
width: auto;
margin: 0 5%;
background: #fff;
border-radius:15px;
}
#sect01 .botArea2 .wtBox::before{
content: "";
position: absolute;
top: -7.0rem;
left: 0;
width: 100%;
height: 8.0rem;
background: url("./img/arrow3.svg") 50% 0 no-repeat;
background-size: 3rem auto;
}

#sect01 .botArea2 .headcopy{
display: block;
padding: 10px 5% 12px;
background: #533c2e;
border-radius:15px 15px 0 0;
font-size:1.8rem;
color: #fff;
}
#sect01 .botArea2 .headcopy .txt_bold{
color: #f8cb50;
}
#sect01 .botArea2 .mainTtl{
display: block;
min-height: 100px;
padding: 20px 17rem 10px 5%;
font-size:2.0rem;
text-align: center;
}
#sect01 .botArea2 .mainTtl .fontL{
text-decoration: underline;
font-size:2.3rem;
}
#sect01 .botArea2 .flame{
position: absolute;
top: 6.5rem;
right: 5%;
width: 13.5rem;
}
#sect01 .botArea2 .flame img{
height: 8.6rem;
object-fit: cover;
border-radius:10px;
}
#sect01 .botArea2 .txtArea{
padding: 0 5% 20px;
}

.botCommon .areaInner{
margin: 0;
}


/*------------
sect02_SP
------------*/
#sect02{
padding: 60px 0 0;
background: #fff;
}
#sect02::before{
width: 8.0rem;
height: 2.2rem;
background: url("./img/eng_case.svg") 100% 0 no-repeat;
background-size: auto 22px;
}

#sect02 .sectTtlArea{
padding: 0 0 45px;
}
#sect02 .sectTtlArea::before{
content: "";
position: absolute;
top: auto;
bottom: 1.0rem;
right: -2%;
width: 10.8rem;
height: 10.0rem;
background: url(./img/shape3.svg) 0 0 no-repeat;
background-size: 108px auto;
transform: rotate(-175deg);
opacity: .5;
}
#sect02 .sectTtlArea .fuki span{/* display: block; */text-align: left;}
#sect02 .sectTtl{
width: 28rem;
float: none;
text-align: left;
}
#sect02 .sectTtlArea p{
margin: 0 0 0;
width: auto;
float: none;
}

#sect02 .ulBox{
padding: 40px 0 30px;
}
#sect02 .ulBox::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: #efeeea;
border-radius:15px 0 0 15px;
}
#sect02 .liBox{
min-height: 0;
margin: 0 0 25px;
padding: 20px 5% 10px 0;
background: #fff;
border-radius:0 15px 15px 0;
border: 2px solid #efeeea;
border-left: none;
}
#sect02 .liBox::before{
content: "";
position: absolute;
top: -2px;
left: -100vw;
width: 100vw;
height: 100%;
background: #fff;
border-left: none;
border-right: none;
border-radius:0;
}
#sect02 .liBox .headArea{
position: relative;
width: auto;
margin: 0 0 5px;
}
#sect02 .liBox .headArea .ccl{
position: relative;
top: -15px;
display: inline-block;
width: 7.6rem;
height: 7.6rem;
margin: 0 1rem 0 0;
padding: 14px 0 0;
background: #fde580;
border-radius:50%;
line-height: 1.1;
text-align: center;
font-size:1.2rem;
}
#sect02 .liBox .headArea .ccl .fontL{
display: block;
font-size:2.7rem;
}
#sect02 .liBox .headArea h3{
display: inline-block;
font-size:2.2rem;
}
#sect02 .liBox .headArea h3 .fontL{
display: block;
text-decoration: underline;
font-size:2.5rem;
}
#sect02 .liBox .imgArea{
position: relative;
top: 0;
right: 0;
width: 80%;
margin: 0 auto;
}
#sect02 .liBox .flame{
width: auto;
}
#sect02 .liBox .flame img{
height: 19.0rem;
border-radius:0;
}
#sect02 .liBox .txtArea{
position: relative;
width: auto;
}
#sect02 .liBox .txtArea p{
line-height: 1.9;
}
#sect02 .btn-link {
margin: 15px 0 20px;
text-align: right;
}


/*------------
sect03_SP
------------*/
#sect03{
padding: 55px 0 0;
}
#sect03::before{
width: 14.0rem;
height: 2.3rem;
background: url("./img/eng_prob.svg") 100% 0 no-repeat;
background-size: auto 23px;
}
#sect03::after{
content: "";
position: absolute;
top: 12.0rem;
left: calc(50% - 16.0rem);
width: 12.5rem;
height: 10.5rem;
background: url("./img/shape5.svg") 0 0 no-repeat;
background-size: 125px auto;
transform: scale(1, -1) rotate(120deg);
}
#sect03 .sectTtlArea {
position: relative;
z-index: 1;
padding: 0 0 40px;
}
#sect03 .sectTtl{
margin: 0 0 0;
width: 100%;
}
#sect03 .sectTtl .fuki{
}
#sect03 .sectTtlArea .fuki span {/* display: block; */}
#sect03 .sectTtl .mainTtl {
margin: 0 0 20px 50vw;
text-align: left;
}

#sect03 .ill{
position: absolute;
z-index: 2;
top: 11rem;
left: calc(50% - 11.5rem);
width: 8rem;
}

#sect03 .obi{
position: relative;
padding: 10px 0 14px;
background: #533c2e;
text-align: center;
line-height: 1.4;
font-size:1.8rem;
font-weight: 500;
letter-spacing: .05em;
color: #fff;
}
#sect03 .obi::before{
content: "";
position: absolute;
z-index: 1;
bottom: -18px;
left: 0;
width: 100%;
height: 1.9rem;
background: url("./img/tri3.svg") 50% 0 no-repeat;
background-size: auto 19px;
}


#sect03 .botCommon2 .areaInner{
padding: 50px 0 15px;
}
#sect03 .botCommon2 .btns{
margin: 0 5%;
}
#sect03 .botCommon2 .mainArea{
position: relative;
width: auto;
margin: 0 5% 100px;
}
#sect03 .botCommon2 .mainArea::before {
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 .botCommon2 .mainArea::after {
width: 0;
height: 0;
background: none;
border: none;
}
#sect03 .botCommon2 .imgArea{
position: relative;
top: 0;
left: 0;
width: auto;
margin: 0 0 20px;
}

.youtube {
width: 100%;
aspect-ratio: 16 / 9;
}
.youtube iframe {
width: 100%;
height: 100%;
}

#sect03 .caption{
margin: 5px 0 0;
}
#sect03 .botCommon2 .catch{
padding: 0 0;
}

#sect03 .botCommon2 .btns .fuki{
top: -6.5rem;
left: 5%;
width: 90%;
padding: 10px 30% 12px 5%;
background: #f8cb50;
border-radius: 5px;
line-height: 1.3;
font-size: 1.3rem;
font-weight: 500;
}
#sect03 .botCommon2 .btns .fuki::after{
content: "";
position: absolute;
bottom: .3rem;
right: 0;
width: 15.5rem;
height: 8rem;
background: url(./img/ohkuma-cat.png) 95% 0 no-repeat;
background-size: 85px auto;
}



/* .slider4 */
#slider4{
position: relative;
z-index: 1;
margin: 0 0 40px;
padding: 20px 0 40px;
}
#slider4::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 13.5rem;
background: #efeeea;
}

#slider4 .slick-slide{
height: 15.0rem;
background: url(./img/slide.svg) 0 0 no-repeat;
background-size: 100% 150px;
margin-right: 1.5vw !important;
margin-left: 1.5vw !important;
}
#slider4 .slick-slide a{
display: flex;
align-items: center;
justify-content: center;
height: 15.0rem;
padding: 0 2.0vw;
background: url("./img/arrow_slide.svg") 50% 90% no-repeat;
background-size: 45px auto;
text-align: center;
font-size:1.4rem;
}


#slider4 .slick-arrow:before{
content:""!important;
}
#slider4 .slick-prev, #slider4 .slick-next {
z-index:2;
top: 0;
width: 3.5rem;
height: 3.5rem;
background: url("./img/arrow_ccl_rv.svg") 0 0 no-repeat;
background-size: 35px auto;
opacity: .5;
}
#slider4 .slick-next {
background: url(./img/arrow_ccl.svg) 0 0 no-repeat;
background-size: 35px auto;
}
#slider4 .slick-prev{
left: auto!important;
right: calc(5% + 4.3rem)!important;
}
#slider4 .slick-next{
left: auto!important;
right: 5%!important;
}

#slider4 .slick-dots{
bottom: 0px;
margin: 0;
padding: 0;
}
#slider4 .slick-dots li::before {
width: 0;
height: 0;
background: none;
border: none;
}
#slider4 .slick-dots li {
margin: 0 .8rem;
}
#slider4 .slick-dots li button:before{
font-size:1.2rem;
color: #e2dddb;
opacity: 1;
}
#slider4 .slick-dots li.slick-active button:before{
color: #4c1015;
}





/*------------
sect04_SP
------------*/
#sect04{
padding: 60px 0 30px;
background: url(./img/lineart1_sp.svg) 100% 15px no-repeat #efeae0;
background-size: 100vw auto;
}
#sect04::before{
width: 20.0rem;
height: 2.9rem;
background: url("./img/eng_kn.svg") 100% 0 no-repeat;
background-size: auto 29px;
}

#sect04 .sectTtlArea{
padding: 0 0 45px;
}
#sect04 .sectTtlArea .fuki span{/* display: block; */text-align: left;}
#sect04 .sectTtl{
width: auto;
float: none;
text-align: left;
}
#sect04 .sectTtl .mainTtl .fontL{
background-image: url(./img/marker2_wt.png);
}
#sect04 .sectTtlArea p{
margin: 0 0 0;
width: auto;
float: right;
}


#sect04 .ulBox2 {
}
#sect04 .liBox{
width: 32.0rem;
height: 32.0rem;
margin: 0 auto 3rem;
padding: 3rem 3.8rem 0;
border-radius:50%;
}
#sect04 .liBox::before{
content: "";
position: absolute;
z-index: -1;
bottom: -.4rem;
right: -1.0rem;
width: 100%;
height: 100%;
border: 2px solid #fff;
border-radius:50%;
}
#sect04 .liBox::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fde580;
border-radius:50%;
}

#sect04 .liBox h3{
z-index: 1;
margin: 0 0 1.8rem;
text-align: center;
font-size: 2.2rem;
line-height: 1.3;align-content
}
#sect04 .liBox p{
position: relative;
z-index: 1;
margin-bottom: .5rem;
line-height: 1.5;
font-size: 1.5rem;
}
#sect04 .liBox .btn-link{
position: relative;
z-index: 1;
margin: 0 0 0;
}


#sect04 .liBox a{
height: auto;
font-size:1.4rem;
}
#sect04 .liBox a:hover{
opacity: 1;
}
#sect04 .liBox a::before{
width: 0;
height: 0;
background: none;
border: none;
}





/*------------
sect05_SP
------------*/
#sect05{
padding: 75px 5% 80px;
}
#sect05 .grBox{
position: relative;
padding: 30px 5% 20px;
background: #eae9e5;
border-radius:10px;
}
#sect05 .grBox .flame{
position: static;
top: 4.0rem;
left: 5.0rem;
display: flex;
align-items: center;
margin: 0 auto 20px;
padding: 0 25px;
width: 13.5rem;
height: 13.5rem;
background: #fbfbfa;
border-radius:50%;
}
#sect05 .grBox .sttl{
font-size:1.8rem;
}
#sect05 .grBox .btn-link {
margin: 10px 5%;
text-align: right;
}





/*  End_SP */

}