@charset "UTF-8";

/*------------------------------------
 フォント読み込み（Google Fonts）
------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kiwi+Maru:wght@300;400;500&family=Lexend:wght@100..900&family=Zen+Antique&display=swap');

/*
font-family: "Kiwi Maru", serif;    本文
font-family: "Caveat", cursive;     筆記体
font-family: "Lexend", sans-serif;  英字
font-family: "Zen Antique", serif;  数字
*/

/*------------------------------------
 カラールール（プロジェクト共通カラー）
------------------------------------*/
:root {
    --color-main: #2E745D;
    /* メインカラー（緑） */
    --color-beige: #FAF7F1;
    /* 色（ベージュ） */
    --color-mint: #E2F0E6;
    /* 色（ミント） */
    --color-green: #77A69D;
    /* 色（薄緑） */
    --color-ivory: #EBE7D1;
    /* 色（アイボリー） */
    --color-divory: #E6D2C0;
    /* 色（アイボリー） */
    --color-dark: #5F7761;
    /* 色（濃緑） */
    --color-l_lgreen: #5DA67F;
    /* 色（明緑） */
    --color-bk: #000;
    /* 色（黒） */
    --color-en: #DCD3BE;
    /* 文字色（英字筆記） */
    --color-red: #852525;
    /* 強調色（赤） */
    --color-blue: #004C79;
    /* 強調色（青） */
    --color-white: #FFF;
    /* 文字色（白） */
    --color-silver: #F0F0EC;
    /* 背景・文字色（シルバーホワイト） */

}

/*------------------------------------
 ベース設定（リセット＋共通設定）
------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;

}

body {
    overflow-x: hidden;
    font-family: "Kiwi Maru", serif;
    line-height: 1.6;
    color: var(--color-main);
    min-height: 100vh;
}

/*------------------------------------
 タイポグラフィ（hタグやpなど）
------------------------------------*/
h1 {
    font-weight: 500;
    font-size: clamp(2rem, 0.5rem + 4vw, 3rem);
    letter-spacing: clamp(-0.05rem, -0.8rem + 1.2vw, 0.1rem);
    line-height: clamp(2.5rem, 0rem + 6vw, 4.5rem);
    margin-bottom: clamp(2rem, -5rem + 15vw, 4rem);
}

h2 {
    font-weight: 500;
    font-size: clamp(1.125rem, 0.455rem + 1.79vw, 1.563rem);
    margin-bottom: 1.875rem;
    letter-spacing: clamp(-0.05rem, -0.765rem + 1.15vw, 0.1rem);
    line-height: clamp(2.5rem, -0.167rem + 5.56vw, 4rem);
}

h3 {
    font-weight: 500;
    font-size: clamp(1.125rem, 0.742rem + 1.02vw, 1.375rem);
    letter-spacing: clamp(0rem, -0.178rem + 0.37vw, 0.1rem);
    line-height: clamp(2rem, 1.5rem + 1.33vw, 2.5rem);
    margin-bottom: clamp(1rem, -0.192rem + 1.92vw, 1.25rem);
}

