@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size:100%;
	line-height:180%;
	color: #222;
	background:rgb(239, 238, 241);
}
img {
	border: none;
	vertical-align:bottom;
}
div, p, ul, ul li, h1, h2, h3, h4, h5, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
iframe { border: none;}
a:link {color:#06F; outline:none; }
a:visited {color:#06F;}
a:hover {color: #333;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70);}
span.material-icons { vertical-align: middle; margin-left: 10px;}
.pc {display:block;}
    .pctb {display:block;}
    .pcsp {display:block;}
.tb {display:none;}
    .tbsp {display:none;}
.sp {display:none;}
#wrapper { padding: 50px;}
#base { background: #ffff; margin: auto; max-width: 800px; width:100%;}
@media only screen and (max-width:768px){
    .pc {display:none;}
        .pctb {display:block;}
        .pcsp {display:none;}
    .tb {display:block;}
        .tbsp {display:none;}
    .sp {display:none;}
}
@media only screen and (max-width:468px){
    body { min-width:325px;}
    #wrapper { padding:2%;}
    .pc {display:none;}
        .pctb {display:none;}
        .pcsp {display:block;}
    .tb {display:none;}
        .tbsp {display:none;}
    .sp {display:block;}
}



/*---------------------------------------------------------------
    COMMON
---------------------------------------------------------------*/
#header h1 {}
#header h1 img { width: 100%; height: auto;}

#content {}
#content  h2 {
    padding: 15px;
	font-family: 'Klee One', cursive;
    font-size: 20px;
    color: #fff;
    text-align-last: center;
    background: #E8380D;
}
#content  h2 a { color: #fff;}
#content  h2 a:hover { color:#FFE500;}
#content  h3 {
    padding: 15px;
	font-family: 'Klee One', cursive;
    font-size: 18px;
    text-align-last: center;
    background:rgb(239, 238, 241);
}
#content .notes { font-size: 87.5%;}
#content .notes::before { content:"※"; }
#content p.notes { padding-left: 16px; text-indent: -16px;}

#content .notes1 { font-size: 87.5%;}
#content span.notes1 { padding-left: 16px; text-indent: -16px;}

#footer {  padding:20px 0  0; text-align: center;}
@media only screen and (max-width:768px){
    #header h1 span:nth-child(1) { font-size:25px;}
    #header h1 span:nth-child(2) { font-size:40px;}
}
@media only screen and (max-width:468px){
}



/*---------------------------------------------------------------
    INDEX
---------------------------------------------------------------*/
#toppage .come  {
    display: flex; flex-direction: column; gap:30px;
    padding: 5%;
}
#toppage dl {}
#toppage dt { margin-bottom: 5px; font-weight: bold; color: #1245a1;}
#toppage dd {}
#toppage .red { color: red;}
#toppage ul { display: flex; flex-direction:row; gap:30px;}
#toppage ul li { width: calc(50% - 15px);}
#toppage ul li a {
    display: block;
    padding: 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #e04023;
    border-radius:5px;
}
@media only screen and (min-width:768px){
    #toppage ul li a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #toppage ul { flex-direction:column; gap:15px;}
    #toppage ul li { width:100%;}
}
@media only screen and (max-width:468px){
    #toppage ul li a { padding: 20px 0; font-size: 87.5%;}
}



/*---------------------------------------------------------------
    ENTRY（thanks）
---------------------------------------------------------------*/
.thankscome { padding: 5%; text-align: center;}
.thankscome .btn { margin: auto; max-width:300px; }
.thankscome .btn a {
    display: block;
    padding: 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #555;
    border-radius:5px;
}
@media only screen and (min-width:768px){
    .thankscome .btn a:hover { opacity: 0.7;}
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
	.thankscome {text-align: left;}
}



