@charset "UTF-8";

/*
Theme Name: 丸順工務店
Theme URI: https://www.tono-marujun.jp/
Description: 丸順工務店 WordPress Theme
Author: 丸順工務店
Version: 2026_01
Tested up to: 6.9
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: silver;
  --bg_color: #f6f6f0;
  --link_color: #0050a0;
}


/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
#main {width: 100%; background: white}
#over_wrap {position: relative; z-index: 10;}
.inner {margin: auto}

/* ヘッダーまわり */
header {
  position: sticky; top:0; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.95); transition: background-color 0.3s ease;
  .inner {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 18px 30px; align-items: center;}
  .site_title {line-height: 1; margin-top: -2px}
  .site_title a {position: relative; display: inline-block;}
  .site_title .logo {transition: opacity 0.3s ease;}
  .site_title .logo.hover {position: absolute; top: 0; left: 0; opacity: 0;}
  .site_title a:hover .logo.hover {opacity: 1;}
  .site_title a:hover .logo.normal {opacity: 0;}

  .site_nav_pc ul {display: flex; justify-content: flex-end; gap: 10px 40px; align-items: center;}

  .site_nav_pc #menu-marujun > li:before {flex-grow: 1; position: relative;}
  .site_nav_pc #menu-marujun > li:nth-child(1)::before,
  .site_nav_pc #menu-marujun > li:nth-child(2)::before,
  .site_nav_pc #menu-marujun > li:nth-child(3)::before{
    position: absolute;
    top: 4px;
    left: 100%;
    margin: 0 1.5rem;
    content: "";
    width: 1px;
    height: 70%;
    background-color: #333;
  }
} /* header */

/* パンくず */
#breadcrumb {
  .inner {padding-top: 25px; margin-bottom: 20px;}
  p {font-size: 1.2rem; text-transform: uppercase; margin-bottom: 0; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #adadad}
  span {color: #adadad;}
  span.current-item {color: #adadad}
} /* #breadcrumb */

/* 一覧のスタイル：ブロック */
.post_line {
  .post_line_wrap {gap: 60px 30px}
  article {min-width: 0;}
  article dl {line-height: 1; letter-spacing: 0; width: 100%;}
  article dt {text-align: center; margin-bottom: 20px}
  article dd.date_slug_tax {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 10px; align-items: center; margin-bottom: 8px}
  article dd .date_slug {font-size: 1.2rem; font-family: "STIX Two Text"; font-weight: 600}
  article dd .date_slug span:nth-of-type(1) {margin: 0 3px 0 5px}
  article dd .date_slug span:nth-of-type(2) {text-transform: capitalize;}
  article dd .tax {font-size: 1.2rem; background: var(--bg_color); padding: 4px 8px; }
  article dd.title h3 {font-size: 2rem; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 
  article a {transition: all 0.3s ease; display: block; width: 100%;}
  article a dl:hover {color: var(--link_color)}
  article a dt:hover img {opacity: .8}
} /* .post_line */

/* 一覧のスタイル：水平 */
.post_line_horizontal {
  article a {display: block; background: white; padding: 20px; margin-bottom: 20px; position: relative}
  article a:hover {color: var(--link_color);}
  article dl {display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px 25px; line-height: 0; letter-spacing: 0}
  article dt {font-size: 1.2rem; font-family: "STIX Two Text"; text-transform: uppercase; font-weight: 600;}
  article dt span {margin: 0 5px;}
  article dd {display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: center;}
  article dd span span {font-size: 1.2rem; font-weight: 700; background: var(--bg_color); padding: 4px 8px; line-height: 1}
  article dd h3 {font-size: 2rem; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
} /* .post_line_horizontal */

/* Gmap、YouTubeなどコンテンツのレスポンシブ */
iframe.respo {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 50px}

/* Loading */
#loading {position: fixed; width: 100%; height: 100%; z-index: 110; background: #ccccbe; text-align: center;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99;}
#loading_logo .fadeIn {animation-name: fadeInAnime; animation-duration: 1s; animation-delay: .5s; animation-fill-mode: forwards; opacity: 0; filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}

.h_title {font-size: clamp(2.4rem, 2.111rem + 1.19vw, 3rem); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 80px}
.h_title::before {content: "●";}
.h_title .en {font-size: 1.2rem; font-family: "STIX Two Text"; margin-top: 6px; letter-spacing: .04em; font-weight: 600}
.h_title .en a:hover {color: var(--link_color)}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
  header {background: transparent; position: fixed;}
  #main {background: transparent}
  
  #hero {
    position: sticky; top: 0; height: 100vh; z-index: 1; overflow: hidden;
    &::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      /* JSから渡される変数を使って背景色を設定（デフォルトは0） */
      background-color: rgba(0, 0, 0, var(--overlay-alpha, 0));
      z-index: 2; /* コンテンツの上に載せたい場合は数値を大きく */
      pointer-events: none; /* レイヤーの下にあるボタン等をクリックできるようにする */
    }
    h2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; width: 100%; text-align: center; will-change: transform;}
    h2 img {filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1)); max-width: 100%; height: auto;}
  
    .swiper-hero-pc, .swiper-hero-sp {width: 100%; height: 100vh;}
    .swiper-slide, .swiper-img {width: 100%; height: 100%;}
    .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
    .swiper-wrapper {overflow: hidden}

    /* ズーム */
    .swiper-slide-active .swiper-img,
    .swiper-slide-duplicate-active .swiper-img,
    .swiper-slide-prev .swiper-img {animation: zoomUp 7s linear 0s normal both;}
  } /* #hero */

  #hero_after {
    height: 100vh; background: transparent; display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: 3;
    .inner {width: min(750px, 100%);}
    hgroup {color: white; margin-bottom: 60px}
    hgroup p {font-family: "STIX Two Text"; font-size: 1.2rem; margin-bottom: 60px; font-weight: 600; letter-spacing: .05em}
    hgroup h2 {font-size: 3.4rem; margin-bottom: 60px; line-height: 1}
    .detail p {color: white; font-size: 2.4rem; line-height: 2; margin-bottom: 30px}
    .detail p:nth-of-type(3) {margin-bottom: 60px} 
  } /* hero_after */

  #works {
    padding: 120px 0; background: white;
    .post_line_wrap {margin-bottom: 80px}
    .in_site_link {text-align: right}
  } /* #works */

  #news {
    background: #f6f6f0; padding: 120px 0;
    article:last-child {margin-bottom: 80px}
    .in_site_link {text-align: right}
  } /* #news */
} /* home */


