/* =========================================
   TOKUI PROFILE
   右画像寄せ・全部差し替え版
========================================= */

.tokui-profile {
  --blue: #7fa7c5;
  --blue-dark: #5f84a4;
  --blue-light: #eaf4fa;
  --blue-pale: #f5fbfe;
  --ivory: #fdf9f4;
  --gold: #d8b36b;
  --text: #4d4743;
  --sub-text: #665f5a;
  --white: #ffffff;

  margin: 0;
  padding: 0;

  color: var(--text);

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;

  background: #fff;

  overflow: hidden;
}


/* =========================================
   COMMON
========================================= */

.tokui-profile img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* =========================================
   HERO
========================================= */

.tokui-profile__hero {
  position: relative;

  padding: 42px 20px 48px;

  text-align: center;

  background:
    radial-gradient(
      circle at 6% 15%,
      rgba(179, 217, 238, .55) 0,
      rgba(179, 217, 238, .28) 18%,
      transparent 34%
    ),
    radial-gradient(
      circle at 96% 75%,
      rgba(194, 224, 236, .45) 0,
      rgba(194, 224, 236, .18) 20%,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfe 100%
    );
}


.tokui-profile__hero::before {
  content: "";
  position: absolute;

  top: -40px;
  left: -60px;

  width: 220px;
  height: 320px;

  opacity: .38;

  background:
    radial-gradient(
      ellipse at center,
      rgba(125, 169, 198, .35) 0,
      transparent 70%
    );

  transform: rotate(-18deg);

  pointer-events: none;
}


.tokui-profile__hero::after {
  content: "✦";

  position: absolute;

  right: 8%;
  top: 18%;

  color: rgba(216, 179, 107, .75);

  font-size: 18px;

  pointer-events: none;
}


.tokui-profile__hero-inner {
  position: relative;
  z-index: 2;

  max-width: 760px;

  margin: 0 auto;
}


/* =========================================
   HERO TITLE
========================================= */

.tokui-profile__heading {
  margin-bottom: 24px;
}


.tokui-profile__heading-en {
  margin: 0;

  color: var(--blue-dark);

  font-family: Georgia, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;

  letter-spacing: .18em;
}


.tokui-profile__heading-line {
  display: block;

  width: 95px;
  height: 1px;

  margin: 10px auto 12px;

  background: var(--blue);
}


.tokui-profile__heading-ja {
  margin: 0;

  color: #463f3b;

  font-size: 25px;
  font-weight: 500;

  letter-spacing: .16em;
}


/* =========================================
   HERO MAIN IMAGE
========================================= */

.tokui-profile__main-image {
  width: 180px;
  height: 180px;

  margin: 0 auto 24px;

  border-radius: 50%;

  overflow: hidden;

  border: 5px solid rgba(255,255,255,.96);

  box-shadow:
    0 8px 24px rgba(73, 108, 131, .14);
}


.tokui-profile__main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================
   HERO INTRO
========================================= */

.tokui-profile__intro {
  font-weight: 600;
  max-width: 620px;

  margin: 0 auto;

  color: #49433f;

  font-size: 15px;
  line-height: 2;

  letter-spacing: .06em;
}


/* =========================================
   SECTION COMMON
========================================= */

.tokui-profile__section {
  position: relative;

  padding: 0;

  margin: 0;
}


.tokui-profile__section-inner {
  max-width: none;

  margin: 0;
}


.tokui-profile__content {
  display: flex;

  align-items: center;

  gap: 56px;

  max-width: 1180px;

  margin: 0 auto;

  padding: 58px 44px;

  background: transparent;

  border: none;
  border-radius: 0;

  box-shadow: none;

  backdrop-filter: none;
}


.tokui-profile__content--reverse {
  flex-direction: row-reverse;
}


/* =========================================
   TEXT
========================================= */

.tokui-profile__text {
  flex: 1;

  min-width: 0;
}


.tokui-profile__mini-label {
  position: relative;

  display: inline-block;

  margin-bottom: 10px;

  padding-left: 26px;

  color: var(--blue-dark);

  font-family: Georgia, serif;

  font-size: 13px;
  font-style: italic;
  font-weight: 600;

  letter-spacing: .14em;
}


.tokui-profile__mini-label::before {
  content: "✦";

  position: absolute;

  left: 0;
  top: -2px;

  color: var(--gold);

  font-size: 17px;
}


.tokui-profile__section-title {
  margin: 0;

  color: #413b38;

  font-size: 27px;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .08em;
}


