/**
 * ==========================================================
 * 共通設定
 * ==========================================================
 */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #222;
    font-family: 'Noto Sans JP', sans-serif;
/*
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Yu Gothic",
        YuGothic,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
*/
    line-height: 1.7;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: inherit;
}

.inner {
    width: min(1180px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
}

/**
 * ==========================================================
 * HEADER
 * ==========================================================
 *
 * 背景：
 * 画面幅100%
 *
 * コンテンツ：
 * 最大1600px
 *
 * スクロール時：
 * 上部固定
 */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: #eceae5;
}

/**
 * ==========================================================
 * HEADER INNER
 * ==========================================================
 */

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1600px, calc(100% - 48px));
    min-height: 88px;
    margin-inline: auto;
}

/**
 * ==========================================================
 * LOGO
 * ==========================================================
 */

.site-header__logo {
    display: block;
    flex-shrink: 0;
    width: clamp(280px, 22vw, 390px);
}

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

/**
 * ==========================================================
 * GLOBAL NAV
 * ==========================================================
 */

.global-nav {
    display: block;
}

.global-nav__list {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-nav__item {
    position: relative;
}

li.global-nav__item:not(:last-child) {
	margin-right:15px;
}
/**
 * ==========================================================
 * MENU LINK
 * ==========================================================
 */

.global-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    min-height: 88px;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: #222;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
}

/**
 * 日本語
 */

.global-nav__ja {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.25rem;
    padding: 5px 0;
}

/**
 * 英字
 */

.global-nav__en {
    display: block;
    margin-top: 7px;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.35em;
    white-space: nowrap;
}

/**
 * hover
 */

.global-nav__link:hover {
    opacity: 0.6;
}

/**
 * ==========================================================
 * CONTACT
 * ==========================================================
 */

.global-nav__contact .global-nav__ja {
    padding: 5px 10px;
    border: 1px solid #222;
    border-radius: 8px;
    background-color: #FFFFFF;
    letter-spacing: 0;
}
.global-nav__contact .global-nav__ja:hover {
    background-color: #5d5753;
    color: #FFFFFF;
}

/**
 * ==========================================================
 * SUB MENU
 * ==========================================================
 */

.global-nav__submenu {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    z-index: 100;
    width: max-content;
    min-width: 190px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: #5d5753;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

/**
 * サブメニューリンク
 */

.global-nav__submenu a {
    display: block;
    padding: 10px 18px;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.global-nav__submenu a::before {
    margin-right: 8px;
    content: "−";
}

.global-nav__submenu a:hover {
    background: rgba(255,255,255,0.1);
}

/**
 * JSで開く
 */

.has-submenu.is-open > .global-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/**
 * ==========================================================
 * PC：マウスホバー
 * ==========================================================
 */

@media (hover: hover) and (pointer: fine) {

    .has-submenu:hover > .global-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

}

/**
 * ==========================================================
 * HAMBURGER
 * ==========================================================
 *
 * PCでは非表示
 */

.header-menu-button {
    display: none;
}

/**
 * ==========================================================
 * 1280px付近
 * ==========================================================
 */

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

    .site-header__inner {
        width: calc(100% - 32px);
    }

    .site-header__logo {
        width: 370px;
    }

    .global-nav__link {
        min-width: 94px;
        padding-inline: 9px;
    }

    .global-nav__ja {
        font-size: 14px;
    }

}

/**
 * ==========================================================
 * 768px以下
 * ==========================================================
 */

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

    /**
     * スマホヘッダー
     */

    .site-header__inner {
        width: 100%;
        min-height: 70px;
        padding-inline: 20px;
    }

    /**
     * LOGO
     */

    .site-header__logo {
        width: min(260px, 65vw);
    }

    /**
     * ======================================================
     * ハンバーガー
     * ======================================================
     */

    .header-menu-button {
        position: relative;
        z-index: 1002;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        appearance: none;
    }

    .header-menu-button__line {
        display: block;
        width: 27px;
        height: 2px;
        margin: 4px 0;
        background: #222;
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    /**
     * OPEN
     */

    .header-menu-button.is-open
    .header-menu-button__line:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .header-menu-button.is-open
    .header-menu-button__line:nth-child(2) {
        opacity: 0;
    }

    .header-menu-button.is-open
    .header-menu-button__line:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }

    /**
     * ======================================================
     * GLOBAL NAV
     * ======================================================
     */

    .global-nav {
        position: fixed;
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        padding: 20px;
        background: #efede8;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;
    }

    .global-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /**
     * UL
     */

    .global-nav__list {
        display: block;
        width: 100%;
    }

    /**
     * LI
     */

    .global-nav__item {
        width: 100%;
        border-bottom: 1px solid #cfcac2;
    }

    /**
     * メインリンク
     */

    .global-nav__link {
        position: relative;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
        min-height: auto;
        padding: 18px 10px;
        text-align: left;
    }

    .global-nav__ja {
        font-size: 16px;
    }

    .global-nav__en {
        margin-top: 5px;
        font-size: 8px;
        letter-spacing: 0.3em;
    }

    /**
     * ======================================================
     * アコーディオン矢印
     * ======================================================
     */

    .global-nav__toggle::after {
        position: absolute;
        top: 50%;
        right: 15px;
        width: 8px;
        height: 8px;
        border-right: 1px solid #222;
        border-bottom: 1px solid #222;
        content: "";
        transform:
            translateY(-70%)
            rotate(45deg);
        transition: transform 0.2s ease;
    }

    .has-submenu.is-open
    > .global-nav__toggle::after {

        transform:
            translateY(-20%)
            rotate(225deg);

    }

    /**
     * ======================================================
     * SUB MENU
     * ======================================================
     *
     * PCではabsoluteですが
     * スマホでは通常フローへ戻します。
     */

    .global-nav__submenu {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #dedad3;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            max-height 0.3s ease;
    }

    /**
     * 開いた状態
     */

    .has-submenu.is-open
    > .global-nav__submenu {

        max-height: 500px;
        transform: none;

    }

    /**
     * サブメニューリンク
     */

    .global-nav__submenu a {
        padding:
            14px
            20px
            14px
            30px;
        color: #222;
        font-size: 14px;
        white-space: normal;
    }

    .global-nav__submenu a::before {
        content: "−";
    }

    .global-nav__submenu a:hover {
        background: rgba(255,255,255,0.35);
    }

    /**
     * CONTACT
     *
     * PCの丸囲みをスマホでは解除
     */

    .global-nav__contact .global-nav__ja {
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    /**
     * メニュー表示中
     * bodyスクロール停止
     */

    body.is-menu-open {
        overflow: hidden;
    }

}

/**
 * ==========================================================
 * FOOTER
 * ==========================================================
 */

.site-footer {
    padding: 70px 0 35px;
    background: #898985;
    color: #fff;
}

.site-footer__inner {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(300px, 1fr)
        auto;
    width: min(1280px, calc(100% - 40px));
    min-height: 300px;
    padding-bottom: 45px;
    margin-inline: auto;
}

/**
 * ==========================================================
 * 左：会社情報
 * ==========================================================
 */

.site-footer__company {
    display: flex;
    flex-direction: column;
}

/**
 * LOGO
 */

.site-footer__logo {
    display: block;
    width: 300px;
}

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

/**
 * ADDRESS
 */

.site-footer__address {
    margin-top: auto;
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
}

/**
 * ==========================================================
 * NAV
 * ==========================================================
 */

.footer-nav__columns {
    display: grid;
    grid-template-columns:
        minmax(190px, auto)
        minmax(160px, auto);
    gap: 50px;
}

.footer-nav__column {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.footer-nav__group {
    margin: 0;
}

/**
 * 親リンク
 */

.footer-nav__main {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

/**
 * ==========================================================
 * 子リンク
 * ==========================================================
 */

.footer-nav__sub {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.footer-nav__sub li + li {
    margin-top: 5px;
}

.footer-nav__sub a {
    position: relative;
    display: block;
    padding-left: 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    opacity: 0.85;
}

/**
 * 子リンクの「−」
 */

.footer-nav__sub a::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "−";
}

/**
 * ==========================================================
 * HOVER
 * ==========================================================
 */

.footer-nav a {
    transition: opacity 0.2s ease;
}

.footer-nav a:hover {
    opacity: 0.6;
}

/**
 * ==========================================================
 * COPYRIGHT
 * ==========================================================
 */

.site-footer__copyright {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .site-footer {
        padding:
            50px
            0
            30px;
    }

    .site-footer__inner {
        display: block;
        width: calc(100% - 40px);
        min-height: auto;
    }

    /**
     * LOGO
     */

    .site-footer__logo {
        width: min(280px, 80%);
    }

    /**
     * NAV
     */

    .footer-nav {
        margin-top: 45px;
    }

    .footer-nav__columns {
        grid-template-columns: 1fr 1fr;
        gap:
            35px
            25px;
    }

    .footer-nav__column {
        gap: 25px;
    }

    /**
     * ADDRESS
     */

    .site-footer__address {
        margin-top: 40px;
    }

    /**
     * COPYRIGHT
     */

    .site-footer__copyright {
        position: static;
        margin-top: 45px;
        text-align: left;
    }

}

/**
 * ==========================================================
 * MAIN VISUAL
 * ==========================================================
 *
 * 想定：
 * - 1280px：元デザインに近い60:40
 * - 1440px：少し広がる
 * - 1900px：左画像は広がりすぎず、右コピーも巨大化させない
 * - 中の左右コンテンツは1920pxで成長を止める。
 *
 * MV高さはPCでは520px固定
 */

.mainvisual-wrap {
    width: 100%;
    background: #fff;
}

.mainvisual {
    display: grid;

    /**
     * 左カラム
     * - 基本は60vw
     * - 最小760px
     * - 最大1100px
     * 左画像はワイド画面でも
     * 1100pxを超えて広がらない
     *
     * 右カラムは残り幅
     */
    grid-template-columns:
        clamp(760px, 60vw, 1100px)
        minmax(0, 1fr);
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    overflow: hidden;

    /*height: 520px;*/  /*-----→　1440px以上だと画像の天地が切れて表示される　*/
    /*
     * 1280px付近では約520px
     * 1440pxでは約583px
     * 1600pxでは約648px
     * 最大は約740px
     */    
    height: clamp(520px, 40.5vw, 680px);


}

/**
 * ==========================================================
 * 左：西新宿写真
 * ==========================================================
 */

.mainvisual-left {
    overflow: hidden;
}

.mainvisual-left img {
    /*display: block;*/
    width: 100%;
    height: 100%;

    /**
     * 枠を埋めるためcover
     */
    object-fit: cover;

    /**
     * 下部の緑を少し見せるため、
     * 中央よりやや下を基準にする
     *
     * 必要に応じて
     * 65%～72%程度で微調整
     */
    /*object-position: center 68%;*/
    object-position: center center;
}

/**
 * ==========================================================
 * 右：コピー画像
 * ==========================================================
 */

.mainvisual-right {
    display: flex;
    align-items: center;
    justify-content: center;

    /**
     * 1280pxでは余白を抑えめ、
     * ワイド画面では少し余裕を持たせる
     */
    padding-inline: clamp(20px, 3vw, 60px);
    background: #fff;
}

.mainvisual-right img {
    display: block;

    /**
     * 右コピー画像は
     * カラム幅いっぱいまで無制限に大きくしない
     */
    width: min(100%, 560px);
    height: auto;

    /**
     * 文字画像なので切らない
     */
    object-fit: contain;
}

/**
 * ==========================================================
 * 1280px前後
 * ==========================================================
 *
 * デザイン基準に近い画面幅
 */

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

    .mainvisual {
        /**
         * 1280pxでは
         * 左：約768px
         * 右：約512px
         *
         * に近い比率
         */
        grid-template-columns: 60% 40%;
    }

    .mainvisual-right {
        padding-inline: 20px;
    }

    .mainvisual-right img {
        /**
         * 右画像が小さくなりすぎないように
         */
        width: min(100%, 520px);
    }

}

/**
 * ==========================================================
 * 1440px前後
 * ==========================================================
 */

@media screen and (min-width: 1366px) and (max-width: 1599px) {

    .mainvisual {
        /**
         * 基本60:40に近いが、
         * 左画像を広げすぎない
         */
        grid-template-columns:
            minmax(820px, 60%)
            minmax(0, 1fr);
    }

    .mainvisual-right {
        padding-inline: 30px;
    }

    .mainvisual-right img {
        width: min(100%, 540px);
    }

}

/**
 * ==========================================================
 * 1600px以上
 * ==========================================================
 *
 * 1900pxクラスのワイド画面対策
 */

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

    .mainvisual {
        /**
         * 左画像は1100pxで頭打ち
         *
         * 1900pxの場合：
         * 左 1100px
         * 右 800px
         */
        grid-template-columns:
            1100px
            minmax(0, 1fr);
    }

    .mainvisual-right {
        padding-inline: 60px;
    }

    .mainvisual-right img {
        /**
         * 1900pxでもコピー画像を巨大化させない
         */
        width: min(100%, 560px);
    }

}

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

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

    .mainvisual {
        /**
         * PCの固定520pxを解除
         */
        height: auto;

        /**
         * タブレットでは
         * 左右比率を少し画像寄りに
         */
        grid-template-columns: 58% 42%;
    }

    .mainvisual-left {
        min-height: 420px;
    }

    .mainvisual-right {
        min-height: 420px;
        padding-inline: 20px;
    }

    .mainvisual-right img {
        width: 100%;
        max-width: 420px;
    }

}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .mainvisual {
        /**
         * スマホでは上下配置
         */
        display: block;
        /*width: 100%;*/
        height: auto;
    }

    /**
     * -------------------------------
     * 上：西新宿写真
     * -------------------------------
     */

    .mainvisual-left {
        /*width: 100%;*/

        /**
         * 横長で見せる
         */
        /*height: 58vw;
        min-height: 240px;
        max-height: 360px;*/
        height:auto;
    }

    .mainvisual-left img {
        width: 100%;
        height: auto;
        /*height: 100%;
        object-fit: cover;*/

        /**
         * 緑が残る位置
         */
        /*object-position: center 68%;*/
    }

    /**
     * -------------------------------
     * 下：コピー
     * -------------------------------
     */

    .mainvisual-right {
        width: 100%;
        min-height: auto;
        padding:
            35px
            24px
            40px;
    }

    .mainvisual-right img {
        width: 100%;
        max-width: 480px;
        height: auto;
        margin-inline: auto;
    }
    .br_sp_none{
        display: block;
    }
    .ls{
        letter-spacing: normal;
    }

}

