@charset "UTF-8";
/* ==========================================================================
   Setting
========================================================================== */
:root {
    --white: #FFF;
    --l-gray: #F7F7F7;
    --l-gray2: #EEE;
    --gray: #AAA;
    --d-gray: #3B4043;
    --black: #111111;

    --border1: #DDDDDD;
    --border2: #CCCCCC;
    --border3: #D2D9DE;

    --ll-blue: #F8FAFA;
    --ll-blue2: #E6EBEE;
    --ll-blue3: #DCE8EF;
    --l-blue: #A8BECB;
    --l-blue2: #728FA0;

    --dd-blue: #0C1533;

    --color1: #0089CF;
    --color1-h: #53C5FF;
    --blue: #0089CF;
    --purple: #92278F;
    --red: #ED1C25;
    --orange: #F58220;
    --yellow: #FFCB05;
    --green: #00A651;

    --font1: "Montserrat", sans-serif;
    --font2: "DIN Alternate Bold", sans-serif;
    --gothic: "Noto Sans JP", sans-serif;
}

@font-face {
    font-family: 'DIN Alternate Bold';
    src: local('DIN Alternate Bold'), url('../fonts/DINAlternate-Bold.woff') format('woff');
}

/* ==========================================================================
   Loading
========================================================================== */
body #loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100vw;
    height: 100vh;
    background: var(--ll-blue);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 994;
    transition: 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
body.loaded #loading {
    opacity: 0;
    pointer-events: none;
}
#loading .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFF;
    animation: dot 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
#loading .dot:nth-child(1) { background-color: var(--blue); }
#loading .dot:nth-child(2) { background-color: var(--purple); }
#loading .dot:nth-child(3) { background-color: var(--red); }
#loading .dot:nth-child(4) { background-color: var(--orange); }
#loading .dot:nth-child(5) { background-color: var(--yellow); }
#loading .dot:nth-child(6) { background-color: var(--green); }
#loading .dot:nth-child(1) { animation-delay: 0.05s; }
#loading .dot:nth-child(2) { animation-delay: 0.1s; }
#loading .dot:nth-child(3) { animation-delay: 0.15s; }
#loading .dot:nth-child(4) { animation-delay: 0.2s; }
#loading .dot:nth-child(5) { animation-delay: 0.25s; }
#loading .dot:nth-child(6) { animation-delay: 0.3s; }
@keyframes dot {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-32px); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}
@keyframes fadein {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
/*  Animation
================ */
.iv {
    opacity: 0;
    filter: blur(.125em);
    transform: translateY(1em);
    transition: .6s ease-out;
    transition-property: opacity, filter, transform;
}
.iv.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}
@keyframes fadeinup {
    0% {
        opacity: 0;
        filter: blur(.125em);
        transform: translateY(1em);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}
/* ==========================================================================
   Base
========================================================================== */
html {
    font-family: var(--gothic);
    font-size: min(87.5%, 3.74vw);
    font-weight: 400;
    line-height: 2.25;
    letter-spacing: .04em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
html:has(body.lang-en) {
    --gothic: "Noto Sans", sans-serif;
    --mincho: "Noto Serif", serif;

    letter-spacing: 0.025em;
}

body {
    color: var(--black);
}
body.navOpen {
    height: 100%;
    overflow: hidden;
}
@media (min-width: 992px) {
    body.pagegroup__basic.navOpen, body.pagegroup__restaurant.navOpen {
        height: auto;
        overflow: auto;
    }
}

#container {
    width: 100%;
    overflow-x: hidden;
}

#inner-content {
    padding-top: 5.286rem;
    padding-bottom: 5rem;
    position: relative;
}
#inner-content:has(#mv) {
    padding-top: 0;
}
#inner-content:has(#main-content) {
    padding-bottom: 0;
}
@media (min-width: 992px) {
    #inner-content {
        padding-top: 7.5715rem;
    }
}
#mv + #inner-content {
    padding-top: 0;
}



