@charset "utf-8";

/*--------------------------------------------------------------------------
   settings
---------------------------------------------------------------------------*/
:root {
  --dark: #333;
  --light: #fff;
	--black: #000;
	--navy: #004165;
	--blue: #004098;
	--lightblue: #CEE6FB;

}



/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/

html{
	overflow-y: scroll;
  scroll-behavior: smooth;
	font-size: 62.5%;
}


/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/

body{
	color: var(--dark);
	background: var(--light);
	font-family: "Noto Serif JP","YuMincho","Yu Mincho","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .04em;
	-webkit-text-size-adjust: 100%;	
}

/* fonts */
.sans-serif{
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体", "Yu Gothic", YuGothic,"メイリオ",Meiryo ,"ＭＳ Ｐゴシック" ,"MS P Gothic" ,sans-serif;
}
.en{
	font-family: "EB Garamond", serif;
}


/*--------------------------------------------------------------------------
   base link
---------------------------------------------------------------------------*/

a{
	outline: none;
}
a:link,
a:visited{
	text-decoration: none;
	color: var(--dark);
}

.ophover{
	transition: opacity ease .3s;	
}
.ophover:hover{
	opacity: .7;
}

.phone-link{
  pointer-events: none;  
}


/*--------------------------------------------------------------------------
   img
---------------------------------------------------------------------------*/
img{
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;		
}

/*--------------------------------------------------------------------------
   Animation
---------------------------------------------------------------------------*/

.fade,.fade01,.fade02,.fade03,.fade04,.blur,.zoom,
.delay01,.delay02,.delay03,.delay04,.delay05 {
	transition: 1.3s;
}
.fade {
	opacity: 0;
	transform: translate(0,0); 
}
.fade01{
	opacity: 0;
	transform: translate(0,50px); 
}
 .fade02 {
	opacity: 0;
	transform: translate(0,-50px); 
}
.fade03 {
	opacity: 0;
	transform: translate(-50px,0); 
}
.fade04 {
	opacity: 0;
	transform: translate(50px,0); 
}
.blur {
	filter: blur(14px);  
}
.zoom{
  transform: scale(1.1,1.1); 
}
.delay01{
	transition-delay: 0.3s;		
}
.delay02{
	transition-delay: 0.6s;		
}
.delay03{
	transition-delay: 0.9s;		
}
.delay04{
	transition-delay: 1.2s;		
}
.delay05{
	transition-delay: 1.5s;		
}

.mv {
	opacity: 1;
  -webkit-filter: blur(0);
	filter: blur(0);
	transform: translate(0,0) scale(1,1); 
}


@keyframes fadein{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*--------------------------------------------------------------------------
   PC
---------------------------------------------------------------------------*/
.sp{
	display: none;	
}
/* box-sizing ---*/	
header, footer, nav, main, section, article, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, a, span, small, strong, em, input, select, textarea, button {
	box-sizing: border-box;
}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
#Page{
	position: relative;
}
#Page::before{
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	display: block;
	content: "";
	width: 100%;
	height: 110vh;
	background: url(../../img/common/bg_water.jpg) no-repeat center top;
	background-size: cover;
}
.inner{
	max-width: 1320px;
	padding: 0 20px;
  margin-inline: auto;
}
.layout-box{
  display: flex;
  justify-content: space-between;  
}
.b-radius{
	border-radius: 10px;
}


/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
#Header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10000;
	width: 100%;
	padding: 0 20px 0 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--light);	
}
#Header h1 a{
	display: flex;
	align-items: flex-end;
	line-height: 1;
	color: var(--navy);
}
#Header h1 .logo{
	margin-right: 30px;
}
#Header h1 .ttl{
	transform: translateY(-5px);
}
#Header h1 .ttl small{
	display: block;
	margin-bottom: 4px;
	font-size: 1.1rem;
	letter-spacing: .03em;
}
#Header .btn-contact{
	margin-left: min(2vw, 30px);
}
#Header .btn-contact a{
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 156px;
	height: 44px;
	line-height: 1;
	border: 1px solid var(--blue);
	border-radius: 100vmax;
	background: var(--blue);
	color: var(--light);
	transition: .3s;
}
#Header .btn-contact a::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: var(--light);
	border-radius: 100vmax;
	transform: translateX(-100%);
	transition: .3s;	
}
#Header .btn-contact a:hover::before{
	transform: translateX(0);
}
#Header .btn-contact a span{
	position: relative;
}
#Header .btn-contact a:hover{
	color: var(--blue);
}
.header-cont{
	display: flex;
	align-items: center;
}
.btn-trigger{
	display: none;
}


