@charset "utf-8";

body{background:#e9ebe8;}
.allwrap{
}
/* ==========================================================================
	mv
========================================================================== */
#mv {
    position: relative;
    width: 100%;
    height: 100vh;
}
#mv .mv_slide {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index:1;
}
#mv li {
    width: 100%;
    height: 100vh;
}
#mv .img_area {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    z-index:1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#mv .img_area:after{
    content:"";
    display: block;
    width: 100%;
    height: 650px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    z-index:2;
}



/*
#mv .img_area img{
  -webkit-animation: sc 25s linear infinite;
  animation: sc 25s linear infinite;
	}

*/
#mv .moving .img_area img{
  -webkit- animation: zoom 20s forwards;
  -webkit-animation: zoom 20s forwards;    
}

.slide-animation .img_area img{
    animation: zoom 20s 0s forwards;
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
#mv .text_area{
    position: absolute;
    left: 6.66vw;
    bottom:14.5vh;
    z-index:10;
    color:#fff;
}
/*
#mv .moving .text_area{
    
    animation: fade 6s forwards;
    animation-delay: 2s;
}
#mv .moving.fst .text_area{
    
    animation: fade 5.5s forwards;
    animation-delay: 0;
}
*/

#mv .text_area span:first-child{
    font-size: 40px;
    font-size: clamp(38px,2.66vw,42px);
    font-weight: 700;
}
#mv .text_area h2{
    font-weight: 700;
    color:#fff;
    margin:22px 0 44px;
}
#mv .text_area h2 .mtxt{
    position: relative;
    display:inline-block;
    font-size: 72px;
    font-size: clamp(68px,4.8vw,74px);
    font-weight: 700;
    color:#fff;
    opacity:0;
    transform: translateY(30px);
    
    z-index:10;
}

#mv .moving.fst .text_area h2 .mtxt{
    
    animation: fade02 5.5s forwards;
    animation-delay: 0;
}
#mv .moving .text_area h2 .mtxt{
    animation: fade02 6s forwards;
    animation-delay: 2s;
}

#mv .text_area h2 span.enb{
    position: relative;
    display: inline-block;
    font-size: 90px;
    font-size: clamp(86px,6vw,94px);
    font-weight: 500;   
    transform: translateY(5px);
    padding-right: 8px;
}
#mv .text_area h2 span.spbr{
    display:inline-block;
    font-size: 72px;
    font-size: clamp(68px,4.8vw,74px);
    font-weight: 700;
    color:#fff;
}

#mv .text_area p{
    display:inline-block;
    font-size: 34px;
    font-size: clamp(32px,2.26vw,36px);
    font-weight: 500;
    color:#fff;
    padding:10px 15px 15px;
    border:5px solid #fff;
    
    
}
@keyframes fade {
  0% {
      opacity:0;
  }
    5%{
        opacity:0;
        transform: translateY(100px);
    }
    25%{
        transform:translateY(0);
        opacity:100;
    }
    80%{
        transform:translateY(0);
        opacity: 100;
    }
    100%{
        transform:translateY(-80px);
        opacity:0;
    }
}
@keyframes fade02 {
  0% {
      opacity:0;
  }
    10%{
        opacity:0;
        transform: translateY(30px);
    }
    25%{
        transform:translateY(0);
        opacity:100;
    }
    80%{
        transform:translateY(0);
        opacity: 100;
    }
    100%{
        transform:translateY(-30px);
        opacity:0;
    }
}

@media screen and (max-width : 800px ){
   
    #mv .text_area{left: 7.5w;bottom:calc(11.053vh + 30px);}
    .iPhone #mv .text_area{bottom:calc(11.053vh + 60px);}
    #mv .text_area span:first-child{
        font-size: 20px;
        font-size: clamp(18px,5vw,22px);
    }
    #mv .text_area h2{
        font-size: 35px;
        font-size: clamp(33px,8.75vw,37px);
        margin:15px 0 20px;
    }
    #mv .text_area h2 .mtxt{
        font-size: 35px;
        font-size: clamp(33px,8.75vw,37px);
    }
    #mv .text_area h2 span.enb{
        font-size: 42px;
        font-size: clamp(40px,5.25vw,44px);
        transform: translateY(3px);
        padding-right: 4px;
        }
    #mv .text_area h2 span.spbr{
        font-size: 20px;
        font-size: var(--fz20);
        line-height: 1.1;
        letter-spacing: -0.02em;
        transform: translateY(5px);
    }


    #mv .text_area p{
        display:inline-block;
        font-size: 20px;
        font-size: var(--fz20);
        padding:10px 15px 15px;
        border:3px solid #fff;


    }
    #mv .img_area:after{
        height: 26.4vh;
    }
   

    @keyframes fade02 {
      0% {
          opacity:0;
      }
        10%{
            opacity:0;
            transform: translateY(30px);
        }
        25%{
            transform:translateY(3px);
            opacity:100;
        }
        80%{
            transform:translateY(3px);
            opacity: 100;
        }
        100%{
            transform:translateY(-30px);
            opacity:0;
        }
    }
}


/* ==========================================================================
	side_menu
========================================================================== */
.side_menu{
    opacity: 0;
    top: 220px;
    width: 100px;
    position: fixed !Important;
    right: -100px;
    margin: auto;
    z-index: 100;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 50px 0 50px 41px;
    box-sizing:border-box;
    border-radius:10px 0 0 10px;
    background:#fff;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
    border-bottom:1px solid #eee;
    
}
.scroll .side_menu{
    right: 0;
    opacity:100;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.side_menu .v_txt{
    display: block;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: #121212;    
    margin-bottom: 25px;
    transform: translateZ(0)
}
.side_menu .v_txt span {
    position: relative;
    display: inline-block;
    font-weight: 500;
    color: #121212;
    text-combine-upright: all;
    transform: translateX(-2px);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
    
}

.side_menu .v_txt.active,
.side_menu .v_txt:hover,
.side_menu .v_txt.active span,
.side_menu .v_txt:hover span{
     color:#bd9c46;   
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}


.side_menu .v_txt:before{
    content:"";
    display: block;
    width: 12px;
    height: 12px;
    background:#dab84b;
    border-radius:50%;
    position: absolute;
    left: -41px;
    top: 0;
    bottom:0;
    transform: translateY(-5px);
    margin:auto;
    z-index:10;
    opacity:0;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}
.side_menu .v_txt:after{
    content:"";
    display: block;
    width: 30px;
    height: 30px;
    background:#fff;
    border-radius:50%;
    position: absolute;
    left: -50px;
    top: 0;
    bottom:0;
    transform: translateY(-5px);
    margin:auto;
    z-index:9;
    opacity:0;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
    border-left:1px solid #eee;
}
.side_menu .v_txt.active:before,
.side_menu .v_txt:hover:before,
.side_menu .v_txt.active:after,
.side_menu .v_txt:hover:after{
    opacity:100;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.side_menu .top_link{
    display: block;
    margin:0 auto;
    width: 50px;
    height: 50px;
    border-radius:50%;
    background:#212121;
    transform: translateX(-20px);
}
.side_menu .top_link:before{
    z-index:1;
    border-radius:50%;
}
.side_menu .top_link span{
     display: block;
    position: relative;
    z-index:10;
    width: 100%;
    height: 100%;
    background:url(../image/common/top_link_ar.png);
    background-size:cover;
}
@media screen and (max-height : 920px ){
    .scroll .side_menu{
        right: -100px;
        opacity:0;
    }

}

@media screen and (max-width :1000px ){
    .side_menu{
    display: none;
    }
}
/* ==========================================================================
	intro
========================================================================== */

.intro{
    position: relative;
    z-index:20;
    padding-top: 150px;
    padding-bottom: 520px;
    background-color:#f4f1e9;
}

.intro:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color:#f4f1e9;
    width: 100%;
    height: 100%;
    z-index:-1;
}
.intro_slide{
    position: relative;
    width: 100%;
    height: 680px;
    background:url(../image/intro_slide.png) repeat-x 0 0;
    background-size:3050px 680px;
    overflow:hidden;
    -moz-animation: loop 100s linear infinite;
    animation: loop 100s linear infinite;
    z-index:10;
}

@keyframes loop {
  0% {
    background-position: -3050px 0;
  }

  100% {
    background-position: 0 0;
  }
}
}

