/**
 * 全体
----------------------------------------------------------------*/
a{
	transition:color .2s;
	color:rgb(0,184,238);
}
a.hover{ color:rgb(16,30,44); }
p{ text-align:justify; }
table{ width:100%; }
img{ display:block; max-width:100%; margin:0 auto; }
@media screen and (max-width: 768px){
	img{
		max-width:100%;
		height:auto;
	}
}
strong{
	font-weight:cold;
	font-size:20px;
	line-height:30px;
	color:rgb(0,184,238);
}
body{
	font-size:16px;
	line-height:24px;
}
.c{ text-align:center; }
.r{ text-align:right; }
.red{ color:rgb(193,39,45); }
@media screen and (max-width: 768px){
	.spmargin{
		margin-left:20px !important;
		margin-right:20px !important;
	}
}
.betweensec > section:not(:first-child){ margin-top:20px; }

/* テーブル */
table.type1{ width:100%; }
table.type1,
table.type1 th,
table.type1 td{
	border:1px solid rgb(0,0,0);
	padding:10px;
}
table.type1 th{
	background:rgb(0,0,0);
	color:white;
}
table.type2{ width:100%; }
table.type2,
table.type2 th,
table.type2 td{
	border:1px solid rgb(0,0,0);
	padding:5px;
}
table.type2 th{ background:rgba(255,226,0,0.5); }
table.type2 td{ background:rgba(255,255,255,.8); }
table.type3 th,
table.type3 td{
	border:1px solid white;
	padding:10px;
	box-sizing:border-box;
	vertical-align:top;
	font-size:14px;
	line-height:21px;
}
table.type3 th{
	text-align:right;
	background:rgba(0,0,0,.1);
	width:30%;
}
table.type3 td{
	background:rgba(255,255,255,.1);
	width:70%;
}

/* ポイントボックス */
.point{
	font-size:13px;
	line-height:20px;
	border:2px solid rgb(0,184,238);
	border-radius:10px;
	padding:20px 10px 10px;
	margin-top:20px;
	position:relative;
}
.point > .tit{
	background:rgb(0,184,238);
	color:white;
	position:absolute;
	top:-11px;
	font-size:14px;
	line-height:22px;
	padding:0 10px;
	border-radius:4px;
}

/* 分岐 */
.sp,
.spinline{ display:none; }
@media screen and (max-width: 768px){
	.pc{ display:none; }
	.sp{ display:block; }
	.spinline{ display:inline-block; }
}

/* ワイド画像 */
.wideimage{ width:100%; }

/* 注文ボタン */
.orderbutton{
	max-width:688px;
	display:block;
	margin:40px auto;
	transition:box-shadow .2s;
}
.orderbutton.hover{ box-shadow:0 0 20px 20px white; }
@media screen and (max-width: 768px){
	.orderbutton{
		max-width:100%;
		margin:20px;
	}
}

/* 汎用ボタン */
.button{
	background:rgb(0,184,238);
	color:white;
	font-weight:bold;
	font-size:30px;
	line-height:40px;
	padding:20px;
	display:block;
	text-align:center;
	max-width:688px;
	margin:40px auto;
	transition:background .2s, box-shadow .2s;
}
.button.min{
	font-size:16px;
	line-height:24px;
	padding:10px;
}
.button.hover{
	color:white;
	background:rgb(76,205,243);
	box-shadow:0 0 10px 2px rgba(16,30,44,0.2);
}
@media screen and (max-width: 768px){
	.button{
		font-size:16px;
		line-height:24px;
		padding:10px;
		max-width:100%;
		margin:20px 0;
	}
	.button.min{ display:block; }
}

/* ブロック */
.blockes.around{
	margin-bottom:0;
	padding-bottom:20px;
}
.blockes > section > h3{
	font-weight:bold;
	font-size:20px;
	line-height:150%;
	margin:10px 0;
}

/* アウトライン */
.h2{
	font-size:30px;
	line-height:46px;
	margin-bottom:40px;
	background:rgb(0,0,0);
	padding:10px 20px;
	color:white;
}
.h3{
	font-size:18px;
	line-height:26px;
	font-weight:bold;
	text-align:justify;
	margin-bottom:6px;
}

