@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  style.css
 style info : LPスタイル
=================================================================== */

/* --------------------------
custom-properties
-------------------------- */
:root {
    /* サイトで最も明るい色 */
    --color-lightest: #fff;

    /* サイトで最も暗い色 */
    --color-darkest: #000;

    /* メインカラー */
    --color-primary: #049BEA;
    --color-secondary: #ebf0f4;

    /* アクセントカラー */
    --color-accent01: #049BEA;

    /* フォントファミリー */
    --font-family-primary: "Noto Sans JP", sans-serif;

    /* フォントサイズ */
  	--font-size-text: min(calc(30 / 428 * 100vw), 3rem);

    /* フォントウェイト */
    --weight-extra-light: 200;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semi-bold: 600;
    --weight-bold: 700;
    --weight-extra-bold: 800;
    --weight-black: 900;

    /* テキストカラー */
    --color-text: #000000;
    --color-marker: #ffd900;
    --color-blue: #320CCD;
    --color-red: #DE0000;
    --color-light-pink: #ffeaea;
    --color-light-green: #e4ffd0;
    --color-light-blue: #d0edff;
    --color-light-orange: #fff7c7;

    /* グレイカラー */
    --color-gray01: #8da5ba;

    /* グラデーションカラー */
    --gradient01: linear-gradient(-79deg,rgba(49, 83, 115, .9) 4%, rgba(99, 137, 173, .9) 100%);

    /* ドロップシャドウカラー */
    --shadow01: 0 6px 6px 2px rgba(0,0,0,0.2);

    /* メインwidth */
    --width-main: min(428px, 100%);

    /* メインmargin */
    --margin-main: 0 auto;
    /* 親要素ぶち抜き */
    --margin-not-parent: 0 min(calc(-15 / 428 * 100vw), -15px);

    /* メインpadding */
    --padding-main: 0 min(calc(25 / 428 * 100vw), 25px);

}

.mb0 {margin-bottom: 0!important;}
.mb10 {margin-bottom: 10px!important;}
.mb20 {margin-bottom: 20px!important;}
.mb30 {margin-bottom: 30px!important;}
.mb40 {margin-bottom: 40px!important;}
.mb50 {margin-bottom: 50px!important;}
.mb60 {margin-bottom: 60px!important;}
.mb70 {margin-bottom: 70px!important;}
.mb80 {margin-bottom: 80px!important;}
.mb90 {margin-bottom: 90px!important;}
.mb100 {margin-bottom: 100px!important;}

.mt0 {margin-top: 0!important;}
.mt10 {margin-top: 10px!important;}
.mt20 {margin-top: 20px!important;}
.mt30 {margin-top: 30px!important;}
.mt40 {margin-top: 40px!important;}
.mt50 {margin-top: 50px!important;}
.mt60 {margin-top: 60px!important;}
.mt70 {margin-top: 70px!important;}
.mt80 {margin-top: 80px!important;}
.mt90 {margin-top: 90px!important;}
.mt100 {margin-top: 100px!important;}

.pb0 {padding-bottom: 0!important;}
.pb10 {padding-bottom: 10px!important;}
.pb20 {padding-bottom: 20px!important;}
.pb30 {padding-bottom: 30px!important;}
.pb40 {padding-bottom: 40px!important;}
.pb50 {padding-bottom: 50px!important;}
.pb60 {padding-bottom: 60px!important;}
.pb70 {padding-bottom: 70px!important;}
.pb80 {padding-bottom: 80px!important;}
.pb90 {padding-bottom: 90px!important;}
.pb100 {padding-bottom: 100px!important;}

.pt0 {padding-top: 0!important;}
.pt10 {padding-top: 10px!important;}
.pt20 {padding-top: 20px!important;}
.pt30 {padding-top: 30px!important;}
.pt40 {padding-top: 40px!important;}
.pt50 {padding-top: 50px!important;}
.pt60 {padding-top: 60px!important;}
.pt70 {padding-top: 70px!important;}
.pt80 {padding-top: 80px!important;}
.pt90 {padding-top: 90px!important;}
.pt100 {padding-top: 100px!important;}

.height80 {height: 80px;}

/* --------------------------
common
-------------------------- */
body {
  font-family: var(--font-family-primary);
  background-color: #eee;
}

* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
}
/* PCのみTELリンクを無効 */
@media only screen and (min-width: 751px) {
    a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    }
}

@media only screen and (min-width: 751px) {
    a {
        transition: all 300ms;

        &:hover {
            opacity: .7;
        }
    }
}


/* --------------------------
main
-------------------------- */
main {
    width: var(--width-main);
    margin: var(--margin-main);
    box-shadow: var(--shadow01);
    overflow: hidden;
    background-color: var(--color-lightest);
    color: var(--color-text);
}


/* --------------------------
テキスト関連  
-------------------------- */
.text-box {
  width: 100%;
  padding: min(calc(40 / 428 * 100vw), 40px) min(calc(10 / 428 * 100vw), 10px) min(calc(20 / 428 * 100vw), 20px);
  text-align: center;

  p {
    font-size: min(calc(18 / 428 * 100vw), 1.8rem);
    font-weight: var(--weight-medium);
    line-height: 1.9;
    margin-bottom: 25px;

    &:last-of-type {
      margin-bottom: 0;
    }

    .marker {
      background:linear-gradient(transparent 60%, var(--color-marker) 60%);
    }
  }

  .arrow_down {
    width: min(calc(210 / 428 * 100vw), 210px);
    margin: 0 auto 22px;
  }
}

