@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 幅を指定した要素（タグ）にborder、paddingを設定した際に要素が広がってしまうことを防ぐため */
}

body {
    /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    /*   上記は  各OSに適したフォントファミリー */
    /* 今回は、google fontのみ使用 */
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    /* font-weight: 400; */
    color: #222;
    /* サイト全体の文字色を定義しておく */
    line-height: 1;
    /* 文字行間のリセット */
}

ul {
    list-style: none;
    /*   liの装飾を削除する  */
}

a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで持っている下線を消しておく */
}

img {
    max-width: 100%;
    /* 親要素の大きさ以上大きくならず、かつ、自身の原寸大以上に大きくならない */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。他の防ぐ方法としてインライン要素をブロック要素に変える方法もあり */
}

/* ここまでリセットCSS */

/*-----------------------------------------
    max-setting ( レイアウトの大枠 )
-----------------------------------------*/

.container {
    max-width: 1024px;
    /* 最大値、1024px それ以下可変　max-width使用 ->  ma1024*/
    margin: 0 auto;
    /* ブロック要素の中央揃い　m0ｰa */
    padding: 80px 15px 80px;
    /* 各sectionに、上160x　左右15px　下200px程度に設定 */
    background-color: #fff;
    /* 教科書の設定にないけど背景色使白 -> bgc */
}

/*-----------------------------------------
    html - setting   
-----------------------------------------*/
html {
    scroll-behavior: smooth;
    /* ページ内リンクのアニメーション -> scroll-behavior: smooth; */
}

/*-----------------------------------------
    header - setting   
-----------------------------------------*/

header {
    position: fixed;
    /* navの固定 -> pof */
    top: 0;
    left: 0;
    /* 画面のtop:0 → y座標0 left:0 ｘ座標0 で設定 -> t0 l0 */
    width: 100%;
    /* positionを使うと親からの継承ができなくなるので、自身で幅設定。今回はwidth: 100% ; -> w100p */
    background-color: #eee;
    /* 背景色設定 → 少し透明に -> bgc */
    z-index: 100;

}


/*-----------------------------------------
  header header_inner and h1 nav - setting   
-----------------------------------------*/

header .header {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 100px;
    align-items: center;
    padding: 0 10px;
}

header h1 {
    font-size: 28px;
    font-weight: 400;
    /* デフォルトで太字をノーマルに32px以上で適当 -> fz32 fw400 */
}


header .gnav ul {
    display: flex;
    /* liを横並びさせる display:flex -> df */
    margin: 0 auto;
}

header .gnav ul li {
    padding: 40px;
    font-size: 20px;
}


header .header_inner nav ul a {
    display: block;
    /* マウスの反応領域を広げるため -> db */
    padding: 10px 40px;
    /* 左右の余白適宜 -> p10-40 */
    color: #000;
    /* 文字の色適宜 -> c#000 */
    font-size: 18px;
    /* fz18 */
    transition: 0.4s;
    /* ホバーの時の変化の時間設定 -> transition */
}

header .header_inner nav ul a:hover {
    background-color: #ccc;
}


/*-----------------------------------------
    main_image - setting   
-----------------------------------------*/


.main_image {
    width: 100%;
    height: 80vh;
    /* 画面の高さの60%にする（お好みで調整） */
    /* または height: 500px; など固定値でもOK */
}

.main_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像の比率を保ったまま枠いっぱいに表示 */
    object-position: center;
    /* 画像の中心を表示 */
}

/*-----------------------------------------
    main - setting   
-----------------------------------------*/

main h2 {
    font-size: 40px;
    /* フォントサイズ、40px前後で設定 -> fz40*/
    font-weight: 400;
    /* 文字の太さ -> fw400 */
    padding: 30px 0 40px;
    /* 上下の内側余白、30px 40px設定 -> p30-0-40 */
    text-align: center;
    /* 文字中央 -> tac */
}

main h3 {
    font-size: 22px;
    /* fz22 */
    border-left: 4px solid #444;
    /* bdl -> 4px solid #444 */
    padding: 9px 6px;
    /* p9-6 */
    margin-bottom: 10px;
    /* mb10 */
    background-color: #eee;
    /* bgc#eee */
    /* 装飾適宜 */
}


/*-----------------------------------------
各section - setting   
-----------------------------------------*/
section {
    /* border: 1px solid #000; */
    /* 教科書の設定にないあくまでもダミーの枠線 -> bd */
}



/* ==================================== */
/* 施工事例セクションのスタイル */
/* ==================================== */

