@charset "utf-8";
/* CSS Document */
/* CSS Document */
/* Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  padding: 0;
  border: 0;
  outline: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0px;
  float: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}


/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  clear: none;
  float: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 3px;
  margin-right: auto;
  margin-left: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 15px;
  font-weight: normal;
}

img {
  line-hegiht: 0;
}

fieldset,
img {}

address,
caption,
cite,
code,
dfn,
em,
var {
  font-weight: normal;
  font-style: normal;
}

caption,
th {
  text-align: left;
  color: #000;
}

abbr,
acronym {
  border: 0;
}

/* //Reset// */
.clear {
  clear: both;
}

/*クリアフィックス*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
	list-style-type: none;
	line-height: 130%;
	text-align: left;
	color: #1d1d1d;
	font-size: clamp(18px, 22 / 780 * 100vw, 22px);
	box-sizing: border-box;
}


.sp{ display: none; }
/**********************
form
**********************/

#form{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 100px;
}

#form h1{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

#form h1 img{
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}

#form h2{
	width: 100%;
	margin: 0 auto clamp(25px, 50 / 780 * 100vw, 50px);
	text-align: center;
	font-size: clamp(20px, 40 / 780 * 100vw, 40px);
}

.main_text{
	width: 96%;
	margin: 0 auto clamp(25px, 50 / 780 * 100vw, 50px);
	text-align: center;
}

#form dl{
	width: 96%;
	margin: 0 auto clamp(25px, 50 / 780 * 100vw, 50px);
}

#form dt{
	width: 96%;
	margin: 0 auto clamp(15px, 30 / 780 * 100vw, 30px);
	padding: clamp(3px, 6 / 780 * 100vw, 6px) ;
	text-align: left;
	font-size: clamp(18px, 28 / 780 * 100vw, 28px);
	color: #fff;
	background-color: #d61518;
	display: flex;
	align-items: center;
	justify-content: center;
}

#form dd{
	width: 96%;
	margin: 0 auto clamp(60px, 120 / 780 * 100vw, 120px);
	text-align: center;
	display: block;
}

#form dd select{
	width: 70%;
	margin: 10px auto;
	padding: 10px;
	outline: none;
	text-align: center;
	/* border: #ccc solid 1px !important; */
	border: none !important;
	/* border-radius: 5px; */
	display: inline;
	background: #e8e8e8;
}


#form dd label{
	margin-right: clamp(20px, 40 / 780 * 100vw, 40px);
	position: relative;
}

#form dd label:last-child{
	margin-right: 00px;
}

#form dd input[type="radio"]{
	accent-color: #d61518;
	height: clamp(14px, 16 / 780 * 100vw, 16px);
    width: clamp(14px, 16 / 780 * 100vw, 16px);
	margin-right: clamp(2px, 4 / 780 * 100vw, 4px);
}

#form textarea{
	width: 100%;
	height: 200px;
	margin: auto;
	padding: 10px 0 0 10px;
	background: #e8e8e8;
	border: 1px solid #ddd;
}

#form textarea:focus{
	outline: none;
}

#form .btn_box{
	width: 100%;
	text-align: center;
}

/*その他入力*/
#form .other-input {
	margin-top: 15px;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: all 0.3s ease;
}

#form .other-input.show {
	opacity: 1;
	max-height: 200px;
}

#form .other-input input[type="text"] {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
	background: #e8e8e8;
}

#form .other-input input[type="text"]:focus {
	outline: none;
	/* border-color: #ff9800;
	box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1); */
}

/*利用回数*/
#form .visit-count-input {
	display: none;
	margin-left: 10px;
}

#form .visit-count-input.show {
	display: inline-block;
}

#form .visit-count-input input {
	width: 60px;
	padding: 2px 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#form input[type="submit"],
#form input[type="button"]{
	width: clamp(250px, 500 / 780 * 100vw, 500px);
	height: clamp(40px, 80 / 780 * 100vw, 80px);
	margin: clamp(10px, 20 / 780 * 100vw, 20px) auto;
	outline: none;
	background: #d61518;
	font-size: 24px;
	color: #fff;
	text-align: center;
	display: inline;
	cursor: pointer;
}


#form .back{
	width: clamp(250px, 500 / 780 * 100vw, 500px);
	height: clamp(40px, 80 / 780 * 100vw, 80px);
	margin: clamp(10px, 20 / 780 * 100vw, 20px) auto;
	outline: none;
	background: #d61518;
	font-size: 24px;
	color: #fff;
	text-align: center;
	display: inline;
	cursor: pointer;
}

/**********************
confirm
**********************/


/**********************
send
**********************/

#send_top{
	width: 100%;
	margin-top: 110px;
	padding: 150px 0;
	text-align: center;
	font-size: 30px;
}


#send_form,
#completion_form{
	width: 100%;
	max-width: 1100px;
	min-height: 300px;
	margin: 0 auto 100px;
	font-size: 24px;
	text-align: center;
}

#send_form button,
#completion_form button{
	width: 500px;
	height: 80px;
	margin: 5px auto;
	outline: none;
	background: #d61518;
	color: #fff;
	text-align: center;
	display: inline;
}



/****************************
tab
*****************************/
@media screen and (max-width: 1400px) {

	* {
		font-size: clamp(18px, 20 / 780 * 100vw, 20px);
	}

	#form dd label{
		margin-right: clamp(10px, 20 / 780 * 100vw, 20px);
	}

}


/****************************
sp
*****************************/
@media screen and (max-width: 780px) {

	.sp { display: block;}

	#form dt{
		justify-content: start;
		text-align: left !important;
	}
	
	#form dd{
		text-align: left;
		line-height: 2em;
	}

	#form dd select{
		width: 100%;
	}

}