@charset "utf-8";
/* CSS Document */

/*
位置
サイズ
余白
カラー・装飾
書体
*/

/** 共通　要素 ここから **/


*{margin: 0; padding: 0;}

body{
	margin: 0; padding: 0;
	min-height: 100vh;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
}

html {
	height: -webkit-fill-available;
	scroll-behavior: smooth;}

a{color: rgba(60,57,57,1.00); text-decoration: none;
}

/** 共通　要素 ここまで **/





/** 共通 ヘッダー ここから **/

header {
	position: absolute;
	display: none;/*ファーストビューを非表示にするために記述*/
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	padding: 15px 30px 15px 30px;
	box-sizing: border-box;
	background: linear-gradient(0deg, rgba(60,57,57,0.90), 70%, rgba(0,0,0,0.50));
}

.logo {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 2.5rem;
	font-weight: 700;
}

.logo img{ height: 30px; object-fit: cover;}

/** 共通 ヘッダー スクロール向け↓ **/

#header.scroll {
	display: block;/*スクロール後に表示にするために記述 headerのdisplayを削除とあわせる*/
	position: fixed;
	background: rgba(60,57,57,0.90);
	animation-name: anime;
	animation-duration: 0.3s;
}

#header a{
	text-decoration: none;
	margin: 0;
}

#header.scroll a{
	text-decoration: none;
	margin: 0;
}

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

/** 共通 ヘッダー ナビ向け↓ **/

header nav ul {
	display: flex;
	font-size: 1.9rem;
	font-weight: 500;
	list-style: none;
	justify-content: flex-end;
}

header nav li {
	margin: 0px 0 0px 40px;
}

header nav li:first-child {
	margin-left: 0;
}

header nav li a {
	display: block;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	color: rgba(255,255,255,1.00);
}

header nav li a:hover {
	transition: all .3s;
	color: rgba(155,155,155,1.00);
}

#header .sp{display: none;}

/** 共通 ヘッダー ここまで **/




/** 共通 フッター　ここから **/

footer{
	width: 100%;
	min-height: 51px;
	padding: 15px 20px 10px;
	background-color: rgba(60,57,57,0.95);
	text-align: center;
	color: #fff;
	box-sizing: border-box;
}
footer p{
	line-height: 1;
	font-size: 1.6rem;
}
footer p:first-child{
	float: left;
	
}
footer p:nth-child(2){
	float: right;
}

footer p a{
	color: rgba(255,255,255,1.00)
}

.sns_box{
	display: inherit;
	height: 41px;	
	margin: 0 auto;
}

.sns_box img{
	width: 41px;
	margin-right: 15px;
}
.sns_box img:last-child{}

.footer-message{margin-bottom: 5rem;}


/** 共通 フッター　ここまで **/





/** 共通　コンテンツ　ここから **/

#all-wrapper{
	width: 100%;
}

article{
	width: 100%;
	margin-bottom: 10rem;
}

.conteiner{
	margin: auto;
}
/** containder向け↓ **/
	.small{ width: 700px;}
	.default{ width: 900px;}
	.wide{ width: 1200px;}
	.full{ width: 100%;}

.content-box{ 
	width: 100%; overflow: hidden;
}

.one-column{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5rem;
}


/** FLEX関連↓ **/
	.add-flex{
		display: flex;
		margin-bottom: 5rem;
		align-items: flex-start;
		justify-content: space-between;
}

/**　add-flexにつけるスタイル↓　**/

	.static-layout{}
	.static-layout .image-box{ overflow: hidden;}
	.static-layout .image-box img{ width: 100%;  height: 300px; object-fit: cover;}

	.layout_side-by-side .flex-box{margin-right: 2.5rem;}
	.layout_side-by-side .flex-box:last-child{margin-right: 0rem;}

	.justify_space-between{ flex-wrap: wrap; justify-content: space-between; gap: 5rem 0;}
	.justify_space-between .flex-box{ width: 100%;}
	.justify_space-between .image-box{ width: 426px; margin-bottom: 2rem; overflow: hidden;}
	.justify_space-between .image-box img{ width: 100%; height: 240px; object-fit: cover;}

	.flex_align_center{align-items: center;}
	.flex_align_stretch{align-items: stretch;}

	.flex-box_vertical-border{}

	.layout_vertical{}
	.layout_vertical .flex-box{ padding: 0 2%;}
	.layout_vertical .flex-box:first-child{ margin: 0 0 0 2%;}
	.layout_vertical .flex-box:last-child{ margin: 0 2% 0 0;}

	.layout_beside{}

.flex-box{ flex-basis: 47.5%;}
.flex-box img{ width: 100%;}

.vertical-border > .flex-box{
	border-left: 1px solid rgba(60,57,57,0.95);
}
.vertical-border > .flex-box:last-child{
	border-right: 1px solid rgba(60,57,57,0.95);
}

