﻿/* CSS Document */

/* --- contact page --- */
section#formarea .contents { text-align: left;}
/* --- common --- */
@media only screen and (min-width: 768px) {
#top .box img { width: 12.6rem;}
section#formarea { padding: 5.5rem 0 9rem;}
}/* --- pc --- */
@media only screen and (max-width: 767px) {
#top .box img { width: 11.4rem;}
}/* --- sp --- */


/* --- page Contact --- */
.lower#contact section#formarea h2 { color: #0062AC; font-weight: 700;}
.lower#contact section#formarea .message { display: none;}
.lower#contact section#formarea .message * { display: inline-block;}
.lower#contact section#formarea .message h4 { margin-right: 1em;}
.lower#contact section#formarea .message p.error { color: #C30D23; }
.lower#contact section#formarea form > div { border-bottom: 1px dotted #ccc; }
.lower#contact section#formarea form > div:nth-of-type(1) { border-top: 1px dotted #ccc; }
.lower#contact section#formarea form span { display: inline-block; background-color: #C30D23; color: #fff;  line-height: 1.1rem; padding: 0 0.4rem; border-radius: 0.3rem; }
.lower#contact section#formarea form span.error-txt { color: #C30D23; background-color: transparent; line-height: 1.5;}
.lower#contact section#formarea form > div#contactBody .group p a { color: #00913A; text-decoration: underline;}
.lower#contact section#formarea form > div#contactChoice { border-bottom: none;}
.lower#contact section#formarea .formbtn { display: block; text-align: center; border-bottom: none;}
.lower#contact section#formarea div.formbtn p.link.rnd { display: block; text-align: center; width: 100%; margin: 0;}
.lower#contact section#formarea div.formbtn p.link.rnd button { display: block; width: 21.8em; line-height: 3.3; border-radius: 1.65em; margin: 2rem auto 0; border: none; background-color: #E4007A; color: #fff;}
.lower#contact section#formarea div.formbtn p.note { display: block; width: 100%; font-size: 0.6rem; margin-top: 1em;}
.lower#contact section#formarea .formbtn button span { background-color: transparent; font-size: 100%; font-weight: 600;}
.lower#contact section#formarea .formbtn button span.t1 {display:inline;}
.lower#contact section#formarea .formbtn button span.t2 {display:none;}
.lower#contact section#formarea .formbtn button.submit span.t1 { display: none;}
.lower#contact section#formarea .formbtn button.submit span.t2 {display:inline;}

@media only screen and (min-width: 768px) {
.lower#contact section#formarea h2 { font-size: 1.15rem; margin-bottom: 1em;}
.lower#contact section#formarea .contents > p.sub { margin-bottom: 2rem;}
.lower#contact section#formarea .contents > p.sub strong { font-size: 235%; vertical-align: middle; margin-left: 0.75em; }
.lower#contact section#formarea .message { text-align: center; margin: -1rem 0 1rem;}
.lower#contact section#formarea form > div { padding: 1rem 0; display: flex; justify-content: space-between; }
.lower#contact section#formarea form > div > p { width: 18%; margin-top: 0.25rem;}
.lower#contact section#formarea form > div > p > span { float: right; }
.lower#contact section#formarea form > div > p::after { content: ""; clear: both;}
.lower#contact section#formarea form > div > div { width: 76%;}
.lower#contact section#formarea form { font-size: 0.9rem;}
.lower#contact section#formarea form p,
.lower#contact section#formarea form label { line-height: 1.5rem; }
.lower#contact section#formarea form input,
.lower#contact section#formarea form textarea,
.lower#contact section#formarea form select { font-size: 1rem; line-height: 1; padding: 0.25rem; }
.lower#contact section#formarea form label,.lower#contact section#formarea form input[type="checkbox"],.lower#contact section#formarea form input[type="radio"] { cursor: pointer;}
.lower#contact section#formarea form span { font-size: 0.7rem; padding: 0 0.4rem; margin: 0.3em 0 0;}
.lower#contact section#formarea form span.error-txt { display: block; float: none; clear: both; margin-left: -0.5em;}
.lower#contact section#formarea form input[type="text"],
.lower#contact section#formarea form textarea { width: 38rem;}
.lower#contact section#formarea form input[type="text"].half { width: 18rem; margin-right: 1rem;}
.lower#contact section#formarea form #mailinput input[type="text"]:nth-of-type(2) { margin-top: 1.5rem;}
.lower#contact section#formarea form > div#contactChoice div.shelf { display: inline-block; margin-right: 2rem;}
.lower#contact section#formarea form > div#contactBody .shelf { margin-top: 0.5rem;}
.lower#contact section#formarea form > div#contactBody .shelf span { margin-left: 0.5rem;}
.lower#contact section#formarea form > div#contactBody .group p { margin-top: 0.5rem; margin-bottom: 1rem; padding-left: 1em; }
.lower#contact section#formarea div.formbtn p.link.rnd button { font-size: 1rem;  cursor: pointer;}
.lower#contact section#formarea div.formbtn p.link.rnd button:hover { background-color: #0062AC;}
}/* --- pc --- */

@media only screen and (max-width: 767px) {
.lower#contact section#formarea {  padding: 2.5rem 0 7rem; }
.lower#contact section#formarea h2 { font-size: 1.15rem; margin-bottom: 1em;}
.lower#contact section#formarea .contents > p.sub { margin-bottom: 1rem;}
.lower#contact section#formarea .contents > p.sub strong { font-size: 200%; vertical-align: middle; margin-left: 0.75em; }
.lower#contact section#formarea .message { margin: 1rem 0;}
.lower#contact section#formarea form > div { padding: 2rem 0 1.5rem 0;  }
.lower#contact section#formarea form > div > p { margin-bottom: 0.4rem;}
.lower#contact section#formarea form p, .lower#contact section#formarea form label { font-size: 1.2rem; line-height: 1.5;}
.lower#contact section#formarea form span { font-size: 0.8rem;  line-height: 2; vertical-align: baseline; margin-left: 1.5em; }
.lower#contact section#formarea form span p.link span { margin-left: 0;}
.lower#contact section#formarea form input,.lower#contact section#formarea form select, .lower#contact section#formarea form textarea { box-sizing: border-box; margin-top: 0.5rem; font-size: 1.25rem; line-height: 2rem; padding: 0.5rem;}
.lower#contact section#formarea form input[type="checkbox"],.lower#contact section#formarea form input[type="radio"] { font-size: 1.4rem; line-height: 2rem; vertical-align: baseline; margin-right: 0.5rem; }
.lower#contact section#formarea form div.group { width: 100%; display: flex; justify-content:space-between; flex-flow: wrap row; font-size: 0; }
.lower#contact section#formarea form > div#contactChoice  div.group { justify-content: start; }
.lower#contact section#formarea form > div#contactChoice  div.group div.shelf {  margin-right: 2rem;}
.lower#contact section#formarea form div.group .half { display: block; width: 48%;}
.lower#contact section#formarea form #mailinput input[type="text"]:nth-of-type(2) { margin-top: 1rem;}
.lower#contact section#formarea form #mailinput input[type="text"],
.lower#contact section#formarea form textarea { width: 100%;}
.lower#contact section#formarea form > div#contactBody .shelf { margin-top: 1rem; margin-bottom: 0.5rem;}
.lower#contact section#formarea form > div#contactBody .group p { margin-left: 1.6rem; }
}/* --- sp --- */
.lower#contact section#formarea form > div > p > span.hide { display: none;}

