/*
 * style.css
 * Description: Phiten & MIZUTANI Nano Metax Coating "Health & Longevity Car" Landing Page Main Stylesheet
 */

/* --- 基本設定 (Reset / Base Styles) --- */
html {
  scroll-behavior: smooth; /* スムーズスクロール */
}

body {
  font-family: 'M PLUS 1p', 'M PLUS Rounded 1c', 'Zen Kaku Gothic New', 'Product Sans', 'Hiragino Sans', 'ヒラギノ角ゴシック', Meiryo, 'メイリオ', 'Yu Gothic', '游ゴシック', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
}

*, *::before, *::after {
  box-sizing: border-box; /* レイアウト崩れを防ぐ */
  transition: 0.5s;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%; /* 画像が親要素からはみ出さないように */
  height: auto; /* アスペクト比を維持 */
  vertical-align: top; /* 余白をなくす */
}

/* Google Icon ------------------------ */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 80;
  color: #757575;
}

nav {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 2;
  display: none;
}
  nav .menu {
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 40px;
    cursor: pointer;
  }
  nav .menu:hover {
    background-color: #c0ddf0;
  }
    nav .menu span {
      position: absolute;
      left: 6px;
      top: 7px;
      font-size: 27px;
      color: #034291;
    }

/* --- メインコンテンツ (Main Content) --- */
main {
  padding: 0;
}

