@charset "UTF-8";

@font-face {
  font-family: "Local Noto Sans JP";
  src: local("Noto Sans JP");
  font-display: swap;
}

@font-face {
  font-family: "Local Noto Serif JP";
  src: local("Noto Serif JP");
  font-display: swap;
}

:root{
   --spacing: 0.08em;
}
*{
   letter-spacing: var(--spacing);
}

html,body{
  width: 100%;
}

html {
  font-size: 62.5%;/* 16px x 0.625 = 10px(=1rem) */
}

body {
  font-size: 1.8rem;
  font-family: "Local Noto Sans JP", "Noto Sans JP", sans-serif;
  color: #424242;
  font-weight: 400;
  font-feature-settings: "palt";
  line-height: 1.5;
}
  @media screen and (max-width: 1023px) {
    body {
      font-size: 1.5rem;
    }
  }
  @media screen and (max-width: 767px) {
    body {
      font-size: 3.734vw;
    }
  }

body::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-image: url(../img/bg_pc.webp);
  background-size: cover;
}
  @media screen and (max-width: 767px) {
    body::before {
      background-image: url(../img/bg_sp.webp);
    }
  }


header, footer {
  width: 100%;
}


.wrapper {
  text-align: center;
  margin: 0 auto;
}


/* 見出しH2 */

h2 {
  font-size: 5.6rem;
  color: #0073b8;
  line-height: 1.0;
  letter-spacing: 0.05em;
  display: inline-block;
  position: relative;
  padding: 0 83px;
  margin-bottom: 57px;
}
  @media screen and (max-width: 767px) {
    h2 {
      font-size: 8vw;
      padding: 0 10.67vw;
      margin-bottom: 10.67vw;
    }
  }
h2::before,
h2::after {
  content: '';
  position: absolute;
  top: 57%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: #0073b8;
}
  @media screen and (max-width: 767px) {
    h2::before,
    h2::after {
    width: 5.33vw;
    }
  }
h2::before {
  left: 0;
}
h2::after {
  right: 0;
}


/* 見出しH3 */

h3 {
  font-size: 3.8rem;
  color: #005b73;
  font-weight: 500;
  margin-bottom: 50px;
}
  @media screen and (max-width: 1025px) {
    h3 {
      font-size: 3.0rem;
    }
  }
  @media screen and (max-width: 767px) {
    h3 {
      font-size: 4.9vw;
      margin-bottom: 6.8vw;
    }
  }


/* 画像 */

img {
  max-width: 100%;
  height: auto;
}


/* イメージ図テキスト */

.image-note {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1.0;
  display: inline-block;
  margin-top: 10px;
}
  @media screen and (max-width: 767px) {
    .image-note {
      font-size: 2.134vw;
      margin-top: 2.13vw;
    }
  }


/* 緑文字 */

.text-green {
  color: #00a8ba;
}


/* 上付き文字 */

sup {
  top: -0.3em;
  margin-left: 0em;
  line-height: 1.0;
  display: inline-block;
  transform: scale(0.67);
  transform-origin: 0px 0px 0px;
  text-indent: 0em;
}

h3 sup {
  top: -0.27em;
  margin-left: 0em;
  line-height: 1.0;
  display: inline-block;
  transform: scale(0.4);
  transform-origin: 0px 0px 0px;
  text-indent: 0em;
}


/* PC・SP非表示 */

  @media screen and (min-width: 768px) {
    .pc-none{
      display: none !important;
    }
  }
  @media screen and (min-width: 1023px) {
    .pc-none-tab{
      display: none !important;
    }
  }
  @media screen and (max-width: 1023px) {
    .sp-none-tab{
      display: none !important;
    }
  }
  @media screen and (max-width: 767px) {
    .sp-none{
      display: none !important;
    }
  }


/*** header ***/

header {
  color: #fff;
  background-color: #00a8ba;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 3%;
}
  @media screen and (max-width: 767px) {
    header {
      padding: 0;
    }
  }

header .wrapper {
  max-width: 1446px;
  padding: 0;
  display: flex;
  align-items: center;
  padding: 10px 0 11px;
}
  @media screen and (max-width: 767px) {
    header .wrapper {
      padding: 2.267vw 4vw;
      margin: 0;
    }
  }

header h1{
  width: 43px;
}
  @media screen and (max-width: 767px) {
    header h1 {
      max-width: 10.667vw;
    }
  }



header h1 a,
header .header-menu a {
  transition: opacity 0.3s;
}
header h1 a:hover,
header .header-menu a:hover {
  opacity: .7;
}


header .btn-container {
  margin-left: auto;
  margin-right: 40px;
  display: flex;
  gap: 20px;
}
  @media screen and (max-width: 767px) {
    header .container{
    margin-right: 4.34%;
    }
  }

.button-header {
  letter-spacing: 0.05em;
  display: block;
  font-size: 1.3rem;
  width: 100%;
  padding: 5px 19px 6px 36px;
  position: relative;
  background-color: transparent;
  border: 1px solid #fff;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
}
.button-header:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  margin: auto;
}
.button-header:hover {
    color: #00a8ba;
    background-color: #fff;
}
.button-header:hover:before {
  border-color: transparent transparent transparent #00a8ba;
}


/*** menu ***/

p.header-menu {
  display: block;
  width: 33px;
  text-align: center;
  line-height: 1;
  position: relative;
  z-index: 61;
}

p.header-menu .header-menu-trigger,
p.header-menu .header-menu-trigger span {
  display: inline-block;
/*  -webkit-transition: all 0.4s;*/
  transition: all 0.4s;
/*  -webkit-box-sizing: border-box;*/
  box-sizing: border-box;
}
p.header-menu .header-menu-trigger {
  position: relative;
  width: 33px;
  height: 20px;
}
p.header-menu .header-menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
p.header-menu .header-menu-trigger span:nth-of-type(1) {
  top: 0;
}
p.header-menu .header-menu-trigger span:nth-of-type(2) {
  top: 9px;
}
p.header-menu .header-menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
p.header-menu .header-menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
p.header-menu .header-menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
p.header-menu .header-menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}

#global-menu {
  background-color: #00a8ba;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  gap: 5%;
  z-index: 60;
  display: none;
  box-sizing: border-box;
}
  @media only screen and (max-width: 767px) {
    #global-menu {
      gap: 8vw;
    }
  }

#global-menu p {
  font-size: 2.0em;
  padding: 0 20px 10px;
  margin-bottom: -30px;
}
  @media screen and (max-width: 767px) {
    #global-menu p {
      font-size: 5.334vw;
      margin-top: 5.867vw;
      margin-bottom: -5.867vw;
    }
  }

#global-menu .menu {
  text-align: left;
  font-size: 2.2rem;
  align-items: center;
}
  @media only screen and (max-width: 767px) {
    #global-menu .menu {
      font-size: 4vw;
    }
  }

#global-menu .menu li {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #fff;
}
  @media only screen and (max-width: 767px) {
    #global-menu .menu li {
      margin-bottom: 3.734vw;
      padding-bottom: 3.734vw;
    }
  }
