@charset "utf-8";

a.link-arrow {
	background:url(//cdn.willer.co.jp/img/top/css/ico-arrow.png) no-repeat left center;
	padding-left:10px;
}

a.new-win {
	background:url(//cdn.willer.co.jp/st/share/pc/img/ico-window.png) no-repeat right center;
  	vertical-align: middle;
  	padding-right:16px;
}

.contents {
  width: 100%;
  color: #fff;
  display: table;
}
.contents > * {
  display:table-cell;
  vertical-align: middle;
  text-align: center;
}
.fadeDone {
    opacity: 0;
}

 /* ======================================
02.
        Main Img Settings.
========================================= */
#contents1 { /*コンテンツを内包*/
	background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/main-bg.png) center top no-repeat;
	background-size: cover;
	min-height:720px;
	padding-top:60px;
}
#contents1 > div { /* パララックス部分 コンテンツを内包 */
	width:960px;
	margin:0 auto;
	display:block;
	overflow:hidden;
	/*position:fixed;*/
}
#contents1 > div h1 {
	text-align:right;
	margin:0 auto 25px;
}
#contents1 .maplink {width:340px;float:right;}
#contents1 .maplink {
	margin:0 auto 10px;
}
#contents1 .maplink a {
	border:1px solid #fff;
	padding:12px 15px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	display:block;
	text-align:center;
	background:#0071DB url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin.png) no-repeat 15px center;
}
#contents1 > div dd a:hover {
	background:#fff url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin-hover.png) no-repeat 15px center;
	color:#0051C4;
}

 /* ======================================
03.
        Etc Settings.
========================================= */
#contents2,
#contents3 {
  background: #EBF5FC;
  color:#000;
  padding:50px 0;
  max-height:300px;
}

#contents2 > div,
#contents3 > div { /* パララックス部分 コンテンツを内包 */
	width:960px;
	margin:0 auto;
	display:block;
	overflow:hidden;
}

#contents2 > div,
#contents3 > div {
  text-align:left;
  overflow:hidden;
}

#contents2 > div h2,
#contents3 > div h2 {
  margin:0 auto 30px;
  line-height:0;
}

#contents2 > div dt {
	color:#80471A;
	font-size:1.2em;
	font-weight:bold;
	background:url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-whats.png) no-repeat left center;
	padding-left:40px;
	margin:0 auto 10px;
}

#contents2 .pc-none {
  display: none;
}

.about-st {
	background:url(//cdn.willer.co.jp/campaign/osaki-bt/img/map-train.png) no-repeat right top;
	height:190px;
	padding-right:390px;
	margin:30px auto 60px;
}

.about-bt {
	float:left;
	width:480px;
}
.about-bt dd {
	background:url(//cdn.willer.co.jp/campaign/osaki-bt/img/about-bt-bg.png) no-repeat center bottom;
	padding-bottom:240px;
}

/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 460px;
	margin: 0 auto;
	float:right;
}
/*全サムネイルのコンテナー*/
#thumbs {
  overflow:hidden;
  margin: 10px 0 0 0;
}
#thumbs li {
	display:inline-block;
}
#thumbs li {margin-right:14px;}
#thumbs li:last-child {margin-right:0;}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
  width:100px;
  cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5 {
  display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
  position: absolute;
  left: 0;
  top: 0;
  margin:0 auto 15px;
}
.photo img {
  width:100%;
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  line-height:0;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img {
  opacity: 1;
}

#contents3 {
  background: #fff;
}

#contents3 h3 {
  color:#80471A;
  font-size:1.2em;
  font-weight:bold;
  border-left:5px solid #80471A;
  padding:0 6px;
  margin:0 auto 15px;
}

.sel-btn {display: flex;margin:0 auto 10px;width: 100%;}
.sel-btn li {
	display: flex;
  width: 100%;
  padding: 0 5px;
	position:relative;
}
.sel-btn li:last-child {margin-right:0;}
.sel-btn li a {
	background:#FF7E10;
	/*border: 1px solid #FFF;
    -moz-box-shadow: 0px 0px 2px rgba(000,000,000,0.3);
    -webkit-box-shadow:0px 0px 0px 2px #ff7e10;*/
	padding:20px 20px;
	color:#fff;
	text-decoration:none;
	align-items: center;
  justify-content: center;
	font-size:16px;
	font-weight:bold;
	-webkit-border-radius: 8px;
	border-radius: 8px;
  display: flex;
  width: 100%;
}
.sel-btn li a:after{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
  content: "\f105";
  font-size: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}