/* --- プレゼンテーションコンテンツ --- */
section.briefing {
  position: relative;
  width: 100%;
  padding-bottom: 2%;
  background-image: url(/img/bg_blue.jpg);
}
  /* ポップアップ */
  section.briefing .popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
    /* ポップアップの基本情報 */
    section.briefing div.popup img {
      position: absolute;
      border-radius: 200px;
      background-color: #fff;
      mask-image: radial-gradient(circle, #fff 20%, transparent 70%);
      aspect-ratio: 1 / 1;
      opacity: 0;
      display: none;
    }
    /* ポップアップの位置とサイズ */
    section.briefing div.popup img[name=p10] {
      top: 17%;
      left: 10%;
      width: 22%;
    }
    section.briefing div.popup img[name=p11] {
      top: 33%;
      left: 7%;
      width: 22%;
    }
    section.briefing div.popup img[name=p12] {
      bottom: 5%;
      right: 10%;
      width: 35%;
    }
    section.briefing div.popup img[name=p13] {
      top: 10%;
      right: 10%;
      width: 30%;
    }
    section.briefing div.popup img[name=p14] {
      bottom: 20%;
      right: 40%;
      width: 40%;
    }
    section.briefing div.popup img[name=p15] {
      bottom: 10%;
      left: 5%;
      width: 30%;
    }
    section.briefing div.popup img[name=p16] {
      top: 15%;
      right: 25%;
      width: 20%;
    }
    section.briefing div.popup img[name=p17] {
      top: 25%;
      right: 3%;
      width: 30%;
    }
    section.briefing div.popup img[name=p18] {
      top: 10%;
      left: 30%;
      width: 40%;
    }
    section.briefing div.popup img[name=p19] {
      bottom: 3%;
      left: 35%;
      width: 30%;
    }
    section.briefing div.popup img[name=p20] {
      bottom: 27%;
      right: 30%;
      width: 20%;
    }
  section.briefing .car-coating {
    width: 95%;
    margin: auto auto;
  }
    section.briefing .car-coating .nano-metax-logo {
      position: absolute;
      width: 36%;
      left: 0;
      right: 0;
      top: 4%;
      margin: auto auto;
      text-align: center;
      z-index: 3;
    }
      section.briefing .car-coating .nano-metax-logo .logo {
        width: 20%;
        border-radius: 10px;
      }
      section.briefing .car-coating .nano-metax-logo .metax {
        padding-top: 25px;
      }
  section.briefing .main-photo {
    padding-top: 15%;
  }

ul.collab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  width: 50%;
  margin: auto auto;
  display: grid;
  grid-template-columns: 39% 8% 43%;
  gap: 0;
  z-index: 3;
}
  ul.collab li {
    text-align: center;
  }
  ul.collab li[name=phiten] {
    background-color: #fff;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
  }
  ul.collab li[name=mizutani] {
    background-color: #011f5f;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
  }
  ul.collab li[name=line] {
    background: linear-gradient(0.25turn, #fff, #011f5f);
  }
    ul.collab li img {
      width: 60%;
      padding: 10px 0;
    }

/** 健康長寿の車 */
section.health-kongevity-car {
  background-image: url(/img/bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  background-color: #fff;
  margin-bottom: 20px;
}
  section.health-kongevity-car div.logo {
    position: relative;
    text-align: center;
  }
    section.health-kongevity-car div.logo img.phiten {
      position: absolute;
      left: 0;
      right: 0;
      width: 160px;
      bottom: 0;
      margin: auto auto;
    }
  /* タイトルロゴ */
  section.health-kongevity-car h1 {
    position: relative;
    display: inline-block;
    font-size: 4.5em;
    padding-right: 35px;
    padding-left: 35px;
    padding-bottom: 0;
    margin-top: 3%;
    margin-bottom: 0;
    letter-spacing: 3pt;
  }
    section.health-kongevity-car h1 ruby.kenko {
      color: #52750b;
    }
    section.health-kongevity-car h1 ruby.chojyu {
      color: #446109;
    }
    section.health-kongevity-car h1 ruby.kuruma {
      color: #666;
    }
    section.health-kongevity-car h1 rt {
      font-size: 10pt;
      padding-bottom: 10px;
    }
    section.health-kongevity-car h1 span{
      position: absolute;
      right: 0;
      top: -10px;
      font-size: 24pt;
      padding-left: 10px;
      line-height: 3.5em;
    }
  section.health-kongevity-car h2 {
    padding: 0;
    margin: 0;
    font-size: 1.6em;
    letter-spacing: 1pt;
    border: 0;
    color: #2f7632;
  }
  /* テキストパート */
  section.health-kongevity-car .text {
    width: 80%;
    margin: auto auto;
    padding: 20px 0;
    font-weight: bold;
  }
    section.health-kongevity-car .text span {
      display: none;
    }
  /* YouTube動画 */
  section.health-kongevity-car .movie {
    width: 90%;
    margin: auto auto;
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 2%;
  }
    section.health-kongevity-car .movie iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }

  /* ミズタニの紹介 */
  section.health-kongevity-car .about {
    position: relative;
    width: 100%;
    padding-top: 20px;
    text-align: center;
  }
    section.health-kongevity-car .mizutani article,
    section.health-kongevity-car .about article {
      padding-top: 30px;
      margin: auto auto;
      width: 100%;
      display: grid;
      grid-template-columns: 63% 37%;
    }
    section.health-kongevity-car .mizutani article.sp{
      display: none;
    }
      section.health-kongevity-car .mizutani article div.photo,
      section.health-kongevity-car .about article div.photo {
        position: relative;
        aspect-ratio: 21 / 9;
        background-size: cover;
      }
      section.health-kongevity-car .mizutani article div.text,
      section.health-kongevity-car .about article div.text {
        padding: 10px 20px;
        margin: 0;
        width: 100%;
      }
        section.health-kongevity-car .mizutani article div.text{
          padding-top: 0;
          margin: 0;
          padding-bottom: 30px;
        }
        section.health-kongevity-car .mizutani article div.text h3,
        section.health-kongevity-car .about article div.text h3 {
          line-height: 130%;
          padding-bottom: 15px;
        }
        section.health-kongevity-car .mizutani article div.text h4,
        section.health-kongevity-car .about article div.text h4 {
          font-size: 13pt;
          padding: 0;
        }
        section.health-kongevity-car .mizutani article div.text h4.pickup,
        section.health-kongevity-car .about article div.text h4.pickup {
          color: #c01a1a;
          font-size: 14pt;
        }
        section.health-kongevity-car .mizutani article div.text p.l,
        section.health-kongevity-car .about article div.text p.l {
          text-align: left;
        }
        section.health-kongevity-car .mizutani div.text p,
        section.health-kongevity-car .about div.text p {
          line-height: 180%;
        }
        section.health-kongevity-car .mizutani div.text p.l,
        section.health-kongevity-car .about div.text p.l {
          text-align: left;
        }
        section.health-kongevity-car .about div.text img.chie1 {
          width: 200px;
        }
        section.health-kongevity-car .about div.text img.photo {
          width: 100%;
          max-width: 600px;
          padding-top: 20px;
        }
        section.health-kongevity-car .about div.text.chie p {
          text-align: left;
          display: inline-block;
        }

    section.health-kongevity-car .about article.r {
      padding-top: 30px;
      grid-template-columns: 59% 39%;
    }
      section.health-kongevity-car .about article.r div.photo {
        aspect-ratio: 20 / 12;
      }
    section.health-kongevity-car .mizutani article.sp div.photo{
      aspect-ratio: 16 / 10;
    }
    section.health-kongevity-car .mizutani article.sp div.photo iframe,
    section.health-kongevity-car .about article div.photo iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
    section.health-kongevity-car .mizutani article div.photo iframe{
      padding-top: 20px;
    }
    section.health-kongevity-car .about .construction {
      width: 100%;
      box-sizing: border-box;
      padding: 0px;
      padding-bottom: 30px;
    }
      section.health-kongevity-car .about .construction ol {
        margin: auto auto;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
      }
      section.health-kongevity-car .about .construction ol li{
        position: relative;
        width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }
        section.health-kongevity-car .about .construction ol li img {
          width: 100%;
        }
        section.health-kongevity-car .about .construction ol li div.number {
          position: absolute;
          top: 10px;
          left: 10px;
          background-color: rgba(101, 155, 255, 0.801);
          padding: 10px 23px;
          font-size: 20pt;
          font-weight: bold;
          color: #fff;
        }
        section.health-kongevity-car .about .construction ol li div.label{
          padding: 0;
        }
          section.health-kongevity-car .about .construction ol li div.label h4{
            padding-top: 6px;
          }
          section.health-kongevity-car .about .construction ol li div.label p{
            padding: 0;
            padding-bottom: 3px;
            margin: 0;
            font-size: 11pt;
            text-align: left;
            display: inline-block;
          }


    section.health-kongevity-car .about .price {
      width: 100%;
      box-sizing: border-box;
      padding: 0px;
    }
      section.health-kongevity-car .about .price ol {
        margin: auto auto;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 50% 50%;
      }
      section.health-kongevity-car .about .price ol li{
        width: 100%;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
      }
        section.health-kongevity-car .about .price ol li img {
          width: 100%;
        }
        section.health-kongevity-car .about .price ol li div.label{
          padding: 0;
          margin-top: 10px;
          background-color: #ddd;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
        }
          section.health-kongevity-car .about .price ol li div.label h4{
            padding-top: 6px;
          }
          section.health-kongevity-car .about .price ol li div.label p{
            padding: 0;
            padding-bottom: 3px;
            margin: 0;
            font-size: 11pt;
          }
        section.health-kongevity-car .about .price ol li div.price{
          padding: 6px 0;
          margin-bottom: 0;
          background-color: #eee;
          font-size: 18pt;
          font-weight: bold;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
        }
          section.health-kongevity-car .about .price ol li div.price span{
            font-size: 12pt;
          }


  /* コンセプト・カーデパート ミズタニ */
  section.health-kongevity-car .concept,
  section.health-kongevity-car .mizutani {
    position: relative;
    width: 100%;
    padding-top: 20px;
    text-align: center;
  }
  section.health-kongevity-car .mizutani {
    padding-top: 50px;
  }
    section.health-kongevity-car .mizutani .title {
      color: #011f5f;
    }
    section.health-kongevity-car .concept h3,  
    section.health-kongevity-car .mizutani h3 {
      letter-spacing: 2pt;
    }
    section.health-kongevity-car .concept rt {
      font-size: 6pt;
      padding-bottom: 5px;
    }
    section.health-kongevity-car .mizutani rt {
      font-size: 7pt;
      padding-bottom: 8px;
    }
    section.health-kongevity-car .concept .message {
      font-size: 13pt;
      padding-bottom: 10px;
    }
    section.health-kongevity-car .mizutani .message {
      padding-top: 20px;
    }
      section.health-kongevity-car .mizutani .message p,
      section.health-kongevity-car .concept .message p {
        line-height: 70%;
        font-weight: bold;
      }
        section.health-kongevity-car .mizutani .message p.b {
          font-size: 15pt;
          padding-top: 10px;
          line-height: 150%;
          color: #a51212;
        }

    section.health-kongevity-car .mizutani .text p {
      text-align: left;
    }
    section.health-kongevity-car .mizutani .text p.b {
      font-size: 16pt;
    }
    /* スライド */
    section.health-kongevity-car .mizutani .slide {
      padding-top: 15px;
      margin: auto auto;
      width: 70%;
      aspect-ratio: 2 / 1;
    }
      section.health-kongevity-car .mizutani .slide div.photo {
        position: relative;
      }
        section.health-kongevity-car .mizutani .slide div.photo img {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 1;
          z-index: 20;
        }
      section.health-kongevity-car .mizutani .slide div.photo img:not(:first-child) {
        opacity: 0;
      }
    /* スライド */
    section.health-kongevity-car .mizutani .linker-2 {
      padding-top: 20px;
      margin: auto auto;
    }
      section.health-kongevity-car .linker img{
        width: 60%;
        border: 2px solid #d28726;
      }
      section.health-kongevity-car .linker-2 img{
        padding: 2% .5%;
      }
    /* 画像とテキストパート */
    section.health-kongevity-car .mizutani article {
      padding-top: 30px;
      margin: auto auto;
      width: 80%;
      display: grid;
      grid-template-columns: 54% 44%;
      gap: 2%;
    }
      section.health-kongevity-car .mizutani article.r {
        width: 100%;
        grid-template-columns: 59% 49%;
      }
      section.health-kongevity-car .mizutani article div.photo {
        position: relative;
        aspect-ratio: 21 / 15;
        background-size: cover;
      }
        section.health-kongevity-car .mizutani article.r div.photo {
          aspect-ratio: 21 / 9;
        }

    section.health-kongevity-car .concept article {
      padding-top: 10px;
      display: grid;
      grid-template-columns: 49% 49%;
      gap: 2%;
    }
    section.health-kongevity-car .concept article.r {
      grid-template-columns: 69% 29%;
    }
      
      section.health-kongevity-car .concept article div.photo {
        position: relative;
        aspect-ratio: 18 / 9;
        background-size: cover;
      }

      /* コンセプト1つめ左画像 */
      section.health-kongevity-car .concept article.c div.photos {
        position: relative;
        width: 100%;
        aspect-ratio: 18 / 9;
      }
        section.health-kongevity-car .concept article.c div.photos div.photo {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 1;
          z-index: 20;
        }

      /* コンセプト2つめ右画像 */
      section.health-kongevity-car .concept article div.photos {
        position: relative;
        width: 100%;
        aspect-ratio: 13 / 11;
        background-size: cover;
      }
        section.health-kongevity-car .concept article.r div.photos div.photo {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          aspect-ratio: 13 / 11;
          opacity: 1;
          z-index: 20;
        }

/** ナノメタックス カーコーティング */
section.nano-metax-coating {
  background-image: url(/img/bg.jpg);
  background-position: center center;
}
  section.nano-metax-coating .logo {
    width: 50%;
    margin: auto auto;
    padding: 0;
    text-align: center;
  }
    section.nano-metax-coating .logo img {
      width: 30%;
      padding-top: 10%;
      padding-bottom: 3%;
    }
    section.nano-metax-coating .logo .title {
      padding-top: 15%;
    }
  section.nano-metax-coating .text {
    width: 80%;
    margin: auto auto;
    padding: 20px 0;
    font-weight: bold;
  }
    section.nano-metax-coating .text .list div {
      font-weight: bold;
      font-size: 14pt;
      letter-spacing: 1pt;
      padding-bottom: 5px;
      color: #011f5f;
    }
    section.nano-metax-coating .text .effect {
      width: 100%;
      display: grid;
      grid-template-columns: 75% 25%;
    }
      section.nano-metax-coating .text .list p.caution {
        font-size: 10pt;
        padding-top: 2%;
        color: #25ACBB;
      }
      section.nano-metax-coating .text .effect .graph {
        position: relative;
        text-align: center;
      }
      section.nano-metax-coating .text .effect .graph p{
        font-size: 9pt;
        padding: 0;
        color: #25ACBB;
      }
        section.nano-metax-coating .text .effect .graph div{
          width: 100%;
          padding: 0;
          margin: 0;
          padding-top: 20px;
          text-align: center;
        }
          section.nano-metax-coating .text .effect .graph div img {
            width: 80%;
            aspect-ratio: 1 / 1;
          }
@media (min-width: 1500px) {
  /* 1500px以上 */
  section.nano-metax-coating .text .effect .graph div img {
    width: auto;
    height: 230px;
    aspect-ratio: 1 / 1;
  }
}
  section.nano-metax-coating article.c {
    padding-top: 50px;
    padding-bottom: 30px;
    display: grid;
    grid-template-columns: 39% 58%;
    gap: 1%;
  }
  section.nano-metax-coating article.c div.banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
    section.nano-metax-coating article.c div.banner img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      opacity: 1;
      z-index: 20;
    }
    section.nano-metax-coating article.c .text h4 {
      padding: 0;
      margin: 0;
    }
  section.nano-metax-coating .movie-c {
    width: 100%;
    text-align: center;
  }
    section.nano-metax-coating .movie-c iframe {
      width: 60%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin: auto auto;
      padding-top: 40px;
    }
    section.nano-metax-coating .movie p {
      font-size: 8pt;
      padding: 0;
      margin: 0;
    }
  section.nano-metax-coating .button {
    width: 55%;
    margin: auto auto;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
  }

