/*
Theme Name: arkhe-child
Template: arkhe
Theme URI: https://arkhe-theme.com/
Version: 3.12.0
Tested up to: 6.8
Requires at least: 6.0
Requires PHP: 7.0
Description: A very simple theme for production templates. Customize as you like.
Tags: two-columns, one-column, right-sidebar, custom-colors, custom-menu, editor-style, theme-options, block-styles, wide-blocks
Author: LOOS,Inc.
Author URI: https://loos.co.jp/
Text Domain: arkhe
Domain Path: /languages
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


* {
    font-family: "Montserrat", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #958686;
}

.p-drawer {
  background: #FFF6F5;
}

.c-postContent>:first-child {
  margin-top: 20px !important;
}

.mincho {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(20px, calc((100vw - 360px) * ((36 - 20) / (1200 - 360)) + 20px), 36px);
}

.mincho + p {
  margin: 0;
  font-size: clamp(15px, calc((100vw - 360px) * ((20 - 15) / (1200 - 360)) + 15px), 20px);
}

.josefin {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.l-header__drawerBtn {
      background: #FFF6F5;
    border-radius: 50px;
}

.ytx-grid {
  --ytx-gap: 24px 78px;
  --ytx-radius: 16px;
  --ytx-col: 2;
  --ytx-label-bg: #efe8e1;
  --ytx-label-color: #6b5e52;
}


.arconest-page {
  --arconest-bg-top: #ffffff;
  --arconest-bg-bottom: #FFF9F8;
  --arconest-text: #6f6568;
  --arconest-title: #998f92;
  --arconest-logo: #978d90;
  --arconest-sub-logo: #7d7477;
  --arconest-max-width: 860px;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(
    to bottom,
    var(--arconest-bg-top) 0 360px,
    var(--arconest-bg-bottom) 360px 100%
  );
  color: var(--arconest-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0 calc(50% - 50vw);
}

.arconest-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 0 72px;
}

.arconest-hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 6px 20px rgba(58, 41, 26, 0.08);
}

.arconest-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.arconest-copy {
  margin: 42px auto 0;
  text-align: center;
  color: var(--arconest-title);
}

.arconest-copy p {
  font-weight: 700;
}

h3 {
  font-weight: 300;
  border-bottom: 1px solid #958686;
  font-size: clamp(32px, calc((100vw - 360px) * ((48 - 32) / (1200 - 360)) + 32px), 48px);
  display: inline-block;
}

.ytx-grid[data-cols="3"] {
  --ytx-col: 3;
}

.ytx-list {
  display: grid;
  grid-template-columns: repeat(var(--ytx-col), minmax(0, 1fr));
  gap: var(--ytx-gap);
}

.ytx-list br {
    display: none;
}

.ytx-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  margin: 0 0 120px 0;
}

.ytx-card:nth-of-type(2n) {
    margin: 120px 0 0;
}

.ytx-card:last-of-type {
  margin-bottom: 0;
}

.ytx-figure {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--ytx-radius);
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .15);
}

.ytx-grid[data-ratio="4/3"] .ytx-figure {
  aspect-ratio: 4 / 3;
}

.ytx-grid[data-ratio="1/1"] .ytx-figure {
  aspect-ratio: 1 / 1;
}

.ytx-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.98) contrast(1.02);
}

.ytx-inset {
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--ytx-radius) - 8px);
  border: 2px solid #fff;
  pointer-events: none;
}

.ytx-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: none;
  border: 2px solid #fff;
  box-shadow: 0 0 8px #656565;
}

/* 再生三角 */
.ytx-play::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);

  width: 0;
  height: 0;
  border-left: 1.4rem solid #fff;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;

  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 1));
}


.ytx-card:hover .ytx-figure img {
  transform: scale(1.02);
  transition: transform .35s ease;
}

.ytx-card:hover .ytx-play {
  background: rgba(0, 0, 0, .75);
}

.ytx-meta {
  display: grid;
  gap: 6px;
}

.ytx-label {
  display: inline-block;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0.25em 0.5em;
  border: 1px solid #958686;
  width: fit-content;
  font-size: clamp(12px, calc((100vw - 360px) * ((16 - 12) / (1200 - 360)) + 12px), 16px);
  line-height: 1.2;
}

