@charset "UTF-8";

/**
 * 全体
----------------------------------------------------------------*/
:root{
	
	/* 配色 */
	--main:rgb(49,53,90);
	--sub:rgb(231,131,154);
	--black:rgb(0,0,0);
	--black:rgb(0,0,0);
	--navy:rgb(49,53,90);
	--pink:rgb(231,131,154);
	--red:rgb(193,39,45);
	--yellow:rgb(236,233,86);
	
	--main9:rgb(69,73,106);
	--sub9:rgb(233,143,164);
	--black9:rgb(25,25,25);
	--black9:rgb(25,25,25);
	--navy9:rgb(69,73,106);
	--pink9:rgb(233,143,164);
	--red9:rgb(199,60,66);
	--yellow9:rgb(237,235,102);
	
	--main8:rgb(90,93,123);
	--sub8:rgb(235,155,174);
	--black8:rgb(51,51,51);
	--black8:rgb(51,51,51);
	--navy8:rgb(90,93,123);
	--pink8:rgb(235,155,174);
	--red8:rgb(205,82,87);
	--yellow8:rgb(239,237,119);
	
	--main7:rgb(110,113,139);
	--sub7:rgb(238,168,184);
	--black7:rgb(76,76,76);
	--black7:rgb(76,76,76);
	--navy7:rgb(110,113,139);
	--pink7:rgb(238,168,184);
	--red7:rgb(211,103,108);
	--yellow7:rgb(241,239,136);
	
	--main6:rgb(131,133,156);
	--sub6:rgb(240,180,194);
	--black6:rgb(101,101,101);
	--black6:rgb(101,101,101);
	--navy6:rgb(131,133,156);
	--pink6:rgb(240,180,194);
	--red6:rgb(217,125,129);
	--yellow6:rgb(243,241,153);
	
	--main5:rgb(152,154,172);
	--sub5:rgb(243,193,204);
	--black5:rgb(127,127,127);
	--black5:rgb(127,127,127);
	--navy5:rgb(152,154,172);
	--pink5:rgb(243,193,204);
	--red5:rgb(224,147,150);
	--yellow5:rgb(245,244,170);
	
	--main4:rgb(172,174,189);
	--sub4:rgb(245,205,214);
	--black4:rgb(153,153,153);
	--black4:rgb(153,153,153);
	--navy4:rgb(172,174,189);
	--pink4:rgb(245,205,214);
	--red4:rgb(230,168,171);
	--yellow4:rgb(247,246,187);
	
	--main3:rgb(193,194,205);
	--sub3:rgb(247,217,224);
	--black3:rgb(178,178,178);
	--black3:rgb(178,178,178);
	--navy3:rgb(193,194,205);
	--pink3:rgb(247,217,224);
	--red3:rgb(236,190,192);
	--yellow3:rgb(249,248,204);
	
	--main2:rgb(213,214,222);
	--sub2:rgb(250,230,234);
	--black2:rgb(204,204,204);
	--black2:rgb(204,204,204);
	--navy2:rgb(213,214,222);
	--pink2:rgb(250,230,234);
	--red2:rgb(242,211,213);
	--yellow2:rgb(251,250,221);
	
	--main1:rgb(234,234,238);
	--sub1:rgb(252,242,244);
	--black1:rgb(229,229,229);
	--black1:rgb(229,229,229);
	--navy1:rgb(234,234,238);
	--pink1:rgb(252,242,244);
	--red1:rgb(248,233,234);
	--yellow1:rgb(253,252,238);
	
	--gray:#ccc;
	--silver:#f5f5f5;
	--none:rgba(0,0,0,0);
	
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--tab) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
}

/* リッチフォーム初期設定 */
.richform{

	/* 配色 */
	--black:rgb(0,0,0);
	--gray:#ccc;
	--silver:#f5f5f5;
	--blue:rgb(49,53,90);
	--blue-disabled:rgb(152,154,172);
	--white:white;
	--red:crimson;
	--default-color:rgba(0,0,0,0);

}
:focus{ outline:none; }

/* ボディ */
body{ font-family:var(--marugo); }

/* reCAPTCHA非表示 */
.grecaptcha-badge { visibility: hidden; }