/* 3つの事例ブロックを横並びにする親要素 */
.works-container {
    display: flex;
    /* 子要素を横に並べる */
    gap: 20px;
    /* ブロック間の隙間 */
    margin-top: 40px;
    /* 上部に余白 */
    justify-content: space-between;
    /* 要素間の均等なスペース */
}

/* 各事例ブロック（1組のBefore/Afterと説明文） */
.work-item {
    flex-basis: calc(33.333% - 13.333px);
    /* 100%を3等分し、gapを考慮して幅を調整 */
    overflow: hidden;
    /* 画像の角を丸くする際などに必要 */
}

/* 2枚の画像を左右に並べる親要素 */
.image-pair {
    display: flex;
    /* Before画像とAfter画像を横に並べる */
    width: 100%;
}

.image-pair img {
    width: 50%;
    /* 親要素の幅を半分ずつ使用 */
    height: auto;
    object-fit: cover;
    /* 画像の比率を保ちつつ、要素全体を覆う */
    display: block;
    /* 画像の下にできる余白をなくす */
}

/* 説明文 */
.work-item .description {
    text-align: center;
    padding: 10px 5px;
    margin-top: 5px;
    /* 画像との間に少し隙間 */
    font-size: 14px;
    /* その他デザインはお好みで */
}



/* ==================================== */
/* 施工前後のラベルを重ねて表示するスタイル */
/* ==================================== */

/* 1. image-pair を相対位置の基準にする */
.image-pair {
    display: flex;
    width: 100%;
    position: relative;
    /* 子要素（ラベル）の基準位置とする */
}

/* 2. ラベルの共通スタイル */
.image-pair .label {
    position: absolute;
    /* 親要素（image-pair）に対して絶対位置で配置 */
    top: 10px;
    /* 上端からの距離 */
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    /* 文字色を白に */
    background-color: rgba(0, 0, 0, 0.6);
    /* 背景を半透明の黒に */
    z-index: 10;
    /* 画像より手前に表示する */
}

/* 3. 施工前ラベルの位置 */
.image-pair .before-label {
    left: 10px;
    /* 左端に配置 */
}

/* 4. 施工後ラベルの位置 */
.image-pair .after-label {
    left: 50%;
    /* 画像ペアの中央からスタート */
    margin-left: 10px;
    /* 施工後画像の上端に合わせるため、中央から少しずらす */
}

/* リフォーム事例コンテナ全体の設定 */
.works-container {
    /* Flexboxを有効にし、子要素を縦方向に並べる */
    display: flex;
    flex-direction: column;

    /* 左右中央揃えにしたい場合 */
    align-items: center;

    /* 要素間のスペース調整（必要に応じて） */
    gap: 40px;
    margin-top: 30px;
}



/*-----------------------------------------
message - setting   
-----------------------------------------*/


.message {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #ccc;
}

.message p {
    line-height: 2.2;
    /* 行間広め -> lh2.2 */
    text-align: center;
    /* 中央揃い -> tac */
    margin-bottom: 50px;
    /* mb50 */
}

.message ul {
    display: flex;
    justify-content: space-between;
    /* 横並び、両端揃い設定 -> df jcsb */
}

.message ul li {
    width: 31%;
    /* 幅、31%設定 -> w31p */
    aspect-ratio: 4/3;
    /* アスペクト比 4/3 -> asr -> 4/3 */
}

.message ul li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* imgの親要素内で画像のカバーの設定 ob -> cover w100p h100p */

}

.message h3 {
    text-align: center;
}

/*-----------------------------------------
    date - setting   
-----------------------------------------*/


.item {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #bbb;
}




.item .list_item {
    display: flex;
    justify-content: space-between;
    /* 横並び、両端揃い設定 */
    flex-wrap: wrap;
    /* 親要素からあふれ出る子要素の折り返し -> fxww */
    gap: 60px 0;
    /* dtとddの溝余白 (gap) 設定 -> gap:60px 0 数値は適宜 */
}

.item .list_item .photo {
    width: 35%;
    /* 幅、35%設定 */
    aspect-ratio: 5/4;
    /* アスペクト比 5/4 -> asr -> 5/4 */
}

.item .list_item .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* imgの親要素内で画像のカバーの設定 ob -> cover w100p h100p */
}


.item .list_item .text {
    width: 60%;
    /* 幅、60%設定 w60p */

}

.item .list_item .text p {
    line-height: 1.8;
    /* 適宜設定 lh1.8   */

}

/*-----------------------------------------
    access - setting   
-----------------------------------------*/


.access {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #aaa;
}

iframe {
    width: 100%;
    filter: grayscale(20%);
}


