.subpage-content{
  position: relative;
  z-index: 1;
}

/* ==========================
   Page Header (Common)
   (page css に追加)
========================== */

.page-header{
  background:#456A84;
  width:100%;
  height:45vh;
  position:relative;
  overflow:visible;
  margin-top: -25px;
}

.page-header__inner{
  height:100%;
  width: 100%;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:30% 70%;
  align-items: end;
  padding: 0 0 35px;
}

.page-header__left{
  z-index:4;
  display:flex;
  justify-content:flex-end;
  margin-right: -50px;
}

.page-header__titles{
  text-align:right;
}

.page-header__title-en{
  font-size:40px;
  line-height:1.1;
  color: #fff;
  font-weight: 600;
}

.page-header__title-ja{
  margin:8px 0 0;
  font-size:20px;
  line-height:1.3;
  color: #fff;
  font-weight: 500;
}

.page-header__right{
  z-index:3;
  position:absolute;
  right:0;
  bottom:-17%;
  width:70%;
  height:300px;
}

.page-header__media{
  width:100%;
  height:100%;
  position: relative;
}

.page-header__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.1); 
  pointer-events:none;
}

.page-header__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ==========================
   ABOUT : Wanobaとは
========================== */

.about-wanoba{
  background:#fff;
  width:100%;
}

/* 上：テキスト */
.about-wanoba__head{
  margin-top:50px;
  padding:10% 5% 0;
  text-align:center;
}

.about-wanoba__title{
  font-size:4rem;
  font-weight:600;
  color:#456A84;
  margin:35px 0 15px;
}

.about-wanoba__lead{
  font-size:22px;
  line-height:3.9rem;
  margin:0;
  font-weight: 500;
}

/* 下：ループ */
.about-wanoba__loop{
  width:100%;
  padding:50px 0 0;
}

/* ==========================
   LOOP TEXT
========================== */

.loop03{
  overflow:hidden;
  padding-top:0;
  padding-bottom:15px;
}

.loop03__box{
  display:flex;
  padding:5px 0;
}

.loop03__item{
  flex:0 0 auto;
  font-size:100px;
  white-space:nowrap;
  padding:0 25px;
  color:transparent;
  -webkit-text-stroke:0.5px #456A84;
  font-family: Arial, sans-serif;
  font-weight:bold;
  margin-bottom: 15px;
}

/* 奇数：右 → 左 */
.loop03__item:nth-child(odd){
  animation:loop 50s -25s linear infinite;
}

/* 偶数：左 → 右 */
.loop03__item:nth-child(even){
  animation:loop2 50s linear infinite;
}

@keyframes loop{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}

@keyframes loop2{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-200%); }
}

/* SP */
@media(max-width:500px){
  .loop03__item{
    font-size:60px;
  }
}

/* ==========================
   ABOUT : Wanobaとは（画像）
========================== */

/* subpage-inner の幅制限を突破（全幅） */
.about-wanoba__img{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
}


/* 窓（固定） */
.about-wanoba__img-inner{
  width:100%;
  height:620px;
  overflow:hidden;
  position:relative;
}

/* 画像（中だけ動く） */
.about-wanoba__img-el{
  position:absolute;
  top:0;
  left:-20%;
  height:100%;
  width:126%;
  object-fit:cover;
  display:block;
  max-width:none!important;
  --translateX: 0px;
  transform: translateX(var(--translateX));
  will-change: transform;
}

/* ==========================
   ABOUT MESSAGE
========================== */
.about-message{
  background:#F8F9F8;
  width: 100%;
  padding-top:7%;
  padding-bottom:7%;
  padding-left:5%;
  padding-right:6%;
}

.about-message__inner{
  text-align: center;
  margin: 0 auto;
  max-width:1300px;
}

.about-message__head{
  margin-bottom:55px;
}

.about-message__title{
  margin:0;
  line-height:1.1;
}

.about-message__title-en{
  display:block;
  font-size:4rem;
  font-weight:700;
  letter-spacing:0.02em;
  color: #456A84;
}

.about-message__title-ja{
  display:block;
  margin-top:15px;
  font-size:22px;
  font-weight:600;
  letter-spacing:0.02em;
}

.about-message__body{
  display:flex;
  align-items:center;
  column-gap:6%;
}

.about-message__col--text{
  width:100%;
  text-align: center;
}

.about-message__col--img{
  width:46%;
  display: none;
}

.about-message__text{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.9;
  color: black;
  
}

.about-message__img{
  width:90%;
  height:auto;
  display:block;
}

.about-message__signature{
  margin-top: 50px;
  text-align: right;
  margin-right: 180px;
}

.about-message__company{
  margin:0;
  font-size:14px;
  letter-spacing:0.04em;
  color: black;
}

