/*
Theme Name: arkhe Child
Template: arkhe
Description: arkheの子テーマです。
Version: 1.0
*/
/*swiperのページネーションの色変更 */

.swiper-pagination span {
    background-color: #b66e7d;
  }
  
      
  /*シゴトル ハンバーガーメニュー文字が小さい11pxから16くらい*/
  span.__mainText {
      font-size: 1.4rem;
  }
  
  
  /*レスポンシブデザイン　フォントサイズ調整*/
  html {
    font-size: 62.5%; /* 1rem = 10px */
  }
  
  body {
    font-size: 1.6rem; /* 16px */
  }
  
  h1 {
  font-size: 2rem;
  }
  
  
  /*シゴトル top FAQ見出し21pxから25px*/
  .faq-title {
      font-size: 2rem;
  }
  
  /* スマートフォン */
  @media (max-width: 600px) {
  body {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 1.8rem;
  }
  .arkb-ls {
    font-size: 4.2rem;
    margin-left: 1.2rem; /* マージンも相対単位で指定 */
  }
	  
  }
  /*シゴトル　pcは大きく（設定したので、スマホ表示もそれに合わせて調整）*/
  /*20pxから、18px*/
  @media (max-width: 600px) {
  .about-sp-p {
  font-size:1.45rem;
  }
	  
  /*シゴトルtop menuのpタグ15.625pxから16pxへ*/
      .menu-p {
          font-size:1.325rem!important;
      }
      
  }
  
  /*FVの文字*/
  .arkb-ls {
  font-family: 'neue-haas-grotesk-display', sans-serif;
  color: #800020;
  /*     color: #B8860B; */
  display        : inline-block;
  color          : #990000;            /* 文字の色 */
  letter-spacing : 2px;                /* 文字間 */
  text-shadow    : 
       1px  1px 1px rgba(255, 255, 255, 0.93),
      -1px  1px 1px rgba(255, 255, 255, 0.93),
       1px -1px 1px rgba(255, 255, 255, 0.93),
      -1px -1px 1px rgba(255, 255, 255, 0.93),
       1px  0px 1px rgba(255, 255, 255, 0.93),
       0px  1px 1px rgba(255, 255, 255, 0.93),
      -1px  0px 1px rgba(255, 255, 255, 0.93),
       0px -1px 1px rgba(255, 255, 255, 0.93);        /* 文字の影 */
  
  }
  /*fvの英字*/
  .arkb-ls {
  text-shadow : 1px 7px 6px #cccccc  ;
    font-family: ivymode, serif;
    font-weight: 400;
    text-align: center;
  font-size:90px;
  margin-left:55px;
  }
  
  /*fvの日本語*/
  .arkp-scMV05 .ark-block-heading__sub {
    font-size: min(18px, 3.4vw);
    margin-top: 1em;
  margin-left:55px;
  }
  
  
  
  /*全体のフォント*/
  body {
  font-family:a-otf-ryumin-pr6n, serif;
  color:rgb(112, 112, 112);
  font-weight:300;
  }
  
  /*img角丸*/
  /* .wp-block-media-text__media img { */
  /*     border-radius: 24x; */
  /* } */
  
  /* .wp-block-image img { */
  /*     border-radius: 24px; */
  /* } */
  .maru img{
   border-radius: 24px;
  }
  .img-frame {
   border-radius: 24px;
  }
  
  .maru-parent div {
  border-radius: 24px;
  }
  
  /*menuページのtab*/
  .tab-box{
   border-radius: 24px;
  }
  /*menuページの中のtab内img*/
  .tab-box img{
   width: px;
  }
  .is-style-box {
  background-color:F0F0F0;
  }
  /*ピンク背景角丸*/
  .wp-block-media-text__media img {
    border-radius: 24x;
  }
  
  /*aboutusセクション画像ずらす*/
  .aboutus_left {
  position:relative;
  top:-77px;	
  }
  /*designセクション*/
  .design {
  margin: 0 calc(50% - 50vw);
  }
  
  
  
  /*web予約ボタン*//* aタグにスタイルを適用 */
  .c-gnav__a {
  background: #800020;
  color: #F8F8F8!important;
  border: none;
  position: relative;
  height: 50px!important;
  font-size: 1.2em;
  padding: 0 2em;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
  text-decoration: none; /* リンクのアンダーラインを消す */
  border-radius: 8px;
  }
  
  
  a.c-gnav__a {
    margin: 5px;
    padding: 1px 55px!important;
  }
  
  .c-gnav__a:hover {
  background: #F8F8F8;
  color: #800020!important;
  }
  
  .c-gnav__a:before,
  .c-gnav__a:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #800020;
  transition: 400ms ease all;
  }
  
  .c-gnav__a:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
  }
  
  .c-gnav__a:hover:before,.c-gnav__a:hover:after{
  width:100%;
  transition:800ms ease all;
  }
  
  
  .c-gnav__li>.c-gnav__a {
    margin-right: 20px;
  }
  
  
  /*メニュー説明フォント大きさ*/
  .menu-style {
  font-size:1.75rem;
  }
  
  
  
  /*FAQ 色設定*/
  .ark-block-faq__q:before {
    background-color: #800020;
    color: #fff;
    content: "Q";
  }
  
  .ark-block-faq__a:before {
    box-shadow: inset 0 0 0 1px #800020;
    color: #800020;
    content: "A";
  }
  
  /*不要な線を消す*/
  .wp-block-separator {
      background-color: transparent;
  }
  
  /* aboutセクションレイアウト */
  /* 画像を横に並べる */
  .about_img {
  display: flex;
  justify-content: space-between; /* 画像を左右に均等に配置 */
  }
  
  /* 背景ピンク */
  .about_img {
  background-color: #E5C5BA;
  max-width: calc(var(--ark-width--container) + var(--ark-padding--container) * 2);
  padding-left: var(--ark-padding--container);
  padding-right: var(--ark-padding--container);
  }
  
  .home.page .l-content__body > .your-section {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #E5C5BA;
  }
  
  .about {
  width: 100%;
  background-color: yourColor; /* 背景色を設定 */
  margin-left: calc(-1 * var(--ark-padding--container));
  margin-right: calc(-1 * var(--ark-padding--container));
  }
  
  /* デザインセクション */
  .design h2 {
  letter-spacing: .1em;
  position: relative;
  }
  
  .design h2::after {
  display: block;
  content: '';
  width: 1px;
  height: 100px;
  background: rgba(56, 62, 54, .5);
  position: absolute;
  bottom: -150px;
  right: 20px;
  }
  
  /* ギャラリーのループスライド */
  .stk-slide-gallery {
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 0;
  padding: 0 !important;
  }
  
  .stk-slide-gallery .wp-block-gallery {
  flex-wrap: nowrap;
  animation: loop-slide 30s infinite linear 1s both;
  }
  
  .stk-slide-gallery .wp-block-image {
  width: 182px !important;
  }
  
  @keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
  }
  
  /* ギャラリー　モバイル画面で表示サイズを変更 */
  @media screen and (max-width: 600px) {
  .stk-slide-gallery .wp-block-image {
    width: 125px !important;
  }
  
  }
  
  :root {
  --ark-color--new-color: #e5c5ba; /* 追加する色 */
  /* 既存の変数 */
  --ark-width--container: 1200px;
  }
  
  .my-element {
  background-color: var(--ark-color--new-color);
  }
  
  
  /*トップページdesign４つのカラム間の間の余白設定*/
  .design {
  padding-right:20px;
  }
  /*トップページaboutusの写真位置調整*/
  .about-img2 {
  margin-bottom:100px;
  }
  
  /*aboutピンク背景横幅*/
  .aboutus {
  margin: 0 calc(50% - 50vw);
  }
  
  /*aboutus背景色 */
  
  .arkp-gnRichClmn02 .arkp-gnRichClmn02__cont {
    background: #e5c5ba!important;
  }
  
  
  /*スマホでaboutus写真上に*/
  .ark-block-columns__inner {
    flex-wrap: wrap-reverse;
  }
  
  
  /*数字色*/
  
  .arkp-scFeatureList03 .ark-block-column::before {
    color: #cd7f32!important;
  }
  
  .arkp-scFeatureList03 .ark-block-column {
    padding: 33px;
  }
  /*メニュー写真*/
  .menuimg {
  width:80%;
  }
  /*ピンク背景横幅*/
  .menu {
  margin: 0 calc(50% - 50vw);
  }
  
  /*シゴトル修正　top menuのレイアウトが崩れる*/
  .parent{
    padding: 0 8%;
  }
  
  
  /*シゴトル修正　ブランドコンセプトページ画像とタイトル近くする*/
  @media (max-width: 1000px) {
  .concept-space {
      display: none;
  }
	  
/*シゴトル修正　文字調整30pxから28.125px*/
	  .consept-section-title {
		  font-size:2.25rem;
}
	  
  }

  /*シゴトル修正　ブランドコンセプトsection下余白*/
  @media (max-width: 600px) {
  .concept-section-img {
  padding-top:55px;
  }

	  .staff {
		 margin-top:65px!important;
	  }
}