#main-content {
    position: relative;
    overflow: hidden;
}
.page__header:has(picture) + #main-content {
    background: rgba(255,255,255,.4);
    margin-top: -4rem;
    padding-top: 5rem;
}
.page__header:has(picture._auto) + #main-content {
    margin-top: -10rem;
    padding-top: 11rem;
}
#main-content.before-white {
    margin-bottom: -4rem;
    padding-bottom: 4rem;
}
#main-content.before-white::before {
    content: '';
    width: 100%;
    background: var(--white);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
@media (min-width: 576px) {
    .page__header:has(picture) + #main-content {
        margin-top: -6rem;
        padding-top: 7rem;
    }
    .page__header:has(picture._auto) + #main-content {
        margin-top: -10rem;
        padding-top: 11rem;
    }
    #main-content.before-white::before {
        top: calc(16rem + 10vw);
    }
}
@media (min-width: 992px) {
    #main-content {
        padding-top: 4rem;
    }
    .page__header:has(picture) + #main-content {
        background: rgba(255,255,255,.4);
        margin-top: -8rem;
        padding-top: 9rem;
    }
    #main-content.before-white {
        margin-bottom: -7rem;
        padding-bottom: 7rem;
    }
    #main-content.before-white::before {
        top: calc(24rem + 10vw);
    }
}



#content, #content ~ * {
    position: relative;
    z-index: 2;
}
#bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: var(--l-blue);
    background: linear-gradient(340deg,var(--l-blue) 0%, var(--white) 90%);
}
@media (orientation: landscape){
    #bg {
        background: linear-gradient(320deg,var(--l-blue) 0%, var(--white) 90%);
    }
}
#bg-circle {
    width: 100%;
    height: calc(190vw/2);
    position: absolute;
    top: calc(5.286rem*1.25);
    left: 0;
    overflow: hidden;
    opacity: .2;
    mix-blend-mode: multiply;
}
#bg-circle::before {
    content: '';
    width: 190vw;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: min(21vw, 120px) solid var(--ll-blue3);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-40%, 0);
}
@media (min-width: 992px) {
    #bg-circle {
        height: calc(175vw/2);
        top: calc(7.5715rem*1.25);
    }
    #bg-circle::before {
        width: 175vw;
        border: min(21vw, 160px) solid var(--ll-blue3);
        transform: translate(-45%, 0);
    }
}


@media (max-width: 991px) {
    ._pc {
        display: none !important;
    }
}
@media (min-width: 992px) {
    ._sp {
        display: none !important;
    }
}

._sticky {
  position: sticky!important;
  top: 0;
}

.of-hidden {
    overflow: hidden;
}

.relative {
    position: relative;
}

/* ==========================================================================
   Header
========================================================================== */
#siteHeader {
    color: var(--black);
    border-bottom: 1px solid transparent;
    height: 5.286rem;
    letter-spacing: .08em;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
    transition: .4s;
    transition-property: background,border,opacity,transform;
}
#siteHeader.standby {
    transform: translateY(-100%);
    opacity: 0;
}
body #siteHeader:has(.gNav.on),
body #siteHeader.fixed {
    position: fixed;
    transform: translateY(0);
    color: var(--black);
    background: var(--white);
    border-bottom-color: var(--border1);
}
body:not(.gNavOpen):has(#mv) #siteHeader:not(.fixed) {
    color: var(--white);
    border-bottom-color: transparent;
}
#siteHeader:has(.sub-menu.open) {
    color: var(--black)!important;
    background: var(--white);
    border-bottom-color: var(--border1)!important;
}

@media (max-width: 991px) {
    #siteHeader {
        border: 0;
    }
}
@media (min-width: 992px) {
    #siteHeader {
        height: 7.5715rem;
        font-size: min(.929rem, 1.2vw);
    }
    body:not(:has(#bg)) #siteHeader {
        border-bottom-color: var(--border1);
    }
}

.inner-header {
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.header-l {
    position: relative;
    z-index: 2;
}
.header-logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 1.5em;
    line-height: 1;
}
.header-logo .logo__inner {
    display: block;
    width: 90px;
    color: inherit;
    transition: none;
}
.header-logo .logo__inner img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header-r {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}
@media (min-width: 576px) {
    .header-logo {
        padding: 0 1.75rem;
    }
}
@media (min-width: 992px) {
    .inner-header {
        padding: 0 min(3.5rem, 3.5vw);
    }
    .header-logo {
        padding: 0;
    }
    .header-logo .logo__inner {
        width: 9.461em;
    }
    .header-r {
        flex-basis: 100%;
    }
}

