html,
body { font-size: 16px; }

body { color: #484354; font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }

a { transition: 0.5s; }
a:hover { opacity: 0.8; }

.txt { line-height: 200%; }

.inner { max-width: 1100px; margin: auto; width: 94%; }
.max900 { max-width: 900px; } 
.max1000 { max-width: 1000px; }
.max1400 { max-width: 1400px; }

.vertical_txt { writing-mode: vertical-rl; text-orientation: upright; }

figure { margin: 0; }
.centered_img { overflow: hidden; position: relative; padding: 64% 0 0; }
.centered_img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.loader { top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 100; }

/* -------------------------------------------- fonts */

.font1 { font-family: "meursault-variable", serif; }

/* -------------------------------------------- colors */

.color-main { color: #806F62; }

/* -------------------------------------------- bg */

.bg-main { background-color: #806F62; color: #fff; }
.bg-gray { background-color: #E3E3E3; }
.bg-darkgray { background-color: #949494; color: #fff; }
.bg-darkblue { background-color: #484354; color: #fff; }
.bg-green { background-color: #ABC152; color: #fff; }
.bg-black { background-color: #000; color: #fff; }
.bg-orange { background-color: #CB5419; color: #fff; }

/* -------------------------------------------- header */

header { padding: 1.5rem 2rem; box-sizing: border-box; width: 100%; left: 0; top: 0; z-index: 9; transition: 0.5s; }
header .logo img { width: 130px; transition: 0.5s; }
header .nav { width: 100%; }
header .nav a { padding: 0 1.5rem; color: #806F62; }
header .nav a span { font-size: 1.25rem; font-weight: bold; display: block; line-height: 100%; }
header .nav a small { display: block; font-size: 12px; line-height: 180%; }
header .nav a:hover { text-decoration: underline; }
header .nav ul li { padding: 4px 0 0; }
header .nav ul li::before { width: 1px; height: 1rem; left: 0; bottom: 0; top: 0; margin: auto; background-color: #806F62; }

header.active { padding: 12px 1rem; background-color: #fff; box-shadow: 0px 0px 5px 0px rgb(119, 119, 119); }
header.active .logo img { width: 80px; }

/* -------------------------------------------- head styles */

.head1 { padding: 3rem 0; text-align: center; }
.head1 p { padding: 0 3rem; height: 70px; border-radius: 50px; line-height: 70px; font-size: 2rem; display: inline-block; }

.h_style1 { padding: 2rem 0; }
.h_style1 .h_title { font-size: 14px; font-weight: 600; }
.h_style1 .h_title span { display: block; font-size: 3.75rem; line-height: 120%; font-weight: bold; }

/* ------------------------------------------------------- contact */

.contact { padding: 2rem 0 5rem; background-color: #F2F2F2; color: #000; }
.contact_wrap .name { font-weight: 600; display: block; padding: 0 20px; font-size: 1.5rem; line-height: 180%; letter-spacing: 1px; line-height: 166%; }
.contact_wrap p { font-size: 1.25rem; letter-spacing: 1px; line-height: 180%; }
.contact .bnr { padding: 4rem 0 0; }
.contact .bnr a { display: inline-block; width: 70%; max-width: 386px; }
.contact .btn_wrap { padding: 4rem 0 0; }
.contact .btn_wrap .btn { display: block; font-size: 1.25rem; width: 48%; max-width: 320px; line-height: 60px; height: 60px; border-radius: 8px; }

/* ------------------------------------------------------- footer */

#footer { padding: 30px 0; position: relative; color: #000; }
#footer .f-block:first-child { border: none; }
.f-block {  padding: 30px 0 0; width: 94%; max-width: 1400px; margin: auto; justify-content: flex-start; display: flex; flex-wrap: wrap; }
.f-block .f-pr { padding: 20px 0; }
.f-block .f-txt { font-size: 15px; }

.f-logo { text-align: center; position: absolute; right: 20px; bottom: 50px; }
.f-logo a { margin: 0 0 30px; display: block; }
.f-logo a img { width: 200px; }
.f-logo .copyright { font-size: 10px; }

.branches { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.branches .card { padding: 0 50px 0 0; }
.branches .card h5 { font-size: 16px; padding: 0 0 10px; font-weight: 600; }
.branches .card p { font-size: 14px; line-height: 180%; } 

.f-contact { align-items: center; }
.f-contact p { font-size: 18px; }
.f-contact .tel { padding: 0 20px 10px; }
.f-contact .tel a { letter-spacing: 5px; font-size: 4rem; font-weight: 800px; display: block; padding: 0 0 0 50px;
    background: url("../img/icn-tel.png") no-repeat center left; 
    background-size: 40px auto;
    font-weight: 600;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
.f-contact .sns a { display: inline-block; padding-left: 15px; }
.f-contact .sns a:first-child { padding: 0; }
.f-contact .sns a img { width: 30px; height: auto; }

.f-block.last { padding: 20px 0; }
.f-block .privacy { font-size: 14px; }
.f-block .copyright { font-size: 11px; }


@media screen and (min-width: 797px) {
    .pc-none { display: none; }
}

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {
    .inner { width: 88%; }

    header { padding: 1rem; }
    header .nav  { text-align: center; }
    header .nav a { padding: 0 1rem; gap: 0; }
    header .logo img { width: 90px; }
    header .nav a span { width: 100%; font-size: 1rem; }

    .h_style1 { padding: 1.5rem; }
    .h_style1 .h_title span { font-size: 3rem; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 797px) {
    .sp-none { display: none; }
    html,
    body { font-size: 14px; }

    .head1 p { font-size: 1.5rem; height: 50px; line-height: 50px; padding: 0 2rem; }

    header .nav { position: fixed; width: 100%; left: 100%; top: 0; background-color: #fff; height: 100%; transition: 0.5s; z-index: 11; }
    header .nav ul { max-width: 320px; margin: auto; }
    header .nav ul li { width: 100%; text-align: left; padding: 0.5rem 0; }
    header .nav ul li::before { top: 0; left: 0; right: 0; width: 100%; height: 1px; bottom: auto; }
    header .nav a { justify-content: flex-start; padding: 0.5rem 0; gap: 1rem; }
    header .nav a span { width: auto; font-size: 1.5rem; }
    header .nav a small { font-size: 14px; }
    header .logo img { width: 80px; }
    header.active .logo img { width: 70px; }

    header .menu_btn { width: 40px; height: 40px; gap: 10px; display: flex; justify-content: flex-start; align-content: center;  box-sizing: border-box; }
    header .menu_btn span { display: block; height: 2px; width: 25px; background: #000; transition: 0.5s; }
    header .menu_btn span.mid { width: 35px; }
    header .menu_btn:hover span { width: 35px; }
    header .menu_btn:hover span.mid { width: 25px; }
    header.active .menu_btn span { height: 1px; }

    header .nav .close_btn { top: 2rem; right: 4%; width: 45px; height: 34px; cursor: pointer; display: block; z-index: 100; }
    header .nav .close_btn::before,
    header .nav .close_btn::after { left: 0; width: 100%; height: 2px; background-color: #806F62; transition: 0.5s; }
    header .nav .close_btn::before { top: 16px; transform: rotate(45deg); }
    header .nav .close_btn::after { bottom: 16px; transform: rotate(-45deg); }

    .show_nav { overflow: hidden; }
    .show_nav .nav { left: 0%; }

    /* ------------------------------------------------------- sp contact_wrap */

    .contact_wrap { width: 94%; }
    .contact_wrap .name { padding: 0 0 20px; }
    .contact_wrap p { font-size: 15px; letter-spacing: 0px; }
    
    .contact .btn_wrap { padding: 2rem 0 0; display: block; }
    .contact .btn_wrap .btn { font-size: 1rem; margin: 0 auto 1rem; }

    /* ------------------------------------------------------- sp footer */

    .f-block { display: block; width: 88%; padding: 20px 0 15px; }
    .f-contact { display: flex !important; }
    #footer .f-block:first-child  { padding: 0; }
    .f-logo { bottom: auto; padding: 0 6%; text-align: right; position: relative; left: 0; right: 0; }
    .f-logo a { margin: 0 0 15px; }
    .f-logo a img{ width: 140px; margin: auto; }

    #footer { padding: 50px 0 70px; }
    #footer .branches { display: block; }

    .f-contact.pc-none { display: flex; justify-content: center; }
    .f-contact.sp-none { display: none !important; }
    .f-contact .box { padding: 5px 8px; border: 1px solid #fff; border-radius: 8px; margin: 0 10px 0 0; font-size: 12px; line-height: 150%; }
    .f-contact .box span { display: block; letter-spacing: 4px; font-size: inherit; }
    .f-contact p { font-size: 30px; }
    .f-contact { text-align: center; }
    .f-contact .tel { display: inline-block; padding: 5px 0; }
    .f-contact .tel a { letter-spacing: 1px; font-size: 30px; background-size: 20px auto; padding: 0 0 0 30px; }

    .branches .card { padding: 0 0 20px; }
    .branches .card p { line-height: 150%; }

    .f-logo .copyright { font-size: 12px; }
}