.about-message__name{
  margin-top:6px;
  font-size:16px;
  font-weight:500;
  letter-spacing:0.04em;
}



/* ==========================
   ABOUT STRENGTHS
========================== */
.about-strengths{
  background:#fff;
  width:100%;
  padding: 7% 5%;
}

.page-id-933 .front-service__divider{
  margin: 20px 0;
}
/* 強み4の下の下線を非表示 */
.about-strengths__list > .front-service__divider:last-child{
  display: none;
}


.page-id-933 .contact-button__inner{
  background: #F8F9F8;
  margin-top: 140px;
}

.about-strengths__inner{
  margin: 0 auto;
  max-width: 1300px;
}

/* 上コンテナ */
.about-strengths__head{
  margin-bottom:40px;
}

.about-strengths__title{
  margin:0;
  line-height:1.1;
  text-align: center;
}

.about-strengths__title-en{
  display:block;
  font-size:4rem;
  font-weight:700;
  letter-spacing:0.02em;
  color: #456A84;
}

.about-strengths__title-ja{
  display:block;
  margin-top:8px;
  font-size:22px;
  font-weight:700;
  letter-spacing:0.02em;
}

/* 下コンテナ */
.about-strengths__list{
  width:100%;
}

.about-strengths__item{
  display:flex;
  align-items:center;
  column-gap:6%;
  padding-top:20px;
  padding-bottom:20px;
}

.about-strengths__col--img{
  width:48%;
}

.about-strengths__col--text{
  width:46%;
}

.about-strengths__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:5px;
}

.about-strengths__text{
  width:100%;
}


/* ==========================
   Service Section Headings
========================== */
.service-headlines {
  display: grid;
  gap: 28px;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 0;
}

.service-head {
  display: flex;
  align-items: center;
  gap: 20px;
}


.service-head .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  font-size: 20px;
  font-family: 'Noto Sans JP', sans-serif;
}

.service-head .text .en {
  font-size: 18px!important;
  color: #333;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  font-family: "Montserrat", Sans-serif;
  font-weight: 600;
}

.service-head .text .jp {
  font-size: 35px!important;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.07em;
  font-family: 'Noto Sans JP', sans-serif;
}

/* ==========================
   Strength Headings
========================== */
.strength-head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.font-80 {
    font-size: 80%;
}

.strength-head .num {
  font-size: 4.5rem;
  font-weight: 600;
  color: #456A84;
  line-height: 1;
  min-width: 70px;
  text-align: right;
  font-family: "Montserrat", Sans-serif;
	min-width: auto;
  width: auto;
}

.strength-head .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  font-size: 20px;
  font-family: 'Noto Sans JP', sans-serif;
}

.strength-head .text .en {
  font-size: 18px;
  color: #333;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
  font-family: "Montserrat", Sans-serif;
  font-weight: 600;
}

.strength-head .text .jp {
  font-size: 35px;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.07em;
  font-family: 'Noto Sans JP', sans-serif;
}

.strength-desc {
  margin-top: 20px !important;
}

/* ==========================
   Strength Section Description
========================== */
.strength-desc {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  max-width: 520px; /* 画像横で読みやすい幅 */
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
}

/* ==========================
   Responsive
========================== */
@media (max-width: 768px) {
  .service-headlines {
    gap: 18px;
  }

  .strength-head .num{
    font-size:3rem;
  }

  .service-head .num{
    font-size: 4rem;
    min-width: 60px;
  }

  .service-head .text .en{
    font-size: 1rem!important;
  }

  .service-head .text .jp{
    font-size: 1.8rem!important;
  }

  .strength-head .text .en{
    font-size: 1rem;
  }

  .strength-head .text .jp{
    font-size: 1.8rem;
  }

  .strength-desc {
    font-size: 14px;
    line-height: 1.8;
    max-width: 100%;
	}
}

/* ==========================
   Responsive：1000px以下
========================== */
@media (max-width: 1000px) {
  .page-header{
    height: 55vh;
  }

  .about-wanoba__title{
    font-size: 2.3rem;
  }
  .about-wanoba__lead{
    font-size:16px ;
    line-height: 2rem;
  }
  .about-wanoba__img-inner{
    height: auto;        /* ← これが必須 */
    min-height: 300px;  /* 好きな高さ */
  }
  .about-message,
  .about-strengths{
    padding: 15% 5%;
  }

  .about-message__title-en,
  .about-strengths__title-en{
    font-size: 3rem;
  }
  .about-message__col--text{
    text-align: left;
  }
  .about-message__signature{
    margin-right: 0px;
  }

  .about-strengths__item{
    flex-direction: column;
    row-gap: 18px;
  }

  .about-strengths__col--text{
    width: 100%;
    order: 1;
  }

  .about-strengths__col--img{
    width: 100%;
    order: 2;
  }

  .about-strengths__img{
    width: 100%;
  }
}

