@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700,900|Noto+Serif+JP:300,400,500,700,900&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Josefin+Slab:300&display=swap');

/*----- reset -----*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, 
u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 16px;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

/*----- common -----*/
body { background-color: #fff; color: #333; font-family: 'Noto Sans JP', sans-serif; font-weight:400;font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea {font-family : inherit;font-size : 100%;}
img{max-width: 100%;height: auto;width /***/:auto;}

.clearfix:after{content:"";display:block;clear:both;}

sub{font-size:0.7em;}
.t_center,.textC{text-align:center;}
.t_right,.textR{text-align:right;}
.t_left,.textL{text-align:left;}
.t_bold {font-weight: bold;}
.t_red{color:#d00;}
.img_left {float: left;margin: 5px 15px 5px 0;}
.img_right { float:right; margin:5px 0 5px 15px;}
.img_right p{ padding-bottom:5px;}
.nowrap,.tbl_nowrap{white-space: nowrap;}
header,footer,article{width: 100%;}
header{margin:10px 0 10px;padding:0;}
article{padding:5px 0 60px; }
footer{margin: 20px auto 20px;text-align: center;}
.inner {width: 100%;max-width: 1000px;margin: auto; padding:0 15px;}

#order_form {max-width: 600px;margin: auto; padding:0 15px;line-height: 1.6em;}
#order_form .notice{font-size: 90%;}

#top_title{max-width:450px;margin:20px auto 40px;}
#top_title h1{text-align: center;}
#top_title p{line-height: 1.6em;padding-left: 1.5em;text-indent: -1em;}
#top_title .notice{    text-decoration: #f00 wavy underline;}


input[type="text"],input[type="email"]{width: 100%;padding: 0 0.5em;}
label.membership{margin: 0 3em 0 0.5em;}
#quantity{text-align: center;padding-left: 1em;margin-right: 0.5em;}

.form_1 dt,.form_2 dt{margin-top: 0.8em;}
.form_2{margin-top: 2em;border-top: dotted 1px #999;}

#calculation{width: 100%;margin: 20px 0;padding: 10px 20px; background-color: #eee;}
#calculation table{width: 100%;}
#calculation caption{text-align: left;}
#calculation table td{padding:5px; text-align: right;}
#calculation table tr:first-child td:first-child{width: 200px;}
#calculation table td:last-child{width: 200px;}
#calculation table tr.total_row{border-top: #333 solid 1px;}


#order_notice{margin: 2em 0;padding: 0.5em 0.5em 0.5em 2em; border: #333 1px solid;}
#order_notice dt{margin-left: -1.5em;}
#order_notice dd{display: list-item;list-style-type:disc;}

.submit_btn{text-align: center;}
input[type="submit"]{display:inline-block;padding:0.5em 1em;}
::placeholder {color: #aaa;}

.thanks_body{margin:100px 0 200px; text-align: center;line-height: 1.8em;}
.thanks_body h2{margin-bottom: 1em; font-size: 1.5em;font-weight: 600;}


/*----- ページレイアウト（スマホ、タブレット縦）-----*/
@media (max-width : 320px) {
  .spbr320:before{content:"\A";white-space: pre;}
}
@media (max-width : 375px) {
}

@media (max-width : 768px) {
  .pc {display: none;}
}


@media (min-width: 769px) {
  .sp {display: none;}

}



