@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（南三陸町觀光協會 台湾サイト）
    Version: 1.1.1
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================================
   南三陸町觀光協會 台湾サイト（www.m-kankou.jp/tw/）

   Lightning Pro → SWELL の入替。記事は移さず、このテーマだけを本番へ入れる。
   → 本文側に残っている Lightning / ExUnit 由来の記述は、ここで受ける。
   → SWELL設定・カスタマイザーで決められるものは、CSSで書かない（settings/swell-customizer.php）。

   方針（本人指示 2026-10-10 夜）: 本番に寄せない。SWELL らしく整える（英語版ほどは作り込まない）。
   ========================================================================== */

:root {
	--mk-blue: #14559b;
	--mk-navy: #0f3d6e;
	--mk-pale: #f3f7fb;
	--mk-line: #dfe6ee;
}


/* --------------------------------------------------------------------------
   文字
   -------------------------------------------------------------------------- */

/* 現サイト（Lightning）と同じフォントにする（先方指示 2026-10-13「現サイトと同様のフォントに」）。
   本番の計算値をそのまま写した（ヒラギノ角ゴ ProN W3 → 游ゴシック Medium・字間なし）。
   日本語フォントに無い繁体字だけ、後ろの蘋方・微軟正黑體 で補う。
   ⚠️ 以前は繁体字フォントを先に立てていた（Windows で微軟正黑體 になり、現サイトと字形が違って見えた） */
body {
	--swl-font_family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Helvetica Neue", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
	/* SWELL は本文を 500 にしている。現サイトは 400 */
	font-weight: 400;
	letter-spacing: normal;
}

.post_content {
	line-height: 1.9;
}


/* --------------------------------------------------------------------------
   トップページ
   セクションは SWELL のフルワイド（settings/widgets.php）。余白と背景色はブロック側で持ち、
   ここでは並べ方と細部だけを決める
   -------------------------------------------------------------------------- */

/* SWELL は1カラムのとき本文を記事幅（900px）に絞る。トップはコンテナ幅で並べる */
.home #main_content.l-article {
	max-width: none;
}

/* ウィジェット同士の間隔は持たない（セクションの上下余白はフルワイドの PADDING） */
.w-frontTop > .c-widget,
.w-frontBottom > .c-widget {
	margin: 0;
}

/* メインビジュアルの直後から、すぐ最初のセクションを始める */
.home .p-mainVisual + .l-content,
.home .l-content {
	padding-top: 0;
}

/* メインビジュアル（スライダー）: 切り替わりの約1秒、前と次の2枚分の文字が重なって見える（本人指摘 2026-10-21）。
   SWELL のフェードは前のスライドを残したまま次を上に重ねる（Swiper 7・crossFade なし・速さ 1200ms）。
   2・3枚目の写真は遅延読み込みなので、初回は写真が間に合わず灰色の上で文字が丸見えになる。
   → 表示中のスライド以外の文字を消す。:has() で「表示中が決まった後」だけに効かせ、スライダーの初期化前や JS が止まったときは文字を消さない */
.p-mainVisual .swiper-wrapper:has(.swiper-slide-active) .swiper-slide .p-mainVisual__textLayer {
	opacity: 0;
	transition: opacity .3s ease;
}
.p-mainVisual .swiper-wrapper:has(.swiper-slide-active) .swiper-slide-active .p-mainVisual__textLayer {
	opacity: 1;
	transition: opacity .8s ease .6s;
}

/* 英字の小見出し（Contents / Topics…）。見出しの上に小さく置く */
.mk-eyebrow {
	margin: 0 0 6px !important;
	color: var(--mk-blue);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
}

/* セクション見出し。SWELL の「セクション見出し」の装飾は記事本文（.post_content）の中でしか効かず、
   ウィジェットでは素の左寄せになる。中央寄せと下の短い線はここで持つ */
.w-frontTop .is-style-section_ttl,
.w-frontBottom .is-style-section_ttl {
	margin: 0 0 48px;
	padding: 0;
	border: none;
	background: none;
	color: var(--mk-navy);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: .14em;
	text-align: center;
}