#global-menu .menu li:last-child {
  margin-bottom: 0;
}

#global-menu .menu li .menu-icon-type {
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 6px 6px 7px;
  margin-bottom: 5px;
  width: 120px;
  text-align: center;
}
  @media only screen and (max-width: 767px) {
    #global-menu .menu li .menu-icon-type {
      font-size: 2.4vw;
      padding: 1.2vw 1.2vw 1.467vw;
      width: 24vw;
    }
  }

#global-menu .menu a,
#global-menu .menu-sns a {
  display: block;
  transition: opacity 0.3s;
}
#global-menu .menu a:hover,
#global-menu .menu-sns a:hover {
  opacity: .7;
}

.button-menu-search {
  text-align: center;
  letter-spacing: 0.05em;
  display: block;
  font-size: 2.0rem;
  color: #fff;
  width: 430px;
  margin: 0 auto 20px;
  padding: 12px 12px 14px;
  position: relative;
  background-color: transparent;
  border: 1px solid #fff;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  text-indent: 1em;
}
  @media screen and (max-width: 767px) {
    .button-menu-search {
      letter-spacing: 0.1em;
      font-size: 4vw;
      width: 60vw;
      padding: 2.2vw 2.4vw 2.4vw;
      text-indent: 6vw;
      margin-bottom: 4.267vw;
    }
  }
.button-menu-search:before, .button-menu-search:after {
  content: "";
  display: block;
  width: 26px;
  height: 27px;
  position: absolute;
  left: 110px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s;
}
  @media screen and (max-width: 767px) {
    .button-menu-search:before, .button-menu-search:after {
      width: 1.2em;
      height: 1.2em;
      left: 11vw;
      top: 50%;
    }
  }
.button-menu-search:after {
  opacity: 0;
}
.button-menu-search:before {
  background-image: url(../img/icon_search_white.png);
}
.button-menu-search:after {
  background-image: url(../img/icon_search_green.png);
}
.button-menu-search:hover {
  color: #00a8ba;
  background-color: #fff;
  border: 1px solid #00a8ba;
}
.button-menu-search:hover:before {
  opacity: 0;
}
.button-menu-search:hover:after {
  opacity: 1;
}

.button-menu-contact {
  text-align: center;
  letter-spacing: 0.05em;
  display: block;
  font-size: 2.0rem;
  color: #fff;
  width: 430px;
  padding: 12px 12px 14px;
  position: relative;
  background-color: transparent;
  border: 1px solid #fff;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  text-indent: 2em;
}
  @media screen and (max-width: 767px) {
    .button-menu-contact {
      letter-spacing: 0.05em;
      font-size: 4vw;
      width: 60vw;
      padding: 2.2vw 2.4vw 2.4vw;
      text-indent: 7vw;
    }
  }
.button-menu-contact:before, .button-menu-contact:after {
  content: "";
  display: block;
  width: 32px;
  height: 24px;
  position: absolute;
  left: 90px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s;
}
  @media screen and (max-width: 767px) {
    .button-menu-contact:before, .button-menu-contact:after {
      width: 1.2em;
      height: 1.2em;
      left: 7vw;
      top: 50%;
    }
  }
.button-menu-contact:after {
  opacity: 0;
}
.button-menu-contact:before {
  background-image: url(../img/icon_mail_white.png);
}
.button-menu-contact:after {
  background-image: url(../img/icon_mail_green.png);
}
.button-menu-contact:hover {
  color: #00a8ba;
  background-color: #fff;
  border: 1px solid #00a8ba;
}
.button-menu-contact:hover:before {
  opacity: 0;
  border-color: transparent transparent transparent #00a8ba;
}
.button-menu-contact:hover:after {
  opacity: 1;
}

#global-menu .menu-sns {
  display: flex;
  justify-content: center;
  gap: 40px;
}
  @media screen and (max-width: 767px) {
    #global-menu .menu-sns {
      gap: 5.334vw;
    }
  }
#global-menu .menu-sns li {
  max-width: 70px;
}
  @media screen and (max-width: 767px) {
    #global-menu .menu-sns li {
      max-width: 16vw;
    }
  }


/*** main-visual ***/

#main-visual{
  width: 100%;
  background: #a3d6c5 url(../img/bg_kv.webp) no-repeat right bottom / contain;
}
  @media screen and (max-width: 767px) {
    #main-visual {
      background-color: #a3d6c5;
      background-image: none;
    }
  }

#main-visual .wrapper{
  max-width: 1696px;
  margin: 0 2% 0 0;
}
  @media screen and (max-width: 767px) {
    #main-visual .wrapper {
      margin: 0;
    }
  }


/*** type ***/

#type .wrapper {
  width: 100%;
  font-size: 2.0rem;
  line-height: 1.0;
}
  @media screen and (max-width: 767px) {
   #type .wrapper {
      font-size: 3.734vw;
    }
  }

#type .type-svs {
  background-color: #22ac38;
  color: #fff;
}
#type .type-trc {
  background-color: #f0892e;
  color: #fff;
}
#type .type-mf {
  background-color: #fff000;
  color: #0073b8;
}

#type .type-area {
  padding: 20px;
}
  @media screen and (max-width: 767px) {
   #type .type-area {
      padding: 3.2vw;
    }
  }

#type .type-area p {
  letter-spacing: 0.05em;
}


/*** type ***/

#question .wrapper {
  width: 100%;
  background-color: #1d5e87;
}


/*** メイン ***/

#main .type-link {
  color: #0073b8;
  font-size: 2.0rem;
  line-height: 1.0;
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-top: 20px;
}
  @media screen and (max-width: 767px) {
   #main .type-link {
      font-size: 2.934vw;
      gap: 13.33vw;
      margin-top: 4vw;
    }
  }

#main .type-svs-margin {
  margin-left: 1em;
}
  @media screen and (max-width: 767px) {
   #main .type-svs-margin {
      margin-left: 0;
    }
  }

#main .type-trc-margin {
  margin-right: 3em;
}
  @media screen and (max-width: 767px) {
   #main .type-trc-margin {
      margin-right: 0;
    }
  }

#main .type-link a {
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid #0073b8;
  padding-bottom: 4px;
  transition: .3s;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),/* 全体 */
    0 5px 10px rgba(255, 255, 255, .5),/* 下方向 */
    5px 0 10px rgba(255, 255, 255, .5),/* 右方向 */
    0 -5px 10px rgba(255, 255, 255, .5),/* 上方向 */
    -5px 0 10px rgba(255, 255, 255, .5);/* 左方向 */
}
#main .type-link a:hover {
  border-bottom: none;
  opacity: .7;
}

#main .catchphrase {
  margin: 95px 3% 91px;
}
  @media screen and (max-width: 767px) {
   #main .catchphrase {
    margin: 16vw 3vw 14.934vw;
    }
  }
#main .catchphrase.mf {
  margin-top: 86px;
}
  @media screen and (max-width: 767px) {
   #main .catchphrase.mf {
    margin-top: 14.667vw;
    }
  }