/* ---------------------------------------------------------------------------
	 #Gnav	
	 グローバルナビゲーション
--------------------------------------------------------------------------- */
.gnav{
	display: flex;
	padding: 21px 0;	
}
.gnav > li{
	margin-left: min(2vw, 30px);
}
.gnav p a{
	position: relative;
	padding: 5px;
	transition: .3s;
}
.gnav .current p a,
.gnav p a:hover{
	color: var(--navy);
}
.gnav p a::after{
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 2px;
	content: "";
	background: var(--navy);
	transform: scale(0,1);
	transition: .3s;
}
.gnav .current p a::after,
.gnav p a:hover::after{
	transform: scale(1,1);
}
.gnav p span{
	display: none;
}
.gnav .nav-middle{
	display: none;
}
#Gnav .inq-info{
	display: none;
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
.content {
	margin-top: 70px;
}
.txt{
	font-size: 1.8rem;
	line-height: 2.2;
}
.txt_s{
	font-size: 1.6rem;
	line-height: 1.6;
}
.txt-lead{
	font-size: 3.2rem;
	line-height: 1.6;	
}
.caption{
  font-size: 1.4rem;
  line-height: 1.2;  
}
.caption._w{
  color: var(--light);  
}
.note{
  font-size: 1.4rem;
}


/* 見出し
-----------------------------------------------------------------*/

/* page-ttl ----------------*/
.page-ttl{
  position: relative;
  /*height: 26.388vw;*/
	height: 40vh;
  background: no-repeat center center;
	background-size: cover; 
}
.page-ttl .ttl-area{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;  
}
.page-ttl h1{
	max-width: 1320px;
	padding: 0 20px;
  margin-inline: auto;
  color: var(--light);
  font-weight: 400;
  line-height: 1.2;
}
.page-ttl h1 .en{
  display: block;
  overflow: hidden;
 	font-size: 1.6vh;
  letter-spacing: .12em;
  text-transform: uppercase; 
}
.page-ttl h1 .ja{
  display: block;
  overflow: hidden;
  font-size: 7.2vh;
}
.page-ttl.mv h1 .ja em{
	padding: 0 5px;
	font-style: normal;
	font-weight: 300;
}
.page-ttl.mv h1 .ja .medium{
	font-size: 4.1vh;
}
.page-ttl.mv h1 .ja small{
	font-size: 3.2vh;
}
.page-ttl h1 .en > span,
.page-ttl h1 .ja > span{
  display: inline-block;
  transform: translateY(110%);
  transition: 1s;  
}
.page-ttl.mv h1 .en span,
.page-ttl.mv h1 .ja span{
  transform: translateY(0);  
}
.page-ttl .caption{
  position: absolute;
  right: 10px;
  bottom: 10px;  
}

/* ttl-sec ----------------*/
.ttl-sec{
	width: fit-content;
	line-height: 1;
	color: var(--navy);
}
.ttl-sec .en{
	display: block;
	margin-bottom: 8px;
	font-size: 1.6rem;
	letter-spacing: .12em;
}
.ttl-sec .ja{
	display: block;
	font-size: 5.0rem;
  line-height: 1.3; 
}
.ttl-sec._line::after{
	display: block;
	width: 100%;
	height: 28px;
	margin-top: 5px;
	content: "";
	background: url(../../img/common/img_line.svg) no-repeat;
	background-size: 100% 28px;
	clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
	transition: .8s;
	transition-delay: .3s;	
}
.ttl-sec._line.mv::after{
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.ttl-sec._tag .ja{
  display: block;
  margin-top: 10px;
}

/* ボタン
-----------------------------------------------------------------*/

/* btn-base ----------------*/
.btn-base a,
.btn-base > span{
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 204px;
  width: 100%;
	height: 60px;
	line-height: 1;
	border: 1px solid var(--navy);
	border-radius: 100vmax;
	background: var(--navy);
	color: var(--light);
	transition: .3s;
}
.btn-base a::before,
.btn-base > span::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: var(--light);
	border-radius: 100vmax;
	transform: translateX(-100%);
	transition: .3s;	
}
.btn-base a::after,
.btn-base > span::after{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 13px;
	height: 10px;
	content: "";
	background: url(../../img/common/arw_w.svg) no-repeat;
	background-size: 100% auto;
	transition: .3s;	
}
.btn-base a:hover::before,
a:hover .btn-base > span::before{
	transform: translateX(0);
}
.btn-base a:hover::after,
a:hover .btn-base > span::after{
	right: 15px;
	background-image: url(../../img/common/arw_navy.svg);
}
.btn-base a span,
.btn-base > span span{
	position: relative;
}
.btn-base a:hover,
a:hover .btn-base > span{
	color: var(--navy);
}