/** ナノメタックス カーコーティング お客様の声 */
section.nano-metax-coating-voice {
  width: 100%;
  background-image: url(/img/bg_blue.jpg);
  /*filter: grayscale(100%);*/
  background-color: rgba(255,255,255,0.35);
  background-blend-mode: lighten;
  background-position: top center;
  text-align: center;
}
  section.nano-metax-coating-voice h3 {
    font-size: 2em;
    padding-top: 30px;
    letter-spacing: 2pt;
    color: #fff;
  }
  section.nano-metax-coating-voice h4 {
    font-size: 1.1em;
    padding-top: 8px;
    line-height: 130%;
    letter-spacing: 1pt;
    color: #fff;
  }
  /* お客様の声 */
  section.nano-metax-coating-voice ol {
    width: 90%;
    margin: auto auto;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 10px;
  }
    section.nano-metax-coating-voice ol li {
      width: 100%;
      padding: 0;
      display: grid;
      grid-template-columns: 100%;
      margin: 0;
      margin-top: 15px;
    }
      section.nano-metax-coating-voice ol li div {
        padding: 0;
        border-radius: 20px;
      }
      section.nano-metax-coating-voice ol li p {
        text-align: left;
        font-weight: bold;
        font-size: 11pt;
      }
        section.nano-metax-coating-voice ol li p span {
          color: #b53737;
        }
    section.nano-metax-coating-voice ol li div:last-child {
      background-image: url(/img/bg.jpg);
      background-color: rgba(255, 255, 255, 0.3);
      background-blend-mode: lighten;
      padding: 10px 20px;
      border-radius: 20px;
    }
  section.nano-metax-coating-voice .notice {
    padding-bottom: 15px;
  }
    section.nano-metax-coating-voice .notice a {
      color: #fff;
      font-size: 10pt;
      letter-spacing: 1pt;
    }

