@charset "utf-8";

:root {
    --text-regular-normal-font-family: "Roboto",
        Helvetica;
    --text-regular-normal-font-size: 1rem;
    --text-regular-normal-font-style: normal;
    --text-regular-normal-font-weight: 400;
    --text-regular-normal-letter-spacing: 0px;
    --text-regular-normal-line-height: 150%;
    --white: #fff;
    --font-tomatoes: "Tomatoes",
        Helvetica;
    --font-impact: 'Impact',
        sans-serif;
    --color-cta: #E60012;
    --color-yellow: #ECEC3F;
    --color-deepblue: #005CB5;
    --color-blue: #027dca;
    --color-darkblue: #054582;
    --color-navy: #054582;
    --color-darknavy: #042E55;
    --color-greencyan: #60D56F;
    --color-amber: #FBB222;
    --color-razzmatazz: #EC3F5D;
}

html,
body {
    width: 100%;
}

html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 180px;
    scroll-behavior: smooth;
    font-size: 1rem;
}

a {
    color: #1B1F37;
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

em {
    font-style: normal;
}

.elps {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}

.clamp_2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.clamp_3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    font-size: 0;
    line-height: 0;
    border: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    background-color: #fcfcfc;
    color: #1b1f36;
    line-height: 1.5;
    animation: loading 3s ease 0s 1 normal;
}

@keyframes loading {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height, 84px);
}

body {
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.6;
}

a {
    cursor: pointer;
}

/* ドロワーが開いているときは背後のコンテンツのスクロール禁止 */
body.is-fixed {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* ==========================================
   レスポンシブ表示・非表示の共通設定
========================================== */

/* -------------------------------------------
   1. スマホ用のデフォルト設定（画面幅に関係なくまず適用）
------------------------------------------- */
/* PCでのみ表示（スマホでは隠す） */
.pc-only {
    display: none !important;
}

/* PC非表示（スマホのみ表示） */
.pc-hidden {
    display: flex !important;
}

/* SP非表示（PCのみ表示） */
.sp-hidden {
    display: none !important;
}

/* スマホでのみ表示 */
.sp-only {
    display: block !important;
}


/* -------------------------------------------
   2. PC用の設定（画面幅が 768px 以上になったら上書き）
------------------------------------------- */
@media (min-width: 1100px) {

    /* PCでのみ表示（PCになったので出す） */
    .pc-only {
        display: block !important;
    }

    /* PC非表示（PCになったので隠す） */
    .pc-hidden {
        display: none !important;
    }

    /* SP非表示（PCになったので出す） */
    .sp-hidden {
        display: flex !important;
    }

    /* スマホでのみ表示（PCになったので隠す） */
    .sp-only {
        display: none !important;
    }
}
.main-content {
	padding-bottom: clamp(100px, 7.813vw, 150px);
	padding-top: clamp(120px, 14.583vw, 240px);
}
.main__contents-sec {
    padding-top: clamp(120px, 14.583vw, 260px);
}
.main__contents-inner {
    max-width: 1600px;
    padding-inline: 40px;
    margin: 0 auto;
}
/* 背景画像 */
.page-container {
    background-image: url(../images/common/back-ground.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    min-height: 100vh;
    position: relative;
    background-color: #fff9d9;
}


@media screen and (min-width: 1921px) {

    .page-container-our-story,
    .page-container-work-style {
        background-size: cover;
    }
}

@media screen and (max-width: 1250px) {
    .page-container-vartical {
        background-size: cover;
    }

    .page-container::before {
        content: "";
        display: block;
        width: 210px;
        height: 64px;
        background-image: url(../images/common/bg-y.png);
        position: absolute;
        right: 0;
        top: 0;
        background-repeat: no-repeat;
        background-position: 70px 0px;
        background-size: contain;
    }
}

/* 改行用 */
@media screen and (min-width: 351px) {
    .under-350 {
        display: none;
    }
}

.main-content-inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 40px;
}

/* =======================================
  タイトル
  ======================================= */
/* ページタイトル */
.page-title {
    display: inline-grid;
    row-gap: clamp(15px, 1.09vw, 21vw);
    width: fit-content;
}

.page-title-en {
    display: block;
    color: #4AB578;
    font-size: 55px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.05em;
    font-family: "Noto Serif JP", serif;
    letter-spacing: 4px;
}

.page-title-ja {
    display: flex;
    align-items: center;
    font-size: clamp(22px, 1.45vw, 28px);
    font-weight: 400;
    line-height: 1.964;
    white-space: nowrap;
    color: #352209;
}

.page-title-ja::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #352209;
    margin-left: 17px;
}

