@charset "utf-8";
/*
001: Page Main Block
002: Page Title Block
003: Page Content Block
004: Breadcrumb Block
005: System Block
006: Credit Card Block
*/
/*---------------------------------------
	001: Page Block
---------------------------------------*/
#section1 {
	height						: 100vh;
	height						: 360px;
}
#section1:before {
	display						: block;
	position					: fixed;
	top							: 0;
	width						: 100%;
	height						: 100%;
	z-index						: -1;
	content						: "";
}


/*---------------------------------------
	002: Page Title Block
---------------------------------------*/
#page_title_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	position					: relative;
}
#page_title_box {
	position					: absolute;
	top							: 160px;
	left						: 10px;
	right						: 0;
}
h1#main_title {
	display						: inline-block;
	font-family					: 'Frank Ruhl Libre', serif;
	font-size					: 40px;
	font-size					: 4.0rem;
	font-weight					: 300;
	color						: #FFF;
	margin-bottom				: 20px;
}
h1#main_title::before {
	position					: absolute;
	top							: 55px;
	left						: 0;
	width						: 70px;
	height						: 2px;
	background					: #FFF;
	content						: "";
}
p#sub_title {
	font-size					: 12px;
	font-size					: 1.2rem;
	color						: #EEE;
}


/*---------------------------------------
	003: Page Content Block
---------------------------------------*/
#section2 {
	position						: relative;
	background-image				: url(../images/bg/bg_page_top.png), url(../images/bg/bg_page_bottom.png), url(../images/bg/section_one.jpg);
	background-position				: right top, left bottom, center top;
	background-repeat				: no-repeat, no-repeat, repeat;
	background-size					: 280px, 280px, auto;
	padding-top						: 30px;
	padding-bottom					: 30px;
}
article#content_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	padding-left				: 0;
	padding-right				: 0;
}


/*---------------------------------------
	004: System Block
---------------------------------------*/
.system_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	margin-bottom				: 100px;
}
.system_block:last-child {
	margin-bottom				: 0;
}
.system_box {
	padding						: 20px 0;
	padding-bottom				: 20px;
	border-bottom				: 1px dotted #d7d7d7;
}
.system_img {
	padding						: 0;
}
.system_img img {
	width						: 100%;
	height						: auto;
}
.system_meta {
	font-size					: 12px;
	font-size					: 1.2rem;
	text-align					: center;
	padding-top					: 6px;
	padding-bottom				: 6px;
}
.system_meta .time {
	display						: block;
	font-size					: 12px;
	font-size					: 1.2rem;
	font-weight					: 300;
	letter-spacing				: 1px;
}
.system_meta .time_required {
	display						: block;
	font-size					: 8px;
	font-size					: 0.8rem;
}
.tbg_one {
    background					: #525263;
	color						: #FFF;
	padding-left				: 0;
	padding-right				: 0;
}
.tbg_two {
    background					: #ff9a9e;
	color						: #FFF;
	padding-left				: 0;
	padding-right				: 0;
}
.tbg_thi {
    background					: #989fe0;
	color						: #FFF;
	padding-left				: 0;
	padding-right				: 0;
}
.tbg_for {
    background					: #61d3cd;
	color						: #FFF;
	padding-left				: 0;
	padding-right				: 0;
}
/*料金タイトル*/
h3.system_title {
	font-size					: 16px;
	font-size					: 1.6rem;
	font-weight					: 300;
	letter-spacing				: 1px;
	margin-top					: 11px;
	margin-bottom				: 0;
	padding-top					: 0;
	padding-bottom				: 0;
}
.title_one {
	color						: #525263;
}
.title_two {
	color						: #ff9a9e;
}
.title_thi {
	color						: #989fe0;
}
.title_for {
	color						: #61d3cd;
}
/*料金*/
.system_price {
	font-family					: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size					: 16px;
	font-size					: 1.6rem;
	font-weight					: 300;
	letter-spacing				: 2px;
	margin-top					: 15px;
	margin-bottom				: 10px;
	padding-top					: 0;
	padding-bottom				: 0;
	padding-left				: 0;
}
.system_price .small {
	font-size					: 11px;
	font-size					: 1.1rem;
}
p.system_text {
	font-size					: 14px;
	font-size					: 1.4rem;
	margin-bottom				: 20px;
	padding-right				: 0;
	padding-left				: 0;
}
.reservation_pc_btn {
	display						: none;
}
.reservation_sp_btn {
	display						: block;
	font-size					: 14px;
	font-size					: 1.4rem;
	padding-left				: 0;
	padding-right				: 0;
}
.reservation {
	position					: relative;
	display						: inline-block;
	width						: 100%;
	height						: 54px;
	line-height					: 54px;
	color						: #FFF;
	text-align					: center;
	text-decoration				: none;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	overflow					: hidden;
	z-index						: 0;
}
.reservation:hover {
	color						: #fff;
}
.reservation::after {
	position					: absolute;
	top							: 20px;
	right						: 10px;
	background					: url("../images/svg/view/arrow.svg") no-repeat right center / 12px 12px;
	width						: 12px;
	height						: 12px;
	content						: '';
	z-index						: 2;
}
.reservation::before {
	position					: absolute;
	top							: 0;
	left						: 0;
	z-index						: -1;
	content						: '';
	width						: 120%;
	height						: 100%;
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(0, 1);
	transition					: transform .3s;
}
.reservation:hover::before {
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(1, 1);
}
.btn_color_one {
    background					: #525263
}
.btn_color_one::before {
	background					: #727288;
}
.btn_color_two {
    background					: #ff9a9e
}
.btn_color_two::before {
	background					: #fda4a7
}
.btn_color_thi {
	background					: #989fe0
}
.btn_color_thi::before {
	background					: #abb2ec;
}
.btn_color_for {
	background					: #61d3cd;
}
.btn_color_for::before {
	background					: #76ddd8;
}