.intro:before{
    content:"";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background:#ebe5d5;
    z-index:1;
    width: 360px;
    height: 710px;
}
.intro:after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background:#ebe5d5;
    z-index:1;
    width: 360px;
    height: 695px;
}

.intro .con_top {
    z-index:20;
    padding-top: 95px;
}

.intro .con_top .tit_area {
    position: absolute;
    width: 100%;
    top: -240px;
    z-index:10;
    height:700px;
    width: calc(100% - 16.62vw);
    
}

.intro .con_top .tit_area h2 {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
    width: 260px;
    width: clamp(200px,17.33vw,260px);
    align-items: flex-start;
    transform: translateX(min(20px,1.3vw));
}
.intro .con_top .w_bg {
    display:inline-block;
    padding:20px 0 0;
    background:#fff;
    font-size: 37px;
    font-size: clamp(30px,2.46vw,37px);
    line-height:2;
    font-weight: 500;
}
.intro .con_top .y_txt{
    color:var(--base-yellow-color);
    font-weight: 500;
}
.intro .con_top .enb {
    position: absolute;
    padding-left: max(calc((366 / 1300) * 100%) , 245px);
    box-sizing:border-box;
    font-size: 14px;
    line-height: 2.4285;
    text-transform: uppercase;
    color:var(--base-yellow-color);
    letter-spacing: 0.35em;
    position: absolute;
    left: 0;
    top: 151px;
}
.intro .con_top p {
    position: relative;
    padding-left: max(calc((366 / 1300) * 100%) , 245px);
    box-sizing:border-box;
    font-size:18px;
    font-size: var(--fz18);
    line-height: 2.444;
}

/*link_box*/

 .intro .link_box {
    position: absolute;
    width: calc(100% - 6.66vw);
    right: 0;
    bottom: -120px;
    padding:116px 0 120px 6.66vw;
    box-sizing:border-box;
    background:#fff;
    z-index:20;
    border-radius:5px 0 0 5px;
     overflow: hidden;
}
 .intro .link_box .tit_area{
    width: 50%;
    max-width:510px;
    min-width:350px;
}

 .intro .link_box .tit_area h3{
    display:inline-block;
    font-size: 34px;
    font-size: var(--fz34);
    font-weight: 500;
}
 .intro .link_box .tit_area .y-enb{
     display:inline-block;
    margin-left: 27px;
    transform: translateY(-7px);
}

 .intro .link_box .tit_area p{
    position: relative;
    display: block;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.25;
    font-weight: 500;
    margin:37px 0 40px;
    z-index:20;
}

 .intro .link_box .img_area {
    position: absolute;
    left: 645px;
    left: min(645px,46%);
    bottom:0;
    width:531px;
    z-index:10;
}
 .intro .link_box .hvof {
    position: absolute;
    bottom:0;
    /*
    opacity:100;
    transition:opacity .4s var(--easeOutQuad);
    */
}

 .intro .link_box:hover .hvof {
    /*
    opacity:0;
    transition:opacity .4s var(--easeOutQuad);
    */
    display:none !Important;
}

 .intro .link_box .hvon {
    position: absolute;
    bottom:0;
    display:none;
    /*
    opacity:0;
    transition:opacity .4s var(--easeOutQuad);
    */
}

 .intro .link_box .hvon.sp_off {
     display:none !Important;
}

