﻿@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;}

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 {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: 700;}


.overlay{background: linear-gradient( 111deg, rgba(213,238,255,0.92) 0%, #ecf4f7 70%, #d5e3ef 100%);}
#fix_menu{background: linear-gradient( 111deg, rgba(213,238,255,0.52) 0%, #ecf4f7 70%, #dde8f1 100%);}

#fix_bnr {
    bottom: 30px;
    right: 80px;
    z-index: 10;
    width: 227px;
}



/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #2e4f7b;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: #2e4f7b} /* メインカラー */
.txt_color2{color: #fafafa} /* サブカラー */
.txt_color3{color: #87ceeb} /* アクセントカラー1 */
.txt_color4{color: #f3f3f3} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #2e4f7b} /* メインカラー */
.bg_color2{background-color: #fafafa} /* サブカラー */
.bg_color3{background-color: #87ceeb} /* アクセントカラー1 */
.bg_color4{background-color: #f3f3f3} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #2e4f7b}
.border_color2{border-color: #fafafa}
.border_color3{border-color: #87ceeb}
.border_color4{border-color: #f3f3f3}

/* 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: #2e4f7b} /* メインカラー */
.hvr_txt_color2:hover{color: #fafafa} /* サブカラー */
.hvr_txt_color3:hover{color: #87ceeb} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f3f3f3} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #2e4f7b} /* メインカラー */
.hvr_bg_color2:hover{background-color: #fafafa} /* サブカラー */
.hvr_bg_color3:hover{background-color: #87ceeb} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f3f3f3} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #2e4f7b}
.hvr_border_color2:hover{border-color: #fafafa}
.hvr_border_color3:hover{border-color: #87ceeb}
.hvr_border_color4:hover{border-color: #f3f3f3}

#contact_wrap .txt_color2{color: #395780;}
#contact_wrap .border_color2{border-color: #d6d6d6;}



/* design ---------------------------------------------------------------------------------------------*/
.font_2dw {
    font-size: -webkit-calc(1rem);
    font-size: calc(1rem );
}
.opacity08 {
    opacity: 1;
}

#main_img{overflow: hidden}
/*#main_img::before{
	display: inline-block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	background: linear-gradient( 111deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%);
}*/

#top_contents1 {
    position: relative;
    padding: 100px 5% 227px;
    background: url(../dup/img/bg1.jpg) center bottom -66px / 89% no-repeat;
}

#top_contents1 h2 {
    position: relative;
    padding-bottom: 32px;
    /*padding-top: 98px;*/
}
#top_contents1 h2::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 2px;
    background: #87ceeb;
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}

#top_contents2{position: relative;}
.txt_anim {
    display: inline-block;
    position: absolute;
    top: -54px;
    left: 0;
    right: 0;
    font-size: 69px;
    font-weight: 400;
    color: #395780;
    margin: auto;
    text-align: center;
    overflow: hidden;
    height: 73px;
}
.top_cms_title .txt_anim{top: -80px;}
.anim{
	position: relative;
	top: 40px;
	opacity: 0;
}

#top_contents2 .con_box .text_box{background-color: rgba(255,255,255,0.8);}
#top_contents2 h2{font-size: -webkit-calc(1rem + 6px);font-size: calc(1rem + 6px);}

#page_title::before{background: linear-gradient( 111deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%);}
#page_title .page_title_inner{padding: 102px 20px;}



/* ---------- top_cms ---------- */
.top_cms_title p, .top_info_title p{
	font-size: 69px;
    font-weight: 400;
    color: #395780;
    margin: auto;
    text-align: center;
    overflow: hidden;
    height: 73px;
}
.top_cms_title .before, .top_cms_title .after, .top_info_title .before, .top_info_title .after{display: none}

.service_wrap .cate_box .box_img{
	transition: transform .6s;
}
.service_wrap .cate_box:hover .box_img {
    transform: scale(1.05);
}
.service_wrap .cate_box .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;
}
.service_wrap .cate_box:hover .box_img::before {
    background: linear-gradient( 111deg, #8bc8f1 0%, #9dd5ea 70%, #9dc0de 100%);
    opacity: 0.8;
}
.service_wrap .cate_box .box_img::before{
	
}
.service_wrap a {
    top: 0;
    left: 0;
}
.service_wrap .top_title {
    z-index: 2;
    width: 90%;
}



/* IE */
@media all and (-ms-high-contrast: none){
	body, .font_Quick{font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;}
	.mail_bt a{padding: 10px 28px 13px!important;}
	#top_cms .more a{padding: 15px 15px 15px!important}
	#top_contact_box .tel_bt .posi_center{top: 49%!important;}
	#top_contact_box a i{top: 62%!important;}
	#cms_6-b .cate .cate_title{padding: 10px 5px 10px!important}
	#cms_2-a .cate .cate_title{padding-top: 9px!important}
	.font_Quick .cate_list li a{padding: 13px 10px 13px!important}
	#cms_6-a .cate .cate_title{padding-top: 10px!important}
	#main_img::before{height: 99.2%}
	.font_Quick .pager li a .posi_center{top: 54%;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#fix_menu{background: #fff}
	.overlay{top: 95px;}
	.overlay nav{top: calc(50% - 107px);height: 74%;}
	
	#top_contents1 {
		padding: 100px 5% 155px;
		background: url(../dup/img/bg1.jpg) center bottom -18px / 89% no-repeat;
	}
	.top_cms_title .txt_anim{top: -76px;}
	#copyright{text-align: left;}
	#fix_bnr{bottom: 13px;right: 68px;}
	#page_title .page_title_inner{padding: 83px 20px;}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
	.font_2dw {font-size: 14px;}
	.overlay{top: 77px;}
	.overlay nav{top: 43%;}
	#page_title p{font-size: 20px;}
	
	.txt_anim{font-size: 57px;height: 60px;top: -42px;}
	.top_info_title p{font-size: 57px;}
	.top_cms_title .txt_anim{top: -49px;height: 64px;}
	
	#top_contents1{padding: 50px 30px 100px;background: url(../dup/img/bg1.jpg) center bottom -19px / 138% no-repeat;}
	#top_contents1 h2{padding-top: 0;padding-bottom: 26px;}
	#top_contents1 h2::after{font-size: 44px;}
	
	#top_contents2{padding: 73px 0 100px;}
	#top_contents2 h2{font-size: calc(1rem + 2px);font-size: -webkit-calc(1rem + 2px);}
	
	#fix_bnr{
		opacity: 1;
		background-color: #2e4f7b;
		width: 100%;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 5;
	}
	.l-gh__scrollnav-pagetop{bottom: 40px!important;}
	#fix_bnr a{margin: auto;width: 50%;max-width: 190px;}
	#footer{padding-bottom: 66px;}
	#page_title .page_title_inner{padding: 54px 20px;}
	#copyright{font-size: 13px;}
}






