@charset "UTF-8";

:root {
    --hover_anime: all .4s ease-out;
}


body {
    position: relative;
    font-family: YakuHanJP, "Gen Interface JP", sans-serif;
    color: #333;
    background: url(../img/bg-seamless.webp) repeat 0 0;
    min-height: 100vh;
    margin: 0;
    letter-spacing: .02em;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6,
b, strong {
    font-feature-settings: "palt";
}



@media ( max-width: 1023px ) {
    body::before,
    body::after {
        height: 80px;
        background-size: 80px auto;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-feature-settings: "palt";
    font-weight: bold;
}

strong {
    font-weight: bold;
}


.mincho {
    font-family: var(--mincho);
}

.l-header {
    background: transparent;
}



/* 画面幅 767px 以下のスマホ表示時 */
@media screen and (max-width: 767px) {
  /* ギャラリーコンテナのFlex折り返しを確実に許可 */
  .wp-block-gallery.is-layout-flex,
  .wp-block-gallery {
    flex-wrap: wrap !important;
  }

  /* ギャラリー内の各画像アイテムを1列（幅100%）に指定 */
  .wp-block-gallery .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* 画像自体も親要素に合わせて横幅いっぱいに拡大 */
  .wp-block-gallery .wp-block-image img {
    width: 100% !important;
    height: auto !important;
  }
}


h2.belt {
    padding: 0.5em;
    background: #f2eae0;
    border-left: solid 5px #ffaf58;
    mix-blend-mode: multiply;
}







/** 参加フォーム認証 */
.mg-form-gate { 
    margin: 2em 0;
    text-align: center;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 2em 0;
}

.mg-form-label {
    margin-bottom: 1em;

}

.mg-form-btn {

}

.mg-form-gate__check {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 1.25rem;
}

.mg-form-gate__check input[type="checkbox"] {
	background: #fff;
	border: solid 1px #aaa;
	height: 30px;
	margin-right: 10px;
	outline: none;
	position: relative;
	vertical-align: -8px;
	-webkit-appearance: none;
	width: 30px;
	border-radius: 4px;
    cursor: pointer;
}

.mg-form-gate__check input[type="checkbox"]:checked {
	background-color: var(--accent-color);
	border: 1px solid #fff;
	outline: none;
}

.mg-form-gate__check input[type="checkbox"]:checked:before {
	background: #ffffff;
	content: "";
	display: block;
	height: 3px;
	position: absolute;
	left: 4px;
	top: 18px;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: right center;
	width: 10px;
}

.mg-form-gate__check input[type="checkbox"]:checked::after {
	display: block;
	position: absolute;
	left: 13px;
	top: 18px;
	content: "";
	width: 16px;
	height: 3px;
	background: #ffffff;
	-webkit-transform: rotate(-53deg);
	-webkit-transform-origin: left center;
}

.mg-form-gate__button {
    display: inline-block;
    padding: .8em 2.5em;
    font-size: 1.5em;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: #cccccc;
    color: #fff;
    transition: var(--hover_anime);
    
}

.mg-form-gate__button:not(:disabled) {
    background: var(--accent-color);
    cursor: pointer;
}


@media (hover: hover) {
    .mg-form-gate__button:hover {
      filter: brightness(90%);
    }
}


.mg-form-gate__button:disabled {
    cursor: not-allowed;
}

/* .wp-block-flexible-table-block-table table th,
.wp-block-flexible-table-block-table table td {
    mix-blend-mode: multiply;
} */



@media ( min-width: 1024px ) {
    .wp-block-snow-monkey-blocks-buttons.sbs.is-horizontal > .smb-btn-wrapper--full {
        flex: 1 1 31%;
    }
}

@media ( max-width: 1023px ) {
    .l-header__content {
        padding-top: calc( 0.75 * var(--_padding-1));
    }

    .l-simple-header__row .c-row>.c-row__col {
        padding-left: 0 !important;
    }

    .c-site-branding__title .custom-logo {
        width: 128px;
    }

    .u-slim-width {
        margin-right: 5vw;
        margin-left: 5vw;
    }

    .wp-block-snow-monkey-blocks-buttons.sbs.is-horizontal > .smb-btn-wrapper--full {
        flex: 1 1 100%;
    }
}



.c-copyright--inverse {
    background-color: transparent;
    color:  inherit;
}

/* アニメーション対象の行のベース設定 */
.gsap-line-item {
  display: inline-block;
  will-change: opacity, transform;
}



/* アニメーション前の要素のちらつきを防止（初期状態で透過・変形） */
.js-fade-in,
.js-fade-up,
.js-fade-left,
.js-fade-right,
.js-stagger-group > * {
  opacity: 0;
  visibility: hidden;
}

/* 画像ワイプ用（Snow Monkeyの画像ブロックやコンテナに適用） */
.js-wipe-image {
  overflow: hidden;
  clip-path: inset(0 100% 0 0); /* 最初は右側を隠す */
  will-change: clip-path;
}

.js-wipe-image img {
  transform: scale(1.15); /* パララックス風の軽いズーム感 */
  will-change: transform;
}



:where(.p-entry-content)>h2 {
	--_margin-top: calc(2 * var(--_h2-margin-top));
	--_margin-bottom: calc( 2* var(--_h2-margin-bottom));
}

@media ( max-width: 600px ) {
	.mg-form-gate__button {
		width: 100%;
		padding: 1em .5em;
	}
}

#autozip {
	display: none !important;
}

img.inline_icon {
    height: 1rem;
    width: auto;
    margin-right: 4px;
    vertical-align: baseline;
}


/*
 * ページ切り替えのフェード（サイト内の別ページへ移動したとき）
 * ブラウザの View Transitions（ページをまたぐ遷移）を使う。リンク側の JS は不要で、移動を待たせないので表示速度にも影響しない
 * 前のページがすっと消え、次のページがふわっと現れる
 * 対応：Chrome / Edge 126 以降、Safari 18.2 以降。未対応のブラウザ（Firefox など）は、これまでどおりそのまま切り替わる
 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: mg-page-out .3s ease-out both;
}

::view-transition-new(root) {
    animation: mg-page-in .6s ease-out both;
}

@keyframes mg-page-out {
    to { opacity: 0; }
}

@keyframes mg-page-in {
    from { opacity: 0; }
}

/* 視差効果を減らす設定では、フェードしない */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none;
    }
}


