/*
Theme Name: 博多・長浜らーめん一途
Template: lightning
*/


/*リセット
/************************************************************/
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}
/* ルートはスクロールさせない */
html,
body {
    height: 100%;
}
body.home {
    overflow: hidden;	
}
h1,h2,h3,h4,h5,h6 {
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	font-size: 100%;
}
ol,ul,li,dl {
	list-style-position: inside;
}
ol,ul,li,dl {
	list-style: none;
}
button,input,select,textarea {
	margin: 0;
}
html {
	box-sizing:border-box;
	line-height: 1;
	font-family: "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	font-size: 62.5%;
	font-size: 100%;
}
*,*:before,*:after {
	box-sizing: inherit;
}
img,embed,iframe,object,audio,video {
	max-width: 100%;
}
iframe {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td,th {
	padding: 0;
	text-align: left;
}
hr {
	height: 0;
	border: 0;
}
.site-header-logo img {
    max-height: 100px !important;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.contact_box {
	position: absolute;
	top: 0;
	right: 0;
	font-family: "Noto Sans JP", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	font-size: 16px;
	font-size: clamp(13px, 4.000px + 1.172vw, 16px);
	line-height: 1.6;
	writing-mode: vertical-rl;
	/*border: thin solid #ccc;*/
	padding: 20px 30px;
}
.ltg-slide picture img {
	height: calc(100vh - 124px);
}
h3.ltg-slide-text-title {
	font-size: 48px;
	font-size: clamp(32px, -16.000px + 6.25vw, 48px);
	padding: 0 1em;
}

section.frontsec {
	margin: auto;
}
#frontsec-first {
	display: flex;
	gap: 30px;
}
#frontsec-first .frontsec__video {
	/*max-width: 60vw;*/
}
#frontsec-first .first-cont__text {
	font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
	font-size: clamp(20px, -10.000px + 3.906vw, 30px);
    letter-spacing: 3px;
    line-height: 1.6;
	writing-mode: vertical-rl;
	margin-right: 30px;
}
#frontsec-second .first-cont__text,
#frontsec-third .first-cont__text {
	font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
	text-align: center;
    font-size: 24px;
	font-size: clamp(20px, 8.000px + 1.563vw, 24px);
    letter-spacing: 3px;
    line-height: 1.6;
	margin-bottom: 1em;
}
#frontsec-second img,
#frontsec-third img {
	max-height: 60vh;
    width: auto;
}
.first-cont__text iframe {
	width: 100vw;
	max-height: 70vh;
}
#frontsec-third-2 .first-cont__text,
#frontsec-fourth .first-cont__text {
	font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
	text-align: center;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.4;
	margin-bottom: 1em;
}
/* ===== 縦スワイプ（CSS Scroll Snap）===== */
.snap-viewport{
    height: 100svh;                 /* モバイルの動的バー対策 */
    overflow-y: auto;
    scroll-snap-type: y mandatory;  /* 必須：縦方向でスナップ */
    scroll-behavior: smooth;        /* 慣性 */
    -webkit-overflow-scrolling: touch;
}

.snap-container{
    position: relative;
}

/* 各セクションを1画面に */
.frontsec{
    min-height: 100svh;             /* 1セクション = 1画面 */
    scroll-snap-align: start;       /* セクション頭で止める */
    scroll-snap-stop: always;       /* 早スクロールでも必ず止まる */
    display: grid;                  /* 中身を中央に置きやすい */
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
}

/* 動画/画像を全面に見せる場合 */
.frontsec__media,
.frontsec__video,
.frontsec__image{
    width: 100%;
    height: 100%;
}

.frontsec__video,
.frontsec__image{
    object-fit: cover;              /* 余白なくフィル */
    display: block;
}


/* 固定ヘッダーがある場合の上詰まり防止（必要なら微調整） */
body.admin-bar .snap-viewport{
    height: calc(100svh - 32px);    /* WP管理バー表示時の差分 */
}
/* ヘッダーを最前面に（Lightningのクラス名は実サイトに合わせて） */
.site-header, .vk-header, header[role="banner"]{
  position: relative;
  z-index: 1000;
}

/* 画面上のヘッダー高さを変数に（必要に応じて調整） */
:root{
  --head-h: 124px; /* ヘッダー実高さに合わせる */
}

/* スナップ：ヘッダー分を差し引き、下から開始 */
.snap-viewport{
  height: calc(100svh - var(--head-h));
  /*margin-top: var(--head-h);*/
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 0; /* ヘッダーより下 */
}
.snap-container{}

