@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

#top_contents1 h2::after, .txt_anim, .top_cms_title p, .top_info_title p, #page_title p {font-family: 'Sorts Mill Goudy', serif;}
#page_title p{font-size: 22px;letter-spacing: 2px;}

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

#con_fix {
    bottom: 12px;
    right: 25px;
    left: 0;
    z-index: 10;
    width: 61%;
    margin: auto;
}

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

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


/* border-color ※!important */
.border_color1{border-color: #061a59}
.border_color2{border-color: #e6e6e6}
.border_color3{border-color: #2d2d2d}
.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: #061a59} /* メインカラー */
.hvr_txt_color2:hover{color: #e6e6e6} /* サブカラー */
.hvr_txt_color3:hover{color: #2d2d2d} /* アクセントカラー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: #061a59} /* メインカラー */
.hvr_bg_color2:hover{background-color: #e6e6e6} /* サブカラー */
.hvr_bg_color3:hover{background-color: #2d2d2d} /* アクセントカラー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: #061a59}
.hvr_border_color2:hover{border-color: #e6e6e6}
.hvr_border_color3:hover{border-color: #2d2d2d}
.hvr_border_color4:hover{border-color: #c9baa9}



/* loader ---------------------------------------------------------------------------------------------*/
#fakeloader .fl{
	position: absolute;
	top: 49%!important;
	left: 50%!important;
	transform: translate(-50%,-50%);
	width: 50%;
	max-width: 195px;
}
#fakeloader .fl{
	animation-name: loader;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}
@keyframes loader {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/* design ---------------------------------------------------------------------------------------------*/
.top_cms_wrap, footer .bg-mask {background: url( "../dup/img/bg1.jpg" ) center / 800px repeat!important;}
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: left;
    width: 312px;
}
#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;
}
/*#main_img::after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 99.3%;
    background: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
*/
header{background: rgba(255,255,255,0.6);}
header #header #header_menu li:last-child a span {
    background-color: #ec7f0a;
    color: #ffffff;
    border: none;
    padding: 7px 10px 8px;
    font-size: 17px;
    box-shadow: 3px 3px 2px rgb(0 0 0 / 15%);
}
header #header #header_menu li:last-child a span:hover{
	background-color: #2d2d2d;
}


/* ---------- top ---------- */
.bnr{width: 400px;margin-bottom: 50px;margin-top: -30px;}
#intro #intro_txt{padding-bottom: 133px;background: url( "../dup/img/intro_bg.jpg" ) center / 800px repeat;overflow: hidden}
#intro #intro_txt::before {
    display: inline-block;
    content: "";
    width: 68%;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    /* right: 0; */
    margin: auto;
    transform: skewX(-39deg);
}
#intro h2{font-size: 26px;text-align: left; letter-spacing: 3px;border-color: #2d2d2d;position: relative;padding-top: 47px;margin-bottom: 46px;font-weight: 600;}
#intro h2::before {
    content: '';
    display: inline-block;
    width: 294px;
    height: 62px;
    background-image: url(../dup/img/item1.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
#intro h2 span{border: none}
#intro p{line-height: 2;z-index: 2;position: relative;}

.contents_title {
    padding: 128px 20px 26px;
    margin: auto;
    position: relative;
    margin-bottom: 60px;
}
.contents_title::before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 116px;
    background: #2d2d2d;
    position: absolute;
    top: -40px;
    right: 0;
    left: 0;
    margin: auto;
}
.contents_title span{color: #061a59;font-weight: 500;}

#contents{max-width: 1480px;overflow: hidden;}
#contents .box_wrap .box div .grid_6:first-of-type{padding: 0;padding-top: 4%;}
#contents h3 {
    font-size: 24px;
    line-height: 1.7;
    font-weight: 500;
    letter-spacing: 2.5px;
    background-color: #fff;
    padding: 10px 10px;
    box-shadow: 7px -7px 20px rgba(0,0,0,0.05);
    transform: translateX(-121px);
    margin-bottom: 50px;
}
#contents .box_wrap .box:nth-of-type(2) h3{text-align: right;transform: translateX(121px);}

.more{margin: auto;margin-top: 30px;}
.more a{padding: 5px 5px 8px;}

.top_cms_wrap{padding-top: 34px;padding-bottom: 100px;}
#top_cms .top_cms_box{margin-bottom: 150px;}
#top_cms .top_cms_box:nth-last-of-type(2){margin-bottom: 0px;}
.cms_title h2 {
    font-size: 28px;
    padding-left: 10px;
    border-left: 5px solid #061a59;
	font-weight: 600;
}
.cms_2-c .txt_color1{
	font-size: -webkit-calc(1rem + 7px);
    font-size: calc(1rem + 7px);
	font-weight: 500;
}
.cms_2-c .border_so1-l{border: none;}

#top_cms .top_cms_box{
	padding-left: 50px;
	box-sizing: border-box;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
}
#top_cms .top_cms_box .cms_title{
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 32px;
}
.cms_2-c, .cms_2-b_wrap, .cms_1-a{justify-content: space-around;width: 90%;}
.cms_2-b_wrap, .cms_1-a{padding: 5% 0 0;}
.cms_2-b_wrap .cate{width: 48%!important;margin-bottom: 20px;}

.cms_2-b_wrap .cate .box_img{
	transition: transform .6s;
}
.cms_2-b_wrap .cate:hover .box_img {
    transform: scale(1.05);
}
.cms_2-b_wrap .cate .box_img::before {
    display: inline-block;
    content: "";
    width: 100%;
    height: 100%;
    background: #4c4c4c;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
    transition: all .5s;
    opacity: 0.3;
}
.cms_2-b_wrap .cate::after {position: relative}
.cms_2-b_wrap .cate::after {
    display: inline-block;
    content: "01";
    position: absolute;
    bottom: 32px;
    right: 6px;
    font-size: 107px;
    font-weight: 100;
    color: #ffffff5e;
    z-index: 2;
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif"!important;
}
.cms_2-b_wrap .cate:nth-of-type(2)::after{content: "02";}
.cms_2-b_wrap .cate:nth-of-type(3)::after{content: "03";}
.cms_2-b_wrap .cate:nth-of-type(4)::after{content: "04";}
.cms_2-b_wrap .cate:hover .box_img::before {
    background: #061a59;
    opacity: 0.8;
}
.cms_2-b_wrap a {
    top: 0;
    left: 0;
}
.cms_2-b_wrap .top_title {
    z-index: 2;
    width: 90%;
}



/* アニメーション ---------------------------------------------------------------------------------------------*/
#intro h2 span .anim{
	position: relative;
	opacity: 0;
}
#intro p.fadein{
	transform: translateY(40px);
	transition: transform 1.5s .3s, opacity 2s .4s;
	opacity: 0;
}
#intro p.fadein.start{transform: translateY(0);opacity: 1;}

