@charset "utf-8";

/* =================================================================
		Reset Styles
================================================================= */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset {
	color: #333333;
	font-family: dnp-shuei-gothic-gin-std, quasimoda,sans-serif;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing:1.0px;
	margin: 0;
	padding: 0;
}

/* HTML5 */
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary{
	display: block;
}

/* Base Styles */
body{
	background-color: #E5E7E3;
}

img {
	border: none;
	vertical-align: bottom;
}

table {
	font-size: inherit;
	font: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

label{
	cursor: pointer;
}

input,
select,
textarea{
	padding: 2px;
}

ol,ul {
	list-style: none;
}


/* form */
select,input,button,textarea{
}
select option {
	padding : 0 5px 0 5px;
}
form label{
	cursor : pointer;
}

a,
input{
	outline: none;
}

/*	Basic Text Link	*/
a {
	color: #333333;	text-decoration: underline;
}

a:link {
	color: #333333;	text-decoration: underline;
}
a:visited {
	color: #333333;	text-decoration: underline;
}
a:hover {
	color: #333333;	text-decoration: none;
}
a:focus {
	color: #333333;	text-decoration: underline;
}
a:active {
	color: #333333;	text-decoration: underline;
}


/* =================================================================
		共通スタイル
================================================================= */

/* hover-style01 アンダーライン */
.hover-style01{
	display: inline-block;
	position: relative;
	cursor: pointer;
}
.hover-style01::after{
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #B3CA00;
	transform-origin: bottom right;
	transition: transform .3s cubic-bezier(.86,0,.07,1);
}
.hover-style01:hover::after{
	transform: scaleX(1);
	transform-origin: bottom left;
}

/* btn-style01 */
.btn-style01 a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 14px;
	text-decoration: none;
	border: #666 1px solid;
  padding: 1em 2em;
  margin: 0 auto;
	background-color: #fff;
  transition: 0.3s;
}
.btn-style01 a:hover {
	background-color: #000;
	color: #fff;
	border: #000 1px solid;
}


/* 矢印のスタイル01 */
a.arrow01{
	position: relative;
}
a.arrow01::after{
	content: '';
	border: 0;
	border-top: solid 1px #000;
	border-right: solid 1px #000;
	display: inline-block;
	width: 6px;
	height: 6px;
	/* 矢印アイコンの位置を設定 */
	position: absolute;
	top: 50%;
	right: 20px;
	transition: 0.5s all;
	transform: translateY(-50%) rotate(45deg); /* rotate(45deg)で矢印を回転（向きを変更）させる */
}
a:hover.arrow01::after{
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	top: 50%;
	right: 14px;
}

/* PCのみ ================ */
@media (min-width:640px){
	.hover-image{
		overflow:hidden;
	}
	a .hover-image img{
		transition:0.5s all;
	}
	a:hover .hover-image img{
		transform:scale(1.05,1.05);
		transition:0.5s all;
	}

	/* btn-style02 左から右に背景が伸びる */
	.btn-style02 a {
		z-index: 200;
		position: relative;
		color: #333;
		text-decoration: none;
		border-bottom: #666 1px solid;
		padding: 3px 10px;
		transition: all 0.5s;
	}
	.btn-style02 a:hover{
		color: #fff;
		border-bottom: none;
	}
	.btn-style02 a::after {
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 0;
		left: 0;
		width: 0;
		height:100%;
		background:#B3CA00;
		transition:all .5s;
		opacity: 0;/*はじめは透過0*/
	}
	.btn-style02  a:hover::after {
		width: 100%;/*横幅を伸ばす*/
		opacity: 1;/*不透明に*/
	}

}


/* 見出し */
.headline-content{
	margin: 0 0 60px 0;
}
.headline-content h2{
	font-size: 28px;
	font-family: quasimoda,sans-serif;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
}
.headline-content p{
	font-size: 12px;
	font-weight: 200;
	text-align: center;
}

