@charset 'utf-8';

section {
position:relative;
overflow:hidden;
background:#FFF;
box-shadow:0 0 16px #FFF,0 0 8px #BCC,0 0 4px #889;
border-radius:16px;
color:#566; text-shadow:0 1px 1px #BCC;
margin:0 32px;
}
section > .inner { padding:24px;}
@media screen and ( max-width:768px ){
section { margin:0 16px;}
section > .inner { padding:8px;}
}
@media screen and ( max-width:480px ){
section { border-radius:0; margin:0;}
}

/* text */
section .inner > :first-child { margin-top:0;}
section .inner > h1,
section .inner > h2,
section .inner > h3,
section .inner > p { position:relative; padding:8px;}
section .inner > h1 { font-size:24px;}
section .inner > h2 { font-size:18px; margin-top:16px;}
section .inner > h3 { font-size:16px;}
section .inner > p { font-size:14px; line-height:1.5;}
section .inner > p span { color:#F66;}
@media screen and ( max-width:768px ){
section .inner > h1 { font-size:20px;}
section .inner > h2 { font-size:16px;}
section .inner > h3 { font-size:14px;}
section .inner > p { font-size:12px;}
}
/* text */

/* form */
form ::placeholder { color:#899;}
form input[type='text'],
form input[type='button'],
form input[type='submit'],
form textarea,
form label,
form select { font-size:16px;}
form input[type='text'],
form textarea {
display:block; max-width:400px; width:100%;
background:#FFF;
box-shadow:0 2px 2px rgba(0,0,0,25%) inset;
border:solid 1px; border-color:#566 #899 #BCC;
padding:0.5em; margin:8px auto 0;
}
form input[type='text'] { text-align:center;}
form textarea { height:8em; line-height:1.5; resize:vertical;}
form input[type='radio'] { display:none;}
form label {
display:flex; justify-content:center; align-items:center;
width:100%;
color:#CDD; text-shadow:0 1px 1px rgba(0,0,0,75%);
padding:14px 8px;
cursor:pointer;
}
form input[type='radio']:checked + label {
background:linear-gradient(#223,#000,#344);
box-shadow:0 2px 2px rgb(0,0,0,50%);
color:#FFF;
}
form select {
background:linear-gradient(#FFF,#DEE);
box-shadow:0 2px 2px rgb(0,0,0,50%);
border:solid 1px; border-color:#BCC #899 #566;
border-radius:0;
color:#233; text-align:center;
padding:0.25em;
}
form option { background:#000; color:#FFF;}
form input[type='button'],
form input[type='submit'] {
display:block; width:160px;
background:linear-gradient(#233,#112,#000);
box-shadow:0 2px 2px rgba(0,0,0,50%);
border:0;
color:#FFF;
padding:1em; margin:8px;
cursor:pointer;
}
@media screen and (max-width:768px){
form input[type='text'],
form input[type='button'],
form input[type='submit'],
form textarea,
form label,
form select { font-size:14px;}
}
/* form */

/* sheet */
.sheet li { padding:8px;}
.sheet li > :nth-child(n+2) { margin-top:8px;}
.sheet h3 { font-size:14px;}
.sheet h3.mand:after { color:#F66; content:'\3010\5FC5\9808\3011';}/*「必須」*/
.sheet p { color:#677; font-size:12px; line-height:1.25;}
.set_submit,
.set_radio { display:flex; justify-content:center;}
.set_radio {
overflow:hidden; max-width:480px; width:100%; margin:0 auto;
background:linear-gradient(#666,#778,#9AA);
box-shadow:0 2px 2px rgba(0,0,0,25%) inset;
}
/* sheet */

/* check */
.check li { padding:8px;}
.check li > :nth-child(n+2) { margin-top:8px;}
.check li:nth-child(n+2):before {
display:block;
width:100%;
border-top:dotted 2px #DEE;
margin-bottom:16px;
content:'';
}
.check p { color:#677; font-size:12px; line-height:1.25;}
.check p.err { color:#F66; font-size:12px; line-height:1.2;}
.check h3 { font-size:16px;}
.check h3:empty:before { color:#BCC; content:'\672A\5165\529B';}/*「未入力」*/
/* check */

/* cauton */
.caution { padding:8px;}
.caution h3 { font-size:14px;}
.caution h3 + ul,
.caution h3 + ol { margin-top:8px;}
.caution li {
position:relative;
font-size:12px; line-height:calc(1em + 4px); text-align:left;
}
.caution li > ul,
.caution li > ol { margin-left:1em; list-style-type:none;}
.caution li + li,
.caution li > ol { margin-top:4px;}
.caution span { color:#F66;}
.caution ul > li { padding-left:1em;}
.caution ol > li { padding-left:2em;}
.caution ul > li:before,
.caution ol > li:before { position:absolute; left:0; top:0;}
.caution ul > li:before { content:'\203b';}
.caution ol { counter-reset:c;}
.caution ol > li:before {
width:1.5em;
counter-increment:c 1;
content:counter(c)'.';
text-align:right;
}
@media screen and (max-width:768px){
.caution h3 { font-size:12px;}
.caution li { font-size:10px;}
}
/* cauton */