@charset "utf-8";

/* ========================================
common.css
------------------------------------------

======================================== */
* -webkit-transform-style: preserve-3d;
/* ---------------------------------------- 
 - html
---------------------------------------- */
html,
body {
  background:#fff;
  margin: 0;
  padding: 0;
}
html{
    font-size: 62.5%;
}
@media screen and (max-width: 320px) {
	html{
		font-size: 52.5%;
	}
}

/* ---------------------------------------- 
 - img
---------------------------------------- */
img {
	max-width: 100%;
}

/* ---------------------------------------- 
 - body
---------------------------------------- */
body{
	font-family: 'Roboto', 'Noto Sans JP', "Helvetica Neue", "Helvetica", Arial, "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
	font-size:16px;
	font-size:1.6rem;
	color:#222;
	line-height:1.8;
	-webkit-text-size-adjust: none; /* 文字の拡大縮小を防ぐ */
}
@media screen and (max-width: 768px) {
	body{
		font-size:12px;
		font-size:1.2rem;
	}
}

/* inview */
.inview.mv {
    opacity: 1.0 !important;
    transform: translate(0,0) !important;
    -webkit-transform: translate(0,0) !important;
}
.inview {
    transition: 0.8s;
    opacity: 0;
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
}

/* ---------------------------------------- 
 - #container
---------------------------------------- */
#container {
	width:100%;
	margin:0 auto;
}
#container .pc {
	display:inline-block !important;
}
#container .sp {
	display:none !important;
}
@media screen and (max-width: 768px) {
	#container .sp {
		display:inline-block !important;
	}
	#container .pc {
		display:none !important;
	}
}

/* ---------------------------------------- 
 - header
---------------------------------------- */
header{	
	height: 100px;
	text-align:center;
	background:#fff;
	position: relative;
    z-index: 999;
	z-index: 110;	
}
header #head_wrap{	
	height: 100px;
	text-align:center;
	background:#fff;
	position: relative;	
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5); 
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
header #head_inner{
	width:100%;
	height:100%;
	margin:0 auto;
	position:relative;
	display: -webkit-flex;
   	display: flex;
	-webkit-flex-wrap: nowrap;
   	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	z-index: 110;
    background: #fff;
	border-top:solid 2px #305f9b;
	box-sizing: border-box;
}
header #head_inner .head_logo{
	width: 94%;
    max-width: 1190px;
    text-align: left;
    margin: auto;
}
header #head_inner .head_logo img{
	width:45%;
	max-width:315px;
}
header #head_inner .head_logo a{
	transition: 0.4s;
}
header #head_inner .head_logo a:hover{
	opacity: 0.5;
}
header #head_wrap.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
	-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.5); 
	box-shadow: 0 0 2px rgba(0,0,0,0.5); 
}
header #head_inner .head_logo a img{
	display: inline-block;
	backface-visibility: hidden;
}
@media screen and (max-width: 768px) {
	header{	
		height: 65px;
	}
	header #head_wrap{	
		height: 65px;
	}
	header #head_inner{
		width:100%;
	}
	header #head_inner .head_logo{
		width: 90%;
	}
	header #head_inner .head_logo img{
		width:65%;
	}
}
@media screen and (max-width: 480px) {
}

/* head_menu */
#head_menu {
	display: none;
	width: 63px;
	height: 63px;
	position: absolute;
    top: 50%;
    right: 0;
	cursor: pointer;
	z-index: 110;
	background: #e5e5e5;
	-webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
#head_menu > .txt {
	width: 34px;
	position: absolute;
    bottom: 13px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
#head_menu i {
	position: absolute;
    top: 50%;
	left: 50%;
    display: block;
    width: 28px;
    height: 2px;
    margin: 0 auto;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    background: #305f9b;
	margin-top: -12px;
}
#head_menu i::before {
    display: block;
    width: 28px;
    height: 2px;
    margin-top: 10px;
    content: '';
    background: #305f9b;
}
#head_menu i::after {
	display: block;
    width: 28px;
    height: 2px;
    margin-top: 8px;
    content: '';
    background: #305f9b;
}
#head_menu.active {
	/*background: none;*/
	z-index: 110;
}
#head_menu.active i::before {
    display:none;
}
#head_menu.active i {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	margin-top: -2px;
    margin-left: -14px;
}
#head_menu.active i::after {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	width: 28px;
	margin-top: 0;
}
#head_menu.active > .txt {
	display: none;
}
@media screen and (max-width: 768px) {
	#head_menu {
		display: block;
	}
	#head_menu.active {
		opacity: 1;
		transform: translate(0px, 0px);
		top: 0px;
	}
}
@media screen and (max-width: 480px) {
}

