@charset "UTF-8";

/* ===============================================
  base
=============================================== */
/* ------------------------------
    body　／　size / root
------------------------------ */
html {
    font-size: 62.5%;
    box-sizing: border-box;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 2;
    letter-spacing: 0.05em;
}

* {
	padding: 0;
	margin: 0;
}

dd {
	margin: 0;
}

ul {
	padding: 0;
	list-style-type: none;
}

/* --- Contents size --- */
body {
    font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem);
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.inner,.inner-s {
    padding: 0 8%;
    width: 100%;
    transition: all 0.3s ease-in-out;
}

@media (min-width: 768px) {
    .inner,.inner-s {
        width: 92%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 0;
    }
    .inner-s {
        max-width: 1040px;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: clamp(1.8rem, 1rem + 0.8vw, 2.2rem);
    }
    .inner,.inner-s {
        width: 92%;
        max-width: 1600px;
        margin: 0 auto;
        padding: 0;
    }
    .inner-s {
        max-width: 1440px;
    }
}

/* --- Color --- */
:root {
    --color-primary: #f10011;
    --color-secondary: #134b99;
    --color-accent: #000;
    --color-black: #3c3c3c;
    --color-white: #FFFFFF;
    --color-gray-dark: #8c8c8c;
    --color-gray-light: #edf0f2;
    --color-link: #3c3c3c;
    --color-link-hover: #f10011;
    --color-link-visited: #3c3c3c;
    --dept-pink:#DC5E7C;
    --dept-orange:#EB5D36;
    --dept-yellow:#EE9638;
    --dept-green:#00924F;
    --dept-bluegreen:#2BAAA1;
    --dept-blue:#47A4D2;
    --dept-light-blue:#ecf7fc;
    --color-red: #E53935;
    --color-pink: #E91E63;
    --color-purple: #9C27B0;
    --color-blue: #2196F3;
    --color-turquoise: #00BCD4;
    --color-green: #4CAF50;
    --color-yellow: #FFC107;
    --color-orange: #FB8C00;
}

/* ------------------------------
    navigation
------------------------------ */
.site-footer .g-nav {
    background-color: var(--color-gray-light);
    padding: calc(1.5rem + 4%) 4% calc(2rem + 4%);
    border-radius: 20px;
}
@media (min-width: 1024px) {
    .site-footer .g-nav {
        padding: 6rem 4% 2rem;
        border-radius: 30px;
    }
}

.site-footer .g-nav__nav .g-nav__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
@media (min-width: 1024px) {
    .site-footer .g-nav__nav .g-nav__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto auto;
        grid-column-gap: 2rem;
        grid-row-gap: 3rem;
        }
    .site-footer .g-nav__list .item__logo-typo { grid-area: 1 / 1 / 2 / 3; }
    .site-footer .g-nav__list .item__about { grid-area: 2 / 1 / 3 / 2; }
    .site-footer .g-nav__list .item__work { grid-area: 2 / 2 / 4 / 3; }
    .site-footer .g-nav__list .item__career { grid-area: 2 / 3 / 4 / 4; }
    .site-footer .g-nav__list .item__info { grid-area: 3 / 1 / 4 / 2; }
    .site-footer .g-nav__list .item__policy-sitemap { grid-area: 1 / 2 / 2 / 4;
    text-align: right!important; }
}

.site-footer .g-nav__nav .g-nav__list li {
    font-size: 0.89em;
    font-weight: 700;
}
.site-footer .g-nav__nav ul.g-nav__sub-list li{
    font-size: 1em;
    font-weight: 400;
}
.site-footer ul.g-nav__sub-list {
    display: none;
}
.site-footer ul.g-nav__sub-list > li a {
    color: var(--color-black);
    text-decoration: none;
}
@media (min-width: 1024px) {
    .site-footer ul.g-nav__sub-list {
        display: block;
        padding-left: 2.5rem;
        padding-top: 1rem;
    }
}

.site-footer .g-nav__nav ul.g-nav__biz-list li{
    font-size: 0.75em;
    font-weight: 400;
    line-height: 1.6;
}
.site-footer ul.g-nav__biz-list {
    display: none;
}
.site-footer ul.g-nav__biz-list > li a {
    color: var(--color-black);
    text-decoration: none;
}
.site-footer .item__work > p {
    display: none;
    font-weight: 400;
    font-size: 0.85em;
    margin: .5rem 0 0.1rem;
    line-height: 1.6;
}
@media (min-width: 1024px) {
    .site-footer ul.g-nav__biz-list {
        display: block;
        padding-left: 2.5rem;
    }
    .site-footer .item__work > p {
        display: block;
        padding-left: 2.5rem;
        margin-top: .5rem;
    }
    .site-footer .item__work > p:first-of-type {
        margin-top: 1rem;
    }
}

.site-footer .g-nav__list > li .g-nav__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 1rem 2.5rem;
    padding-right: 4.5rem;
    text-decoration: none;
    color: var(--color-black);
    width: 100%;
}
.site-footer .g-nav__list > li .g-nav__btn::after {
    content: '';
    position: absolute;
    right: 2.4rem;
    top: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--color-black);
    mask-image: url('/common/img/arrow.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/common/img/arrow.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
}
@media (hover: hover) {
    .site-footer .g-nav__list > li .g-nav__btn:hover::after {
        background-color: var(--color-primary);
        transform: translateY(-50%) translateX(3px);
    }
}
@media (min-width: 1024px) {
    .site-footer .g-nav__list > li .g-nav__btn {
        padding-right: 4.5rem;
        border-radius: 30px;
    }
}

.site-footer .g-nav__list > li.item__logo-typo {
    width: 80%;
    max-width: 268px;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}
