@charset "UTF-8";
/* CSS Document */
ol#bread {
display: flex;
}
ol#bread li {
position: relative;
}
ol#bread li:after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: 'Font Awesome 5 Pro';
content: '\f054';
}
ol#bread li:last-child {
padding-right: 0;
margin-right: 0;
}
ol#bread li:last-child:after {
content: none;
}

#aboutFv h3, #about h4, #about h6, #about p {
font-weight: bold;
}
#about h4, #about h6, #about p {
line-height: 180%;
}

#members article {
border-top: 1px solid #000;
}
#members article h3, #members article h3 span, #members article > div h4, #members article ul li h5, #members article ul li h6 {
font-weight: bold;
}
#members article h3 {
font-family: "DINNextLTPro-BoldCondensed";
}
#members article h3 span {
font-family: "Noto Sans JP", "Yu Gothic medium", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
}
#members article > div ul {
display: flex;
flex-wrap: wrap;
}
#members article > div ul:last-child {
padding-bottom: 0;
}
#members article ul li h5 {
color: #727171;
}

#shopdata > div {
border-bottom: 1px solid #000;
}
#shopdata > div h2 {
padding-bottom: 0;
line-height: 80%;
}
#shopdata article h3 {
font-weight: 900;
}
#shopdata article time {
color: #727171;
font-family: "DINNextLTPro-BoldCondensed";
display: block;
}
#shopdata article h4, #shopdata article p, .info table th, .info table td, .info table td a{
font-weight: bold;
}
#shopdata article div p:last-child {
padding-bottom: 0;
}
#shopdata .photo {
width: 100%;
overflow: hidden;
}

#oftheyear {
background: #F0970F;
}
#oftheyear h3 {
color: #5A4F4A;
font-weight: bold;
}
#vote h3 {
font-weight: bold;
}
#vote a {
display: table;
margin: 0 auto;
position: relative;
}
#vote a span {
position: relative;
z-index: 2;
display: block;
border: 3px solid #000;
font-weight: bold;
}
#vote a:after {
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
content: "";
display: block;
height: 3px;
background: #000;
}

#present h3 {
font-weight: bold;
color: #5A4F4A;
}
#present p.clearfix {
font-weight: bold;
}
#present a {
display: table;
margin-left: auto;
text-align: right;
font-weight: bold;
background-image: url(../images/arrow.svg);
background-repeat: no-repeat;
background-position: bottom right;
}
#present a:last-child {
margin-bottom: 0;
}
#place h3, #place h4, #place h5 {
font-weight: bold;
}
#place ul {
display: table;
margin: 0 auto;
}
#place ul li:last-child {
padding-bottom: 0;
}
#place ul li div {
display: flex;
justify-content: space-between;
}
#place ul li a {
color: #004EA2;
display: table;
}
#place ul li a span {
font-weight: bold;
text-decoration: underline;
}

@media (max-width: 560px){
ol#bread {
padding-top: 10px;
}
ol#bread li {
padding-right: 20px;
margin-right: 10px;
font-size: 3vw;
}
ol#bread li:after {
font-size: 3.4vw;
}
ol#bread li a {
font-size: 3vw;
padding: 4px 8px;
background: #000;
color: #fff;
}
ol#bread li:nth-child(3) {
padding-left: 20px;
font-size: 3.2vw;
}

#about {
padding-bottom: 60px;
}
#aboutFv {
padding-bottom: 60px;
}
#aboutFv > div h3 {
font-size: 6.5vw;
padding-bottom: 30px;
}
#about p, #about h4 {
padding-bottom: 20px;
}
#about p {
font-size: 4vw;
}
#about h4 {
font-size: 5vw;
}