/* ==========================================================================
   Navigation
========================================================================== */
nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    margin: 0;
}

/* Grobal navigation */
.gNav {
    width: 100%;
    display: flex;
}
.gNav__inner {
    display: flex;
    width: 100%;
    height: 100%;
}
nav.navBar ul li a {
    display: flex;
    position: relative;
}
nav.navBar ul li a > span {
    display: inline-block;
}
nav.navBar ul li a i {
    margin-left: .5em;
}
@media (max-width: 991px) {
    nav.navBar ul li .sub-menu {
        display: none;
    }
}

/* ==========================================================================
   PC Navigation
========================================================================== */
@media (min-width: 992px) {
    .gNav {
        flex: 1 1 100%;
        max-width: 100%;
        height: 100%;
    }
    .gNav nav.navBar {
        display: flex;
        flex-basis: 80%;
        margin-left: auto;
        height: 100%;
        justify-content: flex-end;
    }
    .gNav nav.navBar > ul {
        display: flex;
    }
    .gNav ul li a,
    .gNav ul li > span {
        height: 100%;
        white-space: nowrap;
    }
    .gNav nav.navBar,
    .gNav nav.navBar ul,
    .gNav nav.navBar ul li {
        height: 100%;
    }
    .gNav nav.navBar {
        display: flex;
    }

    .gNav nav.navBar > ul > li > .parent {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 3;
        font-weight: 500;
        letter-spacing: .08em;
        padding: 0 calc( min(2.5em, 1.75vw)/2 );
        transition-property: border;
        opacity: 1!important;
    }
    .gNav nav.navBar > ul > li > .parent > span > span {
        display: none;
    }
    .gNav nav.navBar > ul > li.has-children > .parent::before {
        content: '';
        display: block;
        width: 1px;
        background: currentColor;
        position: absolute;
        top: calc(50% + ((3em + 3px)/2));
        bottom: calc(50% + ((3em + 3px)/2));
        transition: bottom .2s;
    }
    .gNav nav.navBar > ul > li.has-children > .parent::after {
        content: '';
        display: block;
        width: 3px;
        height: 3px;
        border-radius: 100%;
        background: currentColor;
    }
    .gNav nav.navBar > ul > li.has-children:has(.sub-menu.open) > .parent::before {
        bottom: 0;
    }
    .gNav .sub-menu {
        width: 100%;
        background: var(--ll-blue);
        padding: 2.5em 0 3em;
        position: absolute;
        top: 7.5715rem;
        left: 0;

        display: block!important;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
    }
    .gNav .sub-menu.open {
        pointer-events: auto;
        max-height: 1000px;
        opacity: 1;
    }
    .gNav .sub-menu ul {
        display: flex;
        flex-wrap: wrap;
        column-gap: 3em;
        row-gap: 1em;
        max-width: 92%;
        padding: 0 1.5rem;
        margin: 0 auto;
    }
    .gNav .sub-menu ul + ul {
        margin-top: 1em;
    }
    .gNav .sub-menu ul li {
        flex: 0 0 calc((100% - 9em)/4);
    }
    .gNav .sub-menu ul li a {
        line-height: 1.5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 1em;
        border-bottom: 1px solid var(--border1);
    }
    .gNav .sub-menu ul li a::after {
        font-family: 'icomoon' !important;
        content: '\e902';
        font-size: .625em;
        line-height: 2rem;
        display: block;
        text-align: center;
        flex: 0 0 2rem;
        height: 2rem;
        background: var(--white);
        color: var(--color1);
        border-radius: 100%;
        transition: .3s;
        transition-property: background, color;
    }
    .gNav .sub-menu ul li a:hover {
        color: var(--color1);
    }
    .gNav .sub-menu ul li a .icon-ex-link {
        display: none;
    }
    .gNav .sub-menu ul li a:has(.icon-ex-link)::after {
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1em;
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%229%22%20viewBox%3D%220%200%209%209%22%3E%3Cpath%20d%3D%22M0%2C0V9H9V6.75H7.875V7.875H1.125V1.125H2.25V0ZM4.5%2C0%2C6.188%2C1.688%2C3.375%2C4.5%2C4.5%2C5.625%2C7.313%2C2.813%2C9%2C4.5V0Z%22%20fill%3D%22%230089CF%22%2F%3E%3C%2Fsvg%3E');
    }
    .gNav .sub-nav .btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: inherit;
        font-size: inherit;
        line-height: 2;
        font-weight: 500;
        padding: 0 calc( min(2.5em, 1.75vw)/2 );
        min-width: initial;
        width: auto;
        background: none;
        color: inherit;
        border-radius: 0;
        transition: inherit;
    }
    .gNav .sub-nav .btn::before,
    .gNav .sub-nav .btn::after {
        display: none;
    }
    .gNav .sub-nav ._ir-contact {
        display: none;
    }

    /*採用情報のサブメニュー非表示*/
    .gNav nav.navBar > ul > li.has-children > .parent._single::before,
    .gNav nav.navBar > ul > li.has-children > .parent._single::after {
        display: none;
    }
    .gNav nav.navBar > ul > li.has-children > .parent._single + .sub-menu {
        display: none!important;
    }
    /*理念,オーナーの方へのサブメニューをセンタリング*/
    .gNav [data-en="philosophy"] .sub-menu ul,
    .gNav [data-en="for owner"] .sub-menu ul {
        justify-content: center;
    }
}
@media (min-width: 1200px) {
  .gNav .sub-menu ul {
    width: 85.5%;
    max-width: 1280px;
  }
}

