@charset "UTF-8";

/* -------------------------------------------*/
html {
  overflow-x: clip;
}
body {
  height: 100%;
  position: relative;
  overflow-x: clip;
  font-family: 'LINESeedJP', sans-serif;
  color: #4d4846;
}
.l-main {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
}
.no-link {
  opacity: 0.4 !important;
  pointer-events: none !important;
}
section {
  position: relative;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
.u-sp {
  display: none;
}

/* -------------------------------------------*/
header {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 4.6vw;
}
header h1 {
  margin-left: 21.9vw;
  width: 9vw;
}
.mv {
  aspect-ratio: 2686/1438;
}
.mv::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/pc/mv_back.webp) no-repeat top center/cover;
  z-index: -1;
}
.mv-catch {
  position: absolute;
  top: 5.4%;
  left: 47.7%;
  transform: translate(-50%, 0);
  width: 48vw;
}

.inner {
  position: relative;
  padding: 1vw 0 3.2vw;
  text-align: center;
}
.inner::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffef85;
  z-index: -1;
}

.flow-img {
  padding: 0 2rem 0 0rem;
  width: 57.5vw;
  margin: 0 auto;
}

.donate {
  margin-top: 1.8vw;
}
.donate-head {
  position: relative;
  padding-top: 3.2vw;
}
.donate-head::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 39vw;
  aspect-ratio: 1123/245;
  margin: 0 auto;
  background: url(../images/pc/donate_pic.webp) no-repeat top center/contain;
}
.donate-head > img {
  position: relative;
  width: 9.3vw;
  margin: 0 auto;
  z-index: -1;
}
.donate-body {
  padding: 1.7vw 3.7vw 2.3vw;
  background-color: #fff;
  border-radius: 1vw;
  width: 67vw;
  margin: -4.5vw auto 0;
}
.donate-body ul {
  display: flex;
  justify-content: space-between;
}
.donate-body li {
  display: flex;
  flex-direction: column;
  width: calc(50% - 1.2vw);
}
.donate-box-title {
  width: 56%;
  margin: 0 auto;
}
.donate-box-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: -7px;
  padding: 1vw 2vw 1.5vw;
  background-color: #f9f4ee;
  border: 5px solid #000;
  border-radius: 1vw;
}
.donate-box-body dt {
  display: flex;
  align-items: center;
  height: 6vw;
}
.donate-box-body dt img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.donate-box-body dd {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 1vw;
}
.donate-box-body dd p {
  margin-bottom: 1.3vw;
  font-size: 1.2vw;
  letter-spacing: 0.05em;
  line-height: 1.74;
  text-align: justify;
}
.donate-box-body dd a {
  display: block;
  position: relative;
  margin: auto auto 0;
  width: 100%;
  filter: drop-shadow(0.4vw 0.4vw 0 #dcdddd);
}
.donate-box-body dd a:hover {
  transform: translate(0.4vw, 0.4vw);
  filter: drop-shadow(0 0 0 #dcdddd);
  transition: 0.3s;
}
.donate-box-body dd img {
  display: block;
  width: 100%;
}
.donate-body ul li:nth-child(1) .donate-box-body {
  border-color: #00b5ee;
}
.donate-body ul li:nth-child(2) .donate-box-body {
  border-color: #8cc63f;
}
.donate-note {
  margin: 1.6vw auto 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.deposit {
  margin-top: 6.1vw;
}
.deposit-title {
  width: 15vw;
  margin: 0 auto;
}
.deposit-body {
  margin-top: 2.1vw;
}
.deposit-body ul {
  display: flex;
  gap: 4vw;
  width: 57vw;
  margin: 0 auto;
}
.deposit-body ul li {
  position: relative;
}
.deposit-btns {
  position: absolute;
  top: 30.2vw;
  left: 50%;
  transform: translate(-50%, 0);
  width: 87%;
}
.deposit-btns a {
  display: block;
  transition: 0.3s;
}
.deposit-btns a:not(:first-child) {
  margin-top: 0.6vw;
}
.deposit-btns a:hover {
  opacity: 0.8;
}
.deposit-bottom {
  position: absolute;
  top: 40.4vw;
  left: 50%;
  transform: translate(-50%, 0);
  width: 79%;
}

.gaiyo {
  margin-top: 7vw;
}
.gaiyo-wrap {
  width: 63.5vw;
  margin: 0 auto;
}
.gaiyo-wrap:not(:first-child) {
  margin-top: 2.5vw;
}
.gaiyo-wrap table {
  position: relative;
  z-index: 1;
  width: 100%;
  border: solid 1px #090000;
  table-layout: fixed;
}
.gaiyo-wrap table tr {
  border-bottom: solid 1px #090000;
}
.gaiyo-wrap table tr:nth-child(odd) td {
  background-color: #fcfff2;
}

.gaiyo-wrap table th {
  position: relative;
  vertical-align: middle;
  width: 20.7%;
  background-color: #fbf5b3;
  border-right: solid 1px #090000;
  font-size: 1.094vw; /* 21px → 1.094vw */
  font-weight: 900;
  letter-spacing: 1em;
  text-indent: 1em;
  z-index: 1;
}
.gaiyo-wrap table th.long {
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.gaiyo-wrap table th.short {
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}
.gaiyo-wrap table th::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
  z-index: -1;
}

.gaiyo-wrap table td {
  vertical-align: middle;
  background-color: #fff;
  padding: 0.16em 0;
  font-size: 1.094vw; /* 21px → 1.094vw */
  font-weight: 700;
  line-height: 1.32;
  text-align: center;
}
.gaiyo-wrap table td:not(:first-child) {
  border-left: solid 1px #090000;
}
.gaiyo-wrap table td ol {
  padding-left: 1em;
  font-size: 0.9em;
}
.gaiyo-wrap table td ul li {
  position: relative;
  padding-left: 1em;
}
.gaiyo-wrap table td > ul > li::before {
  content: '○';
  position: absolute;
  top: 1px;
  left: 0;
}
.gaiyo-wrap table td ul.note li::before {
  content: '※';
  position: absolute;
  top: 1px;
  left: 0;
}
.gaiyo-wrap table td.sm {
  font-size: 0.867vw; /* 16.65px → 0.867vw */
}
.gaiyo-wrap table td.ms {
  font-size: 0.938vw; /* 18px → 0.938vw */
}
.gaiyo-wrap table td.md {
  font-size: 0.99vw; /* 19px → 0.990vw */
}
.gaiyo-wrap table td.left {
  text-align: left;
}
.gaiyo-wrap table td.anyline {
  padding: 0.5em 1em 0.8em;
}
.product-title {
  width: 9.5vw;
  margin: 0 auto;
}
.about-title {
  width: 14.9vw;
  margin: 0 auto;
}
.gaiyo-body {
  margin-top: 1.3vw;
}
.gaiyo-table {
  width: 100%;
}
.gaiyo-bottom {
  margin-top: 5.1vw;
}
.detail-title {
  width: 20.5vw;
  margin: 0 auto;
}
.detail-btns {
  position: relative;
  width: 45.5vw;
  margin: 1.5vw auto 0;
}
.detail-btns::before {
  content: '';
  display: block;
  position: absolute;
  top: 0.7vw;
  left: -11vw;
  width: 10vw;
  aspect-ratio: 282/279;
  background: url(../images/pc/detail_pic01.webp) no-repeat top center/contain;
  z-index: 1;
}
.detail-btns::after {
  content: '';
  display: block;
  position: absolute;
  top: 0.4vw;
  right: -8.4vw;
  width: 7.2vw;
  aspect-ratio: 212/240;
  background: url(../images/pc/detail_pic02.webp) no-repeat top center/contain;
  z-index: 1;
}
.detail-btns a {
  display: block;
  transition: 0.3s;
}
.detail-btns a:not(:first-child) {
  margin-top: 1.3vw;
}
.detail-btns a:hover {
  opacity: 0.8;
}

footer {
  padding: 6vw 0 4vw;
}
.contact-title {
  width: 14vw;
  margin: 0 auto;
}
.contact-body {
  margin-top: 3.3vw;
}
.contact-body a {
  display: block;
  margin: 0 auto;
}
.contact-body a:nth-child(1) {
  width: 52.5vw;
}
.contact-body a:nth-child(2) {
  width: 37.5vw;
  margin-top: 6.8vw;
}
.pagetop {
  margin-top: 10vw;
}
.pagetop a {
  display: block;
  position: relative;
  width: 9vw;
  margin: 0 auto;
  padding-top: 1.7vw;
  transition: 0.3s;
}
.pagetop a::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 1.7vw;
  aspect-ratio: 29/12;
  background: url(../images/pc/pagetop_arrow.webp) no-repeat top center/contain;
  z-index: 1;
  transition: 0.3s;
}
.pagetop a:hover::before {
  top: 0vw;
}
.footer-logo {
  margin-top: 4vw;
}
.footer-logo img {
  width: 16vw;
  margin: 0 auto;
}

@media screen and (max-width: 666px) {
  .u-sp {
    display: block;
  }
  .u-pc {
    display: none;
  }
  header {
    height: 14vw;
  }
  header h1 {
    margin-left: 3.7vw;
    width: 32.7vw;
  }
  .mv {
    aspect-ratio: inherit;
  }
  .mv::before {
    display: none;
  }
  .mv-catch {
    position: inherit;
    transform: none;
    width: 100%;
  }

  .inner {
    margin-top: -5vw;
    padding: 10vw 0 25vw;
  }

  .flow-img {
    padding: 0;
    width: 94.5vw;
  }

  .donate {
    margin-top: 9.5vw;
  }
  .donate-head {
    padding-top: 8vw;
  }
  .donate-head::before {
    width: 91vw;
    aspect-ratio: 686/203;
    background: url(../images/sp/donate_pic.webp) no-repeat top center/contain;
  }
  .donate-head > img {
    width: 37vw;
  }
  .donate-body {
    padding: 5.7vw 3vw 9.1vw;
    border-radius: 3.2vw;
    width: 96vw;
    margin-top: -17.5vw;
  }
  .donate-body ul {
    display: block;
  }
  .donate-body li {
    width: 100%;
  }
  .donate-body li:not(:first-child) {
    margin-top: 8.4vw;
  }
  .donate-box-title {
    width: 56%;
    margin: 0 auto;
  }
  .donate-box-body {
    min-height: 93vw;
    margin-top: -7px;
    padding: 7vw 7vw 5vw;
    border: 3px solid #000;
    border-radius: 4vw;
  }
  .donate-box-body dt {
    height: 17vw;
  }
  .donate-box-body dt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .donate-box-body dd {
    margin-top: 2vw;
  }
  .donate-box-body dd p {
    margin: 0 0 3vw 0;
    font-size: 4.8vw;
    line-height: 1.59;
  }
  .donate-box-body dd a {
    filter: drop-shadow(1.5vw 1.5vw 0 #dcdddd);
  }
  .donate-note {
    width: 86vw;
    margin: 2vw auto 0;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 4vw;
    text-align: left;
  }

  .deposit {
    margin-top: 13.5vw;
  }
  .deposit-title {
    width: 37vw;
  }
  .deposit-body {
    margin-top: 8.3vw;
  }
  .deposit-body ul {
    display: block;
    width: 73.3vw;
  }
  .deposit-body ul li:not(:first-child) {
    margin-top: 5vw;
  }
  .deposit-btns {
    top: 99.2vw;
  }
  .deposit-btns a:not(:first-child) {
    margin-top: 2.5vw;
  }
  .deposit-bottom {
    top: 162.4vw;
    width: 90%;
  }
  .deposit-dls {
    display: block;
    position: absolute;
    top: 23.7vw;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .deposit-dl {
    display: block;
    margin: 0 auto;
  }
  .deposit-dl:nth-child(1) {
    width: 44vw;
  }
  .deposit-dl:nth-child(2) {
    width: 55.5vw;
    margin-top: 6.5vw;
  }

  .gaiyo {
    margin-top: 19vw;
  }
  .gaiyo-wrap {
    width: 73.5vw;
  }
  .gaiyo-wrap:not(:first-child) {
    margin-top: 12.4vw;
  }

  .gaiyo-body > ul > li:not(:first-child) {
    margin-top: 2.67vw;
  }
  .gaiyo-body > ul > li dl {
    border: solid 1px #595757;
    text-align: left;
  }
  .gaiyo-body > ul > li dl dt {
    position: relative;
    border-bottom: solid 1px #595757;
    padding: 0.5em 1.3em;
    font-size: 2.61vw;
    font-weight: 700;
    z-index: 1;
  }
  .gaiyo-body > ul > li dl dt::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fbf5b3;
    border: solid 0.5vw #fbf5b3;
    z-index: -1;
  }
  .gaiyo-body > ul > li dl dd {
    padding: 0.65em 1.5em 0.8em;
    background-color: #fff;
    font-size: 2.4vw;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.27;
  }
  .gaiyo-body > ul > li dl dd ul li {
    position: relative;
    padding-left: 1em;
  }
  .gaiyo-body > ul > li dl dd > ul > li::before {
    content: '○';
    position: absolute;
    top: 0;
    left: 0;
  }
  .gaiyo-body > ul > li dl dd > ul > li > ul {
    padding-top: 0.3em;
  }
  .gaiyo-body > ul > li dl dd ul.note > li::before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
  }

  .product-title {
    width: 19.5vw;
  }
  .madoguchi-title {
    width: 30.6vw;
    margin: 0 auto;
  }
  .banking-title {
    width: 60.6vw;
    margin: 0 auto;
  }
  .about-title {
    width: 30.9vw;
  }
  .gaiyo-body {
    margin-top: 3.2vw;
  }
  .gaiyo-table {
    width: 100%;
  }
  .gaiyo-bottom {
    margin-top: 26.1vw;
  }
  .detail-title {
    width: 75%;
  }
  .detail-btns {
    width: 86.5vw;
    margin: 5vw auto 0;
  }
  .detail-btns::before {
    top: -30.3vw;
    left: 33vw;
    width: 19vw;
  }
  .detail-btns::after {
    top: auto;
    bottom: -23.3vw;
    left: 34vw;
    width: 18vw;
  }
  .detail-btns a:not(:first-child) {
    margin-top: 5vw;
  }

  footer {
    padding: 20vw 0 15vw;
  }
  .contact-title {
    width: 42vw;
  }
  .contact-body {
    margin-top: 11.3vw;
  }
  .contact-body a {
    display: block;
    margin: 0 auto;
  }
  .contact-body a:nth-child(1) {
    width: 88.5vw;
  }
  .contact-body a:nth-child(2) {
    width: 84.5vw;
    margin-top: 15vw;
  }
  .pagetop {
    margin-top: 22vw;
  }
  .pagetop a {
    width: 37vw;
    padding-top: 6vw;
  }
  .pagetop a::before {
    width: 7vw;
  }
  .footer-logo {
    margin-top: 16vw;
  }
  .footer-logo img {
    width: 68vw;
  }
}