/* white */
.btn-base._w a,
.btn-base._w > span{
	background: var(--light);
	color: var(--navy);
}
.btn-base._w a::before,
.btn-base._w > span::before{
	background: var(--navy);
}
.btn-base._w a::after,
.btn-base._w > span::after{
	background-image: url(../../img/common/arw_navy.svg);
}
.btn-base._w a:hover::after,
a:hover .btn-base._w > span::after{
	background-image: url(../../img/common/arw_w.svg);
}
.btn-base._w a:hover,
a:hover._w .btn-base > span{
	color: var(--light);
}

/* ghost */
.btn-base._ghost a,
.btn-base._ghost > span{
	border-color: var(--light);
	background: transparent;
}


/* パンくずリスト
-----------------------------------------------------------------*/
.breadcrumb{
  position: relative;  
	padding: 20px 20px 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--navy);
  background: var(--light);  
}
.breadcrumb ul{
  max-width: 1320px;
  margin-inline: auto;
}
.breadcrumb li{
  display: inline-block;  
}
.breadcrumb li a{
  color: var(--dark);  
}
.breadcrumb li:nth-child(n+2)::before{
  display: inline-block;
  margin: 0 5px 0 4px;
  content: ">"; 
  color: var(--dark);
}


/* ページ導入部
-----------------------------------------------------------------*/
.page-hd{
  padding: 8vh 0 20vh;
/* display: flex;
  justify-content: space-between; */
  text-align:center;
  background: url(../../img/common/bg_intro.png) no-repeat center top;
	background-size: cover;
}
.page-hd h2{
  margin-bottom: 20px;
  /*margin-right: 20px;*/
  font-weight: 400;
  /*font-size: 5.6rem;*/
	font-size: 5.6vh;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--navy);  
}
.page-hd .txt{
  /*max-width: 640px;
  width: 50%;*/
  /*font-size: 1.8rem;*/
	font-size: 2vh;
  line-height: 2.6;  
}
._top-cont{
	position: relative;
}
._top-cont::before{
	position: absolute;
	left: 0;
	bottom: 0;
	/*display: block;*/
	display: none;
	width: 100%;
	height: 100%;
	content: "";
	background: var(--light);	
}
._top-cont .inner{
	position: relative;	
}


/* 画像カットイン レイアウト
-----------------------------------------------------------------*/
.pic-cutin-box{
	width: 100%;
	padding-left: calc((100% - 1280px)/2);
  display: flex;
  justify-content: space-between;
	align-items: flex-start;  
}
.pic-cutin-box .txt-area{
	max-width: 720px;
	margin-right: 20px;  
}
.pic-cutin-box .pic-cutin{
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	transition: .8s;
	transition-delay: .5s;  
}
.pic-cutin-box .pic-cutin.mv{
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}
.pic-cutin-box .pic-cutin img{
	max-width: none;
	width: 37.6vw;
	border-radius: 10px 0 0 10px;	
}

@media screen and (max-width: 1280px) {
	.pic-cutin-box{
		padding-left: 20px;
	}
}


/* タグ
-----------------------------------------------------------------*/
.tag{
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--navy);
	border-radius: 5px;
	line-height: 1;
	font-size: 1.4rem;
	color: var(--navy);
}
.tag + .tag{
	margin-left: 15px;
}