.sel-btn li a:hover {
	background:#ffbb33;
}
.sel-btn li a:hover:after{
	background: #ffbb33; /*←背景色*/
}

@media (max-width: 960px){
  #contents1 {
    width: 100%;
    min-height: 520px;
  }
  
  #contents1 > div {
    width: auto;
    margin: 0 20px 0 auto;
  }
  
  #contents1 > div h1 {
    text-align:right;
    margin:0 auto 25px;
  }
  
  #contents1 h1 img {
    margin: 0 0 0 auto;
    width: 30%;
    display: block;
  }
  
  #contents1 .maplink {
    width:340px;float:right;
  }

  #contents1 .maplink {
    margin: 0 auto 10px;
    width: 30%;
  }
  
  #contents1 .maplink a {
    border:1px solid #fff;
    padding:12px 15px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    display:block;
    text-align:center;
    background:#0071DB url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin.png) no-repeat 15px center;
  }
  
  #contents1 > div dd a:hover {
    background:#fff url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin-hover.png) no-repeat 15px center;
    color:#0051C4;
  }
  
  #contents2 .pc-none {
    display: none;
  }
  
  #contents2, #contents3 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #EBF5FC;
    color: #000;
    padding: 50px 0;
    max-height: 300px;
  }
  
  #contents2 > div, #contents3 > div {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
  }
  
  #contents2 > div h2, #contents3 > div h2 {
    margin: 0 auto 30px 20px;
    line-height: 0;
  }
  
  #contents2 > div h2 img, #contents3 > div h2 img {
    width: 100%;
    max-width: 920px;
  }
  
  #contents3 h3 {
    margin-left: 20px;
  }
  
  .about-st {
    width: 100%;
    max-width: 940px;
    background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/map-train.png) no-repeat 80% top;
    background-size: 35%;
    padding-right: 50%;
    margin: 30px 20px 60px;
  }
  
  .about-bt {
    float: left;
    width: 48%;
    max-width: 940px;
    margin: 30px 0 60px 20px;
  }
  
  .about-bt dd {
    background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/about-bt-bg.png) no-repeat center bottom;
    background-size: 80%;
    padding-bottom: 240px;
  }
  
  #stage {
    position: relative;
    margin: 0 auto;
    float: right;
    width: 44%;
  }
  
  .sel-btn {
    margin: 0 auto 10px;
  }
  
}

@media (max-width: 959px) and (min-width: 768px){
  #contents1 {
    width: 100%;

  }
  
  #contents1 > div {
    width: auto;
    margin: 0 20px 0 auto;
  }
  
  #contents1 > div h1 {
    text-align:right;
    margin:0 auto 25px;
  }
  
  #contents1 h1 img {
    margin: 0 0 0 auto;
    width: 30%;
    display: block;
  }
  
  #contents1 .maplink {
    width:340px;float:right;
  }

  #contents1 .maplink {
    margin: 0 auto 10px;
    width: 30%;
  }
  
  #contents1 .maplink a {
    border:1px solid #fff;
    padding:12px 15px;
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    display:block;
    text-align:center;
    background:#0071DB url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin.png) no-repeat 15px center;
  }
  
  #contents1 > div dd a:hover {
    background:#fff url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin-hover.png) no-repeat 15px center;
    color:#0051C4;
  }
  
  #contents2 .pc-none {
    display: none;
  }
  
  #contents2, #contents3 {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: #EBF5FC;
    color: #000;
    padding: 50px 0;
    max-height: 300px;
  }
  
  #contents3 {
    padding: 0 0 50px 0;
  }
  
  #contents2 > div, #contents3 > div {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
  }
  
  #contents2 > div h2, #contents3 > div h2 {
    margin: 0 auto 30px 20px;
    line-height: 0;
  }
  
  #contents2 > div h2 img, #contents3 > div h2 img {
    width: 100%;
    max-width: 920px;
  }
  
  #contents3 h3 {
    margin-left: 20px;
  }
  
  .about-st {
    width: 100%;
    max-width: 940px;
    background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/map-train.png) no-repeat 85% center;
    background-size: 32%;
    padding-right: 48%;
    margin: 30px 20px 60px;
  }
  
  .about-bt {
    float: left;
    width: 48%;
    max-width: 940px;
    margin: 30px 0 60px 20px;
  }
  
  .about-bt dd {
    background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/about-bt-bg.png) no-repeat center bottom;
    background-size: 74%;
    padding-bottom: 220px;
  }
  
  #stage {
    position: relative;
    margin-right: 20px;
    float: right;
    width: 45%;
  }
  
  #stage .default {
    width: 100%;
  }


  #thumbs {
    margin: 10px 0 0 0;
  }
  
  #thumbs li {
    margin-right: 10px;
  }
  
  .about-bt {
    float: left;
    width: 48%;
    max-width: 940px;
    margin: 30px 0 20px 20px;
  }
  
}