/**
 * プロトタイプ
----------------------------------------------------------------*/
/* 背景 */
.bg.-pink{ background:var(--pink); }
.bg.-pink1{ background:var(--pink1); }
.bg.-navy{ background:var(--navy); }
.bg.-dotsnavy{ background:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/bg_loop_dots_navy.png) repeat center center; }
.bg.-dotsyellow{ background:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/bg_loop_dots_yellow.png) repeat center center; }

/* アイコン */
.icon.-audio::before{ background-image:url(https://flunare.com/wp-content/themes/flunare/images/interface/icons/audio.png); }
.icon.-q::before{ background-image:url(https://flunare.com/wp-content/themes/flunare/images/interface/icons/q.png); }

/* 見出し */
.h3{
	background:var(--navy);
	border-radius:6px;
	color:white;
	padding:5px 20px;
	margin:60px 0 10px;
	letter-spacing:.1em;
	font-siez:var(--m);
}

/* ボタン */
.buttons > *{
	border:3px solid var(--navy);
	color:var(--navy);
	font-weight:bold;
	background:white;
	font-size:var(--l);
	border-radius:4px;
	box-shadow:2px 2px rgba(0,0,0,.5);
	flex-basis:300px;
	line-height:1.2;
}
.buttons > * > small{
}
.buttons > :hover{
	color:white;
	background:var(--navy);
}
.buttons.-pink > *{
	border-color:3px solid var(--pink);
	color:var(--pink);
}
.buttons.-pink > :hover{
	color:white;
	background:var(--pink);
}

/* トライアングル装飾 */
.triangles::before,
.triangles::after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	width:300px;
	opacity:.3;
}
.triangles::before{
	left:calc(50% - 600px - 168px);
	background:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/bg_triangles_left.png) no-repeat center center / contain;
}
.triangles::after{
	right:calc(50% - 600px - 168px);
	background:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/bg_triangles_right.png) no-repeat center center / contain;
}
@media screen and (max-width: 1536px){
	.triangles::before{ left:0; }
	.triangles::after{ right:0; }
}
@media screen and (max-width: 1200px)
{
	.triangles::before,
	.triangles::after{ width:20vw; }
}

/* 波線 */
.wavy{
	position:relative;
	z-index:2;
}
.wavy.-top{ margin-top:50px; }
.wavy.-bottom{ margin-bottom:50px; }
.wavy.-bottom + .wavy.-top{ margin-top:100px; }
.wavy.-top::before,
.wavy.-bottom::after{
	content:'';
	display:block;
	height:50px;
	left:0;
	right:0;
	position:absolute;
}
.wavy.-top::before{
	top:0;
	margin-top:-50px;
}
.wavy.-bottom::after{
	bottom:0;
	margin-bottom:-50px;
}
.wavy.-top.-pink::before{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_wavyline_pink_top.png) repeat-x center bottom; }
.wavy.-top.-navy::before{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_wavyline_navy_top.png) repeat-x center bottom; }
.wavy.-bottom.-pink::after{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_wavyline_pink_bottom.png) repeat-x center top; }
.wavy.-bottom.-navy::after{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_wavyline_navy_bottom.png) repeat-x center top; }
@media screen and (max-width: 768px)
{
	.wavy.-top.-pink::before,
	.wavy.-top.-navy::before,
	.wavy.-bottom.-pink::after,
	.wavy.-bottom.-navy::after{ background-size:51%; }
	/*
	.wavy.-top{ margin-top:25px; }
	.wavy.-bottom{ margin-bottom:25px; }
	.wavy.-bottom + .wavy.-top{ margin-top:50px; }
	.wavy.-top::before,
	.wavy.-bottom::after{ height:25px; }
	.wavy.-top::before{ margin-top:-25px; }
	.wavy.-bottom::after{ margin-bottom:-25px; }
	*/
}

/* ご注文ボタン(ワイド) */
.orderwide{
	background:var(--navy);
	border-radius:10px;
	display:inline-block;
	margin:60px 100px;
	position:relative;
}
.orderwide:hover{ background:var(--navy8); }
.orderwide::before{
	background:url(https://flunare.com/wp-content/themes/flunare/images/interface/illustrations/illustration01.png) no-repeat center center / cover;
	content:'';
	width:180px;
	height:200px;
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto 0;
	left:-150px;
}
.orderwide:hover::before{ top:-20px; }
@media screen and (max-width: 1200px)
{
	.orderwide{
		--w:1vw;
		margin:calc(var(--w) * 6) 20px calc(var(--w) * 6) calc(var(--w) * 18);
	}
	.orderwide::before{
		width:calc(var(--w) * 18);
		height:calc(var(--w) * 20);
		left:calc(var(--w) * -15);
	}
}

/**
 * ヘッダー
----------------------------------------------------------------*/
body > header{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_mvis.png) no-repeat center top / cover; }

