@charset "UTF-8";
/* --------------------------------
[SCSSについて注意]
・/css-scss/styles.scss を /css/styles.css にコンパイルしてコーディングしているため、
  可能であればCSSを直接編集せずに、SCSS を編集＆コンパイルしてCSSを生成する
・または、CSSを直接編集した場合は、SCSS 内の記述も同様に編集する方法でも可
・もし、CSSのみ編集した形跡があった場合など、CSSとSCSSの保持ができなくなった場合はSCSS一式を削除しても良い
-------------------------------- */
/* --------------------------------
[コーディングルール]
・基本classのみ使用し、idはアンカーやJSで使用
・class名、フォルダ名、ファイル名はハイフン(-）区切り
・トップページはロゴを<h1>、他のページはロゴを<p>でページタイトルを<h1>にする
・メディアクエリーはPCファーストで、@media screen and (max-width: 767px) {}を使用
-------------------------------- */
/* reset -------- */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 1vw;
}

body {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p, th, td, address, small, i {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: normal;
  font-style: normal;
}

ol, ul, dl, dt, dd {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

img, object, embed, video {
  border: 0;
  vertical-align: bottom;
}

img {
  max-width: 100%;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  text-align: left;
}

em {
  font-style: normal;
  font-weight: bold;
}

a {
  color: #000;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  a:hover {
    color: #000;
  }
}

/* body -------- */
body {
  line-height: 1.5;
  font-family: Helvetica,"游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 1.3rem;
  color: #000;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 767px) {
  body {
    font-family: Helvetica,'Noto Sans JP', sans-serif;
  }
}


body.is-fix {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.body-inner.is-fix {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* header -------- */
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.header .header-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.header .menu {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  pointer-events: auto;
}

.header .menu a {
  display: block;
  width: 9.46vw;
  padding: 3vw 4vw;
}

@media screen and (max-width: 767px) {
  .header .menu a {
    width: 9.66vw;
    padding: 3vw 3.5vw;
  }
}

.header .menu img {
  display: block;
}

.header .menu .is-b {
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

.header .menu .is-w {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 3vw 4vw;
  opacity: 0;
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (max-width: 767px) {
  .header .menu .is-w {
    padding: 3vw 3.5vw;
  }
}

.header .menu .on {
  display: none;
}

.header .menu.is-open .off {
  display: none;
}

.header .menu.is-open .on {
  display: block;
}

.header .menu.is-bg-b .is-b {
  opacity: 0;
}

.header .menu.is-bg-b .is-w {
  opacity: 1;
}

.header .gnav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
  pointer-events: none;
}

.header .gnav.is-open {
  opacity: 1;
  pointer-events: auto;
}

.header .gnav li {
  background-color: #fff;
}

.header .gnav li a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
  height: 50vh;
}

.header .gnav li:nth-child(1) {
  border-bottom: .2vw solid #fff;
}

/* content -------- */
.content {
  line-height: 1.8;
  font-size: 1.6rem;
}

.content .content-title {
  padding: 15px;
  background-color: #ddd;
  text-align: center;
  font-size: 24px;
}

/* footer -------- */
.footer .footer-inner {
  padding-top: 19%;
  padding-bottom: 7%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .footer .footer-inner {
    padding-top: 18.5%;
    padding-bottom: 16.5%;
  }
}

.footer .logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 8%;
}

@media screen and (max-width: 767px) {
  .footer .logos {
    margin-bottom: 16%;
  }
}

.footer .logos .logo {
  width: 33%;
}

@media screen and (max-width: 767px) {
  .footer .logos .logo {
    width: 50%;
  }
}

.footer .logos .logo:nth-child(1) {
  padding-top: 1.5vw;
}

@media screen and (max-width: 767px) {
  .footer .logos .logo:nth-child(1) {
    padding-top: 3vw;
  }
}

/* --------------------------------
[module.cssについて]
・共通レイアウトと共通タグを記述
-------------------------------- */
/* all -------- */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.over {
  -webkit-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}

@media screen and (min-width: 768px) {
  .over:hover {
    opacity: 0.7;
  }
}

.container {
  max-width: 1030px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.display-block {
  display: block;
}

.display-table {
  display: table;
}

.display-table-cell {
  display: table-cell;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.image-cover {
  display: block;
  height: 0;
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

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

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

/* wordpress editor -------- */
.format .aligncenter {
  display: block;
  margin: 0 auto;
}

.format .alignright {
  float: right;
}

.format .alignleft {
  float: left;
}

.format img[class*="wp-image-"],
.format img[class*="attachment-"] {
  max-width: 100%;
  height: auto;
}

/* format -------- */
.format a {
  color: #03c;
  text-decoration: none;
}

@media screen and (min-width: 768px) {
  .format a:hover {
    color: #69f;
  }
}

.format h2 {
  margin: 30px 0 20px;
  font-size: 24px;
  font-weight: bold;
}

.format h3 {
  margin: 30px 0 20px;
  font-size: 18px;
  font-weight: bold;
}

.format p, .format ul, .format ol, .format table {
  margin-bottom: 20px;
}

.format li {
  margin-bottom: 10px;
}

.format ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.format ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}

.format hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #999;
}

.format table {
  width: 100%;
}

.format th {
  width: 150px;
  padding: 10px 20px;
  border: 1px solid #999;
  background-color: #eee;
}

.format td {
  padding: 10px 20px;
  border: 1px solid #999;
}

/* --------------------------------
[page.cssについて]
・各ページごとのCSSを記述
・必ず.page-homeなど各ページごとのclassを付ける
-------------------------------- */
/* page-home -------- */
.page-home .sec-kv .bg-wrap {
  position: relative;
  padding-top: 64.42%;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .bg-wrap {
    padding-top: 155.92%;
  }
}

.page-home .sec-kv .bg-wrap:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
  left: calc(50% - .1vw);
  bottom: -10vw;
  z-index: 1;
  width: .2vw;
  height: 20vw;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .bg-wrap:after {
    bottom: -30vw;
    height: 46.26vw;
    width: 0.38vw;
  }
}

.page-home .sec-kv .bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.page-home .sec-kv .logo {
  position: absolute;
  z-index: 2;
  left: 12%;
  top: 42%;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .logo {
    left: 11.2%;
    top: 47.5%;
    width: 40.5% !important;
  }
}

.page-home .sec-kv .catch {
  position: absolute;
  z-index: 2;
  left: 60.5%;
  top: 33.2%;
}

@media screen and (max-width: 767px) {
  .page-home .sec-kv .catch {
    left: 10.2%;
    top: 14.5%;
    width: 67% !important;
  }
}

.page-home .sec-nav .nav {
  border-bottom: .2vw solid #fff;
}

@media screen and (max-width: 767px) {
  .page-home .sec-nav .nav {
    border-top: 26vw solid #000;
  }
}

.page-home .sec-nav .nav p a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #000;
  height: 40vw;
}

@media screen and (max-width: 767px) {
  .page-home .sec-nav .nav p a {
    height: 72vw;
  }
}

.page-home .sec-nav .nav p:nth-child(1) {
  border-bottom: .2vw solid #fff;
}

.page-home .sec-nav .nav p:nth-child(1) a {
  padding-top: 11%;
}

@media screen and (max-width: 767px) {
  .page-home .sec-nav .nav p:nth-child(1) a {
    padding-top: 5%;
  }
}

/* page-pro -------- */
.page-pro .sec-texts .text-w {
  text-align: justify;
  text-justify: inter-ideograph;
  padding: 13vw 19vw;
}
@media screen and (max-width: 767px) {
.page-pro .sec-texts .text-w {
    padding: 13vw 9vw;
  }
}

.page-pro .sec-texts .text-w p {
  font-size: 2vw;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .page-pro .sec-texts .text-w p {
    font-size: 3vw;

  }
}
.page-pro .sec-texts .text-b {
  background-color: #000;
  text-align: center;
  padding: 16vw 2vw;
  font-size: 2.59vw;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .page-pro .sec-texts .text-b{
    padding: 16vw 6vw;
    font-size: 4.7vw;
  }
}
.page-pro .sec-texts .text-b .en {
  font-size: 2.9vw;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .page-pro .sec-texts .text-b .en{
  font-size: 5.5vw;
  }
}

.page-pro .sec-texts .text-b .s {
  margin-top: 3em;
  font-size: 1.5vw;
}
@media screen and (max-width: 767px) {
  .page-pro .sec-texts .text-b .s{
  font-size: 3vw;
  }
}

.page-pro .sec-texts .text-b .s.s2 {
  margin-top: 1.5em;
}

.page-pro .sec-texts .text-b.text-b2 {
  padding: 13vw 2vw 2vw;
}

.page-pro .sec-texts .text-o {
  padding: 9% 7.8%;
  background-color: #000;
  text-align: justify;
  text-justify: inter-ideograph;
}

.page-pro .sec-texts .text-o .inner {
  padding: 10vw 8vw;
  background-color: #F06E00;
}

.page-pro .sec-texts .text-o .image p {
  margin: 6vw -8vw -10vw;
  padding: 0;
}

.page-pro .sec-texts .text-o p {
  font-weight: bold;
  font-size: 2.2vw;
}
@media screen and (max-width: 767px) {
  .page-pro .sec-texts .text-o p {
    font-size: 3.7vw;
  }
}
.page-pro .sec-texts .text-o p:nth-child(1) {
  font-size: 3vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
.page-pro .sec-texts .text-o p:nth-child(1) {
    font-size: 5vw;
  }
}
.page-pro .sec-texts .text-o p:nth-child(2) {
  line-height: 1.3;
  margin: .5em 0 .8em;
  font-weight: bold;
  font-size: 5vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
.page-pro .sec-texts .text-o p:nth-child(2) {
    font-size: 6vw;
  }
}

/* page-intro -------- */
.page-intro .sec-texts .topimage {
  position: relative;
}

.page-intro .sec-texts .topimage .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 23%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .page-intro .sec-texts .topimage .text {
    padding-top: 37%;
  }
}

