@charset "utf-8";
/* ======================================== */
/*              ベーススタイル             */
/* ======================================== */

/* --- フォント・文字設定 --- */
body {
	background-color: white;
	font-family: 'Inter', 'Segoe UI', 'メイリオ', sans-serif;
	/*
	font-family: Arial, Segoe UI, "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";*/
	color: #605B4D;
	font-size: 15px;
	line-height: 1.8;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

/* --- 見出しタグ（h1〜h4） --- */
h1,
h2,
h3,
h4,
h5 {
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
}

h1,
h2 {
	font-size: 24px;
	padding: 30px 0 30px;
}

h3,
h4 {
	font-size: 18px;
	padding: 20px 0;
}

h5 {
	font-size: 16px;
	padding: 10px 0;
}

/* --- 画像 --- */
img {
	height: auto;
	display: block;
}

/* ======================================== */
/*                色設定                   */
/* ======================================== */
:root {
	--basic: #605B4D;
	--grad_pink: linear-gradient(-45deg, #f51862 0%, #f2d727 100%);
	--home1: #F5A41F;
	--home2: #F4C329;
	--cafe1: #7AB78D;
	--cafe2: #9ACFA1;
	--goods1: #E87592;
	--goods2: #F09EB4;
	--hakama: #B6964A;
	--fresh1: #68C4E9;
	--fresh2: #93D4EC;
	--bg_babypink: #FFFBFB;
	--bg_pink: #FCEEEE;
	--pink: #F96C84;
	--gray: #dedede;
	--bg_beige: #f8f4e9;
	--yellow: #FFFC90;
	--vivid_yellow: #FFF100;
	--hate_pink: #E04283;
	--zig_color2: white;
}

/* ======================================== */
/*              レイアウト構造             */
/* ======================================== */
/*<main>に各<section>を入れる*/
main {
	width: 100%;
}

section {
	margin: 0 auto;
	padding: 10px 0 50px;
	min-height: 200px;
}


/* ======================================== */
/*               コンポーネント            */
/* ======================================== */

/* ---------- 背景設定 ---------- */
/*背景左寄せ・右寄せ スマホの時は薄めの背景にチェンジ*/
.bg-img-left {
	background-size: 45%;
	background-repeat: no-repeat;
	background-position: 0 center;
	position: relative;
}

.bg-img-right {
	background-size: 45%;
	background-repeat: no-repeat;
	background-position: 100% center;
	position: relative;
}

@media (max-width: 798px) {

	.bg-img-left,
	.bg-img-right {
		background-size: cover;
		background-position: center center;
	}

	.bg-img-left::before,
	.bg-img-right::before {
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 95%);
		/* 徐々に透明にする */
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ---------- コンテナ ---------- */

/*bg-img-left,bg-img-rightと一緒に使う*/
/*右寄せコンテナ*/
.container_right {
	position: relative;
	left: 50%;
	width: 600px;
	/*widthは仮置き w600などで調整*/
}

/*左寄せコンテナ*/
.container_left {
	position: relative;
	left: 50%;
	width: 600px;
	/*widthは仮置き w600などで調整*/
	transform: translateX(-100%);
	/* 左に幅分（100%）だけずらす */
}

@media (max-width: 798px) {
	.container_right {
		left: 0;
	}

	.container_left {
		left: 0;
		transform: translateX(0%);
	}
}

/*コンテナの中に均等にboxを配置する*/
.container_flex_box {
	display: flex;
	gap: 30px;
	margin: 0 auto;
}

.flex_box {
	flex: 1;
	padding: 20px 0;
}

.flex_box img {
	max-width: 100%;
}

@media (max-width: 798px) {
	section {
		padding: 10px;
	}

	.container_flex_box {
		width: 100%;
		flex-direction: column;
		/* 横並び → 縦並びに変更 */
		gap: 10px;
	}

	.flex_box {
		flex: none;
		/* 幅の均等割りを解除 */
		width: 100%;
		/* 幅いっぱいに */
	}
}

/* ---------- ボタン ---------- */
/*ボタン*/
.btn_main,
.btn_main_sqr {
	display: block;
	width: 80%;
	position: relative;
	margin: 30px auto 20px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
}

.btn_main {
	border-radius: 30px;
	color: white;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.btn_main:after {
	display: inline-block;
	font-family: "Font Awesome 6 Free";
	content: "\f054";
	position: absolute;
	right: 20px;
}

/*ボタン・背景カラバリ*/
.grad_pink {
	background: linear-gradient(-45deg, #f51862 0%, #f2d727 100%);
}

.grad_pink_border {
	border-width: 2px;
	/* ボーダーの太さ */
	border-style: solid;
	border-image: linear-gradient(-45deg, #f51862 0%, #f2d727 100%);
	background-color: white;
	border-image-slice: 1;
	color: #453B3B;
}

.grad_pink_border:hover {
	background: linear-gradient(-45deg, #f51862 0%, #f2d727 100%);
	color: white;
}

.bgcolor_home1 {
	background-color: var(--home1);
}

.bgcolor_home2 {
	background-color: var(--home2);
}

.bgcolor_cafe1 {
	background-color: var(--cafe1);
}

.bgcolor_cafe2 {
	background-color: var(--cafe2);
}

.bgcolor_goods1 {
	background-color: var(--goods1);
}

.bgcolor_goods2 {
	background-color: var(--goods2);
}

.bgcolor_hakama {
	background-color: var(--hakama);
}

.bgcolor_hakama_textwhite {
	color: white;
	background-color: var(--hakama);
}

.bgcolor_fresh1 {
	background-color: var(--fresh1);
}

.bgcolor_fresh2 {
	background-color: var(--fresh2);
}

.bgcolor_pink {
	background-color: var(--pink);
	color: white;
}

.bgcolor_hate_pink {
	background-color: var(--hate_pink);
	color: white;
}

/*ラベル*/
.label {
	width: 100px;
	padding: 5px;
	font-weight: bold;
	text-align: center;
	border-radius: 20px;
	flex-shrink: 0;
	margin-bottom: 10px;
}

/*日付を均等に表示*/
.date-list li {
	display: grid;
	grid-template-columns: 4em 20em;
}

/*カウントをつける*/
/*ulにcountクラスつける*/
.count {
	counter-reset: listnum;
	/* カウンターをリセット */
}

.count li {
	position: relative;
	z-index: 1;
}

.count li>* {
	position: relative;
	z-index: 2;
}

.count li::before {
	counter-increment: listnum;
	/* counter-resetと同じ文字列 */
	content: counter(listnum, decimal-leading-zero);
	/* カウントした数に応じて番号を表示 */
	font-size: 50px;
	font-weight: bold;
	color: var(--bg_pink);
	font-family: roboto;
	position: absolute;
	top: 10px;
	/* 下にずらす */
	left: 30px;
	/* 必要に応じて調整 */
	z-index: 0;
	/* li本体より背面に配置 */
}

/* --- Q&A --- */
.qa h4 {
	padding-top: 10px;
	color: var(--pink);
	border-top: dotted 1px var(--pink);
	position: relative;
	padding: 20px 20px 10px 40px;
	text-align: left;
}

.qa p:last-child {
	border-bottom: dotted 1px var(--pink);
	padding-bottom: 20px;
}

.qa h4::before {
	color: rgba(249, 108, 132, 0.7);
	content: "Q.";
	font-size: 30px;
	font-weight: bold;
	margin-right: 5px;
	position: absolute;
	left: 0;
	top: 20px;
}

.qa p {
	margin: 0px 30px 30px auto;
	position: relative;
	padding-left: 30px;
}

.qa p::before {
	content: "A.";
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	left: 5px;
	top: -2px;
}

/*---もっと見るボタン設定---*/
/*JS設定 .txt-hide、button.more*/

/*---波型背景--*/
/*注意：他にクラスを指定してmargin0要素を持たせるとズレる*/
.wave-section {
	position: relative;
	background-color: var(--bg_beige);
	padding: 30px 0;
	margin: 130px 0 90px;
	overflow: visible;

}

.wave-section::before,
.wave-section::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 150px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -1;
	pointer-events: none;
}

/* 上波型 */
.wave-section::before {
	top: -100px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1399.796 149.521'><path fill='%23f8f4e9' d='M9783,11266.362s654.8-86.311,868.419-70.087,307.458,46.5,407.993,46.5,123.384-36.558,123.384-36.558v-89.375H9783Z' transform='translate(11182.796 11266.362) rotate(180)' /></svg>");
}

/* 下波型 */
.wave-section::after {
	bottom: -100px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1399.796 149.521'><path fill='%23f8f4e9' d='M9783,11266.362s654.8-86.311,868.419-70.087,307.458,46.5,407.993,46.5,123.384-36.558,123.384-36.558v-89.375H9783Z' transform='translate(-9783 -11116.842)' /></svg>");
}

/*---ジグザグ背景--*/
/*背景色未指定 cf)--zig_color: var(--yellow);隣接カラーは--zig_color2で設定、デフォは白*/
.bg_zigzag {
	position: relative;
	background-color: var(--zig_color);
}

.bg_zigzag:after {
	content: "";
	position: absolute;
	background: linear-gradient(45deg, var(--zig_color2) 50%, transparent 52%),
		linear-gradient(315deg, var(--zig_color2) 50%, transparent 52%);
	background-size: 30px 30px;
	height: 14px;
	width: 100%;
	bottom: 0;
	left: 0;
}

.bg_zigzag:before {
	content: "";
	position: absolute;
	background: linear-gradient(45deg, var(--zig_color) 50%, transparent 52%),
		linear-gradient(315deg, var(--zig_color) 50%, transparent 52%);
	background-size: 30px 30px;
	height: 14px;
	width: 100%;
	top: -14px;
	left: 0;
}

/* ======================================== */
/*             ユーティリティ                */
/* ======================================== */
/*padding設定*/
.p-0 {
	padding: 0;
}

.p-5 {
	/*Label本文側につけると良き。*/
	padding: 5px;
}

.p-10 {
	padding: 10px;
}

/*リンクの強調 ピンク文字のアンダーライン*/
.link-accent {
	color: var(--pink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*PC・スマホ改行切替*/
.br_pc {
	display: block;
}

.br_sp {
	display: none;
}

@media screen and (max-width : 768px) {
	.br_pc {
		display: none;
	}

	.br_sp {
		display: block;
	}
}

/* --- コンテナサイズ調整 --- */
.w1200 {
	width: 1200px;
}

.w1000 {
	width: 1000px;
}

.w800 {
	width: 800px;
}

.w600 {
	width: 600px;
}

.w500 {
	width: 500px;
}

.w400 {
	width: 400px;
}

.w300 {
	width: 300px;
}

@media (max-width: 798px) {

	.w1200,
	.w1000,
	.w800,
	.w600 {
		width: 100%;
	}

	.w500,
	.w400,
	w300 {
		width: 96%;
	}
}

/* --- flex設定 --- */
.div_flex {
	display: flex;
	align-items: flex-start;
}

.div_flex_pc {
	display: flex;
	align-items: flex-start;
}

@media (max-width: 798px) {
	.div_flex_pc {
		display: block;
	}

	.div_flex_sp {
		display: flex;
	}
}

/*右寄せ左寄せ中央表示*/
.u-left {
	margin-left: 0;
	margin-right: auto;
}

.u-right {
	margin-left: auto;
	margin-right: 0;
}

.u-center {
	margin-left: auto;
	margin-right: auto;

}

/*テキスト中央表示*/
.u-txtcenter {
	text-align: center;

}

/*背景画像*/
.bg_img_contain {
	/* 画像パスとサイズは別途指定 */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.bg_img_cover {
	/* 画像パスとサイズは別途指定 */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.bg_img_flex {
	/* 画像パスとサイズは別途指定 */
	/*PCはカバー、Spは縦合わせ*/
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

@media (max-width: 798px) {
	.bg_img_flex {
		background-size: auto 100%;
		background-position: 25% center;
	}
}

/* ======================================== */
/*           　　　　装飾　　　　             */
/* ======================================== */
/*背景画像だけ薄くする*/
.transparent {
	position: relative;
	/* 基準位置とする */
}

.transparent::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(rgba(255, 255, 255, 0) 0, #fff 95%);
	position: absolute;
	top: 0;
	left: 0;
}

.h_under {
	padding: 0.8rem 0;
	margin: 2rem auto 0.2rem;
	background-image: linear-gradient(90deg, var(--pink) 0 20%, var(--gray) 20%);
	background-repeat: no-repeat;
	background-size: 100% 10%;
	background-position: bottom;
	color: #323232;
	font-weight: bold;
	display: block;
	width: 100%;
	max-width: 420px;
	margin-bottom: 40px;
}

/*アニメーション装飾系CSS JS不要*/
.anicss_fadein_3s {
	animation-name: fade;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

@keyframes fade {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*読み込み時にフェイドイン*/
.fadein_onload {
	animation-name: fadeInAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*読み込み時にフェイドアップ*/
.fadeup_onload {
	animation-name: fadeUpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
	display: block;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*発火ディレイ*/
.delay-time02 {
	animation-delay: 0.5s;
}

.delay-time04 {
	animation-delay: 1s;
}

/* ======================================== */
/*           　ヘッダーフッター　             */
/* ======================================== */

/*ヘッダー*/
header {
	width: 100%;
	text-align: center;
	padding: 11px;
	box-shadow: 5px 1px 10px 5px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.ttl_campany {
	font-size: 18px;
	font-weight: bold;
	color: #707070;
}

/*フッター*/
footer {
	width: 100%;
	margin: 0 auto;
	background-image: url("/img/bg_footer.png");
	background-position: bottom;
	background-size: 60% auto;
	background-color: white;
	background-repeat: repeat-x;
	font-size: 15px;
}

.footer_totop {
	display: block;
	margin: 80px auto 10px;
	text-align: center;
	max-width: 300px;
}

footer>.container {
	width: 900px;
	margin: 0px auto;
	padding: 0;
}

footer h2 {
	font-weight: bold;
	font-size: 20px;
	padding-top: 80px;
	padding-bottom: 10px;
	color: var(--basic);
}

footer p {
	margin-bottom: 20px;
}

.footer_left {
	width: 600px;
	padding-bottom: 70px;
}

.footer_line {
	display: block;
	width: 224px;
	height: auto;
	margin: 0 0 0 auto;
	background-image: url("/img/img_LINE.png");
	background-position: bottom;
	background-size: 100% auto;
	background-repeat: no-repeat;

}

.sns {
	width: 44px;
	height: 44px;
	margin-left: 10px;
}

/*フッターここまで*/