@charset 'utf-8';
/*---------------------------
 フォームエラー関連
---------------------------*/
.error-border {
    border: 2px solid #e43f24;
}
div[class^=err_].error-visible {
    display: block;
    color: #e43f24;
    font-size: .9em;
    margin-top: 4px;
    font-weight: 600;
}
/* =========================================================
   変数
========================================================= */
:root {
	--color-main: #2857b8;
	--color-main-dark: #0058ad;
	--color-accent: #59b8ea;
	--color-sky: #12b8e8;
	--color-text: #333;
	--color-text-sub: #444;
	--color-border: #98b89d;
	--color-bg-blue: #dfeaf7;
	--color-bg-light-blue: #e3f8fc;
	--font-en: "ab-kirigirisu", sans-serif;
}

/* =========================================================
   共通パーツ
========================================================= */
.c-section {
	padding: 90px 20px 100px;
	background: #fff;
}

.c-section--blue {
	background: var(--color-bg-light-blue);
}

.c-section-title {
	margin: 0 0 48px;
	text-align: center;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: var(--color-text);
}

.c-section-title::before {
	content: attr(data-en);
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-en);
	font-size: 1em;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.1em;
	color: var(--color-main);
}

.c-btn {
	display: inline-block;
	padding: 14px 20px;
	background: var(--color-main);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.c-btn--block {
	display: block;
	width: 100%;
}

.c-btn--outline {
	min-width: 210px;
	border: 2px solid var(--color-main);
	background: #fff;
	color: var(--color-main);
}

.c-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border: 1px solid var(--color-main);
	border-radius: 4px;
	color: var(--color-main);
	background: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

.c-tag::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.35em;
	background: url("/img/icon_search_blue.svg") no-repeat center / contain;
}

.c-category-label {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 10px;
	background: var(--color-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.c-more {
	margin-top: 58px;
	text-align: center;
}

/* =========================================================
   common：PCヘッダー
========================================================= */
#header {
	background: #fff;
	border-top: 12px solid var(--color-main-dark);
}

.header-main {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 24px 14px;
}

.header-logo img {
	max-width: 130px;
	height: auto;
	display: block;
}

.header-contact {
	display: flex;
	align-items: center;
	gap: 28px;
}

.header-tel a,
.footer-tel a {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-text);
	text-decoration: none;
}

.header-tel__icon,
.footer-tel__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-main);
	border-radius: 4px;
	flex-shrink: 0;
}

.header-tel__icon {
	width: 32px;
	height: 32px;
}

.footer-tel__icon {
	width: 36px;
	height: 36px;
}

.header-tel__icon img,
.footer-tel__icon img {
	width: 18px;
	height: 18px;
	display: block;
}

.header-tel__body,
.footer-tel__body {
	display: flex;
	flex-direction: column;
}

.header-tel__number {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
}