/**
 * ==========================================================
 * Small Smartphone
 * ==========================================================
 */

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

    .mainvisual-left {
        min-height: 0;
    }

    .mainvisual-right {
        padding:
            0
            20px
            0;
    }

    .br_sp_none{
        display: none;
    }

    .ls{
        letter-spacing: -1;
    }

}

/**
 * ==========================================================
 * 次のセクション
 * ==========================================================
 */

.about {
    background: #eceae5;
    /*
     * MV直下で背景が見えるように
     * 余白を十分に取る
     */
    padding: 70px 0 100px;
}

/**
 * ==========================================================
 * サンプル用SECTION
 * ==========================================================
 */

.section {
    padding: 90px 0;
}

.section-bg {
    background: #eceae5;
}

.section-heading {
    margin-top: 0;
}

/**
 * ==========================================================
 * 物件情報 & お知らせ
 * ==========================================================
 */

.property ,
.information {
    padding: 80px 0 100px;
    background: #fff;
}

/**
 * ----------------------------------------------------------
 * 見出し行
 * ----------------------------------------------------------
 *
 * 左：
 * 「物件情報」&「お知らせ」
 *
 * 右：
 * 「物件一覧を見る」&「お知らせ一覧を見る」

 */

.property-heading ,
.information-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}

/**
 * 物件情報タイトル & お知らせタイトル
 */

.property-title ,
.information-title {
    position: relative;
    margin: 0;
    padding: 8px 20px;
    background: #eceae5;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 5px;
}

/**
 * 添付デザインの左側にある
 * 縦線を再現
 */

.property-title::before ,
.information-title::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    width: 8px;
    background: #c2c2c2;
    content: "";
}

/**
 * ----------------------------------------------------------
 * 「物件一覧を見る」「お知らせ一覧を見る」ボタン
 * ----------------------------------------------------------
 */

.property-list-button ,
.information-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 160px;
    min-height: 42px;
    padding: 8px 20px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 14px;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.property-list-button:hover ,
.information-list-button:hover {
    background: #222;
    color: #fff;
}

/**
 * ==========================================================
 * 物件一覧
 * ==========================================================
 *
 * PCでは4列。
 */

.property-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

/**
 * ==========================================================
 * 物件カード
 * ==========================================================
 */

.property-item {
    min-width: 0;
    background: #eceae5;
}

/**
 * カード全体リンク
 */

.property-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #222;
    text-decoration: none;
}

/**
 * ==========================================================
 * 物件画像
 * ==========================================================
 */

.property-image {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    background: #ddd;
}

.property-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/**
 * リンクのあるカードのみ
 * ホバー時に画像を少し拡大
 */

a.property-link:hover .property-image img {
 /*   transform: scale(1.04);*/
}
a.property-link:hover {
    opacity: 55%;
}


/**
 * ==========================================================
 * 物件テキスト
 * ==========================================================
 */

.property-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 18px 18px;
    text-align: center;
}

/**
 * 物件名
 */

.property-name {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

/**
 * 駅・所要時間・家賃
 */

.property-detail {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.8;
}

.property-detail p {
    margin: 0;
}

/**
 * ==========================================================
 * View more
 * ==========================================================
 *
 * カード下部へ揃えるため
 * margin-top:auto を設定しています。
 */

.property-more {
    display: inline-block;
    margin-top: auto;
    padding-top: 10px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.04em;
}

/**
 * ==========================================================
 * エラー・掲載なし表示
 * ==========================================================
 */

.property-message {
    margin: 50px 0;
    text-align: center;
}

/**
 * ==========================================================
 * お知らせ
 * ==========================================================
 */

/**
 * ----------------------------------------------------------
 * お知らせ一覧
 * ----------------------------------------------------------
 */

.information-content {
    width: 100%;
}

.news-list-outer{
    display: flex;

}

.news-list-title{
    color:#c5b2a0;
    letter-spacing: 1.15rem;
    width: 11.8%;
    text-align: center;
/*    padding-top: 20px;*/
}

/**
 * ul
 */

.news-list {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 80%;
}

/**
 * ----------------------------------------------------------
 * お知らせ1行
 * ----------------------------------------------------------
 *
 * PC：
 *
 * カテゴリ | 日付 | タイトル
 *
 */

.news-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    column-gap: 20px;
    padding: 16px 0;
    color: #222;
}

