@charset "UTF-8";

:root {
  --color-primary: #23a83b;
  --color-sub: #4caf50;
  --color-accent: #f9832f;
  --color-gray-9: #999;
  --font-family--zen-kaku-gothic-new: "Zen Kaku Gothic New", sans-serif;
  --font-family--manrope: "Manrope", sans-serif;
}

/* ========================================
セクション共通
======================================== */
@media (width <=767px) {
  .about-streetview.section {
    padding: 60px 0 30px;
  }
}

.about-streetview .section-inner,
.about-meo .section-inner {
  --margin-bottom: 20px;

  width: min(calc(100% - 32px), 1100px);
  margin: 0 auto var(--margin-bottom);

  @media (width <=767px) {
    --margin-bottom: 0;
  }
}

.use-cse .section-inner {
  --margin-bottom: 0;

  width: min(calc(100% - 32px), 1300px);
  margin: 0 auto var(--margin-bottom);
}

@media (min-width: 767px) {
  .use-cse .section-header {
    width: min(calc(100% - 32px), 1100px);
    margin: 0 auto;
  }
}


/* .about-streetview .section-title,
.about-meo .section-title,
.use-cse .section-title {
  --font-size--en: 64px;
  --font-size--ja: 32px;
  --padding-block-end: 70px;
  --text-align: left;

  padding-block-end: var(--padding-block-end);
  font-family: var(--font-family--zen-kaku-gothic-new);
  font-size: var(--font-size--en);
  line-height: 1;
  color: #61ca3e;
  text-align: var(--text-align);
  text-transform: uppercase;
  letter-spacing: 0.28em;

  @media (width <=1100px) {
    padding-inline: 16px;
  }

  @media (width <=767px) {
    --font-size--en: 36px;
    --font-size--ja: 14px;
    --padding-block-end: 20px;
    --text-align: center;

  }
}

.about-streetview .section-title::before,
.about-meo .section-title::before,
.use-cse .section-title::before {
  content: none;
}

.about-meo .section-title::after {
  display: block;
  padding-block-start: 10px;
  font-family: var(--font-family--zen-kaku-gothic-new);
  font-size: var(--font-size--ja);
  line-height: 1.2;
  color: #333;
  text-transform: none;
  letter-spacing: normal;
  content: attr(data-title--ja);

  @media (width <=767px) {
    font-size: 16px;
  }
}

.about-streetview .section-title::after,
.use-cse .section-title::after {
  content: attr(data-title-ja-pc);
  display: block;
  padding-block-start: 10px;
  font-family: var(--font-family--zen-kaku-gothic-new);
  font-size: 28px;
  line-height: 1.2;
  color: #333;
  text-transform: none;
  letter-spacing: normal;

  @media (width <=767px) {
    content: attr(data-title-ja);
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-line;
  }
} */

/* ========================================
バッジ
======================================== */
.intro-trust {
  --padding-block: 100px 80px;

  padding-block: var(--padding-block);
  text-align: center;

  @media (width <=480px) {
    --padding-block: 0;
  }
}

.intro-trust-badges {
  --padding-block-end: 30px;

  width: min(700px, 76.2%);
  padding-block-end: var(--padding-block-end);
  margin-inline: auto;

  @media (width <=767px) {
    --padding-block-end: 18px;
  }
}

