@charset "utf-8";

/* ============================================================
  全ページ共通CSS(template)
============================================================ */
/* ----------------------------------------------------------
  ＠media＿小：～480
    @media screen and (max-width:480px)
  ＠media＿中大：481～
    @media screen and (min-width:481px)
  ＠media＿小中：～960
    @media screen and (max-width:960px)
  ＠media＿中：481～960
    @media screen and (max-width:960px) and (min-width:481px)
  ＠media＿大：961～
    @media screen and (min-width:961px)
---------------------------------------------------------- */

/* =========================================================
  コンテナ
========================================================= */
body { background: url(../../images/body_bg.png) left top repeat fixed; }
#wrap { width: 100%; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }

/* =========================================================
  ヘッダー ／ ナビバー
========================================================= */
/* -----------------------
  ブロック
----------------------- */
header { background: #FFF; }
#header {
  width: 980px; height:520px;
  margin: 0 auto; padding-bottom: 50px;
  box-sizing: content-box;
}

#nav_main {
  width: 660px; height: 100%;
  float: left;

}
#block_twi {
  width: 300px; height: 100%;
  float: right; padding-top: 20px;
}

/* -----------------------
  タイトル
----------------------- */
#nav_main #pagetitle {
  width: 100%;
  margin: 0 auto; padding: 10px 0;
}
#nav_main div#pagetitle > h1 { float: left; }

#nav_main div#pagetitle > span {
  float: right; font-size: 90%;
  line-height: 50px;
}
#nav_main div#pagetitle > span i:before {
  font-size: 50%; color: #FFF;
  background: #FCC; border-radius: 50%;
  margin: 0 5px 0 0; padding: 5px; text-align: center;
}
#nav_main div#pagetitle > span a { text-decoration: none; }



/* -----------------------
  ナビ
----------------------- */
#nav_main > ul { height: calc( 100% - 70px ); }
#nav_main ul li:not(:last-child) { width: 320px; cursor: pointer; }
#nav_main ul li.active { pointer-events: none; cursor: default; }
#nav_main ul li.guide_1day { height: 100%; float: left; }
#nav_main ul li.guide_interview,
#nav_main ul li.sankobus_song {
  height: calc( 100% / 2 - 10px );
  float:right;
}
#nav_main ul li.sankobus_song { margin-top:20px; }

#nav_main ul li span {
  display: block; width: 100%; height: 100%;
  text-indent: -9999px; overflow: hidden;
}


/* -----------------------
  ナビ イメージ
----------------------- */
/* ガイドの1日 */
.tab_btnbox li.guide_1day { background: url(../../images/btn/guide_1day_off.png) center no-repeat; }
.tab_btnbox li.guide_1day:hover { background-image: url(../../images/btn/guide_1day_on.png); }
.tab_btnbox li.guide_1day.active { background-image: url(../../images/btn/guide_1day_active.png); }

/* ガイドの声 */
.tab_btnbox li.guide_interview { background: url(../../images/btn/modelcourse_off.png) center no-repeat; }
.tab_btnbox li.guide_interview:hover { background-image: url(../../images/btn/modelcourse_on.png); }
.tab_btnbox li.guide_interview.active { background-image: url(../../images/btn/modelcourse_active.png); }
/*
.tab_btnbox li.guide_interview { background: url(../../images/btn/guide_interview_off.png) center no-repeat; }
*/


/* 産交バスの歌 */
.tab_btnbox li.sankobus_song { background: url(../../images/btn/sankobus_song_off.png) center no-repeat; }
.tab_btnbox li.sankobus_song:hover { background-image: url(../../images/btn/sankobus_song_on.png); }
.tab_btnbox li.sankobus_song.active { background-image: url(../../images/btn/sankobus_song_active.png); }

/* -----------------------
  ナビ＠飾り
----------------------- */
#nav_main { position: relative; }
.tab_btnbox li,
.tab_btnbox li img { transition: all 0.5s; }


/* ガイド＋吹き出し ------ */
.gimg {
  position: absolute; left: 37%; bottom: -30px;
  width: 150px; height: 350px;
  pointer-events: none;
}
.gimg > #guide {
  display: block; width: 100%; height: 100%;
  -webkit-transform: rotateY( 0deg );
  -moz-transform: rotateY( 0deg );
  -ms-transform: rotateY( 0deg );
  transform: rotateY( 0deg );
  transition: all 0.5s;
}
.gimg > #fkds {
  position: absolute; right: -45px; top: -40px;
  width: 76px; height: 73px;
  pointer-events: none;
  -webkit-animation: fuwafuwa 2s ease infinite;
  animation: fuwafuwa 2s ease infinite;
}


