@charset "UTF-8";
/*リセット
--------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/*メディアクエリー
---------------------------------------------*/
/*変数
---------------------------------------------*/
/* コンテンツ
---------------------------------------------*/
html,
body,
#wrapper {
  width: 100%;
  color: #000000;
  font-family: "shippori-mincho", sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  html,
  body,
  #wrapper {
    font-size: 16px;
  }
}
@media screen and (max-width: 768px) {
  html,
  body,
  #wrapper {
    font-size: 12px;
  }
}
html a,
body a,
#wrapper a {
  text-decoration: none;
  color: #000000;
}

img {
  width: 100%;
  display: block;
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none;
  }
}

.product {
  font-family: "Times", serif;
}
@media screen and (max-width: 768px) {
  .product {
    font-size: 3.2vw;
    line-height: 4.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .product {
    font-size: 16px;
    line-height: 24px;
  }
}
.product span {
  border-bottom: solid 1px #000000;
  display: inline-block;
}

.product::after {
  color: #888888;
}
@media screen and (max-width: 768px) {
  .product::after {
    font-size: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .product::after {
    font-size: 12px;
  }
}

.js-fadeTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeBottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeRight {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeLeft {
  opacity: 0;
  visibility: hidden;
  transform: translateX(80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.scroll {
  opacity: 1;
  visibility: visible;
  transform: translate(0px);
}

div.wrap {
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: 1s;
}
div.wrap.active {
  opacity: 1;
}

div.loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: 0;
  transition: 1s;
}
div.loading div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 600;
  transition: linear 4s;
}
@media screen and (max-width: 768px) {
  div.loading div {
    background-image: url(../images/tree.jpg);
  }
}
@media screen and (min-width: 769px) {
  div.loading div {
    background-image: url(../images/tree_pc.jpg);
  }
}
div.loading div img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 1s;
  transition-delay: 4s;
}
@media screen and (max-width: 768px) {
  div.loading div img {
    width: 52.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.loading div img {
    width: 21.0416666667%;
  }
}
div.loading.active {
  opacity: 1;
}
div.loading.active div {
  transform: translate(-50%, -50%) scale(1);
}
div.loading.active div img {
  opacity: 1;
}

header {
  width: 100%;
  position: fixed;
  display: flex;
  z-index: 500;
  justify-content: center;
  mix-blend-mode: overlay;
}
header h1 {
  position: relative;
}
@media screen and (max-width: 768px) {
  header h1 {
    height: 20.2666666667vw;
  }
}
header h1 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  header h1 img {
    width: 46.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  header h1 img {
    width: 21.0416666667%;
  }
}
header h1 img.logoFade {
  z-index: 2;
  opacity: 0;
}
header h1 img.show {
  opacity: 1;
}

@media screen and (min-width: 769px) {
  div.Fv {
    height: 55.5555555556%;
  }
}
@media screen and (min-width: 769px) {
  div.Fv div.img {
    position: relative;
  }
}
div.Fv div.img ul li {
  list-style-type: none;
}
@media screen and (min-width: 769px) {
  div.Fv div.img ul li {
    width: 50vw;
  }
}
div.Fv div.img div.fv_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 21.1111111111%;
  mix-blend-mode: overlay;
  transition: margin-top 1s;
}
div.Fv div.img div.fv_logo img {
  position: absolute;
}
div.Fv div.img div.fv_logo img.logoFade {
  opacity: 0;
}
div.Fv div.img div.fv_logo img.show {
  opacity: 1;
}
div.Fv div.img .fv_logo.fixed {
  position: fixed;
  top: 10px;
  z-index: 700;
  transform: translate(-50%, 0);
  margin-top: 10px;
}

.textarea {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .textarea {
    padding-top: 19.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea {
    padding-top: 104px;
    max-width: 900px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .textarea div.text h2 {
    font-size: 3.0666666667vw;
    margin-bottom: 6.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text h2 {
    font-size: 24px;
    margin-bottom: 50px;
  }
}
.textarea div.text h2::before {
  content: "";
  display: block;
  font-family: "shippori-mincho", sans-serif;
}
@media screen and (max-width: 768px) {
  .textarea div.text h2::before {
    font-size: 3.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text h2::before {
    font-size: 23px;
  }
}
@media screen and (max-width: 768px) {
  .textarea div.text p {
    font-size: 2.6666666667vw;
    line-height: 6.8933333333vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text p {
    font-size: 16px;
  }
}
.textarea div.text_1 div.sub_title {
  font-family: "classico-urw", sans-serif;
}
@media screen and (max-width: 768px) {
  .textarea div.text_1 div.sub_title {
    font-size: 5.4666666667vw;
    padding-bottom: 2vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_1 div.sub_title {
    font-size: 38px;
    padding-bottom: 15px;
  }
}
.textarea div.text_1 h2 {
  font-family: "classico-urw", sans-serif;
  position: relative;
}
@media screen and (max-width: 768px) {
  .textarea div.text_1 h2 {
    padding-top: 6vw;
    font-size: 5.4666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_1 h2 {
    font-size: 38px;
    padding-top: 45px;
  }
}
.textarea div.text_1 h2::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  background-color: #757575;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
@media screen and (max-width: 768px) {
  .textarea div.text_1 h2::before {
    height: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_1 h2::before {
    height: 30px;
  }
}
.textarea div.text_1 p {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .textarea div.text_1 p {
    font-size: 3.3333333333vw;
    padding-bottom: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_1 p {
    padding-bottom: 40px;
    line-height: 41.7px;
  }
}
.textarea div.text_1::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #e2e5eb;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .textarea div.text_1::after {
    width: 86.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_1::after {
    width: 34.7222222222vw;
    max-width: 900px;
  }
}
@media screen and (max-width: 768px) {
  .textarea div.text_2 {
    padding-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_2 {
    padding-top: 40px;
  }
}
.textarea div.text_2 h2 {
  color: #888888;
  line-height: 2.347826087;
}
@media screen and (max-width: 768px) {
  .textarea div.text_2 h2 {
    margin-bottom: 2vw;
  }
}
@media screen and (min-width: 769px) {
  .textarea div.text_2 h2 {
    margin-bottom: 15px;
    font-size: 14px;
  }
}
.textarea div.text_2 h2::before {
  content: "— paradigm <パラダイム> — ";
  color: #888888;
}
@media screen and (min-width: 769px) {
  .textarea div.text_2 h2::before {
    font-size: 13px;
  }
}
.textarea div.text_2 p {
  color: #888888;
}
@media screen and (min-width: 769px) {
  .textarea div.text_2 p {
    font-size: 12px;
    line-height: 2.6666666667;
  }
}

@media screen and (min-width: 769px) {
  div.content {
    max-width: 900px;
    margin: 0 auto;
  }
}
div.content div.block {
  position: relative;
}
div.content div.block::before {
  content: "";
  display: block;
}
div.content div.block a div.img {
  position: absolute;
}
div.content div.block a div.img img {
  width: 100%;
}
div.content div.block a div.product {
  position: absolute;
}
div.content div.block a div.product::after {
  display: block;
  color: #888888;
}

@media screen and (max-width: 768px) {
  div.content01 {
    padding-top: 21.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 {
    padding-top: 200px;
  }
}
@media screen and (max-width: 768px) {
  div.content01 div.block01::before {
    padding-top: 192.8vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 div.block01::before {
    padding-top: 192.8%;
  }
}
div.content01 div.block01 ul {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content01 div.block01 ul.img1_1 {
    top: 0;
    left: 7.4666666667vw;
    width: 71.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 div.block01 ul.img1_1 {
    top: 0;
    left: 7.4666666667%;
    width: 71.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  div.content01 div.block01 ul.img1_2 {
    top: 111.0666666667vw;
    left: 0;
    width: 33.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 div.block01 ul.img1_2 {
    top: 57.6071922545%;
    left: 0;
    width: 33.2%;
  }
}
@media screen and (max-width: 768px) {
  div.content01 div.block01 ul.img1_3 {
    top: 111.0666666667vw;
    right: 4vw;
    width: 54.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 div.block01 ul.img1_3 {
    top: 57.6071922545%;
    right: 4%;
    width: 54.2666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content01 div.block01 a div.product {
    top: 165.4666666667vw;
    padding-left: 1.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content01 div.block01 a div.product {
    top: 85.8229598893%;
    padding-left: 1.8666666667%;
  }
}
div.content01 div.block01 div.product::after {
  content: "color: WHT, DGY, BLK";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content01 div.block01 div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}
@media screen and (max-width: 768px) {
  div.content02 {
    padding-top: 32.4vw;
  }
}
@media screen and (min-width: 769px) {
  div.content02 {
    padding-top: 250px;
  }
}
div.content02 div.block02 {
  position: relative;
}
div.content02 div.block02::before {
  content: "";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content02 div.block02::before {
    padding-top: 96.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content02 div.block02::before {
    padding-top: 96.5333333333%;
  }
}
div.content02 div.block02 ul.img {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content02 div.block02 ul.img.img2_1 {
    top: 0;
    left: 0;
    width: 49.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content02 div.block02 ul.img.img2_1 {
    top: 0;
    left: 0;
    width: 49.0666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content02 div.block02 ul.img.img2_2 {
    top: 10.4vw;
    right: 0;
    width: 49.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content02 div.block02 ul.img.img2_2 {
    top: 10.773480663%;
    right: 0;
    width: 49.0666666667%;
  }
}
div.content02 div.block02 a div.product {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media screen and (max-width: 768px) {
  div.content02 div.block02 a div.product {
    top: 89.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content02 div.block02 a div.product {
    top: 92.2651933702%;
  }
}
div.content02 div.block02 a div.product::after {
  content: "color: GY, LGY, CGY";
  display: block;
  line-height: 4.76vw;
}

@media screen and (max-width: 768px) {
  div.content03 {
    padding-top: 21.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 {
    padding-top: 250px;
  }
}
@media screen and (max-width: 768px) {
  div.content03 div.block03::before {
    padding-top: 156.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 div.block03::before {
    padding-top: 156.2666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content03 div.block03 a div.img.img3_1 {
    top: 0;
    left: 31.6vw;
    width: 40.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 div.block03 a div.img.img3_1 {
    top: 0;
    left: 31.6%;
    width: 40.2666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content03 div.block03 a div.img.img3_2 {
    top: 44.2666666667vw;
    left: 0;
    width: 40.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 div.block03 a div.img.img3_2 {
    top: 28.3276450512%;
    left: 0;
    width: 40.2666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content03 div.block03 a div.img.img3_3 {
    bottom: 0;
    right: 0;
    width: 56.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 div.block03 a div.img.img3_3 {
    bottom: 0;
    right: 0;
    width: 56.1333333333%;
  }
}
@media screen and (max-width: 768px) {
  div.content03 div.block03 a div.product {
    top: 109.4666666667vw;
    padding-left: 1.8666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content03 div.block03 a div.product {
    top: 70.0511945392%;
  }
}
div.content03 div.block03 a div.product::after {
  content: "color: WHT, DGY, BLK";
}
@media screen and (max-width: 768px) {
  div.content03 div.block03 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content04 {
    padding-top: 33.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content04 {
    padding-top: 250px;
  }
}
div.content04 div.block04 ul.image_slide04 li.img {
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  div.content04 div.block04 ul.image_slide04 li.img {
    padding-right: 0.8vw;
    padding-left: 0.8vw;
  }
}
@media screen and (min-width: 769px) {
  div.content04 div.block04 ul.image_slide04 li.img {
    width: 58.4%;
    padding-right: 1.1135857461%;
    padding-left: 1.1135857461%;
  }
}
div.content04 div.block04 ul.image_slide04 li.img img {
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  div.content04 div.block04 div.product {
    padding-top: 3.8666666667vw;
    padding-left: 4.4vw;
  }
}
@media screen and (min-width: 769px) {
  div.content04 div.block04 div.product {
    padding-top: 3.8666666667%;
  }
}
div.content04 div.block04 div.product a div::after {
  content: "color: WHT, DGY, BLK";
  display: inline-block;
  color: #888888;
}
@media screen and (max-width: 768px) {
  div.content04 div.block04 div.product a div::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

div.bggray {
  background-color: #e2e5eb;
}
@media screen and (max-width: 768px) {
  div.bggray {
    margin-top: 32.8vw;
  }
}
@media screen and (min-width: 769px) {
  div.bggray {
    margin-top: 250px;
  }
}

@media screen and (max-width: 768px) {
  div.content05 {
    padding-top: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content05 {
    padding-top: 250px;
  }
}
@media screen and (max-width: 768px) {
  div.content05 div.block05::before {
    padding-top: 171.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content05 div.block05::before {
    padding-top: 171.2%;
  }
}
@media screen and (max-width: 768px) {
  div.content05 div.block05 a div.img.img5_1 {
    top: 0;
    left: 5.3333333333vw;
    width: 64.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content05 div.block05 a div.img.img5_1 {
    top: 0;
    left: 5.3333333333%;
    width: 64.6666666667%;
  }
}
div.content05 div.block05 a div.img.img5_2 {
  bottom: 0;
}
@media screen and (max-width: 768px) {
  div.content05 div.block05 a div.img.img5_2 {
    left: 41.2vw;
    width: 53.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content05 div.block05 a div.img.img5_2 {
    left: 41.2%;
    width: 53.2%;
  }
}
@media screen and (max-width: 768px) {
  div.content05 div.product {
    padding-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content05 div.product {
    padding-top: 2.7378507871%;
  }
}
div.content05 div.product a .v {
  text-align: center;
}
div.content05 div.product a .v::after {
  content: "color: LGY, GY, CGY";
  display: inline-block;
  color: #757575;
}
@media screen and (max-width: 768px) {
  div.content05 div.product a .v::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}
div.content05 div.product a .polo {
  text-align: center;
}
div.content05 div.product a .polo::after {
  content: "color: GY, LGY, CGY";
  display: inline-block;
  color: #757575;
}
@media screen and (max-width: 768px) {
  div.content05 div.product a .polo::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

div.js-fadeIn {
  transition: 1s;
  opacity: 0;
}

div.fadeIn {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  div.content06 {
    padding-top: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content06 {
    padding-top: 250px;
  }
}
@media screen and (max-width: 768px) {
  div.content06 div.block06::before {
    padding-top: 68.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content06 div.block06::before {
    padding-top: 68.1333333333%;
  }
}
div.content06 div.block06 a div.img {
  position: absolute;
}
div.content06 div.block06 a div.img.img6_1 {
  top: 0;
}
@media screen and (max-width: 768px) {
  div.content06 div.block06 a div.img.img6_1 {
    left: 22vw;
    width: 59.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content06 div.block06 a div.img.img6_1 {
    left: 22%;
    width: 59.2%;
  }
}
@media screen and (max-width: 768px) {
  div.content06 div.product {
    padding-top: 4.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content06 div.product {
    padding-top: 4.6666666667%;
  }
}
div.content06 div.product a .tank {
  text-align: center;
}
div.content06 div.product a .tank::after {
  content: "color: WHT, BLK";
  display: inline-block;
  color: #757575;
}
@media screen and (max-width: 768px) {
  div.content06 div.product a .tank::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content07 {
    padding-top: 30vw;
    padding-bottom: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 {
    padding-top: 250px;
    padding-bottom: 250px;
  }
}
div.content07 div.block07 {
  position: relative;
}
div.content07 div.block07::before {
  content: "";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content07 div.block07::before {
    padding-top: 145.6vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 div.block07::before {
    padding-top: 145.6%;
  }
}
div.content07 div.block07 a div.img {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content07 div.block07 a div.img.img7_1 {
    top: 0;
    left: 0;
    width: 60vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 div.block07 a div.img.img7_1 {
    top: 0;
    left: 0;
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  div.content07 div.block07 a div.img.img7_2 {
    top: 34.5333333333vw;
    right: 0;
    width: 37.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 div.block07 a div.img.img7_2 {
    top: 23.7179487179%;
    right: 0;
    width: 37.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  div.content07 div.block07 a div.img.img7_3 {
    top: 95.8666666667vw;
    right: 4vw;
    width: 56.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 div.block07 a div.img.img7_3 {
    top: 65.8424908425%;
    right: 4%;
    width: 56.2666666667%;
  }
}
div.content07 div.block07 a div.product {
  text-align: right;
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content07 div.block07 a div.product {
    top: 138vw;
    right: 0;
    padding-right: 4.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content07 div.block07 a div.product {
    top: 94.7802197802%;
    right: 0;
    padding-right: 4.2666666667%;
  }
}
div.content07 div.block07 a div.product::after {
  content: "color: WHT, LGY, BLK";
  display: block;
  color: #757575;
}
@media screen and (max-width: 768px) {
  div.content07 div.block07 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content08 {
    padding-top: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content08 {
    padding-top: 250px;
  }
}
div.content08 div.block08::before {
  content: "";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content08 div.block08::before {
    padding-top: 144.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content08 div.block08::before {
    padding-top: 144.9333333333%;
  }
}
div.content08 div.block08 div.img.img8_bg {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content08 div.block08 div.img.img8_bg {
    top: 0;
    right: 4.9333333333vw;
    width: 78.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content08 div.block08 div.img.img8_bg {
    top: 0;
    right: 4.9333333333%;
    width: 78.2666666667%;
  }
}
div.content08 div.block08 div.img.img8_bg video {
  width: 100%;
}
div.content08 div.block08 div.img::before {
  display: block;
  content: "";
  background-color: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
div.content08 div.block08 ul {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content08 div.block08 ul {
    top: 20.1333333333vw;
    left: 5.3333333333vw;
    width: 78.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content08 div.block08 ul {
    top: 13.8914443422%;
    left: 5.3333333333%;
    width: 78.2666666667%;
  }
}
@media screen and (max-width: 768px) {
  div.content08 div.block08 a div.product {
    top: 141.6vw;
    padding-left: 4.9333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content08 div.block08 a div.product {
    top: 97.7000919963%;
    padding-left: 4.9333333333%;
  }
}
div.content08 div.block08 a div.product::after {
  content: "color: DGY, BLK";
  display: inline-block;
}
@media screen and (max-width: 768px) {
  div.content08 div.block08 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content09 {
    padding-top: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content09 {
    padding-top: 250px;
  }
}
@media screen and (max-width: 768px) {
  div.content09 div.block09::before {
    padding-top: 144.4vw;
  }
}
@media screen and (min-width: 769px) {
  div.content09 div.block09::before {
    padding-top: 144.4%;
  }
}
div.content09 div.block09 a div.img.img9_1 {
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  div.content09 div.block09 a div.img.img9_1 {
    width: 44.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content09 div.block09 a div.img.img9_1 {
    width: 44.1333333333%;
  }
}
@media screen and (max-width: 768px) {
  div.content09 div.block09 a div.img.img9_2 {
    top: 68.6666666667vw;
    left: 0;
    width: 44.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content09 div.block09 a div.img.img9_2 {
    top: 47.5530932595%;
    left: 0;
    width: 44.1333333333%;
  }
}
div.content09 div.block09 a div.img.img9_3 {
  right: 0;
}
@media screen and (max-width: 768px) {
  div.content09 div.block09 a div.img.img9_3 {
    top: 13.3333333333vw;
    width: 53.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content09 div.block09 a div.img.img9_3 {
    top: 9.2336103416%;
    width: 53.0666666667%;
  }
}
div.content09 div.block09 a div.product {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
div.content09 div.block09 a div.product::after {
  content: "color: WHT, DGY, BLK";
  display: inline-block;
}
@media screen and (max-width: 768px) {
  div.content09 div.block09 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content10 {
    padding-top: 33.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content10 {
    padding-top: 250px;
  }
}
@media screen and (max-width: 768px) {
  div.content10 div.block10::before {
    padding-top: 133.6vw;
  }
}
@media screen and (min-width: 769px) {
  div.content10 div.block10::before {
    padding-top: 133.6%;
  }
}
div.content10 div.block10 a div.img.img10_1 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  div.content10 div.block10 a div.img.img10_1 {
    width: 70.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  div.content10 div.block10 a div.img.img10_1 {
    width: 70.6666666667%;
  }
}
div.content10 div.block10 a div.img.img10_2 {
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  div.content10 div.block10 a div.img.img10_2 {
    width: 43.6vw;
  }
}
@media screen and (min-width: 769px) {
  div.content10 div.block10 a div.img.img10_2 {
    width: 43.6%;
  }
}
@media screen and (max-width: 768px) {
  div.content10 div.block10 a div.product {
    top: 109.8666666667vw;
    left: 47.6vw;
  }
}
@media screen and (min-width: 769px) {
  div.content10 div.block10 a div.product {
    top: 82.2355289421%;
    left: 47.6%;
  }
}
div.content10 div.block10 a div.product::after {
  content: "color: WHT, BLK";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content10 div.block10 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
  }
}

@media screen and (max-width: 768px) {
  div.content11 {
    padding-top: 32.5333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 {
    padding-top: 250px;
  }
}
div.content11 div.block11 {
  position: relative;
}
div.content11 div.block11::before {
  content: "";
  display: block;
}
@media screen and (max-width: 768px) {
  div.content11 div.block11::before {
    padding-top: 82.1333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11::before {
    padding-top: 82.1333333333%;
  }
}
div.content11 div.block11 ul.img {
  position: absolute;
}
div.content11 div.block11 ul.img.img11_1 {
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  div.content11 div.block11 ul.img.img11_1 {
    width: 48.8vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11 ul.img.img11_1 {
    width: 48.8%;
  }
}
div.content11 div.block11 ul.img.img11_2 {
  top: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  div.content11 div.block11 ul.img.img11_2 {
    width: 48.8vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11 ul.img.img11_2 {
    width: 48.8%;
  }
}
div.content11 div.block11 a div.product {
  position: absolute;
}
@media screen and (max-width: 768px) {
  div.content11 div.block11 a div.product {
    top: 78.1333333333vw;
    padding-left: 3.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11 a div.product {
    top: 95.1298701299%;
  }
}
div.content11 div.block11 a div.product::after {
  content: "color: WHT/BLK";
  color: #888888;
}
@media screen and (max-width: 768px) {
  div.content11 div.block11 a div.product::after {
    font-size: 2.6666666667vw;
    line-height: 5.8666666667vw;
    display: block;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11 a div.product::after {
    display: inline-block;
  }
}
@media screen and (max-width: 768px) {
  div.content11 div.block11 a div.product_11_2 {
    left: 51.2vw;
  }
}
@media screen and (min-width: 769px) {
  div.content11 div.block11 a div.product_11_2 {
    left: 51.2%;
  }
}

div.all {
  font-family: "Times", serif;
}
@media screen and (max-width: 768px) {
  div.all {
    padding-top: 37.3333333333vw;
    padding-bottom: 25.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  div.all {
    padding-top: 280px;
    padding-bottom: 190px;
  }
}
div.all div {
  text-align: center;
}
div.all div a {
  color: #000000;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  div.all div a {
    font-size: 5.3333333333vw;
    padding-bottom: 3.3333333333vw;
    border-bottom: solid 0.8vw #000000;
  }
}
@media screen and (min-width: 769px) {
  div.all div a {
    font-size: 24px;
    line-height: 15.7px;
    padding-bottom: 14px;
    border-bottom: solid 4px #000000;
  }
}

footer {
  background-image: url(../images/sea.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Times", serif;
}
@media screen and (max-width: 768px) {
  footer {
    background-image: url(../images/tree.jpg);
    width: 100vw;
    height: 160vw;
  }
}
@media screen and (min-width: 769px) {
  footer {
    background-image: url(../images/tree_pc.jpg);
    width: 100%;
    background-size: cover;
    background-position: center center;
  }
}
footer div.wrapper {
  position: relative;
}
@media screen and (max-width: 768px) {
  footer div.wrapper {
    height: 142.1333333333vw;
    padding-top: 12.4vw;
    padding-right: 4vw;
    padding-left: 4vw;
    padding-bottom: 5.2vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper::before {
    content: "";
    display: block;
    padding-top: 60.4166666667%;
  }
}
footer div.wrapper div.footer_text {
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.footer_text {
    font-size: 3.2vw;
    line-height: 6.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.footer_text {
    position: absolute;
    font-size: 1.1111111111vw;
    line-height: 2.35;
    top: 5.0574712644%;
    left: 3.1944444444%;
  }
}
footer div.wrapper div.icon {
  display: flex;
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.icon {
    padding-top: 12.4vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.icon {
    position: absolute;
    top: 29.0804597701%;
    left: 3.1944444444%;
  }
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.icon div.insta {
    width: 8.6666666667vw;
    margin-right: 5.0666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.icon div.insta {
    width: 6.6666666667%;
    margin-right: 1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.icon div.x {
    width: 8.5333333333vw;
    margin-right: 4.8vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.icon div.x {
    width: 6.4285714286%;
    margin-right: 1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.icon div.pal {
    width: 8.8vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.icon div.pal {
    width: 6.6666666667%;
  }
}
footer div.wrapper div.logo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: absolute;
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.logo {
    width: 90vw;
    padding-bottom: 5.2vw;
    bottom: 0;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.logo {
    width: 93.75%;
    position: absolute;
    bottom: 5.7471264368%;
    left: 3.1944444444%;
  }
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.logo a {
    width: 16.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.logo a {
    width: 5.2005943536%;
  }
}
footer div.wrapper div.logo small {
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  footer div.wrapper div.logo small {
    font-size: 2.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  footer div.wrapper div.logo small {
    font-size: max(0.6944444444vw, 10px);
    position: absolute;
    right: 3.2638888889%;
  }
}/*# sourceMappingURL=style.css.map */