/* ===== 基本設定 ===== */
:root {
    /* --main-color: #001f5f; メインカラー（ネイビー） */
    --main-color: #073c71; /* メインカラー（ネイビー） */
    --text-color: #333333; /* 基本テキストカラー */
    --background-color: #FFFFFF; /* 背景色 */
    --light-gray-bg: #f5f7fa; /* 薄いグレーの背景 */

    --fw-bold: 500;
    --fw-normal: 200;

    font-size: 10px;
}

html {
    scroll-behavior: smooth; /* スムーズスクロールを有効に */
}
@media screen and (max-width: 374.98px){
    :root{
        font-size: 8px;
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.8;
    font-size: 1.6rem;
    font-weight: var(--fw-normal);
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
h1,h2,h3,h4,h5,h6{
    font-weight: var(--fw-bold);
}

.pc-nav{
    display: none;
}
@media screen and (min-width: 640px){
    .sp-nav{
        display: none;
    }
    .pc-nav{
        display: block;
    }
    .sp-br{
        display: none;    
    }

}

/* ===== 共通クラス ===== */
.content-section {
    padding: 8rem 3rem;
    max-width: 110rem;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    text-align: center;
    font-size: 3.2rem;
    font-weight: var(--fw-bold);
    margin-top: 0;
    margin-bottom: 4rem;
    color: var(--main-color);
    line-height: 1;
}
.title-en{
    font-size: 2.0rem;
    font-weight: var(--fw-normal);
}
.section-lead {
    font-size: clamp(1.2rem, 2.7vw, 1.6rem);
    text-align: center;
    max-width: 80rem;
    margin: 0 auto 4rem;
}

.note{
    font-size: 1.2rem;
}

.bg-light-gray {
    background-color: var(--light-gray-bg);
}


/* ===== ヘッダー ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    z-index: 100;
    box-shadow: 0 .2rem .5rem rgba(0,0,0,0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 120rem;
    margin: 0 auto;
    padding: 1rem 1rem;
}

.logo img {
    height: 4.8rem; /* ロゴの高さを調整 */
}

.global-nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-nav li {
    margin-left: 3rem;
}

.global-nav a {
    font-weight: var(--fw-bold);
    transition: color 0.3s;
}

.global-nav a:hover {
    color: var(--main-color);
}

/* ===== メインビジュアル ===== */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 70vh;
    min-height: 50rem;
    padding-top: 6rem; /* ヘッダーの高さ分 */
    color: #fff; /* ヒーロー内の文字色を白で統一 */
    /* 背景画像 + オーバーレイ（濃度は rgba の 0.45 を調整） */
    background: linear-gradient(to bottom right, rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
                url('../images/hero_background.jpg') center/cover no-repeat;
}
.hero-content{
    
}
.hero-content-inner{
    padding: 1em 1em;
    background: transparent;
}


.hero-catchphrase {
    font-size: clamp( 1.6rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.hero-catchphrase strong {
    font-weight: var(--fw-bold);
    color: inherit;
}

.hero-description {
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    margin: 2rem 0 0;
}

.hero-catchphrase,
.hero-description {
    text-shadow: 0 .2rem .6rem rgba(0,0,0,0.35);
}

.hero-description { opacity: 0.95; }

.cta-button {
    margin-top: 2rem;
    display: inline-block;
    background-color: var(--main-color);
    color: white;
    padding: 1.5rem 4rem;
    border-radius: .5rem;
    font-weight: var(--fw-bold);
    transition: background-color 0.3s, transform 0.3s;
}

.cta-button:hover {
    background-color: #003380;
    transform: translateY(-.2rem);
}

/* ===== 事業内容 ===== */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-list li {
    background-color: #fff;
    padding: 3rem;
    border-radius: .5rem;
    box-shadow: 0 .4rem 1.5rem rgba(0,0,0,0.05);
    border-top: .4rem solid var(--main-color);
    /* overflow-wrap: break-word; */

    /* ジャスティファイ・禁則関係 */
    text-align: justify;
    /* line-break: strict; */
    /* word-break: auto-phrase; */
    overflow-wrap: anywhere;

    /* ここから“きれい組み”の新顔たち（効けばラッキー、効かなくても害なし） */
    hanging-punctuation: allow-end;
    text-autospace: ideograph-alpha ideograph-numeric;
    text-spacing-trim: space-all;
    /* 
    禁則・区切り・細かい気遣い
	•	ぶら下げ（約物が外に出るのを許可）：hanging-punctuation: allow-end;
	•	英数と全角の間の自動アキ：text-autospace: ideograph-alpha ideograph-numeric;
	•	和文と英数の間に程よいスペースを自動調整（対応が進行中。効けば嬉しい系）
	•	行頭・行末の余計なスペースを削る：text-spacing-trim: space-all;
	•	両端揃え時の“端の空き”を詰める（こちらも新しめ）
	•	ハイフネーション（英語文）：hyphens: auto;（日本語では通常不要）
	•	バランス取り（見出し2行など）：text-wrap: balance;
	•	見出しを綺麗に2行に分配。本文では通常不要
	•	リバース保険：overflow-wrap: anywhere;
	•	どうしても収まらない長い文字列のための保険
     */
}

.service-list h3 {
    margin-top: 0;
    font-size: 2rem;
    color: var(--main-color);
    
    /* 見出しを綺麗に2行に分配。本文では通常不要 */
    text-align: left;
    /* text-wrap: balance; */
}

/* ===== 私たちの強み ===== */
/* .strength-cards {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
} */
.strength-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    justify-content: space-between;
    gap: 3rem;
}


.card {
    flex: 1;
    background-color: white;
    padding: 3rem;
    border-radius: .5rem;
    box-shadow: 0 .4rem 1.5rem rgba(0,0,0,0.05);
}

.card h3 {
    margin-top: 0;
    color: var(--main-color);
}

.card p{
    text-align: justify;
}
/* ===== 会社概要 ===== */
.about-content {
    display: flex;
    gap: 4rem;
    margin-bottom: 4rem;
}

.representative-greeting {
    flex: 1;
}

.company-info {
    flex: 1;
    max-width: 80rem;
    margin-inline: auto;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
}

.info-table th, .info-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 1.5rem 1rem;
    text-align: left;
}

.info-table th {
    font-weight: var(--fw-bold);
    width: 28%;
}
.info-table td{

}

.map-container {
    text-align: center;
}

.map-container iframe {
    width: 100%;
    max-width: 80rem;
    height: 40rem;
    border: 1px solid #e0e0e0;
}

/* ===== お問い合わせ ===== */
.contact-form {
    max-width: 70rem;
    margin: 0 auto;
}

.form-item {
    margin-bottom: 2rem;
}

.form-item label {
    display: block;
    font-weight: var(--fw-bold);
    margin-bottom: .5rem;
}

.required {
    background-color: var(--main-color);
    color: white;
    font-size: 1.2rem;
    padding: .2rem .6rem;
    border-radius: .3rem;
    margin-left: .5rem;
    font-weight: normal;
}

.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item select,
.form-item textarea {
    width: 100%;
    padding: 1.2rem;
    border: 1px solid #ccc;
    border-radius: .5rem;
    font-size: 1.6rem;
    font-family: inherit;
}

.radio-group {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.radio-group input[type="radio"] {
    margin-right: .6rem;
}

.form-submit {
    text-align: center;
}

.privacy-policy-agreement {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.submit-button {
    background-color: var(--main-color);
    color: white;
    border: none;
    padding: 1.5rem 6rem;
    border-radius: .5rem;
    font-weight: var(--fw-bold);
    font-size: 1.6rem;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.submit-button:hover {
    background-color: #003380;
    transform: translateY(-.2rem);
}

/* ===== フッター ===== */
.site-footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 4rem;
    text-align: center;

}

.footer-inner {
    justify-content: space-between;
    max-width: 110rem;
    margin: 0 auto;
    padding-bottom: 3rem;
    border-bottom: 1px solid #34495e;
}
.footer-info{
    margin-bottom: 4rem;
}
@media screen and (min-width: 768px){
    .footer-inner {
        display: flex;
        text-align: left;
    }
    .footer-links{
        justify-content: flex-start;
    }
}



.footer-logo img {
    height: 2.2rem;
    margin-bottom: .5rem;
}

.footer-links {
    display: flex;
    gap: 5rem;
    justify-content: center;
}

.footer-nav ul, .related-links ul {
    margin: 0;
    padding: 0 .5rem;
    list-style: none;
    min-width: 11em;
}

.footer-nav h4,
.related-links h4 {
    margin-top: 0;
    color: white;
    padding-bottom: .5em;
    margin-bottom: .5em;
    border-bottom: 1px solid #fff;
}
.footer-nav li,
.related-links li {
    text-align: left;
}
@media screen and (max-width: 480px){

    .footer-links {
        gap: initial;
        justify-content: space-between;
    }
}
@media screen and (max-width: 440px){
    .site-footer{
        padding-inline: 2rem;
    }
    .footer-inner {
        text-align: center;
    }
    .footer-links{
        display: block;
        width: 60%;
        margin-inline: auto;
    }
    .footer-nav{
        text-align: center;
        margin-bottom: 2em;
    }
    .footer-nav li,
    .related-links li{
        text-align: center;
    }
}


.footer-nav a, .related-links a {
    color: #bdc3c7;
    transition: color 0.3s;
}


.footer-nav a:hover, .related-links a:hover {
    color: white;
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    font-size: 1.4rem;
    color: #95a5a6;
}


/* drawer.js */
.drawer .drawer-nav{
    box-sizing: border-box;
    width: 25rem;
    z-index: 10000;
    right: -25rem;
    padding: 1em;
    background: #e8f0f9;
    position: absolute;
    height: 100vh;
}
.drawer-hamburger {
    width: 3rem;
}
.drawer-brand{
    font-size: 2.4rem;
    border-bottom: 1px solid #ccc;
}
.drawer-menu-item{
    font-size: 1.6rem;
    border-bottom: 1px solid #ccc;
}

/* PP */
.readmore-container {
    position: relative;
    max-height: 5em;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 1em;
    margin-bottom: 1em;
}
.readmore-container .preview{
    padding: .5em 1.5em;
    margin: 0;
    line-height: 1.3;
    font-size: 1.6rem;
}
.readmore-container .preview .note{
    font-size: 1.3rem;
}
.readmore-text {
    display: none;
    padding: 1.5em;
}
.readmore-text h2{
    margin-top: 0;
    font-size: 2rem;
}
.readmore-text h3{
    font-size: 1.6rem;
    line-height: 1.5;
    margin-block: 1.2em 0;
}
.readmore-text p{
    font-size: 1.4rem;
    line-height: 1.5em;
    margin-block: .5em;
}
.readmore-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5em;
    background: linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0) 40%,
            rgba(255,255,255,1) 100%
            );}
.readmore-container.expanded {
    max-height: initial;
}

.readmore-container.expanded .readmore-text{
    display: block;

}
.readmore-container.expanded .preview,
.readmore-container.expanded .readmore-overlay {
    display: none;
}

/* PP agree */
.agree-outer{
    display: block;
    margin: 1em auto;
}

.submit-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}


/* ハニーポット */
/* 既存の style.css に追加（ハニーポットを画面外へ） */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}