/* ガイドの1日 */
.tab_btnbox li.guide_1day:hover + li + li + .gimg #guide {
  -webkit-transform: rotateY( 360deg );
  -moz-transform: rotateY( 360deg );
  -ms-transform: rotateY( 360deg );
  transform: rotateY( 360deg );

}
/* ガイドの声 */
.tab_btnbox li.guide_interview:hover + li + .gimg #guide {
  -webkit-transform: rotateY( 360deg );
  -moz-transform: rotateY( 360deg );
  -ms-transform: rotateY( 360deg );
  transform: rotateY( 360deg );
}
/* 産交バスの歌 */
.tab_btnbox li.sankobus_song:hover + .gimg #guide {
  -webkit-transform: rotateY( 360deg );
  -moz-transform: rotateY( 360deg );
  -ms-transform: rotateY( 360deg );
  transform: rotateY( 360deg );
}


/* -----------------------
  ツイッター
----------------------- */
#block_twi .scrollbox {
  width:100%; height: calc( 100% - 40px );
  overflow-y: scroll;
  background: #FFF;
  border: 3px solid #1da1f2;
}

#block_twi h2 {
  height: 40px; overflow:hidden;
  background: #1da1f2;
  border: 2px solid #1da1f2;
  border-radius: 15px 15px 0 0 / 15px 15px 0 0;
  color: #FFF;
  font-family: "Century Gothic"; font-size: 20px;
  font-weight: normal; line-height: 40px; letter-spacing: 1px;
}

/* -----------------------
  ジクザグ
----------------------- */
header + hr {
  border: none; height: 20px; margin: 0;
  background:
    linear-gradient(-135deg, #FFF 10px, transparent 0) 0 10px,
    linear-gradient(135deg,  #FFF 10px, transparent 0) 0 10px;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 20px 20px;
}


/* =========================================================
  フッター
========================================================= */
footer { padding: 10px 0 30px; }

footer img.hr { display: block; margin: 0 auto; }
footer p.copy { color: #755; opacity: 0.8; font-size: 90%; }

/* -----------------------
  ページトップ
----------------------- */
/* ＠media＿小中：～960 */
@media screen and (max-width:960px) {
  #pagetop { display: none !important; }
}
/* ＠media＿大：961～ */
@media screen and (min-width:961px) {
  article { position: relative; }
  #pagetop {
    display: block;
    position: fixed; right: 3%; z-index: 99;
    background: rgba(0,0,0,0.2); padding: 5px;
    border-radius: 10px;
    transition: all 0.3s;
  }
  #pagetop:hover { margin-top: 3px; }
  #pagetop:active { margin-top: 5px; transform: scale(0.8,0.8); }
  #pagetop:hover img { opacity: 1; }
}


/* =========================================================
  メインブロック
========================================================= */
#mainwrap {
  width: 95%; max-width: 980px;
  margin: 0 auto;
}
.tab_conbox.active { padding-bottom: 30px; }

/* -----------------------
  ガイドの1日
----------------------- */
#guide1day .conbox > img { display: block; }

/* -----------------------
  おすすめモデルコース
----------------------- */
#guide_interview .js_accordion { margin: 30px 0; }
#guide_interview .ac_summary   { margin: 10px 0; cursor: pointer; }
#guide_interview .ac_content   { padding: 0 10px 30px; }

#guide_interview .ac_content .close { margin-top: 20px; }
#guide_interview .ac_content .close > span { cursor: pointer; color: #06c; font-size: 0.8em; }
#guide_interview .ac_content .close > span::before,
#guide_interview .ac_content .close > span::after  { display: inline-block; color: initial; }
#guide_interview .ac_content .close > span::before { content: "["; margin-right: 0.5em; }
#guide_interview .ac_content .close > span::after  { content: "]"; margin-left:  0.5em; }

#guide_interview .ac_content .omiyage {
  width: 875px;
  margin: 15px 0 0 auto;
  padding: 15px 0 0;
  border-top: 1px dashed #CCC;
}
#guide_interview .ac_content .omiyage table { margin-top: 0.5em; }
#guide_interview .ac_content .omiyage table th {
  text-align: center;
  font-size: 1.3em;
}
#guide_interview .ac_content .omiyage th { background: #eee; }
/* ＠media＿中大：481～ */
@media screen and (min-width:481px) {
	#guide_interview .ac_content .omiyage th,
	#guide_interview .ac_content .omiyage td { border: 3px solid #ddd; }
}

.mailbox { margin:40px 0; }
.mailbox .btn_rsv {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 1.5em;
  font-weight: bold;
  padding:0.5em 1em;
  color:#FFF;
  background:#4b3;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
	-webkit-animation: pulsate-bck 3s ease-in-out infinite both;
	        animation: pulsate-bck 3s ease-in-out infinite both;
}
.mailbox .btn_rsv:active { top: 2px; }
.mailbox .btn_rsv:hover  {
  color: #fff;
  background: #e90;
  animation-play-state: paused;
}
.mailbox .btn_rsv img { display: inline-block; margin-right: 0.5em; }
.mailbox .btn_rsv:hover img  { opacity: 1 !important; }
.mailbox .kometxt { margin-top: 10px; }

/* -----------------------
  産交バスの歌
----------------------- */
#sankobus_song #plyr {
  position: relative; margin-top: 30px;
}
/* 歌詞 */
#sankobus_song #plyr #song_lyrics {
  background: url(../../images/sankobus_song/ph01.png) right top no-repeat;
  padding-bottom: 30px;
  box-sizing: border-box;
}
#sankobus_song #plyr #song_lyrics > img {
  display: block; float: right;
  margin-right: 50px;
}
#sankobus_song #plyr #song_lyrics > img + img {
  margin-right: 25px;
}