.nav__header-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.nav__nav {
    width: 100%;
    max-width: clamp(385px, 31.093vw, 405px);
}

.nav__nav-list {
    flex-wrap: wrap;
    display: flex;
    justify-content: right;
    column-gap: clamp(30px, 3.7vw, 71px);
    row-gap: clamp(10px, 0.833vw, 16px);
    text-align: right;
}

.nav__nav-item {
    width: auto;
}

.nav__nav-link {
	display: block;
	position: relative;
	padding-left: 22.78px;
	color: #352209;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 2.36;
	white-space: nowrap;
	font-size: clamp(17px, 1.04vw, 20px);
}

/* 各リンクの左にある線 */
.nav__nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16.48px;
    height: 1px;
    background-color: #352209;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 1100px) {
    .nav__nav {
        max-width: 330px;
    }
}

@media screen and (max-width: 920px) {
    .nav__nav-list {
        column-gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .nav__nav-list {
        width: 80%;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .nav__nav-item:first-child {
        margin-right: clamp(3px, 1.04vw, 8px);
    }

    .nav__nav-link {
        font-size: 16px;
    }

    .nav__header-inner {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 20px;
        padding: 0 20px;
    }

    .nav__nav {
        width: 100%;
        max-width: 100%;
    }

    .nav__nav-list {
        flex-wrap: nowrap;
        row-gap: 0;
        column-gap: 10px;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 600px) {
.nav__nav-list {
	flex-wrap: wrap;
	width: clamp(280px, 66.3vw, 320px);
	justify-content: space-between;
}
}

@media screen and (max-width: 350px) {
    .nav__nav-list {
        width: 250px;
    }
}

@media screen and (max-width: 768px) {

    .main__contents-inner {
	padding-inline: 20px;
}
    .main-content-inner {
        padding: 0 20px;
    }

    .page-title-en {
        font-size: 33px;
    }

    .page-title-ja {
        font-size: 18px;
    }
}

.day-life__title-jp::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #8A7D6D;
    margin-left: 17px;
}

/* セクションタイトル */
.section-title {
    color: #054582;
    display: flex;
    flex-direction: column;
    row-gap: 11px;
}

.section-title-ja {
    font-size: clamp(28px, 2.29vw, 44px);
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.section-title-en {
    font-size: clamp(20px, 1.46vw, 28px);
    font-weight: 500;
    letter-spacing: 0;
}

/* =======================================
  ヘッダー
  ======================================= */
.header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 100;
}

.header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
}

.header__inner {
    display: flex;
    align-items: center;
    position: relative;
}

/* ロゴ：並びから外すためにabsoluteを使用 */
.header__logo {
    position: absolute;
    left: 45px;
    width: calc(239 / 1920 * 100%);
    min-width: 150px;
    z-index: 11;
}

.header__logo.is-scrolled {
    top: 1.7vw;
}

.header__logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.header__nav {
    margin-left: auto;
}

.header__nav-list {
    display: flex;
    gap: clamp(20px, 2.292vw, 44px);
}

.header__nav-link {
    font-size: clamp(16px, 0.937vw, 18px);
    font-weight: 400;
    line-height: 2.5;
}

/* CTA：absoluteを解除し、flexの並びに入れる */
.header__cta {
    width: calc(349 / 1920 * 100%);
    min-width: 200px;
    margin-left: 10px;
}

.header__cta-img {
    width: 100%;
    height: auto;
    display: block;
}

/* PCではドロワー関連を初期状態で隠す */
.header__drawer,
.header__overlay,
.header__hamburger {
    display: none;
}

/* ==========================================================
固定フッターナビ
========================================================== */


.fixed-footer-nav {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	transform: translateY(100%);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s ease;
	z-index: 1000;
    background: linear-gradient(90deg, #e7f4e6 0%, #eef8e7 50%, #e7f4e6 100%);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, .08);
    padding: 18px 30px;

}

.fixed-footer-nav.is-show {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}
.fixed-nav-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.fixed-nav-heading {
    flex: 0 0 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .25);
    height: 82px;
}

.fixed-nav-heading p {
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: #352209;
}

.fixed-nav-buttons {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.fixed-btn {
    flex: 1;
    height: 70px;
    border-radius: 999px;
    background: #ef6b73;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
    transition: .25s;
}

.fixed-btn:hover {
    background: #ea5f67;
    transform: translateY(-2px);
}

.arrow-right-white {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
}

/* ==========================================================
Tablet
========================================================== */

@media screen and (max-width:1024px) {

.fixed-footer-nav {
	padding: 20px 10px;
}

.fixed-nav-container {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

    .fixed-nav-heading {
        flex: none;
        width: 100%;
        height: 70px;
    }

    .fixed-nav-heading p {
        font-size: 22px;
    }

    .fixed-nav-buttons {
        width: 100%;
        gap: 15px;
    }

    .fixed-btn {
        font-size: 16px;
        height: 70px;
    }
}

/* ==========================================================
SP
========================================================== */

@media screen and (max-width:767px) {

 .fixed-footer-nav {
	padding: 10px 5px;
}

    .fixed-nav-container {
        gap: 15px;
    }

    .fixed-nav-heading {
        height: auto;
    }

    .fixed-nav-heading p {
        font-size: 18px;
        text-align: center;
    }

    .fixed-nav-buttons {
        display: flex;
        gap: 6px;
    }

    .fixed-btn {
        width: 100%;
        height: auto;
        font-size: 16px;
        border-radius: 999px;
        justify-content: center;
        padding: 0 20px 0 20px;
        padding: 10px 0;
        font-size: 13px;
    }

    .fixed-footer-nav .arrow-right-white {
        display: none;
    }

}

@media screen and (max-width: 1250px) {
    .header {
        overflow-x: hidden;
    }

    .header.is-open {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }

    .header__overlay {
        z-index: 90;
    }

    .header__drawer {
        z-index: 100;
    }

    .header__hamburger {
        z-index: 110;
    }

    .header__inner {
        height: 64px;
    }

    .header__logo {
        top: 50%;
        transform: translateY(-50%);
        left: 30px;
    }

    .header__logo.is-scrolled {
        top: 50%;
    }

    /* PC用ナビとCTAを非表示 */
    .header__nav,
    .header__cta {
        display: none;
    }

    /* ハンバーガーメニューを表示 */
    .header__hamburger {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 30px;
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 110;
    }

    /* 3本線の共通スタイル */
    .header__hamburger-line,
    .header__hamburger::before,
    .header__hamburger::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #054582;
    }

    .header.is-open .header__hamburger-line,
    .header.is-open .header__hamburger::before,
    .header.is-open .header__hamburger::after {
        background-color: #352209;
    }

    /* 3本線の位置調整 */
    .header__hamburger::before {
        top: 0;
    }

    .header.is-scrolled .header__hamburger-line,
    .header.is-scrolled .header__hamburger::before,
    .header.is-scrolled .header__hamburger::after {
        background: #352209;
        ;
    }

    .header__hamburger-line {
        top: 11px;
        width: 70%;
        right: 0;
        left: initial;
    }

    .header__hamburger::after {
        bottom: -2px;
    }

    /* --- ×印に変えるアニメーション（.is-openがついた時） --- */
    /* 真ん中の線を透明にする */
    .header.is-open .header__hamburger-line {
        opacity: 0;
    }

    /* 上の線を45度傾けて中央へ */
    .header.is-open .header__hamburger::before {
        transform: translateY(11px) rotate(45deg);
    }

    /* 下の線をマイナス45度傾けて中央へ */
    .header.is-open .header__hamburger::after {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* ドロワーメニュー本体 */
    .header__drawer {
        display: block;
        position: fixed;
        top: 0;
        right: -100%;
        /* 最初は画面の右側に隠す */
        width: min(600px, 100%);
        height: 100vh;
        background-color: #fcfcfc;
        z-index: 100;
        padding: 100px 80px;
        overflow-y: auto;
    }

    /* クラスがついた時に画面内に戻す */
    .header.is-open .header__drawer {
        right: 0;
    }

    /* ドロワー内のナビ */
    .header__drawer-list {
        list-style: none;
        margin-bottom: 70px;
    }

    .header__drawer-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    }

    .header__drawer-link {
        display: block;
        padding: 25px 0;
        text-decoration: none;
        font-weight: 700;
        font-size: clamp(16px, 1.67vw, 20px);
    }

.header__drawer-cta {
	background: #ef6b73;
	text-align: center;
	width: 70%;
	margin-inline: auto;
}
.header__drawer-cta-link {
	font-size: clamp(18px, 1.84vw, 23px);
	color: #fff;
	font-weight: bold;
	display: block;
	padding: 20px 40px;
}

    /* 背景を暗くするレイヤー */
    .header__overlay {
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 90;
        opacity: 0;
        visibility: hidden;
    }

    .header.is-open .header__overlay {
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (max-width: 600px) {
    .header__drawer-cta {
        width: 308px;
    }
}

@media screen and (max-width: 467px) {
    .header__drawer {
        padding: 80px 50px 200px;
    }

    .header__drawer-cta {
        width: 100%;
    }
}

/* =======================================
  ENTRYセクション
  ======================================= */
.entry {
    background-color: #eff9de;
    margin: 0 auto;
    padding-top: clamp(20px, 3.65vw, 70px);
    padding-bottom: clamp(60px, 6.15vw, 118px);
}

.entry__inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(20px, 5.2vw, 100px);

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5.2vw, 100px);
    display: flex;
    align-items: flex-end;
    gap: clamp(30px, 2.08vw, 80px);
}

.entry__content {
    min-width: 0;
}

.entry__title-group {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-family: "Noto Serif JP", serif;
}

.entry__title-en {
    font-size: clamp(60px, 5.21vw, 100px);
    font-weight: 350;
    line-height: 1.45;
    color: #352209;
}

.entry__title-ja {
    font-size: clamp(16px, 1.25vw, 20px);
    font-weight: 500;
    color: #352209;
    position: relative;
    padding-left: 25px;
    white-space: nowrap;
}

.entry__title-ja::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: #352209;
    border-radius: 50%;
}

.entry__lead {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 2.12;
}

.entry__call {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 2.4;
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #AECEB2;
}

.entry__call a {
    font-family: "Outfit", sans-serif;
    font-size: 2.625rem;
    /* 42px */
    font-weight: 300;
    /* Light */
    line-height: 0.86;
    /* 36px ÷ 42px */
}

.entry__nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 280px;
    width: calc(391 / 1400 * 100%);
}