/**
 * レイアウト
----------------------------------------------------------------*/
.base{
	max-width:1024px;
	margin:0 auto;
}
@media screen and (max-width: 768px){
	.flex.around{
		margin:20px 0;
	}
	.flex.around + .flex.around{
		border-top:1px solid #ccc;
		margin-top:-20px;
	}
}

/**
 * ヘッダー・フッター
----------------------------------------------------------------*/
/* ヘッダー */
body > header{
	background:rgb(0,0,0);
	top:-100px;
	transition:top .2s;
}
#headcard{
	position:relative;
	height:100px;
}
#headcard > *{ position:absolute; }
#logo{ left:0; }
#tel{ right:0; }
body.scrolldown{ margin-top:100px; }
body.scrolldown > header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
}
body.scrolldown_abdomen > header{ top:-100px; }
@media screen and (max-width: 600px){
	body.scrolldown{ margin-top:54px; }
	#headcard,
	#logo > a > img,
	#tel > img{ max-height:54px; }
}

/* フッター */
body > footer{
	position:relative;
	z-index:2000;
}
#fvis > img{
	width:100%;
}
#cr{
	background:rgb(0,0,0);
	color:white;
	text-align:center;
	padding:20px;
}

/**
 * 背景
----------------------------------------------------------------*/
#spot_index_campaign{ background:url("./../image/article/index/bg_campaign.png") scroll no-repeat center top / cover; }
#spot_index_usp > h2{ background:url("./../image/article/index/bg_h2_usp.png") scroll no-repeat center top / cover; }
#spot_index_offer > h2{ background:url("./../image/article/index/bg_h2_offer.png") scroll no-repeat center top / cover; }
#spot_index_evidence > h2{ background:url("./../image/article/index/bg_h2_evidence.png") scroll no-repeat center top / cover; }
#spot_index_price{ background:url("./../image/article/index/bg_price.png") scroll no-repeat center top / cover; }
#spot_index_product{ background:url("./../image/article/index/bg_product.png") scroll no-repeat center top / cover; }
#spot_index_flow{ background:url("./../image/article/index/bg_flow.png") scroll no-repeat center top / cover; }
@media screen and (max-width: 768px){
	#spot_index_campaign{ background:url("./../image/article/index/bg_campaign_sp.png") scroll no-repeat center top / cover; }
	#spot_index_usp > h2{ background:url("./../image/article/index/bg_h2_usp_sp.png") scroll no-repeat center top / cover; }
	#spot_index_offer > h2{ background:url("./../image/article/index/bg_h2_offer_sp.png") scroll no-repeat center top / cover; }
	#spot_index_evidence > h2{ background:url("./../image/article/index/bg_h2_evidence_sp.png") scroll no-repeat center top / cover; }
	#spot_index_price{ background:url("./../image/article/index/bg_price_sp.png") scroll no-repeat center top / cover; }
	#spot_index_product{ background:url("./../image/article/index/bg_product_sp.png") scroll no-repeat center top / cover; }
	#spot_index_flow{ background:url("./../image/article/index/bg_flow_sp.png") scroll no-repeat center top / cover; }
}