/* =========================================================
 * .l-container の背景：ロゴの繰り返し模様を反時計回りに 30° 傾けて敷く
 * ・overflow は hidden ではなく clip（hidden だと中の position: sticky が効かなくなる）
 * ・isolation で、模様（z-index: -1）が .l-container の中だけで一番下になるようにする
 * ・模様の層は「高さ＋画面幅」の正方形にして中央で回転。縦長のページでも四隅が欠けない
 * ========================================================= */
.l-container {
    position: relative;
    overflow: clip;
    isolation: isolate;
}

.l-container::before {
    content: "";
    /* position: absolute; */
    top: 50%;
    left: 50%;
    /* height: calc(100% + 100vw); */
    /* aspect-ratio: 1 / 1; */
    background-image: url(../img/bg-logo.webp);  /* 水平なシームレス画像 */
    background-repeat: repeat;
    background-position: center;
    background-size: 200px auto;
    transform: translate(-50%, -50%) rotate(-30deg);  /* 左に 30° 傾ける */
    pointer-events: none;
    z-index: -1;
    opacity: 0.1;
    mix-blend-mode: multiply;

    position: fixed;          /* absolute → fixed */
    top: 50%;
    left: 50%;
    width: 150vmax;           /* 画面の長い辺の 1.5 倍の正方形（30° 傾けても四隅が欠けない） */
    height: 150vmax;
    /* aspect-ratio と height: calc(100% + 100vw) は不要になる */
    transform: translate(-50%, -50%) rotate(-30deg);
}


.l-footer {
    color: #fff;
    background: var(--accent-color);
}

/* フッターのウィジェット内のリンク（メールアドレスなど）：ナビゲーションと同じ白文字、hover で下線 */
.l-footer .widget_block a {
    color: inherit;
    text-decoration: none;
}

@media (any-hover: hover) {
    .l-footer .widget_block a:hover {
        text-decoration: underline;
    }
}


.c-meta__item.c-meta__item--author,
.c-meta__item.c-meta__item--published svg,
.l-footer .c-sub-nav {
    display: none; 
}

.l-contents__inner:has(.alignfull):last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =========================================================
 * ヘッダーのロゴの隣のページタイトル（functions/header-title.php）
 * PC：本文上のタイトルを隠してロゴの隣に表示／スマホ：本文上のタイトルのまま
 * ========================================================= */
.mg-header-title__text {
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.4;
    font-feature-settings: "palt";
}



