/* ===== base ===== */
body {
    margin: 0;/* 要素と要素の距離を空けるもの */
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic", sans-serif;/* フォントの字体 */
    line-height: 1.7;/* 行と行の間隔（行間） */
    color: #222;/* 文字の色 */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    z-index: 100;
}

header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

header h1 a {
    color: #111;
}

a {
    color: #222;
    text-decoration: none;/* 文字の装飾でnoneは下線を消す */
    transition: color 0.3s ease,opacity 0.3s ease;
}

a:hover {/* マウスを乗せたときの動き*/
    color: #0f5cc0;
}

section {/* トップページの共通幅*/
    padding: 80px 20px;
}

.concept,
.service {
    max-width: 1100px;
    margin: 0 auto;
}

.concept h2,
.service h2 {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.3;
    margin: 0 0 24px;
    letter-spacing: 0.03em;
}

.concept p,
.service p {
    font-size: 19px;
    margin: 0;
    color: #444;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;/*  */
}

/* ===== スマホ（デフォルト） ===== */
.nav-list {
    display: flex;/* この要素の中身は、柔軟に並び替えてOKな状態にするプロパティ */
    flex-direction: column;/* 縦並び */
    gap: 16px;
}

/* ===== PC（768px以上） ===== */
@media screen and (min-width: 768px) {
    .nav-list {
        flex-direction: row;/* 横並び */
        gap: 24px;
    }
}

.nav-list a{
    color:#333;
    text-decoration: none;
    transition: 0.3s;
}

.nav-list a:hover{
    color:#0066cc;
}


/* ここからはindex.htmlのdiv class="fv__inner" h2に向けて書いている */
.fv__inner h2{
    font-family: "Montserrat", sans-serif;
    font-size: 72px;
    color: #fff;
}

/* ここからはindex.htmlのdiv class="fv__inner" pに向けて書いている */
.fv__inner p{
    font-family: "Montserrat",  sans-serif;
    font-size: 60px;
    color: rgba(225, 225, 225, 0.92);
}

/* ここからはindex.htmlのfvの画像に向けて書いている */

.fv{
    position: relative;
        /*中にある: :before や絶対配置の基準点になる これがないと::before がページ全体に広がる 「fvの中だけで完結」させるために必須 イメージ 「ここからがFVの世界です」という宣言*/
    min-height: 100vh;/* 画面の高さ分（不要なら調整） */
    min-height: 100svh;
    display: flex;
    align-items: center;
    background-image: url("../2.jpg");/* 画面を入れている*/
    background-size: cover;/* 画面いっぱいに“背景化” */
    background-position: center;/* 中央基準でトリミング */
    background-repeat: no-repeat;
}

.fv::before {/* 黒いフィルター */
    content: "";/*擬似要素を表示させるための必須記述 中身は不要なので空文字*/
    position: absolute;/* 親（.fv）を基準に自由配置*/
    inset: 0;/*上下左右をすべて0=top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        fvいっぱいに広げる*/
    background: rgba(0, 0, 0, 0.35);/*黒（0,0,0） 透明度35% 画像を少し暗くして文字を読みやすく*/
    /* 好みで調整 */
    z-index: 1;
}

/* fvを覆う、透明な黒い板を1枚置いている */

.fv__inner {/*文字エリア*/
    position: relative;
    /* フィルターより前に出す */
    z-index: 2;
    padding: 80px 16px;
    color: #fff;
    max-width: 1100px;
    margin: 0 auto;/* 横中央寄せ */
}

/* フィルターの上に文字を表示する安全地帯*/
/* ここまではindex.htmlのfvの画像に向けて書いている */

/* ボタン全体を中央に */
.service-btn {
    text-align: center;
    margin-top: 10px;
}

/* ボタンデザイン */
.btn-service {
    display: inline-block;
    padding: 16px 60px;
    border: 2px solid #000;
    /* 黒枠 */
    color: #fff;
    /* 文字白 */
    background: #000;
    /* 背景黒（←ここ重要） */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 4px;
    transition: 0.3s;
}

