@charset "UTF-8";
:root {
/* ======================================
	Breakpoints（CSS用メモ）
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
 ====================================== */

/* --------------------
　スケールカラー
-------------------- */
/* 明度や濃さの数値目安
--○○-50 	非常に明るい色（ほぼ白に近い） 背景色（最も軽い）、分割線、ホバー背景
--○○-100	明るい色                   セカンダリ背景、非アクティブボーダーなど
--○○-200	少しだけ明度落ちた色         オーバーレイ背景、ホバー効果など
--○○-300	中間明度（やや淡い）         サブ要素、カード背景など
--○○-400	濃さ4割                    ボーダー色、アクティブ背景など
--○○-500	ベースカラー                プライマリーボタン、メインアクセント
--○○-600	やや暗い                   フォーカス、ホバー時の強調など
--○○-700	暗めの色                   アクティブ状態、影響の強い要素
--○○-800	かなり暗い色                タイトルやアイコンなどの強調要素
--○○-900	非常に暗い色（ほぼ黒に近い）   メインテキスト、強強調色など
*/
--white: #fff;
--black: #000;

--brown-50: #f1e9e5;
--brown-50-alpha50: rgba(241, 233, 229, 0.5);
--brown-300: #bcab9c;
--brown-700: #7f7965;

--pink-50: #f9f8f7;
--pink-600: #d87878;

--orange-600: #cb8b46;

--green-200: #bdc5a3;
--green-500: #566431;

--gray-700:#837e7c;
--gray-800: #5b5755; 

/* --------------------
　ロール変数
-------------------- */
--color_base: var(--white);
--color_main: var(--brown-700);
--color_main2: var(--brown-300);
--color_sub: var(--orange-600);
--color_emphasis: var(--pink-600);
--color_background: var(--brown-50);
--color_background_footer: var(--gray-700);
--color_base-text: var(--gray-800);
--color_cta-contents: var(--green-200);

/* --------------------
　サイズ
-------------------- */
--text_base-size: 14px;
--text_note-size: 12px;

--font-size--md: var(--text_base-size); /* 14px */
--font-size--2md: calc(var(--text_base-size) * 1.25); /* 17.5px */
--font-size--lg: calc(var(--text_base-size) * 1.5); /* 21px */
--font-size--xl: calc(var(--text_base-size) * 1.75); /* 24.5px */

--content-width: 580px;
--layout-width: 780px;

/* --------------------
　余白
-------------------- */
--content-gap: 50px;
--content-space_inline--sm: 1em; /* 14px */
--content-space_inline--md: 1.5em; /* 21px */
--content-space_inline--lg: 3em; /* 28px */

--space--base: 14px;
--space--xxs:  calc(var(--space--base) * 0.25); /* 3.5px */
--space--xs:   calc(var(--space--base) * 0.5);  /* 7px */
--space--sm:   calc(var(--space--base));        /* 14px */
--space--2sm:  calc(var(--space--base) * 1.5);  /* 21px */
--space--md:   calc(var(--space--base) * 2);    /* 28px */
--space--2md:  calc(var(--space--base) * 2.5);  /* 35px */
--space--lg:   calc(var(--space--base) * 3);    /* 42px */

/* --------------------
　装飾
-------------------- */
--border-style-default: solid;
--border-size-default: 0.5px;
--border-color-default: var(--color_main);

--border-radius--sm: 4px;
--border-radius--circle: 100vw;


/* --------------------
　その他 基本設定
-------------------- */
--global-navigation-height: 70px;
}

[id] { /*アンカーリンクでglobal-navigation分余白を開ける*/
	scroll-margin-top: calc(var(--global-navigation-height) + var(--space--sm));
}

body {
	background-color: var(--color_base);
	font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS PMincho", "MS ゴシック", serif;;
	font-size: var(--text_base-size);
	line-height: 1.4;
	color: var(--color_base-text);
	margin-top: var(--global-navigation-height);
}

@media (min-width: 768px) {
	:root {
		--content-gap: 80px;
	}
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
}



/* ----------------------------------------------------------

　コンポーネント

---------------------------------------------------------- */

