﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');

.en, #top_message h2, #top_contents1 h3, #top_contents2 h3, #top_contents1 h3::before, #top_contents2 h3::before, .cms_title h2, .Russo, header, #footer_contact h3, a[href^="tel:"], #page10, .cate_title, .sub_cate_title, .box_title1, .main_txt2{font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"}

.main_txt, #top_contents1 h3::before, #top_contents2 h3::before{font-family: dnp-shuei-shogomincho-std, 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"}

.index header{height: 100vh!important}
#header{background-color: rgba(255,255,255,0.8);top: 0}
.index header span.after{height: 100vh;right: -250px}
.l-header__bg{background-color: #222222}
.l-menu__body h3 span{color: #e5e013}
#header_contact a.btn_back{background-color: #fff;height: 100%}
#header_contact span{color: #002060;top: 22px}
#header_contact span::after{content: "お問い合わせ";display: block;font-size: 12px}
#logo{width: 200px}

.main_txt{font-size: 40px;line-height: 1.5;right: 100px;bottom: 100px;z-index: 1}
.main_txt::before{position: absolute;content: "";background-color: #e5e013;height: 100%;top: 0;left: 0;right: 100%}
.main_txt.active::before{animation: anime1 1s cubic-bezier(.22,1.11,.58,.98);}
.main_txt2{left: 100px;top: 200px;z-index: 1}
.main_txt2::before{position: absolute;content: "";background-color: #e5e013;height: 100%;top: 0;left: 0;right: 100%}
.main_txt2.active::before{animation: anime1 1s cubic-bezier(.22,1.11,.58,.98);}

@keyframes anime1 {
0%{left: 0;right: 100%}
50%{left: 0;right: 0}
100% {left: 100%;right: 0}
}

#top_message h2{color: #333;text-align: center;padding-bottom: 20px;position: relative}
#top_message p:first-of-type{font-size: 16px}
#top_message h2::before{position: absolute;content: "";width: 40px;height: 1px;left: 0;right: 0;bottom: 0;margin: auto;background-color: #002060}
#top_contents1 h3, #top_contents2 h3{padding-bottom: 20px;margin-bottom: 30px;position: relative;z-index: 1}
#top_contents1 h3::before, #top_contents2 h3::before{color: #e5e013;opacity: 0.4;top: -90px;z-index: -1}
#top_contents1 h3::after, #top_contents2 h3::after{position: absolute;content: "";width: 40px;height: 2px;left: 0;bottom: 0;background-color: #fff}
.cate_list li a{background-color: #002060}
.top_cms_sec{border-color: #fff}

#filter_white{background-color: rgba(228, 243, 247, 0.6)}

.cate_title{background-color: transparent;padding: 0;margin: 0;display: block;border: none;width: 100%!important;font-size: 24px;text-align: left;padding-bottom: 10px!important;margin-bottom: 50px;border-bottom: solid 1px #ccc;color: #333;font-weight: 700;position: relative}
.cate_title::before{position: absolute;content: "";width: 100px;height: 5px;left: 0;bottom: -5px;background-color: #002060}

#footer_contact > p{color: #fff;opacity: 0.6}
footer.bg_color3{background-color: #222222}


/** tablet 780 **/
@media screen and (max-width: 768px){
#wrap{padding-top: 90px}
#logo{width: 180px}
.main_txt{font-size: 30px;right: 50px;bottom: 50px}
.main_txt2{left: 50px;top: 50px}
.index header{height: 60vw!important}
.index header span.before{left: -300px}
.index header span.after{height: 60vw;bottom: 0;top: auto;right: -200px}
#top_message h2{font-size: 22px}
#filter_white{padding-top: 100px;padding-bottom: 100px}
#wrap:not(.index) header span.before, #wrap:not(.index) header span.after{display: none}
#footer_contact .more a{width: 300px;box-sizing: border-box}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#wrap{padding-top: 70px}
#logo{width: 120px}
.main_txt{font-size: 20px;right: 20px;bottom: 50px}
.main_txt2{left: auto;top: auto}
#tel_txt .more a, #cms_2-a .more a{padding-left: 0;padding-right: 0}
.index header span.before{left: -200px}
.index header span.after{right: -60px}
.banner_wrap .banner_bt{height: 150px}
.cate_list li{width: 100%!important}
}

/** IE **/
@media all and (-ms-high-contrast:none) {
#cms_3-f .sub_cate_title{padding-bottom: 3px}
}