/**
 * ----------------------------------------------------------
 * カテゴリ
 * ----------------------------------------------------------
 */

.news-category {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    min-height: 40px;
    padding: 5px 7px;
    border: 1px solid #e9ddcd;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

/**
 * ----------------------------------------------------------
 * 日付
 * ----------------------------------------------------------
 */

.news-date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-height: 40px;
    padding: 12px 10px;
    background: #e9ddcd;
    border-radius: 8px;
    color: #8f8f8f;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

/**
 * ----------------------------------------------------------
 * タイトル
 * ----------------------------------------------------------
 */

.news-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 0 14px;
    border-bottom: 1px solid #cfc8bf;
    font-size: 14px;
    line-height: 1.7;
}

/**
 * pkobo_news側でタイトルに
 * aタグが含まれている想定
 */

.news-title a {
    color: #a58a79;
    text-decoration: underline;
}

.news-title a:hover {
    text-decoration: none;
    color: #222;
}

/**
 * ----------------------------------------------------------
 * Newマーク
 * ----------------------------------------------------------
 */

.news-new {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 10px;
    background: #c00;
    color: #fff;
    font-size: 10px;
    font-style: italic;
    line-height: 1.3;
}

/**
 * ----------------------------------------------------------
 * エラー・掲載なし
 * ----------------------------------------------------------
 */

.information-message {
    margin: 40px 0;
    text-align: center;
}

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

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

    /**
     * ==========================================
     * NEWSの英字見出しは非表示
     * ==========================================
     */
    .news-list-title {
        display: none;
    }

    /**
     * ==========================================
     * お知らせ一覧
     * ==========================================
     */
    .news-list {
        width: 100%;
    }

    /**
     * ==========================================
     * 1記事
     * ==========================================
     *
     * PCのgridを解除し、
     * 日付 → タイトルの縦並びに変更
     */
    .news-item {
        display: block;
        padding: 20px 0 5px;
        border-bottom: 1px solid #ccc;
    }

    /**
     * ==========================================
     * 日付
     * ==========================================
     */
    .news-date {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 90px;
        margin-bottom: 10px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    /**
     * ==========================================
     * タイトル
     * ==========================================
     */
    .news-title-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        border-bottom: none;
    }

    .news-title {
        min-width: 0;
        line-height: 1.7;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    /**
     * ==========================================
     * New!
     * ==========================================
     */
    .news-new {
        flex-shrink: 0;
    }

}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    /**
     * お知らせセクション
     */

    .information {
        padding: 55px 0 70px;
    }

    /**
     * 見出し
     */

    .information-heading {
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .information-title {
        padding: 7px 13px;
        font-size: 17px;
    }

    .information-title::before {
        left: -10px;
        width: 4px;
    }

    /**
     * 一覧ボタン
     */

    .information-list-button {
        min-width: auto;
        min-height: 36px;
        padding: 6px 14px;
        font-size: 11px;
    }

    /**
     * お知らせ1件
     *
     * スマホでは
     *
     * カテゴリ　日付
     * タイトル
     *
     * の2段構成
     */

    .news-item {
        padding: 18px 0;
    }

    .news-category {
        width: auto;
        min-width: 75px;
        min-height: 34px;
        padding: 5px 8px;
        font-size: 11px;
    }

    .news-date {
        font-size: 12px;
    }

    .news-title-wrap {
        grid-column: 1 / -1;
        font-size: 14px;
        line-height: 1.7;
    }

}

/**
 * ==========================================================
 * お知らせ一覧ページ
 * ==========================================================
 */

/**
 * ----------------------------------------------------------
 * ページタイトル
 * ----------------------------------------------------------
 */

.page-title {
    padding: 70px 0;
    background: #eceae5;
}

.page-title h1 {
    margin: 0;
    color: #003939;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/**
 * ----------------------------------------------------------
 * 一覧エリア
 * ----------------------------------------------------------
 */

.news-archive-section {
    padding: 80px 0 100px;
}

.news-archive {
    width: 100%;
}

/**
 * ==========================================================
 * ページャー
 * ==========================================================
 */

.news-pager {
    margin: 30px 0;
    text-align: center;
}

/**
 * pkobo_newsが生成するリンク
 */

.news-pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    margin: 0 3px;
    padding: 4px 8px;
    border: 1px solid #999;
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/**
 * 現在ページ
 */

.news-pager a.current {
    border-color: #e9ddcd;
    background: #e9ddcd;
    color: #fff;
}

/**
 * hover
 */

.news-pager a:hover {
    border-color: #e9ddcd;
    background: #e9ddcd;
    color: #fff;
}

/**
 * 「...」など
 */

.news-pager .overPagerPattern {
    padding: 0 4px;
}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .page-title {
        padding: 45px 0;
    }

    .page-title h1 {
        font-size: 24px;
    }

    .news-archive-section {
        padding: 50px 0 70px;
    }

    .news-pager {
        margin: 25px 0;
    }

    .news-pager a {
        min-width: 32px;
        min-height: 32px;
        margin: 2px;
        font-size: 12px;
    }

}

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

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

    /**
     * 物件カードを2列に変更
     */

    .property-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .inner {
        width: calc(100% - 30px);
    }

    /**
     * 物件セクション
     */

    .property {
        padding: 55px 0 70px;
    }

    /**
     * 見出し
     */

    .property-heading {
        align-items: center;
        gap: 15px;
        margin-bottom: 25px;
    }

    .property-title {
        padding: 7px 13px;
        font-size: 17px;
    }

    .property-title::before {
        left: -10px;
        width: 4px;
    }

    /**
     * 一覧ボタン
     */

    .property-list-button {
        min-width: auto;
        min-height: 36px;
        padding: 6px 14px;
        font-size: 11px;
    }

    /**
     * スマートフォンも2列表示
     *
     * 添付デザインに近い構成を想定。
     *
     * 1列にしたい場合は、
     *
     * grid-template-columns: 1fr;
     *
     * に変更してください。
     */

    .property-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    /**
     * カード
     */

    .property-content {
        padding: 15px 10px;
    }

    .property-name {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .property-detail {
        font-size: 10px;
        line-height: 1.6;
    }

    .property-more {
        padding-top: 8px;
        font-size: 9px;
    }

    /**
     * サンプル用
     */

    .mainvisual {
        min-height: 350px;
        /*padding: 60px 0;*/
    }

    .mainvisual h1 {
        font-size: 28px;
    }

}

/**
 * ==========================================================
 * ABOUT US
 * ==========================================================
 */

.top-about {
    padding: 70px 0 80px;
    background: #eceae5;
}

.top-about__inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 70px;
}

.top-about__title {
    margin: 0;
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    text-align: right;
}

.top-about__content {
    display: flex;
    align-items: center;
    gap: 70px;
}

.top-about__text {
    flex: 1;
    margin: 0;
    font-size: 15px;
    line-height: 2;
}

.top-about__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 160px;
    min-height: 42px;
    padding: 8px 20px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 14px;
    text-decoration: none;

    transition:
    background-color 0.3s ease,
    color 0.3s ease;

}

.top-about__button:hover {
    background: #222;
    color: #fff;
}

/**
 * ==========================================================
 * 共通見出し
 * ==========================================================
 */

.section-heading-row {
    margin-bottom: 35px;
}

.section-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 8px 20px;
    background: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 5px;
}

.section-title::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    width: 8px;
    background: #c2c2c2;
    content: "";
}

/**
 * ==========================================================
 * 事業内容
 * ==========================================================
 */

.top-service {
    padding: 80px 0 100px;
}

.service-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

/**
 * ==========================================================
 * TOP共通カード（事業内容 / 改善事例）
 * ==========================================================
 *
 * 両コンテンツで共通するカード本体・リンク・画像の定義を
 * ここに集約しています。各コンテンツ固有の余白や文字設定は
 * それぞれのセクション側で定義します。
 */

.service-card,
.case-card {
    background: #fff;
}

.service-card__link,
.case-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #222;
    text-decoration: none;
}
.service-card__link:hover,
.case-card__link:hover {
    opacity: 55%;
}


.service-card__image,
.case-card__image {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.service-card__image img,
.case-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card__content {
    padding: 20px 18px;
    text-align: center;
}

.service-card__title,
.case-card__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
}

.service-card__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
}

/**
 * ==========================================================
 * 改善事例
 * ==========================================================
 */

.top-case {
    padding: 80px 0 100px;
    background: #e9ddcd;
}

/**
 * 3件を1180pxに均等3分割せず、
 * 固定気味のカード幅で中央寄せ
 *
 * クライアント指定の“余白が多い見せ方”にしやすい
 */