/* リンクボタン */
.link-btn__wrapper {
	margin-top: var(--space--lg);
}
.link-btn {
	display: flex;
	width: 200px;
	height: 40px;
	margin-inline: auto;
	padding-inline: var(--space--sm);
	background-color: var(--white);
	box-sizing: border-box;
	border: var(--border-style-default) var(--border-size-default) var(--border-color-default);
	border-radius: var(--border-radius--circle);
	justify-content: center;
	transition: background-color 0.35s ease;
	color: var(--color_base-text);
	/* iOS対策 */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}
.link-btn__text {
	display: flex;
	column-gap: var(--space--sm);
	font-size: var(--text_note-size);
	align-items: center;
}
.link-btn__text::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 4px;
	background-image: url('../image/common/arrow-brown.svg');
	background-repeat: no-repeat;
	background-size: contain;
}
.link-btn:hover {
	background-color: var(--color_main2);
	border-color: var(--color_main2);
	color: var(--white);
}
.link-btn:hover .link-btn__text::after {
	background-image: url('../image/common/arrow-white.svg');
}
.dogs-list-single__cta-inner > .link-btn:hover {
	background-color: var(--green-500);
	border-color: var(--green-500);
}

/* h2 ボーダー装飾 */
.title__simple-border {
	text-align: center;
	font-size: calc(var(--text_base-size) * 1.75);
	font-weight: normal;
}
.title__simple-border::after {
	content: '';
	display: block;
	width: 30px;
	height: 1px;
	margin-top: var(--space--sm);
	margin-inline: auto;
	background-color: var(--color_base-text);
}
/* フェードイン */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition-delay: var(--delay, 0s);
}
.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.fade-in[data-delay] {
	transition-delay: var(--delay, 0s);
}
/* 文字装飾 */
.text-deleted {
	text-decoration: line-through;
}
.text-emphasis {
	color: var(--color_emphasis);
	font-weight: bold;
}


/* --------------------
　グローバルナビ
-------------------- */
.global-navigation {
	--_btn-height: 50px;
	height: var(--global-navigation-height);
	width: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
.global-navigation__inner {
	display: flex;
	width: 100%;
	height: 100%;
	max-width: var(--layout-width);
	margin-inline: auto;
	padding: var(--space--xs) var(--space--sm) var(--space--xs) var(--space--md);;
	column-gap: var(--space--xs);
	align-items: center;
}
.global-navigation__logo-wrapper {
	width: -webkit-fill-available;
}
.global-navigation__logo-image {
	width: auto;
	height: 48px;
}
.global-navigation__cta-btn {
	display: flex;
	height: var(--_btn-height);
	background-color: var(--color_cta-contents);
	color: var(--green-500);
	font-size: var(--text_note-size);
	text-align: center;
	align-items: center;
	flex-shrink: 0;
}
.global-navigation__cta-btn-link {
	display: block;
	width: fit-content;
	padding-inline: 9px;
}


/* --------------------
　ハンバーガーボタン
-------------------- */
.hamburger-btn {
	display: flex;
	width: 58px;
	height: var(--_btn-height);
	padding: 14px;
	box-sizing: border-box;
	background-color: var(--color_main2);
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	z-index: 101;
}
.hamburger-btn_inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.hamburger-btn_inner span {
	background-color: var(--white);
	width: 30px;
	height: 1.5px;
	position: absolute;
	transition: 0.35s ease;
}
.hamburger-btn_inner span:nth-child(1) {
	top: 0;
}
.hamburger-btn_inner span:nth-child(2) {
	top: 10px;
}
.hamburger-btn_inner span:nth-child(3) {
	bottom: 0;
}
.js-active .hamburger-btn_inner span:nth-child(1) {
	transform: rotate(45deg);
	top: 10px;
}
.js-active .hamburger-btn_inner span:nth-child(2) {
	opacity: 0;
}
.js-active .hamburger-btn_inner span:nth-child(3) {
	transform: rotate(-45deg);
	bottom: 10px;
}


/* --------------------
　スマホ　メニューエリア
-------------------- */
.global-navigation__menu {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	padding: var(--space--md);
	background-color: var(--color_main2);
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s;
}
.js-open {
	opacity: 1;
	visibility: visible;
}
.global-navigation__menu-logo-image {
	width: auto;
	height: 48px;
}
.global-navigation__menu-list {
	display: flex;
	flex-direction: column;
	margin-top: var(--space--2md);
	row-gap: var(--space--2md);
	text-align: center;
	font-size: var(--space--2sm);
	color: var(--white);
}


/* --------------------
　下層 共通メインヴィジュアル
-------------------- */
.main-visual {
	display: flex;
	width: 100%;
	justify-content: center;
}
.main-visual-image {
	width: 100%;
	max-width: var(--content-width);
	height: auto;
}


/* --------------------
　article 共通
-------------------- */
/* 下層共通 横幅 */
.page-article {
	display: flex;
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	flex-direction: column;
	margin-top: var(--content-gap);
	row-gap: var(--content-gap);
}



/* --------------------
　ページネーション
-------------------- */
.pagination-wrapper {
	display: flex;
	width: 100%;
	padding-block: var(--space--xs);
	column-gap: var(--space--sm);
	justify-content: center;
}
.prev,
.next {
	display: flex;
	margin-inline: var(--space--xs);
	align-items: center;
}
.prev::before,
.next::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 4px;
	background-image: url('../image/common/arrow-brown.svg');
	background-repeat: no-repeat;
	background-size: contain;
}
.prev::before {
	transform: scaleX(-1);
	margin-right: var(--space--xs);
}
.next::after {
	margin-left: var(--space--xs);
}
/* シングルページ */
.single-post-nav__list {
	display: flex;
	column-gap: var(--space--2sm);
}