/* ==========================
   Responsive：500px以下
========================== */
@media (max-width: 500px) {
  .page-header__inner{
    padding: 0 0 20px 20px;
  }
  .page-header{
    height: 40vh;

  }

  .about-wanoba__head {
     margin-top: 0;
     padding: 25% 5% 0;
 }
  .page-header__right{
    height: 150px;
  }

   body.blog:not(.category) .has-news-archive .page-header__left {
    margin-right: -115px;
  }

  .page-header__title-en{
    font-size: 30px;
  }

  .about-wanoba__loop{
    padding: 20px 0 0;
  }
  .about-wanoba__img-inner{
    min-height: 230px;
  }
  .about-message__text{
    margin: 0 auto;
  }
  .about-strengths__item{
    padding-top: 0;
  }
  .page-id-933 .contact-button__inner{
    margin-top: 50px;
  }
}
  
/* ==========================
   Service一覧
========================== */
.service-page{
  width:100%;
  padding: 10% 0;
}

.service-page__inner{
  width:100%;
  max-width:1300px;   /* いつもの基準幅 */
  margin:0 auto;
  padding-left:5%;
  padding-right:5%;
}

.service-page__lead{
  max-width:900px;
  margin:0 auto 110px;
  text-align: center;
}

.service-page__lead-text{
  font-size:16px;
  line-height:1.9;
  font-weight: 500;
}

/* ==========================
   Responsive：500px以下
========================== */
@media (max-width: 500px) {
  .service-page{
   padding: 30% 0;
}
.service-page__lead{
  margin-bottom: 30px;
}

.page-id-938 .front-service__content{
  margin-bottom: 30px;
}
}

/* ==========================
   FAQ
========================== */

.faq-section {
  background: #fff;
  padding: 12% 5% 10%;
  font-family: 'Noto Sans JP', sans-serif;
}

.faq-section__inner{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.faq-section__lead{
  margin-bottom: 30px;
}

.faq-section__lead-text{
  margin: 0;
  line-height: 1.9;
  color: #333;
  text-align: center;
  margin-bottom: 80px;
  font-weight: 500;
}

/* ==========================
   FAQ
========================== */
.faq-section {
  font-family: 'Noto Sans JP', sans-serif;
}

.faq-item {
  margin-bottom: 15px;
}

/* --- 質問ボタン --- */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #456A84;
  color: #fff;
  font-size: 1.1rem;
  padding: 15px 25px;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  transition: background 0.3s ease;
}

.faq-item.open .faq-question {
  background: #A3A47A;
}

/* ホバー時 */
.faq-question:hover {
  background: #A3A47A;
}

/* --- Q丸 --- */
.faq-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8f9f8;
  color: #456A84;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
  font-weight: 700;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
}

/* --- 質問文（消える対象） --- */
.faq-text {
  min-width: 0;        /* 1frの中で折り返し安定 */
  line-height: 1.6;
}

/* ＋／− アイコン */
.faq-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: auto;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: all 0.3s ease;
}
.faq-toggle::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}
.faq-toggle::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.faq-item.open .faq-toggle::after {
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
}

/* --- 回答外枠 --- */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  border-radius: 10px;
  padding: 0 20px;
  transition: max-height 0.45s ease, padding 0.45s ease;
  display: block; 
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* --- 回答内側 --- */
.faq-answer-inner {
  display: flex;
   align-items: flex-start; 
  gap: 10px;
}

.faq-answer p {
  color: #333;
  margin: 20px 0;
  line-height: 1.8;
}

.faq-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #456A84;
  color: #fff;
  width: 40px;
  height: 40px;
  font-weight: 700;
  border-radius: 50%;
  margin: 20px 0 0 0;
  line-height: 40px;
  flex: 0 0 40px; 
}

/* --- 開いた状態 --- */
.faq-item.open .faq-answer {
  max-height: 800px;
  padding: 0 20px 20px 20px;
}

/* --- モバイル調整 --- */
@media (max-width: 500px) {
  .faq-answer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-a {
    margin-bottom: 5px;
  }

  .faq-answer p {
    margin: 0 0 20px 0;
  }
  
  .faq-question {
    padding: 10px 20px; 
   line-height: 1.5;
    align-items: center; 
    text-align: left; 
    gap: 12px;
  }
  
  

  .faq-q {
    flex-shrink: 0;          /* ← 潰れ防止 */
    margin-top: 2px;         /* ← 見た目微調整 */
  }
  .faq-section{
    padding: 30% 5%;
    margin-bottom: 50px;
  }

  .page-id-942 .page-header__left{
    margin-right: 0;
  }

 
}

