@charset "utf-8";

/* ==================================================
   共通設定
================================================== */
.page-company .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* テーマカラー定義 */
.theme-ukiuki .loc-btn .icon {
    background-color: #F4B942;
}

.theme-ukiuki .loc-btn .txt {
    color: #F4B942;
}

.theme-house .loc-btn .icon {
    background-color: #FA8028;
}

.theme-house .loc-btn .txt {
    color: #FA8028;
}

.theme-eyecare .loc-btn .icon {
    background-color: #1A365D;
}

.theme-eyecare .loc-btn .txt {
    color: #1A365D;
}

/* ==================================================
   ##01: タイトル（ネイビー帯）
================================================== */
.page-head {
    margin-top: 100px;
    padding: 50px 0;
    background-color: #1A365D;
    text-align: center;
}

.page-head .ttl {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.page-head .ttl .en {
    font-size: 28px !important;
    color: #ffffff !important;
    opacity: 0.4 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
}

.page-head .ttl .jp {
    font-size: 42px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}


/* ==================================================
   COMPANY：トップメッセージ画像のサイズ＆比率統一（巨大化防止）
================================================== */
/* ★ body.page-about から body.page-company に変更！ */
body.page-company .message-top-grid .message-right {
    width: 100% !important;
    max-width: 380px !important;
    /* 横幅の最大値 */
    flex-shrink: 0 !important;
}

/* 画像が入るボックスを「横長（4:3）」に固定 */
body.page-company .message-top-grid .message-right .img-box {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    /* 1:1ではなく横長4:3に固定 */
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* 縦長画像でも枠内に綺麗に収まるようトリミング */
body.page-company .message-top-grid .message-right .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 写真が歪まず綺麗にはまります */
    display: block !important;
}


/* ==================================================
   ##02: メッセージセクション（2カラム・SVG配置）
================================================== */
.sec-about-message {
    padding: 100px 0 80px;
}

.message-top-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
    text-align: left !important;
}

.message-top-grid .message-left {
    flex: 1 !important;
    text-align: left !important;
    position: relative !important;
}

.message-left .catch {
    font-size: 3.2rem !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    color: #030303 !important;
    font-weight: 700 !important;
}

.message-left .txt-box p {
    font-size: 1.6rem !important;
    line-height: 2.2 !important;
    color: #030303 !important;
    font-weight: 700 !important;
}

.message-top-grid .message-right {
    width: 480px !important;
    max-width: 45% !important;
    flex-shrink: 0 !important;
}