.intro-trust-desc {
  p {
    font-size: clamp(0.75rem, 0.4714rem + 1.1429vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    color: #555;
  }
}

/* ========================================
ABOUT
======================================== */
.about-map__container {
  grid-template-rows: repeat(8, auto);
  display: grid;

  @media (width <=767px) {
    grid-template-rows: repeat(12, auto);
  }
}

.about-map {

  display: grid;
  grid-template-rows: repeat(10, 1fr);
  grid-row: 1 / 7;
  grid-column: 1 / -1;


  @media (width <=480px) {
    grid-row: 1 / 3;
    grid-column: 1 / -1;
  }

  @media (width >=768px) {
    padding-inline-start: 20px;
  }

  >iframe {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    border: 0;
    border-radius: 10px;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwOCIgaGVpZ2h0PSI1NzAiIHZpZXdCb3g9IjAgMCAxMDA4IDU3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTFDMCA0LjkyNDg4IDQuOTI0ODcgMCAxMSAwSDk5N0MxMDAzLjA4IDAgMTAwOCA0LjkyNDg3IDEwMDggMTFWNTU5QzEwMDggNTY1LjA3NSAxMDAzLjA4IDU3MCA5OTcgNTcwSDU5MC4wNTJDNTgzLjk3NyA1NzAgNTc5LjA1MiA1NjUuMDc1IDU3OS4wNTIgNTU5TDU3OS4wNTIgNDY4LjY5MUM1NzkuMDUyIDQ2Mi42MTYgNTc0LjEyNyA0NTcuNjkxIDU2OC4wNTIgNDU3LjY5MUgxMUM0LjkyNDg1IDQ1Ny42OTEgMCA0NTIuNzY2IDAgNDQ2LjY5MVYxMVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=);
    mask-position: center;
    mask-size: cover;

    @media (width >=767px) {
      width: 100%;
      height: auto;
      aspect-ratio: 1008 / 570;
    }

    @media (width <=480px) {
      height: 400px;
      -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwOCIgaGVpZ2h0PSI1NzAiIHZpZXdCb3g9IjAgMCAxMDA4IDU3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTFDMC A0LjkyNDg4IDQuOTI0ODcgMCAxMSAwSDk5N0MxMDAzLjA4IDAgMTAwOCA0LjkyNDg3IDEwMDggMTFWNTU5QzEwMDggNTY1LjA3NSAxMDAzLjA4IDU3MCA5OTcgNTcwSDU5MC4wNTJDNTgzLjk3NyA1NzAgNTc5LjA1MiA1NjUuMDc1IDU3OS4wNTIgNTU5TDU3OS4wNTIgNTExQzU3OS4wNTIgNTA0LjkyNSA1NzQuMTI3IDUwMCA1NjguMDUyIDUwMEgxMUM0LjkyNDg1IDUwMCAwIDQ5NS4wNzUgMCA0ODlWMTFaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4=");
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwOCIgaGVpZ2h0PSI1NzAiIHZpZXdCb3g9IjAgMCAxMDA4IDU3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTFDMC A0LjkyNDg4IDQuOTI0ODcgMCAxMSAwSDk5N0MxMDAzLjA4IDAgMTAwOCA0LjkyNDg3IDEwMDggMTFWNTU5QzEwMDggNTY1LjA3NSAxMDAzLjA4IDU3MCA5OTcgNTcwSDU5MC4wNTJDNTgzLjk3NyA1NzAgNTc5LjA1MiA1NjUuMDc1IDU3OS4wNTIgNTU5TDU3OS4wNTIgNTExQzU3OS4wNTIgNTA0LjkyNSA1NzQuMTI3IDUwMCA1NjguMDUyIDUwMEgxMUM0LjkyNDg1IDUwMCAwIDQ5NS4wNzUgMCA0ODlWMTFaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4=");
    }
  }
}

.about-map__contents {
  grid-column: 1 / -1;
  grid-row: 6 / -1;
  z-index: 1;

  @media (width <=480px) {
    grid-row: 3 / -1;
    grid-column: 1 / -1;
    margin-block-start: -24px;
  }
}

/* MEO用の静的画像スタイル(mask-imageなし) */
.about-map--meo {

  display: grid;
  grid-template-rows: repeat(10, auto);
  grid-row: 1 / 7;
  grid-column: 1 / -1;

  @media (width <=480px) {
    grid-row: 1 / 3;
    grid-column: 1 / -1;
  }

  @media (width >=768px) {
    padding-inline-start: 20px;
  }

  >img {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 10px;

    @media (width <=480px) {
      height: 200px;
      object-fit: cover;
    }
  }
}


.streetview-intro {

  width: min(590px, 53.7svw);
  padding-block-end: 16px;
  margin-block-start: 24px;

  @media (width <=767px) {
    padding-inline: 0;
  }

  @media (width <=480px) {
    width: auto;
  }

  p {
    @media (width <=480px) {
      font-size: 15px;
    }
  }
}

@media (max-width: 480px) {
  .about-meo .streetview-intro {
    padding-bottom: 0;
  }
}

