@charset "UTF-8";

/* =====================
  common
===================== */
article .u-inner {
  max-inline-size: 1120px;
}
@media not all and (min-width: 768px) {
  article .u-inner {
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }
}

/* =====================
  article.bg
===================== */
article.bg .u-inner {
  display: grid;
  grid-template-areas:
    'p img'
    'link link';
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 130px 113px;
  align-items: center;
}
@media not all and (min-width: 768px) {
  article.bg .u-inner {
    display: block;
  }
}
article.bg .u-inner > img {
  grid-area: img;
}
article.bg .u-inner > p {
  grid-area: p;
}
article.bg .u-inner .link {
  grid-area: link;
}

/* ==== img ==== */
article.bg .u-inner > img {
  max-inline-size: 352px;
}
@media not all and (min-width: 768px) {
  article.bg .u-inner > img {
    max-inline-size: calc((100 / 750) * 465 * 1vw);
    display: block;
    margin-inline: auto;
    margin-bottom: calc((100 / 750) * 49 * 1vw);
  }
}

/* ==== p ==== */
article.bg .u-inner > p {
  line-height: 2.12;
}
@media not all and (min-width: 768px) {
  article.bg .u-inner > p {
    font-size: calc((100 / 750) * 26 * 1vw);
    margin-bottom: calc((100 / 750) * 118 * 1vw);
    line-height: 1.76;
  }
}

