﻿@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700;900&display=swap');

body,.main_txt span.txt,#contents .box_wrap .con_txt,#intro_txt .fadein.d_flex::before{font-family: 'Noto Serif JP',"游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;}

#header_menu li a .txt_color1,#page_title p,#header span.font_12,.top_cms_box .cms_title p{
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
}
.width_900-max {
    max-width: 1280px;
}
#header span.font_12{
	font-size: 13px;
    line-height: 1;
}
.shadow-l {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#header .far{display: none}
#loader,#wrap{overflow: hidden}


/* loader ---------------------------------------------------------------------------------------------*/
#loader{
	top: 0;
	left: 0;
	z-index: 9999;
}
#loader {
    background: url(../dup/img/loading.jpg) center bottom -136px / 100% 100% no-repeat #fff;
}
.load_logo figure{
	max-width: 506px;
	z-index: 2;
}
#loader.top .load_logo figure{
	animation-name: loader;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}
@keyframes loader {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
#loading_line,#loading_bg{
	left: 0;
	top: 0;
	margin: auto;
	height: 100%;
	-webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    transition: -webkit-transform .75s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .75s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .75s cubic-bezier(0.3, 1, 0.1, 1), -webkit-transform .65s cubic-bezier(0.3, 1, 0.1, 1);
	z-index: -2;
}
#loading_bg{z-index: -1;transition-delay: .1s;background-color: #fff;}
#loader.load_bg #loading_line,#loader.load_bg #loading_bg{transform: scaleX(1);}


/*--- anime ------------------------------------*/
.title_anime {
    position: relative;
	overflow: hidden;
	z-index: 1;
	padding: 7px 10px;
}
.title_anime::after{
   	content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #e82734;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: transform .8s ease .6s;
	z-index: 2;
}
.main_txt span.txt{position: relative;z-index: 1; opacity: 0;transition: opacity .6s ease .8s;}
.main_txt.start span.txt{opacity: 1;}

.main_txt.start .title_anime::after {
	-webkit-transform: translateX(110%);
    transform: translateX(110%);
}

#page_title{overflow: hidden}
#page_title .bg{
	bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
	z-index: 0;
}
#page_title h2.animStart{animation: heroText 600ms 800ms both;}
#page_title h2.animStart span{animation: heroText 600ms 900ms both;}