.about-map--meo .streetview-intro {
  margin-block-start: 0;
}

.streetview-desc {
  @media (width <=767px) {
    padding-inline: 0;
  }
}

.about-map__client {
  /* grid-row: 1 / 1;
  grid-column: 1 / 1; */
  align-self: center;
  width: fit-content;
  translate: -13px 0;

  grid-row: 5 / -1;
  grid-column: 1 / -1;

  @media (width <=767px) {
    translate: -8px 40px;
  }

  >div {
    padding: 10px 20px;
    line-height: 1;
    color: #fff;
    background-color: #66C657;
    border-radius: 0 4px 4px 4px;
    font-weight: bold;

    >span {
      padding-left: 1em;
    }

    @media (width <=480px) {
      padding: 8px 20px;
      font-size: 12px;
    }
  }

  &::before {
    top: -4px;
    left: 0;
    display: block;
    width: 13px;
    height: 5px;
    content: "";
    background-color: #568253;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

    @media (width <=767px) {
      width: 8px;
    }
  }
}

.streetview-title {
  --font-size: 32px;
  --margin-block-end: 30px;

  margin-block-end: var(--margin-block-end);
  font-size: var(--font-size);
  color: var(--color-sub);
  margin-block-start: 55px;

  @media (width <=767px) {
    --font-size: 16px;
  }

  @media (width <=480px) {
    --margin-block-end: 20px;
    margin-block-start: -28px;
  }

  >span {
    &:not([class]) {
      color: #666;
    }
  }
}

.about-meo .streetview-title {
  --font-size: 40px;

  @media (width <=767px) {
    --font-size: 16px;
  }

}

.about-streetview .streetview-title {
  --margin-block-end: 10px;
  margin-block-start: -10px;

  @media (width <=767px) {
    --margin-block-end: 15px;
    margin-block-start: -32px;
  }
}

.streetview-title--small {
  padding-left: 10px;
  font-size: calc(var(--font-size) / 2);
  color: var(--color-gray-9);

  @media (width <=1000px) {
    display: none;
  }
}

.streetview-desc {
  @media (width >=768px) {
    /* padding-inline-start: 40px; */
  }

  p {
    line-height: 1.7;

    @media (width <=480px) {
      font-size: 15px;
    }

    @media (width >=768px) {
      font-size: min(16px, 1.11svw);
    }

    &+p {
      margin-block-start: 1em;
    }
  }
}

/* ========================================
USE CASE
======================================== */
.embed-maps {
  --gap: 80px;

  display: flex;
  flex-direction: column;
  gap: var(--gap);

  @media (width <=767px) {
    --gap: 20px;
  }
}

.embed-map {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  width: min(1012px, 100%);
  margin: 0 0 0 auto;

  &::after {
    --width: 304px;

    z-index: -1;
    display: block;
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    place-self: flex-end flex-end;
    width: var(--width);
    aspect-ratio: 1 / 0.95;
    content: "";
    background-image: url("../images/use-case-right.svg");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(40px);

    @media (width <=480px) {
      --width: 106px;
      transform: translateY(10px);
      background-image: url("../images/use-case-right2.svg");
    }
  }
}

.embed-map:nth-child(even) {
  margin: 0 auto 0 0;

  &::after {
    justify-self: flex-start;
    background-image: url("../images/use-case-left.svg");

    @media (width <=480px) {
      transform: initial;
    }
  }

  .embed-map__body {
    --padding-inline-end: 0;
    --padding-inline-start: 80px;

    @media (width <=767px) {
      --padding-inline-start: 0;
    }
  }
}

.embed-map__body {
  --padding-inline-end: 0;
  --padding-inline-start: 0;

  display: grid;
  grid-row: -2 / 1;
  grid-column: 1 / -1;
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);

  @media (width >=768px) {
    --padding-inline-end: 80px;
  }

  @media (width <=767px) {
    --padding-inline-start: 0;
  }

  iframe {
    --box-shadow: 16px 16px #66C657;
    --aspect-ratio: auto;

    grid-row: 1 / -1;
    grid-column: 1 / -1;
    aspect-ratio: var(--aspect-ratio);
    border: 0;
    border-radius: 10px;
    box-shadow: var(--box-shadow);

    @media (width <=480px) {
      --box-shadow: 8px 8px #66C657;
      --aspect-ratio: 1.1 / 0.57;

      width: min(350px, 100%);
      height: 400px;
    }
  }
}