/* --------------------
　斜線入りコンテンツデザイン
-------------------- */
.design-pattern-clip__wrapper {
	width: 100%;
	padding: var(--space--md) var(--space--2sm);
	background-color: var(--color_background);
	position: relative;
}
.design-pattern-clip__wrapper::after {
	content: '';
	display: block;
	width: 0.5px;
	height: 73.5px;
	background-color: var(--border-color-default);
	transform: rotate(45deg);
	position: absolute;
	top: -21px;
	left: 15px;
}
@media (min-width: 768px) {
	.design-pattern-clip__wrapper {
		padding: var(--space--lg) var(--space--2md);
	}
}


/* --------------------
　情報リスト表示　レイアウト
-------------------- */
.design-pattern-clip__data-list {
	display: flex;
	flex-direction: column;
	row-gap: var(--space--xs);
}
.design-pattern-clip__data-list-item-wrapper {
	display: flex;
	column-gap: var(--space--sm);
}
.design-pattern-clip__data-list-item,
.design-pattern-clip__data-list-item--label {
	display: flex;
	align-items: center;
}
.design-pattern-clip__data-list-item--label {
	width: 80px;
	height: fit-content;
	flex-shrink: 0;
	padding: var(--space--xxs);
	background-color: var(--white);
	font-size: var(--text_note-size);
	justify-content: center;
}
.design-pattern-clip__data-list-item {
	flex-direction: column;
}
.design-pattern-clip__text--note {
	margin-top: var(--space--xs);
	font-size: var(--text_note-size);
}
@media (min-width: 768px) {
	.design-pattern-clip__data-list {
		row-gap: var(--space--2sm);
	}
}

/* --------------------
　支払い方法
-------------------- */
.component-payment__icons-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.component-payment__icons-image-unit {
	display: flex;
	width: 50px;
	aspect-ratio: 1 / 1;
	padding: var(--space--xs);
	align-items: center;
}
.component-payment__icons-image {
	width: 100%;
	height: auto;
}


/* --------------------
　共通CTAエリア
-------------------- */
.cta-area {
	display: flex;
	flex-direction: column;
	padding: var(--space--2md) var(--space--2sm);
	background-color: var(--color_background);
	text-align: center;
	row-gap: var(--space--md);
}
.cta-area__inner {
	display: flex;
	flex-direction: column;
	row-gap: var(--space--xs);
}
.cta-area__title {
	font-size: var(--font-size--lg);
}
.cta-area__text-wrapper {
	margin-top: var(--space--sm);
}
@media (min-width: 768px) {
	.cta-area {
		padding: var(--space--2sm);
	}
}

