@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* all */

* {
box-sizing: border-box;
}
body {
color:#222;
margin: 0;
padding: 0;
text-align: center;
background: #EEE;
-webkit-text-size-adjust: 100%;
}
body,[type="text"],textare {
font-family: "Yu Gothic Medium","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", sans-serif;
}
body,html {
height: 100%;
}
html {
font-size:10px;
position: relative;
}
a {
outline: none;
text-decoration: none;
}
a img {
text-decoration: none;
border: none;
}
h1,h2,h3,h4,h5,h6,.wf {
display: block;
margin: 0;
padding: 0;
font-family: "Noto Sans JP","游ゴシック体","游ゴシック", "Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN", sans-serif ;
}
p,ul,ol,dl,dt,dd,figure {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
ol {
list-style-position: inside;
}
em {
font-style: normal;
}
dt,dd {
margin: 0;
}
button,input {
appearance: none;
outline: none;
border: none;
}
button,[type="botton"],[type="submit"],[type="reset"] {
cursor: pointer;
}

/* alterna */

.alterna {
text-align: left;
text-indent: -9999px;
}
span.alterna {
display: block;
}

/* btn */

.btn {
cursor: pointer;
}

/* body */

body {
background: url('images/back_main.jpg')center top/cover no-repeat fixed;
position: relative;
}
@media screen and (max-width:1049px) {
body::before {
content:"";
display: block;
width: 100%;
height: 100vh;
position: fixed;
top:0;
left:0;
background: url('images/back_main-sp.jpg')center top/100% 100% no-repeat;
z-index: -1;
}
}
@media print,screen and (min-width:1050px){
body {
background: url('images/back_main.jpg')center top/cover no-repeat fixed;
}
}

/* 横幅設定 */

header,
.container,
#HowTo,
#Present .container + .attention {
margin: 0 auto;
}
@media screen and (max-width:1049px){
header,
.container,
#HowTo,
#Present .container + .attention {
width: 98%;
max-width: 980px;
}
}
@media print,screen and (min-width:1050px){
header,
.container,
#HowTo,
#Present .container + .attention {
width: 1050px;
}
}

/* pc sp */

@media screen and (max-width:1049px){
.pc {
display: none;
}
}
@media print,screen and (min-width:1050px){
.sp {
display: none;
}
}

/* arrow */

.arrow {
position: relative;
}
.arrow::after {
content:"";
display: block;
width: 0;
height: 0;
position: absolute;
}

/* header */

header {
position: relative;
}

@media screen and (max-width:1049px){
header {
width: 100%;
padding: 20px 0 0 ;
}
}
@media print,screen and (min-width:1050px){
header:not(#ListHead) {
height: 770px;
}
header:not(#ListHead) > * {
display: block;
position: absolute;
}
header:not(#ListHead)::after {
content:"";
display: block;
position: absolute;
width: 211px;
height: 300px;
background: url('images/img_illust-menu.png')center center/auto 100% no-repeat;
right: 125px;
top: 280px;
z-index: 30;
}
}

/* #ListHead */

#ListHead {
padding: 20px 0 0; 
}

/* header h1 */

header h1 {
width: 100%;
z-index: 30;
animation-delay: .5s;
}

@media screen and (max-width:1049px){
header h1 {
top:-300px;
animation: maintitle-sp 1s ease forwards;
}
header h1 .alterna {
width: 98%;
min-width: 300px;
max-width: 480px;
height: 0;
padding: 24.7% 0 0;
background: url('images/img_title-main.png')center center/100% auto no-repeat;
margin: 0 auto;
}
}
@media print,screen and (min-width:1050px){
header h1 {
height: 200px;
top:-300px;
animation: maintitle 1s ease forwards;
}
header h1 .alterna {
width: 100%;
height: 100%;
background: url('images/img_title-main.png')center center/auto 100% no-repeat;
}
}

/* header h1 animation */

@keyframes maintitle {
0% {top:-300px;}
100% {top:20px;}
}

/* header picture */