.intro .link_box .hvon.pc_off{
    display:none !Important;
}
 .intro .link_box:hover .hvon.sp_off{
    display: block !Important;
    /*
    opacity:100;
    transition:opacity .4s var(--easeOutQuad);
    */}

 .intro .link_box .bg{
    display: block;
    position: absolute;
    bottom:0;
    right: 0;
    width: 73.87%;
    z-index:1;
}
@media screen and (max-width :1000px ){
    .con_top{
        padding-left: 5vw;
        padding-right: 5vw;
    }
    
}
@media screen and (max-width : 800px ){

    .intro{
        padding-top: 50px;
        padding-bottom: 12.5vw;
    }
    .intro .con_top{
         padding:0;   
    }
    .intro_slide{
        height: 381px;
        background-size:1726px 381px;
    }
    @keyframes loop {
      0% {
        background-position: -1726px 0;
      }

      100% {
        background-position: 0 0;
      }
    }

    .intro:before{width: 130px;height: 250px;}
    .intro:after{width: 150px; height: 770px;bottom: 210px;}

    .intro .con_top {padding-top: 11.875vw;}

    .intro .con_top .tit_area {
        position: relative;
        width: 100%;
        top: auto;
        height: auto;
    }

    .intro .con_top .tit_area h2 {
        width: 160px;
        width: clamp(160px,17.5vw,200px);
        align-items: flex-start;
        transform: translateX(min(20px,1.3vw));
        position: absolute;
        left: 10%;
        top: calc(-11.875vw - 200px);
    }
    .intro .con_top .w_bg {
        padding:12px 0 0;
        font-size: 21px;
        font-size: var(--fz21);
    }
    .intro .con_top .enb {
        position:relative;
        display: block;
        padding-left: 53.75%;
        font-size: 10px;
        line-height: 2.7;
        top: auto;
        left: auto;
        box-sizing:border-box;
    }
    .intro .con_top p {
        position: relative;
        padding:0 10%;
        font-size:15px;
        font-size: var(--fz15);
        line-height: 2.13;
        margin:70px auto 60px;
    }

     .intro .link_box {
        position: relative;
        width: 90%;
        right: auto;
        bottom: auto;
        padding:12.5vw 0 0;
        border-radius:5px;
         overflow: hidden;
         margin:0 auto;
    }
     .intro .link_box .tit_area{
        width: 75%;
        min-width:270px;
         margin:0 auto;
        -js-display: flex;
        display:-webkit-box;
        display: -webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
         justify-content: space-between;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
    }

    .intro .link_box .tit_area .tits{
        	-js-display: flex;
        	display:-webkit-box;
        	display: -webkit-flex;
        	display:-moz-box;
        	display:-ms-flexbox;
        	display: flex;
        	-webkit-justify-content: space-between;
            justify-content: space-between;
        	-webkit-flex-wrap: wrap;
        		-ms-flex-wrap: wrap;
        			flex-wrap: wrap;
        width: 57px;
    }
     .intro .link_box .tit_area h3{
        font-size: 29px;
        font-size: var(--fz29);
        writing-mode: vertical-rl;
        font-feature-settings: normal;
        vertical-align: top;
        display: inline-block;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -o-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
     .intro .link_box .tit_area .y-enb{
        margin-left: 0;
        transform: translateY(0);
        writing-mode: vertical-rl;
        font-feature-settings: normal;
        vertical-align: top;
        display: inline-block;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -o-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

     .intro .link_box .tit_area p{
        position: relative;
        display: block;
         width: calc(100% - 85px);
        font-size: 14px;
        font-size: var(--fz14);
        line-height: 2.14;
        margin:0;
        z-index:20;
    }

     .intro .link_box .img_area {
        position:relative;
        left: auto;
        bottom:auto;
        width:100%;
         margin-top:35px;
    }
     .intro .link_box .bg{
        display: block;
        position: absolute;
        bottom:0;
        right: calc(50% - 400px);
        width: 800px;
    }
    .intro .link_box .sp_w_link_btn{
        position: absolute;
        width: 90%;
        left: 0;
        right: 0;
        bottom:15px;
        margin:auto;
        z-index:10;
        background:#fff;
    }
     .intro .link_box:hover .hvon.sp_off{
    display: none !Important;
    }
}

/* ==========================================================================
	workbox 01
========================================================================== */
.work_box{
    position: relative;
    z-index:10;
    padding-bottom: 10vw;
}
.work_box .mv_area{
    position: relative;
    z-index:5;
    width: 100%;
    height: min(1020px,68vw);
}

.work_box .mv_area:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #fff;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: right;
  transform-origin: right;
}
.work_box .mv_area.move:before {
  -webkit-transform: scale(0,1);
  transform: scale(0,1);
   transition:all .7s cubic-bezier(.25, .46, .45, .94);
    transition-delay:.4s;
}
.work_box .mv_area:after{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index:10;
    background:#fff;
    width: 62.666%;
    height: 200px;
}
.con_area {
    position: relative;
    z-index:20;
}
.con_area .con_top_tit {
    position: relative;
    width: 91%;
    margin:0 auto;
    transform: translateY(-14px);
    z-index:20;
    letter-spacing: 0.06em;
}
.con_area .con_top_tit span.spbr{
    font-weight: 700;
}
.con_area .con_top_tit span.ftxt {
    position: absolute;
    left: 0;
    top: -49px;
    font-size: 34px;
    font-size: var(--fz34);
    font-weight: 700;
}
.con_area .con_top_tit span.ftxt,
.con_area .con_top_tit h2,
.con_area .con_top_tit p{
    transform: translateY(50px);
    opacity:0;
	-webkit-transition: transform 0.6s var(--easeOutQuad),opacity 0.6s var(--easeOutQuad);
    transition: transform 0.6s var(--easeOutQuad),opacity 0.6s var(--easeOutQuad);
    
}
.con_area .con_top_tit.move span.ftxt,
.con_area .con_top_tit.move h2,
.con_area .con_top_tit.move p{
    transform: translateY(0px);
    opacity:100;
	-webkit-transition: transform 0.6s var(--easeOutQuad),opacity 0.6s var(--easeOutQuad);
    transition: transform 0.6s var(--easeOutQuad),opacity 0.6s var(--easeOutQuad);
    
}

.con_area .con_top_tit.move h2{
    transition-delay:.2s;
}
.con_area .con_top_tit.move p{
    transition-delay:.4s;
    
}
.con_area .con_top_tit h2 {
    font-size: 62px;
    font-size: var(--fz62);
    font-weight: 700;
    margin-bottom:26px;
    letter-spacing: 0.06em;
}
.con_area .con_top_tit h2 .enb {
    position: relative;
    display: inline-block;
    font-size: 74px;
    font-size: var(--fz74);
    font-weight: 500;   
    transform: translateY(5px);
    padding-right: 8px;
}

.work_box .vtxt_box{
    position: absolute;
    z-index:20;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
    width: 105px;
    width: min(105px,11vw);
    align-items: flex-start;
    left: calc((40 / 440) * 100%);
    top: calc((40 / 600) * 100%);
}
.work_box .vtxt_box .w_bg {
    display:inline-block;
    padding:15px 0;
    background:#fff;
    font-size: 18px;
    font-size: var(--fz18);
    line-height:2.4;
    font-weight: 700;
    color:var(--base-yellow-color02);
}

.work_box .wtxt_box {
    display: block;
    position: absolute;
    width: 230px;
    width: max(230px,1.53vw);
    right: calc((40 / 700) * 100%);
    top: calc((40 / 440) * 100%);
    text-align:right;
}
.work_box .wtxt_box .w_bg {
    display:inline-block;
    padding:0 20px;
    background:#fff;
    font-size: 18px;
    font-size: var(--fz18);
    line-height:2.2;
    font-weight: 700;
    color:var(--base-yellow-color02);
    margin-bottom: 10px;
}
.work_box .wtxt_box .w_bg.pc_off{
    display:none;
}
.work_box .b_num{
    position: absolute;
    font-size: 170px;  
    font-size: min(170px,13.3vw);
    line-height: 170px;
    z-index:1;
    color:var(--base-yellow-color02);
    font-weight: 500;
}
.work_box .b_num span{
    font-size: 200px;   
    font-size: min(200px,16.3vw);
    line-height: 170px;
    display: inline-block;
    transform: translateY(15px);
}



/*.con_area_box01*/
.con_area .con_top_tit p {
    display:inline-block;
    font-size: 28px;
    font-size: var(--fz28);
    font-weight: 500;
    padding:10px 15px 15px;
    border:5px solid var(--base-text-color);
    letter-spacing: 0.06em;
}
.con_area_box01 {
    position: relative;
    width: 100%;
    margin:0 auto;
    padding-left: 3.33vw;
    padding-top: 11.5vw;
    box-sizing:border-box;
}
.con_area_box01 .img_area {
    position: absolute;
    width: 38.29%;
    right: 0;
    top: -15.53vw;
}

.con_area_box01 .img_area img{
    border-radius:5px;
}
.con_area_box01 .vtxt_box .w_bg:nth-child(2){
     transform: translateY(40px);
}
.con_area_box01 .text_area{
    position: relative;
    width: 49.9%;
}
.con_area_box01 .text_area p{
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.375;
    font-weight: 500;
    z-index:10;    
    letter-spacing: 0.06em;
}
.con_area_box01 .b_num{
    top: -129px;
    right: 0;
}

/*.con_area_box02*/
.con_area_box02 {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;    
    width: 100%;
    margin:9vw 0 6.66vw; 
    
}
.con_area_box02 .img_area {
    position: relative;
    width: 58.333%;
}
.con_area_box02 .img_area img {
    border-radius:5px;
}

.con_area_box02 .wtxt_box .w_bg:first-child{
    transform: translateX(-50px);
}
.con_area_box02 .text_area {
    position: relative;
    width: 32.5%;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.con_area_box02 .text_area p{
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.375;
    font-weight: 500;
    letter-spacing: 0.06em;
    z-index:10;    
}

.con_area_box02 .b_num{
     position: absolute;
    line-height: 1;
    top: -145px;
    right: -50px;
    z-index: -1;
}



/*.con_area_box03*/
.con_area_box03 {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;    
    flex-direction: row-reverse;
    width: 100%;
    padding-left: 3.33vw;
    box-sizing:border-box;
    
}
.con_area_box03 .img_area {
    position: relative;
    width: 57.39%;
}
.con_area_box03 .img_area img {
    border-radius:5px;
}

.con_area_box03 .wtxt_box{
    width: 310px;
    width: max(310px,1.933vw);
    left: calc((40 / 660) * 100%);
    right: auto;
    text-align:left;
    top: auto;
    bottom:calc((40/400)*100%);
    
}
.con_area_box03 .wtxt_box .w_bg:nth-child(2){
    transform: translateX(105px);
}
.con_area_box03 .text_area {
    position: relative;
    width: 31.8%;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.con_area_box03 .text_area p{
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.375;
    font-weight: 500;
    z-index:10;    
    letter-spacing: 0.06em;
}

.con_area_box03 .b_num{
     position: absolute;
    line-height: 1;
    top: -135px;
    top:max(-135px,-12vw);
    right: auto;
    left: -50px;
    z-index: -1;
}

@media screen and (max-width :1000px ){
    .con_area_box02 .text_area{
        width: 38%;
    }
    .con_area_box03 .text_area{
        width: 40%;
    }
    .con_area_box02 .b_num{
        right: 0;

    }
}

@media screen and (max-width : 800px ){
    .work_box{
        padding-bottom: 0;
    }
    .work_box .con_top{
        padding:0;
        overflow: hidden;
    }
    .work_box .mv_area{
        height: min(500px,125vw);
    }

    .work_box .mv_area:after{
        display:none;
    }
    .con_area .con_top_tit {
        position: relative;
        width: 100%;
        margin:0 auto;
        transform: translateY(0);
        text-align: center;
        padding:12.5vw 0 13.75vw;
    }
    .con_area .con_top_tit span.ftxt {
        position: relative;
        left: auto;
        top: auto;
        font-size: 17px;
        font-size: var(--fz17);
    }

    .con_area .con_top_tit h2 {
        font-size: 33px;
        font-size: var(--fz33);
        margin:15px 0 23px;
    }
    .con_area .con_top_tit h2 .enb {
        font-size: 39px;
        font-size: var(--fz39);
        padding-right: 4px;
    transform: translateY(2px);
    }

    .work_box .vtxt_box{
        width: 90px;
        left: auto;
        top: calc(100% - 50px);
        right: 0;
    }
    .work_box .vtxt_box .w_bg {
        padding:10px 0;
        background:#fff;
        font-size: 17px;
        line-height:2.4;
    }

    .work_box .wtxt_box {
        width: 90px;
        right: auto;
        left: 9.6%;
        top: calc(100% - 50px);
        position: absolute;
        z-index:20;
        -js-display: flex;
        display:-webkit-box;
        display: -webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        flex-direction: row-reverse;
        align-items: flex-start;
    }
    .work_box .wtxt_box .w_bg.pc_off{
        display:inline-block;
    }
    .work_box .wtxt_box .w_bg.sp_off{
        display:none;
    }
    .work_box .wtxt_box .w_bg {
        padding:10px 0;
        background:#fff;
        font-size: 17px;
        line-height:2.4;
        writing-mode: vertical-rl;
        font-feature-settings: normal;
        vertical-align: top;
        display: inline-block;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -o-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
    .work_box .b_num{
        font-size: 135px;  
    }
    .work_box .b_num span{
        font-size: 150px;
        line-height: 135px;
        transform: translateY(3px);
    }



    /*.con_area_box01*/
    .con_area .con_top_tit p {
        font-size: 16px;
        font-size: var(--fz16);
        padding:10px 15px ;
        border:3px solid var(--base-text-color);
    }
    .con_area_box01 {
        position: relative;
        width: 100%;
        padding-top: 0;
        padding-left:0;
        padding-bottom: 54px;
        box-sizing:border-box;
        background:#f4f1e9;
    }
    .con_area_box01:before{
        content:"";
        display: block;
        width: 100%;
        height: 26.25vw;
        background:#fff;
        position: absolute;
        left: 0;
        top: 0;
        z-index:1;
    }
    .con_area_box01 .img_area {
        position: relative;
        width: 80%;
        margin:0 auto;
        right: auto;
        top: auto;
    }

    .con_area_box01 .img_area img{
        border-radius:5px;
    }
    .con_area_box01 .vtxt_box .w_bg:nth-child(2){
         transform: translateY(0);
    }
    .con_area_box01 .text_area{
        position: relative;
        width: 100%;
        padding-left: 10%;
        padding-right: 10%;
        box-sizing:border-box;
        margin-top:135px;
        z-index:20;
    }
    .con_area_box01 .text_area p{
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
    }
    .con_area_box01 .b_num{
        top: -208px;
        right: auto;
        left: -12px;
    }

    /*.con_area_box02*/
    .con_area_box02 {
        position: relative;
        display: block;
        margin:0; 
        padding-bottom: 50px;

    }
    .con_area_box02:before{
        content:"";
        display: block;
        width: 100%;
        height: 22.5vw;
        background:#f4f1e9;
        position: absolute;
        left: 0;
        top: -1px;
        z-index:1;
    }
    .con_area_box02 .img_area {
        position: relative;
        width: 90%;
    }
    .con_area_box02 .img_area img {
        border-radius:0 5px 5px 0;
    }

    .con_area_box02 .wtxt_box .w_bg:first-child{
        transform: translateX(0);
    }
    .con_area_box02 .text_area {
        position: relative;
        width: 100%;
        display: block;
        box-sizing:border-box;
        margin:153px 0 0;
    }
    .con_area_box02 .text_area p{
        position: relative;
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
        width: 100%;
        padding:0 10%;
        box-sizing:border-box;
        z-index:10;
    }
    .con_area_box02 .text_area p:before{
        content:"";
        display: block;
        width: 37.5vw;
        height: 295px;
        background:#f4f1e9;
        position: absolute;
        right: 0;
        top: -35px;
        z-index:-1;
    }

    .con_area_box02 .b_num{
        top: -145px;
        right: -50px;
        z-index: 1;
        top: -208px;
        right: auto;
        right: -6px;
    }



    /*.con_area_box03*/
    .con_area_box03 {
        width: 100%;
        padding-left:0;
        box-sizing:border-box;
        z-index:30;
        padding-bottom: 50px;
    }
    .con_area_box03 .img_area {
        position: relative;
        width: 90%;
        margin-left: 10%;
    }
    .con_area_box03 .img_area img {
        border-radius:5px 0 0 5px;
    }

    .con_area_box03 .wtxt_box{
        width: 90px;
        left: auto;
        top: calc(100% - 50px);
        right: 9%;;
        bottom:auto;
        text-align:left;
    }
    .con_area_box03 .wtxt_box .w_bg:nth-child(2){
        transform: translateX(0);
    }
    .con_area_box03 .text_area {
        position: relative;
        width: 100%;
        display: block;
        box-sizing:border-box;
        margin:121px 0 0;
    }
    .con_area_box03 .text_area p{
        position: relative;
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
        width: 100%;
        padding:0 10%;
        box-sizing:border-box;
        z-index:10;
    }
    .con_area_box03 .text_area p:before{
        content:"";
        display: block;
        width: 37.5vw;
        height: calc(100% + 50px);
        background:#f4f1e9;
        position: absolute;
        left: 0;
        top: 0;
        z-index:-1;
    }

    .con_area_box03 .b_num{
        position: absolute;
        top: -176px;
        left: -16px;
    }



    
    
}
/* ==========================================================================
	work01
========================================================================== */
.work_box.work01,
.work_box.work05{
    background:#fff;    
} 
.work_box.work01:before,
.work_box.work05:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#fff;
    width: 100%;
    height: 100%;
    z-index:-1;
} 

.work_box.work01 .mv_area{
    height: 940px;
    height: clamp(850px,62.66vw,940px);
}


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

    .work_box.work01 .mv_area{
        height:500px;
        height: clamp(450px,125vw,550px);
    }


}


/* ==========================================================================
	work02・04
========================================================================== */
.work_box.work02 .mv_area:before,
.work_box.work04 .mv_area:before{
        background:#dab84b;
    
}
.work_box.work02,
.work_box.work04{
    background:var(--base-yellow-color02);  
    padding-bottom: 9vw;
} 
.work_box.work02:before,
.work_box.work04:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:var(--base-yellow-color02);  
    width: 100%;
    height: 100%;
    z-index:-1;
} 




.work_box.work02 .mv_area:after,
.work_box.work04 .mv_area:after{    
    background:var(--base-yellow-color02);
}

.work_box.work02 .con_area .con_top_tit,
.work_box.work04 .con_area .con_top_tit{
    color:#fff;
}
.work02 .con_area_box_list .inr_box .wtxt_box{
    width: 270px;
}

.work_box.work02 .con_area .con_top_tit p{
    border-color:#fff;
    background:#fff;
    color:var(--base-yellow-color02);
}

.work_box.work04 .con_area .con_top_tit p{
    border-color:#fff;
    color:#fff;    
}
.work_box.work02 .con_area p,
.work_box.work04 .con_area p{
    color:#fff;
}

.work_box.work02 .b_num,
.work_box.work04 .b_num{
    color:#fff;
    opacity:.3;
    right: 20px;
    opacity: .3;
    top: -125px;
}

.work_box.work02 .con_area_box01 .vtxt_box .w_bg:nth-child(2){
    transform: translateY(100px);
}
.work_box.work04 .con_area_box01 .vtxt_box .w_bg:nth-child(2){
    transform: translateY(110px);
}

.con_area_box_list {
    position: relative;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;    
    width: 100%;
    /*
    width: 95.5%;
    */
    margin-top: 8vw;
}
.con_area_box_list .inr_box {
    width: 47.5%;
}
.con_area_box_list .img_area {
    position: relative;
}
.con_area_box_list .img_area img{
     border-radius:5px;   
}
.con_area_box_list .text_area p {
    position: relative;
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.375;
    font-weight: 500 !Important;
    z-index: 10;
    letter-spacing: 0.06em;
    margin-top: 120px;
    padding:0 1vw;
    box-sizing:border-box;
}
.sppd{font-weight: 500;}

.con_area_box_list .inr_box .wtxt_box{
    /*
    width: 270px;
    */
    width:260px;
    text-align:right;
    left: auto;
    right: 40px;
    top:40px;
}
/*
.con_area_box_list .inr_box:last-child .wtxt_box{
    width: 300px;
}
*/


.work_box.work04 .wtxt_box{
    width: 330px;
    top:auto;
    bottom: calc((40 / 440) * 100%);
}

.work_box.work04 .wtxt_box .w_bg:first-child{
    transform: translateX(0);
}

@media screen and (min-width :1500px ){
    
    .work02 .con_area_box_list .inr_box .wtxt_box{
        width: 290px;
    }
}
@media screen and (max-width :800px ){
    .work_box.work02, .work_box.work04{
        padding-bottom: 0;
    }
    .work_box.work02 .con_area_box01:before,
    .work_box.work04 .con_area_box01:before{
        background:#dab84b;
    }
    .work_box.work02 .con_area_box01,
    .work_box.work04 .con_area_box01 {
        background:#c5a337;
    }
    .work_box.work02 .con_area_box01 .vtxt_box .w_bg:nth-child(2),
    .work_box.work04 .con_area_box01 .vtxt_box .w_bg:nth-child(2){
        transform: translateY(0px);
    }
    .work_box.work02 .b_num, .work_box.work04 .b_num{
        opacity:100;
        right: auto;
        left: -12px;
        top: -205px;
    }
    .work_box.work02 .inr_box:first-child .b_num,
    .work_box.work04 .inr_box:first-child .b_num{
        left: auto;
        right: -6px;
    }
   
    .con_area_box_list {
        display: block;
        margin-top:0;
    }
    .con_area_box_list .inr_box {
        position: relative;
        width: 100%;
        padding-bottom: 65px;
    }
    .con_area_box_list .inr_box:first-child:before{
        content:"";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 15vw;
        background:#c5a337;
    }
    .con_area_box_list .img_area {
        position: relative;
        width: 90%;
        z-index:10;
    }
    .con_area_box_list .inr_box:nth-child(2) .img_area{
        margin-left: 10%;
    } 
    .con_area_box_list .img_area img{
         border-radius:0 5px 5px 0;   
    }
    .con_area_box_list .inr_box:nth-child(2) .img_area img{
        border-radius:5px 0 0 5px;
    }
    .con_area_box_list .text_area {
        margin-top: 120px;
    }
    .con_area_box_list .text_area p {
        margin-top: 0;
        position: relative;
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
        width: 100%;
        padding:0 10%;
        box-sizing:border-box;
        z-index:10;
    }

    .con_area_box_list .text_area p .sppd{
        display:inline-block;
        padding-left: 125px;
        box-sizing:border-box;
        font-weight: 500;
    }
    .con_area_box_list .inr_box:nth-child(2) .text_area p .sppd{
        padding-left: 0;
        padding-right: 125px;
    }
    
    .work_box.work04 .con_area_box01 .text_area p .sppd{
        display:inline-block;
        padding-right: 125px;
        box-sizing:border-box;
        font-weight: 500;
    }
    .work_box.work04 .con_area_box02 .text_area p .sppd{
        display:inline-block;
        padding-left: 125px;
        box-sizing:border-box;
        font-weight: 500;
    }
    
    .con_area_box_list .text_area p:before{
        content:"";
        display: block;
        position: absolute;
        width: 37.5%;
        height: calc(100% + 65px);
        right: 0;
        top: 0;
        z-index:-1;
        background:#c5a337;
    }
    .con_area_box_list .inr_box:nth-child(2) .text_area p:before{
        right: auto;
        left:0;
    }
    
    .work02 .con_area_box_list .inr_box .wtxt_box{
        width: 90px;
        left: 9%;
        top: calc(100% - 50px);
    }

    .con_area_box_list .inr_box:last-child .wtxt_box{
        width: 90px;
        left: auto;
        right: 9%;
    }
    .work_box.work04 .con_area_box02 .wtxt_box{
        width: 90px;
        right: auto;
        left: 9%;
        top: calc(100% - 50px);
        bottom:auto;
        
    }
    .work_box.work04 .con_area_box02:before,
    .work_box.work04 .con_area_box02 .text_area p:before{
        background:#c5a337;
    }
    
    .work_box.work04 .con_area_box02 .text_area p:before{
        top:0;
        height: calc(100% + 65px);
    }
    
    .work_box.work04 .con_area_box02 .b_num{
        left:auto;
        right: -6px;
    }
}



/* ==========================================================================
	work03
========================================================================== */
.work_box.work03{
    background:#f4f1e9;
} 
 
.work_box.work03:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#f4f1e9;
    width: 100%;
    height: 100%;
    z-index:-1;
} 