.w-frontTop .is-style-section_ttl::after,
.w-frontBottom .is-style-section_ttl::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 18px auto 0;
	background: var(--mk-blue);
}

/* 「更多消息」「南三陸影片集」: 横いっぱいの四角 → 細い線のピル。触れたら塗る */
.w-frontTop .is-style-more_btn {
	margin-top: 40px;
	text-align: center;
}

.w-frontTop .is-style-more_btn .btn_text {
	display: inline-block;
	width: auto;
	min-width: 240px;
	padding: 12px 40px;
	border: 1px solid var(--mk-navy);
	border-radius: 40px;
	background: transparent;
	box-shadow: none;
	color: var(--mk-navy);
	font-size: 14px;
	letter-spacing: .12em;
	transition: background-color .25s, color .25s;
}

.w-frontTop .is-style-more_btn .btn_text:hover {
	background: var(--mk-navy);
	color: #fff;
}

/* トップ下部の見出し（Facebook ／ 台灣相關網站連結）をそろえる: 左に青い縦線 */
.w-frontBottom .c-widget__title,
.w-frontBottom .c-secTitle {
	margin: 0 0 24px;
	padding: 2px 0 2px 14px;
	border: none;
	border-left: 4px solid var(--mk-blue);
	background: none;
	color: var(--mk-navy);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
}

.w-frontBottom .c-secTitle span {
	padding: 0;
	border: none;
	background: none;
}

.w-frontBottom .c-widget__title::before,
.w-frontBottom .c-widget__title::after,
.w-frontBottom .c-secTitle::before,
.w-frontBottom .c-secTitle::after,
.w-frontBottom .c-secTitle span::before,
.w-frontBottom .c-secTitle span::after {
	content: none;
}

@media (max-width: 599px) {
	.w-frontTop .is-style-section_ttl,
	.w-frontBottom .is-style-section_ttl {
		margin-bottom: 32px;
		font-size: 22px;
	}
}

/* 認識南三陸町: 写真｜文。写真は大きく、文は縦の中央に */
.mk-about .swell-block-columns__inner {
	align-items: center;
}

.mk-about .mk-aboutImg img {
	border-radius: 6px;
}

.mk-about .mk-aboutTtl {
	margin: 0 0 20px;
	color: var(--mk-navy);
	font-size: 30px;
	letter-spacing: .12em;
}

@media (min-width: 960px) {
	.mk-about .swell-block-column:last-child {
		padding-left: 24px;
	}
}

/* 熱門項目のバナー: 文字を大きく、下に説明 */
.swell-block-bannerLink .c-bannerLink__title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .12em;
}

.swell-block-bannerLink .c-bannerLink__description {
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .9;
}

.swell-block-bannerLink .c-bannerLink {
	border-radius: 6px;
	overflow: hidden;
}

.mk-bannerNote {
	margin-top: 12px !important;
	color: #555;
	font-size: 13px;
	line-height: 1.8;
}

@media (max-width: 599px) {
	.swell-block-bannerLink .c-bannerLink__title {
		font-size: 17px;
	}
	/* 2列だと「ACCOMMODATIONS」が字間で折り返す。字間を詰めて1行に収める */
	.swell-block-bannerLink .c-bannerLink__description {
		font-size: 10px;
		letter-spacing: .1em;
		white-space: nowrap;
	}
	.mk-bannerNote {
		font-size: 12px;
	}
}

/* 最新消息・多媒體文宣のカード: 角を丸めて、触れたら少し浮かせる */
.p-postList.-type-card .p-postList__link {
	border-radius: 6px;
	transition: transform .25s;
}

.p-postList.-type-card .c-postThumb__figure {
	border-radius: 6px;
}

@media (hover: hover) {
	.p-postList.-type-card .p-postList__link:hover {
		transform: translateY(-3px);
	}
}

/* トップ下部: Facebook ｜ 台灣相關網站連結 の2列。諮詢窗口は全幅 */
.w-frontBottom {
	padding-top: 80px;
}

.w-frontBottom > .c-widget:nth-child(-n+2) {
	margin-bottom: 80px;
}