header picture {
width: 673px;
height: 673px;
bottom:0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
header picture img {
display: block;
width: auto;
height: 100%;
}

/* header date */

header .date .alterna {
width: 100%;
height: 100%;
}

@media screen and (max-width:1049px){
header .date {
height: 50px;
margin: 0 0 10px;
}
header .date .alterna {
background: url('images/img_text-date-sp.png')center center/auto 100% no-repeat;
}
}
@media print,screen and (min-width:1050px){
header .date {
width: 270px;
height: 132px;
top: 205px;
left:0;
right: 0;
margin: 0 auto;
opacity: 0;
z-index: 30;
animation: date 2s ease forwards;
}
header .date .alterna {
background: url('images/img_text-date.svg')center center/auto 100% no-repeat;
}
}

/* header date animation */

@keyframes date {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}

/* header text */

header .text {
font-weight: 700;
color:#FFF;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
z-index: 30;
}

@media screen and (max-width:1049px){
header .text {
width: 100%;
height: 300px;
font-size: 1.8rem;
background: url("images/img_main-sp.jpg")center center/auto 100% no-repeat;
position: relative;
}
header .text span {
position: absolute;
display: inline-block;
height: auto;
white-space: nowrap;
left: 10%;
top:50%;
transform: translateY(-50%);
}
}
@media print,screen and (min-width:1050px){
header .text {
font-size: 2.6rem;
left: 275px;
top: 280px;
}
}

/* Spots */

#Spots {
background: linear-gradient(to top,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 70%);
}
@media screen and (max-width:1049px){
#Spots {
padding: 20px 0 0;
overflow: hidden;
}
}
@media print,screen and (min-width:1050px){
#Spots {
margin: -120px 0 5em;
padding: 0 0 5em;
position: relative;
z-index: 50;
}
#Spots .container {
width: 1200px;
margin: 0 auto;
}
}

/* Spots h2 */

#Spots h2 + .read {
color:#FFF;
font-weight: 700;
margin: 0 0 2em;
}

@media screen and (max-width:1049px){
#Spots h2 {
margin: 0 0 .7em;
}
#Spots h2 .alterna {
height: 87px;
background: url('images/img_catch-main-sp.png')center center/auto 100% no-repeat;
}
#Spots h2 + .read {
font-size: 1.6rem;
text-shadow: 3px 3px 0 #000;
padding: 0 .3em;
}
#Spots .read + .catch {
font-size: 1.9rem;
font-weight: 700;
color:#000;
padding: .7em 0;
margin: 0 -1.5vw 1.5em;
background: #FF0;
}
}
@media print,screen and (min-width:1050px){
#Spots h2 {
margin: 0 0 1.5em;
}
#Spots h2 .alterna {
width: 636px;
height: 200px;
margin: 0 auto;
opacity: 0;
background: url('images/img_catch-main.png')center bottom/100% auto no-repeat;
animation: catch 2.5s ease forwards;
position: relative;
}
#Spots h2 + .read {
font-size: 2.2rem;
text-shadow: 4px 4px 0 #000;
}
#Spots h2 .alterna::after {
content:"";
display: block;
width: 9.4%;
height: 30%;
background: url("images/img_emblem01.png")center center/auto 100% no-repeat;
position: absolute;
top:32%;
right:0;
animation: emblems 6s step-end infinite;
animation-delay: 1.5s;
}
}

/* Spots h2 animation */

@keyframes catch {
0% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes emblems {
0% {background: url("images/img_emblem01.png")center center/auto 100% no-repeat;}
16.6% {background: url("images/img_emblem02.png")center center/auto 100% no-repeat;}
33.2% {background: url("images/img_emblem03.png")center center/auto 100% no-repeat;}
49.8% {background: url("images/img_emblem04.png")center center/auto 100% no-repeat;}
66.4% {background: url("images/img_emblem05.png")center center/auto 100% no-repeat;}
83% {background: url("images/img_emblem06.png")center center/auto 100% no-repeat;}
100% {background: url("images/img_emblem06.png")center center/auto 100% no-repeat;}
}

/* Spots items */

#Spots .items li p {
display: block;
position: relative;
}

