/*
Template:bootstrap-basic4
Theme Name:child-yamamotowood
*/

@charset "utf-8";

.pt-50{padding-top: 50px;}
.content {margin: 5% 10%; /* サイドバーの幅に合わせて余白を設定 */padding: 10px 0 20px 5px;font-family: 'Oswald', sans-serif, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
#header{position: relative;z-index: 2;}
.wrap-header{position: relative;z-index: 3;}
.header-container {display: flex; /* フレックスボックスを使用して横並びに */align-items: center; /* 垂直方向で中央揃え *justify-content: space-between; /* ロゴとメニューの間にスペースを追加 */}
.overlay-image img {display: block; /* 画像をブロック要素として扱う（余計な空白を防ぐ） */}
.overlay-image {width: 100%;height: 90vh; /* 画面いっぱい表示にする場合 */overflow: hidden;}
.mv-image {width: 100%;height: 100%;object-fit: cover;   /* 画像の中央を維持してトリミング */display: block;}
img{max-width: 100%;}

.navbar-offcanvas {flex-grow: 1; /* 必要に応じてメニューエリアを拡大可能に */text-align: right; /* メニューを右寄せ */}
.ul-hnav {display: inline-flex; /* メニューの項目を横並びに */list-style: none; /* デフォルトの箇条書きスタイルを削除 */margin: 0; /* 外側の余白を削除 */padding: 0; /* 内側の余白を削除 */}
.ul-hnav li {margin: 0 10px; /* 各メニュー項目間の余白を設定 */}
.ul-hnav a {text-decoration: none; /* 下線を削除 */color: #000; /* リンクの色を指定（必要に応じて変更） */font-size: 13px; /* フォントサイズを調整 */font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}


/* header */
nav {display: flex;justify-content: center;background-color: white;padding: 10px 30px;width: 100%;}
nav a {color: black;text-decoration: none;padding: 10px 20px;margin: 0 10px;font-weight: bold;}
nav a:hover {border-radius: 5px;}
.navbar-brand .logo{width: 200px; height: auto;}
.background-media{ width: 100vw; height: 100%;  max-width: 1960px;}
.overlay-images{width: 100%;}

/* NEWS */
.news-items ul { list-style: none; padding: 0; margin: 0; }
.news-item { margin-bottom: 10px; }
.news-item a { display: flex; align-items: center; text-decoration: none; color: inherit; }
.news-date { margin-right: 15px; white-space: nowrap; color:black; font-size: 0.95rem; }
.single-post .main-image img {max-height: 300px; object-fit: cover; width: 100%; height: auto; margin-bottom: 30px; position: relative; z-index: 1;}
.news-info {position: relative;z-index: 2;margin-top: -100px;background-color: #fff; margin-left: 100px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 40px 0; }
.news-card { border: 1px solid #ddd; padding: 20px; display: flex; flex-direction: column; position: relative; background: #fff; transition: box-shadow 0.3s ease; }
.news-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.news-card a { text-decoration: none; color: inherit; display: block; color: #000;}
.news-card a:hover .title {color: #000; /* 黒色 */text-decoration: underline;text-decoration-color: #000;}
.thumb img { width: 100%; height: auto; display: block; object-fit: cover; }
.text { margin-top: 15px; }
.date { position: absolute; top: 20px; right: 20px; text-align: right; font-size: 0.9rem; color: #666; font-weight: bold; line-height: 1; }
.date .day { display: block; font-size: 1.2rem; }
.date .year { font-size: 0.8rem; opacity: 0.6; }
.title { margin-top: 10px; font-size: 1rem; }

/* フロントページ NEWS*/

ul {list-style: none;padding: 0; /* 余白も調整 */margin: 0;}
.news-container {display: grid;grid-template-columns: 1fr 2fr auto;align-items: start;gap: 20px;margin: 100px 0;}
.news-title {text-align: left;font-family: 'Oswald', sans-serif, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "YuGothic", "游ゴシック Medium", "YuGothic", "YuGothicM", Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";font-size: 1rem;font-weight: bold;}
.single-news-title{text-align: left;font-family: 'Oswald', sans-serif, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "YuGothic", "游ゴシック Medium", "YuGothic", "YuGothicM", Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";font-size: 2rem;font-weight: bold;}
.news-items {text-align: left; color: black;}
.news-items a {color: #000; /* 黒 */text-decoration: none; /* 必要に応じて下線を消す */}
.news-items a:hover {color: #000;              /* ホバー時も黒 */text-decoration: underline; /* 必要なら下線つける */}
.vertical-line {display: inline-block;width: 2px;height: 1em;background-color: gray;margin-right: 10px;}
time.en {margin: 0 5px;}
.detail-btn {display: inline-block;padding: 12px 24px;border: 2px solid #000;color: #000;text-decoration: none;border-radius: 4px;font-weight: bold;transition:background 0.3s, color 0.3s;}
.detail-btn:hover {background-color: #000;color: #fff;}
.news-comment {font-size: 1.1rem; margin-bottom: 30px; font-weight: 300;padding-top: 50px;}



/* concept */
.concept-maintitle{margin-bottom: 50px; font-size: 24px; font-weight: bold; font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.concept-maintitle-text{font-weight: bold; font-size: 18px;  font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.concept-maintitle2{margin-bottom: 50px; font-size: 18px; font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.concept-maintitle-text2{font-size: 18px;  font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}

.concept-container {display: flex; /* 横並び配置 */align-items: center; /* 垂直方向の中央揃え */max-width: 1200px; /* コンテンツの最大幅 */margin-bottom: 80px;}
.concept-container img {width: 500px; /* 画像の幅を調整 */height: auto; /* アスペクト比を保持 */border-radius: 10px; /* 角を少し丸く */object-fit: cover;}
.concept-text {width: 80%; /* テキストの幅 */text-align: left; /* 文章の左揃え */padding-left: 30px; /* 画像とテキストの間隔を確保 */}
.image-links {display: flex; /* 横並びにする */justify-content: space-around; /* 中央配置 */gap: 0px; /* 画像の間隔 */margin: 20px 0; /* 上下余白 */}
.image-item {position: relative; /* 子要素の位置調整の基準にする */display: block; /* クリック範囲を画像全体に */width: 30%; /* 3つ並べるために30%指定 */max-width: 380px; /* 最大幅を指定 */overflow: hidden; /* はみ出した部分を隠す */border-radius: 0; /* 角を丸く */}
.image-item img {width: 100%; /* 画像のサイズをaタグに合わせる */height: auto; /* アスペクト比を維持 */transition: transform 0.5s ease-in-out; /* なめらかな拡大アニメーション */}
.image-item:hover img {transform: scale(1.1); /* ホバー時に画像をズーム */}


/* 会社概要 */
table {border: 1px solid #ccc;}
th, td {padding: 10px;border-bottom: 1px solid #ddd;}



/* NEW-HOUSE */
.new-house-subtitle{margin-bottom: 25.35px; font-size: 34px; font-weight: bold; font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.new-house-subtitle-text{margin-bottom: 87px; font-size: 24px; line-height: 1.8; font-weight: bold;}
.new-house-maintitle{margin-bottom: 20px; font-size: 28px; font-weight: bold; font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.new-house-maintitle-text{font-size: 16px;  font-family: YakuHanJP, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.new-house-container {display: flex; /* 横並び配置 */align-items: center; /* 垂直方向の中央揃え */max-width: 1200px; /* コンテンツの最大幅 */margin-bottom: 25px;}
.new-house-container img {width: 300px; /* 画像の幅を調整 */height: auto; /* アスペクト比を保持 */border-radius: 10px; /* 角を少し丸く */object-fit: cover;}
.new-house-text {width: 80%; /* テキストの幅 */text-align: left; /* 文章の左揃え */padding-left: 60px; /* 画像とテキストの間隔を確保 */}


/* テキストのスタイル */
.text-overlay {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 完全に中央へ配置 */color: white; /* 文字色 */font-size: 20px;font-weight: bold;text-align: center;padding: 10px 20px;}
.product-woodlist img{width: 100%;}



/* front-page */
h1 span{vertical-align: top;letter-spacing: 0.06em;line-height: 1;}
.title-en{letter-spacing: 0.06em;line-height: 1;font-size: 60px;font-family: 'Oswald', sans-serif, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic, "游ゴシック Medium", YuGothic, YuGothicM, Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";}
.title-jp{font-size: 1rem;line-height: 3.5;font-family: "YakuHanJP";}
.more-button { text-align: center; margin-top: 30px; }
.btn-more { display: inline-block; padding: 10px 30px; background-color: black; color: #fff; text-decoration: none; font-weight: bold; border-radius: 5px; transition: background 0.3s ease; }
.btn-more:hover { background-color: #555; color: #fff; }

.concept-section { display: flex; align-items: flex-start; gap: 4%; padding: 1rem 5% 3rem; }
.concept-left { width: 45%; font-size: 14px; line-height: 2; color: #111; margin-top: 100px;}
.concept-left p { margin-bottom: 1.2em; }
.concept-btn { display: inline-block; margin-top: 2em; padding: 0.8em 2em; border: 1px solid #111; text-decoration: none; color: #111; font-size: 14px; }
.concept-right { width: 30%; position: relative; }
.concept-right img { position: absolute; bottom: -600px; right: 0; }
.concept-copy { position: absolute; top: 0; left: 0; padding: 1rem; font-size: 22px; line-height: 2.2; color: #111; background: transparent; white-space: nowrap; }
.concept-copy p { margin: 0; }

.concept-section.reverse { flex-direction: row-reverse;padding: auto; }
.concept-left-second { margin-top: 150px; }
.concept-right-second img { position: absolute; bottom: -500px; left: -100px; padding: 20px 0;  }



/* 耐震改修 */
.earthquake-resistant-text {font-size: 1.2rem; line-height: 1.8; margin-bottom: 30px; font-family: "YakuHanJP";font-weight: bold;}
.earthquake-resistant-h1{padding:0 0 25px; font-weight: bold;}
.earthquake-resistantsection { margin-bottom: 3rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.05); }
.flow-title { font-weight: bold; font-size: 1.2rem; margin-top: 1rem; }
.photo-row { display: flex; gap: 10px; margin-top: 2rem; }
.photo-cell { flex: 1; overflow: hidden;}
.photo-cell img { width: 80%; height: 250px; object-fit: cover; display: block; }

.earthquake-sec{padding: 2rem 0;}
.sub-title{font-size: 1.5rem; font-weight: bold; margin: 30px 0 15px; border-left: 10px solid #111; border-bottom: 1px solid #111; padding:0 0 5px 10px ;}

.wrp-swipe{position: relative;}
.swiper-text{position: absolute; background-color: rgba(255,255,255,1); padding:0 0 0 1.7rem; font-size: 4rem; font-weight: bold; color: #111;top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;}

.swiper {
  width: 100%;
  padding: 10px 0 30px;
}
.swiper-slide {
  text-align: center;
  font-size: 24px;
  height: auto;
  width: 65%;
}

/* ハンバーガーとサイドメニュー */
/* ハンバーガーメニューのスタイル */
.hamburger {cursor: pointer;display: inline-block;width: 30px;height: 20px;position: relative;margin-top: 400px;}
.hamburger span {background-color: #333;height: 3px;width: 100%;position: absolute;left: 0;transition: 0.3s;}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }

/* ハンバーガーメニュー内の文字色を黒にする */
#navbarMenu {background-color: #fff; /* 背景白の場合に見やすく */text-decoration: none !important; /* 下線を消す */}
#navbarMenu .nav-link {color: #000 !important; /* テキスト色を黒に */}
/* hover時の色も黒のままにしたい場合 */
#navbarMenu .nav-link:hover {color: #000 !important;text-decoration: underline;}




/* 施工事例ページ */
  .photo-item img {width: 100%;height: auto;border-radius: 8px;}
  .photo-item a {color: #000; /* 黒 */text-decoration: none; /* 下線なし */}
  .photo-item a:hover {color: #000; /* ホバー時も黒 */text-decoration: none; /* 念のため下線なしを再指定 */opacity: 0.5; /* お好みでエフェクト（削除してもOK） */}
  .photo-container {display: flex;flex-wrap: wrap;gap: 20px;justify-content: space-between;}
  .photo-item {width: calc(33.333% - 14px); /* 3列用 */box-sizing: border-box;text-align: center;padding: 10px 0;}
  .photo-item img {width: 100%;height: auto;display: block;}

/* ページネーション */
.pagination {display: inline-block;margin-top: 30px;text-align: center;}
.pagination a,
.pagination span {display: inline-block;margin: 0 5px;padding: 8px 12px;background: #eee;color: #333;text-decoration: none;}
.pagination .current {background: #333;color: #fff;}


/* 施工詳細ページ */
.single-work-page { max-width: 100%;  padding: 20px 0px 80px 100px; position: relative;}
.main-image img { width: 100%; height: auto; margin-bottom: 30px; position: relative; z-index: 1;}
.work-title { font-size: 2rem; margin-bottom: 20px; }
.work-comment { font-size: 1.1rem; margin-bottom: 30px; font-weight: 300;}
.work-gallery h2 { font-size: 1.4rem; margin-bottom: 15px; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 40px; }
.gallery-item { width: calc(33.333% - 13.333px); padding: 0.5px;}
.gallery-item img { width: 100%; height: auto;}
.work-table table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.work-table th, .work-table td { border: 1px solid #ccc; padding: 10px; text-align: left; vertical-align: top; }
.work-table th { background: #f8f8f8; width: 30%; }
.work-table td { font-weight: 300;}
.work-info {position: relative;z-index: 2;margin-top: -400px;background-color: #fff; margin-left: 100px; }
.work-info-detail{padding: 100px 200px 0 150px;}

/* 採用情報 */
.recruit{padding-top: 50px;}
.recruit-flow{padding-top: 50px;}
.message-from-senpai{margin-top: 50px;}
.entry-table {margin: 30px auto; /* 中央寄せ */width: 100%;max-width: 800px;border-collapse: collapse;}
.entry-table th,
.entry-table td {padding: 6px 10px;       /* 間隔を詰める */border: 1px solid #ccc;text-align: right;font-size: 14px;}


/* お問い合わせ */
/* 入力欄（テキスト、メールなど） */
.content-contact{margin: 2% 10%; /* サイドバーの幅に合わせて余白を設定 */padding: 5px 20px; height: 100%;}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {width: 80%;          /* または 80% などに調整可 */box-sizing: border-box;font-size: 16px;}


/* フッター */
.footer-menu li {display: inline-block;margin: 0 10px;}
footer,
footer a {color: #000 !important;}
footer a:hover {text-decoration: underline;color: #000;}

/* スマホ用 */
@media screen and (max-width: 768px) {
  .navbar{padding: 0;}
  .navbar-brand{padding: 0; margin: 0;}
  .navbar-brand .logo{width: 150px;}
  .title-en{font-size: 38px;}

    .photo-item {width: 48%;}
    /* TOP */
    .content{margin:0 15px; padding: 15px 0 40px;}
    .overlay-image {height: 60vh; /* 画面の60%の高さに設定 */overflow: hidden;}
    .overlay-image img {height: 100%;object-fit: cover;}
    .news-container {display: flex;flex-direction: column;}
    .news-items {order: 1;}
    .detail-btn {order: 2;align-self: flex-start; /* 左寄せ */margin-top: 10px;}
    .news-item .news-title {font-size: 14px;/* 小さく調整 */line-height: 1.4;/* 行間確保 */word-break: break-word;white-space: normal;}
    /* コンセプト */
    .concept-container { flex-direction: column; align-items: center; margin-bottom: 40px;}
    .concept-container .concept-text, .concept-container img { width: 100%; }
    .concept-container img { order: 1; }
    .concept-container .concept-text { order: 2; padding: 30px 0 0; }
    .image-links { display: flex; flex-direction: column; gap: 20px; }
    .image-item { width: 100%; }
    .image-item img { width: 100%; height: auto; display: block; }
    .text-overlay { text-align: center; padding: 10px 0; font-size: 1.2rem; }
    /* 新築 */
    .new-house-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
    .new-house-container img { width: 100%; height: auto; }
    .new-house-text { width: 100%; padding: 0 15px; }
    .new-house-maintitle { font-size: 1.2rem; margin-bottom: 10px; }
    .new-house-maintitle-text { font-size: 1rem; line-height: 1.6; }
    /* 実績詳細ページ */
    .single-work-page {padding: 10px 15px 50px 15px !important;}
    .main-image img {width: 100% !important;height: auto !important;margin-bottom: 20px !important;position: static !important;z-index: auto !important;}
    .work-info {position: static !important;margin-top: 0 !important;margin-left: 0 !important;background-color: transparent !important;padding: 0 10px !important;z-index: auto !important;}
    .work-info-detail {padding: 10px 0 0 10px;}
    .gallery-grid {flex-wrap: nowrap !important;overflow-x: auto;gap: 10px !important;}
    .gallery-item {width: 80% !important; /* スマホで横スクロールしやすいサイズ */flex-shrink: 0 !important;}
    /* NEWS詳細ページ */
    .single-news-title {font-size: 1.5rem;}
    .news-info{margin-left: 25px;}
    .news-title{padding: 10px;}
    .news-comment{padding-top: 25px;}

    .swiper-text {font-size: 1.75rem;}
    .swiper-slide{width: 80%;}
    .news-container{margin: 50px 0;}
    .earthquake-resistant-text{font-size:1rem;}
    .earthquake-resistant-h1{padding: 20px 0; font-size: 1.75rem;}
    .sub-title{font-size:1.2rem;}
  }

@media screen and (max-width: 480px) {
    .photo-item {width: 100%;}
}