@media (min-width: 768px) {
    /* 本文上のタイトルを隠すのは固定ページだけ（投稿は記事名などをそのまま出す） */
    body.blog .c-entry__header,
    .mg-has-header-title.page .c-entry__header {
        display: none;
    }

    .mg-header-title__text {
       font-size: 2rem;
    }

    .mg-has-header-title .c-row__col:has(> .c-site-branding) {
        flex: 0 0 auto;
    }

    /*
     * 固定ページで、本文の最初のブロックが全幅のセクション（SMB）のときは、ヘッダーとの隙間をなくす
     * （本文上のタイトルを隠している PC だけ。スマホはタイトルが先頭に来るので隙間はそのまま）
     */
    .mg-has-header-title.page .l-contents__inner:has(.c-entry__content > .smb-section.alignfull:first-child) {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .mg-header-title {
        display: none;
    }
}

/* =========================================================
 * フッターのウィジェット（3列）
 * PC：1番目（ロゴ・連絡先）40〜45%／2番目 文字が折り返さない幅／3番目 12文字分
 * スマホ・タブレット：縦並びにして、1番目を一番下へ
 * ========================================================= */
.l-footer .l-footer-widget-area .c-row {
    display: flex;
    gap: 1.5em;
}

@media (min-width: 1024px) {
    .l-footer .l-footer-widget-area .c-row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item {
        max-width: none;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(1) {
        flex: 0 1 42vw;  /* 画面幅の 42%（40〜45% の中間） */
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(2) {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(3) {
        flex: 0 0 12em;
    }
}

/* タブレット・スマホ：1番目を一番下へ */
@media (max-width: 1023px) {
    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(1) {
        order: 1;
    }
}

/* タブレット：2番目と3番目だけ横並び、1番目はその下に全幅 */
@media (min-width: 768px) and (max-width: 1023px) {
    .l-footer .l-footer-widget-area .c-row {
        flex-wrap: wrap;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item {
        max-width: none;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(1) {
        flex: 0 0 100%;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(2) {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .l-footer .l-footer-widget-area .l-footer-widget-area__item:nth-child(3) {
        flex: 0 0 12em;
    }
}

/* スマホ：縦並び */
@media (max-width: 767px) {
    .l-footer .l-footer-widget-area .c-row {
        flex-direction: column;
    }
    :root {
        --_global--font-family: var(--font-family);
        --_global--font-size-px: 13px;
	}
}


.smb-faq__item__answer__label, .smb-faq__item__question__label {
    font-weight: 600;
}

.smb-faq__item__question {
    margin: 0 0 1em;
}
.smb-faq__item {
    padding: 24px 0 calc(var(--_padding1) * .5)  0;
}
/* =========================================================
 * 投稿（single）の白い背景
 * サイトポリシー（固定ページで置いた SMB ボックス）と同じ見た目を、記事全体（タイトル〜本文）と、その下のサイドバーに付ける
 * 白 80%・薄いグレーの線・角丸 16px・内側の余白は spacing--60
 * 幅はスリム幅（記事の中身の幅 --wp--custom--content-width）＋左右の余白。それより狭い画面では全幅
 * ========================================================= */
.single-post :is(.c-entry, .l-contents__sidebar) {
    --mg-entry-pad: var(--wp--preset--spacing--40);

    box-sizing: border-box;
    max-width: calc(var(--wp--custom--content-width) + var(--mg-entry-pad) * 2 + 2px);  /* 2px は左右の線 */
    margin-right: auto;
    margin-left: auto;
    padding: 24px var(--mg-entry-pad);
    border-radius: 16px;
    background: rgba(255, 255, 255, .6);
}

/* サイドバー：右横に並ぶと幅が狭い（220px ほど）ため、内側の余白を小さくし、幅の上限もなくす */
.single-post .l-contents__sidebar {
    --mg-entry-pad: 24px;
    max-width: none;
    height: auto;
    margin-bottom: auto;
}

/*
 * サイドバーの「最新の投稿」：タイトルのリンクを li 全体に広げる（日付の部分を押しても記事へ移動）
 * PC（マウス操作）では、マウスを乗せると li に薄いグレーの背景がふわっと出る
 */
.l-contents__sidebar .wp-block-latest-posts li {
    --mg-sidebar-hover-bg: #f2f2f2;          /* マウスを乗せたときの背景色 */
    --mg-sidebar-hover-duration: .3s;        /* 背景が出るまでの時間 */
    --mg-sidebar-item-pad: 8px 12px;         /* 背景の内側の余白 */

    position: relative;
    margin-right: -12px;                     /* 余白を付けても文字の位置がずれないよう、左右に広げる */
    margin-left: -12px;
    padding: var(--mg-sidebar-item-pad);
    border-radius: 8px;
    transition: background-color var(--mg-sidebar-hover-duration) ease;
}

/* リンクの押せる範囲を li 全体に広げる */
.l-contents__sidebar .wp-block-latest-posts li > a::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (hover: hover) and (pointer: fine) {
    .l-contents__sidebar .wp-block-latest-posts li:hover {
        background-color: var(--mg-sidebar-hover-bg);
    }
}