.case-list {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 270px));
    /*justify-content: center;*/

    gap: 70px;
}

/**
 * 改善事例カード
 */

.case-card__content {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 18px 15px 20px;
    text-align: center;
}

.case-card__number {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 500;
}

.case-card__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}

.case-card__more {
    display: block;
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
}

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

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

    .top-about__inner {
        grid-template-columns: 180px 1fr;
        gap: 40px;
    }

    .top-about__content {
        display: block;
    }

    .top-about__button {
        margin-top: 25px;
    }

    .service-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .case-list {
        grid-template-columns:
            repeat(3, minmax(0, 220px));
        gap: 30px;
    }

}

/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .top-about {
        padding: 55px 0 65px;
    }

    .top-about__inner {
        display: block;
    }

    .top-about__title {
        margin-bottom: 25px;
        font-size: 28px;
        text-align: center;
    }

    .top-about__text {
        font-size: 13px;
    }

    .top-service,
    .top-case {
        padding: 55px 0 70px;
    }

    .section-title {
        padding: 7px 13px;
        font-size: 17px;
    }

    .section-title::before {
        left: -10px;
        width: 4px;
    }

    .service-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    /**
     * 改善事例もスマホでは2列表示
     */
    .case-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: none;
        margin-inline: 0;
    }
    .case-card__content {
        min-height: 150px;
        padding:
            14px
            10px
            16px;
    }

    .case-card__number {
        font-size: 10px;
    }

    .service-card__title,
    .case-card__title {
        margin-bottom: 8px;
        font-size: 14px;
    }

    .service-card__text,
    .case-card__text {
        font-size: 10px;
        line-height: 1.6;
    }
    .case-card__more {
        padding-top: 8px;
        font-size: 9px;
    }
}


/**
 * ==========================================================
 * 事業内容 下層ページ
 * ==========================================================
 *
 * 共通ルール
 *
 * 本文領域：最大950px
 * メイン画像：最大850px
 * メイン画像比率：16:9
 *
 * 4ページ共通で使用します。
 */


/**
 * ==========================================================
 * ページ全体
 * ==========================================================
 */

.service-page {
    padding: 75px 0 100px;
    background: #fff;
}


/**
 * ==========================================================
 * コンテンツ幅
 * ==========================================================
 */

.service-page__inner {
    width: min(950px, calc(100% - 40px));
    margin-inline: auto;
}


/**
 * ==========================================================
 * ページタイトル
 * ==========================================================
 */

.service-page__title {
    margin: 0 0 45px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}

.service-page__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 2px solid #222;
}


/**
 * ==========================================================
 * 導入文
 * ==========================================================
 */

.service-page__lead {
    margin-bottom: 45px;

    font-size: 16px;
    line-height: 2.4;
}

.service-page__lead p {
    margin: 0;
}

.service-page__lead p + p {
    margin-top: 18px;
}


/**
 * ==========================================================
 * メイン画像
 * ==========================================================
 *
 * 4ページすべて850px × 16:9相当で統一。
 */

.service-page__image {
    width: min(850px, 100%);

    margin:
        0
        auto
        50px;

    aspect-ratio: 16 / 9;

    overflow: hidden;
}

.service-page__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


/**
 * 建物管理のみ
 *
 * 人物・室内構図を見ながら
 * トリミング位置を少し下へ調整。
 *
 * 50%～60%程度で微調整してください。
 */

.service-page--building
.service-page__image img {
    object-position: center 56%;
}


/**
 * ==========================================================
 * 詳細項目
 * ==========================================================
 */

.service-page__details {
    width: 100%;
}

.service-detail + .service-detail {
    margin-top: 42px;
}


/**
 * 小見出し
 */

.service-detail__title {
    position: relative;

    display: inline-flex;
    align-items: baseline;
    gap: 8px;

    margin: 0 0 18px;

    padding:
        8px
        20px;

    background: #e9ddcd;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}


/**
 * 左縦線
 */

.service-detail__title::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -18px;

    width: 6px;

    background: #c5b2a0;

    content: "";
}


/**
 * 見出し横の補足
 */

.service-detail__note {
    font-size: 14px;
    font-weight: 400;
}


/**
 * 本文
 */

.service-detail__text {
    margin: 0;

    font-size: 16px;
    line-height: 2.1;
}


/**
 * ==========================================================
 * 貸宅地ページのみ
 * 不動産コンサルティング見出し
 * ==========================================================
 */

.service-subsection {
    margin-top: 70px;
}

.service-subsection__title {
    margin: 0 0 30px;

    font-size: 25px;
    font-weight: 600;

    text-align: center;
}

.service-subsection__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 2px solid #222;
}

.service-subsection__text {
    margin: 0;

    font-size: 16px;
    line-height: 2.4;
}


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

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

    .service-page {
        padding: 65px 0 85px;
    }

    .service-page__inner {
        width: min(950px, calc(100% - 50px));
    }

    .service-page__title {
        margin-bottom: 35px;

        font-size: 25px;
    }

    .service-page__lead {
        font-size: 14px;
    }

    .service-page__image {
        margin-bottom: 45px;
    }

}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .service-page {
        padding: 50px 0 70px;
    }

    .service-page__inner {
        width: calc(100% - 30px);
    }

    .service-page__title {
        margin-bottom: 28px;

        font-size: 23px;
    }

    .service-page__lead {
        margin-bottom: 30px;

        font-size: 14px;
        line-height: 1.9;
    }

    /**
     * スマホでも16:9のまま。
     */
    .service-page__image {
        width: 100%;

        margin-bottom: 35px;
    }

    .service-detail + .service-detail {
        margin-top: 32px;
    }

    .service-detail__title {
        margin-bottom: 14px;

        padding:
            7px
            13px;

        font-size: 18px;
    }

    .service-detail__title::before {
        left: -8px;

        width: 4px;
    }

    .service-detail__note {
        font-size: 14px;
    }

    .service-detail__text,
    .service-subsection__text {
        font-size: 14px;
        line-height: 1.9;
    }

    .service-subsection {
        margin-top: 55px;
    }

    .service-subsection__title {
        margin-bottom: 22px;

        font-size: 21px;
    }

}
/**
 * ==========================================================
 * 会社概要ページ
 * ==========================================================
 *
 * 基本コンテンツ幅：950px
 *
 * TOPの1180pxより狭くし、
 * 下層ページとして本文を読みやすい幅にしています。
 */


/**
 * ==========================================================
 * 共通コンテンツ幅
 * ==========================================================
 */

.company-inner {
    width: min(950px, calc(100% - 40px));
    margin-inline: auto;
}


/**
 * ==========================================================
 * ページタイトル
 * ==========================================================
 */

.company-page__title {
    margin:
        0
        0
        65px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}

.company-page__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 2px solid #222;
}


/**
 * ==========================================================
 * 代表者挨拶
 * ==========================================================
 */

.company-message {
    padding:
        75px
        0
        90px;

    background: #fff;
}


/**
 * テキスト＋代表者写真
 */

.company-message__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        230px;

    align-items: start;

    gap: 80px;
}


/**
 * 代表者挨拶 見出し
 */

.company-message__heading {
    margin:
        0
        0
        25px;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
}


/**
 * 挨拶本文
 */

.company-message__text {
    font-size: 15px;
    line-height: 2;
}

.company-message__text p {
    margin: 0;
}

.company-message__text p + p {
    margin-top: 3px;
}


/**
 * ==========================================================
 * 代表者写真
 * ==========================================================
 */

.company-message__photo {
    width: 230px;

    margin: 0;
}

.company-message__photo img {
    display: block;

    width: 100%;
    height: auto;
}


/**
 * ==========================================================
 * 代表者写真下の役職・氏名
 * ==========================================================
 */

.company-message__caption {
    margin-top: 14px;
    color: #333;
    text-align: center;
    line-height: 1.6;
    white-space: nowrap;
}

.company-message__position {
    margin-right: 6px;
    font-size: 12px;
    font-weight: 400;
}

.company-message__name {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.04em;
}


/**
 * ==========================================================
 * 共通セクション見出し
 * ==========================================================
 */

.company-section-title {
    margin:
        0
        0
        35px;

    font-weight: 600;
    line-height: 1.6;
}


/**
 * ==========================================================
 * 会社情報
 * ==========================================================
 */

.company-profile {
    padding:
        70px
        0
        80px;

    background: #efede8;
}


/**
 * DL
 */

.company-profile__list {
    margin: 0;
}


/**
 * 1行
 */

.company-profile__row {
    display: grid;

    grid-template-columns:
        175px
        minmax(0, 1fr);

    gap: 30px;

    margin: 0;
}


/**
 * 行間
 */

.company-profile__row + .company-profile__row {
    margin-top: 13px;
}


/**
 * 項目名
 */

.company-profile__row dt {
    margin: 0;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
}


/**
 * 内容
 */

.company-profile__row dd {
    margin: 0;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.8;
}


/**
 * ==========================================================
 * 登録免許
 * ==========================================================
 */

.company-license p {
    margin: 0;
}

.company-license p + p {
    margin-top: 4px;
}

