@charset "utf-8";

@font-face {
  font-family: NotoSansJP;
  src: url("../font/NotoSansJP-VariableFont_wght.ttf");
}
@font-face {
  font-family: Anton;
  src: url("../font/Anton-Regular.ttf");
}

:root {
  /* --- Arkheの既存変数を上書き（サイト全体に反映される） --- */
  --ark-color-main: #767E42;          /* メインカラー */
  --ark-color-text: #000;          /* 通常テキストの色 */
  --ark-font-base: 'Zen Kaku Gothic New', NotoSansJP, sans-serif;
  --ark-color-h1-title: #767E42; 
  /* --- 自分専用のオリジナル変数 --- */
  --header-height: 97px;
  --color-accent: #e67e22;         /* アクセントカラーなど */
}

/* 通常テキストや見出しに反映させる例 */
body {
  color: var(--ark-color-text);
  font-family: var(--ark-font-base);
}


h1, h2, h3 {
  color: var(--ark-color-text); /* 必要に応じてメインカラーなどに変更 */
}
a{
  text-decoration: none;
  color: var(--ark-color-text);
}
blockquote{
  padding: 0;
    border: none;
}
ul{
  list-style: none;
    padding-left: 0;
}
img{
  width: 100%;
}
figcaption{
  margin-top: 0;
  opacity: 1;
}
.l-container{
  max-width: 1120px;
}
@media screen and (min-width: 1200px){
  .l-container{
    padding-left: 0;
    padding-right: 0;
  }
}
.l-content__body.l-container{
  max-width: 100%;
}
.fs-16{
  font-size: 16px;
}
.fs-18{
  font-size: 18px;
}
.fs-20{
  font-size: 20px;
}
.link-icon{
  position: relative;
  padding-right: 32px;
}
.link-icon::after{
  content: "";
  width: 23px;
  height: 23px;
  background: url("../img/icon/link-icon.svg") no-repeat center/contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
}
.h1-title{
  font-family: NotoSansJP, sans-serif;
  color: var(--ark-color-h1-title);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 10px;
}
.l-content__body{
  margin-top: 0;
    padding: 0;
}
.admin-bar .p-drawer, 
.p-drawer{
  background: #fff;
  margin-top: var(--ark-header_height);
  padding-top: 0;
}
ul.c-drawerNav{
  border-top: none;
}
.c-drawerNav li a .__mainText{
  color: #767E42;
  font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
}
.c-widget__title{
  display: none;
}
.l-header__drawerBtn{
  background-color: #767E42;
}
.c-widget+.c-widget{
  margin-top: 1.5rem;
}
.hamburger-contact{
  background-color: #767E42;
    border-radius: 8px;
  padding: 25px 0;
}
.h-c-title .h1-title{
  color: #fff;
    text-align: center;
    letter-spacing: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.h-c-title .h1-title span{
  font-family: 'Zen Kaku Gothic New', NotoSansJP, sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 5px;
}
.h-c-link{
  display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  margin-top: 20px;
}
.h-c-link a{
  background-color: #fff;
    color: #767E42;
    display: inline-block;
    width: 90%;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
  padding: 5px 0;
    border-radius: 8px;
}
.h-c-link a.form-btn{
  margin-bottom: 15px;
  font-size: 24px;
  display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
  padding: 15px 0;
}
.h-c-link a span.link-icon{
  padding-right: 32px;
  line-height: 1.2;
}
.h-c-link a span.link-icon::after{
  width: 25px;
    height: 25px;
}
.has-text>.c-headLogo{
  font-size: 24px;
    color: #fff;
    font-weight: 500;
}
.c-gnav__li>.c-gnav__a{
  font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
  position: relative;
  padding: 16px 16px;
}
.c-gnav__li>.c-gnav__a::after, 
.c-gnav .c-gnav__li:first-child > .c-gnav__a::before{
  content: "";
  width: 1px;
  height: 55%;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.c-gnav__li>.c-gnav__a::after{
  right: 0;
}
.c-gnav .c-gnav__li:first-child > .c-gnav__a::before{
  left: 0;
}
.c-gnavWrap{
  padding-right: 80px;
}
.p-drawer{
  background: #fff;
}

/* -----------------------------------------------------------
 * 1700px以下：PCナビを消してハンバーガーボタンを出す
 * ----------------------------------------------------------- */
@media (max-width: 1700px) {
  .c-gnavWrap {
    display: none !important;
  }

  .l-header {
    background: transparent !important;
    box-shadow: none !important;

    transition: background-color 0.3s ease;
  }
 html[data-drawer="opened"] .l-header {
    background: var(--ark-color--header_bg, #fff) !important;
  }
  .l-header__center{
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  html[data-drawer=opened] .l-header__center{
    opacity: 1;
    pointer-events: auto;
  }
  .l-content {
    margin-top: calc(var(--ark-header_height) * -1);
    position: relative;
    z-index: 1;
  }
}

@media screen and (max-width: 1000px){
  .l-header .l-header__body{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .l-header__logo{
    justify-content: flex-start;
  }
}

@media screen and (min-width: 992px){
  header{
    padding: 10px 0;
  }
  header .l-header__body{
    max-width: 1920px;
    padding-left: var(--ark-padding--container);
        padding-right: var(--ark-padding--container);
  }
  .c-gnav__li>.c-gnav__a{
    
  }
}
.top-mainvisual{
  margin-bottom: 3rem;
  position: relative;
}
.top-mainvisual::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 500px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #fff
  );
  }
.top-mainvisual-img img{
  /*max-height: 500px;*/
  max-height: 700px;
    object-fit: cover;
}
@media screen and (min-width: 500px){
  .top-mainvisual-img img{
    max-height: 700px;
  }
}
@media screen and (min-width: 768px){
  .top-mainvisual-img img{
    /*max-height: 1000px;*/
  }
}

.top-mainvisual-text .l-container{
  font-family: NotoSansJP, sans-serif;
}
.top-mainvisual-text{
  padding-top: 15px;
  position: absolute;
    bottom: 20px;
    z-index: 2;
}
.top-mainvisual-text h2{
  font-size: 30px;
    font-weight: 300;
  line-height: 1.8;
    letter-spacing: 3px;
}
.top-mainvisual-text blockquote{
  font-size: 20px;
  font-weight: 250;
  line-height: 1.8;
    letter-spacing: 2px;
}
.top-mainvisual-text blockquote br{
  display: none;
}
.bottom-row {
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.dash-line {
  display: inline-block;
  flex-grow: 1;
  max-width: 250px;
  height: 1px;
  background-color: #000;
  margin: 0 0.2em;
}
.top-news-title{
  margin-bottom: 10px;
}
.top-news-title h2{
  font-family: NotoSansJP, sans-serif;
    font-weight: 300;
    text-align: center;
    border-bottom: 3px solid #000;
    padding-bottom: 10px;
  letter-spacing: 3px;
  font-size: 30px;
}
.top-news-list ul li a{
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 400;
  gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid #000;
}
.top-news-list ul li a time{
  font-size: 18px;
    font-weight: 300;
  letter-spacing: 1px;
}
.top-news{
  margin-bottom: 3rem;
}
.top-news-more{
  text-align: end;
    margin-top: 20px;
}
.text-wrapper {
  line-height: 1.6;
  font-size: 20px;
  word-break: break-all;
}
.read-more-pc{
  display: none;
}
.js-truncate {
    display: block;
    font-size: 20px;
    line-height: 1.6;
    min-height: 3.2em; 
    max-height: 3.2em;
    overflow: hidden;
    position: relative;
    /*padding-right: 5px;*/
}

.read-more-inline {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 18px;
    font-weight: 300;
    padding-left: 10px;
}

.blockquote-temp{
  font-size: 18px;
  line-height: 2.8;
  font-weight: 400;
  letter-spacing: 3px;
}
.blockquote-temp br{
  display: none;
}

.top-product{
  /*background-color: var(--ark-color-main);*/
  background: url("../img/top/product-bg.webp") no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 35px 0;
  position: relative;
  z-index: 1;
}
.top-product::after{
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/top/product01-sp.png") no-repeat left;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.top-product-title{
  margin-bottom: 40px;
}
.top-product-title .h1-title{
  color: #fff;
  line-height: 1.1;
}

/*swiper*/
/* スライダー全体の余白（お好みで） */
.l-container.swiper-container{
  margin-bottom: 60px;
}
.my-photo-swiper {
    /*padding: 40px 0;*/
  padding-top: 15px;
    width: 100%;
}

.my-photo-swiper .swiper-slide {
    /* 正方形を維持 */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}


@media (min-width: 600px) {
  /* スライドの幅固定 */
  .my-photo-swiper .swiper-slide {
    width: 400px !important;
  }
  /* セクション全体で横スクロールを禁止 */
  .top-product {
    overflow: hidden;
  }
  .top-product-swiper,
  .my-photo-swiper {
    overflow: visible !important;
  }

  .l-container.swiper-container {
    max-width: none !important;
    padding-right: 0 !important;
    margin-right: 0 !important;

    /* --- ここから左端を完全に一致させる計算式 --- */
    width: calc(100% - ((100% - 1120px) / 2)) !important;
    /* 1. 1200px以上の時：paddingが0になる仕様に合わせる */
    margin-left: calc((100% - 1120px) / 2) !important;
  }

  /* 2. 1200px未満〜600pxの時：Arkheの標準paddingを考慮する */
  @media (max-width: 1199px) {
    .l-container.swiper-container {
      margin-left: 0 !important;
      padding-left: var(--ark-padding--container, 20px) !important;
      /* 1200px以下ではpadding分だけ引く */
      width: calc(100% - var(--ark-padding--container, 20px)) !important;
    }
  }
}
/* 600px以上のとき、スライド幅を400pxに固定 */
/*@media (min-width: 600px) {
    .my-photo-swiper .swiper-slide {
        width: 400px !important;
    }
  .l-container.swiper-container{
  padding-right: 0;
}
}*/
@media (min-width: 1000px){
  .l-container.swiper-container{
    margin-right: 0;
  }
}
/*@media (min-width: 1241px){
  .l-container.swiper-container{
    margin-left: calc((100% - var(--ark-container_width, 1200px))) !important;
  }
}*/


.my-photo-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ページネーションの色変更（Arkheのメインカラーに合わせる場合） */
.my-photo-swiper .swiper-pagination-bullet-active {
    background: #767E42;
}
/*swiperここまで*/


.top-product-maker-link{
  text-align: center;
    margin-top: 33px;
}
.top-product-maker-link .link-icon{
  color: #fff;
    font-size: 18px;
    font-weight: 400;
}
.top-product-maker-link .link-icon::after{
  background: url("../img/icon/link-icon-white.svg") no-repeat center / contain;
}
.top-product h5{
  font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
}
.top-product-maker-list {
  background-color: #fff;
  padding: 30px 0;

  /* Flexboxに切り替え */
  display: flex;
  /* 横並びにして、入り切らない場合は折り返す */
  flex-wrap: wrap;
  /* これが重要：すべての行を中央寄せにする */
  justify-content: center;
  /* アイテム間の隙間 */
  column-gap: 15px;
    row-gap: 20px;
  margin-top: 35px;
}

.top-product-maker-list figure {
  /* 常に固定サイズを維持 */
  flex: 0 0 153px; 
  height: 120px;
  margin: 0;
  border: 3px solid var(--ark-color-main);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 枠線を含んだサイズ計算 */
}

.top-product-maker-list figure img {
  max-width: 90%;  /* 枠いっぱいに広がらないよう少し余裕を持たせる */
  max-height: 90%;
  object-fit: contain;
}
.top-about-text{
  margin-top: 15px;
}
.top-about-text .l-container h1{
  margin-bottom: 10px;
}
.top-about-text .l-container .blockquote-temp{
  margin-bottom: 20px;
}
.top-service{
  margin-bottom: 50px;
}
.top-about-img .top-service-img{
  
}
.top-about-img img.top-about-img-03, .reveal-container img.top-service-img-pc{
  display: none;
}
.top-service-btn-pc{
  display: none;
  width: max-content;
}
.top-sdgs{
  background: url("../img/top/sgds-bg.webp") no-repeat center/cover;
  padding: 50px 0;
}
.t-s-wrap{
  background-color: #fff;
    border: 3px solid var(--ark-color-main);
  padding: 20px 15px 15px;
}
.top-sdgs-title p{
  font-weight: 400;
    letter-spacing: 3px;
  line-height: 2;
    padding: 5px 0px 15px;
}
.sdgs-link{
  background: url("../img/top/sdgs-sp.png") no-repeat center/cover;
  text-align: center;
  height: 256px;
}
.sdgs-link a{
  width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-company{
  background-color: #C9C1B4;
  padding: 20px 0 50px;
  position: relative;
  z-index: 1;
}
.top-company::before{
  content: "";
  width: 100%;
  height: 51%;
  background: url("../img/top/company.png")no-repeat right;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.top-company .top-company-text .blockquote-temp{
  margin-bottom: 30px;
}
.top-company .top-company-text{
  margin-top: 15px;
}
.top-company-title{
  margin-bottom: 20px;
}
.top-company-title, 
.top-company .top-company-text{
  position: relative;
  z-index: 2;
}
.top-company-grid .t-c-t-pc.top-company-title{
  display: none;
}
.top-company .blockquote-temp .link-icon{
  display: none;
  width: fit-content;
}

@media screen and (min-width: 400px){
  .top-product-maker-list{
    padding: 30px 15px;
  }
}
@media screen and (min-width: 600px){
  .top-product::after{
    width: 50%;
    max-width: 450px;
  }
}
@media screen and (min-width: 1000px){
  .top-mainvisual-text blockquote br{
    display: block;
  }
  .top-mainvisual-img{
    display: none;
  }
  .top-mainvisual{
    position: relative;
    background: url("../img/top/top-bg-pc.webp") no-repeat center/cover;
    height: 90vh;
    max-height: 1256px;
    min-height: 1100px;
  }
  .top-mainvisual::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #fff
  );
  }
  .top-mainvisual-text{
    position: absolute;
    top: 50%;
    left: var(--ark-padding--container);
    transform: translateY(-50%);
    padding-top: 0;
  }
  .top-mainvisual-text h2{
    margin-bottom: 15px;
  }
  .home .l-article, 
  .page .l-article, 
  .single .l-article{
    max-width: 100%;
  }
  .top-mainvisual-text .l-container{
    padding: 0;
  }
  
  /*top-news*/
  .top-news-title{
    display: flex;
    justify-content: center;
  }
  .top-news-title h2{
    padding: 0px 100px 15px;
  }
  .top-news{
    margin-top: -350px;
    position: relative;
    z-index: 3;
  }
  .l-container-bg{
    background-color: rgba(255, 255, 255, .5);
    display: flex;
    justify-content: center;
    padding: 60px 0;
    max-width: 1120px;
  }
  .l-container-text{
    max-width: 752px;
  }
  .top-news-list ul li a{
    flex-direction: row;
    gap: 20px;
    align-items: center;
    padding: 18px 50px;
  }
  .js-truncate{
    min-height: auto;
    max-height: max-content;
    /*display: flex;*/
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: static;
  }
  .read-more-inline{
    position: static;
    padding-left: 0;
  }
  .read-more-pc{
    display: block;
    width: max-content;
  }
  .read-more-sp.read-more-inline, 
  .reveal-container img.top-service-img-sp{
    display: none;
  }
  .reveal-container img.top-service-img-pc{
    display: block;
  }
  /*top-newsここまで*/
  
  /*top-about*/
  .top-about{
    max-width: 1920px;
    margin: 0 auto;
  }
  .top-service{
    max-width: 1920px;
    margin: 0 auto 80px;
  }
  .top-about-text{
    margin-top: 0;
  }
  .top-about-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .top-about-text .l-container{
    padding: 0;
  }
  .blockquote-temp br{
    display: block;
  }
  .top-about-text .l-container .blockquote-temp{
    font-size: 20px;
  }
	.top-about .top-about-img{
		pointer-events: none;
	}
  .top-about .top-about-img figure{
    position: relative;
    height: 100%;
  }
  /*.top-about .top-about-img figure::after{
    content: "";
    width: 120%;
    height: 100%;
    background: url("../img/top/top-about03.png") no-repeat center/contain;
    position: absolute;
    bottom: -15%;
    left: 0;
    z-index: 2;
  }*/
  .top-about-img img.top-about-img-03{
    display: block;
    width: 120%;
    max-width: 200%;
    position: relative;
    margin-top: -60px;
  }
  .top-about-text .l-container .h1-title{
    font-size: 50px;
  }
  .h1-title{
    font-size: 50px;
  }
  .top-about-text{
    display: flex;
    align-items: center;
  }
  /*top-aboutここまで*/
  
  /*top-service*/
  .top-service{
    margin-top: 65px;
  }
  .top-service-grid.top-about-grid .top-about-img{
    order: 2;
  }
  .top-service-grid.top-about-grid .top-about-text{
    order: 1;
    padding-left: var(--ark-padding--container);
  }
  /*top-serviceここまで*/
  
  /*top-productここから*/
  .top-product::after{
    top: -150px;
  }
  /*top-productここまで*/
  .sdgs-link{
    background: url("../img/top/sdgs-pc.png") no-repeat center / cover;
    height: 482px;
  }
  .top-sdgs-title .fs-18{
    padding: 0px 0px 25px;
  }
  .top-company .blockquote-temp br{
    display: none;
  }
}
@media screen and (min-width: 1200px){
  .top-company-grid{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
  }
  .top-company-grid figure{
    order: 2;
  }
  .top-company-grid .l-container{
    order: 1;
  }
  .top-company-grid .t-c-t-pc.top-company-title{
    display: block;
  }
  .top-company > .l-container .top-company-title{
    display: none;
  }
  .top-company .blockquote-temp br, 
  .top-company .blockquote-temp .link-icon{
    display: block;
  }
  .top-company-text > .link-icon{
    display: none;
  }
  .top-company{
    padding: 0 0 50px;
  }
  .top-company .top-company-text{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 50px;
  }
  .top-company-grid .t-c-t-pc.top-company-title{
    width: 100%;
    text-align: center;
  }
  .top-company .blockquote-temp .link-icon{
    margin-top: 25px;
  }
  .top-company::before{
    height: 100%;
  }
  
}
@media screen and (min-width: 1400px){
  .top-service{
    margin-top: 10px;
  }
}

@media screen and (min-width: 1701px){
  .top-about-text .l-container .h1-title{
    text-align: center;
    font-size: 90px;
  }
  .h1-title{
    font-size: 90px;
  }
  .top-about .top-about-text .l-container .h1-title{
    position: relative;
  }
  .top-about .top-about-text .l-container .h1-title::before{
    content: "";
    width: 50%;
    height: 4px;
    background-color: #8BB3D7;
    position: absolute;
    top: 50%;
    left: -31%;
    transform: translateY(-50%);
    z-index: -1;
  }
  .top-about-grid{
    gap: 60px;
  }
  .top-about-img img.top-about-img-03{
    margin-top: -100px;
  }
  .top-about .top-about-img figure::after{
    content: "";
    width: 4px;
    height: 80%;
    background-color: #8BB3D7;
    position: absolute;
    right: 18%;
    top: 15%;
    z-index: -1;
  }
  .top-about .top-about-text .l-container .blockquote-temp{
    margin-bottom: 35px;
  }
  
  
  .top-about{
    padding-top: 50px;
  }
  .top-service .top-about-text .l-container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top-service .top-about-text .l-container h1{
    font-size: 90px;
    text-align: center;
    width: 100%;
  }
  .top-service-btn-sp{
    display: none;
  }
  .top-service-btn-pc{
    display: block;
  }
  .top-service .top-about-text .l-container .blockquote-temp{
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .top-service .top-about-text .l-container h1{
    margin-bottom: 25px;
  }
  .top-product-title .h1-title br{
    display: none;
  }
  .top-sdgs-title .fs-18{
    font-size: 20px;
  }
  .top-sdgs{
    padding: 80px 0;
  }
  .t-s-wrap{
    padding: 20px 25px 25px;
    position: relative;
    z-index: 3;
  }
  .top-company .top-company-text{
    position: relative;
    z-index: 3;
    height: 100%;
    justify-content: center;
  }
  
  /*.top-company::after{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/top/company02.png") no-repeat left;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }*/
  
  .top-sdgs-company{
    position: relative;
  }
  .top-sdgs-company::after{
    content: "";
    width: 100%;
    height: 80%;
    background: url("../img/top/company.png") no-repeat right;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
        z-index: 1;
        max-width: 500px;
  }
  .top-company::before{
    display: none;
  }
  .blockquote-temp{
    font-size: 20px;
  }
}
@media screen and (min-width: 1920px){
  .top-mainvisual{
    height: 1256px;
  }
  .top-mainvisual-text{
    transform: unset;
    top: 33%;
    left: 11%;
  }
  
  /*top-aboutここから*/
  .top-about{
    min-height: 1000px;
  }
  .top-about-img img.top-about-img-03{
    margin-top: -15px;
    width: 100%;
  }
  .top-about .top-about-text .l-container{
    padding-bottom: 130px;
  }
  /*top-aboutここまで*/
  
  /*top-serviceここから*/
  .top-service{
    margin-top: -130px;
  }
  .top-service .top-service-grid.top-about-grid .top-about-text{
    align-items: flex-end;
  }
  .top-service .top-about-text .l-container h1{
    margin-bottom: 50px;
  }
  /*top-serviceここまで*/
  
  .top-product::after{
    max-width: 555px;
        z-index: 1;
        top: -90px;
  }
}


.footer-salon{
  margin-bottom: 20px;
}
.footer-salon h5, 
.footer-salon h6{
  color: var(--ark-color-main);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 5px;
}
.footer-salon h5{
  border-bottom: 1px solid #000;
    padding-bottom: 18px;
    margin-bottom: 15px;
  line-height: 2;
} 
.footer-salon h6{
  
}
.footer-salon p{
  color: var(--ark-color-main);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 15px;
}
.footer-map {
  width: 100%;
  height: 100%;
  display: flex;
}

.footer-map iframe {
  width: 100%;
  min-height: 250px;
  display: block;
  height: 100%;
}
.footer-tel-fax{
  width: 100%;
}
.l-footer__widgets .wp-block-columns.footer-flex{
  flex-direction: column;
  padding-bottom: 30px;
}
@media screen and (min-width: 768px){
  .footer-map iframe{
    min-height: 333px;
  }
}
@media screen and (min-width: 1000px){
  .l-footer__widgets>.l-container{
    flex-direction: column;
  }
  .l-footer__widgets .w-footer+.w-footer{
    margin-left: 0;
  }
  .footer-contact.hamburger-contact{
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-contact .h-c-link{
    flex-direction: row;
    gap: 25px;
    max-width: 740px;
  }
  .footer-contact .h-c-link a{
    width: 100%;
  }
  .footer-contact .h-c-link a.form-btn{
    height: 90px;
    margin-bottom: 0;
  }
  .footer-contact .footer-tel-fax{
    height: 90px;
  }
  .footer-contact .h-c-link a.form-btn br{
    display: none;
  }
  .l-footer__widgets .wp-block-columns.footer-flex{
    flex-direction: row;
    align-items: stretch;
  }
  .footer-map{
    height: 100%;
    padding-bottom: 23px;
  }
  .footer-map iframe{
    height: 100%;    /* これで左側のテキスト量に合わせて伸びます */
    min-height: 0;
  }
  .wp-block-column > .widget_text,
  .wp-block-column > .widget_text > .textwidget,
  .wp-block-column > .widget_text > .textwidget > .custom-html-widget {
    height: 100%;
  }
}
.l-footer{
  background: url("../img/footer/bg-sp.png") no-repeat top/contain;
}
.l-footer__widgets{
  padding: 60px 0 10px;
}
.l-footer__nav a{
  font-size: 16px;
    color: var(--ark-color-main);
    font-weight: 500;
    padding: 0 15px;
    border-right: 1px solid var(--ark-color-main);
  border-left: 1px solid var(--ark-color-main);
  margin-right: 15px;
  letter-spacing: 3px;
}
.l-footer__foot .u-flex--c{
  justify-content: flex-start;
    row-gap: 20px;
}
.l-footer__nav li:last-child a{
  margin-right: 0;
}
.footer-company-text h5{
  font-size: 24px;
    letter-spacing: 3px;
    font-weight: 700;
  color: var(--ark-color-main);
}
.footer-company-text p{
  color: var(--ark-color-main);
  margin-top: 5px;
  letter-spacing: 3px;
    font-weight: 400;
}
.c-copyright{
  letter-spacing: 3px;
  font-size: 16px;
  color: var(--ark-color-main);
  font-weight: 400;
  margin-top: 45px;
}
.l-footer__foot{
  padding-bottom: 3rem;
}
@media screen and (min-width: 1000px){
  .l-footer{
    background: url("../img/footer/bg-pc.png") no-repeat bottom;
    background-size: contain;
  }
  .footer-company-text p br{
    display: none;
  }
  .footer-company-text{
    text-align: center;
  }
  .l-footer__nav a{
    font-size: 18px;
  }
  .l-footer__foot .u-flex--c{
    justify-content: center;
  }
}
@media screen and (min-width: 1200px){
  .footer-salon h5 br{
    display: none;
  }
  .footer-map{
    padding-top: 54px;
  }
  .c-copyright br{
    display: none;
  }
}
@media screen and (min-width: 1701px){
  .l-footer .h-c-title .h1-title{
    font-size: 60px;
  }
  .l-footer{
    position: relative;
    background-size: cover;
  }
  .home .l-footer::before{
    content: "";
    width: 100%;
    height: 80%;
    background: url("../img/top/company02.png") no-repeat left;
    background-size: contain;
    position: absolute;
    top: -45%;
    left: 0;
    z-index: 1;
    max-width: 300px;
  }
}
@media screen and (min-width: 2000px){
  .t-c-t-pc.top-company-title .h1-title{
    padding-left: 200px;
  }
}

/* モバイル時（デフォルト） */
#top_title_area{
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 507px;
    display: flex;
    align-items: end;
    justify-content: center;
  padding-bottom: 75px;
}
/*about*/
.page-id-10 #top_title_area {
    background-image: url("../img/about/about-top-sp.webp");
}
/*事業案内*/
.page-id-12 #top_title_area {
    background-image: url("../img/service/service01-sp.webp");
}
/*会社概要*/
.page-id-16 #top_title_area {
    background-image: url("../img/company/company01-sp.webp");
}
/*sgds*/
.page-id-20 #top_title_area {
    background-image: url("../img/sdgs/sdgs01-sp.webp");
  aspect-ratio: 16 / 5;
    /*min-height: auto;*/
}
/*取り扱いメーカー・製品*/
.page-id-14 #top_title_area {
    background-image: url("../img/maker/maker-sp.webp");
}
/*おしらせ*/
.page-id-18 #top_title_area {
    background-image: url("../img/news/news01-sp.webp");
}
/*お問い合わせ*/
.page-id-22 #top_title_area, .page-id-132 #top_title_area, 
.page-id-134 #top_title_area{
    background-image: url("../img/contact/contact01-sp.webp");
}
/*特定商取引法の表示*/
.page-id-48 #top_title_area {
    background-image: url("../img/law/tokusho_mv.webp");
}

