@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap');
#r_fix {
    bottom: 101px;
    right: 11px;
    z-index: 10;
    width: 168px;
}

/* color ---------------------------------------------------------------------------------------------*/
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #0a3357} /* メインカラー */
.txt_color2{color: #e6e6e6} /* サブカラー */
.txt_color3{color: #816037} /* アクセントカラー1 */
.txt_color4{color: #c9baa9} /* アクセントカラー2 */

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


/* border-color ※!important */
.border_color1{border-color: #0a3357}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #816037}
.border_color4{border-color: #c9baa9}


/* 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: #0a3357} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #816037} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #c9baa9} /* アクセントカラー2 */

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


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #0a3357}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #816037}
.hvr_border_color4:hover{border-color: #c9baa9}



body {
    font-family:'Noto Serif JP',"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","游明朝体",YuMincho,"Yu Mincho","ＭＳ Ｐ明朝","MS PMincho",serif;
    line-height: 160%;
    font-weight: 300;
    font-synthesis: none;
    -moz-font-feature-settings: 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    direction: ltr;
    color: #232323;
}

#logo .logo {
    text-align: center;
    width: 369px;
}
#logo2{
    width: 330px;
}
#main_img .svg_box,#page_title .svg_box,.svg_box2 {display: none;}
#main_img{position: relative}
#main_img::before {
    content: '';
    display: inline-block;
    width: 52%;
    max-width: 800px;
    height: 100%;
    background-image: url(../dup/img/main_txt.png);
    background-size: 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    right: 40px;
    top: 34%;
    z-index: 10;
	opacity: 0;
	-webkit-transform: translate(20px);
	transform: translate(20px);
	opacity: 0;
	-webkit-transition: transform 1.2s cubic-bezier(.645,.045,.355,1) ,opacity 1.5s cubic-bezier(.645,.045,.355,1) ;
	transition: transform 1.2s cubic-bezier(.645,.045,.355,1) ,opacity 1.5s cubic-bezier(.645,.045,.355,1);
}
#main_img.animStart::before {
	transform: translate(0) scale(1);
	opacity: 1;
}

header{background: rgba(255,255,255,0.6);}
header #header #header_menu li:last-child a span{
	background-color: #816037;
	color: #fff;
	border: none;
	padding: 7px 10px 5px;
}
header #header #header_menu li:last-child a span:hover{
	background-color: #816037;
}


/* ---------- intro, contents ---------- */
#intro h2{font-size: 26px;letter-spacing: 3px;border-color: #0a3357;}

#contents .box{position: relative}
#contents .box:first-of-type::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 64%;
    max-height: 421px;
    background: #f3f3f3;
    position: absolute;
    top: 259px;
    right: 0;
    left: 0;
    margin: auto;
    transform: skewY(-14deg);
    z-index: -1;
}
#contents .box:last-of-type::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 64%;
    max-height: 421px;
    background: #f3f3f3;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    transform: skewY( 14deg);
    z-index: -1;
}

#contents .box_wrap .box div .grid_6:first-of-type{padding: 5%;}

.contents_title {
    padding: 95px 20px 100px;
    margin: auto;
    position: relative;
    margin-bottom: 60px;
}
.contents_title::before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 93px;
    background: #816037;
    position: absolute;
    bottom: -28px;
    right: 0;
    left: 0;
    margin: auto;
}
.contents_title .font_20{font-size: 24px;letter-spacing: 3px}
#contents h3{font-size: 24px;line-height: 1.7;}
.more{margin: auto;margin-top: 30px;}



/* アニメーション ---------------------------------------------------------------------------------------------*/
.fadein{
	transform: translateY(50px);
	transition: transform 1.5s ease, opacity 2s;
	opacity: 0;
}
.fadein.start{transform: translateY(0);opacity: 1;}

#contents .box{opacity: 1!important;transform: translateY(0)!important;}
#contents .box.fadein:last-of-type::before {
	transform: skewY(14deg) translateX(-100%);
	opacity: 0;
	transition: transform 1s ease 1s, opacity 1s 1s;
}
#contents .box:first-of-type::before{
	transform: skewY(-14deg) translateX(100%);
	opacity: 0;
	transition: transform 1s ease 1.3s, opacity 1s 1.3s;
}
#contents .box.fadein.start:last-of-type::before{transform: skewY(14deg) translateX(0);opacity: 1;}
#contents .box.fadein.start:first-of-type::before{transform: skewY(-14deg) translateX(0);opacity: 1;}


