/***********************************************************************************************************************

design_2nd.css

***********************************************************************************************************************/
.design #contents{
	overflow-x: hidden; /* フォールバック */
	overflow-x: clip;   /* モダンブラウザ向け */
}

.design .hd_logo_wrap .logo .black{ display: none;}
.design .hd_logo_wrap .logo .white{ display: block;}


/* modal-video *********************************/
.modal-video-body{
  max-width: 1280px; /*1280px 1920px*/
}
.modal-video{
  background-color: rgba(0,0,0,0.8);
}
  

/*** imgViewer2用 **********************************/
.leaflet-container {
  background: #fff; /*#ddd*/
}




/*** sec **********************************/
.sec_facade{
	padding-top: 5%;
}
.sec_place{
	padding-top: 0;
}
.sec_center{
	padding-top: 15%;
}
.sec_common{
	padding-top: 15%;
}

@media screen and (max-width: 767px) {
.sec_facade{
	padding-top: 40px;
}
.sec_center{
	padding-top: 25%;
}
.sec_common{
	padding-top: 25%;
}
}




/*** h1〜  **********************************/
h1.h1_ttl{
	position: absolute;
	top: 14%;
	left: 9%;
	font-size: 1.5vw;
	color: #fff;
	letter-spacing: 0.1em;
	text-shadow: 0 0 10px #000;
}
h1.h1_ttl .en{
	display: block;
	font-family: 'Trajan Pro', sans-serif;
	/*font-family: "Lato", sans-serif;
	font-style: normal;
	font-weight: 100;*/
	font-size: 470%;
	letter-spacing: normal;
}

h2.h2_ttl{
	position: relative;
	font-size: 34px;
	font-size: clamp(22px, 3vw, 34px);
	text-align: center;
}
h2.h2_ttl .en{
	position: relative;
	display: block;
	font-family: 'Trajan Pro', sans-serif;
	/*font-family: "Lato", sans-serif;
	font-style: normal;
	font-weight: 100;*/
	font-size: 230%; /*250%*/
	color: #727171;
	margin-bottom: 0.1em;
}

.center_wrap h2.h2_ttl{
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
	width: 90%;
}
.center_wrap h2.h2_ttl .en{
	color: #fff;
	text-shadow: none;
}

h3.h3_place{
	/*font-size: 2.2vw;*/
	font-size: 30px;
	font-size: clamp(18px, 2vw, 30px);
	letter-spacing: 0.1em;
	color: #3e3a39;
	line-height: 1.6em;
	margin-bottom: 0.5em;
}

.h4_posi_wrap{
	position: relative;
}
.h4_posi_wrap::before,
.h4_posi_wrap::after{
	content: "";
	position: absolute;
	width: 1px;
	height: 70%;
	background-color: #555;
}
.h4_posi_wrap::before{
	top: 0;
	left: 0;
}
.h4_posi_wrap::after{
	bottom: 0;
	right: 0;
}

h4.h4_posi{
	font-size: 24px;
	font-size: clamp(16px, 2vw, 24px);
	color:#3e3a39;
	text-align: center;
	line-height: 1.6em;
	margin-top: 1.2em;
	padding: 0.4em 0;
}
h4.h4_posi::before,
h4.h4_posi::after{
	content: "";
	position: absolute;
	width: 5%;
	height: 1px;
	background-color: #555;
}
h4.h4_posi::before{
	top: 0;
	left: 0;
}
h4.h4_posi::after{
	bottom: 0;
	right: 0;
}

h4.h4_direction{
	font-size: 22px;
	font-size: clamp(16px, 1.8vw, 22px);
	color:#3e3a39;
	letter-spacing: 0.1em;
	line-height: 1.8em;
	margin-bottom: 0.8em;
}

h5.h5_daytime{
	position: absolute;
	top: 12%;
	left: 15%;
	z-index: 1;
	font-size: 1.8vw;
	color: #fff;
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
	letter-spacing: 0.2em;
	line-height: 2em;
}
h5.h5_sunset{
	position: absolute;
	top: 19%;
	right: 12%;
	z-index: 1;
	font-size: 1.8vw;
	color:#000;
	letter-spacing: 0.2em;
	line-height: 2em;
}

p.p_lead{
	text-align: center;
	line-height: 2.5em;
	margin: 1.8em 0 1em;
}

p.font_14{
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
}



@media screen and (max-width: 979px) {
h1.h1_ttl{
	top: 20%;
	left: 5%;
}
}


@media screen and (max-width: 767px) {
h1.h1_ttl{
	top: auto;
	bottom: 7%;
	font-size: 4vw;
}
h1.h1_ttl .en{
	font-size: 320%;
	font-weight: 300;
}
h2.h2_ttl .en{
	font-size: 200%;
}
h3.h3_place{
	font-size: 30px;
	font-size: clamp(18px, 3vw, 30px);
}
h5.h5_daytime{
	top: 7%;
	left: 7%;
	font-size: 3.6vw;
}
h5.h5_sunset{
	top: 11%;
	right: 5%;
	font-size: 3.6vw;
}
p.p_lead{
	/*text-align: justify;*/
	line-height: 2em;
}
/*p.p_lead .resp_autowrap{
	display: inline;
}*/
}