/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
.page {
  .each_wrap .inner {display: grid; grid-template-columns: 36% 1fr; gap: 50px 20px; margin-bottom: 120px}
  .each_wrap hgroup {margin-top: -6px}
  .each_wrap hgroup h2 {font-size: 2.6rem; margin-bottom: 6px}
  .each_wrap hgroup p {font-size: 1.2rem; font-family: "STIX Two Text"; font-weight: 600; letter-spacing: .02em}
  .each_wrap .detail h3 {font-size: 2rem; margin-bottom: 50px; font-weight: 700}
  .each_wrap .detail h4 {font-size: 2rem; margin-bottom: 26px; font-weight: 700}
  .each_wrap .detail p {font-size: 1.8rem; line-height: 1.8; letter-spacing: -0.02em; margin-bottom: 60px}
  .each_wrap .detail p:last-of-type {margin-bottom: 0}
  .each_wrap hr {border-top: 1px solid #f0f0e6; padding-bottom: 120px; margin: auto;}
}

/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* 丸順の家づくり */
.page-id-2 {
  #title_head {
    h2 {padding: 120px 0 200px; text-align: center; margin-bottom: 0; font-size: clamp(2.4rem, 1.822rem + 2.37vw, 3.6rem); letter-spacing: .14em}
  } /* #title_head */

  #building {
    .detail p {margin-bottom: 40px; font-size: 2.2rem; letter-spacing: .1em; line-height: 1.8}
  }

  .interval_01 {margin-bottom: 120px}
  .deco {margin-bottom: 80px}
  
  #carpenters {
    .detail p {margin-bottom: 30px}
}

  #performance {
    h3 {margin-bottom: 16px}
    .note {font-size: 1.2rem}
    .function {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 60px;}
    .function dl {background: var(--bg_color); padding: 40px 20px}
    .function dt {text-align: center; font-weight: bold; font-size: 1.8rem}
    .function dd {text-align: center; font-size: 1.8rem}
  }

  #kominka {padding-bottom: 120px; background: var(--bg_color)}

  #regeneration {
    background: var(--bg_color); margin-bottom: 120px;
    .inner {padding-bottom: 120px}
  }

  #process {
    dl {display: grid; grid-template-columns: 15px 1fr; gap: 8px; margin-bottom: 15px}
    dl:last-of-type {margin-bottom: 60px}
    dt {font-size: 1.2rem; font-family: "STIX Two Text"; font-weight: 600; letter-spacing: .02em;}
    dd {padding: 20px; font-size: 2rem; background: var(--bg_color);}
    .in_site_link {text-align: right}
  }
} /* 丸順の家づくり */