/* 各セクションの基本 */
.frontsec{
  min-height: calc(100svh - var(--head-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 24px 24px 50px;
  box-sizing: border-box;
  display: block; /* ← gridはデフォルトで使わない */
}

/* 中央寄せにしたいセクションだけ grid を使う */
.frontsec--center{
  display: grid;
  place-items: center;
}

/* スライダー専用：gridを使わず全面表示にする */
.frontsec--slider{
  padding: 0;
  display: block;
}

/* Lightningのスライダーコンテナを画面いっぱいに */
.frontsec--slider .vk-slider,
.frontsec--slider .ltg-slider,
.frontsec--slider .swiper,
.frontsec--slider > *{
  width: 100%;
  height: calc(100svh - var(--head-h));
}

/* スライド画像/動画のフィット */
.frontsec--slider img,
.frontsec--slider video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 念のため：スライド内 picture > img の高さを固定に */
.ltg-slide picture img{
  height: calc(100svh - var(--head-h)) !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* テーマ側の“ヘッダー下余白”を無効化 */
.site-header,
.site-header-container{ margin-bottom: 0 !important; }
.site-body{ padding-top: 0 !important; }

.header-layout--nav-float .site-body{ padding-top: 0 !important; }

.vk-mobile-nav-menu-btn {
	display: none !important;
}

/* 矢印ボタンのベース */
.sec-arrow{
    position: absolute;
    left: 50%;
    bottom: 18px;
	bottom: 38px;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    border: 0;
    background: rgba(0,0,0,.45);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: filter .2s ease, transform .2s ease;
    z-index: 99999999;
}

/* ホバー・フォーカス */
.sec-arrow:hover{ filter: brightness(1.1); transform: translateX(-50%) translateY(-2px); }
.sec-arrow:focus-visible{ outline: 3px solid #9bd0ff; outline-offset: 3px; }

/* アイコン（下矢印） */
.sec-arrow__icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: arrowBounce 1.4s ease-in-out infinite;
}

/* バウンドのアニメ */
@keyframes arrowBounce{
    0%, 100% { transform: translateY(0) rotate(45deg); opacity: .9; }
    50%      { transform: translateY(6px) rotate(45deg); opacity: 1; }
}

/* セクションに相対配置を与える（必要なら） */
.frontsec{ position: relative; }

/* スマホ少し大きめにタップしやすく */
@media (max-width: 640px){
	#frontsec-first {
		display: block;
	}
	#frontsec-first .first-cont__text {
		writing-mode: horizontal-tb;
    	text-align: center;
		margin-top: 50px;
		margin-right: 0;
	}
    .sec-arrow {
        bottom: 14px;
    }
    .sec-arrow__icon {
        width: 16px;
        height: 16px;
        border-width: 2.5px;
    }
	#frontsec-fourth .first-cont__text iframe {
		max-height: 40vh;
	}
	#frontsec-second .first-cont__text,
	#frontsec-third .first-cont__tex,
	#frontsec-third-2 .first-cont__tex,,
	#frontsec-fourth .first-cont__text {
		font-size: clamp(16px, 12.173px + 1.02vw, 20px);
	}
}

@media screen and (max-width: 450px) {
	.site-header-logo img {
		margin-left: 0 !important;
		max-height: clamp(50px, -20.755px + 18.868vw, 100px) !important;
	}
	.contact_box {
		padding: 10px 30px;
		writing-mode: horizontal-tb;
	}	
}

/* 最終セクション用：上向き矢印＆上方向バウンド */
.sec-arrow--top{
    background: rgba(0,0,0,.55);
}
.sec-arrow--top .sec-arrow__icon{
    transform: rotate(-135deg); /* 上向きに */
    animation: arrowBounceUp 1.4s ease-in-out infinite;
}
@keyframes arrowBounceUp{
    0%, 100% { transform: translateY(0) rotate(-135deg); opacity: .9; }
    50%      { transform: translateY(-6px) rotate(-135deg); opacity: 1; }
}

/* ボタンが他要素に隠れないように */
.sec-arrow{
    z-index: 999999;
    pointer-events: auto;
}
/* スナップ用ビューポートはヘッダーぶんを差し引いた高さで内部スクロール */
.snap-viewport {
    position: relative;
    height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;   /* スクロール連鎖を遮断 */
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
}

/* 各セクションは画面ちょうどに合わせる */
.frontsec {
    min-height: calc(100svh - var(--header-h));
    scroll-snap-align: start;
}

/* WP管理バーが出るときの補正（ログイン時） */
@media (min-width: 783px) {
    body.admin-bar .snap-viewport {
        height: calc(100svh - var(--header-h) - 32px);
    }
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	display: none;
}
/* 固定化されている可能性のある全パターンを一括で無効化 */
#site-footer,
.site-footer,
footer.site-footer {
    position: static !important;
    bottom: auto !important;
    inset: auto !important;   /* Safari 対策 */
    width: auto !important;
	border: none;
}