/* ==========================================================================
   SP Navigation
========================================================================== */
@media (max-width: 991px) {
    /* Grobal navigation */
    .gNav {
        width: 100%;
        display: flex;
    }
    .gNav__inner {
        padding: 5.286rem 0 0;
        width: 100%;
        height: 100svh;
        background: var(--white);
        color: var(--black);
        position: fixed!important;
        top: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .6s cubic-bezier(0.19, 1, 0.22, 1);
    }
    /* OPEN */
    .gNav.on .gNav__inner {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .gNav__inner nav.navBar {
        padding: 1em 8.5vw 2.5em;
        border-top: 1px solid var(--border1);
        height: 100%;
        overflow-y: auto;
    }

    nav.navBar {
        font-size: 1rem;
    }
    nav.navBar,
    nav.navBar ul {
        width: 100%;
        flex-wrap: wrap;
    }
    nav.navBar ul li {
        width: 100%;
    }
    nav.navBar ul.main-nav li a,
    nav.navBar ul.main-nav > li > .parent {
        line-height: 1.5;
        padding: 1.241rem 0;
    }
    nav.navBar ul.main-nav > li > .parent {
        display: block;
        font-size: 1.077em;
        font-weight: 500;
        border-bottom: 1px solid var(--border1);
        position: relative;
    }
    nav.navBar ul.main-nav .has-children > .parent::before,
    nav.navBar ul.main-nav .has-children > .parent::after {
        content: '';
        display: block;
        width: 1rem;
        height: 1px;
        background: currentColor;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    nav.navBar ul.main-nav .has-children > .parent::after {
        transform: translateY(-50%) rotate(90deg);
    }
    nav.navBar ul.main-nav .has-children.open > .parent::after {
        opacity: 0;
    }
    nav.navBar ul.main-nav .sub-menu {
        padding: 1em 0;
    }
    nav.navBar ul.main-nav .sub-menu ul li a {
        padding: .5em 0;
        font-size: .923em;
        letter-spacing: .08em;
    }
    nav.navBar ul.sub-nav {
        margin: 2.5em 0 0;
        gap: 1.125em;
    }
    nav.navBar ul.sub-nav .btn {
        width: 100%;
    }
    
    /* Nav Btn */
    .nav-btn {
        background: transparent;
        color: inherit;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 5.286rem;
        padding-left: 1.5em;
        padding-right: 4.75rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        cursor: pointer;
    }
    .nav-btn i {
        display: block;
        background: currentColor;
        width: 2.308em;
        height: 2px;
        position: absolute;
        right: 1.5em;
        margin-top: -1px;
        transition: transform .2s, top .2s .2s;
    }
    .nav-btn i:nth-of-type(1) {
        top: 50%;
    }
    .nav-btn i:nth-of-type(2) {
        top: calc(50% - 7px);
    }
    .nav-btn i:nth-of-type(3) {
        top: calc(50% + 7px);
    }
    .gNav.on + .nav-btn {
        position: fixed;
    }
    .gNav.on + .nav-btn i {
        transition: transform .2s .2s, top .2s;
    }
    .gNav.on + .nav-btn i:nth-of-type(1) {
        transform: scaleX(0);
    }
    .gNav.on + .nav-btn i:nth-of-type(2) {
        top: 50%;
        transform: rotate(30deg);
    }
    .gNav.on + .nav-btn i:nth-of-type(3) {
        top: 50%;
        transform: rotate(-30deg);
    }
    .nav-btn::before {
        content: 'MENU';
        font-family: var(--font1);
        font-size: .923em;
        font-weight: 600;
    }
    .gNav.on + .nav-btn::before {
        content: 'CLOSE';
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    nav.navBar ul.sub-nav li {
        width: calc((100% - 1.125em)/2);
    }
}

/* ==========================================================================
   Column layout
========================================================================== */
.column-layout {
    position: relative;
}
.side-col:has(.label) {
  width: 1.5rem;
}
[data-label] {
    position: relative;
}
[data-label]::before,
.side-col .label > span {
  font-family: var(--font1);
  font-size: .846em;
  line-height: 1.375rem;
  display: block;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

@media (max-width: 991px) {
    .main-col {
        position: relative;
    }
    .column-layout:has([data-label]) .side-col:has(.label) {
        display: none;
    }
    .side-col > ._sticky > .section {
        max-height: 5rem;
        margin: 2rem 0 -4.5rem;
    }
	.side-col > ._sticky > .section:has(ul) {
        margin: 4.5rem 0 -2rem;
    }
    .side-col:has(.label) {
        margin-left: auto;
    }
    [data-label]::before {
        content: attr(data-label);
        position: absolute;
        top: 0;
        right: 0;
    }
    .column-layout.container .container {
        padding-right: 0;
        padding-left: 0;
    }
}
@media (min-width: 992px) {
    .column-layout {
        display: flex;
        justify-content: space-between;
        gap: 3vw;
    }
    .column-layout .main-col {
        flex-basis: 100%;
    }
    .column-layout .side-col ._sticky {
        overflow: hidden;
        top: 70px;
    }
    .column-layout .side-col:has(.sidebar) {
        flex: 0 0 195px;
    }
}

/* ==========================================================================
   Sidebar
========================================================================== */
.sidebar .side_ttl {
    font-family: var(--font1);
    font-size: .923em;
    letter-spacing: .08em;
    margin-bottom: 2em;
}
.sidebar ul li a {
    font-family: var(--mincho);
    line-height: 1.5;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 1.125em;
    padding: .75em 0 .75em .125em;
}
.sidebar ul li a::before {
    content: '';
    display: block;
    width: .425em;
    height: .425em;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transform-origin: 75% 50%;
}
.sidebar ul li a:hover {
    opacity: .5;
}
@media (max-width: 991px) {
    .sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 2%;
    }
    .sidebar ul li {
        flex: 0 0 48%;
    }
}


/* ==========================================================================
   Other menu
========================================================================== */
#other-menu {
    background: var(--ll-blue2);
    overflow: hidden;
}
ul.other-links {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
}
ul.other-links li {
    flex: 0 0 100%;
}
ul.other-links li a {
    color: var(--white);
    width: 100%;
    aspect-ratio: 21 / 8;
    padding: 1.5em;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
ul.other-links li a::before {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 3em;
    content: "\e902";
    font-family: 'icomoon' !important;
    border-radius: 100%;
    border: 1px solid currentColor;
    position: absolute;
    right: 1.5em;
    bottom: 1.5em;
    z-index: 2;
}
ul.other-links li a .ttl {
    display: block;
    font-size: 1.286em;
    padding-right: 2.5rem;
    position: relative;
    z-index: 2;
}
ul.other-links li a .ttl::before {
    content: attr(data-en);
    display: block;
    margin-bottom: .5em;
    font-family: var(--font1);
    font-size: .714rem;
    text-transform: uppercase;
}
ul.other-links li a picture {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .3s;
}
ul.other-links li a picture::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--dd-blue) 100%);
    position: absolute;
    top: 0;
    left: 0;
    opacity: .4;
    mix-blend-mode: multiply;
}
ul.other-links li a:hover picture {
    transform: scale(1.1);
}

