/* CSS Document */
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400&display=swap');
html {
    font-size: 62.5%;
}
body,th,td {
	font-family:verdana;
	-webkit-text-size-adjust:none;
	font-size: clamp(1.3rem, calc(1.1rem + 0.625vw), 1.8rem);
	line-height:1.4em;
	word-break:break-all;
}
/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
    font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}
/*最小値:1.2rem → 可変（1rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.7rem*/
.font-size-M {
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}
/*最小値:1.6rem → 可変（2.2rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:2.9rem*/
.font-size-L {
    font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}

a { outline:none; }
a img { border:none; }
a:link { color:#dd0d79; text-decoration:none; }
a:visited { color:#dd0d79; text-decoration:none; }
a:hover { color:#eea9cd; text-decoration:none; }
a:active { color:#333333; text-decoration:none; }

.f36 { font-size:36px; line-height:normal; }
.f30 { font-size:30px; line-height:normal; }
.f26 { font-size:26px; line-height:normal; }
.f24 { font-size:24px; line-height:normal; }
.f22 { font-size:22px; line-height:normal; }
.f20 { font-size:20px; line-height:normal; }
.f18 { font-size:18px; line-height:normal; }
.f16 { font-size:16px; line-height:normal; }
.f14 { font-size:14px; line-height:normal; }
.f12 { font-size:12px; line-height:normal; }
.f10 { font-size:10px; line-height:normal; }
.f8 { font-size:8px; line-height:normal; }
.mincho { font-family:"Noto Serif JP","ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif; }

.or-txt { color:#c85900; }
.red-txt { color:#ff0000; }
.blu-txt { color:#286fbf; }
.pnk-txt { color:#ff15af; }


/* タイトル＆エラー */
p.ttl {
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	line-height:1.4em;
	margin:0;
	padding:6px 0;
}
p.error {
	font-size:22px;
	font-size:2.2rem;
	font-weight:bold;
	line-height:1.4em;
	margin:0;
	padding:6px 0;
	color:#ec660c;
}

form { padding:0; margin:0; }
.selectbox {
	display: inline-block;
	margin:1em 5px;;
	position:relative;
}
/*.selectbox::after {
	content:"";
	display:block;
	width:8px;
	height:8px;
	position:absolute;
	right:8%;
	top:38%;
	border-bottom:#c6af93 3px solid;
	border-right:#c6af93 3px solid;
	transform:rotate(45deg)translateY(-30%);
}*/
select {
	-webkit-appearance:none;
    appearance:none;
	padding:1em 1em;
	margin:0 .4em;
	box-sizing:border-box;
	font-size:1em;
	border:#939393 1px solid;
	border-radius:36px;
	background:#e8e8e8;
	color: #222;
}

input[type="text"], input[type="password"] {
	background:#e8e8e8;
	border:#939393 1px solid;
	border-radius:36px;
	padding:16px;
	margin:6px;
	width: 64%;
	font-size:1em;
	color: #222;
}
textarea {
	background:#e8e8e8;
	border:#939393 1px solid;
	border-radius:6px;
	padding:16px;
	margin:6px;
	width: 80%;
	font-size:1em;
	color: #222;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	background:#fff;
	color: #222;
}
::placeholder {
	color: #8a8a8a;
}
input[type="date"], input[type="time"] {
	background: #e8e8e8;
	border:#939393 1px solid;
	border-radius:36px;
	padding:24px;
	margin: 8px 2px;
	font-size: 1.2em;
}

label {
	display: inline-block;
	position: relative;
	padding: 0;
	margin: 0 2px 6px;
	width: 102px;
	height: 40px;
	font-size: 1em;
	/*word-break: keep-all;*/
	cursor: pointer;
}
label.chkbox {
	width: 152px;
}
label span {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	padding-left: .4em;
	word-break: keep-all;
	transform: translate(-50%,-50%);
	z-index: 10;
}
label .chk {
	display: inline-block;
	position: absolute;
	top: 12px;
	left: 8px;
	border-left: 2px #939393 solid;
	border-bottom: 2px #939393 solid;
	width: 14px;
	height: 8px;
	transform: rotate(-38deg);
}

label::before,
label::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
	border-radius:36px;
}
label::before {
	background: #e8e8e8;
	border:#939393 1px solid;
	height: 40px;
	width: 100px;
  left: 0;
}
label::after {
	background: #939393;
	border:#939393 1px solid;
  opacity: 0;
  height: 40px;
  width: 100px;
  left: 0;
}
label.chkbox::before, label.chkbox::after {
	width: 150px;
}
input:checked + label::after {
  opacity: 1;
}
.visually-hidden {
 position: absolute;
 white-space: nowrap;
 border: 0;
 clip: rect(0 0 0 0);
 clip-path: inset(50%);
 overflow: hidden;
 height: 1px;
 width: 1px;
 margin: -1px;
 padding: 0;
}

.formbtn {
	background: #eb85c7;
	border: none;
	border-radius: 60px;
	margin: 20px 0;
	padding: 16px 0;
	width: 60%;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #fff;
}
.formbtn2 {
	background: #f1f1f1;
	border: none;
	border-radius: 60px;
	margin: 20px 0;
	padding: 10px 0;
	width: 60%;
	font-size: 1.2em;
	line-height: 1.2em;
	color: #787878;
}