.work_box.work03 .mv_area:before,
.work_box.work03 .mv_area:after{    
    background:#f4f1e9;
}

.work_box.work03 .vtxt_box{    
    left:auto;
    right: calc((40 / 440) * 100%);
    top: calc((40 / 600) * 100%);
}


.work_box.work03 .con_area_box02{
    margin-bottom: 0;
}
.work_box.work03 .con_area_box02 .wtxt_box{
    width: max(290px,19.3vw);
    right: calc((44 / 700) * 100%);
    left: auto;
    text-align:right;
}


.work_box.work03 .con_area_box02 .b_num{
    top: -129px;
}



@media screen and (max-width :800px ){
    .work_box.work03{
        background:#fff;
    } 
 
    .work_box.work03 .con_area_box02 .wtxt_box{
        width: 90px;    
        right: 9%;
    }
    .work_box.work03 .con_area .con_top_tit h2{
        margin-bottom: 18px;
    }
    .work_box.work03 .con_area .con_top_tit h2 .enb{
        transform: translateY(-4px);
    }
    .work_box.work03 .con_area .con_top_tit h2 .spbr{
        font-size: 23px;
        display: inline-block;
        text-align: left;
        font-weight:700;
    }
    
    .work_box.work03 .vtxt_box{
        width: 90px;
        left: auto;
        right: 0;
        top: calc(100% - 50px);
    }
    .work_box.work03 .con_area_box02 .wtxt_box{
        right: auto;
        left: 9%;
    }
    .work_box.work03 .con_area_box01 .text_area{
        margin-top: 120px;
    }
    .work_box.work03 .con_area_box02 .text_area{
        margin-top: 120px;
    }
    .work_box.work03 .text_area p .sppd{
        display:inline-block;
        padding-right: 125px;
        box-sizing:border-box;
        font-weight: 500;
    }
    .work_box.work03 .con_area_box02 p .sppd{
        padding-left: 125px;
        padding-right: 0;
    }
    
    .work_box.work03 .con_area_box02{    
        padding-bottom: 65px;
    }
     .work_box.work03 .con_area_box02 .text_area p:before {
         height: calc(100% + 105px);
    }
}
/* ==========================================================================
	work05
========================================================================== */
.work_box.work05 .con_area_box01 .b_num{
    right: -20px;
}