.site-footer .g-nav__list > li.item__logo-typo img {
    max-width: 100%;
    height: auto;
    display: block;
}
.site-footer .g-nav__list > li.item__policy-sitemap{
    font-size: 0.8em;
    text-align: center;
}
.site-footer .g-nav__list > li.item__policy-sitemap a {
    color: var(--color-black);
    text-decoration: none;
    font-weight: 400;
}
@media (min-width: 1024px) {
    .site-footer .g-nav__list > li.item__logo-typo {
        width: 100%;
        margin: 0;
    }
}


/* ------------------------------
    header
------------------------------ */
.site-header {
    width: 100%;
    background-color: var(--color-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 80px;
    z-index: 2000;
    transition: transform 0.3s ease;
    box-shadow:0px 0px 50px 0px rgba(0, 0, 0, 0.3);
}
.site-header--hidden {
    transform: translateY(-100%);
}
.site-header__inner {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 0 4%;
}

@media (min-width: 768px) {
    .site-header {
        min-height: 100px;
    }
    .site-header__inner {
        min-height: 100px;
        padding: 0;
    }
}


.site-header__logo {
    margin-right: auto;
}

.site-header__menu {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .site-header__menu {
        gap: 15px;
    }
}
@media (min-width: 1200px) {
    .site-header__menu {
        gap: 38px;
    }
}

.site-header__logo-link {
    display: block;
    width: 120px;
    height: 40px;
    background-image: url('/common/img/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid #fffcfc;
    transition: opacity 0.3s ease;
    margin-right: 1em;
}

@media (hover: hover) {
    .site-header__logo-link:hover {
        opacity: 0.8;
    }
}

.site-header__logo-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    .site-header__logo-link {
        width: 140px;
        height: 40px;
    }
}
@media (min-width: 1200px) {
    .site-header__logo-link {
        width: 200px;
        height: 58px;
    }
}

.site-header__nav {
    display: none;
}
.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header__nav-list li a {
    color: var(--color-white);
    font-size: 1.4rem;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    display: inline-block;
    transition: font-size 0.3s ease;
}

@media (hover: hover) {
    .site-header__nav-list li a:hover {
        color: var(--color-white)!important;
    }
}

.site-header__nav-list li a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

@media (hover: hover) {
    .site-header__nav-list li a:hover::after {
        width: 100%;
    }
}
@media (min-width: 768px) {
    .site-header__nav {
        display: block;
    }
}
@media (min-width: 920px) {
        .site-header__nav-list li a br {
        display: none;
    }
}
@media (min-width: 1200px) {
    .site-header__nav-list {
        gap: 38px;
    }
    .site-header__nav-list li a {
        font-size: 1.6rem;
    }
}

.site-header__entry{
    font-size: 1.2rem;
}
@media (min-width: 768px) {
    .site-header__entry{
        font-size: 1.4rem;
    }
}

.site-header__hamburger {
    display: block;
}
.hamburger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.hamburger-btn__icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}
.hamburger-btn__icon span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s;
}
.hamburger-btn__text {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 500;
}
.hamburger-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
    pointer-events: none;
}

.hamburger-menu.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.hamburger-menu__overlay {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px);
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.hamburger-menu.is-active .hamburger-menu__overlay {
    opacity: 1;
}

@media (min-width: 768px) {
    .hamburger-menu__overlay {
        top: 100px;
        height: calc(100% - 100px);
    }
}

.hamburger-menu__content {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background-color: var(--color-gray-light);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    padding: 2rem 0;
    height: auto;
    max-height: calc(100vh - 80px);
    pointer-events: auto;
}

.hamburger-menu.is-active .hamburger-menu__content {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .hamburger-menu__content {
        top: 100px;
        max-height: calc(100vh - 100px);
    }
}

/* Hamburger button active state */
.hamburger-btn.is-active .hamburger-btn__icon span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-active .hamburger-btn__icon span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger-btn.is-active .hamburger-btn__icon span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Hamburger g-nav styling */
.hamburger-menu .g-nav {
    background-color: transparent;
    padding: 2rem 8%;
    border-radius: 0;
}

@media (min-width: 768px) {
    .hamburger-menu .g-nav {
        padding: 5rem 8%;
    }
}

.hamburger-menu .g-nav__nav .g-nav__list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

@media (min-width: 1024px) {
    .hamburger-menu .g-nav__nav .g-nav__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        grid-column-gap: 2rem;
        grid-row-gap: 2rem;
    }
    .hamburger-menu .g-nav__list .item__logo-typo { display: none; }
    .hamburger-menu .g-nav__list .item__about { grid-area: 1 / 1 / 2 / 2; }
    .hamburger-menu .g-nav__list .item__work { grid-area: 1 / 2 / 3 / 3; }
    .hamburger-menu .g-nav__list .item__career { grid-area: 1 / 3 / 3 / 4; }
    .hamburger-menu .g-nav__list .item__info { grid-area: 2 / 1 / 3 / 2; }
    .hamburger-menu .g-nav__list .item__policy-sitemap { 
        display: none;
    }
}

.hamburger-menu .g-nav__nav .g-nav__list li {
    font-size: 0.89em;
    font-weight: 700;
}

.hamburger-menu .g-nav__nav ul.g-nav__sub-list li {
    font-size: 1em;
    font-weight: 400;
}

.hamburger-menu ul.g-nav__sub-list {
    display: block;
    padding-left: 0;
}

.hamburger-menu ul.g-nav__sub-list > li a {
    color: var(--color-black);
    text-decoration: none;
    display: block;
    padding: 0rem 2rem;
}

@media (min-width: 768px) {
    .hamburger-menu ul.g-nav__sub-list {
        padding-left: 2rem;
        padding-top: 1rem;
    }
}

.hamburger-menu ul.g-nav__biz-list {
    display: none;
}

.hamburger-menu .item__work > p {
    display: none;
}

.hamburger-menu .g-nav__list > li .g-nav__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: var(--color-white);
    border-radius: 30px;
    padding: 1rem 2.5rem;
    padding-right: 4.5rem;
    text-decoration: none;
    color: var(--color-black);
    width: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .hamburger-menu .g-nav__list > li .g-nav__btn:hover {
        background-color: var(--color-white);
        color: var(--color-primary);
    }
}