/* ==== link ==== */
article.bg .link {
  max-inline-size: 1060px;
  margin-inline: auto;
  display: grid;
  grid-template-areas:
    'img h2'
    'img p'
    'img a';
  gap: 0 55px;
  border: 3px solid var(--orange);
  position: relative;
  border-radius: 10px;
  padding-block: 35px 35px;
  padding-left: 45px;
  align-items: baseline;
}
@media not all and (min-width: 768px) {
  article.bg .link {
    display: block;
    border: calc((100 / 750) * 3 * 1vw) solid var(--orange);
    border-radius: calc((100 / 750) * 10 * 1vw);
    padding-left: 0;
    padding-block: calc((100 / 750) * 51.2 * 1vw) calc((100 / 750) * 58.2 * 1vw);
  }
}
article.bg .link::before {
  content: '';
  z-index: -1;
  pointer-events: none;
  position: absolute;
  width: calc(100% - 11px);
  height: calc(100% - 9px);
  border-radius: 6px;
  border: 1px dashed var(--orange);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
@media not all and (min-width: 768px) {
  article.bg .link::before {
    width: calc(100% - calc((100 / 750) * 11 * 1vw));
    height: calc(100% - calc((100 / 750) * 9 * 1vw));
    border-radius: calc((100 / 750) * 6 * 1vw);
  }
}
article.bg .link > img {
  grid-area: img;
}
article.bg .link > h2 {
  grid-area: h2;
}
article.bg .link > p {
  grid-area: p;
}
article.bg .link > a {
  grid-area: a;
}

article.bg .link > img {
  max-inline-size: 154px;
}
@media not all and (min-width: 768px) {
  article.bg .link > img {
    display: block;
    margin-bottom: calc((100 / 750) * 47 * 1vw);
    margin-inline: auto;
    max-inline-size: calc((100 / 750) * 350 * 1vw);
  }
}

article.bg .link > h2 {
  background: var(--orange);
  color: white;
  border-radius: calc(infinity * 1px) 0 0 calc(infinity * 1px);
  font-family: var(--mincho);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto 1fr;
  align-items: center;
  font-size: 26px;
  padding-left: 47px;
  margin-bottom: 10px;
  gap: 26px;
  position: relative;
}
@media not all and (min-width: 768px) {
  article.bg .link > h2 {
    font-size: calc((100 / 750) * 32 * 1vw);
    padding-left: calc((100 / 750) * 30 * 1vw);
    margin-bottom: calc((100 / 750) * 60 * 1vw);
    gap: calc((100 / 750) * 41 * 1vw);
    width: calc((100 / 750) * 630 * 1vw);
    margin-inline: auto 0;
    font-weight: bold;
    padding-block: 1vw;
  }
}
article.bg .link > h2::after {
  content: '';
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url('../../img/product/illust02.png');
  width: 102px;
  height: 67px;
  translate: 0 -18%;
}
@media not all and (min-width: 768px) {
  article.bg .link > h2::after {
    width: calc((100 / 750) * 113 * 1vw);
    height: calc((100 / 750) * 73 * 1vw);
    translate: 0 0;
  }
}
article.bg .link > p {
  line-height: 2.12;
  padding-inline: 47px 59px;
  margin-bottom: 0;
}
@media not all and (min-width: 768px) {
  article.bg .link > p {
    padding-inline: calc((100 / 750) * 40 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
    line-height: 1.76;
    margin-bottom: calc((100 / 750) * 46 * 1vw);
  }
}
article.bg .link > a {
  color: var(--red);
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  align-self: stretch;
  justify-content: flex-end;
  font-weight: bold;
  gap: 18px;
  padding-right: 50px;
}
@media not all and (min-width: 768px) {
  article.bg .link > a {
    justify-content: center;
    padding-right: 0;
    gap: calc((100 / 750) * 27 * 1vw);
    font-size: calc((100 / 750) * 26 * 1vw);
  }
}
article.bg .link > a::after {
  content: '';
  width: 50px;
  aspect-ratio: 1 / 1;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  mask-image: var(--icon-link-circle);
  background-color: currentColor;
}
@media not all and (min-width: 768px) {
  article.bg .link > a::after {
    width: calc((100 / 750) * 75 * 1vw);
  }
}

/* =====================
  article1
===================== */
article[data-id='1'] h2 {
  font-family: var(--mincho);
  font-size: 26px;
  text-align: center;
  margin-bottom: 48px;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] h2 {
    font-size: calc((100 / 750) * 38 * 1vw);
    margin-bottom: calc((100 / 750) * 41 * 1vw);
    font-weight: bold;
  }
}

/* ul */
article[data-id='1'] ul {
  display: flex;
  flex-wrap: wrap;
  gap: 34px 20px;
  justify-content: center;
  margin-bottom: 124px;
}
article[data-id='1'] li {
  min-inline-size: 360px;
  border: 1px solid #d0d0d0;
  padding-block-start: 20px;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] ul {
    flex-direction: row;
    gap: calc((100 / 750) * 40 * 1vw);
    margin-bottom: calc((100 / 750) * 140 * 1vw);
    padding-inline: calc((100 / 750) * 40 * 1vw);
  }
  article[data-id='1'] li {
    min-inline-size: calc((100 / 750) * 590 * 1vw);
    padding-block-start: calc((100 / 750) * 30 * 1vw);
  }
}
article[data-id='1'] ul img {
  margin-bottom: 20px;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] ul img {
    margin-bottom: calc((100 / 750) * 30 * 1vw);
  }
}
article[data-id='1'] hgroup {
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
  text-align: center;
  padding-bottom: 26px;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] hgroup {
    gap: calc((100 / 750) * 16 * 1vw);
    padding-bottom: calc((100 / 750) * 19 * 1vw);
  }
}
article[data-id='1'] hgroup::before {
  content: '';
  width: 40px;
  height: 2px;
  background-color: var(--red);
  margin-inline: auto;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] hgroup::before {
    width: calc((100 / 750) * 70 * 1vw);
    height: calc((100 / 750) * 4 * 1vw);
  }
}
article[data-id='1'] h3 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] h3 {
    font-size: calc((100 / 750) * 60 * 1vw);
  }
}
article[data-id='1'] hgroup span {
  font-size: 15px;
}
@media not all and (min-width: 768px) {
  article[data-id='1'] hgroup span {
    font-size: calc((100 / 750) * 24 * 1vw);
  }
}