#page_title.animStart .bg{
	-webkit-animation: "page_scale" 1.5s 0.2s;
    animation: "page_scale" 1.5s 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes page_scale{
	0%{-webkit-transform:scale(1.1);transform:scale(1.1)}
	100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes page_scale{
	0%{-webkit-transform:scale(1.1);transform:scale(1.1)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
}

.sns_links li{margin-top: 45px}


/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #e82734;}
.bg_color1 .linkStyle,.bg_color3 .linkStyle{color: #fff;}

body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #e82734} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #2f2f2f} /* アクセントカラー1 */
.txt_color4{color: #ccc} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #e82734} /* メインカラー */
.bg_color2{background-color: #e6e6e6} /* サブカラー */
.bg_color3{background-color: #2f2f2f} /* アクセントカラー1 */
.bg_color4{background-color: #ccc} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #e82734}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #2f2f2f}
.border_color4{border-color: #ccc}

/* 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: #e82734} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #2f2f2f} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #ccc} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #e82734} /* メインカラー */
.hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #2f2f2f} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #ccc} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #e82734}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #2f2f2f}
.hvr_border_color4:hover{border-color: #ccc}

footer.bg_color3{background-color: #fff}
footer .txt_white,#page7 .box_item p{color: #333333;}



/* header ---------------------------------------------------------------------------------------------*/
header #header{padding-top: 10px;}
#logo{width: 30%!important;}
#logo img{width: 100%!important;}
#header_menu ul{justify-content: space-between;}
header #header #header_menu li{position: relative;border: none;width: 16.555555%;}
header #header #header_menu li::before {
    display: inline-block;
    content: "";
    width: 38px;
    height: 1px;
    background: #2f2f2f;
    position: absolute;
    top: 50%;
    left: -20px;
    transform: rotate(-43deg);
}
header #header #header_menu li:first-of-type::before{display: none;}

header #header #header_menu li a{border: none;}
header #header #header_menu li a:hover{border: none;opacity: 0.7}
#header_menu ul li a span{font-size: 16px;}



/* top ---------------------------------------------------------------------------------------------*/
#video{height: 90vh}
#main_img::before{
	content: "";
	display: inline-block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 0.03;
	background-color: #000;
}
#main_img .main_txt {
    z-index: 10;
    top: 37%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
    font-size: 35px;
    font-weight: bold;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

#intro{
	border: none;
	padding-top: 100px;
	position: relative;
	background: url( "../dup/img/intro_bg.jpg" ) center / cover no-repeat ;
}
#intro::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -195px;
    height: 146px;
    background-image: url(../dup/img/bg2.png);
    background-size: 100% 100%;
    z-index: 10;
}
#intro h2{border-bottom: 3px solid #f6ba00;}
#intro_txt{padding-bottom: 80px;padding: 0 3%;}

#intro_txt .fadein.d_flex{position: relative;padding-top: 80px;}
#intro_txt .fadein.d_flex::before {
    content: 'INTRODUCTION';
    display: inline-block;
    position: absolute;
    left: 119px;
    top: -28px;
    font-family: 'Oswald', sans-serif;
    font-size: 53px;
    font-weight: 600;
    color: #2f2f2f;
}
#intro_txt .fadein.d_flex::after {
    display: inline-block;
    content: "";
    width: 100px;
    height: 1px;
    background: #000;
    position: absolute;
    top: 19px;
    left: 0;
}
#intro_txt .bg_color3{background-color: #e82734;}
#intro_txt .bg_color3 h3{border-color: #2f2f2f;}

#contents{
	background-position: center!important;
	background-repeat: no-repeat!important;
    background-attachment: fixed!important;
	margin-bottom: 86px;
}
#contents::after{background-color: rgba(0,0,0,0.31);}
#contents::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 146px;
    background-image: url(../dup/img/bg1.png);
    background-size: 100% 100%;
    z-index: 10;
}
#contents .box_wrap {
    padding: 0 3%;
    padding-top: 227px;
    padding-bottom: 258px;
    position: relative;
}
#contents .box_wrap .con_txt {
    left: 465px;
    font-family: 'Oswald', sans-serif;
    bottom: 136px;
    font-size: 99px;
    font-weight: 600;
    color: rgba(255,255,255,0.1);
    z-index: -1;
    line-height: 1;
    letter-spacing: 0;
    width: 768px;
    transform: perspective(289px) rotateY(28deg);
}

#contents .box_wrap .border_color3{border-color: #f6ba00;}
#contents .box_wrap .bg_color1{background-color: transparent;border: none;}



/* footer ---------------------------------------------------------------------------------------------*/
#logo2{width: 100%!important}
#logo2 img{max-width: 182px}
.info_wrap{
	background-color: #171717;
    position: relative;
    padding-bottom: 0;
}
.info_wrap::before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    top: -1px;
    height: 146px;
    background-image: url(../dup/img/bg2.png);
    background-size: 100% 100%;
}
iframe{
	position: relative;
    z-index: 1;
}
#bottom_menu{
	padding: 13px;
    background-color: #e82734;
    margin-top: -7px;
}
#bottom_menu nav ul{margin: 0;}
#page-top{z-index: 99;}

#footer .width_80per{width: 100%!important;}

/* bnr */
.link_bnr {padding: 50px 20px 0;}
.bnr_img{
	position: relative;
	overflow: hidden;
}
.bnr_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.link_bnr .bnr_img a{position: relative;transition: opacity .3s}
.link_bnr .bnr_img a:hover{opacity: 0.7;}
.link_bnr .bnr_img a::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(23,23,23,0.53);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}
.link_bnr .box:nth-of-type(3) a::before,.link_bnr .box:nth-of-type(4) a::before{display: none}
.link_bnr .bnr_img .title {
    z-index: 2;
    color: #fff!important;
    font-size: 15px;
    letter-spacing: 3px;
    width: 90%;
    text-align: center;
    margin: auto;
	font-weight: bold;
}




