@charset "utf-8";
/* ===================================================================

 file name  :base.css
 style info :共通のページレイアウト

=================================================================== */



/* ---------------------------------------------------------------------------
	囲み要素
--------------------------------------------------------------------------- */
.l-inner-base{
	padding-left: 15px;
	padding-right: 15px;
	max-width: 1230px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 374px){
	.l-inner-base{
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ---------------------------------------------------------------------------
		#wrapper
			全体
--------------------------------------------------------------------------- */
.l-wrap{
	overflow: hidden;
	min-width: 320px;
}
.l-wrap img{
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 768px){
	.l-wrap{
		min-width: 1220px;
	}
}


/* ---------------------------------------------------------------------------
		.l-header
			ヘッダー
--------------------------------------------------------------------------- */
.l-header {
}


/* ---------------------------------------------------------------------------
		.l-content
			コンテンツ
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
		.l-main
			メイン
--------------------------------------------------------------------------- */
.l-main{
	font-size: 1.3rem;
	line-height: 1.7;
}
@media screen and (min-width: 768px){
	.l-main{
		font-size: 1.6rem;
		line-height: 2.25;
	}
}

/* ---------------------------------------------------------------------------
		.l-footer
			フッター
--------------------------------------------------------------------------- */
.l-footer {
}











/*
 * .l-footer__btn-pagetop
 * 先頭に戻るボタン
 *----------------------------------------------------------- */
.l-footer__btn-pagetop{
	position: fixed;
	right:5px;
	bottom:5px;
	opacity: 0;
	pointer-events: none;
	transition: all ease .2s;
	z-index: 5501;
}
.l-footer__btn-pagetop.show{
	opacity: 1;
	pointer-events: auto;
}
.l-footer__btn-pagetop a{
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	background: rgba(0,0,0,0.7);
	overflow: hidden;
	white-space: nowrap;
	text-indent: 100%;
	transition: all ease .2s;
}
.l-footer__btn-pagetop a::before {
	content: '';
	display: block;
	position: absolute;
	top: calc(50% + 2px);
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
	transform: rotate(-45deg);
	transition: all ease .2s;
}
.l-footer__btn-pagetop a::after {
	content: '';
	display: block;
	position: absolute;
	top: 14px;
	left: 50%;
	background: #FFF;
	width: 14px;
	height: 1px;
	transform: translateX(-50%);
}
@media screen and (min-width: 768px){
	.l-footer__btn-pagetop a{
		width: 60px;
		height: 60px;
	}
	.l-footer__btn-pagetop a::before {
		left: calc(50% - 8px);
		width: 16px;
		height: 16px;
	}
	.l-footer__btn-pagetop a::after {
		top: 20px;
		width: 20px;
	}
	.l-footer__btn-pagetop a:hover{
		background: rgba(0,0,0,1);
	}
	.l-footer__btn-pagetop a:hover::before {
		margin-top: 0;
	}
}


/* ---------------------------------------------------------------------------
		ローディング
--------------------------------------------------------------------------- */
/* pageLoaded */
/*
html:not(.is-pageanim-start) * {
  transition: none !important;
}
body::after{
	content:'';
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index:11111;
	opacity: 1;
	pointer-events: none;
	transition: opacity ease 1s
}
.is-page-loaded body::after{opacity: 0;}
*/

/* pageLoading */
html:not(.is-pageanim-start) * {
  transition: none !important;
}
.pageload_container {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 99999;
}
.pageload_container::before,
.pageload_container::after {
	content: '';
	background: #000;
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0;
	transition: all ease-out .4s;
	z-index: -1;
}
.pageload_container::before {
	top: 0;
	transform-origin: left top;
}
.pageload_container::after {
	bottom: 0;
	transform-origin: left bottom;
}
.pageload_inner{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.pageload_txt{
	color: #fff;
	font-size: 16px;
	text-align: center;
}
.pageload_bar{
	background: #fff;
	margin-top: 5px;
	width: 0%;
	height: 2px;
	transition: width ease .1s
}
/* loaded */
.is-page-loaded .pageload_container {
	pointer-events: none;
}
.is-page-loaded .pageload_inner {
	opacity: 0;
}
.is-page-loaded .pageload_container::before,
.is-page-loaded .pageload_container::after {
	opacity: 0;
	transform: scaleY(0);
}