/**
 * コンテンツ
----------------------------------------------------------------*/
.section{
	margin:0 auto;
	padding:40px;
	max-width:1024px;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	.section{ padding:20px; }
}
#spot_index_mvis{
	position:relative;
	z-index:1;
}
#spot_index_mvis > .wide{ display:none; }
@media screen and (min-width: 1536px){
	#spot_index_mvis > .pc{ display:none; }
	#spot_index_mvis > .wide{ display:block; }
}
#spot_index_product_lineup{
	margin-top:0;
	padding-top:20px;
}
#spot_index_product_lineup > section > div,
#spot_index_product_cloth > div{
	background:white url("./../image/interface/icon/stripes.png") scroll repeat left top;
	border:4px solid rgb(0,0,0);
	padding:20px;
}
#spot_index_product_lineup > section > div > p{ margin-bottom:20px; }
#spot_index_product_cloth{ padding:0 40px 40px; }
#spot_index_product_cloth > div{ padding:40px; }
#spot_index_product_lineup > section > h3,
#spot_index_product_cloth > h3{
	font-size:32px;
	line-height:46px;
	text-align:center;
	font-weight:bold;
	background:rgb(0,0,0);
	color:white;
	padding:8px 20px;
	letter-spacing:.1em;
}
#spot_index_product_lineup > section > h3 > small{
	background:rgb(255,226,0);
	color:rgb(0,0,0);
	letter-spacing:0;
	padding:0 12px;
	margin-right:10px;
	font-size:16px;
	line-height:20px;
	display:inline-block;
}
#spot_index_product_cloth > div > div > section > .point{
	margin-left:20px;
	margin-right:20px;
}
@media screen and (max-width: 768px){
	#spot_index_product_lineup > section,
	#spot_index_product_cloth{
		max-width:500px;
		margin-left:auto;
		margin-right:auto;
		box-sizing:border-box;
	}
	#spot_index_product_cloth{ padding:0 20px 40px; }
	#spot_index_product_cloth > div{ padding:20px; }
}
#spot_index_campaign{
	margin-top:-200px;
	padding-top:200px;
	padding-bottom:80px;
}
@media screen and (max-width: 768px){
	#spot_index_campaign{ padding-bottom:20px; }
}
#spot_index_evidence > section > header{
	background:rgb(0,0,0);
	color:white;
}
#spot_index_evidence > section > header > p{
	text-align:center;
	max-width:1024px;
	margin:0 auto;
	box-sizing:border-box;
	padding:0 40px 20px;
}
.imagepanel > div{
	border-bottom:5px solid rgb(0,0,0);
	box-sizing:border-box;
}
.imagepanel > div:nth-child(odd){ border-right:5px solid rgb(0,0,0); }
.imagepanel > div > img{
	width:100%;
	height:100%;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	.imagepanel > div:nth-child(odd){ border-right:0; }
}
#spot_index_flow{ padding:80px 0; }
#spot_index_profile{
	background:rgba(255,255,255,.8);
	max-width:944px;
	margin:0 auto 80px;
	box-sizing:border-box;
	padding:20px 40px 40px;
}
#spot_index_profile > div > div > h3{
	font-size:24px;
	line-height:32px;
	font-weight:bold;
	margin-bottom:10px;
}
#spot_index_profile > div > div > h3 > small{ display:block; }
.note{
	font-size:13px;
	line-height:20px;
	background:white;
	padding:10px;
	margin:10px 0;
	text-align:justify;
}
@media screen and (max-width: 768px){
	#spot_index_flow{ padding:60px 0 1px; }
	#spot_index_profile{
		margin:-40px 20px 40px;
		padding:20px;
	}
}
#spot_index_template > div{ background:rgba(255,255,255,.8); }
#spot_index_template > div > h3{ background:rgb(0,0,0); }
#spot_index_template > div > div{ margin:0; }
#spot_index_template > div > div > section{ padding:10px; }
#spot_index_template > div > div > section > h4{
	font-size:20px;
	line-height:26px;
	font-weight:bold;
	text-align:center;
}
#spot_index_template > div > div > section > a{
	margin-top:10px;
	display:block;
	transition:opacity .2s;
}
#spot_index_template > div > div > section > a.hover{ opacity:.8; }
@media screen and (max-width: 768px){
	#spot_index_template > div{
		max-width:400px;
		margin:0 auto;
	}
}
#spot_index_design_flow{
	max-width:452px;
	margin:0 auto;
}
#spot_index_design_flow > img{ margin-bottom:20px; }
#spot_index_company{
	max-width:768px;
	margin:40px auto 0;
	box-sizing:border-box;
	padding:0 40px;
	font-size:13px;
	line-height:18px;
}
@media screen and (max-width: 768px){
	#spot_index_company{ padding:0 20px; }
}
#spot_index_company > h2{
	max-width:452px;
	margin:0 auto;
}
#spot_index_price{ padding:40px 0 80px; }
#spot_index_price > section{
	margin-bottom:40px;
}
#spot_index_price > section > div{
	background:white;
	box-shadow:0 0 10px 2px rgba(0,0,0,.5);
	padding:40px;
	margin:0 40px;
}
#spot_index_price > section > div > .type1{
	font-size:24px;
	line-height:32px;
}
#spot_index_price > section > div > .type1 th,
#spot_index_price > section > div > .type1 td{
	text-align:center;
}
#spot_index_price > section > div > .type1 small{
	display:block;
	font-size:12px;
	line-height:13px;
}
#spot_index_price > section > div > .type1 .n{
	text-align:right;
	font-weight:bold;
}
@media screen and (max-width: 768px){
	#spot_index_price > section > div > .type1 th,
	#spot_index_price > section > div > .type1 td{ padding:5px; }
}
.campaignprice{ color:rgb(193,39,45); }
s.cost{
	font-size:20px;
	position:relative;
	padding-right:20px;
}
s.cost::after{
	content:'';
	height:26px;
	width:26px;
	display:block;
	position:absolute;
	right:-6px;
	bottom:0;
	background:url("./../image/interface/icon/right_arrow_red.png") scroll no-repeat center center / contain;
}
@media screen and (max-width: 768px){
	#spot_index_price > section > div{
		padding:0;
		margin:0 10px;
		box-shadow:0 0 6px 4px white;
	}
	#spot_index_price > section > div > p{
		background:rgb(0,0,0);
		color:white;
		text-align:center;
	}
	#spot_index_price > section > div > .type1{
		font-size:16px;
		line-height:24px;
	}
	s.cost{
		font-size:16px;
		padding-right:16px;
	}
	s.cost::after{
		height:16px;
		width:16px;
		display:block;
		position:absolute;
		right:-2px;
		bottom:0;
		background:url("./../image/interface/icon/right_arrow_red.png") scroll no-repeat center center / contain;
	}
}

