@charset "UTF-8";

.js-fadein {
  opacity: 0;
}

.is-appear {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.is-delay-1 {
  animation-delay: 0.5s;
}

.is-delay-2 {
  animation-delay: 1.5s;
}

.c-tpl-headcontents {
  display: block;
  padding: 0 0 calc(30 * 0.26667 * 1vw);
  margin: calc(10 * 0.26667 * 1vw) 0 calc(40 * 0.26667 * 1vw);
  border-bottom: 1px solid #d3d3d3;
}

.c-tpl-mv {
  width: 100%;
}

.c-tpl-headcontents-inner {
  padding: calc(20 * 0.26667 * 1vw) 0;
}

.c-tpl-first {
  margin: 0 0 calc(30 * 0.26667 * 1vw);
}

.c-tpl-first-title {
  text-align: center;
  margin: 0 0 calc(20 * 0.26667 * 1vw);
  font-size: calc(16 * 0.26667 * 1vw);
}

.c-tpl-first-txt {
  display: grid;
  gap: calc(10 * 0.26667 * 1vw);
}

.c-tpl-first-txt p {
  font-size: calc(12 * 0.26667 * 1vw);
}

.c-tpl-pagelink {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16 * 0.26667 * 1vw);
  padding: 0 0 calc(40 * 0.26667 * 1vw);
  margin: 0 0 calc(30 * 0.26667 * 1vw);
  border-bottom: 1px solid #d3d3d3;
}

.c-tpl-pagelink li {
}

.c-tpl-pagelink li a {
  display: grid;
  align-items: center;
  padding: 0;
  height: calc(40 * 0.26667 * 1vw);
  background: #FFF;
  font-size: calc(11 * 0.26667 * 1vw);
  text-align: center;
  line-height: 1;
  position: relative;
  transition: border-color 0.3s ease;
}

.c-tpl-pagelink>li>a::after {
  display: none;
  width: calc(8 * 0.26667 * 1vw);
  height: calc(8 * 0.26667 * 1vw);
  border: 1px solid #595757;
  border-width: 0 1px 1px 0;
  right: calc(16 * 0.26667 * 1vw);
  ;
  transform: rotate(45deg) translateY(-40%);
  position: absolute;
  top: 40%;
}

.c-tpl-section:not(:last-of-type) {
  padding: 0 0 calc(40 * 0.26667 * 1vw);
  margin: 0 0 calc(30 * 0.26667 * 1vw);
  border-bottom: 1px solid #d3d3d3;
}

.c-tpl-free-html:not(:last-child) {
  margin-bottom: calc(40 * 0.26667 * 1vw);
}

.c-tpl-section-title {
  margin: 0 0 calc(16 * 0.26667 * 1vw);
  font-size: calc(16 * 0.26667 * 1vw);
  text-align: center;
}

.c-tpl-free-html h1 {
  font-size: calc(14 * 0.26667 * 1vw);
  margin: 0 0 calc(14 * 0.26667 * 1vw);
}

.c-tpl-free-html h2,
.c-tpl-free-html h3,
.c-tpl-free-html h4,
.c-tpl-free-html h5,
.c-tpl-free-html h6 {
  font-size: calc(14 * 0.26667 * 1vw);
  margin: 0 0 calc(14 * 0.26667 * 1vw);
  ;
}

.c-tpl-free-html h1:nth-child(n+2),
.c-tpl-free-html h2:nth-child(n+2),
.c-tpl-free-html h3:nth-child(n+2),
.c-tpl-free-html h4:nth-child(n+2),
.c-tpl-free-html h5:nth-child(n+2),
.c-tpl-free-html h6:nth-child(n+2) {
  margin-top: calc(13 * 0.26667 * 1vw);
}

.c-tpl-section>p,
.c-tpl-free-html>p {
  margin-top: calc(5 * 0.26667 * 1vw);
  font-size: calc(12 * 0.26667 * 1vw);
}

.c-tpl-section>ul,
.c-tpl-free-html>ul {
  margin: calc(20 * 0.26667 * 1vw) 0;
}

.c-tpl-section>ul:last-child,
.c-tpl-free-html>ul:last-child {
  margin-bottom: 0;
}

.c-tpl-section>ul>li,
.c-tpl-free-html>ul>li {
  display: flex;
  align-items: start;
  font-size: calc(12 * 0.26667 * 1vw);
}

.c-tpl-section>ul>li::before,
.c-tpl-free-html>ul>li::before {
  content: '・';
  display: block;
}

.c-tpl-section>img,
.c-tpl-free-html>img {
  display: block;
  margin: calc(20 * 0.26667 * 1vw) 0;
  width: 100%;
  height: auto;
}

.c-tpl-section>img:last-child,
.c-tpl-free-html>img:last-child {
  margin-bottom: 0;
}

.l-tpl-item-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16 * 0.26667 * 1vw);
  margin: calc(20 * 0.26667 * 1vw) 0 calc(40 * 0.26667 * 1vw);
}

.l-tpl-item-wrap:last-child {
  margin-bottom: 0;
}

.c-tpl-item--img {
  width: 100%;
  height: auto;
  margin: 0 0 calc(10 * 0.26667 * 1vw);
  display: block;
}

.c-tpl-item--img img {
  display: block;
  width: 100%;
}

.c-tpl-item-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 * 0.26667 * 1vw);
  margin: 0 0 calc(10 * 0.26667 * 1vw);
}

