@charset "UTF-8";
/* Scss Document */
/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
base
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */
#contents { margin: 100px 100px 0; padding: 0; }
#contents dl.telNum { width: 800px; margin: 50px 0 0; padding: 0; display: inline-block; border: 1px solid #231815; }
#contents dl.telNum dt { margin: 0; padding: 20px 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; }
#contents dl.telNum dt img { margin: 0 10px 0 0; padding: 7px; background-color: #FFF; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#contents dl.telNum dd { margin: 0; padding: 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#contents dl.telNum dd p:last-of-type { margin: 25px 0 0 30px; }

@media (max-width: 1180px) { #contents { margin: 100px 40px 0; } }
@media (max-width: 900px) { #contents dl.telNum { width: 100%; } }
@media (max-width: 700px) { #contents dl.telNum dd { display: -webkit-block; display: -moz-block; display: -ms-block; display: -o-block; display: block; }
  #contents dl.telNum dd p:last-of-type { margin: 10px 0 0; } }
@media (max-width: 640px) { #contents { margin: 100px 20px 0; }
  #contents dl.telNum dt { padding: 20px; }
  #contents dl.telNum dd { padding: 30px 20px; } }
/* メールフォーム */
#mailform { margin: 80px 0 0; padding: 80px 0 0; border-top: 1px solid #e7e9ef; }
#mailform .attention { width: 800px; margin: 30px 0 0; padding: 30px; display: inline-block; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#mailform .attention p img { margin: 0 auto 5px; display: block; }
#mailform .attention ul { margin: 0 0 0 30px; padding: 0; list-style: none; display: inline-block; }
#mailform .attention ul li { margin: 0 0 10px; padding: 0 0 0 13px; position: relative; }
#mailform .attention ul li::before { content: ''; width: 8px; height: 8px; position: absolute; top: 50%; left: 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #e60012; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
#mailform .attention ul li:last-child { margin: 0; }

@media (max-width: 900px) { #mailform .attention { width: 100%; } }
#php_form { margin: 60px 0 0; padding: 0; }
#php_form dt { width: 30%; margin: 20px 0 0; padding: 0; display: inline-block; float: left; clear: both; }
#php_form dt .requiredMark { margin: 0 0 0 20px; padding: 0 10px; }
#php_form dd { width: auto; margin: 0 0 20px; padding: 0 0 0 30%; }
#php_form dd p.adrField { width: 100%; margin: 20px 0 0; }
#php_form dd p.adrField input { width: 100%; }
#php_form dd input { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 70px; padding: 18px 5px; font-size: 16px; background-color: #FFF; border: 1px solid #231815; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#php_form dd input.itext { width: 100%; }
#php_form dd input.small { width: 30%; }
#php_form dd label { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
#php_form dd label input[type=checkbox] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; width: 20px; height: 20px; padding: 0; }
#php_form dd select { -webkit-appearance: button; -moz-appearance: button; appearance: button; width: 40%; height: 50px; padding: 8px 5px; font-size: 16px; display: block; background-color: #FFF; border: 1px solid #231815; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#php_form dd textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 240px; padding: 8px 5px; font-size: 16px; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif; background-color: #FFF; border: 1px solid #231815; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#php_form dd div { margin: 10px 0 0; padding: 40px; }
#php_form dd div p { width: 400px; height: 60px; margin: 30px auto 0; padding: 0; display: block; }
#php_form dd div p a { width: 100%; height: 100%; padding: 22px 0; color: #FFF; display: block; background-color: #AAA; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: 0.1s linear; }
#php_form dd div p a span { padding: 0 35px 0 0; background-image: url("../img/common/svg/ar01.svg"); background-position: right center; background-repeat: no-repeat; background-size: 15px 21px; }
#php_form dd div p a:hover { color: #231815; text-decoration: none; background-color: #FFF; }
#php_form dd div p a:hover span { background-image: url("../img/common/svg/ar01_bl.svg"); }

@media (max-width: 840px) { #php_form dt { width: 100%; margin: 0 0 15px; padding: 0 0 0 15px; display: block; float: none; position: relative; }
  #php_form dt::before { content: ''; position: absolute; top: 6px; left: 0; border-top: 8px solid #231815; border-right: 5px solid transparent; border-bottom: 8px solid transparent; border-left: 5px solid transparent; }
  #php_form dd { width: 100%; margin: 0 0 30px; padding: 0; } }
@media (max-width: 770px) { #php_form dd div { padding: 30px 20px; }
  #php_form dd div p { width: auto; } }
/* ボタン */
button.btn { width: 460px; height: 70px; margin: 80px auto 0; padding: 0; color: #FFF; display: block; background-color: #4f7dcf; border: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: 0.1s linear; }
button.btn:hover { cursor: pointer; color: #FFF; text-decoration: none; letter-spacing: 0.1em; background-color: #09acad; }

button.back { color: #999; background-color: #EEE; }
button.back:hover { background-color: #BBB; }

@media (max-width: 520px) { button.btn { width: 100%; } }
/* 郵便番号入れたら住所出てくる */
.p_code { margin: 0 0 20px; }
.p_code input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 30%; height: 60px; padding: 8px 5px; font-size: 16px; background-color: #FFF; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.p_code a { margin: 0 0 0 20px; padding: 3px 20px; color: #FFF; font-size: 14px; display: inline-block; background-color: #4f7dcf; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; transition: 0.1s linear; }
.p_code a:hover { color: #004ca1; text-decoration: none; background-color: #e7e9ef; }

/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
入力内容確認画面
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */
table.preview { width: 100%; margin: 40px 0 0; border-collapse: collapse; border-top: 1px solid #222; }
table.preview th, table.preview td { padding: 30px 40px; border: 1px solid #231815; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
table.preview th { width: 30%; font-weight: 500; text-align: left; background-color: #e7e9ef; border-right: none; }
table.preview td { width: 70%; border-left: none; }