h4, h5, h6 {
    font-size: clamp(1.125rem, 0.934rem + 0.51vw, 1.25rem);
    font-weight: 500;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 0.75rem;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

ul, ol {
    list-style: none;
}

/*------------------------------------
 画像
------------------------------------*/
img {
    max-width: 100%;
    height: auto;
    width: 100%;
    display: block;
}

/*------------------------------------
 コンテナ（レスポンシブ対応）
------------------------------------*/
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

@media (max-width: 767px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}



.container_m {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container_s {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 1400px) {
    .container_s {
        max-width: 800px;

    }

}

.txt {
    padding-left: clamp(1rem, -8rem + 24vw, 10rem);
    padding-right: clamp(1rem, -8rem + 24vw, 10rem);
    text-align: left;
}

/*------------------------------------
 グリッド・フレックスユーティリティ
------------------------------------*/
.flex {
    display: flex;
}

.flex_wrap {
    flex-wrap: wrap;
}

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

.flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.grid {
    display: grid;
    gap: 1rem;
}

/* PC基準で記述 */
.grid_2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.grid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.grid_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.grid_4_2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


/* タブレット以下 */
@media (max-width: 992px) {
    .grid_4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ */
@media (max-width: 600px) {

    .grid_2,
    .grid_3,
    .grid_4,
    .grid_4_2 {
        grid-template-columns: 1fr;
    }

    .grid_2.reverse,
    .grid_3.reverse,
    .grid_4.reverse,
    .grid_4_2.reverse {
        display: flex !important;
        flex-direction: column-reverse !important;
        grid-template-columns: unset;
    }
}



/*------------------------------------
 カードコンポーネント
------------------------------------*/
.card_grid_3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

@media (min-width: 993px) {
    .card_grid_3 {
        grid-template-columns: repeat(3, 1fr);
    }

}


.card {
    position: relative;
    border-radius: 5px;
    background-color: var(--color-mint);
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card:hover {
    transform: rotate(-2deg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card_img {
    width: 100%;
    height: 230px;
    padding: 0.8rem 0.8rem 0;
    object-fit: cover;
}

.card_body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-l_lgreen);
}

.card_body h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0;
}

span.card-date {
    font-size: 0.9rem;
    display: block;
    text-align: end;
    padding-bottom: 1rem;
}

.card-btn {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0.6rem 2rem 0.6rem 1rem;
    border: 1px solid var(--color-l_lgreen);
    color: var(--color-l_lgreen);
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-btn::after {
    position: absolute;
    right: 2rem;
    transform: translateY(-50%);
    transform-origin: left;
    width: 5rem;
    height: 0.5rem;
    background-color: var(--color-l_lgreen);
    clip-path: polygon(0 100%, 100% 100%, 90% 40%, 90% 90%, 0% 90%);
    content: "";
}


/*------------------------------------
 実績カードコンポーネント
------------------------------------*/
.card_wk {
    position: relative;
    border-radius: 5px;
    background-color: var(--color-beige);
    overflow: visible;
    border: 1px solid var(--color-l_lgreen);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.card_wk:hover {
    transform: rotate(-2deg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card_wk_img {
    width: 100%;
    height: 230px;
    padding: 0.8rem 0.8rem 0;
    object-fit: cover;

}

.card_wk_body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-l_lgreen);
}

.card_wk_body h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 0;
}

.card_wk-btn {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0.6rem 2rem 0.6rem 1rem;
    border: 1px solid var(--color-l_lgreen);
    color: var(--color-l_lgreen);
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card_wk-btn::after {
    position: absolute;
    right: 2rem;
    transform: translateY(-50%);
    transform-origin: left;
    width: 5rem;
    height: 0.5rem;
    background-color: var(--color-l_lgreen);
    clip-path: polygon(0 100%, 100% 100%, 90% 40%, 90% 90%, 0% 90%);
    content: "";
}


.cat_tab {
    display: inline-block;
    position: absolute;
    top: 20px;
    left: -20px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: #FFF;
    background: var(--color-main);
    z-index: 1;
    pointer-events: none;

}

.cat_tab:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
}

/*上部カテゴリーバッジ*/
.cat_badge_area {
    padding-bottom: 2rem;
}

span.cat_badge {
    padding: .5rem 1rem;
    font-size: 0.9rem;
    margin: 0 10px 0 0;
    background-color: var(--color-main);
    border-radius: 5px;
}

.cat_badge a {
    color: #fff;
}

.cat_badge a:hover {
    color: #fff;
    text-decoration: none;
}



/*------------------------------------
 ボタン
------------------------------------*/
/*矢印付きボタン*/
.arrow-btn {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 80px auto 0 auto;
    padding: 1rem 2rem 1rem 1rem;
    border: 1px solid var(--color-dark);
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arrow-btn::after {
    position: absolute;
    right: 2rem;
    transform: translateY(-50%);
    transform-origin: left;
    width: 5rem;
    height: 0.5rem;
    background-color: var(--color-dark);
    clip-path: polygon(0 100%, 100% 100%, 90% 40%, 90% 90%, 0% 90%);
    content: "";

}

.arrow-btn:hover {
    text-decoration: none;
    background: var(--color-dark);
    color: var(--color-white);
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

}

.arrow-btn:hover::after {
    text-decoration: none;
    transform: translateY(-50%) scaleX(1.2);
    background-color: var(--color-white);
}

@media screen and (max-width: 600px) {
    .arrow-btn {
        width: 100%;
        margin: 40px auto 0 auto;
    }

    .arrow-btn::after {
        right: 1em;
        width: 1.5em;
    }

    .arrow-btn:hover::after {
        transform: translateY(-50%) scaleX(1.2);
    }
}

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn_outline {
    background: transparent;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
}

.btn_outline:hover {
    background: var(--color-dark);
    color: var(--color-white);
    opacity: 1;
}

.btn_gap {
    gap: 1rem;
}

.mail_icn {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mail_icn:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

.mail_icn:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    background: url(../images/mail.svg) no-repeat center;
    background-size: contain;
    vertical-align: middle;
}

.mail_icn:hover:before {
    background: url(../images/mail_wh.svg) no-repeat center;
    background-size: contain;
}

@media screen and (max-width: 600px) {
    .mail_icn {
        display: block;
    }
}

/*------------------------------------
 ナビゲーション
------------------------------------*/
.nav {
    position: relative;
    top: 0;
    z-index: 1000;
    background: var(--color-beige);
    /*position: sticky;←固定用*/
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);←固定用*/
}

.nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    height: 120px;
    padding: 0 3rem;
}

.nav_container h1 {
    margin: 0;
    margin-bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    flex-shrink: 1;
}

.nav_logo {
    width: clamp(180px, 18vw, 284px);
    max-width: 284px;
    min-width: 180px;
    height: auto;
    display: block;
}

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

.nav_menu {
    display: flex;
    gap: clamp(0.5rem, 1.5vw, 2rem);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
    margin-top: 0.5rem;
}

.nav_link {
    font-weight: 500;
    padding: 0.5rem 0;
    position: relative;
    text-decoration: none;
    color: var(--color-main);
    white-space: nowrap;
    font-size: clamp(0.85rem, 1.25vw, 1rem);
    display: inline-flex;
    align-items: center;
}

.nav_link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-l_lgreen);
    transition: width 0.3s ease;
}

.nav_link:hover::after {
    width: 100%;
}

/* 画像を含むリンクはhoverライン非表示 */
.nav_link:has(img)::after {
    display: none;
}

.nav_link img {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* ハンバーガーメニュー  */
.nav_toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.nav_toggle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* 閉じるアイコン用 */
.nav_toggle .menu_icon {
    display: block;
}

.nav_toggle .close_icon {
    display: none;
}

.nav_toggle.active .menu_icon {
    display: none;
}

.nav_toggle.active .close_icon {
    display: block;
}

/* 992px以下でハンバーガーメニューに切り替え */
@media (max-width: 992px) {
    .nav_container {
        padding: 0 2rem;
        height: 100px;
    }

    .nav_logo {
        width: 180px;
        min-width: 180px;
    }

    .nav_toggle {
        display: block;
    }

    .nav_menu {
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 100px);
        background: var(--color-beige);
        flex-direction: column;
        justify-content: flex-start;
        padding: 2rem;
        gap: 1.5rem;
        transition: left 0.3s ease;
    }

    .nav_menu.active {
        left: 0;
    }

    .nav_link {
        font-size: 1rem;
    }
}

@media (max-width: 600px) {
    .nav_container {
        height: 80px;
    }

    .nav_container h1 {
        height: 100%;
    }

    .nav_logo {
        width: 160px;
        min-width: 160px;
    }

    .nav_menu {
        top: 60px;
        height: calc(100vh - 60px);
    }
}


/*------------------------------------
 レスポンシブ表示切り替え
 min-width: 993px以上に適用
 max-width: 992px以下に適用
------------------------------------*/
@media (min-width: 993px) {
    .sp {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .pc {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 992px) {
    .sp, .pc {
        display: none !important;
    }

    .tablet {
        display: block !important;
    }
}


/*------------------------------------
 スペーシングユーティリティ
------------------------------------*/
/* マージン */
.mt_1 {
    margin-top: 1rem;
}

.mt_2 {
    margin-top: 2rem;
}

.mt_3 {
    margin-top: 3rem;
}

.mt_4 {
    margin-top: 4rem;
}

.mt_5 {
    margin-top: 5rem;
}


.mb_1 {
    margin-bottom: 1rem;
}

.mb_2 {
    margin-bottom: 2rem;
}

.mb_3 {
    margin-bottom: 3rem;
}

.mb_4 {
    margin-bottom: 4rem;
}

.mb_5 {
    margin-bottom: 5rem;
}

.mb_120 {
    margin-bottom: clamp(5rem, 2.5rem + 6.67vw, 7.5rem);
}

.mb_180 {
    margin-bottom: clamp(5rem, -24.808rem + 48.08vw, 11.25rem);
}

.mb_200 {
    margin-bottom: clamp(5rem, -30.769rem + 57.69vw, 12.5rem);
}

/* パディング */
.pt_0 {
    padding-top: 0;
}

.pt_1 {
    padding-top: 1rem;
}

.pt_2 {
    padding-top: 2rem;
}

.pt_3 {
    padding-top: 3rem;
}

.pt_4 {
    padding-top: 4rem;
}

.pt_5 {
    padding-top: 5rem;
}

.pb_0 {
    padding-bottom: 0;
}

.pb_1 {
    padding-bottom: 1rem;
}

.pb_2 {
    padding-bottom: 2rem;
}

.pb_3 {
    padding-bottom: 3rem;
}

.pb_4 {
    padding-bottom: 4rem;
}

.pb_5 {
    padding-bottom: 5rem;
}

.p_1 {
    padding: 1rem;
}

.p_2 {
    padding: 2rem;
}

.p_3 {
    padding: 3rem;
}

.p_4 {
    padding: 4rem;
}

.p_5 {
    padding: 5rem;
}

.p_6 {
    padding: 10rem;
}

.pt_120 {
    padding-top: clamp(5rem, 2.5rem + 6.67vw, 7.5rem);
}

.p_section {
    padding: clamp(5rem, 2.5rem + 6.67vw, 7.5rem) 0;
}

.gap_3 {
    gap: 3rem;
}

/*------------------------------------
 テキストユーティリティ
------------------------------------*/
.text_center {
    text-align: center;
}

.text_left {
    text-align: left;
}

.text_right {
    text-align: right;
}

@media (max-width: 600px) {
    .sp_left {
        text-align: left;
    }

    .sp_center {
        text-align: center;
    }

    .sp_right {
        text-align: right;
    }
}



/*------------------------------------
 サイズユーティリティ
------------------------------------*/
.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-70 {
    width: 70%;
}

@media (max-width: 600px) {
    .w-30 {
        width: 100%;
    }

    .w-40 {
        width: 100%;
    }

    .w-50 {
        width: 100%;
    }

    .w-70 {
        width: 100%;
    }
}

/*------------------------------------
 背景色ユーティリティ
------------------------------------*/
.bg_main {
    background-color: var(--color-main);
}

.bg_beige {
    background-color: var(--color-beige);
}

.bg_mint {
    background-color: var(--color-mint);
}

.bg_ivory {
    background-color: var(--color-ivory);
}

.bg_silver {
    background-color: var(--color-silver);
}

.bg_white {
    background-color: var(--color-white);
}

.bg_dark {
    background-color: var(--color-dark);
}

/*------------------------------------
 セクション
------------------------------------*/
section {
    padding: clamp(5rem, 1.19rem + 10.18vw, 7.5rem) 0;
}

/* トップページ セクション*/
.sc_top {
    position: relative;
    height: auto;
    padding-top: 180px;
    padding-right: 40px;
    padding-bottom: 60px;
    margin-bottom: 6.25rem;
    background-attachment: fixed;
}

@media (max-width: 1024px) {
    .sc_top {
        padding-right: 0;
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;

    }
}


.sc_top#about {
    background-image: url("../images/t_about_sc_hd.webp");
    background-size: cover;
    background-position: top center;
}

.sc_top#works {
    background-image: url("../images/t_works_sc_hd.webp");
    background-size: cover;
    background-position: top center;
    margin-bottom: 11.25rem;
}

.sc_top#blog {
    background-image: url("../images/t_blog_sc_hd.webp");
    background-size: cover;
    background-position: top center;
    margin-bottom: 11.25rem;
}