.hamburger-menu .g-nav__list > li .g-nav__btn::after {
    content: '';
    position: absolute;
    right: 2.4rem;
    top: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--color-black);
    mask-image: url('/common/img/arrow.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/common/img/arrow.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

@media (hover: hover) {
    .hamburger-menu .g-nav__list > li .g-nav__btn:hover::after {
        background-color: var(--color-primary);
    }
}

.hamburger-menu .g-nav__list > li.item__logo-typo {
    display: none;
}

.hamburger-menu .g-nav__list > li.item__logo-typo img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hamburger-menu .g-nav__list > li.item__policy-sitemap {
    display: none;
}

.hamburger-menu .g-nav__list > li.item__policy-sitemap a {
    color: var(--color-black);
    text-decoration: none;
}

.hamburger-menu .g-nav__list > li.item__policy-sitemap span {
    color: var(--color-black);
}

@media (min-width: 768px) {
    .hamburger-menu .g-nav__list > li.item__logo-typo {
        width: 100%;
        margin: 0;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .site-header__hamburger {
        display: block;
    }
}

/* --- secondary --- */
.page-header,
.page-header-recruit {
    background-color: var(--color-gray-light);
    padding: 5rem 0;
    margin-top: 80px;
}

@media (min-width: 768px) {
    .page-header,
    .page-header-recruit {
        padding: 10rem 4rem;
        margin-top: 100px;
    }
}
/* --- breadcrumb --- */
.breadcrumb {
    display: none;
    color: var(--color-gray-dark);
    font-size: 1.2rem;
    line-height: 1.5;
    padding: 1.5rem 0;
}
.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
}
.breadcrumb li {
    padding-left: 1.5rem;
}
.breadcrumb a {
    text-decoration: none;
    color: inherit;
    font-weight: normal;
}
.breadcrumb li:not(:first-child)::before {
    content: "・";
    display: inline-block;
    padding-right: 1.5rem;
    color: var(--color-gray-dark);
}
.breadcrumb li:last-child {
    font-weight: bold;
    color: var(--color-black);
}
.breadcrumb li:last-child::before {
    color: var(--color-black);
}

@media (min-width: 768px) {
    .breadcrumb {
        display: block;
        font-size: 1.4rem;
        margin-top: 1rem;
    }
}

/* ------------------------------
    main
------------------------------ */
/* --- section --- */
section {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
}
section:last-of-type {
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    section {
        padding-top: 4.5rem;
        padding-bottom: 4rem;

    }
    section:last-of-type {
        padding-bottom: 8.0rem;
    }
}

/* --- text --- */
p {
    margin: 0;
    letter-spacing: 0.05em;
}
p + p {
    margin-top: 3.2rem;
}

@media (min-width: 768px) {
    p + p {
        margin-top: 3.6rem;
    }
}

/* --- heading --- */
.page__ttl, .sec__ttl-c, .sec__ttl-l, .sub__ttl {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition: all 0.3s ease-in-out;
}
.page__ttl {
    font-size: 2.2rem;
}
.sec__ttl-c, .sec__ttl-l {
    font-size: 2.0rem;
    padding-bottom: 2.5rem;
}
.sec__ttl-c {
    text-align: center;
}
.srHead {
    visibility: visible;
}
.sub__ttl {
    font-size: 1.8rem;
}
@media (min-width: 768px) {
    .page__ttl, .sub__ttl {
        font-weight: 700;
    }
    .page__ttl {
        font-size: 2.2em;
    }
    .sec__ttl-c, .sec__ttl-l {
        font-size: 1.67em;
        padding-bottom: 4.5rem;
    }
    .sub__ttl {
        font-size: 1em;
    }
}

/* --- c-nav --- */
.c-nav{
    background-color: var(--color-secondary);
    padding: 2% 0;
    margin-top: 2em;
}
.c-nav h2 {
    color: var(--color-white);
    padding-top: 0;
}
.c-nav .c-nav__container {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: clamp(1.4rem, 1.1em, 2.2rem);
}

.c-nav .c-nav__container li {
    flex: 1;
}
.c-nav .c-nav__container li:not(:last-child) {
    border-bottom: 1px solid var(--color-white);
}
.c-nav .c-nav__container li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    padding: 1.5rem 1rem;
    background-color: transparent;
    text-decoration: none;
    color: var(--color-white);
    position: relative;
    transition: color 0.3s ease;
}

@media (hover: hover) {
    .c-nav .c-nav__container li a:hover {
        color: var(--color-primary);
    }
}