/* 会社概要 */
.page-id-13 {
  #title_head {
    position: relative; margin-bottom: 120px;
    .about_head {text-align: center}
    .h_title_wrap { position: absolute; top: 20px; left: 0; width: 100%}
    .h_title_wrap h2 {color: white;  padding: 0 50px; width: min(1240px, 100%); margin: auto auto 0}
  }

  #message {
    .detail p {margin-bottom: 40px}
    dt {text-align: right}
    dd {text-align: right}
    dd.name {margin-bottom: 80px}
  }

  #overview {
    dl {display: grid; grid-template-columns: 100px 1fr; gap: 10px 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #f0f0e6}
    dl:last-of-type {margin: 0; padding: 0; border: none}
    dt {font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em;}
    dd {font-size: 1.8rem; line-height: 2; text-box-trim: trim-both; letter-spacing: -0.02em;}
    li {font-size: 1.8rem; letter-spacing: -0.02em;}
    li span:nth-of-type(1) {margin-right: 10px}
  }

  #staff {
    margin-bottom: 110px;
    .detail {gap: 40px 30px}
    dt {margin-bottom: 10px}
    dd {text-align: center}
    dd span {font-size: 1.2rem; line-height: 3; margin-right: 10px}
  }

  #contact {
    background: var(--bg_color); padding: 100px 0; margin-bottom: 120px;
    .inner {margin-bottom: 0}
    dl {margin-bottom: 80px}
    dl:last-of-type {margin-bottom: 0}
    dt {margin-bottom: 16px}
    dt a {font-size: 3rem; padding: 25px 20px 27px 20px; border: 1px solid #333333; background: white; display: block; line-height: 1; display: flex; gap: 38px; transition: opacity 0.3s; font-weight: 400}

    dt a.box_btn::after {background-image: url(img/page/about_contact_icon_arrow.svg); opacity: 1;}
    dt a.box_btn::before {background-image: url(img/page/about_contact_icon_arrow_hover.svg); opacity: 0; /* 最初は隠しておく */ }

    dt a:hover {border-color: #0050a0}
    dt a.box_btn:hover::after {opacity: 0; /* 通常矢印を透明にする */}
    dt a.box_btn:hover::before {opacity: 1; /* ホバー用矢印を表示する */}

    dt a span:nth-of-type(1) {position: relative}
    dt a span:nth-of-type(1)::before,
    dt a span:nth-of-type(1)::after {
      content: "";
      position: absolute;
      display: block;
      top: 50%; /* 縦中央 */
      transform: translateY(-50%); /* 縦中央補正 */
      width: 30px;  /* SVGの横幅に合わせて調整してください */
      height: 30px; /* SVGの縦幅に合わせて調整してください */
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .tel dt a span:nth-of-type(1)::after {background-image: url(img/page/about_contact_icon_tel.svg); opacity: 1;}
    .tel dt a span:nth-of-type(1)::before {background-image: url(img/page/about_contact_icon_tel_hover.svg); opacity: 0;}
    .tel dt a:hover span:nth-of-type(1)::after {opacity: 0; /* 通常アイコンを透明にする */}
    .tel dt a:hover span:nth-of-type(1)::before {opacity: 1; /* ホバーアイコンを表示する */}

    .mail dt a {padding: 28px 20px 30px 20px; }
    .mail dt a span:nth-of-type(1)::after {background-image: url(img/page/about_contact_icon_mail.svg); opacity: 1;}
    .mail dt a span:nth-of-type(1)::before {background-image: url(img/page/about_contact_icon_mail_hover.svg); opacity: 0;}
    .mail dt a span:nth-of-type(2) {margin-top: -6px}
    .mail dt a:hover span:nth-of-type(1)::after {opacity: 0; /* 通常アイコンを透明にする */}
    .mail dt a:hover span:nth-of-type(1)::before {opacity: 1; /* ホバーアイコンを表示する */}

    .line dt a span:nth-of-type(1)::after {background-image: url(img/page/about_contact_icon_line.svg); opacity: 1;}
    .line dt a span:nth-of-type(1)::before {background-image: url(img/page/about_contact_icon_line_hover.svg); opacity: 0;}
    .line dt a:hover span:nth-of-type(1)::after {opacity: 0; /* 通常アイコンを透明にする */}
    .line dt a:hover span:nth-of-type(1)::before {opacity: 1; /* ホバーアイコンを表示する */}

    dd {font-size: clamp(1.6rem, 1.407rem + 0.79vw, 2rem); font-weight: 700}
  }

  #privacy {
    margin-bottom: 120px;
    .lead {margin-bottom: 40px}
    h3 {margin-bottom: 20px}
    dl:not(:last-of-type) {margin-bottom: 40px}
    dt {font-weight: 700; margin-bottom: 6px; font-size: 1.8rem; letter-spacing: 0}
    dd {font-size: 1.8rem; letter-spacing: 0}
  }
} /* 会社概要 */



/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
.archive {}
.category {}
.page-template-article_list_all {}

/* 施工事例 */
.page-id-15 {
  #breadcrumb .inner { margin-bottom: 40px;}
  .post_line {margin-bottom: 80px}
} /* 施工事例 */