/* ヘッドカード */
#hcard{
	--h:120px;
	height:var(--h);
}
#logo{
	position:absolute;
	top:0;
	left:0;
}
#order{
	position:absolute;
	top:0;
	right:0;
	width:390px;
	height:120px;
	display:block;
	background:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/contact.png) no-repeat center center / cover;
}
#order:hover{ background-image:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/contact_ov.png); }
@media screen and (max-width: 768px)
{
	#hcard{ --h:100px; }
	#logo > img{
		max-width:none;
		max-height:var(--h);
	}
	#order{
		width:calc(var(--h) * 2.6);
		height:var(--h);
	}
	#order{ background-image:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/contact_sp.png); }
	#order:hover{ background-image:url(https://flunare.com/wp-content/themes/flunare/images/interface/theme/contact_ov_sp.png); }
}
@media screen and (max-width: 580px){
	#hcard{ --h:15vw; }
}

/* メインビジュアル */
@media screen and (max-width: 960px)
{
	#mvis > img{ width:100vw; }
}

/* ページ名 */
#pagename{
	padding:20px;
	text-align:center;
	font-size:var(--xl);
	color:var(--navy);
	font-weight:bold;
}

/* パン屑リスト */
#pan{
	font-size:var(--xs);
	padding:0 20px;
	text-align:center;
	color:var(--navy);
}
#pan > ol > li{
	display:inline;
}
#pan > ol > li:not(:first-child)::before{
	content:'>';
}

/* グローバルナビゲーション */
#gnav{
	max-width:calc(240px * 4);
	margin:0 auto;
	padding:20px;
}
#gnav > ul > li > a{
	display:block;
	border-radius:10px;
}
#gnav > ul > li > a:hover{ background:#f5f5f5; }
@media screen and (max-width: 960px)
{
	#gnav{ max-width:calc(192px * 4 + 40px); }
}

/**
 * フッター
----------------------------------------------------------------*/
body > footer{ background:var(--pink); }
#fcard{
	text-align:center;
	padding:40px 20px 0;
}
#fcard > img{ max-width:400px; }
#forder{
	display:inline-block;
	background:linear-gradient(rgb(255,255,255), rgb(175,175,175));
	border-radius:20px;
	overflow:hidden;
	box-shadow:8px 8px 5px rgba(0,0,0,.6);
	position:relative;
	top:0;
	max-width:400px;
}
#forder:hover{
	background:linear-gradient(rgb(255,255,255), rgb(210,210,210));
	top:-5px;
	box-shadow:8px 13px 5px rgba(0,0,0,.6);
}
#comcard{ padding:20px 20px 40px; }
#comcard > p{
	text-align:center;
	color:white;
}
#cr{
	background:var(--navy);
	text-align:center;
	padding:4px 20px;
	color:white;
}
@media screen and (max-width: 440px){
	#fcard > img{ max-width:100%; }
}

/**
 * スポット：TOP
----------------------------------------------------------------*/
/* 動画 */
#spot_index_movie{ text-align:center; }
#spot_index_movie > :not(.triangles){
	position:relative;
	z-index:1;
}
@media screen and (max-width: 768px)
{
	#spot_index_movie{ padding:40px 0; }
}