.company-license__name {
    display: inline-block;

    width: 120px;
}


/**
 * ==========================================================
 * ACCESS
 * ==========================================================
 */

.company-access {
    padding:
        75px
        0
        100px;

    background: #fff;
}


/**
 * 住所
 */

.company-access__address {
    margin-bottom: 25px;

    font-size: 15px;
    line-height: 1.9;
}

.company-access__address p {
    margin: 0;
}


/**
 * ==========================================================
 * 交通案内
 * ==========================================================
 */

.company-access__route {
    margin:
        0
        0
        45px;

    padding: 0;

    list-style: none;
}

.company-access__route li {
    position: relative;

    padding-left: 18px;

    font-size: 15px;
    line-height: 1.9;
}

.company-access__route li + li {
    margin-top: 3px;
}


/**
 * ベージュの丸
 */

.company-access__route li::before {
    position: absolute;

    top: 0.75em;
    left: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #e7d8c4;

    content: "";
}


/**
 * ==========================================================
 * MAP
 * ==========================================================
 */

.company-map {
    width: min(950px, 100%);
    margin-inline: auto;
    aspect-ratio: 3 / 1;

    overflow: hidden;

    background: #ccc;
}

.company-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


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

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

    .company-message {
        padding:
            65px
            0
            80px;
    }

    .company-page__title {
        margin-bottom: 50px;

        font-size: 25px;
    }


    /**
     * 写真との間隔を少し縮小
     */

    .company-message__layout {
        grid-template-columns:
            minmax(0, 1fr)
            200px;

        gap: 50px;
    }

    .company-message__photo {
        width: 200px;
    }


    /**
     * 会社概要
     */

    .company-profile__row {
        grid-template-columns:
            150px
            minmax(0, 1fr);

        gap: 25px;
    }

}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    /**
     * 共通幅
     */

    .company-inner {
        width: calc(100% - 30px);
    }


    /**
     * ======================================================
     * 代表者挨拶
     * ======================================================
     */

    .company-message {
        padding:
            50px
            0
            60px;
    }

    .company-page__title {
        margin-bottom: 35px;

        font-size: 23px;
    }


    /**
     * PC：
     * テキスト | 写真
     *
     * SP：
     * テキスト
     * ↓
     * 写真
     */

    .company-message__layout {
        display: flex;
        flex-direction: column;

        gap: 30px;
    }

    .company-message__heading {
        margin-bottom: 18px;
    }

    .company-message__text {
        line-height: 1.9;
    }


    /**
     * 写真
     *
     * SPでは中央寄せ
     */

    .company-message__photo {
        width: min(220px, 65%);

        margin-inline: auto;
    }


    /**
     * ======================================================
     * 会社概要
     * ======================================================
     */

    .company-profile {
        padding:
            50px
            0
            60px;
    }

    .company-section-title {
        margin-bottom: 28px;

        font-size: 18px;
    }


    /**
     * PCでは
     *
     * 項目名 | 内容
     *
     * SPでは
     *
     * 項目名
     * 内容
     *
     * に変更
     */

    .company-profile__row {
        display: block;
    }

    .company-profile__row + .company-profile__row {
        margin-top: 22px;
    }

    .company-profile__row dt {
        margin-bottom: 4px;

        font-weight: 600;
    }

    .company-profile__row dd {
        line-height: 1.8;
    }


    /**
     * 登録免許
     */

    .company-license__name {
        display: block;

        width: auto;

        margin-bottom: 1px;

        font-weight: 500;
    }

    .company-license p + p {
        margin-top: 10px;
    }


    /**
     * ======================================================
     * ACCESS
     * ======================================================
     */

    .company-access {
        padding:
            55px
            0
            70px;
    }

    .company-access__address,
    .company-access__route li {
    }

    .company-access__route {
        margin-bottom: 30px;
    }


    /**
     * MAP
     *
     * PCより縦長に変更して、
     * スマホで操作しやすくします。
     */

    .company-map {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

}
/**
 * ==========================================================
 * 個人情報保護方針
 * ==========================================================
 *
 * 本文最大幅：950px
 *
 * 文章量が多いため、
 * TOPよりも狭い本文幅で読みやすくしています。
 */


/**
 * ==========================================================
 * ページ全体
 * ==========================================================
 */

.privacy-page {
    padding: 75px 0 95px;

    background: #fff;
}


/**
 * ==========================================================
 * コンテンツ幅
 * ==========================================================
 */

.privacy-inner {
    width: min(950px, calc(100% - 40px));

    margin-inline: auto;
}


/**
 * ==========================================================
 * ページタイトル
 * ==========================================================
 */

.privacy-page__title {
    margin: 0 0 45px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}

.privacy-page__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 2px solid #222;
}


/**
 * ==========================================================
 * 導入文
 * ==========================================================
 */

.privacy-page__lead {
    margin-bottom: 40px;

    font-size: 15px;
    line-height: 2;
}

.privacy-page__lead p {
    margin: 0;
}

.privacy-page__lead p + p {
    margin-top: 4px;
}


/**
 * ==========================================================
 * 各セクション
 * ==========================================================
 */

.privacy-section + .privacy-section {
    margin-top: 38px;
}


/**
 * ==========================================================
 * 小見出し
 * ==========================================================
 *
 * 添付デザインのベージュ帯＋左縦線
 */

.privacy-section__title {
    position: relative;

    display: block;

    width: min(430px, 100%);

    margin: 0 0 20px;

    padding: 9px 20px;

    background: #e9dcc9;

    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}


/**
 * 左側の縦線
 */

.privacy-section__title::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -18px;

    width: 6px;

    background: #cbb89f;

    content: "";
}


/**
 * ==========================================================
 * 本文
 * ==========================================================
 */

.privacy-section__body {
    font-size: 15px;
    line-height: 1.9;
}

.privacy-section__body p {
    margin: 0;
}

.privacy-section__body p + p {
    margin-top: 4px;
}


/**
 * ==========================================================
 * 箇条書き
 * ==========================================================
 */

.privacy-list {
    margin: 5px 0;
    padding-left: 1.4em;
}

.privacy-list li {
    margin: 0;
}


/**
 * ==========================================================
 * 問い合わせ先
 * ==========================================================
 */

.privacy-contact {
    margin-top: 25px;
    padding-left: 30px;
}

.privacy-contact p {
    margin: 0;
}


/**
 * ==========================================================
 * 制定日
 * ==========================================================
 */

.privacy-date {
    margin-top: 10px;

    font-size: 13px;
    line-height: 1.8;

    text-align: right;
}

.privacy-date p {
    margin: 0;
}


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

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

    .privacy-page {
        padding: 65px 0 80px;
    }

    .privacy-inner {
        width: min(
            950px,
            calc(100% - 50px)
        );
    }

    .privacy-page__title {
        margin-bottom: 38px;

        font-size: 25px;
    }

}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    /**
     * ページ全体
     */

    .privacy-page {
        padding: 50px 0 65px;
    }


    /**
     * コンテンツ幅
     */

    .privacy-inner {
        width: calc(100% - 30px);
    }


    /**
     * ページタイトル
     */

    .privacy-page__title {
        margin-bottom: 30px;

        font-size: 22px;
    }


    /**
     * 導入文
     */

    .privacy-page__lead {
        margin-bottom: 32px;

        line-height: 1.9;
    }


    /**
     * 各項目間
     */

    .privacy-section + .privacy-section {
        margin-top: 32px;
    }


    /**
     * ======================================================
     * 小見出し
     * ======================================================
     *
     * スマホではPCより広めに使用します。
     */

    .privacy-section__title {
        width: calc(100% - 8px);

        margin-bottom: 16px;

        padding:
            8px
            13px;

        font-size: 18px;
    }

    .privacy-section__title::before {
        left: -8px;

        width: 4px;
    }


    /**
     * 本文
     */

    .privacy-section__body {
        line-height: 1.9;
    }


    /**
     * 箇条書き
     */

    .privacy-list {
        padding-left: 1.3em;
    }


    /**
     * 問い合わせ
     */

    .privacy-contact {
        margin-top: 20px;

        padding-left: 0;
    }


    /**
     * 制定日
     */

    .privacy-date {
        margin-top: 25px;

        font-size: 12px;

        text-align: left;
    }

}

/**
 * ==========================================================
 * 改善事例 詳細ページ
 * ==========================================================
 *
 * PC：
 * Before / After を横並び
 *
 * SP：
 * Before
 * ↓
 * After
 *
 * に変更します。
 */


/**
 * ==========================================================
 * ページ全体
 * ==========================================================
 */

.case-detail {
    padding: 70px 0 90px;
    background: #fff;
}


/**
 * ==========================================================
 * コンテンツ幅
 * ==========================================================
 *
 * 改善事例詳細ページは
 * 最大950pxで表示します。
 */

.case-detail__inner {
    width: min(950px, calc(100% - 40px));
    margin-inline: auto;
}


/**
 * ==========================================================
 * ページ上部
 * ==========================================================
 */


/**
 * 01_リフォーム
 * 02_リフォーム
 * 03_リノベーション
 */

.case-detail__number {
    margin: 0 0 5px;

    color: #7e7f74;

    font-size: 16px;
    font-weight: 500;

    letter-spacing: 0.08em;
}