/* dot-list
-----------------------------------------------------------------*/
.dot-list li{
	display: flex;
	align-items: flex-start;
	line-height: 1.6;
}
.dot-list li::before{
	display: inline-block;
	margin-right: 8px;
	content: "●";
	color: var(--blue);
	transform: scale(.7);
}


/*--------------------------------------------------------------------------
  Cv
---------------------------------------------------------------------------*/
#Cv{
	padding: 120px 0;
	background: url(../../img/common/bg_contact_pc.jpg) no-repeat center center;
	background-size: cover;
}
#Cv h2{
	width: 100%;
	margin-bottom: 60px;
	color: var(--light);
	text-align: center;
}
.cv-bnr-list{
	display: flex;
	justify-content: space-between;
}
.cv-bnr-list li{
	max-width: 400px;
	width: calc((100% - 30px)/3);
}
.cv-bnr-list li > a{
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--light);
}
.cv-bnr-list li > a,
.inq-info{
	padding: 40px 20px 30px;
	border-radius: 10px;
	background: var(--light);	
	text-align: center;
	line-height: 1.4;	
}
.cv-bnr-list li > a::before{
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: var(--blue);
	transform: translateX(-100%);
	transition: .3s;
}
.cv-bnr-list li > a:hover::before{
	transform: translateX(0);
}
.cv-bnr-list li > a .ico{
	position: relative;
	width: fit-content;
	margin-inline: auto;
	line-height: 0;
}
.cv-bnr-list li > a .ico img{
	transition: .3s;
}
.cv-bnr-list li > a:hover .ico img{
	opacity: 0;
}
.cv-bnr-list li:nth-child(2) > a:hover .ico{
	background: url(../../img/common/ico_mail_w.svg) no-repeat;
	background-size: 100% auto;
}
.cv-bnr-list li:nth-child(3) > a:hover .ico{
	background: url(../../img/common/ico_video_w.svg) no-repeat;
	background-size: 100% auto;
}
.cv-bnr-list h3,
.inq-info h3{
	position: relative;
	font-size: 2.4rem;
}
.cv-bnr-list h3{
	margin-bottom: 20px;
}
.cv-bnr-list a:hover h3{
	color: var(--light);
}
.inq-info h3{
	margin-bottom: 10px;
}
.inq-info .txt-inq{
	margin-bottom: 5px;
	font-size: 1.6rem;
}
.inq-info .phone{
	margin-bottom: 10px;
}
.inq-info .phone a{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--blue);
	font-size: 4rem;
	font-weight: bold;
	line-height: 1;
}
.inq-info .phone .ico{
	flex-shrink: 0;
	margin-right: 10px;
	transform: translateY(2px);
	width: 28px;
	line-height: 0;
}
.inq-info .business-hour{
	font-size: 1.3rem;
	letter-spacing: .02em;
}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/
footer{
	background: var(--light);
}
.pagetop{
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 10000;
	display: none;	
}


/* ft-nav-area
-----------------------------------------------------------------*/
.ft-nav-area{
	padding: 100px 0;
}
.ft-gnav{
	display: flex;
	justify-content: space-between;
	line-height: 1.4;
}
.ft-gnav > li{
	margin: 0 10px;
}
.ft-gnav p > a{
	font-size: 1.8rem;
	color: var(--navy);
	font-weight: 500;
}
.ft-gnav p > span{
	display: none;
}
.ft-gnav p + p{
	margin-top: 25px;
}
.ft-gnav p.link-small a{
	position: relative;
	font-size: 1.4rem;
}
.ft-gnav p.link-small a::after{
	position: absolute;
	right: -18px;
	top: 5px;
	display: block;
	width: 12px;
	height: 12px;
	content: "";
	background: url(../../img/common/ico_blank.svg) no-repeat right center;
	background-size: 100% auto;
}
.ft-gnav .nav-middle li{
	margin-top:20px ;
	font-size: 1.6rem;
}
.ft-gnav .nav-middle li:first-child{
	display: none;
}
.ft-gnav a:hover{
	border-bottom: 1px solid var(--navy);
	color: var(--navy);
}