/* PC時（768px以上） */
@media screen and (min-width: 768px) {
  #top_title_area{
    min-height: 400px;
  }
  .page-id-10 #top_title_area {
    background-image: url("../img/about/about-top-pc.webp");
  }
  .page-id-12 #top_title_area {
    background-image: url("../img/service/service01-pc.webp");
  }
  .page-id-16 #top_title_area {
    background-image: url("../img/company/company01-pc.webp");
  }
  .page-id-20 #top_title_area {
    /*background-image: url("../img/sdgs/sdgs01-pc.webp");*/
    background-image: url("../img/sdgs/SDGs_mv.webp");
  }
  .page-id-14 #top_title_area {
    background-image: url("../img/maker/maker-pc.webp");
  }
  .page-id-18 #top_title_area {
    background-image: url("../img/news/news01-pc.webp");
  }
  .page-id-22 #top_title_area, .page-id-132 #top_title_area, 
  .page-id-134 #top_title_area{
    background-image: url("../img/contact/contact01-pc.webp");
  }
  /*.page-id-48 #top_title_area {
    background-image: url("../img/law/tokusho_mv.webp");
  }*/
}

#top_title_area .c-pageTitle__main{
  color: #000;
    font-family: NotoSansJP, sans-serif;
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 3px;
}
.p-breadcrumb{
  display: none;
}

