@charset "utf-8";

/* --------------
 reset
-------------- */
input[type="submit"],
label {
  cursor: pointer;
}

/* --------------
 base
-------------- */
.ifsp {
  display: none !important;
}
.ifpcalc {
  text-align: center;
}

a img,
li,
a .inner,
a:before,
a:after {
  -webkit-transition: ease 0.1s;
  transition: ease 0.1s;
}
a:hover img,
a:hover:before,
a:hover:after,
li:hover,
a:hover .inner {
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
}

a {
  -webkit-transition: ease 0.1s;
  transition: ease 0.1s;
}
a:hover {
  -webkit-transition: ease 0.4s;
  transition: ease 0.4s;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
  top: 0;
}

/* --------------
 modules css
-------------- */
/* ---------- float */
.fll {
  float: left;
}
.flr {
  float: right;
}
.flc {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- width */
.wd5 {
  width: 5% !important;
}
.wd10 {
  width: 10% !important;
}
.wd15 {
  width: 15% !important;
}
.wd20 {
  width: 20% !important;
}
.wd25 {
  width: 25% !important;
}
.wd30 {
  width: 30% !important;
}
.wd35 {
  width: 35% !important;
}
.wd40 {
  width: 40% !important;
}
.wd45 {
  width: 45% !important;
}
.wd48 {
  width: 48% !important;
}
.wd50 {
  width: 50% !important;
}
.wd55 {
  width: 55% !important;
}
.wd60 {
  width: 60% !important;
}
.wd65 {
  width: 65% !important;
}
.wd70 {
  width: 70% !important;
}
.wd75 {
  width: 75% !important;
}
.wd80 {
  width: 80% !important;
}
.wd85 {
  width: 85% !important;
}
.wd90 {
  width: 90% !important;
}
.wd95 {
  width: 95% !important;
}
.wd100 {
  width: 100% !important;
}

.wd200p {
  width: 200px;
}
.wd320p {
  width: 320px;
}

.wdx500p {
  max-width: 500px;
}
.wdx600p {
  max-width: 600px;
}
.wdx640p {
  max-width: 640px;
}
.wdx800p {
  max-width: 800px;
}
.wdx960p {
  max-width: 960px;
}
.wdx1000p {
  max-width: 1000px;
}
.wdx1200p {
  max-width: 1200px;
}

/* ----- images */
.imgL {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.imgR {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* ----- base width */
#siteHeader,
#siteFooter {
}
body,
#header,
#footer,
#container {
  width: 100%;
  min-width: 768px;
}

.in {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.flexwrap {
  display: flex;
}
.flexwrap:after {
  display: none;
}

.as-start {
  align-self: flex-start;
}
.as-end {
  align-self: flex-end;
}
.as-center {
  align-self: center;
}

/* --------------
 common
-------------- */

/* =header
-------------------------------------------------------------- **/
#header {
}

/* =siteHeader
---------------------------------------------------- */
#siteHeader {
  position: relative;
}

#header .logo-img {
  max-width: 750px;
  margin: auto;
}

@media screen and (max-width: 1000px) {
  /*以下の時*/
}

/* =nav_menu
---------------------------------------------------- */
.nav_menu {
  padding: 0.5em;
  background-color: #004482;
}

.nav_menu .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.nav_menu .menu:after {
  display: none;
}

.nav_menu .menu li {
  flex-grow: 1;
}

.nav_menu .menu a {
  position: relative;
  display: block;
  padding: 1em;
  font-weight: bold;
  font-size: 1.2em;
  color: #fff;
  text-align: center;
  text-shadow: 1px 2px 0 #222;
  z-index: 1;
}

.nav_menu .menu .signup a,
.nav_menu .menu .mypage a {
  color: #faf063;
}
.nav_menu .menu a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  opacity: 0;
  background: linear-gradient(
    -45deg,
    #fff 25%,
    rgba(255, 255, 255, 0) 25%,
    rgba(255, 255, 255, 0) 50%,
    #fff 50%,
    #fff 75%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0)
  );
  background-size: 20px 20px;
  z-index: -1;
  transition: 0.3s ease-in-out;
  animation: anime_stripe_1 0.8s infinite linear;
}