#main .catchphrase p {
  font-size: 4.0rem;
  font-family: "Local Noto Serif JP", "Noto Serif JP", serif;
  color: #0073b8;
  font-weight: 600;
  line-height: 1.5;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),/* 全体 */
    0 5px 10px rgba(255, 255, 255, .7),/* 下方向 */
    5px 0 10px rgba(255, 255, 255, .7),/* 右方向 */
    0 -5px 10px rgba(255, 255, 255, .7),/* 上方向 */
    -5px 0 10px rgba(255, 255, 255, .7);/* 左方向 */
}
  @media screen and (max-width: 1023px) {
    #main .catchphrase p {
      font-size: clamp(2.8rem, calc(2.8rem + 0.25vw), 4.0rem);
    }
  }
  @media screen and (max-width: 767px) {
    #main .catchphrase p {
/*      font-size: 5.334vw;*/
      font-size: 5.067vw;
    }
  }
  @media screen and (max-width: 767px) {
    #main .catchphrase .center-adjust::before {
      content:"";
      display:inline-block;
      width:0.8em;
    }
  }

#main .catchphrase p:first-child {
  margin-bottom: 45px;
}
  @media screen and (max-width: 767px) {
   #main .catchphrase p:first-child {
      margin-bottom: 8vw;
      letter-spacing: 0.05em;
      margin-right: -2.934vw;
    }
  }
  @media screen and (max-width: 767px) {
    #main .catchphrase p .center-adjust-mf {
      margin-left: -3.467vw;
    }
  }

#main .catchphrase p sup {
  top: -0.19em;
  margin-left: -0.3em;
  transform: scale(0.42);
  letter-spacing: 0.08em;
}
  @media screen and (max-width: 1023px) {
    #main .catchphrase p sup {
      top: -0.25em;
      margin-left: -0.9em;
      transform: scale(0.42);
    }
  }
  @media screen and (max-width: 767px) {
    #main .catchphrase p sup {
      top: -0.25em;
      margin-left: -0.9em;
      transform: scale(0.5);
    }
  }
_::-webkit-full-page-media, _:future, :root #main .catchphrase p sup {
  margin-left: -0.9em;
}


/*** TECHNOLOGY ***/

#technology .wrapper {
  padding: 0 6vw;
}

#technology .tech-area {
  background-color: rgba(255,255,255,0.8);
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 80px 76px;
}
  @media screen and (max-width: 1023px) {
  #technology .tech-area {
  max-width: 88vw;
  padding: 12vw 4vw 12.534vw;
    }
  }

hr{
width: 200px;
border-color: #00a8ba;
margin: 80px auto 67px;
}
  @media screen and (max-width: 767px) {
    hr{
      width: 17.6vw;
      margin: 12.0vw auto;
    }
  }

#technology .tech-area h2 {
  margin-bottom: 40px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area h2 {
      margin-bottom: 8.267vw;
    }
  }

#technology .tech-area .font-large {
  font-size: 131.58%;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area h3.right-adjust {
      margin-right: -0.5em;
    }
  }
#technology .tech-area h3 .center-adjust::before {
  content:"";
  display:inline-block;
  width:0.5em;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area h3 .center-adjust::before {
      width: 0em;
    }
  }
#technology .tech-area h3 .center-adjust2::before {
  content:"";
  display:inline-block;
  width:1.0em;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area h3 .center-adjust3::before {
      content:"";
      display:inline-block;
      width:1.0em;
    }
  }

#technology .tech-area .tech-sam-logo {
  margin-bottom: 60px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-sam-logo {
      max-width: 60%;
      margin: 0 auto 40px;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-logo {
      max-width: 61.87vw;
      margin: 0 auto;
      margin-bottom: 8vw;
    }
  }

#technology .tech-area .tech-sam-area {
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-area {
      flex-flow: column;
      gap: 4.267vw;
    }
  }

#technology .tech-area .tech-sam-image-area {
  text-align: left;
  line-height: 0;
  max-width: 500px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-image-area {
      max-width: 100%;
    }
  }

#technology .tech-area .tech-sam-image-container {
  display: flex;
  gap: 20px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-image-container {
      gap: 2.67vw;
    }
  }

#technology .tech-area .tech-sam-image {
  max-width: 240px;
}

#technology .tech-area .tech-sam-image p {
  font-size: 1.4rem;
  color: #0073b8;
  letter-spacing: 0.05em;
  line-height: 1.0;
  margin-bottom: 10px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-image p {
      font-size: 2.667vw;
      margin-bottom: 2.133vw;
    }
  }

#technology .tech-area .tech-sam-image p.text-space {
  letter-spacing: 1em;
}

#technology .tech-area .tech-sam-image img {
  border: 1px solid #ddd;
  border-radius: 10px;
}

#technology .tech-area .tech-sam-text {
  max-width: 360px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-sam-text {
      font-size: clamp(1.2rem, calc(1.2rem + 0.25vw), 1.4rem);
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-text {
      font-size: 3.734vw;
    }
  }
#technology .tech-area .tech-sam-text p:first-child {
  margin-bottom: 31px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-sam-text p:first-child {
      margin-bottom: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-sam-text p:first-child {
      margin-bottom: 3.334vw;
    }
  }

#technology .tech-area .tech-spec-area {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 56px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-spec-area {
      gap: 4vw;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-area {
      flex-flow: column;
      gap: 6.934vw;
      margin-bottom: 6.934vw;
    }
  }
#technology .tech-area .tech-spec-area.last {
  margin-bottom: -5px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-area.last {
      margin-bottom: 0;
    }
  }
#technology .tech-area .tech-spec-area.trc {
  gap: 80px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-spec-area.trc {
      gap: 6vw;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-area.trc {
      gap: 6.934vw;
    }
  }

#technology .tech-area .tech-spec-block {
  width: 260px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block {
      width: 76vw;
      margin: 0 auto;
    }
  }

#technology .tech-area .tech-spec-block h4 {
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #00a8ba;
  border-radius: 100vh;
  margin-bottom: 30px;
  padding: 11px 12px 12px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block h4 {
      padding: 2.667vw 2.667vw 2.933vw;
      margin-bottom: 5.334vw;
    }
  }
#technology .tech-area .tech-spec-block .center-adjust {
  letter-spacing: 0.05em;
}
#technology .tech-area .tech-spec-block .center-adjust::before {
  content:"";
  display: inline-block;
  width: 0.8em;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block .center-adjust::before {
      width: 0;
    }
  }

#technology .tech-area .tech-spec-block p {
  margin-top: -6px;
}

#technology .tech-area .tech-spec-block p.left-adjust {
  margin-right: 27px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block p.left-adjust {
      margin-right: 0;
    }
  }

#technology .tech-area .tech-spec-image {
  margin: 0 auto 20px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-image {
      margin: 0 auto 5.334vw;
    }
  }
#technology .tech-area .tech-spec-image-78 {
  max-width: 187px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-image-78 {
      max-width: 39.467vw;
    }
  }