.entry__link {
    display: flex;
    align-items: center;
    background-color: #FF7577;
    color: #fff;
    width: 100%;
    flex-shrink: 1;
    letter-spacing: 0.05em;
    border-radius: 4rem;
}

/* アイコン（path）の初期色制御 */
.entry__link-icon path {
    fill: #fff;
}

.entry__link-text {
    color: inherit;
    flex: 1;
    white-space: nowrap;
    min-width: 0;
    padding-top: clamp(20px, 1.41vw, 30px);
    padding-right: clamp(10px, 0.521vw, 10px);
    padding-bottom: clamp(20px, 1.41vw, 29px);
    padding-left: clamp(30px, 2.135vw, 41px);
    font-family: "Noto Serif JP", serif;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 2.65;
    text-align: center;
}

.entry__link-arrow {
    width: clamp(60px, 5.36vw, 94px);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

/* 縦の区切り線 
.entry__link-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 78.1%;
  width: 1px;
  background-color: #707070;
}*/

.entry__link-icon {
    width: clamp(16px, 1.09vw, 21px);
    height: auto;
}

/* レスポンシブ */
@media screen and (max-width: 1000px) {
    .entry__title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media screen and (max-width: 850px) {
    .entry {
        padding-bottom: 30px;
    }

    .entry__inner {
        padding-left: 28px;
        padding-right: 28px;
    }
}

@media screen and (max-width: 768px) {
    .entry {
        padding-bottom: 30px;
    }

    .entry__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 50px;
    }

    .entry__content {
        width: 100%;
    }

    .entry__title-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .entry__lead {
        width: 100%;
    }

    .entry__nav {
        max-width: 500px;
        width: 100%;
        flex: none;
        margin: 0 auto;
    }

    .entry__link {
        width: 100%;
    }

    .entry__link-text {
        white-space: normal;
        padding-right: 20px;
        padding-left: 20px;
        font-size: 16px;
    }

    .entry__link-arrow {
        width: clamp(60px, 8vw, 80px);
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
    }

    .entry__call {
        flex-direction: column;
    }
}

@media screen and (max-width: 450px) {
    .entry__inner {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 370px) {
    .entry__nav {
        min-width: 240px;
    }

    .entry__link-text {
        padding-top: 18px;
        padding-bottom: 18px;
        font-size: 17px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .entry__link-arrow {
        width: 50px;
    }

    .entry__link-icon {
        width: 16px;
    }
}

/* =======================================
  フッター
  ======================================= */
.footer {
    background-color: #fff;
    padding-top: 145px;
    padding-bottom: 61px;
    color: #042e55;
    margin-bottom: 41px;
    border-bottom: 1px solid #707070;
}

.footer__inner {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ナビゲーションエリア */
.footer__nav {
    display: flex;
    justify-content: space-between;
    max-width: 940px;
    margin-inline: auto;
}

.footer__subpages {
    display: flex;
    gap: 110px;
}

.footer__column-wrap {
    display: flex;
    gap: 110px;
}

.footer__nav-title {
	font-weight: 400;
	font-size: clamp(16px, 1.04vw, 20px);
	line-height: 2.75;
	color: #042e55;
}
.footer__nav-list--bold {
    font-weight: 700;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 2;
    color: #042e55;
    margin-top: 5px;
}

.footer__nav-list--bold li {
    margin-bottom: 9px;
}

.footer__nav-list--bold a {
    color: #042e55;
}

.footer__nav-list li {
    margin-bottom: 24px;
}

.footer__nav-list li a {
	text-decoration: none;
	color: inherit;
	font-weight: 400;
	position: relative;
	font-size: clamp(15px, 0.94vw, 18px);
	padding-left: 22.78px;
}
/* 会社について/インタビュー列の「ー」記号 */
.footer__nav-list a::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    width: 16.5px;
    height: 1px;
    left: 0;
    background: #054582;
}

/* 下段エリア */
.footer__bottom {
    border-top: 1px solid #707070;
    margin-top: clamp(45px, 2.604vw, 50px);
    padding-top: clamp(40px, 3.49vw, 67px);
    display: flex;
}

.footer__content {
    display: flex;
}

.footer__info {
    display: flex;
    gap: 33px;
    align-items: center;
}

.footer__address {
    font-size: 18px;
    line-height: 1.778;
}

.footer__logo {
    width: 240px;
    height: auto;
    margin-right: 44px;
}

.footer__logo-link {
    width: 100%;
    display: block;
}

.footer__logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.footer__sns {
    display: flex;
    gap: clamp(15px, 1.04vw, 20px);
}

.footer__sns-link img {
    width: clamp(45px, 3.02vw, 58px);
    height: auto;
}

.footer__copyright {
    font-size: clamp(16px, 0.94vw, 18px);
    line-height: 3.06;
    margin-left: auto;
}

/* レスポンシブ */
@media screen and (max-width: 1350px) {
    .footer {
        padding-top: 80px;
        padding-bottom: 20px;
    }

    .footer__bottom {
        flex-direction: column;
        row-gap: 30px;
        padding-inline: 50px;
    }
}

@media screen and (max-width: 1050px) {
    .footer__content {
        flex-direction: column;
        row-gap: 30px;
    }
}

@media screen and (max-width: 950px) {

    .footer__nav,
    .footer__column-wrap,
    .footer__subpages {
        gap: clamp(80px, 11.58vw, 110px);
    }
}

@media screen and (max-width: 900px) {
    .footer__nav {
        flex-direction: column;
        row-gap: 20px;
        max-width: 660px;
        align-self: start;
    }

    .footer__nav-title {
        margin-right: auto;
    }

    .footer__nav-column-title {
        margin-right: auto;
    }
}

@media screen and (max-width: 768px) {
    .footer {
        padding-top: 40px;
    }

    .footer__inner {
        padding: 0 20px;
        max-width: 600px;
    }

    .footer__nav-list li {
        margin-bottom: 10px;
    }

    .footer__subpages {
        flex-direction: column;
        row-gap: 30px;
    }

    .footer__column-wrap {
        column-gap: clamp(70px, 22.14vw, 170px);
    }

    .footer__bottom {
        padding-inline: 0;
    }

    .footer__info {
        flex-direction: column;
        gap: 33px;
    }

    .footer__address {
        font-size: 16px;
    }

    .footer__copyright {
        font-size: clamp(14px, 0.83vw, 16px);
        margin-inline: auto;
    }

    .footer__column-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .footer__nav {
        max-width: 300px;
    }
}


/* =======================================
  WORK STYLEページ共通パーツ
  ======================================= */
.system-unit {
    padding: clamp(100px, 7.4vw, 142px) 0 clamp(80px, 9.32vw, 179px);
}

.system-unit__inner {
    padding: 0 40px;
    max-width: 1680px;
    margin: 0 auto;
}

.system-unit__title {
    margin-bottom: 86px;
}

.system-unit__list {
    display: flex;
    flex-wrap: wrap;
    gap: 60px clamp(50px, 5vw, 96px);
    list-style: none;
    width: 100%;
}

.system-unit__item {
    width: calc((100% - (clamp(50px, 5vw, 96px) * 2)) / 3);
}

.system-unit__item-num-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.system-unit__item-num {
    font-size: 40px;
    font-weight: 900;
    color: #fff;
}

.system-unit__item-num-wrap::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #fff;
    margin-left: 24px;
}

.system-unit__item-title {
    margin-top: 35px;
    color: #fff;
    line-height: 1.67;
    font-size: clamp(25px, 1.67vw, 32px);
}

.system-unit__item-text {
    margin-top: 30px;
    color: #fff;
    line-height: 1.875;
    font-size: clamp(18px, 1.25vw, 24px);
}

.system-unit--white {
    background-color: #fff;
    color: #000;
}

.system-unit--white .section-title-ja,
.system-unit--white .section-title-en {
    color: #054582;
}

.system-unit--white .system-unit__item-num {
    color: #000;
}

.system-unit--white .system-unit__item-title {
    color: #000;
}

.system-unit--white .system-unit__item-text {
    color: #000;
}

.system-unit--white .system-unit__item-num-wrap::after {
    background-color: #d1d1d1;
}

/* レスポンシブ */
@media screen and (max-width: 1100px) {
    .system-unit {
        padding: 90px 0 80px;
    }

    .system-unit__inner {
        max-width: 900px;
    }

    .system-unit__title {
        margin-bottom: 50px;
    }

    .system-unit__item-num-wrap {
        margin-bottom: 0;
    }

    .system-unit__item-title {
        margin-top: 10px;
    }

    .system-unit__item-text {
        margin-top: 25px;
    }
}

@media screen and (max-width: 768px) {
    .system-unit__inner {
        padding: 0 20px;
        max-width: 520px;
    }

    .system-unit {
        padding-top: 70px;
        padding-bottom: 60px;
    }

    .system-unit__title {
        margin-bottom: 50px;
    }

    .system-unit__item-title {
        margin-top: 0;
    }

    .system-unit__item-text {
        font-size: 16px;
    }
}

/* DAY IN THE LIFE、PROJECT STORYページ共通ボタン */
.lower-nav {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 2.71vw, 52px);
    margin: 43px auto 0;
}

.lower-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ff7676;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	max-width: 394px;
	border-radius: 67px;
	position: relative;
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 4px 10px rgba(255, 118, 118, 0.2);
	width: 100%;
}