.footer-tel__number {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.header-tel__time {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.footer-tel__time {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text-sub);
}

.header-mail a,
.footer-mail a {
	display: inline-flex;
	align-items: center;
	background: var(--color-sky);
	border-radius: 6px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.2;
	transition: opacity 0.3s;
}

.header-mail a:hover,
.footer-mail a:hover {
	opacity: 0.8;
}

.header-mail a {
	gap: 8px;
	padding: 14px 18px;
	font-size: 13px;
}

.footer-mail a {
	gap: 12px;
	padding: 16px 24px;
	font-size: 16px;
}

.header-mail__icon img {
	width: 24px;
	height: auto;
	display: block;
}

.footer-mail__icon img {
	width: 28px;
	height: auto;
	display: block;
}

.header-mail__arrow,
.footer-mail__arrow {
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.header-nav {
	border-top: 1px solid var(--color-border);
}

.header-nav ul {
	display: flex;
	justify-content: center;
	align-items: stretch;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.header-nav li,
.footer-nav li {
	position: relative;
}

.header-nav li:not(:last-child)::after,
.footer-nav li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 1px;
	height: 20px;
	background: var(--color-border);
	transform: translateY(-50%);
}

.header-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 18px;
	color: var(--color-text);
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

/* =========================================================
   common：SPヘッダー
========================================================= */
#sp-header {
	display: none;
}

@media screen and (max-width: 767px) {
	#header {
		display: none;
	}

	#sp-header {
		position: relative;
		z-index: 1000;
		display: block;
		background: #fff;
		border-top: 4px solid var(--color-main-dark);
		border-bottom: 1px solid #b5c5c8;
	}

	.sp-header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 74px;
		padding: 0 12px;
	}

	.sp-header-logo {
		width: 96px;
		flex-shrink: 0;
	}

	.sp-header-logo img {
		max-width: 72px;
		height: auto;
		display: block;
	}

	.sp-header-nav {
		flex: 1;
	}

	.sp-header-nav ul {
		display: flex;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.sp-header-nav li {
		position: relative;
		width: 64px;
	}

	.sp-header-nav li:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 42px;
		background: #b5c5c8;
		transform: translateY(-50%);
	}

	.sp-header-nav a,
	.sp-menu-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 58px;
		padding: 0;
		border: none;
		background: transparent;
		color: var(--color-text);
		text-decoration: none;
		font-size: 10px;
		font-weight: 700;
		line-height: 1.2;
		cursor: pointer;
	}

	.sp-header-nav img,
	.sp-menu-btn img {
		width: 26px;
		height: 26px;
		object-fit: contain;
		margin-bottom: 4px;
		display: block;
	}

	.sp-menu-panel {
		display: none;
		width: 100%;
		background: #fff;
		border-top: 1px solid #b5c5c8;
		border-bottom: 1px solid #b5c5c8;
	}

	.sp-menu-panel.is-open {
		display: block;
	}

	.sp-menu-panel__nav ul {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.sp-menu-panel__nav a {
		display: block;
		padding: 15px 20px;
		border-top: 1px solid #e5e5e5;
		color: var(--color-text);
		text-decoration: none;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.5;
	}

	.sp-menu-btn {
		position: relative;
	}

	.sp-menu-btn img {
		transition: opacity 0.25s;
	}

	.sp-menu-btn::before,
	.sp-menu-btn::after {
		content: "";
		position: absolute;
		top: 18px;
		width: 24px;
		height: 3px;
		background: var(--color-main);
		border-radius: 10px;
		opacity: 0;
		transition: transform 0.25s, opacity 0.25s;
	}

	.sp-menu-btn::before {
		transform: rotate(45deg) scaleX(0);
	}

	.sp-menu-btn::after {
		transform: rotate(-45deg) scaleX(0);
	}

	.sp-menu-btn.is-open img {
		opacity: 0;
	}

	.sp-menu-btn.is-open::before,
	.sp-menu-btn.is-open::after {
		opacity: 1;
	}

	.sp-menu-btn.is-open::before {
		transform: rotate(45deg) scaleX(1);
	}

	.sp-menu-btn.is-open::after {
		transform: rotate(-45deg) scaleX(1);
	}
}

/* =========================================================
   common：フッター
========================================================= */
#footer {
	background: var(--color-bg-blue);
}

#footer .cont {
	padding: 70px 20px 36px;
}

.footer-logo {
	margin-bottom: 34px;
	text-align: center;
}

.footer-logo img {
	max-width: 160px;
	height: auto;
}

.footer-sns {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin: 0 0 42px;
	padding: 0;
	list-style: none;
}

.footer-sns a {
	display: block;
	transition: opacity 0.3s;
}

.footer-sns a:hover {
	opacity: 0.7;
}

.footer-sns img {
	width: 44px;
	height: 44px;
	display: block;
}

.footer-contact {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 42px;
	margin-bottom: 56px;
}

.footer-nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-nav li {
	padding: 0 22px;
}

