@charset "utf-8";

:root{
  /* 深雪（headerの白〜淡青紫＋黒＋赤） */
  --yuki-ink: #1f2436;     /* 墨紺（枠・影） */
  --yuki-ice: #dfe1ee;     /* 氷の淡色 */
  --yuki-lav: #c3c8e1;     /* 淡い青紫 */
  --yuki-snow: #ffffff;    /* 雪白 */
  --yuki-red: #e60000;     /* ボタン/アクセント */
  --yuki-text: #111111;
}

#title{ background: url(kensakutop79.png) center center; background-repeat:no-repeat; background-size:cover; margin:0 auto; }

@media screen and (max-width: 1020px)
{
	body{ font-size:1.5em; line-height:42px; padding: 20px 0;}
	h1{ font-size:40px; }
	#title{ width:80%; height:calc( 80vw / 6.66); }
	ul.sort{ display: -webkit-flex; display: flex; flex-wrap : wrap; margin:auto; list-style-type: none;  justify-content: space-around; }
}

@media screen and (min-width: 1021px)
{
	body{ font-size:20px; line-height:30px; padding: 20px;}
	h1{ font-size:26px; }
	#title{ width:800px; height:120px; }
	ul.sort{ display: -webkit-flex; display: flex; flex-wrap : wrap; margin:auto; list-style-type: none;  justify-content: space-around; }
}

body {
	text-align: center;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	color: var(--yuki-text);
}

body#mood::before {
  /* background: url(wall.jpg) no-repeat center; */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(223,225,238,0.78)),
    radial-gradient(circle at 20% 20%, rgba(195,200,225,0.45), rgba(195,200,225,0) 55%),
    radial-gradient(circle at 80% 35%, rgba(205,210,230,0.55), rgba(205,210,230,0) 60%);
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;/* 横幅いっぱい */
  height: 100vh;/* 縦幅いっぱい */
}

h1{ }

@media screen and (max-width: 1020px)
{
	h1 {
		margin-bottom: 20px;
		padding: 20px 0;
		color: var(--yuki-red);
		font-size: 30px;
		border-top: 1px solid var(--yuki-ink);
		border-bottom: 1px solid var(--yuki-ink);
		text-align:center;
	}
}

@media screen and (min-width: 1021px)
{
	h1 {
		margin-bottom: 20px;
		padding: 20px 0;
		color: var(--yuki-red);
		font-size: 24px;
		border-top: 1px solid var(--yuki-ink);
		border-bottom: 1px solid var(--yuki-ink);
		text-align:center;
	}
}
	
h2{ line-height:2em; }

#title {
	text-align:center;
	margin-bottom: 20px;
	font-size: 18px;
	line-height:36px;
	user-select:none;
}

/* 画像メニュー */

ul{ }
ul li{ font-size:16px; line-height: 1.7em;}

ul.sort{ list-style-type: none; margin:0;}
ul.sort li{ font-size:16px; line-height: 1.7em;}

#gallery{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-weight:bold;
	font-size:16px;
	margin: 0;
	text-align:left;
	padding:0;
	/* background:aqua;*/
}

#gallery a{

}

#sl{
	display:block;
	background: rgba(255,255,255,0.86);
	padding:5px;
	border:1px solid var(--yuki-ink);
}

@media screen and (max-width: 1020px)
{
	#sl { width:100%; margin:0px 0px 0px -40px;}
}

@media screen and (min-width: 1021px)
{
	#sl { margin:0px 10px 10px;}
}

#square{
	float:left;
	background-size:cover;
	background-position: center center;
	background-repeat:none;
}

@media screen and (min-width: 1021px)
{
	#square, #square a{
		height:105px;
		width:340px;
		margin:0px;
	}
}

@media screen and (max-width: 1020px)
{
	#square, #square a{
		height:210px;
		width:680px;
		margin:0px;
	}
}

@media screen and (max-width: 750px)
{
	#square, #square a{
		float:none !important;
		height:calc( (100vw - 72px) * 0.31 );
		width:calc(100vw - 72px);
		margin:0px;
	}
}

#square a{
	display:block;
}

#square a:hover{
	background:hsla(360,100%,100%,0.3);
}

#printselect{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "小塚明朝 Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	float:left;
}

@media screen and (max-width: 1020px)
{
	#printselect{
		margin:70px 0 0 10px;
		font-size:32px;
	}
}

