@charset "utf-8";

html,body  {
    overflow-x: clip;
    background-color: #DFEAF3;
}

html.is-modal-open,
body.is-modal-open {
    overflow: hidden;
    height: 100%;
}

body.is-modal-open {
    position: fixed;
    overflow: hidden;
}

html.is-modal-open .is-scrollbar-compensated {
    width: calc(100% - var(--scrollbar-compensation, 0px));
}

/* 必要なら対象を明示指定（例） */
html.is-modal-open header {
    margin-right: var(--scrollbar-compensation, 0px);
}
[class^="radius"],
[class*=" radius"] {
    overflow: hidden;
}
.sp {
    display: none !important;
}

.flex1 {
    flex: 1 !important;
}

.relative   {
    position: relative;
}

.ticker {
    white-space: nowrap;
    overflow: hidden;
}

.ticker {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    height: min(5.2vw, 100px);
}

.ticker__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation-name: ticker-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ticker__item {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 24px;
    padding-right: 24px;
}

.ticker__item img {
    width: min(10.3333vw,160px);
}

.logo_h .ticker__item img {
    width: min(11.25vw,216px);
}

@keyframes ticker-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(var(--ticker-loop-width, 0px) * -1));
    }
}

.bg_red   {
    background-color: #FF0000 !important;
}

.bg_white   {
    background-color: #fff !important;
}

.bg_blue    {
    background-color: #233F75;
}

.bg_sky {
    background-color: #21A9EC;
}
.button a.bg_red    {
    border-color: red;
}

.hasshadow   {
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.darkblue {
    color: #001E44 !important;
}

.bg_darkblue    {
    background-color: #001E44 !important;
}

.red,
.red *   {
    color: #FF0000 !important;
}

.green,
.green *   {
    color: #007A4C !important;
}

.bg_green   {
    background-color: #007A4C !important;
}
.white,
.white *  {
    color: white !important;
}

.black,
.black *  {
    color: black !important;
}

.block  {
    display: block;
}

.flex   {
    display: flex;
}

.flex.column  {
    flex-direction: column;
}

.flex.row  {
    flex-direction: row;
}

.flex.wrap  {
    flex-wrap: wrap;
}

.flex.pc_reverse   {
    flex-direction: row-reverse;
}

.flex_left  {
    justify-content: flex-start !important;
}

.flex_center    {
    width: 100%;
    justify-content: center !important;
}

.flex_right {
    justify-content: flex-end !important;
}

.flex_between  {
    justify-content: space-between !important;
}

.flex_top   {
    align-items: flex-start !important;
}

.flex_middle    {
    align-items: center !important;
}

.flex_bottom    {
    align-items: flex-end !important;
}

.center_middle  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-left  {
    text-align: left !important;
}

.text-center  {
    text-align: center !important;
}

.text-right  {
    text-align: right !important;
}

.pc_center  {
    text-align: center !important;
}

*    {
    font-family: Roboto, "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    outline: none !important;
    line-height: 187.5%;
    color: #000;
    font-feature-settings: "palt";
    letter-spacing: 0.5px;
}

.roboto-condensed * {
    font-family: "Roboto Condensed", "Noto Sans JP", sans-serif !important;
}

.roboto-condensed {
    font-family: "Roboto Condensed", "Noto Sans JP", sans-serif !important;
}

.sans-serif {
    font-family: Roboto, "Noto Sans JP", sans-serif !important;
}

.extralight {
    font-weight: 100 !important;
}

.light {
    font-weight: 300 !important;
}

.regular   {
    font-weight: 400 !important;
}

.medium {
    font-weight: 500 !important;
}

.semibold {
    font-weight: 600 !important;
}

.bold {
    font-weight: 700 !important;
}

.extrabold {
    font-weight: 700 !important;
}

.italic,
.italic * {
    font-style: italic !important;
}
.underline  {
    border-bottom: 1px solid #F00;
}

img {
    max-width: 100%;
}

/* modal */

.js-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.75);
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.js-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.js-modal__dialog {
    position: relative;
    width: auto;
    max-width: 80vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.js-modal__content {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.js-modal__content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.js-modal__content video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    background: #000;
}

.js-modal__body {
    padding: 32px;
}

.js-modal__close,
.js-modal [data-modal-close] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
}

body.is-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