.c-nav .c-nav__container li a::after {
    content: '';
    width: 1.6rem;
    height: 1.6rem;
    background-color: transparent;
    -webkit-mask-image: url('/common/img/arrow-black.svg');
    mask-image: url('/common/img/arrow-black.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--color-white);
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

@media (hover: hover) {
    .c-nav .c-nav__container li a:hover::after {
        transform: translateX(5px);
        background-color: var(--color-primary);
    }
}

@media(min-width: 1024px) {
    .c-nav{
        padding: 2em 0;
        margin-top: 3em;
    }
    .c-nav .c-nav__container {
        flex-direction: row;
        gap: 0;
        border-radius: 0;
        overflow: visible;
        padding: 0;
    }
    .c-nav .c-nav__container li {
        position: relative;
        flex: 1;
        padding: 0 4%;
        flex-direction: row;
    }
    .c-nav .c-nav__container li:not(:last-child) {
        border-bottom: none;
    }
    .c-nav .c-nav__container li:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background-color: var(--color-white);
        margin: 0;
    }

    .c-nav .c-nav__container li a {
        padding: .1em 1rem;
        justify-content: center;
    }
}

/* --- interview-nav --- */
.int-nav {
    background-color: var(--color-gray-light);
    padding-top: 3em;
    padding-bottom: 3em;
}

.int-nav__slider-container {
    position: relative;
    margin: 0 auto;
    padding: 0 0px;
}
.int-nav__slider {
    overflow: hidden;
    padding: 2rem 20px;
}
.int-nav__slider .swiper-wrapper {
    display: flex;
    margin-left: 0;
    margin-right: 0;
}
@media (min-width: 768px) {
    .int-nav__slider {
        padding: 2rem 30px;
    }
}
@media (min-width: 1024px) {
    .int-nav__slider {
        padding: 2rem 40px;
    }
}
@media (min-width: 1400px) {
    .int-nav__slider {
        padding: 2rem 60px;
    }
}
.int-nav__slider .swiper-slide {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 500px) {
    .int-nav__slider .swiper-slide {
        width: 48%;
    }
}
@media (min-width: 768px) {
    .int-nav__slider .swiper-slide {
        width: 32%;
    }
}
@media (min-width: 1024px) {
    .int-nav__slider .swiper-slide {
        width: 24%;
    }
}

.int-nav__item {
    height: 100%;
}
.int-nav__item a {
    display: block;
    text-decoration: none;
    color: var(--color-black);
    height: 100%;
}
.int-nav__item picture {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto 1.5rem;
    transition: transform 0.4s ease-out;
}
@media (min-width: 1024px) {
    .int-nav__item picture {
        display: block;
        width: 85%;
        height: auto;
        margin: 0 auto 1.5rem;
        transition: transform 0.4s ease-out;
    }
}


.int-nav__item picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.int-nav__info {
    width: 75%;
    margin: 0 auto;
}
.int-nav__category {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    margin-bottom: 0.8rem;
}
.int-nav__icon {
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.int-nav__icon img {
    width: 2.1em;
    height: 2.1em;
}
.int-nav__category-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.int-nav__category-name {
    font-weight: bold;
    line-height: 1.4;
}
.int-nav__sub {
    font-size: .7em;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}
.int-nav__info h3 {
    font-size: 1.4rem;
    font-weight: normal;
    text-align: left;
    margin: 0;
    line-height: 1.5;
    padding-top: 0;
}

/* Department color variations */
.int-nav__item--dept-orange .int-nav__icon {
    background-color: var(--dept-orange);
}
.int-nav__item--dept-yellow .int-nav__icon {
    background-color: var(--dept-yellow);
}
.int-nav__item--dept-green .int-nav__icon {
    background-color: var(--dept-green);
}
.int-nav__item--dept-bluegreen .int-nav__icon {
    background-color: var(--dept-bluegreen);
}
.int-nav__item--dept-blue .int-nav__icon {
    background-color: var(--dept-blue);
}
.int-nav__item--dept-pink .int-nav__icon {
    background-color: var(--dept-pink);
}
.int-nav__item--dept-orange .int-nav__category-name {
    color: var(--dept-orange);
}
.int-nav__item--dept-yellow .int-nav__category-name {
    color: var(--dept-yellow);
}
.int-nav__item--dept-green .int-nav__category-name {
    color: var(--dept-green);
}
.int-nav__item--dept-bluegreen .int-nav__category-name {
    color: var(--dept-bluegreen);
}
.int-nav__item--dept-blue .int-nav__category-name {
    color: var(--dept-blue);
}
.int-nav__item--dept-pink .int-nav__category-name {
    color: var(--dept-pink);
}

/* Navigation buttons */
.int-nav__navigation {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}
.int-nav__button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: absolute;
    left: 10px;
    pointer-events: auto;
}
.int-nav__button-next {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: absolute;
    right: 10px;
    pointer-events: auto;
}
@media (min-width: 768px) {
    .int-nav__navigation {
        top: 35%;
    }
    .int-nav__button-prev {
        left: 5px;
    }
    .int-nav__button-next {
        right: 5px;
    }
}
@media (min-width: 1024px) {
    .int-nav__navigation {
        top: 32%;
    }
    .int-nav__button-prev {
        left: 10px;
    }
    .int-nav__button-next {
        right: 10px;
    }
}
@media (min-width: 1400px) {
    .int-nav__navigation {
        top: 33%;
    }
    .int-nav__button-prev {
        left: 15px;
    }
    .int-nav__button-next {
        right: 15px;
    }
}
.int-nav__button-prev::after,
.int-nav__button-next::after {
    content: '';
    width: 1.1rem;
    height: 1.2rem;
    background-color: var(--color-black);
    background-image: none;
    -webkit-mask-image: url('/common/img/arrow-black.svg');
    mask-image: url('/common/img/arrow-black.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    transition: background-color 0.3s ease;
}
.int-nav__button-prev::after {
    transform: rotate(180deg);
}
.int-nav__button-next::after {
    transform: rotate(0deg);
}
.int-nav__button-prev:hover::after,
.int-nav__button-next:hover::after {
    background-color: var(--color-primary);
}
.int-nav__button-prev.swiper-button-disabled,
.int-nav__button-next.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

@media (hover: hover) {
    .int-nav__item a:hover picture {
        transform: scale(1.05);
    }
}

@media (max-width: 767px) {
    .int-nav__button-prev,
    .int-nav__button-next {
        width: 5rem;
        height: 5rem;
    }
    .int-nav__slider-container {
        padding: 0 0px;
    }
    .int-nav__button-prev,
    .int-nav__button-next {
        width: 4rem;
        height: 4rem;
    }
    .int-nav__item picture {
        /* width: 15rem;
        height: 15rem; */
        margin-bottom: 1.2rem;
    }
    .int-nav__info h3 {
        font-size: 1.3rem;
    }
}

@media (min-width: 768px) {
    .int-nav__item picture {
        margin-bottom: 2rem;
    }
    .int-nav__icon {
        width: 2.4em;
        height: 2.4em;
        max-width: 54px;
        max-height: 54px;
    }
    .int-nav__icon img {
        width: 2.2em;
        height: 2.2em;
    }
    .int-nav__info h3 {
        font-size: 1em;
    }
    .int-nav__button-prev,
    .int-nav__button-next {
        width: 5rem;
        height: 5rem;
    }
}
@media (min-width: 1024px) {
    .int-nav__button-prev,
    .int-nav__button-next {
        width: 6rem;
        height: 6rem;
    }
}
@media (min-width: 1400px) {
    .int-nav__button-prev,
    .int-nav__button-next {
        width: 3.5vw;
        height: 3.5vw;
    }
}

/* ------------------------------
    footer
------------------------------ */
.site-footer {
    padding-top: 2rem;
}

@media(min-width: 768px) {
    .site-footer {
        padding-top: 4rem;
    }
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, background-color 0.4s ease, border-color 0.4s ease;
    pointer-events: none;
}

#page-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

@media (hover: hover) {
    #page-top.is-visible:hover {
        background-color: var(--color-white);
        border-color: var(--color-primary);
    }
}

#page-top::before,
#page-top::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 12px;
    background-color: var(--color-white);
    transition: background-color 0.3s ease;
}