/* ==========================
   FAQ: Astraの hover/focus 透明化を打ち消す
========================== */
.faq-section .faq-question,
.faq-section .faq-question:hover,
.faq-section .faq-question:focus,
.faq-section .faq-question:focus-visible,
.faq-section .faq-question:active{
  color: #fff !important;
}

/* span側も念のため（継承されないケース対策） */
.faq-section .faq-question .faq-text{
  color: #fff !important;
}


/* ==========================
   会社概要
========================== */
.page-id-1067 .subpage-content{
  padding: 13% 5% 10%;
}
.company-info {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 0 60px;
}

.company-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.company-info li {
  display: flex;
  gap: 40px;
  padding: 22px 0;
  border-bottom: 1px solid #e3e3e3;
}

.company-info .company-label {
  width: 180px;
  color: #456A84;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.company-info .company-data {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .company-info li {
    flex-direction: column;
    gap: 6px;
    padding: 18px 0;
  }

  .company-info .company-label {
    width: auto;
    font-size: 15px;
  }

  .company-info .company-data {
    font-size: 15px;
  }

  .page-id-1067 .subpage-content{
  padding: 20% 5% 15%;
}
}


/* ==========================
   Responsive：1000px以下
========================== */
@media (max-width: 1000px) {
  .page-id-1067 .subpage-content{
  padding: 15% 5% 10%;
}
}

/* ==========================
   News Archive Section Layout
========================== */
.news-archive{
  padding:13% 5% 10%;
}

.news-archive__inner{
  width:100%;
  max-width:1300px;
  margin:0 auto;
}

/* ==========================
   News List Layout（3カラム）
========================== */
.news-list{
  margin:0;
  padding:0;
  list-style:none;

  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:30px;
}

.news-item{
  margin:0;
}

/* ==========================
   News Card（デザイン）
========================== */
.news-card{
  position:relative;
  background:#CAD8DE;
  padding:15px;
}

.news-card__inner{
  background:#fff;
  padding:0 0 20px 0;
}

/* カード全体クリック用（透明リンク） */
.news-card__link{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
}

/* thumb */
.news-card__thumb{
  height:260px;
  background:#fff;
  overflow:hidden;
}

.news-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* title */
.news-card__title-wrap{
  height:80px;
  padding:18px 18px 0 18px;
}