/* ボタンの中にあるpath（三角形）の色指定 */
.day-life__btn-icon path {
    fill: #054582;
}

/* テキストエリア */
.lower-nav__text {
    color: inherit;
    flex: 1;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 2.65;
    min-width: 0;
    white-space: nowrap;
    padding-top: clamp(20px, 1.41vw, 27px);
    padding-bottom: clamp(15px, 1.46vw, 28px);
}

.lower-nav__arrow {
    position: absolute;
    right: 30px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 11px;
    border-color: transparent transparent transparent #ffffff;
}

/*
.lower-nav__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 78.1%;
  width: 1px;
  background-color: #707070;
}
*/
.lower-nav__icon {
	width: clamp(18px, 1.09vw, 21px);
	height: auto;
	color: #352209;
	display: none;
}
/* レスポンシブ */
@media screen and (max-width: 1020px) {
    .lower-nav__btn-text {
        padding-right: 40px;
    }
}

@media screen and (max-width: 1000px) {
    .lower-nav__btn-arrow {
        width: clamp(50px, 10.42vw, 80px);
    }
}

@media screen and (max-width: 960px) {
    .lower-nav__nav {
        width: 90%;
    }
}

@media screen and (max-width: 860px) {
    .lower-nav__nav {
        width: 95%;
    }
}

@media screen and (max-width: 830px) {
    .lower-nav__text {
        padding-right: 30px;
        padding-left: 15px;
    }

    .lower-nav__icon {
        width: 16px;
    }

    .lower-nav__arrow {
        width: 55px;
    }
}

@media screen and (max-width: 768px) {
    .lower-nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
        max-width: 500px;
    }

    .lower-nav__btn {
        width: 100%;
        max-width: 100%;
    }

    .lower-nav__btn.link__button.pc-hidden {
        width: calc(100% - 40px);
        margin-inline: auto;
    }

    .lower-nav__text {
        padding-top: clamp(15px, 0.78vw, 15px);
        padding-right: clamp(20px, 4.56vw, 35px);
        padding-bottom: clamp(15px, 1.46vw, 15px);
        padding-left: clamp(5px, 2.6vw, 20px);
        font-size: 16px;
    }

    .lower-nav__icon {
        width: 16px;
    }
}