/** 共通 基本的なDIV設定　ここまで **/




/** 共通 テーブル ここから **/

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
	font-size: 1.9rem;
}
th {
	padding: 10px;
	background: rgba(240,240,240,1.00);
	border: solid 1px rgba(60,57,57,0.95);
	font-size: 1.3rem;

}
td {
	padding: 10px;
	border: solid 1px rgba(60,57,57,0.95);
}
table h4{ font-weight: 500; margin-bottom: 0rem;}
table p{ font-size: 1.5rem;}
td li{ font-size: 1.7rem; list-style: none; line-height: 1.5;}
.detail{ font-size: 1.5rem;}

/** 共通 テーブル ここまで **/

.key_visual{
	position: relative;
	width: 100%;
	height: calc(100vh - 0px);
	background-image: url("../img/keyvisual-stone.jpg");
	background-position: center;
	background-size: cover;
}

.key_visual img{ 
	width: 100%;
	height: calc(100vh - 0px);
	object-fit: cover;
}

/** 共通 キービジュアルにかぶせるエリア↓ **/
	.promotion-box{
		position: absolute;
		top: 50%;
		right: 10%;
 	  	transform: translate(0%, -50%);	
		text-align: center;
}

	.promotion-box img{ 
		width: 420px;
		margin-bottom: 2.5rem;
		height: auto;
		object-fit: cover;
}

/** 共通 キービジュアル 矢印用 **/

	.next_include{
		position: relative;
}

	.next_arrow{
		position: absolute;
		top: -50px;
		left: 50%;
		width: 100px;
		height: 50px;
		/* エリアを半円にする場合は↓を生かす */
		/*border-radius: 50% 50% 0 0/100% 100% 0 0;*/
		transform: translate(-50%, 0);	
}

/** 共通 キービジュアル ここまで **/




/** 共通 調整用 ここから **/

.margin-auto{ margin: auto;}

.margin-b0{	margin-bottom: 0rem}
.margin-b1{	margin-bottom: 1rem}
.margin-b3{	margin-bottom: 3rem}
.margin-b5{	margin-bottom: 5rem}
.margin-b10{ margin-bottom: 10rem}
.margin-b15{ margin-bottom: 15rem}

.margin-t0{	margin-top: 0rem}
.margin-t1{	margin-top: 1rem}
.margin-t3{	margin-top: 3rem}
.margin-t5{	margin-top: 5rem}
.margin-t10{ margin-top: 10rem}
.margin-t15{ margin-top: 15rem}

.margin-tb0{ margin: 0rem 0}
.margin-tb1{ margin: 1rem 0}
.margin-tb3{ margin: 3rem 0}
.margin-tb5{ margin: 5rem 0}
.margin-tb10{ margin: 10rem 0}
.margin-tb15{ margin: 15rem 0}

.width-100per{ width: 100%}
.width-80per{ width: 80%}
.width-60per{ width: 60%}
.width-50per{ width: 50%}
.width-40per{ width: 40%}
.width-20per{ width: 20%}

.inframe{	}

.border-all{
	padding: 0 5rem 5rem 5rem;
	border: 1px solid rgba(60,57,57,0.95); }

/** 共通 調整用 ここまで **/