.section_ft {
    margin-top: clamp(5rem, 1.19rem + 10.18vw, 7.5rem);
}

@media (max-width: 600px) {
    .section_ft img {
        height: 380px;
        object-fit: cover;
    }

    .section_ft.left25 img {
        object-position: calc(0% + 25%) top;
    }

    .sc_top#works {
        margin-bottom: 6.25rem;
    }

    .sc_top#blog {
        margin-bottom: 6.25rem;
    }
}

/*------------------------------------
 HEROセクション
------------------------------------*/
.hero {
    position: relative;
    background-image: url("../images/top_hero.webp");
    background-size: cover;
    background-position: center;
    aspect-ratio: 1280 / 510;
    display: flex;
    align-items: center;
}

.hero-text {
    color: #fff;
    position: absolute;
    writing-mode: vertical-rl;
    padding-top: 2rem;
    right: 15rem;
}

.hero h2 {
    font-weight: 400;
    text-align: start;
    font-size: clamp(2.313rem, 1.688rem + 0.78vw, 2.625rem);
    margin: 0 0 0 2.6rem;
    letter-spacing: 0.5rem;
}

.hero p {
    font-weight: 300;
    text-align: start;
    font-size: clamp(1.375rem, 1rem + 0.47vw, 1.563rem);
    line-height: 2;
    letter-spacing: 0.3rem;
}