/* ---------- other ---------- */
#page_title{background-position: center;}
#page_title #filter_white{ background-color: rgba(18, 53, 78, 0.64)!important;}
#page_title h2 span{background: none;}
.cms_title h2{font-size: 28px;}
.cate_list li a{border: 1px solid #ddd;}
.cate_list li a:hover{background: #ddd;}
footer .bg-mask{background: #f0f3f9;}

.cate_title{padding-bottom: 15px;}

.bnr{
	width: 300px;
	margin-top: 66px;
	margin-bottom: 0;
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	header {background: rgba(255,255,255,0.7);}
	header #header #header_menu li {width: auto;}
	#intro {padding-bottom: 200px;background-size: contain!important;}

	#main_img::before{top: 45%;}
	#video{margin-top: 154px;}
	#contents .grid_11{width: 100%!important;}
	#contents .offset-1r{margin-right: 0;}
	#contents .offset-1{margin-left: 0;}
	.contents_title{padding: 90px 20px 100px;}
	#contents .grid_6 {width: 90%!important;margin: auto;}
	#contents .shadow-l{width: 80%!important;}
	#contents .grid_6.mg_b-20px_sp {margin-bottom: 20px;}
	#contents .box_wrap .box div .grid_6:first-of-type {padding: 5%;margin-bottom: 20px;}
	#contents .box_wrap .box{padding-top: 0;padding-bottom: 50px;}
	#contents .box_wrap .box:last-of-type{padding-bottom: 100px;}
	#page_title #filter_white{padding-top: 206px!important;}

	#contents .box:last-of-type::before{top: 303px;}
	#contents h3{text-align: center}
	
	.footer_cms{width: 75%;margin-left: 0;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#logo .logo {text-align: center; width: 200px;}
	header{padding-bottom: 0px;}
	#filter_white{padding: 0px;}
	#main_img{margin-top: 61px;}
	#main_img::before {
		width: 64%;
		right: 14px;
		top: 26%;
	}
	#video{margin-top: 0;}
	#intro {background-attachment: scroll;}
	#intro #intro_txt{padding-top: 60px;}
	#intro h2{font-size: 20px;transform: translateY(0)!important;}
	#intro p{transform: translateY(0)!important;opacity: 1!important;}
	.contents_title{padding: 80px 15px 100px;margin-bottom: 26px;}
	.contents_title .font_20 {font-size: 19px;letter-spacing: 2px;}
	.contents_title::before{bottom: 0; height: 71px;}
	#contents h3 {font-size: 19px;margin-bottom: 20px;}
	#contents .grid_6{width: 95%!important;}
	#contents .shadow-l{width: 100%!important;}
	#top_cms{width: 90%!important;margin: auto;min-width: 90%;}
	#page_title #filter_white{padding-top: 125px!important;}

	#contents .box:first-of-type::before, #contents .box:last-of-type::before{top: auto;bottom: 0;height: 26%;}
	#copyright{font-size: 11px;}
	
	.bnr{width: 80%;}
	.footer_cms{width: 100%;;}
}

/*IEのみ
---------------------------------------------------------------------------*/
@media all and (-ms-high-contrast: none) {
	header #header #header_menu li:last-child{padding-top: 30px}
	header #header #header_menu li:last-child a span{padding: 5px 10px 8px;}
	.more a{padding: 5px 5px 8px 5px;}
	.pager li a span{padding-top: 0px!important;}
	#page8 #tel_contact p a{padding: 18px 20px 21px;}
	#page8 #form_box #form_bt div::after{top :49%;}
	#page9 .box_wrap .box p a{padding:3px 10px 5px; }
	#cms_2-b .cate .cate_title{padding-top: 15px!important}
	#cms_5-b .cate_box .arrow, .cms_5-b .cate_box .arrow{top: 57%!important;}
}


/*----- 2021.0513.修正 -----*/
#main_img::before{top: 52%;}