.work_box.work05 .con_area_box02 .b_num{
    top: -127px;
    right: -13px;
}
.work_box.work05 .con_area_box03 .b_num{
    left: -30px;
}


@media screen and (max-width :800px ){
    .work_box.work05 .con_area_box02 .b_num {
        top: -205px;
        right: -8px;
    }
    
    .work_box.work05 .con_area_box02 .text_area p:before{
        height: 315px;
    }
    .work_box.work05 .con_area_box03 .b_num{
        left: -12px;
    }
    
    .work_box.work05 .con_area_box03 .text_area p:before{    
        top: -30px;
        height: calc(100% + 90px);
    }
}
/* ==========================================================================
	peaple
========================================================================== */
.peaple {
    position: relative;
    z-index:10;
    background:#fff;
}
.peaple:before{
    content:"";
    display: block;
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    bottom: 0;
    background:#f4f1e9;
    z-index:-1;
}

.peaple .peaple_inr {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
    padding:100px 20vw 100px 0;
    box-sizing:border-box;
    z-index:10;
}
.peaple .peaple_inr:before{
    content:"";
    display: block;
    width: calc(100% - 6.66vw);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index:2;
    background:url(../image/peaple_bg.png) center center #d8ae23;
    /*
    background:url(../image/peaple_bg.png) center center #d8ae23;
    */
    background-size:215px 565px;
    border-radius:5px 0 0 5px;     
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);  
}
.peaple:hover .peaple_inr:before{
    background-color:#b59133;   
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);  
}