@media screen and (max-width:479px){
#Spots .items {
padding: 0 10px;
}
}
@media print,screen and (min-width:480px){
#Spots .items {
display: flex;
flex-wrap: wrap;
}
#Spots .items li {
min-width: 185px;
max-width: 185px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#Spots .items li p {
display: block;
position: relative;
}
}
@media screen and (min-width:480px) and (max-width:1049px){
#Spots .items {
justify-content: space-around;
}
}
@media screen and (max-width:1049px){
#Spots .items li {
padding: 0 0 1.5em;
margin: 0 0 1.5em;
border-bottom:1px dashed #FFF;
}
}
@media print,screen and (min-width:1050px) {
#Spots .items {
justify-content: space-between;
}
}

/* Spots emblem */

#Spots .emblem {
z-index: 30;
}
#Spots .emblem span {
display: inline-block;
width: 90px;
height: 90px;
filter: grayscale() drop-shadow(0 0 3px #FFF);
animation: shine 6s ease infinite;
}
#Spots .harajiri .emblem span {
background: url('images/img_emblem01.png')center center/auto 100% no-repeat;
}
#Spots .chinda .emblem span {
background: url('images/img_emblem02.png')center center/auto 100% no-repeat;
}
#Spots .enaido .emblem span {
background: url('images/img_emblem03.png')center center/auto 100% no-repeat;
}
#Spots .fukouji .emblem span {
background: url('images/img_emblem04.png')center center/auto 100% no-repeat;
}
#Spots .deaibashi .emblem span {
background: url('images/img_emblem05.png')center center/auto 100% no-repeat;
}
#Spots .inukaiminato .emblem span {
background: url('images/img_emblem06.png')center center/auto 100% no-repeat;
}

/* Spots emblem anime */

@keyframes shine {
0% {filter: grayscale(1) drop-shadow(0 0 0 #FFF);}
50% {filter: grayscale(0) drop-shadow(0 0 3px #FFF);}
100% {filter: grayscale(1) drop-shadow(0 0 0 #FFF);}
}

/* Spots etc */

#Spots .photo {
z-index: 20;
margin: -20px 0 0;
}
#Spots .photo img {
height: auto;
}
#Spots .name,
#Spots .read {
color:#FFF;
}
#Spots .name {
font-size: 1.7rem;
padding: .4em 0;
}
#Spots .name .sub {
font-size: 1.4rem;
}
#Spots .items .read {
font-size: 1.4rem;
line-height: 160%;
text-align: left;
}
#Spots .items .button {
padding: .7em 0 0;
}
#Spots .items a {
display: inline-block;
font-size: 1.3rem;
color:#000;
background: #FF0;
padding: .3em 1em;
border-radius: 6px;
}
#Spots .items a:hover {
opacity: .6;
}

@media screen and (max-width:1049px){
#Spots .photo img {
width: 185px;
}
}
@media print,screen and (min-width:1050px){
#Spots .photo img {
width: 100%;
}
}

/* HowTo h2 */

#HowTo {
margin: 0 auto 5em;
}
#HowTo .catch {
font-weight: 700;
color:#FFF;
margin: 0 0 .7em;
}
#HowTo h2 {
border-radius: 6px;
letter-spacing: .1em;
background: #FFF;
padding: .2em 0 ;
margin: 0 auto 2em;
}
#HowTo h2::after {
bottom:-10px;
left: 50%;
transform: translateX(-50%);
border-top: 10px solid #FFF;
border-left:170px solid transparent;
border-right:170px solid transparent;
}

@media screen and (max-width:1049px){
#HowTo .catch {
font-size: 1.6rem;
text-shadow: 3px 3px 0 #000;
}
#HowTo h2 {
width: 300px;
font-size: 2.2rem;
padding: .4em 0 ;
}
#HowTo h2::after {
border-top: 10px solid #FFF;
border-left:120px solid transparent;
border-right:120px solid transparent;
}
}
@media print,screen and (min-width:1050px){
#HowTo .catch {
font-size: 2.2rem;
text-shadow: 4px 4px 0 #000;
}
#HowTo h2 {
width: 370px;
font-size: 2.0rem;
}
#HowTo h2::after {
border-top: 10px solid #FFF;
border-left:170px solid transparent;
border-right:170px solid transparent;
}
}

/* HowTo contents */

@media print,screen and (min-width:1050px){
#HowTo > .contents {
display: flex;
justify-content: space-between;
align-items: stretch;
}
}

