@charset "UTF-8";

/*
************************************************************************
 フォント
************************************************************************
*/
*{
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
#mincho *{
	font-family: '游明朝','Yu Mincho','YuMincho','Hiragino Mincho Pro',serif;
}
span.red{
	color:#c00;
}
/*
************************************************************************
* レスポンシブ別表示切り替え
************************************************************************
*/
@media screen and (max-width: 480px)
{
	.pc-visible  {display:none !important;}
	.sp-hide     {display:none !important;}
}
@media screen and (min-width: 481px)
{
	.pc-hide     {display:none !important;}
	.sp-visible  {display:none !important;}
}

/*
************************************************************************
 マージン
************************************************************************
*/
.mt {margin-top:30px;}
.mt-s {margin-top:20px;}
.mt-ss {margin-top:10px;}

.mb {margin-bottom:30px;}
.mb-s {margin-bottom:20px;}
.mb-ss {margin-bottom:10px;}

.mt-m {margin-top:40px;}
.mt-l {margin-top:50px;}
.mt-ll {margin-top:60px;}
.mt-lll {margin-top:70px;}

.mb-m {margin-bottom:40px;}
.mb-l {margin-bottom:50px;}
.mb-ll {margin-bottom:60px;}
.mb-lll {margin-bottom:70px;}

/*
************************************************************************
 テキスト揃え
************************************************************************
*/
.tac {text-align: center;}
.tal {text-align: left;}
.tar {text-align: right;}


/*
************************************************************************
 基本
************************************************************************
*/
article, footer
{
	margin: 0 auto;
	text-align: center;
	background: #fff;
	width: 100%;
	overflow: hidden;
}
section{
	display:block;
	padding-top: 25px;
	padding-bottom: 25px;
}
.row
{
	width:100%;
	padding-left:6.5%;
	padding-right:6.5%;
}
.cb{
	clear:both;
}
.fl-wrap{
	display:flex;
}

@media screen and (min-width: 481px){
	article, footer{
		/*box-shadow: 5px 8px 45px -7px rgb(184 204 240 / 70%);*/
		max-width: 420px;
	}
	main:before{
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		width:100vw;
		height:100vh;
		
		background-size: cover;
		z-index:-1;
	}
	.row{
		max-width:1210px;
		margin-left:auto;
		margin-right:auto;
		
		padding-left:30px;
		padding-right:30px;
	}
	
}
/*
************************************************************************
 ヘッダー
************************************************************************
*/
header {
	width: 100%;
	height:55px;
}
header .logo{
	width: 36%;
	margin: 0 auto;
	padding: 12px 0;
}
header #all.logo{
	width: 45%;
	padding: 18px 0;
}
@media screen and (min-width: 481px){
	header .logo {
	}
}


/*
************************************************************************
 フッター
************************************************************************
*/
footer{
	height: 140px;
}
footer .footer{
	padding-top: 15px;
}
footer .logo{
	margin: -4px auto 0;
	width: 110px;
}
@media screen and (min-width: 481px){
	footer{
		height: 80px;
	}
	footer .footer {
		padding-top: 20px;
		padding-bottom: 0;
	}
	footer .logo{
		width: 126px;
	}
}

/*
************************************************************************
 TOPへ戻る
************************************************************************
*/
#toTop
{
	display:block;
	position:fixed;
	bottom:30px;
	right:30px;
	
	width:60px;
	height:60px;
}
#toTop.hide
{
	display:none;
	animation-name:toTopHide;
	animation-duration:0.3s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes toTopHide {
	0% {
		display:block;
		opacity:1.0;
	}
	99% {
		display:block;
		opacity:0.0;
	}
	100% {
		display:none;
		opacity:0.0;
	}
}
#toTop.show
{
	animation-name:toTopShow;
	animation-duration:0.3s;
	animation-timing-function:ease-out;
	animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@keyframes toTopShow {
	0% {
		opacity:0;
		margin-bottom:-0.5em;
	}
	1% {
		display:block;
		opacity:0;
	}
	100% {
		display:block;
		opacity:1.0;
		margin-bottom:-0.0em;
	}
}