.news-card__title{
  font-size:18px;
  line-height:1.8;
  color:#000;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

/* meta */
.news-card__meta{
  padding:10px 18px 0 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.news-card__cat{
  position:relative;
  z-index:2;

  display:inline-block;
  padding:3px 15px;
  font-size:12px;
  border:1px solid #000;
  border-radius:3px;
  color:#000;
  width:fit-content;
  text-decoration:none;
}

.news-card__cat:hover{
  text-decoration:underline;
}

.news-card__date{
  font-size:14px;
  color:#000;
}
.news-archive__inner{
  width:100%;
  max-width:1300px;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* news-archiveを含む親コンテナの幅制限を解除 */
.has-news-archive .ast-container{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}


/* ==========================
   Responsive：1000px以下
========================== */
@media (max-width: 1000px){
  .news-list{
    gap:15px;
  }
  .news-card__thumb{
    height: 200px;
  }
  .news-card__title{
    font-size: 16px;
  }
  .news-item a{
    font-size: 13px;
  }
  .news-card__date{
    font-size: 12px;
  }

}
/* ==========================
   Responsive：500px以下
========================== */
@media (max-width: 500px){
  .news-archive{
    padding: 23% 5% ;
  }
  .news-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .news-card__thumb{
    height: 130px;
  }
  .news-card__title-wrap,
  .news-card__meta{
    padding: 10px 5px;
  }
 
  .news-card__title{
    font-size: 13px;
    font-weight: 500;
  }
  .news-item a{
    font-size: 11px;
  }
  .news-card__date{
    font-size: 11px;
  }
  .news-card__inner{
    padding: 5px;
  }
  .ast-separate-container #primary.site-main.has-news-archive{
  padding:0;
}

}


/* ==========================
   Single News Header
========================== */
.single-news-header{
  background:#456A84;
  padding:0 5%;
  height: 45vh;
}

.single-news-header__bottom{
  margin-top: 24px;
}


.single-news-header__inner{
  max-width:1300px;
  margin:0 auto;
  padding:40px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.single-news-header__grid{
  display:flex;
  gap:30px;
}

.single-news-header__left{
  width:25%;
  display:flex;
  flex-direction:column;
  margin-left: 50px;
}

.single-news-header__right{
  width:85%;
}

/* Left texts */
.single-news-header__label{
  color:#fff;
  font-size:14px;
  letter-spacing:0.06em;
}

.single-news-header__catname{
  color:#fff;
  font-size:30px;
  font-weight:600;
}

.single-news-header__to-archive{
  color:#fff;
  text-decoration:none;
  font-size:14px;
  display:inline-block;
}

.single-news-header__to-archive:hover{
  text-decoration:underline;
}

/* ==========================
   Section Grid
========================== */
.section-grid{
  padding:7% 5%;
}

.single-post .section-grid {
  background-color: #CAD8DE40;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px; /* ← マス目の大きさ調整 */
}

.section-grid__inner{
  max-width:1300px;
  margin:0 auto;
}

.section-grid__grid{
  display:flex;
  gap:30px;
  align-items: stretch;
   flex-wrap: wrap;
}

.section-grid__left {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 500;
    padding: 30px;
}

.section-grid__right{
  width:70%;
  margin-top:-20%;
  min-height: clamp(520px, 70vh, 860px);
  display: flex;
  flex-direction: column;
}


/* Category list */
.section-grid__label{
  font-size:14px;
  letter-spacing:0.06em;
  color:#000;
}

.section-grid__catlist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section-grid__catlist a{
  text-decoration:none;
  color:#000;
  font-size:14px;
}

.section-grid__catlist a:hover{
  text-decoration:underline;
}

.single-post .single-news-box{
  min-height: 720px;
  display: flex;
  flex-direction: column;
}

.single-post .single-news-box__content{
  flex: 1;
}

/* single news header : 記事一覧リンクのhover / focusリセット */
.single-news-header__to-archive{
  color: #fff;
  text-decoration: none;
}

.single-news-header__to-archive:hover,
.single-news-header__to-archive:focus,
.single-news-header__to-archive:focus-visible{
  color: #fff;
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* ==========================
   Content Box（Right）
========================== */
.single-news-box{
  background:#fff;
  padding:60px;
   min-height: clamp(420px, 60vh, 720px);
}

/* meta row */
.single-news-box__meta{
  display:flex;
  align-items:center;
  gap:12px;
}

.single-news-box__date{
  font-size:14px;
  color:#000;
}

.single-news-box__badge{
  display:inline-block;
  padding:3px 20px;
  background:#456A84;
  color:#fff;
  font-size:12px;
  text-decoration:none;
}

.single-news-box__badge:hover{
  opacity:0.9;
}

/* title / content */
.single-news-box__title{
  margin:50px 0 0;
  font-size:25px;
  line-height:1.4;
  color:#000;
}

.single-news-box__content{
  margin-top:18px;
  font-size:15px;
  line-height:1.9;
  color:#000;
}

/* bottom */
.single-news-box__bottom{
  margin-top:26px;
  text-align: right;
  width: 70%;
}

.single-news-box__back{
  display:inline-block;
  padding:15px 20px;
  border:2px solid #456A84;
  text-decoration:none;
  color:#000000;
  min-width: 200px;
  text-align: center;
  margin-top: 20px;
}

.single-news-box__back:hover{
  background:#456A84;
  color:#fff;
}

/* ==========================
   レスポンシブ：1000以下で崩れ防止
========================== */
@media (max-width: 1000px){
  main#primary.site-main.has-news-archive{
    padding-top: 0;
  }
  .single-news-header{
    height: 35vh;
  }
  .section-grid__right{
    margin-top: 0;
  }
  .single-news-box{
    padding: 40px;
  }

  .single-news-box__title{
    font-size: 20px;
  }

}

@media (max-width: 500px){
  .section-grid {
    padding: 10% 5% 0;
}

  .section-grid__grid{
     flex-direction: column;
  }
  .section-grid__right{
    width: 100%;
  }
   /* 記事本文を一番上 */
  .section-grid__right{
    order: 1;
    transform: none;
  }

  /* Categoryを真ん中 */
  .section-grid__left{
    order: 2;
    width: 100%;
    border: 2px solid #151616;
  }

  /* 一覧に戻るを一番下 */
  .single-news-box__bottom{
    order: 3;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0;
    padding-bottom: 80px;
  }

  .single-news-box__title{
    margin-top: 30px;
  }

  .news-card__title-wrap{
    height: auto;
    padding: 10px 5px 0;
  }

  .news-card{
    padding: 10px;
  }


}

/* ==========================
   contact
========================== */
.page-id-949 .subpage-content {
    padding: 10% 5% ;
    max-width: 1300px;
    margin: 0 auto;
}

.page-id-949 .has-text-align-center{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}
.page-id-949 .col-red{
  color: crimson;
}

/* ==========================
   Responsive：1000px以下
========================== */
@media(max-width:1000px){
  .page-id-949 .subpage-content {
    padding: 15% 5%;
  }
}

/* ==========================
   Responsive：500px以下
========================== */
@media(max-width:500px){
  .page-id-949 .subpage-content {
    padding: 20% 5% 15%;
  }
   .step-nav.ff_step_nav_last{
    text-align: center;
  }

  .step-nav.ff_step_nav_last .ff-btn-next{
    float: none !important;
    display: inline-block;
  }

  .fluentform_wrapper_5.ffs_custom_wrap .step-nav .ff-btn-prev{
    font-size: 18px;
    padding: 20px 60px!important;
  }


}



/* ==========================
   Thanks Page
========================== */
.page-thanks{
  overflow-x: hidden;
}

/* ==========================
   Thanks Hero
========================== */
.thanks-hero{
  position: relative;
  padding: 0;
  height: 46vh;
  min-height: 420px;
  background: #fff;
  color: #456A84;
  overflow: hidden;
}

.thanks-hero::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #456A84;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 85%,
    50% 35%,
    0 85%
  );
  z-index: 1;
}

.thanks-hero__inner{
  position: relative;
  height: 100%;
  padding: 0;
  z-index: 2;
}

/* ==========================
   Thanks Hero Content（下のセクション）
========================== */
.thanks-hero-content{
  padding: 70px 5% 20px;
  background: #fff;
}

.thanks-hero__content{
  max-width: 1300x;
  margin: 0 auto;
  text-align: center;
}

.thanks-hero__title{
  font-size: 1.6rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #456A84;
}

.thanks-hero__text{
  font-size: 0.95rem;
  line-height: 1.9;
  opacity: 1;
  margin-bottom: 36px;
  color: #456A84;
}

/* TOPへ戻るボタン */
.thanks-hero__btn{
  display: inline-block;
  padding: 14px 42px;
  background: #456A84;
  color: #fff;
  border-radius: 0;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s cubic-bezier(.22,1,.36,1);
}

.thanks-hero__btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* ==========================
   下部シェイプ
========================== */
.thanks-hero__shape{
  display: none;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
}

.thanks-hero__shape svg{
  width: 100%;
  height: 80px;
  display: block;
}

.thanks-hero__shape-fill{
  fill: #fff;
}

/* ==========================
   窓グリッド
========================== */
.thanks-hero__windows{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 120px;
  z-index: 2;
}

.thanks-hero__window{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #456A84;
  border: none;
  box-sizing: border-box;
}

/* ==========================
   Contact Info
========================== */

.thanks-contact{
  padding: 80px 5% 120px;
  background: #fff;
}

.thanks-contact__inner{
  max-width: 1300px;
  margin: 0 auto;
}

.thanks-contact__box{
  width: 75%;
  margin: 0 auto;
  padding: 40px 32px;
  border: 5px double #A3A47A;
  text-align: center;
  font-weight: 500;
}

.thanks-contact__label{
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 23px;
}

.thanks-contact__company{
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.thanks-contact__address{
  font-size: .95rem;
  line-height: 1.8;
}
.thanks-contact__tel{
  font-size: 20px;
}
.thanks-hero__title br{
    display:none;
}
/* ==========================
   Responsive：1000px以下
========================== */
@media(max-width:1000px){
  
}

/* ==========================
   Responsive：500px以下
========================== */
@media(max-width:500px){
  .thanks-hero{
    height: 45vh;
  }
  .thanks-hero::before{
    clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 35%, 0 65%);
  }

  .thanks-hero__windows{
    bottom: 70px;
    gap: 5px;
    width: 85px;
  }

  .thanks-hero-content{
    padding: 0 5%;
  }
  .thanks-hero__title{
    font-size: 20px;
  }

  .thanks-hero__text{
    font-size: 15px;
    font-weight: 500;
    text-align: left;
  }

  .thanks-contact__box{
    width: 100%;
    padding: 20px;
  }
  .thanks-contact__tel{
    margin-bottom: 0;
  }
  .thanks-hero__title br{
    display: unset;
}
}

/*.fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=checkbox],
  .fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=radio]{
    position: relative;
  }

  .fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=checkbox]:after,
  .fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=radio]:after{
    margin-left: 0 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}*/

@supports (-webkit-touch-callout: none) {
  @media (max-width:500px){
    .fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=checkbox]:after,
    .fluentform_wrapper_5.ffs_custom_wrap .ff-el-group input[type=radio]:after{
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1 !important;
      right: auto !important;
      bottom: auto !important;
      
    }
  }
}