/* HowTo items */

#HowTo .items {
width: 100%;
text-align: left;
counter-reset: howto;
}
#HowTo .items li {
padding: 0 0 1.5em;
margin: 0 0 1.5em;
color:#FFF;
border-bottom:1px dashed #FFF;
}
#HowTo .items li::before {
counter-increment: howto;
content:counter(howto);
font-size: 2.4rem;
display: flex;
justify-content: center;
align-items: center;
line-height: 100%;
min-width: 2.2em;
max-width: 2.2em;
height: 2.2em;
border-radius: 2em;
border:1px solid #FFF;
}

@media screen and (max-width:1049px){
#HowTo .items {
padding: 0 7px;
}
#HowTo .items li::before {
margin: 0 auto .5em;
}
}
@media print,screen and (min-width:1050px){
#HowTo .items li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
#HowTo .items li::before {
margin: 0 .5em 0 0;
}
}

/* HowTo items h3 & read & map */

#HowTo .items h3 {
color:#FF0;
padding: 0 0 .2em;
}
#HowTo .items h3 + .read {
font-size: 1.6rem;
line-height: 180%;
}
#HowTo .items .map {
width: 100%;;
margin: .7em 0 0 0;
}
#HowTo .items .map iframe {
width: 100%;
height: 300px;
}
#HowTo .items .map .button {
text-align: right;
}
#HowTo .items .map .button a {
font-size: 1.3rem;
color:#FFF;
display: inline-block;
padding: .3em .7em;
margin: .5em 0 0;
border:1px solid #FFF;
transition: .5s ease;
}
#HowTo .items .map .button a:hover {
background: rgba(255,255,255,.2);
}
#HowTo .items .map .button a::before {
content:"";
display: inline-block;
width: 0;
height: 0;
border-left:5px solid #FFF;
border-top:4px solid transparent;
border-bottom:4px solid transparent;
margin: 0 .8em 0 0;
transition: .5s ease;
}
#HowTo .items .map .button a:hover::before {
margin: 0 .4em;
}

@media screen and (max-width:1049px){
#HowTo .items h3 {
font-size: 1.7rem;
text-align: center;
}
}
@media print,screen and (min-width:1050px){
#HowTo .items h3 {
font-size: 2.2rem;
}
}

/* HowTo another */

@media screen and (max-width:1049px){
#HowTo .contents .another {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
position: fixed;
background: #FF0;
left:0;
bottom:0;
z-index: 99999;
}
}
@media print,screen and (min-width:1050px){
#HowTo .contents .another {
min-width: 240px;
max-width: 240px;
margin: 0 0 0 4em;
position: relative;
}
#HowTo .contents .another .box {
height: 100%;
position: relative;
}
#HowTo .contents .another .box > * {
width: 100%;
position: absolute;
top:50%;
left: 0;
transform: translateY(-50%);
}
#HowTo .contents .another .box .timer.after {
background: #FF0;
font-size: 1.4rem;
padding: 2em;
border-radius: 8px;
box-shadow: 3px 3px 3px #000;
}
#HowTo .another .box .timer.after > span {
display: block;
}
#HowTo .another .box .timer.after > .title {
font-size: 1.8rem;
color:#FFF;
padding: .4em .7em;
margin: 0 0 .7em;
background: #F00;
border-radius: 2em;
}
#HowTo .another .box .timer.after > .qr {
width: 100%;
}
#HowTo .another .box .qr > img {
width: 100%;
height: auto;
}
#HowTo .another .box .timer.after > .attention {
text-align: left;
padding: 1em 0 0;
}
#HowTo .contents .another .photo {
display: block;
width: 100%;
height: 490px;
background: url("images/img_photo-boy02.png")center bottom/90% auto no-repeat;
filter: drop-shadow(3px 3px 1px #000);
}
#HowTo .another .photo .text {
display: inline-block;
position: relative;
padding: .7em;
background: #FFF;
border-radius: 10px;
font-size: 1.4rem;
}
#HowTo .another .photo .text em {
display: block;
font-size: 1.8rem;
}
#HowTo .another .photo .text::after {
content:"";
display: block;
width: 0;
height: 0;
border-top:12px solid #FFF;
border-left:8px solid transparent;
border-right:8px solid transparent;
position: absolute;
bottom:-12px;
left:50%;;
transform: translateX(-50%);
}
}