/* ---------------------------------------- 
 - gnavi
---------------------------------------- */
#gnavi{
	width: 360px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	margin-left: 405px;
}
#gnavi #gnavi_inner{
	width: 100%;
    text-align: right;
    margin: 0 0 0 auto;
}
#gnavi #gnavi_inner ul li a {
	color:#222;
}
#gnavi #gnavi_inner ul.nav{
	width:100%;
	display: -webkit-flex;
   	display: flex;
	-webkit-flex-wrap: nowrap;
   	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-right:auto;
}
#gnavi #gnavi_inner ul.nav li{
	padding:0 4%;
	position: relative;
}
#gnavi #gnavi_inner ul.nav li::before{
	content: "";
	height: 18px;
	border-left:solid 1px #8c8c8c; 
	position: absolute;
	left:0;
	top:50%;
	-webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
}
#gnavi #gnavi_inner ul.nav li:nth-child(1) {
	padding-left:0;
}
#gnavi #gnavi_inner ul.nav li:nth-child(1)::before{
	display: none;
}
#gnavi #gnavi_inner ul.nav li:last-child {
	padding-right:0;
}
#gnavi #gnavi_inner ul.nav li a{
	display: block;
 	text-decoration: none;
	transition: 0.4s;
}
#gnavi #gnavi_inner ul li a:hover {
	opacity: 0.5;
}
@media screen and (min-width: 769px) {
	#gnavi{
		opacity: 1 !important;
		z-index: 110 !important;
		visibility: visible !important;
	}
}
@media screen and (max-width: 1200px) {
	#gnavi{
		left:auto;
		right:3%;
		-webkit-transform: translate(0,-50%);
		transform: translate(0,-50%);
		margin-left: 0;
	}
	#gnavi #gnavi_inner{
		width: 100%;
		text-align: right;
		margin: 0 0 0 auto;
	}
}
@media screen and (max-width: 768px) {
	#gnavi{
		width: 100%;
		max-width: 100%;
		height: 100%;
		background-color: #e5e5e5;
		margin:0 auto;
		position: fixed;
		top: 0;
		left: 0;
		overflow: auto;
		z-index: -1;
		opacity: 0;
		visibility:hidden;
		-webkit-transform: translate(0,0);
    	transform: translate(0,0);
	}
	body.open #gnavi{
		visibility: visible;
		z-index:100;
		opacity: 1;
	}
	#gnavi #gnavi_inner {
		width: 90%;
		max-width: 750px;
		display: block;
		margin: 50px auto 0;
		padding: 65px 0;
		box-sizing: border-box;
		text-align: center;
	}
	#gnavi #gnavi_inner ul.nav {
		width: 100%;
		font-size: 1.8rem;
		display: block;
	}
	#gnavi #gnavi_inner ul.nav li {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0;
	}
	#gnavi #gnavi_inner ul.nav li::before {
		display: none;
	}
}
@media screen and (max-width: 480px) {
}

/* ---------------------------------------- 
 - #contents（全体枠）
---------------------------------------- */
#contents {
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
}
#contents #contents_inner {
	margin:0 auto;
	overflow:hidden;	
	text-align:left;
	width:100%;
}
.section {
	width:100%;
	min-height: 406px;
	margin:50px auto 100px;
	box-sizing:border-box;
	background: url("../../images/common/contents_bg.jpg") no-repeat center top;
}
.section .section_inner {
	width:94%;
	max-width: 1190px;	
	margin:0 auto;
	padding-top: 30px;
	overflow:hidden;	
	text-align:left;	
}
.section .section_inner .section_ttl{
	position: relative;
    padding: 35px 0 0;
    font-size: 3.6rem;
    line-height: 1.0;
    color: #305f9b;
	text-align: left;
	font-weight: bold;
	margin-bottom: 65px;
}
.section .section_inner .section_ttl::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-top: solid 3px #305f9b;
    display: block;
    width: 40px;
}
.section .section_inner .section_ttl span {
    display: block;
    font-size: 1.8rem;
    color: #222;
    letter-spacing: 0.1em;
    padding-top: 25px;
}
@media screen and (max-width: 768px) {
	.section {
		margin:40px auto 50px;
	}
	.section .section_inner {
		width:90%;
	}
	.section .section_inner .section_ttl{
		padding: 25px 0 0;
		font-size: 2.4rem;
		margin-bottom: 50px;
	}
	.section .section_inner .section_ttl::before {
		width: 34px;
	}
	.section .section_inner .section_ttl span {
		font-size: 1.2rem;
		padding-top: 18px;
	}
}
@media screen and (max-width: 480px) {
}