@media (min-width: 768px) {
    #other-menu,
    #other-menu2 {
        padding: 2rem 0;
    }
    ul.other-links {
        gap: 1em;
    }
    ul.other-links li {
        flex: 0 0 calc((100% - 2em)/3);
    }
    ul.other-links li a {
        aspect-ratio: 179 / 101;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    ul.other-links:not(._Xlarge):not(._large):not(._md-large) li a {
        padding: 1rem;
    }
    ul.other-links:not(._Xlarge):not(._large):not(._md-large) li a .ttl {
        font-size: 1.125em;
    }
    ul.other-links:not(._Xlarge):not(._large):not(._md-large) li a::before {
        right: 1rem;
        bottom: 1rem;
    }
}
@media (min-width: 1200px) {
    #other-menu,
    #other-menu2 {
        padding: 3.5rem 0;
    }
    ul.other-links {
        gap: 2em;
    }
    ul.other-links li {
        flex: 0 0 calc((100% - 4em)/3);
    }
    ul.other-links li a {
        padding: 2.25em;
    }
    ul.other-links li a::before {
        right: 2.25em;
        bottom: 2.25em;
    }
    ul.other-links li a .ttl {
        font-size: 1.429em;
    }
}




ul.other-links._Xlarge {
    gap: 2.75em;
}
ul.other-links._Xlarge li a {
    aspect-ratio: 63 / 40;
}
@media (min-width: 576px) {
    ul.other-links._Xlarge {
        gap: 1em;
    }
    ul.other-links._Xlarge li {
        flex: 0 0 calc((100% - 1em)/2);
    }
}
@media (min-width: 768px) {
    ul.other-links._Xlarge,
    ul.other-links._large {
        gap: 2em;
    }
    ul.other-links._Xlarge li,
    ul.other-links._large li {
        flex: 0 0 calc((100% - 2em)/2);
    }
}
@media (min-width: 992px) {
    ul.other-links._Xlarge,
    ul.other-links._large {
        gap: 3em;
    }
    ul.other-links._Xlarge li,
    ul.other-links._large li {
        flex: 0 0 calc((100% - 3em)/2);
    }
    ul.other-links._Xlarge li a,
    ul.other-links._large li a {
        aspect-ratio: 543 / 307;
    }
    [class*="col-lg-"] > ul.other-links._Xlarge,
    [class*="col-lg-"] > ul.other-links._large {
        gap: 1.5em;
    }
    [class*="col-lg-"] > ul.other-links._Xlarge li,
    [class*="col-lg-"] > ul.other-links._large li {
        flex: 0 0 calc((100% - 1.5em)/2);
    }
}



