@charset "UTF-8";
@media only screen and (min-width: 599px) {
#intro { float: left; width: 49%; }
#aboutSado { float: right; width: 49%; }
}
@media only screen and (min-width: 900px) {
#intro { width: 320px; }
#aboutSado { width: 530px; }
/*	#subVis, #compare { float: right; width: 530px !important; }	*/
#pBox2 { width: 530px; margin-left: 360px; }
/*	#pBox2::after { content: ""; clear: both; display: block; height: 0; }		*/
}
@media only screen and (max-width: 599px) {
#mainVis {  height: 0; overflow: hidden; padding-top: 50%; background-image: url("../../img/top/main_img.png"); 
background-size: 100% 100%; margin-top: 47px; }
}
@media only screen and (min-width: 600px) {
#mainVis { padding-top: 309px; 
background-image: url("../../img/top/catch_b.png"), url("../../img/top/main_img_b.jpg"); 
background-position: 30px 70px, 0 0; 
background-repeat : no-repeat, no-repeat; 
background-size: auto, 100% 100%; }
#mainVis span { display: block; height: 0; overflow: hidden; width: 121px; padding-top: 351px; 
background: url("../../img/top/b_h1m_b.png") no-repeat 0 0; 
position: absolute; top: 1px; right: 20px; }
}
#welcome { border-bottom: solid 1px #000; margin-bottom: 1em; }
#welcome h2, #compare h2, #movie_01 h2 { font-size: 1rem; line-height: 2em; height: 2em; text-align: center; color: #fff; margin-top: 1px; background-color: #c90; }
#welcome p { text-align: center; margin: 0.4em 0; line-height: 1.6; }
#welcome .face { margin: 0; float: left; width: 50%; height: 0; overflow: hidden; padding-top: 130px; 
background: url("../../img/top/f1.jpg") no-repeat 30% 0; }
#welcome #face02 { background: url("../../img/top/f2.jpg") no-repeat 40% 0; }
#welcome #face03 { background: url("../../img/top/f3.jpg") no-repeat 60% 0; }
#welcome #face04 { background: url("../../img/top/f4.jpg") no-repeat 50% 0; }
.information { padding: 0 1em 1em; border-bottom: solid 1px #000; margin-bottom: 1em; }
.information h2 { line-height: 2.4em; height: 2.4em; font-size: 1em; color: #fff; padding-left: 1em; margin-bottom: 1.5em; background-color: #666; 
position: relative; border-radius: 6px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) inset; }
.information h2::after { position: absolute; top: 1.5em; left: 2em; content: ''; width: 0; height: 0; z-index: -1; 
border: 25px solid transparent; border-top: 25px solid #666; }
.information h2.h_info2 { background-color: #c60; }
.information h2.h_info2::after { border-top: 25px solid #c60; }
.information h2.h_fun { background-color: #d14d5f; }
.information h2.h_fun::after { border-top: 25px solid #d14d5f; }
.information p { margin-bottom: 0.5em; }
.moreInfo { display: block; width: 60%; margin: 0 auto; border-radius: 10px; border: solid 1px #999; text-align: center; text-decoration: none; 
height: 3.2em; line-height: 3.2em; transition: all .3s; -webkit-transition: all .3s; }
.moreInfo:hover { color: #fff; background-color: #2b69e5; }
#aboutSado { padding: 0 1em; }
#aboutSado h2 { color: #2b69e5; font-size: 1.3em; font-weight: bold; position: relative; 
height: 1.6em; margin: 2.5em 0 2.5em 0.4em; border-bottom: solid 4px #d1e0ff; 
text-shadow: 2px 2px 3px #fff, 2px 2px 3px #fff, -2px 2px 3px #fff, -2px 2px 3px #fff, 2px -2px 3px #fff, 2px -2px 3px #fff, -2px -2px 3px #fff, -2px -2px 3px #fff; }
#aboutSado h2::after { content: "？"; font-size: 6.5em; font-weight: bold; position: absolute; right: 10px; top: -45px; color: #f90;  opacity: 1; 
text-shadow: 1px 1px 2px #666; z-index: -1; }
#aboutSado ul { margin-bottom: 3em; }
#aboutSado li { list-style: none; margin: 0 0 1em 2em; position: relative; }
#aboutSado li::before { font-family: icomoon; content: "\f14a"; display: block; position: absolute; left: -1.5em; color: #0080ff; }
body { counter-reset: number; }
#aboutSado h3::before { counter-increment: number; content: counter(number); display: block; float: left; 
font-size: 2em; color: #fff; text-align: center;
background: #2B69E5; line-height: 1.5; width: 1.5em; height: 1.5em; border-radius: 50%; 
position: absolute; left: -1.7em; top: -0.1em; }
#aboutSado h3 { font-size: 1.3em; border-bottom: solid 1px #e26b1c; color: #e26b1c; height: 1.5em; line-height: 1.5; 
position: relative; margin: 0 0 2.5em 3.5em; }
#subVis img { border-bottom: solid 2px #fff; }
#subVis { margin-bottom: 2em; }
#subVisCap { font-size: 1.3em; margin: 1em 0 0; text-align: center; line-height: 2; }
@media only screen and (max-width: 599px) {
#subVisCap { font-size: 1em; }
}
@media only screen and (min-width: 400px) {
#subVis::after { content: ""; clear: both; display: block; height: 0; }
#subVis img { box-sizing: border-box; width:50%; float: left; }
#subVis img:nth-child(2n) { border-left: solid 1px #fff; }
#subVis img:nth-child(2n+1) { border-right: solid 1px #fff; }
#subVisCap { margin: 1em 0 0; text-align: center; line-height: 2.4; }
#subVis { margin-bottom: 4em; }
}
#compare h2+p { text-align: center; margin: 1em 0; line-height: 1; color: #0059B2; background-color: #fff; }
table { border-top: solid 1px #000; border-left: solid 1px #000; }
tbody th { text-align: left; }
tbody td { text-align: right; }
th, td { line-height: 1.4; padding: 0.5em 1em 0.4em 1em; border-right: solid 1px #000; border-bottom: solid 1px #000; }
#compareNote { margin-top: 0.5em; text-align: right; font-size: 0.8em; color: #000; }
@media only screen and (max-width: 599px) {
#compare { border: solid 15px #dfdede; border-top: none; }
#compare table { width: 100%; }
#compare table { border: none; }
#compare table thead { display: none; }
#compare table tbody tr { display: block; margin-bottom: 1em; }
#compare table tbody th, #compare table tbody td { display: list-item; list-style: none; border: none; text-align: left; 
padding: 0; margin: 0; margin-bottom: 0.5em; }
#compare table tbody th { margin-bottom: 1em; padding-left: 2em; line-height: 2em; height; 2em; 
list-style-type: none; color: #fff; font-weight: bold; background: #000; }
#compare table tbody td { margin-left: 3em; }
#compare table tbody td:nth-of-type(1)::before { content: "・東京都"; }
#compare table tbody td:nth-of-type(2)::before { content: "・佐渡島"; }
#compare table tbody td::before { display: block; width: 6em; float: left; }
#compareNote { padding-top: 0.5em; border-top: dotted 1px #333; }
}
@media only screen and (max-width: 599px) {
#aboutSado h3::before { left: -1.7em; top: 0; }
#aboutSado h3 { margin: 0 0 2.5em 2.3em; color: #000; border-bottom: solid 1px #666; }
}
@media only screen and (min-width: 600px) {
#welcome h2 { font-size: 1em; margin-top: 1em; }
#welcome .face { background: url("../../img/top/f1.jpg") no-repeat 30% 0; }
#welcome #face02 { background: url("../../img/top/f2.jpg") no-repeat 40% 0; }
#welcome #face03 { background: url("../../img/top/f3.jpg") no-repeat 60% 0; }
#welcome #face04 { background: url("../../img/top/f4.jpg") no-repeat 50% 0; }
.information { border-bottom: 0; }
#aboutSado { padding: 0; }
#aboutSado h2 { position: static; border: 0; text-shadow: none; font-weight: normal; 
font-size: 1em; line-height: 2em; height: 2em; text-align: center; color: #fff; margin: 1em 0 20px 0; background-color: #5587ea; }
#aboutSado h2::after { content: "？"; font-size: 18px; position: static; right: 10px; top: -20px; color: #fff; opacity: 1; text-shadow: none; }
.moreInfo { width: 100%; }
#aboutSado h3::before { font-size: 30px; left: -1.8em; top: 0.1em; }
#aboutSado h3 { font-size: 1.1em; margin-left: 3em; }
#subVis, #compare table { width: 98%; margin-left: auto; margin-right: auto; }
#compare th span { font-size: 0.8em; }
}
@media only screen and (min-width: 900px) {
.information { padding: 0 0 0.6em; }
.information h2 { margin-bottom: 1.2em; line-height: 2em; height: 2em; }
.information h2::after { top: 1.2em; left: 1em; }
#aboutSado h3 { font-size: 1.3em; margin-bottom: 1.5em; }
#aboutSado h3::before { font-size: 34px; left: -1.8em; top: -0.1em; }
#subVisCap { text-align: left; font-size: 18px; }
}
#movie_01 h2 { margin-top: 1.4em; }
#movie_01 h2+p { text-align: center; margin: 1em 0; line-height: 1.6; color: #0059B2; background-color: #fff; }
aside#movie_01 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 94%; margin: 0 auto 1em; }
aside#movie_01 .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media only screen and (min-width: 900px) {
aside#movie_01 .video { width: 100%; }
}
@media only screen and (min-width: 600px) {
aside#movie_01 .video { width: 98%; }
}