@media (max-width: 1024px) {
    .hero {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    .hero {
        aspect-ratio: 2 / 3;
    }

    .hero-text {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: 90%;
        padding-top: 1rem;
    }
}

.en {
    font-family: "Lexend", sans-serif;
    font-size: clamp(1.125rem, 0.647rem + 1.28vw, 1.438rem);
}

/*pageHEROセクション*/
section#pagetitle {
    padding: 0 3rem 2rem;
    background-color: var(--color-beige);
}

#pagetitle h2 {
    line-height: 1.2;
    font-size: clamp(1.25rem, 0.937rem + 0.83vw, 1.563rem);
    margin-bottom: 0;
}

#pagetitle span {
    margin-bottom: 0;
    font-size: 1rem;
}

section.pagehero {
    position: relative;
    background-size: cover;
    aspect-ratio: 1280 / 410;
    display: flex;
    align-items: center;
    padding: 0;
}

.pagehero-text {
    color: #fff;
    position: absolute;
    writing-mode: vertical-rl;
    padding-top: 3rem;
    right: 16rem;
}

.pagehero h2 {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-weight: 400;
    text-align: start;
    line-height: 1.3;
    font-size: clamp(1.125rem, 0.455rem + 1.79vw, 1.563rem);
    letter-spacing: 0.2rem;
}

.pagehero span {
    display: inline-block;
    padding-top: 0.5rem;
    background-color: var(--color-main);
    width: fit-content;
    height: fit-content;
}

@media (max-width: 992px) {
    section.pagehero {
        aspect-ratio: 16 / 9;
    }
}


@media (max-width: 600px) {
    section#pagetitle {
        padding: 0 2rem 1rem;
    }

    section.pagehero {
        aspect-ratio: 1 / 1;
    }

    .pagehero-text {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        max-width: 90%;
        padding-top: 2rem;
    }
}

@media (min-width: 1400px) {
    .pagehero-text {
        right: 30rem;
    }
}

/*pegeHERO画像*/
.pagehero#about {
    background-image: url("../images/about_page_hero.webp");
    background-position: top center;
}

.pagehero#recruit {
    background-image: url("../images/recruit_page_hero.webp");
    background-position: top center;
}

.pagehero#faq {
    background-image: url("../images/faq_page_hero.webp");
    background-position: top center;
}

.pagehero#company {
    background-image: url("../images/company_page_hero.webp");
    background-position: top center;
}

.pagehero#works {
    background-image: url("../images/works_page_hero.webp");
    background-position: top center;
}

.pagehero#blog {
    background-image: url("../images/blog_page_hero.webp");
    background-position: top center;
}

.pagehero#contact {
    background-image: url("../images/contact_page_hero.webp");
    background-position: top center;
}

@media (max-width: 600px) {
    .pagehero#recruit {
        background-position: calc(100% - 15%) top;
    }

}

/*お客様の声*/
section.interview_page {
    background-color: var(--color-green);
    color: var(--color-l_lgreen);
    padding: 0;
}

.interview_inner {
    position: relative;
    margin: 7.5rem 5rem 5rem;
    background-color: var(--color-beige);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.interview_inner h2 {
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: "Caveat", cursive;
    font-size: clamp(3.75rem, -1.013rem + 12.72vw, 6.875rem);
    font-weight: 400;
    color: var(--color-divory);
}

.interview_inner h3 {
    margin: 0;
    text-align: center;
}


.hero_grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1rem;
}

.interview_heroimage {
    background-image: url("../images/interview_page_hero.webp");
    background-size: cover;
    background-position: center left;
    aspect-ratio: 4 / 3;
}