/* HowTo contents another button */

#HowTo .contents .another .button {
animation: timerbtn 2s ease forwards;
opacity: 0;
}
#HowTo .contents .another .button > * {
font-size: 1.5rem;
}
#HowTo .contents .another .button > a {
display: inline-block;
background: #F00;
color:#FFF;
padding: .4em 1.5em;
border-radius: 1.8em;
}

@keyframes timerbtn {
0% {opacity: 0;}
80% {opacity: 0;}
100% {opacity: 1;}
}

/* Present */

#Present .container > span.photo {
display: block;
width: 190px;
height: 190px;
position: absolute;
background: url("images/img_photo-boy01.png")center center/auto 100% no-repeat;
}

@media screen and (max-width:1049px){
#Present {
background: #FFFCCD;
box-shadow: 0 0 30px #B78645 inset;
padding: 10px 10px 200px;
margin: 0;
position: relative;
}
#Present h2 {
padding: 1em 0 0;
}
#Present h2 .alterna {
height: 45px;
background: url("images/img_title02-sp.svg")center center/auto 90% no-repeat;
}
#Present .container > span.photo {
bottom:0;
left:50%;
transform: translateX(-50%);
}
}
@media print,screen and (min-width:1050px){
#Present {
margin: 0 0 10em;
}
#Present > .container {
background: url("images/back_paper-old.png")center center/100% 100% no-repeat;
padding: 5em 0;
filter: drop-shadow(7px 7px 4px #000);
position: relative;
}
#Present h2 {
padding: 0 0 .5em;
}
#Present h2 .alterna {
height: 45px;
background: url("images/img_title02.svg")center center/auto 100% no-repeat;
}
#Present .container > span.photo {
bottom:-10px;
left:7%;
}
}

/* Present catch */

@media screen and (max-width:1049px){
#Present h2 + .catch {
margin: 0 0 1em;
}
#Present h2 + .catch .alterna {
text-indent: inherit;
font-size: 1.8rem;
text-align: center;
}
#Present h2 + .catch .alterna em {
color:red;
}
}
@media print,screen and (min-width:1050px){
#Present h2 + .catch .alterna {
width: 90px;
height: 90px;
border-radius: 50px;
border:2px solid #222;
background: url("images/img_text-number.svg")center center/auto 70% no-repeat #FFF;
margin: 0 auto;
position: relative;
z-index: 999;
}
}

/* Present items */

#Present .items > li {
width: 100%;
background: #FFF200;
border-radius: 8px;
box-shadow: 4px 4px 2px #5B5245;
padding: 1.2em 1.7em;
position: relative;
}
@media screen and (max-width:1049px){
#Present .items > li {
margin: 0 0 10px;
}
}
@media print,screen and (min-width:1050px){
#Present .items {
width: 80%;
display: flex;
justify-content: space-between;
align-items: stretch;
margin: -60px auto 1em;
}
#Present .items > li {
margin: 0 1.5%;
}
}

/* Present items contents */

#Present .items h3 {
font-size: 2.3rem;
padding: 0 0 .5em;
margin: 0 0 .5em;
border-bottom:2px dotted #222;
}
#Present .items .contents {
font-size: 1.4rem;
text-align: left;
line-height: 160%;
}
#Present .items .contents em:not(.note em){
color:red;
}


/* Present contents present */

#Present .items .contents .present1.alterna {
height: 80px;
background: url("images/img_text-present1.png")center center/auto 70px no-repeat;
}
#Present .items .contents .present2.alterna {
height: 100px;
background: url("images/img_text-present2.png")center center/auto 90px no-repeat;
}


/* Present items contents btn */

