@charset "utf-8";

/* =====================================================
    KV
===================================================== */
.kv {
  width: 100%;
  padding: 10px;
  background: #eeeeee;
}

.kv_inner h2 {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.kv_title {
  width: 72.32%;
  position: absolute;
  top: 84%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.kv_subtitle {
  width: 40.23%;
  position: absolute;
  top: 88.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

.kv_number {
  width: 20.46%;
  position: absolute;
  top: 94.5%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  .kv {
    width: 100%;
    padding: 0;
    background: #000000;
  }

  .kv_title {
    width: 34.08%;
    top: 90%;
  }

  .kv_subtitle {
    width: 19.75%;
    top: 90.5%;
    left: 85%;
  }

  .kv_number {
    width: 10.91%;
    top: 90.5%;
    left: 14.5%;
  }
}


/* =====================================================
    LEAD
===================================================== */
.lead {
  width: 100%;
  padding: 30px 20px 0;
  background: #eeeeee;
}

.lead_inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.lead_inner h3 {
  font-size: min(4.186046511627907vw, 18px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.lead_inner p:nth-of-type(1) {
  padding-top: 20px;
  font-size: min(3.488372093023256vw, 15px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.lead_inner p:nth-of-type(2) {
  padding-top: 40px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .lead {
    padding: 60px 0 0;
  }

  .lead_inner h3 {
    text-align: center;
  }

  .lead_inner p:nth-of-type(1), 
  .lead_inner p:nth-of-type(2) {
    text-align: center;
  }
}


/* =====================================================
    SECTION
===================================================== */
/* SEC01 */
.sec01 {
  width: 100%;
  padding: 0 40px;
  background: #eeeeee;
}

.sec01_inner {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.sec01_inner p {
  padding-top: 40px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .sec01 {
    padding: 0;
  }
}

/* SEC02 */
.sec02 {
  width: 100%;
  background: #eeeeee;
}

.sec02_inner {
  width: 100%;
  margin: 0 auto;
}

.sec02_inner .img_area {
  width: 100%;
  padding: 40px 0 0 0;
}

.sec02_inner .credit_area {
  margin: 20px 20px 0 0;
}

.sec02_inner .credit_area li {
  font-size: min(2.3255813953488373vw, 10px);
  line-height: 2;
  color: #000000;
  text-align: right;
  margin-block: var(--leading-trim);
}

.sec02_inner .credit_area li:nth-of-type(n+2) {
  padding-top: 10px;
}

.sec02_inner h4 {
  padding: 40px 40px 0;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.sec02_inner p {
  padding: 20px 40px 0 60px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .sec02_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: start;
  }

  .sec02_inner .sec_img {
    width: 39.16%;
    max-width: 470px;
    flex: 1 1 0;
  }

  .sec02_inner .sec_txt {
    width: calc(100% - 470px);
    flex: 1 1 0;
  }

  .sec02_inner .img_area {
    padding: 60px 0 0 0;
  }

  .sec02_inner h4 {
    padding: 60px 7.5vw 0;
  }

  .sec02_inner h4:nth-of-type(n+2) {
    padding: 40px 7.5vw 0;
  }

  .sec02_inner p {
    padding: 20px 7.5vw 0 9.166666666666666vw;
  }

  .sec02_inner .credit_area {
    margin: 20px 0 0 20px;
  }

  .sec02_inner .credit_area li {
    text-align: left;
  }
}

/* SEC03 */
.sec03 {
  width: 100%;
}

.sec03_inner {
  width: 100%;
  margin: 0 auto;
}

.sec03_inner .sec_txt:nth-of-type(1) {
  width: 100%;
  padding: 0 0 40px 0;
  background: #eeeeee;
}

.sec03_inner .img_area {
  width: 100%;
  background: linear-gradient(180deg, #eeeeee 50%, #ffffff 50%);
  text-align: center;
}

.sec03_inner .img_area img {
  width: calc(100% - 24.41% * 2);
  margin: 0 auto;
}

.sec03_inner .img-switch {
  position: relative;
}

.sec03_inner .img-change {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.sec03_inner .img-switch.is-show .img-change {
  opacity: 1;
}

.sec03_inner .credit_area {
  margin: 20px auto 0;
}

.sec03_inner .credit_area li {
  font-size: min(2.3255813953488373vw, 10px);
  line-height: 2;
  color: #000000;
  text-align: center;
  margin-block: var(--leading-trim);
}

.sec03_inner .credit_area li:nth-of-type(n+2) {
  padding-top: 10px;
}

.sec03_inner h4 {
  padding: 40px 40px 0;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.sec03_inner p {
  padding: 20px 40px 0 60px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .sec03_inner .img_area img {
    width: 100%;
    max-width: 390px;
  }

  .sec03_inner .sec_txt:nth-of-type(1) {
    padding: 0 0 60px 0;
  }

  .sec03_inner h4 {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 0 0;
  }

  .sec03_inner p {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0 0 20px;
  }
}

/* SEC04 */
.sec04 {
  width: 100%;
}

.sec04_inner {
  width: 100%;
  margin: 0 auto;
}

.sec04_inner .img_area {
  width: 100%;
  padding: 40px 0 0 0;
}

.sec04_inner .credit_area {
  margin: 20px 20px 0 0;
}

.sec04_inner .credit_area li {
  font-size: min(2.3255813953488373vw, 10px);
  line-height: 2;
  color: #000000;
  text-align: right;
  margin-block: var(--leading-trim);
}

.sec04_inner .credit_area li:nth-of-type(n+2) {
  padding-top: 10px;
}

.sec04_inner h4 {
  padding: 40px 40px 0;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.sec04_inner p {
  padding: 20px 40px 0 60px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .sec04_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: start;
  }

  .sec04_inner .sec_img {
    width: 39.16%;
    max-width: 470px;
    flex: 1 1 0;
  }

  .sec04_inner .sec_txt {
    width: calc(100% - 470px);
    flex: 1 1 0;
  }

  .sec04_inner .img_area {
    padding: 60px 0 0 0;
  }

  .sec04_inner h4 {
    padding: 60px 7.5vw 0;
  }

  .sec04_inner h4:nth-of-type(n+2) {
    padding: 40px 7.5vw 0;
  }

  .sec04_inner p {
    padding: 20px 7.5vw 0 9.166666666666666vw;
  }
}

/* SEC05 */
.sec05 {
  width: 100%;
}

.sec05_inner {
  width: 100%;
  margin: 0 auto;
}

.sec05_inner h4 {
  padding: 40px 40px 0;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

.sec05_inner p {
  padding: 20px 40px 0 60px;
  font-size: min(3.255813953488372vw, 14px);
  line-height: 2;
  color: #000000;
  text-align: justify;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .sec05_inner h4 {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 0 0;
  }

  .sec05_inner p {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 0 0 20px;
  }
}


/* =====================================================
    ARCHIVE
===================================================== */
.archive {
  width: 100%;
}

.archive_inner {
  width: 100%;
  margin: 40px auto 0;
}

.archive_inner h5 {
  text-align: center;
}

.archive_inner h5 svg {
  width: 44.04%;
  max-width: 188px;
  margin: 0 auto;
}

.archive_inner ul {
  width: calc(100% - 30px * 2);
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.archive_inner li {
  flex: 0 0 calc(50% - 20px / 2);
}

@media only screen and (min-width: 768px) {
  .archive_inner {
    margin: 60px auto 0;
  }

  .archive_inner ul {
    width: 565px;
  }

  .archive_inner li {
    flex: 0 0 175px;
  }
}


/* =====================================================
    FOOTER
===================================================== */
.footer {
  width: 100%;
  margin: 40px auto 0;
  padding: 80px 0;
  background: #012F51;
}

.footer_inner {
  width: 100%;
}

.footer_inner ul {
  font-size: min(2.3255813953488373vw, 10px);
  line-height: 2.5;
  color: #ffffff;
  text-align: center;
  margin-block: var(--leading-trim);
}

.footer_inner li a {
  color: #ffffff;
}

#specialty .footer_inner li a:hover {
  color: #ffffff !important;
}

.footer_inner p {
  padding-top: 40px;
  font-size: min(4.651162790697675vw, 20px);
  line-height: 2;
  color: #ffffff;
  text-align: center;
  margin-block: var(--leading-trim);
}

@media only screen and (min-width: 768px) {
  .footer {
    margin: 60px auto 0;
  }
}