#technology .tech-area .tech-spec-image-93 {
  max-width: 231px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-image-93 {
      max-width: 49.333vw;
    }
  }
#technology .tech-area .tech-spec-image-95 {
  max-width: 191px;
  margin-left: 19px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-image-95 {
      max-width: 55.467vw;
      margin: 0 auto 5.334vw;
    }
  }

#technology .tech-area .tech-spec-block-uv {
  display: flex;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block .tech-spec-block-uv {
      display: block;
    }
  }
#technology .tech-area .tech-spec-block .tech-spec-block-uv h4 {
  width: 183px;
  margin-right: 8px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block .tech-spec-block-uv h4 {
      width: 76vw;
      margin-right: 0;
    }
  }

#technology .tech-area .tech-hd-logo {
  margin-bottom: 56px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-hd-logo {
      max-width: 60%;
      margin: 0 auto 40px;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-hd-logo {
      width: 68.4vw;
      margin: 0 auto 8vw;
    }
  }

#technology .tech-area .tech-hd-image-area {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 25px;
}
  @media screen and (max-width: 1026px) {
    #technology .tech-area .tech-hd-image-area {
      gap: 30px;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-hd-image-area {
      gap: 2.667vw;
      margin-bottom: 4.134vw;
    }
  }

#technology .tech-area .tech-hd-container h4 {
  color: #0073b8;
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.0;
  margin-bottom: 10px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-hd-container h4 {
      font-size: 2.934vw;
      margin-bottom: 2.134vw;
    }
  }
#technology .tech-area .tech-hd-container h4 .font-large {
  font-size: 120%;
}
#technology .tech-area .tech-hd-container h4 .font-small {
  font-size: 75%;
}

#technology .tech-area .tech-hd-container img {
  border-radius: 10px;
}

#technology .tech-area .tech-hd-container .image-note {
  text-align: right;
  display: block;
}

  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-hd-area p {
      text-align: left;
      max-width: 76vw;
      margin: 0 auto;
    }
  }


#technology .tech-area .tech-pbd-logo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-bottom: 60px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-pbd-logo-area {
      gap: 30px;
    }
  }
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-pbd-logo {
      max-width: 40%;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-pbd-logo-area {
      display: block;
      margin-bottom: 7.067vw;
    }
  }

  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-pbd-logo {
      max-width: 45.6vw;
      margin :0 auto 6.8vw;
    }
  }

#technology .tech-area .tech-pbd-logo-area p {
  text-align: left;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-pbd-logo-area p {
      max-width: 76vw;
      margin :0 auto;
    }
  }

#technology .tech-area .tech-pbd-area {
  position: relative;
  max-width: 940px;
  height: 568px;
}

#technology .tech-area .tech-pbd-block {
  width: 220px;
}

#technology .tech-area .tech-pbd-block h4 {
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #00a8ba;
  border-radius: 100vh;
  margin-bottom: 19px;
  padding: 11px 12px 12px;
}

#technology .tech-area .tech-pbd-block p {
  margin-top: -6px;
}

#technology .tech-area .tech-pbd-block .tech-pbd-image-97 {
  margin: 0 auto 20px;
}

#technology .tech-area .tech-pbd-area .tech-pbd-lens {
  position: absolute;
  top: 0;
  left: 25.745%;
}
#technology .tech-area .tech-pbd-area .tech-pbd-guide1 {
  position: absolute;
  top: 69.8%;
  left: 22.6%;
}
#technology .tech-area .tech-pbd-area .tech-pbd-guide2 {
  position: absolute;
  top: 23.7%;
  left: 57.1%;
}
#technology .tech-area .tech-pbd-area .tech-pbd-guide3 {
  position: absolute;
  top: 48.4%;
  left: 61.5%;
}
#technology .tech-area .tech-pbd-area .tech-pbd-guide4 {
  position: absolute;
  top: 76.1%;
  left: 36.45%;
}
#technology .tech-area .tech-pbd-area .tech-pbd-block.spec1 {
  position: absolute;
  top: 11.3%;
  left: 0;
}
#technology .tech-area .tech-pbd-area .tech-pbd-block.spec2 {
  position: absolute;
  top: 40.4%;
  left: 0;
}
#technology .tech-area .tech-pbd-area .tech-pbd-block.spec3 {
  position: absolute;
  top: 69.4%;
  left: 0;
}
#technology .tech-area .tech-pbd-area .tech-pbd-block.spec4 {
  position: absolute;
  top: 23.2%;
  right: 0;
}
#technology .tech-area .tech-pbd-area .tech-pbd-block.spec5 {
  position: absolute;
  top: 47.9%;
  right: 0;
}
#technology .tech-area .tech-pbd-area .tech-pbd-text {
  letter-spacing: 0.05em;
  position: absolute;
  bottom: 0;
  left: 32.1%;
  line-height: 1.0;
}
#technology .tech-area .tech-pbd-area .image-note {
  position: absolute;
  top: 83.9%;
  left: 51.4%;
  margin-top: 0;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-pbd-sp {
      margin-bottom: 13.334vw;
    }
  }


#technology .tech-area .tech-3zone-logo-area {
  margin-bottom: 57px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-logo-area {
      max-width: 76vw;
      margin: 0 auto 7.2vw;
    }
  }
#technology .tech-area .tech-3zone-logo {
  margin-bottom: 55px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-3zone-logo {
      max-width: 60%;
      margin: 0 auto 40px;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-logo {
      max-width: 67.6vw;
      margin: 0 auto;
      margin-bottom: 6.934vw;
    }
  }

  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-logo-area p {
      text-align: left;
      font-size: 3.734vw;
    }
  }

#technology .tech-area .tech-3zone-area {
  position: relative;
  max-width: 870px;
  height: 473px;
  margin: 0 auto;
}
#technology .tech-area .tech-3zone-area .tech-3zone-lens {
  position: absolute;
  top: 0;
  left: 0;
}
#technology .tech-area .tech-3zone-area .tech-3zone-text {
  position: absolute;
  bottom: 0;
  left: 2.10%;
  text-align: left;
}
#technology .tech-area .tech-3zone-area .image-note {
  position: absolute;
  bottom: 5.2%;
  left: 80.70%;
  margin-top: 0;
}

#technology .tech-area .tech-3zone-spec-area {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 56px;
  margin-bottom: -4px;
}
  @media screen and (max-width: 1023px) {
    #technology .tech-area .tech-3zone-spec-area {
      gap: 4vw;
    }
  }
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-spec-area {
      flex-flow: column;
      gap: 8vw;
      margin-bottom: 8vw;
    }
  }

#technology .tech-area .tech-3zone-spec-area .tech-3zone-block {
  width: 240px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-spec-area .tech-3zone-block {
      width: 76vw;
      margin: 0 auto;
    }
  }
#technology .tech-area .tech-3zone-spec-area .tech-3zone-block h4 {
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  border-radius: 100vh;
  margin-bottom: 15px;
  padding: 11px 12px 12px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-spec-block .tech-3zone-block h4 {
      padding: 2.667vw 2.667vw 2.933vw;
      margin-bottom: 5.334vw;
    }
  }