.page-intro .sec-texts .text-w {
  text-align: justify;
  text-justify: inter-ideograph;
  padding: 13vw 19vw;
}

.page-intro .sec-texts .text-w p {
  font-size: 2vw;
  font-weight: bold;
}

.page-intro .sec-texts .text-b {
  background-color: #000;
  padding: 22vw 19vw;
  font-size: 2vw;
  color: #fff;
}
@media screen and (max-width: 767px) {
    .page-intro .sec-texts .text-b {
      padding: 22vw 9vw;
      font-size: 3.3vw;
  }
}

.page-intro .sec-texts .text-b p + p {
  margin-top: 3em;
}

.page-intro .sec-texts .text-b .en {
  font-size: 2.8vw;
  font-weight: bold;
}

.page-intro .sec-texts .text-b .s {
  margin-top: 3em;
  font-size: 0.4vw;
}

.page-intro .sec-texts .text-b .s.s2 {
  margin-top: 1.5em;
}

.page-intro .sec-texts .text-b.text-b2 {
  padding: 13vw 2vw 2vw;
}

.page-intro .sec-texts .text-b.text-top {
  padding: 27vw 2vw 17vw;
  text-align: center;
}

.page-intro .sec-texts .text-b.text-top .en {
  font-size: 5vw;
  line-height: 1.3;
}
@media screen and (max-width: 767px) {
  .page-intro .sec-texts .text-b.text-top .en {
    font-size: 7vw;
  }
}
.page-intro .sec-texts .text-b.text-top .s {
  margin-top: 3em;
  font-size: 1.5vw;
}
@media screen and (max-width: 767px) {
  .page-intro .sec-texts .text-b.text-top .s {
    font-size: 3vw;
  }
}