.nav_menu .menu a:hover:before {
  opacity: 0.3;
}

@keyframes anime_stripe_1 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -20px;
  }
}

/* =globalNav
---------------------------------------------------- */

#globalNav {
  border-top: #aaa solid 1px;
  border-bottom: #aaa solid 1px;
  font-size: 1.1rem;
}
#globalNav ul {
  display: flex;
  justify-content: space-around;
  border-right: #aaa solid 1px;
}
#globalNav ul:after {
  display: none;
}
#globalNav li {
  width: 100%;
  border-left: #aaa solid 1px;
  position: relative;
}
#globalNav li:last-child {
}
#globalNav li a {
  display: flex;
  height: 100%;
  padding: 1em 5px;
  text-align: center;
  flex-direction: column;
  justify-content: center;
}
#globalNav li a:hover {
}
#globalNav li a > span:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#globalNav li.menu-anime a:hover *[data-fa-i2svg] {
  color: #ff5b5b;
}
#globalNav li.menu-prod a:hover *[data-fa-i2svg] {
  color: #25adf9;
}
#globalNav li.menu-pickup a:hover *[data-fa-i2svg] {
  color: #23bfa2;
}
#globalNav li.menu-groupbuying a:hover *[data-fa-i2svg] {
  color: #f37413;
}
#globalNav li.menu-help a:hover *[data-fa-i2svg] {
  color: #a95fa9;
}

#globalNav li.menu-faq a:hover *[data-fa-i2svg] {
  color: #416ee8;
}
#globalNav li.menu-post a:hover *[data-fa-i2svg] {
  color: #51b120;
}

/* =container
-------------------------------------------------------------- **/
#container {
}
.contents {
  width: 100%;
  position: relative;
}

.clm2,
.clm3,
.clm4,
.clm5,
.clm6,
.clm1-2 {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  margin-left: -10px;
}
.clmnosp {
  margin-left: 0;
}
.clm2 > * {
  width: calc((100% / 2) - 10px);
}
*::-ms-backdrop,
.clm2 > * {
  width: calc(50% - 10px); /* IE11 */
}
.clm3 > * {
  width: calc((100% / 3) - 10px);
}
*::-ms-backdrop,
.clm3 > * {
  width: calc(33.33% - 10px); /* IE11 */
}
.clm4 > * {
  width: calc((100% / 4) - 10px);
}
*::-ms-backdrop,
.clm4 > * {
  width: calc(25% - 10px); /* IE11 */
}
.clm5 > * {
  width: calc((100% / 5) - 10px);
}
*::-ms-backdrop,
.clm5 > * {
  width: calc(20% - 10px); /* IE11 */
}
.clm6 > * {
  width: calc((100% / 6) - 10px);
}
*::-ms-backdrop,
.clm6 > * {
  width: calc(16.66% - 10px); /* IE11 */
}
.clm10 > * {
  width: calc((100% / 10) - 10px);
}
*::-ms-backdrop,
.clm10 > * {
  width: calc(10% - 10px); /* IE11 */
}

.clm2.clmnosp > * {
  width: calc((100% / 2));
}
*::-ms-backdrop,
.clm2.clmnosp > * {
  width: calc(50%); /* IE11 */
}
.clm3.clmnosp > * {
  width: calc((100% / 3));
}
*::-ms-backdrop,
.clm3.clmnosp > * {
  width: calc(33.33%); /* IE11 */
}
.clm4.clmnosp > * {
  width: calc((100% / 4));
}
*::-ms-backdrop,
.clm4.clmnosp > * {
  width: calc(25%); /* IE11 */
}
.clm5.clmnosp > * {
  width: calc((100% / 5));
}
*::-ms-backdrop,
.clm5.clmnosp > * {
  width: calc(20%); /* IE11 */
}
.clm6.clmnosp > * {
  width: calc((100% / 6));
}
*::-ms-backdrop,
.clm6.clmnosp > * {
  width: calc(16.66%); /* IE11 */
}