.ytx-title {
  margin: 0;
  font-size: clamp(20px, calc((100vw - 360px) * ((24 - 20) / (1200 - 360)) + 20px), 24px);
}

.ytx-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 99999;
  background: rgba(0, 0, 0, .6);
  padding: 4vw;
}

.ytx-modal[hidden] {
  display: none;
}

.ytx-dialog {
  position: relative;
  width: min(1200px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}

.ytx-frame,
.ytx-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.ytx-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.ytx-lock {
  overflow: hidden;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.contact-contenner {
  background: #FFF9F8;
  margin: 0 calc(50% - 50vw);
}

.contact-inner {
  max-width: 1200px;
}

.about {
  border: 1px solid #958686;
  padding: 36px;
}

.about strong {
  border-bottom: 1px solid #958686;
}

.about .wp-block-image {
  text-align: left;
}

.about .wp-block-columns {
  gap: 10% !important;
}

.tel sup {
  font-size: 16px !important;
}
/* 1) 外枠：プロフィールタイル + フィードを同一グリッドに見せる */
/* 目的：プロフィールタイル + 各投稿タイルを「同じ1つのグリッド」に並べる */
.ig-grid{
  --ig-gap: 18px;
  --ig-min: 200px;  /* ここを変えると列数が変わる */
  --ig-radius: 16px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ig-min), 1fr));
  gap: var(--ig-gap);
}

/* 重要：Smash Balloon側のラッパーを“消して”、投稿タイルを親グリッドに参加させる */
.ig-grid .ig-feed,
.ig-grid .ig-feed #sb_instagram,
.ig-grid .ig-feed #sb_instagram #sbi_images,
.ig-grid .ig-feed .sbi,
.ig-grid .ig-feed .sbi .sbi_images{
  display: contents !important;
}

.ig-feed svg path {
  color: #fff;
}

/* プロフィールタイル：投稿と同サイズの正方形 */
.ig-profile-tile{
  aspect-ratio: 1 / 1;
  border: 1px solid #958686;
  border-radius: var(--ig-radius);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 14px 12px;
  box-sizing: border-box;
}
.ig-profile-tile:hover{ border-color:#d6d6d6; }

.ig-profile-tile .ri-instagram-line {
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
}

.ig-profile-tile .ri-arrow-right-long-line {
    font-size: 34px;
    line-height: 1;
    font-weight: 200;
}

.ig-profile-name{
  margin-top: 10px;
  font-size: 14px;
  line-height:1.2;
  text-align:center;
  word-break: break-word;
}

/* 投稿タイル：親グリッドの1セルとして正方形にする */
.ig-grid .ig-feed #sb_instagram .sbi_item,
.ig-grid .ig-feed .sbi .sbi_item{
  aspect-ratio: 1 / 1;
}

/* 画像をセルにフィットさせ、角丸にする */
.ig-grid .ig-feed #sb_instagram .sbi_photo_wrap,
.ig-grid .ig-feed .sbi .sbi_photo_wrap{
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--ig-radius);
  overflow: hidden;
}
.ig-grid .ig-feed #sb_instagram .sbi_photo,
.ig-grid .ig-feed .sbi .sbi_photo{
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ヘッダーやボタンを消す（必要なら） */
.ig-grid .ig-feed #sb_instagram .sb_instagram_header,
.ig-grid .ig-feed .sbi .sb_instagram_header,
.ig-grid .ig-feed #sb_instagram .sbi_load_btn,
.ig-grid .ig-feed .sbi .sbi_load_btn{
  display: none !important;
}


.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.link::after {
  content: "\f5db";
  font-family: "remixicon";
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 300;
}

.link.white:after {
  color: #fff;
}


@media (max-width: 820px) {
  .ytx-grid {
    --ytx-col: 1;
  }
  .pc {
    display: none;
  }
  .sp{
    display: block;
  }

  .arconest-page {
    background: linear-gradient(to bottom, var(--arconest-bg-top) 0 120px, var(--arconest-bg-bottom) 120px 100%);
  }
  .ytx-card,
  .ytx-card:nth-of-type(2n) {
    margin: 0 0 42px 0;
  }
  .ig-grid{ --ig-min: 130px; --ig-gap: 12px; }

  .about .wp-block-columns .wp-block-spacer {
  display: none;
}
  .about .link {
    margin-bottom: 40px;
  }

}