/* ==========================
   実績一覧
========================== */

section.works-archive {
    padding: 15% 5% 10%;
}

.works-archive__inner {
    max-width: 1300px;
    margin: 0 auto;
}


.page-header__to-archive{
  display: inline-block;
  margin-top: 10px;
  color: inherit;
  text-decoration: none;
}
.page-header__to-archive:hover,
.page-header__to-archive:focus{
  color: inherit;
  text-decoration: none;
  outline: none;
}


a.page-header__to-archive {
    color: #fff;
    font-weight: 500;
}

a.page-header__to-archive:hover {
    color: #fff;
    font-weight: 500;
}

/* ==========================
   Responsive：1000px以下
========================== */
@media(max-width:1000px){
  
}

/* ==========================
   Responsive：500px以下
========================== */
@media(max-width:500px){
  section.works-archive {
    padding: 25% 5% 15%;
}
}
/* ==========================
   実績詳細
========================== */
.single-works .section-grid{
  padding: 10% 5%;
  background-color: #CAD8DE40;
}

.single-works .section-grid__inner {
    max-width: 1300px;
    margin: 0 auto;
    background: #fff;
    padding: 80px 120px;
}

/* Date & Title */
.works-detail-head{
  margin-bottom: 22px;
}

.works-detail-date{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #000000;
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 500;
}