/* related-sites
-----------------------------------------------------------------*/
.related-sites{
	padding: 100px 0;
	overflow: hidden;
}
.related-sites h2{
	width: 100%;
	margin-bottom: 60px;
	text-align: center;
}
.related-sites .slider-area{
	padding-left: calc((100% - 1280px)/2);	
}
.related-sites .banner-slider{
	width: 2200px;
	padding-bottom: 70px;
}
.related-sites .banner-slider .slider-item{
	width: 420px;
	padding-right: 40px;
}
.related-sites .banner-slider .thumb{
	overflow: hidden;
	width: fit-content;
	border-radius: 10px;
	line-height: 0;
}
.related-sites .banner-slider img{
	transition: .5s;
}
.related-sites .banner-slider .slider-item a:hover img{
	transform: scale(1.05);
}
.related-sites .banner-slider h3{
	margin-top: 10px;
	width: fit-content;
	padding-right: 24px;
	background: url(../../img/common/ico_blank.svg) no-repeat right center;
	background-size: 12px auto;
	font-size: 1.6rem;
	line-height: 1.5;
}
.related-sites .banner-slider a:hover h3 span{
	border-bottom: 1px solid var(--navy);
	color: var(--navy);
}
.related-sites .banner-slider .slick-prev,
.related-sites .banner-slider .slick-next{
	top: auto;
	right: auto;
	bottom: 0;
	z-index: 50;
	width: 29px;
	height: 26px;
	transform: none;
	transition: .3s;
	opacity: .5;
}
.related-sites .banner-slider .slick-prev{
	left: -5px;
	background: url(../../img/common/arw_prev.svg) no-repeat center center;
	background-size: 19px auto;
}
.related-sites .banner-slider .slick-next{
	left: 40px;
	background: url(../../img/common/arw_next.svg) no-repeat center center;
	background-size: 19px auto;
}
.related-sites .banner-slider .slick-prev:hover,
.related-sites .banner-slider .slick-next:hover{
	opacity: 1;
}
.related-sites .banner-slider .slick-dots{
	left: 80px;
	bottom: 11px;
	z-index: 50;
	display: flex;
	max-width: 1280px;
	width: 88vw;
}
.related-sites .banner-slider .slick-dots li{
	width: calc(100% / 6);
	height: 2px;
	margin: 0;
	background: var(--blue);
	opacity: .5;
}
.related-sites .banner-slider .slick-dots li.slick-active,
.related-sites .banner-sliderr .slick-dots li:hover{
	opacity: 1;
}
.related-sites .banner-slider .slick-dots button{
	width: 100%;
	height: 20px;
	transform: translateY(-9px); 
}


@media screen and (max-width: 1280px) {
	.related-sites .slider-area{
		padding-left: 20px;	
	}
	.related-sites .banner-slider .slick-dots{
		width: 90vw;
	}	
}


/* ft-btm
-----------------------------------------------------------------*/
.ft-btm{
	padding: 40px 20px;
	background:  var(--navy);
	text-align: center;
	color: var(--light);
}
.ft-btm .logo{
	margin-bottom: 30px;
}
.ft-btm .copyright{
	font-size: 1.4rem;
	line-height: 1.4;
	letter-spacing: .14em;
}

































/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  
	#Page {
		min-width: 320px;	
	}
	
	img{
		width: 100%;
		height: auto;
	}
	
	.pc{
		display: none;	
	}
	.sp{
		display: block;	
	}
	img.sp,
	br.sp{
		display: inline;
	}
	
	.phone-link{
		pointer-events: auto;  
	}