/*** hd **********************************/
.hd {
	position: relative;
}

.hd_main img{
	width: 100%;
	height: auto;
}
.hd_main figcaption{
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.8);
}

.hd_main .pc{}
.hd_main .sp{ display: none;}


@media screen and (max-width: 767px) {
.hd_main .pc{ display: none;}
.hd_main .sp{ display: block;}
}



/*** map_box **********************************/
.map_box{
	position: relative;
	width: 100%;
	max-width: 1000px;
	z-index: 1;
	margin: 50px auto 0;
	padding: 3% 0 0; /*6% 0 0*/
}
figure.map{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 0 2em; /* 3em 0 */
}


@media screen and (max-width: 767px) {
.map_box{
	padding-top: 6%;
}
}



/*** map_prot_wrap **********************************/
.map_prot_wrap{
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 3% auto 0;
}
.map_prot{
	position: relative;
}
.map_caution{
	text-align: right;
	padding: 0;
	margin: 0;
}
.map_caution i{
	display: inline-block;
	width: 2em;
	padding-right: 0.4em;
}

i.icon_LR{
	display: none;
}


@media screen and (max-width: 600px) {
.map_prot_wrap{
	width: 100%;	
	margin-top: 6%;
}
.map_prot{
	width: 600px;
}

.map_slide{
	padding: 0 0 20px;
	margin: auto;
  cursor: pointer;

  /* 横にはみ出した要素をスクロールするプロパティ */
  overflow-x: scroll;
  overflow-y: hidden;

  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
 img.map_base{
	width: 600px!important;
	max-width: 600px!important;
	height: auto!important;
}

i.icon_LR{
	display: block;
	position: absolute;
	z-index: 1;
	top: 20px;
	left: 10px;
	width: 25px;
}
}



/*** list_camera **********************************/
.list_camera{
}
.list_camera li{
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 4%;
	transition: background-color cubic-bezier(0.215, 0.61, 0.355, 1) .4s;
}
.list_camera li:hover{
	cursor: pointer;
}

.list_camera li:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: opacity linear 0.4s;
  content: '';
  animation: pulseMotion 2s linear infinite;
}

.list_camera li.spot1{
	top: 43%;
	left: 2%;
}
.list_camera li.spot2{
	top: 38%;
	left: 44%;
	transform: rotate(-120deg);
}
.list_camera li.spot3{
	top: 32%;
	left: 91%;
	transform: rotate(162deg);
}
.list_camera li.spot4{
	top: 47%;
	left: 83%;
	transform: rotate(150deg);
}
.list_camera li.spot5{
	top: 88%;
	left: 49%;
	transform: rotate(-110deg);
}

.list_camera li img{
	position: relative;
	z-index: 2;
}


@keyframes pulseMotion {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    background-color: rgba(240, 131, 0, 0.4)
  }
  100% {
    transform: translate(-50%, -50%) scale(2, 2);
    background-color: rgba(240, 131, 0, 0)
  }
}


@media screen and (max-width: 600px) {
.list_camera li{
	width: 6%;
	margin: -1% 0 0 -1%;
}
}






/*** movie_box **********************************/
.movie_box{
	margin-top: 5%;
}
.movie_box img{
	width: 100%;
	height: auto;
	cursor: pointer;
	transition: all .3s linear;
}
.movie_box:hover img{
	opacity: 0.7;
}

.movie_box .pc{}
.movie_box .sp{ display: none;}


@media screen and (max-width: 767px) {
.movie_box{
	margin-top: 10%;
}
.movie_box .pc{ display: none;}
.movie_box .sp{ display: block;}
}



/*** list_place **********************************/
.list_place{
	display: flex;
	flex-flow: wrap;
	align-items: center;
	margin-top: 12%; /*8%*/
}
.list_place.reverse{
	flex-direction: row-reverse;
}

.list_place li{
}
.list_place li.photo{
	width: 63.88888889%;
}
.list_place li.txt{
	position: relative;
	width: 29.86111111%;
	margin-left: -4%;
	padding: 3% 0 1%;
}
.list_place.reverse li.txt{
	margin-left: 0;
	margin-right: -4%;
}

.list_place li.txt:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.9;
	background: #E5F1D9;
background: linear-gradient(90deg, rgba(229, 241, 217, 1) 0%, rgba(199, 225, 245, 1) 100%);
}

.list_place li.txt .inner{
	position: relative;
	z-index: 1;
	width: 84%;
	margin: 0 auto;
}

.list_place li img{
	width: 100%;
	height: auto;
}