/*---------------------------------------
	005: Credit Card Block
---------------------------------------*/
#credit_block {
	background					: #FFF;
	box-shadow					: 0 1px 2px rgba(20,20,20,0.2);
	padding-top					: 40px;
	padding-bottom				: 50px;
	text-align					: center;
}
h2#credit_title {
	font-family					: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size					: 22px;
	font-size					: 2.2rem;
	letter-spacing				: 1px;
	margin-top					: 0;
	margin-bottom				: 3px;
}
p#credit_sub_title {
	font-size					: 13px;
	font-size					: 1.3rem;
	margin-bottom				: 15px;
}
p#credit_text {
	font-size					: 16px;
	font-size					: 1.6rem;
	color						: #666;
}
#card_img {
	text-align					: center;
	margin-bottom				: 30px;
}
#card_img img {
	max-width					: 300px;
	width						: 100%;
	height						: auto;
}
#card_link {
	padding						: 0;
}
.link_btn {
	display						: inline-block;
	position					: relative;
	font-size					: 16px;
	font-size					: 1.6rem;
	text-align					: center;
	text-decoration				: none;
	color						: #FFF;
    background					: #525263;
	width						: 100%;
	height						: 60px;
	line-height					: 60px;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	overflow					: hidden;
	z-index						: 0;
}
.link_btn:hover {
	color						: #fff;
}
.link_btn::after {
	position					: absolute;
	top							: 24px;
	right						: 10px;
	background					: url("../images/svg/view/arrow.svg") no-repeat right center / 12px 12px;
	width						: 12px;
	height						: 12px;
	content						: '';
	z-index						: 2;
}
.link_btn::before {
	position					: absolute;
	top							: 0;
	left						: 0;
	width						: 120%;
	height						: 100%;
	background					: #727288;
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(0, 1);
	transition					: transform .3s;
	content						: '';
	z-index						: -1;
}
.link_btn:hover::before {
	transform-origin			: left top;
	transform					: skewX(-30deg) scale(1, 1);
}




@media only screen and (min-width: 768px) {
/*---------------------------------------
	001: Page Block
---------------------------------------*/
#section1 {
	height						: 100vh;
	height						: 500px;
}
#section1:before {
	content						: "";
	position					: fixed;
	top							: 0;
	display						: block;
	z-index						: -1;
	width						: 100%;
	height						: 100%;
}


/*---------------------------------------
	002: Page Title Block
---------------------------------------*/
#page_title_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	position					: relative;
}
#page_title_box {
	position					: absolute;
	top							: 220px;
	left						: 10px;
	right						: 0;
}
h1#main_title {
	display						: block;
	font-family					: 'Frank Ruhl Libre', serif;
	font-size					: 58px;
	font-size					: 5.8rem;
	color						: #FFF;
	font-weight					: 300;
    letter-spacing				: 2px;
	margin-bottom				: 20px;
}
h1#main_title::before {
	position					: absolute;
	top							: 73px;
	left						: 0;
	width						: 70px;
	height						: 2px;
    background					: #FFF;
	content						: "";
}
p#sub_title {
	font-size					: 13px;
	font-size					: 1.3rem;
	color						: #EEE;
}


/*---------------------------------------
	003: Page Content Block
---------------------------------------*/
#section2 {
	position						: relative;
	background-image				: url(../images/bg/bg_page_top.png), url(../images/bg/bg_page_bottom.png), url(../images/bg/section_one.jpg);
	background-position				: right top, left bottom, center top;
	background-repeat				: no-repeat, no-repeat, repeat;
	background-size					: 600px, 600px, auto;
	padding-top						: 60px;
	padding-bottom					: 60px;
}


/*---------------------------------------
	004: System Block
---------------------------------------*/
.reservation_sp_btn {
	display						: block;
	font-size					: 12px;
	font-size					: 1.2rem;
	padding-left				: 0;
	padding-right				: 0;
}
}