@media screen and (min-width: 1021px)
{
	#printselect{
		margin:30px 0 0 5px;
		font-size:22px;
	}
}


#sakuin{
	font-size:24px;
	text-align:center;
	padding:20px;
}

#fend{
	clear:both;
}

#infoarea{
	padding:0;
	float:left;
}


/* 画像メニュー終了 */

input[type=text] {
	padding: 5px 10px;
	border: 1px solid var(--yuki-lav);
	border-radius: 3px;
	background: #ffffff;
}

@media screen and (max-width: 1020px)
{
	input[type=text] {	font-size: 2em; width:100%; }
	#yuubin { width:200px;}
	label {	display: inline-block;	font-size: 30px; font-weight: bold;	width: 100%;	vertical-align: top;	margin-top:3px;	}
	input[type="radio"],input[type="checkbox"] { transform:scale(2); margin-top:-3px; margin-right:10px; }
}

@media screen and (min-width: 1021px)
{
	input[type=text] {	font-size: 15px; width:100%; }
	#yuubin { width:100px;}
	label {	display: inline-block;	font-size: 20px; font-weight: bold;	width: 250px;	vertical-align: top;	margin-top:3px;	}
}

input[name=btn_confirm],
input[name=btn_send],
input[name=btn_back] {
	margin-top: 10px;
	padding: 5px 20px;
	font-size: 100%;
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	box-shadow: 0 3px 0 #a80000;
	background: var(--yuki-red);
}

input[name=btn_back] {
	margin-right: 20px;
	box-shadow: 0 3px 0 #777;
	background: #999;
}

.element_wrap {
	padding: 7px 30px;
	border-bottom: 1px solid #ccc;
	text-align: left;
	z-index:100;
}

.element_wrap p {
	display: inline-block;
	margin:  0;
	text-align: left;
}

#bromidecheck{
	text-align:left; 
	background:white;
	border-radius:20px;
	padding:20px;
	line-height:2em;
	width:fit-content;
	margin-left:10px;
}

#bromidecheck2{
	text-align:center; 
	background:white;
	border-radius:20px;
	padding:20px;
	line-height:2em;
	width:fit-content;
	margin:0 auto;
}


#bromidewrap { font-size:1.5em;  vertical-align: top; }
#bromidename { display:inline-block; font-weight: bold; }
#bromidetitle {	display:inline-block; margin-left:1em; }

label[for=selectmuki],
label[for=selectfontA],label[for=selectfontB],label[for=selectfontC],label[useimg]
{
	margin-right: 10px;
	width: auto;
	font-weight: normal;
}

textarea[name=通信欄] {
	padding: 5px 10px;
	width: 60%;
	height: 100px;
	font-size: 86%;
	border: 1px solid var(--yuki-lav);
	border-radius: 3px;
	background: #ffffff;
}

.error_list {
	padding: 10px 30px;
	color: #ff2e5a;
	font-size: 86%;
	text-align: left;
	border: 1px solid #ff2e5a;
	border-radius: 5px;
}

#orderdata{ opacity:0; user-select:none; }
#orderinfo{ }
#property{ display:none; text-align:left; background:white; color:black; border:5px double #00FF00; border-radius:20px; margin:20px 20px 100px 20px; padding:20px; }

#tg { display:inline-block; transform:rotate(-90deg); }
#tm_3s { display:inline-block; transform:rotate(-90deg) translateX(7px) translateY(-7px); }
#tm_xs { display:inline-block; transform:rotate(-90deg) translateX(9px) translateY(-9px); }
#tm_s { display:inline-block; transform:rotate(-90deg) translateX(11px) translateY(-11px); }
#tm_m { display:inline-block; transform:rotate(-90deg) translateX(13px) translateY(-13px); }
#tm_l { display:inline-block; transform:rotate(-90deg) translateX(18px) translateY(-18px); }

table{
  width: 100%;
  border-collapse: collapse;
}

table tr{
  border-bottom: solid 2px white;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  text-align: left;
  width: 20%;
  color: white;
  padding: 10px;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
}

table td{
  text-align: left;
  width: 80%;
  background-color: #eee;
  padding: 10px 10px 10px 20px;
}

table#kiyaku th{
  background-color: #5e6aa6;
}

table#kiyaku th:after{
  border-left: 10px solid #5e6aa6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table#privacy th{
  background-color: #8b91c6;
}

table#privacy th:after{
  border-left: 10px solid #8b91c6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}