#technology .tech-area .tech-3zone-spec-area .tech-3zone-block h4.tech-3zone-near {
  background-color: #39b382;
}
#technology .tech-area .tech-3zone-spec-area .tech-3zone-block h4.tech-3zone-middle {
  background-color: #009490;
}
#technology .tech-area .tech-3zone-spec-area .tech-3zone-block h4.tech-3zone-far {
  background-color: #004893;
}
#technology .tech-area .tech-3zone-spec-area .tech-3zone-block p {
  text-align: left;
  display: inline-block;
}

  @media screen and (max-width: 767px) {
    #technology .tech-area .tech-3zone-sp {
      margin-bottom: 13.334vw;
    }
  }


#technology .tech-note-area {
  max-width: 1060px;
  margin: 0 auto;
  padding: 77px 0 71px;
  text-align: left;
}
  @media screen and (max-width: 767px) {
    #technology .tech-note-area {
      max-width: 88vw;
      padding: 12.267vw 0 12vw;
    }
  }

#technology .tech-note-area ol {
  font-size: 1.2rem;
  color: #005b73;
}
  @media screen and (max-width: 767px) {
    #technology .tech-note-area ol {
      font-size: 3.2vw;
    }
  }
#technology .tech-note-area ol li {
  letter-spacing: 0.12em;
  text-indent: -2.2rem;
  padding-left: 2.2rem;
  margin-bottom: 6px;
}
  @media screen and (max-width: 767px) {
    #technology .tech-note-area ol li {
      text-indent: -6.4vw;
      padding-left: 6.4vw;
      margin-bottom: 0.667vw;
    }
  }


/*** PRODUCT ***/

#product .wrapper {
  width: 100%;
  background-color: #fff;
  padding: 70px 6vw 81px;
}
  @media screen and (max-width: 767px) {
    #product .wrapper {
      padding: 12vw 6vw;
    }
  }

#product .product-area .prod-pkg-area {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 80px;
  margin-bottom: 39px;
}
  @media screen and (max-width: 1023px) {
    #product .product-area .prod-pkg-area {
      gap: 40px;
    }
  }
  @media screen and (max-width: 767px) {
    #product .product-area .prod-pkg-area {
      flex-flow: column;
      gap: 8vw;
      margin-bottom: 8vw;
    }
  }
#product .product-area .prod-pkg-area.no-svs {
  display: block;
}
#product .product-area .prod-pkg-container-30 {
  max-width: 415px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-pkg-container-30 {
      width: 70vw;
      margin: 0 auto;
    }
  }
#product .product-area .prod-pkg-container-90 {
  max-width: 338px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-pkg-container-90 {
      width: 50vw;
      margin: 0 auto;
    }
  }
#product .product-area .prod-pkg-container {
  max-width: 509px;
  margin: 0 auto;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-pkg-container {
      width: 70vw;
      margin: 0 auto;
    }
  }

#product .product-area .prod-icon-area {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-icon-area {
      margin-bottom: 2.667vw;
    }
  }

#product .product-area .prod-icon-area .prod-icon-svs {
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #22ac38;
  padding: 6px 7px 7px 8px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-icon-area .prod-icon-svs {
      font-size: 2.667vw;
      padding: 1.6vw;
    }
  }

#product .product-area .prod-icon-area .prod-icon-trc {
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #f0892e;
  padding: 6px 7px 7px 8px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-icon-area .prod-icon-trc {
      font-size: 2.667vw;
      padding: 1.6vw;
    }
  }

#product .product-area .prod-icon-area .prod-icon-mf {
  font-size: 1.2rem;
  color: #0073b8;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #fff000;
  padding: 6px 7px 7px 8px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-icon-area .prod-icon-mf {
      font-size: 2.667vw;
      padding: 1.6vw;
    }
  }

#product .product-area .prod-icon-area .prod-icon-sheets {
  font-size: 1.2rem;
  color: #0073b8;
  letter-spacing: 0.05em;
  line-height: 1.0;
  background-color: #fff;
  border: 1px solid #0073b8;
  padding: 6px 7px 7px 8px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-icon-area .prod-icon-sheets {
      font-size: 2.667vw;
      padding: 1.6vw;
    }
  }

#product .product-area .prod-logo {
  margin: 0 auto 30px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-logo {
      width: 83.467vw;
      margin-bottom: 5.334vw
    }
  }

#product .product-area .prod-name {
  font-size: 1.4rem;
  color: #0073b8;
  line-height: 1.0;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 59px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-name {
      display: block;
      font-size: 3.2vw;
      margin-bottom: 8vw
    }
  }
  @media screen and (max-width: 767px) {
    #product .product-area .prod-name li {
      margin-bottom: 1.867vw;
    }
  }

#product .product-area .prod-spec-area {
  max-width: 1100px;
  display: flex;
  justify-content: center;
  gap: 5.46%;
  margin: 0 auto 80px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-area {
      display: block;
      width: 88vw;
      margin-bottom: 12.267vw;
    }
  }

#product .product-area .prod-spec-container {
  width: 47.27%;
  font-size: 1.6rem;
  text-align: left;
}
  @media screen and (max-width: 1023px) {
    #product .product-area .prod-spec-container {
      font-size: clamp(1.0rem, calc(1.0rem + 0.25vw), 1.6rem);
    }
  }
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-container {
      width: 100%;
      font-size: 2.934vw;
    }
  }

#product .product-area .prod-spec-table {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-collapse: separate;
  border-spacing: 0;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-table.left {
      border-bottom: none;
    }
  }

#product .product-area .prod-spec-table th {
  border-bottom: 1px solid #d4d4d4;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-align: left;
  background: #e5f7ed;
  padding: 11px 16px 12px;
  width: 40.4%;
  vertical-align: middle;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-table th {
      letter-spacing: 0.05em;
      padding: 2.134vw 2.134vw 2.4vw;
      width: 40.4%;
    }
  }

#product .product-area .prod-spec-table th.no-width {
  width: initial;
}
#product .product-area .prod-spec-table th.th-2nd {
  width: 13.5%;
  border-right: 1px solid #d4d4d4;
}
#product .product-area .prod-spec-table th.th-3rd {
  width: 26.9%;
}

#product .product-area .prod-spec-table td {
  border-bottom: 1px solid #d4d4d4;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 11px 16px 12px;
  width: 59.6%;
  vertical-align: middle;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-table td {
      letter-spacing: 0.05em;
      padding: 2.134vw 2.134vw 2.4vw;
      width: 59.6%;
    }
  }

#product .product-area .prod-spec-table td.no-width {
  width: initial;
}
#product .product-area .prod-spec-table td.td-2nd {
  width: 29.8%;
  border-right: 1px solid #d4d4d4;
}
#product .product-area .prod-spec-table td.td-3rd {
  width: 29.8%;
}

#product .product-area .prod-spec-table .border-none {
  border-bottom: none;
}

#product .product-area .prod-spec-table ul li {
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-table ul li {
      margin-bottom: 0.8vw;
    }
  }

