@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
.main_txt2{font-family: 'Lato', sans-serif;}

body, .font_Quick{font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;}

#header, .overlay, #top_contents1 h2, #top_contents2 h2, .top_cms_title h2, .more a, .box_title1, .service_wrap, #top_contact_box, .info_txt h3, .tel_bt a, #footer_nav, .cate_title, #page_title, #contact_tel, #top_contents1 h2::after, .top_cms_title p, .top_info_title p, #page_title p, .info_title_inner h2, .btn a .txt, .cms_6-a a p {font-family: 'Noto Serif JP', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;}

#header-nav {font-weight: 600;}
#top_contents1 h2, #top_contents2 h2, .tel_bt a, .box_title1, .cate_title {font-weight: 600;}


/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #B10000;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #B10000} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #1A1A1A} /* アクセントカラー1 */
.txt_color4{color: #f6f6f6} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #B10000} /* メインカラー */
.bg_color2{background-color: #e6e6e6} /* サブカラー */
.bg_color3{background-color: #1A1A1A} /* アクセントカラー1 */
.bg_color4{background-color: #f6f6f6} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #B10000}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #1A1A1A}
.border_color4{border-color: #f6f6f6}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #B10000} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #1A1A1A} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f6f6f6} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #B10000} /* メインカラー */
.hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #1A1A1A} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f6f6f6} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #B10000}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #1A1A1A}
.hvr_border_color4:hover{border-color: #f6f6f6}


/* all ---------------------------------------------------------------------------------------------*/
#header{
    position: absolute;
    z-index: 99;
    width: 100%;
    box-sizing: border-box;
}
#header-nav span.txt_color_nomal {
    font-size: 15px;
    font-weight: normal;
    color: #ffffff;
	letter-spacing: 2px;
}
#logo {
    width: 36%;
    max-width: 570px;
    height: auto;
    top: 0;
    left: 0;
    background-color: transparent;
}
#logo h1 {
    top: 0;
    left: 0;
    transform: none;
    background-color: white;
    padding: 25px 30px 30px;
    box-sizing: border-box;
}
#header-nav li a .before{
	height: 1px;
	background-color: #ffffff;
}
.more a:hover{transform: scale(1.05)}


/* top ---------------------------------------------------------------------------------------------*/
#main_img {
    max-height: 100vh!important;
    height: 100vh;
}
#video{height: 100vh;}

#main_img::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 2;
	background: linear-gradient(355deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.18) 100%);
}
#main_txt {
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84%;
    z-index: 2;
    max-width: 1480px;
}
.main_txt2 {
    z-index: 2;
    top: 61%;
    font-size: 28px;
    letter-spacing: 5px;
    opacity: 0;
    transition: opacity 1s 2s;
    /* mix-blend-mode: exclusion; */
    font-weight: bold;
}
.animStart.main_txt2{opacity: 1}

#top_contents1 h2 {font-size: 43px;}
#top_contents1 p{font-size: 18px;}
#top_contents2 h2{font-size: 27px;}
#top_contents1{
	position: relative;
	overflow: hidden;
	background-image: repeating-linear-gradient(90deg, #f6f6f6 0, #f6f6f6 1px, #ffffff 0, #ffffff 50%);
    background-size: 261px 32px;
}
#top_contents1 img.item1{
	max-width: 800px;
    width: 73%;
    margin-top: 75px;
    margin-bottom: -10px;
}
#top_contents1 .more a {
    color: #fff;
    background-color: #1a1a1a;
}
#top_contents1 .more a:hover{background-color: #999999;}
#top_contact_box .bottom .btn_box:nth-of-type(2) p{padding-right: 59px;}
#top_contact_box .fa-envelope:before {
    content: "\f059"!important;
}


/* ---------- top_cms ---------- */
.top_cms_title p, .top_info_title p {
    font-size: 54px;
    font-weight: 400;
    color: #333333;
    margin: auto;
    text-align: center;
    overflow: hidden;
    height: 73px;
}

.cms_6-a a p{
	z-index: 3;
    letter-spacing: 4px;
    font-size: 26px;
	opacity: 0;
	top: 52%;
	transform: translate(-50%,-50%) scale(0);
}
.cms_6-a a figure{position: relative}
.cms_6-a a figure::before, .cms_6-a a figure::after{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(26,26,26,0.60);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 1;
}
.cms_6-a a figure::after{
	background: transparent;
	z-index: 2;
}
.cms_6-a a p, .cms_6-a a figure::before, .cms_6-a a:hover figure::after, .cms_6-a a figure img{transition: all .5s}
.cms_6-a a:hover p, .cms_6-a a:hover figure::before, .cms_6-a a:hover figure::after{opacity: 1}
.cms_6-a a:hover p{
	transform: translate(-50%,-50%) scale(1);
}
.cms_6-a a:hover figure::after{
	width: calc(100% - 18px);
    height: calc(100% - 18px);
	border: 2px solid #fff;
}
.cms_6-a a:hover figure img{
	-ms-transform: translate(-50%,-50%) scale(1.1);
    -webkit-transform: translate(-50%,-50%) scale(1.1);
    transform: translate(-50%,-50%) scale(1.1);
}



