@charset "utf-8";

/* ===================================================================
Style CSS
ウィンドウ幅[1024px～]の場合に適用
=================================================================== */

/* ===================================================================
各ページ共通
=================================================================== */

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

/*	h
--------------------------------------------------------------------*/
h2 {
padding: 1em 25px;
font-size: 2.4rem;
color: white;
background: #abb5aa;
}

h3 {
padding: 1em 25px;
border-bottom: 1px solid #ccc;
}

h4 {
padding: 1em 25px;
}

h5 {
  font-size:1.5rem;
  padding:1em 0;
  }

/*	header
--------------------------------------------------------------------*/
header {
width: 980px;
margin: 0 auto;
padding: 30px 0 0 0;
}

header ul {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-wrap: wrap;/* IE10 */
flex-wrap: wrap;
justify-content: space-between;
}

header #rila img {
width: 120px;
}

header #maeda img {
width: 200px;
}

/*	footer
--------------------------------------------------------------------*/
footer {
text-align: center;
}

/*	main
--------------------------------------------------------------------*/
.txt_attention,
.pp_check {
padding: 1em 25px;
}

.sec_form > p {
padding-right: 25px;
padding-left: 25px;
}

.txt_attention li {
  padding-bottom: 1rem;
}

.txt_attention li .txt_attention_need {
  color: #fb8720;
}

.txt_attention li::before {
content: '※';
}

.txt_attention li.small_txt {
font-size: 12px;
}

.pp_check {
text-align: center;
}

.thanks_page {
margin:0 0 30px 0;
padding: 30px;
border: 1px #ccc solid;
text-align: center;
}

.thanks_page p {
font-size: 16px;
}

/*	form
--------------------------------------------------------------------*/
/* ----- form error message start ----- */
.sec_name .msg_required,
.sec_ruby .msg_required {
max-width: 240px;
}

.sec_name span:last-child .msg_required,
.sec_ruby span:last-child .msg_required {
left: auto;
}

.sec_address .msg_required,
.sec_choice_info .msg_required {
bottom: -14px;
left: 0;
}
/* ----- form error message end ----- */

.sec_form {
padding-bottom: 35px;
}

.sec_form dl {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-wrap: wrap;/* IE10 */
flex-wrap: wrap;
padding-bottom: 35px;
}

.frm_customer_info {
border-top: 1px solid #ccc;
}

.sec_form dt {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-align: center;/* IE10 */
align-items: center;
-ms-flex-pack: justify;/* IE10 */
justify-content: space-between;
max-width: 320px;
width: 100%;
padding: 40px 25px;
border-bottom: 1px solid #ccc;
}

.sec_form dt:first-child {
  padding: 25px;
}

.frm_customer_info > dt {
background: #eee;
}

.sec_form dt span span {
  font-size: 10px;
  display: inline-block;
  line-height: 18px;
}

.sec_form dd {
position: relative;
max-width: 660px;
width: 100%;
padding: 40px 25px;
border-bottom: 1px solid #ccc;
}

.sec_name,
.sec_ruby,
.sec_age {
display: -ms-flexbox;/* IE10 */
display: flex;
justify-content: space-between;
}

.sec_age {
  justify-content: flex-start;
  align-items: center;
}

.sec_name > span,
.sec_ruby > span {
max-width: 240px;
width: 100%;
}

.sec_name > span:last-child,
.sec_ruby > span:last-child {
margin-left: 15px;
}

.sec_age > span {
  width: 100%;
  max-width: 100px;
}

.sec_age > span:last-child {
  margin-left: 10px;
  flex: 1;
}

.sec_form .sec_address,
.sec_form .sec_choice_info {
padding-bottom: 0;
}

.sec_address dt,
.sec_address dd,
.sec_choice_info dt,
.sec_choice_info dd {
padding: 20px 0;
border: none;
}

.sec_address dt,
.sec_choice_info dt {
width: 20%;
}

.sec_address dd,
.sec_choice_info dd {
width: 80%;
}

.sec_address .prt_select::after,
.sec_choice_info .prt_select::after {
top: -20px;
right: 15px;
}

.sec_address .ttl_post_num {
-webkit-box-direction: normal;/* Androidブラウザ用 */
-webkit-flex-direction: column;/* safari PC 用 */
flex-direction: column;
-ms-flex-pack: center;/* IE10 */
justify-content: center;
-ms-flex-align: start;/* IE10 */
align-items: flex-start;
}

.sec_address .ttl_build_name_num {
display: -ms-flexbox;/* IE10 */
display: flex;
-webkit-box-direction: normal;/* Androidブラウザ用 */
-webkit-flex-direction: column;/* safari PC 用 */
flex-direction: column;
-ms-flex-align: start;/* IE10 */
align-items: flex-start;
}

.sec_choice_info .txt_attention {
  padding: 0;
  font-size: 14px;
}

.caution{
  width: 90%;
  height: 180px;
  margin: 0 auto 30px;
  border: 1px solid #cbcbcb;
  overflow-y: scroll;
  padding: 20px;
}

.caution h5{
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 2.2rem;
}

.caution h6{
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 1.8rem;
}

.caution li{
  display: flex;
}

.caution ul{
  margin-bottom: 20px;
}

.caution li:before{
  content: '・';
  font-weight: bold;
}

.caution li:nth-last-child(n+2){
  margin-bottom: 0.375em;
}

.caution p:last-of-type{
  padding-bottom: 0;
  font-size: 1.8rem;
  text-align: center;
  font-weight: bold;
}

.check_area{
  width: 90%;
  margin: 0 auto 1.5em;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 500;
}

.colored{
  color: #fff;
  line-height: 2;
  background: #3776ff;
}

.check_area #confirm-check{
  margin-right: 5px;
}

form:invalid>#btn_submit {
  pointer-events: none;
  background:#ddd;
}
/*	check.php
--------------------------------------------------------------------*/
.form_check .sec_address dt {
font-weight: bold;
}

.btn_form {
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-pack: justify;/* IE10 */
justify-content: space-between;
}

.btn_form button {
width: 48%;
margin: 0;
}