ul.other-links._no-gutter {
    gap: 0;
}
@media (max-width: 575px) {
    ul.other-links._Xlarge._no-gutter li a,
    ul.other-links._large._no-gutter li a {
       aspect-ratio: 25 / 12;
    }
}
@media (min-width: 576px) {
    ul.other-links._Xlarge._no-gutter li,
    ul.other-links._large._no-gutter li {
       flex: 0 0 50%;
    }
}



@media (min-width: 768px) and (max-width: 991px) {
    ul.other-links._md-large {
        gap: 2em;
    }
    ul.other-links._md-large li {
        flex: 0 0 calc((100% - 2em)/2);
    }
}



ul.other-links._small li a .ttl {
    font-size: 1em;
}
ul.other-links._small li a::before {
    font-size: .75em;
}
@media (max-width: 767px) {
    ul.other-links._small li a {
        padding: 0;
        color: inherit;
        align-items: center;
        gap: 1.25em;
        aspect-ratio: auto;
        overflow: visible;
    }
    ul.other-links._small li a picture {
        position: static;
        flex: 0 0 min(43%, 12em);
        aspect-ratio: 23 / 13;
        transform: scale(1)!important;
    }
    ul.other-links._small li a picture::after {
        display: none;   
    }
    ul.other-links._small li a::before {
        border-color: var(--border1);
        right: 0;
        bottom: 50%;
        transform: translateY(50%);
        transition: right .2s;
    }
    ul.other-links._small li a:hover::before {
        right: -4px;
    }
}
@media (min-width: 768px) {
    ul.other-links._small li a::before {
        right: 1.125rem;
        bottom: 1.375rem;
    }
}
@media (min-width: 992px) {
    ul.other-links._small {
        gap: 1em;
    }
    ul.other-links._small li {
        flex: 0 0 calc((100% - (1em*3))/4);
    }
    ul.other-links._small li a {
        padding: 1.125em;
    }
}
@media (min-width: 1200px) {
    ul.other-links._small li {
        flex: 0 0 calc((100% - (1em*4))/5);
    }
    ul.other-links._small li a {
        aspect-ratio: 106 / 75;
    }
}