@media (min-width: 1400px) {
    .interview_inner {
        margin: 10rem 7.5rem 7.5rem;
    }

}

@media (max-width: 992px) {
    .hero_grid {
        grid-template-columns: 1fr;
    }

    .interview_inner {
        margin: 4rem 2rem 3rem;
        padding: 3rem 0;
    }

    .interview_inner h2 {
        top: -30px;
    }
}

/*------------------------------------
 トップページ
------------------------------------*/
#home {
    background-image: url("../images/bg_line.webp");
    background-color: var(--color-beige);
    background-size: 63rem;
    background-repeat: repeat-y;
}

#home h2 {
    font-size: clamp(1.25rem, 0.293rem + 2.55vw, 1.875rem);
    margin-bottom: 1.875rem;
}

.fadeUp {
    opacity: 0;
    transform: translateY(40px);
    transition: all 2s ease;
    transition-delay: 0.8s;
}

.fadeUp.show {
    opacity: 1;
    transform: translateY(0);
}

.fadeUp:nth-child(1) {
    transition-delay: 0s;
}

.fadeUp:nth-child(2) {
    transition-delay: 0.2s;
}

.fadeUp:nth-child(3) {
    transition-delay: 0.4s;
}

.copy_l img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

.copy_c {
    max-width: 530px;
    width: 100%;
}

.copy_c p {
    font-size: 1.4375rem;
    font-weight: 500;
    line-height: 2.52;
    letter-spacing: -0.03rem;
}

.copy_r {
    display: grid;
    justify-items: center;
}

.copy_r img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 600px) {
    .copy_l img {
        max-width: none;
    }

    .copy_r img {
        max-width: none;
    }

    .copy_c p {
        font-size: 1.2rem;
        font-weight: 500;
        line-height: 2;
        letter-spacing: -0.03rem;
    }

    .copy_c br {
        display: none;
    }

    .copy_l {
        padding: 1rem;
    }

    .copy_c {
        padding: 1rem;
    }

    .copy_r {
        padding: 1rem;
    }

}

/* seasons 全体 */
.seasons {
    padding-top: clamp(5rem, 1.173rem + 10.2vw, 7.5rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 0 auto;
    width: 100%;
}

/* .item にフェードアップ効果の初期状態を追加 */
.item {
    position: relative;
    font-family: "Caveat", cursive;
    line-height: 0.5;
    font-size: 4.5rem;
    color: var(--color-divory);
    padding: 1rem;
    /* フェードアップ効果 */
    opacity: 0;
    transition: opacity 2s ease-out, transform 2s ease-out;
}


/* アニメーション後の状態（元の位置に戻る） */
.item.is-visible {
    opacity: 1;
}

/* 元々の上下位置は既存のCSSで維持される */
.item:nth-child(1).is-visible,
.item:nth-child(3).is-visible {
    transform: translateY(-60px);
}

.item:nth-child(2).is-visible,
.item:nth-child(4).is-visible {
    transform: translateY(60px);
}

/* レスポンシブ時 */
@media (max-width: 600px) {
    .item.is-visible {
        transform: translateY(0) !important;
    }
}

/* 左右交互に上下ずらし＆背景 */
/* Springを2番目として扱う */
.item:nth-child(1) {
    transform: translateY(100px);
    text-align: end;
}

.item:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 50%;
    width: 50%;
    height: calc(108% - 100px - 70px);
    background: var(--color-ivory);
    z-index: -1;
}

/* Summerを1番目として扱う */
.item:nth-child(2) {
    transform: translateY(120px);
    text-align: start;
}

.item:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 0;
    width: 50%;
    height: calc(104% - 100px - 70px);
    background: var(--color-ivory);
    z-index: -1;
}

/* Autumnを4番目として扱う */
.item:nth-child(3) {
    transform: translateY(80px);
    text-align: end;
}

.item:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 50%;
    width: 50%;
    height: calc(102% - 100px - 70px);
    background: var(--color-ivory);
    z-index: -1;
}

/* Winterを3番目として扱う */
.item:nth-child(4) {
    transform: translateY(180px);
    text-align: start;
}

.item:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 100px;
    left: 0;
    width: 50%;
    height: calc(108% - 100px - 70px);
    background: var(--color-ivory);
    z-index: -1;
}


/*gridの順番変更*/
/* Spring を2番目に */
.item:nth-child(1) {
    order: 2;
}

/* Summer を1番目に */
.item:nth-child(2) {
    order: 1;
}

/* Autumn を4番目に */
.item:nth-child(3) {
    order: 4;
}

/* Winter を3番目に */
.item:nth-child(4) {
    order: 3;
}

/* 画像を画面幅に合わせる（任意） */
.item img {
    width: 100%;
    display: block;
}

/* レスポンシブ対応: 600px以下 */
@media (max-width: 600px) {
    .seasons {
        grid-template-columns: 1fr;
    }

    .item {
        padding: 0;
        text-align: center;
        transform: translateY(0) !important;
    }

    .item:nth-child(1),
    .item:nth-child(2),
    .item:nth-child(3),
    .item:nth-child(4) {
        text-align: center;
    }

    .item:nth-child(1)::before,
    .item:nth-child(2)::before,
    .item:nth-child(3)::before,
    .item:nth-child(4)::before {
        left: 0;
        width: 100%;
        height: 70%;
        text-align: center;
    }

    /*gridの順番変更*/
    /* Spring を2番目に */
    .item:nth-child(1) {
        order: 1;
    }

    /* Summer を1番目に */
    .item:nth-child(2) {
        order: 2;
    }

    /* Autumn を4番目に */
    .item:nth-child(3) {
        order: 3;
    }

    /* Winter を3番目に */
    .item:nth-child(4) {
        order: 4;
    }
}