#members article {
padding: 24px 0;
}
#members article h3 {
padding-bottom: 16px;
font-size: 7vw;
}
#members article h3 span {
padding-left: 8vw;
font-size: 3vw;
}
#members article > div h4 {
padding-bottom: 16px;
}
#members article > div ul {
padding-bottom: 40px;
justify-content: space-between;
}
#members article > div ul li {
width: 48%;
padding-bottom: 24px;
}
#members article > div ul li:nth-last-child(-n+2) {
padding-bottom: 0;
}
#members article ul li h5, #members article ul li h6 {
font-size: 1.8rem;
}

#shopdata > div {
padding: 40px 0 30px;
margin-bottom: 30px;
}
#shopdata > div h2 span {
font-size: 4.2vw;
}
#shopdata > div p {
font-size: 5vw;
padding-top: 10px;
}
#shopdata article h3, #shopdata article time {
padding-bottom: 16px;
}
#shopdata article h3 {
font-size: 6vw;
}
#shopdata article time {
font-size: 5vw;
}
#shopdata article h4 {
font-size: 4vw;
padding-bottom: 24px;
}
.photo {
padding-bottom: 20px;
}
.photo img {
padding-bottom: 10px;
}
.photo img:last-child {
padding-bottom: 0;
}
#shopdata article p {
font-size: 4.2vw;
padding-bottom: 10px;
}
.info table {
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0 20px;
}
.info table th, .info table td {
display: block;
width: 100%;
font-size: 4vw;
}
.info table td {
word-break: break-all;
}
.info table td a {
display: block;
}
.info iframe {
height: 40vh;
}

#oftheyear {
margin-bottom: 60px;
}
#oftheyear > div {
padding-top: 60px;
}
#oftheyear h3, #present h3 {
padding-bottom: 20px;
}
#oftheyear h3 {
font-size: 6vw;
}
#vote h3 {
font-size: 4vw;
padding-bottom: 20px;
}
#vote img {
padding-bottom: 40px;
}
#vote a span {
padding: 8px 10vw;
font-size: 4vw;
}
#vote a:after {
right: -5vw;
width: 10vw;
}
#present p.clearfix, p#caution {
line-height: 150%;
}
#present p.clearfix {
padding-bottom: 20px;
}
#present p.clearfix img {
width: 50%;
padding-bottom: 20px;
}
p#caution {
padding-bottom: 20px;
}
#present a {
padding-bottom: 20px;
margin-bottom: 20px;
background-size: auto 7px;
}
#place h3 {
font-size: 6vw;
padding-bottom: 30px;
}
#place ul li {
padding-bottom: 20px;
}
#place ul li h4, #place ul li h5 {
font-size: 5vw;
}
#place ul li h4 {
padding-bottom: 8px;
}
#place ul li h5 {
padding-right: 10vw;
}
#place ul li a i {
font-size: 6.5vw;
}
#place ul li a span {
display: none;
}
}

@media (min-width: 561px){
ol#bread {
padding-top: 30px;
}
ol#bread li {
padding-right: 40px;
margin-right: 24px;
font-size: 1.6rem;
}
ol#bread li:after {
font-size: 1.7rem;
}
ol#bread li a {
font-size: 1.6rem;
}

#about {
padding-bottom: 80px;
}
#aboutFv {
display: flex;
padding-bottom: 80px;
}
#aboutFv > div, #aboutFv > div h2 {
position: relative;
}
#aboutFv > div h3 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#about p, #about h4 {
padding-bottom: 50px;
}
#about p {
font-size: 1.8rem;
}
#about h4 {
font-size: 2.3rem;
}
#about h6 {
font-size: 1.6rem;
}

#members article {
padding: 40px 0;
}
#members article h3 {
padding-bottom: 30px;
font-size: 3.6rem;
}
#members article h3 span {
padding-left: 50px;
font-size: 1.8rem;
}
#members article > div h4 {
padding-bottom: 20px;
}
#members article > div ul {
padding-bottom: 50px;
}
#members article ul li h5, #members article ul li h6 {
font-size: 2rem;
}