/* ステップ */
#spot_index_steps{
	padding-bottom:100px;
	margin-bottom:-50px;
}
#spot_index_steps > h2{
	background:white;
	position:relative;
	overflow:hidden;
	padding-top:50px;
	margin-top:-50px;
}
#spot_index_steps > h2 > img{
	position:relative;
	z-index:1;
}
#spot_index_steps > h2::before,
#spot_index_steps > h2::after{
	content:'';
	position:absolute;
	display:block;
	top:0;
	bottom:0;
	width:50vw;
	height:100%;
}
#spot_index_steps > h2::before{
	background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_3steps_left.png) no-repeat left center / contain;
	left:0;
}
#spot_index_steps > h2::after{
	background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_3steps_right.png) no-repeat right center / contain;
	right:0;
}
#spot_index_steps > .base > .flex > section > h3{ margin-bottom:20px; }
#spot_index_steps > .base > .flex > section > figure{
	border:5px solid white;
	box-shadow:2px 2px 10px rgba(0,0,0,.2);
}
#spot_index_steps > .base > .flex > section > p{
	background:var(--navy);
	color:white;
	padding:15px;
	border-radius:10px;
	margin-top:20px;
}
@media screen and (max-width: 768px)
{
	#spot_index_steps > h2{
		padding-top:25px;
		margin-top:-25px;
	}
}

/* こんなお悩みありませんか？ */
#spot_index_problems{
	background:linear-gradient(var(--navy), var(--navy6));
	position:relatice;
	margin-bottom:80px;
}
#spot_index_problems::after{
	content:'';
	display:block;
	margin:0 auto;
	border-top:80px solid var(--navy6);
	border-left:150px solid transparent;
	border-right:150px solid transparent;
	width:0;
	position:absolute;
	bottom:-80px;
	left:0;
	right:0;
}
#spot_index_problems > div{ background:url(https://flunare.com/wp-content/themes/flunare/images/article/index/bg_problems.png) no-repeat right top / contain; }
@media screen and (max-width: 1200px)
{
	#spot_index_problems::after{
		border-top:8vw solid var(--navy6);
		border-left:15vw solid transparent;
		border-right:15vw solid transparent;
		bottom:-8vw;
	}
}

/* フルナレなら！ */
#spot_index_solutions > h2{
	max-width:768px;
	margin:0 auto;
}
#spot_index_solutions > div{ position:relative; }
#spot_index_solutions > div > img{
	position:relative;
	z-index:1;
}
#spot_index_solutions > div > .yellowbar{
	position:absolute;
	top:calc(50% - 500px / 2);
	height:500px;
	left:0;
	right:0;
	background:var(--yellow);
	z-index:-1;
	transform:skewY(-10deg);
}
@media screen and (max-width: 1200px)
{
	#spot_index_solutions > h2{ max-width:512px; }
	#spot_index_solutions > div > .yellowbar{
		top:calc(50% - 40vw / 2);
		height:40vw;
	}
}

/* ご利用者様の声 */
#spot_index_voices > .base > .flex > section{
	background:var(--silver);
	border-radius:20px;
}
#spot_index_voices > .base > .flex > section > .flex > figure > figcaption{
	text-align:center;
	margin-top:10px;
}

/* こんなシーンで使われています */
#spot_index_cases{
	position:relative;
	margin-top:270px;
}
#spot_index_cases > h2{
	position:absolute;
	right:calc(50% - 580px);
	top:-250px;
	z-index:1;
}
#spot_index_cases > div{
	background:var(--pink);
	transform:skewY(-10deg);
	padding:60px 0;
}
#spot_index_cases > div > img{
	position:absolute;
	top:-300px;
}
#spot_index_cases > div > div{
	transform:skewY(10deg);
	position:relative;
}
#spot_index_cases > div > div > .base{ max-width:900px; }
#spot_index_cases > div > div > .base > .flex > img{
	background:white;
	border-radius:50%;
}
@media screen and (max-width: 1200px)
{
	#spot_index_cases > h2{ right:0; }
}
@media screen and (max-width: 960px)
{
	#spot_index_cases > h2{
		top:-30vw;
		width:70vw;
	}
}
@media screen and (max-width: 960px)
{
	#spot_index_cases > div > img{
		width:20vw;
		top:calc(20vw / 220 * -300);
	}
}

