@charset "UTF-8";

@font-face {
  font-family: NotoSerifJP;
  src: url("../font/NotoSansJP-VariableFont_wght.ttf");
}
@font-face {
  font-family: Oswald;
  src: url("../font/Oswald-VariableFont_wght.ttf");
}
html{
  font-size: 62.5%;
}

/*別フォントのちらつき対策候補①*/
/*html {
  visibility: hidden;
}
html.wf-active{
  visibility: visible;
}*/
/*html.wf-active, html.wfno-load {
  visibility: visible;
}*/
/*別フォントのちらつき対策候補①ここまで*/

body {
  background-color: #fff;
  /*background-image: url(../img/orange.jpg);
  color: #000;
  background-attachment: fixed;*/
  z-index: 1;
  font-family: NotoSerifJP, sans-serif;
  transition: 0.7s;
  /*overflow-x: hidden;
  overflow-y: scroll;*/
}
img{
  width: 100%;
}

/*スクロールバー*/
::-webkit-scrollbar {
  border-radius: 10px;
  width: 10px;/* スクロールバーの幅 */
}
::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;/* ツマミの色を変更 */
  border-radius: 10px;/* 角を丸くする */
}

.tategaki{
  font-family: "shippori-mincho", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  position: relative;
}
.circle, .circle-under{
  width: 100%;
  display: flex;
  position: relative;
}
.circle::before,
.circle::after {
  content: "";      /* 疑似要素に必須 */
  width: 12%;      /* 幅いっぱいを指定 */
  height: 1px;      /* 適度な太さを指定 */
  display: inline-block; /* 高さを持たせるためにinline-blockを指定 */
  background: #fff; /* 線の色を指定 */
  border-radius: 2px;    /* 線の端を丸くしたいなら指定する */
  position: absolute;    /* 相対位置に指定 */
  top: 50%;
  left: 50%;
}

.circle::before {
  transform: translate(-50%, -50%) rotate(45deg);/* 時計回りに45度回転させる */
}
.circle::after {
  transform: translate(-50%, -50%) rotate(-45deg);/* 反時計回りに45度回転させる */
}
.circle h2{
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 5px;
  font-weight: 500;
}
.circle h2:last-child{
  color: #fff;
}
.circle h2::before{
  content: "";
  width: 150px;
  height: 150px;
  background-color: rgba(217, 203, 186, .8);
  border: 1px solid #736357;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.circle h2:last-child::before{
  background-color: rgba(66, 33, 11, .6);
  border: 1px solid #fff;
}
.circle h2 span:first-child{
  font-size: 2.2rem;
  font-family: "shippori-mincho", sans-serif;
}
.circle h2 span:last-child{
  font-size: 1.3rem;
}
.circle-se{
  letter-spacing: 2px;
}
.circle-under h2{
  width: 50%;
  font-size: 4.5rem;
  color: #d1af89;
  text-align: center;
  font-family: Oswald, sans-serif;
  font-weight: 500;
  
}
.circle-under h2 span{
  position: relative;
}
.circle-under h2:last-child{
  color: #42210b;
}
.circle-under h2 span::after{
  display: inline-block;
  font-size: 1rem;
  font-weight: 300;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  right: -1.3rem;
  letter-spacing: 1px;
}
.circle-under h2:first-child span::after{
  content: "Design";
  font-size: 1.1rem;
  letter-spacing: 2px;
}
.circle-under h2:last-child span::after{
  content: "Structure";
}

.arrow{
  border: 1px solid #fff;
  text-align: center;
  position: relative;
  padding: 1rem 0;
  font-size: 1.6rem;
}
.arrow::before,
.arrow::after {
  position: absolute;
  content: "";
}
.arrow::before{
  top: 29px;
  right: -18px;
  width: 35px;
  height: 1px;
  background: #fff;
}
.arrow::after{
  top: 24px;
  right: -22px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 8px solid #fff;
}
.container{
  width: 100%;
  max-width: 88%;
  margin: 0 auto;
}

/*--------------------
lodaingここから
---------------------*/
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8%;
  opacity: 1; /* 初期状態は表示 */
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out; /* JavaScriptで制御するためのアニメーション設定 */
}

/* JavaScriptで付与するクラス */
.loading.is-loaded {
  opacity: 0;
  visibility: hidden;
}

/* 他のCSSアニメーションは維持 */
.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 100%;
  
}
.over.loading__logo{
  max-height: 30%;
}
.under.loading__logo{
  max-height: 18%;
  animation: logo_fade 2s 1s forwards; /* animation-delayを1sに変更 */
}
@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}
/*--------------------
loadingここまで
----------------------*/

/*--------------------
  fade-inここから
---------------------*/
.js-fade-in {
    /* **変更**: 親要素の初期状態を再設定 */
    transition: opacity 2.0s cubic-bezier(0.2, 1, 0.2, 1), 
                transform 2.0s cubic-bezier(0.2, 1, 0.2, 1);
    opacity: 0;
    transform: translateY(10px);
}