/* お知らせ・カテゴリー */
.page-id-17, .category {
  background: var(--bg_color); 
  header {background: rgba(246, 246, 240, 0.95)}
  #breadcrumb .inner {margin-bottom: 40px;}
  #title_head .en {text-transform: capitalize}
  #main {background: var(--bg_color); }
  .post_line_horizontal {margin-bottom: 120px}
  footer hr {border-color: transparent}
} /* お知らせ・カテゴリー */


/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center; margin-bottom: 80px;
  a {background: white; color: #333333;}
  span.current {font-weight: bold; color :#ffffff; background: #333333; border: 1px solid #333333;}
  span.pages {display: none !important}
} /* .wp-pagenavi */

#main .wp-pagenavi a, #main .wp-pagenavi span {
  border: 1px solid #333333;
  font-size: 1.4rem;
  padding: .8em 1.3em;
  margin: 5px;
  transition: all .3s ease;
  display: inline-block;
} /* #main .wp-pagenavi a */

#main .wp-pagenavi a:hover {border-color: var(--link_color); color: var(--link_color)}
#main .wp-pagenavi a.nextpostslink {border: none}
#main .wp-pagenavi a.previouspostslink {border: none}


/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single {
  .entry_content {
    letter-spacing: 0; padding-bottom: 100px; word-wrap: break-word; /* 折り返し解除 */
    h2 {font-size: 2.2rem; margin-bottom: 40px; font-weight: 400; word-break: auto-phrase;}
    h3 {font-size: 1.8rem; margin-bottom: 40px; padding-bottom: 10px; font-weight: 400;}
    a img {pointer-events: none;} /* 画像にリンクがついてもリンク解除 */
    a img:hover {opacity: .8}
    figure {margin-bottom: 20px} /* 画像 */
    figure a { display: block}
    figcaption {margin-top: 6px; text-align: right; font-size: 1.4rem;} /* キャプション */
    p {margin-bottom: 40px; line-height: 1.8; font-size: 1.8rem}
    a {color: var(--main_color); text-decoration: underline}
    ul {margin-bottom: 30px}
    .wp-block-image {margin-bottom: 40px}
    .wp-block-file a {text-decoration: underline}
    .wp-block-file a:last-child {display: none}
    a[href$=".pdf"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_pdf_18.svg) no-repeat left center;}
    a[href$=".doc"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".docx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".xls"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".xlsx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".csv"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_csv_18.svg) no-repeat left center;}
    .wp-block-quote {background: #EBEBEB url(img/post/quote_bk.svg) no-repeat 30px 30px; padding: 80px 30px 30px 30px; border-radius: 30px; margin-bottom: 30px} /* 引用ブロック */
    .wp-block-quote cite {font-size: 1.2rem;} /* 引用 */
    .wp-block-quote cite a { text-decoration: underline} /* 引用 */
    .wp-block-quote cite::before {content: "引用元"; padding-right: 10px} /* 引用 */
    .wp-block-cover p {color: white} /* カバー */
    .wp-block-table table { margin-bottom: 10px} /* カバー */
    .wp-block-columns {gap:30px}
    .wp-block-columns p {margin-bottom: 15px}
    .wp-block-columns ul {margin-bottom: 15px}
    .wp-block-columns figure { margin-bottom: 0}
    .wp-block-gallery ul {margin-bottom: 0}
    .wp-block-button a {color: white; font-weight: bold; transition: all 0.3s ease;} /* ボタン */
    .wp-block-button a:hover {opacity: .8} /* ボタン */
    .wp-block-gallery {display: flex; flex-wrap: wrap;} /* ギャラリー縦並びになってしまう事の対処 */
    .wp-element-caption a {color: var(--main_color); border-bottom: 1px solid var(--main_color); display: inline-block} /* キャプションにリンクがある場合 */
    .youtube_movie {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* YouTube 埋め込み対応（utility.js にてjquery でクラス追加） */
    .google_map {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* Google Map 埋め込み対応（utility.js にてjquery でクラス追加） */
    .has-small-font-size { font-size: 1.2rem !important} /* フォントサイズ */
    .has-medium-font-size { font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem)!important}
    .has-large-font-size { font-size: clamp(1.7rem, 1.669rem + 0.13vw, 1.8rem)!important}
    .has-x-large-font-size { font-size: clamp(1.8rem, 1.739rem + 0.26vw, 2rem)!important}
  } /* .entry_content */
} /* single */

.single-post {
  background: var(--bg_color); 
  header {background: rgba(246, 246, 240, 0.95);}
  #main {background: var(--bg_color); }
  #breadcrumb {.inner {margin-bottom: 140px;}}
  #content .inner {display: grid; grid-template-columns: 35% 1fr; gap: 20px;}
  .entry_meta {
    dl {display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px 25px; line-height: 1; letter-spacing: .02em}
    dt {font-size: 1.2rem; font-family: "STIX Two Text"; text-transform: capitalize; font-weight: 600; margin-bottom: 7px; letter-spacing: 0}
    dt span {margin: 0 5px;}
    dd {font-size: 1.2rem; font-weight: 700; padding: 4px 8px; background: white; display: inline-block; line-height: 1}
  }
  h2.entry_title {font-size: 2.6rem; margin-bottom: 80px}
  .post_line_horizontal {
    margin-bottom: 120px;
    h2 {text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 40px}
  }
  .post_line_horizontal hr {margin-bottom: 60px; border-top: 1px solid white}
  footer hr {border-color: transparent}
} /* single-post */