@media (min-width: 960px) {
	.w-frontBottom {
		display: grid;
		grid-template-columns: 380px 1fr;
		column-gap: 56px;
		align-items: start;
	}
	.w-frontBottom > .c-widget:nth-child(n+3) {
		grid-column: 1 / -1;
	}
	/* リンク集は30件以上あるので2列に流す */
	.w-frontBottom .widget_nav_menu .menu {
		columns: 2;
		column-gap: 32px;
	}
}

.w-frontBottom .widget_nav_menu .menu li {
	break-inside: avoid;
}

.w-frontBottom .widget_nav_menu .menu a {
	font-size: 14px;
	line-height: 1.6;
}

.mk-fbPage iframe {
	display: block;
	width: 100%;
	max-width: 380px;
}

/* 最後のセクション（諮詢窗口）の色地のままフッターにつなげる。SWELL は本文とフッターの間に 96px の白を入れる */
.home .l-content {
	margin-bottom: 0;
}

.mk-contactLead {
	margin-bottom: 32px !important;
	line-height: 2;
}


/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

/* トップのヘッダー透過中（SWELL の設定）は、ナビの文字が写真に負けないよう薄い影 */
.home .l-header.-transparent .c-gnav > li > a,
.home .l-header.-t-fff .c-gnav > li > a {
	text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* 追従ヘッダー: 影をやめて細い線に */
.l-fixHeader {
	border-bottom: 1px solid rgba(15, 61, 110, .08);
	box-shadow: none;
}

/* トップへ戻る: 影付きの丸 → 細い線の丸。触れたら塗る */
#pagetop.c-fixBtn {
	border: 1px solid rgba(15, 61, 110, .25);
	background: rgba(255, 255, 255, .9);
	box-shadow: none;
	color: var(--mk-navy);
	transition: background-color .3s, color .3s;
}

#pagetop.c-fixBtn:hover {
	background: var(--mk-navy);
	color: #fff;
}


/* --------------------------------------------------------------------------
   ExUnit の残り（プラグインの機能を止めるまでの保険。settings/site.php で止めている）
   -------------------------------------------------------------------------- */

#page_top.page_top_btn,
.veu_socialSet,
.veu_followSet {
	display: none !important;
}

/* 子ページ一覧（ExUnit の childPageIndex。周邊介紹 など2ページ）: SWELL のカードに寄せる */
.veu_childPage_list .childPage_list_box_inner,
.veu_childPage_list .card {
	border: none !important;
	border-radius: 6px;
	box-shadow: 0 2px 14px rgba(0, 30, 60, .08);
}


/* --------------------------------------------------------------------------
   FAQ（諮詢窗口ページ）: SWELL のアコーディオンに Q. / A. を付ける
   アコーディオンブロックは独自クラスを付けられないので、グループ（mk-faq）で包んで範囲を限る
   -------------------------------------------------------------------------- */

.mk-faq .swell-block-accordion__label {
	position: relative;
	padding-left: 2em;
}

.mk-faq .swell-block-accordion__label::before {
	content: "Q.";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--mk-blue);
	font-weight: 700;
}

.mk-faq .swell-block-accordion__body {
	position: relative;
	padding-left: calc(16px + 2em);
}

.mk-faq .swell-block-accordion__body::before {
	content: "A.";
	position: absolute;
	top: 1em; /* SWELL は開いた回答の上に 1em の余白を入れる。1行目に揃える */
	left: 16px;
	color: #7d8fa3;
	font-weight: 700;
	line-height: inherit;
}


/* --------------------------------------------------------------------------
   問い合わせフォーム（Contact Form 7。トップ下部と諮詢窗口ページ）
   フォーム本体は Lightning 時代の表組み（Bootstrap の class）なので、縦積みの入力欄に組み替える
   -------------------------------------------------------------------------- */

.wpcf7 {
	max-width: 720px;
	margin: 40px auto 0;
}

.wpcf7 table,
.wpcf7 tbody,
.wpcf7 tr,
.wpcf7 th,
.wpcf7 td {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none !important;
	text-align: left;
}

.wpcf7 tr {
	margin-bottom: 20px;
}