.about-wish{
  margin-bottom: 25px;
}
.wish-text-bg{
  padding: 10px 12px;
    background-color: var(--ark-color-main);
    color: #fff;
  
}
.wish-text-border{
  padding: 0 12px;
  border: 1px solid var(--ark-color-main);
}
.wish-text-border.w-t-b-margin{
  margin-bottom: 10px;
}
.about-wish-title{
  margin: 10px 0 20px;
}
.about-wish-title .h1-title{
  line-height: 1.1;
}
.about-wish-title .h1-title span{
  font-size: 30px;
}
.about-origin{
  position: relative;
  background: url("../img/about/about-origin.webp") no-repeat;
  background-position: right top;
  background-size: contain;
  padding-top: 45px;
    margin-bottom: 50px;
}
.about-origin::before{
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/about/PROMOTE.svg");
  background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  z-index: -1;
}
.about-origin-title .h1-title{
  text-align: center;
    line-height: 1;
}
.about-origin-title .h1-title span{
  font-size: 24px;
  letter-spacing: 8px;
}
.about-origin-text{
  margin-top: 20px;
}

.about-reason{
  background-color: #F1EEE8;
  padding-top: 10px;
}
.about-reason-undershift{
  position: relative;
    top: 40px;
}
.about-reason .l-container > p{
  line-height: 2.8;
    letter-spacing: 3px;
    margin: 20px 0 25px;
}
.about-reason-card{
  border: 3px solid var(--ark-color-main);
    background-color: #fff;
  margin-bottom: 50px;
}
.a-r-c-reverse.about-reason-card figure{
  order: 2;
}
.a-r-c-reverse.about-reason-card .about-reason-card-text{
  order: 1;
}
.about-reason-list .about-reason-card:last-child{
  margin-bottom: 0;
}
.about-reason-card .about-reason-card-text{
  padding: 20px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.about-reason-card-text h6{
  color: var(--ark-color-main);
    font-size: 20px;
}
.about-reason-card-text .blockquote-temp{
  line-height: 2;
}
.about-vision-text .blockquote-temp .sp{
  display: block;
}
.about-vision{
  color: #fff;
    padding-top: 60px;
}
.about-vision-bg{
  /*background-color: var(--ark-color-main);*/
    padding: 50px 20px 30px;
  background: url("../img/top/vision-bg.png") no-repeat;
  background-size: cover;
  background-position: center;
}
.about-vision-title .h1-title{
  color: #fff;
    margin-bottom: 30px;
}
.about-vision-text .blockquote-temp{
  line-height: 2.2;
}

.service-tab{
  display: flex;
    flex-direction: column;
    gap: 10px;
      flex-wrap: wrap;
}
.service-tab button{
  width: 100%;
    border: 3px solid var(--ark-color-main);
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
    color: var(--ark-color-main);
    font-weight: 300;
    letter-spacing: 3px;
    background-color: #fff;
    font-family: NotoSansJP, sans-serif;
}
.service-list{
  display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
}
.service-card{
  border: 3px solid var(--ark-color-main);
  padding: 20px 12px;
  background-color: #fff;
}
.service-card h3{
  font-size: 24px;
    font-family: NotoSansJP, sans-serif;
    font-weight: 300;
    color: var(--ark-color-main);
    letter-spacing: 3px;
  margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.service-card h3 span{
  font-size: 20px;
  line-height: 1.1;
}
.service-card p{
  color: var(--ark-color-main);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
  margin-bottom: 10px;
}
.service-card figure img{
  width: 100%;
}
.service-card figure img.service-img-pc{
  display: none;
}
.service-card figure .blockquote-temp{
  line-height: 2.2;
    opacity: 1;
    margin-top: 0;
  text-align: start;
}
.card01-img01{
  margin-bottom: 20px;
}
.page-id-12 .l-content__body{
  margin-bottom: 0;
}
.service-lists{
  position: relative;
  background: url("../img/top/sgds-bg.webp");
  padding-bottom: 50px;
}
.service-lists::after{
  content: "";
    position: absolute;
    /*top: auto;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff);
  z-index: 1;
}
.service-lists .l-container{
  position: relative;
    z-index: 3;
}

@media screen and (min-width: 600px){
  .about-wish-title .h1-title span br{
    display: none;
  }
  .about-origin::before{
    background: url(../img/about/PROMOTE-pc.svg) no-repeat center / contain;
    width: 97%;
  }
}
@media screen and (min-width: 768px) {
  .service-tab{
    flex-direction: row;
  }
  .service-tab button{
    padding: 10px 12px;
  }
  .service-tab button br, 
  .service-card figure img.service-img-sp{
    display: none;
  }
  .service-card figure img.service-img-pc{
    display: block;
  }
}
@media screen and (min-width: 1000px){
  #top_title_area{
    min-height: 598px;
    position: relative;
    
  }
  #top_title_area::after{
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #fff
  );
  }
  .about-wish-text .blockquote-temp{
    line-height: 4;
  }
  .about-wish-text .blockquote-temp .a-w-br{
    display: none;
  }
  .about-wish-title{
    margin: 20px 0 20px;
  }
  .wish-text-bg, .wish-text-border{
    width: max-content;
  }
  .w-t-b-margin.wish-text-border{
    width: 100%;
  }
  .wish-text-bg{
    padding: 0 12px;
  }
  .wish-text-border.w-t-b-margin{
    margin-bottom: 30px;
  }
  #top_title_area .c-pageTitle__main{
    font-size: 30px;
  }
  
  .about-origin{
    background: none;
  }
	.about-origin-text .blockquote-temp {
		text-align: center;
	}
  .origin-reason{
    position: relative;
  }
  .origin-reason::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/about/about-origin.webp);
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  .about-origin .l-container, 
  .about-reason .l-container{
    position: relative;
    z-index: 3;
  }
  .about-reason-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .about-reason-card figure img{
    height: 100%;
    object-fit: cover;
  }
  .about-reason-card .about-reason-card-text{
    justify-content: flex-end;
  }
	.about-reason .l-container > p{
		text-align: center;
	}
  
  .service-lists::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/service/card-bg.webp");
    background-size: contain;
    background-position: bottom left;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
  .service-lists > .l-container{
    position: relative;
    z-index: 3;
  }
  
  .service-tab button{
    font-size: 20px;
  }
  .service-tab{
    justify-content: center;
  }
  .service-list{
    flex-wrap: wrap;
    height: 2350px;
  }
  .l-content__body.l-container{
    margin-bottom: 0;
  }
  .service-card{
    width: calc(50% - 15px);
  }
  /* 左列(1, 4, 6番目) */
  .service-card:nth-child(1) { order: 1; }
  .service-card:nth-child(4) { order: 2; }
  .service-card:nth-child(6) { order: 3; }

  /* 右列 (2, 3, 5番目) */
  .service-card:nth-child(2) { order: 4; }
  .service-card:nth-child(3) { order: 5; }
  .service-card:nth-child(5) { order: 6; }
  
  .service-card:nth-child(1) .service-br{
    display: none;
  }
}
@media screen and (min-width: 1000px){
  .w-t-b-margin.wish-text-border{
    width: max-content;
  }
  .about-reason .reason-bg{
    display: none;
  }
  .about-reason-undershift{
    top: 0;
  }
  .about-reason{
    padding: 60px 0 80px;
  }
  .about-vision{
    position: relative;
  }
  .about-vision::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/about/reason-bg.png")no-repeat;
    background-position: top right;
    background-size: contain;
    position: absolute;
    top: -15%;
    right: 0;
    max-width: 700px;
    max-height: 450px;
    z-index: 1;
  }
  .about-vision-title, .about-vision-text{
    position: relative;
    z-index: 3;
  }
}
@media screen and (min-width: 1701px){
  .about-origin{
    margin-bottom: 0;
    padding: 90px 0px 70px;
  }
  .about-reason .l-container{
    max-width: 1320px;
  }
  .about-reason-card .about-reason-card-text {
    padding: 20px 30px 30px;
  }
  .about-reason{
    position: relative;
    padding: 100px 0 120px;
  }
  .about-reason::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/about/reason-bg.svg") no-repeat;
    background-position: top left;
    background-size: contain;
    position: absolute;
    top: -4%;
    left: 0;
    max-width: 600px;
    max-height: 425px;
  }
  .about-origin-title .h1-title{
    line-height: 0.5;
  }
  
  .about-vision .l-container{
    max-width: 1520px;
  }
  .about-vision-text{
    max-width: 1120px;
    margin: 0 auto;
  }
  .about-vision{
    padding: 130px 0 50px;
  }
  .about-vision::before{
    height: 110%;
    top: -15%;
        max-width: 65%;
        max-height: 110%;
  }
  .about-vision-bg{
    padding: 85px 20px 60px;
  }
  
  .service-lists::before{
    width: 80%;
  }
  .service-lists > .l-container{
    max-width: 1472px;
  }
  .service-card:nth-child(4) .service-br, 
  .service-card:nth-child(3) h3 span br{
    display: none;
  }
  .service-tab{
    gap: 25px;
  }
  .service-card h3{
    font-size: 30px;
    gap: 10px;
  }
  .service-card{
    padding: 25px 30px;
  }
  .service-list{
    height: 2450px;
  }
}
@media screen and (min-width: 1920px){
  .service-tab{
    column-gap: 30px;
    row-gap: 25px;
  }
}