.single-work {
  #breadcrumb {
    .inner {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 40px;}
    .tax {font-size: 1.2rem; background: var(--bg_color); padding: 4px 8px; line-height: 1; font-weight: 700}
  }
  .date_slug_single {
    font-size: 1.2rem; font-family: "STIX Two Text"; letter-spacing: 0; font-weight: 700; margin-bottom: 90px; position: relative; 
    span:nth-of-type(1) {margin: 0 3px 0 5px}
    span:nth-of-type(2) {text-transform: capitalize;}
  }
  h2.entry_title {text-align: center; font-size: clamp(2.1rem, 1.859rem + 0.99vw, 2.6rem); margin-bottom: 80px}
  .post_line {
    margin-bottom: 120px;
    hr {margin-bottom: 60px; border-top: 1px solid #f0f0e6;}
    h2 {text-align: center; font-size: 1.4rem; font-weight: 700; margin-bottom: 40px}
  }
} /* single-work */

/* ページナビゲーション */
.single #single_page_nav {
  margin-bottom: 80px;
  ul {gap:20px;}
  li a {font-size: 1.6rem;}

  #previous a.box_btn {padding: 21px 21px 21px 130px; /* 右側の70pxで矢印のスペースを確保 */}
  #previous a.box_btn::before,
  #previous a.box_btn::after {
    content: "";
    position: absolute;
    top: 50%; /* 縦中央 */
    left: 21px;
    transform: translateY(-50%); /* 縦中央補正 */
    width: 16px;  /* SVGの横幅に合わせて調整してください */
    height: 16px; /* SVGの縦幅に合わせて調整してください */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.3s;
  }

  /* 通常時の矢印 (::after) */
  #previous a.box_btn::after {background-image: url(img/common/link_arrow_previous.svg); opacity: 1;}
  
  /* ホバー時の矢印 (::before) */
  #previous a.box_btn::before {background-image: url(img/common/link_arrow_previous_hover.svg); opacity: 0; /* 最初は隠しておく */ }
  #previous a.box_btn:hover::after {opacity: 0; /* 通常矢印を透明にする */}
  #previous a.box_btn:hover::before {opacity: 1; /* ホバー用矢印を表示する */}

  .to_list {text-align: center}
  .to_list a {
    background: white;
    border: 1px solid #333333;
    line-height: 1;
    padding: 21px 60px; /* 右側の70pxで矢印のスペースを確保 */
    color: #333333;
    font-size: 1.6rem;
    font-weight: 700;
    display: inline-block; /* もしくは block。aタグに高さを認識させるため */
    text-decoration: none;
    transition: all 0.3s;
    letter-spacing: 0;
  }
  .to_list a:hover {border-color: #0050a0; color: #0050a0;}

  #previous {text-align: left}
  #next {text-align: right}
  #next a.box_btn {padding: 21px 130px 21px 21px; /* 右側の70pxで矢印のスペースを確保 */}
} /* .single #single_page_nav */



