@charset "utf-8";

/* ========================================
application.css
------------------------------------------

======================================== */
/** -webkit-transform-style: preserve-3d;*/

/* ---------------------------------------- 
 - body
---------------------------------------- */

/* ---------------------------------------- 
 - #container
---------------------------------------- */

/* ---------------------------------------- 
 - #Contents
---------------------------------------- */


#Contents {
	padding-bottom: 0;
}

/* ---------------------------------------- 
 - .section共通
---------------------------------------- */
#Contents .section {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}
#Contents .section img {
    width: 100%;
    height: auto;
}

#Contents .section h3.tab {
    padding: .25em 1em;
    background-color: #005aa0;
    color: #fff;
    display: inline-block;
}

#Contents .section span.required {
    width: 35px;
    box-sizing: border-box;
    padding: 0.2rem 0.5rem;
    margin-right: .25em;
    background-color: #e60012;
    border-radius: 6px;
    font-size: 11px;
    color: #fff;
    text-align: center;
}

#Contents .section .wrapper .table {
    padding: 3rem 2rem;
    background-color: #eff8fe;
    border: #005aa0 solid 2px;
}

/*table*/
#Contents .section .wrapper .table > dl {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    
    border-bottom: #82c1ea solid 1px;
    margin-bottom: 1.5em;
    position: relative;
}
#Contents .section .wrapper .table > dl::before {
    content: "";
    width: 35px;
}
#Contents .section .wrapper .table > dl.required::before {
    content: "必須";
    top: 0;
    left: 0;
    width: 35px;
    box-sizing: border-box;
    padding: 0.2rem 0.5rem;
    background-color: #e60012;
    border-radius: 6px;
    font-size: 11px;
    color: #fff;
    text-align: center;
}

#Contents .section .wrapper .table > dl > dt {
    width: calc(13em - 35px);
    margin-right: 1em;
    padding-bottom: 1em;
}
#Contents .section .wrapper .table > dl > dd {
    width: calc(100% - 13em - 25px);
    padding-left: 1em;
    padding-bottom: 1em;
}
#Contents .section .wrapper .table > dl dl.child {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
	margin-left: 0.6em;
}
#Contents .section .wrapper .table > dl dl.child dt {
    width: 5em;
    margin-right: 1em;
}

#Contents .section .wrapper .table > dl dt {
    text-align: right;
}
#Contents .section .wrapper .table > dl dd a {
    color: #e60012;
    text-decoration: underline;
}
#Contents .section .wrapper .table > dl dd .note {
    font-size: 14px;
}
#Contents .section .wrapper .table > .form_buttons {
    clear: both;
    padding: 10px 0px;
    text-align: center;
}
@media screen and (max-width: 768px) {
#Contents .section {
    margin-bottom: 20px;
}
#Contents .section .wrapper .table > dl {
    display: block;
}
#Contents .section .wrapper .table > dl > dd {
    width: 100%;
    padding-left: 0;
}
#Contents .section .wrapper .table > dl dl.child {
    display: block;
	margin-left: 0;
}
#Contents .section .wrapper .table > dl dt {
    text-align: left;
}
#Contents .section .wrapper .table > dl dd .note {
    padding-left: 0 !important;
}
}

/*form parts*/
#Contents .section .wrapper .table > dl dd input[type=text],
#Contents .section .wrapper .table > dl dd input[type=email],
#Contents .section .wrapper .table > dl dd input[type=tel],
#Contents .section .wrapper .table > dl dd input[type=password]{
    width: 53rem;
}
#Contents .section .wrapper .table > dl dd textarea {
    width: 100%;
}
#Contents .section .wrapper .table > dl dd select {
    font-size: 14px;
}
#Contents .section .wrapper .table > dl dd input,
#Contents .section .wrapper .table > dl dd select {
    margin-bottom: 1rem;
}
#Contents .section .wrapper .table > dl dd input[type=checkbox] {
    padding: 1rem;
}