.footer-nav a {
	color: var(--color-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	transition: opacity 0.3s;
}

.footer-nav a:hover {
	opacity: 0.7;
}

.footer-copy {
	padding: 10px 20px;
	background: var(--color-main-dark);
}

.footer-copy p {
	margin: 0;
	text-align: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

/* =========================================================
   メインビジュアル
========================================================= */
#mv {
	padding: 0 20px;
	background: #fff;
}

.mv-inner {
	position: relative;
	max-width: 97%;
	margin: 0 auto;
	border-radius: 24px;
	overflow: hidden;
}

.mv-inner picture,
.mv-inner img {
	display: block;
	width: 100%;
}

.mv-inner img {
	height: auto;
}

.mv-copy {
	position: absolute;
	top: 32%;
	left: 18%;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.mv-copy h1 {
	margin: 0 0 18px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.35;
}

.mv-copy p {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.8;
}

/* =========================================================
   人気プラン
========================================================= */
#reccomended-plan {
	text-align: center;
}

#reccomended-plan h2::before {
	content: "Recommended Plans";
}

.plan-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
}

.plan-card {
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.plan-card__img {
	position: relative;
	aspect-ratio: 210 / 132;
	overflow: hidden;
}

.plan-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.plan-card__rank {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	display: inline-block;
	padding: 4px 13px;
	background: #d9c600;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.plan-card__body {
	padding: 14px 11px 24px;
}

.plan-card__title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.55;
	color: var(--color-text);
}

.plan-card__price {
	margin: 0 0 10px;
	text-align: right;
	font-size: 14px;
	font-weight: 800;
	color: var(--color-text);
}

.plan-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 11px;
	color: #555;
}

.plan-card__meta span {
	display: inline-flex;
	align-items: center;
}

.plan-card__meta span::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-right: 3px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.plan-card__meta span:first-child::before {
	background-image: url("/img/icon_map.svg");
}

.plan-card__meta span:nth-child(2)::before {
	background-image: url("/img/icon_time.svg");
}

.plan-card__rating {
	margin-bottom: 7px;
	font-size: 12px;
}

.plan-card__rating .star {
	color: #ffc400;
	font-size: 17px;
}

.plan-card__rating .score {
	color: #f5a400;
	font-weight: 800;
}

.plan-card__rating .review {
	color: #555;
}

.plan-card__tags {
	margin-bottom: 13px;
}

.plan-card__text {
	margin: 0 0 12px;
	font-size: 11px;
	line-height: 1.8;
	color: var(--color-text-sub);
}

.plan-card__btn {
	padding: 9px 10px;
	font-size: 12px;
}

/* =========================================================
   目的やシーンから探す
========================================================= */
#scene-search {
	background: url("/img/bg_scene.jpg") no-repeat center / cover;
}

#scene-search h2::before {
	content: "Search by Purpose & Scene";
}

.scene-search-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

.scene-card {
	padding: 26px 14px 20px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #b9b9b9;
	border-radius: 4px;
}

.scene-card__icon {
	margin-bottom: 16px;
	text-align: center;
}

.scene-card__icon img {
	width: 58px;
	height: 58px;
	object-fit: contain;
}

.scene-card__title {
	margin: 0 0 20px;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	color: var(--color-text);
}

.scene-card__list {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.scene-card__list li {
	position: relative;
	padding-left: 1em;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-text-sub);
}

.scene-card__list li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}

.scene-card__link {
	display: block;
	text-align: center;
	color: var(--color-main);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

/* =========================================================
   エリアから探す
========================================================= */
#area-search h2::before {
	content: "Search by Area";
}

.area-search-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.area-card {
	position: relative;
	padding-bottom: 78px;
}

.area-card__img {
	margin-bottom: 22px;
	overflow: hidden;
}

.area-card__img img {
	width: 100%;
	aspect-ratio: 360 / 190;
	object-fit: cover;
	display: block;
}

.area-card__title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--color-text);
}

.area-card__text {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 2;
	color: var(--color-text-sub);
}

.area-card__btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

/* =========================================================
   特集記事
========================================================= */
#special-feature h2::before {
	content: "Special Features";
}

.special-feature-card {
	display: grid;
	grid-template-columns: 44% 1fr;
	border: 2px solid var(--color-main);
}

.special-feature-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.special-feature-card__body {
	padding: 22px 24px 22px 18px;
}

.special-feature-card__title {
	margin: 0 0 22px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--color-text);
}

.special-feature-card__tags {
	margin-bottom: 22px;
}