h1, h2, h3, h4, h5, h6 {
  color: #222;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

h2 {
  font-size: 2em;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

h3 {
  font-size: 2em;
  padding: 0;
  margin: 0;
}

h4 {
  font-size: 1.3em;
  padding: 0;
  padding-top: 13px;
  margin: 0;
  letter-spacing: 1pt;
}

p {
  margin-bottom: 1em;
}

ul, ol {
  list-style-type: none;
}


/* --- Google map --- */
section.map {
  width: 100%;
  height: 500px;
  display: flex;
  gap: 5px;
  background-image: url(/img/bg_blue.jpg);
  background-color: rgba(255,255,255,0.35);
  background-blend-mode: lighten;
  background-position: top center;
}
  section.map iframe {
    width: 100%;
    height: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    border: 0;
  }
    section.map iframe:hover {
      -webkit-filter: grayscale(0%);
      -moz-filter: grayscale(0%);
      -o-filter: grayscale(0%);
      -ms-filter: grayscale(0%);
      filter: grayscale(0%);
    }


/* --- フッター (Footer) --- */
footer {
  /*background-color: #333;*/
  background-image: url(/img/bg_blue.jpg);
  color: #fff;
  text-align: center;
  padding: 20px 0;
  margin-top: 0;
}
  footer p {
    margin-bottom: 10px;
    font-size: 0.9em;
  }
  footer nav ul {
    justify-content: center;
    padding: 0;
  }
    footer nav ul li {
      margin: 0 15px;
    }
      footer nav ul li a {
        color: #bbb;
        font-size: 0.9em;
        transition: color 0.3s ease;
      }
        footer nav ul li a:hover {
          color: #fff;
        }

ul.flo_nav {
  margin: 0;
  position: fixed;
  right: 35px;
  bottom: 35px;
  z-index: 999;
  display: none;
}
  ul.flo_nav li:hover img {
    opacity: 0.8;
  }

.flink{
  overflow: hidden;
  width: 700px;
  margin: 50px auto;
}
  .flink li{
    margin:0 0 10px 40px;
    float: left;
  }
    .flink li a{
      padding-left: 12px;
      display: block;
      text-decoration: none;
      color: #fff;
    }
    .flink li:first-child{
      margin-left: 0;
    }
    .flink li:nth-child(6){
      margin-left: 0;
    }

/* --- レスポンシブデザイン (Responsive Design) --- */
@media (max-width: 1024px) {
  /* 1024px以下 */
  section.health-kongevity-car .concept .text{
    display: inline-block;
    text-align: left;
  }
  section.nano-metax-coating .text .effect .graph p{
    display: inline-block;
    text-align: left;
  }
  section.health-kongevity-car .about article.pc {
    grid-template-columns: 100%;
  }
    section.health-kongevity-car .about article.pc .photo {
      box-sizing: border-box;
      padding: 0 40px;
    }

}
@media (max-width: 768px) {
  /* 768px以下 */
  .flink{
    width: 100%;
    margin: 30px auto;
    box-sizing: border-box;
  }
    .flink li{
      margin:0 0 10px 20px;
    }
}

br.sp {
  display: none;
}

@media (max-width: 480px) {
  /* 480px以下 */
  section.briefing {
    padding-top: 70px;
    padding-bottom: 100px;
  }
  nav {
    top: 20px;
    right: 20px;
  }
  ul.collab {
    width: 80%;
  }
  section.briefing .car-coating .nano-metax-logo {
    top: 7%;
    width: 45%;
  }
  section.briefing div.popup img[name=p10] {
    top: 8%;
  }
  section.briefing div.popup img[name=p18] {
    top: 13%;
  }
  section.health-kongevity-car h1 {
    font-size: 2.5em;
    padding-right: 25px;
    padding-left: 25px;
    margin-top: 20px;
    margin-bottom: 0;
  }
    section.health-kongevity-car h1 rt {
      font-size: 8pt;
      padding-bottom: 5px;
    }
    section.health-kongevity-car h1 span{
      font-size: 14pt;
      padding-left: 0;
      line-height: 4.5em;
    }
  section.health-kongevity-car div.logo h2 {
    padding: 0;
    margin: 0;
    font-size: 14pt;
  }
    section.health-kongevity-car .concept .message {
      padding: 0 10px;
      font-size: 11pt;
      padding-bottom: 3px;
    }
      section.health-kongevity-car .mizutani .message p,
      section.health-kongevity-car .concept .message p {
        padding: 0;
        margin: 0;
        display: inline-block;
        text-align: left;
        margin-bottom: 3px;
        line-height: 150%;
      }
    section.health-kongevity-car .concept article.r,
    section.health-kongevity-car .concept article {
      grid-template-columns: 100%;
      padding: 15px 10px;
      gap: 2%;
    }
    section.health-kongevity-car .text {
      width: 100%;
      padding-bottom: 0;
    }
      section.health-kongevity-car .text p {
        text-align: left;
      }
      section.health-kongevity-car .text span {
        display: inline-block;
      }

  section.nano-metax-coating .logo {
    width: 100%;
  }
    section.nano-metax-coating .logo img {
      width: 20%;
    }
    section.health-kongevity-car .text {
      width: 100%;
      padding-bottom: 0;
      padding: 0 10px;
    }
    section.nano-metax-coating .logo h3.title {
      font-size: 16pt;
    }
    section.nano-metax-coating .logo h4 {
      font-size: 14pt;
      line-height: 130%;
      padding-bottom: 20px;
      color: #555;
    }
      section.nano-metax-coating .text .effect {
        grid-template-columns: 100%;
      }
        section.nano-metax-coating .text .effect .list p.caution{
          padding-top: 0;
        }
        section.nano-metax-coating .text .effect .graph{
          text-align: center;
          order: 1;
        }
          section.nano-metax-coating .text .effect .graph p{
            text-align: center;
            padding: 0;
            margin-top: 0;
          }
        section.nano-metax-coating .text .effect .list{
          order: 2;
        }
        section.nano-metax-coating .text .effect .graph img {
          position: static;
          width: 60%;
          padding: 20px 0;
        }
      section.nano-metax-coating .movie {
        grid-template-columns: 100%;
        margin-bottom: 30px;
      }
      section.nano-metax-coating .button {
        width: 90%;
        padding-bottom: 30px;
      }

  section.health-kongevity-car .about .price ol {
    grid-template-columns: 100%;
  }
    section.health-kongevity-car .about .price ol li div.label{
      margin-top: 2px;
    }

  section.health-kongevity-car .about .construction ol {
    grid-template-columns: 100%;
  }
    section.health-kongevity-car .about .construction ol li div.label{
      margin-top: 2px;
    }

  section.health-kongevity-car .about .construction ol li div.label p,
  section.health-kongevity-car .about div.text.chie p {
    display: block;
    width: 100%;
  }

  section.health-kongevity-car .mizutani .slide {
    width: 100%;
    padding: 20px 10px;
    margin-bottom: 30px;
  }
  section.health-kongevity-car .linker-2 img{
    width: 100%;
  }
  section.health-kongevity-car .mizutani article,
  section.health-kongevity-car .movie,
  section.health-kongevity-car .about article {
    width: 100%;
    padding: 0 10px;
    grid-template-columns: 100%;
  }
  section.health-kongevity-car .about article {
    display: none;
  }
  section.health-kongevity-car .mizutani article.sp{
    display: block;
  }
  section.health-kongevity-car .about .linker img{
    width: 100%;
  }

  section.nano-metax-coating-voice .notice a {
    display: inline-block;
    text-align: left;
    line-height: 120%;
    box-sizing: border-box;
    padding: 0 20px;
  }
  section.nano-metax-coating-voice ol li {
    grid-template-columns: 100%;
  }
    section.nano-metax-coating-voice ol li img {
      border-radius: 0px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      height: 200px;
    }
    section.nano-metax-coating-voice ol li div:last-child {
      border-radius: 0px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    section.nano-metax-coating-voice ol li p {
      padding-bottom: 0;
    }

  br.sp {
    display: inline-block;
  }
  h3 {
    font-size: 1.5em;
    padding-bottom: 5px;
  }




  .flink{
    padding-bottom: 100px;
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 10px;
  }
    .flink li{
      padding: 0;
      margin: 0;
      padding-bottom: 10px;
    }

  ul.flo_nav {
    right: 15px;
    bottom: 15px;
  }
    ul.flo_nav li img {
      width: calc(100vw * 0.2);
    }
  section.map {
    height: 500px;
    display: block;
    gap: 0;
  }
    section.map iframe {
      height: 250px;
      margin: 0;
      padding: 0;
      gap: 0;
    }
    section.nano-metax-coating .movie-c iframe {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  section.nano-metax-coating .button {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  section.nano-metax-coating article.c {
    grid-template-columns: 100%;
    gap: 0;
    padding-bottom: 0;
  }
  section.nano-metax-coating article.c div.banner {
    order: 2;
  }
  
}