/*シゴトル修正 staffカラム文章が逆になる*/
 @media (max-width: 781px) {
.staff-pc {
	display:none;
}
	 
.staff-sp { 
    display: initial !important;
	 }
}

.staff-sp {
	display:none;
}

/*修正*/
 /* Tabletサイズ（600px以上999px以下） */
  @media (min-width: 600px) and (max-width: 999px) {	  
.wp-block-spacer.menu-spase.footer-space {
    display: none;
}
	  .footerlogo {
		  text-align:center;
}
	  
}

/*2個目のカラム写真上*/
  @media (max-width: 781px) {
.concept-section2 {
    flex-direction: column-reverse;
}
  }

/*シゴトル修正　ロゴ位置*/
 @media (min-width: 600px) and (max-width: 999px) {	  
.l-container {
 display: flex;
 flex-direction: column;
}
}

  
  
  /*メニュー画像アップ*/
  .img-frame{
  /* 縦横300pxにがっちり固定 */
  /* width: 300px; */
  /* height: 215px; */
  /* 固定した幅からはみ出たものは隠してしまう */
  overflow: hidden;
  }
  
  /* 画像スケール */
  .menustyle{
  /* width: 300px; */
  /* height: 300px; */
  /* ヌルッと動くように */
  transition: 0.3s;
  }
  /* ボバー時のアクション */
  .menustyle:hover{
  /* transformは変形プロパティ。値にscaleを指定すると拡大縮小することができる。 */
  transform: scale(1.3);
  }
  
  /*画像位置調整ゴールド*/
  
  img.wp-image-632 {
  left:10px;
  top:100px;
  }
  
  .aboutus-text {
      position:relative;
      z-index:10;
  }
  @media (max-width: 781px) {
  
  img.wp-image-985 {
      display: none;
  }
      
  img.wp-image-654 {
      display:none;
  }
      
  }
  
  .faq-img {
  position:relative;
  left:222px;
  top:-50px;
  z-index:100;
  }
  
  /*web予約文字サイズ*/
  .c-gnav .__mainText {
  font-size:1.5rem;
  }
  
  
  /*画像をPC用とモバイル用で切り替える*/
  /* デフォルトはPC用（スマホ用を非表示） */
  .sp {
  display: none;
  }
  
  /* スマホ用（最大幅600px）でスマホ用スライダーを表示(＋PC用を非表示にする) */
  @media screen and (max-width: 600px) {
  .pc {
    display: none;
      }
  .sp {
    display: initial;
  }
  }
  
  
  
  
  /* 子要素の wp-block-column 内の要素に対してのマージン削除 */
  .wp-block-column {
  margin: 0;
  }
  
  
  /*レスポンシブ調整*/
  @media screen and (max-width: 600px) {
      
  .menu-spase {
    display:none;
  }
  .menu-goldimg {
    display:none;
  }
  /*menuのボタン横幅*/
  .all-menu-sp {
    --arkb-gap--x: 0 !important; /* ギャップを無効化 */
  }
  /*faqタイトルマージン削除*/
  .c-postContent>* {
    margin-top: 0 !important; /* margin-topをゼロにする */
      
  /*シゴトル余白、topページのaboutusの下*/
      padding-bottom: 10px!important;
  }
  /*シゴトルtop FAQカラム揃えるため、余計なマージン削除*/
      .faq-top {
      padding-left: var(--wp--preset--spacing--0)!important;
      }
      
  /*シゴトルtop FAQカラム揃えるため、余計なパディング削除*/
      .top-faq-box {
  padding:0;
      }
      
      .top-faq-button {
  padding-bottom:1.6rem;
      }
      
  /*シゴトル ハンバーガーメニュー文字が小さい11pxから16くらい*/
  span.__mainText {
      font-size: 1.3rem;
  }
  
  
  .ark-block-buttons {
    --arkb-gap--x: 0!important;
  }
  .insta-sp {
    margin-top:31px!important;
  }
  
  /*  各種リンクロゴ真ん中配置*/
  .sns-logo-sp-column{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 親要素に幅を指定 */
  }
  
  .sns-logo-sp {
    margin: 0;
    width: 77px; /* 必要に応じてロゴの幅を調整 */
  }
  
  /*ハンバーガメニュー　spでは、左上に設定*/
  .l-header__drawerBtn {
    grid-area: left;
    z-index: 2;
  }
  
    .my-custom-header {
  background-color: #f0f0f0;
  padding: 20px;
  }
  
  /*webボタン右に移動*/
  .c-gnav__li>.c-gnav__a {
    margin-right: -40px;
  }
  /*ロゴをハンバーガーメニューよりにした*/
  .c-headLogo__img {
    margin-right: 20px;
  }
  
  
  /*フッターエリアのスペーサー調整*/
  .footer-space {
    height:50px;
  }
  
  /*余白削除*/
  .wp-block-column.u-mt-0.column.is-layout-flow.wp-block-column-is-layout-flow {
      display: none;
  }
      
  .address {
       padding:22px;
      margin-top:33px;
      margin-bottom:33px;
      font-size:1.2rem;
  } 
  /*フッターエリアのロゴ*/
  ment.style {
      width: 200px;
  }
  }
  
  
  
  
  /* フッターエリアの中央揃え */
  .footer-widget-area {
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え（必要に応じて） */
    width: 100%;
  }
  
  .footer-widget-area .widget {
    text-align: center; /* ウィジェット内のテキストを中央揃え */
    width: auto; /* 必要に応じて調整 */
  }
  
  .l-headerUnder, .l-header__bar, .l-header__left, .l-header__right {
    display: initial;
  }
  
  
  /*aboutusセクション（スマホ用を非表示）*/
  .aboutus-sp {
    display: none;
  }
  
  /* スマホ用（最大幅600px）でスマホ用スライダーを表示(＋PC用を非表示にする) */
  @media screen and (max-width: 1000px) {
  .aboutus-pc {
    display: none;
      }
  .aboutus-sp {
    display: initial;
  }
  }
  
  
  @media screen and (max-width: 1000px) {
  
  /*img非表示*/
      .goldimg img {
          display:none;
      }
  
  /*フッターのロゴ小さく*/
      .footerlogo img {
      max-width: 60%;
      }
  
  }
  
  /* Mobileサイズ（599px以下） */
  @media (max-width: 599px) {
  /*フッターロゴ*/
      
  /*ブランドコンセプトカラム2個目反対に*/
      .conceptbox1 {
          padding-top:50px;
      }
      
      .conceptbox2 {
          flex-direction:column-reverse;
      }
      
      /*staff余白*/
      .staff-img {
          padding-bottom:1rem;
  }
      
      .aboutus-sp {
          position:relative;
          top:-44px;
      }
      
      
  /*フッターの余白調整*/
      .footer-space {
          display:none;
      }
      
      
  }
  

  
  /* Tabletサイズ（600px以上999px以下） */
  @media (min-width: 600px) and (max-width: 999px) {
  /*web予約ボタン横幅PCサイズから縮小する*/
  a.c-gnav__a {
    margin: 0px;
    padding: 0px;
  }
  /*FAQのオブジェクト非表示*/
      .faq-img2 {
          display:none;
      }
      
  }
  
  /* PCサイズ（1000px以上） */
  @media (min-width: 1000px) {
  
  /*セクションタイトル*/
  .section-title {
  font-size:1.8rem;
  }
  /*セクション　サブタイトル*/
  .ark-block-heading .ark-block-heading__sub {
      font-size: 1.4rem!important;
  }
  
  /*menuページのナチュラル等のボタンを1列から2列にする*/
  /*全体に 100% を適用（デフォルト設定）
  .wp-block-column のデフォルトスタイルを 100% に維持します。
  特定のクラス（例: .menubutton）に 40% を適用
  .menubutton にスタイルを追加し、他のスタイルと競合しないようにします。*/
  @media (max-width: 781px) {
    /* デフォルトは100% */
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
      flex-basis: 100% !important;
    }
  
    /* 特定の要素だけ40%に */
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column.menubutton {
      flex-basis: 40% !important;
    }
      .explanation{
      font-size: 1.25rem!important;
  }
      .menu-style {
          display:none;
      }
  }
  
  
  @media (min-width: 600px) and (max-width: 999px) {
  
  /*フッターの余白調整*/
      .footer-space {
          display:none;
      }
      
  .footer-left p{
   text-align:center!important;
      padding-left:0px!important;
  }
      
  }
  
  
  
  .footer-left p{
   text-align:left;
      padding-left:66px;
  }
  
  /*タイトル背景*/
  .p-topArea.-noimg {
      background-image: url('https://yuki-webdesign.com/rash-rush/wp-content/uploads/2025/01/img26.png'); /* 画像を背景に設定 */
      background-size: cover; /* 画像を要素全体に合わせて拡大 */
      background-position: center; /* 画像の位置を中央に設定 */
      background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  }
  
      
  /*セレクトボタンの配色設定*/
  
  .c-pageTitle__main {
      color: #707070;
  }
  .ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button[aria-selected=true] {
      background-color: #800020;
      color: #fff;
  }
  
  .ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button {
      background-color: #ffffff;
      border-bottom: none;
  }
  
  .section-title {
  font-size:2rem;
  }
  
  
  @media (max-width: 781px) {
      .menubutton{
          flex-basis: 100% !important;
          max-width: 40%;
      }
  }
      
      
  /*シゴトル指摘　スマホ時のタイトル背景がグレーのまま*/
      
  @media  (max-width: 999px) {
  /*タイトル背景*/
  .p-topArea.-noimg {
      background-image: url('https://yuki-webdesign.com/rash-rush/wp-content/uploads/2025/01/img26.png'); /* 画像を背景に設定 */
      background-size: cover; /* 画像を要素全体に合わせて拡大 */
      background-position: center; /* 画像の位置を中央に設定 */
      background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  }
      }
      
  /*シゴトル余白、topページのaboutusの下*/
      @media  (max-width: 600px) {
          .about1 {
      padding-bottom: 15px!important;
  }
  }
      
  /*セレクトボタンの配色*/
  @media (max-width: 999px) {
      
  .ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button {
      background-color: #fff;
      border-bottom: none;
  }
      
  .ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button[aria-selected=true] {
      background-color: #800020!important;
      color: #fff!important;
  }
      }
  
      }
  
        @media (max-width: 600px) {
/*シゴトル修正　web予約ボタン*/	  
a.c-gnav__a {
    margin: 5px;
    padding: 1px 24px !important;
}
			.top-menu-space {
				height:20px!important;
			}  
			
			.all-menu-sp {
				padding-bottom:55px;
			}
  }
  
    /*シゴトル指摘　スマホ時のタイトル背景がグレーのまま*/
      
  @media  (max-width: 999px) {
  /*タイトル背景*/
  .p-topArea.-noimg {
      background-image: url('https://yuki-webdesign.com/rash-rush/wp-content/uploads/2025/01/img26.png'); /* 画像を背景に設定 */
      background-size: cover; /* 画像を要素全体に合わせて拡大 */
      background-position: center; /* 画像の位置を中央に設定 */
      background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
  }
/*タイトル文字*/
  .c-pageTitle__main {
      color: #707070;
  }
/*メニューのタブボタン*/
.ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button[aria-selected=true] {
    background-color: #800020;
    color: #fff;
}
	  
.ark-block-tab.is-style-box>.arkb-tabList .arkb-tabList__button {
    background-color: #ffffff;
    border-bottom: none;
}
      }


/* @media (max-width: 781px) { */
/*     .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { */
/*         flex-basis: 33%!important; */
/*     } */
/* } */

/*web予約ボタンの位置*/
  @media (min-width: 600px) and (max-width: 999px) {
	  
}