/* 下層ページ h1の見出し */
.headline-h1-content{
	margin: 0 0 100px 0;
}
.headline-h1-content h1{
	font-size: 28px;
	font-family: quasimoda,sans-serif;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	margin: 0 0 10px 0;
}
.headline-h1-content p{
	font-size: 12px;
	text-align: center;
}

/* 見出しの左右にライン */
.headline-line{
	display: flex;
	align-items: center;
}
.headline-line:before,
.headline-line:after {
	content: "";
	height: 1px;
	flex-grow: 1;
	background-color: #999;
}
.headline-line:before {
    margin-right: 1em;
} 
.headline-line:after {
    margin-left: 1em;
}




/*  スマホのみ ================ */
@media (max-width:640px){
.headline-content{
	margin: 0 0 40px 0;
}
.headline-h1-content{
	margin: 0 0 50px 0;
}
.headline-content h2{
	font-size: 26px;
}

}



/* =================================================================
		Fadein
================================================================= */
.fadestyle01{
  opacity : 0;
  transform: translateY(30px);
  transition: all 1.0s;
}
.fadestyle02{
  opacity : 0;
  transform: translateY(-50px);
  transition: all 1.0s;
}
.fadestyle03{
  opacity : 0;
  transform: translateX(80px);
  transition: all 0.5s;
}
.fadestyle04{
  opacity : 0;
  transform: translateX(-50px);
  transition: all 1.0s;
}



/* =================================================================
		Body
================================================================= */
body{
	font-size: 14px;
	font-weight: 300;
}


/* =================================================================
		Wrapper
================================================================= */
#wrapper{
border-top: #BBCC04 2px solid;
}


/* =================================================================
		Header
================================================================= */
#header{
}
#header-inner{
	max-width: 1100px;
	padding: 0 20px;
	margin: 0 auto 0 auto;
}

#header-content{
	display: flex;
	justify-content: space-between;
	margin: 0 auto 0 auto;
}
#header-logo{
	width: 20%;
	padding: 10px 10px 15px 20px;
}
#header-logo img{
	width: 170px;
}

#header-contact{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 70%;
}
#header-contact .lang-switch{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	margin: 0 30px 8px 0;
}
#header-contact .lang-switch li{
	padding: 0 0 2px 0;
	margin: 0 10px 0 0;
	color: #B5B5B5;
}
#header-contact .lang-switch li.now{
	color: #333;
	border-bottom: #B3CA00 1px solid;
}

#header-contact .lang-switch li a{
	text-decoration: none;
	display: block;
	color: #B5B5B5;
	padding: 0 0 2px 0;
	border-bottom: #B5B5B5 1px solid;
}
#header-contact .lang-switch li a:hover{
	color: #333;
	border-bottom: #333 1px solid;
}

#header-icon{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px 0 0;
	margin: -5px 0 0 0;
}
#header-icon li{
	margin: 0 8px 0 0;
}
#header-icon li i{
	font-size: 18px;
}
#header-icon li a{
	color: #666;
}



/* g-nav 
--------------------------------------------------------------- */
#g-nav{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 96%;
	margin: 0 auto;
}
#g-nav li{
	width: 12%;
	font-family: quasimoda,sans-serif;
	display: flex;
	justify-content: center;
}
#g-nav li a{
	display: flex;
	flex-direction: column;
	width: 100%;
	color: #2F2F2F;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	padding: 10px 15px 15px 15px;
}
#g-nav li a span{
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0px;
	padding: 8px 0 0 0;
}

/*  PCのみ ================ */
@media (min-width:640px){
.h-menu,
.h-menu-content{
  display: none;
}

}

/*  スマホのみ ================ */
@media (max-width:640px){
#header-inner{
	padding: 0 15px;
}

#g-nav{
	display: none;
}
#header-logo{
	width: 30%;
	padding: 6px 0 15px 0;
}
#header-logo img{
	width: 130px;
}
#header-contact{
	width: 60%;
}
#header-icon{
	padding: 5px 40px 0 0;
}
#header-icon li{
	margin: 0 8px 0 0;
}
#header-icon li i{
	font-size: 20px;
}
#header-contact .lang-switch{
	padding: 5px 0 0 0;
	margin: 0 10px 8px 0;
}