@media only screen and (max-width: 991px) {
/*---------------------------------------
	004: System Block
---------------------------------------*/
h2.system_block_title {
	position					: relative;
	font-family					: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size					: 14px;
	font-size					: 1.4rem;
	font-weight					: bold;
	letter-spacing				: 2px;
	color						: #525263;
	border-top					: 1px solid #ccc;
	border-bottom				: 1px solid #ccc;
	margin-top					: 25px;
	margin-bottom				: 20px;
	padding-top					: 35px;
	padding-bottom				: 10px;
}
h2.system_block_title::after {
	display						: inline-block;
	position					: absolute;
	top							: 15px;
	left						: 10px;
	font-size					: 12px;
	font-size					: 1.2rem;
	font-weight					: bold;
	color						: #525263;
	letter-spacing				: 3px;
	content						: attr(data-title);
}
}





@media only screen and (min-width: 992px) {
/*---------------------------------------
	004: System Block
---------------------------------------*/
h2.system_block_title {
	position					: relative;
	font-family					: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size					: 14px;
	font-size					: 1.4rem;
	font-weight					: 500;
	letter-spacing				: 2px;
	color						: #525263;
	border-top					: 1px solid #ccc;
	border-bottom				: 1px solid #ccc;
	margin-top					: 0;
	margin-bottom				: 0;
	padding-top					: 20px;
	padding-bottom				: 20px;
	padding-left				: 0;
}
h2.system_block_title::after {
	display						: inline-block;
	position					: absolute;
	top							: 20px;
	right						: 0;
	font-size					: 13px;
	font-size					: 1.3rem;
	font-weight					: 300;
	color						: #525263;
	letter-spacing				: 3px;
	content						: attr(data-title);
}
.system_block {
	display						: -ms-flexbox;
	display						: flex;
	-ms-flex-wrap				: wrap;
	flex-wrap					: wrap;
	padding-left				: 0;
	padding-right				: 0;
	margin-bottom				: 100px;
}
.system_box {
	padding						: 25px 10px;
	padding-bottom				: 20px;
	border-bottom				: 1px dotted #d7d7d7;
}
.system_img {
	padding						: 0 10px;
}
.reservation_sp_btn {
	display						: none;
}
.reservation_pc_btn {
	display						: block;
	font-size					: 14px;
	font-size					: 1.4rem;
	padding-left				: 0;
	padding-right				: 0;
}
.system_meta {
	font-size					: 12px;
	font-size					: 1.2rem;
	text-align					: center;
	padding-top					: 6px;
	padding-bottom				: 0;
	height						: 44px;
	overflow					: hidden;
}
h3.system_title {
	font-size					: 16px;
	font-size					: 1.6rem;
	font-weight					: 300;
	letter-spacing				: 1px;
	margin-top					: 10px;
	margin-bottom				: 0;
	padding-top					: 0;
	padding-bottom				: 0;
}
/*料金*/
.system_price {
	font-family					: 'Noto Serif JP', "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size					: 18px;
	font-size					: 1.8rem;
	font-weight					: 300;
	letter-spacing				: 1px;
	margin-top					: 10px;
	margin-bottom				: 0;
	padding-top					: 0;
	padding-bottom				: 0;
	padding-left				: 0;
}
.system_price .small {
	font-size					: 11px;
	font-size					: 1.1rem;
	letter-spacing				: 1px;
}
p.system_text {
	font-size					: 15px;
	font-size					: 1.5rem;
	margin-top					: 15px;
	margin-bottom				: 0;
	padding-right				: 0;
	padding-left				: 0;
}
.reservation {
	position					: relative;
	display						: inline-block;
	width						: 100%;
	height						: 44px;
	line-height					: 44px;
	font-size					: 12px;
	font-size					: 1.2rem;
	color						: #FFF;
	text-align					: center;
	text-decoration				: none;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	overflow					: hidden;
	z-index						: 0;
}
.reservation::after {
	position					: absolute;
	top							: 18px;
	right						: 5px;
	background					: url("../images/svg/view/arrow.svg") no-repeat right center / 10px 10px;
	width						: 10px;
	height						: 10px;
	content						: '';
	z-index						: 2;
}
}




@media only screen and (min-width: 1200px) {
/*---------------------------------------
	004: System Block
---------------------------------------*/
.reservation {
	position					: relative;
	display						: inline-block;
	width						: 100%;
	height						: 44px;
	line-height					: 44px;
	font-size					: 14px;
	font-size					: 1.4rem;
	color						: #FFF;
	text-align					: center;
	text-decoration				: none;
	-moz-transition				: all 0.6s;
	-o-transition				: all 0.6s;
	-webkit-transition			: all 0.6s;
	transition					: all 0.6s;
	overflow					: hidden;
	z-index						: 0;
}
.reservation::after {
	position					: absolute;
	top							: 18px;
	right						: 10px;
	background					: url("../images/svg/view/arrow.svg") no-repeat right center / 10px 10px;
	width						: 10px;
	height						: 10px;
	content						: '';
	z-index						: 2;
}
}