@charset "UTF-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
audio,canvas,iframe,img,svg,video{
vertical-align: middle;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ 
display: block;
}
nav ul{
list-style: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
input,select{
vertical-align: middle;
}
/* ------ Font ------ */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("NotoSansJP-Regular.otf"),
url('../font/NotoSansJP-Regular.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: local("NotoSansJP-Bold.otf"),
url('../font/NotoSansJP-Bold.woff2') format('woff2');
font-display: swap;
}
/* ------ Settings ------ */
html {
scroll-behavior: smooth;
}
body{
position: relative;
margin: 0 auto;
min-width: 360px;
line-height: 1.5;
font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
font-weight: 400;
font-size: 16px;
color: #000;
background-color: #fff;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
a{
}
a:link, a:visited{
color: #1a34ec;
}
a:hover, a:active{
font-weight: 700;
color: #ff6c00;
}
strong{
font-weight: 700;
}
em{
font-style: normal;
font-weight: 700;
}
b{
font-weight: 700;
color: #bb0000;
}
mark{
font-weight: 700;
background-color: #ff9;
}
h1,h2,h3,h4,h5,h6{
font-weight: 700;
}
/* ------ Layout ------ */
.row::after{
content: "";
display: block;
height: 0;
clear: both;
}
.left, .right{
margin-left: 0;
width: auto;
}
/* -------------------- ★ Header ★ -------------------- */
header{
width: 100%;
background-color: #000;
font-weight: 900;
color: #e6d6c6;
}
header h1{
font-size: calc(11px + ((1vw - 3.2px) * 3.75));
text-align: center;
background-image: url(../img/seigaiha-onsen.webp);
border-top :5px ridge #e6d6c6;
border-bottom :5px ridge #e6d6c6;
height: calc(45px + ((1vw - 3.2px) * 3.35));
line-height: calc(45px + ((1vw - 3.2px) * 3.35));
}
h1 span{
display: none;
}
.nav1{
position: absolute;
margin: calc(-44px - ((1vw - 3.2px) * 3.8)) 0 0 calc(5px + ((1vw - 3.2px) * 1.12));
width: calc(95px + ((1vw - 3.6px) * 13.5));
height: calc(35px + ((1vw - 3.6px) * 2.7));
box-shadow: 1px 1px 1px #333, 3px 3px 3px #000, -1px -1px 1px #fff;
}
.nav6{
position: relative;
float: right;
margin: calc(-44px - ((1vw - 3.2px) * 3.8)) calc(5px + ((1vw - 3.2px) * 1.12)) 0 0;
width: calc(95px + ((1vw - 3.6px) * 13.4));
height: calc(35px + ((1vw - 3.6px) * 2.68));
box-shadow: 1px 1px 1px #333, 3px 3px 3px #000, -1px -1px 1px #fff;
}
.nav1 img, .nav6 img{
width: 100%;
height: 100%;
}
.nav1:hover, .nav6:hover{
background: radial-gradient(ellipse 75px 23px at 50% 50%, #3d351b 0%, #b19b50 100%);
transform:scale(1.05);
}
#album{
position: absolute;
margin: 1.66% 0 0 10px;
width: calc(230px + ((1vw - 3.6px) * 58.7));
height: calc(115px + ((1vw - 3.6px) * 29.4));
border-radius: 3px;
}
header div{
margin-right: 12px;
text-align: right;
font-size: calc(10px + ((1vw - 6.4px) * 0.52));
}
#top1{
position: relative;
margin-top: 1%;
font-size: calc(10px + ((1vw - 6.4px) * 0.78));
}
#top2{
position: relative;
font-size: calc(10px + ((1vw - 6.4px) * 1.56));
}
#top3{
position: relative;
}
#top4{
position: relative;
margin-top: 1.7%;
}
#top4 img{
width: 17.1%;
height: auto;
}
#top5{
position: relative;
margin-top: 0.195%;
font-size: calc(10px + ((1vw - 6.4px) * 1.56));
}
#top5::before{
content: "- ";
}
#top5::after{
content: " -";
}
#top6{
position: relative;
margin-top: 2.1%;
margin-right: -0.8%;
font-size: calc(21px + ((1vw - 3.6px) * 6.48));
}
#top7{
position: relative;
margin-top: 2.1%;
margin-bottom: 1.5%;
letter-spacing: 0.2px;
}
#top7 a{
text-decoration: none;
color: #e6d6c6;
}
/* -------------------- ★ Pan ★ -------------------- */
#pan{
display: flex;
flex-flow: wrap row;
margin: 15px 4px;
font-size: 11px;
letter-spacing: -0.6px;
}
#pan p::before{
content: "♨";
}
#pan a{
text-decoration: none;
}
#pan2{
margin-left: auto;
}
/* -------------------- ★ Main ★ -------------------- */
main{
margin: 0 1.5vw;
}
main h2{
padding: 5px 0 7px 0;
font-size: 23px;
color: #e6d6c6;
background-image : url(../img/seigaiha-onsen.webp);
border: 3px solid #c8b0cc;
box-shadow: 0 1px 3px #aaa;
}
/* -------------------- ★ Explanation ★ -------------------- */
#explanation{
margin-top: 1.5em;
height: auto;
}
#explanation h1{
padding-left: 2.395vw;
font-size: 5.5vw;
text-align: left;
background-image: none;
border: none;
height: auto;
line-height:normal;
}
#explanation h1::before{
content:url(../img/a_blt008.gif)" ";
}
#explanation p{
padding: 1em 3vw 0 3vw;
font-size: calc(18px + ((1vw - 3.6px) * 1.5));
text-indent: 1em;
text-align: justify;
line-height:1.75;
}
#explanation p a{
font-weight: 700;
}
/* ----- Point ----- */
#point{
margin: 40px 0 60px 0;
background-image: url(../img/onsen-guidance-m.webp);
background-repeat: no-repeat;
background-size: 100%;
font-family: "Helvetica Neue", "Hiragino Maru Gothic ProN", "Hiragino Sans", "UD デジタル 教科書体 N-R", "Yu Gothic", sans-serif;
}
#point1{
display: block;
height: 7.0em;
margin: 10% 0 0 0;
font-size: calc(15px + ((1vw - 3.6px) * 3.68));
color: #005050;
text-indent: 0;
text-align: justify;
line-height:1.5;
}
#point2{
display: inline-block;
margin: 0 0 9% 30px;
font-size: calc(11px + ((1vw - 3.6px) * 2.21));
color: #4a005c;
text-indent: 0;
}
#point a{
float: right;
margin: 0 25px 0 0;
text-align:right;
}
#point a img{
width: 38vw;
max-width: 250px;
height: auto;
}
/* -------------------- ★ Sidebar ★ -------------------- */
#sidebar{
margin: 60px 0;
text-align: center;
}
#score img{
width: 100%;
height:auto;
box-shadow: 0 1px 3px #aaa;
}
/* ----- ad2 ----- */
#ad2{
margin-top: 60px;
text-align: center;
}
#ad2 h2{
display: none;
}
/* -------------------- ★ Column ★ -------------------- */
#column{
text-align: center;
background-image : url(../img/paper-onsen.webp);
border-bottom: 10px solid #b19b50;
}
#column h3{
display: none;
}
#column h4{
margin-top: 10px; 
font-size: calc(23px + ((1vw - 6.4px) * 3.39));
font-family: serif;
text-align: center;
}
#column1{
margin: 10px 0 60px 0;
}
#column1 img{
width: 100%;
height: auto;
}
#column h5{
margin: 8px 0 40px 0;
padding-bottom: 7px;
color: #fff;
font-size: calc(29px + ((1vw - 3.6px) * 3.68));
text-align:center;
text-shadow: 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c, 0px 0px 5px #4a005c;
background-color: #4a005c;
border-radius: 6px;
line-height: 55%;
letter-spacing: -2.2px;
}
#column h6{
padding: 0 0 0 1.5vw;
font-size: calc(23px + ((1vw - 3.6px) * 2.7));
text-align: left;
}
#column h6 img{
margin-right: 3px;
width: 14vw;
height: auto;
max-width: 100px;
}
#column p{
padding: 1.2em 5vw 0 5vw;
font-size: calc(17px + ((1vw - 3.6px) * 0.49));
text-align: justify;
text-indent: 1em;
overflow: hidden;
line-height: 1.7;
}
#column3{
padding: 30px 0 40px 0;
text-align: center;
}
/* ----- Reserve1/2 ----- */
#reserve1, .reserve2{
display: grid;
width: 99%;
margin: 30px 0.5% 0 0.5%;
gap: 1vw 1vw;
grid-template-columns: repeat(auto-fit,minmax(29vw,1fr));
}
#reserve1 a, .reserve2 a{
padding: 1.2em 0;
font-size: calc(12.5px + ((1vw - 3.6px) * 2.33));
font-weight: 500;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 6px;
border: double 3px #fff;
}
#reserve1 a:before, .reserve2 a:before {
content: "♨ ";
}
#reserve1 a:hover, a:active, .reserve2 a:hover, a:active{
filter: contrast(130%);
transform:scale(1.03);
}
.jtb{
background: hsl(353,73%,45%);
}
.jalan{
background: hsl(21,91%,52%);
}
.ikyu{
background: hsl(207,70%,52%);
letter-spacing : -0.017em
}
.relux{
background: hsl(244,78%,21%);
letter-spacing : 0.149em;
}
.hotels{
background: hsl(353,76%,54%);
letter-spacing : -0.08em;
}
.expedia{
background: hsl(43,89%,56%);
letter-spacing : 0.03em;
}
.yukoyuko{
background: hsl(355,67%,37%);
letter-spacing : 0.009em;
}
.yahoo{
background: hsl(347,98%,48%);
letter-spacing : 0.079em;
}
.rakuten{
background: hsl(111,66%,43%);
letter-spacing : 0.3em;
}
.rurubu{
background: hsl(238,70%,43%);
letter-spacing : 0.13em;
}
.knt{
background: hsl(212,66%,41%);
letter-spacing : -0.164em;
}
.special{
background: hsl(212,66%,41%);
letter-spacing : 0.3em;
}
.yu{
background: hsl(0,0%,95%);
}
.asoview{
background: hsl(198,60%,51%);
letter-spacing : -0.11em;
}
/* -------------------- ★ Ranking ★ -------------------- */
#ranking{
margin-top: 60px;
}
.ranking-list{
margin: 1px 0 45px 0;
display: inline-block;
}
#ranking h5{
padding: 1px 1vw;
color: #e6d6c6;
font-size: 14px;
font-style: italic;
text-align:right;
background-color: #4a005c;
border-radius: 5px;
letter-spacing: 0.3em;
}
.photo{
float: left;
margin: 60px 0 0 0.6vw;
}
.photo img{
width: 29.4vw;
height: calc(29.4vw / 4 * 3);
border: 3px double #c8b0cc;
border-radius: 6px;
}
#ranking h6{
position:absolute;
margin: 8px 0 5px 0;
font-size: 22px;
}
#ranking h6 img{
width: 12vw;
max-width: 65px;
height: auto;
margin-right: 3px;
}
#ranking p{
min-height: 6em;
margin: 60px 1vw 0 33.2vw;
font-size: calc(11px + ((1vw - 3.6px) * 2));
text-align: justify;
line-height: 1.6;
overflow: hidden;
}
/* -------------------- ★ Onsen ★ -------------------- */
#onsen{
margin-top: 30px;
}
#onsen table{
width: 100%;
margin-bottom: 40px;
text-align: center;
table-layout: fixed;
background-color : #fff;
border: 3px solid #c8b0cc;
}
#onsen th{
padding: 5px 0 7px 0;
font-size: 24px;
color: #e6d6c6;
letter-spacing: 0.2em;
background-image: url(../img/seigaiha-onsen.webp);
border: 3px solid #c8b0cc;
box-shadow: 0 1px 3px #aaa;
}
#onsen td{
height: 90px;
font-size: 15px;
color: #eee;
border: 2px solid #ddd;
vertical-align:middle;
}
.good{
background-color: #90639b;
}
.best{
color: #ebeb0e !important;
background-color: #4a005c;
}
#onsen img{
width: 100%;
height: auto;
}
#onsen caption{
caption-side: bottom;
font-size: 14px;
text-align: right;
}
.memo, .memo2{
padding: 6px 2px;
height: 36px !important;
color: rgba(0,0,0,1) !important;
background-image: url(../img/paper-onsen.webp);
}
.memo2{
text-align: left;
}
/* -------------------- ★ Map ★ -------------------- */
#map{
margin-top: 40px;
text-align: center;
}
#onsen-map{
border: 1px solid #c8b0cc;
border-bottom: 10px solid #b19b50;
}
#gmap{
width: 100%;
height: calc(360px + ((1vw - 3.2px) * 90));
}
/* -------------------- ★ Summary ★ -------------------- */
#summary{
margin-top: 60px;
font-size: calc(15px + ((1vw - 3.2px) * 3));
}
#summary h2{
text-align: center;
}
#summary table{
width: 100%;
border-collapse: separate;
border-spacing: 0 0.5em;
letter-spacing: 1.5px;
}
#summary tr{
padding: 1em 0;
}
#summary th{
width: 5em;
padding-left: 5px;
line-height: 2.8em;
text-align: left;
color: #4a005c;
border-left: 1.2vw solid #4a005c;
border-bottom: 1px solid rgba(0,0,0,0.38);
}
#summary td{
padding-bottom: 5px;
border-bottom: 1px solid rgba(0,0,0,0.38);
}
/* -------------------- ★ Card ★ -------------------- */
#card{
display:block;
margin: 75px 0 35px 0;
text-align: center;
}
#card h2{
font-size: calc(12px + ((1vw - 3.6px) * 1.96));
margin-left: calc(60px + ((1vw - 3.6px) * 2.45));
text-align: left;
}
#check{
margin: -65px 0 12px 1.3%;
text-align: left;
}
#card a img{
margin: 0 0.4%;
width: 30.8%;
height: auto;
border-radius: 8px;
transition: all 0.5s cubic-bezier(.48,.01,.45,1.9);
}
#card a img:hover{
background:#ff6c00;
box-shadow:0 0 3px 3px rgba(255,108,0,0.7);
transform:scale(1.02);
z-index:100;
}
#card a:last-child{
display: none;
}
/* -------------------- ★ Page ★ -------------------- */
#page{
display:none;
}
/* -------------------- ★ Link ★ -------------------- */
.link{
text-align: center;
}
.link a{
padding: 5px 0;
font-size: calc(11px + ((1vw - 3.75px) * 0.31));
}
.link a:link, .link a:visited{
color: #e6d6c6;
text-decoration: none;
}
.link a:hover, .link a:active{
color: #ff6c00;
text-decoration: none;
}
.link a::before{
content:"|";
padding-right:0.25em;
color: #aaa;
}
.link a:first-child::before{
content: "";
}
.link a:nth-child(2){
display: none;
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
margin-top: 3px;
background: #000;
color: #e6d6c6;
border-bottom: 14px solid #b19b50;
}
footer h1{
font-size: calc(11px + ((1vw - 3.2px) * 3.75));
text-align: center;
background-image: url(../img/seigaiha-onsen.webp);
border-top :5px ridge #e6d6c6;
border-bottom :5px ridge #e6d6c6;
height: calc(45px + ((1vw - 3.2px) * 3.35));
line-height: calc(45px + ((1vw - 3.2px) * 3.35));
}
#ad7{
margin: 5px 0;
}
#pr{
margin: 0 6px 52px 0;
font-size: 2vw;
text-align: right;
}
#page-top a{
display: block;
position: relative;
font-size: 2.5vw;
text-align: center;
text-decoration: none;
line-height: 3.2em;
color: #e6d6c6;
}
#page-top a:before{
content: "▲";
margin-right: 0.5em;
}
#page-top a:link, #page-top a:visited{
background: linear-gradient(to bottom, #ccc, #4a005c);
}
#page-top a:hover, #page-top a:active{
letter-spacing: 0.5px;
background: linear-gradient(to bottom, #b19b50,  #3d351b);
}
footer h2{
position: relative;
padding: 7px 0 23px 0;
font-size: calc(12px + ((1vw - 3.2px) * 3.33));
text-align: center;
background-image: url(../img/seigaiha-onsen.webp);
border-top :5px ridge #e6d6c6;
border-bottom :5px ridge #e6d6c6;
}
#copyright{
position:relative;
margin-top:  -24px;
font-size: 10px;
text-align: center;
line-height: 1.2;
}
#copyright a{
text-decoration: none;
color: #e6d6c6;
}
footer a:nth-last-child(2), footer a:last-child {
margin-top: -45px !important;
}
.rs{
display: none;
}
.rs3{
display:none;
}
/* -------------------- ★★★★★ 560 ★★★★★ -------------------- */
@media screen and (min-width: 560px){
/* -------------------- ★ Header ★ -------------------- */
header h1{
font-size: calc(20px + ((1vw - 5.6px) * 4.33));
}
h1 span{
display: inline;
}
#top1{
margin-top: 1.1%;
}
#top4{
margin-top: 2.6%;
}
#top7{
margin-top: 2.7%;
}
/* -------------------- ★ Pan ★ -------------------- */
#pan{
letter-spacing: 0;
}
/* -------------------- ★ Explanation ★ -------------------- */
#explanation h1{
font-size: calc(24px + ((1vw - 5.6px) * 0.78));
}
#explanation p{
color: rgba(0,0,0,0.88);
line-height:1.9;
}
/* ----- Point ----- */
#point{
background-image: url(../img/onsen-guidance.webp);
}
#point1{
height: 5.8em;
}
/* -------------------- ★ Column ★ -------------------- */
#column h5{
letter-spacing: 0;
}
/* -------------------- ★ Ranking ★ -------------------- */
.photo{
margin-top: 10px;
}
.photo img{
width: 30.2vw;
height: calc(30.2vw / 4 * 3);
}
#ranking h6{
position:static;
margin: 8px 0 5px 32vw;
}
#ranking p{
font-size: calc(11px + ((1vw - 5.6px) * 2.88));
margin: 0 1vw 0 33.2vw;
}
/* -------------------- ★ Map ★ -------------------- */
#gmap{
height: 480px;
}
/* -------------------- ★ Summary ★ -------------------- */
#summary th{
line-height: 2.5em;
}
/* -------------------- ★ Link ★ -------------------- */
.link a:nth-child(2){
display: inline;
}
/* -------------------- ★ Footer ★ -------------------- */
footer h1{
font-size: calc(20px + ((1vw - 5.6px) * 4.33));
}
#pr{
margin: 0 6px 66px 0;
font-size: 11px;
}
#page-top a{
font-size: 15px;
}
footer h2{
padding: 19px 0 49px 12px;
font-size: 14px;
}
.rs2{
display:none;
}
#copyright{
margin-top: -50px;
}
footer a:nth-last-child(2), footer a:last-child {
margin-top: -59px !important;
}
.rs{
display: block;
}
.rs3{
display:inline;
}
}
/* -------------------- ★★★★★ 640 ★★★★★ -------------------- */
@media screen and (min-width: 640px){
/* -------------------- ★ Sidebar ★ -------------------- */
#sidebar div{
margin: 0 0 0 auto;
width: 303px;
height: 297px;
}
#score{
float: left;
}
/* ----- ad2 ----- */
#ad2{
background-color: #f8f8f8;
}
#ad2 h2{
display:block;
}
.my_adslot2{
margin-top: 2px;
}
}
/* -------------------- ★★★★★ 768 ★★★★★ -------------------- */
@media screen and (min-width: 768px){
/* -------------------- ★ Header ★ -------------------- */
header h1{
font-size: 29px;
height: 60px;
line-height: 60px;
}
.nav1{
margin: -58px 0 0 10px;
width: 150px;
height: 46px;
}
.nav6{
margin: -58px 10px 0 0;
width: 150px;
height: 46px;
}
.nav1 img, .nav6 img{
width: 150px;
height: 46px;
}
#top1{
margin-top: 1.2%;
}
#top4{
margin-top: 2.7%;
}
#top6{
margin-top: 2.2%;
}
#top7{
margin-top: 2.8%;
margin-bottom: 1.6%;
}
/* -------------------- ★ Pan ★ -------------------- */
#pan{
margin: 25px 9px;
}
/* -------------------- ★ Explanation ★ -------------------- */
/* ----- Point ----- */
#point{
margin: 60px 0;
}
#point1{
margin: 10% 22px 3% 26px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
#sidebar{
margin : 70px 2.4vw 90px 2.4vw;
}
#sidebar div{
width: 340px;
height: 328px;
}
/* ----- ad2 ----- */
.my_adslot2{
width: 336px;
height: 280px;
}
/* -------------------- ★ Column ★ -------------------- */
#column h3{
display:block;
position:relative;
width: 200px;
height: 140px;
margin-left: -20px;
padding: 32px 0 0 0;
font-size: 13px;
color : #48005e;
background-image : url(../img/no1.webp);
background-repeat : no-repeat;
background-position : 25px 10px;
z-index: 1;
}
#column h4{
margin-top: calc(-83px - 1em);
margin-left: 160px;
text-align: left;
}
#column1 img{
width: 89%;
border: 2vw double #4a005c;
border-radius: 2vw;
}
#column h5{
margin: 8px 8vw 40px 8vw;
}
#column h6{
padding: 0 9.5vw;
font-size: 34px;
}
#column p{
padding: 1.5em 8vw 0 8vw;
font-size: 19px;
}
#column3{
padding: 30px 8vw 40px 0;
text-align: right;
}
/* ----- Reserve1/2 ----- */
#reserve1 a, .reserve2 a{
padding: 0.8em 0;
font-size: 22px;
}
/* -------------------- ★ Ranking ★ -------------------- */
#ranking{
margin-top: 90px;
}
.photo img{
width: 30.2vw;
height: calc(30.2vw / 4 * 3);
}
#ranking h6{
margin: 8px 0 5px 32vw;
font-size: 29px;
}
#ranking p{
margin: 0 1vw 0 33.2vw;
font-size: 17px;
}
/* -------------------- ★ Onsen ★ -------------------- */
#onsen{
margin-top: 50px;
}
#onsen td{
font-size: 26px;
}
#onsen caption{
font-size: 20px;
}
/* -------------------- ★ Summary ★ -------------------- */
#summary{
margin-top: 90px;
}
/* -------------------- ★ Card ★ -------------------- */
#card{
marginbottom: 25px;
}
#card h2{
margin-left: 68px;
font-size: 20px;
letter-spacing: 1px;
}
#card a img{
width: 23.4%;
}
#card a:last-child{
display: inline;
}
/* -------------------- ★ Page ★ -------------------- */
#page{
display:block;
padding: 0 1.3% 45px 1.3%;
font-size: 14px;
font-weight: 900;
color: #4a005c;
}
#page-left{
float: left;
text-align: left;
}
#page-left::before{
content: "◀ ";
}
#page-right{
float: right;
text-align: right;
}
#page-right::after{
content: " ▶";
}
/* -------------------- ★ Footer ★ -------------------- */
footer{
margin-top: 0;
}
footer h1{
font-size: 29px;
height: 60px;
line-height: 60px;
}
#pr{
margin: 0 9px 74px 0;
}
#page-top a{
line-height: 2.5em;
}
footer h2{
font-size: 22px;
}
#copyright{
font-size: 11px;
}
footer a:nth-last-child(2), footer a:last-child {
margin-top: -67px !important;
}
}
/* -------------------- ★★★★★ 1024 ★★★★★ -------------------- */
@media screen and (min-width: 1024px){
.all-box{
clear:both;
width: 100%;
}
.main-box{
width: 60%;
}
.sub-box{
width: 38%;
}
.left{
float: left;
}
.right{
float: right;
}
/* -------------------- ★ Header ★ -------------------- */
.nav1{
margin-left: 25px;
}
.nav6{
margin-right: 25px;
}
#album{
margin: 23px 0 0 25px;
width: calc(620px + ((1vw - 10.24px) * 38));
height: auto;
}
header div{
margin-right: 25px;
font-size: calc(12px + ((1vw - 10.24px) * 0.57));
12px;
}
#top1{
margin-top: 17px;
font-size: calc(13px + ((1vw - 10.24px) * 0.57));
}
#top2{
font-size: calc(16px + ((1vw - 10.24px) * 1.14));
}
#top4{
margin-top: calc(32px + ((1vw - 10.24px) * 1.7));
}
#top4 img{
width: 175px;
height: 35px;
}
#top5{
margin-top: 2px;
font-size: calc(16px + ((1vw - 10.24px) * 0.57));
}
#top6{
margin-top: calc(21px + ((1vw - 10.24px) * 1.7));
}
#top7{
margin-top: calc(28px + ((1vw - 10.24px) * 1.7));
margin-bottom: 19px;
}
/* -------------------- ★ Pan ★ -------------------- */
#pan{
margin: 25px 24px;
font-size: 14px;
}
/* -------------------- ★ Explanation ★ -------------------- */
#explanation{
margin-top: 0;
}
#explanation h1{
padding-left: 12px;
}
#explanation p{
padding: 1em 13px 0 13px;
font-size: calc(17px + ((1vw - 10.24px) * 1.7));
letter-spacing: 0.1px;
}
/* ----- Point ----- */
#point{
margin-top: 40px;
}
#point1{
margin: 10% 22px 0.8% 26px;
font-size: calc(23px + ((1vw - 10.24px) * 2.84));
}
#point2{
font-size: calc(15px + ((1vw - 10.24px) * 1.99));
}
/* -------------------- ★ Sidebar ★ -------------------- */
#sidebar{
margin: 0;
}
#sidebar div{
margin: 0;
width: 344px;
height: 333px;
}
#sidebar div:first-child {
margin-bottom: calc(47px + ((1vw - 10.24px) * 53.5));
}
#score{
float: none;
}
#sidebar h2{
padding: 6px 0;
font-size: 20px;
}
/* -------------------- ★ Column ★ -------------------- */
#column h3{
margin-left: 0;
}
#column h4{
margin: -117px 0 0 0;
font-size: 36px;
text-align: center;
}
#column1{
font-size: 16px;
}
#column h5{
margin: 20px 100px 40px 100px;
letter-spacing: 0.1em;
}
#column h6{
padding: 0 100px;
letter-spacing: 0.1em;
}
#column p{
padding: 1.5em 100px 0 100px;
}
#column3{
padding: 30px 100px 40px 0;
}
/* ----- Reserve1/2 ----- */
#reserve1{
width: calc(100% - 200px);
margin: 30px 100px 0 100px;
gap: 10px 10px;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
}
.reserve2{
width: 99%;
gap: 5px 1vw;
grid-template-columns: repeat(auto-fit,minmax(185px,1fr));
}
#reserve1 a, .reserve2 a{
padding: 0.5em 0;
}
.reserve2 a{
font-size: 18px;
}
/* -------------------- ★ Ranking ★ -------------------- */
.photo{
margin: 10px 0 0 0.5%;
}
.photo img{
width: calc(183px + ((1vw - 10.24px) * 21));
height: auto;
}
#ranking h6{
margin: 8px 0 3px calc(201px + ((1vw - 10.24px) * 24.4));
font-size: calc(26px + ((1vw - 10.24px) * 2.27));
}
#ranking p{
margin: 0 0.5% 0 calc(204px + ((1vw - 10.24px) * 24.4));
font-size: calc(14px + ((1vw - 10.24px) * 1.7));
}
/* -------------------- ★ Onsen ★ -------------------- */
#onsen{
margin-top: 90px;
}
#onsen table{
width: 344px;
margin-bottom: 30px;
}
#onsen td{
height: 66px;
font-size: 15px;
}
#onsen caption{
font-size: 14px;
}
/* -------------------- ★ Map ★ -------------------- */
#map{
clear:both;
margin-top: 37px;
}
#onsen-map{
margin-bottom: 0;
}
#gmap{
height: 676px;
}
/* -------------------- ★ Summary ★ -------------------- */
#summary{
margin-top: 37px;
font-size: 19px;
}
#summary th{
border-left: 9px solid #682c3a;
}
/* -------------------- ★ Card ★ -------------------- */
#card h2{
margin-left: 81px;
}
#check{
margin: -65px 0 12px 23px;
}
#card a img{
width: 23%;
}
/* -------------------- ★ Page ★ -------------------- */
#page{
padding:0 25px 45px 25px;
font-size: 16px;
}
/* -------------------- ★ Link ★ -------------------- */
.link{
clear:both;
width: 100%;
}
.link a{
font-size: 13px;
}
/* -------------------- ★ Footer ★ -------------------- */
#ad7{
margin: 5px 25px;
}
#pr{
margin: 0 25px 74px 0;
font-size: 12px;
}
}
/* -------------------- ★★★★★ 1200 ★★★★★ -------------------- */
@media screen and (min-width: 1200px){
body{
background-image: url(../img/back-bar.png);
background-repeat: repeat-x;
}
/* -------------------- ★ Header ★ -------------------- */
.nav1{
margin-left: calc((100% - 1200px) / 2);
}
.nav6{
margin-right: calc((100% - 1200px) / 2);
}
#album{
margin: 23px 0 0 calc((100% - 1200px) / 2);
width: 700px;
}
header div{
margin: 0 auto;
width:1200px;
}
#top1{
font-size: 14px;
letter-spacing: 2px;
}
#top2{
font-size: 18px;
letter-spacing: 2px;
}
#top3{
font-size: 13px;
letter-spacing: 2px;
}
#top4{
margin-top: 35px;
}
#top5{
font-size: 17px;
letter-spacing: 1.2px;
}
#top6{
margin-top: 24px;
font-size: 80px;
}
#top7{
margin-top: 31px;
font-size: 13px;
letter-spacing: 1.6px;
}
/* -------------------- ★ Pan ★ -------------------- */
#pan{
margin: 0 auto 0 auto;
padding:25px 0;
width: 1200px;
text-align:center;
background: #fff;
}
#pan1{
margin-left: 26px;
}
#pan2{
margin-right: 26px;
}
/* -------------------- ★ Main ★ -------------------- */
main {
margin: 0 auto;
width: 1200px;
background-color: #fff;
}
/* -------------------- ★ Explanation ★ -------------------- */
#explanation h1{
font-size: 29px;
}
#explanation p{
padding: 1em 25px 0 13px;
font-size: 20px;
letter-spacing: 0.5px;
}
/* ----- Point ----- */
#point1{
margin: 68px 22px 15px 26px;
font-size: 28px;
}
#point2{
font-size: 18.5px;
}
/* -------------------- ★ Sidebar ★ -------------------- */
#sidebar div:first-child {
margin-bottom: 170px;
}
/* -------------------- ★ Column ★ -------------------- */
#column1 img{
border: 24px double #4a005c;
border-radius: 24px;
}
#column h5{
font-size: 60px;
letter-spacing: 0.15em;
}
/* -------------------- ★ Ranking ★ -------------------- */
.photo img{
width: 220px;
}
#ranking h6{
margin: 8px 0 5px 244px;
font-size: 30px;
}
#ranking h6 img{
margin-right: 6px;
}
#ranking p{
margin: 0 0.5% 0 247px;
font-size: 17px;
}
/* -------------------- ★ Onsen ★ -------------------- */
#onsen table{
width: 360px;
margin-bottom: 30px;
}
/* -------------------- ★ Aside ★ -------------------- */
aside {
margin: 0 auto;
width: 1200px;
}
/* -------------------- ★ Card ★ -------------------- */
#card h2{
margin-left: 59px;
}
#check{
margin: -65px 0 12px 0;
}
#card a img{
width: 23.5%;
}
/* -------------------- ★ Page ★ -------------------- */
#page{
padding:0 0 45px 0;
}
/* -------------------- ★ Footer ★ -------------------- */
#ad7{
margin: 5px auto;
width:1200px;
}
#pr{
margin: 0 auto 74px auto;
width: 1200px;
}
}