@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    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
*/


/* =========================================================
   クリップ（カテゴリ）の色分け
   色を変えるときは :root の --clip-番号 だけ直す。番号はカテゴリID
   ========================================================= */
:root {
	--clip-1: #5F6670; /* その他 */
	--clip-2: #6A4C9C; /* パワースポット */
	--clip-3: #B83A2E; /* 神社 */
	--clip-4: #B15A12; /* グルメ */
	--clip-5: #8A6500; /* ラーメン */
	--clip-6: #1F6FB2; /* 子と遊びスポット */
	--clip-7: #7A5230; /* 農家インタビュー（メインカラーの緑と見分けるため、2026-10-21に緑 #3B7A2A から土色に変更） */
}
[data-cat-id="1"] { --clip: var(--clip-1); }
[data-cat-id="2"] { --clip: var(--clip-2); }
[data-cat-id="3"] { --clip: var(--clip-3); }
[data-cat-id="4"] { --clip: var(--clip-4); }
[data-cat-id="5"] { --clip: var(--clip-5); }
[data-cat-id="6"] { --clip: var(--clip-6); }
[data-cat-id="7"] { --clip: var(--clip-7); }

/* 記事一覧のサムネイル上のラベル */
.c-postThumb__cat[data-cat-id] {
	background-color: var(--clip, var(--color_main));
	color: #fff;
}

/* 記事一覧のテキスト横のラベル */
.p-postList__cat[data-cat-id] {
	color: var(--clip, inherit);
}

/* 記事ページのカテゴリリンク */
.c-categoryList__link[data-cat-id] {
	background-color: var(--clip, var(--color_main));
	border-color: var(--clip, var(--color_main));
	color: #fff;
}

/* フォルダのアイコンをクリップ📎に置き換える */
.c-postThumb__cat[data-cat-id]::before,
.p-postList__cat[data-cat-id]::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .25em;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11.1l-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   トップページ上部（ウィジェット「トップページ上部」の中身）
   ========================================================= */
.hc-hero {
	padding: 2.5em 1.5em;
	text-align: center;
	background-color: #F4F1EA;
	border-radius: 8px;
}
.hc-hero__en {
	margin: 0 0 .5em;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--color_main);
}
.hc-hero__title {
	margin: 0;
	font-size: 1.6em;
	line-height: 1.5;
	color: #333;
}
.hc-hero__towns {
	margin: 1em 0 0;
	font-size: .85em;
	color: #555;
}

