@charset "UTF-8";

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

    header

*****************************************************************/
header { 
	width: 100%;
	max-width: 1260px;
	margin: 25% auto 0;
	padding: 3.5% 0 0 0;
	position: relative;
	background: url("../image/back_header_wall.svg") no-repeat bottom 36% right;
	background-size: 17% auto;
	border-radius: 10px 10px 0 0;
}

.header_top {
	position: absolute;
	display: block;
	margin: -25% auto 0 -4.990%;
	width: 109.99%;
	max-width: 1449px;
	z-index: 2;
	transform:translate(0, 0) rotate(2.5deg); 
}
.header_box { 
	position: relative;
	padding: 0 3.25% 9%;
	width: 100%;
}

.header_photo{ border-radius: 5px; margin: 0 auto; }

.header_box h1 {
	position: absolute;
	margin: -13.5% auto 3.25% 3.25%;
	width: 78%;
}

.header_box h2 {
	margin: 16.5% auto 0;
	width: 93.5%;
}

@media screen and (min-width: 540px) {
header {
	margin: 24.5% auto 0;
	background: url("../image/back_header_wall.svg") no-repeat bottom 24% right;
	background-size: 14% auto;
}
.header_top { margin: -25.5% auto 0 -4.95%; }
.header_box { padding: 0 4.5% 7.5%; }
.header_photo{ border-radius: 15px; margin: 0 auto; }
.header_box h1 { margin: -11.5% auto 0 2.5%; width: 69.5%; }
.header_box h2 {
	margin: 14.5% auto 0;
	width: 95%;
}
}

@media screen and (min-width: 960px) {
header {
	margin: 26% auto 0;
	background: url("../image/back_header_wall.svg") no-repeat bottom 24% right;
	background-size: 14% auto;
}
.header_top { width: 113.6%; margin: -26.5% auto 0 -6.8%;}
.header_box { padding: 0 4.5% 7.5%; }
.header_photo{ border-radius: 25px; margin: 0 auto; }
.header_box h1 { margin: -11.5% auto 0 2.5%; width: 69.5%; }
.header_box h2 { margin: 14.5% auto 0; width: 95%;}
}

.header_box h1,.header_box h2
{
	opacity : 0;
	visibility: hidden;
	transform: translateX(40px);
	transition: 1s;
}