#Contents .section .wrapper .table > dl dl.child dd  input[type=text] {
	width: 22rem;
	font-size: 14px;
	padding: 2px;
}
::placeholder {
  color: #333;
}

#Contents .section .wrapper .table > dl.name dd input,
#Contents .section .wrapper .table > dl.nameKana dd input {
    width: 24rem;
}
#Contents .section .wrapper .table > dl.postal dd input,
#Contents .section .wrapper .table > dl.numberOfPeople dd input {
    width: auto;
}
#Contents .section .wrapper .table > dl.address dd input {
    width: 46rem;
}
#Contents .section .wrapper .table > dl.contentDetail::before {
    content: none;
    width: 0;
}
#Contents .section .wrapper .table > dl.contentDetail > dt {
    width: 13em;
}
#Contents .section .wrapper .table > dl.contentDetail dd textarea {
    height: 28em;
}
#Contents .section .wrapper .table > dl.contentDetail2 dd textarea {
    height: 10em;
}
#Contents .section .wrapper .table > dl.tourFacility dd label {
    font-size: 1.4rem;
} 
#Contents .section .wrapper .table > .form_buttons button {
    padding: 3px 10px;
    margin: 0 20px;
    text-align: center;
}
@media screen and (max-width: 768px) {
#Contents .section .wrapper .table > dl dd input[type=text],
#Contents .section .wrapper .table > dl dd input[type=email],
#Contents .section .wrapper .table > dl dd input[type=tel],
#Contents .section .wrapper .table > dl dd input[type=password]{
    width: 100%;
}
#Contents .section .wrapper .table > dl.contentDetail dd textarea {
    height: 14em;
}
#Contents .section .wrapper .table > dl.tourFacility dd label {
    display: block;
} 
}

/* ---------------------------------------- 
 - #ApplicationForm
---------------------------------------- */
#Contents #ApplicationForm {
    margin-top: -7rem;
    padding-top: 22rem;
}
@media screen and (max-width: 768px) {
	#Contents #ApplicationForm {
		padding-top: 17rem;
	}
}

#Contents #ApplicationForm .wrapper h3.application_ttl {
    padding: 0.4em;
    font-weight: 500;
    font-size: 2.8rem;
    color: #fff;
    background-color: #0080cb;
    border-left: #005aa0 solid 5px;
    line-height: 1;
    display: inline-block;
}
#Contents #ApplicationForm .wrapper h3 + p {
    padding-top: 1em;
    font-weight: 500;
    font-size: 1.9rem;
    color: #0080cb;
}
#Contents #ApplicationForm .wrapper p.txt {
    padding-top: .25em;
}
/*application_overview1*/
#Contents #ApplicationForm .wrapper .application_overview1 {
    padding-top: 2em;
}
#Contents #ApplicationForm .wrapper .application_overview1 dl {
    padding-bottom: 1em;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
#Contents #ApplicationForm .wrapper .application_overview1 dt {
    width: 7em;
    margin-right: 1em;
    padding: .5em;
    border: #e60012 solid 1px;
    line-height: 1;
    text-align: center;
}
/*application_overview2*/
#Contents #ApplicationForm .wrapper .application_overview2 {
    padding-top: 1em;
}
#Contents #ApplicationForm .wrapper .application_overview2 dl {
    padding-bottom: 1em;
}
#Contents #ApplicationForm .wrapper .application_overview2 dt {
    border-bottom: #000 solid 1px;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}
#Contents #ApplicationForm .wrapper .application_overview2 dl dd {
    margin-left: 1em;
}
#Contents #ApplicationForm .wrapper .application_overview2 dl:first-of-type dd {
    padding-top: .25em;
    margin-left: .7em;
    font-size: 2.3rem;
}
@media screen and (max-width: 768px) {
#Contents #ApplicationForm .wrapper .application_overview1 dl {
    padding-bottom: 1em;
    display: block;
}
#Contents #ApplicationForm .wrapper .application_overview2 dl:first-of-type dd {
    padding-top: .25em;
    margin-left: .7em;
    font-size: 1.6rem;
}
}