#product .product-area .prod-spec-table ul li:last-child {
  margin-bottom: 0;
}
  @media screen and (max-width: 767px) {
    #product .product-area .prod-spec-table ul li:last-child {
      margin-bottom: 0;
    }
  }

#product .product-area .prod-spec-table sup {
  top: -0.4em;
  margin-left: 0.1em;
  line-height: 1.0;
  display: inline-block;
  transform: scale(0.7);
  transform-origin: 0px 0px 0px;
  letter-spacing: 0.05em;
  text-indent: 0em;
}

#product .product-area .btn-wrap {
  text-align: center;
}
#product .product-area .button-pdf {
  letter-spacing: 0.05em;
  display: inline-block;
  color: #00a8ba;
  font-size: 1.4rem;
  width: 163px;
  padding: 0.7rem 1.3rem 0.7rem 4.6rem;
  position: relative;
  background-color: #fff;
  border: 1px solid #00a8ba;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  margin: 40px 0 37px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .button-pdf{
      letter-spacing: 0.05em;
      font-size: 3.734vw;
      width: 43.467vw;
      padding: 1.8vw 1.6vw 2.2vw 9vw;
      margin: 5.334vw auto 5.067vw;
    }
  }
#product .product-area .button-pdf span{
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
  @media screen and (max-width: 767px) {
    #product .product-area .button-pdf span {
      font-size: 3.2vw;
    }
  }
#product .product-area .button-pdf:before, #product .product-area .button-pdf:after {
  content: "";
  display: block;
  width: 15px;
  height: 19px;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s;
}
  @media screen and (max-width: 767px) {
    #product .product-area .button-pdf:before, #product .product-area .button-pdf:after{
      width: 1.5em;
      height: 1.5em;
      left: 5.067vw;
    }
  }
#product .product-area .button-pdf:after {
  opacity: 0;
}
#product .product-area .button-pdf:before {
  background-image: url(../img/icon_documents_green.png);
}
#product .product-area .button-pdf:after {
  background-image: url(../img/icon_documents_white.png);
}
#product .product-area .button-pdf:hover {
  color: #fff;
  background-color: #00a8ba;
}
#product .product-area .button-pdf:hover:before {
  opacity: 0;
}
#product .product-area .button-pdf:hover:after {
  opacity: 1;
}

#product .product-area ol {
  font-size: 1.2rem;
}
  @media screen and (max-width: 767px) {
    #product .product-area ol {
      font-size: 3.2vw;
    }
  }
#product .product-area ol li{
  letter-spacing: 0.12em;
  text-indent: -2.2rem;
  padding-left: 2.2rem;
  margin-bottom: 6px;
}
  @media screen and (max-width: 767px) {
    #product .product-area ol li {
      letter-spacing: 0.08em;
      text-indent: -6.4vw;
      padding-left: 6.4vw;
      margin-bottom: 1.334vw;
    }
  }

#product .product-area ol li sup {
  top: -0.3em;
  margin-left: -0.1em;
  margin-right: -0.1em;
  line-height: 1.0;
  display: inline-block;
  transform: scale(0.8);
  transform-origin: 0px 0px 0px;
  letter-spacing: 0.12em;
  text-indent: 0em;
}

#product .product-area ol li sub {
  bottom: -0.2em;
  margin-left: 0em;
  margin-right: -0.15em;
  line-height: 1.0;
  display: inline-block;
  transform: scale(0.7);
  transform-origin: 0px 0px 0px;
  letter-spacing: 0.12em;
  text-indent: 0em;
}

#product .product-area .btn-container {
  max-width: 1100px;
    display: flex;
    justify-content: center;
    gap: 5.46%;
    margin: 0 auto 80px;
}
  @media screen and (max-width: 767px) {
    #product .product-area .btn-container {
      display: block;
      margin: 0 auto 13.067vw;
    }
  }
#product .product-area .btn-container .btn-wrap {
  width: 47.27%;
}
  @media screen and (max-width: 767px) {
    #product .product-area .btn-container .btn-wrap {
      width: 70vw;
      margin: 0 auto;
    }
  }
.button-type-svs, .button-type-trc, .button-type-mf {
  color: #fff;
  line-height: 1.0;
  letter-spacing: 0.05em;
  display: block;
  width: 100%;
  padding: 16px 16px 18px 16px;
  position: relative;
  background-color: #00a8ba;
  border: 1px solid #fff;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
}
  @media screen and (max-width: 767px) {
    .button-type-svs, .button-type-trc, .button-type-mf {
      padding: 3.467vw 0 3.734vw;
      text-indent: 1.4rem;
    }
  }
  @media screen and (max-width: 767px) {
    .button-first {
      margin-bottom: 4.8vw;
    }
  }

.button-type-svs {
  text-indent: 22px;
}
.button-type-trc {
  text-indent: 22px;
}
.button-type-mf {
  text-indent: 22px;
}
.button-type-svs:before, .button-type-trc:before, .button-type-mf:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
  @media screen and (max-width: 767px) {
    .button-type-svs:before, .button-type-trc:before, .button-type-mf:before {
      border-width: 5px 0 5px 8px;
    }
  }
.button-type-svs:before {
  left: 149px;
}
  @media screen and (max-width: 1023px) {
    .button-type-svs:before {
      left: 8.5vw;
    }
  }
  @media screen and (max-width: 767px) {
    .button-type-svs:before {
      left: 12.5vw;
    }
  }
.button-type-trc:before {
  left: 187px;
}
  @media screen and (max-width: 1023px) {
    .button-type-trc:before {
      left: 12vw;
    }
  }
  @media screen and (max-width: 767px) {
    .button-type-trc:before {
      left: 20vw;
    }
  }
.button-type-mf:before {
  left: 178px;
}
  @media screen and (max-width: 1023px) {
    .button-type-mf:before {
      left: 11vw;
    }
  }
  @media screen and (max-width: 767px) {
    .button-type-mf:before {
      left: 18vw;
    }
  }
.button-type-svs:hover, .button-type-trc:hover, .button-type-mf:hover {
  color: #00a8ba;
  background-color: #fff;
  border: 1px solid #00a8ba;
}
.button-type-svs:hover:before, .button-type-trc:hover:before, .button-type-mf:hover:before {
  border-color: transparent transparent transparent #00a8ba;
}

  @media screen and (max-width: 1023px) {
    .movie-area {
      max-width: 60%;
      margin: 0 auto;
      }
    }
  @media screen and (max-width: 767px) {
    .movie-area {
      max-width: 100%;
      margin: 0 auto;
    }
  }

.movie-area a {
  transition: .3s;
}
.movie-area a:hover {
  opacity: .7;
}

.movie-area p {
  font-size: 1.6rem;
  line-height: 1.0;
  margin-top: 29px;
}
  @media screen and (max-width: 767px) {
    .movie-area p {
      font-size: 3.467vw;
      margin-top: 2.667vw;
    }
  }


/*** LINEUP ***/