.c-p-title figure{
  position: relative;
}
.c-p-title figure figcaption{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ark-color-main);
    font-family: NotoSansJP, sans-serif;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 5px;
    line-height: 1;
}
.c-p-title figure figcaption span{
  font-size: 24px;
}

.c-p-list{
  position: relative;
    margin-top: -6px;
    z-index: 2;
}
.c-p-list-left{
  display: flex;
    flex-direction: column;
    gap: 30px;
}
.c-p-card{
  color: #fff;
    background-color: var(--ark-color-main);
    border-radius: 10px;
    padding: 20px 15px 30px;
}
.c-p-card h1{
  font-size: 50px;
    font-family: NotoSansJP, sans-serif;
    color: #fff;
    font-weight: 500;
  margin-bottom: 10px;
}
.c-p-card .blockquote-temp{
  line-height: 2.2;
}
.c-p-card .blockquote-temp br{
  display: block;
}
.c-p-card .blockquote-temp span{
  font-weight: 600;
}
.c-p-list-right{
  margin-top: 30px;
}

.company-message{
  background-color: #C9C1B4;
  padding-bottom: 30px;
}
.company-message figure{
  position: relative;
  top: -90px;
  z-index: 4;
}
.company-message blockquote figure{
  top: 0;
    padding-top: 10px;
}
@media screen and (min-width: 768px){
  .company-message blockquote figure{
    display: none;
  }
}
.company-message figure figcaption{
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(201, 193, 180, 1) 60%);
    position: absolute;
    top: 50%;
    right: 0;
    font-weight: 700;
    font-size: 20px;
    margin-top: 0;
    text-align: end;
    padding: 5px 10px 5px 25px;
}
.company-message .blockquote-temp{
  line-height: 2.2;
}
.company-message .h1-title{
  margin-top: -90px;
    margin-bottom: 10px;
}

.company-company-title{
  margin-bottom: 15px;
}
.company-company-title .h1-title{
  line-height: 1;
}
.company-company-title .h1-title span{
  font-size: 24px;
}

.c-c-list li{
  font-size: 20px;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid var(--ark-color-main);
    padding: 15px 0;
  letter-spacing: 3px;
}
.c-c-list li span:first-child{
  font-size: 24px;
}
.c-c-list li span:last-child{
  line-height: 1.8;
}
.company-company{
  padding: 55px 0 75px;
  background: url("../img/top/sgds-bg.webp") no-repeat;
  background-size: cover;
}