.page-intro .sec-texts .text-o {
  padding: 9% 7.8%;
  background-color: #000;
  text-align: justify;
  text-justify: inter-ideograph;
}

.page-intro .sec-texts .text-o .inner {
  padding: 10vw 8vw;
  background-color: #F06E00;
}

@media screen and (max-width: 767px) {
  .page-intro .sec-texts .text-o .inner {
    padding: 10vw 8vw;
  }
}

.page-intro .sec-texts .text-o .image p {
  margin: 6vw -8vw -10vw;
  padding: 0;
}

.page-intro .sec-texts .text-o p {
  font-weight: bold;
  font-size: 2.2vw;
}

.page-intro .sec-texts .text-o p:nth-child(1) {
  font-size: 3vw;
  text-align: center;
}

.page-intro .sec-texts .text-o p:nth-child(2) {
  line-height: 1.3;
  margin: .5em 0 .8em;
  font-weight: bold;
  font-size: 5vw;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .page-intro .sec-texts .product-image-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .page-intro .sec-texts .product-image-col .image {
    position: relative;
    width: 50%;
  }
}

.page-intro .sec-texts .product-image-col.product-image-col-bdr {
  border-bottom: 12vw solid #fff;
}

.page-intro .sec-texts .product-info {
  border-bottom: 12vw solid #fff;
  padding: 11% 0;
  background-color: #000;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .page-intro .sec-texts .product-info {
    padding: 11% 0 12.5%;
  }
}

.page-intro .sec-texts .product-info.product-info-in {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  border: none;
}

@media screen and (max-width: 767px) {
  .page-intro .sec-texts .product-info.product-info-in {
    position: relative;
    top: auto;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.page-intro .sec-texts .product-info .product-name {
  color: #fff;
  font-size: 2vw;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .page-intro .sec-texts .product-info .product-name {
      font-size: 3.3vw;
  }
}

.page-intro .sec-texts .product-info .product-btn {
  display: none;
}

.page-intro .sec-texts .product-info .product-btn a {
  display: block;
  width: 17.5%;
  margin: 0 auto;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
}

@media screen and (min-width: 768px) {
  .page-intro .sec-texts .product-info .product-btn a:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }
}

@media screen and (max-width: 767px) {
  .page-intro .sec-texts .product-info .product-btn a {
    width: 31.86%;
  }
}

/* --------------------------------
[post.cssについて]
・WordPressのindex.php、single.php内の記事出力HTMLで使用
-------------------------------- */
/* index-posts -------- */
/* single-posts -------- */
/* --------------------------------
[サンプルコード]
-------------------------------- */
/* 白文字が太いとき
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  */
/* 画像文字を縮小してぼやけるとき
  backface-visibility;
  -webkit-backface-visibility;
  */
/* 自動カーニング
  font-feature-settings : 'palt';
  */
/* 両端揃え
  text-align: justify;
  text-justify: inter-ideograph;
  */