/**
 * ご注文フォーム
----------------------------------------------------------------*/
#orderform{ color:white; }

/* フォント */
#orderform input[type="file"],
#orderform input[type="button"],
#orderform input[type="submit"]{ -webkit-appearance:none; }
#orderform,
#orderform input[type="text"],
#orderform input[type="tel"],
#orderform input[type="number"],
#orderform textarea,
#orderform input[type="button"],
#orderform input[type="submit"]{
	font-size:20px;
	line-height:40px;
	vertical-align:middle;
}

/* 入力部品 */
:placeholder-shown{ color:#999; }
#orderform > section section:not(:last-child){ margin-bottom:20px; }
#orderform .req::before{
	content:'必須';
	background:rgb(193,39,45);
	padding:2px 6px;
	font-size:16px;
	line-height:24px;
	margin-right:4px;
}
#orderform label{
	font-size:16px;
	line-height:24px;
	display:block;
	padding-bottom:8px;
}
#orderform small{
	font-size:12px;
	line-height:18px;
	display:block;
}
#orderform section > small{
	padding:4px 0;
	color:rgb(255,226,0);
}
#orderform > section section > p{
	font-size:12px;
	line-height:18px;
	color:rgb(0,184,238);
	padding:4px 0;
	display:block;
}
#orderform section > small + p{ padding-top:0; }
#orderform section > small + small{
	margin-top:0;
	padding-top:0;
}
#orderform img + img{ margin-top:20px; }
#orderform > section > h3{ margin-top:40px; }
#orderform input[type="text"],
#orderform input[type="tel"],
#orderform input[type="number"],
#orderform textarea{
	border:0;
	background:white;
	padding:4px;
	width:100%;
	box-sizing:border-box;
	transition:box-shadow .2s;
	font-weight:bold;
}
#orderform input[type="text"],
#orderform input[type="tel"],
#orderform input[type="number"]{
	line-height:20px;
	padding-top:10px;
	padding-bottom:10px;
}
#orderform input[type="button"]{
	border:0;
	background:rgb(0,184,238);
	color:white;
	padding:4px;
	width:100%;
	box-sizing:border-box;
	transition:box-shadow .2s;
	font-weight:bold;
}
#orderform textarea{ height:300px; }
#orderform input[type="text"]:hover,
#orderform input[type="tel"]:hover,
#orderform input[type="number"]:hover,
#orderform input[type="button"]:hover,
#orderform textarea:hover{ box-shadow:0 0 6px 6px rgba(255,255,255,.8); }
#orderform input[type="text"]:focus,
#orderform input[type="tel"]:focus,
#orderform input[type="number"]:focus,
#orderform input[type="button"]:focus,
#orderform textarea:focus{ box-shadow:0 0 4px 4px rgb(127,219,246); }
#orderform input[type="text"].min,
#orderform input[type="tel"].min,
#orderform input[type="number"].min{
	width:100px;
	margin-right:4px;
	text-align:right;
}
#orderform .num{ ime-mode:disabled; }
#orderform .textbutton{ display:flex; }
#orderform .textbutton > input[type="text"]{ min-width:0; }
#orderform .textbutton > input[type="button"]{ width:200px; }