/*
.peaple:hover .peaple_inr:before{    
    background:url(../image/peaple_bg.png) center center;
    background-size:215px 565px;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.peaple .peaple_inr:after{
    content:"";
    display: block;
    width: calc(100% - 6.66vw);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    opacity:0;
    background: rgb(230,196,78);
    background: -webkit-linear-gradient(50deg, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: -o-linear-gradient(50deg, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    background: linear-gradient(140deg, rgba(230,196,78,1) 0%, rgba(189,156,70,1) 100%);
    z-index:1;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}

.peaple:hover .peaple_inr:after{
    opacity:100;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}
*/
.peaple .tit_area {
    position: relative;
    width: 250px;
    z-index:10;
}
.peaple .text_area {
    position: relative;
}
.peaple h2 {
    width: 108px;
    display: inline-block;
    margin: 0 15px;
}
.peaple .v_txt {
    font-size:16px;
    line-height: 2.875;
    font-weight: 500;
    color:#fff;
}
    

.peaple .img_area {
    position: relative;
    width: calc(100% - 250px - 5.3vw);
    height: 360px;
    border-radius:0 5px 5px 0;
    overflow: hidden;    
    z-index:10;
}


.peaple .link_btn{
    margin-top: 32px;
}
/*
.peaple:hover .link_btn.w_bg{
    color:#fff;
    background:var(--base-text-color);
}

.peaple:hover .link_btn.w_bg{
    color:#fff;
    background:var(--base-text-color);
}

.peaple:hover .link_btn:after{
    transform: translateX(5px);
    background-image:url(../image/common/w_link_btn_ar.png);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94);
}
*/


@media screen and (max-width :1000px ){
    .peaple .peaple_inr{
        padding-right: 5vw;
    }
}

@media screen and (max-width :800px ){
    .peaple {
        position: relative;
        z-index:10;
        background:#fff;
    }

    .peaple:before{
        display:none;
    }

    .peaple .peaple_inr {
        display: block;
        padding:0;
    }
    .peaple .peaple_inr:before{
        width:100%;
        background-image:url(../image/peaple_bg_sp.png);
        background-size:400px 345px;
    }
    .peaple:hover .peaple_inr:before{
        background-color:#b59133;   
        transition:all 0.4s cubic-bezier(.25, .46, .45, .94);  
    }

    .peaple .tit_area {
        position: relative;
        width: 63.75%;
        z-index:10;
    }
    .peaple .text_area {
        position: relative;
        display: flex;
        justify-content: center; 
        padding:50px 0 40px;
    }
    .peaple h2 {
        width: 84px;
        display: inline-block;
        margin: 0 15px 0 0;
    }
    .peaple .v_txt {
        font-size:15px;
        line-height: 2;
    }


    .peaple .img_area {
        position: absolute;
        width: 36.25%;
        height: 100%;
        right: 0;
        top: 0;
        border-radius:0;
        overflow: hidden;    
        z-index:10;
    }


    .peaple .link_btn{
        width: 100%;
        margin-top: 0;
        border-radius:0;
    }



}
/* ==========================================================================
	plan
========================================================================== */
.plan {
    position: relative;
    background:#f4f1e9;
    padding:145px 0 130px;
    z-index:15;
}

