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

.container {
	padding-bottom: 0;
	text-align: center;
}
#footer {
	border-top: none;
}
/* 中身======================================================================================================== */
#main{
	width: 100%;
	height: 88vh;
	background-image: url(../images/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
}
#main .scroll a{
	display: block;
	text-decoration: none;
	width: 15vw;
	height: 15vw;
	border-radius: 15vw;
	border: solid 1px #FFF;
	font-size: 10px;
	text-align: center;
	color: #FFF;
	position: absolute;
	bottom: 10vw;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#main .scroll a span{
	display: block;
	padding: 10px 0 0;
}
#main .scroll a span::after{
	content: "";
	display: block;
	margin: 0 auto;
	vertical-align: middle;
	width: 10px;
	height: 10px;
	border-bottom: 1px solid #FFF;
	border-right: 1px solid #FFF;
	transform: rotate(45deg);
}

#copy{
	text-align: center;
	padding: 8vw 4vw;
}
#copy .flex{
	display: flex;
	justify-content: center;
	position: relative;
	margin-bottom: 4vw;
}
#copy .flex::after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1vw;
	height: 23vw;
	border-right: 1px solid #111;
	transform: rotate(15deg);
	padding-left: 9vw;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#copy h2{
	font-size: 3.6vw;
	line-height: 1.3;
}
#copy h2:first-child{
	margin-right: 5vw;
}
#copy h2 span{
	font-size: 5vw;
	display: block;
}
#copy h2 span:first-letter{
	font-size: 8vw;
}
#copy h2:nth-child(1) span:first-letter{ color: #de4c4c; }
#copy h2:nth-child(2) span:first-letter{ color: #3c624b; }
#copy p{
	text-align: left;
}

.dan#dan01{
	background-image: url(../images/contents_bg01.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.dan#dan02{
	background-image: url(../images/contents_bg02.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.dan .article{
	width: 50%;
}
.dan .article#merit{
	margin: 0 0 0 auto;
}
.dan .article a{
	display: block;
	text-decoration: none;
	color: #FFF;
	padding: 4vw;
}
.dan#dan01 .article a{ background-color: rgba(28,24,21,0.8); }
.dan#dan02 .article a{ background-color: rgba(18,29,50,0.8); }
.dan .article h3{
	margin-bottom: 2vw;
}
.dan .article h3 span{
	font-size: 6vw;
	line-height: 1.4;
	display: block;
}
.dan .article p{
	font-size: 10px;
	text-align: left;
}
.dan .article .more{
	font-size: 18px;
	display: inline-block;
	border-bottom: solid 1px #FFF;
}

.dan#dan03{
}
.dan#dan03 .article{
	width: 100%;
}
.dan#dan03 .article#service a{ background-color: #6F2627; }
.dan#dan03 .article#price a{ background-color: #1E3125; }
.dan#dan03 .article#contact a{ background-color: #4E4330; }
.dan#dan03 .article h3{
	margin-bottom: 0vw;
}
.dan#dan03 .article#instagram .title{
	position: relative;
}
.dan#dan03 .article#instagram .icon{
	width: 70px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
}
.dan#dan03 .article#instagram h3{
	display: inline-block;
	vertical-align: middle;
	font-size: 4vw;
	color: #bb31a5;
	margin-bottom: 0;
}
.dan#dan03 .article#instagram .more_inst{
	width: 50px;
	position: absolute;
	right: 0;
	bottom: 0;
}


/* PCのみ======================================================================================================== */
@media print and (min-width: 751px), screen and (min-width: 751px){
#main{
	height: 92vh;
}
#main .scroll a{
	width: 60px;
	height: 60px;
	border-radius: 60px;
	font-size: 10px;
	bottom: 60px;
}
#main .scroll a:hover{
	background-color: #FFF;
	color: #634A3C;
	bottom: 50px;
}
#main .scroll a:hover span::after{
	border-color: #634A3C;
}

#copy{
	padding: 80px 0;
}
#copy .flex{
	margin-bottom: 80px;
}
#copy .flex::after{
	width: 1px;
	height: 200px;
	padding-left: 0;
}
#copy h2{
	font-size: 30px;
	line-height: 1.8;
	width: 50%;
}
#copy h2:first-child{
	margin-right: 0px;
}
#copy h2 span{
	font-size: 60px;
	line-height: 1.1;
}
#copy h2 span:first-letter{
	font-size: 80px;
	line-height: 1.1;
}
#copy p{
	text-align: center;
}


.dan{
	display: flex;
	justify-content: space-between;
}
.dan#dan02{
	justify-content: center;
}
.dan .article{
	width: 33.3%;
}
.dan .article a{
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.dan#dan01 .article a,
.dan#dan02 .article a{
	height: 450px;
}
.dan#dan01 .article a:hover{ background-color: rgba(28,24,21,1); }
.dan#dan02 .article a:hover{ background-color: rgba(18,29,50,1); }
.dan .article h3{
	font-size: 20px;
	margin-bottom: 40px;
}
.dan .article h3 span{
	font-size: 40px;
}
.dan .article p{
	font-size: 14px;
	text-align: center;
	margin-bottom: 40px;
}
.dan#dan03{
	display: flex;
}
.dan#dan03 .article{
}
.dan#dan03 .article a{
	height: auto;
}
.dan#dan03 .article#instagram{
	width: 66.6%;
	position: relative;
}
.dan#dan03 .article#instagram .title{
	position: absolute;
	top: 33.3%;
	left: 25%;
	width: 25%;
	height: 33.3%;
	z-index: 1000;
}
.dan#dan03 .article#instagram .title a{
	background-color: #FFF;
	width: 100%;
	height: 100%;
}
.dan#dan03 .article#instagram .title a:hover{
	background-color: #FFE7F8;
}
.dan#dan03 .article#instagram h3{
	font-size: 20px;
}
.dan#dan03 .article#instagram .icon{
	width: auto;
}
.dan#dan03 .article#instagram .more_inst{
	width: 60px;
}
.dan#dan03 .article#instagram .more_inst img{
	width: 100%;
}
.dan#dan03 .article#instagram ul#instagram_wrap{
	display: flex;
	flex-wrap: wrap;
}
.dan#dan03 .article#instagram ul#instagram_wrap li{
	width: 25%;
	height: auto;
	position: relative;
}
/* .dan#dan03 .article#instagram ul#instagram_wrap li::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.dan#dan03 .article#instagram ul#instagram_wrap li a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
}
.dan#dan03 .article#instagram ul#instagram_wrap li a img{
	max-width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
} */
.dan#dan03 .article#instagram ul#instagram_wrap li a{
display: block;
}
.dan#dan03 .article#instagram ul#instagram_wrap li a img,
.dan#dan03 .article#instagram ul#instagram_wrap li a video{
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}

.dan#dan03 #mini_dan{
	width: 33.4%;
	display: flex;
	flex-direction: column;
}
.dan#dan03 #mini_dan .article{
	height: 33.3%;
}
_::-webkit-full-page-media, _:future, :root .dan#dan03 #mini_dan .article{
	/* 旧safari用応急措置 */
	height: 16.5vw;
}

.dan#dan03 #mini_dan .article a{
	height: 100%;
}
.dan#dan03 .article#service a:hover{ background-color: #580F10; }
.dan#dan03 .article#price a:hover{ background-color: #102417; }
.dan#dan03 .article#contact a:hover{ background-color: #312715; }



}