@charset "utf-8";



/*############################################################################*/
/*

用途名：カード型ページのレイアウト

*/
/*############################################################################*/

/*背景写真レイヤー*/

.bg_photo {
	position: fixed;
	z-index: 0;
	top: 60px;
	width: 100%;
	height: 100%;
}


/*本文全体レイヤー*/

#container {
	z-index: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

/*メニューレイヤー*/

.navi_menu {
	position: fixed;
	bottom: 0;
	z-index: 2;
	height: 120px;
	width: 100%;
	text-align: center;
	background-color: #ffffff;
}

.navi_menu_hidden{
	-webkit-animation: navi_menu_hidden_anime 0.5s forwards;
	animation: navi_menu_hidden_anime 0.5s forwards;
}

@keyframes navi_menu_hidden_anime {
	100% {transform: translate(0px, 140px); }
}

.navi_menu_show{
	-webkit-animation: navi_menu_show_anime 0.5s forwards;
	animation: navi_menu_show_anime 0.5s forwards;
}

@keyframes navi_menu_show_anime {
	0% {transform: translate(0px, 140px); }
	100% {transform: translate(0px, 0px); }
}


/*カードの基本形状*/

.card_contents {
	box-sizing: border-box;
	position: absolute;
	top: 60px;
	left: -1000px;
	overflow-y: scroll;
	width: 100%;
	margin: 0;
	padding: 0 0 120px 0;
	background-color: #ffffff;
}

.card_contents .inner {
	margin: 0;
	padding: 0 10px 30px 10px;
	background-color: #ffffff;
}

.card_animname_start{
	opacity: 1;
	-webkit-animation: card_animname 0.5s forwards;
	animation: card_animname 0.5s forwards;
}

@keyframes card_animname {
	0% {transform: translate(-100px, 0px); }
	100% {transform: translate(0px, 0px); }
}


.card_animname_close{
	-webkit-animation: card_close_animname 0.5s forwards;
	animation: card_close_animname 0.5s forwards;
}

@keyframes card_close_animname {
	0% {transform: translate(0px, 0px) }
	80% {transform: translate(-100px, 0px);opacity: 0; }
	100% {transform: translate(-1000px, 0px);opacity: 0; }
}


/*===========================================================================*/
/*
戻る
*/
/*===========================================================================*/

.card_close {
	width: 40px;
	height: 40px;
	background: url(../../img/sp/home.svg) top center no-repeat;
	background-size: 100%;
	transform: translate(-200px, 200px);
}

.card_close_show{
	-webkit-animation: card_close_show_anime 0.5s forwards;
	animation: card_close_show_anime 0.5s forwards;
}

@keyframes card_close_show_anime {
	100% {transform: translate(0px, 0px); }
}


.card_close_hidden{
	-webkit-animation: card_close_hidden_anime 0.5s forwards;
	animation: card_close_hidden_anime 0.5s forwards;
}

@keyframes card_close_hidden_anime {
	100% {transform: translate(-200px, 200px); }
}


/*===========================================================================*/
/*
サブカード
*/
/*===========================================================================*/

#card_sub_contents_bg {
	display: none;
	position: fixed;
	top: 0;
	z-index: 4;
	background-color: #000000;
	width: 100%;
	height: 100%;
	opacity: 0.6;
}

.card_sub_contents {
	box-sizing: border-box;
	position: fixed;
	top: 20px;
	left: 5%;
	z-index: 5;
	display: none;
	opacity: 0;
	width: 90%;
	height: calc(100% - 40px);
	margin: 0;
	padding: 20px;
	overflow-y: scroll;
	background-color: #ffffff;
	box-shadow: 0 1px 6px 0 #89919a;
}

.card_sub_contents_close {
	display: none;
	opacity: 0;
	position: fixed;
	bottom: 30px;
	right: 10px;
	z-index: 5;
	width: 40px;
	height: 40px;
	background-color: #00448d;
	border-radius: 50%;
	border: 4px solid #ffffff;
	box-shadow: 0 1px 6px 0 #89919a;
}

.card_sub_contents_close::after {
	content: "";
	display: block;
	position: absolute;
	top: 45%;
	left: 15%;
	width: 60%;
	border: 2px solid #ffffff;
}

.card_sub_contents_close::before {
	content: "";
	display: block;
	position: absolute;
	top: 15%;
	left: 45%;
	height: 60%;
	border: 2px solid #ffffff;
}

.sub_card_animname_start{
	display:block;
	-webkit-animation: sub_card_animname 0.5s forwards;
	animation: sub_card_animname 0.5s forwards;
}

@keyframes sub_card_animname {
	0% {opacity: 0; }
	100% {opacity: 1; }
}


.sub_card_animname_close{
	display:none;
	opacity: 0;
}