@charset "utf-8";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}body{width:100%;min-width:320px;min-height:800px;overflow-x:hidden;text-align:center;-webkit-text-size-adjust:100%;font-feature-settings:"palt"}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}h1,h2,h3,h4,h5,h6,th{font-weight:400}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{color:#3e4349;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}p{max-height:999999px}ins{background-color:#ff9;color:#3e4349;text-decoration:none}mark{background-color:#ff9;color:#3e4349;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}img{vertical-align:bottom}input,select{vertical-align:middle}

/****************************************

 common (共通スタイル)

****************************************/
:root {
	--color-cream: #fdf6e6;
	--color-brown: #3a1e12;
	--color-light-brown: #f3ce7e;
	--color-dark-brown: #20150d;
	--color-red: #87020e;
	--color-white: #fafafa;

    --color-dark-pink: #f53b84;
    --color-medium-pink: #fc6ca5;
	--color-light-pink: #ffb7d4;
	--color-dark-blue: #3b8de8;
	--color-light-blue: #d4f2f9;
	--color-sky-blue: #99ddf1;
	--color-red: #f04d31;
	--color-dark-black: #423d3d;
}

body {
	color: var(--color-dark-brown);
	background: var(--color-light-pink);
	font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1px; overflow-wrap: break-word;
}
body, input[type="submit"], input[type="reset"], input[type="button"]{
	font-family: "Helvetica Neue", Helvetica, Arial, Roboto, "Droid Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
@media screen and (min-width: 769px) {
	.sp{ display: none !important; }
}
@media screen and (max-width: 768px) {
	.pc{ display: none !important; }
}

::-moz-selection { background: var(--color-medium-pink); color: var(--color-white); }
::selection { background: var(--color-medium-pink); color: var(--color-medium-pink); }
ul::-webkit-scrollbar { display: none; }

/* .inner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 20px clamp(40px, 8vw, 100px); } */
.inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px clamp(40px, 8vw, 100px); }

a { color: var(--color-white); transition: all 0.3s; }
@media (any-hover: hover) {
	a:hover { color: var(--color-light-pink); opacity: .7; }
}
img{ width: 100%; max-width: 100%; height: auto; }

/*********** マージン ***********/
.mb_0{margin-bottom: 0 !important;}
.mb_10{margin-bottom: 10px;}
.mb_20{margin-bottom: 20px;}
.mb_30{margin-bottom: 30px;}

/*********** 文字寄せ ***********/
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

/*********** フォントサイズ ***********/
.fs_ss{font-size: 0.75em;}
.fs_s{font-size: 0.85em;}
.fs_12em{font-size: 1.2em;}
.fs_13em{font-size: 1.3em;}
.fs_15em{font-size: 1.5em;}

/*********** フォントウエイト ***********/
.fw_bold{font-weight: 900;}

/*********** フォント色 ***********/
.fc_blue{color: var(--color-dark-blue);}
.fc_red{color: var(--color-red);}

/*********** リンクhoverアクション ***********/
.link_act_01{opacity: 1; transition: opacity 0.4s ease;}
@media (any-hover: hover) {
	.link_act_01:hover{opacity: 0.7;}
}

/****************************************
header
****************************************/
header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/****************************************
footer
****************************************/
footer {
	color: var(--color-white);
	background: var(--color-medium-pink);
	padding: 30px 16px clamp(150px, 15vw, 180px);
}
footer .logo img {
	max-width: clamp(250px, 30vw, 300px);
	margin: 0 auto;
}

/* フッターナビ・フッターリンク */
footer .footer_nav_box { padding: 24px 0; }
footer .footer_nav_box .footer_nav_area {
	display: grid;
	grid-template-columns: repeat(auto-fill, min(50%, 200px));
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	font-size: 12px;
	row-gap: 1.0em;
	text-align: left;
	place-content: center;
}
footer .footer_nav_box .footer_nav_area li { width: 100%; }
footer .footer_nav_box :is(.footer_nav_area, .footer_link) a {
	display: block;
	color: var(--color-white);
}
footer .footer_nav_box :is(.footer_nav_area, .footer_link) a:hover { color: var(--color-light-pink); }
footer .footer_nav_box .footer_nav_area li a {
	display: block;
	padding-left: .6em;
}
footer .footer_nav_box .footer_nav_area a img {
	max-width: 14px;
	transition: all 0.2s ease-in-out;
}
footer .footer_nav_box .footer_nav_area a:hover img { translate: 0 4px; }
footer .footer_nav_box .footer_link {
	padding: 0 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 1.0em;
	column-gap: 1.6em;
	margin-top: 48px;
	font-size: 11px;
	text-align: center;
}
footer .footer_copyright_box .footer_copyright_logo {
	display: block;
	text-align: center;
}
footer .footer_copyright_box .footer_copyright_logo img {
	width: 280px;
	height: auto;
}
footer .footer_copyright_text .txt {
	text-align: left;
	font-size: 10px;
	padding: 8px 0;
}
footer .copy {
	line-height: 1.6;
	font-size: 10px;
	text-align: center;
	padding-top: 8px;
}

@media screen and (min-width: 768px) {
	footer .footer_nav_box { padding: 48px 88px 40px 88px; }
	footer .footer_nav_box .footer_nav_area {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		font-size: 13px;
		row-gap: .7em;
		column-gap: 1%;
		text-align: left;
	}
	footer .footer_nav_box .footer_nav_area li { width: calc((100% - 2.0em) / 3); }
	footer .footer_copyright_box .footer_copyright_logo img { width: 320px; }
	footer .footer_nav_box .footer_link {
		gap: 2em;
		font-size: 12px;
	}
	footer .footer_copyright_text .txt { text-align: center; }
	footer .copy { padding: 0; }
}
@media screen and (min-width: 1200px) {
	footer .footer_nav_box .footer_nav_area li { width: calc((100% - 3.0em) / 4); }
}

/****************************************
mainvisual
****************************************/
#mainvisual {
	width: 100%;
	height: auto;
	position: relative;
}
#mainvisual :is(.mv_top, .mv_bottom, .mv_amagift) {
	width: 100%;
	height: auto;
}
#mainvisual .mv_bottom {
	aspect-ratio: 1500 / 480;
	background: url(../images/main/mv_bottom_sp.webp) center top / cover no-repeat;
}
#mainvisual .mv_bottom .btn {
	width: 100%;
	height: 100%;
	padding: 0 20px 20px;
	display: flex;
	justify-content: center;
}
#mainvisual .mv_bottom .btn a {
	display: flex;
	align-items: center;
}
#mainvisual .mv_bottom .btn img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
#mainvisual .mv_amagift img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	#mainvisual .mv_bottom {
		aspect-ratio: 2700 / 560;
		background: url(../images/main/mv_bottom_pc.webp) center top / cover no-repeat;
	}
	#mainvisual .mv_bottom .btn { padding: 0 20px 20px; }
	#mainvisual .mv_bottom .btn a { align-items: flex-start; }
	#mainvisual .mv_bottom .btn img { height: clamp(140px, 20vh, 160px); }
}
@media screen and (min-width: 1200px) {
	#mainvisual .mv_bottom {
		aspect-ratio: 3840 / 600;
		background: url(../images/main/mv_bottom_w.webp) center top / cover no-repeat;
	}
	#mainvisual .mv_bottom .btn img { height: clamp(160px, 20vh, 320px); }
}