/* under ---------------------------------------------------------------------------------------------*/
#page_title p{font-size: 22px;letter-spacing: 2px;}
#cms_2-a .cate .cate_box:last-of-type{border-bottom: 1px solid #B10000;}


/* anim ---------------------------------------------------------------------------------------------*/
.txt_anim span{
    -webkit-transition: opacity .8s cubic-bezier(.215,.61,.355,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
    transition: opacity .8s cubic-bezier(.215,.61,.355,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
    transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1);
    transition: transform .8s cubic-bezier(.215,.61,.355,1),opacity .8s cubic-bezier(.215,.61,.355,1),-webkit-transform .8s cubic-bezier(.215,.61,.355,1);
    position: relative;
    display: inline-block;
    letter-spacing: .13em;
    opacity: 0;
    -webkit-transform: translateX(-60%);
    transform: translateX(-60%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.txt_anim span.start{
	opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.fadein{
	transform: translateY(20px);
	transition: transform 1.5s ease, opacity 2s;
	transition-property: opacity,transform;
	opacity: 0;
}
.fadein.start{transform: translateY(0);opacity: 1;}
#page9 a{padding: 5px 10px 7px!important}


/* IE */
@media all and (-ms-high-contrast: none){
#main_txt{opacity: 1!important;}
.main_txt2 {
    font-size: 22px;
    opacity: 1!important;
}
#page9 a{padding-top: 3px!important}
.mail_bt a{padding: 10px 28px!important}
.tel_bt a i{transform: translateY(-47%)!important}
.overlay .menu-box .tel_bt a i{transform: translateY(-33%)!important}
#cms_6-a .cate .cate_title, #cms_2-a .cate .cate_title{padding-top: 10px!important}
.font_Quick .cate_list li a{padding: 14px 15px 15px!important}
#cms_2-a .cate .cate_title{padding-top: 9px!important}
#cms_1-e .date{padding-top: 9px!important;padding-bottom: 11px!important}
#top_cms .more a{padding: 15px!important;}
#top_contact_box .tel_bt .posi_center{top: 48%!important;}
#top_contact_box a i{top: 53%!important;}
#top_contact_box .con_bt .posi_center{top: 47%!important}
#top_contact_box .con_bt a i{transform: translateY(-45%)!important}
}

/* ---------- 1280 ---------- */
@media screen and (max-width: 1280px){
.main_txt2 {font-size: 30px;}
#top_contents1 h2 {font-size: 38px;}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.overlay{top: 60px;}
#header {
    z-index: 999;
    width: 80%!important;
	position: fixed;
}
#fix_menu {
    padding: 28px 0 29px;
}
#logo {
    max-width: 100%;
    height: 61px;
}
#logo h1{padding: 0}
#logo h1.logo {left: -7px;max-width: 320px;}
#main_img{height: calc(53vh + 65px);}
#video{height: 53vh;}
#main_txt{top: 55%;}
.main_txt2{top: 68%;font-size: 26px;}
#top_contents1 h2{font-size: 31px}
#top_contact_box .bottom .btn_box:nth-of-type(2) p {padding-right: 0;}
.cms_6-a a p{font-size: 18px}
}


/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#logo {height: 62px;width: 72%!important;}
#logo h1.logo{left: 15px;}
#main_img{height: calc(40vh + 65px);}
#video{height: 40vh;}
#main_txt{top: 59%;width: 88%;}
.main_txt2{top: 72%;font-size: 13px;}
#top_contents1 {padding: 50px 30px 75px;overflow: hidden}
#top_contents1 h2{font-size: 23px}
#top_contents1 p {font-size: 14px;}
#top_contents1 img.item1 {
    width: 100%;
    margin-top: 56px;
    margin-bottom: -32px;
    transform: scale(1.1);
}
#top_contents2 h2 {font-size: 20px;}
.top_cms_title p, .top_info_title p {
    font-size: 37px;
    height: 54px;
}
.cms_6-a .box_title1{font-size: 20px}
}