.works-detail-date::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2E2E2A;
  display: inline-block;
}

.works-detail-main-title{
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #000000;
  margin: 0;
}

/* Before / After */
.works-detail-ba{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.works-detail-ba__item{
  background: #fff;
  border: 1px solid #E8EDF2;
  border-radius: 5px;
  padding: 14px 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  margin-bottom: 30px;
}

.works-detail-ba__item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

.works-detail-ba__label{
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: #6E7C67;
}

/* After 側のラベルだけ色変更 */
.works-detail-ba__item:last-child .works-detail-ba__label{
  color: #6E88A0; 
}

/* ブロック（提案内容 / 施工詳細） */
.works-detail-block{
  margin-top: 26px;
}

.works-detail-title{
  font-size: 17px;
  font-weight: 800;
  color: #2E2E2A;
  margin: 0 0 10px;
  position: relative;
  padding-bottom: 14px;
}
.works-detail-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-image: repeating-linear-gradient(
    45deg,
     #6e7c67 0,
     #6e7c67 1px,
     transparent 1px,
     transparent 4px
    );
}

.works-detail-text{
  font-size: 15px;
  line-height: 2.1;
  color: #000000;

}

.works-detail-text p{
  margin: 0 0 10px;
}

/* 施工詳細（表風） */
.works-detail-table{
  margin-top: 14px;
}

.works-detail-row{
  padding: 14px 0;
}

.works-detail-label{
  font-size: 15px;
  font-weight: 800;
  color: #2E2E2A;
  margin-bottom: 6px;
}

.works-detail-value{
  font-size: 15px;
  color: #000000;
}


.works-detail-value p{
  position: relative;
  padding-left: 1em;
  margin-bottom: 15px;
}

.works-detail-value p::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.works-detail-value ul{
  margin: 0;
  padding-left: 1.2em;
}

.works-detail-value li{
  margin: 0 0 6px;
}

/* 一覧に戻る */
.works-detail-back{
  margin-top: 70px;
  text-align: center;
}

.works-detail-back a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 46px;
  border: 1px solid #6E88A0;
  color: #2E2E2A;
  background: transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.works-detail-back a:hover{
  background: #6E88A0;
  color: #fff;
  border-color: #6E88A0;
}

/* ==========================
   Responsive：1000px以下
========================== */
@media(max-width:1000px){
  .single-works .section-grid__inner{
  padding: 40px;
  }

  .single-works .section-grid{
  padding: 15% 5%;
  }

}

/* ==========================
   Responsive：500px以下
========================== */
@media(max-width:500px){
  .single-works .section-grid {
    padding: 25% 5% 15%;
}

.single-works .section-grid__inner{
  padding: 40px 20px;
  }

  .works-detail-ba{
        grid-template-columns: 1fr;
        gap: 15px;
  }

  .works-detail-ba__item{
    margin-bottom: 0;
  }

  .works-detail-ba__item:last-child{
    margin-bottom: 30px;
  }
}


/* ==========================
   Service Detail（PC）
========================== */

/* Hero */
.service-hero{
  position: relative;
  height: 45vh;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.service-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.single-service section.works-archive {
    padding: 2% 5%;
}
.service-hero__inner{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 5%;
  text-align: center;
  color: #fff;
}

.service-works__back{
  margin-top: 20px;
  text-align: center;
}

.service-back-link{
  display: inline-block;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

.service-back-link:hover{
  transform: translateY(-3px);
}


.service-hero__title-en{
  font-size: 45px;
  line-height: 1.1;
  letter-spacing: .06em;
  margin: 0 0 10px;
  font-weight: 600;
}

.service-hero__title-jp{
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .06em;
  margin: 0;
  font-weight: 500;
}

/* Section 01 */
.service-detail{
  width: 100%;
  padding: 10% 5% 7%;
}

.service-detail__inner{
  max-width:1300px;
  margin: 0 auto;
  padding: 0 5%;
}

.service-detail__lead{
  font-size: 18px;
  line-height: 2.1;
  margin-bottom: 34px;
  color: #000;
  font-weight: 500;
}

/* Section titles */
.service-detail-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #A3A47A;
  color: #456a84;
}

.service-detail-text{
  font-size: 15px;
  color: #000;
}

/* Gallery：4 column */
.service-gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 40px 0 60px;
}