/**
 * ==========================================================
 * メインタイトル
 * ==========================================================
 *
 * ベージュ背景＋左縦線
 */

.case-detail__title {
    position: relative;

    display: inline-block;

    margin: 0 0 10px;

    padding: 9px 22px;

    background: #e9dcc9;

    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
}


/**
 * 左縦線
 */

.case-detail__title::before {
    position: absolute;

    top: 0;
    bottom: 0;
    left: -18px;

    width: 6px;

    background: #cbb89f;

    content: "";
}


/**
 * ==========================================================
 * 工事内容
 * ==========================================================
 */

.case-detail__work {
    position: relative;

    margin: 0 0 55px;

    padding-left: 18px;

    font-size: 15px;
    line-height: 1.8;
}


/**
 * 工事内容左側の四角
 */

.case-detail__work::before {
    position: absolute;

    top: 0.70em;
    left: 0;

    width: 9px;
    height: 9px;

    background: #d9c8b1;

    content: "";
}


/**
 * ==========================================================
 * Before / After 共通
 * ==========================================================
 */


/**
 * 複数のBefore / Afterブロック間の余白
 */

.ba-block + .ba-block {
    margin-top: 50px;
}


/**
 * ==========================================================
 * 通常のBefore / After
 * ==========================================================
 *
 * 01_reform
 * 02_reform
 *
 * および
 * 03_renovationの1段目（間取り図）
 *
 * Before | 矢印 | After
 */

.ba-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        36px
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;
}


/**
 * ==========================================================
 * Before / After 片側
 * ==========================================================
 */

.ba-item {
    min-width: 0;
}


/**
 * ==========================================================
 * Before / After ラベル
 * ==========================================================
 */

.ba-label {
    margin: 0 0 12px;

    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}


/**
 * Afterのみ右揃え
 */

.ba-item--after .ba-label {
    text-align: right;
}


/**
 * ==========================================================
 * 画像
 * ==========================================================
 */

.ba-image {
    margin: 0;
}

.ba-image img {
    display: block;

    width: 100%;
    height: auto;
}


/**
 * ==========================================================
 * Before → After 矢印
 * ==========================================================
 *
 * 画像化せずCSSで作成します。
 */

.ba-arrow {
    position: relative;

    width: 0;
    height: 0;

    margin-inline: auto;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #888;
}


/**
 * ==========================================================
 * 画像下注釈
 * ==========================================================
 *
 * 03_renovationの
 * a / b の説明文など
 */

.ba-caption {
    margin: 2px 0 0;

    font-size: 16px;
    line-height: 1.7;
    text-align: right;
}


/**
 * a / b の青文字
 */

.ba-caption__mark {
    margin-right: 6px;

    color: #1783b6;

    font-size: 20px;
    font-weight: 600;
}


/**
 * ==========================================================
 * 03 リノベーション
 * 縦長Before ＋ 横長After
 * ==========================================================
 *
 * 2段目・3段目のみ使用します。
 *
 * 元画像：
 *
 * Before
 * 700 × 933
 *
 * After
 * 1244 × 933
 *
 * 両画像は元画像の高さが933pxで共通です。
 *
 * そのため横幅比を
 *
 * 700 : 1244
 *
 * にすることで、
 * トリミングせずに天地を揃えて表示できます。
 */


/**
 * Before / After全体幅
 *
 * 1段目と同じ950pxのコンテンツ幅を使用します。
 * これにより2・3段目のBefore左端とAfter右端を
 * 1段目の外側ラインに揃えます。
 */

.ba-block--unequal {
    /*
     * 1段目の通常.ba-rowと同じく、
     * .case-detail__inner（最大950px）の横幅をすべて使用します。
     *
     * 以前は850pxで中央寄せしていたため、
     * 2・3段目だけ左右が50pxずつ内側へ入っていました。
     */
    width: 100%;

    margin-inline: 0;
}


/**
 * ==========================================================
 * 03の2段目・3段目専用GRID
 * ==========================================================
 *
 * 1行目
 * Beforeラベル |     | Afterラベル
 *
 * 2行目
 * Before画像   | →   | After画像
 *
 * 3行目
 *               |     | キャプション
 *
 * という構造にします。
 *
 * この構造にすることで、
 * After側にキャプションがあっても
 * 矢印を「画像そのものの中央」に配置できます。
 */

.ba-block--unequal .ba-row {
    display: grid;
    width: 100%;

    grid-template-columns:
        minmax(0, 700fr)
        36px
        minmax(0, 1244fr);

    grid-template-rows:
        auto
        auto
        auto;

    column-gap: 20px;

    row-gap: 0;

    align-items: center;
}


/**
 * ==========================================================
 * ba-itemの箱を解除
 * ==========================================================
 *
 * 通常は、
 *
 * .ba-item
 * ├ ラベル
 * ├ 画像
 * └ キャプション
 *
 * という1つの箱ですが、
 *
 * 03の2・3段目だけは
 * 中の要素を直接.ba-rowのGRIDへ配置します。
 */

.ba-block--unequal .ba-item {
    display: contents;
}


/**
 * ==========================================================
 * Before側
 * ==========================================================
 */


/**
 * Beforeラベル
 */

.ba-block--unequal
.ba-item:not(.ba-item--after)
.ba-label {
    grid-column: 1;
    grid-row: 1;

    margin: 0 0 12px;

    text-align: left;
}


/**
 * Before画像
 */

.ba-block--unequal
.ba-item:not(.ba-item--after)
.ba-image {
    grid-column: 1;
    grid-row: 2;

    width: 100%;

    margin: 0;
}


/**
 * ==========================================================
 * 中央矢印
 * ==========================================================
 *
 * 画像と同じGRIDの2行目へ配置。
 *
 * align-self:center によって
 * Before / After画像の天地中央へ
 * 自動的に配置されます。
 */

.ba-block--unequal .ba-arrow {
    grid-column: 2;
    grid-row: 2;

    align-self: center;
    justify-self: center;

    margin: 0;
}


/**
 * ==========================================================
 * After側
 * ==========================================================
 */


/**
 * Afterラベル
 */

.ba-block--unequal
.ba-item--after
.ba-label {
    grid-column: 3;
    grid-row: 1;

    width: 100%;

    margin: 0 0 12px;

    text-align: right;
}


/**
 * After画像
 *
 * 右側カラムの右端を基準に配置します。
 */

.ba-block--unequal
.ba-item--after
.ba-image {
    grid-column: 3;
    grid-row: 2;

    width: 100%;

    margin: 0;

    justify-self: end;
}


/**
 * After画像本体
 *
 * width:100%なので、
 * 画像はAfter側のカラムいっぱいに表示されます。
 *
 * そのため通常は
 * margin-left:auto は不要です。
 *
 * 念のため右基準を明示したい場合でも、
 * 親の .ba-image に
 * justify-self:end を指定しているため
 * これだけで十分です。
 */

.ba-block--unequal
.ba-item--after
.ba-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/**
 * ==========================================================
 * Before側画像
 * ==========================================================
 */

.ba-block--unequal
.ba-item:not(.ba-item--after)
.ba-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/**
 * ==========================================================
 * After側キャプション
 * ==========================================================
 *
 * 画像の下へ配置します。
 *
 * キャプションが存在しても、
 * 中央矢印は画像行（2行目）にあるため
 * 矢印位置には影響しません。
 */

.ba-block--unequal
.ba-item--after
.ba-caption {
    grid-column: 3;
    grid-row: 3;

    width: 100%;

}


/**
 * ==========================================================
 * Afterのみ
 * ==========================================================
 *
 * 通常用
 */

.case-after-only {
    width: 50%;

    margin:
        55px
        0
        0
        auto;
}


/**
 * After その他 ラベル
 */

.case-after-only .ba-label {
    text-align: right;
}


/**
 * ==========================================================
 * 03 After その他
 * ==========================================================
 *
 * 03の2段目・3段目のAfter画像と
 * 見た目の幅・右端を近づけます。
 */

.case-detail--renovation
.case-after-only {
    /*
     * 2・3段目のAfter列とほぼ同じ表示幅にします。
     *
     * 950px幅の場合：
     * (950 - 矢印36px - gap40px) × 1244 / (700 + 1244)
     * ≒ 559px
     *
     * calc(64% - 49px) でこの比率を近似し、
     * 右端は margin-left:auto で1～3段目のAfter右端に揃えます。
     */
    width: calc(64% - 49px);
    max-width: 559px;

    margin:
        55px
        0
        0
        auto;
}


/**
 * ==========================================================
 * 事例説明
 * ==========================================================
 */

.case-detail__description {
    margin-top: 55px;

    font-size: 16px;
    line-height: 2;
}