/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: var(--bg_color); background-size: cover; background-position: 50% 50%; min-height: 60vh; display: grid; place-items: center;}
  #main dt {color: #333333; font-size: clamp(2.7rem, 2.25rem + 2.25vw, 4.5rem); text-align: center}
  #main dd {color: #333333; font-size: clamp(1.2rem, 0.911rem + 1.19vw, 1.8rem); text-align: center}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  padding: 0 0 100px; background: white url(img/common/footer_bar.svg) no-repeat center center;
  .inner {display: flex; justify-content: space-between; flex-wrap: wrap; } 
  hr {max-width: 1140px; border-top: 1px solid #f0f0e6; margin: auto auto 60px}
  .navi {display: flex; flex-wrap: wrap;}
  .navi ul {flex-grow: 1; position: relative;}
  .navi ul li {margin-bottom: 15px; font-size: 1.4rem; line-height: 1}
  .navi ul:nth-child(1),
  .navi ul:nth-child(2){
    margin-right: 60px;
  }
  .navi ul:nth-child(1)::after,
  .navi ul:nth-child(2)::after{
    position: absolute;
    top: 0;
    left: 100%;
    margin: 0 30px;
    content: "";
    width: 1px;
    height: 100%;
    background-color: #f0f0e6;
  }
  .navi ul .child a {color: #858585}
  .navi ul a {font-weight: 700; display: block}
  .navi ul a:hover {color: var(--link_color)}
  .navi ul li:last-child {margin-bottom: 0}

  .logo_info {display: flex; flex-wrap: wrap; gap: 50px}
  .logo_info .info li {font-size: 1.3rem; margin-bottom: 5px; font-weight: 700; letter-spacing: 0}

  /* 親要素：aタグ */
  .logo_info .info li:nth-of-type(6) a {
    position: relative;
    display: inline-block; /* text-decorationやpaddingを正しく効かせるため */
    padding-left: 25px;    /* アイコンの幅に合わせて調整（20pxより少し余裕を持たせています） */
    border-bottom: 1px solid white;
    color: inherit;        /* 必要に応じて色を指定 */
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s;
  }
  
  /* 共通設定：通常時とホバー時のアイコンを同じ位置に固定 */
  .logo_info .info li:nth-of-type(6) a::before,
  .logo_info .info li:nth-of-type(6) a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;  /* SVGのサイズに合わせて調整 */
    height: 18px; /* SVGのサイズに合わせて調整 */
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;
    transition: opacity 0.3s;
  }
  
  /* 通常時のInstagramアイコン */
  .logo_info .info li:nth-of-type(6) a::before {background-image: url(img/common/footer_sns_instagram.svg); opacity: 1;}
  
  /* ホバー時のInstagramアイコン（最初から読み込んでおく） */
  .logo_info .info li:nth-of-type(6) a::after {background-image: url(img/common/footer_sns_instagram_hover.svg); opacity: 0;}
  
  /* ホバー時の挙動 */
  .logo_info .info li:nth-of-type(6) a:hover {border-bottom: 1px solid var(--link_color); color: var(--link_color);}
  .logo_info .info li:nth-of-type(6) a:hover::before {opacity: 0; /* 通常アイコンを隠す */}
  .logo_info .info li:nth-of-type(6) a:hover::after {opacity: 1; /* ホバー用アイコンを表示 */}
} /* footer  */




