/* CSS Document */
#sakagura{
padding-top: 0;
color: #000;
}
#hero{
text-align: center;
}
#interview{}
#interview h2{
text-align: center;
}
#interview h2 img{
max-width: 500px;
}
#interview h2+div{
margin-top: 2em;
}
#interview dl{
display: flex;
align-items: stretch;
flex-direction: column;
}
#interview dt,
#interview dd{
line-height: 1.4em;
}
#interview dt{
align-self: center;
}
#interview dt span{
font-weight: bold;
}
#interview dt+dd{
margin-bottom: 1em;
min-height: 0%;
order: -1;
}
#interview dt+dd a{
display: block;
}
#interview dt+dd img{
width: 100%;
height: auto;
}
#interview dd+dd{
margin-top: 1em;
}
#map{
padding-bottom: 2em;
}
#map h2{
text-align: center;
}
#map .center{
margin-top: 1em;
}
#mapLead{}
#mapLead p{
font-weight: bold;
}
#mapLead dl{
display: flex;
flex-wrap: wrap;
text-align: center;
}
#mapLead dt{
order: -1;
}
#mapLead dd{
margin-top: 0.5em;
}
#mapLead dd img{
max-width: 54px;
}
#mapList{
margin-top: 0;
}
#mapList ul{
padding: 1em;
list-style: none;
}
#mapList li{
position: relative;
padding-left: 2em;
color: #1a1a1a;
line-height: 1.4em;
cursor: pointer;
}
#mapList li:before{
content: "";
position: absolute;
left: 0;
top: -0.2em;
width: 1.8em;
height: 1.8em;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
#mapList li[data-marker-pref="青森県"]:before{
background-image: url("../images/pin-aomori.svg");
}
#mapList li[data-marker-pref="岩手県"]:before{
background-image: url("../images/pin-iwate.svg");
}
#mapList li[data-marker-pref="秋田県"]:before{
background-image: url("../images/pin-akita.svg");
}
#mapList li[data-marker-pref="宮城県"]:before{
background-image: url("../images/pin-miyagi.svg");
}
#mapList li[data-marker-pref="山形県"]:before{
background-image: url("../images/pin-yamagata.svg");
}
#mapList li[data-marker-pref="福島県"]:before{
background-image: url("../images/pin-fukushima.svg");
}
#mapList li[data-marker-pref="新潟県"]:before{
background-image: url("../images/pin-niigata.svg");
}
#myPlan{}
#myPlan a{
width: 100%;
background: #FE0000;
border-radius: 4px;
font-size: 1.2em;
font-weight: bold;
}
#myPlan p{
margin-top: 1em;
font-weight: bold;
}
#myPlan .buttonSet{
width: 100%;
}
#myPlan .wrap{
display: flex;
flex-direction: column;
align-items: center;
}
#stamprally{
margin-top: 2em;
}
#rule{
pointer-events: none;
}
#rule:not(.open){
cursor: pointer;
}
#rule:not(.open) h3+div,
#rule:not(.open) section+section,
#rule:not(.open) footer{
display: none;
}
#rule:not(.open) menu{
display: none;
}
#rule:not(.open) .wrap{
pointer-events: all;
}
#rule.open{}
#rule.open h3+div+div{
display: none;
}
#rule menu{
position: absolute;
top: 1em;
right: 1em;
width: 1.5em;
height: 1.5em;
background: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat;
background-size: cover;
color: transparent;
overflow: hidden;
pointer-events: all;
cursor: pointer;
z-index: 1;
}
#rule h2{
text-align: center;
}
#rule h2 img{
max-width: 500px;
}
#rule h3{
text-align: center;
}
#rule h3 img{
max-width: 800px;
}
#rule h3+div{
display: flex;
}
#rule h4{
color: #006934;
text-align: center;
}
#rule h4 img{
max-width: 500px;
}
#rule dt{
display: none;
}
#rule footer{
padding: 0;
}
#rule footer p{
padding: 1em;
background: #000;
color: #fff;
}
#rule .wrap{
position: relative;
background: #EBEAB1;
}
#externalLink{}
#externalLink h2{
display: none;
}
#externalLink h3{}
#externalLink h3:before{
content: "◆";
}
#externalLink ul{
display: flex;
flex-wrap: wrap;
}
#externalLink ul+ul{
margin-top: 1em;
}
#externalLink li{
display: flex;
}
#externalLink a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 1.4em;
}
#externalLink a[href="#"]{
pointer-events: none;
}
#externalLink .text{
min-height: 4em;
padding: 0.5em 1em;
background: #000;
color: #fff;
}
#externalLink .banner{
height: 5em;
}
.map{
position: relative;
}
.map div+div{
margin-top: auto;
}
.map iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.infoWin{
position: relative;
display: flex;
padding: 10px;
color: #007FD1;
fill: currentColor;
border-image-source: url('data:image/svg+xml;charset=UTF-8,');
border-image-slice: 33.33% fill;
border-image-width: 10px;
border-image-repeat: round;
border-style: solid;
border-width: 10px;
}
.infoWin div{
display: flex;
flex-direction: column;
}
.infoWin dl{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0;
padding-left: 4em;
font-weight: bold;
font-size: 14px;
background: url('data:image/svg+xml;charset=UTF-8,') top left no-repeat;
background-size: 3em auto;
}
.infoWin dt{
width: 100%;
padding-bottom: 0.5em;
color: #007FD1;
border-bottom: 1px solid currentColor;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.infoWin dt+dd{
width: auto;
margin: 0 0 0.8em 0;
padding: 0.5em 1em;
background: #007FD1;
border-radius: 2em;
color: #fff;
line-height: 1em;
order: -1;
}
.infoWin dd{
font-size: 0.8em;
}
.infoWin dd:nth-of-type(2){
width: 54%;
}
.infoWin dd:nth-of-type(3){
width: 42%;
margin-left: auto;
}
.infoWin p{
margin: 0.8em 0;
font-weight: bold;
line-height: 1.4em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.infoWin p+ul{
margin-top: 0.5em;
order: 1;
}
.infoWin span{
display: block;
padding: 0.5em;
font-size: 10px;
border: 1px solid currentColor;
text-align: center;
font-weight: bold;
}
.infoWin ul{
display: flex;
justify-content: space-between;
margin-top: 0.8em;
}
.infoWin li{
width: calc(50% - 0.25em);
list-style: none;
}
.infoWin li a{
display: flex;
align-items: center;
justify-content: center;
padding: 0.8em;
font-size: 0.8em;
line-height: 1em;
}
.infoWin li a:after{
content: "";
width: 1em;
height: 1em;
margin-left: 0.5em;
background: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat;
background-size: contain;
}
.infoWin figure{
margin-bottom: 10px;
padding: 4px;
border: 2px solid currentColor;
border-radius: 4px;
}
.infoWin figure img{
width: 100%;
height: auto;
}
.infoWin button{
padding: 0.8em;
background: #FE0000;
border: none;
border-radius: 0;
color: #fff;
font-size: 0.8em;
line-height: 1em;
cursor: pointer;
}
.infoWin button.hidden{
display: none;
}
.infoWin button[data-jc-action="favorite-spot#delete"]{
background: #ccc;
}
.infoWin [class^="category"]{
height: 2.4em;
background-position: top left;
background-repeat: no-repeat;
background-size: contain;
color: transparent;
}
.infoWin .category1{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.infoWin .category1.off{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.infoWin .category2{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.infoWin .category2.off{
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.infoWin .more{
background: #FF8B00;
}
/* for all */
@media (max-width: 1199px) {
/*1199px以下*/
}
@media (max-width: 991px) {
/*991px以下*/
#mapLead{
display: flex;
flex-direction: column;
align-items: center;
}
#mapList{
height: 10em;
overflow-y: scroll;
}
#mapList ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#mapList li{
width: calc(50% - 1em);
}
#mapList li:nth-of-type(n+3){
margin-top: 1em;
}
}
/* for mobile */
@media (max-width: 767px) {
/*767以下px*/
#interview{
margin-top: 1em;
background: #FFFCDC;
}
#interview dl+dl{
margin-top: 2em;
}
#interview dt{
font-size: 0.8em;
}
#interview dd{
font-size: 0.7em;
}
#interview .wrap{
padding: 0 0.5em;
}
#mapLead{}
#mapLead dl{
margin-top: 1em;
}
#rule{}
#rule header,
#rule section{
padding: 1em;
}
#rule section{
padding-top: 0;
}
#rule h3+div{
flex-direction: column;
}
#rule dl+dl{
margin-top: 2em;
}
#externalLink{}
#externalLink ul{
justify-content: space-between;
}
#externalLink li{
width: calc(50% - 0.5em);
}
#externalLink li:nth-of-type(n+3){
margin-top: 1em;
}
#externalLink .wrap{
padding: 0 1em;
}
.map{
height: 160vw;
min-height: 520px;
}
.infoWin{
flex-direction: column;
padding: 5px;
border-image-slice: 10px 10px 10px 10px fill;
border-image-width: 10px;
border-image-repeat: round;
zoom: 0.5;
}
.infoWin figure{
margin-bottom: 5px;
}
.infoWin div+div{
margin-bottom: 1em;
order: -1;
}
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#mapLead{}
#mapLead dl{
justify-content: space-between;
}
#mapLead dt,
#mapLead dd{
width: 3em;
}
#rule{}
#rule h2{
padding: 0 1em;
}
#rule h3{
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
#rule h3 img{
width: 150vw;
}
.infoWin{
font-size: 3vw;
}
.infoWin dl{
font-size: 1em;
padding-left: 3em;
background-size: 2em auto;
}
.infoWin span{
font-size: 2.5vw;
}
.infoWin li a,
.infoWin button{
font-size: 3vw;
}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#mapLead{}
#mapLead dt,
#mapLead dd{
width: 14.28%;
}
}
/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#interview{
padding-bottom: 0;
}
#interview h2+div{
display: flex;
justify-content: space-between;
}
#interview dl{
width: calc(50% - 1em);
}
#interview .wrap{
padding: 2em;
background: #FFFCDC;
}
#mapLead{}
#mapLead p{
font-size: 1.2em;
}
#mapLead dt,
#mapLead dd{
width: 14.28%;
}
#rule{}
#rule header,
#rule section{
padding: 2em 4em;
}
#rule section{
padding-top: 0;
}
#rule h3+div{
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
#rule dl{
width: calc(50% - 1em);
}
#rule dl:nth-of-type(n+3){
margin-top: 2em;
}
#externalLink{}
#externalLink li{
width: calc(25% - 0.75em);
margin-left: 1em;
}
#externalLink li:nth-of-type(n+5){
margin-top: 1em;
}
#externalLink li:nth-of-type(4n+1){
margin-left: 0;
}
.infoWin{
width: 100%;
align-items: flex-start;
justify-content: space-between;
}
.infoWin > *{
width: calc(50% - 0.5em);
}
.infoWin > div+div{
margin-top: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
/*768px～991px*/
#mapLead{}
#mapLead dl{
margin-top: 2em;
}
.map{
height: 75vw;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
/*768px～1199px*/
}
/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#interview{}
#interview dt{
align-self: center;
}
#mapLead{
position: relative;
padding: 4em 28em 1em 0;
}
#mapLead p{
text-align: center;
}
#mapLead dl{
position: absolute;
top: 0;
right: 0;
width: 26em;
}
#mapBody{
display: flex;
}
#mapBody .map{
width: calc(100% - 15em);
}
#mapList{}
#mapList{
width: 15em;
height: 50vw;
overflow-y: scroll;
}
#mapList li+li{
margin-top: 1em;
}
.infoWin{
min-width: 480px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}
/* ie */
@media all and (-ms-high-contrast: none) {
#rule{}
#rule menu{
background: #000;
border-radius: 100%;
}
#rule menu:before{
content: "×";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 1.9em;
}
.infoWin{
border: 3px dotted currentColor;
border-radius: 5px;
}
.infoWin dl{
padding: 0;
}
.infoWin li{}
.infoWin li a{}
.infoWin li a:after{
content: none;
}
.infoWin figure{
min-height: 0%;
}
.infoWin [class^="category"]{
height: auto;
color: currentColor;
}
.infoWin [class^="category"]:before{
content: "●";
}
.infoWin [class^="category"].off{
color: #cccccc;
}
}