.white-box {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-bottom: -7.5rem;
    background-color: #fff;
    padding: 3.75rem 5rem 5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    letter-spacing: 0.05rem;
}

.white-box2 {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin-right: auto;
    margin-bottom: -7.5rem;
    background-color: #fff;
    padding: 3.75rem 5rem 5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    letter-spacing: 0.05rem;
}

/* 初期状態: 非表示 */
.white-box,
.white-box2 {
    opacity: 0;
    transform: translateY(120px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}


/* アニメーション後の状態 */
.white-box.is-visible,
.white-box2.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* アニメーション後の状態 */
.white-box.is-visible,
.white-box2.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cut_top {
    background-image: url("../images/cut04.webp");
    background-size: 100px;
    background-repeat: no-repeat;
    background-position-y: 2.55rem;
    letter-spacing: -0.06rem;
}

.contents .grid_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, -5.5rem + 17.33vw, 7.5rem);
    padding: clamp(2rem, -3.5rem + 14.67vw, 7.5rem);

}

@media (max-width: 992px) {
    .contents .grid_2 {
        grid-template-columns: 1fr;

    }

    .white-box {
        margin-bottom: -7.5rem;
        padding: 2.5rem;

    }

    .white-box2 {
        padding: 2.5rem;
    }

    .cut_top {
        background-position-x: right;
        background-position-y: 0;
        letter-spacing: -0.06rem;
    }
}

.img_flex {
    display: flex;
    justify-content: space-between;
}

.img_flex img {
    width: 48%;
    height: auto;
    object-fit: cover;
    display: block;
}

.grid_2 div.img_flex {
    padding: 1rem 0;
}

/*interview*/
.interview {
    background-color: var(--color-green);
}

#home .interview h2 {
    position: relative;
    margin-bottom: -20px;
    text-align: center;
    z-index: 1;
    font-family: "Caveat", cursive;
    font-size: clamp(3.75rem, -1.013rem + 12.72vw, 6.875rem);
    font-weight: 400;
    color: var(--color-divory);
}

.interview h3,
.interview p {
    color: var(--color-l_lgreen);
}

@media (max-width: 600px) {
    .interview {
        padding: 2rem 1rem;
    }

    .interview h3 {
        margin-top: 2rem;
    }

    .interview img {
        margin-bottom: 2rem;
    }
}

/*------------------------------------
 フッターセクション
------------------------------------*/
.ft_contact {
    background-color: var(--color-ivory);
}

.ft_contact h2 {
    background-color: var(--color-ivory);
    text-align: left;
    line-height: 1.2;
}

p.copyright {
    font-size: 0.8rem;
    text-align: end;
    padding: 0 4rem 1rem 0;
    margin: 0;
}

footer {
    background-color: var(--color-beige);

}

@media (max-width: 992px) {
    footer .nav_container {
        height: auto;
        flex-direction: column;
        justify-content: center;
    }

    .footer_nav {
        position: relative;
        padding: 3rem 1rem 0;
    }

    .footer_nav .nav_menu {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 1.5rem;
        flex-direction: column;
        justify-content: center;
        padding: 2rem;
        gap: 1.5rem;
        box-shadow: none;
    }

    p.copyright {
        text-align: center;
        padding: 0 0 1rem 0;
    }

}

/*------------------------------------
 下層
------------------------------------*/
#page {
    background-color: var(--color-beige);
}

#page h2 {
    text-align: center;
    margin-bottom: clamp(2.5rem, -1.327rem + 10.2vw, 5rem);
}

.linebg {
    background-image: url("../images/bg_line.webp");
    background-size: 63rem;
    background-repeat: repeat-y;
}

.section_mv {
    padding-bottom: clamp(1rem, -3rem + 10.67vw, 5rem);
}

@media (max-width: 992px) {
    .section_mv img {
        width: 100%;
        height: 380px;
        object-fit: cover;
    }
}

/*表*/
.info-list {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0.75rem 2rem;
}

.info-list div {
    display: contents;
}

.info-list dt {
    font-size: 1.125rem;
    padding: 1rem 1rem 1rem 2rem;
    background-color: var(--color-green);
    color: var(--color-white);
}

.info-list dd {
    font-size: 1.125rem;
    padding: 1rem;
    margin: 0;
}

/* 下にマージンを付けるブロック */
.info-list.block {
    margin-bottom: 3rem;
}

/* 最後のブロックだけマージンなし */
.info-list:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .info-list {
        grid-template-columns: 1fr;
    }

    .info-list dt {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .info-list dd {
        font-size: 1rem;
        padding: 0 0.5rem 0.5rem;
    }

}



.box900 {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
    padding: 3.75rem 5rem 5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    letter-spacing: 0.05rem;
}

@media (max-width: 992px) {
    .box900 {
        max-width: none;
        width: auto;
        padding: 1rem;
        margin: 0 1rem;

    }
}


/*------------------------------------
 about
------------------------------------*/
.point {
    background-color: var(--color-beige);
    position: relative;
    margin-bottom: 5rem;

}

