@charset "UTF-8";
/* CSS Document */
/**************************************************** 共 通 項 目
****************************************************/
body { background-color: #F2F2F2; overflow-x: hidden; }

.bg-gradation { background: radial-gradient(ellipse 250% 150% at 50% 140%, #fff 0%, #ecfcff 18%, #bfeeff 45%, #74d7ff 72%, #18b3ff 100%); }

.text-shadow-wht { text-shadow: 1px 1px 1px #FFF, -1px -1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, 0px 1px 1px #FFF,  0px -1px 1px #FFF, -1px 0px 1px #FFF, 1px 0px 1px #FFF, 2px 2px 4px #FFF, -2px -2px 4px #FFF, -2px 2px 4px #FFF, 2px -2px 4px #FFF, 0px 2px 4px #FFF,  0px -2px 4px #FFF, -2px 0px 4px #FFF, 2px 0px 4px #FFF; }

.rounded-10px { border-radius: 10px !important; }

.fuwafuwa { animation: fuwafuwa 3s ease-in-out infinite alternate; display: inline-block; transition: 2.5s ease-in-out; }

@keyframes fuwafuwa { 0% { transform: translate(0, 0) rotate(-7deg); }
  100% { transform: translate(0, 0) rotate(7deg); } }
.cloud { position: absolute; z-index: 1000; width: 20%; max-width: 200px; height: auto; }

.cloud01 { top: 1em; right: 78%; }
@media (min-width: 992px) { .cloud01 { right: 50%; } }

.cloud02 { top: 5em; right: -1em; }

.cloud03 { bottom: 2em; left: 1em; }

.poyopoyo_01 { animation: poyopoyo_01 2s ease-out infinite; opacity: 1; }

.poyopoyo_02 { animation: poyopoyo_02 3s ease-out infinite; opacity: 1; }

.poyopoyo_03 { animation: poyopoyo_03 4.5s ease-out infinite; opacity: 1; }

@keyframes poyopoyo_01 { 0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70% { transform: scale(0.96); } }
@keyframes poyopoyo_02 { 0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70% { transform: scale(0.94); } }
@keyframes poyopoyo_03 { 0%, 40%, 60%, 80% { transform: scale(1); }
  50%, 70% { transform: scale(0.94); } }
/**************************************************** コ ン テ ン ツ
****************************************************/
.shop-name { position: relative; padding-left: 0.5em; }
.shop-name::before { content: ""; position: absolute; top: 0; left: 0; width: 0.25em; height: 90%; display: block; border-radius: 0.175em; }
.shop-name.ekiaco::before { background-color: #2A73A4; }
.shop-name.eki::before { background-color: #F03A3C; }
.shop-name.dr::before { background-color: #52BF8C; }
.shop-name.drcn::before { background-color: #53C08D; }
.shop-name.gtk::before { background-color: #F05A78; }
.shop-name.gp::before { background-color: #3276FD; }

.shopinfo a:hover, .shopinfo a:hover span { text-decoration: underline; }
.shopinfo .add a, .shopinfo .tel a, .shopinfo .mail a { color: #333 !important; }
.shopinfo .add, .shopinfo .tel, .shopinfo .mail, .shopinfo .open { position: relative; padding-left: 1.25em; }
.shopinfo .add::before { content: ""; width: 1em; height: 1em; position: absolute; top: 0; left: 0; background: url("../img/shop.png") center/contain no-repeat; }
.shopinfo .tel::before { content: ""; width: 1em; height: 1em; position: absolute; top: 0; left: 0; background: url("../img/tell.png") center/contain no-repeat; }
.shopinfo .mail::before { content: ""; width: 1em; height: 1em; position: absolute; top: 0; left: 0; background: url("../img/mail.png") center/contain no-repeat; }
.shopinfo .open::before { content: ""; width: 1em; height: 1em; position: absolute; top: 0; left: 0; background: url("../img/time.png") center/contain no-repeat; }

.footer { background-color: #000; width: 100%; margin: 0; padding: 0; text-align: center; }

.footer img { width: 60%; max-width: 300px; }

.fnav { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: auto; color: #FEFEFE; }

.fnav li { font-size: 1.2rem; line-height: 2.0rem; width: 100%; position: relative; padding: 0 0.5rem; box-sizing: border-box; text-align: left; border-bottom: solid 1px #333; transition: .4s; }

.fnav li:last-child { border-bottom: none; }

.fnav li:hover { background-color: #333; }

.fnav li a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }

@media (min-width: 992px) { .fnav { justify-content: space-around; max-width: 1000px; }
  .fnav li { width: auto; text-align: center; border-bottom: none; border-bottom: solid 1px #000; }
  .fnav li:hover { background-color: #000; border-bottom: solid 1px #FEFEFE; } }
.copy { font-size: 1rem; text-align: center; padding: 0; line-height: 2.6rem; color: #FEFEFE; }