.case-detail__description p {
    margin: 0;
}


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

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

    /**
     * ページ余白
     */

    .case-detail {
        padding: 60px 0 80px;
    }


    /**
     * コンテンツ幅
     */

    .case-detail__inner {
        width: min(
            950px,
            calc(100% - 50px)
        );
    }


    /**
     * メインタイトル
     */

    .case-detail__title {
        font-size: 20px;
    }

}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    /**
     * ======================================================
     * ページ全体
     * ======================================================
     */

    .case-detail {
        padding: 45px 0 65px;
    }


    /**
     * コンテンツ幅
     */

    .case-detail__inner {
        width: calc(100% - 30px);
    }


    /**
     * ======================================================
     * ページ番号
     * ======================================================
     */

    .case-detail__number {
        font-size: 15px;
    }


    /**
     * ======================================================
     * タイトル
     * ======================================================
     */

    .case-detail__title {
        display: block;

        margin-left: 8px;

        padding:
            8px
            13px;

        font-size: 17px;
    }


    /**
     * タイトル左縦線
     */

    .case-detail__title::before {
        left: -8px;

        width: 4px;
    }


    /**
     * ======================================================
     * 工事内容
     * ======================================================
     */

    .case-detail__work {
        margin-bottom: 40px;

        font-size: 14px;
    }


    /**
     * ======================================================
     * 通常Before / After
     * ======================================================
     *
     * PCでは
     *
     * Before → After
     *
     * スマホでは
     *
     * Before
     * ↓
     * After
     *
     * の縦並びへ変更します。
     */

    .ba-row {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /**
     * Afterラベルもスマホでは左揃え
     */

    .ba-item--after .ba-label {
        text-align: left;
    }


    /**
     * ======================================================
     * 矢印
     * ======================================================
     *
     * PCでは右向き。
     *
     * スマホでは下向きへ変更。
     */

    .ba-arrow {
        border-top: 12px solid #888;
        border-right: 8px solid transparent;
        border-bottom: 0;
        border-left: 8px solid transparent;
    }


    /**
     * Before / Afterラベル
     */

    .ba-label {
        margin-bottom: 8px;

        font-size: 14px;
    }


    /**
     * ブロック間余白
     */

    .ba-block + .ba-block {
        margin-top: 40px;
    }


    /**
     * ======================================================
     * Afterのみ
     * ======================================================
     */

    .case-after-only {
        width: 100%;

        margin-top: 40px;
    }


    /**
     * Afterその他ラベル
     */

    .case-after-only .ba-label {
        text-align: left;
    }


    /**
     * ======================================================
     * キャプション
     * ======================================================
     */

    .ba-caption {
        font-size: 14px;
    }


    /**
     * ======================================================
     * 事例説明本文
     * ======================================================
     */

    .case-detail__description {
        margin-top: 40px;

        font-size: 14px;
        line-height: 1.9;
    }


    /**
     * ======================================================
     * 03 リノベーション
     * ======================================================
     *
     * PCで使用している
     *
     * Before | 矢印 | After
     *
     * の特殊GRIDを解除し、
     *
     * Before
     * ↓
     * After
     *
     * の通常フローへ戻します。
     */


    /**
     * 特殊ブロック幅を解除
     */

    .ba-block--unequal {
        width: 100%;
    }


    /**
     * GRIDを1列へ
     */

    .ba-block--unequal .ba-row {
        display: grid;

        grid-template-columns: 1fr;
        grid-template-rows: auto;

        gap: 18px;
    }


    /**
     * PCで指定した
     * display:contentsを解除します。
     */

    .ba-block--unequal .ba-item {
        display: block;
    }


    /**
     * ======================================================
     * PC用GRID位置指定をすべて解除
     * ======================================================
     */

    .ba-block--unequal
    .ba-item:not(.ba-item--after)
    .ba-label,

    .ba-block--unequal
    .ba-item:not(.ba-item--after)
    .ba-image,

    .ba-block--unequal
    .ba-item--after
    .ba-label,

    .ba-block--unequal
    .ba-item--after
    .ba-image,

    .ba-block--unequal
    .ba-item--after
    .ba-caption {

        grid-column: auto;
        grid-row: auto;
    }


    /**
     * Beforeラベル
     */

    .ba-block--unequal
    .ba-item:not(.ba-item--after)
    .ba-label {
        text-align: left;
    }


    /**
     * Afterラベル
     */

    .ba-block--unequal
    .ba-item--after
    .ba-label {
        text-align: left;
    }


    /**
     * ======================================================
     * スマホ用矢印
     * ======================================================
     *
     * PC用のgrid-column / grid-rowを解除し、
     * 下向き矢印として中央配置。
     */

    .ba-block--unequal .ba-arrow {
        grid-column: auto;
        grid-row: auto;

        align-self: auto;
        justify-self: center;

        margin-inline: auto;

        border-top: 12px solid #888;
        border-right: 8px solid transparent;
        border-bottom: 0;
        border-left: 8px solid transparent;
    }


    /**
     * ======================================================
     * 画像
     * ======================================================
     *
     * スマホでは元画像比率のまま
     * 横幅100%で表示します。
     */

    .ba-block--unequal
    .ba-image img {
        width: 100%;
        height: auto;
    }


    /**
     * ======================================================
     * After側キャプション
     * ======================================================
     */

    .ba-block--unequal
    .ba-item--after
    .ba-caption {
        width: 100%;

        margin-top: 5px;

        text-align: left;
    }


    /**
     * ======================================================
     * 03 After その他
     * ======================================================
     */

    .case-detail--renovation
    .case-after-only {
        width: 100%;

        margin-top: 40px;
    }

}
/**
 * ==========================================================
 * お問い合わせページ
 * ==========================================================
 */


/**
 * ==========================================================
 * ページ全体
 * ==========================================================
 */

.contact-page {
    padding:
        75px
        0
        100px;

    background: #fff;
}


/**
 * ==========================================================
 * コンテンツ幅
 * ==========================================================
 */

.contact-inner {
    width: min(
        950px,
        calc(100% - 40px)
    );

    margin-inline: auto;
}


/**
 * ==========================================================
 * ページタイトル
 * ==========================================================
 */

.contact-page__title {
    margin:
        0
        0
        45px;

    font-size: 28px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}


.contact-page__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom: 2px solid #222;
}


/**
 * ==========================================================
 * 導入文
 * ==========================================================
 */

.contact-page__lead {
    margin:
        0
        0
        70px;

    font-size: 15px;
    line-height: 2;

    text-align: center;
}


/**
 * ==========================================================
 * FORM
 * ==========================================================
 */

.contact-form {
    width: 100%;
}


/**
 * ==========================================================
 * 1行
 * ==========================================================
 *
 * 左：
 * 項目名＋必須
 *
 * 右：
 * 入力フィールド
 */

.contact-form__row {
    display: grid;

    grid-template-columns:
        210px
        minmax(0, 1fr);

    gap: 30px;

    align-items: start;

    margin-bottom: 28px;
}


/**
 * ==========================================================
 * ラベルエリア
 * ==========================================================
 */

.contact-form__label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    font-size: 15px;
    line-height: 1.6;
}


/**
 * ==========================================================
 * 必須
 * ==========================================================
 */

.contact-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 34px;
    min-height: 25px;

    margin-left: 15px;

    padding:
        3px
        6px;

    background: #e60033;

    color: #fff;

    font-size: 11px;
    line-height: 1;
}


/**
 * ==========================================================
 * 入力欄
 * ==========================================================
 */

.contact-form__field {
    min-width: 0;
}


.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {

    width: 100%;

    padding:
        10px
        12px;

    border:
        1px
        solid
        #999;

    border-radius: 0;

    background: #fff;

    color: #222;

    font-family: inherit;
    font-size: 15px;

    line-height: 1.5;
}


/**
 * focus
 */

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {

    outline:
        2px
        solid
        #cbb89f;

    outline-offset: 1px;
}


/**
 * placeholder
 */

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {

    color: #aaa;
}


/**
 * ==========================================================
 * 通常input幅
 * ==========================================================
 */

.contact-form__field > input {
    max-width: 300px;
}


/**
 * ==========================================================
 * inline
 * ==========================================================
 *
 * 年齢・メールアドレスなど、
 * 入力欄横に補足を表示する場合
 */

.contact-form__field--inline {
    display: flex;
    align-items: center;

    gap: 18px;
}


.contact-form__field--inline input {
    flex:
        0
        1
        520px;

    max-width: none;
}


/**
 * 補足
 */

.contact-form__note {
    flex-shrink: 0;

    font-size: 14px;

    color: #777;
}


/**
 * ==========================================================
 * 住所
 * ==========================================================
 */

.contact-address {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


/**
 * 住所1行
 */

.contact-address__row {
    display: grid;

    grid-template-columns:
        135px
        minmax(0, 1fr);

    align-items: center;

    gap: 15px;
}


/**
 * 住所項目名
 */

.contact-address__row label {
    font-size: 14px;
}


/**
 * 郵便番号
 */

.contact-address__row #zip {
    max-width: 240px;
}


/**
 * 都道府県
 */

.contact-address__row select {
    max-width: 240px;
}


/**
 * 市区町村以下
 * 建物名
 */

.contact-address__row #address1,
.contact-address__row #address2 {

    max-width: none;
}


/**
 * ==========================================================
 * テキストエリア
 * ==========================================================
 */

.contact-form__row--textarea {
    align-items: start;
}


.contact-form__field textarea {
    min-height: 150px;

    resize: vertical;
}


/**
 * ==========================================================
 * 個人情報保護方針
 * ==========================================================
 */