.list_place li.photo figcaption{
	font-size: 10px;
	padding: 0.5em 1em 0;
}
.list_place.reverse li.photo figcaption{
	text-align: right;
}



@media screen and (max-width: 1023px) {
.list_place li.txt{
	width: 38%;
}
}


@media screen and (max-width: 767px) {
.list_place{
	margin-top: 20%; /*15%*/
}
.list_place li.photo{
	width: 100%;
}
.list_place li.txt{
	width: 92%;
	margin: -20px auto 0;
	padding: 6% 0 3%;
}
.list_place.reverse li.txt{
	margin: -20px auto 0;
}

.list_place li.photo figure{
	position: relative;
}
.list_place li.photo figcaption{
	position: absolute;
	bottom: 30px;
	right: 4%;
	padding: 0;
	color: #fff;
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}
}



/*** list_place_mini **********************************/
.list_place_mini{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 7%;
}
.list_place_mini li{
	width: 47.5%;
}

.list_place_mini li figcaption{
	text-align: right;
	padding-top: 0.5em;
}


@media screen and (max-width: 767px) {
.list_place_mini{
	margin-top: 10%;
}
.list_place_mini li{
	width: 100%;
}
.list_place_mini li:last-child{
	margin: 10% 0 0 auto; /*7% 0 0 auto*/
}
}



/*** direction_wrap **********************************/
.direction_wrap{
	margin-top: 6%;
	background-color: #f3f2e6;
}
.direction_box{
	width: 90%;
	max-width: 1060px;
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin: 0 auto;
	padding: 5% 0;
}
.direction_box_l{
	width: 54.7169811%; /*49.0566%*/
	align-self: flex-start;
	position: sticky;
	top: 10px;
}
.direction_box_r{
	width: 41.50943396%; /*46.226415%*/
	/*align-self: flex-end;*/
}
.material .direction_box_r{
	align-self: center;
}


@media screen and (max-width: 979px) {
/*.direction_box_l{
	width: calc(100% - 230px);
}
.direction_box_r{
	width: 200px;
}*/
}


@media screen and (max-width: 767px) {
.direction_box_l{
	width: 100%;
	position: relative;
	top: 0;
}
.direction_box_r{
	width: 100%;
	margin-top: 8%;
}
.material .direction_box_r{
	align-self: flex-start;
}
}


@media screen and (max-width: 640px) {
/*.direction_wrap{
	margin-top: 12%;
}
.direction_box_l{
	width: 100%;
}
.direction_box_r{
	width: 100%;
	max-width: 350px;
	margin: 3em 0 0 auto;
}*/
}



/*** list_director **********************************/
.list_director{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 8%;
}
.list_director li{
	width: 46.938775%;
}
.list_director li.txt{
	display: flex;
	flex-direction: column;
}
.list_director li.photo{
}

.list_director li .nameBox{
	margin-top: auto;
}


.list_director li p.name{
	font-size: 18px;
	font-size: clamp(16px, 1.8vw, 18px);
	padding-bottom: 0;
	margin-bottom: 0;
}

.logo_nikken{
	width: 100%;
	max-width: 225px;
	margin-bottom: 1.5em;
}

@media screen and (min-width: 641px)  and (max-width: 979px) {
/*.list_director li{
	width: 100%;
}
.list_director li.txt{
	order: 2;
}
.list_director li.photo{
	order: 1;
	margin-bottom: 1.5em;
}
.logo_nikken{
	width: 90%;
	margin-bottom: 1.2em;
}*/
}

@media screen and (max-width: 767px) {
.list_director{
	width: 100%;
	max-width: 350px;
	margin: 8% 0 0 auto;
}
}





/*** daytime_box **********************************/
.daytime_box{
	position: relative;
	margin-top: 10%;
}
.ph_daytime{
	position: relative;
}
.ph_daytime figcaption{
	position: absolute;
	bottom: 0.5em;
	right: 1em;
	font-size: 10px;
	/*color: #fff;
	text-shadow: 0 0 5px #000, 0 0 5px #000;*/
}
.ph_daytime img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 767px) {
.daytime_box{
	margin-top: 15%;
}
}



/*** sunset_box **********************************/
.sunset_box{
	position: relative;
	margin-top: 10%;
}
.ph_sunset{
	position: relative;
}
.ph_sunset figcaption{
	position: absolute;
	bottom: 0.5em;
	right: 1em;
	font-size: 10px;
	color: #fff;
	text-shadow: 0 0 5px #000, 0 0 5px #000;
}
.ph_sunset img{
	width: 100%;
	height: auto;
}


@media screen and (max-width: 767px) {
.sunset_box{
	margin-top: 15%;
}
}



/*** movie_auto_wrap **********************************/
 .movie_auto_wrap{
        display: flex;
        width: 100%;
		margin-top: 5%;
    }
 .movie_auto_wrap iframe{
        width: 100%;
        aspect-ratio: 16 / 9;
    }



/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}