/* ==========================================================================
   Fixed Nav 
========================================================================== */
#fixedNav {
    width: min(100%, 39rem);
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 888;
    overflow: hidden;
}
#fixedNav .buttons {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 1rem .6rem;
}
#fixedNav .buttons .btn {
    flex-basis: 100%;
}
@media (min-width: 992px) {
    #fixedNav .buttons {
        padding: 1.2rem;
    }
}

/* ==========================================================================
   IR menu
========================================================================== */
#ir-menu {
    font-size: .929em;
    background: var(--ll-blue2);
    overflow: hidden;
}
#ir-menu ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2em;
    row-gap: 1.5em;
}
#ir-menu ul li {
    flex: 0 0 100%;
}
#ir-menu ul li a {
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 1em;
    border-bottom: 1px solid var(--border3);
}
#ir-menu ul li a::after {
    font-family: 'icomoon' !important;
    content: '\e902';
    font-size: .625em;
    line-height: 2rem;
    display: block;
    text-align: center;
    flex: 0 0 2rem;
    height: 2rem;
    background: var(--white);
    color: var(--color1);
    border-radius: 100%;
    transition: .3s;
    transition-property: background, color;
}
#ir-menu ul li a:hover {
    color: var(--color1);
}

@media (min-width: 576px) {
    #ir-menu ul li {
        flex: 0 0 calc((100% - 2em)/2);
    }
}
@media (min-width: 768px) {
    #ir-menu ul li {
        flex: 0 0 calc((100% - 4em)/3);
    }
}
@media (min-width: 992px) {
    #ir-menu {
        font-size: min(.929em, 1.2vw);
    }
    #ir-menu ul li {
        flex: 0 0 calc((100% - 6em)/4);
    }
}
@media (min-width: 1200px) {
    #ir-menu ul {
        column-gap: 3em;
    }
    #ir-menu ul li {
        flex: 0 0 calc((100% - 9em)/4);
    }
}


/* ==========================================================================
   Breadcrumb
========================================================================== */
.breadcrumb-wrapper {
  background: var(--l-gray);
  font-size: .929em;
  font-weight: 500;
  overflow: hidden;
  padding: 1em 0;
  position: relative;
  z-index: 3;
}
#breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  line-height: 1.25;
}
#breadcrumb ol li {
  display: flex;
  align-items: center;
  padding: .5em 0;
}
#breadcrumb ol li a {
  display: inline-block;
}
#breadcrumb ol .separator {
  display: block;
  padding: 0 .75em;
}


