@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;
	--color-dark-navy: #01000a;
	--color-sky-blue: #3b97c2;
}

body {
	color: var(--color-dark-brown);
	background: var(--color-dark-navy);
	font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 0; overflow-wrap: break-word; font-feature-settings: "palt", "kern";
}
body, input[type="submit"], input[type="reset"], input[type="button"]{
	font-family: "Noto Sans JP", "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: 800px; 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; }

main{
	background-image: url("../images/main/bg_all.png");
 	background-position: center top;
 	background-size: 100%;
}

/*********** マージン ***********/
.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: linear-gradient(to bottom, #01000a, #060836, #01000a);
	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_top {
	width: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
#mainvisual .mv_top img{
	width: 100%;
	min-width: 1500px;
	height: auto;
	flex-shrink: 0;
}
#mainvisual .mv_bottom {
	padding: 30px 10px;
	text-align: center;
}
#mainvisual .mv_bottom img{
	width: 80%;
	max-width: 645px;
}
#mainvisual .mv_amagift img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 auto;
	max-width: 800px;
}


@media screen and (max-width: 767px) {
	#mainvisual .mv_top img{
		min-width: unset;
	}
}

@media screen and (min-width: 768px) {
	#mainvisual .mv_bottom {
		aspect-ratio: 2700 / 560;
	}
	#mainvisual .mv_bottom .btn { padding: 10px 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;
	}
	#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: 800px;
	margin: 0 auto;
	padding: 20px 10px 40px;
}
#step h2 {
	width: 100%;
	display: flex;
    justify-content: flex-start;
}
#step h2 img {
	/* width: 70%;
	max-width: 640px; */
	height: auto;
	padding: 20px 0;
}
#step ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	gap: 0;
}
#step p{
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	font-feature-settings: "palt";
	letter-spacing: -1px;
}
#step .btn{
	width: 80%;
	max-width: 645px;
	margin: 0 auto 30px;
	text-align: center;
}
#step .arrow{
	width: 120px;
}
@media screen and (min-width: 768px) {
	#step .inner { padding: 30px 10px 80px; }
/* 	#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 p {
		font-size: 24px;
	}
	#step .arrow{
		width: 150px;
	}
}
@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-sky-blue);
	font-size: clamp(12px, 2vw, 14px);
}
#caution .inner {
	padding: 60px 20px 40px;
}
#caution .frame_cation {
	text-align: left;
	color: var(--color-dark-navy);
	background: var(--color-white);
	border: solid 2px var(--color-dark-navy);
	border-radius: 16px;
	padding: 50px 30px 30px;
	position: relative;
}
#caution .frame_cation .cp_period { font-size: 16px; }
#caution .frame_cation ul {
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#caution .title_txt {
	width: 280px;
	position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	margin: 0 auto;
	padding: 8px 20px;
	text-align: center;
	color: var(--color-white);
	background: var(--color-dark-navy);
	border-radius: 8px;
	font-size: 18px;
	font-weight: bold;
}
@media screen and (min-width: 768px) {
	#caution .inner { padding: 100px 10px 100px; }
	#caution h2 .title_img img { max-width: 240px; }
}

/****************************************
entry、btn
****************************************/
#entry {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--color-dark-navy);
	padding: 10px;
	text-align: center;
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
#entry.is-visible {
	opacity: 1;
	pointer-events: auto;
}
#entry img{
	width: 70%;
	max-width: 300px;
	animation: entryShake 4s ease-in-out infinite;
}
@keyframes entryShake {
	0%, 70%, 100% { transform: translateX(0); }
	72%           { transform: translateX(-6px); }
	74%           { transform: translateX(6px); }
	76%           { transform: translateX(-5px); }
	78%           { transform: translateX(5px); }
	80%           { transform: translateX(-3px); }
	82%           { transform: translateX(3px); }
	84%           { transform: translateX(0); }
}

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

** キャンペーン終了のお知らせ **
** 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;
	}
}