@charset "utf-8";

@import "reset.css";

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');

html {
	font-size:1.0vw;
}
body {
	-webkit-text-size-adjust: 100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", YuGothicSub ,  "メイリオ", sans-serif;
	/* font-size:1.0vw; */
}
body.modal-open {
	overflow: hidden;
	height: 100%;
}
.sans {
	font-family:"HiraKakuProN-W3","ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", YuGothicSub ,  "メイリオ", sans-serif;
}
.serif {
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.font-roboto {
	font-family: 'Helvetica' , 'Helvetica Neue' , 'Roboto', sans-serif;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
span.small {
	font-size:0.8125rem;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:none;
}
img{
}

a[href]:hover img:not(.no_hover) {
}
.hover-flash:hover {
  animation-name: anime_flash; 
  animation-duration: 0.3s;
}
@keyframes anime_flash {
  0% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

p.soon {
	padding:5em 0;
	font-size:2rem;
	text-align:center;
}

/* ***************************************************************************** HEADER
*/
header {
	height:8.8rem;
	width:100%;
	background-color:#fff;
}
header > .inner {
	transition-duration:0.3s;
	transition-property:background-color;
}
header > .inner > div{
	width:87.8%;
	margin:auto;
	height:8.8rem;
	line-height:1;
	position:relative;
	transition-property:height;
	transition-duration:0.3s;
}
header h1 {
	padding-top:3.33rem;
	transition-property:padding-top;
	transition-duration:0.3s;
}
header h1 span ,
header h1 a {
	display:block;
}
header h1 a {
	width:16.4rem;
	position:relative;
}
header h1 span.logo_bk,
header h1 span.logo_wh{
	width:16.4rem;
	height:2.6rem;
	transition-property:opacity;
	transition-duration:1.0s;
}
header h1 span.logo_bk {
	background:url(/images/common/logo_bk.png) left top no-repeat;
	background-size:contain;
	opacity:1.0;
}
header h1 span.logo_wh {
	background:url(/images/common/logo_wh.png) left top no-repeat;
	background-size:contain;
	opacity:0.0;
	position:absolute;
	top:0px;
	left:0px;
}
header h1 span {
	font-size:0px;
}
.globalNav {
	font-family: 'Helvetica' , 'Helvetica Neue' , 'Roboto', sans-serif;
	font-size:1.05rem;
	position:absolute;
	top:4.5rem;
	right:0;
	transition-property:top;
	transition-duration:0.3s;
}
.globalNav a{
	color:#333;
	font-weight:bold;
	transition-property:color;
	transition-duration:1.0s;
}
.globalNav_list {
	list-style-type:none;
}
.globalNav li {
	float:left;
	margin-left:2.75rem;
	letter-spacing:0.03em;
}
.globalNav li:first-child {
	margin-left:0px;
}
.globalNav hr {
	margin:0.3rem 0 0 0;
	border:none;
	border-bottom:solid 2px rgba(51,51,51,0.0);
	transition-property:border-bottom;
	transition-duration:0.3s;
}
.globalNav .current hr {
	border-bottom:solid 2px rgba(51,51,51,1.0);
}
body.bg-dark .globalNav a{
	color:#fff;
}
body.bg-dark .globalNav hr {
	border-bottom:solid 2px rgba(255,255,255,0.0);
}
body.bg-dark header h1 span.logo_wh {
	opacity:1.0;
}
body.bg-dark header h1 span.logo_bk {
	opacity:0.0;
}

.globalNav a:hover hr {
	border-bottom:solid 2px rgba(51,51,51,1.0);
}
body.bg-dark .globalNav a:hover hr {
	border-bottom:solid 2px rgba(255,255,255,1.0);
}
body.bg-dark .globalNav .current hr {
	border-bottom:solid 2px rgba(255,255,255,1.0);
}


.header_sticker header .inner {
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	height:5rem;
	z-index:100;
	background-color:#000;
}
.header_sticker header .inner > div{
	height:5rem;
}
.header_sticker header h1 {
    padding-top: 1.25rem;
}
.header_sticker .globalNav {
	top:2rem;
}

.header_sticker .globalNav a{
	color:#fff;
}
.header_sticker .globalNav a:hover hr {
	border-bottom:solid 2px rgba(255,255,255,1.0);
}
.header_sticker .globalNav .current hr {
	border-bottom:solid 2px rgba(255,255,255,1.0);
}

body.header_sticker header h1 span.logo_wh {
	opacity:1.0;
}
body.header_sticker header h1 span.logo_bk {
	opacity:0.0;
}

@media screen and (max-width: 1157px)  {

}


/* ***************************************************************************** BREAD
*/
.breadcrumbs {
	line-height:1;
	height:2.3rem;
	overflow:hidden;
	font-size:0.85rem;
	background-color:#000;
	letter-spacing:0.1em;
}
.breadcrumbs ul{
	width: 87.8%;
	margin:0px auto 0px auto;
	list-style-type:none;
	transform-origin:left top;
	transform:scale(0.75);
	display:flex;
	padding-bottom:0px;
}
.breadcrumbs li {
	padding-top:1.3em;
	padding-right:0.35em;
}
.breadcrumbs ,
.breadcrumbs li a{
	color:#fff;
}

.breadcrumbs li:after {
  content: " /";
}
.breadcrumbs li:last-child:after {
	content:'';
}


/* ***************************************************************************** VIEWMORE
*/
.textBtn_more {
	display:inline-block;
}
.textBtn_more hr{
	margin:4px 0 0 0;
	border:none;
	border-bottom:solid 1px #333;
}

/* ***************************************************************************** CONTENTS
*/
.btn .btn_inner {
	display:block;
	background-color:#ccc;
	border:solid 1px #ccc;
	color:#333;
	font-size:0.75rem;
    font-weight: bold;
	line-height:1;
	padding:1.2rem 0;
	text-align:center;
	letter-spacing:0.1em;
	transition-property:all;
	transition-duration:0.3s;
}
.btn a {
	display:block;
	cursor:pointer;
}
.btn.btn_black .btn_inner {
	background-color:#000;
	border:solid 1px #000;
	color:#fff;
}
.btn:hover .btn_inner {
	background-color:#666;
	border:solid 1px #666;
	color:#fff;
}
.btn.btn_black:hover .btn_inner {
	background-color:#fff;
	color:#000;
}
.btn.btn_chevron-right span:after {
    content: "\f054";
    font-family:'Font Awesome 5 Free';
    font-weight: bold;
    display:inline-block;
    margin-left:1.33em;
}


/* ***************************************************************************** PAGETOP
*/
.btn_pagetopWrapper {
	position:absolute;
	right:6.1vw;
	top:7.5vw;
	z-index:99989;
	max-width:31px;
	max-height:107px;
	width:1.63vw;
	height:5.63vw;
}
.btn_pagetop {
	position:fixed;
	bottom:-5.63vw;
	max-width:31px;
	max-height:107px;
	width:1.63vw;
	height:5.63vw;
	background:url(/images/common/btn_pagetop.png) left top;
	background-size:100%;
	cursor:pointer;
	transition-property:all;
	transition-duration:0.5s;
}
body.display_pagetop .btn_pagetop {
	bottom:2vw;
}
body.display_pagetop.pagetop_bottom .btn_pagetop {
	position:static;
	bottom:-5.63vw;
}

.btn_pagetop:hover {
  animation-name: anime_flash;
  animation-duration: 0.3s;
}

/* ***************************************************************************** FOOTER
*/
footer {
	background-color:#000;
	position:relative;
}
footer > .inner {
/*	max-width:1120px; */
	width:87.8%;
	margin:auto;
	padding:7.5vw 0 5.8vw 0;
	position:relative;
}
.footerNav {
	font-family: 'Roboto', sans-serif;
	font-weight:100;
	font-size: 1.95rem;
	letter-spacing:0.05em;
	margin-bottom: 2vw;
}
.footerNav1 {
	width:22vw;
	float:left;
}
.footerNav2 {
	width:22vw;
	float:left;
}
.footerNav a {
	color:#fff;
	display:inline-block;
}
.footerNav a:hover {
  animation-name: anime_flash;
  animation-duration: 0.3s;
}
.footerNav li {
	margin-bottom:2vw;
}
.footerNav > h3 {
	font-size:1.3rem;
	color:#9f9f9f;
	font-weight:normal;
	letter-spacing: 0.07em;
}
.footerNav > hr {
	width:20px;
	border:none;
	border-bottom:solid 1px #444;
	margin:1.33vw 0;
}
.footerLogos {
	position:absolute;
	bottom:5vw;
	right:0px;
	text-align:right;
} 
.footerLogos li{
	margin-bottom:0.8vw;
	height:1.75vw;
}
.footerLogos li img{
	width:auto;
	height:100%;
}
.footerCopy {
	font-size:0.6rem;
	color:#fff;
}


@media screen and (max-width: 1199px)  {
	html {
		font-size:12px;
	}
	.globalNav li {
		margin-left:2.0vw;
	}
	.footerNav1 {
	    width: 270px;;
	}
}
@media screen and (max-width: 960px)  {
	.disp_960 {
		display:none !important;
	}
}
@media screen and (max-width: 899px)  {
	.globalNav li {
		margin-left:1.0vw;
	}

	header h1 span.logo_bk,
	header h1 span.logo_wh{
		width:13rem;
		height:2.06rem;
	}


}
@media screen and (min-width: 768px)  {
	.disp_sp {
		display:none !important;
	}
	#btn_spmenu {
		display:none !important;
	}
}

/* -----------------------------------------------------------------------------
モバイル
----------------------------------------------------------------------------- */
@media screen and (max-width: 767px)  {
	html {
		font-size:4vw;
	}
	body {
		min-width:none;
		min-width:initial;
		padding-top:9vw;
	}
	.disp_pc {
		display:none !important;
	}

	p.soon {
		font-size:1rem;
	}

/* ***************************************************************************** HEADER
*/
	header {
		height:9vw;
		position:fixed;
		top:0px;
		left:0px;
		width:100%;
		z-index:9999;
	}
	.header_sticker header .inner ,
	header > .inner{
		margin:auto;
		width:100%;
		height:9vw;
		background-color:#fff;
	}
	header > .inner > div {
		height:auto;
		width:auto;
	}
	.header_sticker .globalNav a{
		color:#333;
	}
	body.header_sticker header h1 span {
/*
		background:url(/images/common/logo_bk.png) left top no-repeat;
		background-size:contain;
*/
	}


	header h1 ,
	.header_sticker header h1 {
		padding-top:2.9vw;
		padding-left:5vw;
	}
	header h1 span.logo_wh ,
	header h1 span.logo_bk ,
	header h1 span {
		width:24.4vw;
		height:5.22vw;
	}
	.globalNav {
		font-size:1.2rem;
		font-weight:bold;
		position:absolute;
		top:9vw;
		left:0px;
		right:auto;
		width:100%;
		background-color:#fff;
		
		height:0%;
		overflow:hidden;
		
		transition-property:height;
		transition-duration:0.5s;
	}
	.globalNav a{
		text-align:center;
		display:block;
		padding:0.8em 0;
		
	}
	.globalNav_list {
		list-style-type:none;
		padding-top:7vw;
	}
	.globalNav li {
		float:none;
		margin-left:0rem;
		width:100%;
		text-align:center;
		letter-spacing:0.2em;
	}
	.globalNav hr {
		display:none;
	}
	body.spmenu_opened .globalNav{
		height:120vh;
	}
	body.bg-dark .globalNav a{
		color:#333;
	}
	body.bg-dark .globalNav hr {
		border-bottom:solid 1px #333;
	}
	body.bg-dark header h1 span.logo_wh ,
	body.header_sticker header h1 span.logo_wh {
		opacity:0.0;
	}
	body.bg-dark header h1 span.logo_bk ,
	body.header_sticker header h1 span.logo_bk {
		opacity:1.0;
	}


	#btn_spmenu {
		display:block;
		background-color:#fff;
		border:solid 1px rgba(0,0,0,0);
		width:5.2vw;
		height:5.2vw;
		position:absolute;
		top:1.5vw;
		right:3vw;
		z-index:9999;
		cursor:pointer;
		border-radius:0.2em;
		padding: 2px;
	}
	.icon-animation {
		width: 100%;
		height: 100%;
		display: block;
		position: relative;
	}
	.icon-animation span {
		width: 5vw;
		height: 1px;
		display: block;
		background: #000;
		position: absolute;
		left: 50%;
		top: calc(50% - 0.5px);
		margin-left: -2.5vw; 
	}
	.icon-animation span {
		-webkit-transition: all 0.3s;
		transition: all 0.3s; 
	}
	.icon-animation .top {
		-webkit-transform: translateY(-1.0vw) scale(1);
		-ms-transform: translateY(-1.0vw) scale(1);
		transform: translateY(-1.0vw) scale(1); 
	}
	.icon-animation .middle {
		background: none;
		position: relative; 
	}
	.icon-animation .middle:before, .icon-animation .middle:after {
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		content: "";
		width: 5vw;
		height: 1px;
		background: #000;
		display: block;
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	    position: absolute; 
	   }
	.icon-animation .bottom {
		-webkit-transform: translateY(1.0vw) scale(1);
		-ms-transform: translateY(1.0vw) scale(1);
		transform: translateY(1.0vw) scale(1); 
	}
	body.spmenu_opened #btn_spmenu {
		border:solid 1px rgba(0,0,0,1);
	}
	body.spmenu_opened .icon-animation .top {
		-webkit-transform: translateY(0px) scale(0);
		-ms-transform: translateY(0px) scale(0);
		transform: translateY(0px) scale(0); 
	}
	body.spmenu_opened .icon-animation .bottom {
		-webkit-transform: translateY(0px) scale(0);
		-ms-transform: translateY(0px) scale(0);
		transform: translateY(0px) scale(0); 
	}
	body.spmenu_opened .icon-animation .middle:before {
		-webkit-transform: rotate(45deg) scaleX(1.0);;
		-ms-transform: rotate(45deg) scaleX(1.0);;
		transform: rotate(45deg) scaleX(1.0);; 
	}
	body.spmenu_opened .icon-animation .middle:after {
		-webkit-transform: rotate(-45deg) scaleX(1.0);
		-ms-transform: rotate(-45deg) scaleX(1.0);
		transform: rotate(-45deg) scaleX(1.0); 
	}


/* ***************************************************************************** BREAD
*/
	.breadcrumbs {
		height:1.6rem;
		font-size:0.6rem;
	}
	.breadcrumbs ul{
		width: 90%;
		transform:scale(0.75);
	}



/* ***************************************************************************** FOOTER
*/
	footer > .inner {
		width:85%;
		padding:3.2rem 0 2.2rem 0;
	}
	.footerNav {
		font-size:1.05rem;
		margin-bottom:1.33rem;
	}
	.footerNav1 {
		width:45%;
	}
	.footerNav2 {
		width:37%;
	}
	.footerNav li {
		margin-bottom:0.9rem;
	}
	.footerNav a hr {
		display:none;
	}
	.footerNav > h3 {
		font-size:0.6rem;
	}
	.footerNav > hr {
		width:1rem;
		margin:2vw 0;
	}
	.footerLogos {
		position:static;
		text-align:left;
/*		margin-bottom:1.33rem; */
		margin-bottom: 1.8rem;
	} 
	.footerLogos li{
		margin-bottom:0.8rem;
	}
	.footerLogos li img{
		width:auto;
/*		height:2.4vw; */
		height:3.6vw;
	}
	.footerCopy {
		font-size:0.4rem;
		color:#fff;
	}


/* ***************************************************************************** PAGETOP
*/
	.btn_pagetopWrapper {
		width:4.1vw;
		height:14.2vw;
		top:14vw;
		right:2.4vw;
	}
	.btn_pagetop {
		width:4.1vw;
		height:14.2vw;
		top:auto;
		bottom:-14.2vw;
	}
	body.display_pagetop .btn_pagetop {
		bottom:2vw;
	}
	body.display_pagetop.pagetop_bottom .btn_pagetop {
		position:static;
		bottom:-14.2vw;
	}


}