@charset "utf-8";

/* ----------------------------------- */
/* サウ活スタンプラリーLP用CSS */
/* ----------------------------------- */
/* Modified 2024/11/23 11:20 */

/* ―――――― */
/* ■全体の装飾 */
/* ―――――― */
:root {
	font-size: 16px;
	scroll-behavior: smooth;

	--theme-color:	#0D60AD;		/* ベースカラーサウ活ブルー */
	--gray-base:	#eeeeee;		/* 背景ペールグレー */
	--white-base:	#ffffff;		/* 背景白色 */
	--yellow-base:	#FFD950;		/* 背景黄色 */
	--paleyellow-base:	#FCF9EA;		/* 背景薄い黄色 */
	--green-base:	#d2f97d;		/* 背景黄緑 */
	--blue-base:	#A8DBE8;		/* 背景青色 */
	--deepblue-base:	#37AFE1;	/* 背景濃いめ青色 */
	--blue-text:	#00b7ee;		/* 文字青色 */
	--oreage-text:	#FF8B23;		/* 文字緑色 */
	--white-text:	#ffffff;		/* 文字白色 */
	--black-text:	#000000;		/* 文字黒色 */
	--gray-text:	#545454;		/* 文字グレー */
	

	--design80pt:	5rem;			/* Design調整80pt */
	--design70pt:	4rem;			/* Design調整70pt */
	--design55pt:	3.4375rem;		/* Design調整55pt */
	--design50pt:	3.125rem;		/* Design調整50pt */
	--design36pt:	2.25rem;		/* Design調整36pt */
	--design34pt:	2.125rem;		/* Design調整34pt */
	--design32pt:	2rem;			/* Design調整32pt */
	--design28pt:	1.75rem;		/* Design調整28pt */
	--design27pt:	1.6875rem;		/* Design調整27pt */

	--standard-weight:	500;
	--bold-weight:		700;
	--extrabold-weight:	800;

	--drawer-backcolor: #FFFFFF;		/* ドロワーメニューの背景色 */
	--drawer-linkcolor: black;			/* ドロワーメニュー項目の文字色 */
	--hamburger-bar-open-color: #fff;		/* ハンバーガーボタン平時の線色(ドロワーを開くボタンの線色) */
	--hamburger-bar-close-color: #fff;		/* ハンバーガーボタン開時の線色(ドロワーを閉じるボタンの線色) */
	--hamburger-label-textcolor: white;		/* ハンバーガーボタンのラベル文字色 */
	--hamburger-button-color: black;		/* ハンバーガーボタンのボタン色(背景色) */
}
body {
	margin: 0;
	padding: 0;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: var(--standard-weight);
	font-style: normal;
	background-color: #0B60B0;
	line-height: 1.5;
	
}

h1,h2,h3,h4,h5,h6,p {
	margin: 0;
	padding: 0;
	font-size: 1rem;
}

a:hover {
	opacity: 0.5;
}

a {
	text-decoration: none;
}

i { display:inline-block; font-style:normal; }

/* ―――――― */
/* ■レイアウト */
/* ―――――― */
.landingPageCover {
	margin: 0 auto;
	padding: 0;
	max-width: 750px;
}

.oneSection {
	background-color: white;
	margin: 0;
	
}

/* ---------------- */
/* セクション別装飾 */
/* ---------------- */
.section1 { }

.section2 {
	background-color: var(--blue-base);}

.section3 {
	padding: 3rem 0 0 0;
	background-color: var(--blue-base);
}

.section4 {
	background-color: var(--yellow-base);
}

.section5 {
	background-color: var(--gray-base);
}

.section6 {
	background-color: var(--paleyellow-base);
}

.section7 {
	padding: 6rem 0 1px;
	background-color: var(--blue-base);
}

.section8 {
	background: var(--deepblue-base);
}
.section9 {
	background: var(--blue-base);
	text-align: center;
}

.section10 { }

.section11 {
	background: linear-gradient(var(--ligpink-base), var(--ligpink-base) 49%, black 51%, black);
}

.section12 {
	background-color: black;

}