.service-gallery__item{
  border-radius: 15px;
  overflow: hidden;
}

.service-gallery__item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-detail-block {
    margin: 50px 0;
}

/* Section 02 */
.service-works{
  width: 100%;
  background: #F8F9F8;
  padding: 7% 5% 10%;
}

.service-works__inner{
  max-width: 1300px;
  margin: 0 auto;
}

.service-works__head{
  margin-bottom: 26px;
  text-align: center;
}

.service-works__title-en{
  display: block;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #456A84;

}

.service-works__title-jp{
  display: block;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.service-works__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 24px;
}

.service-works__cta{
  margin-top: 36px;
  text-align: center;
}

/* ===============================
   SERVICE FLOW
=============================== */

.service-flow {
  display: grid;
  gap: 32px;
	font-family: "Noto Sans JP", Sans-serif;
 }

.flow-item {
  position: relative;
  padding-left: 70px;
	margin-bottom:40px;
}

.flow-number {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 26px;
  font-weight: 700;
  color: #456A84; font-family: "Montserrat", Sans-serif;
  line-height: 1;
}

/* ===============================
   FLOW：番号の下に縦ラインを追加
=============================== */

.flow-item {
  position: relative;
  padding-left: 70px;
  margin-bottom: 40px; /* 下に余白を追加 */
}

.flow-number {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 26px;
  font-weight: 700;
  color: #456A84;
  line-height: 1;
}

/* 縦ライン（番号の下に追加） */
.flow-item::before {
  content: "";
      position: absolute;
    left: 13px;
    top: 32px;
    width: 2px;
    height: calc(100% - 0px);
    background: #456A84;
    opacity: 0.8;

}

/* 最終項目だけラインを消す場合 */
.flow-item:last-child::before {
  display: none;
}

/* SP調整 */
@media (max-width: 500px) {
  .flow-item {
    padding-left: 55px;
  }

  .flow-item::before {
    left: 10px;
  }

  .service-hero__title-en{
    font-size: 35px;
  }
}


.flow-title {
  font-size: 20px;
 font-weight: 500;
 margin: 0 0 15px;
}

.flow-text {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
 margin: 10px 0 0px !important;
}

/* SP調整 */
@media (max-width: 600px) {
  .flow-item {
    padding-left: 55px;
  }
  .flow-number {
    font-size: 22px;
  }
  .flow-title {
    font-size: 18px;
  }
}
/* ===============================
   SERVICE PRICE
=============================== */

/* PRICE：左右の幅を常に揃える */
.service-price-block .price-item {
  display: grid;
  grid-template-columns: 1fr 180px; /* 左固定 / 右固定 */
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #E0E0E0;
}

/* スマホ時は縦並び */
@media (max-width: 600px) {
  .service-price-block .price-item {
    grid-template-columns: 1f
  }

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #E0E0E0;
	font-family: "Noto Sans JP", Sans-serif;
}

.price-item:last-child {
  border-bottom: none;
}

.price-label {
  font-size: 15px;
  font-weight: 500;
  color: #444;
}

.price-value {
  font-size: 16px;
  font-weight: 700;
  color: #333; /* Wanobaブルー */
}

.price-note {
  margin-top: 18px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* SP調整 */
@media (max-width: 600px) {
  .service-price-block {
    padding: 25px;
  }
  .price-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
}		
	

/* 一時的に非表示（確実） */
.is-hidden-temp{
  display: none;
}

.service-works{
  display: none;
}


/* ==========================
   Responsive：500px以下
========================== */
@media(max-width:500px){
  .service-hero{
    height: 35vh;
    min-height: 0;
  }

  .service-detail__inner{
    padding: 10% 0 7%;
  }

  .service-gallery{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .service-detail__lead{
    line-height: 1.8;
  }
}


/* ==========================
   プライバシーポリシー
========================== */
.page-id-3 .subpage-content{
  padding: 15% 5% 10%;
}

.page-id-3 .subpage-content p{
  color: #000;
}

.page-id-3 .subpage-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.page-id-3 h3.wp-block-heading {
    font-size: 20px;
}

h5.wp-block-heading{
  margin-bottom: 15px;
}

@media(max-width:500px){
  .page-id-3 .subpage-content{
  padding: 25% 5% 15%;
}

.page-id-3 h3.wp-block-heading {
    font-size: 20px;
}
}