/* --------------------
　下部コンテンツセット
-------------------- */
.bottom-contents-set {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}
.bottom-contents-set__link-wrapper {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
}
.bottom-contents-set__link {
	display: flex;
	flex-direction: column;
	color: var(--white);
	text-align: center;
	position: relative;
}
.bottom-contents-set__link-inner {
	display: flex;
	flex-direction: column;
	padding: var(--space--2sm) var(--space--2sm) var(--space--md);
	row-gap: var(--space--sm);
	position: relative;
}
.bottom-contents-set__link-inner::after {
	content: "";
	display: block;
	width: 21px;
	height: 21px;
	background-color: var(--color_main);
	background-image: url('../image/common/arrow-white.svg');
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: center;
	position: absolute;
	bottom: 0;
	right: 0;
}
.bottom-contents-set__link--flow {
	background-color: var(--color_main2);
}
.bottom-contents-set__link--about {
	background-color: #a39589;
}
.bottom-contents-set__link-image-wrapper {
	display: flex;
	width: 100px;
	height: 150px;
	margin-inline: auto;
	border-radius: var(--border-radius--circle) var(--border-radius--circle) 0 0;
	overflow: hidden;
	justify-content: center;
}
.bottom-contents-set__link-image {
	width: auto;
	height: 100%;
	background-size: contain;
}
@media (min-width: 768px) {
	.bottom-contents-set__link-wrapper {
		padding-top: var(--content-gap);
	}
}


/* --------------------
　フッターエリア
-------------------- */
.footer-wrapper {
	margin-top: var(--content-gap);
}
/* SNS */
.footer-sns-link {
	display: flex;
	flex-direction: column;
	row-gap: var(--space--sm);
	justify-content: center;
}
.footer-sns-link__title {
	display: flex;
	margin-inline: auto;
	column-gap: var(--space--xs);
	font-size: var(--text_note-size);
	font-weight: normal;
	align-items: center;
}
.footer-sns-link__title::before {
	content: "＼";
	display: block;
}
.footer-sns-link__title::after {
	content: "／";
	display: block;
}
.footer-sns-link__inner {
	display: flex;
	column-gap: var(--space--2sm);
	justify-content: center;
}
.footer-sns-link__image {
	width: 35px;
	height: 35px;
}
/* フッター */
.footer {
	display: flex;
	flex-direction: column;
	margin-top: var(--space--2md);
	padding: var(--space--2md) var(--space--2sm) var(--space--2sm);
	row-gap: var(--space--2sm);
	background-color: var(--color_background_footer);
	color: var(--white);
}
.footer__link-wrapper {
	padding-bottom: var(--space--sm);
}
.footer__link-list {
	display: grid;
	width: fit-content;
	margin-inline: auto;
	gap: var(--space--sm) var(--space--md);
	grid-template-columns: repeat(2, 1fr);
}
.footer__link-item {
	width: 135px;
	text-align: center;
	border-bottom: var(--border-style-default) var(--border-size-default) var(--white);
}
.footer__link {
	display: block;
}
.footer__tel-wrapper {
	display: flex;
	flex-direction: column;
	width: fit-content;
	margin-inline: auto;
	padding: var(--space--xs) var(--space--md);
	row-gap: var(--space--xs);
	background-color: var(--brown-50-alpha50);
	color: var(--color_base-text);
	text-align: center;
}
.footer__bottom-wrapper {
	display: flex;
	flex-direction: column;
	margin-top: var(--space--sm);
	margin-inline: auto;
	row-gap: var(--space--sm);
	text-align: center;
}
.footer__logo-image {
	width: 90px;
}
/* ───── Breakpoint: sm (480px) ───── */
@media (min-width: 480px) {
	.footer {
		row-gap: var(--space--2md);
	}
	.footer__link-list {
		gap: var(--space--sm) min(2vw, var(--space--md));
		grid-template-columns: repeat(3, 1fr);
	}
}