#shopdata > div {
display: flex;
align-items: flex-end;
width: 90%;
padding: 50px 5% 40px;
margin-bottom: 40px;
}
#shopdata > div h2 span {
font-size: 2.5rem;
}
#shopdata > div p {
font-size: 3.2rem;
padding-left: 50px;
}
#shopdata article h3, #shopdata article time {
padding-bottom: 20px;
}
#shopdata article h4, #shopdata article p {
padding-bottom: 20px;
}
.photo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.photo img {
width: 50%;
height: 100%;
box-sizing: border-box;
}
.photo img:first-child {
width: 100%;
}

#oftheyear {
margin-bottom: 80px;
}
#oftheyear > div {
padding-top: 80px;
}
#vote a span {
padding: 10px 40px;
font-size: 2.4rem;
}
#vote a:after {
right: -20px;
width: 40px;
}
p#caution {
padding-bottom: 40px;
}
#present a {
font-size: 1.8rem;
padding-bottom: 24px;
margin-bottom: 30px;
background-size: auto 10px;
}
#place h3 {
padding-bottom: 40px;
}
#place ul li {
padding-bottom: 50px;
}
#place ul li a i {
display: none;
}
}

@media (min-width: 561px) and (max-width: 768px){
ol#bread li:nth-child(3) {
padding-left: 40px;
font-size: 1.7rem;
}

#present h3 {
font-size: 2.2rem;
text-align: center;
}
#present p.clearfix {
padding-bottom: 30px;
font-size: 1.8rem;
}
#present p.clearfix img {
width: 60%;
max-width: 500px;
padding-bottom: 30px;
}
#place h4, #place h5 {
font-size: 1.9rem;
}
#place h4 {
padding-bottom: 10px;
}
#place h5 {
padding-right: 30px;
}
#place a span {
font-size: 1.6rem;
}
}

@media (max-width: 768px){
ol#bread {
flex-wrap: wrap;
}
ol#bread li:nth-child(2) {
padding-right: 0;
margin-right: 0;
}
ol#bread li:nth-child(2):after {
content: none;
}
ol#bread li:nth-child(3) {
width: 100%;
margin-top: 10px;
}
ol#bread li:nth-child(3):after {
left: 0;
right: auto;
top: 55%;
content: '\f054';
}

#oftheyear h3, #present h3 {
padding-bottom: 40px;
}
#present p.clearfix img {
display: block;
margin: 0 auto;
}
}

@media (min-width: 769px){
ol#bread li a {
padding-bottom: 4px;
border-bottom: 1px solid #000;
}

#members article > div, #shopdata article {
width: 90%;
margin: 0 auto;
}
#members article > div ul {
width: 96%;
margin: 0 auto;
}

.info iframe {
height: 400px;
}

#present p.clearfix img {
float: right;
}
#place ul li {
display: flex;
}
}

@media (min-width: 561px) and (max-width: 1024px){
#aboutFv > div {
width: 65%;
}
#aboutFv > div h3 {
font-size: 4vw;
}
#aboutFv > img {
width: 35%;
}

#members article > div ul li {
width: 32%;
padding: 0 2% 30px 0;
}
#members article > div ul li:nth-child(3n) {
padding-right: 0;
}
#members article > div ul li:nth-last-child(-n+3) {
padding-bottom: 0;
}

#shopdata article h3 {
font-size: 4vw;
}
#shopdata article time {
font-size: 3.6vw;
}
#shopdata article h4 {
font-size: 2.8vw;
}
#shopdata article p {
font-size: 3vw;
}
.photo, #comment {
padding-bottom: 50px;
}
.photo img:first-child {
padding-bottom: 30px;
}
.photo img:nth-child(2) {
padding-right: 15px;
}
.photo img:nth-child(3) {
padding-left: 15px;
}
.info table {
margin-bottom: 40px;
}
.info table tr:nth-child(2n) {
background: #f3f3f3;
}
.info table th, .info table td {
font-size: 2.6vw;
padding: 6px;
}