#page-top::before {
    transform: rotate(45deg);
    left: 19px;
    top: 20px;
}

#page-top::after {
    transform: rotate(-45deg);
    right: 19px;
    top: 20px;
}

@media (hover: hover) {
    #page-top.is-visible:hover::before,
    #page-top.is-visible:hover::after {
        background-color: var(--color-primary);
    }
}

@media(max-width: 768px) {
    #page-top {
        width: 36px;
        height: 36px;
        bottom: 10px;
        right: 10px;
    }
    #page-top::before,
    #page-top::after {
        height: 10px;
        top: 13px;
    }
    #page-top::before {
        left: 13px;
    }
    #page-top::after {
        right: 13px;
    }
}

.site-footer .copyright {
    text-align: center;
    font-size: 1.1rem;
    padding: 1rem 0;
}

@media(min-width: 768px) {
    .site-footer .copyright {
        font-size: 1.2rem;
        padding: 2rem 0;
    }
    .site-footer .copyright br {
        display: none;
    }
}

/* ------------------------------
	recruit-link
------------------------------ */
.recruit-link {
	background-color: var(--color-primary);
	padding: 4rem 0 6rem;
	scroll-margin-top: 100px;
}

@media (min-width: 768px) {
	.recruit-link {
		scroll-margin-top: 120px;
	}
}

.recruit-link .recruit-link__ttl {
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 3.3em;
	font-weight: normal;
	color: white;
	width: fit-content;
	margin: 0 auto 3rem;
	letter-spacing: 0.12em;
	line-height: 1.2;
}
.recruit-link .recruit-link__ttl span {
	font-size: calc(1em / 3.3);
    letter-spacing: 0.05em;
    display: block;
	font-family: "Noto Sans JP", sans-serif;
	margin-top: 0.5rem;
}
.recruit-link__container {
	background-color: var(--color-white);
	border-radius: 20px;
	padding: 1rem 2rem;
	margin: 0 auto;
}
.recruit-link__item {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2.5rem 6%;
}
.recruit-link__item:not(:last-child) {
	border-bottom: 1px solid #ccc;
}
.recruit-link__item .item__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.recruit-link__item .item__head h3 {
	font-size: 1.3em;
	font-weight: bold;
	color: #333;
	text-align: center;
}
.recruit-link__item .item__head img {
	display: block;
	width: auto;
	height: 17px;
	margin: 0 auto;
}
.recruit-link__item .item__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.5em;
	list-style: none;
	padding: 0;
}
.recruit-link__item .item__list li {
	flex: 0 0 auto;
	max-width: 100%;
}
.recruit-link__item .item__list li a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #666;
	text-decoration: none;
	transition: opacity 0.3s;
	max-width: 100%;
}
.recruit-link__item .item__list li a picture {
	display: block;
	flex-shrink: 0;
	max-width: 100%;
	width: 100%;
}
.recruit-link__item .item__list li a picture img {
	display: block;
	max-width: 200px;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.recruit-link__item > div {
	margin-top: 1.5rem;
}
.recruit-link__item > div:first-of-type {
	margin-top: 0;
}
.recruit-link__item > div p {
	margin: 2rem 0 0.5rem;
	font-weight: bold;
	color: #333;
}
.recruit-link__item .item__list li.outlink a::before {
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background-image: url("/common/img/outlink-black.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1em;
	background-color: #eee;
	border-radius: 50%;
}

@media (hover: hover) {
	.recruit-link__item .item__list li a:hover {
		opacity: 0.7;
	}
}
.recruit-link__item .item__text {
	color: var(--color-primary);
}

@media (min-width: 768px) {
	.recruit-link {
		padding: 6rem 0 8rem;
	}
	.recruit-link__container {
		padding: 4rem 5rem;
	}
	.recruit-link__item .item__list li a picture img {
		max-width: 200px;
	}
}

@media (min-width: 1024px) {
	.recruit-link__item .item__head h3 {
		text-align: left;
	}
	.recruit-link__item .item__head img {
		text-align: left;
		margin: 0;
	}
	.recruit-link__item {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 3rem 0 3rem 5rem;
	}
	.recruit-link__item .item__head {
		width: 15%;
		min-width: 162px;
		max-width: 220px;
		flex-shrink: 0;
	}
	.recruit-link__item > div {
		flex: 1;
		margin-top: 0;
	}
	.recruit-link__item .item__list {
		flex-direction: row;
		gap: 3rem;
	}
	.recruit-link__item .item__list li a picture {
		width: auto;
		max-width: 180px;
	}
	.recruit-link__item .item__list li a picture img {
		width: auto;
		max-width: 180px;
	}
}

/* ------------------------------
    modal-recruit
------------------------------ */
.modal-recruit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0.3s, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.modal-recruit.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.modal-recruit__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}
.modal-recruit__content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    z-index: 1;
    max-height: 90vh;
    overflow-y: visible;
}
.modal-recruit .recruit-link__container {
    border-radius: 20px;
    padding-top: 6rem;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.modal-recruit [class*="sr"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
.modal-recruit__title {
    position: absolute;
    top: 2.5rem;
    left: 0;
    width: 100%;
    z-index: 1;
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0 1rem;
}

.modal-recruit__close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.modal-recruit__close-btn::before,
.modal-recruit__close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: #333;
}
.modal-recruit__close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.modal-recruit__close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media(min-width: 768px) {
    .modal-recruit__title {
        font-size: 2.8rem;
        top: 3.5rem;
    }
    .modal-recruit .recruit-link__container {
        padding-top: 9rem;
    }
    .modal-recruit__close-btn {
        top: 2rem;
        right: 2rem;
        width: 36px;
        height: 36px;
    }
    .modal-recruit__close-btn::before,
    .modal-recruit__close-btn::after {
        width: 24px;
    }
}

@media(min-width: 1024px) {
    .modal-recruit__close-btn {
        width: 40px;
        height: 40px;
    }
    .modal-recruit__close-btn::before,
    .modal-recruit__close-btn::after {
        width: 28px;
    }
    .modal-recruit__title {
        font-size: 3.2rem;
    }
    .modal-recruit .recruit-link__container {
        padding-top: 11rem;
    }
}

/* ===============================================
  Component & Parts
=============================================== */

/* ------------------------------
	Link
------------------------------ */
html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a {
	color: var(--color-link);
	text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: color 0.3s;
}
@media (hover: hover) {
	a:hover {
		color: var(--color-link-hover)!important;
	}
}
img {
    transition: opacity 0.3s;
}
@media (hover: hover) {
	a:hover img {
		opacity: 0.8;
	}
}
a:visited {
	color: var(--color-link-visited);
}
@media (hover: hover) {
	a.alpha:hover img {
		opacity: 0.8;
	}
}

a.outlink[target="_blank"]::after {
	content:'';
	margin: 0 0.6em 0 0.1em;
	display:inline-block;
	background-image:url("/common/images/icon_window.svg");
	background-size: contain;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}

ul.anav,
ol.anav {
	display: flex;
	flex-wrap:wrap;
	margin: 0 -15px 2rem -15px;
	letter-spacing: 0;
}
ul.anav li,
ol.anav li {
	width:calc(100%/1);
	margin-bottom: 0.5rem;
}
ul.anav li a,
ol.anav li a {
	display: block;
	color: var(--color-black);
	border-bottom: 1px solid var(--color-black);
	margin: 0 15px;
	padding-bottom: 0.3rem;
	position: relative;
}
ul.anav li a:after,
ol.anav li a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -8px;
    border-top: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
	transform: rotate(135deg)
}
ol.anav li {
	list-style: none;
	counter-increment: mycounter;
	position: relative;
}
ol.anav li a {
	padding-left: 2.9em;
}
ol.anav li:before {
	content: counter(mycounter, decimal-leading-zero);
	position: absolute;
    top: 50%;
    left: 0px;
	margin: -1.2em 0 0 15px;
	padding: 0 0 0 0.2em;
    display: block;
    width: 2em;
    height: 1.8em;
	color: #fff;
	background-color: var(--color-black);
	text-align: center;
	font-size: 14px;
}