/* ラジオボタン */
#orderform input[type="radio"]{ display:none; }
#orderform input[type="radio"] + span{
	font-size:26px;
	line-height:30px;
	font-weight:bold;
	position:relative;
	padding-left:34px;
	border-radius:10px;
}
#orderform input[type="radio"] + span::before,
#orderform input[type="radio"]:checked + span::after{
	content:'';
	display:block;
	top:0;
	left:0;
	border-radius:50%;
}
#orderform input[type="radio"] + span::before{
	width:26px;
	height:26px;
	background:white;
	position:absolute;
}
#orderform input[type="radio"] + span::after{
	width:16px;
	height:16px;
	margin:5px;
	position:absolute;
	background:rgb(0,184,238);
	opacity:0;
}
#orderform input[type="radio"]:checked + span::after{
	opacity:1;
	animation:fadein 0.2s ease 0s 1;
}
@keyframes fadein{
	0%{ opacity:0; }
	100%{ opacity:1; }
}
#orderform input[type="radio"] + span:hover{
	box-shadow:0 0 10px 10px rgba(255,255,255,.2);
	background:rgba(255,255,255,.2);
	animation:hoveron 0.2s ease 0s 1;
}
@keyframes hoveron{
	0%{
		box-shadow:0 0 10px 10px rgba(255,255,255,0);
		background:rgba(255,255,255,0);
	}
	100%{
		box-shadow:0 0 10px 10px rgba(255,255,255,.2);
		background:rgba(255,255,255,.2);
	}
}
#orderform input[type="radio"]:checked + span{
	box-shadow:0 0 10px 10px rgb(127,219,246);
	background:rgb(127,219,246);
	animation:lighton 0.2s ease 0s 1;
}
@keyframes lighton{
	0%{
		box-shadow:0 0 10px 10px rgba(255,255,255,.2);
		background:rgba(255,255,255,.2);
	}
	100%{
		box-shadow:0 0 10px 10px rgb(127,219,246);
		background:rgb(127,219,246);
	}
}

/* チェックボックス */
#orderform input[type="checkbox"]{ display:none; }
#orderform input[type="checkbox"] + span{
	margin-right:10px;
	border-radius:4px;
	transition:box-shadow .2s, background .2s;
	vertical-align:middle;
}
#orderform input[type="checkbox"] + span:hover{
	box-shadow:0 0 10px 10px rgba(255,255,255,.2);
	background:rgba(255,255,255,.2);
}
#orderform input[type="checkbox"]:checked + span{
	box-shadow:0 0 10px 10px rgb(127,219,246);
	background:rgb(127,219,246);
}
#orderform input[type="checkbox"] + span::before{
	content:'';
	display:inline-block;
	width:60px;
	height:60px;
	background:url("./../image/interface/icon/checkbox.png") scroll no-repeat center center / contain;
	margin:-28px -8px -26px -20px;
	vertical-align:middle;
}
#orderform input[type="checkbox"]:checked + span::before{ background-image:url("./../image/interface/icon/checkbox_checked.png"); }