/* ここからはservice.htmlに向けて書いている */
.card-list{
    display: grid;/* 格子（表）を作るプロパティ */
    grid-template-columns: repeat(3, 1fr);/* 「横方向に、同じ列幅の列を3つ作る」という意味 */
    gap: 16px;
    margin-top: 16px;
}

.card{
    background: gray;
    border: 1px solid #ddd;/* 太さ1pxの実線を白色で枠線を付ける */
    padding: 16px;
    border-radius: 8px;
}

.card h3{
    margin-top: 0;
}

.card-link {
    display: inline-block;/* 横に並べれるけど、箱して扱える表示方法 */
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #0066cc;
    border-radius: 6px;/* 要素の4つの角を丸くするプロパティ */
}

.card:hover{
    transform: translateY(-5px);/* 要素を上に5px動かすプロパティ */
}

/* スマホは1列 */
@media (max-width: 768px) {
    .card-list {
        grid-template-columns: 1fr;
    }
}

/* ここまではservice.htmlに向けて書いている */

/* ===== service page 全体 ===== */
.service-page {
    padding: 80px 20px;
    background: #fff;
}

.service-page__inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ① 事業内容の文字を大きく */
.service-page__label {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

/* ② service を事業内容の下に詰める */
.service-page__sub {
    margin: 4px 0 20px;
    font-size: 16px;
    color: #777;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.service-page__title {
    margin: 0 0 56px;
    font-size: 35px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}

.service-page__label,
.service-page__sub,
.service-page__title {
    text-align: center;
}

/* 各サービスブロック */

.service-block {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    padding: 32px;
    background: #f5f5f5;
    /* ←薄グレー */
    border-radius: 12px;
}

.service-block {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-block__text {
    margin-top: 12px;
}

.service-block {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 56px;
}

/* ⑥ 左に画像を入れる */
.service-block__image {
    flex: 0 0 320px;
}

.service-block__image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* 右側のテキストエリア */
.service-block__content {
    flex: 1;
}

/* ③ ④ 01と02をタイトル左横に */
.service-block__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* ⑤ 01と02をタイトルより2px大きく */
.service-block__number {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    color: #999;
    line-height: 1;
}

.service-block__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

.service-block__text {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
    color: #444;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .service-page {
        padding: 60px 20px;
    }

    .service-page__label {
        font-size: 30px;
    }

    .service-page__sub {
        margin: 2px 0 16px;
    }

    .service-page__title {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .service-block {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 48px;
    }

    .service-block__image {
        flex: none;
        width: 100%;
    }

    .service-block__image img {
        height: 200px;
    }

    .service-block__heading {
        gap: 10px;
        margin-bottom: 12px;
    }

    .service-block__number {
        font-size: 28px;
    }

    .service-block__title {
        font-size: 26px;
    }
}

/* ハンバーガーボタン（PCでは隠す） */
.hamburger {
    display: none;
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 18px;
}

/* スマホだけ有効 */
@media (max-width: 768px) {
    .hamburger {
        display: inline-block;
    }

    /* いったんナビは隠す */
    .site-nav {
        display: none;
        margin-top: 12px;
    }

    /* 開いたら表示 */
    .site-nav.is-open {
        display: block;
    }

    /* ナビは縦並び（今の状態を維持） */
    .site-nav li {
        display: block;
        margin: 8px 0;
    }
}

/* ===== about page ===== */

/* ===== origin section ===== */
.origin {
    padding: 80px 20px;
    background: #fff;
}

.origin__inner {
    max-width: 800px;
    /* ←読みやすい幅 */
    margin: 0 auto;
    /* ←中央寄せ */
    text-align: center;
    /* ←タイトル中央 */
}

/* タイトル */
.origin__title {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 700;
    color: #111;
}

/* サブタイトル */
.origin__subtitle {
    margin: 0 0 32px;
    font-size: 24px;
    font-weight: 600;
    color: #555;
}

/* 本文 */
.origin__text {
    text-align: left;
    /* ←本文は左揃えが読みやすい */
    font-size: 20px;
    line-height: 2;
    /* ←ここが重要（読みやすさ） */
    color: #444;
}

.about-page {
    padding: 80px 20px;
    background: #fff;
}

.about-page__inner {
    max-width: 900px;
    margin: 0 auto;
}

/* ① 会社概要をセンター配置 */
.about-page__title {
    margin: 0 0 48px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

/* 会社概要一覧 */
.about-info {
    margin: 0;
    padding: 0;
    border-top: 1px solid #ddd;
}

/* 1行ごとの設定 */
.about-info__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    column-gap: 32px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid #ddd;
    /* ②〜⑥ アンダーライン */
}

/* 左側の項目名 */
.about-info__term {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

/* 右側の内容 */
.about-info__desc {
    margin: 0;
    font-size: 24px;
    color: #444;
    line-height: 1.8;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .about-page {
        padding: 60px 20px;
    }

    .about-page__title {
        font-size: 28px;
        margin-bottom: 36px;
    }

    .about-info__row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 18px 0;
    }

    .about-info__term {
        font-size: 15px;
    }

    .about-info__desc {
        font-size: 15px;
    }
}

/* ===== Day18: tel & map ===== */
.map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .map iframe {
        height: 260px;
    }
}

/* ===== contact page ===== */

/* 全体 */
.contact-page {
    background: #fff;
    color: #222;
}

/* 上の説明エリア */
.contact-page section:first-of-type {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 20px 32px;
    text-align: center;
}

.contact-page h2 {
    margin: 0 0 16px;
    font-size: clamp(34px, 4vw, 42px);
    font-weight: 700;
    color: #111;
}

.contact-page p {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.8;
    color: #555;
}

.contact-page a {
    color: #0f5cc0;
    font-weight: 700;
    transition: 0.3s;
}

.contact-page a:hover {
    opacity: 0.7;
}

/* フォームエリア */
.contact-page section:last-of-type {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px 100px;
}

.contact-page form {
    background: #f8f9fb;
    border: 1px solid #e7e7e7;
    border-radius: 16px;
    padding: 36px 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

/* 入力ブロック */
.contact-page form>div {
    margin-bottom: 24px;
}

.contact-page form>div:last-child {
    margin-bottom: 0;
    text-align: center;
}

/* ラベル */
.contact-page label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.contact-page label span {
    color: #d11a2a;
    font-size: 14px;
}

/* 入力欄 */
.contact-page input,
.contact-page textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8dce2;
    border-radius: 10px;
    background: #fff;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
    outline: none;
    transition: 0.3s;
}

/* フォーカス */
.contact-page input:focus,
.contact-page textarea:focus {
    border-color: #0f5cc0;
    box-shadow: 0 0 0 4px rgba(15, 92, 192, 0.12);
}

/* textarea */
.contact-page textarea {
    resize: vertical;
    min-height: 180px;
}

/* ボタン */
.contact-page button {
    display: inline-block;
    min-width: 220px;
    padding: 16px 32px;
    border: 1px solid #111;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: 0.3s;
}

.contact-page button:hover {
    background: #fff;
    color: #111;
    transform: translateY(-2px);
}

/* スマホ */
@media screen and (max-width: 767px) {
    .contact-page section:first-of-type {
        padding: 60px 20px 24px;
    }

    .contact-page section:last-of-type {
        padding: 0 20px 72px;
    }

    .contact-page form {
        padding: 28px 18px;
        border-radius: 12px;
    }

    .contact-page button {
        width: 100%;
        min-width: auto;
    }
}

header,
footer {
    background: #f5f5f5;
    padding: 16px;
}