#lineup .wrapper {
  width: 100%;
  padding: 80px 6vw;
}
  @media screen and (max-width: 1023px) {
    #lineup .wrapper {
      padding: 13.334vw 6vw;
      }
    }

#lineup .lineup-area {
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 80px 80px;
}
  @media screen and (max-width: 1023px) {
    #lineup .lineup-area {
      max-width: 88vw;
      padding: 11.867vw 4vw;
      }
    }

#lineup .lineup-area .lineup-prod-area {
  max-width: 940px;
  display: flex;
  align-items: flex-end;
  gap: 8.6%;
  margin-bottom: 78px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-area {
      flex-flow: column;
      gap: 10.667vw;
      max-width: 76vw;
      margin: 0 auto 10.667vw;
    }
  }
#lineup .lineup-area .lineup-prod-area.last {
  margin-bottom: 72px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-area.last {
      margin-bottom: 11.334vw;
    }
  }

#lineup .lineup-area .lineup-prod {
  width: 45.7%;
  max-width: 100%;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod {
      width: 100%;
    }
  }

#lineup .lineup-area .lineup-prod-pkg {
  width: 399px;
  max-width: 100%;
  margin: 0 auto 30px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-pkg {
      width: 70vw;
      margin: 0 auto 5.334vw;
    }
  }
#lineup .lineup-area .lineup-prod-pkg-90 {
  width: 285px;
  max-width: 100%;
  margin: 0 auto 30px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-pkg-90 {
      width: 50vw;
      margin: 0 auto 5.334vw;
    }
  }

#lineup .lineup-area .lineup-prod-logo {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 18px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-logo {
      margin: 0 auto 4.4vw;
    }
  }

#lineup .lineup-area .lineup-prod-name {
  margin: 0 auto 16px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-name {
      margin: 0 auto 4.534vw;
    }
  }
#lineup .lineup-area .lineup-prod-name li {
  font-size: 1.4rem;
  color: #0073b8;
}
  @media screen and (max-width: 1023px) {
    #lineup .lineup-area .lineup-prod-name li {
      font-size: clamp(1.0rem, calc(1.0rem + 0.25vw), 1.4rem);
    }
  }
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-name li {
      font-size: 3.2vw;
    }
  }

#lineup .lineup-area .lineup-prod-spec {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 40px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-spec {
      margin-bottom: 5.067vw;
    }
  }
#lineup .lineup-area .lineup-prod-spec li {
  font-size: 1.6rem;
  color: #0073b8;
  line-height: 1.0;
  letter-spacing: 0.05em;
  padding: 1px 20px;
  border-right: 1px solid #0073b8;
}
  @media screen and (max-width: 1023px) {
    #lineup .lineup-area .lineup-prod-spec li {
      font-size: clamp(1.0rem, calc(1.0rem + 0.25vw), 1.6rem);
      padding: 1px 15px;
    }
  }
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .lineup-prod-spec li {
      font-size: 3.734vw;
      padding: 0.267vw 2.667vw;
    }
  }
#lineup .lineup-area .lineup-prod-spec li:first-child {
  border-left: 1px solid #0073b8;
}

.button-lineup {
  color: #fff;
  line-height: 1.0;
  letter-spacing: 0.05em;
  display: block;
  width: 300px;
  max-width: 100%;
  border-radius: 100vh;
  padding: 16px 16px 18px 16px;
  margin: 0 auto;
  position: relative;
  background-color: #00a8ba;
  border: 1px solid #fff;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  text-indent: 21px;
}
  @media screen and (max-width: 767px) {
    .button-lineup {
      width: 57.867vw;
      padding: 3.2vw 3.2vw 3.467vw;
    }
  }
.button-lineup:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 60px;
  bottom: 0;
  margin: auto;
}
  @media screen and (max-width: 767px) {
    .button-lineup:before {
      border-width: 5px 0 5px 8px;
      left: 10vw;
    }
  }
.button-lineup:hover {
  color: #00a8ba;
  background-color: #fff;
  border: 1px solid #00a8ba;
}
.button-lineup:hover:before {
  border-color: transparent transparent transparent #00a8ba;
}

#lineup .lineup-area .search-area p {
  font-size: 2.4rem;
  color: #0073b8;
  margin: 0 auto 34px;
}
  @media screen and (max-width: 767px) {
    #lineup .lineup-area .search-area p {
      font-size: 5.334vw;
      margin: 11.334vw auto 4vw;
    }
  }

.button-search {
  letter-spacing: 0.05em;
  display: block;
  font-size: 2.0rem;
  color: #0073b8;
  width: 430px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
  background-color: #fff;
  border: 1px solid #0073b8;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  text-indent: 37px;
}
  @media screen and (max-width: 767px) {
    .button-search {
      letter-spacing: 0.1em;
      font-size: 4vw;
      width: 70vw;
      padding: 2.2vw 2.4vw 2.3vw;
      text-indent: 6vw;
    }
  }
.button-search:before, .button-search:after {
  content: "";
  display: block;
  width: 26px;
  height: 27px;
  position: absolute;
  left: 124px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s;
}
  @media screen and (max-width: 767px) {
    .button-search:before, .button-search:after {
      width: 1.3em;
      height: 1.3em;
      left: 15vw;
      top: 50%;
    }
  }
.button-search:after {
  opacity: 0;
}
.button-search:before {
  background-image: url(../img/icon_search_blue.png);
}
.button-search:after {
  background-image: url(../img/icon_search_white.png);
}
.button-search:hover {
  color: #fff;
  background-color: #0073b8;
}
.button-search:hover:before {
  opacity: 0;
}
.button-search:hover:after {
  opacity: 1;
}


/*** お問い合わせ ***/

#contact .wrapper {
  width: 100%;
  background-color: #00a8ba;
  padding: 77px 6vw 69px;
}
  @media screen and (max-width: 767px) {
    #contact .wrapper {
      padding: 12.934vw 6vw 10.134vw;
    }
  }

#contact .contact-area {
  color: #fff;
}

#contact .contact-area h2 {
  font-size: 4.4rem;
  color: #fff;
}
  @media screen and (max-width: 767px) {
    #contact .contact-area h2 {
      font-size: 6.4vw;
      margin-bottom: 9.867vw;
    }
  }
#contact .contact-area h2::before,
#contact .contact-area h2::after {
  background-color: #fff;
}

#contact .contact-area p {
  font-size: 2.4rem;
  margin-top: -3px;
  margin-bottom: 34px;
}
  @media screen and (max-width: 767px) {
    #contact .contact-area p {
      font-size: 5.334vw;
      margin-bottom: 3.734vw;
    }
  }

.button-contact {
  letter-spacing: 0.05em;
  display: block;
  font-size: 2.0rem;
  color: #00a8ba;
  width: 430px;
  margin: 0 auto 77px;
  padding: 10px;
  position: relative;
  background-color: #fff;
  border: 1px solid #00a8ba;
  transition-property: background-color, color;
  transition-duration: .3s;
  overflow-wrap: break-word;
  text-indent: 41px;
}
  @media screen and (max-width: 767px) {
    .button-contact {
      letter-spacing: 0.05em;
      font-size: 4vw;
      width: 70vw;
      padding: 2.2vw 2.4vw 2.4vw;
      text-indent: 8vw;
      margin-bottom: 12vw;
    }
  }