.point-number {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(4rem, 2rem + 5.33vw, 6rem);
    height: clamp(4rem, 2rem + 5.33vw, 6rem);
    background-color: var(--color-green);
    color: var(--color-beige);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Zen Antique", serif;
    font-size: clamp(2rem, 1rem + 2.67vw, 3rem);
}




.cnt3 .grid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
    padding: 7.5rem;
}

.cnt3 .grid_3 p {
    padding: 1rem;
}

@media (max-width: 992px) {
    .cnt3 .grid_3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }
}

.grid_garden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.75rem);
    align-items: end;
    padding-bottom: clamp(5rem, 1.19rem + 10.18vw, 7.5rem);
}

.text_block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    position: relative;

}

.img_row {
    display: flex;
    gap: clamp(1.5rem, 4vw, 3.75rem);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.img_row img {
    width: calc((100% - clamp(1.5rem, 4vw, 3.75rem)) / 2);
    height: auto;
    object-fit: cover;
}

.img_main img {
    width: 100%;
    height: auto;
    object-fit: cover;
}



.textarea {
    padding: clamp(2rem, -3.5rem + 14.67vw, 7.5rem);
}

@media (max-width: 1024px) {
    .grid_garden {
        grid-template-columns: 1fr;
        padding: 3rem;
    }

    .text_block {
        position: static;
    }

    .img_row {
        position: static;
        margin-top: 1.5rem;
    }

    .grid_garden .text_block {
        order: 1;
    }

    .grid_garden .img_main {
        order: 2;
    }

}

@media (max-width: 767px) {
    .grid_garden {
        grid-template-columns: 1fr;
        padding: 1rem;
    }



}


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

.flow05 {
    padding-left: 0;
}

.flow05>li {
    list-style-type: none;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.flow05>li:not(:last-child) {
    padding-bottom: 1rem;
}

.flow05>li .icon05 {
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border-radius: 100vh;
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    position: absolute;
    left: 0;
    font-family: "Zen Antique", serif;
}

.flow05>li:not(:last-child)::before {
    content: '';
    background: #ddd8d0;
    width: 4px;
    height: 100%;
    position: absolute;
    top: calc(50% - -30px);
    left: 20px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.flow05>li dl dt {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-main);
    margin-bottom: 1.6rem;
    margin-left: 3rem;
}

.flow05>li dl dd {
    margin-left: 3rem;
}

.flow05 dd .desc p {
    margin-bottom: 0.6rem;
}

.flow05 dd .desc p:last-child {
    margin-bottom: 0;
}


/*------------------------------------
 interview
------------------------------------*/
.interview-item {
    margin-bottom: 2.5rem;
}

.interview-item:last-child {
    margin-bottom: 0;
}

.interview-question {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0;
}

.interview-question::before {
    content: "";
    width: 35px;
    height: 1px;
    background-color: var(--color-main);
    flex-shrink: 0;
    margin-top: 1.5rem;
}

.interview-question h3 {
    font-size: clamp(1.125rem, 0.687rem + 1.17vw, 1.563rem);
    margin-bottom: clamp(1.25rem, 3.33vw, 2.5rem);
    flex: 1;
}

.interview-answer {
    margin-left: 50px;
    margin-bottom: clamp(5rem, 2.5rem + 6.67vw, 7.5rem);
}

@media (max-width: 600px) {
    .interview-item {
        margin-right: 1rem;
    }

    .interview-question::before {
        width: 20px;
        margin-top: 1.2rem;
    }

    .interview-answer {
        margin-left: 35px;
    }
}

/*------------------------------------
 faq
------------------------------------*/
.faq dt {
    position: relative;
    font-size: clamp(1.125rem, 0.687rem + 1.17vw, 1.563rem);
    margin-bottom: clamp(1.25rem, 3.33vw, 2.5rem);
    padding-left: 100px;
}

/* Qアイコンを疑似要素で表示 */
.faq dt::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-image: url('../images/q.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Aのスタイル */
.faq dd {
    position: relative;
    padding: 1rem 2rem 0.5rem 100px;
    min-height: 80px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 5rem;
}

.faq dd::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 50px;
    height: 50px;
    background-image: url('../images/a.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.faq dd:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .faq dt {
        padding-left: 80px;
    }

    .faq dd {
        padding: 2rem 2rem 0.5rem 80px;

    }
}



/*------------------------------------
 company
------------------------------------*/
.message.contents .grid_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, -5.5rem + 17.33vw, 7.5rem);
    padding: 0 clamp(2rem, -3.5rem + 14.67vw, 7.5rem) clamp(2rem, -3.5rem + 14.67vw, 7.5rem);

}

.message_illust {
    background-color: var(--color-white);
    margin: 0 clamp(2rem, -3.5rem + 14.67vw, 7.5rem) clamp(2rem, -3.5rem + 14.67vw, 7.5rem);
}

.message_illust h4 {
    margin-bottom: 0;
    background-color: var(--color-green);
    color: var(--color-white);
    text-align: center;
    font-size: clamp(1.125rem, 0.742rem + 1.02vw, 1.375rem);
    letter-spacing: clamp(0rem, -0.178rem + 0.37vw, 0.1rem);
    line-height: clamp(2rem, 1.5rem + 1.33vw, 2.5rem);

}

.message_illust img {
    padding: 3rem 5rem 7.5rem;
}