/* 他 ---------------------------------------------------------------------------------------------*/
#page_title{
	max-width: 100%;
    padding-bottom: 50px;
	padding-top: 65px;
	position: relative;
}
#page_title::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 1;
}
#page_title h2,#page_title div:not(.bg){position: relative;z-index: 2;color: #fff;}
#page_title div:not(.bg){box-shadow: 7px 7px rgba(0,0,0,0);}
#page_title p{background-color: transparent;}



/* cms ---------------------------------------------------------------------------------------------*/
#cms_6-a .cate_box:last-of-type{border-bottom: none}
#cms_2-b .cate_box {
    border: none;
	padding: 10px;
}
#cms_2-b .box_title1{
	border-top: 1px solid #e82734;
	border-bottom: 1px solid #e82734;
	padding: 5px;
	font-size: -webkit-calc(1rem + 6px);
    font-size: calc(1rem + 6px);
}
#cms_2-d h4{border-color: #f6ba00;color: #333333;}
.cms_6-b .cate_box .box_txt2,#cms_6-b .cate_box .box_txt2{color: #333333;}
.cms_6-b .cate_box:nth-of-type(2) {border-top: 1px solid #cccccc;}
#cms_2-b .box_item{justify-content: flex-start;}
#cms_2-b .box_item .grid_5{width: 44.66667%!important;text-align: center;}


/* -------------2021.02.10　カテゴリータイトル修正 -------------*/
.cate_title {
    background-color: transparent;
    padding: 0;
    margin: 0;
    display: block;
    border: none;
    width: 100%!important;
    font-size: 25px;
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 50px;
    border-bottom: solid 2px #e7373f;
    color: #2f2f2f;
    font-weight: bold;
    position: relative;
    padding-left: 120px;
	text-align: left;
}
.cate_title::before {
	content: '';
	display: inline-block;
	width: 100px;
	height: 50px;
	background-image: url("../dup/img/cate_title_icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 0;
}



/* IE */
@media all and (-ms-high-contrast: none){
#page8 #tel_contact a{padding: 14px 20px 13px !important;}
#contents{background-position: center!important;background-repeat: no-repeat!important;background-attachment: fixed!important;}
#cms_2-b .cate .cate_title,#cms_2-b .box_title1,#cms_2-b .box_title1{padding-top: 5px!important;}
#cms_6-a .cate .cate_title{padding-top: 14px!important;}
.intro div h3{padding-top: 3px!important;}
.cms_title p{padding-top: 9px!important;}
#top_cms .more a{padding: 0 0 3px!important;}
#top_cms .eff-4{height: 55px!important}
.cms_6-b .cate_box .box_txt1,#cms_6-b .cate .box_txt1,.cms_6-b .cate .box_txt2,#cms_6-b .cate .box_txt2{padding: 10px!important;}
#header .header_right > p{padding: 5px!important;}
#header .header_right > div > p a{padding: 0!important;padding-bottom: 5px!important;}
.cate_list li a{padding-top: 10px!important;}
#cms_6-b .cate .cate_title{padding: 5px 5px 8px!important;}
#page9 .box a{padding-top: 9px!important;}
#page10 .button-4 a{padding-top: 0!important;}
}
/* IE タブレット以下 */
@media all and (-ms-high-contrast: none) and (max-width: 768px){
#contents{background-position: center!important;background-repeat: no-repeat!important;background-attachment: scroll!important;}
}
/* Edge */
@supports (-ms-ime-align: auto) {
#contents{background-position: center!important;background-repeat: no-repeat!important;background-attachment: fixed!important;}
}
/* Edge タブレット以下 */
@media all and (max-width: 768px){
@supports (-ms-ime-align:auto){
#contentsx{background-position: center!important;background-repeat: no-repeat!important;background-attachment: scroll!important;}
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#video {height: 500px;}
#logo{width: 43%!important;}
header #header #header_menu li{min-width: auto;}
header #header #header_menu li::before {width: 26px;left: -19px;}
#header_menu li a .font_18{font-size: 15px;}
#main_img::before{opacity: 0.25;}

#intro {padding-top: 81px;padding-bottom: 78px;background-image: none;}
#intro::before{top: -48px;height: 49px;}
#intro::after{bottom: -48px;height: 49px;}
#intro_txt .fadein.d_flex::after{width: 72px;}
#intro_txt .fadein.d_flex::before {
    left: 97px;
    top: -20px;
    font-size: 46px;
}
#contents .box_wrap{padding-top: 150px;padding-bottom: 176px;}
#contents .box_wrap .con_txt {
    left: 213px;
    bottom: 82px;
    font-size: 61px;
    width: 80%;
}
.info_wrap::before,#contents::before{height: 49px;}
.link_bnr .bnr_img .title{font-size: 22px;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#video {height: 39vh;}
#main_img .main_txt {
    width: 91%;
    font-size: 16px;
}
.load_logo{width: 64%;}
#header{padding: 5px 0;}
#logo,#logo h1 img{width: 100%!important;}
#logo h1{padding: 0}
.menu_bt{width: 14%!important;}
header #header{padding: 10px 0;}

intro {padding-top: 51px;padding-bottom: 60px;}
#intro::before{top: -29px;height: 29px;}
#intro::after{bottom: -29px;height: 29px;}
.info_wrap::before{height: 29px;}
#intro h2 {font-size: 18px;}
	
#intro_txt .fadein.d_flex::after {
    width: 52px;
}
#intro_txt .fadein.d_flex::before {
    left: 66px;
    top: -3px;
    font-size: 29px;
}
	
