@charset 'UTF-8';

/* ********************************************************************** *

  Title:  style.css
********************************************************************** */
/* IE用印刷設定CSS ======================================================= */

@media print { body { _zoom: 67%; /*WinIE only */ } }

/* 基本設定 ======================================================= */

:root { --black: #202020; --red: #d2232a; --gray: #ddd; --gray_secondary: #f5f5f5; --yellow: #f5d625; }

{ margin: 0; padding: 0; }
html {font-size: 62.5%;}

body { padding-top: 86px; font-size: 16px; font-size: 1.6rem; font-family: "Noto Sans JP", sans-serif; line-height: 1.8; position: relative; text-align: left; color: var(--black); background: #fff; }

@media screen and (max-width: 768px) { body { padding-top: 60px; } }

a:link, a:visited { text-decoration: underline; color: var(--black); }

@media (hover: hover) and (pointer: fine) { a:hover, a:active { text-decoration: none; } }

ul { padding: 0 0 0 1.35em; }

ol { padding: 0 0 0 1em; }

iframe {border: none;}

img { max-width: 100%; height: auto; line-height: 1; vertical-align: top; border: 0; }

.inner { width: 90%; max-width: 1080px; margin-left: auto; margin-right: auto; }

.meiryo { font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'Helvetica', 'Arial', 'sans-serif'; }

/* header ======================================================= */

header { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 86px; padding: 10px 40px; box-sizing: border-box; background: #fff; z-index: 10; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1); }

header .head_l { display: flex; align-items: center; gap: 30px; }

header .catch { font-size: 1.3rem; font-weight: normal; text-align: center; }

@media screen and (max-width: 768px) { header { height: 60px; padding: 10px; }

header .head_l {
    gap: 0;
}

header .logo {
    width: 70px;
    padding: 0 10px 0 0;
}

header .catch {
    font-size: 10px;
    line-height: 1.4;
    padding: 0 0 13px;
    text-align: left;
}
}

.cv_btn a { display: flex; justify-content: center; align-items: center; width: 300px; max-width: 100%; min-height: 60px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 40px; line-height: 1.5; font-size: 2rem; font-weight: bold; color: #fff; background: var(--red); text-decoration: none; }

@media screen and (max-width: 768px) { .cv_btn a { font-size: 1.8rem; }

header .cv_btn a {
    width: 150px;
    min-height: 36px;
    font-size: 1.2rem;
    padding: 10px 0;
}
}

/* contents ======================================================= */

/* mv */

.mv { min-height: 655px; padding: 100px 0 70px; box-sizing: border-box; background: url(../img/mv.jpg) 50% 0% / cover no-repeat; }

.mv .txt { margin-bottom: 20px; line-height: 1.5; font-size: 4rem; font-weight: bold; color: #fff; text-align: center; }

.mv .brand { margin-bottom: 50px; font-size: 7.6rem; font-weight: 800; color: #fff; text-align: center; }

.mv .brand .brand_in { font-weight: 900; border-bottom: 3px dashed var(--yellow); }

.mv_flex { display: flex; gap: 20px; }

.mv_flex_item { width: 100%; padding: 25px; box-sizing: border-box; background: #fff; border-radius: 10px; }

.mv_flex_item .tit { min-width: 32px; margin-bottom: 20px; padding-left: 37px; box-sizing: border-box; line-height: 1.5; font-size: 2.2rem; font-weight: bold; color: var(--red); background: url(../img/ico_check.svg) 0 0 no-repeat; }

@media screen and (max-width: 768px) { .mv { min-height: 496px; padding: 30px 0 40px; }

.mv .txt {
    margin-bottom: 22px;
    line-height: 1.4;
    font-size: 2.4rem;
}

.mv .brand {
    margin-bottom: 28px;
    white-space: nowrap;
    font-size: clamp(1.6rem, 6vw, 7.6rem);
}

.mv_flex {
    flex-direction: column;
}

.mv_flex_item {
    padding: 13px 5%;
    line-height: 1.4;
    font-size: 1.4rem;
}

.mv_flex_item .tit {
    min-height: 22px;
    margin-bottom: 3px;
    padding-left: 25px;
    font-size: 1.4rem;
    background-size: 20px auto;
}
}

/* mv_un */

.mv_un { padding: 50px 0; color: #fff; background: var(--black); }

.mv_un .txt { font-size: 2rem; font-weight: bold; }

.mv_un .triangle { position: relative; }

.mv_un .triangle::after { content: ""; position: absolute; left: calc(50% - 100px); background: var(--black); top: 31px; width: 200px; height: 60px; clip-path: polygon(0 0, 100% 0, 50% 100%); }

@media screen and (max-width: 768px) { .mv_un .txt { font-size: 1.6rem; } }

/* 見出し */

.tit_h2 { position: relative; margin-bottom: 70px; padding-bottom: 26px; line-height: 1.5; font-size: 4rem; font-weight: bold; text-align: center; }

.tit_h2::before { content: ""; position: absolute; bottom: 0; left: calc(50% - 60px); width: 120px; height: 6px; background: var(--red); }

@media screen and (max-width: 768px) { .tit_h2 { margin-bottom: 50px; font-size: 2.8rem; } }

.tit_h3 { display: flex; align-items: center; min-height: 41px; margin: 60px 0 30px; padding-left: 14px; line-height: 1.4; font-size: 2.2rem; font-weight: bold; border-left: 4px solid var(--red); }

/* ba */

.ba { display: flex; gap: 20px; }

.ba_item { width: 100%; padding: 25px; box-sizing: border-box; font-size: 2.2rem; font-weight: bold; background: var(--gray_secondary); word-break: break-all; border-radius: 10px; }

.ba_item.red { background: #ffeeee; }

@media screen and (max-width: 768px) { .ba { flex-direction: column; }

.ba_item {
    padding: 15px 5%;
    font-size: 1.8rem;
}
}

/* reason */

.reason { display: flex; gap: 50px; margin: 0; padding: 0; list-style: none; }

.reason_item { width: 100%; }

.reason_item .tit { margin: 30px 0 20px; line-height: 1.4; font-size: 2rem; font-weight: bold; color: var(--red); text-align: center; }

@media screen and (max-width: 768px) { .reason { flex-direction: column; } }

.mid_catch { padding: 38px 0; font-size: 2rem; font-weight: bold; color: #fff; background: var(--black); border-radius: 10px; }

@media screen and (max-width: 768px) { .mid_catch { font-size: 1.8rem; } }

/* grid_tbr */

.grid_tbr { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; border-top: 1px solid var(--gray); border-left: 1px solid var(--gray); }

.grid_tbr_th, .grid_tbr_td { padding: 10px; border-right: 1px solid var(--gray); border-bottom: 1px solid var(--gray); }

.grid_tbr_th { line-height: 1.6; font-size: 2.2rem; font-weight: bold; background: var(--red); text-align: center; color: #fff; }

@media screen and (max-width: 768px) { .grid_tbr { display: block; }

.grid_tbr_th {
    font-size: 1.8rem;
}
}

.grid_tbr_2col { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; }

/* cv_area */

.cv_area { padding: 100px 0 66px; background: var(--gray_secondary); }

.cv_box { padding: 50px 5%; background: #fff; border-radius: 10px; }

.cv_box .tit { line-height: 1.5; font-size: 3rem; font-weight: bold; }

.cv_box .txt { font-size: 2.2rem; font-weight: bold; }

.cv_box_flex { display: flex; justify-content: center; gap: 60px; }

.cv_box_flex_item { font-size: 1.2rem; }

.cv_box_flex_item .tel a { line高さ: 1; font-size: 4.6rem; font-weight: bold; color: var(--red); text-decoration: none; }

cv_box_flex_item .email { line-height: 1; font-size: 4rem; font-weight: bold; color: var(--red); }

.cv_box_flex_item .cv_btn a { width: 400px; padding: 20px; }

.info { padding: 40px 0 0; font-size: 1.4rem; }

@media screen and (max-width: 768px) { .cv_box .tit { font-size: 2.6rem; }

.cv_box .txt {
    font-size: 1.8rem;
}

.cv_box_flex {
    flex-direction: column;
    gap: 40px;
    word-break: break-all;
}

.cv_box_flex_item .tel a {
    font-size: 3.8rem;
}

.cv_box_flex_item .email {
    font-size: 2.4rem;
}
}

/* お問い合わせフォーム ======================================================= */

.page_title { margin-bottom: 20px; font-size: 3.2rem; text-align: center; }

@media screen and (max-width: 768px) { .page_title { font-size: 2.4rem; } }

.fields { margin: 0; padding: 0; list-style: none; }

.field { display: flex; border: 1px solid #000; }

.field + .field {border-top: none;}

.field .label { display: flex; justify-content: space-between; align-items: center; width: 30%; padding: 15px; box-sizing: border-box; font-weight: bold; background: #fff8f2; }

.field .label .required { padding: 0 10px; font-size: 1rem; color: #fff; background: #d0121c; }

.field .label .required.any {background: #999;}

.field .input { flex-grow: 1; padding: 20px 40px; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { width: 100%; padding: 7px 18px; box-sizing: border-box; border-radius: 3px; font-size: 16px; font-size: 1.6rem; font-family: "Noto Sans JP", sans-serif; border: 1px solid #000; }

@media screen and (min-width: 769px) { .field input[type="text"], .field input[type="tel"] { max-width: 320px; }

.field input[type="email"] {
    max-width: 460px;
}
}

@media screen and (max-width: 768px) { .field { display: block; }

.field .label {
    width: 100%;
    border-bottom: 1px solid #000;
}

.field .input {
    padding-left: 5%;
    padding右: 5%;
}
}

.submit_btn { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 296px; height: 59px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 5px; font-size: 1.6rem; font-weight: bold; font-family: "Noto Sans JP", sans-serif; color: #fff; background: #d0121c; border: none; cursor: pointer; transition: opacity .3s; }

@media (hover: hover) and (pointer: fine) { .submit_btn:hover {opacity: .7;} }

.submit_btn:disabled { background-color: #888; pointer-events: none; }

/* 確認画面 ======================================================= */

#formWrap h3 { margin-bottom: 20px; font-size: 3.2rem; text-align: center; }

@media screen and (max-width: 768px) { #formWrap h3 { font-size: 2.4rem; } }

#formWrap form { margin-top: 40px; }

#formWrap .formTable { width: 100%; margin-bottom: 50px; border-collapse: collapse; border-top: 1px solid #000; border-left: 1px solid #000; }

#formWrap .formTable th, #formWrap .formTable td { padding: 20px 40px; box-sizing: border-box; border-bottom: 1px solid #000; }

#formWrap .formTable th { width: 30%; padding: 15px; font-weight: bold; background: #fff8f2; text-align: left; }

#formWrap .formTable td { border-right: 1px solid #000; }

@media screen and (max-width: 768px) { #formWrap .formTable, #formWrap .formTable thead, #formWrap .formTable tbody, #formWrap .formTable tr, #formWrap .formTable th, #formWrap .formTable td { display: block; width: 100%; }

#formWrap .formTable th,
#formWrap .formTable td {
    border-right: 1px solid #333;
}

#formWrap .formTable td {
    padding-left: 5%;
    padding-right: 5%;
}
}

#formWrap input[type="submit"], #formWrap input[type="submit"] + input[type="button"] { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 296px; height: 59px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 5px; font-size: 1.6rem; font-weight: bold; font-family: "Noto Sans JP", sans-serif; color: #fff; background: #d0121c; border: none; cursor: pointer; transition: opacity .3s; }

@media (hover: hover) and (pointer: fine) { #formWrap input[type="submit"]:hover, #formWrap input[type="submit"] + input[type="button"]:hover {opacity: .7;} }

#formWrap input[type="submit"] + input[type="button"] { margin-top: 20px; color: #000; background: #f2f2f2; }

/* footer ======================================================= */

footer { padding: 9px 0; color: #fff; background: var(--black); }

footer small { display: block; font-size: 1.2rem; text-align: center; }

/* 汎用スタイル設定 ======================================================= */

.btn a { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 296px; height: 59px; margin: 0 auto; padding: 10px 20px; box-sizing: border-box; border-radius: 5px; font-size: 1.6rem; font-weight: bold; font-family: "Noto Sans JP", sans-serif; color: #fff; background: #d0121c; border: none; cursor: pointer; text-decoration: none; transition: opacity .3s; }

@media (hover: hover) and (pointer: fine) { .btn a:hover {opacity: .7;} }

.fw_normal {font-weight: normal!important;} .fw_bold {font-weight: bold!important;}

.tac {text-align: center!important;} .tal {text-align: left!important;} .ter {text-align: right!important;}

@media screen and (min-width: 769px) { .pc_tac {text-align: center!important;} .pc_tal {text-align: left!important;} .pc_ter {text-align: right!important;} }

@media screen and (max-width: 768px) { .sp_tac {text-align: center!important;} .sp_tal {text-align: left!important;} .sp_ter {text-align: right!important;} }

.mb0 {margin-bottom: 0!important;} .mb5 {margin-bottom: 5px!important;} .mb10 {margin-bottom: 10px!important;} .mb15 {margin-bottom: 15px!important;} .mb20 {margin-bottom: 20px!important;} .mb25 {margin-bottom: 25px!important;} .mb30 {margin-bottom: 30px!important;} .mb35 {margin-bottom: 35px!important;} .mb40 {margin-bottom: 40px!important;} .mb50 {margin-bottom: 50px!important;} mb60 {margin-bottom: 60px!important;} .mb70 {margin-bottom: 70px!important;} .mb80 {margin-bottom: 80px!important;} .mb90 {margin-bottom: 90px!important;} .mb100 {margin-bottom: 100px!important;} .mb110 {margin-bottom: 110px!important;} .mb120 {margin-bottom: 120px!important;}

@media screen and (max-width: 768px) { .mb_sp_0 {margin-bottom: 0!important;} .mb_sp_5 {margin-bottom: 5px!important;} .mb_sp_10 {margin-bottom: 10px!important;} .mb_sp_15 {margin-bottom: 15px!important;} .mb_sp_20 {margin-bottom: 20px!important;} .mb_sp_25 {margin-bottom: 25px!important;} .mb_sp_30 {margin-bottom: 30px!important;} .mb_sp_35 {margin-bottom: 35px!important;} .mb_sp_40 {margin-bottom: 40px!important;} .mb_sp_50 {margin-bottom: 50px!important;} .mb_sp_60 {margin-bottom: 60px!important;} .mb_sp_70 {margin-bottom: 70px!important;} .mb_sp_80 {margin-bottom: 80px!important;} .mb_sp_90 {margin-bottom: 90px!important;} .mb_sp_100 {margin-bottom: 100px!important;} .mb_sp_110 {margin-bottom: 110px!important;} .mb_sp_120 {margin-bottom: 120px!important;} }

.mt0 {margin-top: 0!important;} .mt5 {margin-top: 5px!important;} .mt10 {margin-top: 10px!important;} .mt15 {margin-top: 15px!important;} .mt20 {margin-top: 20px!important;} .mt25 {margin-top: 25px!important;} .mt30 {margin-top: 30px!important;} .mt35 {margin-top: 35px!important;} .mt40 {margin-top: 40px!important;} .mt50 {margin-top: 50px!important;} .mt60 {margin-top: 60px!important;} .mt70 {margin-top: 70px!important;} .mt80 {margin-top: 80px!important;} .mt90 {margin-top: 90px!important;} .mt100 {margin-top: 100px!important;} .mt110 {margin-top: 110px!important;} .mt120 {margin-top: 120px!important;}

@media screen and (max-width: 768px) { .mt_sp_0 {margin-top: 0!important;} .mt_sp_5 {margin-top: 5px!important;} .mt_sp_10 {margin-top: 10px!important;} .mt_sp_15 {margin-top: 15px!important;} .mt_sp_20 {margin-top: 20px!important;} .mt_sp_25 {margin-top: 25px!important;} .mt_sp_30 {margin-top: 30px!important;} .mt_sp_35 {margin-top: 35px!important;} .mt_sp_40 {margin-top: 40px!important;} .mt_sp_50 {margin-top: 50px!important;} .mt_sp_60 {margin-top: 60px!important;} .mt_sp_70 {margin-top: 70px!important;} .mt_sp_80 {margin-top: 80px!important;} .mt_sp_90 {margin-top: 90px!important;} .mt_sp_100 {margin-top: 100px!important;} .mt_sp_110 {margin-top: 110px!important;} .mt_sp_120 {margin-top: 120px!important;} }

@media screen and (min-width: 769px) { .pc_none {display: none!important;} }

@media screen and (max-width: 768px) { .sp_none {display: none!important;} }

.color_black {color: var(--black)!important;} .color_red {color: var(--red)!important;} .color_yellow {color: var(--yellow)!important;}

.inline {display: inline-block;}

.clearfix:after { display: block; clear: both; content: ''; }

.overimg {transition: opacity .3s;} @media (hover: hover) and (pointer: fine) { .overimg:hover {opacity: .7;} }