/* ==========================================================================
   Footer
========================================================================== */
#siteFooter {
    background-color: var(--white);
    color: inherit;
    clear: both;
    overflow: hidden;
}
#siteFooter .inner-footer {
    padding: 6rem 0 5rem;
    position: relative;
}
#siteFooter a:not(.btn):hover {
    color: var(--l-blue2);
}
#siteFooter .footer_l {
    margin-bottom: 3rem;
}
#siteFooter .logo a {
    display: inline-block;
    width: 7em;
}
#siteFooter .info .ttl {
    font-size: 1.091em;
    font-weight: 500;
    margin-bottom: .35em;
}
#siteFooter .info p {
    margin: 0;
    line-height: 1.75;
    letter-spacing: .08em;
}
#siteFooter .footer-bottom {
    border-top: 1px solid var(--border1);
    font-size: .857em;
    padding: 2rem 0 7.5rem;
}
#siteFooter .copyright p {
    margin-top: .5em;
    font-family: var(--font1);
    text-transform: uppercase;
    font-weight: 500;
}

@media (max-width: 1199px) {
    #siteFooter .inner-footer .footer_l .info {
        padding-left: 1.75em;
    }
}
@media (max-width: 575px) {
    #siteFooter .inner-footer .footer_l .info {
        font-size: min(.846rem, 3vw);
    }
}

@media (min-width: 576px) {
     #siteFooter .logo a {
        width: 9.5em;
     }
}
@media (min-width: 992px) {
    #siteFooter {
        font-size: min(.929rem, 1.1vw);
    }
    #siteFooter .inner-footer {
        padding: 5rem 0;
    }
    #siteFooter .footer_l {
        margin-bottom: 5rem;
    }
    #siteFooter .footer-bottom {
        padding: 2rem 0;
    }
    #siteFooter .copyright p {
        margin-top: 0;
    }
}
@media (min-width: 1200px) {
    #siteFooter .inner-footer {
        padding: 7rem 0;
    }
    #siteFooter .inner-footer .footer_l {
        flex: 0 0 16em;
    }
    #siteFooter .inner-footer .footer_l .info {
        margin-top: .75em;
    }
    #siteFooter .info .ttl {
        font-size: 1.154em;
    }
}



@media (max-width: 575px) {
    .fNav ul.main-nav li {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .fNav nav.navBar ul {
        margin: .5em 0 0;
        flex-wrap: wrap;
        column-gap: 3%;
        row-gap: 6em;
    }
    .fNav nav.navBar ul.main-nav li {
        flex-basis: calc((100% - 3%*5)/6);
    }
    .fNav nav.navBar ul.main-nav li:nth-of-type(6) { /* IR */
        order: 9;
        flex-basis: 60%;
    }
    .fNav nav.navBar ul.main-nav li:nth-of-type(6) .sub-menu {
        width: 100%;
        display: flex;
        column-gap: 2%;
    }
    .fNav nav.navBar ul.main-nav li:nth-of-type(6) .sub-menu ul {
        flex-basis: 25%;
    }
    .fNav nav.navBar ul.main-nav li:nth-of-type(7), /* サスティナビリティ */
    .fNav nav.navBar ul.main-nav li:nth-of-type(9) { /* 各種サービス */
        order: 10;
        flex-basis: calc((100% - 3%*2 - 60%)/2);
    }
    .fNav nav.navBar > ul.main-nav > li.has-children::before {
        content: attr(data-en);
        display: block;
        color: var(--l-blue);
        font-family: var(--font1);
        font-size: .769em;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
    }
    .fNav nav.navBar > ul.main-nav > li.has-children > .parent {
        display: block;
        pointer-events: none;
        font-weight: 700;
        padding: .25em 0 .75em;
        margin-bottom: .75em;
        border-bottom: 1px solid var(--border1);
    }
    .fNav nav.navBar > ul.main-nav .sub-menu ul {
        display: block;
        font-size: .923em;
        /*letter-spacing: .08em;*/
        line-height: 1.35;
    }
    .fNav nav.navBar > ul.main-nav .sub-menu ul li a {
        padding: .5em 0;
    }
    .fNav nav.navBar > ul.sub-nav {
        margin-top: 5rem;
    }
}
@media (min-width: 1200px) {

}