@media screen and (min-width:768px) {
	ul.anav li,
	ol.anav li {
		width:calc(100%/3);
		margin-bottom: 1rem;
	}
	ol.anav li a {
		padding-left: 2.6em;
	}
}

.person-card h3 {
    transition: opacity 0.3s;
}
@media (hover: hover) {
    .person-card a:hover h3 {
        opacity: 0.7;
    }
}


/* ------------------------------
	Scrollbar
------------------------------ */
::-webkit-scrollbar,
.scrollable-element::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track,
.scrollable-element::-webkit-scrollbar-track {
    background-color: var(--color-gray-light);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb,
.scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover,
.scrollable-element::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}

/* ------------------------------
    button
------------------------------ */
.btn--primary-s,
.btn--primary-m,
.btn--primary-l,
.btn--secondary-s,
.btn--secondary-m,
.btn--secondary-l {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 33px;
    text-decoration: none;
    font-weight: 700;
    transition: opacity 0.3s;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.4rem;
}

@media (min-width: 768px) {
    .btn--primary-s,
    .btn--primary-m,
    .btn--primary-l,
    .btn--secondary-s,
    .btn--secondary-m,
    .btn--secondary-l {
        font-size: 1.6rem;
    }
}
@media (hover: hover) {
    .btn--secondary-s:hover,
    .btn--secondary-m:hover,
    .btn--secondary-l:hover {
        opacity: 0.8;
    }
}
.btn--primary-s,
.btn--primary-m,
.btn--primary-l {
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color 0.3s ease;
}
@media (hover: hover) {
    .btn--primary-s:hover,
    .btn--primary-m:hover,
    .btn--primary-l:hover {
        color: var(--color-primary);
    }
}
.btn--primary-s::before,
.btn--primary-m::before,
.btn--primary-l::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    border-radius: 33px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.4s ease;
}
@media (hover: hover) {
    .btn--primary-s:hover::before,
    .btn--primary-m:hover::before,
    .btn--primary-l:hover::before {
        transform: scaleX(1);
        transform-origin: left center;
    }
}
.btn--secondary-s,
.btn--secondary-m,
.btn--secondary-l {
    background-color: var(--color-black);
    color: var(--color-white);
}
.btn--secondary-s:visited,
.btn--secondary-m:visited,
.btn--secondary-l:visited {
    color: var(--color-white);
}
.btn--primary-s,
.btn--secondary-s {
    padding: 1.4rem 2.4rem 1.4rem 3.5rem;
}
.btn--primary-m,
.btn--secondary-m {
    padding: 1.6rem 2.4rem 1.6rem 3.5rem;
}
.btn--primary-l,
.btn--secondary-l {
    padding: 1.8rem 2.4rem 1.8rem 3.5rem;
}