@media screen and (max-width: 768px) {
	
	#all-wrapper{
		width: 100%;
}
	article{margin-bottom: 2.5rem;}
	.conteiner{
		width: 92%;
		padding: 0 4%;
}
	.default{ width: 92%;}
	.small{ width: 92%;}
	.wide{ width: 92%;}
	.full{ width: 92%;}
	
	.one-column{ width: 100%; margin-bottom: 2.5rem;}

	.add-flex{display: block; margin-bottom: 4rem;}
	.flex-box{ margin-bottom: 1rem;}
	
	.layout_vertical{}
	.layout_vertical .flex-box{ padding: 0 2%;}
	.layout_vertical .flex-box:first-child{ margin: 0 0 1rem 0;}
	.layout_vertical .flex-box:last-child{ margin: 0;}
	
	.vertical-border > .flex-box{ border-left: 1px solid rgba(60,57,57,0.95); border-right: 1px solid rgba(60,57,57,0.95);}
	.vertical-border > .flex-box:last-child{ border-right: 1px solid rgba(60,57,57,0.95);}
	
	.justify_space-between .flex-box{ margin-bottom: 4rem;}
	.justify_space-between .image-box{ width: 100%; margin-bottom: 2rem; overflow: hidden;}
	.justify_space-between .image-box img{ width: 100%; height: auto; object-fit: scale-down;}
	
	.promotion-box{
	width: 92%;
	top: 50%;
	right: 4%;
    transform: translate(0%, -50%);	
	text-align: center;
}
	.promotion-box img{ 
		width: 92%;
		margin-bottom: 2.5rem;
}
	.next_include{
	position: relative;
}
	.next_arrow{
	top: -50px;
	left: 50%;
	width: 100px;
	height: 50px;
	/* エリアを半円にする場合は↓を生かす */
	/*border-radius: 50% 50% 0 0/100% 100% 0 0;*/
	transform: translate(-50%, -50%);	
}
	table {
	margin-top: 5rem;
	font-size: 1.2rem;
}
	th {
	padding: 10px 5px;
	font-size: 1.0rem;
}
	td {
	padding: 5px;
}
	table h5{font-size: 1.2rem;}
	table p{ font-size: 1.2rem;}
	td li{ font-size: 1.2rem;}
	.detail{ font-size: 1.0rem;}


	.margin-b0{	margin-bottom: 0rem}
	.margin-b1{	margin-bottom: 1rem}
	.margin-b3{	margin-bottom: 1.5rem}
	.margin-b5{	margin-bottom: 2.5rem}
	.margin-b10{ margin-bottom: 5rem}
	.margin-b15{ margin-bottom: 7rem}

	.margin-t0{	margin-top: 0rem}
	.margin-t1{	margin-top: 1rem}
	.margin-t3{	margin-top: 1.5rem}
	.margin-t5{	margin-top: 2.5rem}
	.margin-t10{ margin-top: 5rem}
	.margin-t15{ margin-top: 7rem}

	.margin-tb0{ margin: 0rem 0}
	.margin-tb1{ margin: 1rem 0}
	.margin-tb3{ margin: 1.5rem 0}
	.margin-tb5{ margin: 2.5rem 0}
	.margin-tb10{ margin: 5rem 0}
	.margin-tb15{ margin: 7rem 0}

	.width-100per{ width: 100%}
	.width-80per{ width: 80%}
	.width-60per{ width: 60%}
	.width-50per{ width: 50%}
	.width-40per{ width: 40%}
	.width-20per{ width: 20%}

	.bunners{width: 100%}
	
	.border-all{
	padding: 0 1rem 5rem 1rem;
	border: 1px solid rgba(60,57,57,0.95); }


	/** 共通　ヘッダー ハンバーガー向け **/

	.pc { display: none;}
	header { padding: 15px 15px 10px 20px;	}
	header .inner p{ font-size: 2.1rem;}
	header nav li {	margin: 0 0 0 0;}
	header nav ul {	padding-top: 0;}
	header nav li a{ padding: 1.5rem 0;}
	header nav li:first-child {	margin-left: 0;	}
	.logo img{ height: 25px; object-fit: cover;}
	#hamburger {
	background-color: transparent;
	position: relative;
	cursor: pointer;
	margin: 0 0 0 auto;
	height: 25px;
	width: 60px;
	}
	.icon span {
	position: absolute;
	right: 0;
	width: 30px;
	height: 2px;
	background-color: rgba(255,255,255,1.00); /** ヘッダー ハンバーガー罫線色 **/
	border-radius: 2px;
	transition: ease 0.75s;
	}
	#header.scroll .icon span {background-color: #fff;}
	.icon span:nth-of-type(1) {
 	top: 3px;
	}
	.icon span:nth-of-type(2) {
	top: 10px;
	}
	.icon span:nth-of-type(3) {
	bottom: 6px;
	}
	.close span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 16px;
	}
	.close span:nth-of-type(2) {
	opacity: 0;
	}
	.close span:nth-of-type(3) {
 	transform: rotate(-45deg);
	top: 16px;
	}
	.sp {
	top: 42px;
	left: 0px;
 	position: absolute;
	margin-top: 1rem;
 	z-index: 10;
	width: 100%;
	background-color: rgba(255,255,255,0.95);
	}
	#header.scroll ul a {
	background-color: rgba(60,57,57,0.95);
	}
	ul {
	flex-direction: column;
	}
	#header ul a {
	text-align: center; 
	border-top: solid 0.5px  rgba(60,57,57,0.8);
	}
	#header.scroll ul a {
	border-top: solid 0.5px rgba(255, 255, 255, 0.8);
	}
}


@media screen and (min-width: 768px){   
  .for-pc { display:inline; }
  .for-sp { display:none; }
}
@media screen and (max-width: 768px){   
  .for-pc { display:none; }
  .for-sp { display:inline; }
}

@media screen and (min-width: 768px){
.none-br-pc {display: none; }
.br_for-sp {display: none; }
}

@media screen and (max-width: 1000px){
.none-br-sp {display: none; }
.br_for-sp {display: none; }
	footer{min-height:80px;}
	footer p{
	float: inherit;
	margin-block:5px;
	text-align: center;
	width: 100%}
}