.contact-form__privacy {
    margin-top: 65px;

    font-size: 13px;
    font-weight: 500;

    text-align: center;
}


.contact-form__privacy p {
    margin: 0;
}


.contact-form__privacy a {
    font-weight: 600;

    text-decoration: underline;
}


.contact-form__privacy a:hover {
    text-decoration: none;
}


/**
 * ==========================================================
 * ボタン
 * ==========================================================
 */

.contact-form__buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 50px;
}


/**
 * ボタン共通
 */

.contact-form__button {
    min-width: 165px;
    min-height: 42px;

    padding:
        8px
        20px;

    border:
        1px
        solid
        #222;

    border-radius: 8px;

    background: #fff;

    color: #222;

    font-family: inherit;
    font-size: 14px;

    cursor: pointer;

    transition:
        background-color
        0.2s
        ease,
        color
        0.2s
        ease;
}


/**
 * hover
 */

.contact-form__button:hover {
    background: #222;
    color: #fff;
}


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

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

    .contact-page {
        padding:
            65px
            0
            85px;
    }


    .contact-inner {
        width: min(
            950px,
            calc(100% - 50px)
        );
    }


    .contact-page__title {
        margin-bottom: 35px;

        font-size: 25px;
    }


    .contact-page__lead {
        margin-bottom: 55px;
    }


    /**
     * 左ラベル幅を少し縮小
     */

    .contact-form__row {
        grid-template-columns:
            170px
            minmax(0, 1fr);

        gap: 25px;
    }

}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    /**
     * ページ
     */

    .contact-page {
        padding:
            50px
            0
            70px;
    }


    /**
     * コンテンツ幅
     */

    .contact-inner {
        width:
            calc(
                100%
                -
                30px
            );
    }


    /**
     * タイトル
     */

    .contact-page__title {
        margin-bottom: 28px;

        font-size: 23px;
    }


    /**
     * 導入
     */

    .contact-page__lead {
        margin-bottom: 40px;

        font-size: 14px;

        text-align: left;
    }


    /**
     * ======================================================
     * FORM
     * ======================================================
     *
     * PC：
     *
     * 項目 | 入力欄
     *
     * SP：
     *
     * 項目
     * 入力欄
     */

    .contact-form__row {
        display: block;

        margin-bottom: 28px;
    }


    /**
     * ラベル
     */

    .contact-form__label {
        justify-content: flex-start;

        min-height: auto;

        margin-bottom: 9px;

        font-size: 14px;
    }


    /**
     * 必須
     */

    .contact-required {
        min-width: 32px;
        min-height: 22px;

        margin-left: 10px;

        font-size: 10px;
    }


    /**
     * 入力欄
     */

    .contact-form__field > input {
        max-width: none;
    }


    /**
     * inline解除
     */

    .contact-form__field--inline {
        display: block;
    }


    .contact-form__field--inline input {
        width: 100%;
    }


    /**
     * 補足
     */

    .contact-form__note {
        display: block;

        margin-top: 7px;

        font-size: 12px;
    }


    /**
     * ======================================================
     * 住所
     * ======================================================
     */

    .contact-address__row {
        display: block;
    }


    .contact-address__row label {
        display: block;

        margin-bottom: 6px;

        font-size: 13px;
    }


    .contact-address__row input,
    .contact-address__row select,
    .contact-address__row #zip,
    .contact-address__row #address1,
    .contact-address__row #address2 {

        width: 100%;

        max-width: none;
    }


    /**
     * テキストエリア
     */

    .contact-form__field textarea {
        min-height: 160px;
    }


    /**
     * 個人情報保護方針
     */

    .contact-form__privacy {
        margin-top: 45px;

        font-size: 12px;

        line-height: 1.8;

        text-align: left;
    }


    /**
     * ======================================================
     * ボタン
     * ======================================================
     */

    .contact-form__buttons {
        gap: 8px;

        margin-top: 35px;
    }


    .contact-form__button {
        flex: 1;

        min-width: 0;

        padding:
            8px
            10px;

        font-size: 13px;
    }

}
/**
 * ==========================================================
 * 個人情報保護方針への同意
 * ==========================================================
 */

.contact-form__privacy {
    margin-top: 65px;

    text-align: center;
}


/**
 * 説明文
 */

.contact-form__privacy-text {
    margin: 0;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
}


.contact-form__privacy-text a {
    font-weight: 600;

    text-decoration: underline;
}


.contact-form__privacy-text a:hover {
    text-decoration: none;
}


/**
 * ==========================================================
 * 同意チェック
 * ==========================================================
 */

.contact-form__agree {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    font-size: 14px;

    cursor: pointer;
}


/**
 * checkbox
 */

.contact-form__agree input[type="checkbox"] {
    width: 18px;
    height: 18px;

    margin: 0;

    cursor: pointer;

    accent-color: #222;
}


/**
 * ==========================================================
 * Smartphone
 * ==========================================================
 */

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

    .contact-form__privacy {
        margin-top: 45px;

        text-align: left;
    }


    .contact-form__privacy-text {
        font-size: 12px;
    }


    .contact-form__agree {
        align-items: flex-start;

        margin-top: 18px;

        font-size: 13px;
        line-height: 1.6;
    }


    .contact-form__agree input[type="checkbox"] {
        flex-shrink: 0;

        margin-top: 2px;
    }

}
/**
 * ==========================================================
 * CONTACT FORM
 * Validation
 * ==========================================================
 */


/**
 * エラーになった入力欄
 */

.contact-form input.is-error,
.contact-form select.is-error,
.contact-form textarea.is-error {
    border-color: #d60000;
}


/**
 * エラーメッセージ
 */

.contact-error {
    margin:
        6px
        0
        0;

    color: #d60000;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.6;
}


/**
 * 同意欄
 */

.contact-form__agree + .contact-error {
    text-align: center;
}


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

    .contact-error {
        font-size: 12px;
    }

    .contact-form__agree + .contact-error {
        text-align: left;
    }

}
/**
 * ==========================================================
 * お問い合わせ確認画面
 * ==========================================================
 */

.contact-confirm {
    padding:
        75px
        0
        100px;
}


.contact-confirm #formWrap {
    width: 100%;
    margin: 0;

    color: #222;

    font-size: 14px;
    line-height: 1.8;
}


.contact-confirm .formTable {
    width: 100%;

    margin:
        0
        auto
        40px;

    border-collapse: collapse;
}


.contact-confirm .formTable th,
.contact-confirm .formTable td {
    padding:
        15px
        18px;

    border:
        1px
        solid
        #d3d0ca;
}


.contact-confirm .formTable th {
    width: 30%;

    background: #efede8;

    font-weight: 500;

    text-align: left;
}


.contact-confirm .formTable td {
    background: #fff;
}


/**
 * エラー
 */

.contact-confirm .error_messe {
    color: #d60000;
}


/**
 * ボタン
 */

.contact-confirm input[type="submit"],
.contact-confirm input[type="button"] {

    min-width: 165px;

    margin:
        5px;

    padding:
        10px
        20px;

    border:
        1px
        solid
        #222;

    border-radius: 8px;

    background: #fff;

    color: #222;

    font-family: inherit;

    cursor: pointer;
}


.contact-confirm input[type="submit"]:hover,
.contact-confirm input[type="button"]:hover {

    background: #222;

    color: #fff;
}


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

    .contact-confirm {
        padding:
            50px
            0
            70px;
    }


    .contact-confirm .formTable th,
    .contact-confirm .formTable td {
        display: block;

        width: 100%;

        box-sizing: border-box;
    }


    .contact-confirm .formTable th {
        border-bottom: 0;
    }


    .contact-confirm input[type="submit"],
    .contact-confirm input[type="button"] {

        width: 100%;

        margin:
            5px
            0;

    }

}
/**
 * ==========================================================
 * お問い合わせ完了
 * ==========================================================
 */

.thanks-page {
    padding:
        90px
        0
        120px;
}


.thanks-page__inner {
    width: min(
        950px,
        calc(100% - 40px)
    );

    margin-inline: auto;

    text-align: center;
}


.thanks-page__title {
    margin:
        0
        0
        50px;

    font-size: 28px;
    font-weight: 600;
}


.thanks-page__title span {
    display: inline-block;

    padding-bottom: 4px;

    border-bottom:
        2px
        solid
        #222;
}


.thanks-page__message {
    font-size: 15px;
    line-height: 2;
}


.thanks-page__message p {
    margin: 0;
}


.thanks-page__message p + p {
    margin-top: 8px;
}


.thanks-page__button {
    margin-top: 50px;
}


.thanks-page__button a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 200px;

    min-height: 44px;

    padding:
        8px
        20px;

    border:
        1px
        solid
        #222;

    border-radius: 8px;

    color: #222;

    text-decoration: none;
}


.thanks-page__button a:hover {
    background: #222;

    color: #fff;
}


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

    .thanks-page {
        padding:
            60px
            0
            80px;
    }


    .thanks-page__inner {
        width: calc(100% - 30px);
    }


    .thanks-page__title {
        margin-bottom: 35px;

        font-size: 23px;
    }


    .thanks-page__message {
        font-size: 14px;

        text-align: left;
    }

}