/* Set default font family to Noto Sans JP */
    body {
      font-family: "Noto Sans JP", sans-serif;
      background-color: #f0ede4;
    }

    /* Mincho font style */
    .mincho {
      font-family: "Noto Serif JP", serif;
    }

    /* Break on Touch device */
    @media screen and (max-width: 768px) {
      .touch-br {
        display: block;
      }
    }

    /* Break on Desktop */
    @media screen and (min-width: 769px) {
      .desktop-br {
        display: block;
      }
    }

    /* Dot */
    .dot {
      position: relative;
    }

    /* Dot on touch devices */
    @media screen and (max-width: 768px) {
      .dot::before {
        /* display: none; */
      }
    }

    .dot::before {
      content: "";
      position: absolute;
      top: -0.8rem;
      left: 0.4rem;
      width: 0.4rem;
      height: 0.4rem;
      background-color: #c10000;
      border-radius: 50%;
    }

    /* Main CTA Button */
    .button.main-cta {
      background-color: #c10000;
      color: #fff;
      border: none;
      border-color: #c10000;
      transition: all 0.2s ease-in-out;
    }

    /* Main CTA Button on Hover*/
    .button.main-cta:hover {
      background-color: #f00000;
      color: #fff;
      border: none;
      border-color: #c10000;
    }

    /* Main CTA Button on Focus*/
    .button.main-cta:focus {
      background-color: #d30000;
      color: #fff;
      border: none;
      border-color: #c10000;
    }

    /* Main CTA Button on Active*/
    .button.main-cta:active {
      background-color: #d30000;
      color: #fff;
      border: none;
      border-color: #c10000;
    }

    /* Main CTA Button on Disabled*/
    .button.main-cta:disabled {
      background-color: #c10000;
      color: #fff;
      border: none;
      border-color: #c10000;
    }

    /* Section Padding */
    .section {
      padding-top: 6rem !important;
      padding-bottom: 6rem !important;
    }

    /* Copy Section */
    #copy-section {
      color: rgb(24, 22, 26) !important;
      padding-top: 2rem;
      padding-bottom: 5rem;
    }

    /* Copy section on touch device */
    @media screen and (max-width: 768px) {
      #copy-section {
        padding: 1rem;
        padding-bottom: 18rem;
      }
    }

    /* Copy Section Titles */
    #copy-section h1.title {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 2rem;
      line-height: 1.4;
    }

    #copy-section h1.title span {
      color: #c10000;
    }

    #copy-section h2.subtitle {
      color: #333;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.4;
      margin-bottom: 3rem;
    }

    #copy-section h3 {
      color: #333;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 1.5rem;
    }

    /* Make Nav Element a little taller*/
    .navbar {
      padding: 0.5rem 0rem;
    }

    /* Hero */
    #hero {
      background-image: url("../images/furusato_hero_desktop.jpg");
      background-size: cover;
      background-position: right center;
      background-repeat: no-repeat;
      height: calc(100vh - 10rem);
      min-height: 700px;
      max-height: 768px;
      padding-top: 0;
    }

    /* Hero on Mobile */
    @media screen and (max-width: 768px) {
      #hero {
        background-image: url("../images/furusato_hero_touch.jpg");
        background-size: cover;
        background-position: center bottom;
        height: auto;
        max-height: 150vh !important;
      }

      /* Title h1 */
      #hero .hero-body h1.title {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 1.5rem;
      }

      /* Title h2 */
      #hero .hero-body h2.subtitle {
        font-size: 0.925rem;
        line-height: 1.4;
      }

      /* Title h3 */
      #hero .hero-body h3 {
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 1.5rem;
      }
    }

    /* Hero and Copy Sectioin on Tablet */
    @media screen and (min-width: 768px) and (max-width: 1280px) {
      #copy-section {
        width: fit-content;
        margin-left: 0;
        padding: 3rem;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 0.8rem;
      }

      #hero {
        background-image: url("../images/furusato_hero_desktop.jpg");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        height: calc(100vh - 10rem);
        min-height: 650px;
        max-height: 768px;
      }
    }

    /* Hero body */
    @media screen and (min-width: 769px),
    print {
      #hero .hero-body {
        padding-left: 8rem !important;
        padding-right: 8rem !important;
      }
    }

    /* Recommend Section */
    #recommend {
      background-color: #f0ede4;
    }

    /* Recommend Box */
    #recommend-box {
      padding: 2rem 1.5rem;
      border-radius: 1.6rem;
      background-color: transparent;
      margin: 0 1rem;
      position: relative;
      z-index: 1;
    }

    /* Recommend Box H3 */
    #recommend-box h3 {
      line-height: 1.4;
    }

    /* Recommend Box */
    #recommend-box .columns {
      background-color: #fff;
      border-radius: 1.6rem;
      padding: 1rem;
    }

    #recommend-box .columns:nth-child(2) {
      margin-top: 1rem;
    }

    /* Recommend Box on mobile */
    @media screen and (max-width: 768px) {
      #recommend-box {
        margin: 0;
      }
    }

    /* Recommend Box Tags */
    #recommend p span.tag {
      background-color: #c1000020;
    }

    /* Feature Section */
    #feature {
      background-color: #fff;
    }

    /* Feature Box image */
    #feature-box img {
      width: 80%;
      height: auto;
      margin: 0 auto 2rem !important;
      border-radius: 1.6rem;
    }

    /* Feature Box image on touch device */
    @media screen and (max-width: 1200px) {
      #feature-box img {
        width: 100%;
        height: auto;
        margin: 0 auto 2rem !important;
        border-radius: 1.6rem;
      }
    }

    /* About Section */
    #about {
      background-color: #ffff;
    }

    /* About Box */
    #about-box {
      border-radius: 1.6rem;
      background-color: transparent;
      font-weight: bold;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    /* About box title */
    #about-box p.label {
      color: #fff;
      font-size: 1rem;
      transform: translateY(-100%);
      background: #c10000;
      border: 3px solid #fff;
      border-radius: 50rem;
      padding: 10px;
      box-sizing: border-box;
      /* box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); */
      width: 70%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    /* About Box Card */
    #about-box .about-box__card {
      background-color: #f0ede4;
      border-radius: 1.6rem;
      border: 2px solid #f0ede4;
      /* box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); */
      margin: 1.5rem;
      padding: 1.5rem;
      z-index: 1;
      position: relative;
    }

    /* About Box image */
    #about-box .about-box__card__img {
      width: 75%;
      height: auto;
      margin: -1.5rem auto 2rem;
      z-index: 2;
      position: relative;
    }

    /* About Box Card Title */
    #about-box .about-box__card__title {
      color: #333;
      font-weight: 700;
      line-height: 1.4;
      z-index: 3;
      position: relative;
      margin-top: -2rem;
    }

    /* About Box Card Triangle */
    #about-box .about-box__card__triangle {
      width: auto;
      margin: 0 auto 1.5rem;
      max-width: 50%;
    }

    /* About Box Card Triangle on touch device */
    @media screen and (max-width: 1200px) {
      #about-box .about-box__card__triangle {
        max-width: 60%;
      }
    }

    /* About Box Bubble bg gradient*/
    #about-box .about-box__bubble {
      position: relative;
      color: #333;
      background-color: #fff;
      border-radius: 5rem;
      /* border: 1px solid #c10000; */
      margin: 0.8rem auto;
      padding: 0.5rem;
      padding-left: 2.5rem;
      width: 100%;
      /* text-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.2); */
      text-align: left;
    }

    /* About Box Bubble before */
    #about-box .about-box__bubble::before {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      content: '';
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2332CD32' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }

    /* About Box Card on Mobile */
    @media screen and (max-width: 768px) {
      #about-box .about-box__card {
        margin: 3rem 0;
      }
    }

    /* Make Table rows height a little tall */
    .table tbody tr td {
      padding: 0.75rem 1.5rem;
    }

    /* Make Table Rows 1st data block element on mobile */
    @media screen and (max-width: 768px) {
      .table tbody tr th {
        background-color: aliceblue;
        display: block;
        width: 100%;
        text-align: center !important;
      }

      .table tbody tr td {
        display: block;
        width: 100%;
        text-align: center !important;
      }
    }

    /* CTA Strip */
    #cta-strip {
      padding: 5rem;
      background: linear-gradient(135deg, #0004dd 0%, #6e9cd2 100%);
    }

    /* CTA Strip Title */
    #cta-strip h2.title {
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    /* CTA Strip Image */
    #cta-strip img.cta-strip__img {
      width: 100%;
      height: auto;
      margin-left: 0;
    }

    /* CTA Strip on Mobile */
    @media screen and (max-width: 768px) {
      #cta-strip {
        padding: 2rem 2rem;
      }

      /* CTA Strip Column */
      #cta-strip .column:first-child {
        margin-bottom: 3rem;
      }

      /* CTA Strip Title */
      #cta-strip h2.title {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
      }
    }

    /* FAQ Section */
    #faq {
      background-color: #f0ede4;
    }

    #faq .columns {
      margin: 1rem;
    }

    /* faq columns on mobile */
    @media screen and (max-width: 768px) {
      #faq .columns {
        margin: 0;
      }

      #faq .columns .column {
        margin: 1rem 0 !important;
      }
    }

    #faq .columns .column {
      background-color: #fff;
      border-radius: 1.6rem;
      padding: 1.6rem;
      margin: 1rem;
    }

    #faq .columns .column h4 {
      position: relative;
      line-height: 1.4;
      padding-left: 2.4rem;
    }

    #faq .columns .column h4::before {
      content: "�ｱ.";
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      color: #6e9cd2;
    }

    #faq .columns .column p {
      position: relative;
      padding-left: 2.4rem;
      border-top: 1px solid #f0ede4;
      padding-top: 1rem;
      font-size: 1.125rem;
      line-height: 1.6;
    }

    #faq .columns .column p::before {
      content: "�｡.";
      display: inline-block;
      position: absolute;
      top: 1rem;
      left: 0;
      color: #6e9cd2;
      font-weight: 700;
      font-size: 1.5rem;
    }


    /* Flow Section */
    #flow {
      background-color: #fff;
    }

    /* Flow box */
    #flow-box {
      padding: 1.5rem;
      border-radius: 1.6rem;
      background-color: #f0ede4;
      margin: 0 1rem;
      position: relative;
      z-index: 1;
    }

    /* Flow box on Mobile */
    @media screen and (max-width: 768px) {
      #flow-box {
        margin: 0 1rem 2rem 1rem;
      }
    }

    /* Flow box pseudo triangle arrow on each right side */
    #flow-box::after {
      content: "";
      position: absolute;
      top: 30%;
      right: -2rem;
      transform: translateY(50%);
      border-top: 2rem solid transparent;
      border-bottom: 2rem solid transparent;
      border-left: 3rem solid #f0ede4;
      z-index: -9999;
    }

    /* Hide the last pseudo elem */
    #flow-box:last-child::after {
      display: none;
    }

    /* Position pseudo triangle on bottom when on Mobile */
    @media screen and (max-width: 768px) {
      #flow-box::after {
        top: auto;
        bottom: -4rem;
        right: 50%;
        transform: translateX(50%);
        border-left: 2rem solid transparent;
        border-right: 2rem solid transparent;
        border-top: 3rem solid #f0ede4;
      }
    }

    /* Flow box Title */
    #flow-box h3 {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.6;
      margin-bottom: 1.5rem;
    }

    /* Flow Box Image */
    #flow-box img {
      width: 80%;
      height: auto;
      margin: 0 auto;
    }

    /* Company Section */
    #company {
      background-color: #fff;
    }

    /* Margin bottom Adjustment */
    .mb-8 {
      margin-bottom: 8rem !important;
    }

    /* line height */
    .lh-16 {
      line-height: 1.6 !important;
    }

    .lh-20 {
      line-height: 2 !important;
    }

    .lh-24 {
      line-height: 2.4 !important;
    }

    /* hilight */
    .hilight {
      font-weight: 700;
      font-size: 1.2rem;
    }

    /* Marker */
    mark {
      --color1: #c1000020;
      --color2: #c1000020;
      --bg-height: 40%;
      all: unset;
      background-image: linear-gradient(var(--color1), var(--color2));
      background-position: 0 100%;
      background-repeat: no-repeat;
      background-size: 0 var(--bg-height);
      animation: highlight 1s 1 ease-out;
      animation-fill-mode: forwards;
      animation-play-state: paused;
    }


    @-webkit-keyframes highlight {
      to {
        background-size: 100% var(--bg-height);
      }
    }


    @keyframes highlight {
      to {
        background-size: 100% var(--bg-height);
      }
    }

    /* Fadeup each section */
    .fadeup-animation {
      opacity: 0;
      transform: translateY(2rem);
      animation: fadeup-animation 0.8s ease forwards;
    }

    /* Fadeup animation */
    @keyframes fadeup-animation {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Fadeup animation delay */
    .fadeup-delay-1 {
      animation-delay: 0.3s;
    }

    .fadeup-delay-2 {
      animation-delay: 0.5s;
    }

    .fadeup-delay-3 {
      animation-delay: 0.8s;
    }

    .fadeup-delay-4 {
      animation-delay: 1s;
    }