/* CSS Document */
main{
color: #333;
overflow: hidden;
}
article{}
article :is(section,nav,header,footer){
padding: 0;
}
:where(#subject,#introduction,#pokefuta,#spot){}
:where(#subject,#introduction,#pokefuta,#spot) :is(h1,h2){
font-family: bokutoh-rera, sans-serif;
font-size: var(--subject);
line-height: 1em;
}
:where(#introduction,#pokefuta,#spotList){}
:where(#introduction,#pokefuta,#spotList) img:not([src$=".png"]){
background: #ccc;
}
:where(#subject,#pokefuta){}
:where(#subject,#pokefuta) :is(h1,h2){
display: inline-flex;
justify-content: center;
min-width: 10em;
padding: 0.5em 1em;
border: min(0.15em, 4px) solid currentColor;
border-radius: 10em;
}
#subject{}
#subject h1{
background: #fff;
}
#subject h1+div{
margin-top: 2em;
}
#subject ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 0.5em 0;
}
#subject li{
font-family: bokutoh-rera, sans-serif;
}
#subject li:not(:last-child):after{
content: "・";
}
#introduction{
position: relative;
padding-top: 0;
}
#introduction h2{
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
margin: var(--space) 0;
padding: 1em;
background: rgba(51, 51, 51, 0.6);
color: #fff;
text-align: center;
line-height: 1.5em;
}
#introduction h2+div{
margin-top: 2em;
line-height: 1.6em;
}
#introduction figure{
position: relative;
grid-column: 1;
grid-row: 1;
}
#introduction figure img{
position: absolute;
top: 0;
left: 50%;
width: 100vw;
max-width: 100vw;
height: 100%;
object-fit: cover;
transform: translateX(-50%);
z-index: -1;
}
#introduction .wrap{
display: grid;
grid-template-rows: auto auto;
}
#pokefuta{}
#pokefuta header{
display: flex;
justify-content: center;
margin-bottom: var(--space);
}
#pokefuta h2{
position: relative;
}
#pokefuta h2:before,
#pokefuta h2:after{
content: "";
position: absolute;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
#pokefuta h2:before{
top: 50%x;
left: -80px;
width: 103.74px;
height: 67.21px;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
#pokefuta h2:after{
bottom: 0;
right: -80px;
width: 120px;
height: 132.72px;
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
#pokefuta h2:after{
content: "";
background-size: contain;
}
#pokefuta section{
display: grid;
grid-gap: 1em 1.5em;
align-items: start;
padding: 1.5em;
border: 1px solid currentColor;
}
#pokefuta section:before{
content: attr(data-city);
background: #ffdb2c;
padding: 0.4em;
border-radius: 2em;
color: #fff;
font-weight: bold;
text-align: center;
}
#pokefuta h3{
font-family: bokutoh-rera, sans-serif;
font-size: 1.5em;
text-align: center;
line-height: 1.25em;
}
#pokefuta h3+div{
display: contents;
}
#pokefuta dl{
display: grid;
grid-gap: 0.5em;
text-align: center;
}
#pokefuta dt{
color: #12c2c7;
font-size: 0.75em;
}
#pokefuta dt+dd{
font-weight: bold;
}
#pokefuta dt+dd+dd{
font-size: 0.75em;
line-height: 1.5em;
}
#pokefuta dt+dd+dd+dd{
font-size: 0.75em;
line-height: 1.5em;
}
#pokefuta dt+dd+dd+dd+dd{
font-size: 0.75em;
line-height: 1.5em;
}
#pokefuta dt+dd+dd+dd+dd+dd{
font-size: 0.75em;
line-height: 1.5em;
}
#pokefuta p{
line-height: 1.6em;
}
#pokefuta figure{
position: relative;
}
#pokefuta figure:before{
content: "";
display: block;
padding-top: 100%;
}
#pokefuta figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
#pokefuta .slick-slider{
position: relative;
}
#pokefuta .slick-track{
display: flex;
}
#pokefuta .slick-slide{
margin: 0 1.5em;
}
#pokefuta .slick-slide:only-child{
align-self: center;
margin: auto;
}
#pokefuta .slick-arrow{
position: absolute;
top: 50%;
width: 3em;
height: 3em;
padding: 0;
color: transparent;
background: transparent;
transform: translateY(-50%);
overflow: hidden;
z-index: 1;
}
#pokefuta .slick-arrow:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
color: inherit;
background: #333;
}
#pokefuta .slick-prev{}
#pokefuta .slick-prev:before{
transform: rotate(180deg);
}
#spot{
position: relative;
background: #12c2c7;
overflow: hidden;
}
#spot:before{
content: "";
position: absolute;
top: -2em;
left: 0;
width: 100%;
height: calc(100% + 2em);
-webkit-mask-position: top center;
-webkit-mask-size: 100% auto;
background: #fff;
opacity: 0.2;
}
#spot:before{
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
}
#spot header{
display: flex;
align-items: center;
justify-content: center;
grid-gap: 0.5em;
color: #fff;
}
#spot h2{
position: relative;
padding-right: 1.8em;
white-space: nowrap;
}
#spot h2:after{
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1.5em;
height: 2em;
background-image: url("../images/spotIcon.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateY(-50%);
}
#spot nav{
display: flex;
margin-top: 2em;
color: #fff;
}
#spot nav ul{
display: flex;
border: 2px solid currentColor;
}
#spot nav li{
padding: 0.8em 1em;
cursor: pointer;
font-size: 1.125em;
}
#spot nav li.select{
background: #fff;
color: #333;
pointer-events: none;
}
#spot section{
margin-top: 2em;
}
#spot h3{
display: none;
}
#spot .wrap{
position: relative;
z-index: 1;
}
#spotList{}
#spotList h3+div{
display: grid;
grid-gap: 1.5em;
}
#spotList dl{
display: grid;
align-content: start;
grid-gap: 1em;
padding: 1em;
background: #fff;
}
#spotList dt{
color: #12c2c7;
font-size: 1.125em;
font-weight: bold;
line-height: 1.44em;
}
#spotList dt a{
position: relative;
display: block;
padding-right: 1.5em;
color: inherit;
}
#spotList dt a:before{
content: "";
position: absolute;
top: 50%;
right: 0;
width: 1em;
height: 1em;
-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
background: currentColor;
transform: translateY(-50%);
}
#spotList dt+dd{
position: relative;
margin: -1em;
margin-bottom: 0;
order: -1;
}
#spotList dt+dd:before{
content: "";
display: block;
padding-top: 66.66%;
}
#spotList dt+dd+dd{
line-height: 1.6em;
}
#spotList dd{}
#spotList dd img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#spotMap{}
#spotMap h3+div{
background: #fff;
height: min(100vh, 600px);
}
.gm-style-iw-d{}
.gm-style-iw-d a{
font-weight: bold;
}
.gm-style-iw-d a:hover{
text-decoration: none;
}
/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#pokefuta{}
#pokefuta .slick-slide{
width: 80vw;
margin: 0 10vw;
}
}
/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
:root{
--space: 2em;
--subject: 1.5em;
}
#pokefuta{}
#pokefuta dl{
order: 1;
}
#pokefuta p{
order: 2;
}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#pokefuta{}
#pokefuta .slick-prev{
left: -1.5em;
}
#pokefuta .slick-next{
right: -1.5em;
}
#spot{}
#spot nav{
justify-content: center;
}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#spot{}
#spot header{}
#spot header:before,
#spot header:after{
content: "";
width: 50%;
height: 2px;
background: currentColor;
border-radius: 1px;
}
#spot nav{
justify-content: flex-end;
}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#pokefuta{}
#pokefuta .slick-prev{
left: 0;
}
#pokefuta .slick-next{
right: 0;
}
#spotList{}
#spotList h3+div{
grid-template-columns: repeat(2, 1fr);
}
}
/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
:root{
--subject: 2em;
}
#pokefuta{}
#pokefuta section{
grid-template-columns: 1fr 1.2fr;
align-content: start;
}
#pokefuta section:before{
margin-bottom: auto;
}
#pokefuta dl{
margin: auto 0 1em 0;
}
#pokefuta p{
grid-column: 1 / 3;
grid-row: 4;
}
#pokefuta figure{
grid-column: 2;
grid-row: 1 / 4;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
:root{
--space: 3em;
}
}
/* for PC */
@media (min-width: 992px) {
/*992px以上*/
:root{
--space: 4em;
}
#pokefuta{}
#pokefuta .slick-slide{}
#pokefuta .slick-slide:only-child{
transform: translate3d(470px, 0px, 0px);
}
#pokefuta .slick-prev{
left: -1.5em;
}
#pokefuta .slick-next{
right: -1.5em;
}
#pokefuta .--is_few_items .slick-track{
width: auto !important;
transform: translate3d(0, 0, 0) !important;
}
#spotList{}
#spotList h3+div{
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#pokefuta{}
#pokefuta .slick-slide{}
#pokefuta .slick-slide:only-child{
transform: translate3d(585px, 0px, 0px);
}
}