#Present .items .contents .btn {
display: block;
margin: 1.2em 0 .7em 0;
padding: 1em .5em 1em 5em;
border-radius: 6px;
border:1px solid #000;
background: rgba(255,255,255,1);
position: relative;
}
#Present .items .contents .btn:hover {
background: rgba(255,255,255,.8);
}
#Present .items .contents .btn::before {
content:"";
display: inline-block;
width: 0;
height: 0;
border-left:6px solid #000;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
margin: 0 .4em 0 0;
vertical-align: middle;
}
#Present .items .contents .btn::after {
content:"";
display: block;
width: 50px;
height: 70px;
background: url("images/img_photo-card.jpg")center center/auto 100% no-repeat;
position: absolute;
left:10px;
top:50%;
transform: translateY(-50%) rotate(10deg) scale(.9);
transition: .5s ease;
}
#Present .items .contents .btn:hover::after {
transform: translateY(-50%) rotate(15deg) scale(1.0);
}

/* Present attention */

#Present .attention {
font-size: 1.4rem;
}
#Present .items + .attention {
color:#222;
margin: 0 0 1em;
}
#Present .container + .attention {
text-align: left;
}

@media screen and (max-width:1049px){
#Present .attention {
text-align: left;
}
#Present .container + .attention {
padding: 1em 0 0;
line-height: 170%;
}
}
@media print,screen and (min-width:1050px){
#Present .container + .attention {
color:#FFF;
text-shadow: 2px 2px 0 #000;
padding: 1em 4em;
}
}

/* Present another */

#Present .another {
background: rgba(255,255,255,.6);
border-radius: 8px;
font-weight: 700;
text-align: left;
}
#Present .another .title {
font-size: 1.4rem;
min-width: 5em;
max-width: 5em;
height: 5em;
display: flex;
justify-content: center;
align-items: center;
background: #FFF200;
border-radius: 3em;
margin: 1em 1em 0 0;
box-shadow: 2px 2px 2px #333;
}
#Present .another div.read {
position: relative;
}
#Present .another em {
color:red;
}

@media screen and (max-width:1049px){
#Present .another {
padding: 10px;
}
#Present .another .title {
margin: 0 auto .7em;
}
#Present .another p.read {
font-size:1.8rem;
line-height: 170%;
}
}
@media print,screen and (min-width:1050px){
#Present .another {
width: 77%;
padding: 1em 1.5em 1em 130px;
margin: 0 auto;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
#Present .another p.read {
font-size:2.0rem;
line-height: 130%;
}
}

/* Present another button */

#Present .another .button {
padding: 1em 0 .5em;
}
#Present .another .button .btn {
display: inline-block;
font-size: 1.4rem;
color:#222;
padding: .6em 1em;
border:1px solid #222;
border-radius: 6px;
background: #FFF200;
transition: .5s ease;
}

@media screen and (max-width:1049px){
#Present .another .button {
text-align: center;
}
#Present .another .button .btn {
line-height: 130%;
}
}
@media print,screen and (min-width:1050px){
#Present .another .button .btn::before {
content:"";
display: inline-block;
width: 0;
height: 0;
border-left:5px solid #222;
border-top:4px solid transparent;
border-bottom:4px solid transparent;
margin: 0 .3em;
transition: .5s ease;
}
#Present .another .button .btn:hover::before {
margin: 0 0 0 .6em;
}
}

/* Present another note */

@media screen and (max-width:1049px){
#Present .another .note {
display: none;
}
}
@media print,screen and (min-width:1050px){
#Present .another .note {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 8.5em;
height: 8.5em;
padding: .7em 1em 0;
text-align: center;
border-radius: 7em;
border:2px solid #222;
position: absolute;
top:-5em;
right: -7.5em;
background: #FFF;
font-size: 1.4rem;
font-weight: 700;
line-height: 120%;
}
#Present .another .note em {
font-size: 2.0rem;
line-height: 110%;
margin: .2em 0 0;
}
#Present .another .note em .sub {
font-size: 1.2rem;
}
}

/* WhatCard */

#WhatCard {
display: inline-block;
}
#WhatCard .cover {
display: flex;
justify-content: flex-start;
}
#WhatCard .bubble {
background: #FFF;
border-radius: 6px;
position: relative;
}
#WhatCard .bubble::before {
content:"";
display: block;
width: 0;
height: 0;
border-right:18px solid #FFF;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
position: absolute;
top:50%;
left:-18px;
transform: translateY(-50%);
}