/*staff*/
.staff_section_ft {
    margin-top: clamp(5rem, 1.19rem + 10.18vw, 7.5rem);

}

.staff_section_ft img {
    height: 400px;
    object-fit: cover;
    object-position: center -6rem;
}

@media (max-width: 992px) {
    .message.contents .grid_2 {
        grid-template-columns: 1fr;
    }

    .message_illust img {
        padding: 1rem 0 1rem;
    }

    .staff_section_ft img {
        height: 300px;
        object-fit: cover;
        object-position: top center;
    }

}


/*------------------------------------
 recruit
------------------------------------*/
.rc_text {
    font-size: 1.125rem;
    line-height: 2;
    margin-bottom: 5rem;
}

.grid_3.desc {
    margin-bottom: 5rem;
}

.grid_3.desc p {
    background-color: var(--color-l_lgreen);
    color: var(--color-white);
    padding: 1rem;
    text-align: center;
    margin-bottom: 0;
}

/*------------------------------------
 works
------------------------------------*/




/*------------------------------------
 blog
------------------------------------*/
#post {
    background-color: var(--color-beige);
}

#post h2 {
    text-align: start;
    line-height: 1.2;
    padding-top: 2rem;
    margin-bottom: 1.5rem;
}

#post p {
    margin-bottom: 1rem;
}

#post img {
    margin-bottom: 1rem;
}


#post h3,
#post h4,
#post h5,
#post h6 {
    line-height: 1.2;
    padding-top: 2rem;
    margin-bottom: 1.5rem;
}



.blog_grid {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: clamp(1rem, -5.5rem + 17.33vw, 7.5rem);

}

.info {
    text-align: end;
    border-top: 1px dotted var(--color-main);
    padding-top: 0.8rem;
    margin-bottom: 1rem;
}

#post img.eyecatch {
    margin-bottom: 2rem;
}

.postcontents {
    padding-bottom: clamp(1rem, -5.5rem + 17.33vw, 7.5rem);
}

.side {
    padding-top: 5rem;
}

.new_post {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.new_post img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
}

.new_post-info .title {
    margin-bottom: 0.25rem;
}

.new_post-info .date {
    font-size: 0.8rem;
    color: #777;
}




@media (max-width: 600px) {

    .blog_grid {
        grid-template-columns: 1fr;
    }

}

/*------------------------------------
 contact
------------------------------------*/

/* フォームグループ（各入力フィールドのラッパー） */
.form-group {
    margin-bottom: 1.5rem;
}

/* ラベル */
.form-label {
    display: block;
    margin-bottom: 0.5rem;

}

/* 必須バッジ */
.badge-required {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
    color: #fff;
    background-color: #dc3545;
    border-radius: 0.25rem;
}

/* 入力フィールド共通スタイル */
.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

/* プレースホルダーのスタイル */
.form-input::placeholder,
.form-textarea::placeholder {
    color: #6c757d;
    opacity: 0.6;
}

/* フォーカス時のスタイル */
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ホバー時のスタイル */
.form-input:hover,
.form-textarea:hover {
    border-color: #a0aec0;
}

/* テキストエリア特有のスタイル */
.form-textarea {
    resize: vertical;
    min-height: 150px;
}

/* エラー状態（オプション） */
.form-input.error,
.form-textarea.error {
    border-color: #dc3545;
}

.form-input.error:focus,
.form-textarea.error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* 成功状態（オプション） */
.form-input.success,
.form-textarea.success {
    border-color: #28a745;
}

.form-input.success:focus,
.form-textarea.success:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

/* 無効状態 */
.form-input:disabled,
.form-textarea:disabled {
    background-color: #e9ecef;
    opacity: 0.6;
    cursor: not-allowed;
}

/* 送信ボタン */
.form-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    background-color: #0d6efd;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

.form-button:hover {
    background-color: #0b5ed7;
}

/* ポリシー表示ボックス */
.policy-box {
    margin-top: clamp(5rem, 1.19rem + 10.18vw, 7.5rem);
    width: 100%;
    height: 300px;
    overflow: auto;
    border: 1px solid #dee2e6;
    padding: 1rem;
    background-color: #fff;
    border-radius: 0.375rem;
    box-sizing: border-box;
}

/* スクロールバーのカスタマイズ（Webkit系ブラウザ） */
.policy-box::-webkit-scrollbar {
    width: 8px;
}

.policy-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.policy-box::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.policy-box::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Firefox用スクロールバー */
.policy-box {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 確認画面用grid */
.grid_confirm {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
    text-align: left;
}

@media (max-width: 768px) {
    .grid_confirm {
        grid-template-columns: 1fr;
        /* スマホは縦積み */
    }
}


/*ページネーション*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 3rem 0 0;
}

.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 45px;
    height: 45px;
    border: solid 1px var(--color-green);
    font-size: 14px;
    color: var(--color-green);

    transition: all 0.15s linear;
}

a.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40px;
    height: 40px;
    border: solid 1px var(--color-green);
    font-size: 0.95rem;
    color: var(--color-green);

    transition: all 0.15s linear;
}

.page-numbers.current {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40px;
    height: 40px;
    background-color: var(--color-green);
    border: solid 1px var(--color-green);
    font-size: 0.95rem;
    color: var(--color-white);

    transition: all 0.15s linear;
}

.page-numbers.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
    color: var(--color-main);
    transition: all 0.15s linear;
}