@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* =======================================
   RESET
======================================= */

body,
h1,
h2,
ul,
li,
p {
  letter-spacing: unset;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* =======================================
   COMMON
======================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: #fff;
  color: #4d4d4d;
  font-feature-settings: "palt";
  font-family: "Noto Sans", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  line-height: 1.64;
  overflow-x: hidden;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
}

/* text */

.hiragino {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.fw3 {
  font-weight: 300;
}

.fw9 {
  font-weight: 900;
}

.nowrap {
  white-space: nowrap;
}

.txt-c {
  text-align: center;
}

.txt-col-b-1 {
  color: #00a5e3;
}

.txt-col-b-2 {
  color: #0068b3;
}

.txt-col-y {
  color: #fff100;
}
/* layout */

.img-c {
  margin: auto;
}

.mb {
  margin-bottom: 40px;
}

@media screen and (max-width: 1169px) {
  .sp-br::before {
    content: "\A";
    white-space: pre-wrap;
  }
}

/* content */

.main-content {
  margin-top: 60px;
}

@media screen and (max-width: 1169px) {
  .main-content {
    margin-top: 40px;
  }
}

.content-wrap {
  margin: auto;
  max-width: 90%;
  width: 1240px;
}

.content-ttl {
  color: #0081c8;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 1.16;
  text-align: center;
}

.content-ttl-s {
  display: block;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 4px;
}

.content-ttl-l {
  font-feature-settings: "palt";
  font-size: 86px;
  font-weight: normal;
  letter-spacing: 30px;
  line-height: 1.4;
  margin: 24px 0 16px;
  text-align: center;
}

.content-txt {
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.88;
}

@media screen and (max-width: 767px) {
  .content-ttl-s {
    font-size: 14px;
    padding: 8px 0 0;
  }
}

/* flex */

.content-flex {
  display: flex;
  justify-content: center;
  margin: auto;
}

.content-flex-ttl {
  color: #0081c8;
  font-size: 44px;
  font-weight: bold;
  line-height: 1.32;
  padding: 0 0 8px 0;
}

.content-flex-sentence {
  font-size: 22px;
}
/* dot-line */

.dot-line-container {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 40px;
  justify-content: center;
  left: 50%;
  position: relative;
  translate: -50%;
}

.dot-line450 {
  margin: 56px 0 64px;
  width: 450px;
}

.dot-line1112 {
  width: 1112px;
}

.dot-line {
  background: #00a5e3;
  border-radius: 50%;
  flex-basis: 11px;
  height: 11px;
  min-width: 11px;
}

.dot-line:nth-child(even) {
  background: #0081c8;
}

.dot-line-2 {
  margin: 40px auto 80px;
  max-width: 90%;
  width: 1240px;
}
/* responsive */

@media screen and (min-width: 1170px) {
  .content-ttl-l {
    letter-spacing: 25px;
  }
}

@media screen and (max-width: 1169px) {
  .content-flex-sentence {
    font-size: 16px;
  }

  .content-flex-ttl {
    font-size: 28px;
  }

  .content-flex-txt {
    width: 100%;
  }

  .content-ttl-l {
    font-size: 80px;
    letter-spacing: 8px;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 16px;
  }

  .pc {
    display: none;
  }

  .content-flex-ttl {
    text-align: center;
  }

  .content-txt {
    letter-spacing: 0;
  }

  .content-ttl {
    font-size: 36px;
  }

  .content-ttl-l {
    font-size: 46px;
    letter-spacing: 0;
    margin: 24px 0 16px;
  }

  .dot-line {
    flex-basis: 8px;
    height: 8px;
    min-width: 8px;
  }

  .dot-line-2 {
    margin: 24px auto 40px;
  }

  .dot-line-container {
    gap: 12px;
  }
}
/* =======================================
   MV
======================================= */

.slider-wrapper {
  height: 860px;
  left: 50%;
  max-width: 100%;
  position: relative;
  translate: -50%;
  width: 1536px;
}

.overlay-img {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 50%;
  max-height: 90%;
  position: absolute;
  top: 48%;
  transform-origin: top center;
  translate: -50% -50%;
  width: 90%;
  z-index: 2;
}

.overlay-img-1 {
  width: 270px;
}

.overlay-img-2 {
  margin: 50px auto;
  max-width: 100%;
  width: 1231px;
}

.overlay-img-3 {
  width: 350px;
}

.mv-video video {
  height: 860px;
  object-fit: cover;
  width: 100%;
}
@media screen and (min-width: 744px) {
  .mv-video.pc {
    display: block;
  }

  .mv-video.sp {
    display: none;
  }
}

@media screen and (max-width: 743px) {
  .mv-video.pc {
    display: none;
  }

  .mv-video.sp {
    display: block;
  }
}

@media screen and (max-width: 1169px) and (min-width: 1024px) {
  .mv-video video {
    height: auto;
    object-fit: cover;
  }

  .overlay-img {
    scale: 0.84;
    top: 54%;
  }

  .overlay-img-1 {
    scale: 0.8;
  }

  .overlay-img-2 {
    margin: 8px auto 40px;
    scale: 1.16;
  }

  .overlay-img-3 {
    scale: 0.8;
  }

  .slider-wrapper {
    height: auto;
  }
}

@media screen and (max-width: 1023px) and (min-width: 743px) {
  .mv-video video {
    height: auto;
    object-fit: cover;
  }

  .overlay-img {
    scale: 0.76;
    top: 56%;
  }

  .overlay-img-1 {
    scale: 0.7;
  }

  .overlay-img-2 {
    margin: 8px auto 16px;
    scale: 1.16;
  }

  .overlay-img-3 {
    scale: 0.7;
  }

  .slider-wrapper {
    height: auto;
  }
}

@media screen and (max-width: 744px) and (min-width: 480px) {
  .mv-video video {
    height: auto;
    object-fit: cover;
  }

  .overlay-img {
    scale: 0.76;
    top: 56%;
  }

  .overlay-img-1 {
    scale: 0.7;
  }

  .overlay-img-2 {
    margin: 8px auto 16px;
    scale: 1.16;
  }

  .overlay-img-3 {
    scale: 0.7;
  }

  .slider-wrapper {
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .mv-video.sp video {
    height: auto;
    object-fit: cover;
    width: 100%;
  }

  .overlay-img {
    top: 40%;
  }

  .overlay-img-1 {
    left: 8px;
    position: relative;
    scale: 0.4;
    top: 59px;
  }

  .overlay-img-2 {
    margin: 0 auto;
  }

  .overlay-img-3 {
    position: relative;
    scale: 0.4;
    top: -40px;
  }

  .slider-wrapper {
    height: auto;
  }
}

/* =======================================
   FIRST
======================================= */

.first-content-ttl-1 {
  font-feature-settings: "palt";
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 0.8px;
  text-align: center;
}

.first-content-ttl-1 span {
  color: #0081c8;
  font-weight: 600;
}

.first-content-ttl-2 {
  margin: 40px auto 32px;
}

@media screen and (max-width: 767px) {
  .first-content-ttl-1 {
    font-size: 28px;
  }

  .first-content-ttl-2 {
    margin: 24px auto 16px;
  }
}

/* Safariのみルビ位置調整 */
@supports (-webkit-hyphens: none) {
  ruby rt {
    transform: translateY(0.3em);
  }
}

/* =======================================
   NATURAL
======================================= */

.sec-natural {
  background: #6ecdef;
  color: #fff;
  margin: 60px 0;
  padding: 100px 0 0;
  position: relative;
}

.sec-natural::before {
  background-image: url(../images/img-wave01.svg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 101%;
  content: "";
  display: block;
  height: 80px;
  position: absolute;
  top: -1px;
  width: 101vw;
}

.sec-natural::after {
  background-image: url(../images/img-wave02.svg);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 101%;
  bottom: -1px;
  content: "";
  display: block;
  height: 80px;
  position: absolute;
  scale: 1.01;
  width: 100%;
  z-index: 2;
}

.sec-natural .content-ttl {
  color: #fff;
}

.sec-natural .content-ttl-l {
  left: 0.16em;
  position: relative;
}

.water-image img {
  margin: 56px 0 0;
  width: 100%;
}

@keyframes sway {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(2px, -2px);
  }

  50% {
    transform: translate(-2px, 2px);
  }

  75% {
    transform: translate(2px, 2px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.dot {
  animation: sway 5s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}

.dot1 {
  animation-delay: 0s;
  height: 36px;
  left: 10%;
  top: 10%;
  width: 36px;
}

.dot2 {
  animation-delay: 1s;
  height: 27px;
  left: 3%;
  top: 29%;
  width: 27px;
}

.dot3 {
  animation-delay: 2s;
  height: 39px;
  left: 10%;
  top: 43%;
  width: 39px;
}

.dot4 {
  animation-delay: 0.5s;
  height: 16px;
  left: 7%;
  top: 58%;
  width: 16px;
}

.dot5 {
  animation-delay: 1.5s;
  height: 30px;
  right: 4%;
  top: 12%;
  width: 30px;
}

.dot6 {
  animation-delay: 0.8s;
  height: 45px;
  right: 8%;
  top: 35%;
  width: 45px;
}

.dot7 {
  animation-delay: 2.5s;
  height: 19px;
  right: 3%;
  top: 46%;
  width: 19px;
}

.dot8 {
  animation-delay: 1.2s;
  height: 31px;
  right: 8%;
  top: 60%;
  width: 31px;
}

@media screen and (max-width: 767px) {
  .sec-natural {
    margin: 24px 0 40px;
    padding: 56px 0 0;
  }

  .sec-natural::before {
    background-image: url(../images/sp/img-wave01.svg);
    scale: 1.1;
  }

  .sec-natural::after {
    background-image: url(../images/sp/img-wave02.svg);
    min-width: 100vw;
    scale: 1.1;
  }

  .sec-natural .content-ttl {
    padding: 16px 0 0;
  }

  .dot1 {
    height: 20px;
    left: 10%;
    top: 15%;
    width: 20px;
  }

  .dot2 {
    height: 17px;
    left: 3%;
    top: 27%;
    width: 17px;
  }

  .dot3 {
    height: 22px;
    left: 8%;
    top: 48%;
    width: 22px;
  }

  .dot4 {
    height: 8px;
    left: 8%;
    top: 74%;
    width: 8px;
  }

  .dot5 {
    height: 18px;
    right: 6%;
    top: 18%;
    width: 18px;
  }

  .dot6 {
    height: 25px;
    right: 6%;
    top: 40%;
    width: 25px;
  }

  .dot7 {
    height: 9px;
    right: 3%;
    top: 52%;
    width: 9px;
  }

  .dot8 {
    height: 31px;
    right: 8%;
    top: 60%;
    width: 31px;
  }
}

/* =======================================
   LINE UP
======================================= */

.sec-lineup .content-ttl-l img {
  margin: 40px auto 80px;
  max-width: 80%;
}

.sec-lineup .content-flex {
  gap: 120px;
  justify-content: center;
  padding: 116px 0;
  position: relative;
}

.sec-lineup .content-flex-txt {
  border-radius: 50%;
  color: #fff;
  max-height: 540px;
  max-width: 540px;
  min-height: 540px;
  min-width: 540px;
  position: relative;
}

.sec-lineup .content-flex-txt-detail {
  letter-spacing: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 290px;
}

.sec-lineup .content-flex-txt-detail dt {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.6;
}

.sec-lineup .content-flex-txt-detail dd {
  font-size: 33px;
  font-weight: 600;
  margin: 8px 0 0;
}

.element {
  font-size: 18px;
  font-weight: 300;
}

.sec-lineup .content-flex-txt.bg-1 {
  background: #00a5e3;
  left: 24px;
  top: 72px;
}

.sec-lineup .content-flex-txt.bg-2 {
  background: #0068b3;
  left: -24px;
  top: 72px;
}

.sec-lineup .content-flex-1 .content-flex-img-1 {
  max-height: 500px;
  max-width: 500px;
  min-height: 500px;
  min-width: 500px;
  position: relative;
  top: -40px;
}

.sec-lineup .content-flex-2 {
  flex-direction: row-reverse;
  top: -30px;
}

.sec-lineup .content-flex-2 .content-flex-img-1 {
  max-height: 500px;
  max-width: 500px;
  min-height: 500px;
  min-width: 500px;
  position: relative;
  top: -40px;
}

.sec-lineup .content-flex-img-2 {
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  z-index: 1;
}

@media screen and (max-width: 1169px) {
  .sec-lineup .content-ttl-l img {
    margin: 40px auto;
  }

  .sec-lineup h4 {
    font-size: 30px;
    line-height: 1.4;
    margin: 16px 0;
  }

  .sec-lineup img-c {
    width: 300px;
  }

  .sec-lineup .sp-txt-detail {
    border: 1px solid #00a5e3;
    margin: auto;
    max-width: 88%;
    width: 320px;
  }

  .sec-lineup .sp-txt-detail.txt-detail-2 {
    border: 1px solid #0068b3;
  }

  .sec-lineup .sp-txt-detail dt {
    background: #fff100;
    font-size: 28px;
    font-weight: 900;
    padding: 4px;
  }

  .sec-lineup .sp-txt-detail dd {
    padding: 16px;
  }

  .element {
    font-size: 20px;
    margin: auto;
    text-align: left;
    width: 90%;
  }

  .sec-lineup .pc {
    display: none;
  }

  .sec-lineup .sp {
    display: unset;
  }
}

@media screen and (min-width: 1170px) {
  .sec-lineup .pc {
    display: unset;
  }

  .sec-lineup .sp {
    display: none;
  }
}

/* =======================================
   COMPONENT
======================================= */

.sec-component {
  background-image: url(../images/bg-water.webp);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 40px 0;
  padding: 120px 0;
  position: relative;
}

.sec-component::before {
  background-image: url(../images/img-wave01.svg);
  background-position: top center;
  background-repeat: repeat-x;
  content: "";
  display: block;
  height: 80px;
  margin: 0 0 40px;
  position: absolute;
  top: -1px;
  width: 101vw;
  z-index: 9;
}

.sec-component::after {
  background-image: url(../images/img-wave02.svg);
  background-position: bottom center;
  background-repeat: repeat-x;
  bottom: -1px;
  content: "";
  display: block;
  height: 80px;
  position: absolute;
  width: 101vw;
  z-index: 2;
}

.txt-reference {
  font-size: 16px;
  margin: 40px 0 0;
  text-align: right;
}

@media screen and (min-width: 1170px) {
  .sec-component .content-ttl,
  .accordion {
    display: none;
  }

  .hex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    left: 50%;
    position: relative;
    translate: -50%;
    width: 1500px;
  }

  .hex {
    display: flex;
    flex-direction: column;
    height: 470px;
    justify-content: center;
    width: 470px;
  }

  .hex-1 {
    background: url(../images/bg-hex01.svg) no-repeat center/420px;
    color: #0081c8;
    text-align: center;
  }

  .hex-2 {
    background: url(../images/bg-hex02.svg) no-repeat center/contain;
    color: #0068b3;
    text-align: center;
  }

  .hex-3 {
    background: url(../images/bg-hex03.svg) no-repeat center/contain;
    color: #fff;
    text-align: center;
  }

  .hex-4 {
    background: url(../images/bg-hex04.svg) no-repeat center/contain;
    color: #fff;
    text-align: center;
  }

  .hex-center {
    flex-basis: 100%;
    height: 470px;
    order: 4;
    width: 470px;
  }

  .silica {
    order: 2;
  }

  .sulfate {
    left: 90px;
    order: 1;
    position: relative;
    top: 245px;
  }

  .sodium {
    left: 90px;
    order: 5;
    position: relative;
    top: -245px;
  }

  .potassium {
    order: 6;
  }

  .calcium {
    left: -90px;
    order: 3;
    position: relative;
    top: 245px;
  }

  .magnesium {
    left: -90px;
    order: 7;
    position: relative;
    top: -245px;
  }

  .hex-ttl {
    font-size: 38px;
    padding: 0 0 8px 0;
  }

  .hex-ttl-s {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
  }

  .hex-center .hex-ttl {
    font-size: 46px;
    letter-spacing: 8px;
    line-height: 1.24;
    position: relative;
    text-box-trim: trim-both;
    top: 8px;
  }

  .hex-center span {
    display: block;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 4px;
    padding: 8px 0 0;
  }

  .silica .hex-ttl {
    font-size: 70px;
    font-weight: bold;
    padding: 0;
  }

  .hex-txt {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0;
    margin: 0 auto;
    text-align: left;
    width: 240px;
  }
}

@media screen and (max-width: 1169px) {
  .hex-container {
    display: none;
  }

  .sec-component {
    padding: 120px 0;
  }

  .sec-component::before {
    background-image: url(../images/sp/img-wave01.svg);
    min-width: 101vw;
  }

  .sec-component::after {
    background-image: url(../images/sp/img-wave02.svg);
    min-width: 101vw;
  }
}
/* accordion */

.accordion {
  font-size: 18px;
  margin: 32px auto;
}

.accordion-item {
  background: #fff;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-header {
  color: #0081c8;
  cursor: pointer;
  font-weight: bold;
  padding: 12px 16px;
  position: relative;
  transition: background 0.3s;
}

.accordion-item:nth-child(1) .accordion-header {
  background: #ffea00;
  font-size: 32px;
  padding: 4px 16px;
}

.accordion-header.active::after {
  background: #bee8f8;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  translate: -50% -50%;
  width: 90%;
}

.accordion-item:nth-child(1) .accordion-header.active::after {
  display: none;
}

.accordion-content {
  background: #fff;
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}

.accordion-content > div {
  min-height: 0;
}

.js-accordion-header.active + .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content p {
  margin: 16px auto;
  position: relative;
  width: 90%;
}

.accordion-header span {
  height: 12px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  width: 12px;
}

.accordion-header span::before {
  background: #808080;
  content: "";
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 12px;
}

.accordion-header span::after {
  background: #808080;
  content: "";
  display: block;
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 1px;
}

.accordion-header.active span::after {
  display: none;
}

.txt-reference {
  font-size: 11px;
  margin: 0;
}


/* =======================================
   TASTE
======================================= */

.sec-taste .content-flex {
  align-items: center;
  justify-content: space-between;
}

.sec-taste .content-flex-img {
  margin: 0 6% auto;
}

.sec-taste .content-flex-txt {
  flex-basis: 540px;
}

.sec-taste .content-flex-circle {
  align-items: center;
  background: #6ecdef;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 423px;
  justify-content: center;
  margin: auto;
  min-width: 423px;
}

.sec-taste .content-flex-circle-txt {
  color: #fff;
  font-size: 26px;
  position: relative;
  text-align: center;
  top: -5px;
}

.sec-taste .content-flex-circle-txt span {
  display: block;
  font-size: 17px;
  position: relative;
  top: -5px;
}

.sec-taste .content-flex-1 {
  padding: 32px 0;
}

.sec-taste .content-flex-1 .content-flex-img {
  height: 480px;
  position: relative;
  width: 560px;
}

.sec-taste .content-flex-1 img {
  object-fit: contain;
  position: absolute;
}

.sec-taste .content-flex-1 img:nth-child(1) {
  right: 220px;
  top: 0;
  width: 300px;
  z-index: 2;
}

.sec-taste .content-flex-1 img:nth-child(2) {
  right: -10px;
  top: 50px;
  width: 250px;
  z-index: 1;
}

.sec-taste .content-flex-1 img:nth-child(3) {
  bottom: 0;
  right: 170px;
  z-index: 3;
}

.sec-taste .content-flex-2 {
  align-items: center;
  gap: 40px;
  padding: 32px 0;
}

@media screen and (min-width: 1170px) {
  .sec-taste .content-flex-txt {
    min-width: 540px;
  }
}

@media screen and (max-width: 1169px) {
  .sec-taste .content-flex-1 {
    gap: 16px;
  }

  .sec-taste .content-flex-circle {
    height: 320px;
    min-width: 320px;
  }

  .sec-taste .content-flex-circle img {
    width: 160px;
  }

  .sec-taste .content-flex-circle-txt {
    font-size: 22px;
    top: 4px;
  }

  .sec-taste .content-flex-circle-txt span {
    font-size: 16px;
  }

  .sec-taste .content-flex-img {
    margin: 0;
    scale: 0.9;
  }

  .sec-taste .content-flex-txt {
    flex-basis: 50%;
  }
}

@media screen and (max-width: 767px) {
  .sec-taste .content-flex {
    flex-direction: column;
    max-width: 90%;
  }

  .sec-taste .content-flex-1 .content-flex-img {
    height: 280px;
    left: 55%;
    translate: -50%;
    width: 100%;
  }

  .sec-taste .content-flex-1 img:nth-child(1) {
    right: 46%;
    top: -40px;
  }

  .sec-taste .content-flex-1 img:nth-child(2) {
    left: 46%;
    top: 50px;
  }

  .sec-taste .content-flex-1 img:nth-child(3) {
    display: none;
  }

  .sec-taste .content-flex-txt {
    flex-basis: unset;
  }

  .sec-taste .content-wrap {
    max-width: 100%;
  }
}


/* =======================================
   AREA
======================================= */

.sec-area .content-flex {
  align-items: center;
  padding: 32px 0;
}

.sec-area .content-flex-img {
  margin: 0 6% 0 auto;
  position: relative;
}

.sec-area .content-flex-txt {
  flex-basis: 528px;
}

.sec-area .content-flex .content-flex-img {
  height: 380px;
  position: relative;
  width: 560px;
}

.sec-area .content-flex img {
  object-fit: contain;
  position: absolute;
}

.sec-area .content-flex-1 img:nth-child(1) {
  bottom: 0;
  right: 220px;
  width: 310px;
  z-index: 1;
}

.sec-area .content-flex-1 img:nth-child(2) {
  right: -10px;
  top: 0;
  width: 260px;
  z-index: 2;
}

.sec-area .content-flex-2 img:nth-child(1) {
  right: 0;
  top: 0;
  width: 260px;
  z-index: 2;
}

.sec-area .content-flex-2 img:nth-child(2) {
  right: 290px;
  top: 50px;
  width: 240px;
  z-index: 1;
}

.sec-area .content-flex-2 img:nth-child(3) {
  bottom: 0;
  right: 170px;
  z-index: 3;
}

.sec-area .content-flex .content-txt {
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  z-index: 4;
}

.sec-area .content-flex .content-txt span {
  position: relative;
  right: 110px;
  top: 120px;
}

@media screen and (min-width: 1170px) {
  .sec-area .content-flex-txt {
    min-width: 540px;
  }
}

@media screen and (max-width: 767px) {
  .sec-area .content-flex {
    flex-direction: column;
    max-width: 90%;
  }

  .sec-area .content-flex-txt {
    flex-basis: unset;
  }

  .sec-area .content-flex-1 .content-flex-img {
    height: 280px;
    left: 55%;
    scale: 0.86;
    translate: -50%;
    width: 100%;
  }

  .sec-area .content-flex-1 img:nth-child(1) {
    right: 46%;
    top: -40px;
  }

  .sec-area .content-flex-1 img:nth-child(2) {
    left: 46%;
    top: -50px;
  }

  .sec-area .content-flex-1 img:nth-child(3) {
    left: 46%;
    top: -50px;
  }

  .sec-area .content-flex-2 .content-flex-img {
    display: none;
  }

  .sec-area .content-flex .content-txt span {
    left: 100px;
    position: relative;
    top: 0;
  }

  .sec-area .content-wrap {
    max-width: 100%;
  }
}


/* =======================================
   MAKING
======================================= */

.sec-making .content-ttl {
 letter-spacing: 4px;
}

.sec-making .content-making-txt {
 font-weight: bold;
 text-align: center;
 color: #0081c8;
 font-size: 41px;
}

.sec-making .dot-line1112 {
 margin: 0 0 80px;
}

.sec-making .content-ttl-s {
   width:100%;
}

.sec-making .content-ttl-s span {
 letter-spacing: 1px;
 display: block;
 padding: 8px 0;
}

.sec-making .content-flex {
 margin: 64px 0;
}

.sec-making .content-flex-1 {
 gap: 40px;
 align-items: center;
 margin: 40px auto;
}

.sec-making .content-flex-ttl {
 font-size: 50px;
}

.sec-making .content-txt-l {
 font-size: 64px;
}

.sec-making .txt-reference {
 width:1064px;
 max-width:100%;
 margin:auto;
 position:relative;
  top:-24px;
}

@media screen and (min-width: 768px) {
.sec-making .content-txt-s.txt-r {
   margin-top:-56px;
}
}
@media screen and (max-width: 767px) {
   .sec-making .content-txt-s {
    width:100%;
    position:relative;
    left:50%;
    translate:-50% 0;
   text-align: left;
   }
}
.marker {
 border-bottom: 4px solid #fff100;
}

.leader-container {
 display: block;
 position: relative;
 width: 640px;
 margin: auto;
}
.leader {
 position: absolute;
 right: 16%;
 top: 90px;
 width: 2px;
 background: #b3b3b3;
 transform-origin: top;
 animation: drawLine 2s ease-in-out infinite;
 animation-fill-mode: both;
 z-index: 2;
}
@keyframes drawLine {
 0% {
  height: 0;
  opacity: 0;
 }
 80% {
  height: 160px;
  opacity: 1;
 }
 100% {
  height: 160px;
  opacity: 0;
 }
}

.sec-making .content-flex-2 {
 justify-content: center;
 gap: 36px;
 margin: 40px 0 0;
}

.sec-making .content-txt-s {
 font-size: 18px;
 margin: -24px 0 80px;
}

.sec-making .content-ttl-s {
 margin:8px auto;
}

.sec-making .content-ttl-s span {
 letter-spacing: 1px;
 white-space:nowrap;
}

.sec-making .content-ttl-2 {
 font-size: 46px;
}

.sec-making .content-flex-3 {
 gap: 40px;
}

.sec-making .content-flex-3 img {
 border-radius: 40px;
}
@media screen and (min-width: 1170px) {
 .sec-making .content-flex-2 img {
  min-width: 505px;
 }

}
@media screen and (max-width: 1169px) {
 .sec-making .content-flex-3 img {
  border-radius: 18px;
 }
 .leader {
  right: 20%;
 }
 @keyframes drawLine {
 0% {
  height: 0;
  opacity: 0;
 }
 80% {
  height: 145px;
  opacity: 1;
 }
 100% {
  height: 145px;
  opacity: 0;
 }
}
}
@media screen and (max-width: 1023px) {
 .sec-making .content-flex-3 img {
  border-radius: 18px;
 }
 .leader {
  right: 24%;
 }
 @keyframes drawLine {
 0% {
  height: 0;
  opacity: 0;
 }
 80% {
  height: 130px;
  opacity: 1;
 }
 100% {
  height: 130px;
  opacity: 0;
 }
}
}
@media screen and (max-width: 767px) {

 .sec-making .dot-line1112 {
  margin: 0 0 40px;
 }

 .sec-making .content-flex-2 {
  flex-direction: column;
  align-items: center;
  gap: 8px;
 }

.sec-making .content-flex-2 .content-flex-img {
  display:flex;
     flex-direction: column;
     align-items:center;
  width: 100%;
 }

.sec-making .content-flex-img.img-1 img {
  position:relative;
  left:1em;
 }

  .sec-making .content-flex-img.img-2 img {
  position:relative;
  left:-1em;
 }

 .sec-making .content-flex-ttl {
  font-size: 40px;
 }

 .leader-container {
  width: 100%;
 }

 .leader {
  position: absolute;
  left: 50%;
  top: 133px;
  width: 2px;
 }

 @keyframes drawLine {
 0% {
  height: 0;
  opacity: 0;
 }
 80% {
  height:140px;
  opacity: 1;
 }
 100% {
  height: 140px;
  opacity: 0;
 }
}
 .sec-making .content-making-txt {
  line-height: 1.16;
 }
 .sec-making .content-txt {
  font-weight: 300;
  line-height: 1.64;
  letter-spacing: 1px;
  margin: 24px 0 0;
 }
 .sec-making .content-txt-l {
  font-size: 56px;
 }
 .sec-making .content-txt-l::before {
  content: "\A";
  white-space: pre-wrap;
 }
 .sec-making .content-txt-s {
  font-size: 16px;
  margin: 40px 0;
 }

 .sec-making .content-ttl-2 {
  font-size: 32px;
  letter-spacing: 2px;
 }
 .sec-making .content-ttl-3 {
  font-size: 40px;
 }
 .sec-making .content-flex-3 {
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 24px 0;
 }
}


/* =======================================
   LAST
======================================= */

.sec-last {
  background: #ddf3fc;
  margin: 40px 0 0;
  padding: 120px 0 100px;
  position: relative;
}

.sec-last::before {
  background-image: url(../images/img-wave01.svg);
  background-position: top center;
  background-repeat: repeat-x;
  content: "";
  display: block;
  height: 80px;
  margin: 0 0 40px;
  position: absolute;
  top: -1px;
  width: 1001w;
  z-index: 9;
}

.txt-cta {
  color: #0081c8;
  font-size: 31px;
  font-weight: bold;
  margin: 0 0 24px;
  position: relative;
  top: -10px;
}

.txt-cta::before {
  background: #00a5e3;
  content: "";
  display: inline-block;
  height: 50px;
  left: -40px;
  position: relative;
  top: 14px;
  transform: rotate(-40deg);
  width: 3px;
}

.txt-cta::after {
  background: #0068b3;
  content: "";
  display: inline-block;
  height: 50px;
  left: 40px;
  position: relative;
  top: 14px;
  transform: rotate(40deg);
  width: 3px;
}

.cta-container {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: center;
  width: 100%;
}

.cta-container a {
  background: #fff;
  border-radius: 50px;
  flex-basis: calc(100% / 3);
}

.cta-container a::after {
  display: none;
}

.cta-btn {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.cta-btn .logo {
  margin: auto;
  object-fit: contain;
}

.cta-btn .ico {
  object-fit: contain;
}

@media screen and (max-width: 1169px) {
  .cta-container {
    flex-direction: column;
  }

  .cta-container a {
    height: 80px;
    max-width: 90%;
    width: 345px;
  }

  .cta-btn .ico {
    width: 70px;
  }

  .sec-last .img-c {
    width: 300px;
  }

  .sec-last .txt-c,
  .sec-last .txt-cta {
    font-size: 22px;
  }

  .sec-last::before {
    background-image: url(../images/sp/img-wave01.svg);
  }

  .txt-cta::before {
    height: 36px;
    left: -24px;
    top: 10px;
  }

  .txt-cta::after {
    height: 36px;
    left: 24px;
    top: 10px;
  }
}


/* =======================================
   FIX BUTTON
======================================= */

.btn-fix {
  bottom: 0.8em;
  opacity: 0;
  position: fixed;
  right: 0.8em;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  visibility: hidden;
  z-index: 9;
}

.btn-fix.show {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .btn-fix {
    bottom: 1.6em;
    width: 72px;
  }
}