/* ==================================== */
/* 会社概要のスタイル */
/* ==================================== */
/* ==================================== */
/* 会社概要のスタイル (修正版: Flexboxを使用) */
/* ==================================== */
.company-info {
    margin-top: 50px;
    padding: 20px;
    border-top: 2px solid #ccc;
}

.company-info h3 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
    border-left: none; /* 既存のh3スタイルから上書きが必要な場合 */
    background-color: transparent; /* 既存のh3スタイルから上書きが必要な場合 */
}

.company-info dl {
    max-width: 600px;
    margin: 0 auto;

    /* ★★★ ここが修正のポイントです ★★★ */
    display: flex; /* Flexboxを有効にする */
    flex-wrap: wrap; /* 子要素が溢れる場合に折り返す */
}

/* 項目名（dt）と内容（dd）の共通スタイル */
.company-info dt,
.company-info dd {
    padding: 10px 0;
    border-bottom: 1px dashed #ddd;
    box-sizing: border-box; /* paddingを含めて幅を計算する */
}

/* 項目名（左側）のスタイル */
.company-info dt {
    /* float関連のスタイルを削除し、flex-basisで幅を指定 */
    flex-basis: 30%; /* 項目名の幅を30%に設定 */
    width: auto; /* floatを削除したのでwidthはautoでOK（flex-basisが優先）*/
    font-weight: bold;
    color: #333;
}

/* 内容（右側）のスタイル */
.company-info dd {
    /* float関連のスタイルを削除し、flex-basisで幅を指定 */
    flex-basis: 70%; /* 内容の幅を70%に設定 */
    width: auto; /* floatを削除したのでwidthはautoでOK（flex-basisが優先）*/
    margin-left: 0; /* margin-leftを削除 */
}

/* dl::after の float解除は不要になるため削除
.company-info dl::after {
    content: "";
    display: block;
    clear: both;
}
*/

/*-----------------------------------------
    faq - setting   
-----------------------------------------*/


.qaa {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #999;
}

.qaa dl dt {
    padding: 20px;
    /* p20 */
    color: #fff;
    /* c#fff */
    background-color: #333;
    /* bgc#333 */
    margin-bottom: 10px;
    /* mb10 */

}

.qaa dl dd {
    padding: 5px 20px;
    /* p5-10 */
    line-height: 1.6;
    /* lh1.6 */
    margin-bottom: 50px;
    /* mb50 */
}

/*-----------------------------------------
    footer - setting   
-----------------------------------------*/

footer {
    background-color: #ddd;
}

footer p {
    text-align: center;
    padding: 80px 0 80px;
}

/*-----------------------------------------
    PC/SP 表示切り替え
-----------------------------------------*/
.sp {
    display: none;
}

/*-----------------------------------------
    media query - setting   
-----------------------------------------*/

@media (max-width:768px) {

    /*-----------------------------------------
    .burger - responsive setting   
-----------------------------------------*/

    .nav_button {
        position: fixed;
        right: 30px;
        top: 20px;
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        background-color: #eeeeee00;
        z-index: 1000;
        cursor: pointer;
    }

    .nav_button span {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 50px;
        height: 3px;
        background: #444;
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
    }

    /* .openが付与される前 */
    .nav_button span:nth-child(1) {
        transform: translate(0, 15px);
    }

    .nav_button span:nth-child(2) {
        transform: translate(0, 0);
    }

    .nav_button span:nth-child(3) {
        transform: translate(0, -15px);
    }


    /* イベントにより.openが付与されたときのアニメーション */
    .active.nav_button span:nth-child(1) {
        transform: rotate(45deg);
        transform-origin: center;
        /* background: #444; */
    }

    .active.nav_button span:nth-child(2) {
        transform: scaleX(0);
        opacity: 0;
    }

    .active.nav_button span:nth-child(3) {
        transform: rotate(-45deg);
        transform-origin: center;
        /* background: #444; */
    }



    /*-----------------------------------------
  header header_inner and h1 nav - responsiv setting   
-----------------------------------------*/

    .gnav {
        position: fixed;
        right: -101%;
        /* 初期位置は画面外 */
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(189, 213, 233, 0.9);
        color: #fff;
        transition: .3s ease;
        z-index: 800;

    }

    .gnav ul {
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .gnav ul li a {
        margin: 30px 0;
        font-size: 1.5rem;
    }

    /* イベントにより.openが付与されたときの位置 */
    .open.gnav {
        right: 0;
    }

    /* レスポンシブ表示切り替え */
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
}

/* media end */