/* もし固定フッター用に付けていた下余白を消す */
.has-fixed-footer {
    padding-bottom: 0 !important;
}

/* スクロールスナップの停止位置を戻す（設定していた場合） */
.snap-viewport {
    scroll-padding-bottom: 0;
}

/* 固定フッター用に付けていた余白クラスがあれば削除 */
.has-fixed-footer { padding-bottom: 0 !important; }

.page.page-id-9 .entry-body {
	margin-top: 80px;
}
/* フォーム全体のスタイル */
.wpcf7 {
	font-family: "Noto Sans JP", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	background-color: #f0f0f0; /* ライトグレー */
	padding: 20px;
	border-radius: 10px;
	max-width: 600px;
	margin: auto;
}
/* ラベルのスタイル */
.wpcf7-form label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	color: #333333; /* ダークグレー */
}
/* 必須フィールドのラベルスタイル */
.wpcf7-form .required {
	background-color: #ff0000; /* レッド */
	color: white;
	padding: 2px 5px;
	border-radius: 3px;
	margin-left: 10px;
	font-size: 12px;
}
/* インプットフィールドのスタイル */
.wpcf7-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #cccccc; /* ライトグレー */
	border-radius: 5px;
	margin-bottom: 20px;
	font-size: 16px;
	background-color: #ffffff; /* 白 */
}
/* テキストエリアのスタイル */
.wpcf7-form textarea {
	height: 150px;
	resize: vertical;
}
/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
	background-color: #007BFF; /* ブルー */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease;
	border: none;
}
.wpcf7-form input[type="submit"]:hover {
	background-color: #0056b3; /* 濃いブルー */
}
/* エラーメッセージと成功メッセージのスタイル */
.wpcf7-form .wpcf7-not-valid-tip {
	color: red;
	font-size: 14px;
}
.wpcf7-form .wpcf7-mail-sent-ok {
	color: green;
	font-size: 16px;
	margin-bottom: 20px;
}
/* ---------- ベース ---------- */
.wpcf7 form .cform-row {
    margin: 0 0 18px;
}
.wpcf7 form label {
    display: block;
    font-weight: 600;
    margin: 0 0 6px;
}
.wpcf7 form input[type="text"],
.wpcf7 form input[type="email"],
.wpcf7 form input[type="tel"],
.wpcf7 form textarea {
    width: 100%;
    height: 52px;
    padding: 12px 14px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background: #fff;
    font-size: 16px;
    line-height: 1.5;
}
.wpcf7 form textarea {
    min-height: 220px;
    height: auto;
    resize: vertical;
}
.cform-required {
    display: inline-block;
    margin-left: .5em;
    padding: 2px 8px;
    border-radius: 999px;
    background: #cd4040;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

/* ---------- fieldset / legend ---------- */
.cform-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 18px;
}
.cform-legend {
    display: block;
    font-weight: 700;
    margin: 0 0 8px;
}

/* ---------- ラジオ (use_label_element) の体裁を整える ---------- */
/* CF7 は <span class="wpcf7-list-item"><label><input> <span class="wpcf7-list-item-label">… */
.cform-radio .wpcf7-list-item {
    display: inline-block;
    margin: 0 10px 10px 0;
}
.cform-radio .wpcf7-list-item > label {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.cform-radio .wpcf7-list-item input[type="radio"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.cform-radio .wpcf7-list-item-label {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #d6d6d6;
    border-radius: 9999px;
    background: #fff;
    color: #333;
    font-size: 15px;
    line-height: 1;
    transition: .15s ease;
    cursor: pointer;
}
.cform-radio .wpcf7-list-item input[type="radio"]:focus + .wpcf7-list-item-label {
    outline: 3px solid rgba(155,208,255,.5);
    outline-offset: 2px;
}
.cform-radio .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label {
    border-color: #0b6e3d;
    background: #0b6e3d;
    color: #fff;
}

/* ---------- 送信ボタン（既存の丸ボタンに合わせるなら） ---------- */
.cform-submit {
    display: inline-block;
    width: 100%;
    padding: 14px 42px;
    border: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, #d62b23, #ff6a3a);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .04em;
    line-height: 1.1;
    box-shadow: 0 14px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.10);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cform-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(0,0,0,.20), 0 4px 10px rgba(0,0,0,.12);
}
.cform-submit:active { transform: translateY(0); filter: brightness(.98); }

.cform-fieldset legend {
	margin-bottom: 30px;
}