@media screen and (max-width:1049px){
#WhatCard {
margin: 0 auto 10px;
}
#WhatCard .bubble {
padding: .7em;
}
}
@media print,screen and (min-width:1050px){
#WhatCard {
margin: 0 auto;
}
#WhatCard .bubble {
padding: .7em 1em;
}
}


/* WhatCard cover */

#WhatCard .photo {
padding: 0 0 10px;
}
#WhatCard .photo img {
height: 130px;
width: auto;
border:4px solid #FFF;
box-shadow: 3px 3px 2px #000;
}
#WhatCard .contents {
min-height: 130px;
text-align: left;
}
#WhatCard .contents h2 {
font-size: 2.0rem;
color:#651B05;
margin: 0 0 .4em; 
padding: 0;
}
#WhatCard .contents .read {
font-size: 1.4rem;
}
#WhatCard .contents .read em {
color:red;
}

@media screen and (max-width:1049px){
#WhatCard .contents {
padding: 0 0 0 10px;
}
#WhatCard .contents .read {
line-height: 170%;
}
}
@media print,screen and (min-width:1050px){
#WhatCard .contents {
padding: 0 150px 0 2em;
background: url("images/img_photo-boy03.png")right bottom/auto 170px no-repeat;
}
}

/* ShopList */


#ShopList .container {
font-size: 1.4rem;
margin: 0 0 7px;
}
#ShopList h2 {
font-size: 3.0rem;
color:#FFF;
text-shadow:3px 3px 3px #000;
padding: 2.5em 0 1.5em;
}
#ShopList .cover .pre {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color:#FFF;
}

@media screen and (max-width:479px){
#ShopList .container {
margin: auto;
top:0;
bottom: 0;
}
}
@media screen and (min-width:480px) and (max-width:1049px){
#ShopList .container {
margin: 0 auto;
top:15px;
}
}
@media screen and (max-width:1049px){
#ShopList {
z-index: 9999999;
}
#ShopList .cover {
padding: 0 10px;
}
}
@media print,screen and (min-width:1050px){
#ShopList {
width: 1050px;
margin: 0 auto 60px;
}
#ShopList .container {
}
#ShopList .cover {
padding: 15px;
}
}

/* ShopList items */

#ShopList .items {
}
#ShopList .items > li {
background: #FFF;
padding: 0 10px 10px 10px;
border-radius: 6px;
margin: 0 10px 1em;
}
#ShopList .items .category {
font-size: 1.2rem;
background:#FFF200;
border-radius: 6px 6px 0 0;
margin: 0 -10px .7em;
}
#ShopList .items p:not(.category):not(.photo):not(:last-of-type) {
padding: 0 0 .5em;
margin: 0 0 .5em;
border-bottom:1px dotted;
}
#ShopList .items .photo {
display: block;
width: 100%;
max-width: 320px;
height: 0;
overflow: hidden;
margin: 0 0 .5em;
}
#ShopList .items .photo img {
width: auto;
height: 100%;
}
#ShopList .items .name {
font-size: 1.8rem;
color:#651B05;
}
#ShopList .items .name .sub {
font-size: 80%;
}
#ShopList .items .name {
height: 2.4em;
}
#ShopList .items .read {
line-height: 140%;
height: 3.6em;
}

@media screen and (max-width:479px){
#ShopList .items .read {
height: 3.6em;
}
}
@media print,screen and (min-width:480px){
#ShopList .items {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media print,screen and (min-width:480px) and (max-width:1049px){
#ShopList .items > li {
min-width: 49%;
max-width: 49%;
margin: 0 1% 1em 0;
}
#ShopList .items .read {
height: 4.8em;
}
}
@media print,screen and (min-width:1050px){
#ShopList .items > li {
min-width: 32.3%;
max-width: 32.3%;
margin: 0 1% 2em 0;
}
#ShopList .items .read {
height: 3.6em;
}
}

/* ShopList items data */

#ShopList .items .data {
padding: 10px;
background: #F5EADE;
text-align: left;
}
#ShopList .items .data span.title {
display: inline-block;
border: 1px solid rgba(0,0,0,.4);
background: rgba(255,255,255,.3);
font-size: 1.1rem;
text-align: center;
min-width: 5em;
padding: .1em ;
margin: 0 .6em 0 0;
}
#ShopList .items .data span.title .hide {
display: none;
}