@media screen and (max-width: 834px) {
    .js-modal {
        padding: 20px 12px;
    }
    
    .js-modal__dialog {
        max-width: 90vw;
    }
    
    .js-modal__body {
        padding: 20px 16px;
    }
    
    .js-modal__close,
    .js-modal [data-modal-close] {
        top: 10px;
        right: 10px;
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
}
.hasvideo   {
    position: relative;
}

.hasvideo a:after {
    content: "";
    background-image: url(../images/icon_movie.webp);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: min(20%, 60px);
    border-radius: 50%;
    aspect-ratio: 1/1;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* parts */

.sub .breadcrumb    {
    position: fixed;
    top: min(5.95vw, 90px);
    left: 50%;
    transform: translateX(-50%);
    height: min(1.98vw, 30px);
    width: min(calc(100vw - 30px), 1440px);
    z-index: 11;
    display: flex;
    justify-content: flex-end;
}

.sub .breadcrumb *  {
    color: white;
}

.sub .breadcrumb ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: min(75.8%, 1115px);
    padding-left: min(2.6042vw, 50px);
    align-items: center;
    gap: 0.8rem;
}

.sub .breadcrumb ul li  {
    display: flex;
    gap: 0.8rem;
    font-size: min(0.9259vw, 14px);
}

.sub .breadcrumb ul li:not(:last-of-type):after  {
    content: "＞";
    font-size: min(0.5291vw, 8px);
}

.sub ol {
    flex: 1;
    list-style: none;
    counter-reset: number;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub ol li {
    position: relative;
    padding-left: min(2.6455vw, 40px);
    line-height: 248%;
}

.sub ol li::before {
    counter-increment: number;
    content: counter(number) '.';
    position: absolute;
    left: min(0.5291vw, 8px);
}

.sub main section ul {
    flex: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub main ul li:not(.circle_button,.button) {
    position: relative;
    padding-left: 1.6rem;
}

.sub main ul li:not(.circle_button,.button)::before {
    content: '・';
    position: absolute;
    left: 0.5rem;
}


.titlearea {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

.titlearea h2  {
    font-weight: bold;
    font-weight: 400;
}

.titlearea p, .titlearea p *    {
    font-family: "Roboto Condensed", "Noto Sans JP", sans-serif !important;
}

.infocards .card {
    border-radius: min(1.5625vw, 30px);
    font-size: min(1.6666666667vw, 32px);
    font-weight: 700;
    color: #000;
    user-select: none;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: min(3.9063vw, 75px) 0;
    box-shadow:
        0 min(1.0416666667vw, 20px) min(2.0833333333vw, 40px) rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.infocards .card > *  {
    letter-spacing: -0.5px;
}

.infocards .card > *:not(.titlearea)  {
    width: 85%;
}

.infocards .card p.cardtext {
    flex: 1;
}
.infocards .card .button a,
.button a.btn_small   {
    width: min(10.416vw,200px);
    height: min(1.8229vw, 35px);
    border-radius: min(0.9375vw, 18px);
}

.button a.btn_x_small   {
    width: min(8.26vw,125px);
    height: min(1.6534vw, 25px);
    border-radius: min(0.8598vw, 13px);
}

.button.redbutton a  {
    background-color: #F00;
    color: white;
    border: 1px solid #F00;
}
.pagetop   {
    text-align: center;
    display: block;
    width: min(4.16vw,80px);
    height: min(4.16vw, 80px);
    background: linear-gradient(270deg, #810010 0%, #E50012 100%);
    border-radius: min(0.5208vw, 10px) 0px 0px min(0.5208vw, 10px);
    position: sticky;
    left: 100%;
    bottom: 15px;
    margin-bottom: 5.2vw;
    z-index: 7;
    line-height: 1;
    padding-top: min(1.8229vw, 35px);
    transition: all 200ms ease-in-out;
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;
}

.pagetop.show   {
    opacity: 1;
    pointer-events: all;
}

.pagetop:hover  {
    transform: translateY(-5px);
}

.pagetop,.pagetop * {
    color: white;
}

.pagetop:after  {
    content: "";
    background-image: url(/common/images/arrow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: min(0.8333vw, 16px);
    height: min(1.0938vw, 21px);
    display: block;
    position: absolute;
    top: min(0.5208vw, 10px);
    left: 50%;
    transform: translateX(-50%);
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button a   {
    background-color: #fff;
    border: 1px solid #000000;
    position: relative;
    width: min(15.625vw,300px);
    height: min(2.5vw, 48px);
    border-radius: min(1.25vw, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    transition: all 0.3s linear;
    left: 0;
    top: 0;
    font-weight: 500;
    color: #333;
}

/* header */

header  {
    position: fixed;
    width: 100%;
    height: min(5.95vw, 90px);
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

header .inner   {
    width: min(calc(100vw - 30px), 1440px);
    height: min(5.95vw, 90px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo   {
    background-color: white;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(15.3%, 225px);
}

header .navarea {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    background-color: #fff;
    width: min(75.8%,1115px);
    gap: min(0.66vw, 10px);
    position: relative;
}

header .navarea:after   {
    content: "";
    display: block;
    width: 100%;
    height: min(1.98vw, 30px);
    background-color: rgba(160,179,187,0.75);
    position: absolute;
    left: 0;
    bottom: max(-1.98vw, -30px); 
}

header .navarea nav {
    display: flex;
    width: 100%;
    padding-left: min(2.6042vw, 50px);
    height: min(3.3vw, 50px);
    justify-content: space-between;
}

header .navarea nav ul   {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0.8rem;
}

header .navarea nav ul li   {
    display: flex;
    height: 100%;
    align-items: center;
    font-size: clamp(10px, 1.02vw, 15px);
    gap: 0.8rem;
}

header .navarea nav ul li a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

header .navarea nav ul li a:after   {
    content: "▼";
    color: #FF0000;
    display: block;
    position: absolute;
    width: auto;
    height: 3px;
    opacity: 0;
    transition: all 0.1s linear;
    bottom: min(1.3228vw, 20px);
    -webkit-text-stroke: 1px #999;
    text-stroke: 1px #999;
    left: 50%;
    transform: translateX(-50%);
}

header .navarea nav ul li a:hover:after   {
    opacity: 1;
}

header .navarea nav ul li:not(:last-of-type):after  {
    content: "｜";
    padding: 0.25em;
}

header .navarea .buttonarea {
    width: min(13.6vw, 200px);
}

header .navarea .buttonarea.language    {
    flex: 1;
    height: min(1.98vw, 30px);
    
}

header .navarea .buttonarea.language a   {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #E50012;
    color: white;
    line-height: 1;
}
header .contact   {
    height: 100%;
    width: min(13.6vw, 200px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header .navarea .contact a  {
    background-color: #666666;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: clamp(10px,1.22vw,18px);
}

/* main */

main  {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: min(2.6042vw, 50px);
}

/*
main section  {
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
*/

/* footer */

footer  {
    position: relative;
    background-image: url(../images/footer_bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
}

footer .inner {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: min(4.9479vw, 95px) 15px;
}

footer .navarea {
    width: 100%;
    flex: 1;
}

footer .navarea .flex {
    gap: 0;
}

footer .navarea .flex .col  {
    width: 20%;
    border-right: 1px dashed #FFFFFF;
    padding: 0 min(1.3228vw, 20px);
}

footer .navarea .flex .col:last-of-type {
    border-right: 0;
}
footer .navarea .titlearea,
footer .navarea .titlearea *  {
    text-align: left;
    color: white;
    line-height: 1;
}

footer .navarea ul li,
footer .navarea ul li a {
    color: white;
    line-height: 1;
}

footer .navarea ul li {
    padding: min(0.7275vw, 11px) 0;
    border-bottom: 0.75px solid #FF7C86;
}

footer .navarea ul li:has(.hasarrow)    {
    padding: min(0.9921vw, 15px) 0;
}
footer .navarea ul li a:before  {
    content: "▶︎";
    font-size: 10px;
}

footer .footer_social   {
    width: 100%;
    background-color: #fff;
    /*pointer-events: none;*/
}

footer .footer_social ul.flex  {
    justify-content: center;
    align-items: center;
    gap: min(1.9841vw, 30px);
}

footer .footer_social ul.flex img    {
    width: min(2.7778vw, 42px);
}

footer .copyright {
    text-align: center;
    font-weight: bold;
    height: min(4.6875vw, 90px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

footer .footerbottom    {
    background-color: #fff;
}

/* sub common */

body.sub   {
    position: relative;
    background-size: 100% auto;
    background-repeat: repeat-y;
}

.sub .key   {
    position: relative;
    z-index: 6;
}

.key:before    {
    content: "";
    width: 100%;
    position: absolute;
    z-index: -1;
}

.sub .keywrap   {
    position: relative;
    width: 100%;
    height: 100%;
}

.sub .key .inner {
    position: relative;
    max-width: 1340px;
    padding: 0 min(1.0417vw, 20px);
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    z-index: 5;
}

.sub .key .inner .titlearea {
    position: relative;
    top: min(17.44vw, 335px);
    text-align: left;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: flex-start;
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
}

.sub .key .inner .titlearea * {
    line-height: 1;
}

.sub .key .keytext  {
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}
.sub .key_navarea   {
    position: fixed;
    z-index: 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: min(1.5625vw, 30px);
    
    width: min(13.54vw,260px);
    height: auto;
    left: 0;
    top: min(13.54vw,260px);
    
    background: #FFFFFF;
    border-width: 1px 1px 1px 0px;
    border-style: solid;
    border-color: #FF0000;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0px;
    overflow: visible;
    transition: left 0.3s ease;
}

.sub .key_navarea > .titlearea  {
    width: 100%;
    padding: 0 min(1.5625vw, 30px);
    opacity: 1;
    transition: opacity 0.3s ease;
    position: relative;
}

.sub .key_navarea > .titlearea *    {
    line-height: 1 !important;
}

.sub .key_navarea > .titlearea:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - min(3.1250vw, 60px));
    border-bottom: 1px solid #FF0000;
}
.side-menu {
    width: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.key_nav_arrow    {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5625vw;
    height: 100%;
    justify-content: center;
    align-items: center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    transform: scale(-1,1);
    transition: transform 0.3s ease;
    filter:
        drop-shadow(1px 0 0 rgba(255,255,255,0.3))
        drop-shadow(-1px 0 0 rgba(255,255,255,0.3))
        drop-shadow(0 1px 0 rgba(255,255,255,0.3))
        drop-shadow(0 -1px 0 rgba(255,255,255,0.3))
        drop-shadow(1px 1px 0 rgba(255,255,255,0.3))
        drop-shadow(-1px -1px 0 rgba(255,255,255,0.3))
        drop-shadow(1px -1px 0 rgba(255,255,255,0.3))
        drop-shadow(-1px 1px 0 rgba(255,255,255,0.3));
}

@media screen and (min-width: 1841px) {
    .key_nav_arrow  {
        display: none;
    }
}
@media screen and (max-width: 1840px) {
    .sub.loaded .key_navarea    {
        left: -11.97vw;
    }
    
    .sub.loaded .key_navarea .titlearea,
    .sub.loaded .key_navarea .side-menu {
        opacity: 0;
    }
    
    .sub.loaded .key_navarea .side-menu .side-menu a    {
        pointer-events: none;
    }
    .sub.loaded .key_navarea.visible    {
        left: 0;
    }

    .sub.loaded .key_navarea.visible .titlearea,
    .sub.loaded .key_navarea.visible .side-menu {
        opacity: 1;
    }
    
    .sub.loaded .key_navarea.visible .side-menu .side-menu a    {
        pointer-events: auto;
    }
    .sub.loaded .key_navarea .key_nav_arrow {
        transform: scale(1,1);
    }
    .sub.loaded .key_navarea.visible .key_nav_arrow {
        transform: scale(-1,1);
    }
}


.side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-menu li {
    position: relative;
    line-height: 1;
}

.side-menu a {
    display: block;
    color: #222;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    padding: min(1.0417vw, 20px) min(1.5625vw, 30px);
    line-height: 1;
}
.side-menu a:has(br) {
    line-height: 137.5%;
}

.side-menu > ul.menu-level-1 > li > a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - min(3.1250vw, 60px));
    border-bottom: 1px solid #8c8c8c;
}

.side-menu .current,
.side-menu a:hover,
.side-menu > ul.menu-level-1 > li.has-submenu:hover > a {
    color: #fff;
    background-color: #9eafb8;
}

.side-menu .current {
    pointer-events: none;
}

.side-menu .menu-level-2,
.side-menu .menu-level-3 {
    position: absolute;
    width: min(18.22vw, 350px);
    background: #9eafb8;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease;
}

.side-menu .menu-level-2 {
    top: 0;
    left: 100%;
    transform: translateX(-5%);
}

.side-menu .menu-level-3 {
    top: 0;
    left: 100%;
    transform: translateX(-5%);
}

.side-menu .menu-level-2 a,
.side-menu .menu-level-3 a {
    background: #9eafb8;
    color: #fff;
    border-bottom: none;
}

.side-menu .menu-level-2 a:hover,
.side-menu .menu-level-3 a:hover {
    background-color: #829299;
}

.side-menu li:hover > .menu-level-2,
.side-menu li:hover > .menu-level-3 {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.sub main   {
    position: relative;
    margin-bottom: min(2.6042vw, 50px);
    z-index: 6;
}

.sub main section   {
    position: relative;
    z-index: 2;
}

.sub main section .inner    {
    max-width: 1340px;
    padding: 0 min(1.0417vw, 20px);
    margin-left: auto;
    margin-right: auto;
}

.sub main section .inner .box    {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px min(2.0833vw, 40px) rgba(0, 0, 0, 0.25);
    border-radius: min(1.5625vw, 30px);
}

.sub main section .inner .box .titlearea > .roboto-condensed    {
    letter-spacing: -2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
    gap: min(0.5208vw, 10px);
}

.sub main section .inner .box .titlearea > .roboto-condensed:after  {
    background-color: #F00;
    content: "";
    display: block;
    width: min(5.2083vw, 100px);
    height: 1px;
}

.sub main section.separator {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: clip;
}

.hovermenu  {
    padding-top: 0;
    width: 100%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;  
    position: fixed;
    top: -100vw;
    left: 0;
    right: 0;
    justify-content: center;
    transition: all 0.25s ease-in-out;
    overflow-x: clip;
    z-index: 9;
    opacity: 0;
}

body:before    {
    content: "";
    position: fixed;
    top: -100vw;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 56.25vw;
    background-image: url(../images/menu_bg.webp);
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.25s linear;
    opacity: 0;
    z-index: 8;
}

body:after    {
    content: "";
    position: fixed;
    top: -100vw;
    left: 0;
    width: 100%;
    height: 100vh;
    min-height: 56.25vw;
    background-color: #444;
    mix-blend-mode: hard-light;
    transition: all 0.25s linear;
    opacity: 0;
    z-index: 8;
}


.hovermenu.hovered,
body:has(.hovermenu.hovered):before,
body:has(.hovermenu.hovered):after {
    top: 0;
    visibility: visible;
    opacity: 1;
}

.hovermenu .inner {
    max-width: 1376px;
    width: 100%;
    height: 100%;
    padding: 0 32px 32px;
    padding-top: 166px;
    align-items: flex-start;
    gap: 0;
    position: relative;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hovermenu .inner::-webkit-scrollbar {
    display: none;
}
.hovermenu#menu_sustainability .inner    {
    padding-top: 156px;
}

.hovermenu .inner .hovermenu_balloon1,
.hovermenu .inner .hovermenu_balloon2 {
    position: absolute;
}

.hovermenu .inner .hovermenu_balloon1   {
    top: 333px;
    left: 12.01%;
    animation: sec3img1 1.75s ease-in-out infinite alternate;
}

.hovermenu .inner .hovermenu_balloon2   {
    top: 166px;
    right: 3.63%;
    animation: sec3img3 2s ease-in-out infinite alternate;
}

.hovermenu .inner .titleareawrap  {
    width: 25%;

}
.hovermenu .inner .titlearea * {
    text-align: left;
}

.hovermenu * {
    color: #fff !important;
}

.hovermenu .contentarea  {
    margin-left: min(2.6042vw, 50px);
    min-width: 625px;
}

.hovermenu .contentarea .content_inner  {
    min-width: 400px;
    gap: 0;
    flex-direction: column;
}

.hovermenu .contentarea .content_inner a  {
    display: flex;
    gap: min(1.0417vw, 20px);
    padding: min(0.7813vw, 15px) 0;
    width: 100%;
    line-height: 1;
    transition: transform 0.3s ease-out;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.hovermenu#menu_sustainability .contentarea .content_inner a    {
    padding: min(0.6771vw, 13px) 0;
}

.hovermenu .contentarea .content_inner > div.flex,
.hovermenu .contentarea .content_inner > a,
.hovermenu .contentarea .content_inner > div.flex ul li:not(:last-of-type) a,
.hovermenu .contentarea .content_inner > div.flex ul li a.ul    {
    border-bottom: 1px solid #999999;
}

.hovermenu .contentarea .content_inner > div.flex ul li ul li:last-of-type a    {
    border-bottom: 0 !important;
}
.hovermenu .contentarea .content_inner > div.flex > a   {
    width: 300px;
}

.hovermenu .contentarea .content_inner > div.flex > ul  {
    flex: 1;
}

.hovermenu .contentarea .content_inner a span   {
    line-height: 1;
}

.hovermenu .contentarea .content_inner > a:before,
.hovermenu .contentarea .content_inner > div.flex ul li a:before    {
    content: "▶︎ ";
    font-size: min(0.6250vw, 12px);
}

.hovermenu .contentarea .content_inner > div.flex ul li ul li a:before  {
    content: "︎∟︎ ";
}
.hovermenu .contentarea .content_inner > div.flex ul li a  {
    padding: min(0.5208vw, 10px) 0;
    gap: min(0.7813vw, 15px);
}

.hovermenu#menu_sustainability .content_inner > div.flex ul li a  {
    padding: min(0.6250vw, 12px) 0;
}


@media screen and (max-width: 834px)  {
    html,body  {
        overflow-x: clip;
        width: 100%;
    }

    html.is-modal-open,
    body.is-modal-open {
        overflow: hidden;
        height: 100%;
    }

    body.is-modal-open {
        position: fixed;
    }
    
    body:before,
    body:after {
        display: none;
    }
    
    *    {
        font-size: 4.07vw;
        line-height: 175%;
    }
    
    .pc {
        display: none !important;
    }
    
    .sp,
    .sp_block {
        display: block !important;
    }
    
    .sp_left   {
        text-align: left !important;
    }
    
    .sp_center  {
        text-align: center !important;
    }

    .flex.sp   {
        display: flex !important;
    }
    .flex.pc_reverse   {
        flex-direction: rows;
    }

    .sp_row {
        flex-direction: row !important;
    }

    .sp_column  {
        flex-direction: column !important;
    }
    
    .sp_column_reverse  {
        flex-direction: column-reverse !important;
    }

    .sp_flex_center   {
        justify-content: center !important;
    }
    
    .sp_flex_right   {
        justify-content: flex-end !important;
    }
    
    .sp_flex_top   {
        align-items: flex-start !important;
    }

    .sp_flex_middle   {
        align-items: center !important;
    }

    .sp_flex_bottom   {
        align-items: flex-end !important;
    }

    .sp_column > *  {
        width: 100% !important;
    }
    
    .sp_wrap  {
        flex-wrap: wrap !important;
    }

    br.sp   {
        display: inline-block !important;
    }

    .ticker {
        height: 17.41vw;
    }

    .ticker__item img {
        width: 40.29vw !important;
    }
    
    .titlearea h2  {
        font-size: 8.14vw;
    }
    
    .titlearea p, .titlearea p *    {
        font-size: 3.48vw;
    }
    
    .sub .breadcrumb    {
        display: none;
    }

    .button a   {
        background-color: #fff;
        position: relative;
        width: 57.25vw;
        height: 9.16vw;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1;
        font-size: 4.07vw;
    }
/*    
    .button a:after   {
        content: "▲";
        font-size: 2.29vw;
        display: inline-block;
        line-height: 1;
        position: absolute;
        right: 1.27vw;
        top: 50%;
        transform: rotate(90deg) translateX(-52.5%);
        color: #E60012;
    }
*/    
    .button a.btn_x_small   {
        width: 32vw;
        height: 6.36vw;
        border-radius: 3.31vw;
    }
    
    .circle_button:not(.detail) a::after  {
        font-size: 3.05vw;
        left: 4vw;
        top: 3vw;
    }
    
    .pagetop   {
        border-radius: 2.54vw 0px 0px 2.54vw;
        position: sticky;
        left: 100%;
        bottom: 3vw;
        width: 20vw;
        height: 20vw;
        line-height: 1;
        margin-bottom: 20vw;
        padding-top: 9.16vw;
        z-index: 7;
    }
    
    .pagetop,.pagetop * {
        color: white;
    }
    
    .pagetop:after  {
        content: "";
        width: 100%;
        height: 5.09vw;
        display: block;
        position: absolute;
        top: 2vw;
        left: 50%;
    }
    
    .infocards .card    {
        padding-top: 10vw;
        padding-bottom: 10vw;
        border-radius: 5.09vw;
    }
    
    .infocards .card .button a, 
    .button a.btn_small {
        width: 100%;
        height: 10.18vw;
        border-radius: 5.09vw;
    }
    
    .drawer_button  {
        width: 22.38vw;
        height: 22.38vw;
        background-color: #E50012;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.9vw;
    }
    
    .drawer_button:after  {
        content: "MENU";
        color: white;
        font-size: 4.07vw;
        line-height: 1;
        letter-spacing: 0;
        font-weight: 600;
    }

    .drawer-nav,
    .drawer-nav .nav_inner,
    .drawer-nav .drawer-menu {
        overscroll-behavior: contain;
    }
    
    .nav_inner  {
        transition-timing-function: none !important;
        transition-duration: none !important; 
        transform: none !important;
    }
    
    .drawer-nav   {
        overflow-y: scroll;
    }
    
    .drawer-nav {
        overscroll-behavior: contain;
    }
    
    body.drawer-open  {
        overflow-y: hidden;
        position: fixed;
    }

    .drawer-hamburger {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 0;
        width: 12.43vw;
        height: 3.82vw;
        margin-bottom: 2.54vw;
    }

    .drawer-hamburger-icon {
        width: 12.43vw;
        margin-top: 0;
        transform: translateY(-50%);
    }
    
    .drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
        background-color: #fff;
        width: 12.43vw;
        height: 1px;
    }
    
    .drawer-hamburger-icon:after    {
        top: 1.91vw;
    }

    .drawer-hamburger-icon:after    {
        top: 1.91vw;
    }
    
    .drawer-hamburger-icon  {
        background-color: transparent;
    }
    
    .drawer-hamburger-icon:before {
        top: -1.91vw;
    }
    
    .drawer-hamburger-icon:after  {
        top: 1.91vw;
    }
    
    .drawer--top .drawer-nav  {
        padding-top: 0;
        height: 100vh;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        background: rgba(102,102,102,0.95);
        z-index: 9;
        padding-bottom: 24.87vw;
    }
    
    .drawer--top.drawer-open .drawer-nav {
        top: 0;
        padding-top: 22.38vw;
    }
    
    .drawer-menu  {
        width: 79.6vw;
        margin-left: auto;
        margin-right: auto;
    }
    .drawer-nav > ul  {
        margin-bottom: 12.72vw;
    }
    
    .drawer-nav ul li {
        line-height: 1;
    }
    .drawer-nav ul li a.drawer-menu-item,
    .drawer-nav ul li.button a.drawer-menu-item * {
        line-height: 1;
        text-decoration: none;
        padding: 0;
    }
    
    .drawer-nav ul li.button a.drawer-menu-item {
        width: 100%;
    }
    
    .drawer-nav ul li a.drawer-menu-item.titlearea *{
        line-height: 1;
    }
    
    .drawer-nav ul li a.drawer-menu-item.titlearea .roboto-condensed    {
        margin-bottom: 2vw;
    }

    ul.drawer-menu > li:not(.button,.noborder) {
        border-bottom: 1px solid white;
        padding: 4vw 0 3.5vw;
    }
    
    ul.drawer-menu > li:has(ul) > a {
        background-image: url(../images/plus.webp);
        background-size: 5vw auto;
        background-position: right top 6vw;
        background-repeat: no-repeat;
    }

    ul.drawer-menu > li.open:not(.button,.noborder):has(ul)  {
        padding-bottom: 0;
    }
    ul.drawer-menu > li.open:not(.button,.noborder):has(ul) > a  {
        background-image: url(../images/minus.webp);
    }

    ul.drawer-menu > li:not(.button,.noborder) span.fs12  {
        margin-bottom: 3vw;
    }
    
    ul.drawer-menu > li a.titlearea + ul  {
        margin-top: 3.75vw;
    }
    
    .drawer-nav ul li:not(.button) *  {
        color: white !important;
        text-align: left;
    }
    .drawer-nav ul > li > ul  {
        margin-left: 0;
        margin-bottom: 1vw;
    }

    .drawer-nav ul li ul li a,
    .drawer-nav ul li a.hasarrow   {
        display: block;
        line-height: 1;
        padding: 4.07vw 0 !important;
        border-bottom: 1px dashed #999999;
    }
    
    ul.drawer-menu li.noborder a {
        border-bottom: 0;
    }
    .drawer-nav ul li ul li a:before,
    .drawer-nav ul li a.hasarrow:before  {
        content: "▶︎ ";
        font-size: 10px;
        margin-right: 0.2rem;
        display: inline-block;
    }

    .drawer-nav ul > li > ul > li:has(ul) > a:before    {
        content: "▼ ";
    }
    
    .drawer-nav ul > li > ul > li > ul > li > a  {
        padding-left: 5vw !important;
    }

    .drawer-nav ul > li > ul > li  ul.marker_l > li > a:before  {
        content: "∟ ";
    }
    
    
    .drawer-nav ul > li > ul > li > ul > li > ul > li > a  {
        padding-left: 10vw !important;
    }

    .drawer-overlay  {
        opacity: 0;
        display: block;
        pointer-events: none;
        transition: opacity 0.3s ease-out;
        background-color: rgba(0,0,0,.4);
    }
    
    .drawer-open .drawer-overlay  {
        opacity: 1;
        pointer-events: auto;
        z-index: 7;
    }
    
    .drawerfooter   {
        position: fixed;
        left: 0;
        width: 100%;
        height: 24.87vw;
        background-color: #fff;
        pointer-events: none;
        transition: all .6s cubic-bezier(.19, 1, .22, 1);
        bottom: calc(100vh + 24.87vw);
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .drawer--top.drawer-open .drawerfooter    {
        opacity: 1;
        pointer-events: auto;
        bottom: 0;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .drawer--top.drawer-open .drawerfooter ul.flex,
    footer .footer_social ul.flex  {
        justify-content: center;
        align-items: center;
        gap: 7.63vw;
    }
    
    .drawer--top.drawer-open .drawerfooter ul.flex img,
    footer .footer_social ul.flex img    {
        width: 10.44vw;
    }

    header  {
        height: 12.72vw;
    }
    
    header .inner   {
        padding: 0;
        width: 100%;
        height: 22.38vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0;
        overflow: clip;
    }
    
    header .logo   {
        width: 55.97vw;
        margin-left: 0;
    }
	header .logo a img{
		width:49vw;
	}
    
    footer .inner   {
        width: 57.25vw;
        height: 62.18vw;
    }
    
    header .navarea {
        display: none;
    }
    
    footer .navarea  {
        display: none;
    }
    
    footer .buttonarea  {
        width: 100%;
    }
    
    footer .copyright {
        height: 17.81vw;
    }
    
    /* sub common */
    
    .sub .key,
    .sub .key:after   {
        aspect-ratio: 67/105;
    }
    
    .sub .key .inner   {
        position: relative;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
    }

    .sub .key .inner .titlearea {
        filter: drop-shadow(0px 0px 5px #FFFFFF);
        text-align: left;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: flex-start;
        position: absolute;
        left: 12.5vw;
        top: 36.5vw;
    }
    
    .sub .key .inner .titlearea *   {
        letter-spacing: 0 !important;
    }
    
    .sub .key_navarea   {
        width: 64.67vw;
        left: -57.21vw;
        top: 42.28vw;
        gap: 5vw;
    }
    
    .sub .key_navarea > .titlearea  {
        padding: 0 7.46vw;
    }

    .sub .key_navarea .titlearea,
    .sub .key_navarea .side-menu    {
        opacity: 0;
    }

    .sub.loaded .key_navarea    {
        left: -57.21vw;
    }
    
    .sub .key_navarea .key_nav_arrow   {
        width: 7.46vw;
        transform: scale(1,1);
    }
    
    .side-menu a    {
        padding: 4.47vw 7.46vw;
    }

    .sub .key_navarea > .titlearea:after,
    .side-menu > ul.menu-level-1 > li > a:after  {
        width: calc(100% - (7.46vw * 2));
    }
    
    .side-menu > ul.menu-level-1 > li ul    {
        display: none;
    }
    .sub main section.separator {
        height: 53.21vw;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: clip;
    }
    
    .sub main section.separator picture,
    .sub main section.separator img {
        height: 100%;
        width: auto;
        max-width: none;
    }

    .sub main section .inner    {
        width: 90vw;
    }
    
    .sub main section .inner .box   {
        border-radius: 3.82vw;
    }
    
    .sub main section .inner .box .titlearea > .roboto-condensed    {
        gap: 2.54vw;
    }
    .sub main section .inner .box .titlearea > .roboto-condensed:after  {
        width: 25vw;
    }
    .circle_buttonarea  {
        gap: 2.48vw;
    }
    .circle_button a   {
        width: 100%;
        height: 10vw;
        border-radius: 5vw;
        padding-left: 10vw;
    }
    
    .circle_button a:after  {
        font-size: 2.73vw;
        top: 3.6vw;
        left: 5vw;
    }
    
    .sub ol li {
        padding-left: 5vw;
        line-height: 175% !important;
    }
    
    .sub ol li ul   {
        position: relative;
        width: calc(100% + 5vw);
        left: -5vw;
    }
    
    .side-menu .current {
        pointer-events: all;
    }

}