@charset "utf-8";
/*** setting css ***/

/*** all reset ***/
* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}
img {
	border: none;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6, pre, address, em, strong, th, ins {
	font-size: 100%;
	font-style: normal;
}
table {
	border-collapse: collapse;
	border: 0;
}
th { text-align: left; }
input, select, textarea { vertical-align: middle; }
img {
	border: 0;
	vertical-align: middle;
}
ins, a { text-decoration: none; }
ul { list-style: none; }
br { letter-spacing: 0; }
/***cleasrfix hack***/
.hack:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.hack { display: inline-block; }
/*hide macie*/
*html .hack { height: 1%; }
.hack { display: block; }
/*end hide*/

/*** font ***/
/*family*/
.fonM { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
.fonG { font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace, sans-serif; }
.fonMin { font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }
/*size*/
.fs-s { font-size: 80%; }
* html .fs-s {/*IE用*/ font-size: 75%; }
/*** color ***/
.c555 { color: #555555; }
.cf00 { color: #ff0000; }
.c000 { color: #000000; }
.cfff { color: #ffffff; }
/*style*/
.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
/*** border ***/
.border1 { border: solid 1px #000000; }
.borderDot1 { border: dotted 2px #000000 }
.border2 { border: solid 1px #000000; }
.borderDot2 { border: dotted 2px #000000 }
.borderShadow { border:
}
/*** link ***/
a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	color: #333;
	text-decoration: none;
}
a:hover {
	color: #999;
	text-decoration: none;
}
a:active {
	color: #999;
	text-decoration: none;
}
.alphaOver a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}
/*** float ***/
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.allClear {
	clear: both;
	display: block;
	width: 100%;
	height: 1px;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
}
/*** margin ***/
/*left*/
.ml3 { margin-left: 3px; }
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }
/*right*/
.mr3 { margin-right: 3px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
/*bottom*/
.mb3 { margin-bottom: 3px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
/*top*/
.mt2 { margin-top: 2px; }
.mt4 { margin-top: 4px; }
.mt6 { margin-top: 6px; }
.mt8 { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.ma { margin: 0 auto; }
/*** padding ***/
/*left*/
.pl3 { padding-left: 3px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
/*right*/
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr45 { padding-right: 45px; }
/*bottom*/
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }
/*top*/
.pt2 { padding-top: 2px; }
.pt4 { padding-top: 4px; }
.pt6 { padding-top: 6px; }
.pt8 { padding-top: 8px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt70 { padding-top: 70px; }
/* padding top0 right5-40 bottom0 left5-40 */
.plr5 { padding: 0 5px; }
.plr10 { padding: 0 10px; }
.plr15 { padding: 0 15px; }
.plr20 { padding: 0 20px; }
.plr25 { padding: 0 25px; }
.plr30 { padding: 0 30px; }
.plr35 { padding: 0 35px; }
.plr40 { padding: 0 40px; }
/*** text ***/
.txt-l { text-align: left; }
.txt-c { text-align: center; }
.txt-r { text-align: right; }
/*** vertical-align ***/
.vat { vertical-align: top; }
.vam { vertical-align: middle; }
/*** box ***/
.w100 { width: 100px; }
.w150 { width: 150px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w550 { width: 550px; }
/* style */
body {
	background: #FFF;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 15px;
	line-height: 1.3;
	color: #333;
}
/*  ---------スマホ用メニュー　ここから ---------*/
.menu-btn {
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
	height: 10vh;
	line-height: 10vh;
	font-size: 10px;
	font-size: 1.0rem;
	font-family: "sans-serif", "メイリオ";
	background: #fff;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	z-index: 10005;
}
.menu-btn span { color: #757575; }
.menu-btn span:after { content: attr(data-txt-menu); }
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-btn span:after { content: attr(data-txt-close); }
.open .menu-btn span { color: #999; }
.open .menu-btn { background: none; }
.menu {
	position: fixed;
	display: table;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	background: rgba(0,0,0,.5);
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility: hidden;
	opacity: 0;
	z-index: 10000;
}
.menu ul {
	display: table-cell;
	vertical-align: middle;
}
.menu li {
	width: 200px;
	margin: 0 auto;
	text-align: center;
}
.menu li a {
	display: block;
	margin-top: 1vh;
	padding: 2vh 0;
	font-size: 11px;
	font-size: 1.1rem;
	font-family: "sans-serif", "メイリオ";
	color: #fff;
	text-transform: uppercase;
}
.menu li:first-child a { margin-top: 0; }
.menu li a:hover { color: #999; }
.sns {
	display: flex;
	justify-content: center;
}
.sns p {
	margin-left: 20px;
	float: left;
}
.sns p:first-child { margin-left: 0; }
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
	cursor: url(../images/cross.svg), auto;
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility: visible;
	opacity: 1;
}
/* ---------スマホ用メニュー　ここまで------------*/



/* ====================================
Navigation 
==================================== */

.overlay-navigation {
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: hsla(0, 0%, 100%, 0.2);
	display: none;
	opacity: 0;
}
nav, nav ul {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
nav ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	list-style: none;
}
nav ul li {
	-webkit-flex-basis: 20%;
	-ms-flex-preferred-size: 20%;
	flex-basis: 20%;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	display: none;
}
nav li a {
	position: relative;
	top: 46%;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Work sans', sans-serif;
	font-weight: 300;
	letter-spacing: 4px;
	text-decoration: none;
	display: block;
	text-align: center;
	font-size: 0.9rem;
	opacity: 0;
}
nav li a:before {
	content: '';
	width: 30px;
	height: 2px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 100;
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	opacity: 0;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
}
nav li a:after {
	content: attr(data-content);
	font-size: 0.7rem;
	-webkit-transition: all .2s linear;
	transition: all .2s linear;
	opacity: 0;
	position: absolute;
	z-index: 100;
	color: #fff;
	display: block;
	margin-right: auto;
	margin-left: auto;
	left: 0;
	right: 0;
	bottom: -30px;
	text-transform: none;
	font-family: 'Open sans', sans-serif;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0;
}
nav li a:hover:before {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
}
nav li a:hover:after {
	-webkit-transform: translateY(15px);
	-ms-transform: translateY(15px);
	transform: translateY(15px);
	opacity: 1;
}
nav li a:visited {
    color: #fff;
}
nav li a:link {
    color: #fff;
}
nav li { background: rgba(0,0,0,.5); }
/* ====================================
Burger king
==================================== */

.open-overlay {
	position: absolute;
	right: 2.5rem;
	top: 3.0rem;
	z-index: 10000;
	width: 34px;
	display: block;
	cursor: pointer;
}
.open-overlay span {
	display: block;
	height: 1px;
	background-color: #555;
	cursor: pointer;
	margin-top: 8px;
}
.animate-top-bar {
	-webkit-animation: animate-top-bar .6s linear 1 both;
	animation: animate-top-bar .6s linear 1 both
}
.animate-bottom-bar {
	-webkit-animation: animate-bottom-bar .6s linear 1 both;
	animation: animate-bottom-bar .6s linear 1 both
}
.animate-middle-bar {
	-webkit-animation: animate-middle-bar .6s linear 1 both;
	animation: animate-middle-bar .6s linear 1 both
}
.animate-out-top-bar {
	-webkit-animation: animate-out-top-bar .6s linear 1 both;
	animation: animate-out-top-bar .6s linear 1 both
}
.animate-out-bottom-bar {
	-webkit-animation: animate-out-bottom-bar .6s linear 1 both;
	animation: animate-out-bottom-bar .6s linear 1 both
}
.animate-out-middle-bar {
	-webkit-animation: animate-out-middle-bar .6s linear 1 both;
	animation: animate-out-middle-bar .6s linear 1 both
}


/* ====================================
Animation keyframes
==================================== */

@keyframes animate-top-bar {
 0% {
 background-color: #fff;
}
 50% {
 -webkit-transform: translateY(9px);
 transform: translateY(9px)
}
 80% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
 background-color: #fff
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 background-color: #ededed;
}
}
 @keyframes animate-bottom-bar {
 0% {
 background-color: #fff;
}
 50% {
 -webkit-transform: translateY(-9px);
 transform: translateY(-9px)
}
 80% {
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
 background-color: #fff;
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 background-color: #ededed;
}
}
 @keyframes animate-middle-bar {
 0% {
 background-color: #fff;
}
 80% {
 background-color: #fff;
}
 100% {
 background-color: #ededed;
}
}
 @keyframes animate-out-top-bar {
 0% {
 background-color: #ededed
}
 50% {
 -webkit-transform: translateY(9px);
 transform: translateY(9px)
}
 80% {
 -webkit-transform: translateY(5px);
 transform: translateY(5px);
 background-color: #ededed
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 background-color: #FFF;
}
}
 @keyframes animate-out-bottom-bar {
 0% {
 background-color: #ededed
}
 50% {
 -webkit-transform: translateY(-9px);
 transform: translateY(-9px)
}
 80% {
 -webkit-transform: translateY(-5px);
 transform: translateY(-5px);
 background-color: #ededed;
}
 100% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 background-color: #FFF;
}
}
 @keyframes animate-out-middle-bar {
 0% {
 background-color: #ededed
}
 80% {
 background-color: #ededed;
}
 100% {
 background-color: #fff;
}
}
#container {
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
	position: relative;
	z-index: 1;
}
#logo{
	float: left;
	width: 170px;
}
#logo img { width: 100%; }
#header { margin: 30px 0 80px; }
#menu ul {
	float: right;
	padding-top: 25px;
	width: 750px;
}
#menu ul li.nolink { color: #ddd; }
#menu ul li {
	float: right;
	width: 14%;
	text-align: center;
	border-left: 1px solid #6c6c6c;
	box-sizing: border-box;
}
#menu ul li:last-child {
	width: 16%;
	border-left: none;
}
#footer_top {
	margin: 15px 0 10px;
	padding: 0 3px 0 10px;
	font-size: 10px;
}
#footer {
	height: 10vh;
	line-height: 10vh;
	font-size: 9px;
	background: #fbfbfb;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
.copy, .back-to-top, .pcf_sns { position: absolute; }
.pcf_sns {
	left: 40px;
	top: 50%;
	margin-top: -10px;
	font-size: 8px;
	font-size: 0.6rem;
	line-height: 20px;
	color: #757575;
}
.pcf_sns {
	display: flex;
	justify-content: center;
}
.pcf_sns p {
	margin-left: 15px;
	float: left;
}
.pcf_sns p:first-child { margin-left: 0; }
.pcf_sns p a {color: #757575;}
.back-to-top {
	top: 48%;
	left: 50.5%;
	width: 13px;
	height: 24px;
	margin: -12px 0 0 -11px;
	background: transparent url(../imges/common/arrow-black.svg) no-repeat center center;
	background-size: 100%;
	cursor: pointer;
	color: #757575;
}
.copy {
	right: 40px;
	top: 50%;
	margin-top: -10px;
	font-size: 8px;
	font-size: 0.8rem;
	line-height: 20px;
	color: #757575;
}
.page-footer {
	text-align: center;
	padding: 40px 0 20px;
	margin-top: 80px;
	background: #fbfbfb;
	font-size: 8px;
	font-size: 0.8rem;
	line-height: 20px;
	margin-bottom: -1vh;
	color: #757575;
}
.page-footer a { color: #aaa }
.page-footer img {
	width: 30px;
	height: 30px;
	padding: 10px;
	margin-left: 1.0%;
}
.spf_sns {
	display: flex;
	justify-content: center;
	margin: 20px 0;
}
.spf_sns p {
	margin-left: 25px;
	float: left;
}
.spf_sns p:first-child { margin-left: 0; }
.ga_b {
	cursor: pointer;
	background: #FFF;
	position: relative;
	z-index: 200;
}
.ga_b:hover { color: #999; }
#menu ul .active { color: #999; }
#menu .ga_nav {
	position: absolute;
	z-index: 100;
	width: 100%;
	display: none;
	padding-top: 15px;
	background: rgba(255, 255, 255, 0.8);
}
#menu .ga_nav li {
	float: none;
	border-left: none;
	width: 100%;
}
#menu .ga_nav li a {
	padding: 2px 0;
	display: block;
}
#menu .ga_nav li:last-child { width: 100%; }
.sp { display: none; }
/* サブページで使用 */
#ttl {
	border-left: #ddd 6px solid;
	padding: 3px 15px;
	margin-bottom: 40px;
}
h2 {
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 1px;
	margin-bottom: 3px;
}
#main {
	width: 94%;
	margin: 0 auto 25vh;
}
#p-list { width: 94%; }
#p-list ol li {
	float: left;
	margin-right: 10px;
	font-size: 10px;
}
#p-list ol li:last-child { margin-right: 0; }
#p-list li a { color: #307ccb; }

@media screen and (max-width: 1199px) {
#header { padding: 2%; }
#logo.pc {
	float: none;
	margin: 0 auto 4%;
}
#menu ul {
	float: none;
	margin: 0 auto;
	width: 100%;
}
#copy { width: 100%; }
#container { width: 100%; }
/* サブページで使用 */
#main {
	width: 97%;
	padding-top: 0;
}
}

@media screen and (max-width: 800px) {
.sp { display: block; }
.pc { display: none; }
#header {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}
#logo {
	float: left;
	width: 45%;
}
#ttl {
	border-left: none;
	padding: 0;
	text-align: center;
}
h2 {
	border-bottom: dotted 1px #ccc;
	padding-bottom: 2px;
}
#p-list {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#p-list ol { width: auto; }
#main {
	width: 100%;
	margin: 12vh 0 10vh;
}
}

@media screen and (max-width: 640px) {
#header {
	margin: 20px 0 20px;
	padding: 2% 2% 5%;
}
#menu ul { display: none; }
#menu .ga_nav { display: none !important; }
.ar li {
	float: left;
	width: 33.33%;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	margin-top: -4PX;
}
.ar li.on { color: #eee; }
}