@charset "UTF-8";
/**
 * レスポンシブのブレイクポイント設定
 */
/*
COLORS
================================================ */
:root {
  --black: #000;
  --black-thin: #333;
  --black_thin2: #4C4A4A;
  --grey_bg: #F1F1F1;
  --grey_border: #ddd;
  --grey-dark: #666;
  --grey-dark_bg: #E2E2E2;
  --white: #fff;
  --beige: #F4EDE0;
  --red: #C2221C;
  --green: #549B1D;
  --yellow: #e3bd10;
  --orange: #FD9C28;
  --blue: #1132a6;
  --skyblue: #10a3e3;
  --pink: #e145b1;
  --purple: #925BE9; }

#message .flex {
  display: flex; }
  @media (min-width: 769px) {
    #message .flex {
      justify-content: space-between; } }
  @media (max-width: 768px) {
    #message .flex {
      flex-direction: column;
      gap: 4vw 0; } }
  @media (min-width: 769px) {
    #message .flex .catchphrase {
      width: 274px; } }
  @media (max-width: 768px) {
    #message .flex .catchphrase {
      width: 100%; } }
  @media (max-width: 768px) {
    #message .flex .catchphrase img {
      width: 60%; } }
  @media (min-width: 769px) {
    #message .flex .text {
      width: calc(100% - 350px); } }
  @media (max-width: 768px) {
    #message .flex .text {
      width: 100%; } }
  #message .flex .text p {
    line-height: 1.75; }
    @media (min-width: 769px) {
      #message .flex .text p {
        font-size: 1.6rem; } }
    @media (max-width: 768px) {
      #message .flex .text p {
        font-size: 4.375vw; } }
    @media (min-width: 769px) {
      #message .flex .text p strong {
        font-size: 1.8rem; } }
    @media (max-width: 768px) {
      #message .flex .text p strong {
        font-size: 5vw; } }
    #message .flex .text p + p {
      margin-top: 1em; }

#profile {
  background: var(--grey_bg); }
  @media (min-width: 769px) {
    #profile {
      margin-top: 70px;
      padding: 70px 0; } }
  @media (max-width: 768px) {
    #profile {
      margin-top: 8vw;
      padding: 8vw 0; } }
  #profile .flex {
    display: flex; }
    @media (min-width: 769px) {
      #profile .flex {
        flex-direction: row-reverse;
        justify-content: space-between; } }
    @media (max-width: 768px) {
      #profile .flex {
        flex-direction: column;
        gap: 8vw 0; } }
    @media (min-width: 769px) {
      #profile .flex .text {
        width: calc(100% - 350px); } }
    @media (max-width: 768px) {
      #profile .flex .text {
        width: 100%; } }
    #profile .flex .text h4 {
      margin-bottom: 1.2em; }
      @media (min-width: 769px) {
        #profile .flex .text h4 {
          font-size: 2.2rem; } }
      @media (max-width: 768px) {
        #profile .flex .text h4 {
          font-size: 5vw; } }
      #profile .flex .text h4 small {
        margin-left: 1em; }
        @media (min-width: 769px) {
          #profile .flex .text h4 small {
            font-size: 1.3rem; } }
        @media (max-width: 768px) {
          #profile .flex .text h4 small {
            font-size: 3.75vw; } }
    #profile .flex .text p {
      line-height: 1.75; }
      @media (min-width: 769px) {
        #profile .flex .text p {
          font-size: 1.6rem; } }
      @media (max-width: 768px) {
        #profile .flex .text p {
          font-size: 4.375vw; } }
      #profile .flex .text p + p {
        margin-top: 1em; }
    @media (min-width: 769px) {
      #profile .flex .image {
        width: 300px; } }
    @media (max-width: 768px) {
      #profile .flex .image {
        width: 100%; } }
  #profile .box {
    display: flex;
    background: var(--white); }
    @media (min-width: 769px) {
      #profile .box {
        justify-content: space-between;
        margin-top: 50px;
        padding: 50px 50px 20px; } }
    @media (max-width: 768px) {
      #profile .box {
        flex-direction: column;
        gap: 8vw 0;
        margin-top: 6vw;
        padding: 4vw; } }
    @media (min-width: 769px) {
      #profile .box .image {
        width: 320px; } }
    @media (max-width: 768px) {
      #profile .box .image {
        width: 100%; } }
    #profile .box .image .caption {
      text-align: center;
      margin-top: .5em;
      line-height: 1.6; }
      @media (min-width: 769px) {
        #profile .box .image .caption {
          font-size: 1.5rem; } }
      @media (max-width: 768px) {
        #profile .box .image .caption {
          font-size: 3.75vw; } }
    @media (min-width: 769px) {
      #profile .box .text {
        width: calc(100% - 370px); } }
    @media (max-width: 768px) {
      #profile .box .text {
        width: 100%; } }
    #profile .box .text h4 {
      margin-bottom: 1.2em;
      text-align: center;
      font-weight: 700;
      line-height: 1.5;
      color: var(--green); }
      @media (min-width: 769px) {
        #profile .box .text h4 {
          font-size: 2.8rem; } }
      @media (max-width: 768px) {
        #profile .box .text h4 {
          font-size: 5vw; } }
      #profile .box .text h4 small {
        margin-left: 1em; }
        @media (min-width: 769px) {
          #profile .box .text h4 small {
            font-size: 1.3rem; } }
        @media (max-width: 768px) {
          #profile .box .text h4 small {
            font-size: 3vw; } }
    #profile .box .text p {
      line-height: 1.75; }
      @media (min-width: 769px) {
        #profile .box .text p {
          font-size: 1.7rem; } }
      @media (max-width: 768px) {
        #profile .box .text p {
          font-size: 4.375vw; } }
      #profile .box .text p + p {
        margin-top: 1em; }