.company-company-title.company-history-title{
      margin-bottom: 40px;
}
.company-history{
    margin-bottom: 40px;
}

/*タイムライン*/
/* 親要素：横スクロール設定 */
.c-h-timeline {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 線がはみ出さないように左右にパディングを入れるのがコツです */
    padding: 20px 0 40px; 
}

/* スクロールバーのデザイン（任意） */
.c-h-timeline::-webkit-scrollbar { height: 4px; }
.c-h-timeline::-webkit-scrollbar-thumb { background: #d6dde3; border-radius: 10px; }

.timeline-003 {
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* 最初の要素の余白を確保 */
    padding-left: 20px;
    min-width: max-content;
}

.timeline-003 li {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左揃えに変更 */
    position: relative;
    z-index: 1;
    /* コンテンツ幅を画像に合わせる（iPhone SEの幅を考慮） */
    width: 350px; 
    flex-shrink: 0; 
    padding-right: 32px; /* 次の要素との間隔 */
}

/* 年月部分のデザイン */
.timeline-003 li {
    color: #767e42; /* 画像に合わせてオリーブ色に */
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* 下のテキスト詳細部分 */
.timeline-003 li p {
    margin-top: 15px; /* 年月との間隔 */
    text-align: left; /* 左揃え */
    line-height: 1.6;
    font-size: 20px;
    color: #000;
    font-weight: 400;
    margin-bottom: 0;
  letter-spacing: 3px;
}
@media screen and (min-width: 1000px){
  .timeline-003 li p{
    font-size: 24px;
  }
}

/* 丸いアイコンの設定 */
.timeline-003 li::before {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 10px; /* 年月との間隔 */
    content: '';
    border-radius: 50%;
    background-color: #767e42; /* 画像通りの塗りつぶし */
    border: none;
    /* 線の真上に配置するための微調整 */
    position: relative;
    left: -2px; 
    z-index: 2;
}

/* 横線の設定 */
.timeline-003 li:not(:last-child)::after {
    position: absolute;
    top: 15px; /* 丸の半分（30px / 2）の位置 */
    left: 0;
    z-index: -1;
    width: 100%;
    height: 2px;
    background-color: #d6dde3; /* デフォルトの線の色 */
    content: '';
}

/* 通過済み（prev）の線の色をオリーブにする */
.timeline-003 li.prev::after {
    background-color: #767e42;
}

/* 未到達のステップの丸を白抜きにする場合（必要に応じて） */
.timeline-003 li:not(.prev):not(.current)::before {
    background-color: #fff;
    border: 2px solid #d6dde3;
}
/*タイムラインここまで*/

.company-access{
  /*background-color: var(--ark-color-main);*/
  background: url("../img/top/product-bg.webp") no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 30px 0;
}
.company-access-title .h1-title{
  color: #fff;
}
.c-a-text-flex{
  font-weight: 400;
    display: flex;
    flex-direction: column;
    letter-spacing: 3px;
    font-size: 20px;
  gap: 3px;
    margin-bottom: 25px;
}
.c-a-map iframe{
  max-height: 250px;
  width: 100%;
}
.c-a-text-flex p:first-child{
  font-size: 24px;
}
.page-id-16 .l-content__body{
  margin-bottom: 0;
}

.page-id-20 #top_title_area{
  position: relative;
}
.page-id-20 #top_title_area::after{
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.sdgs-declaration{
  margin-bottom: 40px;
}
.sdgs-declaration figure{
  position: relative;
}
.sdgs-declaration figure figcaption{
  width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.sdgs-declaration figure figcaption .h1-title{
  line-height: 1;
}
.sdgs-declaration .blockquote-temp{
  line-height: 2.2;
    text-align: center;
}
.sdgs-list-grid{
  margin-bottom: 60px;
}
.sdgs-list-grid > figure{
  position: relative;
  margin-bottom: 40px;
}
.sdgs-list-grid > figure figcaption{
  position: absolute;
  bottom: -50px;
  left: var(--ark-padding--container);
  z-index: 2;
}
.sdgs-list-grid > figure figcaption .h1-title{
  font-size: 100px;
}
.sdgs-list > .l-container{
  padding: 0;
}
.sdgs-declaration figure .declaration-pc{
  display: none;
}

.s-l-detail{
  display: flex;
    flex-direction: column;
    gap: 20px;
  margin-bottom: 25px;
}
.s-l-detail p{
  color: var(--ark-color-main);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
}
.s-l-detail .blockquote-temp{
  line-height: 2.2;
}
.s-l-detail figure{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.s-l-detail figure img{
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.s-l-action{
  background-color: #fff;
    border: 2px solid var(--ark-color-main);
    letter-spacing: 3px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.s-l-action h6{
  color: var(--ark-color-main);
    font-size: 20px;
    font-weight: 700;
}
.s-l-action ul{
  font-size: 18px;
    list-style: disc;
    padding: var(--ark-list-padding, 0 0 0 1.5em);
    line-height: 2;
}
.sdgs-list .s-l-img-pc{
  display: none;
}
.s-p-img-pc{
  display: none;
}
.sdgs-list .reveal-container {
    overflow: unset;
}
.sdgs-partner figure{
  margin-bottom: 10px;
}
@media screen and (min-width: 500px){
  .page-id-20 #top_title_area{
    min-height: 600px;
  }
}
@media screen and (min-width: 600px){
  .page-id-20 #top_title_area{
    min-height: 730px;
  }
  .sdgs-partner figure{
    display: flex;
        flex-direction: column;
        align-items: center;
    gap: 15px;
  }
  .sdgs-partner figure .partner01{
    max-width: 474px;
  }
  .s-p-img-sp{display: none;}
  .s-p-img-pc{display: block;}
}
@media screen and (min-width: 768px){
  .page-id-20 #top_title_area{
    min-height: 250px;
    aspect-ratio: auto;
  }
  .sdgs-declaration figure figcaption .h1-title .declaration-br{
    display: none;
  }
  .sdgs-declaration figure figcaption .h1-title{
    line-height: 1.6;
  }
  .sdgs-declaration .l-container{
    position: relative;
  }
  .sdgs-declaration .blockquote-temp{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-left: calc(var(--ark-padding--container) + 10px);
    padding-right: calc(var(--ark-padding--container) + 10px);
  }
  .sdgs-declaration figure .declaration-sp{
    display: none;
  }
  .sdgs-declaration figure .declaration-pc{
    display: block;
    min-height: 400px;
    object-fit: cover;
  }
}
@media screen and (min-width: 1000px){
  .page-id-20 #top_title_area{
    min-height: 300px;
  }
  .sdgs-list .s-l-img-sp{
    display: none;
  }
  .sdgs-list .s-l-img-pc{
    display: block;
  }
  .sdgs-list > .l-container{
    padding-left: var(--ark-padding--container);
    padding-right: var(--ark-padding--container);
    max-width: 1440px;
  }
  .sdgs-list-text.l-container{
    max-width: 100%;
    padding-right: 0;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .sdgs-list-grid{
    display: grid;
    grid-template-columns: 1.2fr 2fr;
  }
  .sdgs-list-grid > figure figcaption{
    bottom: auto;
    top: -70px;
    left: auto;
    right: -5px;
  }
  .s-l-detail figure{
    gap: 20px;
  }
  .sdgs-declaration .l-container{
    max-width: 1920px;
    padding: 0;
  }
  .sdgs-declaration .blockquote-temp{
    max-width: 906px;
    padding: 0
  }
  .sdgs-declaration figure img{
    max-height: 588px;
    object-fit: cover;
  }
  .sdgs-declaration, .sdgs-list-grid{
    margin-bottom: 80px;
  }
  
  .sdgs-partner .l-container{
    max-width: 980px;
  }
  .sdgs-partner .blockquote-temp{
    max-width: 906px;
    margin: 0 auto;
  }
  .page-id-20 .l-content__body.l-container{
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1701px){
  .page-id-20 #top_title_area{
    min-height: 598px;
  }
  .sdgs-declaration figure figcaption .h1-title{
    font-size: 60px;
  }
  .sdgs-list > .l-container{
    padding: 0;
  }
  .sdgs-declaration, .sdgs-list-grid{
    margin-bottom: 120px;
  }
  .s-l-action h6, .s-l-detail p{
    font-size: 24px;
  }
  .s-l-action ul {
    font-size: 20px;
  }
  .sdgs-list-grid > figure figcaption{
    top: -130px;
  }
  .sdgs-list-grid > figure figcaption .h1-title{
    font-size: 180px;
  }
  .sdgs-list-text.l-container{
    padding-left: 40px;
  }
}
@media screen and (min-width: 1920px){
  .page-id-20 #top_title_area{
    min-height: 691px;
  }
}

.sdgs-partner .blockquote-temp{
  color: var(--ark-color-main);
  line-height: 2.2;
    text-align: center;
}

.p-m-grid{
  display: grid;
    grid-template-columns: repeat(2, 1fr);
  row-gap: 20px;
    column-gap: 12px;
}
.p-m-grid .p-m-card{
  background-color: var(--ark-color-main);
    color: #fff;
    padding: 5px 5px 15px 5px;
      display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.15);
}
.p-m-grid .planning.p-m-card .p-m-card-text{
  letter-spacing: 0;
    font-size: 16px;
}
.p-m-grid .p-m-card figure{
  background-color: #fff;
    padding: 7px;
    /*height: 200px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.p-m-grid .p-m-card figure img{
  object-fit: contain;
  height: 200px;
}
.p-m-grid .p-m-card .p-m-card-text{
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 3px;
}
.p-m-card-text img{
  width: 23px;
}


.p-l-grid{
  display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}
.p-l-card p{
  display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border: 3px solid var(--ark-color-main);
    color: var(--ark-color-main);
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 20px;
    gap: 8px;
}
.p-l-card p img{
  width: 23px;
}
.p-l-card figure{
  line-height: 0;
}
.p-l-card figure img{
  height: 297px;
    object-fit: cover;
}
/* --- モーダル：基本レイアウト --- */
.p-l-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    padding: 20px;
  
  /* --- フェードイン・フェードアウト --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.p-l-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* モーダルのコンテンツ容器 */
.p-l-modal-content {
    position: relative; /* タイトルとボタンの基準点 */
  top: 10px;
    background: #fff;
    padding: 15px;
    width: 90%;
    max-width: 800px; /* 少し縮めて余裕を持たせる */
    
    /* 重要：中身がはみ出してもカットしない設定 */
    overflow: visible !important; 
    
    /* 影をつけて浮かせる */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform: translateY(20px);
    transition: transform 0.4s ease;
}
.is-open .p-l-modal-content {
    transform: translateY(0);
}

/* 枠外左上：タイトル */
.p-l-modal-title {
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
    left: 0;
    font-size: 18px;
    font-weight: 700;
  border: 3px solid var(--ark-color-main);
    background-color: #fff;
    color: var(--ark-color-main);
    width: 50%;
    text-align: center;
    padding: 5px 0;
  letter-spacing: 3px;
}

/* 枠外右上：閉じるボタン */
.p-l-modal-close {
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
    right: 0;
    color: #fff;
    cursor: pointer;
  font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    background-color: var(--ark-color-main);
  border: 3px solid var(--ark-color-main);
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 10px;
}
.p-l-modal-close img{
  width: 22px;
    position: relative;
    top: 2px;
}

/* --- 画像表示エリアのスクロール制御 --- */
#p-l-modal-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    /* ここがポイント：画像が多すぎる場合、ここだけでスクロールさせる */
    max-height: 70vh; /* 画面の高さの7割までに制限 */
    overflow-y: auto;
    
    /* iOSでのスクロールを滑らかに */
    -webkit-overflow-scrolling: touch;
}
#p-l-modal-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}