/*--------------------------------------------------------------------------
   Container
---------------------------------------------------------------------------*/
	.inner{
		max-width: none;	
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.content {
		margin-top: 70px;
	}
	.txt{
		font-size: 1.5rem;
		line-height: 1.6;
	}
	.txt_s{
		font-size: 1.4rem;
	}
	.txt-lead{
		font-size: 2.2rem;
		line-height: 1.5;	
	}
	.caption{
		font-size: 1.2rem;
	}
	.note{
		font-size: 1.2rem;
	}

/*--------------------------------------------------------------------------
   header
---------------------------------------------------------------------------*/
	#Header{
		padding: 0 0 0 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#Header h1 a{
		display: block;
	}
	#Header h1 .logo{
		display: none;
	}
	#Header h1 .ttl{
		font-size: 1.4rem;
	}
	#Header h1 .ttl small{
		display: block;
		margin-bottom: 4px;
		font-size: 1rem;
		letter-spacing: 0;
	}
	#Header .btn-contact{
		margin-left: 0;
	}
	#Header .btn-contact a{
		display: block;
		width: 84px;
		height: 70px;
		padding-top: 10px;
		border: none;
		border-radius: 0;
		background: url(../../img/common/ico_btn_mail.svg) no-repeat center top 35px var(--blue);
		background-size: 22px auto;
		text-align: center;
	}
	#Header .btn-contact a::before{
		display: none;
	}
	#Header .btn-contact a span{
		position: relative;
		font-size: 1.1rem;
	}
	#Header .btn-contact a:hover{
		color: var(--light);
	}
	.header-cont{
		display: flex;
		align-items: center;
	}
	.btn-trigger{
		display: block;
		width: 70px;
		height: 70px;
		padding-top: 5px;
	}
	.btn-trigger strong{
		position: relative;
		display: block;
		margin-bottom: 5px;
		text-align: center;
		font-size: 1.3rem;
		letter-spacing: -1px;
    color: var(--navy);
	}
	.btn-trigger strong .close{
		position: absolute;
		left: 0;
		top: 0;
		display: block;
		width: 100%;
		opacity: 0;
		transition: .3s;
	}
	btn-trigger strong .menu{
		display: block;
		width: 100%;
		transition: .3s;
	}
	.btn-trigger.on strong .close{
		opacity: 1;
	}
	.btn-trigger.on strong .menu{
		opacity: 0;
	}
	.btn-trigger > span{
		display:block;
		width: 36px;
		height: 3px;
		margin-inline: auto;
		background: var(--navy);
		border-radius: 100vmax;
		transition: .3s;
	}
	.btn-trigger > span + span{
		margin-top: 5px;
	}
	.btn-trigger.on > span:nth-child(2){
		transform: translateY(8px) rotate(-45deg);
	}
	.btn-trigger.on > span:nth-child(3){
		opacity: 0
	}
	.btn-trigger.on > span:nth-child(4){
		transform: translateY(-8px) rotate(45deg);
	}


/* ---------------------------------------------------------------------------
	 #Gnav	
	 グローバルナビゲーション
--------------------------------------------------------------------------- */
	#Gnav{
		position: fixed;
		left: 0;
		top: 70px;
		z-index: 9999;
		width: 100%;
		height: calc(100vh - 70px);
		background: var(--navy);
		padding: 20px 30px 30px;
		overflow: scroll;
		display: none;
	}
	.gnav{
		display: block;
		padding: 0;	
	}
	.gnav > li{
		margin-left: 0;
		border-bottom: 1px solid rgba(255,255,255,.5);
	}
	.gnav p a,
	.gnav p span{
		position: relative;
		display: block;
		padding: 15px 0;
		font-size: 1.5rem;
	}
	.gnav .current p a,
	.gnav p a:hover::a{
		color: var(--light);
	}
	.gnav p a{
		background:url(../../img/common/arw_w.svg) no-repeat right 5px center;
		background-size: 14px auto;
	}
	.gnav p span::after{
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 15px;
		height: 8px;
		content: "";
		background: url(../../img/common/arw_down_w.svg) no-repeat center;
		background-size: 100% auto;
		transition: .3s;
	}
	.gnav p.open span::after{
		transform: rotate(180deg);
	}
	.gnav a{
		color: var(--light);
	}
	.gnav .has-middle a{
		display: none;
	}
	.gnav p a::after{
		display: none;
	}
	.gnav p span{
		display: block;
		color: var(--light);
		cursor: pointer;
	}
	.gnav .nav-middle{
		display: none;
		padding-bottom: 10px;
	}
	.ft-gnav .nav-middle li:first-child{
		display: block;
	}
	.gnav .nav-middle a{
		position: relative;
		display: block;
		padding: 10px;
		font-size: 1.3rem;
	}
	#Gnav .inq-info{
		display: block;
		margin-top:  25px;
	}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
	.content {
		margin-top: 70px;
	}
	.txt{
		font-size: 1.5rem;
		line-height: 1.6;
	}
	.txt-lead{
		font-size: 2.2rem;
		line-height: 1.5;	
	}


/* 見出し
-----------------------------------------------------------------*/