@media (max-width: 767px){
  
    
  #contents2 .pc-none {
    display: none;
  }
  
}

@media (max-width: 414px) {
  #contents1 {
    width: 100%;
    min-height: 220px;
    padding-top: 20px;
    position: relative;
  }
  
  #contents1 > div {
    width: auto;
    margin: 0 auto 0 auto;
  }
  
  #contents1 > div h1 {
    text-align:right;
    margin:0 auto 25px;
  }
  
  #contents1 h1 img {
    margin: 0 auto 0 auto;
    width: 30%;
    display: block;
  }
  
  #contents1 .maplink {
    float: none;
    margin: 0 auto 10px;
    width: 100%;
    padding: 0 10px;
    position: absolute;
    bottom: 0;
  }
  
  #contents1 .maplink a {
    border: 1px solid #fff;
    padding: 12px 15px 12px 40px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    text-align: center;
    background: #0071DB url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin.png) no-repeat 15px center;
  }
  
  #contents2 > div dd {
    margin: 0 10px;
    font-size: .875em;
    padding: 0;
  }
  
  #contents1 > div dd a:hover {
    background:#fff url(//cdn.willer.co.jp/campaign/osaki-bt/img/ico-newwin-hover.png) no-repeat 15px center;
    color:#0051C4;
  }
  
  #contents2 .pc-none {
    display: block;
    margin-bottom: 40px;
  }
  
  #contents2 .pc-none img {
    width: 60%;
    margin: 0 auto;
    display: block;
  }
  
  #contents2 #photo4 img {
    display: block;
    width: 100%;
}
  
  #contents2, #contents3 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #EBF5FC;
    color: #000;
    padding: 40px 10px;
    max-height: 300px;
  }
  
  #contents2 {
    padding: 40px 10px 0 10px;
  }
  
  #contents2 > div, #contents3 > div {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
  }
  
  #contents2 > div h2, #contents3 > div h2 {
    margin: 0 auto 20px 0;
    line-height: 0;
  }
  
  #contents2 > div h2 img, #contents3 > div h2 img {
    width: 100%;
    max-width: 100%;
  }
  
  #contents2 > div dt {
    font-size: 1.1em;
  }
  
  #contents3 h3 {
    font-size: 1.1em;
    margin-left: 0;
  }
  
  .about-st {
    width: 100%;
    height: auto;
    max-width: 100%;
    background: none;
    padding-right: 0;
    margin: 20px 20px 20px 0;
  }
  
  .about-st::after {
    content: "";
    background: url(//cdn.willer.co.jp/campaign/osaki-bt/img/map-train.png) no-repeat 85% center;
    background-size: 32%;
  }
  
  .about-bt {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 20px 20px 0;
  }
  
  .about-bt dd {
    background: none;
    background-size: 74%;
    padding-bottom: 220px;
  }
  
  #stage {
    position: relative;
    margin-right: 0;
    float: none;
    width: 100%;
  }
  
  #stage .default {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
  
  .sel-btn {
    flex-wrap: wrap;
  }
  
  .sel-btn li {
    width: 50%;
    margin: 5px 0;
  }
    

  #thumbs {
    margin: 10px 0 0 0;
    display: inline-flex;
  }
  
  #thumbs li {
    margin-right: 10px;
  }
  
  #thumbs label img {
    width: 96%;
    cursor: pointer;
  }
	
}

@media (max-width: 375px){
  #contents1 {
    width: 100%;
    min-height: 158px;
  }
  
  #contents1 .maplink {
    margin: 0 auto 10px;
    width: 40%;
  }
  
  #contents2 {
    padding: 30px 10px 0 10px;
  }
  
  .sel-btn li {
    display: inline-flex;
    margin: 0 auto 15px auto;
    padding: 0;
    position: relative;
    width: 100%;
  }

  .sel-btn li a:before {
    right: 10px;
  }
  
  .sel-btn li a:after {
    right: 13px;
  }
  
  #contents2, #contents3 {
    padding: 30px 10px 30px 10px;
  }
  
  #contents3 {
    padding-top: 0;
  }
  
}