/* プレイヤー */
#sankobus_song #plyr_box {
  width: 900px; height: auto;
  margin: -20px 0 0;
}
/* 吹き出し・ワンポイント */
#sankobus_song div#song_fkds,
#sankobus_song div#song_fkds_point {
  pointer-events: none;
  display: block; width: 100px; height: 90px;
  position: absolute;
}

#sankobus_song div#song_fkds { left: 200px; top: 70px; }
#sankobus_song div#song_fkds_point { left: -60px; top: 195px; }

#sankobus_song div.plyr.plyr--stopped + div#song_fkds {
  background: url(../../images/sankobus_song/plyr_stopped.png) center no-repeat;
  -webkit-animation: swing linear 1.5s infinite;
  animation: swing linear 1.5s infinite;
}
#sankobus_song div.plyr.plyr--playing + div#song_fkds {
  background: url(../../images/sankobus_song/plyr_playing.png) center no-repeat;
  -webkit-animation: fuwafuwa 2s ease infinite;
  animation: fuwafuwa 2s ease infinite;
}
#sankobus_song div.plyr.plyr--stopped + div + div#song_fkds_point {
  background: url(../../images/sankobus_song/plyr_stopped_point.png) center no-repeat;
  -webkit-animation: knock 1.5s ease-in-out infinite alternate both;
  animation: knock 1.5s ease-in-out infinite alternate both;
}
#sankobus_song div.plyr.plyr--playing + div + div#song_fkds_point {
  background: url(../../images/sankobus_song/plyr_playing_point.png) center no-repeat;
  -webkit-animation: beat 2s ease-in-out infinite both;
  animation: beat 2s ease-in-out infinite both;
}

/* トラック名 */
#sankobus_song .audio_option { width:860px; margin: 0 auto; }


/* =========================================================
  タイトルイメージ
========================================================= */
/* -----------------------
  ページタイトル
----------------------- */
#mainblock h2.patetit { text-align: center; }

/* =========================================================
  画像リンク
========================================================= */
/* 拡大ボタン */
a.lightbox_img { position: relative; }
a.lightbox_img::after,
a.img_anime::after {
  content: ""; display: block;
  width: 15px; height: 15px;
  position: absolute; bottom: 5px; left: 5px;
  background: url("./../images/lightbox_img.png") left top no-repeat;
}

/* =========================================================
  アニメーション
========================================================= */
/* -----------------------
  fuwafuwa
----------------------- */
.anime_furafuwa {
  -webkit-animation: fuwafuwa 2s ease infinite;
  animation: fuwafuwa 2s ease infinite;
}
@keyframes fuwafuwa {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0, 8px); }
  100% { transform: translate(0, 0); }
}
/* -----------------------
  swing
----------------------- */
.anime_swing {
  -webkit-animation: swing linear 1.5s infinite;
  animation: swing linear 1.5s infinite;
}
@keyframes swing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
/* -----------------------
  bounce
----------------------- */
.anime_bounce {
  -webkit-animation: bounce ease 0.5s;
  animation: bounce ease 0.5s;
}
@keyframes bounce {
  0% { margin-top: 0; }
  30% { margin-top: -30px; }
  50% { margin-top: 5px; }
  60% { margin-top: -15px; }
  70% { margin-top: 3px; }
  80% { margin-top: -7px; }
  90% { margin-top: 1px; }
  100% { margin-top: 0; }
}

/* -----------------------
  knock
----------------------- */
.anime_knock {
  -webkit-animation: knock 1.5s ease-in-out infinite alternate both;
  animation: knock 1.5s ease-in-out infinite alternate both;
}
@keyframes knock {
  0% { transform: translateY(0); }
  10% { transform: translateY(10px); }
  20% { transform: translateY(0); }
  50% { transform: translateY(0); }
  70% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* -----------------------
  beat
----------------------- */
.anime_beat {
  -webkit-animation: beat 2s ease-in-out infinite both;
  animation: beat 2s ease-in-out infinite both;
}

@keyframes beat {
  from {
    transform: scale(1);
    transform-origin: center center;
    animation-timing-function: ease-out;
  }
  5% { transform: scale(0.91); animation-timing-function: ease-in; }
  10% { transform: scale(0.98); animation-timing-function: ease-out; }
  15% { transform: scale(0.87); animation-timing-function: ease-in; }
  20% { transform: scale(1); animation-timing-function: ease-out; }
  30% { transform: scale(1); animation-timing-function: ease-out; }
}

/* -----------------------
  beat
----------------------- */
.anime_pulsate {
	-webkit-animation: pulsate-bck 3s ease-in-out infinite both;
	        animation: pulsate-bck 3s ease-in-out infinite both;
}
@keyframes pulsate-bck {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.05); }
  50%  { transform: scale(1); }
  75%  { transform: scale(1); }
  100% { transform: scale(1); }
}