.tokui-profile__section-line {
  display: block;

  width: 110px;
  height: 1px;

  margin: 14px 0 26px;

  background:
    linear-gradient(
      90deg,
      var(--blue) 0%,
      var(--blue) 72%,
      transparent 72%
    );
}


.tokui-profile__section-text {
  color: var(--sub-text);

  font-size: 15px;
  line-height: 2.15;

  letter-spacing: .045em;
}


/* =========================================
   SECTION IMAGE
========================================= */

.tokui-profile__image {
  position: relative;

  flex: 0 0 44%;

  max-width: 500px;
}


.tokui-profile__image::before {
  content: "";

  position: absolute;

  z-index: 0;

  width: 88%;
  height: 86%;

  left: -5%;
  bottom: -3%;

  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(172, 211, 233, .36),
      rgba(172, 211, 233, .12) 50%,
      transparent 75%
    );

  border-radius:
    48% 52% 42% 58% /
    50% 42% 58% 50%;
}


.tokui-profile__image img {
  position: relative;
  z-index: 1;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius:
    46% 54% 44% 56% /
    52% 44% 56% 48%;

  box-shadow:
    0 14px 34px rgba(68, 110, 140, .12);
}


/* =========================================
   CARD READING SECTION
========================================= */

.tokui-profile__section--card {
  background:
    linear-gradient(
      180deg,
      #f5fbfe 0%,
      #eef7fc 100%
    );
}


.tokui-profile__section--card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 1px;

  background: rgba(127, 167, 197, .16);
}


.tokui-profile__section--card::after {
  content: "✦";

  position: absolute;

  right: 7%;
  top: 18%;

  color: rgba(216,179,107,.55);

  font-size: 22px;
}


/* =========================================
   ANIMAL SECTION
========================================= */

.tokui-profile__section--animal {
  background:
    linear-gradient(
      180deg,
      #fffdf9 0%,
      #fdf8f1 100%
    );
}


.tokui-profile__section--animal::before {
  content: "🐾";

  position: absolute;

  right: 8%;
  bottom: 14%;

  font-size: 64px;

  opacity: .10;

  filter: grayscale(1);
}


.tokui-profile__section--animal .tokui-profile__mini-label::before {
  content: "🐾";

  top: -3px;

  font-size: 15px;
}


.tokui-profile__section--animal .tokui-profile__image::before {
  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(230, 215, 179, .24),
      rgba(230, 215, 179, .08) 52%,
      transparent 78%
    );
}


/* =========================================
   MESSAGE
========================================= */

.tokui-profile__message {
  position: relative;

  padding: 34px 20px 60px;

  background:
    linear-gradient(
      180deg,
      #eef8fc 0%,
      #f8fcfe 100%
    );
}


.tokui-profile__message-inner {
  max-width: 760px;

  margin: 0 auto;

  padding: 44px 34px;

  text-align: center;

  background: rgba(255,255,255,.96);

  border: 1px solid rgba(127,167,197,.18);

  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(82, 119, 143, .08);
}


.tokui-profile__paw {
  margin-bottom: 18px;

  color: #d79caf;

  font-size: 34px;
  line-height: 1;
}


.tokui-profile__message p {
  margin: 0;

  color: #514a46;

  font-size: 15px;

  line-height: 2.1;

  letter-spacing: .05em;
}


.tokui-profile__message-decoration {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-top: 26px;

  color: var(--blue);
}


.tokui-profile__message-decoration span:first-child,
.tokui-profile__message-decoration span:last-child {
  width: 58px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--blue),
      transparent
    );
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width: 900px) {

  .tokui-profile__content,
  .tokui-profile__content--reverse {
    gap: 34px;

    padding:
      50px 28px;
  }


  .tokui-profile__section-title {
    font-size: 24px;
  }


  .tokui-profile__image {
    flex-basis: 46%;
  }

}


/* =========================================
   SMARTPHONE
========================================= */

