@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
#room #gnav #nav_03 { border-bottom: 2px solid #78962D;}
#room #main_img { background-image: url(../../../room/img/room_main.jpg);}

#room #contents_wrap { padding-bottom: 50px;}

@media screen and (max-width: 600px) {
  #room #gnav #nav_03 { border-bottom: 1px dashed #ccc;}
}
/* ---------------------------------------------------
lead
------------------------------------------------------ */
#room #lead { text-align: center; padding: 50px 0 80px;}
#room #lead h2 { font-size: 35px; margin-bottom: 35px;}
#room #lead h2 span { display: block; font-size: 16px; color: #c8ceb8;}

@media screen and (max-width: 600px) {
  #room #lead { padding: 50px 0;}
  #room #lead h2 { font-size: 24px;}
  #room #lead p { text-align: left;}
}


/* ---------------------------------------------------
cnav
------------------------------------------------------ */
#room #cnav { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 120px;}
#room #cnav li { width: calc((100% / 4) - 10px); font-size: 22px;}
#room #cnav li span { display: flex; justify-content: center; align-items: center; background: #e6e6e6; height: 100px; box-sizing: border-box; border-top: 5px solid #e6e6e6;}
#room #cnav .active span { border-top: 5px solid #90a65a;}
#room #cnav li a:hover { text-decoration: none;}

@media screen and (max-width: 600px) {
  #room #cnav { margin-bottom: 30px;}
  #room #cnav li { width: calc( 50% - 5px); margin-bottom: 20px; font-size: 18px;}
  #room #cnav li span { height: auto; padding: 5px 0;}
}

/* ---------------------------------------------------
contents_wrap
------------------------------------------------------ */
#room [id^="sec"] { padding: 30px 0 100px;}
#room [id^="sec"].deg_line_1 { padding: 30px 0 100px;}
#room [id^="sec"] h3 { font-size: 55px; text-align: center;}
#room [id^="sec"] h3 .sub_tit { display: block; font-size: 25px;}
#room [id^="sec"] h3 .sub_tit span { font-size: 16px; padding: 7px 10px; background: #dad7bc; margin-left: 10px; vertical-align: text-top;}
#room [id^="sec"] h3 .tit_small { font-size: 45px;}
#room [id^="sec"] h3 ruby > rt { font-size: 35%;}
#room [id^="sec"] h3 + p {
  text-align: center; color: #beaa5c; background: #f0f0ef; margin-bottom: 75px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

#room [id^="sec"] .room_slider { margin-bottom: 80px;}
#room [id^="sec"] .flex-control-paging li a.flex-active { background: #756558;}
#room #sec_amane .flex-control-paging li a.flex-active, #room #sec_souka .flex-control-paging li a.flex-active { background: #7d916d;}

#room [id^="sec"] .explan { display: flex; flex-wrap: wrap; justify-content: space-between;}
#room [id^="sec"] .explan div { width: 470px; display: flex; flex-direction: column; justify-content: center;}
#room [id^="sec"] .explan div p:not(:first-of-type) { padding-top: 20px;}
#room [id^="sec"] .explan div p img { padding-right: 10px;}
#room [id^="sec"] .explan div p span { vertical-align: text-bottom;}
#room [id^="sec"] .explan div a {
  display: block; width: 400px; background: #78962e; color: #fff; font-size: 20px; padding: 20px 0; text-align: center; margin: 45px 0 0;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN","HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#room [id^="sec"] .explan div a:not(:first-of-type) { margin: 20px 0 0;}
#room [id^="sec"] .explan div a:hover { text-decoration: none; opacity: 0.75;}
#room [id^="sec"] .explan .madori { width: 480px; text-align: center;}

@media screen and (max-width: 600px) {
  #room [id^="sec"] { padding: 30px 0;}
  #room [id^="sec"].deg_line_1 { padding: 30px 0;}

  #room [id^="sec"] h3 { font-size: 38px;}
  #room [id^="sec"] h3 .tit_small { font-size: 33px;}
  #room [id^="sec"] h3 .sub_tit { font-size: 22px;}
  #room [id^="sec"] h3 + p { margin-bottom: 50px;}

  #room [id^="sec"] .room_slider { margin-bottom: 15px;}

  #room [id^="sec"] .explan { flex-direction: column; align-items: center;}
  #room [id^="sec"] .explan .madori { width: 60%;}
  #room [id^="sec"] .explan div { width: 100%; align-items: center; margin-bottom: 45px;}
  #room [id^="sec"] .explan div a { width: 90%; padding: 10px 0; font-size: 18px;}
}


#viewer_header { width: 950px; height: 635px; z-index: 3; margin: 0 auto; position: relative;  z-index: 2;}

#stage {
    width: 950px;
    height:635px;
    margin: 0 auto;
    z-index: 2;
}
#photo1,#photo2,#photo3,#photo4,#photo5,#photo6{
    position: absolute;
    width: 950px;
    height: 635px;
     z-index: 2;
}
#photo1 img,#photo2 img,#photo3 img,#photo4 img,#photo5 img,#photo6 img{
    opacity:0;
    -moz-animation: imgTrans 4s infinite;
    -webkit-animation: imgTrans 30s infinite;
    animation: imgTrans 36s infinite;
     z-index: 2;
}
#photo1 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#photo2 img {
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
#photo3 img {
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
#photo4 img{
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
#photo5 img {
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#photo6 img {
    -moz-animation-delay: 30s;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

#frame {
    width: 950px;
    height: 635px;
    margin-bottom:30px;
    overflow: hidden;
     z-index: 2;
}
@-webkit-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@-moz-keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}
@keyframes imgTrans {
 0% { opacity:0; }
 5% { opacity:1; }
 20% { opacity:1; }
 25% { opacity:0; } 
 100% { opacity:0; }
}