#contents {
    margin-bottom: 60px;
    background-attachment: scroll!important;
}
#contents .box_wrap{padding-top: 100px;padding-bottom: 96px;}
#contents .box_wrap .con_txt {
    left: 47px;
    bottom: 57px;
    font-size: 59px;
    width: 96%;
}

.top_cms_box{margin-bottom: 80px;}
#info figure{width: 80%!important;margin: auto}
#logo2 img {max-width: 120px;}
.link_bnr {padding: 40px 10px 0;}

#page_title h2{font-size: 22px;}

#cms_2-b .cate_box{padding: 0;}
#cms_2-b .box_title1{font-size: -webkit-calc(1rem + 2px);font-size: calc(1rem + 2px);}
#cms_6-a .cate_img1 {width: 100%!important;}
#cms_2-b .box_item .grid_5{width: 100%!important;}

/*--- 2021.02.10 カテゴリータイトル修正 ---*/
.cate_title{font-size: 20px;padding-left: 82px;}
.cate_title::before{width: 75px;left: -7px;}

}



/*------------- 2021.06.15 -------------*/
.cate_list li {
	position: relative;
    box-shadow: none;
    border: none;
    padding-left: 37px;
    background: url(../dup/img/cate_list_item01.png) bottom left / auto 86% no-repeat;
}
.cate_list li a {
    border: 2px solid #e7373f;
    background-color: #fff;
    color: #333333;
    border-radius: 2px;
    position: relative;
}
.cate_list li a::before, .cate_list li a::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 23px;
    height: 23px;
    background-image: url(../dup/img/cate_list_item02.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: -23px;
    bottom: -12px;
    z-index: 1;
}
.cate_list li a::after{left: auto;right: 10px;}
.cate_list li a:hover{color: #333333;}

.cate_list li:hover{
	opacity: 1;
	
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}
@keyframes upDown {
    0% {bottom: 0;}
    100% {bottom: -3px;}
}

@media screen and (max-width: 667px){
.cate_list li {padding-left: 34px;font-size: 14px;width: auto;margin: 0 10px 28px;}
}