.hc-nav {
	margin-top: 2.5em;
}
.hc-nav__title {
	margin: 0 0 1em;
	padding-left: .6em;
	font-size: 1.1em;
	border-left: 4px solid var(--color_main);
}
.hc-clips,
.hc-areas {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* クリップのボタン：カテゴリ色で塗る */
.hc-clips a {
	display: block;
	padding: .6em 1.1em;
	font-size: .9em;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background-color: var(--clip, var(--color_main));
	border-radius: 999px;
	transition: opacity .2s;
}
.hc-clips a::before {
	content: "📎";
	margin-right: .3em;
}

/* エリアのボタン：線だけ */
.hc-areas a {
	display: block;
	padding: .5em 1em;
	font-size: .9em;
	color: var(--hc-main-deep);
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	transition: opacity .2s;
}
.hc-clips a:hover,
.hc-areas a:hover {
	opacity: .8;
}

@media (min-width: 600px) {
	.hc-hero__title {
		font-size: 2em;
	}
}

/* トップの記事一覧タブ：PCではタブの数に関係なく1列に等分して並べる */
@media (min-width: 960px) {
	.p-postListTab .c-tabList__item {
		flex: 1 1 0;
	}
}

/* 市町村名の途中で改行させない */
.hc-hero__towns span {
	display: inline-block;
}

/* =========================================================
   メインビジュアル（キャッチコピー）
   ========================================================= */
.p-mainVisual__slideTitle {
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}
.p-mainVisual__slideTitle::before {
	content: "HIKI CLIP";
	display: block;
	margin-bottom: .6em;
	font-size: .35em;
	letter-spacing: .25em;
	color: var(--hc-main-deep);
}
.p-mainVisual__slideText {
	color: #555;
}

/* トップ上部の最初の見出しは上の余白をとらない */
.hc-nav:first-child {
	margin-top: 0;
}

/* 背景を暗くする黒い膜を消す（設定の0が効かないため） */
.p-mainVisual .c-filterLayer::before {
	opacity: 0;
}
.p-mainVisual__slideTitle {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.p-mainVisual__slideText {
	font-size: clamp(.8rem, 1.6vw, 1rem);
}
.p-mainVisual__slideText .hc-town {
	display: inline-block;
}

/* =========================================================
   トップの記事一覧タブ（吹き出し）をクリップの色にする
   タブの並びはSWELL設定「タームタブ」（top_tab_terms = 2,4,6,7）の順。
   設定を変えたら、ここの番号と色の対応も直す
   ========================================================= */
.p-postListTab [aria-controls="post_list_tab_1"] { --clip: var(--hc-main-deep); } /* 新着 */
.p-postListTab [aria-controls="post_list_tab_2"] { --clip: var(--clip-2); }      /* パワースポット */
.p-postListTab [aria-controls="post_list_tab_3"] { --clip: var(--clip-4); }      /* グルメ */
.p-postListTab [aria-controls="post_list_tab_4"] { --clip: var(--clip-6); }      /* 子と遊びスポット */
.p-postListTab [aria-controls="post_list_tab_5"] { --clip: var(--clip-7); }      /* 農家インタビュー */

/* 選ばれていないタブ：うすい色の背景に、クリップの色の文字 */
.p-postListTab.is-style-balloon > .c-tabList .c-tabList__button {
	font-weight: 700;
	color: color-mix(in srgb, var(--clip) 82%, #000); /* うすい背景の上でも読めるよう、文字は少し濃く */
	background-color: color-mix(in srgb, var(--clip) 9%, #fff);
}
/* 選んでいるタブ・マウスを乗せたタブ：クリップの色で塗る */
.p-postListTab.is-style-balloon > .c-tabList .c-tabList__button:hover,
.p-postListTab.is-style-balloon > .c-tabList .c-tabList__button[aria-selected="true"] {
	color: #fff;
	background-color: var(--clip);
}
/* 吹き出しの三角もクリップの色にする */
.p-postListTab.is-style-balloon > .c-tabList .c-tabList__button::before {
	border-top-color: var(--clip);
}

/* 「クリップから探す」の見出しとタブの間を詰める */
.home .w-frontTop {
	margin-bottom: 0;
}
.home .p-homeContent.u-mt-40 {
	margin-top: 1em !important;
}

/* =========================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================= */
.wpcf7-form label {
	display: block;
	margin-bottom: 1.2em;
	font-weight: 700;
}
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: .4em;
	font-weight: 400;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin-left: 0;
}
.wpcf7-form .wpcf7-submit {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 1.5em auto 0;
	padding: .9em 1em;
	font-weight: 700;
	color: #fff;
	background-color: var(--hc-main-deep);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity .2s;
}
.wpcf7-form .wpcf7-submit:hover {
	opacity: .8;
}
.wpcf7-form .wpcf7-submit:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* 記事の表：行の見出し（左の列）は途中で折り返さない */
.post_content .wp-block-table tbody th {
	white-space: nowrap;
}

/* キャッチコピーの「比」「企」それぞれの真上に小さくふりがなを付ける
   （SWELLの見出し欄では<ruby>が使えないため、spanを重ねて表示） */
.p-mainVisual__slideTitle .hc-ruby {
	position: relative;
	display: inline-block;
	line-height: 1; /* 箱を文字の高さに合わせて、ふりがなを文字の真上に置く */
}
.p-mainVisual__slideTitle .hc-ruby__rt {
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	margin-bottom: .1em;
	font-size: .32em;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
}
/* スマホは2行になるので、ふりがなの入る分だけ行の間を広げる */
@media (max-width: 599px) {
	.p-mainVisual__slideTitle {
		line-height: 1.8;
	}
}

/* =========================================================
   メインカラー（常磐色 #007B43）まわりの色
   #007B43 は白文字とのコントラスト比5.37で、白・ベージュの背景の上の文字としても4.5以上ある。
   そのため小さい文字の場所もメインカラーのまま使える。
   --hc-main-deep は、メインカラーを変えたときに小さい文字だけ濃くするための予備
   ========================================================= */
:root {
	--hc-main-deep: var(--color_main);
}
/* カテゴリ色のないラベル・リンクの予備の色 */
.c-postThumb__cat:not([data-cat-id]),
.c-categoryList__link:not([data-cat-id]) {
	background-color: var(--hc-main-deep);
}
/* メインビジュアルの「HIKI CLIP」は、背景の市町村の形（うすい緑）の上にのるので、メインカラーより濃い緑にする */
.p-mainVisual__slideTitle::before {
	color: #005A2F;
}

/* フッターの出典表記（コピーライトの下に小さく） */
.hc-credit {
	margin-top: .5em;
	font-size: 10px;
	line-height: 1.6;
	text-align: center;
	opacity: .85;
}
.hc-credit a {
	color: inherit;
}