.clm2 > *,
.clm3 > *,
.clm4 > *,
.clm5 > *,
.clm6 > *,
.clm10 > * {
  margin-left: 10px;
}
.clm2.clmnosp > *,
.clm3.clmnosp > *,
.clm4.clmnosp > *,
.clm5.clmnosp > *,
.clm6.clmnosp > * {
  margin-left: 0;
}

.clm2 > * > a,
.clm3 > * > a,
.clm4 > * > a,
.clm5 > * > a,
.clm6 > * > a,
.clm10 > * > a {
  position: relative;
  display: block;
  height: 100%;
}

/* =sidebar
---------------------------------------------------- */

/* =aside
------------------------------------------ */

/* =bnrarea
-------------------------------------------------------------- **/

/* =footer
-------------------------------------------------------------- **/

#footerInfo {
}
.footer-nav {
  font-weight: bold;
  font-size: 16px;
}
.footer-nav-menu {
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.footer-nav-list {
  margin: 0 20px;
}
.footer-nav-list a {
  color: #fff;
}

/* =siteFooter
---------------------------------------------------- */

.footmenu-wrap {
  columns: 2;
  column-gap: 1em;
}
.footmenu {
  columns: 20em;
  column-gap: 1em;
}
.footmenu,
.footmenu li {
  page-break-inside: avoid;
  break-inside: avoid;
}
/* =copyright
---------------------------------------------------- */

#copyright {
}

/* =pageTop
-------------------------------------------------------------- **/
#pageTop {
}

/* --------------
 page contents
-------------- */

/* =home
---------------------------------------------------- */

/* =breadcrumb
---------------------------------------------------- */

#breadcrumb li a:hover {
  color: #999;
}

/* =headline / titles
---------------------------------------------------- */

/* =sidebar
---------------------------------------------------- */
/* =aside
------------------------------------------ */

/* =footer
-------------------------------------------------------------- **/

/*banner*/

.flxboxcmn2.banner img {
  margin: 0.3em 0.34em;
  width: 185px;
}

/* =siteFooter
---------------------------------------------------- */

/* =copyright
---------------------------------------------------- */

/* =pageTop
-------------------------------------------------------------- **/
#pageTop {
  bottom: 100px;
}
@media screen and (max-width: 1200px) {
  /*以下の時*/
  #pageTop {
    right: 20px;
    bottom: 20px;
  }

  .banners a.cmBtn.more,
  .banners p.cmBtn.more {
    padding: 0.5em 1em !important;
  }
}
@media screen and (min-width: 1201px) {
  /*以上の時*/
  #pageTop {
    right: 100px;
  }
}

#pageTop a {
  width: 18px;
  height: 165px;
}

.pagination a:hover {
  background: #b47f09;
  color: #fff;
}

/* --------------
 home contents
-------------- */
/* =visual
---------------------------------------------------- */

/* --------------
 subpages contents
-------------- */

/* =page shop
---------------------------------------------------- */

/* archive-contents ---------------------------------------- */

.archive-contents {
}

/* companies detail ---------------------------------------- */

.list-spot li {
  margin-bottom: 20px;
}
.list-spot dl {
  display: flex;
  flex-wrap: wrap;
}

.list-spot dl dt {
  width: 100%;
}
.list-spot dl dd.dd-body {
  width: 50%;
  flex-grow: 1;
}
.list-spot dl dd.dd-map {
  width: 35%;
  margin-right: 20px;
}
.list-spot dl dd.dd-map iframe {
  height: 250px;
}

.main-visual__link {
  top: 2%;
  left: 4%;
  width: 26%;
}

.youtube-section{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.youtube-section__title {
  margin-top: 16px;
  font-size: 22px;
}