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

庭園の歩き方 富士展望の丘

*********************************/
#aru_fuj{
	margin-bottom: 5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background-color: #fdede4;
}
#arufuj_image {
	margin-bottom: 3rem;
	height: 240px;
	background-image: url("../img/15_aru/aru_fuji_mage.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
/*見出しPOINT*/
#aru_fuj h3{
	padding-bottom: .5rem;
    margin-bottom: .5rem;
	display: flex;
    align-items: center;
    justify-content: center;
}
#aru_fuj .aru_h3{
	display: inline-block;
	margin-right: 1rem;
	padding: 0.25em 0 0.25em 0.8em; /* 右を少し広め */
	line-height: 1;
	color:#fff;
	font-size: 9pt;
	position: relative;
	background:#382e1c;
	border: 1px solid #382e1c;
}
#aru_fuj .aru_h3::after{
	content:"";
	position:absolute;
	top:50%;
	right:-13px;
	transform: translateY(-50%);
	border: 10px solid #382e1c;
	border-right-width: 3px;
	border-right-color: transparent;
}

#aru_fuj-0,
#aru_fuj-1{
	width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 1rem;
}

/*富士展望の丘 ふじさんデッキ説明*/
#aru_fuj-0 > div:nth-child(1) {
	text-align: center;
	padding-bottom: .5rem;
    margin-bottom: .5rem;
}
#aru_fuj-0 > div:nth-child(1)::after {
    background: radial-gradient(circle farthest-side, #7e7764, #7e7764 60%, transparent 60%, transparent);
    background-size: 10px;
    content: '';
    display: block;
    height: 10px;
    width: 100%;
}
#aru_fuj-0 > div:nth-child(1) img{
	width: 200px;
}
.aru_fuj-paid{
	margin-left: auto;
	margin-right: auto;
	padding: 5px 15px;
	width: 180px;
	color: #fff;
	background-color: #c69c6d;
	text-align: center;
}
#arufuj_slide{
	margin-bottom: 5rem;
	width: 100%;
	display: block;
}

/*ふじさんデッキからの眺望*/
#aru_fuj-1 > div:nth-child(1){
	margin-bottom: 1rem;
}
#aru_fuj-1 > div:nth-child(2){
	margin-bottom: 5rem;
}
.slide-fuj2 img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.slide-fuj2-1 {
  margin-top: 0.5rem;
}
.slide-fuj2-1 img {
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.5;
}
.slide-fuj2-1 .slick-current img {
  opacity: 1;
  border: 2px solid #333;
}

/*撮影スポット*/
#aru_fuj-2{
	margin-bottom: 5rem;
}
#aru_fuj-2-1{
	margin-bottom: 3rem;
	position: relative;
}
#aru_illust_02,
#aru_illust_03{
	margin-bottom: 5rem;
	width: 95px;
	position: absolute;
}
#aru_illust_02{
	left: calc(50% - 170px);
    top: calc(50% - 80px);
}
#aru_illust_03{
	right: calc(50% - 170px);
    top: calc(50% - 80px);
}

/*ふじパノラマカフェ*/
#aru_fuj-3{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 1rem;
}
#aru_fuj-3 > div:nth-of-type(1) > div:nth-of-type(1){
	width: 280px;
	margin: 0 auto 1rem auto;
	
}
#aru_fuj-3 > div:nth-of-type(2) > div:nth-of-type(1) {
}
#aru_fuj-3 > div:nth-of-type(2) > div:nth-of-type(2) {
	display: flex;
	position: relative;
}
#aru_fuj-3> div:nth-of-type(2) > div:nth-of-type(2) > div {
	position: relative;
}
#aru_fuj-3 > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(1) {
	width: 35%;
	margin-right: 5%;
	top: -50px;
	left: 10px;
}
#aru_fuj-3 > div:nth-of-type(2) > div:nth-of-type(2) > div:nth-of-type(2) {
	width: 60%;
	top: -20px;
}
@media only screen and (min-width:600px) {
	/*********************************

	庭園の歩き方(600px)

	*********************************/
	#arufuj_image {
		height: 320px;
	}
	/* スライドショー */
	#aru_illust_02, #aru_illust_03 {
		width: 120px;
	}
	#aru_illust_02 {
		left: calc(50% - 240px);
	}
	#aru_illust_03 {
		right: calc(50% - 240px);
	}
}

@media only screen and (min-width:768px) {
	/*********************************

	庭園の歩き方(768px)

	*********************************/
	#aru_fuj{
		margin-bottom: 7rem;
	}
	#arufuj_image {
		height: 360px;
	}
	
	/*富士展望の丘 ふじさんデッキ説明*/
	#aru_fuj-0{
		width: 50%;
        max-width: 564px;
        margin-bottom: 1rem;
	}
	
	/*ふじさんデッキからの眺望*/
	#aru_fuj-1{
		display: flex;
		flex-direction: row-reverse;
	}
	#aru_fuj-1 > div:nth-child(1){
		width: 47%;
	}
	#aru_fuj-1 > div:nth-child(2){
		width: 50%;
        margin-right: 3%;
	}
	
	/*スライドショー*/
	#aru_illust_02 {
        left: calc(50% - 280px);
    }
	#aru_illust_03 {
        right: calc(50% - 280px);
    }
	
	/*ふじパノラマカフェ*/
	#aru_fuj-3{
		margin: 0 auto;
		display: flex;
		flex-direction: row-reverse;
	}
	#aru_fuj-3 > div:nth-of-type(2){
		width: 50%;
		margin-right: 3%;
	}
	#aru_fuj-3 > div:nth-of-type(1){
		width: 47%;
	}
}

@media only screen and (min-width:900px) {
	#arufuj_image {
		height: 420px;
	}
}

@media only screen and (min-width:1024px) {
	/*********************************

	庭園の歩き方(1024px)

	*********************************/
	#arufuj_image {
		height: 480px;
		background-attachment: fixed;
	}
	/*ふじパノラマカフェ*/
	#aru_fuj-3{
		align-items: baseline;
	}
	#aru_fuj-3 > div:nth-of-type(1) > div:nth-of-type(1) {
		width: 320px;
		margin: 0 auto 1rem auto;
	}
}

@media only screen and (min-width:1280px) {
	/*********************************

	庭園の歩き方(1280px)

	*********************************/
	#arufuj_image {
		height: 600px;
	}
	/*ふじパノラマカフェ*/
	#aru_fuj-3 > div:nth-of-type(1) > div:nth-of-type(1) {
		width: 360px;
		margin: 0 auto 1rem auto;
	}
}
@media only screen and (min-width:1440px) {
	/*********************************

	庭園の歩き方(1440px)

	*********************************/
	
	/*スライドショー*/
	#aru_illust_02,
	#aru_illust_03{
		width: 130px;
	}
	#aru_illust_02{
		left: calc(48% - 255px);
		top: calc(50% - 80px);
	}
	#aru_illust_03{
		right: calc(48% - 255px);
		top: calc(50% - 80px);
	}
}