/* --- モバイル微調整 --- */
@media screen and (max-width: 767px) {
    .p-l-modal-content {
        padding: 10px;
        width: 95%;
    }
  .p-l-modal-title, 
  .p-l-modal-close{
    
  }
    #p-l-modal-image-wrap {
        max-height: 65vh; /* スマホは少し短めにして上下の余裕を確保 */
    }
}

.news-lists{
  display: flex;
    flex-direction: column;
    gap: 30px;
}
.page-id-18 .l-content__body{
  margin-bottom: 0;
}
.news-lists .news-card{
  background-color: var(--ark-color-main);
    color: #fff;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.news-card-text{
  position: relative;
  padding-bottom: 35px;
}
.news-card-text time{
  font-family: NotoSansJP, sans-serif;
    font-size: 20px;
    font-weight: 300;
}
.news-card-text .news-title{
  font-size: 20px;
    letter-spacing: 3px;
    font-weight: 700;
  overflow-wrap: break-word;
    word-break: break-all;
}
.n-l-detail-btn{
  font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.n-l-detail-btn .link-icon{
  padding-right: 40px;
}
.n-l-detail-btn .link-icon::after{
  background: url("../img/icon/link-icon-white.svg") no-repeat center / contain;
}

/* WP-PageNavi全体のコンテナ */
.news-pagination .wp-pagenavi {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    clear: both;
}

/* 各数字・ボタンの共通スタイル */
.news-pagination .wp-pagenavi a, 
.news-pagination .wp-pagenavi span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 0 5px;
    border: 1px solid var(--ark-color-main);
    color: var(--ark-color-main);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    background: #fff;
  font-size: 21px;
}
.news-pagination .wp-pagenavi a.previouspostslink, 
.news-pagination .wp-pagenavi a.nextpostslink{
  border: 2px solid var(--ark-color-main);
  position: relative;
  text-indent: -9999px;
    overflow: hidden;
}
.news-pagination .wp-pagenavi a.previouspostslink::before {
    content: "";
    display: block;
    width: 30px; /* SVGのサイズに合わせて調整 */
    height: 30px;
    /* ここにSVGのパスを指定 */
    background: url("../img/icon/previous-next02.svg") no-repeat center / contain;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.news-pagination .wp-pagenavi a.nextpostslink::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url("../img/icon/previous-next.svg") no-repeat center / contain;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* 現在のページ */
.news-pagination .wp-pagenavi span.current {
    background-color: var(--ark-color-main);
    color: #fff;
    border-color: var(--ark-color-main);
}

/* ホバー時 */
.news-pagination .wp-pagenavi a:hover {
    background-color: var(--ark-color-main);
    color: #fff;
}

@media screen and (min-width: 1000px){
  .news-lists .news-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1075px;
  }
  .news-card-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .news-card-text .news-title{
    font-size: 24px;
  }
  .news-lists a figure{
    display: flex;
    align-items: center;
    height: 100%;
  }
  .news-lists a figure img{
    max-height: 500px;
    object-fit: cover;
    object-position: center;
  }
  .news-pagination .wp-pagenavi{
    justify-content: flex-end;
  }
}
.breadcrumb-container{
  margin: 50px auto 30px;
}
.breadcrumb-container p{
  font-size: 20px;
    font-weight: 300;
}
.l-container.single-content{
  display: flex;
    flex-direction: column;
    gap: 17px;
}
.single-content .p-entry__date{
  font-family: NotoSansJP, sans-serif;
    font-weight: 300;
    font-size: 21px;
}
.p-entry__thumbnail img{
  max-height: 350px;
    object-fit: contain;
}
.single-entry-title{
  font-weight: 500;
    font-size: 24px;
  padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid #00264D;
}
.single-pagination{
  display: flex;
    justify-content: center;
    align-items: center;
  gap: 8px;
}
.single-pagination .single-previous a, 
.single-pagination .single-next a, 
.single-pagination .single-news-list a{
  border: 2px solid var(--ark-color-main);
  font-weight: 500;
  font-size: 20px;
  padding: 12px 18px;
  color: var(--ark-color-main);
}
.single-pagination .single-previous a, 
.single-pagination .single-next a{
  position: relative;
}
.single-pagination .single-previous a::before, 
.single-pagination .single-next a::after{
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.single-pagination .single-previous a{
  padding: 12px 10px 12px 30px;
}
.single-pagination .single-previous a::before{
  background: url("../img/icon/previous-next02.svg") no-repeat center/contain;
  left: 5px;
}
.single-pagination .single-next a{
  padding: 12px 30px 12px 10px;
}
.single-pagination .single-next a::after{
  background: url("../img/icon/previous-next.svg") no-repeat center/contain;
  right: 5px;
}
.single-post .l-content {
  margin-top: auto;
}
article.post{
  margin-bottom: 50px;
}
.p-entry__content p{
  font-size: 21px;
    line-height: 2;
    font-weight: 400;
}
.wp-block-image{
  margin: 30px 0;
}

@media screen and (min-width: 1000px){
  .single .p-entry__thumbnail img{
    max-height: 650px;
  }
  .l-container.single-content, 
  .l-container.breadcrumb-container{
    max-width: 960px;
  }
}
@media screen and (min-width: 1701px){
  .l-container.breadcrumb-container{
    max-width: 1420px;
  }
}

/*----------
   contact
-----------*/
.contact-wrap{
  color: var(--ark-color-main);
    font-weight: 400;
  margin-top: 25px;
}
.contact-wrap .l-container{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-wrap p{
  font-size: 21px;
  text-align: center;
    line-height: 2;
}
.contact-tel{
  font-family: NotoSansJP, sans-serif;
  border: 2px solid var(--ark-color-main);
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  align-items: center;
  padding: 30px 0px 35px;
  margin-bottom: 15px;
  width: 100%;
    max-width: 522px;
    margin: 0 auto;
}
.contact-tel a{
  font-size: 32px;
  color: var(--ark-color-main);
  font-weight: 500;
}
.contact-tel span{
  font-size: 16px;
}
.contact-progress .contact-progress-flex{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.contact-progress-flex figure{
  position: relative;
  line-height: 0;
}
.contact-progress-flex figure img{
  height: 100%;
    object-fit: contain;
}
.contact-progress-flex figure figcaption{
  font-size: 16px;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.contact-first .contact-progress-flex .progress01 figcaption{
  color: #fff;
}
.contact-second .contact-progress-flex .progress02 figcaption{
  color: #fff;
}
.contact-progress-flex .progress01{
  margin-right: -3px;
}
.contact-progress-flex .progress02{
  margin: 0 -3px;
}
.contact-progress-flex .progress03{
  margin-left: 0;
}

.contact-form .koumoku > p, 
.koumoku-naiyou p:not(.koumoku-naiyou-text), 
.koumoku-nyuuryoku p:not(.example){
  display: none;
}
.contact-form{
  color: var(--ark-color-main);
  font-family: NotoSansJP, sans-serif;
  font-size: 21px;
}
.contact-form > .koumoku{
  padding: 35px 0;
    border-bottom: 1px solid #9BAEC9;
}
.contact-form .koumoku{
  display: flex;
    flex-direction: column;
    gap: 15px;
}
.hissu{
  background-color: var(--ark-color-main);
  color: #fff;
  padding: 2px 8px;
    border-radius: 5px;
  font-weight: 350;
}

.koumoku-nyuuryoku .null{
  background-color: #F2F2F2;
  border: 1px solid var(--ark-color-main);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
}
.radio-button-wrap.koumoku-nyuuryoku label{
  display: flex;
    gap: 10px;
}
.koumoku-nyuuryoku .radio-button.null{
  width: 7%;
}
.radio-button-wrap.koumoku-nyuuryoku label span{
  flex: 1;
}
.mw_wp_form .radio-button-wrap .horizontal-item + .horizontal-item {
  margin-left: 0;
}
.koumoku-naiyou-text{
  display: flex;
  gap: 25px;
    align-items: center;
}
.koumoku-naiyou-text span{
  font-weight: 500;
}
.koumoku-naiyou-text span.hissu{
  font-weight: 350;
}
.koumoku-nyuuryoku{
  display: flex;
    flex-direction: column;
    gap: 10px;
}
.koumoku-nyuuryoku .example{
  font-weight: 400;
  font-size: 16px;
}
.contact-form .contact-mail.koumoku, 
.contact-form .contact-address.koumoku{
  gap: 50px;
}
.koumoku-nyuuryoku .yuubin-search .zip-search-btn{
  display: none;
  font-size: 18px;
    font-weight: 400;
    color: #fff;
    background-color: var(--ark-color-main);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: center;
  transition: .3s;
}

.koumoku-nyuuryoku .yuubin-search{
  display: flex;
    align-items: center;
    gap: 20px;
}
.koumoku-nyuuryoku .yuubin-search input.yuubin{
  padding: 5px 1rem;
}

.contact-check{
  width: 100%;
    max-width: 352px;
    margin: 0 auto;
}
.contact-check p{
  display: none;
}
.contact-check .check-btn{
  width: 100%;
    font-size: 24px;
    font-weight: 700;
    border: 3px solid var(--ark-color-main);
    color: var(--ark-color-main);
    background: #fff;
    padding: 8px .5em;
  transition: .3s;
}
.contact-check .check-btn:hover, 
.contact-check .back-btn:hover, 
.contact-check .submit-btn:hover, 
.koumoku-nyuuryoku .yuubin-search .zip-search-btn:hover{
  background: var(--ark-color-main);
  color: #fff;
}
.progress-pc{
  display: none;
}

/* プライバシーポリシーのコンテナ */
.privacy-policy {
    height: 300px;
    overflow-y: auto;
  margin-bottom: 40px;
    background-color: var(--ark-color-main);
    color: #fff;
    padding: 25px 15px;
}

/* スクロールバーのデザイン（任意：ブラウザにより見え方が異なります） */
.privacy-policy::-webkit-scrollbar {
    width: 8px;
}
.privacy-policy::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

/* 各項目の見栄え調整 */
.privacy-title{
  text-align: center;
}
.privacy-title h3 {
    font-size: 21px;
  font-weight: 400;
  color: #fff;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--ark-color-main);
    display: inline-block;
}

.privacy-policy__box {
    margin-bottom: 40px;
  font-weight: 400;
    font-size: 16px;
}

.privacy-policy__head {
   /* font-weight: bold;
    margin-bottom: 5px;
    color: var(--ark-color-main);*/
}

.privacy-policy__list .privacy-policy__detail {
  margin-bottom: 20px;
}
.privacy-policy__list .privacy2{
  list-style: disc;
    padding: var(--ark-list-padding, 0 0 0 1.5em);
}

/* 同意チェック部分 */
.privacy-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
    width: 100%;
}
.privacy-check .mwform-checkbox-field {
    flex: none;
}
.privacy-check label {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}
.privacy-check label input.privacy {
    width: 20px;
    height: 20px;
    margin: 0;
}
.privacy-check .mwform-checkbox-field-text {
    font-size: 21px;
    font-weight: 500;
}
.privacy-check p:not(.hissu-wrap){
  flex: 1;
}
/*.privacy-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #fff;
}
.privacy-check p:not(.hissu-wrap){
  flex: 1;
}
.privacy-check .mwform-checkbox-field{
  flex: 1;
}
.privacy-check label{
  display: flex;
  gap: 20px;
}
.privacy-check label input.privacy{
  width: 7%;
}
.privacy-check .mwform-checkbox-field-text{
  font-size: 21px;
    font-weight: 500;
  flex: 1;
}*/

.privacy-container{
  margin: 35px 0 40px;
}
.privacy-policy__box__last.privacy-policy__box{
  margin-bottom: 0;
}

/* プライバシーポリシーのコンテナここまで */

@media screen and (min-width: 768px){
  .contact-progress-flex figure figcaption{
    font-size: 24px;
  }
  .contact-wrap .l-container{
    gap: 70px;
    margin-bottom: 50px;
  }
  .contact-form .koumoku{
    flex-direction: row;
  }
  .koumoku .koumoku-naiyou{
    width: 45%;
  }
  .koumoku-nyuuryoku{
    flex: 1;
  }
  .hissu-wrap {
    margin-bottom: 0;
  }
  .privacy-check p:not(.hissu-wrap) {
    flex: none;
  }
  .contact-form .contact-mail.koumoku, .contact-form .contact-address.koumoku{
    flex-direction: column;
  }
  .contact-form .contact-mail.koumoku .koumoku-naiyou-text span.hissu{
    white-space: nowrap;
  }
  .koumoku-nyuuryoku .yuubin-search .zip-search-btn{
    display: block;
  }
  .koumoku-nyuuryoku .yuubin-search input.yuubin{
    width: 45%;
  }
  .privacy-container{
    max-width: 800px;
    margin: 35px auto 40px;
  }
  .contact-progress{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1000px){
  .contact-form .koumoku{
    gap: 0;
    max-width: 900px;
        margin: 0 auto;
    width: 100%;
  }
  .koumoku-nyuuryoku .yuubin-search input.yuubin{
    padding: 1rem;
    width: 35%;
    max-width: 200px;
  }
  .contact-form .contact-address.koumoku .koumoku{
    width: 100%;
  }
  .koumoku-nyuuryoku .yuubin-search .zip-search-btn{
    padding: 8px 10px;
    font-size: 21px;
  }
  .privacy-policy{
    padding: 50px;
  }
  .radio-button-wrap.koumoku-nyuuryoku{
    gap: 30px;
  }
  .privacy-container{
    margin: 50px auto 40px;
  }
}
@media screen and (min-width: 1200px){
  .contact-progress{
    max-width: 1106px;
  }
  .progress-pc{
    display: block;
  }
  .progress-sp{
    display: none;
  }
  .contact-progress-flex .progress01, 
  .contact-progress-flex .progress02, 
  .contact-progress-flex .progress03{
    margin-right: 0;
  }
  .contact-form > .koumoku{
    padding: 50px 0;
  }
}
@media screen and (min-width: 1700px){
  .contact-progress{
    margin-top: 30px;
  }
  .contact-form > .koumoku{
    border: none;
    position: relative;
  }
  .contact-form > .koumoku::after{
    content: "";
    width: 1200px;
    height: 1px;
    background: var(--ark-color-main);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}

/*check*/
.page-id-132 .koumoku-nyuuryoku .example, 
.page-id-132 .privacy-container, 
.page-id-132 .hissu, 
.page-id-132 .koumoku-nyuuryoku .yuubin-search .zip-search-btn{
  display: none;
}
.page-id-132 .contact-check p{
  display: flex;
    justify-content: space-between;
}
.page-id-132 .contact-check input{
  width: calc(50% - 10px);
    font-size: 24px;
    font-weight: 700;
    border: 3px solid var(--ark-color-main);
    color: var(--ark-color-main);
    background: #fff;
    padding: 8px .5em;
    transition: .3s;
}
.page-id-132 .contact-check{
  margin-top: 40px;
}
/*check*/

/*Thanks*/
.contact-third.contact-wrap{
  font-family: NotoSansJP, sans-serif;
}
.contact-third.contact-wrap .l-container{
  gap: 80px;
  max-width: 656px;
}
.contact-complete{
  display: flex;
    flex-direction: column;
    gap: 25px;
}
.contact-complete figure{
  display: flex;
    justify-content: center;
}
.contact-complete figure img{
  width: 20%;
    max-width: 85px;
}
.contact-complete h5{
  font-size: 30px;
    font-weight: 700;
    text-align: center;
}
.contact-complete-text .contact-complete-br{
  display: none;
}
@media screen and (min-width: 768px){
  .contact-third.contact-wrap .l-container{
    padding: 0;
  }
  .contact-complete-text .contact-complete-br{
    display: block;
  }
}
/*Thanks*/

.l-t-list li{
  font-weight: 400;
    letter-spacing: 3px;
  font-size: 18px;
}
.l-t-list > li{
  border-bottom: 1px solid var(--ark-color-main);
  padding: 18px 0;
  display: flex;
    flex-direction: column;
    gap: 5px;
}
.l-t-list li span:first-child{
  font-size: 22px;
}
.l-t-list li span:last-child{
  /*font-size: 18px;*/
}
.l-t-list li .blockquote-temp, 
.l-t-list li blockquote{
  line-height: 2;
}
.law-text-ul p{
  margin-bottom: 30px;
  line-height: 2;
}
.law-text-ul ul{
  display: flex;
    flex-direction: column;
    gap: 30px;
    line-height: 2;
}
.law-text-ul ul ul{
  margin-top: 30px;
}
.l-t-list li .law-text-ul .sikaku{
  position: relative;
  padding-left: 20px;
  font-size: 18px;
}
.l-t-list li .law-text-ul .sikaku::before{
  content: "";
  width: 15px;
  height: 15px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 52%;
  transform: translateY(-50%);
}
.law-trademark{
  padding-top: 20px;
}
.law-trademark, .law-return{
  margin-bottom: 50px;
}

.law-title{
  margin-bottom: 10px;
}
.law-title h4{
  font-family: NotoSansJP, sans-serif;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 3px;
}
.law-return .l-t-list .law-text-ul ul{
  padding: var(--ark-list-padding, 0 0 0 1.5em);
    list-style: disc;
    gap: 0;
}
.law-return .l-t-list .law-text-ul p{
  padding: var(--ark-list-padding, 0 0 0 1.5em);
    margin: 0;
}
@media screen and (min-width: 1000px){
  .l-t-list li,.l-t-list li .blockquote-temp, .l-t-list li blockquote{
    font-size: 20px;
  }
  .l-t-list > li{
    flex-direction: row;
    align-items: center;
    padding: 35px 0;
  }
  .l-t-list li span:first-child{
    width: 30%;
    font-size: 24px;
    padding-right: 30px;
  }
  .l-t-list li blockquote, .law-text-ul{
    flex: 1;
  }
  .l-t-list > li.j-c-normal{
    align-items: flex-start;
  }
}

.product-maker{
  margin-bottom: 70px;
}
.product-maker-title{
      margin-bottom: 45px;
}
.product-maker-title .h1-title{
  line-height: 1;
}
.product-maker-title .h1-title span{
  font-size: 24px;
    letter-spacing: 5px;
}
.product-list-title.product-maker-title{
  margin-bottom: 25px;
}
.page-id-14 .l-content__body{
  margin-bottom: 0;
}
.ban-inter p span br{
  display: none;
}

@media screen and (min-width: 768px){
  .p-m-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .p-l-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .product-list{
    padding-bottom: 60px;
  }
  .p-m-t-br{
    display: none;
  }
  .p-m-grid .p-m-card .p-m-card-text{
    flex-direction: row;
    justify-content: space-between;
    padding: 0 10px;
    min-height: 54px;
  }
}
@media screen and (min-width: 1000px){
  .product-maker-title{
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
  }
  .p-m-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .p-l-grid{
    grid-template-columns: repeat(3, 1fr);
  }
  .ban-inter p span br{
    display: block;
  }
}
@media screen and (min-width: 1701px){
  .product-maker .l-container, 
  .product-list .l-container{
    max-width: 1472px;
  }
  .p-m-grid .p-m-card figure{
    height: 433px;
  }
  .p-m-grid .p-m-card .p-m-card-text, 
  .p-m-grid .planning.p-m-card .p-m-card-text{
    font-size: 24px;
  }
  .p-m-grid{
    column-gap: 35px;
    row-gap: 35px;
  }
  .p-m-grid .p-m-card{
    row-gap: 20px;
  }
  .product-maker{
    padding-top: 70px;
    margin-bottom: 150px;
  }
  .product-maker-title .h1-title{
    line-height: 0.5;
  }
  .product-maker-title, 
  .product-list-title.product-maker-title{
    margin-bottom: 60px;
  }
  .p-l-card p br, 
  .ban-inter p span br{
    display: none;
  }
}

.page-id-16 #top_title_area{
  position: relative;
}
.page-id-16 #top_title_area::after{
  content: "";
        position: absolute;
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 300px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
.page-id-16 .post-16{
  position: relative;
}
.page-id-16 .post-16::after{
  content: "";
    position: absolute;
    /*top: auto;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff);
  z-index: -1;
}
.company-philosophy{
  padding-bottom: 225px;
  position: relative;
}
.company-philosophy::after{
  content: "";
  width: 200%;
  height: 100%;
  background: url("../img/company/company-bg.png");
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.reveal-container img.philosophy-pc{
  display: none;
}
.reveal-container img.company-message-img-pc{
  display: none;
}
@media screen and (min-width: 600px){
  .timeline-003{
    padding-left: var(--ark-padding--container);
  }
}
@media screen and (min-width: 768px){
  .company-message figure figcaption{
    font-size: 25px;
  }
  
  .c-a-map iframe{
    max-height: 450px;
  }
}
@media screen and (min-width: 1000px){
  .company-message{
    padding-bottom: 75px;
  }
  .c-p-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    margin-top: -60px;
  }
  .c-p-list-left{
    justify-content: space-between;
    gap: 0;
  }
  .c-p-card{
    padding: 20px 25px 30px;
  }
  .c-p-list-left .c-p-card{
    height: calc(50% - 10px);
  }
  .c-p-list-right{
    margin-top: 0;
  }
  .reveal-container img.philosophy-pc{
    display: block;
  }
  .philosophy-sp{
    display: none !important;
  }
  .company-philosophy::after{
    width: 100%;
  }
  .c-p-title figure figcaption{
    font-size: 50px;
    text-align: start;
    transform: translateY(-50%);
    left: 10%;
  }
  .c-p-title figure figcaption span {
    font-size: 30px;
  }
  .company-philosophy{
    padding-bottom: 425px;
  }
  .p-l-modal-content{
    background: none;
    box-shadow: none;
  }
  #p-l-modal-image-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .company-message figure{
    top: -200px;
  }
  .company-message .h1-title{
    margin-top: -190px;
  }
  .reveal-container img.company-message-img-pc{
    display: block;
  }
  .reveal-container img.company-message-img-sp{
    display: none;
  }
  
  .company-company-title{
    margin-bottom: 60px;
  }
  .c-c-list li{
    flex-direction: row;
    padding: 30px 0;
  }
  .c-c-list li span:first-child{
    width: 22%;
  }
  .c-c-list li span:last-child{
    flex: 1;
  }
  .company-company{
    padding: 100px 0 120px;
  }
  .timeline-003 li{
    width: 432px;
  }
  .company-history{
    margin-top: 60px;
    margin-bottom: 60px;
  }
  
  .c-a-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .c-a-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .company-company-title.company-access-title{
    margin-bottom: 30px;
  }
  .c-a-map iframe{
    max-height: 350px;
  }
}
@media screen and (min-width: 1200px){
  .timeline-003{
    padding-left: calc((100% - 1120px) / 2);
  }
}
@media screen and (min-width: 1701px){
  .company-message{
    padding-bottom: 130px;
  }
  .company-philosophy .l-container{
    max-width: 1520px;
  }
  .c-p-card h1{
    font-size: 90px;
  }
  .c-p-title figure figcaption {
    font-size: 90px;
    letter-spacing: 10px;
    line-height: 0.8;
    left: calc((100% - 1120px) / 2) !important; /* 左端の位置を計算 */
    transform: translateY(-50%) !important;      /* 左右の移動(50%)を解除し、上下中央だけ維持 */
    text-align: left;
  }
  .c-p-title figure figcaption span{
    letter-spacing: 5px;
  }
  .c-p-card{
    padding: 0 25px 30px;
  }
  .c-p-list{
    margin-top: -135px;
  }
  
  .company-message figure{
    position: relative;
  }
  .company-message figure::before{
    content: "";
    position: absolute;
    /*top: auto;*/
    left: 0;
    top: 0;
    width: 100%;
    height: 200px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0), #fff);
  z-index: 1;
  }
  .company-message figure figcaption{
    font-size: 30px;
    padding: 5px 22px 5px 100px;
  }
  .company-message .blockquote-temp{
    line-height: 2.8;
  }
  
  .company-company-title .h1-title{
    line-height: .6;
  }
  
  .company-access{
    padding: 130px 0;
  }
  .company-access .l-container{
    max-width: 1322px;
  }
  .company-company-title.company-access-title{
    margin-bottom: 60px;
  }
  .c-a-text-flex{
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .c-a-text-flex p .c-a-br{
    display: none;
  }
  .c-a-map iframe{
    max-height: 280px;
  }
}



@media screen and (min-width: 1000px){
  /*.admin-bar .p-drawer, .p-drawer{
    position: relative;
  }*/
  .c-drawerNav li a .__mainText{
    font-size: 20px;
  }
  .p-drawer::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("../img/footer/bg-pc.png") no-repeat;
    background-position: bottom;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
  }
  .hamburger-contact .h-c-title .h1-title{
    font-size: 60px;
  }
  .hamburger-contact .link-icon br{
    display: none;
  }
}
@media screen and (min-width: 1700px){
  .w-drawerBottom .hamburger-contact{
    position: fixed;
    bottom: 40px;
    left: 45px;
    width: 455px;
  }
  .w-drawerBottom .h-c-link a{
    width: 80%;
  }
  .w-drawerBottom .h-c-link a.form-btn{
    padding: 20px 0;
  }
  .p-drawer__inner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-drawer::before{
    background-size: cover;
  }
}


/*----------------------
    アニメーション
-----------------------*/
/* アニメーション要素の初期状態 */
.js-fadein-blur {
    opacity: 0;
    filter: blur(8px); /* ぼかしを少し強めに設定 */
    transform: translateY(40px);
    transition: all .8s ease-out; /* 1.2秒かけてじわっと表示 */
}

/* 画面内に入った時に付与するクラス */
.is-animated {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translateY(0) !important;
}


/*---------
  画像アニメーション
---------*/
/*.reveal-container {
    position: relative;
    overflow: hidden;
}


.reveal-container img {
    width: 100%;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2s cubic-bezier(0.19,1,0.22,1);
}


.reveal-container::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -150px;
    width: 120%;
    height: 300px;

    background:
        radial-gradient(circle at 20% 60%, rgba(255,255,255,.8) 0%, transparent 60%),
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.7) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.8) 0%, transparent 60%);
    
    filter: blur(20px);
    opacity: .9;

    transform: translateY(0);
    transition: transform 2s cubic-bezier(0.19,1,0.22,1);

    animation: steam 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}


@keyframes steam {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-30px) translateX(20px); }
    100% { transform: translateY(0) translateX(0); }
}


.reveal-container.is-animated img {
    clip-path: inset(0 0 0 0);
}

.reveal-container.is-animated::after {
    transform: translateY(-120%);
}*/



/* 親コンテナ */
.reveal-container {
    overflow: hidden;
    position: relative;
    display: block;
}

/* 画像本体 */
.reveal-container img {
    display: block;
    width: 100%;
    height: auto;
    
    /* もやの定義 */
    -webkit-mask-image:
        linear-gradient(transparent 33%, white 66%),
        radial-gradient(circle at 20% 33%, white 0%, transparent 30%),
        radial-gradient(circle at 80% 35%, white 0%, transparent 30%),
        radial-gradient(circle at 50% 30%, white 0%, transparent 30%);
    mask-image:
        linear-gradient(transparent 33%, white 66%),
        radial-gradient(circle at 20% 33%, white 0%, transparent 30%),
        radial-gradient(circle at 80% 35%, white 0%, transparent 30%),
        radial-gradient(circle at 50% 30%, white 0%, transparent 30%);
    
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    
    -webkit-mask-composite: source-out, destination-over, destination-over, destination-over; /* 標準的な合成 */
    mask-composite: subtract, add, add, add;
    
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;

    /* 【調整箇所：速度】1s（1秒）を大きくするとゆっくりになります */
    transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* スクロールでクラスが付与された時の状態 */
.reveal-container.is-animated img {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
}

@media screen and (min-width: 1000px) {
  /* 親のfigureは基準点として維持 */
  .top-about .top-about-img figure {
    position: relative;
    overflow: visible; /* ここはvisibleにする */
  }

  /* 03番の画像が入っているコンテナごと移動させる */
  .top-about-img-03-wrapper {
    position: absolute;
    top: 50%;         /* 位置はデザインに合わせて調整してください */
    left: 0;
    width: 120%;      /* ここで横幅を広げる */
    z-index: 10;
    overflow: visible !important; /* マスクアニメーションが消えないか確認用 */
  }
  
  /* 画像自体のサイズ調整 */
  .top-about-img-03 {
    width: 100%;
    height: auto;
  }
}
#main_content .nav-wrap{
  display: none;
}