* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/* remember: box-sizing is not supported by IE7 :( */
	outline: none;
	vertical-align: baseline;
}

html {
	height: 100%;
	width: 100%;
	font-size: 62.5%;
}

body {
	/*    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Yu Gothic", 游ゴシック, メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;*/
	font-family: kinto-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.4rem;
	font-size: 14px;
	line-height: 2.1;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.1em;
	color: #111111;
	background-color: #ffffff;
	margin: 0;
	height: 100%;
	/* 変更：高さを100%に設定 */
}

@media only screen and (max-width: 768px) {

body {
	/*    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Yu Gothic", 游ゴシック, メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;*/
	font-family: kinto-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.3rem;
	font-size: 13px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	letter-spacing: 0.1em;
	color: #111111;
	background-color: #ffffff;
	margin: 0;
	height: 100%;
	/* 変更：高さを100%に設定 */
}	
}	
/* ==========================================================================
   
   改行のスタイル

========================================================================== */
body .pc {
	display: block;
}

body .sp {
	display: none;
}

@media only screen and (max-width: 768px) {
	body .pc {
		display: none;
	}

	body .sp {
		display: block;
	}
}

/* ==========================================================================
   
   文字リンク

========================================================================== */
a {
	color: #f19ec2;
	text-decoration: none;
}

a:hover {
	color: #f01c96;
}

a:visited {
	color: #f19ec2;
}

a:active {
	color: #cf2682;
}

.cp_link {
	position: relative;
	display: inline-block;
	transition: .3s;
	color: #222222;
}