/* page-ttl ----------------*/
	.page-ttl{
		height: 60vw;
		background: no-repeat center center;
		background-size: cover;
	}
	.page-ttl h1 .en{
		font-size: 1.4rem;
	}
	.page-ttl h1 .ja{
		font-size: 3.6rem;
	}
  .page-ttl.mv h1 .ja .medium{
    font-size: 1.6rem;
  }
  .page-ttl.mv h1 .ja em{
    font-size: 80%; 
  }
	.page-ttl.mv h1 .ja small{
		font-size: 1.6rem;
	}

/* ttl-sec ----------------*/
	.ttl-sec .en{
		margin-bottom: 8px;
		font-size: 1.4rem;
	}
	.ttl-sec .ja{
		font-size: 3rem;
		line-height: 1.3;
	}
.ttl-sec._line::after {
    margin-top: 5px;
}


/* ボタン
-----------------------------------------------------------------*/

/* btn-base ----------------*/
	.btn-base a,
	.btn-base > span{
		max-width: 180px;
		height: 52px;
	}
	.btn-base a::after,
	.btn-base > span::after{
		right: 15px;
		width: 13px;
		height: 10px;
	}
	.btn-base a:hover::before,
	a:hover .btn-base > span::before{
		transform: translateX(-110%);
	}
	.btn-base a:hover::after,
	a:hover .btn-base > span::after{
		background-image: url(../../img/common/arw_w.svg);
	}
	.btn-base a:hover,
	a:hover .btn-base > span{
		color: var(--light);
	}

/* white */
	.btn-base._w a,
	.btn-base._w > span{
		background: var(--light);
		color: var(--navy);
	}
	.btn-base._w a::before,
	.btn-base._w > span::before{
		background: var(--light);
	}
	.btn-base._w a:hover::after,
	a:hover .btn-base._w > span::after{
		background-image: url(../../img/common/arw_navy.svg);
	}
	.btn-base._w a:hover,
	a:hover._w .btn-base > span{
		color: var(--navy);
	}



/* パンくずリスト
-----------------------------------------------------------------*/
	.breadcrumb{
		padding-top: 10px;
		font-size: 1.2rem;
	}


/* ページ導入部
-----------------------------------------------------------------*/
	.page-hd{
		/*display: block;*/
		padding: 40px 0;
	}
	.page-hd h2{
		margin: 0 0 20px;
		font-size: 2.8rem;
	}
	.page-hd .txt{
		max-width: none;
		width: auto;
		font-size: 1.5rem;
		line-height: 1.8;
		text-align: justify; 
	}


/* 画像カットイン レイアウト
-----------------------------------------------------------------*/
	.pic-cutin-box{
		padding: 0;
		display: block;
	}
	.pic-cutin-box .txt-area{
		max-width: none;
		margin: 0 0 40px;
		padding: 0 20px;  
	}
	.pic-cutin-box .pic-cutin{
		margin-left: 20px;
		transition-delay: .4s;		
	}
	.pic-cutin-box .pic-cutin img{		
		width: 100%;
	}


/* タグ
-----------------------------------------------------------------*/
	.tag{
		padding: 6px 10px;
		font-size: 1.2rem;
	}
	.tag + .tag{
		margin-left: 15px;
	}


/* dot-list
-----------------------------------------------------------------*/
	.dot-list li{
		font-size: 1.5rem;
		text-align: justify;
	}
	.dot-list li::before{
		margin-right: 5px;
	}