.wpcf7 th p {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
}

.wpcf7 th p span {
	margin-left: 4px;
	color: #c0392b;
}

.wpcf7 td p {
	margin: 0;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mk-line);
	border-radius: 6px;
	background: #f8fafc;
	font-size: 16px;
	transition: border-color .2s, box-shadow .2s, background .2s;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
	border-color: var(--mk-blue);
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(20, 85, 155, .15);
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 8px auto 0;
	padding: 14px 24px;
	border: none;
	border-radius: 40px;
	background: var(--mk-blue);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	cursor: pointer;
	transition: background .2s;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover {
	background: var(--mk-navy);
}

/* 確認画面の「返回」は白抜き */
.wpcf7 input.wpcf7-back {
	border: 1px solid var(--mk-blue);
	background: #fff;
	color: var(--mk-blue);
}


/* --------------------------------------------------------------------------
   サイドバー
   -------------------------------------------------------------------------- */

/* ブロックの一覧（分類・月別アーカイブ）を SWELL のウィジェットの一覧と同じ見た目に */
.l-sidebar .wp-block-categories,
.l-sidebar .wp-block-archives {
	margin: 0;
	padding: 0;
	list-style: none;
}

.l-sidebar .wp-block-categories li,
.l-sidebar .wp-block-archives li {
	border-bottom: 1px solid var(--mk-line);
}

/* 左の余白は SWELL のアイコン（.c-listMenu a::before・左端に absolute）のぶん。詰めると文字の1字目に重なる */
.l-sidebar .wp-block-categories a,
.l-sidebar .wp-block-archives a {
	display: block;
	padding: .7em .5em .7em 1.75em;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
	transition: color .2s;
}

.l-sidebar .wp-block-categories a:hover,
.l-sidebar .wp-block-archives a:hover {
	color: var(--mk-blue);
}

.l-sidebar .wp-block-categories .children {
	padding-left: 1em;
	list-style: none;
}

/* 每月存檔は年数ぶん縦に長いので2列にする */
.l-sidebar .wp-block-archives {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
}

/* 記事下・サイドバーの問い合わせ */
.mk-ctaText {
	margin-bottom: 16px !important;
	font-size: 15px;
}


/* --------------------------------------------------------------------------
   フッター（紺地・白文字・SNS アイコンはカスタマイザー）
   -------------------------------------------------------------------------- */

/* フッターの画像は SWELL が中央寄せにする。住所の文字と左端をそろえる */
.mk-footLogo {
	margin: 0 0 16px;
	text-align: left;
}

.mk-footLogo img {
	width: 280px;
	max-width: 100%;
}

.mk-footAddress {
	font-size: 14px;
	line-height: 1.9;
	opacity: .9;
}

.l-footer .c-listMenu a {
	border-color: rgba(255, 255, 255, .18);
	color: inherit;
}

.l-footer .c-listMenu a:hover {
	background: rgba(255, 255, 255, .08);
}

/* 下部のリンク（網站導覽｜隱私權保護政策）: 区切り線はリンクの間だけ。SWELL は両端にも線を引く */
.l-footer__nav li:first-child a {
	border-left: none;
}

.l-footer__nav li:last-child a {
	border-right: none;
}


/* --------------------------------------------------------------------------
   スマホの画面下の固定メニュー（項目は settings/site.php・色と文言はカスタマイザー）
   -------------------------------------------------------------------------- */

/* 交通指南のピンだけ Font Awesome。FA7 はアイコンの幅を 1.25em に固定するので、SWELL のアイコンと同じく
   項目の幅いっぱいにして中央に置く（固定のままだと左に寄って文字とずれる） */
#fix_bottom_menu i[class*="fa-"] {
	width: auto;
}

/* 問い合わせフォームの reCAPTCHA のバッジ（右下・畳むと幅70px）が、固定メニューの「諮詢窗口」と
   ページトップのボタンに重なって押せなくなる（本番の Lightning でも重なっていた）。両方の上へ逃がす */
@media (max-width: 959px) {
	.grecaptcha-badge {
		bottom: 132px !important;
	}
}