.cp_link::after {
	position: absolute;
	bottom: -5px;
	left: 0;
	content: '';
	width: 0;
	height: 2px;
	background: linear-gradient(-135deg, #f7a322, #f01c96);
	transition: .3s;
}

.cp_link:hover::after {
	width: 100%;
}

/* ==========================================================================
   
   img style

========================================================================== */
.img_100 {
	width: 100%;
	height: auto;
}

.thumbnail {
	margin: 1.5%;
	background-size: cover;
	background-position: center center;
	padding-top: 75%;
	width: 97%;
}

@media screen and (max-width: 768px) {
	img {
		width: 100%;
		height: auto;
	}

	.img_100 {
		width: 100%;
		padding-top: 2%;
		padding-bottom: 2%;
		height: auto;
	}
}





/* ==========================================================================
   
   2ndpage 　

========================================================================== */
.main_img_2nd_concept {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_concept.jpg") top center repeat-x;
	background-color: #111111;
}

.main_img_2nd_service {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_service.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_product {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_product.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_topics {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_topics.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_forsalons {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_forsalons.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_sixpad{
	position: relative;
	width: 100%;
	height: auto;
	top: 0;
	text-align: left;
    padding-top: 25%;
	padding-bottom: 5%;
	padding-left: 10%;
	padding-right: 10%;
	display: block;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_sixpad.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_company {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_company.jpg") top center repeat-x;
	background-color: #111111;
}

.main_img_2nd_salon {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_salon.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_privacy {
	position: relative;
	width: 100%;
	height: 350px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_privacy.jpg") top center repeat-x;
	background-color: #111111;
}
.main_img_2nd_items{
	position: relative;
	width: 100%;
	height: 150px;
	top: 0;
	padding-top: 150px;
	padding-bottom: 0px;
	padding-left: 25%;
	padding-right: 25%;
	display: block;
	text-align: center;
	color: #fff;
	z-index: 7;
	background-size: cover;
	background: url("../img/bg_product.jpg") top center repeat-x;
	background-color: #111111;
}

@media screen and (max-width: 768px) {
.main_img_2nd_concept{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_concept_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}
.main_img_2nd_service {
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_service_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}
.main_img_2nd_product{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_products_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}	
.main_img_2nd_topics{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_topics_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}	
.main_img_2nd_forsalons{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_forsalons_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}		
	
.main_img_2nd_sixpad{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_sixpad_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}	
	
.main_img_2nd_privacy {
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_privacy_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}	
	
.main_img_2nd_company {
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_company_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}



.main_img_2nd_items{
		position: relative;
		width: 100%;
		height: 450px;
		top: 0;
		padding-top: 200px;
		padding-bottom: 0px;
		padding-left: 5%;
		padding-right: 5%;
		display: block;
		text-align: center;
		color: #fff;
		z-index: 7;
		background-size: cover;
		background: url("../img/bg_products_sp.jpg") center center no-repeat;
		background-color: #1e2526;
	}


}

@keyframes zoom {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.5);
	}
}

/* ==========================================================================
   
   .contents_block

========================================================================== */
#container {
	position: relative;
	z-index: 8;
	padding-top: 0%;
	padding-bottom: 0%;
	width: 100%;
	background-color: #ffffff;
}

#container_2nd {
	position: relative;
	z-index: 8;
	padding-top: 3%;
	padding-bottom: 0%;
	width: 100%;
	background-color: #ffffff;
}

.section_block {
	position: relative;
	z-index: 6;
	padding-top: 7%;
	padding-bottom: 7%;
	width: 100%;
	background-color: #ffffff;
}

.section_block_news {
	position: relative;
	z-index: 6;
	padding-top: 0%;
	padding-bottom: 7%;
	width: 100%;
}

.contents_block {
	margin-top: 0%;
	margin-bottom: 0%;
	padding-top: 0%;
	padding-bottom: 0%;
}

.ttl_header {
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
	padding-top: 0%;
	padding-bottom: 0%;
}

.contents_header {
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
	padding-top: 0%;
	padding-bottom: 5%;
}

.contents_space {
	padding-left: 10%;
	padding-right: 10%;
}

.contents_box {
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
	padding-top: 0%;
	padding-bottom: 0%;
	display: inline-block;
}

.contents_box_L {
	width: 50%;
	float: left;
	display: block;
	padding-right: 1%;
	padding-bottom: 0%;
}

.contents_box_R {
	width: 50%;
	float: right;
	display: block;
	padding-left: 1%;
	padding-bottom: 0%;
}

.contents3_box_L {
	float: left;
	width: 31.1%;
	margin-right: 3.35%;
	margin-top: 0%;
	padding-bottom: 0%;
	height: auto;
}

.contents3_box_R {
	float: right;
	width: 31.1%;
	margin-left: 0%;
	margin-top: 0%;
	padding-bottom: 0%;
	height: auto;
}

/* TOPNEWS BLOCK*/
.contents_m_box_L {
	width: 30%;
	float: left;
	display: block;
	padding-right: 1%;
	padding-bottom: 0%;
}

.contents_m_box_R {
	width: 70%;
	float: right;
	display: block;
	padding-left: 1%;
	padding-bottom: 0%;
}

.gallery_box_L {
	float: left;
	width: 24%;
	margin-right: 3.35%;
	margin-top: 3%;
	padding-bottom: 3%;
	height: auto;
}

.gallery_box_R {
	float: right;
	width: 24%;
	margin-left: 0%;
	margin-top: 3%;
	padding-bottom: 5%;
	height: auto;
}

.gallerys {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 0%;
}

.gallerys:after {
	content: "";
	display: block;
	width: 24%;
	height: 0;
}

.gallery {
	width: 24%;
	margin-bottom: 3%;
}

.gallery_img {
	margin-bottom: 10%;
}

.gallery img {
	width: 100%;
}

.txt_center {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.section_block {
		position: relative;
		z-index: 6;
		padding-top: 10%;
		padding-bottom: 10%;
		width: 100%;
	}

	.contents_block {
		margin-top: 0%;
		margin-bottom: 0%;
		padding-top: 0%;
		padding-bottom: 0%;
		width: 100%;
	}

	.contents_space {
		padding-left: 7%;
		padding-right: 7%;
	}

	.contents_header {
		width: 100%;
		margin-top: 0%;
		margin-bottom: 0%;
		padding-top: 0%;
		padding-bottom: 5%;
	}

	.contents_box {
		margin-top: 0%;
		margin-bottom: 0%;
		padding-top: 0%;
		padding-bottom: 5%;
		display: inline-block;
	}

	.contents_box_L {
		width: 100%;
		display: block;
		padding-bottom: 5%;
	}

	.contents_box_R {
		width: 100%;
		padding-left: 1%;
		padding-bottom: 5%;
	}

	.contents3_box_L {
		float: left;
		width: 100%;
		margin-right: 0%;
		margin-top: 3%;
		padding-bottom: 5%;
		margin-bottom: 5%;
		height: auto;
		border-bottom: #dddddd 1px dotted;
	}

	.contents3_box_R {
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-top: 3%;
		padding-bottom: 5%;
		margin-bottom: 5%;
		height: auto;
		border-bottom: #dddddd 1px dotted;
	}

	.contents_m_box_L {
		width: 100%;
		display: block;
		padding-bottom: 5%;
	}

	.contents_m_box_R {
		width: 100%;
		display: block;
		padding-bottom: 5%;
	}

	.gallerys {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.gallerys:after {
		content: "";
		display: block;
		width: 49%;
		height: 0;
	}

	.gallery {
		width: 49%;
		margin-bottom: 2%;
	}

	.gallery_img {
		margin-bottom: 5%;
	}
}

/* ==========================================================================
   
title style

========================================================================== */
#title_2nd_site_header {
	background-color: #ffffff;
	padding-top: 10%;
	padding-bottom: 25%;
	color: #1e2526;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.title_2nd {
	font-size: 35px;
	font-size: 3.5rem;
	font-weight: bold;
	line-height: 2;
	padding-bottom: 2%;
	color: #dddddd;
	text-align: center;
	font-family: utile-display, sans-serif;
}

.title_2nd_caption {
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
	font-family: "Shippori Mincho", serif;
	color: #dddddd;
}

.section_ttl_header {
	width: 100%;
	display: block;
	margin-top: 0%;
	margin-bottom: 5%;
	text-align: center;
}

.section_ttl_header_l {
	width: 100%;
	display: block;
	margin-top: 0%;
	margin-bottom: 5%;
	text-align: left;
}

.section_ttl {
	font-family: utile-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 35px;
	font-size: 3.5rem;
	line-height: 1.3;
	padding-bottom: 1%;
	color: #2b3234;
}

.section_ttl_cap {
	font-size: 15px;
	font-size: 1.5rem;
	font-family: "Shippori Mincho", serif;
	color: #3E4443;
	font-weight: bold;
}

.contents_ttl {
	font-size: 23px;
}

.contents_ttl_cap {
	color: #1e2526;
	font-style: italic;
	font-size: 11px;
	margin-top: 0%;
	margin-bottom: 5%;
}

.contents_txt {}

.contents_block_border {
	margin-bottom: 5%;
	padding-bottom: 5%;
	border-bottom: #cccccc 1px dotted;
}

.contents_ttl2 {
	font-weight: bold;
	font-size: 18px;
	padding-top: 0%;
	padding-bottom: 2%;
}

.contents li {
	position: relative;
	list-style: none;
	font-size: 15px;
	width: 100%;
	padding-bottom: 1%;
}

@media only screen and (max-width: 768px) {
	#title_2nd_site_header {
		background-color: #ffffff;
		padding-top: 19%;
		padding-bottom: 25%;
		padding-left: 10%;
		padding-right: 10%;
		color: #1e2526;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	
.section_ttl {
	font-family: utile-display, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 30px;
	font-size: 3.0rem;
	line-height: 1.3;
	padding-bottom: 1%;
	color: #2b3234;
}	
	
.section_ttl_cap {
	font-size: 13px;
	font-size: 1.3rem;
	font-family: "Shippori Mincho", serif;
	color: #3E4443;
	font-weight: bold;
}	
	
	
}

.page_contents_ttl {
	font-size: 16px;
	padding-bottom: 2%;
	font-style: italic;
}

.page_contents_txt {
	font-size: 14px;
	padding-bottom: 10%;
}

.shopinfo_outline {
	padding-top: 0% !important;
}

.shopinfo_outline dt {
	font-size: 90%;
	font-weight: bold;
	font-style: italic;
	padding-top: 2%;
}

.shopinfo_outline dd {}

/* ==========================================================================
   
装飾

========================================================================== */
/* mk */
.marker_y {
	background: linear-gradient(transparent 0%, #fcfda1 0%);
}

.date {
	font-size: 12px;
	margin: 0 0 8px;
}

.yohaku {
	padding-top: 3%;
	padding-bottom: 3%;
}

.ci_co {
	color: #1e2526;
}

.f-fff {
	color: #ffffff;
}

.f-en {
	font-family: "Courier New", Courier, "monospace";
}

.dli-arrow-right {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	line-height: 1;
	position: relative;
	width: 1em;
	height: 0.1em;
	background: currentColor;
}

.dli-arrow-right::before {
	content: '';
	width: 0.65em;
	height: 0.65em;
	border: 0.1em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	transform-origin: top right;
	position: absolute;
	top: 50%;
	right: -0.05em;
	box-sizing: border-box;
}

.pt_3 {
	padding-top: 3%;
}

.pt_5 {
	padding-top: 5%;
}

.pt_10 {
	padding-top: 10%;
}

.pb_3 {
	padding-bottom: 3%;
}

.pb_5 {
	padding-bottom: 5%;
}

.pb_10 {
	padding-bottom: 10%;
}

.pb_15 {
	padding-bottom: 15%;
}

/* ==========================================================================
   
float reset

========================================================================== */
.clearfix {
	zoom: 1;
	/*for IE 5.5-7*/
}

.clearfix:after {
	content: " ";
	display: block;
	visibility: hidden;
	height: 0.1px;
	clear: both;
	font-size: 0.1em;
	line-height: 0;
}

* html .clearfix {
	display: inline-block;
}

/* no ie mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* */
.clr {
	clear: both;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: 0 -1px -1px 0;
	border: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

/* ==========================================================================
   
背景

========================================================================== */
.bg_f7f7f7 {
	background-color: #f7f7f7;
}

.bg_ffffff {
	background-color: #ffffff;
}

.bg_ci {
	background-color: #f9f9f9;
}

.bg_cib {
	background-color: #118AB6;
}

.bg_ci10 {
	background-color: #f9f9f9;
}

.bg_cib10 {
	background-color: #f1f8fb;
}

/* ==========================================================================
   
ボタンスタイル

========================================================================== */
.btn_box {
	padding-top: 0%;
	padding-bottom: 0%;
	width: 100%;
	display: block;
	text-align: center;
}

.btn_ci {
	margin: 3% auto;
	/* 上下3%、左右自動で中央配置 */
	padding: 0;
	/* ボタン内の余白は a タグで調整 */
	width: 50%;
	display: block;
	text-align: center;
	/* 文字を中央寄せ */
	font-weight: bold;
}

.btn_ci a {
	display: block;
	/* a タグをブロック要素にする */
	padding: 20px 0;
	width: 100%;
	/* ボタンの幅を100%に */
	color: #ffffff;
	background-color: #1e2526;
	text-decoration: none;
	/* デフォルトのリンク下線を削除 */
}

.btn_ci a:hover {
	background-color: #091a30;
}

.btn_ci a:visited {
	background-color: #46496b;
}

.btn_ci a:active {
	background-color: #1e2526;
}

.btn_ci2 {
	margin: 3% auto;
	/* 上下3%、左右自動で中央配置 */
	padding: 0;
	/* ボタン内の余白は a タグで調整 */
	width: 50%;
	display: block;
	text-align: center;
	/* 文字を中央寄せ */
	font-weight: bold;
}

.btn_ci2 a {
	display: block;
	/* a タグをブロック要素にする */
	padding: 20px 0;
	width: 100%;
	/* ボタンの幅を100%に */
	color: #ffffff;
	background-color: #118AB6;
	text-decoration: none;
	/* デフォルトのリンク下線を削除 */
}

.btn_ci2 a:hover {
	background-color: #468db2;
}

.btn_ci2 a:visited {
	background-color: #6299bb;
}

.btn_ci2 a:active {
	background-color: #118AB6;
}

@media screen and (max-width: 768px) {
	.btn_ci {
		margin: 3% auto;
		/* 上下3%、左右自動で中央配置 */
		padding: 0;
		/* ボタン内の余白は a タグで調整 */
		width: 100%;
		display: block;
		text-align: center;
		/* 文字を中央寄せ */
		font-weight: bold;
	}

	.btn_ci2 {
		margin: 3% auto;
		/* 上下3%、左右自動で中央配置 */
		padding: 0;
		/* ボタン内の余白は a タグで調整 */
		width: 100%;
		display: block;
		text-align: center;
		/* 文字を中央寄せ */
		font-weight: bold;
	}
}

.btn_pdf {
	margin-top: 3%;
	margin-bottom: 3%;
	padding-top: 13px;
	padding-bottom: 13px;
	width: 80%;
	display: block;
	text-align: center;
	color: #ffffff;
	background-color: #1e2526;
}

.btn_contactfrom {
	margin-top: 2%;
	margin-bottom: 2%;
	padding-top: 13px;
	padding-bottom: 13px;
	width: 100%;
	display: block;
	text-align: center;
	color: #ffffff;
	background-color: #1e2526;
}

.btn_block {
	padding-top: 3%;
	padding-bottom: 3%;
	display: block;
}

.btn_block_c {
	padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 10%;
	padding-right: 10%;
}

.btnstyleb {
	margin-right: 10px;
	position: relative;
	color: #f01c96;
	padding: 0px 0px 0px 0px;
	display: inline-block;
	text-decoration: none;
	outline: none;
	font-size: 90%;
}

/*線の設定*/
.btnstyleb::before,
.btnstyleb::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	/*線の形状*/
	background: #f19ec2;
	width: 100%;
	height: 2px;
	/*アニメーションの指定*/
	transition: all 0.3s ease-in-out;
}

/*hover時に伸びる線の形状*/
.btnstyleb::after {
	width: 0;
	background: linear-gradient(-135deg, #f7a322, #f01c96);
}

/*hover時に100%に伸びる*/
.btnstyleb:hover::after {
	width: 100%;
}

.btnarrow6 {
	position: relative;
	font-size: 110%;
	background: #1e2526;
	padding: 5px 100px 5px 60px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
	color: #fff;
	text-decoration: none;
	border: transparent 2px solid;
	outline: none;
	border-radius: 100px;
}

/*hoverした際のボタンの形状*/
.btnarrow6:hover {
	background: #1e2526;
	color: #fff;
	border-color: #1e2526;
}

/*矢印と線の形状*/
.btnarrow6:before {
	content: "";
	/*絶対配置で線の位置を決める*/
	position: absolute;
	top: 50%;
	right: 20px;
	/*線の形状*/
	width: 20px;
	height: 1px;
	background: #fff;
}

.btnarrow6::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 40%;
	right: 12px;
	/*矢印の形状*/
	border: 4px solid transparent;
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-left-color: #fff;
	/*アニメーションの指定*/
	transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before {
	background: #fff;
	right: 25px;
}

.btnarrow6:hover::after {
	border-left-color: #fff;
	right: 20px;
}

/*矢印が右に移動する*/
.btnarrow4 {
	/*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
	/*形状*/
	display: inline-block;
	padding: 0 0px;
	color: #333;
	text-decoration: none;
	outline: none;
	margin-top: 5%;
	font-size: 80%;
}

/*矢印と下線の形状*/
.btnarrow4::before {
	content: '';
	/*絶対配置で下線の位置を決める*/
	position: absolute;
	bottom: -5px;
	left: 50%;
	/*下線の形状*/
	width: 85%;
	height: 1px;
	background: #333;
	/*アニメーションの指定*/
	transition: all .3s;
}

.btnarrow4::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	bottom: -0px;
	right: 0;
	left: 115%;
	/*矢印の形状*/
	width: 15px;
	height: 1px;
	background: #333;
	transform: rotate(35deg);
	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before {
	left: 50%;
}

.btnarrow4:hover::after {
	right: 25%;
}

.arrow_7 {
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	/* display: inline-flex; */
	-webkit-align-items: baseline;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	font-family: "big-caslon-fb", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 11px;
	line-height: 1;
	-webkit-letter-spacing: 0.075em;
	-moz-letter-spacing: 0.075em;
	-ms-letter-spacing: 0.075em;
	letter-spacing: 0.075em;
	color: #666;
}

.arrow_72 {
	position: absolute;
	display: inline-block;
	right: 1px;
	bottom: 0;
	width: 20px;
	height: 4px;
	border-bottom: 1px solid currentColor;
	-webkit-transition: width 0.4s cubic-bezier(.86, .09, .87, .76);
	transition: width 0.4s cubic-bezier(.86, .09, .87, .76);
	position: relative;
}

.arrow_72::before {
	content: '';
	display: block;
	position: absolute;
	bottom: -4px;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	right: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-right: 1px solid transparent;
}

/* ==========================================================================
   
お問い合わせ・予約ボタン

========================================================================== */
.btntextchange {
	/*テキストの基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	background: #2b3234;
	min-width: 50px;
	height: 200px;
	padding: 20px;
	text-align: center;
	display: block;
	writing-mode: vertical-rl;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	outline: none;
	transition: all .2s;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.btntextchange:hover {
	background: linear-gradient(-135deg, #f7a322, #f01c96);
	color: #fff;
}

.btntextchange:visited {
	color: #fff;
}

.btntextchange:active {
	color: #fff;
}

.btntextchange span {
	/*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/*アニメーションの指定*/
	transition: all .5s;
	/*ブロック要素にしてテキスト折り返しなし*/
	display: block;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.btntextchange span:nth-child(2) {
	opacity: 0;
	/*透過0に*/
	color: #fff;
}

/*hoverするとテキストが入れ替わる設定*/
.btntextchange:hover span:nth-child(1) {
	opacity: 0;
	/*透過0に*/
	color: #fff;
}

.btntextchange:hover span:nth-child(2) {
	opacity: 1;
	/*不透明に*/
	color: #fff;
}

@media screen and (max-width: 738px) {

	/*表示するテキストが切り替わる*/
	.btntextchange {
		/*テキストの基点とするためrelativeを指定*/
		position: relative;
		/*ボタンの形状*/
		border-bottom: 2px solid #1e2526;
		border-top: 2px solid #1e2526;
		border-left: 2px solid #1e2526;
		min-width: 30px;
		height: 150px;
		padding: 10px;
		text-align: center;
		display: block;
		writing-mode: vertical-rl;
		font-size: 70%;
		font-weight: bold;
		text-decoration: none;
		color: #fff;
		outline: none;
		transition: all .2s;
	}
}

/* ==========================================================================
   
w100%表示バナー

========================================================================== */
#contact_bg {
	color: #ffffff;
	background: url("../img/bgcontact.jpg") center center no-repeat;
	background-size: cover;
	text-align: center;
	padding-top: 13%;
	padding-bottom: 13%;
	background-position: top;
	background-attachment: fixed;
	background-color: #222222;
	position: relative;
	z-index: 8;
	display: block;
}

.contact_navi_header {
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
	padding-top: 0%;
	padding-bottom: 0%;
	display: inline-block;
	vertical-align: top;
}

.contact_navi_btnbox {
	margin-top: 5%;
	padding-bottom: 3%;
	display: block;
	width: 100%;
}

.contact_navi_btnbox .btn2 {
	border-radius: 40px;
	display: inline-block;
	padding: 0;
	font-size: 13px;
	text-decoration: none;
	text-align: left;
	padding-left: 3%;
	line-height: 40px;
	position: relative;
	color: #fefefe !important;
	border: #ffffff 1.5px solid;
	width: 80px;
	min-width: 180px;
	font-weight: bold;
	max-width: 200px;
	margin-bottom: 1%;
	margin-right: 1%;
}

.contact_navi_btnbox.btnSmall {
	line-height: 40px;
}

.contact_navi_btnbox .btnSmall:after {
	line-height: 40px;
}

.contact_navi_btnbox .btn2:hover {
	color: #091a30 !important;
	border: #091a30 1.5px solid;
}

.contact_navi_btnbox .btn2:after {
	font-family: 'themify';
	content: "\e628";
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: 0;
	right: 5%;
	z-index: 1;
	line-height: 40px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 738px) {
	.contact_navi_btnbox {
		margin-top: 10%;
		padding-bottom: 3%;
		display: block;
	}
	
.contact_navi_btnbox .btn2 {
	border-radius: 40px;
	display: inline-block;
	padding: 0;
	font-size: 13px;
	text-decoration: none;
	text-align: left;
	padding-left: 7%;
	line-height: 40px;
	position: relative;
	color: #fefefe !important;
	border: #ffffff 1.5px solid;
	width: 80px;
	min-width: 180px;
	font-weight: bold;
	max-width: 200px;
	margin-bottom: 1%;
	margin-right: 1%;
}	
	
}

.contact_navi_ttl {
	font-size: 33px;
	font-size: 3.3rem;
	line-height: 1.3;
	padding-bottom: 1%;
	font-family: utile-display, sans-serif;
	font-weight: 500;
}

.contact_navi_cap {
	font-size: 14px;
	font-size: 1.4rem;
	font-family: "Shippori Mincho", serif;
	font-weight: bold;
	padding-bottom: 3%;
}

.contact_navi_txt {}

.contact_navi_L {
	width: 50%;
	min-height: 360px;
	float: left;
	display: block;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 5%;
	padding-bottom: 5%;
}

.contact_navi_R {
	width: 50%;
	min-height: 360px;
	float: right;
	display: block;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 5%;
	padding-bottom: 5%;
}

.bg_f_aboutus {
	color: #ffffff;
	background: url("../img/bg_f_aboutus.jpg") center center no-repeat;
	background-size: cover;
	text-align: left;
	background-position: top;
	background-color: #1e2526;
	position: relative;
	z-index: 8;
	display: block;
}

.bg_f_service {
	color: #ffffff;
	background: url("../img/bg_f_service.jpg") center center repeat;
	background-size: cover;
	text-align: left;
	background-position: top;
	background-color: #1e2526;
	position: relative;
	z-index: 8;
	display: block;
}

.bg_f_company {
	color: #ffffff;
	background: url("../img/bg_f_company.jpg") center center repeat;
	background-size: cover;
	text-align: left;
	background-position: top;
	background-color: #1e2526;
	position: relative;
	z-index: 8;
	display: block;
}

.bg_f_service,
.bg_f_company {
	min-height: 400px;
}

.btnbox {
	margin-top: 4%;
	padding-bottom: 3%;
	display: block;
}

.btnbox .btn {
	display: inline-block;
	padding: 0;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	padding: 0;
	line-height: 70px;
	position: relative;
	color: #fefefe;
	border: #1e2526 2px solid;
	width: 400px;
	font-weight: bold;
	margin-bottom: 0%;
	margin-right: 0%;
	background-color: #1e2526;
}

.btnbox .btn:after {
	font-family: 'themify';
	content: "\e628";
	font-size: 9px;
	font-style: normal;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: 0;
	right: 5%;
	z-index: 1;
	line-height: 70px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btnbox.btnSmall {
	line-height: 70px;
}

.btnbox .btnSmall:after {
	line-height: 70px;
}

.btnbox .btn:hover {
	color: #fff;
	border: #091a30 2px solid;
	background-color: #091a30 !important;
}

.btnbox .btn:hover:after {
	color: #ffffff;
	border: #091a30;
	right: 10px;
}

@media screen and (max-width: 738px) {
	.contact_navi_ttl {
		font-size: 30px;
		font-size: 3.0rem;
		font-weight: bold;
		line-height: 1.3;
		padding-bottom: 3%;
		font-family: utile-display, sans-serif;
	}

	.contact_navi_cap {
		font-size: 13px;
		font-size: 1.3rem;
		font-family: "Shippori Mincho", serif;
		font-weight: bold;
		padding-bottom: 3%;
	}


	.contact_navi_L {
		width: 100%;
		min-height: 260px;
		float: left;
		display: block;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	.contact_navi_R {
		width: 100%;
		min-height: 260px;
		float: right;
		display: block;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	#contact_bg {
		color: #ffffff;
		background-image: url("../img/bgcontactsp.jpg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		margin-top: 0%;
		padding-top: 25%;
		padding-bottom: 25%;
		padding-left: 5%;
		padding-right: 5%;
		background-attachment: inherit;
		background-color: #091a30;
		position: relative;
		z-index: 8;
		display: block;
		overflow: hidden;
	}

	.btnbox {
		margin-top: 10%;
		padding-bottom: 3%;
		display: block;
		width: 100% !important;
	}

	.btnbox .btn {
		display: inline-block;
		padding: 0;
		font-size: 13px;
		text-decoration: none;
		text-align: center;
		padding: 0;
		line-height: 50px;
		position: relative;
		color: #fefefe;
		border: #1e2526 2px solid;
		font-weight: bold;
		margin-bottom: 1%;
		margin-right: 1%;
		margin-bottom: 5%;
		width: 100% !important;
	}

	.btnbox .btn:after {
		font-family: 'themify';
		content: "\e628";
		font-size: 9px;
		font-style: normal;
		font-weight: bold;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: absolute;
		top: 0;
		right: 5%;
		z-index: 1;
		line-height: 80px;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.btnbox.btnSmall {
		line-height: 50px;
	}

	.btnbox .btnSmall:after {
		line-height: 50px;
	}

	.btnbox .btn:hover {
		color: #fffff;
		border: #1e2526 2px solid;
	}

	.btnbox .btn:hover:after {
		color: #091a30;
		border: #091a30;
		right: 10px;
	}
}

/* ==========================================================================
   
   floating banner

========================================================================== */
.floating {
	position: fixed;
	right: 0px;
	top: 25%;
	z-index: 999;
}

.floating a {
	display: block;
	padding: 0px;
	text-decoration: none;
	/*  opacity: 0.6;*/
}

.floating2 {
	position: fixed;
	right: 0px;
	top: 58%;
	z-index: 999;
}

.floating2 a {
	display: block;
	padding: 0px;
	text-decoration: none;
	/*  opacity: 0.6;*/
}


@media screen and (max-width: 738px) {
	.floating {
		position: fixed;
		right: 0px;
		top: 25%;
		z-index: 999;
	}

	.floating a {
		display: block;
		padding: 0px;
		text-decoration: none;
		/*  opacity: 0.6;*/
	}
		.floating2 {
		position: fixed;
		right: 0px;
		top: 58%;
		z-index: 999;
	}

	.floating2 a {
		display: block;
		padding: 0px;
		text-decoration: none;
		/*  opacity: 0.6;*/
	}
}

/*========= ページトップのためのCSS ===============*/
/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	z-index: 999;
	/*一番上に表示*/
	right: 20px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s, visibility .5s;
	/*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	/*改行禁止*/
	white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove {
	0% {
		bottom: 20px;
	}

	50% {
		bottom: 25px;
	}

	100% {
		bottom: 20px;
	}
}

/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
	z-index: 999;
	/*一番上に表示*/
}

/*リンク全体の aタグの形状*/
.scroll-top a {
	text-decoration: none;
	color: #777777;
	text-transform: uppercase;
	font-size: 1.2rem;
	display: block;
	z-index: 999;
	/*一番上に表示*/
}

/*スクロールリンクの形状*/
.js-scroll a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 50px;
	background: #777777;
	z-index: 999;
	/*一番上に表示*/
}

.js-scroll a::before {
	content: "";
	position: absolute;
	top: 30px;
	right: -6px;
	width: 1px;
	height: 20px;
	background: #777777;
	transform: skewX(-31deg);
	z-index: 999;
	/*一番上に表示*/
}

/*Edge IE11 hack*/
_:-ms-lang(x),
.js-scroll a::before {
	right: -11px;
}

/*ページトップリンクの形状*/
.js-pagetop a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 50px;
	background: #777777;
}

.js-pagetop a::before {
	content: "";
	position: absolute;
	top: 0;
	right: -6px;
	width: 1px;
	height: 20px;
	background: #777777;
	transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x),
.js-pagetop a::before {
	right: 0;
}

/*========= スクロールダウンのためのCSS ===============*/
/*====== 9-1-1 縦線が動いてスクロールを促す =======*/
/*スクロールダウン全体の場所*/
.scrolldown_top {
	/*描画位置※位置は適宜調整してください*/
	position: absolute;
	z-index: 9;
	/*一番上に表示*/
	left: 50%;
	bottom: 10px;
	/*全体の高さ*/
	height: 50px;
}

/*Scrollテキストの描写*/
.scrolldown_top span {
	/*描画位置*/
	position: absolute;
	z-index: 999;
	/*一番上に表示*/
	left: -15px;
	top: -15px;
	/*テキストの形状*/
	color: #ffffff;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown_top::after {
	content: "";
	/*描画位置*/
	position: absolute;
	top: 0;
	/*線の形状*/
	width: 1px;
	height: 30px;
	background: #ffffff;
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity: 0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
	0% {
		height: 0;
		top: 0;
		opacity: 0;
	}

	30% {
		height: 30px;
		opacity: 1;
	}

	100% {
		height: 0;
		top: 50px;
		opacity: 0;
	}
}

h1,
h2,
h3,
h4,
h5,
p {
	display: block;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: 300;
}

dd,
th,
td,
li {
	font-weight: 300;
}

p {
	display: block;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	margin: 0;
	padding: 0;
}

ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}

dd {
	display: block;
	margin-inline-start: 0px;
}

/*==================================================
背景色が伸びて出現
===================================*/
/*全共通*/
.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	/*　はみ出た色要素を隠す　*/
	opacity: 0;
	display: block;
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*中の要素*/
.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #efd6d6;
	/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
	opacity: 0;
}

.fade {
	animation-name: fadeInAnime;
	/*1で解説*/
	animation-fill-mode: forwards;
	/*2で解説*/
	animation-duration: 3s;
	/*3で解説*/
	animation-iteration-count: 1;
	/*4で解説*/
	animation-timing-function: ease;
	/*5で解説*/
	animation-delay: 0.5s;
	/*6で解説*/
	animation-direction: normal;
	/*7で解説*/
}

/*1で解説*/
@keyframes fadeInAnime {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.scfade {
	transition: all 2000ms;
	opacity: 0;
	visibility: hidden;
	transform: translate(0px, 50px);
}

.scfadein {
	opacity: 1;
	visibility: visible;
	transform: translate(0px, 0px);
}

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
background: linear-gradient(-135deg, #f7a322, #f01c96);
	z-index: 9999999;
	text-align: center;
	color: #fff;
	opacity: 1;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg {
	display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
	display: block;
	content: "";
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: scaleX(0);
	/*background-color: #0d0a16;/*伸びる背景色の設定*/
	animation-name: PageAnime;
	animation-duration: 1.2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes PageAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container2 {
	opacity: 0;
	/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container2 {
	animation-name: PageAnimeAppear;
	animation-duration: 1s;
	animation-delay: 0.8s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}




/* 6. ブラー＋フェード */
        .blur-fade {
            opacity: 0;
            filter: blur(10px);
            transform: translateY(20px);
            transition: all 0.8s ease;
        }
        .blur-fade.appear {
            opacity: 1;
            filter: blur(0px);
            transform: translateY(0);
        }