@media screen and (max-width: 600px) {

  /* -------------------------
     HERO
  ------------------------- */

  .tokui-profile__hero {
    padding:
      24px 16px
      30px;
  }


  .tokui-profile__heading {
    margin-bottom: 18px;
  }


  .tokui-profile__heading-en {
    font-size: 16px;

    letter-spacing: .16em;
  }


  .tokui-profile__heading-line {
    width: 78px;

    margin:
      8px auto
      10px;
  }


  .tokui-profile__heading-ja {
    font-size: 21px;

    letter-spacing: .14em;
  }


  .tokui-profile__main-image {
    width: 145px;
    height: 145px;

    margin-bottom: 18px;

    border-width: 4px;
  }


  .tokui-profile__intro {
    font-weight: 600;
    max-width: 310px;

    font-size: 14px;

    line-height: 1.9;

    letter-spacing: .035em;
  }


  /* -------------------------
     SECTION
  ------------------------- */

  .tokui-profile__content,
  .tokui-profile__content--reverse {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1.06fr);

    align-items: center;

    gap: 18px;

    padding:
      28px 14px;
  }


  .tokui-profile__content--reverse {
    grid-template-columns:
      minmax(0, 1.06fr)
      minmax(0, 1fr);
  }


  .tokui-profile__content--reverse .tokui-profile__image {
    order: 1;
  }


  .tokui-profile__content--reverse .tokui-profile__text {
    order: 2;
  }


  .tokui-profile__mini-label {
    margin-bottom: 7px;

    padding-left: 17px;

    font-size: 8px;

    letter-spacing: .10em;
  }


  .tokui-profile__mini-label::before {
    font-size: 11px;
  }


  .tokui-profile__section-title {
    font-size: 16px;

    line-height: 1.5;

    letter-spacing: .04em;
  }


  .tokui-profile__section-line {
    width: 72px;

    margin:
      8px 0
      13px;
  }


  .tokui-profile__section-text {
    font-weight: 600;
    font-size: 12px;

    line-height: 1.9;

    letter-spacing: .02em;
  }


  .tokui-profile__image {
    width: 100%;

    max-width: none;

    flex: none;
  }


  .tokui-profile__image img {
    aspect-ratio: 1 / 1;

    border-radius:
      48% 52% 44% 56% /
      52% 44% 56% 48%;

    box-shadow:
      0 8px 18px rgba(73,112,139,.10);
  }


  .tokui-profile__image::before {
    width: 94%;
    height: 94%;

    left: -2%;
    bottom: -2%;
  }


  /* -------------------------
     CARD SECTION
  ------------------------- */

  .tokui-profile__section--card .tokui-profile__content {
    grid-template-columns:
      minmax(0, .95fr)
      minmax(0, 1.2fr);
  }


  /* -------------------------
     ANIMAL SECTION
  ------------------------- */

  .tokui-profile__section--animal .tokui-profile__content {
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(0, .95fr);
  }


  .tokui-profile__section--animal::before {
    font-size: 42px;

    right: 2%;
    bottom: 8%;
  }


  /* -------------------------
     MESSAGE
  ------------------------- */

  .tokui-profile__message {
    padding:
      12px 10px
      24px;
  }


  .tokui-profile__message-inner {
    max-width: 100%;

    padding:
      25px 18px;

    border-radius: 12px;
  }


  .tokui-profile__paw {
    margin-bottom: 13px;

    font-size: 24px;
  }


  .tokui-profile__message p {
    font-size: 14px;
    font-weight: 600;

    line-height: 1.95;

    letter-spacing: .025em;
  }


  .tokui-profile__message-decoration {
    margin-top: 18px;
  }


  .tokui-profile__message-decoration span:first-child,
  .tokui-profile__message-decoration span:last-child {
    width: 38px;
  }

}


/* =========================================
   VERY SMALL SMARTPHONE
========================================= */

@media screen and (max-width: 380px) {

  .tokui-profile__content,
  .tokui-profile__content--reverse {
    gap: 13px;

    padding:
      25px 11px;
  }


  .tokui-profile__section-title {
    font-size: 14px;
  }


  .tokui-profile__section-text {
    font-size: 12px;
    font-weight: 600;
  }


  .tokui-profile__intro {
    font-weight: 600;
    font-size: 14px;
  }

}
.tokui-profile__hero {
    background-image: url("./assets/images/profile-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* =========================================
   PROFILE PERSON
========================================= */

.tokui-profile__person {
    margin: 18px auto 22px;
    text-align: center;
}

.tokui-profile__position {
    margin: 0 0 7px;

    color: var(--blue-dark);

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .12em;
}

.tokui-profile__name {
    margin: 0;

    color: #463f3b;

    font-size: 20px;
    font-weight: 500;

    letter-spacing: .18em;
}


/* smartphone */

@media screen and (max-width: 600px) {

    .tokui-profile__person {
        margin: 13px auto 17px;
    }

    .tokui-profile__position {
        margin-bottom: 5px;

        font-size: 10px;

        letter-spacing: .10em;
    }

    .tokui-profile__name {
        font-size: 15px;

        letter-spacing: .16em;
    }

}