.plan:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#f4f1e9;
    width: 100%;
    height: 100%;
    z-index:-1;
} 

.plan .plan_inr {
    position: relative;
    padding-left:30vw;
    padding-left:max(30vw,calc(6.66vw + 290px));
    box-sizing:border-box;
}
.plan .plan_inr p {
    font-size: 16px;
    font-size: var(--fz16);
    line-height: 2.375;
    font-weight: 500;
    margin-bottom: 75px;
    width: 82%;
}
.plan .tit_area {
    position: absolute;
    width: 180px;
    left: calc(6.66vw + 42px);
    top: 0;
    z-index:10;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
}
.plan .tit_area .enb {
    
}
.plan .tit_area h2 {
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 500;
    line-height: 1.94;
}
.plan .plan_slide {
    width: 100%;
}

.plan .plan_slide .slick-prev,
.plan .plan_slide .slick-next{
     top: 14vw;   
    opacity:0;
}
.plan .plan_slide:hover .slick-prev,
.plan .plan_slide:hover .slick-next{
     opacity:100;
}

.plan .plan_slide .slick-next{
    right: calc(13.3vw + min(6.66vw,50px) - 38px);
}



.plan .plan_slide a {
    display: block;
    margin-right: min(6.66vw,50px);
}
.plan .plan_slide .slick-list{
    padding-right: 13.3vw;
    
}
.plan a .img_area {
    position: relative;
    width: 100%;
    border-radius:5px;
    overflow: hidden;
}
.plan a .img_area:before{
    content:"";
    display: block;
    padding-top: 125%;
}
.plan a img{    
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.plan a:hover img{
    transform: scale(1.05);    
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.plan a .days{
    position: relative;
    display: block;
    margin:26px 0 17px;
    font-size: 15px;
    color: var(--base-yellow-color);
    font-weight: 500;
    padding-left: 28px;
    box-sizing:border-box;
}
.plan a .days:before{
    content:"";
    display: block;
    width: 15px;
    height: 17px;
    position: absolute;
    left: 2px;
    top: 0;
    background:url(../image/plan_icon.png);
    background-size:cover;
}
.plan .plan_inr a p{
    font-size: 20px;
    font-size: var(--fz20);
    line-height: 1.8;
    font-weight: 500;
    transition: color 0.4s ease; 
    margin-bottom: 0 !Important;
}
.plan a:hover p {
    color: var(--base-yellow-color);
    transition: color 0.4s ease; 
}

.plan .link_btn {
    position: absolute;
    left: 6.66vw;
    top:543px;
}
.plan .links-bottom{
    position: absolute;
    left: 6.66vw;
    top:1080px;
    z-index:10;
    width: 10px;
    height: 10px;
    
}
.plan .links-bottom02{
    position: absolute;
    left: 6.66vw;
    top:1850px;
    z-index:10;
    width: 10px;
    height: 10px;
    
}


@media screen and (max-width :1500px ){
    .plan .links-bottom{
        top:890px;

    }
    .plan .links-bottom02{
        top:1660px;    
    }

    
}



@media screen and (max-width :1000px ){
 
    .plan .plan_inr p {width: 90%;}   
}

@media screen and (max-width :800px ){
    
    .plan {
        padding:17.5vw 0 18.125vw;
    }
    .plan .plan_inr {
        padding:0;
    }
    .grad-wrap{
        position: relative;
    }
    .grad-item {
      position: relative;
      overflow: hidden;
      height: 100px; /*隠した状態の高さ*/
    width: 80%;
    margin: 45px auto 80px;
    }
    .grad-btn {
        display: block;
        position: absolute;
        right: 10%;
        bottom: -30px;
        font-size: 15px;
        font-size: var(--fz15);
        color: var(--base-link-color);
        text-align: right;
        cursor: pointer;
        z-index: 10;
        font-weight: 500;
    }
    .grad-item::before {
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px; /*グラデーションで隠す高さ*/
      background: -webkit-linear-gradient(top, rgba(244,241,233,0) 0%,  rgba(244,241,233,1000) 100%);
      background: linear-gradient(top, rgba(244,241,233,0) 0%,  rgba(244,241,233,1000) 100%);
      content: "";
    }
    .grad-trigger {
      display: none; 
    }
    .grad-trigger:checked + .grad-btn {
      display: none; 
    }
    .grad-trigger:checked ~ .grad-item {
      height: auto; /
    }
    .grad-trigger:checked ~ .grad-item::before {
      display: none;
    }
    .plan .plan_inr p {
        font-size: 15px;
        font-size: var(--fz15);
        line-height: 2.13;
        margin:0;
        width: 100%;
    }

    .plan .tit_area {
        position: relative;
        width: 100%;
        text-align: center;
        left:auto;
        display: block;
    }
    .plan .tit_area h2 {
        display: block;
        font-size: 26px;
        font-size: var(--fz26);
        line-height: 1.65;
        margin-bottom: 15px;
    }
    .plan .plan_slide {
        width: 100%;
    }

    .plan .plan_slide .slick-prev,
    .plan .plan_slide .slick-next{
         top: 40vw;   
        opacity:0;
    }
    .plan .plan_slide:hover .slick-prev,
    .plan .plan_slide:hover .slick-next{
         opacity:100;
    }

    .plan .plan_slide .slick-next{
        right: 6.25vw;
    }

    .plan .plan_slide .slick-prev{
        left: 6.25vw;
    }


    .plan .plan_slide a {
        margin:0 3.125vw;
    }
    .plan .plan_slide .slick-list{
        padding-right: min(6.25vw,250px);
    }
    .plan a .days{
        margin:25px 0 13px;
        font-size: 14px;
        padding-left: 24px;
    }
    .plan .plan_inr a p{
        font-size: 18px;
        font-size: var(--fz18);
    }

    .plan .link_btn {
        position: relative;
        left: auto;
        top:auto;
        width: 80%;
        margin:60px auto 0;
        padding-left: 0;
        text-align: center;
    }
    .plan .links-bottom,
    .plan .links-bottom02{
        display:none;
    }


}

/* ==========================================================================
	movie
========================================================================== */
.movie{
    position: relative;
    background: url(../image/mesh.jpg) repeat;
    background-size: 2px 2px;
    padding: 150px 10vw 0;
    box-sizing: border-box;
    height: 850px;
    z-index: 10;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.movie::-webkit-scrollbar {
  display: none;
}
.movie_inr {
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
}
.movie .tit_area {
    position:sticky;
    top:0;
    width: 190px;
    height:480px;
	-js-display: flex;
	display:-webkit-box;
	display: -webkit-flex;
	display:-moz-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
    justify-content: space-between;
	-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
    flex-direction: row-reverse;
}
.movie .tit_area h2 {
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 500;
    line-height: 1.94;
    color:#fff;
}
.movie .movie_area {
    width: calc(100% - 180px - 8vw);
}
.movie a {
    display: block;
    margin-bottom: 70px;
}
.movie .thumb {
    position: relative;
    border-radius:5px;
    overflow: hidden;
    transition:opacity 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .thumb{
    opacity: .5;
    transition:opacity 0.4s cubic-bezier(.25, .46, .45, .94);  
}
.movie .thumb:before{
    content:"";
    display: block;
    padding-top: 57.2%;
}
.movie .text_area {
    margin-top: 25px;
}
.movie .text_area .enb {
    display:inline-block;
    padding:10px;
    border:1px solid #fff;
    padding-top:10px;
    text-align: center;
    margin-right: 35px;
    font-size: 14px;
    color:#fff;
    box-sizing:border-box;
    border-radius:5px;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .text_area .enb {
    color:#dbb949;
    border-color:#dbb949;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie .text_area p {
    position: relative;
    display:inline-block;
    padding-left: 30px;
    font-size: 17px;
    font-weight: 500;
    color:#fff;
    box-sizing:border-box;
}

.movie a:hover .text_area p {
    color:#dbb949;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}

.movie .text_area p:before{
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background:url(../image/common/link_btn_ar.png);
    background-size:cover;
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.movie a:hover .text_area p:before{
    background-image:url(../image/common/movie_link_btn_ar.png);
    transition:all 0.4s cubic-bezier(.25, .46, .45, .94); 
}
@media screen and (max-width: 1000px){
    .movie{padding-left: 8vw;padding-right: 8vw;}
    .movie .text_area p {
        display: block;
        margin-top: 20px;
    }
    
}
@media screen and (max-width :800px ){

    .movie{
        padding:18vw 10% 0;
        height: 580px;
    }
    .movie_inr {
        display: block;
    }
    .movie .tit_area {
        position:relative;
        top:0;
        width: 100%;
        height:auto;
        display: block;
        text-align: center;
    }
    .movie .tit_area h2 {
        display: block;
        font-size: 26px;
        font-size: var(--fz26);
        line-height: 1.65;
        color:#fff;
        margin-bottom: 15px;
    }
    .movie .movie_area {
        width: 100%;
        margin-top: 50px;
    }
    .movie a {
        margin-bottom: 40px;
    }
    .movie .text_area {
        margin-top: 20px;
    }
    .movie .text_area .enb {
        margin-right: 0;
        font-size: 13px;
    }
    .movie .text_area p {
        padding-left: 30px;
        font-size: 16px;
        font-size: (--var-fz16);
        font-weight: 500;
    }
    
}
/* ==========================================================================
	news
========================================================================== */

.news {
    position: relative;
    z-index:10;
    padding:150px 0 140px;
    background:#f4f1e9;
    overflow: hidden;
}
.news:before{
    content:"";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:#f4f1e9;
    width: 100%;
    height: 100%;
    z-index:-1;
} 
.news .tit_area {
    position: relative;
    padding-left: 6.66vw;
    box-sizing:border-box;
    z-index:10;
}
.news h2 {
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 700;
    margin-bottom: 38px;

}
.news .news_slide {
    margin-top: 97px;
}
.news .news_slide .slick-list{
    margin-right: -40px;
}
.news .news_slide a {
    position: relative;
    display: block;
    margin-right: 40px;
}
.news .news_slide .slick-prev,
.news .news_slide .slick-next{
     top: calc(6.4vw + 35px);   
    opacity:0;
}
.news .news_slide:hover .slick-prev,
.news .news_slide:hover .slick-next{
     opacity:100;
}

.news .news_slide .slick-next{
    right: calc(6.66vw - 38px);
}
.news .news_slide .slick-prev{
    left: calc(6.66vw - 38px);
}


.news .img_area {
    position: relative;
    border-radius:5px;
    overflow: hidden;
    margin-bottom: 38px;
}

.news .img_area:before{
    content:"";
    display: block;
    padding-top: 69.23%;
}

.news a img{    
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.news a:hover img{
    transform: scale(1.05);    
   transition: transform 0.4s cubic-bezier(.25, .46, .45, .94); 
}
.news .text_area {
    position: relative;
}
.news .cate {
    display:inline-block;
    position: relative;
    color:var(--base-yellow-color03);
    font-size: 14px;
    font-size: var(--fz14);
}
.news .cate:after{
    content:"";
    display: block;
    position: absolute;
    width:0;
    height: 1px;
    left:0;
    bottom:-6px;
    background:var(--base-link-color);
    z-index: 10;
    transition: width 0.4s var(--easeOutQuad);
}
.news a:hover .cate:after{
    width: 100%;
    transition: width 0.4s var(--easeOutQuad);
}
.news .day {
    position: absolute;
    top: 0;
    right: 0;
    text-align:right;
    font-size: 15px;
    font-size: var(--fz14);
    color:#b0a076;
}
.news .text_area p{
    margin-top: 25px;
    font-size: 17px;
    font-size: var(--fz17);
    line-height: 1.764;
    font-weight: 500;
    transition: color 0.4s var(--easeOutQuad);
}
.news a:hover .text_area p{
    color:var(--base-link-color);
    transition: color 0.4s var(--easeOutQuad);
}
.news .link_btn{
    position: absolute;
    top: 150px;
    right: 6.66vw;
}


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

    .news {
        padding:18vw 0;
    }
    .news .tit_area {
        position: relative;
        padding-left: 0;
        text-align: center;
        box-sizing:border-box;
    }
    .news h2 {
    font-size: 38px;
    font-size: var(--fz38);
    font-weight: 700;
    margin-bottom: 38px;

    }
    .news .news_slide {
        margin-top: 45px;
    }
    .news .news_slide .slick-list{
        margin-right: 20px;
    }
    .news .news_slide a {
        margin-right: 20px;
    }
    
    
    .news .news_slide .slick-prev,
    .news .news_slide .slick-next{
         top: calc(16vw + 25px);   
    }

    .news .news_slide .slick-next{
        right: calc(17.5vw - 25px);
    }
    .news .news_slide .slick-prev{
        left: calc(17.5vw - 25px);
    }

    .news .img_area {
        margin-bottom: 25px;
    }
    .news .cate {
        font-size: 14px;
        font-size: var(--fz14);
    }
    .news .cate:after{
        bottom:-4px;
    }
    .news .day {
        font-size: 12px;
        font-size: var(--fz12);
    }
    .news .text_area p{
        margin-top: 18px;
        font-size: 16px;
        font-size: var(--fz16);
        line-height: 1.8125;
    }
    .news a:hover .text_area p{
        color:var(--base-link-color);
        transition: color 0.4s var(--easeOutQuad);
    }
    .news .link_btn{
        position: relative;
        right: auto;
        top:auto;
        width: 80%;
        margin:60px auto 0;
        padding-left: 0;
        text-align: center;
    }


    
    
}