.button-contact:before, .button-contact:after {
  content: "";
  display: block;
  width: 32px;
  height: 24px;
  position: absolute;
  left: 95px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity .3s;
}
  @media screen and (max-width: 767px) {
    .button-contact:before, .button-contact:after {
      width: 1.5em;
      height: 1.5em;
      left: 10vw;
      top: 50%;
    }
  }
.button-contact:after {
  opacity: 0;
}
.button-contact:before {
  background-image: url(../img/icon_mail_green.png);
}
.button-contact:after {
  background-image: url(../img/icon_mail_white.png);
}
.button-contact:hover {
  color: #fff;
  background-color: #00a8ba;
  border: 1px solid #fff;
}
.button-contact:hover:before {
  opacity: 0;
  border-color: transparent transparent transparent #00a8ba;
}
.button-contact:hover:after {
  opacity: 1;
}

#contact .contact-area .note-area {
  max-width: 1060px;
  margin: 0 auto;
}

#contact .contact-area ul {
  text-align: left;
  margin: 0 auto;
  padding-left: 20px;
}
  @media screen and (max-width: 767px) {
    #contact .contact-area ul {
      width: 88vw;
      padding-left: 5.2vw;
    }
  }

#contact .contact-area ul li {
  list-style: disc;
  font-size: 1.4rem;
  letter-spacing : 0.12em;
  margin-bottom: 7px;
}
  @media screen and (max-width: 767px) {
    #contact .contact-area ul li {
      font-size: 3.467vw;
      margin-bottom: 1.867vw;
    }
  }

#contact .contact-area h3 {
  font-size: 1.4rem;
  color: #fff;
  letter-spacing : 0.13em;
  text-align: left;
  margin: 32px auto 8px;
}
  @media screen and (max-width: 767px) {
    #contact .contact-area h3 {
      font-size: 3.467vw;
      margin: 7.467vw auto 1.867vw;
    }
  }


/*** フッター***/

footer .wrapper {
  width: 100%;
  background-color: #fff;
  padding: 78px 6vw 37px;
}
  @media screen and (max-width: 767px) {
    footer .wrapper {
      padding: 12.134vw 4vw 5.334vw;
    }
  }

footer .footer-logo-bl {
  width: 322px;
  margin: 0 auto 60px;
}
  @media screen and (max-width: 767px) {
    footer .footer-logo-bl {
      width: 55.2vw;
     margin: 0 auto 10.667vw;
    }
  }

footer .footer-logo-bto {
  width: 110px;
  margin: 0 auto 53px;
}
  @media screen and (max-width: 767px) {
    footer .footer-logo-bto {
      width: 18.4vw;
      margin: 0 auto 9.6vw;
    }
  }

footer ul {
  display: flex;
  justify-content: center;
}

footer ul.footer-menu {
  gap: 28px;
  margin-bottom: 56px;
}
  @media screen and (max-width: 767px) {
    footer ul.footer-menu {
      gap: 5.334vw;
      margin-bottom: 9.734vw;
    }
  }
footer ul.footer-menu li {
  color: #0073b8;
  font-weight: 500;
  letter-spacing: 0.05em;
}
footer ul.footer-menu li a {
  letter-spacing: 0.05em;
}

footer ul.footer-sns {
  gap: 40px;
  margin-bottom: 47px;
}
  @media screen and (max-width: 767px) {
    footer ul.footer-sns {
      gap: 5.334vw;
      margin-bottom: 9.467vw;
    }
  }
footer ul.footer-sns li {
  max-width: 70px;
}
  @media screen and (max-width: 767px) {
    footer ul.footer-sns li {
      max-width: 16vw;
    }
  }

footer a {
  transition: .3s;
}
footer a:hover {
  opacity: .7;
}

footer .copyright-area small {
  font-size: 1.0rem;
  color: #0073b8;
  letter-spacing: 0.05em;
}
  @media screen and (max-width: 767px) {
    footer .copyright-area {
      text-align: left;
      font-size: 2.667vw;
    }
  }



/*** 404エラー ***/

#error .wrapper {
  width: 100%;
  padding: 15% 6vw;
}
  @media screen and (max-width: 1023px) {
    #error .wrapper {
      padding: 13.334vw 6vw;
      }
    }

#error .error-area {
  margin: 0 auto;
  display: inline-block;
}
  @media screen and (max-width: 1023px) {
    #error .error-area {
      max-width: 88vw;
      padding: 11.867vw 4vw;
      }
    }

#error .error-area h2 {
  font-size: 2.4rem;
  font-weight: 500;
  color: #424242;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 40px;
  padding: 0;
  display: block;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),/* 全体 */
    0 5px 10px rgba(255, 255, 255, .5),/* 下方向 */
    5px 0 10px rgba(255, 255, 255, .5),/* 右方向 */
    0 -5px 10px rgba(255, 255, 255, .5),/* 上方向 */
    -5px 0 10px rgba(255, 255, 255, .5);/* 左方向 */
}
  @media screen and (max-width: 767px) {
    #error .error-area h2{
      font-size: 4.9vw;
      margin-bottom: 5.334vw;
    }
  }
#error .error-area h2::before, #error .error-area h2::after {
  content: none;
}

#error .error-area p {
  font-size: 1.6rem;
  text-align: left;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),/* 全体 */
    0 5px 10px rgba(255, 255, 255, .5),/* 下方向 */
    5px 0 10px rgba(255, 255, 255, .5),/* 右方向 */
    0 -5px 10px rgba(255, 255, 255, .5),/* 上方向 */
    -5px 0 10px rgba(255, 255, 255, .5);/* 左方向 */
}
  @media screen and (max-width: 767px) {
    #error .error-area p {
      font-size: 3.734vw;
    }
  }

#error .error-area ul {
  font-size: 1.6rem;
  text-align: left;
  list-style: outside none none;
  margin-top: 25px;
  margin-bottom: 40px;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),/* 全体 */
    0 5px 10px rgba(255, 255, 255, .5),/* 下方向 */
    5px 0 10px rgba(255, 255, 255, .5),/* 右方向 */
    0 -5px 10px rgba(255, 255, 255, .5),/* 上方向 */
    -5px 0 10px rgba(255, 255, 255, .5);/* 左方向 */
}
  @media screen and (max-width: 767px) {
    #error .error-area ul {
      font-size: 3.734vw;
      margin-top: 4vw;
      margin-bottom: 5.334vw;
    }
  }
#error .error-area ul li {
  list-style-type: disc;
  margin-left: 1.6em;
  margin-bottom: 10px;
}
  @media screen and (max-width: 767px) {
    #error .error-area ul li {
      margin-bottom: 0.107;
    }
  }

#error .error-area a:link, a:visited {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: .3s;
}
#error .error-area a:hover {
  opacity: .7;
  text-decoration: none;
}