@charset "UTF-8";

.hide-text {
	display:block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

.pcNone,
.pcNone2,
.pcNone3{
	display:none;
}

/* color */
.c1,.c1 a{
    color: var(--c1);
}
.c2,.c2 a{
    color: var(--c2);
}
.c3,.c3 a{
    color: var(--c3);
}
.cw,.cw a{
    color: #ffffff;
}

/* bg */
.bg1{
    background-color: var(--c1);
}
.bg2{
    background-color: var(--c2);
}
.bg3{
    background-color: var(--c3);
}
.bgw{
    background-color: #fff;
}

/* font-family */
.ffnf{
    font-family: 'Noto Serif JP', serif;
}
.ffzg{
    font-family: 'Zen Kaku Gothic New', sans-serif;
}
.fflb{
    font-family: 'Libre Baskerville', serif;
}

/* font-size */

.fs10{
    font-size: 1.0rem;
}
.fs12{
    font-size: 1.2rem;
}
.fs13{
    font-size: 1.3rem;
}
.fs14{
    font-size: 1.4rem;
}
.fs15{
    font-size: 1.5rem;
}
.fs16{
    font-size: 1.6rem;
}
.fs18{
    font-size: 1.8rem;
}
.fs20{
    font-size: 2.0rem;
}
.fs22{
    font-size: 2.2rem;
}
.fs24{
    font-size: 2.4rem;
}
.fs26{
    font-size: 2.6rem;
}
.fs28{
    font-size: 2.8rem;
    line-height: 1;
}
.fs30{
    font-size: 3.0rem;
    line-height: 1;
}
.fs32{
    font-size: 3.2rem;
    line-height: 1;
}
.fs34{
    font-size: 3.4rem;
    line-height: 1;
}
.fs36{
    font-size: 3.6rem;
    line-height: 1;
}
.fs40{
    font-size: 4.0rem;
    line-height: 1;
}
.fs42{
    font-size: 4.2rem;
    line-height: 1;
}
.fs45{
    font-size: 4.5rem;
    line-height: 1;
}
.fs48{
    font-size: 4.8rem;
    line-height: 1;
}
.fs60{
    font-size: 6.0rem;
    line-height: 1;
}


/* font-weight */

.fwl{
    font-weight: 300;
}
.fwr{
    font-weight: 400;
}
.fwm{
    font-weight: 500;
}
.fwsb{
    font-weight: 600;
}
.fwb{
    font-weight: 700;
}
.fweb{
    font-weight: 800;
}
.fwbk{
    font-weight: 900;
}

/* letter_spacing */

.ls0{
    letter-spacing: 0;
}
.ls50{
    letter-spacing: 0.05em;
}
.ls100{
    letter-spacing: 0.1em;
}
.ls150{
    letter-spacing: 0.15em;
}
.ls200{
    letter-spacing: 0.2em;
}

/* line_height */

.lh100{
    line-height: 1;
}
.lh120{
    line-height: 1.2;
}
.lh130{
    line-height: 1.3;
}
.lh140{
    line-height: 1.4;
}
.lh150{
    line-height: 1.5;
}
.lh160{
    line-height: 1.6;
}
.lh170{
    line-height: 1.7;
}

/* maxbox */

.cmn_maxbox_600 {
	width:100%; max-width: 600px; margin: 0 auto;
}
.cmn_maxbox_700 {
	width:100%; max-width: 700px; margin: 0 auto;
}
.cmn_maxbox_800 {
	width:100%; max-width: 800px; margin: 0 auto;
}
.cmn_maxbox {
	width:100%; max-width: 1000px; margin: 0 auto;
}
.cmn_maxbox_1200 {
	width:100%; max-width: 1200px; margin: 0 auto;
}
.cmn_maxbox_1300 {
	width:100%; max-width: 1300px; margin: 0 auto;
}
.cmn_maxbox_1400 {
	width:100%; max-width: 1400px; margin: 0 auto;
}

/* display */

.db{
    display: block;
}

.dib{
    display: inline-block;
}

.df{
    display: flex;
}

.jcc{
    justify-content: center;
}

.jcsb{
    justify-content: space-between;
}

.aic{
    align-items: center;
}

.fdc{
    flex-direction: column;
}

.pe::before,
.pe::after{
    content: "";
    display: block;
}

/* others */

.tac{
    text-align: center;
}
.tal{
    text-align: left;
}
.tar{
    text-align: right;
}

.ma{
    margin: 0 auto;
}

.fit img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.full{
    width: 100%;
    height: 100%;
}

.bgi{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* padding */

.pl5{padding-left: 5px;}
.pl10{padding-left: 10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl25{padding-left: 25px;}
.pl30{padding-left: 30px;}
.pl40{padding-left: 40px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
.pl70{padding-left: 70px;}
.pl80{padding-left: 80px;}
.pl100{padding-left: 100px;}
.pl150{padding-left: 150px;}

.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.pr25{padding-right: 25px;}
.pr30{padding-right: 30px;}
.pr40{padding-right: 40px;}
.pr50{padding-right: 50px;}
.pr60{padding-right: 60px;}
.pr70{padding-right: 70px;}
.pr80{padding-right: 80px;}
.pr100{padding-right: 100px;}
.pr150{padding-right: 150px;}

.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt30{padding-top: 30px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt60{padding-top: 60px;}
.pt70{padding-top: 70px;}
.pt80{padding-top: 80px;}
.pt100{padding-top: 100px;}
.pt150{padding-top: 150px;}

.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb25{padding-bottom: 25px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb60{padding-bottom: 60px;}
.pb70{padding-bottom: 70px;}
.pb80{padding-bottom: 80px;}
.pb100{padding-bottom: 100px;}
.pb150{padding-bottom: 150px;}

/* margin */

.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml25{margin-left: 25px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml60{margin-left: 60px;}
.ml70{margin-left: 70px;}
.ml80{margin-left: 80px;}
.ml100{margin-left: 100px;}
.ml150{margin-left: 150px;}

.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr25{margin-right: 25px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr60{margin-right: 60px;}
.mr70{margin-right: 70px;}
.mr80{margin-right: 80px;}
.mr100{margin-right: 100px;}
.mr150{margin-right: 150px;}

.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}
.mt100{margin-top: 100px;}
.mt150{margin-top: 150px;}

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb100{margin-bottom: 100px;}
.mb150{margin-bottom: 150px;}

/* common /////////////////////////////////////////////////////////////////////////////////////////// */


#wrapper {
	overflow: hidden;
}


header {
	width:100%;
    position: relative;
    z-index: 10;
}

main {
    width:100%;
    position: relative;
    z-index: 0;
}

footer {
	width:100%;
    position: relative;
    z-index: 0;
}

/* modalmenu */

#header_modalmenu_check {
    display: none;
}

.header_modalmenu_btn {
    flex-shrink: 0;
	display: none;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;

    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;

	z-index: 90000;
}

.header_modalmenu_btn .box {
    display: inline-block;
    width: 30px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 15px;
}

.header_modalmenu_btn .box span {
    position: absolute;
    left: 0;
    top: calc((100% - 1px)/2);
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--c1);

    transition: all .3s;
}

.header_modalmenu_btn .top {
    transform: translateY(-5px);
}

.header_modalmenu_btn .bottom {
    transform: translateY(5px);
}

#header_modalmenu_check:checked ~ .header_modalmenu_btn .top {
    transform: rotate(-135deg);
}

#header_modalmenu_check:checked ~ .header_modalmenu_btn .bottom {
    transform: rotate(135deg);
}

#header_modalmenu_close_bg {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);

    transition: all .2s;
	z-index: -1;
}

#header_modalmenu_area {
    position: fixed;
    top: -60px;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

    opacity: 0;
    pointer-events: none;
    transition: all .3s;
    display: none;

	z-index: 80000;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area {
    opacity: 1;
    pointer-events: all;

    top: 0;
}

.header_modalmenu_areainner {
    padding: 80px 0 20px;
}

.header_modalmenu_nav ul {
}

.header_modalmenu_nav ul li{
    width: 300px;
    margin: 0 auto;

    border-bottom: solid 1px var(--cb);
}

.header_modalmenu_nav ul li:first-of-type{
    border-top: solid 1px var(--cb);
}

.header_modalmenu_nav a{
    padding: 22px 30px;

    display: flex;
    align-items: flex-end;
}

.header_modalmenu_nav a figure{
    width: 36px;
    height: 36px;
    margin: 0;
}

.header_modalmenu_nav a figure img{
    object-fit: contain;
}

.header_modalmenu_nav a > div{
    margin-left: 40px;
}

.header_modalmenu_sns{
    padding: 40px 0;
}

.header_modalmenu_sns > ul > li{
    margin-left: 20px;
}

.header_modalmenu_sns > ul > li:first-of-type{
    margin-left: 0px;
}

.header_modalmenu_banner a img{
    width: 100%;
    max-width: 500px;
}

/* scrollanime */

.scrollanime,
.scrollanime2,
.scrollanime3{
    opacity: 0;
}

.fadein{
    animation: fadein 1s forwards;
}

@keyframes fadein{
    0%{opacity: 0;}
    100%{opacity: 1;transform: translate(0) scale(1);}
}

.toup{transform: translateY(30px);}
.todown{transform: translateY(-30px);}
.toright{transform: translate(-30px);}
.toleft{transform: translateX(30px);}
.expansion{transform: scale(.7);}
.shrink{transform: scale(1.2);}

/* cmn ///////////////////////////////////// */

/* header */

.header_infobar{
    height: 100px;
    padding-right: 45px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100000;
}

.header_logo{
    width: 500px;
    height: 100%;

    font-size: 28px;
}

.header_nav ul > li{
    width: 130px;
    height: 100px;
}

.header_nav ul > li > a{
    padding-top: 20px;
}

.header_nav ul > li > a > figure{
    width: 28px;
    height: 28px;
}

.header_nav ul > li > a > figure > img{
    object-fit: contain;
}

.header_nav ul > li > a:hover > figure{
    transform: scale(1.3);
    transition: none;
}

/* cmn_maintitle */

.cmn_mainimg{
    height: 300px;

    background-image: url(../img/cmn_mainimg.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right bottom;
}

.cmn_maintitle{
    height: 100%;
    padding-bottom: 60px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.cmn_maintitle > p{
    text-transform: capitalize;
}


/* footer */

.footer_top_left{
    flex-shrink: 0;
}

.footer_top_left p a{
    display: inline-block;
    padding-left: 20px;
    background-image: url(../img/cmn_ico_phone.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.footer_top_left p a:hover{
    color: var(--cb);
    opacity: .8;
}

.footer_top_right{
    max-width: 475px;
}

.footer_bottom{
    padding: 9px 50px;
}

.footer_bottom_right > li::after{
    content: "／";
    display: inline-block;
    padding-left: 17px;
    padding-right: 17px;
}

.footer_bottom_right > li:last-of-type::after{
    content: none;
}

.footer_gotop {
    position: fixed;
    right: 10px;
    bottom: 90px;
    display: none;
    z-index: 90000;
}

.footer_gotop a{
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    border: solid 1px var(--c1);
    background-image: url(../img/footer_gotop_icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.footer_gotop a:hover{
    opacity: 1;
    background-position: center top 12px;
}

/* cmn_tit */

.cmn_tit_1st h2{
    padding-left: 60px;

    position: relative;
}

.cmn_tit_1st h2::before{
    content: "";
    display: block;
    width: calc( (100vw - 1000px)/2 + 20px );
    height: 1px;
    background-color: var(--c1);

    position: absolute;
    top: 20px;
    right: calc( 100% - 20px );
}

.cmn_tit_1st h2::after{
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px var(--c1);

    position: absolute;
    top: 0px;
    left: 0px;
}

/* cmn_btn */

.cmn_btn a,
.contact_form .contact_btn_area button{
    height: 24px;
    padding-left: 34px;

    line-height: 2.2rem;

    background-image: url(../img/cmn_btn_point.svg);
    background-repeat: no-repeat;
    background-position: left center;
}

.cmn_btn a:hover,
.contact_form .contact_btn_area button:hover{
    color: #666;
    background-image: url(../img/cmn_btn_point_2.svg);
}

/* cmn_dl */

.cmn_dl > div {
    display: flex;
    line-height: 20px;
}

.cmn_dl > div dt{
    width: 250px;
    flex-shrink: 0;

    display: flex;
    padding: 20px 30px 20px 0;
}

.cmn_dl > div dd{
    width: 100%;

    display: flex;
    padding: 20px 30px;
}

/* cmn_ul */
.cmn_ul > li{
    line-height: 2.0rem;
    margin-top: 5px;
    padding-left: 30px;

    background-image: url(../img/cmn_ul_point.svg);
    background-repeat: no-repeat;
    background-position: left top 2px;
}

/* cmn_banner */

.cmn_banner > a{
    max-width: 600px;

    box-shadow: 5px 5px 5px rgba(46,77,91,.5);

    position: relative;
    transform: translate(-2px);
    transition: all .3s;
}

.cmn_banner > a::before{
    width: 100px;
    height: 0px;

    background-image: url(../img/cmn_deco_01.svg);
    background-repeat: no-repeat;
    background-size: 100px auto;
    background-position: center top;

    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
}

.cmn_banner > a:hover::before{
    height: 80px;
    top: -75px;
    z-index: 1;
}

.cmn_banner > a:hover{
    transform: translate(2px);

    box-shadow: none;
}


/* home ///////////////////////////////////// */

/* home_header */

.home_body .header_infobar{
    background-color: transparent;

    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

.home_body .header_logo{
    background-color: transparent;
}

.home_body .header_logo a{
    color: #fff;
    transition: color 1s;
}

.home_body .header_nav > ul > li > a{
    color: #fff;
    transition: color 1s;
}

.home_body .header_nav > ul > li > a > span{
    color: var(--c2);
    transition: color 1s;
}

.home_body .header_nav ul > li > a > figure{
    background-image: url(../img/cmn_ico_about_black.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.home_body .header_nav ul > li:nth-of-type(2) > a > figure{
    background-image: url(../img/cmn_ico_experience_black.svg);
}

.home_body .header_nav ul > li:nth-of-type(3) > a > figure{
    background-image: url(../img/cmn_ico_bagasse_black.svg);
}

.home_body .header_nav ul > li:nth-of-type(4) > a > figure{
    background-image: url(../img/cmn_ico_contact_black.svg);
}

.home_body .header_nav ul > li > a > figure > img{
    transition: opacity 1s;
}

.home_maincopy{
    position: absolute;
    bottom: 60px;
    right: 65px;
    z-index: 10;

    transition: color 1s;
    animation-duration: 3s;
    pointer-events: none;
}

/* home_mainimg */

.home_body .swiper-slide{
    height: calc(var(--vh, .5vh) * 100);
}

.home_body .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home_body .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 12px;
}

.home_body .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    background: #fff;
}

.home_body .swiper-pagination-bullet{
    background: #fff;
    opacity: 1;
}

.home_body .swiper-pagination-bullet-active{
    background: #ffc800;
}

.home_body .swiper-slide.slide_04 img{
    object-position: center bottom;
}

/* home_sns */

.js-fb{
    width: 47.5%;
}

.home_sns_instagram{
    width: 47.5%;
    height: 475px;
    /* background-color: #ccc; */
}

/* home_introduction */

.home_introduction{
    margin-top: 100px;

    background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%), url(../img/home_introduction_bg.jpg);
    background-size: 100% 300px, cover;
    background-position: center bottom, center;
}

.home_introduction .cmn_maxbox_800{
    transform: translateY(-75px);
}

.home_introduction .cmn_content{
    width: 100%;
    min-height: 250px;
    padding: 30px 3%;
    background-color: rgba(255,255,255,.7);
}

/* home_content */

.home_content{
    position: relative;
    z-index: 0;
}

.home_experience{
    margin-top: 250px;
}

.home_content::before{
    width: 50%;
    height: 100%;
    background-color: var(--c3);

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

.home_experience::before{
    width: 70%;
    background-color: var(--c4);

    left: auto;
    right: 0px;
}

.home_content .home_content_text{
    width: 84px;
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 1;
}

.home_bagasse .home_content_text{
    width: 103px;
    top: auto;
    bottom: 0px;
    left: auto;
    right: 20px;
}

.home_experience .home_content_text{
    width: 568.4px;
    top: auto;
    bottom: 48.5px;
}

.home_about  .cmn_content > div{
    flex-direction: row-reverse;
    transform: translateY(-100px);

    background-image: url(../img/cmn_deco_02.png);
    background-repeat: no-repeat;
    background-size: 220px auto;
    background-position: right bottom;
}

.home_bagasse  .cmn_content > div{
    background-image: url(../img/cmn_deco_03.png);
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: left top;
}

.home_experience .cmn_content > div{
    flex-direction: row-reverse;
    transform: translateY(-100px);

    background-image: url(../img/cmn_deco_04.png);
    background-repeat: no-repeat;
    background-size: auto 180px;
    background-position: right top;
}

.home_bagasse  .cmn_content > div{
    align-items: flex-end;
}

.home_content  .cmn_content > div > div{
    width: 300px;
}

.home_experience  .cmn_content > div > div{
    width: 400px;
    min-height: 500px;
    padding-top: 230px;
}

.home_content .cmn_content > div > figure{
    width: 60%;
    height: 500px;
}

.home_experience_img{
    width: 50%;
    height: 500px;

    position: absolute;
    top: -100px;
    left: 0px;
}

/* about ///////////////////////////////////// */

.about_introduction{
    height: 560px;
    background-image: url(../img/about_introduction_bg.jpg);

    position: relative;
}

.about_introduction .cmn_maxbox_800{
    min-height: 250px;
    padding: 30px 3%;
    background-color: rgba(255,255,255,.8);

    position: relative;
    z-index: 1;
}

.about_introduction .cmn_maxbox_800 > *{
    max-width: 650px;
}

.about_introduction_deco{
    width: 198.7px;

    position: absolute;
    left: 50px;
    bottom: 0;

    animation: aboutIntroDeco 10s infinite;
    transform-origin: left bottom;
}

@keyframes aboutIntroDeco {
    0%{transform: rotate(0deg);}
    1%{transform: rotate(-5deg);}
    3%{transform: rotate(0deg);}
    50%{transform: rotate(0deg);}
    51%{transform: rotate(-3deg);}
    53%{transform: rotate(0deg);}
    54%{transform: rotate(-3deg);}
    56%{transform: rotate(0deg);}
    100%{transform: rotate(0deg);}
}

.about_greeting .cmn_content{
    position: relative;
}

.about_greeting .cmn_content > figure{
    width: 50%;
    height: 370px;

    position: absolute;
    right: 0px;
    bottom: 0px;
}

.about_greeting .cmn_content > p{
    width: 45%;
}

.about_company_map{
    position: relative;
}

.about_company_map figure{
    width: 285px;

    position: absolute;
    bottom: calc( 100% - 5px );
    right: 0px;
}

.about_company iframe{
    width: 100%;
    height: 400px;
}

.about_partners .cmn_content > ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
}

.about_partners .cmn_content > ul > li > a:hover{
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

/* experience ///////////////////////////////////// */

.experience_item:nth-of-type(2n-1){
    flex-direction: row-reverse;
}

.experience_item > div{
    width: 50%;
}

.experience_item:nth-of-type(2n-1) > div{
    margin-left: 100px;
}

.experience_item:nth-of-type(2n) > div > .cmn_tit_1st,
.experience_item:nth-of-type(2n) > div > .cmn_content > p,
.experience_item:nth-of-type(2n) > div > .cmn_content > div{
    padding-left: calc( (100vw - 1000px) / 2 );
    margin-right: 100px;
}

.experience_item .cmn_tit_1st h2::before{
    min-width: 120px;
}

.experience_item .cmn_content{
    position: relative;
}

.experience_item:nth-of-type(2n-1) .cmn_content > div{
    height: 305px;
    padding-left: 30px;
}

.experience_item:nth-of-type(2n) .cmn_content > div{
    height: 265px;
}

.experience_item .cmn_content > figure{
    width: 62.5px;
    position: absolute;
    bottom: 40px;
    left: 335px;
}

.experience_item:nth-of-type(2) .cmn_content > figure{
    width: 78.7px;
    left: auto;
    right: 135px;
}

.experience_item:nth-of-type(3) .cmn_content > figure{
    width: 63.8px;
    bottom: 20px;
}

.experience_item_image{
    width: 50%;
    height: 500px;
    flex-shrink: 0;
    position: relative;
}

.experience_item_image > span{
    width: 180px;
    line-height: 60px;

    position: absolute;
    top: 0px;
    left: 0px;
}

.experience_item_image > p{
    text-shadow: 2px 2px 4px rgba(0,140,30,.75);

    position: absolute;
    bottom: 30px;
    right: 30px;
}

.experience_essentitials .cmn_btn a img{
    width: 25px;
    padding-left: 5px;
    transform: translateY(-3px);
}


.experience_flow .cmn_content > ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
}

.experience_flow .cmn_content > ul > li{
    position: relative;
}

.experience_flow .cmn_content > ul > li::before{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--c2);

    position: absolute;
    right: -30px;
    top: 50%;
    transform: translate(-50%);
}

.experience_flow .cmn_content > ul > li:last-of-type::before{
    content: none;
}

.experience_schedule .cmn_content > figure.spNone3{
    width: calc( 100% + 20px );
}

.experience_access_map{
    display: flex;
    flex-direction: row-reverse;
}

.experience_access_map > figure,
.experience_access_map > iframe{
    width: 100%;
    height: 400px;
}

/* bagasse ///////////////////////////////////// */

.bagassse_about .cmn_content{
    display: flex;
}

.bagassse_about .cmn_content > div{
    width: 50%;
    padding-left: calc( (100vw - 1000px) / 2 );
    padding-right: 45px;

    position: relative;
}

.bagassse_about .cmn_content > div > h2 > figure{
    width: 463px;
    transform: translateX(-60px);
}

.bagassse_about .cmn_content > div > figure{
    width: 181px;

    position: absolute;
    bottom: 0px;
    right: 45px;
}

.bagassse_about .cmn_content > figure{
    width: 50%;
    height: 500px;

    flex-shrink: 0;
    position: relative;
}

.bagassse_about .cmn_content > figure .bagasse_about_text{
    width: 103px;
    height: auto;

    position: absolute;
    bottom: 5px;
    right: 10px;
}

.bagasse_feature_intro{
    display: flex;
}

.bagasse_feature_intro > figure,
.bagasse_feature_intro > p{
    width: 50%;
}

.bagasse_feature_photos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
}

.bagasse_sdgs_list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px;
}

/* contact ///////////////////////////////////// */

.contact_adress > div{
    background-image: url(../img/cmn_deco_06.svg);
    background-repeat: no-repeat;
    background-position: right 10px bottom 10px;
}

/* contact_form */

div.mfp_ok{
    display: none !important;
}

.contact_body .cmn_dl > div dt{
    width: 300px;
    flex-shrink: 0;
    position: relative;
}

.attention{
    color: var(--cr);
}

.required{
    display: inline-block;
    width: 40px;
    height: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--cr);
    text-align: center;
    position: absolute;
    top: 35px;
    right: 30px;
    transform: translateY(-50%);
}

.reenter{
    font-size: 1.5rem;
    display: inline-block;
    color: var(--cr);
    padding-left: 10px;
}

.postMark{
    color: var(--c1);
}

.contact_body .cmn_dl > div dd{
    display: block;
    width: 700px;
}

.contact_form .cmn_dl .select_box{
    width: 300px;
    position: relative;
}

.contact_form .cmn_dl .select_box select{
    width: 100%;
    height: 40px;
}

/* .contact_form .cmn_dl .select_box select:invalid{
    color: var(--c1);
} */

.contact_form .cmn_dl .select_box::after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13.0px 7.5px 0 7.5px;
    border-color: var(--cf) transparent transparent transparent;
    content: "";
    display: inline-block;
    pointer-events: none;
    position: absolute;
    top: 14px;
    right: 10px;
}

.contact_form .cmn_dl select{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    border: solid 1px var(--cf);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
}

.contact_form .cmn_dl input{
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border: solid 1px var(--cf);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

.contact_form .cmn_dl .input01{
    width: 300px
}

.contact_form .cmn_dl .input02{
    width: calc(100% - 70px);
    margin-bottom: 10px;
}

.contact_form .cmn_dl .input03{
    width: calc(100% - 70px);
}

.contact_form .cmn_dl .input04{
    width: 200px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.contact_form .cmn_dl textarea{
    width: 100% !important;
    height: 210px !important;
    padding: 10px 20px;
    border: solid 1px var(--cf);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
}

.contact_privacy > div{
    height: 200px;
    padding: 40px 30px;
    overflow-y: scroll;
    /* border: solid 1px var(--cf); */
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
}

.contact_privacy_content > div{
    padding: 20px 30px;
}

.privacy_check{
    max-width: 500px;
    margin: 0 auto;
}

.contact_form .privacy_check input{
    width: 20px;
    height: 20px;
    border: none;
    margin-right: 10px;
}

.privacy_check label{
    width: 100%;
    height: 80px;
    background-color: var(--c2);

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.contact_form .contact_btn_area{
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.contact_form .contact_btn_area button{
    border: none;
    color: var(--c1);
    background-color: transparent;
}

.contact_form .contact_btn_area button:nth-of-type(1){
    color: #666;
    background-image: url(../img/cmn_btn_point_2.svg);
}

.contact_form .contact_btn_area button:nth-of-type(2){
    margin-left: 20px;
}