#contents.fadein .contents_title::before{height: 0;transition: all 1.5s}
#contents.fadein.start .contents_title::before{height: 116px;}
#contents h3.fadein{
	transform: translateX(-100px);
	transition: transform 1.5s, opacity 2s;
	opacity: 0;
}
#contents h3.fadein.start{
	transform: translateX(-121px);
	transition: transform 1.5s, opacity 2s;
	opacity: 1;
}
#contents .box_wrap .box:nth-of-type(2) h3.fadein{
	transform: translateX(100px);
}
#contents .box_wrap .box:nth-of-type(2) h3.fadein.start{
	transform: translateX(121px);
}


/* ---------- other ---------- */
#page_title{background-position: center;}
#page_title #filter_white {background: url(../dup/img/item2.png) bottom 20px center / 300px no-repeat rgba(18, 53, 78, 0.64)!important;}
#page_title h2 span{background: none;}
.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;}
#cms_2-c .box_txt1{
	padding-left: 10px;
    border-left: 6px solid #061a59;
    padding: 0 10px 3px 10px;
	margin-bottom: 18px;
	background-color: #f2f2f2;
}
#cms_2-b .cate_title{border-color: #868686;}
#cms_6-c .circle{display: none}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	header {background: rgba(255,255,255,0.7);}
	header #header #header_menu li {width: auto;}
	#video{margin-top: 154px;}
	
	#intro {background-size: contain!important;}
	#intro #intro_txt::before{width: 100%;}
	.contents_title{padding: 90px 20px 25px;margin-bottom: 0;}
	.contents_title::before{top: -67px;}
	#contents h3.fadein{transform: none!important;box-shadow: 7px -7px 20px rgba(0,0,0,0);margin-bottom: 30px;text-align: left!important;padding-left: 0;}
	#contents .grid_11{width: 100%!important;}
	#contents .offset-1r{margin-right: 0;}
	#contents .offset-1{margin-left: 0;}
	#contents .grid_6 {width: 92%!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;background: url(../dup/img/item2.png) bottom 20px center / 179px no-repeat rgba(18, 53, 78, 0.64)!important;}
	#logo2{width: 222px;}
	
	.cms_2-b_wrap .cate::after{font-size: 75px;bottom: 17px;right: 4px;}
	.cms_title h2{font-size: 25px;}
	.cms_2-c, .cms_2-b_wrap, .cms_1-a{width: 87%;}
	.cms_2-b_wrap .cate{width: 46%!important;}
	.cms_1-a{justify-content: space-between;}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#fakeloader .fl{max-width: 100px;}
	.bnr{width: 90%;margin-bottom: 35px;margin-top: -42px;}
	
	#logo{padding-top: 17px;}
	#logo .logo {text-align: center; width: 200px;}
	header{padding-bottom: 0px;}
	#filter_white{padding: 0px;}
	#main_img{margin-top: 61px;}
	#video{margin-top: 0;}
	
	#intro {background-attachment: scroll;}
	#intro #intro_txt{padding-top: 60px;padding-bottom: 62px;}
	#intro #intro_txt::before{width: 68%;transform: none;}
	#intro h2{font-size: 20px;transform: translateY(0)!important;margin-bottom: 32px;}
	#intro h2::before{width: 210px;}
	#intro h2 span{line-height: 2;}
	
	.contents_title::before{height: 122px;}
	#contents.fadein.start .contents_title::before{height: 122px;}
	.contents_title span{font-size: 26px;}
	.contents_title{padding: 80px 15px 15px;}
	.contents_title .font_20 {font-size: 19px;letter-spacing: 2px;}
	#contents h3.fadein {font-size: 19px;margin-bottom: 12px;}
	#contents .grid_6{width: 95%!important;}
	#contents .shadow-l{width: 100%!important;}
	
	.cms_2-c, .cms_2-b_wrap, .cms_1-a{width: 89%;}
	#top_cms .top_cms_box{padding-left: 13px;}
	.cms_title h2{font-size: 18px;border-left: 4px solid #061a59;padding-left: 7px;}
	.cms_2-c .txt_color1{font-size: -webkit-calc(1rem + 2px);font-size: calc(1rem + 2px);margin-bottom: 10px;}
	.cms_2-b_wrap .cate{width: 96%!important;}
	
	#page_title #filter_white{padding-top: 125px!important;}
	
	#contents .box_wrap .box{padding-bottom: 35px;}
	#contents .box:first-of-type::before, #contents .box:last-of-type::before{top: auto;bottom: 0;height: 26%;}
	#copyright{font-size: 11px;padding-bottom: 86px;}
	
	#logo2{width: 155px;}
	.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;}
	#info_title_box .info_title span{padding: 14px 40px 15px}
	.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;}
}