/* 2つのご注文方法 */
#spot_index_plans{
	position:relative;
	margin-top:270px;
}
#spot_index_plans > h2{
	position:absolute;
	left:calc(50% - 580px);
	top:-350px;
	z-index:1;
}
#spot_index_plans > section > header{
	background:var(--navy);
	padding:0 var(--gap) 40px;
	position:relative;
}
#spot_index_plans > section > header > p{
	color:white;
	font-size:var(--l);
	font-weight:bold;
	text-align:center;
	margin-bottom:40px;
}
#spot_index_plans > section > header > img{
	position:absolute;
	bottom:0;
}
#spot_index_plans > section > header > img:nth-of-type(1){ left:-280px; }
#spot_index_plans > section > header > img:nth-of-type(2){ right:-280px; }
#spot_index_plans > section > .table{
	margin:60px auto;
	max-width:768px;
}
#spot_index_plans > section > .table > table{ border:7px solid var(--navy); }
#spot_index_plans > section > .table > table > thead > tr > *{
	color:white;
	font-size:var(--l);
	font-weight:bold;
	text-align:center;
}
#spot_index_plans > section > .table > table > thead > tr > *:not(last-child){ border-right:2px solid white; }
#spot_index_plans > section > .table > table > tbody > tr > *{
	border:2px solid var(--navy);
	color:var(--navy);
	font-size:var(--l);
	font-weight:bold;
	text-align:center;
}
#spot_index_plans > section > .table > table > tbody > tr > th{ background:var(--navy2); }
#spot_index_plans > section > .table > p{
	color:var(--navy);
	margin-top:10px;
}
#spot_index_plans > section:nth-of-type(2) > header{ background:var(--red); }
#spot_index_plans > section:nth-of-type(2) > .table > table{ border-color:var(--red); }
#spot_index_plans > section:nth-of-type(2) > .table > table > thead > tr > *{ background:var(--red); }
#spot_index_plans > section:nth-of-type(2) > .table > table > tbody > tr > *{
	border-color:var(--red);
	color:var(--red);
}
#spot_index_plans > section:nth-of-type(2) > .table > table > tbody > tr > th{ background:var(--red2); }
#spot_index_plans > section:nth-of-type(2) > .table > p{ color:var(--red); }
@media screen and (max-width: 1200px)
{
	#spot_index_plans > h2{ left:0; }
	#spot_index_plans > section > header > img{ display:none; }
}
@media screen and (max-width: 960px)
{
	#spot_index_plans{ margin-top:33vw; }
	#spot_index_plans > h2{
		top:-43vw;
		width:70vw;
	}
}

/* ナレーター一覧 */
#spot_index_narrators > .wavy{
	margin:-200px 0 -100px;
	padding:240px 0 140px;
	position:relative;
	z-index:-1;
}
#spot_index_narrators > p{
	text-align:center;
	padding:60px 20px 0;
}
#spot_index_narrators > .card > .narrators > li{
	width:350px;
	padding:20px 20px 30px;
}
.narrators > li{
	background:var(--navy);
	color:white;
	border-radius:15px;
}
.narrators > li > header > h3{
	font-weight:bold;
	font-size:var(--xl);
	text-align:center;
	letter-spacing:.1em;
}
.narrators > li > header > p{
	font-size:var(--m);
	text-align:center;
}
.narrators > li > figure > img{
	border-radius:50%;
	width:240px;
	height:240px;
	margin:10px auto;
	object-fit:cover;
}
.narrators > li > dl{ margin-top:20px; }
.narrators > li > dl > dt.icon{
	font-size:var(--m);
	margin-bottom:4px;
	text-align:center;
	justify-content:center;
}
.narrators > li > dl > dd > audio{
	width:100%;
	display:block;
}
.narrators > li > dl > dd:not(:last-child){ margin-bottom:10px; }
.narrators > li.readmore > a{
	display:block;
	height:calc(100% + 50px);
	border-radius:15px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	margin:-20px -20px -30px;
}
.narrators > li.readmore > a:hover{ background:var(--navy8); }
#spot_index_narrators > .wavy > .buttons{
	position:relative;
	z-index:1;
}
@media screen and (max-width: 768px)
{
	#spot_index_narrators > .card > .narrators > li{
		width:250px;
		padding:15px 15px 20px;
	}
	.narrators > li > figure > img{
		width:200px;
		height:200px;
	}
	.narrators > li > header > p{ font-size:var(--xs); }
}