.js-fade-in.is-active {
    /* **変更**: 親要素のアクティブ状態を再設定 */
    opacity: 1;
    transform: translateY(0) !important;
}
.js-fade-in-left.js-fade-in{
  transform: translateX(-10px);
}
.js-fade-in-left.js-fade-in.is-active{
  transform: translateX(0);
}
.js-fade-in-right.js-fade-in{
  transform: translateX(10px);
}
.js-fade-in-right.js-fade-in.is-active{
  transform: translateX(0);
}


.js-fade-in .tategaki > span {
    /* **再修正点**: アニメーション時間を 1.5秒から 2.0秒に延長 */
    /* **再修正点**: イージングを 'cubic-bezier(0.2, 1, 0.2, 1)' に変更し、
       開始から終了まで非常に滑らかな動きを実現 (cubic-bezier(.16, 1, .3, 1)よりも緩やか) */
    transition: opacity 2.0s cubic-bezier(0.2, 1, 0.2, 1), 
                transform 2.0s cubic-bezier(0.2, 1, 0.2, 1);
    
    /* 初期状態: 透明、少し下へずらす (変更なし) */
    opacity: 0;
    transform: translateY(10px);
    
    display: block; 
}


/* 3. is-active クラス付与時のアニメーション開始とディレイ設定 (ディレイ時間も調整) */
.js-fade-in.is-active .tategaki > span {
    opacity: 1;
    transform: translateY(0);
}

/* 順番にディレイをかけてアニメーションさせる */
/* アニメーション時間が長くなったので、ディレイ間隔を少し広げ 0.7秒に調整します */
.js-fade-in.is-active .tategaki > span:nth-child(1) {
    transition-delay: 0s;
}
.js-fade-in.is-active .tategaki > span:nth-child(2) {
    transition-delay: 0.3s; 
}
.js-fade-in.is-active .tategaki > span:nth-child(3) {
    transition-delay: 0.6s; 
}
.js-fade-in.is-active .tategaki > span:nth-child(4) {
    transition-delay: 0.9s; 
}
.js-fade-in-delay03{
  transition-delay: 0.3s; 
}
.js-fade-in-delay06{
  transition-delay: 0.6s; 
}
.js-fade-in-delay09{
  transition-delay: 0.9s; 
}
/*--------------------
  fade-inここまで
----------------------*/

/*ハンバーガーここから*/

/*　ハンバーガーメニューボタン　*/
.hamburger {
  display : block;
  position: fixed;
  z-index : 1000;
  right : 20px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #BBBBBB;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/* メニュー背景　*/
nav.globalMenuSp {
  position: fixed;
  z-index : 999;
  top  : 0;
  left : 0;
  color: #fff;
  background: rgba( 71,70,73,0.6 );
  text-align: center;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  transition: all 0.6s;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.6rem;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
  text-decoration :none;
}

/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
  opacity: 100;
  display: block;
   transform: translateX(0%);
}
@media screen and (min-width: 769px) {
  .hamburger{display: none;}
  .globalMenuSp{display: none;}
}

/*ハンバーガーここまで*/

.nav_wrapper {
  position: fixed;
  z-index: 5;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.nav_wrapper .nav_list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc((100% - 450px) / 4);
  z-index: 5;
}
.nav_wrapper .nav_list li {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  border: solid 5px #fa8072;
}
.nav_wrapper .nav_list li a {
  display: inline-block;
  padding: 20px 40px;
  font-weight: 700;
  color: #000;
}
@media screen and (max-width: 1200px) {
  .nav_wrapper {
    display: none;
  }
}

.current {
  background-color: #fa8072 !important;
}
.current a {
  color: #fff !important;
}

/*-----------------------------
        top
----------------------------*/
.top{
  position: relative;
  background: url("../img/haikeiimg/top01.webp") no-repeat center;
  background-size: cover;
  height: 90vh;
  z-index: 1;
  margin-bottom: 10rem;
}
.top::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 350px 250px 0px 0px;
	border-color: rgba(0,0,0,.5) transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.top .tategaki{
  padding: 2rem;
  font-size: 1.6rem;
  letter-spacing: 3px;
  line-height: 1.8;
}
.top-text01{
  position: absolute;
  bottom: 12%;
}
.top-text02{
  position: absolute;
  bottom: -5rem;
  overflow: hidden;
}
.article .section {
  padding: 20px;
  height: 1000px;
}