/* ハンバーガーメニュー */
.h-menu {
	position: fixed;
  right: 25px;
  top: 8px;
	width: 25px;
	height: 30px;
	cursor: pointer;
	z-index: 600;
	display: block;
}
.h-menu span {
	display: block;
	position: absolute;
	width: 25px;
	border-bottom: solid 1px #666;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 6px;
}
.h-menu span:nth-child(1) {
	top: 9px;
}
.h-menu span:nth-child(2) {
	top: 18px;
	width: 25px;
}
.h-menu span:nth-child(3) {
	top: 27px;
	width: 25px;
}
.h-menu.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-bottom: solid 1px #666;
}
.h-menu.active span:nth-child(2),
.h-menu.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: solid 1px #666;
	width: 25px;
}
/* ハンバーガーメニュー内のコンテンツ */
.h-menu-content{
	box-sizing: border-box;
	position: fixed;
	left:0px;
	top: 0px;
	background:rgba(229,231,227,1.0);
	display: none;
	width: 100%;
	height: 100%;
	z-index: 500;
	overflow: auto;
	/*border: #0366A9 3px solid;*/
	padding: 5%;
}

.h-menu-content .nav-content{
}
.h-menu-content .nav-content h2{
	font-family: quasimoda,sans-serif;
}
.h-menu-content .nav-content h2 a{
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.h-menu-content .nav-list{
	margin: 0 0 30px 0;
}
.h-menu-content .nav-list li{
	font-family: quasimoda,sans-serif;
	font-size: 14px;
	margin: 0 0 5px 0;
}
.h-menu-content .nav-list li a{
	display: block;
	text-decoration: none;
	padding: 5px 0;
	border-bottom: #ccc 1px solid;
}

/* 閉じるボタン */
.h-menu-content .close{
	cursor: pointer;
	text-align: center;
}
.h-menu-content .close a{
	background-color: #fff;
	border: #999 1px solid;
	padding: 5px 10px;
	text-decoration: none;
}
.h-menu-content .close i{
	padding: 0 10px 0 0;
}

}



/* topic-path
--------------------------------------------------------------- */
#topic-path{
	background-color: #F4F4F4;
}
#topic-path-nav{
	max-width: 1000px;
	padding: 10px 20px 12px 20px;
	display: flex;
	margin: 0 auto;
}
#topic-path-nav li{
  color: #555;
	font-size: 12px;
}
#topic-path-nav li:after {
  /* >を表示*/
  content: '>';
  padding: 0 8px;
  color: #555;
}
#topic-path-nav li:last-child:after {
  content: '';
}
#topic-path-nav li a{
	color: #555;
}

/* =================================================================
		common-contact
================================================================= */
#common-contact{
	margin: 0 0 150px 0;
}

#common-contact-inner{
	max-width: 1000px;
	margin: 0 auto;
}

#common-contact .tel-list li a{
	color: #333333;
	text-decoration: none;
	cursor: text;
}

#common-contact .btn-list{
	display: flex;
	justify-content: space-between;
	width: 40%;
	margin: 0 auto;
}
#common-contact .btn-list li{
	width: 48%;
	text-align: center;
	margin: 0 2%;
}
#common-contact .btn-list li a{
	background-color: #fff;
	border: none;
}
#common-contact .btn-list .fa-caret-right{
	padding: 0 8px 0 0;
}


/*  PCのみ ================ */
@media (min-width:640px){
#common-contact .tel-list{
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: 0 auto 15px auto;
}
#common-contact .tel-list li{
	font-size: 28px;
	font-family: quasimoda,sans-serif;
	font-weight: 400;
	letter-spacing: 3px;
	width: 48%;
	margin: 0 2%;
}
#common-contact .tel-list li:first-child{
	text-align: right;
}
#common-contact .tel-text{
	font-size: 20px;
	text-align:  center;
	margin: 0 0 50px 0;
}
#common-contact .btn-list li a:hover{
	background: none;
}

}