/* 制作実績 */
#spot_index_works{ padding:40px 0; }
#spot_index_works > .card > .works > li{
	width:360px;
	color:white;
}
#spot_index_works > .card > .works > li > a > ul{ border-bottom:1px solid white; }
#spot_index_works > .card > .works > li > a > ul > li > small{
	background:white;
	color:var(--navy);
}
.works > li:not(.readmore) > a{ display:block; }
.works > li:not(.readmore) > a:hover{ opacity:.8; }
.works > li.readmore > a{
	border-radius:20px;
	background:#999;
	height:100%;
	display:block;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.works > li > a > figure{ position:relative; }
.works > li > a > figure::before{
	content:'';
	display:block;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width:80px;
	height:80px;
	position:absolute;
	background:url(https://flunare.com/wp-content/themes/flunare/images/interface/icons/play.png) scroll no-repeat center center / contain;
	z-index:1;
}
.works > li > a > h3{
	font-size:var(--l);
	font-weight:bold;
	padding:10px 0 5px;
}
.works > li > a > ul{
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid var(--gray);
}
.works > li > a > ul > li > small{
	background:var(--navy);
	border-radius:1em;
	color:white;
	margin-right:4px;
	display:inline-block;
	padding:0 10px;
	font-weight:bold;
}
.works > li.readmore > a:hover{ background:#777; }

/* よくあるご質問 */
#spot_index_faqs > .base > section:not(:last-child){ margin-bottom:40px; }
#spot_index_faqs > .base > section > h3{
	border-left:6px solid var(--pink);
	color:var(--pink);
	font-weight:bold;
	font-size:var(--l);
	margin-bottom:20px;
	line-height:1.5;
	padding-left:10px;
}
#spot_index_faqs > .base > section > div > section:not(:last-child){ margin-bottom:20px; }
#spot_index_faqs > .base > section > div > section > h4.icon{
	color:var(--navy);
	font-weight:bold;
	font-size:var(--m);
	margin-bottom:5px;
}
#spot_index_faqs > .base > section > div > section > div{ font-size:var(--xs); }

/* 基本方針 */
#spot_policy > .base > div{
	font-size:var(--xs);
	border:1px solid var(--gray);
	padding:10px;
	overflow-y:scroll;
	height:300px;
	background:var(--silver);
}

/* フッターイラスト */
#spot_index_fillust{ margin-bottom:-50px; }

/**
 * スポット：ナレーター一覧
----------------------------------------------------------------*/
#spot_narrators > .narrators > li{ padding:20px; }
#spot_narrators > .narrators > li > figure > img{
	width:100%;
	height:auto;
}

/**
 * スポット：ご注文フォーム
----------------------------------------------------------------*/
#spot_order{ font-size:var(--xs); }
#spot_order .imagebox{ padding:20px 0; }
#spot_order .imagebox > .radiobox{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
#spot_order .imagebox > .radiobox > label{
	flex-basis:calc(33.3333% - 20px / 3);
	display:block;
}
#spot_order .imagebox > .radiobox > label > span{
	display:flex;
	align-items:center;
}
#spot_order .imagebox > .radiobox > label > span > img{
	border-radius:50%;
	width:60px;
	height:60px;
}
#spot_order .imagebox > .radiobox > label > span > span{
	flex-basis:100%;
	font-size:var(--m);
	font-weight:bold;
	margin-left:10px;
}
#spot_order .table{
	background:white;
	padding:30px 20px;
	border-radius:10px;
}
#spot_order .table > table tr > th[rowspan]{ border-bottom-width:1px; }
#spot_order .table > .h3:first-child{ margin-top:0; }
#spot_order .cd-upload-btn{
	border:1px solid #555;
	border-radius:4px;
	display:inline-block;
	padding:4px 10px;
}
#spot_order .cd-upload-btn:hover{ background:#eee; }
.richform label,
.richform textarea{ background:white; }
.wpcf7 form.sent .wpcf7-response-output{
	background:var(--pink);
	color:white;
	padding:20px;
	border:none;
	font-size:var(--l);
	text-align:center;
}
@media screen and (max-width: 768px)
{
	#spot_order .imagebox > .radiobox > label{ flex-basis:calc(50% - 10px / 2); }
	#spot_order .table table,
	#spot_order .table tbody,
	#spot_order .table thead,
	#spot_order .table tfoot,
	#spot_order .table tr,
	#spot_order .table th,
	#spot_order .table td{
		display:block;
	}
	#spot_order .table th[rowspan]{
		border:none;
		background:var(--navy);
		color:white;
		border-radius:4px;
	}
	#spot_order .table th:not([rowspan]){
		padding-bottom:0;
		border-bottom:none;
	}
	#spot_order .table td{
		padding-top:0;
		border-top:none;
	}
}