/* ――――― */
/* ■タイトル */
/* ――――― */
.duckTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: var(--standard-weight);
	line-height: 1;
	margin: 0 2rem 1rem 2rem;

	background-image: url("./img/img_-title.png");
	background-position: top;
	background-repeat: no-repeat;
	background-size: contain;
	min-height: 6.5rem;
}
.duckTitle .en {
	font-family: "Jost", cursive;
	font-weight: var(--standard-weight);
	font-style: normal;
	font-size: var(--design80pt);
	text-align: center;
}
.duckTitle .jp {
	font-size: var(--design36pt);
	color: var(--theme-color);
}

	/* 掲載位置による調整 */
	.section10 .duckTitle { margin-bottom: 2.5rem; }
	.section10 .duckTitle .en { line-height: 0.8; }
	.section10 .duckTitle .en .line1 { font-size: var(--design55pt); }
	.section10 .duckTitle .en .line2 { font-size: var(--design50pt); }
	.section10 .duckTitle .jp { padding-top: 0.5rem; }

/* ――――― */
/* ■画像調整 */
/* ――――― */
.autoResize {
	max-width: 100%;
	width: 100%;
	height: auto;
}
.contentImg {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* ――――― */
/* ■本文など */
/* ――――― */

	/* ---------------- */
	/* 景品リスト上下線 */
	.DropsLine {
		margin: 0;
		padding: 0 2rem;
		font-size: 0.67rem;
		text-align: center;
	}
	.DropsLine.topLine		{ padding-top: 1.5rem; padding-bottom: 2.5rem; }
	.DropsLine.bottomLine	{ padding-top: 2rem; }

	/* ---------- */
	/* 景品リスト */
	.prizeList {
		margin: 0 2.25rem;
		padding: 0;
		list-style-type: none;
	}
		.prize {
			font-size: 2.5rem;
			font-weight: var(--extrabold-weight);
		}
		.prize1 { color: var(--theme-color); }
		.prize2 { color: var(--blue-text); }
		.prize3 { color: var(--green-text); }
			.prizeDetails {
				margin: 0;
				padding: 0 0 1rem 1.5rem;
				font-size: var(--design36pt);
				font-weight: var(--bold-weight);
				color: black;
				list-style-type: none;
			}

	/* -------------- */
	/* 発表・発送時期 */
	.dateSchedule {
		margin: 0 2rem 0 3.75rem;
		font-size: var(--design28pt);
	}
		.scheduleList {
			list-style-type: none;
			margin: 2rem 0 0 0;
			padding: 0;
			font-weight: var(--extrabold-weight);
			line-height: 1.67;
		}
			.scheduleList .date { color: var(--theme-color); }

		.deliveryAnnounce {
			margin: 1.75rem 3rem 1rem 0;
			line-height: 1.25;
			font-size: var(--design28pt);
		}

	/* ---------------- */
	/* Concept Flow説明 */
	.oneStep {
		padding: 3rem 2rem;
		text-align: center;
		color:  var(--gray-text);
	}
	.oneStep.firstStep {
		padding-top: 6rem;
	}
		.stepTitle { }
			.stepTitleImage {
				max-width: 100%;
				height: auto;
			}

		.stepGuide {
			margin: 3rem 1rem 0;
			font-weight: var(--bold-weight);
			font-size: var(--design36pt);
			text-align: left;
			
		}
			.stepGuide span {
				color:  var(--oreage-text);
			}
			.siroopLogo {
				max-width: 100%;
				width: 90%;
				height: auto;
			}
			
			.contactGuide {
				color: #FFFFFF;
				text-align: center;
			}
				.contactGuide a {
					color: #FFFFFF;
					text-decoration: none;
				}

		.officialAccountGuide {
			margin: 0 0 3rem 0;
			color: var(--theme-color);
		}
　　　　
		.section8 .stepGuide { margin-left: 0.75rem; margin-right: 0.75rem; }

	.encouragePost {
		margin: 0;
		padding: 3rem 0 6rem;
	}


	/* ------------------- */
	/* SNSリンクアイコン枠 */
	.linkIcons {
		margin: 0;
		padding: 1rem;
		list-style-type: none;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		gap: 1rem;
	}
		.linkIcons a {
			display: block;
			border-radius: 50%;
			text-decoration: none;
			text-align: center;
		}
			.linkIcons a img {
				display: block;
				border-radius: 50%;
				border: 10px solid var(--theme-color);
				box-sizing: border-box;
				max-width: 250px;
				width: 100%;
				height: auto;
			}
	/* ---------------------- */
	/* フッタコンテストロゴ枠 */
	.footContestLogoBox {
		margin: 0;
		padding: 3rem 0;
	}

	/* -------------- */
	/* 会社ロゴ掲載枠 */
	.companyBox {
		text-align: center;
		padding: 5rem 0;
	}
		.companyLogo {
			width: auto;
			height: 65px;
		}


/* ――――― */
/* ■表組周り */
/* ――――― */
.appreqTableCover {
	margin: 0;
	padding: 0 1rem 6rem;
}
	.appreqTable {
		border-collapse: collapse;
		border: 1px solid var(--theme-color);
		background-color: #ffffff;
	}
		.appreqTable th {
			background-color: var(--ligpink-base);
			font-weight: var(--standard-weight);
			line-height: 1.25;
			text-align: left;
		}
		.appreqTable th,
		.appreqTable td {
			border-bottom: 1px solid var(--theme-color);
			padding: 0.75rem;
			text-align: left;
			
		}

			.appreqTable td ul,
			.appreqTable td ol {
				margin: 0;
				padding: 0 0.25rem 0 1.6rem;
				text-align: justify;
			}

/* ----------------------------------- */
/* ▼ドロワーメニュー(PC/モバイル兼用) */
/* ----------------------------------- */
.drawerMenu * {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	font: inherit;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	text-decoration: none;
	list-style: none;
}

	/* ▼ドロワーボタンの表示と動作 */
	.drawerMenu .drawerBg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 999;
		background-color: rgba(255, 255, 255, 0.5);		/* ドロワーが開いているときにページ全体にかぶせる覆い */
		display: none;
		top: 0;
		left: 0;
	}
	.drawerMenu .drawerBtn {
		display: block;
		background: none;
		border: none;
		width: 31px;
		height: 31px;
		letter-spacing: 0.1em;
		cursor: pointer;
		position: fixed;
		top: 15px;		/* ボタンの配置(上) */
		right: 8px;		/* ボタンの配置(右) */
		z-index: 1001;
		text-align: center;
		outline: none;
		border-radius: 50%;
		background-color: var(--hamburger-button-color);	/* 3本線枠の背景色 */
		padding: 10px 15px 20px 15px;						/* 3本線周囲の余白量：上下と左右で合計サイズを合わせると正円になる */
		box-sizing: content-box;
	}
	/* ▽ドロワーが開いている状態でのドロワーボタン */
	.drawerMenu .drawerBtn.active {
		padding: 10px 10px 20px 20px;		/* クロスする場合の3本線周囲の余白量 */
		background-color: var(--hamburger-button-color);
	}
	.drawerMenu .drawerBtn.active .drawerBar {	width: 23px; transform-origin: left center; }	/* 3本線がクロスする場合の長さ */
	.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(45deg); }
	.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
	.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-45deg); }
	.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
	.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
	.drawerMenu .drawerBar {
		display: block;
		height: 3px;			/* 3本線の太さ */
		margin: 5px 2px;		/* 3本線の「上下間隔」と「横の長さ」 */
		transition: all 0.2s;
		transform-origin: 0 0;
	}

	/* ▼ドロワーボタンの色 */
	.drawerMenu .drawerBtn { color: var(--hamburger-label-textcolor); } /* 3本線下部のラベル文字色 */
	.drawerMenu .drawerBtn .drawerBar { background-color: var(--hamburger-bar-open-color); } 			/* 3本線の色:平時 */
	.drawerMenu .drawerBtn.active .drawerBar { background-color: var(--hamburger-bar-close-color); }	/* 3本線の色:開時 */

	/* ▼ドロワーボタン下のラベル */
	.drawerMenu .drawerText {
		text-align: center;
		font-size: 10px;
	}
	.drawerMenu .drawerLabelClose {
		letter-spacing: 0.08em;
		display: none;
		margin-left: -6px;
	}
	.drawerMenu .drawerLabelMenu {
		display: block;
	}

	/* ▼ドロワーメニュー本体(ラッパー) */
	.drawerMenu .drawerNaviWrapper {
		background-color: var(--drawer-backcolor);		/* 重なるメニューの背景色 */
		background-image: none;							/* 重なるメニューの背景画像 */
		width: 310px;									/* 重なるメニューの横幅(※変更する場合はtransformの値も変える：＋12pxくらいの値に) */
		height: 100%;
		transition: all 0.2s;
		transform: translate(322px, 0);				/* 初期状態では、画面外に移動させておく： (0, -100%) なら上から下へ現れる */
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1000;	/* 最前面表示 */
	}
	.drawerMenu .drawerNaviWrapper.open {
		transform: translate(0);					/* openクラスが付加されたら、元の位置に戻す */
	}

	/* ドロワーメニュー本体のスクロールベース */
	.drawerScrollBase {
		max-height: 100%;
		overflow: auto;
		box-sizing: border-box;
	}

	/* ▼ドロワーメニュー本体 */
	.drawerMenu .drawerNaviList {
		padding: 72px 6px 150px;				/* メニューの動的な表示開始位置を調整する際は、padding-topの値を変更する。スクロールのために下端に余分に空間を確保する。 */

		padding-left: 32px;
	}

	.drawerMenu .drawerNaviList li {
		list-style-type: '-' !important;
		font-size: 28px;
	}

	/* ▼ドロワーメニュー(リンク)項目 */
	.drawerMenu a.drawerLink {
		color: inherit;
		text-decoration: none;
		display: block;
		margin: 3px 0;
		padding: 8px 18px;
		border-radius: 0.5em;
		font-weight: 700;
		font-size: 18px;
		line-height: 1.25;
	}
	.drawerMenu a.drawerLink {
		color: var(--drawer-linkcolor);
		background-color: var(--drawer-backcolor);
	}
	.drawerMenu a.drawerLink:hover {
		background-color: white;
		color: var(--theme-color);
		opacity:1;
	}

	/* ▼ドロワーメニュー項目：アイコンリンク */
	.drawerMenu .iconLinkItems {
		text-align: left;
		margin: 50px 0 0 18px;
	}
		.iconLinkList {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: flex;
			gap: 20px;
			align-items:center;
			justify-content:start;
			width: fit-content;
		}
			.iconLinkItems img {
				display: block;
				height: 42px;
				width: auto;
			}

	/* ▼ドロワーメニュー項目：長ボタンリンク */
	.wideBtnLinkItems {
		padding: 30px 0 0;
		text-align: center;
	}
		.wideBtnLinkItems a.btn {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0.25em 1.5em;
			border-radius: 0.65em;
			box-sizing: border-box;
			text-align: center;
			font-size: 1.1rem;
		}
			.wideBtnLinkItems a .iconInBtn {
				margin-right: 0.75em;
			}

	/* ▼ドロワーメニュー項目：問診ボタンリンク */
	.monshinBtnLinkItems {
		padding: 16px;
	}
		.monshinBtn {
			display: flex;
			align-items:center; justify-content:center;
			line-height: 1;
			font-size: 1rem;
			height: 50px;
			max-width: 10rem;
			margin: 0 0 0.5rem 0;
			padding: 0.25rem 1.5rem;
			border: 3px solid #a2d1d9;
			color: white;
			border-radius: 0.65rem;
			box-sizing: border-box;
			text-align: center;
		}

	/* ▼ドロワーメニュー内部上端のロゴ */
	.logoOnMenu {
		margin: 0;
		padding: 0px 6px;

		background-color: white;
	}
		.drawerMenu .logoOnMenu a {
			display: flex;
			align-items:center;
			justify-content:flex-start;

			background-color: white;
		}
			.drawerMenu .logoOnMenu a {
				margin: 0;
				padding: 14px 0 14px 8px;
			}
			.drawerMenu .logoOnMenu .drawerUsagi {
				width: auto;
				height: 50px;
			}
			.drawerMenu .logoOnMenu .drawerLogo {
				width: auto;
				height: 34px;
			}
		.drawerMenu .logoOnMenu a:hover {
			/* 反転表示を適用せず、半透明にする */
			opacity: 0.5;
			background-color: transparent;
		}
		.drawerMenu .logoOnMenu img {
			width: 100px;
			height: auto;
		}

/* ============== */
/* ■PC向けの調整 */
/* ============== */
@media all and (min-width: 600px) {

	.sp-only { display: none; }

	/* Windows環境で日本語Webフォントのシャギーを防ぐ */
	tr span {
		display: inline-block;
	}
	li, tr span {
		transform: rotate(0.03deg);
	}

}

/* ================== */
/* ■Mobile向けの調整 */
/* ================== */
@media (max-width: 599px) {

	:root {
		font-size: 8px;
	}

			.linkIcons a img {
				border-width: 7.5px;
				max-width: 155px;
			}

	.appreqTable {
		font-size: 16px;
	}
		.appreqTable th {
			min-width: 40px;
		}
			.appreqTable td ul,
			.appreqTable td ol {
				padding-left: 3.2rem;
			}

}