/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
  body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */
  a[href]:after {content: "" !important;}
  abbr[title]:after {content: "" !important;}
  .show-for-small-only {display: none !important}
  .pagetop.show {display: none !important}
  body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} /* Chrome印刷で日本語が表示されない対応 */
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/
/* プルダウンメニュー */
.dropmenu {
  li {position: relative;}
  li a {display: block; font-size: 1.4rem; letter-spacing: 0; color: #333333; font-weight: bold}
  li a:hover {color: var(--link_color) }

  /* .wrap は jsで付与する */
  .wrap {width: 140px; padding-top: 10px; position: absolute; top: 100%; left: -15px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s ease; z-index: 50;}
  > li:hover > .wrap {opacity: 1; visibility: visible; transform: translateY(0);}
  .wrap > .sub-menu {display: flex; flex-direction: column; gap: 0; background: white; align-items: initial;}
  .wrap > .sub-menu li {height: auto; overflow: visible; }
  .wrap > .sub-menu li a {padding: 5px 20px; font-size: 1.4rem; color: #858585;}
  .wrap > .sub-menu li:first-child a {padding-top: 15px}
  .wrap > .sub-menu li:last-child a {padding-bottom: 15px}
  .wrap > .sub-menu li a:hover {color: var(--link_color) }
  .wrap > .sub-menu li a:hover::after {display: none} /* hover の解除 */

  #menu-item-21 .wrap {left: -35px}
  #menu-item-21 .wrap > .sub-menu li:last-child a {letter-spacing: .1em; line-height: 1.2}
  #menu-item-32 a {background: #333333; color: white; padding: 10px 15px}
  #menu-item-32 a:hover {background: var(--link_color)}

  /* 親メニューの矢印 */
  > li.menu-item-has-children {position: relative; padding-right: 16px;}
  > li.menu-item-has-children::after {content: ""; width: 7px; height: 7px; position: absolute; right: 2px; top: 30%; border-bottom: solid 1px #333; border-right: solid 1px #333; transform: rotate(45deg);}
} /* .dropmenu */

/* トップページでの調整 */
.home {
  header .site_nav_pc #menu-marujun > li:nth-child(1)::before,
  header .site_nav_pc #menu-marujun > li:nth-child(2)::before,
  header .site_nav_pc #menu-marujun > li:nth-child(3)::before {background-color: white;}
  .dropmenu > li.menu-item-has-children::after {border-bottom: solid 1px white; border-right: solid 1px white;}
}

.home .dropmenu {
  > li a {color: white; transition: color 0.3s ease;}
  > li a:hover {color: var(--link_color)}
  > li.menu-item-has-children:hover::after {border-color: var(--link_color)}
  #menu-item-32 a {background: white; color: #333333;}
  #menu-item-32 a:hover {color: var(--link_color)}
}

/* #works に入ってからの調整 */
.home.is-works {
  header {background: rgba(255, 255, 255, 0.95)}
  header .site_nav_pc #menu-marujun > li:nth-child(1)::before,
  header .site_nav_pc #menu-marujun > li:nth-child(2)::before,
  header .site_nav_pc #menu-marujun > li:nth-child(3)::before {background-color: #333333;}

  .dropmenu > li a {color: #333333;}
  .dropmenu > li a:hover {color: var(--link_color);}
  .dropmenu > li.menu-item-has-children::after {border-color: #333333}
  .dropmenu > li.menu-item-has-children:hover::after {border-color: var(--link_color)}
  .dropmenu #menu-item-32 a {background: #333333; color: white; transition: all 0.3s ease;}
  #menu-item-32 a:hover {background: var(--link_color)}


}


/* ハンバーガーメニューボタン */
.button_container {position: fixed; top: 25px; right: 20px; height: 26px; width: 26px; cursor: pointer; z-index: 200;}
.button_container:after {content: ""; position: absolute; top: -25px; right: -20px; z-index: -1; width: 60px; height: 60px;}
.button_container:hover {opacity: .8;}
.button_container.active .top {transform: translateY(8px) translateX(0) rotate(45deg); background: #333333; z-index: 200}
.button_container.active .middle {opacity: 0; background: #333333;}
.button_container.active .bottom {transform: translateY(-8px) translateX(0) rotate(-45deg); background: #222; z-index: 200}
.button_container span {background: #333333; border: none; height: 2px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 8px;}
.button_container span:nth-of-type(3) {top: 16px;}

/* メニュー内 (sp用) */
.overlay {
  position: fixed; background: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: auto; z-index: 99;
  .overlay-menu {width: 100%; }
  .overlay_wrap {background: white; padding-top: 18px}
  .site_logo {margin-bottom: 18px; padding: 0 20px;}
  .site_logo img {width: 150px; }

  .link_wrap li {text-align: center; }
  .link_wrap a {font-size: 1.5rem; font-weight: 700}
  .link_wrap a:hover {color: var(--link_color)}
  .link_wrap .child a {color: #858585}

  .top_wrap {border-top: 2px solid var(--bg_color); border-bottom: 2px solid var(--bg_color); display: grid; grid-template-columns: 1fr 1fr; background: url(img/common/footer_bar.svg) no-repeat center center;}
  .top_wrap li {padding: 8px; line-height: 1}

  .top_wrap ul:nth-of-type(1) li:nth-of-type(1) {border-bottom: 2px solid var(--bg_color); padding: 18px; margin-bottom: 18px}
  .top_wrap ul:nth-of-type(2) {padding: 10px 0}
  .under_wrap {border-bottom: 2px solid var(--bg_color); margin-bottom: 20px; background: url(img/common/footer_bar.svg) no-repeat center center;}
  .under_wrap ul {display: grid; grid-template-columns: 1fr 1fr;}
  .under_wrap li {padding: 18px; line-height: 1}
  .copy {text-align: center; padding-bottom: 20px; font-size: 1.3rem; font-weight: 700; letter-spacing: 0}
} /* .overlay */

.overlay.open {
  opacity: 1; visibility: visible; height: 100%;
} /* .overlay.open */



/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（639px 以下） */
@media screen and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.sp_non {display: none}
  table tr th, table tr td {padding: 0.4em 0.8em; font-size: 1.2rem}
  .single .wp-caption {max-width: 100%}
  .single #single_page_nav ul {justify-content: center}

  .inner {padding: 0 30px}
  #loading_logo {max-width: 130px}
  .h_title .en {line-height: 1.2}

  header .inner {padding-left: 20px; padding-right: 20px}
  header h1 img {width: 150px}

  .post_line_horizontal article dt {margin-top: 10px}
  .post_line_horizontal article dd {grid-template-columns: 1fr; gap:10px}
  .post_line_horizontal article dd span span {position: absolute; top:20px ; right: 20px;}
  .post_line_horizontal article dd h3 {overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: clip; white-space:wrap; line-height: 1.4}

  .home #hero h2 img {max-width: 130px}
  .home #hero .hero_haeder .inner {padding: 18px}
  .home #hero_after {height: auto; padding: 140px 0}
  .home #hero_after .inner {width: 100%; }
  .home #hero_after hgroup h2 {line-height: 1.6}

  .page {
    .each_wrap .inner {grid-template-columns: 1fr;}
    .deco .inner {padding: 0}
    .each_wrap hr {width: calc(100% - 60px)}
  }

  .page-id-2 {
    #title_head h2 {padding: 70px 0 130px;}
    #kominka {padding-bottom: 100px}
  }

  .page-id-13 {
    #title_head .h_title_wrap h2 {padding: 0 30px}
    #overview dl {grid-template-columns: 1fr;}
    #overview li {display: grid; grid-template-columns: 90px 1fr;}
    #staff dd span {display: block; margin-right: 0; line-height: 2}
    #contact dl:nth-of-type(2) a {font-size: 2.3rem}
    #contact {margin-bottom: 100px}
  }

  .single {
    #single_page_nav ul {grid-template-columns: 1fr 50% 1fr;}
    #single_page_nav .to_list a {padding: 22px 0; display: block}
    #single_page_nav #previous a.box_btn {padding: 30px}
    #single_page_nav #next a.box_btn {padding: 30px}
    #single_page_nav a span {display: none}
  }

  .single-work {
    .date_slug_single .tax {font-size: 1.2rem; background: var(--bg_color); padding: 4px 8px; line-height: 1; font-weight: 700; position: absolute; top: 0; right: 0;}
    h2.entry_title {margin-bottom: 60px}
    .wp-block-image {margin: 0 calc(50% - 50vw)}
    .wp-element-caption {padding-right: 30px}
  }

  .single-post {
    #breadcrumb .inner { margin-bottom: 40px}
    .entry_meta {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 40px;}
    .entry_meta dt {margin-bottom: 0; }
  }

  footer {
    padding-bottom: 40px; background: white url(img/common/footer_bar.svg) no-repeat center 60px;
    .inner {display: grid; grid-template-columns: 1fr; gap: 40px; }
    .navi {border-bottom: 1px solid #f0f0e6; padding-bottom: 60px} 
    .navi ul {width: 50%;}
    .navi ul:nth-child(2) {padding-left: 40px}
    .navi ul:nth-child(1),
    .navi ul:nth-child(2) {margin-right: 0;}
    .navi ul:nth-child(1)::after,
    .navi ul:nth-child(2)::after {display: none}
    .logo_info {display: block}
    .logo_info .logo {text-align: center; margin-bottom: 40px}
    .logo_info .logo img {width: 120px}
    .logo_info .info li {text-align: center; margin-bottom: 3px}
    .logo_info .info li:nth-of-type(6) {margin-bottom: 18px}
  }
}


/* スマホ〜タブレット共通（1023px 以下） */
@media screen and (max-width: 1023px) {
  .no_br br {display: none !important}
  .home #hero {height: 100svh;}
  header .contact_sp a {background: #333333; padding: 10px; color: white; letter-spacing: 0; position: absolute; top: 18px; right: 60px; font-size: 1.2rem ;line-height: 1; font-weight: 700; z-index: 120}
}


/* スマホ「横」向き対応 */
@media screen and (max-width: 940px) and (orientation:landscape) {
  .sample {}
}


/* スマホ以降（375px 以下）iPhone SE */
@media screen and (max-width: 375px) {
}


/* スマホ以降（320px 以下）旧 iPhone SE */
@media screen and (max-width: 320px) {
  .sample {}
}


/* スマホ以降（321px 以降） */
@media screen and (min-width: 321px) {
  .sample {}
}


/* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .no_br_tb br {display: none !important}
  br.tb_non {display: none}

  .post_line {
    article dd .tax {display: none}
    article dd.title h3 {font-size: 1.6rem}
  }

  .single-post #content .inner {grid-template-columns: 25% 1fr;}
  .single #single_page_nav .to_list a {padding-left: 10%; padding-right: 10%}
  .single #single_page_nav #previous a.box_btn {padding: 21px 21px 21px 30%;}
  .single #single_page_nav #next a.box_btn {padding: 21px 30% 21px 21px;}

  footer {
    background-image: none; padding-bottom: 50px;
    .inner {flex-wrap:  nowrap;}
    .navi ul li {font-size: 1.2rem} 
    .navi ul:nth-child(1), .navi ul:nth-child(2) {margin-right: 30px}
    .navi ul:nth-child(1)::after, .navi ul:nth-child(2)::after {margin: 0 15px;}
    .logo_info {gap: 30px}
    .logo_info .logo img {max-width: 130px}
    .logo_info .info li {font-size: 1rem}
  }  
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .gtranslate_wrapper {top: 112px} /* ログイン時のアドミンバー対応（GTranslate） */
  .post_line_horizontal article dl {display: grid; grid-template-columns: 130px 1fr;}
  .entry_content .wp-block-table td, .wp-block-table th {padding: 1em;}

  .inner {padding: 0 40px}
}


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  .no_br_pc br { display: none}
  br.pc_non {display: none} 
  .mw_wp_form .no_requir dt {padding-left: 42px}
}


/* PCモニター（1025px以降） */
@media screen and (min-width: 1025px) {
  .inner {width: min(1240px, 100%); padding: 0 50px}
  .each_wrap hr {width: min(1140px, 100%);}
}


/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  .sample {}
}


/* PCモニター大（1480px以降） */
@media screen and (min-width: 1480px) {
  .sample {}
}



/* 動作のため#hero の外に出す */
@keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.1);}
}