.special-feature-card__text {
	margin: 0 0 28px;
	font-size: 15px;
	font-weight: 700;
	line-height: 2;
	color: var(--color-text-sub);
}

.special-feature-card__btn {
	min-width: 184px;
}

/* =========================================================
   新着記事
========================================================= */
#fresh-picks {
	background: url("/img/bg_fresh.jpg") repeat center / cover;
}

#fresh-picks h2::before {
	content: "Fresh Picks";
}

.fresh-picks-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

.fresh-card {
	position: relative;
	padding: 0 10px 78px;
	border-right: 1px solid #8d8d8d;
}

.fresh-card:last-of-type {
	border-right: none;
}

.fresh-card__img {
	margin-bottom: 14px;
}

.fresh-card__img img {
	width: 100%;
	aspect-ratio: 320 / 190;
	object-fit: cover;
	display: block;
}

.fresh-card__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--color-text);
}

.fresh-card__date {
	margin: 0 0 18px;
	text-align: right;
	font-size: 13px;
	font-weight: 700;
	color: #777;
}

.fresh-card__text {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-text-sub);
}

.fresh-card__btn {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 0;
}

/* =========================================================
   カテゴリ別最新
========================================================= */
#category-latest {
	background: var(--color-bg-light-blue);
}

#category-latest h2::before {
	content: "Category";
}

.category-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
	margin-bottom: 48px;
}

.category-tabs button,
.tag-tabs button {
	padding: 0 0 8px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--color-text);
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}

.category-tabs button.is-active,
.tag-tabs button.is-active {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.category-panel,
.tag-panel {
	display: none;
}

.category-panel.is-active,
.tag-panel.is-active {
	display: block;
}

.category-card-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 24px;
}

.category-card {
	background: #fff;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28);
}

.category-card img {
	width: 100%;
	aspect-ratio: 300 / 150;
	object-fit: cover;
	display: block;
}

.category-card__body {
	padding: 12px 12px 16px;
}

.category-card h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--color-text);
}

.category-card__date {
	margin: 0 0 12px;
	text-align: right;
	font-size: 11px;
	font-weight: 700;
	color: #777;
}

/* =========================================================
   人気記事ランキング
========================================================= */
#ranking {
	background: url("/img/bg_ranking.jpg") repeat center / cover;
}

#ranking h2::before {
	content: "Ranking";
}

.ranking-list {
	max-width: 720px;
	margin: 0 auto;
}

.ranking-card {
	position: relative;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 36px;
	margin-bottom: 70px;
}

.ranking-card__num {
	position: absolute;
	top: 0;
	left: -38px;
	width: 32px;
	height: 32px;
	background: var(--color-main);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	line-height: 32px;
	text-align: center;
}

.ranking-card__img img {
	width: 100%;
	aspect-ratio: 300 / 180;
	object-fit: cover;
	display: block;
}

.ranking-card__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--color-text);
}

.ranking-card__date {
	margin: -6px 0 12px;
	text-align: right;
	font-size: 11px;
	font-weight: 700;
	color: #777;
}

.ranking-card__text {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-text-sub);
}

.ranking-more {
	margin-top: -20px;
}

/* =========================================================
   タグから探す
========================================================= */
#tag-search h2::before {
	content: "Tags";
}

.tag-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 44px;
	margin-bottom: 42px;
}

.tag-tabs button {
	font-size: 16px;
}

.tag-box {
	padding: 56px 40px 44px;
	border: 4px solid #d4ebfb;
	border-radius: 36px;
}

.tag-panel h3 {
	position: relative;
	width: fit-content;
	margin: 0 auto 40px;
	padding: 0 18px;
	background: #fff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--color-text);
}

.tag-panel h3::before,
.tag-panel h3::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 124px;
	height: 3px;
	background: var(--color-accent);
	transform: translateY(-50%);
}

.tag-panel h3::before {
	right: 100%;
	margin-right: 18px;
}

.tag-panel h3::after {
	left: 100%;
	margin-left: 18px;
}