/*  スマホのみ ================ */
@media (max-width:640px){
#common-contact{
	margin: 0 0 40px 0;
}
#common-contact .tel-list{
	margin: 0 0 10px 0;
}
#common-contact .tel-list li{
	font-size: 24px;
	font-family: quasimoda,sans-serif;
	font-weight: 400;
	letter-spacing: 3px;
	text-align: center;
}
#common-contact .tel-text{
	font-size: 12px;
	text-align:  center;
	margin: 0 0 30px 0;
}
#common-contact .btn-list{
	width: 90%;
	margin: 0 auto;
}
#common-contact .btn-list li{
	width: 48%;
	text-align: center;
	margin: 0 2%;
}
#common-contact .btn-list li a{
	background-color: #fff;
	text-decoration: none;
	border: none;
	padding: 5px 12px;
}

}





/* =================================================================
		Footer
================================================================= */
#footer{
	background-color: #666666;/*#EFEFEF*/
	color: #fff;
}

/* PCのみ ================ */
@media (min-width:640px){
#footer-inner{
	max-width: 1000px;
	padding: 80px 20px 40px 20px;
	margin: 0 auto;
}

#footer-content{
	display: flex;
	margin: 0 0 30px 0;
}
#footer-about{
	width: 35%;
}

#footer-logo{
	margin: 0 0 35px 15px;
}
.footer-company{
	font-size: 14px;
	margin: 0 50px 0 0;
}
.footer-company h2{
	font-size: 14px;
	color: #fff;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
.footer-company p{
	font-size: 14px;
	color: #fff;
	letter-spacing: 1.5px;
	margin: 0 0 20px 0;
}

#footer-sns{
	display: flex;
}
#footer-sns li{
	margin: 0 8px 0 0;
}
#footer-sns li a{
	color: #fff;
}
#footer-sns li i{
	font-size: 18px;
}

#footer-links{
	display: flex;
	width: 65%;
}
#footer-links .link-group{
	width: 25%;
	margin: 0 10px 0 0;
}
#footer-links .link-group h2{
	color: #fff;
	font-family: quasimoda,sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1.5px;
	margin: 0 0 10px 0;
}
#footer-links .link-group h2 a{
	color: #fff;
	text-decoration: none;
}

#footer-links .link-group ul{
}
#footer-links .link-group ul li{
	font-size: 12px;
	margin: 0 0 8px 0;
}
#footer-links .link-group ul li a{
	color: #fff;
	text-decoration: none;
}
#footer-links .link-group ul li a,
#footer-links .link-group h2 a{
  display: inline;
  line-height:  1.2;
  padding-bottom: 0.1em;
  background: linear-gradient(#fff, #fff) 0 100%/0 1px no-repeat;
  transition: background .4s;
  text-decoration: none;
}
#footer-links .link-group ul li a:hover,
#footer-links .link-group h2 a:hover{
  background-size: 100% 1px;
}

#footer small{
	color: #fff;
	font-size: 12px;
}

}


/*  スマホのみ ================ */
@media (max-width:640px){
#footer-inner{
	padding: 20px 0 20px 0;
}

#footer-about{
}
#footer-links{
	display: none;
}
#footer-logo{
	width: 60px;
	margin: 0 auto 10px auto;
}
#footer-logo img{
	width: 60px;
}

.footer-company{
	text-align: center;
	font-size: 14px;
	margin: 0 0 0 0;
}
.footer-company h2{
	font-size: 14px;
	color: #fff;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
}
.footer-company p{
	font-size: 12px;
	color: #fff;
	letter-spacing: 1.5px;
	margin: 0 0 20px 0;
}
#footer small{
	display: block;
	color: #fff;
	font-size: 12px;
	text-align: center;
}

}