#oftheyear h3 {
font-size: 2.6rem;
}
#vote h3 {
font-size: 2rem;
padding-bottom: 30px;
}
#vote img {
padding-bottom: 30px;
}
#present p.clearfix, p#caution {
font-size: 1.8rem;
line-height: 180%;
}
#place h3 {
font-size: 2.2rem;
}
}

@media (min-width: 769px) and (max-width: 1024px){
#shopdata article h3 {
font-size: 2.6rem;
}
#shopdata article time {
font-size: 2.4rem;
}
#shopdata article h4 {
font-size: 2rem;
}
#shopdata article p {
font-size: 2.2rem;
}
.info table th, .info table td {
font-size: 2rem;
padding: 4px 8px;
}

#oftheyear h3 {
font-size: 3rem;
padding-bottom: 60px;
}
#present h3 {
font-size: 2.5rem;
padding-bottom: 60px;
}
#present p.clearfix img {
width: 30%;
padding: 0 0 30px 30px;
}
#place h3 {
font-size: 2.4rem;
}
#place h4, #place h5 {
font-size: 2rem;
padding-right: 30px;
}
#place a span {
font-size: 1.8rem;
}
}

@media (max-width: 1024px){
.info table {
width: 100%;
}
}

@media (min-width: 1025px){
#aboutFv > div {
width: 60%;
}
#aboutFv > div h3 {
font-size: 3.8rem;
}
#aboutFv > img {
width: 40%;
}
#about p {
font-size: 2.2rem;
}
#about h4 {
font-size: 2.8rem;
}
#about h6 {
font-size: 2rem;
}

#members article > div ul li {
width: 24%;
padding: 0 1.3333% 30px 0;
}
#members article > div ul li:nth-child(4n) {
padding-right: 0;
}
#members article > div ul li:nth-last-child(-n+4) {
padding-bottom: 0;
}

#shopdata article h3 {
font-size: 2.8rem;
}
#shopdata article time {
font-size: 2.6rem;
}
#shopdata article h4 {
font-size: 2.2rem;
}
#shopdata article p {
font-size: 2.4rem;
}
.photo, #comment {
padding-bottom: 60px;
}
.photo img:first-child {
padding-bottom: 40px;
}
.photo img:nth-child(2) {
padding-right: 20px;
}
.photo img:nth-child(3) {
padding-left: 20px;
}
.info {
display: flex;
align-items: flex-start;
}
.info table {
width: 45%;
}
.info table th {
padding: 0 10px 16px 0;
}
.info table td {
padding-bottom: 16px;
}
.info iframe {
width: 55%;
}

#oftheyear h3 {
font-size: 4rem;
padding-bottom: 80px;
}
#vote h3 {
font-size: 2.3rem;
padding-bottom: 40px;
}
#vote img {
padding-bottom: 40px;
}
#vote a span, #vote a:after {
transition: .3s;
}
#vote a:hover span {
color: #fff;
}
#vote a:hover:after {
width: 100%;
height: 100%;
left: 0;
}

#present h3 {
font-size: 3.5rem;
padding-bottom: 80px;
}
#present p.clearfix {
font-size: 2.8rem;
line-height: 200%;
padding-bottom: 30px;
}
#present p.clearfix img {
width: 300px;
padding: 0 150px 30px 150px;
}
p#caution {
font-size: 2rem;
}
#place h3 {
font-size: 2.8rem;
}
#place h4, #place h5 {
font-size: 2.6rem;
padding-right: 50px;
}
#place a span {
font-size: 2.3rem;
}
}

@media (min-width: 1281px){
#aboutFv > div h3 {
font-size: 4.4rem;
}

#oftheyear h3 {
font-size: 5rem;
}
#present h3 {
font-size: 4.5rem;
}
}