.btn--primary-s.btn--arrow, .btn--primary-m.btn--arrow, .btn--primary-l.btn--arrow,
.btn--secondary-s.btn--arrow, .btn--secondary-m.btn--arrow, .btn--secondary-l.btn--arrow,
.btn--primary-s.btn--arrow-up, .btn--primary-m.btn--arrow-up, .btn--primary-l.btn--arrow-up,
.btn--secondary-s.btn--arrow-up, .btn--secondary-m.btn--arrow-up, .btn--secondary-l.btn--arrow-up {
    position: relative;
    padding-right: 4.5rem;
}
.btn--primary-s.btn--arrow::after, .btn--primary-m.btn--arrow::after, .btn--primary-l.btn--arrow::after,
.btn--secondary-s.btn--arrow::after, .btn--secondary-m.btn--arrow::after, .btn--secondary-l.btn--arrow::after,
.btn--primary-s.btn--arrow-up::after, .btn--primary-m.btn--arrow-up::after, .btn--primary-l.btn--arrow-up::after,
.btn--secondary-s.btn--arrow-up::after, .btn--secondary-m.btn--arrow-up::after, .btn--secondary-l.btn--arrow-up::after {
    content: '';
    position: absolute;
    right: 2.4rem;
    top: 50%;
    background-image: url('/common/img/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.btn--primary-s.btn--arrow::after, .btn--primary-m.btn--arrow::after, .btn--primary-l.btn--arrow::after,
.btn--primary-s.btn--arrow-up::after, .btn--primary-m.btn--arrow-up::after, .btn--primary-l.btn--arrow-up::after {
    background-color: var(--color-white);
    background-image: none;
    mask-image: url('/common/img/arrow.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/common/img/arrow.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn--primary-s.btn--arrow:hover::after, .btn--primary-m.btn--arrow:hover::after, .btn--primary-l.btn--arrow:hover::after,
.btn--primary-s.btn--arrow-up:hover::after, .btn--primary-m.btn--arrow-up:hover::after, .btn--primary-l.btn--arrow-up:hover::after {
    background-color: var(--color-primary);
}

.btn--primary-s.btn--arrow::after, .btn--primary-m.btn--arrow::after, .btn--primary-l.btn--arrow::after,
.btn--secondary-s.btn--arrow::after, .btn--secondary-m.btn--arrow::after, .btn--secondary-l.btn--arrow::after {
    width: 1.6rem;
    height: 1.6rem;
    transform: translateY(-50%);
}
@media (hover: hover) {
    .btn--primary-s.btn--arrow:hover::after, .btn--primary-m.btn--arrow:hover::after, .btn--primary-l.btn--arrow:hover::after,
    .btn--secondary-s.btn--arrow:hover::after, .btn--secondary-m.btn--arrow:hover::after, .btn--secondary-l.btn--arrow:hover::after {
        transform: translateY(-50%) translateX(5px);
    }
}
.btn--primary-s.btn--arrow-up::after, .btn--primary-m.btn--arrow-up::after, .btn--primary-l.btn--arrow-up::after,
.btn--secondary-s.btn--arrow-up::after, .btn--secondary-m.btn--arrow-up::after, .btn--secondary-l.btn--arrow-up::after {
    width: 1.3rem;
    height: 1.3rem;
    transform: translateY(-50%) rotate(-45deg);
}
.btn--primary-s.btn--arrow-up:hover::after, .btn--primary-m.btn--arrow-up:hover::after, .btn--primary-l.btn--arrow-up:hover::after,
.btn--secondary-s.btn--arrow-up:hover::after, .btn--secondary-m.btn--arrow-up:hover::after, .btn--secondary-l.btn--arrow-up:hover::after {
    transform: translateY(-50%) rotate(-45deg) scale(1.1) translateX(3px);
}

/* ------------------------------
	ENTRY btn
------------------------------ */
.btn--entry {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 33px;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.2rem;
    background-color: #000000;
    color: var(--color-white);
    padding: .4em 2.4rem .4em 2.5rem;
    position: relative;
    padding-right: 3.2rem;
    overflow: hidden;
    z-index: 0;
}

@media (min-width: 768px) {
    .btn--entry {
        font-size: 1.4rem;
		padding: .4em 2.5em .4em 1.5em;
		padding-right: 3.2rem;
    }
}


@media (min-width: 1200px) {
    .btn--entry {
        font-size: 1.6rem;
		padding-right: 4.5rem;
    }
}

@media (hover: hover) {
    .btn--entry:hover {
        color: #c80101;
    }
}

.btn--entry:visited {
    color: var(--color-white);
}

.btn--entry::after {
    content: '';
    position: absolute;
    right: 1.4rem;
    top: 50%;
    background-color: var(--color-white);
    mask-image: url('/common/img/arrow.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url('/common/img/arrow.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    width: 1.3rem;
    height: 1.3rem;
    transform: translateY(-50%) rotate(-45deg);
    will-change: transform;
}

@media (hover: hover) {
    .btn--entry:hover::after {
        transform: translateY(-50%) rotate(-45deg) translateX(2px);
        background-color: var(--color-primary);
    }
}

.btn--entry::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -2px;
    right: -2px;
    bottom: -1px;
    background-color: #ffffff;
    border-radius: 34px;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

@media (hover: hover) {
    .btn--entry:hover::before {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@media (min-width: 768px) {
	.btn--entry::after {
		right: 1.4rem;
	}
}

@media (min-width: 1200px) {
	.btn--entry::after {
		right: 2.4rem;
	}
}

@media (max-width: 320px) {
	.btn--entry{
		display: none;
	}
}

/* ------------------------------
	icon-
------------------------------ */
.icon-new:before {
	content: "";
	display: inline-block;
	width: 21px;
	height: 9px;
	margin-left: 0.5rem;
	background: url(/common/images/icon_new.png) no-repeat center;
	background-size: contain;
	animation: 2s ease 0s normal none infinite running horizontal;
}

@-webkit-keyframes horizontal{
	0%{-webkit-transform:translate(0,0);transform:translate(0,0)}
	6%{-webkit-transform:translate(3px,0);transform:translate(3px,0)}
	12%{-webkit-transform:translate(0,0);transform:translate(0,0)}
	18%{-webkit-transform:translate(3px,0);transform:translate(3px,0)}
	24%{-webkit-transform:translate(0,0);transform:translate(0,0)}
}
@keyframes horizontal{
	0%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
	6%{-webkit-transform:translate(3px,0);-ms-transform:translate(3px,0);transform:translate(0,0)}
	12%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
	18%{-webkit-transform:translate(3px,0);-ms-transform:translate(3px,0);transform:translate(0,0)}
	24%{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}
}

/* ------------------------------
    picture / image
------------------------------ */
figure {
    margin: 0;
}

img {
    vertical-align: middle;
}

picture img,
figure img {
	width: 100%;
	height: auto;
}
.img_area {
	line-height: 0;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.img-full {
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
    .img-xs {
		display: block;
        width: 50%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }
    .img-s {
		display: block;
        width: 65%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }
    .img-m {
		display: block;
        width: 80%;
        height: auto;
        margin-right: auto;
        margin-left: auto;
    }
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}
.img-rounded,
[class*='img-rounded-'] {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
[class*='img-rounded-'][class*='-3'] { 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
[class*='img-rounded-'][class*='-6'] { 
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
[class*='img-rounded-'][class*='-10'] { 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
[class*='img-rounded-'][class*='-20'] { 
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.img-circle {
  border-radius: 50%;
}

/* ------------------------------
    column
------------------------------ */
.column {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
@media (max-width: 1023px) {
.column.col-sp2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    flex-direction: unset;
    }
}

@media (min-width: 1024px) {
    .column {
        display: grid;
        gap: 5rem;
        flex-direction: unset;
        grid-auto-rows: auto;
    }
    .col2 {grid-template-columns: repeat(2, 1fr);}
    .col3 {grid-template-columns: repeat(3, 1fr);}
    .col4 {grid-template-columns: repeat(4, 1fr);}
    .col1-2,.col2-1,.col1-3,.col3-1,.col1-2-1,.col2-1-1,.col1-1-2 {
        display: grid; grid-auto-rows: auto;
    }
    .col1-2 {grid-template-columns: 1fr 2fr;}
    .col2-1 {grid-template-columns: 2fr 1fr;}
    .col1-3 {grid-template-columns: 1fr 3fr;}
    .col3-1 {grid-template-columns: 3fr 1fr;}
    .col1-2-1 {grid-template-columns: 1fr 2fr 1fr;}
    .col2-1-1 {grid-template-columns: 2fr 1fr 1fr;}
    .col1-1-2 {grid-template-columns: 1fr 1fr 2fr;}
}

/* ------------------------------
    others
------------------------------ */
.toggle {
	display: none;
}
.option {
	position: relative;
	padding: 1em 1em;
	border-top: solid 1px #222;
}
.title,
.ac_content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.title {
	display: block;
	cursor: pointer;
	margin-bottom: 0.8rem;
}
.title::after,
.title::before {
	content: "";
	position: absolute;
	right: 1.5em;
	top: 0.5em;
	width: 1px;
	height: 1em;
	background-color: #222;
	transition: all 0.3s;
}
.title::after {
	transform: rotate(90deg);
}
.ac_content {
	max-height: 0;
	overflow: hidden;
}
.toggle:checked + .title + .ac_content {
	max-height: 100vh;
	transition: all 1.5s;
}
.toggle:checked + .title::before {
	transform: rotate(90deg) !important;
}


/* ===============================================
  Utility
=============================================== */

/* ------------------------------
	Class
------------------------------ */
.clearfix:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

 .gmap {
    aspect-ratio: 3 / 4;
    width: 100%;
    margin-bottom: 2rem;
    position: relative;
}
.gmap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media screen and (min-width: 768px) {
    .gmap {
        aspect-ratio: 5 / 6;
        margin-bottom: 4rem;
    }
}

@media screen and (min-width: 769px), print  {
	.pc-hide {
		display: none;
	}
} @media screen and (max-width: 768px) {
	.sp-hide {
		display: none;
	}
}


/* ------------------------------
    color
------------------------------ */
.color-primary { color: var(--color-primary)!important; }
.color-secondary { color: var(--color-secondary)!important; }
.color-accent { color: var(--color-accent)!important; }
.color-black { color: var(--color-black)!important; }
.color-white { color: var(--color-white)!important; }
.color-gray-dark { color: var(--color-gray-dark)!important; }
.color-gray-light { color: var(--color-gray-light)!important; }
.color--dept-pink { color: var(--dept-pink)!important; }
.color--dept-orange { color: var(--dept-orange)!important; }
.color--dept-yellow { color: var(--dept-yellow)!important; }
.color--dept-green { color: var(--dept-green)!important; }
.color--dept-bluegreen { color: var(--dept-bluegreen)!important; }
.color--dept-blue { color: var(--dept-blue)!important; }

.bg-primary { background-color: var(--color-primary)!important; }
.bg-secondary { background-color: var(--color-secondary)!important; }
.bg-accent { background-color: var(--color-accent)!important; }
.bg-black { background-color: var(--color-black)!important; }
.bg-white { background-color: var(--color-white)!important; }
.bg-gray-dark { background-color: var(--color-gray-dark)!important; }
.bg-gray-light { background-color: var(--color-gray-light)!important; }
.bg-dept-pink { background-color: var(--dept-pink)!important; }
.bg-dept-orange { background-color: var(--dept-orange)!important; }
.bg-dept-yellow { background-color: var(--dept-yellow)!important; }
.bg-dept-green { background-color: var(--dept-green)!important; }
.bg-dept-bluegreen { background-color: var(--dept-bluegreen)!important; }
.bg-dept-blue { background-color: var(--dept-blue)!important; }