strong {
  font-size: min(calc(22 / 428 * 100vw), 2.2rem);
  font-weight: var(--weight-black);
  line-height: 1.4;

  &.em {
    font-size: min(calc(26 / 428 * 100vw), 2.6rem);
    line-height: 1.8;
    border-bottom: var(--color-red) solid 3px;
  }

  &.semi-em {
    font-size: min(calc(20 / 428 * 100vw), 2.0rem);
    line-height: 1.4;
  }

  &.small-em {
    font-size: min(calc(18 / 428 * 100vw), 1.8rem);
    line-height: 1.4;
  }
}

.blue {
  color: var(--color-blue);
}

.red {
  color: var(--color-red);
}

.bold {font-weight: var(--weight-bold)!important;}

/* --------------------------
会話関連
-------------------------- */
.talk-box {
    padding: min(calc(35 / 428 * 100vw), 35px) min(calc(20 / 428 * 100vw), 20px);
    display: flex;
    flex-direction: column;
    /* gap: 25px; */

    .talk-item {
      display: flex;
      align-items: flex-start;
      gap: min(calc(28 / 428 * 100vw), 28px);
      margin-bottom: 25px;

      &.left {
        flex-direction: row;
        transform: translateX(-6px);
      }
      &.right {
        flex-direction: row-reverse;
        transform: translateX(6px);
      }

      .chara {
        width: min(calc(80 / 428 * 100vw), 80px);

        img {
          margin-bottom: 10px;
        }

        p {
          font-size: min(calc(18 / 428 * 100vw), 1.8rem);
          font-weight: var(--weight-semi-bold);
          line-height: 1;
          text-align: center;
        }
      }

      .serif {
        width: min(calc(276 / 428 * 100vw), 276px);
        min-height: 60px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 4px;
        border: solid 2px var(--color-darkest);
        border-radius: 10px;
        box-sizing: border-box;

        &.myself {
          background-color: var(--color-light-pink);

          .left &:before {
            border-right-color: var(--color-light-pink);
          }
          .right &:before {
            border-left-color: var(--color-light-pink);
          }
        }
        &.daughter {
          background-color: var(--color-light-blue);

          .left &:before {
            border-right-color: var(--color-light-blue);
          }
          .right &:before {
            border-left-color: var(--color-light-blue);
          }
        }
        &.husband {
          background-color: var(--color-light-green);

          .left &:before {
            border-right-color: var(--color-light-green);
          }
          .right &:before {
            border-left-color: var(--color-light-green);
          }
        }
        &.inoue {
          background-color: var(--color-light-orange);

          .left &:before {
            border-right-color: var(--color-light-orange);
          }
          .right &:before {
            border-left-color: var(--color-light-orange);
          }
        }

        &:before {
          content: "";
          position: absolute;
          top: 21px;
          border: 8px solid transparent;
          z-index: 2;
        }

        .left &:before {
          left: -18px;
          border-right: 16px solid;
        }
        .right &:before {
          right: -18px;
          border-left: 16px solid;
        }

        &:after {
          content: "";
          position: absolute;
          top: 22px;
          border: 7px solid transparent;
          z-index: 1;
        }

        .left &:after {
          left: -21px;
          border-right: 13px solid var(--color-darkest);
        }

        .right &:after {
          right: -21px;
          border-left: 13px solid var(--color-darkest);
        }

        p {
          font-size: min(calc(16 / 428 * 100vw), 1.6rem);
          font-weight: var(--weight-semi-bold);
          line-height: 1.75;
          text-align: center;
          letter-spacing: -0.03em;
        }
      }
    }
}

/* --------------------------
口コミ
-------------------------- */
.voice-item {
  width: min(calc(388 / 428 * 100vw), 388px);
  margin: 0 auto 30px;
  border: var(--color-primary) solid 2px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .title {
    width: 100%;
    padding: 10px 28px;
    background-color: var(--color-primary);
    font-size: min(calc(17 / 428 * 100vw), 1.7rem);
    font-weight: var(--weight-bold);
    color: var(--color-lightest);
  }

  .voice-box {
    padding: 30px 20px 10px;

    img {
      margin-bottom: 20px;
    }

    p {
      font-size: min(calc(15 / 428 * 100vw), 1.5rem);
      font-weight: var(--weight-medium);
      line-height: 2.2;

      strong {
        font-size: min(calc(17 / 428 * 100vw), 1.7rem);
        font-weight: var(--weight-bold);
        color: var(--color-primary);
      }
    }
  }
}

/* --------------------------
CVエリア
-------------------------- */
.cv-area {
  width: min(calc(390 / 428 * 100vw), 390px);
  margin: auto;

  p {
    margin-bottom: 26px;
  }

  .cv-btn {
    margin-bottom: 20px;
    border-radius: 20px;
    box-shadow: var(--shadow01);
  }
}