.embed-map__title {
  --font-size: inherit;

  grid-row: 1 / -1;
  grid-column: 1 / -1;
  align-self: flex-end;
  width: fit-content;
  padding-block-end: 10px;
  font-size: var(--font-size);
  translate: -13px -8px;

  @media (width <=480px) {
    --font-size: 10px;
    translate: -10px -12px;
  }

  >div {
    padding: 10px 20px;
    line-height: 1;
    color: #fff;
    background-color: #66C657;
    border-radius: 0 6px 6px;

    >span {
      padding-inline-end: 20px;
    }
  }

  &::before {
    top: -4px;
    left: 0;
    display: block;
    width: 13px;
    height: 5px;
    content: "";
    background-color: #568253;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);

    @media (width <=767px) {
      width: 10px;
    }
  }
}

/* ========================================
ストリートビューページ専用メインビジュアル
======================================== */
span.color--m666 {
  color: #666;
}

.streetview-hero {
  display: block grid;
  grid-template-rows: repeat(10, 1fr);

  @media (width <=767px) {
    margin-top: 25px;
  }
}

.streetview-hero__title {
  --font-size: 24px;

  z-index: 0;
  display: block grid;
  grid-template-areas: ". content .";
  grid-template-columns: 1fr min(91.9svw, 1322px) 1fr;
  grid-row: 5 / 11;
  grid-column: 1 / -1;
  align-self: flex-end;
  height: fit-content;
  font-size: var(--font-size);

  &::before {
    height: 100%;
    content: "";
    background-color: rgba(255, 255, 255, 0.85);
  }

  @media (width <=1200px) {
    --font-size: min(2.12svw, 24px);
  }

  @media (width <=767px) {
    grid-row: 5 / 10;
    transform: translateY(-40px);
  }
}

.streetview-hero__title>div {
  grid-area: content;
  width: fit-content;
  padding: 70px 50px 70px 50px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 0 15px 0 0;

  @media (width <=480px) {
    padding: 30px 50px 30px 20px;
    border-radius: 0 10px 10px 0;
  }
}

.streetview-hero.meo .streetview-hero__title {

  @media (width <=480px) {
    grid-template-columns: 1fr min(86svw, 1322px) 1fr;
    margin-right: auto;
  }
}

.streetview-hero.meo .streetview-hero__title>div {

  @media (width >=1300px) {
    padding: 80px 100px 80px 120px;
  }

  @media (width <=480px) {
    padding: 25px 25px 25px 25px;
  }
}

.streetview-hero__title--main {
  --font-size: 24px;

  padding-block-end: 10px;
  font-size: var(--font-size);
  font-weight: 600;
  line-height: 1.3;
  color: #333;

  @media (width <=1200px) {
    --font-size: min(2svw, 24px);
  }

  @media (width <=480px) {
    --font-size: 24px;

    line-height: 1;
  }
}

.streetview-hero__title--main>span {
  --font-size-span: 42px;

  font-size: var(--font-size-span);

  @media (width <=1200px) {
    --font-size-span: min(4svw, 48px);
  }

  @media (width <=480px) {
    --font-size-span: 24px;
    line-height: 1.3;
  }
}

.streetview-hero.meo .streetview-hero__title--main>span {

  @media (width <=480px) {
    --font-size-span: 22px;
  }
}

.streetview-hero__copy {
  --font-size: 22px;

  font-size: var(--font-size);
  font-weight: 500;
  color: #666;

  @media (width <=1200px) {
    --font-size: min(2svw, 24px);
  }

  @media (width <=480px) {
    --font-size: 14px;
  }
}

.streetview-hero.meo .streetview-hero__copy {

  @media (width <=480px) {
    --font-size: 12px;
  }
}

.streetview-hero__image {
  display: block grid;
  grid-template-areas: ". image";
  grid-template-columns: 1fr min(85svw, 900px);
  grid-row: -2 / 1;
  grid-column: -1 / 1;
  text-align: right;
}

.streetview-hero__image>picture {
  grid-area: image;
}