/*Projectレイヤーはプロジェクト固有のスタイルが該当します。
プロジェクトで使い回すスタイルのほとんどはProjectレイヤーに追加することになります。*/
/*
プロパティの記述順
display
list-style
position(top,rigjht,bottom,left,z-index)
float
clear
width
height
margin
padding
border
background
color
font
text-decoration
text-align
vertical-align
line-hight
white-space
other text*/
/*
ショートハンド記述例
margin: 1px 2px 3px 0;
padding: 1px 2px 3px 0;
border: 1px solid #fff;
background: #000 url(images/bg.gif) left top / auto no-repeat;
font: bold 16px / 1.6 Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
*/

.wf-notosansjapanese,body {
	font-family: "Noto Sans Japanese";
}

.p-logo-box {
	display: block;
	width: 225px;
	margin: 0 auto 108px;
	padding: 50px 0 0;
	text-align: center;
	line-height: 1;
}

.p-logo-box img {
	width: 100%;
}

.p-main-imgbox {
	overflow: hidden;
	position: relative;
	display: block;
	width: 400px;
	margin: 0 auto 84px;
}

.p-main-imgbox img {
	width: 100%;
}

.swiper-container {
	z-index: -1!important;
}

.p-btn-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 35px;
}

.p-copyright {
	margin: 0 0 10px;
	font-size: 11px;
	text-align: center;
	line-height: 1;
}

.animated.modal-02-on.lightSpeedIn,.animated.modal-01-on.lightSpeedIn,.animated.modal-02-off.lightSpeedIn,.animated.modal-01-off.lightSpeedIn {
	background-color: rgba(0,0,0,.8)!important;
}

.modal-content {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.modal-content.map {
	position: relative;
	width: 100%;
	padding: 350px 0 0 0;
}

.modal-content.map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-title{
	max-width: 800px;
	width: 100%;
	margin: 50px auto 40px;
	color: #fff;
	font-size: 20px;
	letter-spacing: .05em;
	line-height: 1;
}

.map-address {
	margin: 22px 0 50px;
	padding: 0;
}

.map-address li {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	color: #fff;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .05em;
	list-style-type: none;
}

.map-address li:nth-child(2) {
	margin-bottom: 21px;
}

.btnclose {
	display: block;
	width: 59px;
	margin: 0 auto 96px;
	cursor: pointer;
}

.p-modal-table {
	max-width: 810px;
	width: 100%;
	margin: 0 auto 16px;
	color: #fff;
}

.p-modal-table th {
	width: 124px;
	vertical-align: top;
	padding-bottom: 22px;
}

.p-modal-table td {
	padding-bottom: 22px;
}

.p-modal-table td a {
	color: #fff;
}

.p-modal-table td a:hover {
	text-decoration: border;
}

.modal-title-more {
	max-width: 810px;
	width: 100%;
	margin: 50px auto 40px;
	color: #fff;
	font-size: 20px;
	letter-spacing: .05em;
	line-height: 1;
}

#company,#access {
	display: none;
}

.p-loader-box {
	display: none;
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
}

.loader,
.loader:before,
.loader:after {
  background: #df0024;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #df0024;
  text-indent: -9999em;
  margin: 50% auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}

.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@media screen and (max-width: 1400px){
	.p-logo-box {
		margin: 0 auto;
		padding: 50px 0;
	}

	.p-main-imgbox {
		margin: 0 auto 50px;
	}
}

@media screen and (max-width: 1100px){
	.p-btn-area {
		width: 96%;
		margin: 0 auto 35px;
	}
}

@media screen and (max-width: 900px){
	.modal-content {
		max-width: 100%;
		width: 96%;
		margin: 0 auto;
	}

	.modal-title{
		max-width: 100%;
		width: 96%;
		margin: 50px auto 40px;
	}

	.map-address{
		max-width: 100%;
		width: 96%;
		margin: 22px auto 50px;
	}

	.modal-title-more {
		max-width: 100%;
		width: 92%;
		margin: 50px auto 40px;
	}

	.p-modal-table {
		max-width: 100%;
		width: 92%;
		margin: 0 auto 16px;
	}
}

@media screen and (max-width: 768px){
	.p-logo-box {
		width: 50.94%;
		margin: 0 auto;
		padding: 10.6% 0 16%;
	}

	.p-main-imgbox {
		width: 44.3%;
		margin-top: 10%;
		margin-bottom: 24%;
	}

	.btn-5 {
		font-size: 3.7vw;
		height: auto;
		padding: 2% 0;
	}

	.wrap {
		width: 31.01%;
		float: left;
		margin-left: 3.5%;
	}

	.wrap:first-child {
		margin-left: 0;
	}

	.centerer:first-child {
		margin: 0 10% 0 0;
		width: 29.3%;
	}

	.btn-5:hover:before, .btn-5:hover:after {
		border-width: 0 0;
	}

	.centerer:last-child {
		width: 94.5%;
		margin: 0 auto;
	}
	.centerer:last-child .wrap:last-child {
		margin-left: 3%;
	}

	.p-btn-area {
		width: 96%;
		margin: 0 auto 8%;
	}

	.p-copyright {
		font-size: 3vw;
	}

	.modal-title-more {
		font-size: 4vw;
	}

	.p-modal-table th,.p-modal-table td,.modal-title{
		font-size: 3.6vw;
	}

	.p-modal-table th {
		width: 27%;
	}

	.btnclose {
		width: 9.3%;
	}

	.modal-title {
		width: 89.1%;
		margin: 8% auto 6%;
	}

	.map-address li {
		font-size: 3.4vw;
	}

	.map-address {
		width: 89.1%;
		margin: 8% auto;
	}

	.modal-content {
		width: 89.1%;
		height: 98.5%;
	}

	.btnclose.top {
		width: 6%;
		position: absolute;
		top: 50px;
		right: 20px;
		margin: 0 auto 0;
	}

	.close-access .btnclose.top {
		top: 25px;
	}
}

@media screen and (max-width: 480px){
	.modal-content {
		height: 470px;
	}

	.p-main-imgbox {
		width: 70%;
	}

	.p-main-imgbox {
		margin-top: 6%;
	}

	.modal-content.map {
		position: relative;
		width: 100%;
		padding: 50% 0 0 0;
	}
}

@media screen and (max-width: 380px){
	.loader {
		margin-top: 35%;
	}

	.modal-content {
		height: 370px;
	}
}

@media screen and (max-width: 320px){
	.modal-content {
		height: 310px;
	}
}