/* ファイル */
#orderform input[type="file"]{ display:none; }

/* 送信ボタン */
#orderform input[type="submit"]{
	border-radius:0;
	width:300px;
	font-size:24px;
	line-height:40px;
	letter-spacing:.1em;
	padding:10px;
	background:rgb(0,184,238);
	border:0;
	color:white;
	cursor:pointer;
	transition:background .2s;
	margin:40px auto;
	display:block;
	-webkit-appearance:none;
}
#orderform input[type="submit"].hover{ background:rgb(76,205,243); }
@media screen and (max-width: 768px){
	#orderform input[type="submit"]{
		width:90%;
		margin:40px 5%;
		font-size:30px;
		line-height:50px;
		letter-spacing:.2em;
	}
}

/* 個人情報保護方針 */
#privacy{ text-align:center; }
#privacy > div{
	background:rgba(255,255,255,.2);
	max-width:728px;
	margin:40px auto;
	box-sizing:border-box;
	padding:40px 20px;
}
#privacy > div > h3{
	border-bottom:1px solid white;
	padding-bottom:10px;
	margin-bottom:10px;
}
#privacy > div > p{
	font-size:13px;
	line-height:20px;
}
@media screen and (max-width: 768px){
	#privacy > div{
		margin:20px;
		padding:20px;
		height:200px;
		overflow-y:scroll;
	}
	#privacy > div > p{ padding-bottom:20px; }
}

/* スポット対応 */
#spot_index_orderform{
	background:rgb(16,30,44);
	padding:40px 0 80px;
	border-top:3px solid rgb(0,0,0);
	color:white;
}
#orderform.smart > section:not(.not){
	max-width:728px;
	margin:0 auto;
}
@media screen and (max-width: 768px){
	#orderform.smart > section:not(.not){ margin:0 20px; }
}

#spot_index_orderform_post > input:first-of-type{
	width:3em;
	margin-right:4px;
	margin-left:4px;
}
#spot_index_orderform_post > input:last-of-type{
	width:4em;
	margin-left:4px;
}
#spot_index_orderform_ordertype{ margin:10px; }
#spot_index_orderform_ordertype > div{
	border-radius:10px;
	border:3px solid rgba(255,255,255,0);
	transition:background .2s, border .6s;
}
#spot_index_orderform_ordertype > .active{
	background:rgba(255,255,255,.1);
	border:3px solid white;
}
#spot_index_orderform_ordertype > div > section:not(:first-child){ transition:opacity .2; }
#spot_index_orderform_ordertype > :not(.active) > section:not(:first-child){ opacity:.3; }
#spot_index_orderform_ordertype > :not(.active) input,
#spot_index_orderform_ordertype > :not(.active) textarea{ pointer-events:none; }
#spot_index_orderform_cloth > div{ width:100%; }
@media screen and (max-width: 768px){
	#spot_index_orderform_cloth > div > div::after{
		content:'';
		display:block;
		width:50%;
	}
	#spot_index_orderform_cloth > div > div > section{ width:50%; }
	#spot_index_orderform_cloth > div > div > section:not(:last-child){ margin-bottom:0 !important; }
	#spot_index_orderform_cloth > div > div > section > label > input[type="radio"] + span{
		font-size:20px;
		padding-top:2.5px;
		padding-bottom:2.5px;
	}
}
#spot_index_orderform_upload > section > label{
	font-size:24px;
	line-height:32px;
	font-weight:bold;
}
@media screen and (max-width: 768px){
	#spot_index_orderform_upload > section > .textbutton > input[type="text"],
	#spot_index_orderform_upload > section > .textbutton > input[type="button"]{ font-size:16px; }
}
.msgbox{
	font-size:20px;
	line-height:40px;
	max-width:688px;
	margin:0 auto;
	padding:20px;
	background:rgba(255,255,255,.2);
}
.msgbox#successbox{}
.msgbox#errorbox{}
@media screen and (max-width: 768px){
	.msgbox{ margin:0 20px; }
}