/* ---------------------------------------- 
 - #pagetop
---------------------------------------- */
#pageTop {
	width: 50px;
	height: 50px;
	background:#e5e5e5;
	position:fixed;
	bottom: 0;
	right: 10px;
	cursor:pointer;
	z-index:100;
	text-indent:-9999px;
	-webkit-transform: translate3d(0, 100.1%, 0);
	transform: translate3d(0, 100.1%, 0);
	opacity:0;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
}
#pageTop.fadeIn {
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:0.8;
	transition-timing-function:cubic-bezier(0.42, 0, 0.58, 1.0);
}
#pageTop:hover {
	opacity:0.5;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
#pageTop a::before,
#pageTop a::after {
	position: absolute;
	top: 10px;
	bottom: 0;
	right: 18px;
	margin: auto;
	content: "";
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-top: 2px solid #305f9b;
	border-right: 2px solid #305f9b;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}	
@media screen and (max-width: 480px) {
	#pageTop {
		width: 40px;
		height: 40px;
		right: 2%;
	}
	#pageTop a::before,
	#pageTop a::after {
		top: 7px;
		right: 16px;
		width: 8px;
		height: 8px;
	}
}


/* ---------------------------------------- 
 - footer
---------------------------------------- */
footer {
	width:100%;
	background:#f4f7fa;
	border-top:solid 1px #e5e5e5;
}

/* foot_inner */
footer #foot_inner{
	width:94%;
	max-width: 1200px;
	margin: 0 auto;
	padding:40px 0 35px;
	text-align: left;
	display: -webkit-flex;
   	display: flex;
	justify-content: space-between;
}
footer #foot_inner .foot_logo {
	width:25%;
}
footer #foot_inner .foot_logo img {
	width:90%;
	max-width: 230px;
}
footer #foot_inner dl.foot_address {
	width:25.4%;
	font-size: 1.4rem;
}
footer #foot_inner dl.foot_address dt {
	font-weight: bold;
}
footer #foot_inner .foot_navi {
	width:23%;
	font-size: 1.4rem;
}

/* footCopy */
footer #footCopy{
	width:100%;
	height: 100px;
	background:#305f9b;
}
footer #footCopy .footCopy_inner{
	width:94%;
	max-width:1200px;
	height: 100%;
	margin:0 auto;
	text-align:left;	
	overflow:hidden;
	box-sizing:border-box;
	display: -webkit-flex;
   	display: flex;
	align-items: center;
}
footer #footCopy .footCopy_inner .copy {
	font-size: 1.2rem;
	color: #fff;
}
@media screen and (max-width: 900px) {
	footer #foot_inner .foot_logo {
		width:26%;
	}
	footer #foot_inner dl.foot_address {
		width:30%;
		font-size: 1.4rem;
	}
	footer #foot_inner dl.foot_address dt {
		font-weight: bold;
	}
	footer #foot_inner .foot_navi {
		width:14%;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 768px) {
	/* foot_inner */
	footer #foot_inner{
		width:90%;
		padding:25px 0 0;
		display: block;
	}
	footer #foot_inner .foot_logo {
		width:100%;		
		margin-bottom: 27px;
	}
	footer #foot_inner .foot_logo img {
		width:90%;
		max-width: 220px;
	}
	footer #foot_inner dl.foot_address {
		width:100%;
		font-size: 1.2rem;
		margin-bottom: 25px;
	}
	footer #foot_inner dl.foot_address dt {
		font-weight: bold;
	}
	footer #foot_inner .foot_navi {
		display: none;
	}

	/* footCopy */
	footer #footCopy .footCopy_inner{
		width:90%;
		justify-content: center;
	}
	footer #footCopy .footCopy_inner .copy {
		font-size: 1.1rem;
		color: #fff;
	}
}
@media screen and (max-width: 480px) {
}