.tag-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tag-list a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 2px solid var(--color-main);
	border-radius: 6px;
	color: var(--color-main);
	background: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.tag-list a::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.4em;
	background: url("/img/icon_search_blue.svg") no-repeat center / contain;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media screen and (max-width: 1024px) {
	.scene-search-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.c-section {
		padding: 60px 20px 70px;
	}

	.c-section-title {
		margin-bottom: 32px;
		font-size: 24px;
	}

	.c-section-title::before {
		font-size: 14px;
		letter-spacing: 0.18em;
	}

	#mv {
		padding: 0 14px;
	}

	.mv-inner {
		border-radius: 18px;
	}

	.mv-copy {
		top: 22%;
		left: 8%;
		right: 8%;
	}

	.mv-copy h1 {
		margin-bottom: 12px;
		font-size: 28px;
	}

	.mv-copy p {
		font-size: 14px;
	}

	.plan-list,
	.area-search-list,
	.category-card-list,
	.fresh-picks-list {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.plan-list {
		max-width: 360px;
		margin: 0 auto;
	}

	.scene-search-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.scene-card {
		padding: 22px 12px 18px;
	}

	.scene-card__icon img {
		width: 48px;
		height: 48px;
	}

	.scene-card__title {
		margin-bottom: 16px;
		font-size: 15px;
	}

	.scene-card__list {
		margin-bottom: 20px;
	}

	.scene-card__list li {
		font-size: 13px;
	}

	.area-card {
		padding-bottom: 0;
	}

	.area-card__img {
		margin-bottom: 18px;
	}

	.area-card__title {
		margin-bottom: 14px;
		font-size: 17px;
	}

	.area-card__text {
		margin-bottom: 22px;
		font-size: 13px;
		line-height: 1.9;
	}

	.area-card__btn {
		position: static;
	}

	.special-feature-card {
		grid-template-columns: 1fr;
	}

	.special-feature-card__body {
		padding: 20px;
	}

	.special-feature-card__title {
		margin-bottom: 18px;
		font-size: 18px;
	}

	.special-feature-card__text {
		margin-bottom: 22px;
		font-size: 13px;
		line-height: 1.9;
	}

	.special-feature-card__btn {
		width: 100%;
		min-width: 0;
	}

	.fresh-card {
		padding-bottom: 0;
		border: 1px solid #8d8d8d;
	}

	.fresh-card__body {
		padding-bottom: 16px;
	}

	.fresh-card__title {
		font-size: 15px;
	}

	.fresh-card__date {
		margin-bottom: 14px;
		font-size: 12px;
	}

	.fresh-card__text {
		margin-bottom: 16px;
		font-size: 13px;
		line-height: 1.8;
	}

	.fresh-card__btn {
		position: static;
		margin-top: 20px;
	}

	.category-tabs {
		gap: 18px;
		margin-bottom: 32px;
	}

	.ranking-list {
		max-width: none;
	}

	.ranking-card {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-bottom: 44px;
		padding-left: 38px;
	}

	.ranking-card__num {
		left: 0;
	}

	.ranking-card__title {
		font-size: 15px;
	}

	.ranking-card__text {
		font-size: 13px;
	}

	.ranking-more {
		margin-top: 0;
	}

	.tag-tabs {
		gap: 20px;
		margin-bottom: 28px;
	}

	.tag-tabs button {
		font-size: 14px;
	}

	.tag-box {
		padding: 34px 20px 28px;
		border-radius: 24px;
	}

	.tag-panel h3 {
		margin-bottom: 28px;
		font-size: 16px;
	}

	.tag-panel h3::before,
	.tag-panel h3::after {
		width: 48px;
	}

	.tag-list {
		justify-content: flex-start;
		gap: 12px;
	}

	.tag-list a {
		font-size: 13px;
	}

	#footer .cont {
		padding: 54px 20px 28px;
	}

	.footer-logo {
		margin-bottom: 28px;
	}

	.footer-logo img {
		max-width: 130px;
	}

	.footer-sns {
		gap: 14px;
		margin-bottom: 34px;
	}

	.footer-sns img {
		width: 40px;
		height: 40px;
	}

	.footer-contact {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 40px;
	}

	.footer-tel {
		text-align: center;
	}

	.footer-tel a {
		justify-content: center;
	}

	.footer-tel__number {
		font-size: 20px;
	}

	.footer-tel__time {
		font-size: 13px;
	}

	.footer-mail a {
		width: 100%;
		justify-content: center;
		padding: 15px 20px;
		font-size: 15px;
	}

	.footer-nav ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 20px;
	}

	.footer-nav li {
		padding: 0;
		text-align: center;
	}

	.footer-nav li::after {
		display: none;
	}

	.footer-nav a {
		font-size: 13px;
	}
}
/* 全域 end */
/*===========================================
 以下、メディアクエリ
===========================================*/
/*===========================
 【1024px以下】
 ★タブレット横以下に適用されるCSS
===========================*/
@media screen and (max-width:1024px){
	/* 1024down end */
}
/*===========================
【1023px以下】
 ★PC未満に適用されるCSS
===========================*/
@media screen and (max-width:1023px){
	/* 1023down end */
}
/*===========================
【800px以下】
★タブレット以下に適用されるCSS
===========================*/
@media screen and (max-width:800px){
	/* 800down end */
}
/*===========================
【767px以下】
★タブレット未満に適用されるCSS
===========================*/
@media screen and (max-width:767px){
	/* 767down end */
}
/*===========================
 【666px以下】
 ★iPhone6以降の横未満に適用されるCSS
===========================*/
@media screen and (max-width:666px) {
	/* 666down end */
}
/*===========================
 【567px以下】
★iPhone5横未満まで適用されるCSS
===========================*/
@media screen and (max-width:567px){
	/* 567down end */
}
/*===========================
 【414px以下】
★iPhone6PLUS縦まで適用されるCSS
===========================*/
@media screen and (max-width:414px){
	/* 414down end */
}
/*===========================
 【375px以下】
★iPhone6,7縦まで適用されるCSS
===========================*/
@media screen and (max-width:375px){
	/* 375down end */
}
/*===========================
 【360px以下】
 ★Xperia AX SO-01E以下に適用されるCSS
===========================*/
@media screen and (max-width:360px){
	/* 360down end */
}
/*===========================
 【359px以下】
 ★iphone初期にのみ適用されるCSS
===========================*/
@media screen and (max-width:359px){
	/* 359down end */
}
/*===========================
 【568px以上】
 ★iPhone5横以上から表示されるCSS
===========================*/
@media screen and (min-width:568px) {
	/* 568over end */
}
/*===========================
 【667px以上】
 ★iPhone6以降の横以上に適用されるCSS
===========================*/
@media screen and (min-width:667px){
	/* 667over end */
}
/*===========================
【768px以上】 
★タブレット(最小)以上に適用されるCSS
===========================*/
@media screen and (min-width:768px){
	/* 768over end */
}
/*===========================
【801px以上】 
★タブレット縦(最大)より大きい場合に適用されるCSS
===========================*/
@media screen and (min-width:801px){
	/* 801over end */
}
/*===========================
【667px】～【800px】  
★iPhone6以降の横以上かつ、タブレット縦以下まで表示されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:800px){
	/* 667~800 end */
}
/*===========================
 【667px】～【1023px】
 ★iphone6横～PC未満まで適用されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:1023px){
	/* 667~1023 over end */
}
/*===========================
 【415px】～【800px】 
 ★スマホ縦より大、かつ、タブレット以下まで表示されるCSS
===========================*/
@media screen and (min-width:415px) and (max-width:800px){
	/* 415~800 end */
}
/*===========================
 【768px】～【1023px】 
 ★タブレット以上、かつ、PC以下に適用されるCSS
===========================*/
@media screen and (min-width:768px) and (max-width:1023px){
	/* 768~1023 end */
}
/*===========================
 【1024px以上】
 ★PC以上に適用されるCSS
===========================*/
@media screen and (min-width:1024px){
	/* 1024over end */
}
/*===========================
 【1280px以上】
 ★PC(1280px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1280px){
	/* 1280over end */
}
/*===========================
 【1400px以上】
 ★PC(1400px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1400px){
	/* 1400over end */
}