/* ShopList btn close */

#ShopList .btn.close {
display: inline-block;
font-size: 1.3rem;
padding: .4em 1em;
border-radius: 2em;
background: #FFF;
}
#ShopList .btn.close::before {
content:"×";
}

/* ShopList + black */

#ShopList + .black {
width: 0;
height: 0;
overflow: hidden;
background: rgba(0,0,0,.8);
position: fixed;
transition: .5s ease;
}
#ShopList + .black.appear {
width: 100%;
height: 100%;
}
.black .container {
position: absolute;
}
.black .container,
.black .container .button {
display: none;
}
.black.appear .container,
.black.appear .container .button {
display: block;
}
.black.appear .container .button {
padding: 10px 0 0;
}
.black.appear .container .closemap {
display: inline-block;
width: 8em;
height: 2.5em;
background: #FFF;
border-radius: 2em;
}
.black.appear .container .closemap::before {
content:"×";
}
#ShopList + .black,
.black .container {
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:1049px){
.black.appear .container {
width: 90%;
height: auto;
}
}
@media print,screen and (min-width:1050px){
.black.appear .container {
width: 60%;
height: auto;
}
}

/* ShopList map */

#ShopList span.map {
display: block;
text-align: right;
padding: 7px 0 0;
}
#ShopList span.map .formap {
display: inline-block;
font-size: 1.2rem;
width:8em;
height: 2em;
border:1px solid;
background: none;
}

/* black iframe */

.black iframe {
width: 100%;
}
@media screen and (max-width:1049px){
.black iframe {
height: 70vh;
}
}
@media print,screen and (min-width:1050px){
.black iframe {
height: 500px;
}
}

/* footer */

footer {
font-size:1.4rem;
color:#FFF;
background: rgba(0,0,0,.6);
}


@media screen and (max-width:1049px){
footer {
padding: 2em 0 70px;
}
}
@media print,screen and (min-width:1050px){
footer {
padding: 2em 0 4em;
}
footer .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
}
}

/* footer logo */

footer .logo img {
width: auto;
height: 100%;
}

@media screen and (max-width:1049px){
footer .logo {
width: 280px;
height: 54px;
margin: 0 auto 15px;
}
}
@media print,screen and (min-width:1050px){
footer .logo {
min-width: 300px;
max-width: 300px;
height: 58px;
}
}

/* footer info */

footer .info {
text-align: left;
}
footer .info .title {
color:#FFF200;
padding: .2em 0;
}
footer .info a {
color:#FFF;
}

@media screen and (max-width:1049px){
footer .info {
padding: 0 10px;
line-height: 170%;
}
footer .info dt {
text-align: center;
}
footer .info .title {
font-size: 1.6rem;
}
footer .info .fax {
margin: 0 0 .4em;
}
footer .info .url {
text-align: center;
}
footer .info .url a {
display: inline-block;
padding: .3em .6em;
border:1px solid rgba(255,255,255,.7);
}
}
@media print,screen and (min-width:1050px){
footer .info .title {
font-size: 1.8rem;
}
}

/* End */

#End {
width: 0;
height: 0;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,.9);
overflow: hidden;
z-index: 99999999999;
transition: .5s ease;
}
#End.appear {
width: 100.2%;
height: 100.2%;
}
#End .container {
font-size: 1.4rem;
text-align: left;
max-width: 310px;
max-height: 90vh;
padding: 1.5em;
border-radius: 8px;
background: #FF0;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
opacity: 0;
transition: .7s ease;
transition-delay: .7s;
}
#End.appear .container {
opacity: 1;
}
#End .container .title {
font-size: 1.7rem;
margin: 0 0 .7em;
}
#End .container .title,
#End .container .writer,
#End .container .button {
text-align: center;
}
#End .container .writer {
padding: 1em 0;
}
#End .container .close {
font-size: 1.3rem;
display: inline-block;
color: #FFF;
background: #000;
padding: .1em 1.5em;
cursor: pointer;
}
#End .container .close::before{
content:"×";
}