.message-top-grid .message-right .img-box {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.message-top-grid .message-right .img-box img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* SVG装飾配置 */
.message-left .deco-svg {
    position: absolute !important;
    width: 61px !important;
    height: 61px !important;
    z-index: 1 !important;
}

.message-left .deco-svg svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.message-left .deco-top-right {
    top: -40px !important;
    right: 0 !important;
}

.message-left .deco-bottom-left {
    bottom: -40px !important;
    left: -60px !important;
}

/* ==================================================
   スマホ用：装飾SVGの位置・見切れ修正
================================================== */
@media screen and (max-width: 767px) {

    /* ① 右上SVG：少し小さくして画面右上にスッキリ配置 */
    .message-left .deco-top-right {
        top: -25px !important;
        right: 10px !important;
        width: 45px !important;
        height: 45px !important;
    }

    /* ② 左下SVG：絶対配置を解除して、文章と写真の間に配置（見切れ防止） */
    .message-left .deco-bottom-left {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        /* ★ -60px を 0 にして画面内に収める */
        right: auto !important;
        transform: none !important;
        margin-top: 15px !important;
        /* 文章との隙間 */
        margin-bottom: 25px !important;
        /* 下の写真との隙間 */
        width: 45px !important;
        height: 45px !important;
        display: block !important;
    }
}

/* ==================================================
   ##03: 会社概要テーブル
================================================== */
.sec-company-info {
    padding: 40px 0 80px;
}

.company-table {
    max-width: 960px;
    margin: 0 auto;
    background-color: #FFFFFF !important;
    border-radius: 40px !important;
    padding: 70px 80px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
}

.company-table .row {
    display: flex;
    padding: 20px 0;
    border: none !important;
    align-items: flex-start;
}

/* 左側見出し（会社名・代表取締役など） */
.company-table dt {
    width: 200px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #030303 !important;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

/* 右側データ全体（中身のpやspan、liにも一括で効かせる） */
.company-table dd,
.company-table dd p,
.company-table dd span,
.company-table dd li {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 16px !important;
    /* ★ここで右側の文字サイズを変更できます（18px等へ調整可） */
    line-height: 1.9 !important;
    color: #030303 !important;
    font-weight: 500 !important;
    margin: 0;
}

/* 沿革（年数とテキストの並び） */
.history-list li {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
}

.history-list li:last-child {
    margin-bottom: 0 !important;
}

.history-list .year {
    width: 100px !important;
    flex-shrink: 0 !important;
}

/* 事業内容の各ブロック余白 */
.business-detail p {
    margin-bottom: 20px !important;
}

.business-detail p:last-child {
    margin-bottom: 0 !important;
}

/* スマホ対応 (767px以下) */
@media (max-width: 767px) {
    .company-table {
        padding: 40px 24px !important;
        border-radius: 24px !important;
    }

    .company-table .row {
        flex-direction: column;
        padding: 14px 0;
        gap: 8px;
    }

    .company-table dt {
        width: 100% !important;
        font-size: 16px !important;
    }

    .company-table dd,
    .company-table dd p,
    .company-table dd span,
    .company-table dd li {
        font-size: 15px !important;
    }

    .history-list li {
        flex-direction: column !important;
        gap: 4px !important;
    }
}

/* ==================================================
   ##04: アクセス・Googleマップ
================================================== */
.sec-company-access {
    padding: 40px 0 80px;
}

.access-box {
    max-width: 1100px !important;
    /* 幅を全開に広げる */
    margin: 0 auto;
    text-align: center;
}

.access-ttl {
    display: inline-block !important;
    background-color: #FA8028 !important;
    color: #ffffff !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    padding: 14px 40px !important;
    margin-bottom: 24px !important;
    border-radius: 0 !important;
    letter-spacing: 0.05em !important;
}

.access-desc {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #030303;
    margin-bottom: 40px;
    font-weight: 700;
}

/* 地図の枠線・角丸・影を消して幅いっぱいに拡大 */
.map-wrap {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto;
    border-radius: 0 !important;
    /* 四角く表示 */
    overflow: hidden;
    box-shadow: none !important;
    /* 影を解除 */
}

.map-wrap iframe {
    width: 100% !important;
    height: 380px !important;
    /* 横長でダイナミックに見せる高さ */
    display: block;
}

/* ==================================================
   ##05: FACILITY 施設のご案内
================================================== */
.sec-company-facility {
    padding: 60px 0 100px;
}

.sec-company-facility .block-ttl {
    text-align: center;
    margin-bottom: 60px;
}

/* テキストの幅に合わせて基準を作る箱 */
.sec-company-facility .ttl-inner {
    display: inline-block;
    position: relative;
    text-align: center;
}

.sec-company-facility .block-ttl .en {
    font-size: 2.8rem;
    color: #ADADAD !important;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3 !important;
}

.sec-company-facility .block-ttl .jp {
    font-size: 2.2rem;
    color: #030303 !important;
    font-weight: 700;
    line-height: 1.4 !important;
}

/* ★追加：右隣に配置する幾何学模様のスタイル */
.sec-company-facility .ttl-deco-svg {
    position: absolute;
    right: -90px;
    /* テキストの右からの距離（離し具合はここで調整） */
    top: 25px;
    /* 上下の位置調整 */
    width: 75px;
    /* 幾何学模様の大きさ */
    height: auto;
}

.sec-company-facility .ttl-deco-svg svg {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ時の位置微調整 */
@media (max-width: 767px) {
    .sec-company-facility .ttl-deco-svg {
        right: -55px;
        top: 20px;
        width: 50px;
    }
}

.facility-head .sub-en {
    font-size: 2.8rem;
    color: #ADADAD !important;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.facility-head .sub-jp {
    font-size: 2.2rem;
    color: #030303 !important;
    font-weight: 700;
}

.facility-head {
    text-align: center;
    margin-bottom: 60px;
}

.facility-head .sub-en {
    font-size: 2.8rem;
    color: #1A365D;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.facility-head .sub-jp {
    font-size: 1.8rem;
    color: #666;
    font-weight: 700;
}

.facility-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.location-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.loc-img {
    width: 45%;
    flex-shrink: 0;
}

.loc-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.loc-info {
    flex: 1;
}

.loc-info .loc-name {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #030303;
}

.loc-info .loc-address {
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 500;
    color: #030303;
}

.loc-btn {
    flex-shrink: 0;
}

.loc-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.loc-btn .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.loc-btn .icon img {
    width: 18px;
    height: auto;
    transition: transform 0.3s ease;
}

.loc-btn a:hover .icon img {
    transform: translateX(6px);
}

.loc-btn a:hover .icon {
    opacity: 0.8;
}

.loc-btn .txt {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* ==================================================
   ##06: バナーエリア（フッター上）
================================================== */
.sec-about-bnr {
    padding: 0 0 100px;
    background-color: #fcf8f5;
}

.sec-about-bnr .bnr-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto;
    padding: 0 20px;
    list-style: none !important;
}

.sec-about-bnr .bnr-item {
    width: 100% !important;
}

.sec-about-bnr .bnr-item a {
    display: block;
}

.sec-about-bnr .bnr-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: opacity 0.3s ease;
    display: block !important;
}

.sec-about-bnr .bnr-item a:hover img {
    opacity: 0.7;
}

/* ==================================================
   スマホ対応 (767px以下)
================================================== */
@media (max-width: 767px) {
    .page-head {
        margin-top: 70px !important;
        padding: 30px 0 !important;
    }

    .page-head .ttl .en {
        font-size: 18px !important;
    }

    .page-head .ttl .jp {
        font-size: 28px !important;
    }

    .sec-about-message {
        padding: 50px 0;
    }

    .message-top-grid {
        flex-direction: column !important;
        gap: 40px !important;
    }

    .message-top-grid .message-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .message-left .catch {
        font-size: 2.2rem !important;
    }

    .company-table .row {
        flex-direction: column;
        gap: 8px;
    }

    .company-table dt {
        width: 100%;
    }

    .history-list li {
        flex-direction: column;
        gap: 4px;
    }

    .location-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .loc-img {
        width: 100%;
    }

    .sec-about-bnr {
        padding: 0 0 60px;
    }

    .sec-about-bnr .bnr-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .page-head {
        margin-top: 70px !important;
        padding: 30px 0 !important;
    }