/*---------------------------------------------------------------
    ENTRY（form）
---------------------------------------------------------------*/
#mail-box { position:relative; padding:5%;}
#mail-box .mailform { width:100%; border-top: 1px solid #ddd;}
#mail-box .mailform dl { display:flex; flex-direction: row; padding:15px; border-bottom:1px solid #ddd;}
#mail-box .mailform dt { width: 230px; font-weight: bold; padding-top: 10px; line-height: 130%;}
#mail-box .mailform dt small { font-weight: normal;}
#mail-box .mailform dd { width:calc(100% - 230px); display:flex; flex-direction: row; flex-wrap: wrap; gap:10px;}
#mail-box .mailform .flex_column { flex-direction: column;}
#mail-box .mailform .flex_column p { display:flex; flex-direction: row; gap:10px; line-height: 40px;}
#mail-box .mailform .flex_row { flex-direction: row;}
#mail-box .mailform .w100 { width: 100%;}
#mail-box .mailform .w50 { width:100px;}
#mail-box .come { margin:5% 0; }
#mail-box span.red { color:#FF0004; }
#mail-box .children { margin: 20px 0; padding: 5%; background:#f6f6f6;}
#mail-box .children dl:last-child {  border-bottom:none;}
@media only screen and (max-width:768px){
    #mail-box { padding:40px 5%;}
    #mail-box .mailform { border-top:none;}
    #mail-box .mailform dl { flex-direction: column; padding:0; border: none;}
    #mail-box .mailform dt { width: 100%; margin-bottom: 15px; padding: 15px; background: rgba(0,0,0,0.03);}
    #mail-box .mailform dd { width:100%; padding:  0 15px 35px;}
    #mail-box .children { padding:20px; background: rgba(0,0,0,0.03);}
}
@media only screen and (max-width:468px){
    #mail-box { padding:40px 10px;}
    #mail-box .mailform dd { flex-direction: column; padding:  0 10px 35px;}
    #mail-box .mailform .flex_column p { flex-wrap: wrap; line-height:150%; gap:0 10px 10px;}
    #mail-box .mailform .flex_column p span:nth-child(1) { width: 100%;}
}


#mail-box label { cursor: pointer; margin-right:15px;}
#mail-box input[type="tel"],
#mail-box input[type="text"],
#mail-box textarea {
	padding:10px;
    max-width: 100%;
	height: 40px;
	border:1px solid #ddd;
	background:#FFF;
	box-sizing:border-box;
	border-radius:5px !important;
}
#mail-box textarea { width:100%; height:120px;}
#mail-box select { padding:10px; height: 40px !important; border:1px solid #ddd; background:#FAFAFA; border-radius:5px !important;}
#mail-box input[type="file"] { display:block; padding:5px; background:#F6F6F6;}
@media only screen and (max-width:768px){
	#mail-box label {
		display:inline-block;
        max-width: 200px;
        width: auto;
		padding:10px 15px 10px 10px;
		background:#FFF;
		border:1px solid #DDD;
		border-radius:5px;
        box-sizing: border-box;
	}
}
@media only screen and (max-width:468px){
    #mail-box label { max-width:none; width:100%;}
}

.b_inqu { margin-top:30px; text-align:center !important;}
.b_inqu input[type="submit"],
.b_inqu input[type="reset"],
.b_inqu input[type="button"]{
    cursor:pointer;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	margin:0 10px;
	padding:0 10px;
	width:200px;
	height: 40px !important;
	font-weight:bold;
	font-size:100%;
	border:none;
	color:#FFF;
	border-radius:5px;
}
.b_inqu input[type="submit"] { background:#e04023;}
.b_inqu input[type="reset"] { background:#555;}
.b_inqu input[type="button"] { background:#555;}
.b_back { margin:40px auto 0; width:200px;}
.b_back a {
	display:block;
	padding:10px;
	color:#FFF;
	text-align:center;
	text-decoration:none;
	font-weight:bold;
	background:#555;
	border-radius:5px;
}

/* HOVER */
#mail-box input[type="text"]:focus,
#mail-box textarea:focus { background:#FFEFEF; transition:.3s;}
.b_inqu input[type="submit"]:hover,
.b_inqu input[type="reset"]:hover,
.b_inqu input[type="button"]:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}


/* CONFIRMATION and ERROR ---------------------------------------*/

#formWrap { padding:5%; }
#formWrap table.formTable { margin:20px 0; width:100%; border-top:1px solid #ddd;}
#formWrap table.formTable th,
#formWrap table.formTable td { padding:5px 10px; border-bottom:1px solid #ddd;}
#formWrap table.formTable th { width:35%; background:#f6f6f6; font-weight: normal; text-align: left;}
#formWrap table.formTable td { width:65%;}

/* CONFIRMATION */
#formWrap h4.mid1,
#formWrap h4.mid2 { margin-bottom: 20px; padding-bottom: 20px; text-align: center; font-size: 20px;}
#formWrap h4.mid1 {  border-bottom: 1px solid #555;}
#formWrap h4.mid2 { color: #FF4646; border-bottom: 1px solid #FF4646;}
#formWrap .come { margin:0 0 20px;}

/* ERROR */
#error .error_messe { padding:10px; background:#FFEFEF;}
@media only screen and (max-width:768px){
	#formWrap table.formTable { margin:20px 0; }
	#formWrap table.formTable { width:100%;}
	#formWrap table.formTable th,
	#formWrap table.formTable td {
		table-layout:auto !important;
		display:block !important;
		width:auto !important;
		height:auto !important;
		text-align:left;
		font-weight:normal;
		box-sizing:	border-box;
		border: none!important;
	}
}