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

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

.loader { left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 99; }
.loader img { display: none; max-width: 1100px; width: 88%; }

.inner { width: 94%; margin: auto; max-width: 1100px; }
.max700 { max-width: 700px; }
.max1000 { max-width: 1000px; }
.max1200 { max-width: 1200px; }
.max1400 { max-width: 1400px; }

body.fixed { overflow: hidden; }
.txt { line-height: 220%; }

figure { margin: 0; overflow: hidden; }
figure img { width: 100%; }
figure.center_all { margin: 0; position: relative; padding-top: 100%; width: 100%; }
figure.center_all img { width: calc(100% + 2px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.5s; }

.link a { display: inline-block; font-weight: 600; padding: 0 0 0.5rem; }
.link a::before,
.link a::after { bottom: 0; height: 1px; background-color: #000; transition: 0.2s linear; }
.link a::before { width: 100%; right: 0; }
.link a::after { width: 0%; transition-delay: 0.2s; left: 0; }
.link a:hover::before { width: 0%; }
.link a:hover::after { width: 100%; }

/* -------------------------------------------- btns */

.btn_wrap .btn { padding: 0 1.5rem; border-radius: 0.75rem; line-height: 60px; height: 60px; display: inline-block; }
.btn_wrap .btn.black { border: 1px solid #000; font-weight: 600; transition: 0.5s; opacity: 1 !important; }
.btn_wrap .btn.black:hover { background-color: #000; color: #fff; }
.btn_wrap .btn.white { border: 1px solid #fff; color: #fff; transition: 0.5s; opacity: 1 !important; }
.btn_wrap .btn.white:hover { background-color: #fff; color: #DA2308; }

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

.font-din {font-family: "din-2014", sans-serif; font-weight: 400;font-style: normal; } 
.font-cormorant { font-family: "cormorant", sans-serif; font-weight: 400; font-style: normal; }
.font-arabic { font-family: "adobe-arabic", sans-serif; font-weight: 400; font-style: normal; }
.font-mincho { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; }
.font-gothic { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; }

/* -------------------------------------------- heads */

.head1 .ttl { font-size: 6.25rem; line-height: 100%; }
.head1 .sub_ttl { font-size: 1.25rem; }

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

.color-red { color: #DA2308; }
.color-white { color: #fff; }

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

.bg-red { background-color: #DA2308; }
.bg-black { background-color: #000; color: #fff; }
.bg-white { background-color: #fff; }
.bg-dark_gray { background-color: #333333; color: #fff; }
.bg-gray { background-color: #888888; color: #fff; }

.bg1 { background-image: url(../img/common/bg1.jpg); }
.bg-gradient1 { background-image: url(../img/common/bg-gradient1.jpg); }

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

header { width: 94%; border-radius: 0.5rem; top: 2rem; margin: auto; left: 0; right: 0; background-color: #fff; position: fixed; overflow: hidden; transition: 0.5s;
    z-index: 9;
    max-width: 1600px;
    box-shadow: 0px 4px 4px 0px rgba(4, 50, 45, 0.1);
}
header .col_left { padding: 0 0.5rem; }
header .logo { width: 195px; max-width: 260px; padding: 0.25rem 0.5rem 0; margin-right: 0.5rem; }
header .logo img { width: 100%; }
header .logo a { display: block; line-height: 100%; }

header.fix { width: 100%; top: 0; max-width: none; border-radius: 0; }

.contact_info .tel { padding-left: 1.75rem; font-size: 1.75rem; display: block; letter-spacing: 2px; line-height: 100%; 
    background: url(../img/common/icn-phone.png) no-repeat 3px center;
    background-size: 18px auto;
}
.contact_info p { font-size: 10px; line-height: 140%; }

/* -------------------------------------------- nav */

.nav_wrap ul { padding: 0 0.5rem; }
.nav_wrap ul li { padding: 0 1rem; display: flex; }
.nav_wrap ul li a { display: block; border-bottom: 4px solid #fff; display: flex; align-items: center; }
.nav_wrap ul li a span { display: inline-block; padding-left: 0.5rem; vertical-align: middle; font-size: 15px; }
.nav_wrap ul li.active,
.nav_wrap ul li a:hover { color: #DA2308; border-bottom: 4px solid #DA2308; }
.nav_wrap .nav_sns { padding-right: 1rem; }
.nav_wrap .nav_sns a { display: flex; align-items: center; width: 28px; margin: 0 0.5rem; }
.nav_btn { width: 80px; }
.nav_btn a { display: block; padding-top: 100%; }
.nav_btn a img { width: 58%; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

/* -------------------------------------------- global_nav */

.global_nav { display: none; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; overflow: auto; }
.gnav_wrap { width: 100vw; height: 100vh; }
.global_nav .overlay { width: 100%; height: 100%; background-color: #000; opacity: 0.5; left: 0; top: 0; cursor: pointer; }
.gnav_inner { width: 94%; max-width: 1400px; padding: 3rem 4%; z-index: 1; box-sizing: border-box; color: #fff; background-color: #e72f18; }
.gnav_inner h3 { font-size: 4rem; }
.gnav_inner a { color: #fff; }
.gnav_inner ul li { padding: 1rem 0; }
.gnav_inner ul li a { display: inline-block; font-size: 1.75rem; position: relative; line-height: 120%; font-weight: 600; }
.gnav_inner ul li a::before { width: 0%; height: 1px; background-color: #fff; transition: 0.5s; position: absolute; content: ''; display: block; bottom: 0; left: 0; }
.gnav_inner ul li a:hover::before { width: 100%; }
.gnav_inner ul li a span { display: inline-block; padding-right: 1rem; }
.gnav_inner ul li a .en { display: inline-block; font-size: 2rem; }
.gnav_inner .col_left { width: 35%; }
.gnav_inner .col_right { width: 55%; box-sizing: border-box; padding-left: 1rem; }
.gnav_inner .dropdown { padding: 1rem 0 0; display: none; }
.gnav_inner .dropdown li { padding: 0.35rem 0; }
.gnav_inner .dropdown li a { font-size: 1rem; font-weight: 400; padding-bottom: 2px; }
.gnav_inner .col_right { padding: 1rem 0; border-top: 1px solid #fff;  border-bottom: 1px solid #fff; }
.gnav_inner .col_right ul li { width: 50%; max-width: 320px; }
.gnav_inner .gnav_close  { top: 6%; right: 3%; cursor: pointer; } 
.gnav_inner .gnav_close p { padding: 25px 5px 0; }
.gnav_inner .gnav_close p::before,
.gnav_inner .gnav_close p::after { height: 1px; width: 100%; background-color: #fff; top: 20%; left: 0; }
.gnav_inner .gnav_close p::before { transform: rotate(45deg); }
.gnav_inner .gnav_close p::after { transform: rotate(-45deg); }
.gnav_inner .gnav_logo { bottom: 4%; right: 3%; width: 100px; }

/* -------------------------------------------- event_list */

.event_list ul li { width: 48%; padding-bottom: 1.5rem; }

.event_item { display: block;  }
.event_item figure { border: 1px solid #B3B3B3; box-sizing: border-box; }
.event_item .row { padding: 0.5rem; border: 1px solid #B3B3B3; border-top: none; }
.event_item .row .icon { width: 16px; margin-right: 0.25rem; }
.event_item .row dl { font-size: 15px; margin: 0; }
.event_item .row dl span { display: inline-block; vertical-align: middle; }
.event_item .row dl dt { width: 90px; }
.event_item .row dl dd { width: calc(100% - 90px); }
.event_item .cat { padding: 1rem 0 0.5rem; }
.event_item .cat span { display: inline-block; padding: 0.25rem 0.75rem; font-size: 14px; }
.event_item .ttl { font-size: 1.25rem; font-weight: 600; }

/* -------------------------------------------- sliders */

.slider1 { padding-top: 2rem; }
.slider1 .slide { width: 417px !important; margin: 0 1rem; }
.slider1 .slide a { display: block; position: relative; opacity: 1 !important; }
.slider1 .slide figure { z-index: 1; }
.slider1 .slide .overlay { z-index: 2; box-sizing: border-box; padding: 0; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: 0.5s; }
.slider1 .slide:hover .overlay { opacity: 1; }
.slider1 .slide:hover figure img { width: 104%; }
.slider1 .slide .overlay::before { opacity: 0.6; background-color: #000000; content: ''; display: block; left: 0; top: 0; width: 100%; height: 100%; position: absolute; z-index: 0; }
.slider1 .slide .ttl { width: 100%; font-size: 1.25rem; color: #fff; position: relative; z-index: 1; }
.slider1 .slide .new { padding-bottom: 0.5rem; }
.slider1 .slide .new span { font-size: 1.25rem; display: inline-block; background-color: #fff; padding: 0 0.5rem; color: #000; position: relative; z-index: 1; }

.slider_arw { width: 34px; left: 0; position: absolute; cursor: pointer; margin: auto; top: 0; bottom: 0; }
.slider_arw.arw_right { right: 0; left: auto; transform: rotate(180deg); }

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

.bg-contact { background-image: url(../img/common/bg-contact.jpg); }
.contact { padding: 6rem 0; }
.contact .head1 { padding-bottom: 2rem; }
.contact .head1 .ttl { font-size: 6.25rem; }
.contact .contact_box { padding: 3rem 4%; background-image: url(../img/common/bg-contact2.jpg); border-radius: 0.75rem; }
.contact .contact_box h4 { font-size: 2rem; line-height: 150%; padding-bottom: 2rem; }
.contact .contact_info .tel { font-size: 5.125rem; background-size: 48px; line-height: 100%; padding-left: 4rem; }
.contact .contact_info p { font-size: 1rem; padding-bottom: 0.5rem; }
.contact .links { padding-top: 2rem; }
.contact .links li { width: 32%; }
.contact .links a { height: 80px; line-height: 80px; border-radius: 0.5rem; font-size: 1.5rem; font-weight: 200; transition: 0.5s; opacity: 1 !important; }
.contact .links a .icon { padding-top: 1px; width: 25px; }
.contact .links a span { display: block; padding-left: 0.75rem; line-height: 100%; }
.contact .links a::after { width: 12px; height: 20px; right: 4%; top: 0; bottom: 0; margin: auto; background: url(../img/common/icn-arw.png) no-repeat center center; background-size: 100% auto; }
.contact .links a:hover { background-color: #000; }

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

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

.madori_bnr { width: 25%; z-index: 2; position: fixed; bottom: 60px; right: 0; max-width: 436px; }

#footer { padding: 0; background-color: #e72f18; color: #fff; }
#footer a { color: #fff; }
#footer .f-block:first-child { border: none; }
.f-block { border-top: 1px solid #E28174; padding: 60px 0 30px; width: 94%; max-width: 1400px; margin: auto; justify-content: space-between; display: flex; flex-wrap: wrap; }
.f-block .f-pr { padding: 20px 0; }
.f-block .f-txt { font-size: 11px; line-height: 200%; }

.f-logo a { margin: 0 0 30px; display: block; }
.f-logo a img { width: 120px; }

.sitelinks { max-width: 830px; width: calc(100% - 450px); display: flex; flex-wrap: wrap; }
.sitelinks .col { padding: 0 60px 30px 0; box-sizing: border-box; }
.sitelinks .last ul li a { font-size: 16px; }
.sitelinks .link-head { font-size: 18px; font-weight: 500; padding: 0 0 15px; }
.sitelinks ul li { padding: 5px 0; }
.sitelinks ul li a { font-size: 15px; display: block; position: relative; padding: 0 0 0 15px; transition: 0.2s; }
.sitelinks ul li a:hover { opacity: 0.6; }
.sitelinks ul li a::before { width: 6px; height: 1px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; content: ''; display: block;  background-color: #fff; }

.sitelinks .last ul li a { padding: 0; }
.sitelinks .last ul li a::before { display: none; } 

.branches { display: flex; flex-wrap: wrap; }
.branches .left { max-width: 800px; display: flex; flex-wrap: wrap; }
.branches .card { padding: 0 50px 30px 0; }
.branches .card h5 { font-size: 16px; padding: 0 0 10px; }
.branches .card p { font-size: 14px; line-height: 180%; } 
.f-contact .tel { padding: 0 0 10px; }
.f-contact .tel a { letter-spacing: 3px; font-size: 45px; font-weight: 800px; display: block; padding: 0 0 0 50px;
    background: url("../img/common/icn-phone-white.png") no-repeat center left; 
    background-size: 40px auto;
    font-family: "DIN 2014", YuGothic, "Yu Gothic Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
}
.f-contact .f_sns a { display: inline-block; padding-left: 15px; }
.f-contact .f_sns a:first-child { padding: 0; }
.f-contact .f_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: 767px) {
    .pc-none { display: none !important; }
}

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

@media screen and (max-width: 1300px) {
    .nav_btn { width: 70px; }
    .nav { display: none; }
    header .logo { width: 200px; }

    .gnav_inner ul li a { font-size: 1.25rem; }
    .gnav_inner ul li a .en { font-size: 1.5rem; }
    .gnav_inner .col_right { width: 50%; }
    .gnav_inner .gnav_logo { width: 100px; }
}

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

@media screen and (max-width: 1100px) {
    .tablet-none { display: none; }
    .tablet-block { display: block; }

    .head1 .ttl { font-size: 5rem; }
    .head1 .sub_ttl { font-size: 1rem; }

    .slider1 .slide { width: 320px !important; margin: 0 0.5rem; }
    .slider1 .slide .new span { font-size: 1rem; }
    .slider1 .slide .ttl { padding: 0 1rem; font-size: 1rem; }

    .contact { padding: 3rem 0; }
    .contact .head1 .ttl { font-size: 5rem; }
    .contact .contact_box h4 { font-size: 1.5rem; }

    .contact .links a { height: 60px; line-height: 60px; }
    .contact .links a .icon { width: 18px; }
    .contact .links a span { font-size: 1rem; padding: 0 0.5rem; }
    .contact .links a::after { width: 8px; height: 18px; right: 6%; }

    .sitelinks { padding: 60px 0 0; width: 100%; max-width: none; }
}

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

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

    .inner { width: 88%; }

    .txt { line-height: 200%; }

    .btn_wrap .btn { font-size: 1rem; height: 50px; line-height: 50px; }

    .head1 .ttl { font-size: 3.5rem; }

    header { width: 88%; top: 2.75vw; }
    header .logo { width: 130px; padding: 0 5px; }
    header .contact_info  { display: none; }
    header .contact_info .tel { font-size: 1.5rem; background-size: 13px; padding-left: 1.5rem; }
    header .contact_info p { font-size: 9px; }
    .nav_btn { width: 50px; }
    .nav_wrap .nav_sns a { width: 22px; margin: 0 0.35rem; }

    .gnav_inner h3 { font-size: 3rem; }
    .gnav_inner {padding: 1rem 4% 2rem; }
    .gnav_inner .col_left { width: 100%; padding-bottom: 1rem; }
    .gnav_inner .col_right { width: 100%; }
    .gnav_inner ul li { padding: 0.5rem 0; }
    .gnav_inner ul li a .en { font-size: 1rem; }
    .gnav_inner .gnav_close { right: 4%; }

    .event_item { max-width: 420px; margin: auto; }
    .event_item .row { padding: 0.5rem; }
    .event_item .row dl { width: 100%; line-height: 140%; font-size: 14px; }
    .event_item .row dl span { font-size: 1rem; vertical-align: unset; }
    .event_item .ttl { font-size: 1rem !important; }
    .event_item .cat span { font-size: 12px; }

    .event_list ul li { width: 48%; }
    .event_list ul li dl dd,
    .event_list ul li dl dt { width: 100% !important; }

    .contact .head1 .ttl { font-size: 4rem; }
    .contact .contact_box h4 { font-size: 1.25rem; }
    .contact .contact_info .tel { font-size: 2.5rem; background-size: 25px; padding-left: 2.5rem; }
    .contact .contact_info p { font-size: 12px; padding-top: 0.5rem; width: 100%; }
    .contact .links { justify-content: center; }
    .contact .links li { width: 100%; min-width: 180px; margin: 0.5rem;  }

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

    .f-block { display: block; width: 88%; padding: 30px 0 20px; }
    .f-logo { padding-top: 3rem; text-align: center; }
    .f-logo a { margin: 0; }
    .f-logo img { margin: auto; }

    .sitelinks { display: block; padding: 30px 0 0; }
    .sitelinks .col { width: 100%; padding: 10px 0; border-top: 1px solid #d0d0d0; }
    .sitelinks .col:first-child { border: none; }
    .sitelinks .link-head { padding: 0; font-size: 16px; position: relative; cursor: pointer; }
    .sitelinks .link-head::after { width: 12px; height: 12px; right: 5px; margin: auto; top: 0; bottom: 0; display: block;  position: absolute; content: '';
        transform: rotate(135deg);
        transition: 0.5s;
        border-top: 2px solid #fff; 
        border-right: 2px solid #fff;
    }
    .sitelinks .link-head.active::after { transform: rotate(-45deg); }
    
    .sitelinks .col ul { display: none; }
    .sitelinks .col.last ul { display: block; }
    .sitelinks .col.last ul li a { font-size: 14px; }

    .f-block .f-pr { font-size: 16px; }
    .f-block .f-txt { font-size: 10px; }
    #footer .branches { display: block; }

    .f-contact p { font-size: 16px; }
    .f-contact { text-align: center; padding: 2rem 0; }
    .f-contact .tel { display: inline-block; padding: 5px 0; }
    .f-contact .tel a { font-size: 2.75rem; background-size: 20px auto; padding: 0 0 0 30px; }

    .f-block.last { padding: 10px 0 15px; }
    .f-block .privacy { padding: 0 0 10px; }

    .f-contact .f_sns { padding-top: 0.5rem; }
    .f-contact .f_sns a img { width: 25px; }
}