/**
 * 計算板
----------------------------------------------------------------*/
#calc{
	background:rgba(0,0,0,.9);
	color:white;
	position:fixed;
	left:0;
	right:0;
	bottom:-500px;
	font-size:12px;
	line-height:18px;
	z-index:1000;
	cursor:pointer;
	transition:bottom .4s ease-in-out, background .2s;
}
#calc::before,
#calc::after{
	width:80px;
	content:'';
	position:absolute;
	top:-20px;
	left:50%;
	margin-left:-40px;
}
#calc::before{
	background:url("./../image/interface/icon/bottom_arrow.png") scroll no-repeat center center / 30px;
	height:40px;
	z-index:1;
}
#calc::after{
	background:rgba(0,0,0,.9);
	height:20px;
	border-radius:40px 40px 0 0;
}
#calc > div > h2{
	padding:10px 40px 10px;
	margin-bottom:-20px;
	font-size:24px;
	line-height:32px;
	font-weight:bold;
}
#calc > div > h2 > small{
	padding-left:10px;
	font-weight:normal;
}
#calc > div > h2 > small::before{ content:'['; }
#calc > div > h2 > small::after{ content:']'; }
#calc > div > div{ margin:0 20px; }
#calc > div > div > section > hr{
	border-top:1px solid white;
}
#calc > div > div > section > dl{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
}
#calc > div > div > section > dl:not([name="total"]){
	overflow-y:hidden;
	animation:calcin .2s;
}
#calc > div > div > section > dl > dt{
	width:32%;
	margin-right:4%;
}
#calc > div > div > section > dl > dd{
	width:64%;
	color:rgb(255,226,0);
}
#calc > div > div > section > dl[name="total"]{
	font-size:24px;
	line-height:32px;
	font-weight:bold;
}
#calc > div > div > section > dl[name="total"] > dd > small{ font-size:18px; }

/* アクティブイベント */
#calc > div > div > section > dl:not([name="unit"]):not([name="subtotal"]):not([name="tax"]):not([name="total"]):not(.active){ display:none; }
/*
#calc > div > div > section > dl:not([name="unit"]):not([name="subtotal"]):not([name="tax"]):not([name="total"]).active{ opacity:1; }
#calc > div > div > section > dl:not([name="unit"]):not([name="subtotal"]):not([name="tax"]):not([name="total"]):not(.active){ opacity:.4; }
*/

/* スクロールイベント */
body.scrolldown_abdomen #calc{
	display:block;
	bottom:0;
}

/* マウスオーバーイベント */
#calc.hover,
#calc.hover::after{ background:rgba(0,0,0,.8); }

/* クリックイベント */
#calc.clicked::before{ background-image:url("./../image/interface/icon/top_arrow.png"); }
#calc.clicked > div > div > section > hr{ display:none; }
#calc.clicked > div > div > section > dl:not([name="total"]){
	height:0;
	animation:calcout .2s;
}
@keyframes calcin{
	0%{ height:0; }
	100%{ height:18px; }
}
@keyframes calcout{
	0%{ height:18px; }
	100%{ height:0; }
}
@media screen and (max-width: 768px){
	#calc > div > h2{
		padding:10px 10px 0;
		font-size:18px;
		line-height:24px;
		margin-bottom:0;
	}
	#calc > div > h2 > small{
		padding-left:0;
		display:block;
	}
	#calc > div > div{ margin:0; }
	#calc > div > div > section{ padding:10px; }
	#calc > div > div > section > dl > dt{
		width:36%;
		margin-right:4%;
	}
	#calc > div > div > section:first-child{ display:block }
	#calc.clicked > div > div > section:first-child{ display:none; }
}


/**
 * ご注文確認フォーム
----------------------------------------------------------------*/
#totalfee{
	font-size:32px;
	line-height:50px;
	text-decoration:underline;
	margin:80px auto;
	padding:20px;
	background:rgba(255,255,255,.2);
	text-align:center;
	max-width:400px;
}
#totalfee > small{
	font-size:26px;
	display:inline;
}