/****************************************
step
****************************************/
#step.section_bg {
	position: relative;
	background: url(../images/main/bg_4step_sp.jpg) center top / cover no-repeat;
	overflow: hidden;
}
#step.section_bg::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 70%;
	height: 100%;
	background: url(../images/main/img_kimono_sp.png) right top / 80% no-repeat;
	z-index: 1;
	pointer-events: none;
}
#step .inner {
	position: relative;
	z-index: 2;
	/* max-width: 1200px; */
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 10px;
	/* padding: 40px 0; */
}
#step h2 {
	width: 100%;
	display: flex;
    justify-content: flex-start;
}
#step h2 img {
	width: 70%;
	max-width: 640px;
	height: auto;
	padding: 40px 0 20px;
}
#step ul {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	gap: 0;
}
@media screen and (min-width: 768px) {
	#step .inner { padding: 80px 10px; }
	#step.section_bg { background: url(../images/main/bg_4step_pc.jpg) center center / cover no-repeat; }
	#step.section_bg::before {
		top: 0;
		left: 50%;
		transform: translateX(-35%);
		width: 100%;
		max-width: 1200px;
		height: 100%;
		background: url(../images/main/img_kimono_pc.png) right 20px top / 60% no-repeat;
	}
	#step ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (min-width: 1200px) {
	#step.bg { background: var(--color-brown) url(../images/main/bg_4step_w.jpg) center center / cover no-repeat; }
}

/****************************************
caution
****************************************/
#caution {
	background: var(--color-light-blue);
	font-size: clamp(12px, 2vw, 14px);
}
#caution .inner{ padding: 40px 20px; }
#caution h2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 10px;
}
#caution h2 .title_img img {
	display: block;
	max-width: 180px;
	width: 100%;
	height: auto;
}
#caution h2 .title_txt {
	width: 100%;
	padding: 8px;
	color: var(--color-white);
	background: var(--color-medium-pink);
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
}
#caution .frame_cation {
	text-align: left;
	color: var(--color-dark-black);
	background: var(--color-white);
	border: solid 4px var(--color-light-pink);
	border-radius: 16px;
	padding: clamp(20px, 4vw, 40px);
}
#caution .frame_cation .cp_period { font-size: 16px; }
#caution .frame_cation ul {
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
@media screen and (min-width: 768px) {
	#caution .inner { padding: 64px 10px 80px; }
	#caution h2 .title_img img { max-width: 240px; }
}

/****************************************
entry、btn
****************************************/
#entry {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--color-medium-pink);
	padding: 20px;
	text-align: center;
	z-index: 99;
}
#entry img, .entry_btn img { max-width: clamp(400px, 50vw, 500px); }
.btn01 { margin-bottom: clamp(20px, 6vw, 60px); }
.btn02 { margin-top: clamp(20px, 6vw, 60px); }

/****************************************

** キャンペーン終了のお知らせ **
** content_end.php用 **

****************************************/
.box_endnotice {
	margin: 40px auto 40px;
	padding: 56px 16px;
	background-color: #71141d;

	.box_endnotice_text {
		color: #fbec42;
		font-size: clamp(1rem, 3vw, 3rem);
		font-weight: bold;
	}
}