/*-----------------------------
        concept
----------------------------*/
#sec02.concept{
  margin-bottom: 5rem;
  position: relative;
}
.pt-3rem{
  padding-top: 3.5rem;
}
.concept-grid{
  display: grid;
  grid-template-columns: 1fr;
}
.concept-img{
  position: relative;
}
.concept-img figure img{
  width: 80%;
}
.concept-img .concept-back img{
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.hanten.concept-img .concept-back img{
  position: absolute;
  top: 0;
  right: unset;
  left: 0;
  z-index: -1;
}
.concept-text{
  display: flex;
  justify-content: center;
  margin: 4.5rem 0;
}
.concept-text blockquote{
  color: #000;
  line-height: 2;
  font-weight: 500;
}
.tategaki.c-t-gyou{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hanten.concept-img figure{
  display: flex;
  justify-content: flex-end;
}
.concept-text-pc{
  display: flex;
  justify-content: center;
  padding: 7rem 0;
}
.concept-text-pc blockquote{
  color: #000;
  line-height: 3;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.concept-img.js-fade-in.js-fade-in-right{
  transform: translateX(20px);
}
.concept-img.js-fade-in.js-fade-in-left{
  transform: translateX(-20px);
}


/*-----------------------------
        catalog
----------------------------*/
.catalog{
  position: relative;
  z-index: 0;
  width: 100%;
  background: linear-gradient(-10deg, #44372b 50%, #5a493a 50%);
  overflow: hidden;
}
.catalog .container{
  max-width: 91%;
}
.catalog-flex{
  display: flex;
  gap: 20px;
  padding: 2rem 0;
}
.catalog-text{
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.catalog-text h1{
  white-space: nowrap;
  color: #988575;
  font-family: Oswald, sans-serif;
  font-weight: 200;
}
.catalog-text .arrow{
  color: #fff;
  font-size: 1.4rem;
}
.catalog-img{
  width: 55%;
  position: relative;
  margin-right: -2rem;
}
.catalog-img img{
  position: absolute;
  top: 0;
  right: 0;
}
.catalog-text a:hover {
  background: #fff;
}

.catalog-text a:hover .arrow {
  color: #000;
  border-color: #000;
}
/*-----------------------------
        contact
----------------------------*/
.contact{
  background-color: #e1dad7;
  padding: 2rem 0;
}
.contact .container{
  max-width: 80%;
}
.contact-btn{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-btn a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.c-c-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 220px;
}
/*.contact-btn a:first-child::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 34px;
  background: url("../img/icon/phone.svg") no-repeat center/contain;
  z-index: 1;
}
.contact-btn a:last-child::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 27px;
  height: 20px;
  background: url("../img/icon/mail.svg") no-repeat center/contain;
  z-index: 1;
}*/
.contact-btn .arrow{
  background-color: #fff;
  border: 1px solid #402e19;
  color: #534741;
  width: 90%;
  height: 64px;
  
}
.contact-btn .arrow::before{
  background: #402e19;
  top: 33px;
  right: -30px;
  width: 45px;
}
.contact-btn .arrow::after{
  border-left: 8px solid #402e19;
  top: 28px;
  right: -36px;
}
.contact-btn a figure{
  width: 8%;
}
.contact-btn a:last-child figure{
  width: 11%;
  position: relative;
    left: -2px;
}
.contact-btn a h4{
  font-size: 1.4rem;
    text-align: center;
}
.contact-btn a:last-child h4{
  line-height: 1.3;
  flex: 1;
}
.contact-btn a:first-child span{
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 3px;
  
}
.contact-btn a:last-child span{
  font-size: 2rem;
    font-weight: 600;
  padding-left: 1.5rem;
}

/*-----------------------------
       catalog-contact(PC)
----------------------------*/
.catalog-contact{
  background-color: #534741;
  color: #fff;
  padding: 2.5rem 0;
}
.catalog-contact.c-c-pc{
  background-color: #dfd8d5;
}
.catalog-contact .container{
  max-width: 70%;
}
.catalog-contact .contact .container{
  max-width: 85%;
}

.c-c-flex{
  display: grid;
    grid-template-columns: 1.5fr 1fr;
}
.catalog-contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 35px;
}
.catalog-card .catalog-card-flex{
  border: 1px solid #fff;
  display: flex;
  position: relative;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.35);
}
.catalog-card-flex .catalog-card-text{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 1rem;
}
.catalog-card-text h2{
  font-size: 4.5rem;
  position: absolute;
  left: 10px;
  top: 5px;
  z-index: 1;
  color: #887e7a;
}
.catalog-card-text h4{
  font-size: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.catalog-card-text h4 p{
  display: flex;
  align-items: center;
  gap: 3px;
}
.catalog-card-text h4 p .circle-arrow{
  width: 28px;
  height: 28px;
  background: #fff;
}
.catalog-card-text h4 p .circle-arrow::before{
  background: #000;
  top: 16px;
  left: 5px;
}
.catalog-card-text h4 p .circle-arrow::after{
  border-left: 8px solid #000;
  top: 11px;
  left: 17px;
}
.catalog-card-flex figure{
  background-color: #998675;
  position: relative;
  width: 50%;
  padding: 1rem;
}
.catalog-card-flex figure img{
  margin-bottom: -2rem;
}
.tel-mail-pc a{
  border: 1px solid #c69c6d;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 1rem;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.35);
}
.tel-mail-pc a::before{
  content: "";
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #c69c6d;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
}
.tel-mail-pc a::after{
  content: "";
  width: 25px;
  height: 30px;
  background: url("../img/icon/tel-white.svg") no-repeat center/contain;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.mail-card.tel-mail-pc a{
  border: 1px solid #ffa583;
  padding-bottom: 1.5rem;
}
.mail-card.tel-mail-pc a::before{
  background-color: #ffa583;
}
.mail-card.tel-mail-pc a::after{
  background: url("../img/icon/mail-white.svg") no-repeat center/contain;
  width: 38px;
  height: 27px;
  top: 10px;
}
.tel-mail-pc a h4{
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.3;
}
.tel-mail-pc a h4 span{
  font-size: 3rem;
}
.mail-card.tel-mail-pc a h4 span{
  font-size: 2.2rem;
}

.button-ani {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block; /* 念のため、インライン要素にも対応 */
}

.button-ani:hover {
  transform: scale(0.96);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}


/*-----------------------------
        eye-catch
----------------------------*/
.eye-catch{
  position: relative;
  margin-bottom: 5rem;
}
.eye-catch-flex{
  display: flex;
  height: 220px;
}
.eye-catch-passive{
  width: 50%;
  background: url("../img/haikeiimg/eye-catch01.png") no-repeat center;
  background-size: cover;
  background-position: left;
}
.eye-catch-se{
  width: 50%;
  background: url("../img/haikeiimg/eye-catch02.png") no-repeat center;
  background-size: cover;
}
.eye-catch .circle h2::before{
  width: 135px;
  height: 135px;
}
.eye-catch-text01{
  padding: 0 1.6rem;
  z-index: 1;
  position: absolute;
  top: 30%;
  /*transform: translateY(-50%);*/
}
.eye-catch .circle h2 span:first-child{
  font-size: 1.9rem;
}
.eye-catch .circle h2 span:last-child{
  font-size: 1.1rem;
}
.eye-catch-text02{
  z-index: 1;
  position: absolute;
  bottom: 1.5rem;
  overflow: hidden;
}
.eye-catch-text02.circle-under h2{
  color: rgba(0, 0, 0, .5);
}
.eye-catch-text02.circle-under h2:last-child{
  color: rgba(153, 134, 117, .5);
}
/*-----------------------------
        feature
----------------------------*/
.feature{
  margin: 4rem 0;
}
.feature .container{
  max-width: 100%;
}
.feature-title, .feature-text{
  padding: 0 2.5rem;
  margin-bottom: 2rem;
}
.feature-flex figure{
  margin-bottom: 4rem;
}
.feature-subtitle{
  padding: 0 2.5rem;
  position: relative;
}
.feature-subtitle h2{
  font-family: "shippori-mincho", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.feature-subtitle h2 span{
  display: none;
}
.feature-text blockquote{
  font-size: 1.6rem;
  line-height: 1.8;
}
.feature-title{
  color: #c7b299;
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
}
.feature-title h1{
  font-size: 5rem;
  font-family: Oswald, NotoSerifJP, sans-serif;
    letter-spacing: 5px;
}
.feature-title h1 span{
  position: relative;
}
.feature-title h1 span::after{
  content: "\30A8\30CC\30C6\30C3\30AF\304C\3064\304F\308B\5BB6";
  position: absolute;
  font-size: 1rem;
  width: 100%;
  top: 3px;
  right: 20px;
  text-align: end;
  letter-spacing: 1px;
  font-weight: 500;
}

/*-----------------------------
        passive&se
----------------------------*/
.passive-se{
  margin-bottom: 3rem;
  overflow: hidden;
}
.passive-se-img{
  width: 100%;
  height: 62vh;
  position: relative;
}
.passive-se-img::before{
  content: "";
  width: 100%;
  height: 62vh;
  background: url("../img/haikeiimg/passive01.webp") no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.passive-se-img .tategaki{
  background-color: #4c5785;
  padding: 3rem 0 1rem;
  position: absolute;
  top: 0;
  right: 15%;
  font-size: 2rem;
}
.passive-se-text{
  /*padding: 0 1rem;*/
}
.passive-se-inner{
  /*padding: 0 2.5rem;*/
}
.passive-se-text h3{
  font-family: "shippori-mincho", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  font-weight: 600;
  color: #4c5785;
  text-align: center;
  position: relative;
  padding: 2rem 0;
}
.passive-se-text h3::before{
  content: "";
  width: 123px;
  height: 1px;
  background-color: #4c5785;
  position: absolute;
  left: -12%;
  top: 35%;
  transform: translateY(-50%) rotate(65deg);
  border-radius: 9999px;
}
.passive-se-text h3 p{
  display: inline-block;
  text-align: left;
}
.passive-se-text h3 p span{
  font-size: 2.2rem;
}
.passive-se-text blockquote{
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 1rem;
  padding: 0 2.5rem;
}
.passive-se-a{
  display: flex;
  justify-content: flex-end;
  padding-right: 2.5rem;
}
.passive-se-a button{
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 省略 */

.circle-arrow {
  /* スタイル用 */
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #999fb8;
  /* スタイル用 */
  position: relative;
  transition: transform 0.3s ease; /* ここを修正・追加 */
}

.circle-arrow:before,
.circle-arrow:after {
  position: absolute;
  content: '';
}

.circle-arrow:before {
  top: 25px;
  left: 14px;
  width: 17px;
  height: 1px;
  background: #fff;
}

.circle-arrow:after {
  top: 20px;
  left: 31px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 8px solid #fff;
}

.circle-arrow.is-active {
  transform: rotate(90deg); /* アコーディオンが開いた時の回転角度 */
}

.accordion-content {
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* ここを修正・追加 */
}

.accordion-content h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.accordion-content li {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.accordion-content.is-active {
  max-height: 5000px; /* 十分な高さを設定してコンテンツを表示 */
  padding: 2rem 0;
}
.accordion-p{
  margin-top: -3rem;
    position: relative;
    z-index: 2;
    color: #fff;
}
.accordion-p .acco-p-container01.container{
  max-width: 85%;
  background-color: rgba(76, 87, 131, .8);
  padding: 3rem 1.4rem;
}
.acco-p-container.container{
  max-width: 100%;
}

.accordion-p .acco-p-title{
  text-align: center;
}
.accordion-p .acco-p-title h1{
  font-family: Oswald, sans-serif;
  font-size: 5rem;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  color: transparent;
}
.accordion-p .acco-p-title h1 span{
  position: relative;
}
.accordion-p .acco-p-title h1 span::after{
  display: inline-block;
  font-size: 1.4rem;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  right: -2rem;
  content: "Design";
  -webkit-text-stroke-width: 0px;
    color: white;
}
.se .accordion-p .acco-p-title h1 span::after{
  content: "Structure";
  font-size: 1rem;
    letter-spacing: 1px;
    right: -1.5rem;
}
.passive-se-text .accordion-p h3{
  color: #fff;
  font-size: 2rem;
}
.passive-se-text .accordion-p h3::before{
  display: none;
}
.passive-se-text .accordion-p blockquote{
  line-height: 1.8;
  padding: 0;
}
.accordion-p .concept{
  margin-bottom: 0;
}
.accordion-p .concept .concept-text{
  margin: 5rem 0 3rem;
}

.acco-p-catch{
  min-height: 440px;
    position: relative;
  margin-top: 2rem;
}
.acco-p-catch .acco-p-c-img01{
  position: absolute;
    width: 58%;
    right: 0;
    top: 0;
  max-width: 314px;
}
.acco-p-catch .acco-p-c-img02{
  position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 30%;
  max-width: 162px;
}
.acco-p-catch .acco-p-c-img03{
  position: absolute;
    bottom: 0;
    right: 0;
    width: 32%;
  max-width: 173px;
}
.acco-p-catch .acco-p-c-text{
  display: flex;
    justify-content: center;
    align-items: end;
    min-height: 370px;
}
.acco-p-catch .acco-p-c-text .tategaki{
  color: #000;
    font-size: 2rem;
    font-weight: 600;
}
.concept-grid .acco-p-c-text{
  display: flex;
  justify-content: center;
}
.concept-grid .acco-p-c-text .tategaki{
  font-size: 2rem;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1.8;
    color: #000;
}
.genri{
  padding: 5rem 1rem;
  background-color: #efefef;
}
.accordion-content .genri h4{
  text-align: center;
    color: #000;
    font-weight: 600;
    margin-bottom: 3rem;
}
.genri h4 span{
  padding: .5rem 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.genri-img{
  display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
.se-design{
  color: #000;
  background-color: #efefef;
    margin: 5rem 0 0;
    padding: 2rem 0 0;
}
.se-design figure{
  display: flex;
  justify-content: center;
}
.se-design figure img{
  width: 90%;
}
.se-d-item h5{
  text-align: center;
    font-size: 2rem;
  margin-bottom: 3rem;
}
.se-d-item h5 span{
  padding: .5rem 3rem;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.se .accordion-p .container{
  background-color: rgba(132, 119, 85, .8);
    max-width: 85%;
  padding: 3rem 1.4rem;
}
.se .accordion-p .se-d-container.container{
  background-color: transparent;
    max-width: 95%;
}
.se .passive-se-text .accordion-p h3{
  color: #fff;
}
.se-d-container.container .se-d-item:first-child{
  margin-bottom: 5rem;
}

.acco-pc .acco-p-container01.container{
  max-width: 72%;
}
.acco-pc .genri-img{
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
}


/*-- PCアコーディオン --*/
.acco-pc.accordion-content.is-active{
  padding: 8rem 0 2rem;
}
.acco-p-pc.container{
  max-width: 1000px;
}
.se .acco-p-pc.container{
  margin-bottom: 5rem;
}
.acco-p-flex{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.acco-p-flex figure img{
  object-fit: cover;
  object-position: left;
  height: 100%;
}
.acco-p-flex .accordion-p{
  background-color: #4c5783;
    margin: 0;
    padding: 4rem;
    position: relative;
}
.acco-p-flex .accordion-p::before{
  content: "";
  width: 50vw;
  height: 100%;
  background-color: #4c5783;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.acco-p-flex .acco-p-title{
  margin-bottom: 3rem;
}
.acco-p-flex .acco-p-title h1{
  margin-bottom: 1rem;
}
.acco-p-flex .acco-p-title h3{
  font-size: 2rem;
}
.acco-p-flex .acco-p-text blockquote{
  font-size: 1.6rem;
    line-height: 1.8;
    padding: 0;
}
.acco-pc .concept{
  display: flex;
  flex-direction: column-reverse;
}
.acco-pc .concept-grid{
  display: flex;
    justify-content: center;
}
.acco-pc .acco-p-container.container{
  max-width: 1000px;
  justify-content: space-between;
  height: 570px;
}
.acco-pc .concept-text-pc blockquote{
  line-height: 2.5;
  font-size: 1.6rem;
}
.acco-pc .accordion-content .genri h4{
  margin-bottom: 4rem;
}
.acco-pc .genri .container{
  max-width: 1000px;
}

/*-- PCアコーディオン（SE） --*/
.acco-pc-se .acco-p-flex .accordion-p::before{
  background-color: #847755;
}
.acco-pc-se-bg{
  background-color: #efefef;
  margin-top: 6rem 0;
}
.sekkei-pc .se-d-item blockquote{
  font-size: 1.6rem;
    line-height: 1.8;
    padding: 0;
}
.sekkei-pc .acco-p-flex figure{
  display: flex;
    align-items: center;
}
.sekkei-pc .acco-p-flex figure img{
  height: auto;
}
.sekkei-pc .acco-p-flex .accordion-p{
  padding: 4rem 1rem;
  background-color: transparent;
  color: #000;
  display: flex;
    flex-direction: column;
    gap: 7rem;
}
.acco-pc-se .sekkei-pc .acco-p-flex .accordion-p::before{
  background-color: transparent;
}




/*-----
  se
------*/
.se .passive-se-img::before{
  background: url("../img/haikeiimg/passive02.webp") no-repeat center;
  background-size: cover;
}
.se .passive-se-img .tategaki, 
.se .passive-se-text h3::before{
  background-color: #867755;
}
.se .passive-se-img .tategaki{
  right: unset;
  left: 15%;
}
.text-combine{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}
.se .circle-arrow{
  background: #b5ad99;
}
.se .passive-se-text h3{
  color: #867755;
}
.text-upright{
  text-orientation: upright;
}

/*-----------------------------
        customer
----------------------------*/
.customer{
  margin: 3rem 0;
}
.customer .container{
  max-width: 88%;
}
.customer-title{
  margin-bottom: 1rem;
}
.customer-title h1{
  color: #c7b299;
  font-size: 6rem;
    font-family: Oswald, NotoSerifJP, sans-serif;
    letter-spacing: 5px;
}
.customer-title h1 span{
  position: relative;
}
.customer-title h1 span::after{
  content: "\30A8\30CC\30C6\30C3\30AF\3067\5BB6\3092\5EFA\3066\305F\7406\7531";
  position: absolute;
  font-size: 1.3rem;
    font-weight: 500;
  width: 100%;
  top: 5px;
    right: 15px;
    text-align: end;
    letter-spacing: 1px;
}
.customer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.customer-card{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.customer-text{
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-text .name{
  display: flex;
  align-items: center;
  gap: 10px;
}
.customer-text .name span:first-child{
  border: 1px solid #000;
  padding: .5rem 1rem;
}
.customer-text blockquote{
  line-height: 1.6;
}
.customer-a{
  display: flex;
  justify-content: flex-end;
}
.customer-a a{
  display: flex;
  align-items: center;
  gap: 10px;
}

/*------------------
      modal
-------------------*/
.input-wrap{
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.input-wrap .circle-arrow{
  background: #969696;
}
.button {
  transition: 0.5s;
}

/* 画面の中央に寄せるCSS。ウィンドウとボタンに適応 */
.modalScroll,
.ScrollContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.modal_bg {
  /*background: rgba(0, 0, 0, 0.32);*/
  height: 100vh;
  position: absolute;
  width: 100%;
}

.js-modal-close {
  color: #555;
}

.modalScroll {
  background: #fff;/* ウィンドウの背景色 */
  height: 85vh;
  width: 90vw;
  max-height: 800px;
  padding: 20px;
  /*border-radius: 20px;*/
  position: relative;
}

/* ウィンドウ内のコンテンツ。スクロールの範囲はここになります。 */
.ScrollContent {
  overflow-y: scroll;/* コンテンツ量が多くなってもスクロールできるようになります */
  height: 90%;/* ウィンドウ内部のコンテンツの高さ */
  width: 100%;
  padding-top: 2rem;
  /*border-radius: 20px;*/
  
}
.modal_content{
  padding: 1rem 1.8rem;
}
.modal_content h1,
.modal_content {
  color: rgb(49, 49, 49);
  text-align: center;
  text-align: center;

}
/*拡大*/
.circle-expand {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(26, 26, 26,.8);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.8s ease, width 0.8s ease, height 0.8s ease, opacity 0.8s ease;
  z-index: 999;
  pointer-events: none;
  opacity: 1;
}
.circle-expand.expand {
  width: 4500px;
  height: 4500px;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.circle-expand.fadeout {
  opacity: 0;
}
.modal-cancel{
  position: absolute;
    top: -25px;
    right: 50px;
  z-index: 100;
}
.modal-cancel button{
  position: relative;
}
.modal-cancel button::after{
  content: "";
  width: 30px;
  height: 30px;
  background: url("../img/icon/cancel.svg") no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
}
.modal_content > h5{
  font-family: "shippori-mincho", sans-serif;
  font-weight: bold;
  position: relative;
  padding-bottom: 2rem;
}
.modal_content > h5::after{
  content: "";
  width: 10px;
  height: 1px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.modal_content .q-amd-a{
  margin: 1.5rem 0 3rem;
}
.modal_content .q-amd-a h5{
  font-weight: bold;
  margin-bottom: 2rem;
  line-height: 1.6;
  text-align: start;
}
.modal_content .q-amd-a blockquote span{
  font-weight: bold;
}
.customer-text .modal_content .q-amd-a  blockquote{
  text-align: left;
    line-height: 1.8;
  margin-bottom: 2rem;
}
@media screen and (min-width: 400px){
  .modal_content .q-amd-a h5 br{
    display: none;
  }
}


/*-----------------------------
    Prize&Media:
----------------------------*/
.prize{
  margin-bottom: 5rem;
}
.prize .container{
  max-width: 88%;
}
.prize .feature-title h1 span::after{
  content: "\53D7\8CDE\6B74\30FB\30E1\30C7\30A3\30A2\51FA\6F14";
  top: -2px;
}
.prize .feature-title, 
.reputation .feature-title, 
.message .feature-title, 
.about .feature-title{
  padding: 0;
}

.dlBlock, .dlBlock-line {
  position: relative;
}
 
.dlBlock-line:before {
  position: absolute;
  display: block;
  content: "";
  background: #000;
  width: 1px;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 80px;
}
.dlBlock .dlBlock-line .dlInner:not(:last-child){
    padding-bottom: 2rem;
  }
 
.dlBlock .dlInner {
  display: flex;
  align-items: flex-start;/*なくても問題ない？？*/
  gap: 4rem;
}
 
.dlBlock dt {
  position: relative;
  color: #808080;
  line-height: 1;
  box-sizing: border-box;
  word-break: break-all;
  font-size: 2.4rem;
  width: 18%;
  max-width: 60px;
}
.dlBlock dt figure{
  margin-top: .3rem;
}
.dlBlock dt figure img{
  max-width: 65px;
}
 
/*.dlBlock dt:before {
  position: absolute;
  display: block;
  content: "";
  top: .5em;
  right: 0;
  width: 7px;
  height: 7px;
  background: #1b2680;
  border-radius: 50%;
  transform: translateY(-50%);
}*/
 
.dlBlock dd {
  line-height: 1.5;
  flex: 1;
  display: flex;
    flex-direction: column;
    gap: 10px;
}
.dlBlock dd p span{
  font-size: 1.6rem;
}
.dlBlock dd p b{
  font-size: 1.8rem;
  font-weight: 600;
}
.p-img01{
  display: flex;
    gap: 2rem;
    margin: 3rem 2rem;
}
.dlB-margin{
  margin-bottom: 2rem
}
 
.p-p-img-pc figure:first-child{
  display: flex;
  gap: 3rem;
}
.p-p-img-pc figure:not(:last-child){
  margin-bottom: 3rem;
}
/*-----------------------------
    reputation
----------------------------*/
.reputation .feature-title h1 span::after{
  content: "\5C02\9580\5BB6\3082\7D76\8CDB";
  top: -2px;
}

.reputation .feature-title{
  color: rgba(199, 178, 153, .3);
}

.reputation{
  background-color: #333333;
  color: #fff;
  padding: 5rem 0;
}
.rep-title{
  display: flex;
  justify-content: center;
  position: relative;
  margin-bottom: 3rem;
  padding: 1rem 0;
}
.rep-title::before{
  content: "";
  width: 7px;
  height: 100%;
  border: 1px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.rep-title h3{
  font-family: "shippori-mincho", sans-serif;
  font-size: 2rem;
  line-height: 1.5;
}
.rep-text{
  margin-bottom: 3rem;
}
.rep-text blockquote{
  font-size: 1.5rem;
  line-height: 1.8;
}
.d-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.d-name{
  display: flex;
  align-items: center;
}
.d-name h5{
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-left: 1.5rem;
}
.d-name h5 span{
  font-size: 2rem;
}

/*-----------------------------
    message
----------------------------*/
.message{
  margin: 6rem 0 4rem;
}
.message .feature-title h1 span::after{
  content: "\793E\9577\306E\601D\3044";
}
.d-status dl{
  font-size: 1.4rem;
}
.d-status dl .d-s-inner:first-child{
  margin-bottom: .5rem;
}
.d-s-inner{
  display: flex;
}
.d-s-inner dt{
  width: 29%;
  max-width: 100px;
}
.d-s-inner dt span{
  position: relative;
  padding-left: 1.3rem;
}
.d-s-inner dt .space{
  /*text-align: justify;
  display: block;*/
}
.d-s-inner dt span::after{
  /*content: '';
  display: inline-block;
  width: 100%;*/
}
.d-s-inner dt span::before{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 0 0.5em .9em;
  border-color: transparent transparent transparent black;
  position: absolute;
    left: 0;
    /*top: 2px;*/
  top: 50%;
    transform: translateY(-50%);
}
/*.d-s-inner dt span.space-nomal::before{
  top: 4px;
}*/
.d-s-inner dt span 
.d-s-inner dd{
  flex: 1;
}
.d-s-inner dd ul li{
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: .5rem;
}
.d-s-inner dd ul li::before{
  content: "";
  width: .6em;
  height: .6em;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.message .d-grid .d-name{
  flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.message .d-grid .d-name > span{
  margin-left: 1.5rem;
  font-size: 1.2rem;
}
.m-text blockquote{
  font-size: 1.5rem;
  padding-bottom: 3rem;
  line-height: 1.8
}
.message .daihyou{
  border-top: 1px solid #000;
    padding-top: 3rem;
}
.message .d-grid{
  margin-bottom: 3rem;
}

/*-----------------------------
    staff
----------------------------*/
.staff{
  background-color: #736357;
}

.staff .s-con-pc.container{
  max-width: 100%;
}
.s-title h2{
  font-size: 4rem;
  font-family: Oswald, sans-serif;
  position: relative;
  text-align: center;
  padding-bottom: 3rem;
}
.s-title h2::before, .s-title h2::after{
  content: "";
  width: 1px;
  height: 30px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.s-title h2::before{
  top: -1rem;
}
.s-title h2::after{
  bottom: -1rem;
}
.s-title h2 span{
  font-size: 1.4rem;
}
.s-haikei{
  /*height: 85vh;*/
  background: url("../img/haikeiimg/staff01.webp") no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 2;
}
.s-haikei figure{
  display: flex;
    justify-content: center;
    padding-top: 3rem;
}
.s-haikei figure img{
  width: 95%;
}
.s-title{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.s-text{
  /*margin-top: -5rem;*/
  position: relative;
  top: -2rem;
    z-index: 1;
}
.s-text blockquote{
  font-size: 1.5rem;
    line-height: 1.8;
    padding: 2.5rem 2rem;
    border: 1px solid #fff;
}
.s-inner{
  /*background-color: #736357;*/
    color: #fff;
  padding-bottom: 3rem;
  position: relative;
}


/*-----------------------------
    about
----------------------------*/
.about{
  margin: 4rem 0;
}
.about .a-con-pc.container{
  max-width: 100%;
}
.about .feature-title h1 span::after{
  content: "\30A8\30CC\30C6\30C3\30AF\306E\7D39\4ECB";
}
.a-catch, .a-i-title{
  display: flex;
}
.a-catch figure{
  width: 72%;
}
.a-c-text{
  margin-left: 1rem;
}
.a-c-text .tategaki{
  color: #000;
    font-size: 2rem;
}
.a-text {
  margin-top: 3rem;
}
.a-text > h3{
  color: #4c5783;
    font-size: 1.6rem;
    text-align: center;
  font-weight: 600;
    line-height: 1.6;
    margin-bottom: 3rem;
}
.a-i-title h5{
  font-family: "shippori-mincho", sans-serif;
  font-size: 2rem;
    font-weight: 600;
  display: flex;
    align-items: end;
}
.a-list .a-item:nth-child(2) .a-i-title h5{
  padding-bottom: .4rem;
}
.a-item{
  margin-bottom: 3rem;
}
.a-item > p{
  font-size: 1.6rem;
  line-height: 1.6;
    font-weight: 500;
    margin-top: 1rem;
    padding-left: 1rem;
}
.a-i-title{
  border-bottom: 3px solid #e3e3e3;
    padding-bottom: .5rem;
  gap: 1rem;
}
.a-i-title figure{
  width: 14%;
  padding-left: 1rem;
}
.a-text > p{
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.6;
}

.contact-sns{
  display: flex;
  justify-content: space-evenly;
  margin-top: 2rem;
}
.contact-sns a{
  max-width: 32px;
  width: 10%;
  display: flex;
    align-items: center;
}
.copyright{
  padding: 2rem 1.5rem;
}
.copyright p{
  line-height: 1.6;
}
.copyright p span{
  display: inline-block;
}

/*-----------------------------
    map
----------------------------*/
.map .container{
  max-width: 100%;
}

/*-----------------------------
    copyright
----------------------------*/
.copyright .container{
  max-width: 100%;
}



.c-c-middle{
  margin-bottom: 4rem;
}