/*--------------------------------------------------------------------------
  Cv
---------------------------------------------------------------------------*/
	#Cv{
		padding: 70px 0;
		background: url(../../img/common/bg_contact_sp.jpg) no-repeat center center;
		background-size: cover;
	}
	#Cv h2{
		margin-bottom: 30px;
	}
	.cv-bnr-list{
		display: block;
	}
	.cv-bnr-list li{
		width: 100%;
		margin-inline: auto;
	}
	.cv-bnr-list li:nth-child(n+2){
		margin-top: 25px;
	}
	.cv-bnr-list li > a,
	.inq-info{
		padding: 35px 20px;
	}
	.cv-bnr-list li > a::before{
		display: none;
	}
	.cv-bnr-list li > a .ico{
		width: 70px;
	}
	.cv-bnr-list li > a:hover .ico img{
		opacity: 1;
	}
	.cv-bnr-list li:nth-child(2) > a:hover .ico{
		background: none;
	}
	.cv-bnr-list li:nth-child(3) > a:hover .ico{
		background: none;
	}
	.cv-bnr-list h3,
	.inq-info h3{
		font-size: 1.8rem;
	}
	.cv-bnr-list a:hover h3{
		color: var(--dark);
	}
	.inq-info h3{
		margin-bottom: 10px;
	}
	.inq-info .txt-inq{
		margin-bottom: 5px;
		font-size: 1.5rem;
	}
	.inq-info .phone{
		margin-bottom: 10px;
	}
	.inq-info .phone a{
		color: var(--blue);
		font-size: 3.2rem;
	}
	.inq-info .phone .ico{
		transform: translateY(3px);
		margin-right: 5px;
		line-height: 0;
	}
	.inq-info .business-hour{
		font-size: 1.2rem;
	}


/*--------------------------------------------------------------------------
   Footer
---------------------------------------------------------------------------*/

/* ft-nav-area
-----------------------------------------------------------------*/
	.ft-nav-area{
		padding: 40px 0 70px;
	}
	.ft-gnav{
		display: block;
	}
	.ft-gnav > li{
		margin: 0;
		border-bottom: 1px solid rgba(0,65,101,.5);
	}
	.ft-gnav p > a,
	.ft-gnav p > span{
		position: relative;
		display: block;
		padding: 15px 0;
		font-size: 1.5rem;
	}
	.ft-gnav p > span{
		display: block;
		color: var(--navy);
	}
	.ft-gnav p a{
		background:url(../../img/common/arw_navy.svg) no-repeat right 5px center;
		background-size: 14px auto;
	}
	.ft-gnav p span::after{
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		display: block;
		width: 15px;
		height: 8px;
		content: "";
		background: url(../../img/common/arw_down_navy.svg) no-repeat center;
		background-size: 100% auto;
		transition: .3s;
	}
	.ft-gnav p.open span::after{
		transform: rotate(180deg);
	}
	.ft-gnav p.link-small a::after {
    display: none;
	}
	.ft-gnav p.link-small a{
		background-image: url(../../img/common/ico_blank.svg);
		background-size: 12px auto;
	}
	.ft-gnav .has-middle a{
		display: none;
	}
	.ft-gnav p + p{
		margin-top: 0;
		border-top: 1px solid rgba(0,65,101,.5);
	}
	.ft-gnav .nav-middle{
		display: none;
		padding-bottom: 10px;
	}
	.ft-gnav .nav-middle li{
		margin-top: 0;
		font-size: 1.3rem;
	}
	.ft-gnav .nav-middle a{
		position: relative;
		display: block;
		padding: 10px;
		font-size: 1.3rem;
	}
	.ft-gnav a:hover{
		border-bottom: 0;
		color: var(--light);
	}


/* related-sites
-----------------------------------------------------------------*/
	.related-sites{
		padding: 70px 0;
		overflow: hidden;
	}
	.related-sites h2{
		margin-bottom: 30px;
	}
	.related-sites .slider-area{
		padding-left: 20px;	
	}
	.related-sites .banner-slider{
		width: 1080px;
		padding-bottom: 50px;
	}
	.related-sites .banner-slider .slider-item{
		width: 270px;
		padding-right: 25px;
	}
	.related-sites .banner-slider .slider-item a:hover img{
		transform: scale(1);
	}
	.related-sites .banner-slider h3{
		padding-right: 20px;
		font-size: 1.2rem;
	}
	.related-sites .banner-slider a:hover h3 span{
		border-bottom: none;
		color: var(--dark);
	}
	.related-sites .banner-slider .slick-dots{
		left: 80px;
		width: calc(100vw - 120px);
	}
	.related-sites .banner-slider .slick-dots li{
		width: calc(100% / 6);
	}


/* ft-btm
-----------------------------------------------------------------*/
	.ft-btm{
		padding: 20px 20px 25px;
	}
	.ft-btm .logo{
		width: 160px;
		margin: 0 auto 15px;
	}
	.ft-btm .copyright{
		font-size: 1rem;
		letter-spacing: 1px;
	}

  
  
}