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

/* ::::::::::::::::::::::::::::::::: COMMON ::::::::::::::::::::::::::::::::: */

#wrapper *{ outline:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-appearance: none; /*font-feature-settings : "palt";*/ color: #222; word-break: inherit; }
#wrapper {/* letter-spacing: 0.02em;*/ line-height: 2; text-align: center; position: relative; padding-bottom: 0!important; overflow: hidden;}
#wrapper a { text-decoration: none; }
#wrapper p { font-size: 15px; }

*.en{font-family: "Poppins", sans-serif!important; font-weight: 300; }

body { background: #FFF; }
body.fixed {position: fixed; width: 100%; height: 100%; }

button { padding: 0; }

#wrapper *.hidden{ transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; opacity: 0; transform: translateY(10px);}
#wrapper *.hidden.show{opacity: 1; transform: translate(0,0) rotateY(0);}

/* header */
header.mainHeader { position: fixed; z-index: 999; text-align: left; left: 45px; top: 40px; height: calc(100% - 40px); }
header.mainHeader p.logo { position: relative; z-index: 1000; }
header.mainHeader p.logo img { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.4s linear;}
header.mainHeader p.logo img.w { opacity: 1;  }
header.mainHeader div.inner { padding: 28vh 0 0; position: relative; }
header.mainHeader ul.menuList { font-size: 20px; }
header.mainHeader ul.menuList li { padding: 0 0 10px 20px; font-weight: 200; position: relative; opacity: 0.8; }
header.mainHeader ul.menuList li a { color: #EEE; text-decoration: none; transition: color 0.4s linear; }
header.mainHeader ul.menuList li.active { opacity: 1; }
header.mainHeader ul.menuList li.active::before { content: ""; position: absolute; width: 8px; height: 8px; background: #e1251b; border-radius: 50%; left: 0; top: 13px; }

header.mainHeader ul.menuList.black li a { color: #222; }
header.mainHeader p.logo.black img.w { opacity: 0; }
header.mainHeader p.logo.black img.b { opacity: 1; }

/* section */
#wrapper section { text-align: left; }

#wrapper section div.inner { padding: 0 0 0 280px; }
#wrapper section h2 { font-weight: 200; }

#wrapper section.kv { background: #111; position: relative; height: 100vh; max-height: 1100px; min-height: 600px; overflow: hidden; }
#wrapper section.kv p.img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(/products/evertireinitiative/img/kv_pc.jpg) no-repeat center center; background-size: cover; transition: opacity 2.1s linear 0.8s, transform 2.5s cubic-bezier(0.65, 0, 0.35, 1) 0.8s; opacity: 0; transform: scale(1.08); }
#wrapper section.kv p.img.on { opacity: 1; transform: scale(1); }
#wrapper section.kv p.scrollBtn { position: absolute; width: 60px; height: 30px; left: 0; right: 0; bottom: 50px; margin: 0 auto; animation: scrollBtn 2.0s ease infinite; }
#wrapper section.kv h1 { position: absolute; width: 45%; max-width: 800px; left: 0; top: 50%; right: 0; margin: 0 auto; transform: translateY(-50%); transition: opacity 0.7s linear 0.5s; opacity: 0; }
#wrapper section.kv h1.on { opacity: 1; }
#wrapper section.kv h1 img { width: 100%; height: auto; }
#wrapper section.kv ul.langBtn { position: absolute; right: 25px; top: 30px; font-size: 14px; letter-spacing: 0.1em; width: 100px; display: flex; justify-content: space-between; }
#wrapper section.kv ul.langBtn li { width: 46px; text-align: center;}
#wrapper section.kv ul.langBtn li a { display: block; line-height: 18px; border-radius: 9px; font-weight: 300; color: #FFF; opacity: 0.4; }
#wrapper section.kv ul.langBtn li.on a { opacity: 1; font-weight: 500; background: #454545; }

@keyframes scrollBtn {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(5px); opacity: 0.6; }
    100% { transform: translateY(0px); opacity: 1; }
}

#wrapper section.kv #load { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 15; transition: all 0.7s ease 0.1s; }
#wrapper section.kv #load.off { opacity: 0; visibility: hidden; }
#wrapper section.kv #load span { box-sizing: border-box; position: absolute; top: 0;  left: 0; bottom: 0; right: 0; margin: auto; width: 35px; height: 35px; border: 3px solid transparent;  border-top-color: #444; border-radius: 50%; animation: spinLoad 0.4s linear 0s infinite; transform-origin: center; }

@keyframes spinLoad {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#wrapper section.seg1 { background: url(/products/evertireinitiative/img/bg_seg1.svg) no-repeat right center; background-size: contain; }
#wrapper section.seg1 div.spacer { padding: 150px 8% 120px 8%; }
#wrapper section.seg1 h2 { font-size: 65px; line-height: 1.5; padding: 0 0 50px; }
#wrapper section.seg1 h3 { font-size: 42px; line-height: 1.6; font-weight: 600 !important; padding: 0 0 40px; }
#wrapper section.seg1 p { font-size: 24px; line-height: 2; padding: 0 0 30px; }

#wrapper section.seg2 { background: #eeefee url(/products/evertireinitiative/img/bg_seg2_pc.svg) no-repeat left center; background-size: contain; }
#wrapper section.seg2 div.spacer { display: flex; justify-content: space-between;}
#wrapper section.seg2 div.top { padding: 150px 0 50px; }
#wrapper section.seg2 div.top div.right { padding: 0; margin: -30px 0 0; }
#wrapper section.seg2 div.top div.right p { width: 75%; }
#wrapper section.seg2 div.bottom { padding: 0 0 150px; flex-direction: row-reverse; }
#wrapper section.seg2 div.bottom div.left { padding: 40px 0 0; }
#wrapper section.seg2 div.left { width: 40%; }
#wrapper section.seg2 div.right { width: 52%; }
#wrapper section.seg2 h2 { font-size: 85px; line-height: 1.5; padding: 0 0 40px; }
#wrapper section.seg2 p { font-size: 17px; line-height: 2.5; padding: 0 0 30px; }
#wrapper section.seg2 p.link { line-height: 1.7; padding: 15px 0 0; }
#wrapper section.seg2 p.link a { display: block; border-bottom: 1px solid #e1251b; padding: 0 30px 10px 0; background: url(/products/evertireinitiative/img/mark_outer.svg) no-repeat right top 7px; background-size: 16px 16px; }
#wrapper section.seg2 img { width: 100%; height: auto; }

#wrapper section.seg3.s2023 div.spacer { width: 85%; padding: 130px 0 160px; }
#wrapper section.seg3.s2023 div.top { padding: 0; display: flex; justify-content: space-between; }
#wrapper section.seg3.s2023 div.top div.left { width: 375px; padding: 0 0 80px; }
#wrapper section.seg3.s2023 div.top div.right { width: calc(100% - 450px); min-width: 340px; padding: 45px 0 50px; }
#wrapper section.seg3.s2023 div.top div.right p { font-size: 17px; line-height: 2.5; padding: 0 0 30px; }
#wrapper section.seg3.s2023 div.middle { padding: 0 0 60px; }
#wrapper section.seg3.s2023 div.bottom { padding: 50px 0 0; }
#wrapper section.seg3.s2023 div.topics { border-top: 1px solid #eaeaea; }
#wrapper section.seg3.s2023 div.topics div.block { border-bottom: 1px solid #eaeaea; }
#wrapper section.seg3.s2023 div.topics a { display: block; display: flex; justify-content: space-between; padding: 25px 0; }
#wrapper section.seg3.s2023 div.topics a p.date { font-size: 14px; line-height: 1.9; color: #666; width: 120px; }
#wrapper section.seg3.s2023 div.topics a h4 { font-size: 17px; line-height: 1.7; width: calc(100% - 160px); }
#wrapper section.seg3.s2023 div.topics a.outer h4::after { background: url(/products/evertireinitiative/img/mark_outer2.svg) no-repeat center right; background-size: 15px 11px; content: ""; display: inline-block; width: 15px; height: 11px; padding: 0 0 0 10px; }
#wrapper section.seg3.s2023 div.video { aspect-ratio: 16/9; width: 100%; }
#wrapper section.seg3.s2023 div.video iframe { width: 100%; height: 100%; }
#wrapper section.seg3.s2023 h2 { font-size: 85px; line-height: 1.5; padding: 0 0 40px; }
#wrapper section.seg3.s2023 h3.ja { font-size: 26px; line-height: 1.6; padding: 0 0 35px; font-weight: 600 !important; }
#wrapper section.seg3.s2023 h3.en { font-size: 42px; line-height: 1.5; padding: 0 0 40px; font-weight: 200; }
#wrapper section.seg3.s2023 p.location { font-size: 14px; padding: 0 0 20px; }
#wrapper section.seg3.s2023 p.location span { padding: 0 30px; line-height: 20px; border: 1px solid #222; display: inline-block; }
#wrapper section.seg3.s2023 button.modalOpenBtn { border: none; background: none; cursor: pointer; position: relative; width: 100%; margin: 0 0 60px; }
#wrapper section.seg3.s2023 button.modalOpenBtn img { width: 100%; height: auto; }
#wrapper section.seg3.s2023 button.modalOpenBtn::after { content: ""; width: 100px; height: 100px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; position: absolute; background: url(/products/evertireinitiative/img/btn_play_video.svg) no-repeat center center; background-size: contain; }

#wrapper section.seg4 { background: #111 url(/products/evertireinitiative/img/seg3_bg_pc.jpg) no-repeat center bottom; background-size: cover; }
#wrapper section.seg4 div.inner { padding: 130px 0; text-align: center; }
#wrapper section.seg4 h2 { font-size: 65px; line-height: 1.5; padding: 0 0 30px; color: #FFF; }
#wrapper section.seg4 p { font-size: 17px; line-height: 2.5; color: #FFF; }

/* footer */
#footer { position: relative; z-index: 1000; }

/* modal */
#modal { position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transform: all 0.8s linear; }
#modal.open { opacity: 1; visibility: visible; }
#modal button.modalCloseBtn { position: absolute; right: 25px; top: 25px; background: none; border: none; cursor: pointer; }
#modal div.bg { background: rgba(17, 17, 17, 0.8); position: absolute; left: 0; top: 0; width: 100%; height: 100%;  }
#modal div.inner { position: absolute; display: flex; justify-content: center; align-items: center; width: calc(100% - 200px); height: calc(100% - 100px); left: 100px; top: 50px; }
#modal div.youTube { aspect-ratio: 16/9; width: 100%; max-height: 100%; }
#modal div.youTube iframe { width: 100%; height: 100%; }
#modal div.youTube iframe.off { display: none; }


/* ::::::::::::::::::::::::::::::::: SMALL PC ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 1150px){

    #wrapper section.seg1 div.spacer { padding: 150px 8% 120px 0; }
    #wrapper section.seg1 h3 br { display: inherit!important; }

    #wrapper section.seg2 div.spacer { display: block; }
    #wrapper section.seg2 div.top { padding: 0 0 50px; }
    #wrapper section.seg2 div.top div.right { padding: 0; width: 85%; }
    #wrapper section.seg2 div.top div.right p { width: 100%; }
    #wrapper section.seg2 div.bottom div.left { padding: 0; width: 85%; }
    #wrapper section.seg2 div.left { width: 100%; }
    #wrapper section.seg2 div.right { width: 100%; }
    #wrapper section.seg2 h2 { padding: 130px 0 60px; }
    #wrapper section.seg2 h2.pc { display: none!important; }
    #wrapper section.seg2 h2.sp { display: inherit!important; }
    #wrapper section.seg2 p.img { padding: 0 0 50px; }

    #wrapper section.seg3.s2023 div.top { display: block; }
    #wrapper section.seg3.s2023 div.top div.left { width: 100%; padding: 0 0 50px; }
    #wrapper section.seg3.s2023 div.top div.right { width: 100%; padding: 0 0 40px; }
    #wrapper section.seg3.s2023 div.topics a p.date { width: 100px; }
    #wrapper section.seg3.s2023 div.topics a h4 { width: calc(100% - 140px); }

    #wrapper section.seg4 div.inner { padding: 130px 0 130px 10%; }

}

/* ::::::::::::::::::::::::::::::::: PC ::::::::::::::::::::::::::::::::: */
@media screen and (min-width: 980px){
    .sp{display:none!important;}
    
    .hoverAlpha{transition: opacity 0.3s ease;}
    .hoverAlpha:hover{opacity: 0.7;}
}

/* ::::::::::::::::::::::::::::::::: TA-SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 979px){
    .pc{display:none!important;}

    /* header */
    header.mainHeader { z-index: 1999; left: 0; top: 0; height: 100%; width: 100%; background: #333; opacity: 0; visibility: hidden; transition: visibility 0.3s ease, opacity 0.3s ease; }
    header.mainHeader p.logo { position: absolute; left: 20px; top: 25px; z-index: 3; }
    header.mainHeader p.logo img { opacity: 0; width: 128px; height: auto; }
    header.mainHeader p.logo img.w { opacity: 1;  }
    header.mainHeader div.inner { padding: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
    header.mainHeader ul.menuList { font-size: 22px; border-top: 1px solid #444; width: 60%; }
    header.mainHeader ul.menuList li { padding: 10px 0 10px; opacity: 1; border-bottom: 1px solid #444; }
    header.mainHeader ul.menuList li a { color: #FFF; display: block; }
    header.mainHeader ul.menuList li.active { }
    header.mainHeader ul.menuList li.active::before { display: none; }

    header.mainHeader ul.menuList.black li a { color: #FFF; }
    header.mainHeader p.logo.black img.w { opacity: 1; }
    header.mainHeader p.logo.black img.b { opacity: 0; }

    header.mainHeader ul.langBtn { position: absolute; right: 73px; top: 30px; font-size: 14px; letter-spacing: 0.1em; width: 95px; display: flex; justify-content: space-between; }
    header.mainHeader ul.langBtn li { width: 46px; text-align: center;}
    header.mainHeader ul.langBtn li a { display: block; line-height: 18px; border-radius: 9px; font-weight: 300; color: #FFF; opacity: 0.4; text-decoration: none; }
    header.mainHeader ul.langBtn li.on a { opacity: 1; font-weight: 500; background: #454545; }

    header.mainHeader.on { opacity: 1; visibility: visible; }

    button#spMenuBtn { background: #FFF; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; position: fixed; z-index: 2000; right: 15px; top: 18px; border: none; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.2); }
    button#spMenuBtn span.line { width: 18px; border-top: 1px solid #000; position: absolute; left: 12px; transition: transform 0.2s ease, top 0.2s ease; }
    button#spMenuBtn span.line.l1 { top: 18px; }
    button#spMenuBtn span.line.l2 { top: 24px; }
    button#spMenuBtn.on span.line { top: 21px; }
    button#spMenuBtn.on span.line.l1 { transform: rotate(45deg); }
    button#spMenuBtn.on span.line.l2 { transform: rotate(-45deg); }

    /* section */
    #wrapper section { }

    #wrapper section div.inner { padding: 0; }
    #wrapper section h2 { }

    #wrapper section.kv { min-height: 500px; }
    #wrapper section.kv p.img { background-image: url(/products/evertireinitiative/img/kv_sp.jpg); }
    #wrapper section.kv p.logo { position: absolute; left: 20px; top: 25px; }
    #wrapper section.kv p.scrollBtn { width: 40px; height: 20px; bottom: 25px; }
    #wrapper section.kv p.scrollBtn img { width: 100%; height: auto; }
    #wrapper section.kv h1 { width: 80%; }
    #wrapper section.kv h1 img { }
#wrapper section.kv ul.langBtn { position: absolute; right: 25px; top: 30px; font-size: 14px; letter-spacing: 0.1em; width: 100px; display: flex; justify-content: space-between; }
#wrapper section.kv ul.langBtn li { width: 46px; text-align: center;}
#wrapper section.kv ul.langBtn li a { display: block; line-height: 18px; border-radius: 9px; font-weight: 300; color: #FFF; opacity: 0.4; }
#wrapper section.kv ul.langBtn li.on a { opacity: 1; font-weight: 500; background: #454545; }

@keyframes scrollBtn {
    0% { transform: translateY(0px); opacity: 1; }
    50% { transform: translateY(5px); opacity: 0.6; }
    100% { transform: translateY(0px); opacity: 1; }
}

    #wrapper section.seg1 { }
    #wrapper section.seg1 div.spacer { padding: 90px 10% 90px 10%; }
    #wrapper section.seg1 h2 { font-size: 50px; padding: 0 0 20px; }
    #wrapper section.seg1 h3 { font-size: 32px; line-height: 1.7; padding: 0 0 40px; }
    #wrapper section.seg1 p { font-size: 19px; line-height: 2; padding: 0 0 30px; }

    #wrapper section.seg2 { background: #eeefee url(/products/evertireinitiative/img/bg_seg2_sp.svg) no-repeat left top; background-size: contain; }
    #wrapper section.seg2 div.spacer { display: block; width: 100%; padding: 75px 0 110px; margin: 0 auto; }
    #wrapper section.seg2 div.top { padding: 0 10% 20px; width: 80%; }
    #wrapper section.seg2 div.top div.right { padding: 0 0 0; margin: 0; width: 100%; }
    #wrapper section.seg2 div.top div.right p { width: 100%; }
    #wrapper section.seg2 div.bottom { padding: 0 0 110px; }
    #wrapper section.seg2 div.bottom div.left { padding: 0 10%; width: 80%; }
    #wrapper section.seg2 div.left { width: 100%; }
    #wrapper section.seg2 div.right { width: 100%; }
    #wrapper section.seg2 h2 { font-size: 50px; line-height: 1.5; padding: 75px 10% 30px; }
    #wrapper section.seg2 p { font-size: 15px; line-height: 2.1; padding: 0 0 30px; }
    #wrapper section.seg2 p.link { padding: 10px 0 0; }
    #wrapper section.seg2 p.link a { }
    #wrapper section.seg2 p.img { padding: 0 0 40px; }
    #wrapper section.seg2 img { }

    #wrapper section.seg3.s2023 div.spacer { width: 80%; padding: 75px 0 110px; margin: 0 auto; }
    #wrapper section.seg3.s2023 div.top { padding: 0; display: block; }
    #wrapper section.seg3.s2023 div.top div.left { width: 100%; padding: 0 0 40px; }
    #wrapper section.seg3.s2023 div.top div.right { width: 100%; min-width: inherit; padding: 0 0 40px; }
    #wrapper section.seg3.s2023 div.top div.right p { font-size: 15px; line-height: 2.1; padding: 0; }
    #wrapper section.seg3.s2023 div.middle { padding: 0 0 50px; }
    #wrapper section.seg3.s2023 div.bottom { padding: 10px 0 0; }
    #wrapper section.seg3.s2023 div.topics { }
    #wrapper section.seg3.s2023 div.topics div.block { }
    #wrapper section.seg3.s2023 div.topics a { display: block; padding: 25px 0; }
    #wrapper section.seg3.s2023 div.topics a p.date { font-size: 14px; width: 100%; padding: 0 0 5px; }
    #wrapper section.seg3.s2023 div.topics a h4 { font-size: 15px; line-height: 1.8; width: 100%; }
    #wrapper section.seg3.s2023 div.video { }
    #wrapper section.seg3.s2023 h2 { font-size: 50px; line-height: 1.5; padding: 0 0 30px; }
    #wrapper section.seg3.s2023 h3.ja { font-size: 22px; line-height: 1.6; padding: 0 0 35px; }
    #wrapper section.seg3.s2023 h3.en { font-size: 30px; padding: 0 0 25px; }
    #wrapper section.seg3.s2023 p.location { }
    #wrapper section.seg3.s2023 p.location span { }
    #wrapper section.seg3.s2023 p.img img { width: 100%; height: auto; }
    #wrapper section.seg3.s2023 button.modalOpenBtn { margin: 0 0 30px; }

    #wrapper section.seg4 { background-image: url(/products/evertireinitiative/img/seg3_bg_sp.jpg); }
    #wrapper section.seg4 div.inner { padding: 95px 10% 100px; }
    #wrapper section.seg4 h2 { font-size: 40px; }
    #wrapper section.seg4 p { font-size: 15px; line-height: 2.1; }

    /* footer */
    #footer { }

    /* modal */
    #modal { }
    #modal.open { }
    #modal button.modalCloseBtn { right: 20px; top: 20px; }
    #modal button.modalCloseBtn img { width: 30px; height: 30px; }
    #modal div.bg { }
    #modal div.inner { width: 100%; height: calc(100% - 140px); left: 0; top: 70px; }
    #modal div.youTube { }
    #modal div.youTube iframe { }

	
}

/* ::::::::::::::::::::::::::::::::: SP ::::::::::::::::::::::::::::::::: */
@media screen and (max-width: 599px){


}