.header_box h1.active ,.header_box h2.active{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.header_top.act{ animation:gata 1s ease-in-out alternate; transform:translate(0, 0) rotate(0deg);
}

@keyframes gata {
  0% {transform:translate(0, 0) rotate(2.5deg);}

  61% {transform:translate(0, 0) rotate(2.5deg);}
  62% {transform:translate(0, 0) rotate(-2deg);}
  63% {transform:translate(0, 0) rotate(0deg);}
	
  64% {transform:translate(0, 0px) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

.present_unit{
	width: 100%;
	max-width: 1080px;
	margin: 4% auto 0 ;
}
.present_unit img { border-radius: 10px; }
/* main------------------------------------------------------------------------------*/
.main_area{
	width: 100%;
	max-width: 1449px;
	margin: 0 auto;
}
.main_house{
	width: 90%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 0 8.5%;
	background: 
		url("../image/back_house_bottom01.png") repeat-x bottom left , #e6e1d7;
	background-size: 127.5% auto, auto;
	border-radius: 20px 0 0 0;
}

.parts_unit { padding: 0 3%; }

@media screen and (min-width: 540px) {
.parts_unit { padding: 0 1.5%; }
}
@media screen and (min-width: 640px) {
.main_house{ 
	background:
		url("../image/back_house_bottom01.png") repeat-x bottom , #e6e1d7;
	padding: 0 0 12%; background-size: 100% auto ,auto; }
}

@media screen and (min-width: 960px) {
.main_house{ width: 87%; padding: 0 0 8.5%; }
}

@media screen and (min-width: 1450px) {
.main_house{  padding: 0 0 115px; background-size: auto 115px ,auto; }
}

/* common------------------------------------------------------------------------------*/
h3 { margin: 0 auto 4.5%; max-width: 1449px; }
.area_spot h3 , .area_news h3 { transform:translate(0, 0) rotate(-2.5deg);  }
.area_cast h3 { transform:translate(0, 0) rotate(2.5deg); }

h3 img:last-child{
	margin: -14.5vw auto 0 ;
	height: 16vw;
	max-height: 130px;
}

h3 img:first-child{
	width: 109.99%;
	max-width: 1449px;
	margin: 7.8% auto 0 -4.995%;
}

h3.move{ animation:katakata 6s ease-in-out alternate; transform:translate(0, 0) rotate(0deg); 
}
h3.move2{ animation:katakata2 6s ease-in-out alternate; transform:translate(0, 0) rotate(0deg); 
}
h3.move3{ animation:katakata3 6s ease-in-out alternate; transform:translate(0, 0) rotate(0deg); 
}

@keyframes katakata {
  0% {transform:translate(0, 0) rotate(-2.5deg);}
  1% {transform:translate(0, 0) rotate(-2.5deg);}
  2% {transform:translate(0, 0) rotate(2deg);}
  3% {transform:translate(0, 0) rotate(0deg);}
  4% {transform:translate(0, 0px) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

@keyframes katakata2 {
  0% {transform:translate(0, 0) rotate(2.5deg);}
  11% {transform:translate(0, 0) rotate(2.5deg);}
  12% {transform:translate(0, 0) rotate(-2deg);}
  13% {transform:translate(0, 0) rotate(0deg);}
  14% {transform:translate(0, 0px) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

@keyframes katakata3 {
  0% {transform:translate(0, 0) rotate(-2.5deg);}
  1% {transform:translate(0, 0) rotate(-2.5deg);}
  2% {transform:translate(0, 0) rotate(2deg);}
  3% {transform:translate(0, 0) rotate(0deg);}
  4% {transform:translate(0, 0px) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}

@media screen and (min-width: 480px) {
h3 img:last-child{ margin: -14vw auto 0 ; height: 12vw; }
}

@media screen and (min-width: 640px) {
h3 img:last-child{ margin: -13.5vw auto 0 ; height: 9.25vw; }
.area_news h3 img:last-child{ margin: -12.5vw auto 0 9.5% ; height: 9.25vw; }
}

@media screen and (min-width: 960px) {
h3 img:first-child{ width: 114%; margin: 7.8% auto 0 -7%; }
/*h3 img:last-child{ margin: -13vw auto 0 ; }*/
}

@media screen and (min-width: 1450px) {
.area_spot h3 img:last-child{ margin: -192px auto 0 ; }
.area_cast h3 img:last-child{ margin: -195px auto 0 ; }
.area_news h3 img:last-child{ margin: -185px auto 0 9.5% ; }/**/
}

/* About------------------------------------------------------------------------------*/

/*開くドア*/
.door_space ,.door_space1 ,.door_space2 ,.door_space3 {
	width: 100%;
	margin: auto;
	padding: 7.85% 0; 
	position: relative;
	overflow: hidden;
}

/*opendoor*/
.door_l{
	position: absolute;
	transition: all 1500ms 0s ease;
	width: 50%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url("../image/door_left.svg");
	background-size: auto 100% ;
    background-repeat: repeat-x;
	background-position:  top right;
	pointer-events: none;
	z-index: 2;
}
.door_l.open{ margin-left: -47%; }
.door_l.opentwo{ margin-left: -50%; }

.door_r{
	position: absolute;
	transition: all 1500ms 0s ease;
	width: 50%;
	height: 100%;
	top: 0;
	left: 50%;
	background-image: url("../image/door_right.svg");
	background-size: auto 100% ;
	background-repeat: repeat-x;
	background-position: top left;
	pointer-events: none;
	z-index: 2;
}

.door_r.open{ margin-left: 47%; }
.door_r.opentwo{ margin-left: 50%; }

@media screen and (min-width: 640px) {
.door_space { padding: 7.5% 0 4.5%; }
.door_l.open{ margin-left: -39%; }
.door_r.open{ margin-left: 39%; }
}

@media screen and (min-width: 1024px) {
.door_space { padding: 6% 0 4.5%; }
.door_l.open{ margin-left: -36%; }
.door_r.open{ margin-left: 36%; }
}

/*-----CM・CAPTION-----*/
.area_about{ margin-bottom: 15%; }

.cm_area{
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	background: #dbd2c0;
}

.about_caption{
	width: 92%;
	margin: 0 auto 7.85%;
	text-align: center;
}

.cm_movie{
	width: 84%;
	max-width: 630px;
	margin: 0 auto;
	background: #000000;
	border: solid 4px #000000;
}

.btn_tw{
	width: 66%;
	max-width: 320px;
	margin: 6.5% auto 0;
}

@media screen and (min-width: 640px) {
.area_about{ margin-bottom: 6%; }
.about_caption { width: 73%; margin: 0 auto 3.5%; }
.cm_movie { width: 59%; border: solid 10px #000000;}
.btn_tw { width: 29%; margin: 3% auto 0; }
}

@media screen and (min-width: 1024px) {
.about_caption { width: 68%; margin: 0 auto 3.75%; }
.cm_movie { width: 55%; border: solid 10px #000000;}
.btn_tw { width: 29%; margin: 3.75% auto 0; }
}

/*取材先紹介-----------------*/
.area_spot{ margin-bottom: 10%; }

.spot1 , .spot3{
	margin-bottom: 3.5%;
	background: url("../image/back_spot_wall1.svg") no-repeat bottom 10% right;
	background-size: 27% auto;
}

.spot2 {
	margin-bottom: 3.5%;
	background: url("../image/back_spot_wall2.svg") no-repeat bottom 3% left;
	background-size: 22% auto;
	flex-direction: row-reverse;
}

.slide_title{ width: 100%; margin: 0 auto 3.5%; }
.spot_swiper{ margin: 0 auto 3.5%; }

.spot_unit { width: 100%; max-width: 765px; padding: 3.5%; background: #ffffff;}
.cut_unit1 , .cut_unit3 { width: 100%; padding: 7.5% 0 0 7.5%; }
.cut_unit2 { width: 100%; padding: 7.5% 7.5% 0 0 ; text-align: right;}
.cut_unit1 img , .cut_unit2 img , .cut_unit3 img { width: 44%; display: inline;}

/*宿情報欄*/
.spot_txt{
	margin: 2.5% 0 0;
	padding: 3% 3.5% 3.5%;
	background: #f6eec4;
	border-radius: 5px;
	font-size: 1.4rem;
}

.spot_txt h4{
	color: #36862c;
	font-size: 1.5rem;
	font-weight: bold;
}

/*アーカイブリンク*/
.link_archive{
	width: 70%;
	max-width: 280px;
	margin: 6% auto;
}

@media screen and (min-width: 640px) {
.area_spot{ margin-bottom: 11%; }
.spot1 ,.spot2 , .spot3{ margin-bottom: 6.5%; padding: 0 3.25%; }
.spot1{ margin-top: 6.5%; }
.spot1 , .spot3{
	background: url("../image/back_spot_wall1.svg") no-repeat top 34% right;
	background-size: 18% auto;
}

.spot2 {
	background: url("../image/back_spot_wall2.svg") no-repeat top 34% left;
	background-size: 16% auto;
	flex-direction: row-reverse;
}
.spot_unit { width: 72%; padding: 3%; margin: 0; }
.cut_unit1 , .cut_unit3 { width: 24%; padding: 0 0 10% 0 ; align-self: flex-end; }
.cut_unit2 { width: 24%; padding: 0 0 10% 0 ; text-align: right; align-self: flex-end;}
.cut_unit1 img , .cut_unit2 img , .cut_unit3 img { width: 100%; display: inline; }
.spot_swiper{ margin: 0 auto 2.5%; }
.spot_txt{ padding: 2% 2.5% 2.5%; }
.link_archive{ width: 40%;}
}

@media screen and (min-width: 960px) {
.area_spot{ margin-bottom: 7.5%; }
.spot1 ,.spot2 , .spot3{ margin-bottom: 6.5%; padding: 0 4.5%; }
.spot1{ margin-top: 6.5%; }
.spot1 , .spot3{
	background: url("../image/back_spot_wall1.svg") no-repeat top 30% right;
	background-size: 18% auto;
}
.spot2 {
	background: url("../image/back_spot_wall2.svg") no-repeat top 34% left;
	background-size: 16% auto;
	flex-direction: row-reverse;
}
.spot_unit { width: 72%; padding: 2.5%; margin: 0; }
.spot_swiper{ margin: 0 auto 2%; }
.spot_txt{ margin: 2% auto 0 ; padding: 1.75% 2.5% 2.5% ; font-size: 1.5rem; }
.spot_txt h4{ font-size: 1.6rem; }
.link_archive{ width: 40%; max-width: 320px;}
}

@media screen and (min-width: 1380px) {
.cut_unit1 , .cut_unit3 { width: 27%; padding: 0 3% 10% 0 ; align-self: flex-end; }
.cut_unit2 { width: 27%; padding: 0 0 10% 3% ; text-align: right; align-self: flex-end;}
}

/*出演者--------------------------------------------------------------------------------*/
.area_cast { margin-bottom: 15%; }
.cast_box { width: 93%; margin: 0 auto; }

.cast_unit{
	width: 100%;
	margin: 6% auto 0;
}
.cast_unit:first-child { margin: -2.5% auto 0; }
.cast_unit.cast_window { display: none }

@media screen and (min-width: 640px) {
.area_cast { margin-bottom: -2%; }
.cast_box { width: 97%; margin: 0 auto; }
.cast_unit , .cast_unit:first-child{ width: 48.5%; margin: 0 0 2%; }
.cast_unit.cast_window { display: block}
}

@media screen and (min-width: 960px) {
.cast_box { margin: 7% auto; }
}

/*ニュース＆トピックスリスト--------------------------------------------------------------------------*/
.area_news { }
.news_topic { }

ul.news_topic{
	width: 90%;
	max-width: 670px;
	height: 400px;
	margin: auto;
	background: #ffffff;
    overflow-y: scroll;
    overflow: auto;
	line-height: 1.6;
}

div.news_enpty{
	width: 90%;
	max-width: 670px;
	padding: 0 50%;
	margin: 0% auto 0;
}

.news_topic li{ list-style: none; padding: 1.75% 3.125% 6.25%;}
.news_topic a { text-decoration: underline; font-weight: bold;}
.news_topic time { display: inline-block; margin: 5px 15px 0 0;}
.news_topic span {
	display: inline-block;
	padding: 2px 0.4rem 0;
	background: #cccccc;
	font-size:1.4rem;
	line-height: 1.3;
	color: #7f7f7f;
}
.news_topic p { width: 100%; margin: 5px 0 0 0; }

@media screen and (min-width: 640px) {/*タブレット小*/
ul.news_topic { width: 52.5%; margin: 6.5% auto 0 3%; }
.news_topic li{ list-style: none; padding: 2% 4% 4%;}
div.news_enpty{ width: 52.5%; margin: 6.5% auto 0 3%; padding: 15% 50%;}
}

@media screen and (min-width: 1024px) {/*タブレット小*/
ul.news_topic { width: 52.5%; margin: 5.5% auto 0 4.5%; }
.news_topic li{ list-style: none; padding: 2% 4% 2%;}
div.news_enpty { width: 52.5%; margin: 6.0% auto 0 4.5%; }
}

/*** 雪玉（共通） ***/
/*https://give-shot.jp/tokyocss/snow-fall/*/
.snows div{z-index: -3; /*重ね順*/
  position: fixed; /*画面固定*/
  top: -250px; /*初期位置*/
  left: 0;
  border-radius: 50%; /*丸型*/
  background: #fff; /*雪の色*/
  opacity: 0.9; /*若干透明に*/
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){z-index: -3;
  width: 10px;
  height: 10px;
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉2 ***/
.snows div:nth-child(2){z-index: -3;
  width: 10px;
  height: 10px;
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;/*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(3){z-index: -3;
  width: 12px;
  height: 12px;
  /*filter: blur(3px); ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite; /*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 大きめの雪玉 ***/
.snows div:nth-child(4){z-index: -3;
  width: 15px;
  height: 15px;
  /* ±222pxの範囲で影(複製)を作る */
  box-shadow:
    40vw -200px #fff,
    80vw 220px #fff;
  animation: fall 7s linear infinite; /*落下*/
  animation-delay: 4s; /*遅延*/
}

@keyframes fall{
  0%{ top: -250px; }
  100% { top: calc(100% + 250px); }
}