@charset "utf-8";

/* ==============================
   銀河工房 商品説明 共通CSS
   prefix: gk-
============================== */

.gk-product-desc,
.gk-product-desc *,
.gk-product-desc *:before,
.gk-product-desc *:after {
  box-sizing: border-box;
}

.gk-product-desc {
  width: 100%;
}

.gk-product-desc p {
  margin: 0;
  line-height: 1.8;
}

/* title */
#main_introduction .gk-product-desc h3.gk-title {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  background: none;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
}

.gk-title-sub {
  font-size: .8rem;
  font-weight: normal;
  margin-left: .4em;
}

/* section */
.gk-section {
  margin: 0 0 50px;
}

.gk-section-sm {
  margin-bottom: 30px;
}

.gk-section-lg {
  margin-bottom: 80px;
}

/* image */
.gk-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.gk-img-90 {
  width: 90%;
}

/* text */
.gk-text {
  width: 90%;
  margin: 0 auto !important;
}

.gk-center {
  text-align: center;
}

.gk-bold {
  font-weight: bold;
}

.gk-red {
  color: #8a2727;
}

/* margin */
.gk-mb20 { margin-bottom: 20px; }
.gk-mb30 { margin-bottom: 30px; }
.gk-mb50 { margin-bottom: 50px; }
.gk-mb80 { margin-bottom: 80px; }

/* row */
.gk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
}

.gk-cols-2 > * { width: 49%; }
.gk-cols-3 > * { width: 32%; }
.gk-cols-4 > * { width: 23.5%; }

/* info box */
.gk-info-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 20px 0 50px;
}

.gk-info-box {
  width: 31%;
  max-width: 210px;
  padding: 12px;
  color: #fff;
}

.gk-info-box-inner {
  border: 2px solid #fff;
  min-height: 120px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gk-info-box img {
  width: 34px;
  height: auto;
  margin: 8px auto !important;
}

.gk-info-box span {
  display: block;
  font-size: 1.2rem;
}

.gk-info-box em {
  display: block;
  font-size: 2rem;
  font-style: normal;
  line-height: 1.3;
}

.gk-info-blue { background: #5293b7; }
.gk-info-green { background: #87b874; }
.gk-info-brown { background: #b5a178; }
.gk-info-red { background: #c96688; }

/* button */
.gk-btn-box {
  margin: 0 0 50px;
}

.gk-btn-primary {
  display: block;
  background: #d60000;
  border: 2px solid #d60000;
  padding: 15px;
  color: #fff !important;
  text-align: center;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  transition: .3s;
}

.gk-btn-primary:hover {
  background: #fff;
  color: #d60000 !important;
}

/* banner */
.gk-link-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 2%;
}

.gk-link-banner a {
  display: block;
  width: 49%;
}

.gk-link-banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* tablet */
@media screen and (max-width: 768px) {
  .gk-cols-2 > *,
  .gk-cols-3 > *,
  .gk-cols-4 > * {
    width: 49%;
  }

  .gk-info-box {
    width: 48%;
    max-width: none;
  }
}

/* smartphone */
@media screen and (max-width: 480px) {
  #main_introduction .gk-product-desc h3.gk-title {
    font-size: 1.2rem;
  }

  .gk-cols-2 > *,
  .gk-cols-3 > *,
  .gk-cols-4 > * {
    width: 100%;
  }

  .gk-info-box {
    width: 100%;
  }

  .gk-info-box span {
    font-size: .8rem;
  }

  .gk-info-box em {
    font-size: 1.4rem;
  }

  .gk-link-banner a {
    width: 100%;
  }
}