.c-tpl-item-taglist li {
  padding: calc(1 * 0.26667 * 1vw) calc(6 * 0.26667 * 1vw);
  border: 1px solid #d3d3d3;
  background-color: #FFFFFF;
  font-size: calc(8 * 0.26667 * 1vw);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.c-tpl-item-taglist li.c-item-tag-sale {
  color: #FFFFFF;
  background-color: #595757;
  border-color: #595757;
}

.c-tpl-item-name {
  display: block;
  margin: 0 0 calc(5 * 0.26667 * 1vw);
  font-size: calc(11 * 0.26667 * 1vw);
  font-weight: normal;
  line-height: 1.5;
}

.c-tpl-item-price {
  display: block;
  font-size: calc(12 * 0.26667 * 1vw);
  font-weight: normal;
  text-align: left;
}

.l-tpl-buttonarea {
  display: grid;
  gap: calc(15 * 0.26667 * 1vw);
}

.c-tpl-button a {
  display: grid;
  place-content: center;
  height: calc(40 * 0.26667 * 1vw);
  padding: 0 calc(60 * 0.26667 * 1vw) 0 calc(60 * 0.26667 * 1vw);
  border: 1px solid #d3d3d3;
  font-size: calc(11 * 0.26667 * 1vw);
  position: relative;
  background-color: #FFF;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.c-tpl-button a::after {
  content: '';
  display: block;
  width: calc(8 * 0.26667 * 1vw);
  height: calc(8 * 0.26667 * 1vw);
  border: 1px solid #595757;
  border-width: 1px 1px 0 0;
  position: absolute;
  top: 50%;
  right: calc(10 * 0.26667 * 1vw);
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 769px) {
  .c-tpl-headcontents {
    display: block;
    padding: 0 0 60px;
    margin: 20px 0 40px;
  }

  .c-tpl-headcontents-inner {
    padding: 40px 0;
  }

  .c-tpl-first {
    margin: 0 0 50px;
  }

  .c-tpl-first-title {
    margin-bottom: 20px;
    font-size: 2.4rem;
  }

  .c-tpl-first-txt {
    gap: 15px;
  }

  .c-tpl-first-txt p {
    font-size: 13px;
  }

  .c-tpl-pagelink {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    max-width: initial;
    padding: 0 0 70px;
    margin: 0 auto 30px;
  }

  .c-tpl-pagelink li a::after {
    width: 10px;
    height: 10px;
    border: 1px solid #595757;
    border-width: 0 1px 1px 0;
    right: 0;
  }

  .c-tpl-pagelink li {
    width: auto;
    flex: 1;
    white-space: nowrap;
  }

  .c-tpl-pagelink li a {
    height: 44px;
    padding: 0;
    font-size: 13px;
  }

  .c-tpl-pagelink li a:hover {
    opacity: 0.5;
  }

  .c-tpl-pagelink li a::after {
    right: 5px;
  }

  .c-tpl-section:not(:last-of-type) {
    padding: 0 0 80px;
    margin: 0 0 60px;
  }

  .c-tpl-free-html:not(:last-child) {
    margin-bottom: 40px;
  }

  .c-tpl-section-title {
    margin: 0 0 16px;
    font-size: 2.4rem;
  }

  .c-tpl-free-html h1 {
    font-size: 2.2rem;
    margin-bottom: 16px;
  }

  .c-tpl-free-html h2,
  .c-tpl-free-html h3,
  .c-tpl-free-html h4,
  .c-tpl-free-html h5,
  .c-tpl-free-html h6 {
    font-size: 1.6rem;
    margin: 0 0 12px;
  }

  .c-tpl-free-html h1:nth-child(n+2),
  .c-tpl-free-html h2:nth-child(n+2),
  .c-tpl-free-html h3:nth-child(n+2),
  .c-tpl-free-html h4:nth-child(n+2),
  .c-tpl-free-html h5:nth-child(n+2),
  .c-tpl-free-html h6:nth-child(n+2) {
    margin-top: 24px;
  }

  .c-tpl-section>p,
  .c-tpl-free-html>p {
    margin-top: 20px;
    font-size: 1.3rem;
  }

  .c-tpl-section>p:nth-child(n+2),
  .c-tpl-free-html>p:nth-child(n+2) {
    margin-top: 10px;
  }

  .c-tpl-free-html>ul {
    display: grid;
    gap: 5px;
    margin: 20px 0;
  }

  .c-tpl-free-html>ul>li {
    font-size: 1.3rem;
  }

  .c-tpl-section>img,
  .c-tpl-free-html>img {
    margin: 20px 0;
  }

  .l-tpl-item-wrap {
    grid-template-columns: repeat(4, 1fr);
    gap: 60px 20px;
    margin: 20px 0 40px;
  }

  .c-tpl-item--img {
    margin: 0 0 15px;
  }

  .c-tpl-item-taglist {
    gap: 6px;
    margin: 0 0 20px;
  }

  .c-tpl-item-taglist li {
    padding: 2px 8px;
    font-size: 1.2rem;
  }

  .c-tpl-item-name {
    margin: 0 0 10px;
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .c-tpl-item-price {
    font-size: 1.5rem;
  }

  .l-tpl-buttonarea {
    display: flex;
    justify-content: center;
    gap: 40px;
  }

  .c-tpl-button a {
    height: 60px;
    padding: 0 60px 0 60px;
    font-size: 1.4rem;
  }

  .c-tpl-button.c-tpl-button-one a {
    width: 400px;
  }

  .c-tpl-button a::after {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 20px;
  }
}