@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ==================================

  『商品ラインナップ』 PC Style

================================== */
.pc { display: inherit !important; }
.sp { display: none !important; }

p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.05em;
}
.contents-area { z-index: 5; }

.link-next {
  font-size: 14px;
  letter-spacing: 0.1em;
  display: inline-block;
  float: right;
  transition: all .3s;
}
.link-next:hover { opacity: 0.7; }
.link-next::before {
  content: "＞";
  display: inline-block;
  transform: scale(0.5,1.0);
}

/* Slick Slider
---------------------------------- */
/*.slick-slider.slick-initialized { display: block !important; }*/

/* ----------------------------------

  Main Visual

---------------------------------- */
.main-visual ul, .main-visual ul li { overflow: hidden; }
.main-visual ul li img {
  width: 100%;
  height: auto;
  display: block;
}
.mv01, .mv02, .mv03 { height: auto; }

/* F1
---------------------------------- */
.main-visual.f1 {
  width: 125%;
  margin: 0 0 0 -12.5%;
  overflow: hidden;
}
.main-visual.f1 ul {
  display: flex;
  align-items: stretch;
}
.main-visual.f1 ul li {
  position: relative;
  width: 25%;
  height: 0;
  padding: 0 0 calc(495 / 371 * 100% * (25 / 125));
  margin: 0 2px;
  /*
  padding: 0 2px calc(495 / 371 * 100% * .25) 2px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  */
  overflow: hidden;
}
.main-visual.f1 ul li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0;
  /*
  padding: 0 0 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  */
  overflow: hidden;
  display: block;
}
/*
.main-visual.f1 ul li#mvs01 span:first-of-type { background-image: url(../images/mv/lineup_mv_slide_exterior03a.jpg); }
.main-visual.f1 ul li#mvs01 span:last-of-type { background-image: url(../images/mv/lineup_mv_slide_interior03a.jpg); }
.main-visual.f1 ul li#mvs02 span:first-of-type { background-image: url(../images/mv/lineup_mv_slide_exterior01a.jpg); }
.main-visual.f1 ul li#mvs02 span:last-of-type { background-image: url(../images/mv/lineup_mv_slide_interior01a.jpg); }
.main-visual.f1 ul li#mvs03 span:first-of-type { background-image: url(../images/mv/lineup_mv_slide_exterior02.jpg); }
.main-visual.f1 ul li#mvs03 span:last-of-type { background-image: url(../images/mv/lineup_mv_slide_interior02.jpg); }
.main-visual.f1 ul li#mvs04 span:first-of-type { background-image: url(../images/mv/lineup_mv_slide_exterior01b.jpg); }
.main-visual.f1 ul li#mvs04 span:last-of-type { background-image: url(../images/mv/lineup_mv_slide_interior01b.jpg); }
.main-visual.f1 ul li#mvs05 span:first-of-type { background-image: url(../images/mv/lineup_mv_slide_exterior03b.jpg); }
.main-visual.f1 ul li#mvs05 span:last-of-type { background-image: url(../images/mv/lineup_mv_slide_interior03b.jpg); }
*/
.main-visual.f1 ul li span img {
  height: 100%;
  display: block;
  animation: zoomOut 8.0s infinite ease 0s alternate both;
}

/* F2
---------------------------------- */
.main-visual.f2 {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.main-visual.f2 .contents-area .inner {
  position: relative;
  height: 100%;
}
.main-visual.f2 h2 {
  position: absolute;
  right: 10px;
}
.main-visual.f2 h2 img {
  width: 100%;
  height: auto;
}
.main-visual.f2 .slick-slider { padding: 0; }
.main-visual.f2 .swiper { width: 100%; }
.main-visual.f2 .swiper-wrapper {}
.main-visual.f2 .swiper-slide figure {
  max-width: initial;
  height: auto;
}
.main-visual.f2 .swiper-slide.swiper-slide-active figure img,
.main-visual.f2 .swiper-slide.swiper-slide-duplicate-active figure img,
.main-visual.f2 .swiper-slide.swiper-slide-prev figure img {
  animation: zoomIn 10s ease 0s normal both;
}
.main-visual.f2 .swiper-slide figure img {
  width: 100%;
  height: auto;
}

/* Animation
---------------------------------- */
@keyframes zoomOut {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes UpDown {
  0% { transform: translateY(0); }
  /*
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(5px); }
  */
  100% { transform: translateY(-10px); }
}

@keyframes lineAnimate01 {
  0% { left: -50%; }
  100% { left: 150%; }
}
@keyframes lineAnimate02 {
  0% { right: -50%; }
  100% { right: 150%; }
}

.zoom-out { animation: zoomOut 10s linear 0s normal both; }

/* ----------------------------------

  Section

---------------------------------- */
section {
  position: relative;
  width: 100%;
}
section .inner::after {
  content: "";
  clear: both;
  display: block;
}

/* Breadcrumb
---------------------------------- */
#bread ul {
  position: relative;
  z-index: 2;
  top: initial;
  display: flex;
  justify-content: flex-start;
  margin: 0;
  color: #000000;
  text-shadow: none;
}
#bread li { color: #000000; }
#bread li.txt_w a {
  margin-right: 5px;
  color: #000000;
}

/* Heading
---------------------------------- */
.heading {
  font-size: 38px;
  text-align: center;
  letter-spacing: 0.05em;
  margin: 0 0 30px;
}
.heading span {
  font-size: calc(20 / 38 * 1em);
  display: block;
}

/* Intro
---------------------------------- */
.intro {
  padding: 80px 0 120px;
  text-align: center;
}
.intro .heading { color: #0b7bbd; }
.intro p {
  text-align: center;
  line-height: calc(30 / 14);
}

/* Section Header
---------------------------------- */
.sec-header {
  display: flex;
  align-items: flex-start;
  /*
  background: url(../images/century/wave.png) no-repeat left 30px;
  background-size: auto;
  */
  margin: 0 0 110px;
  flex-direction: row-reverse;
}
.sec-header > div:last-of-type {
  position: relative;
  width: calc(710 / 1500 * 100%);
  padding: 60px 60px 0 calc((100% - 1200px) / 2);
}
.sec-header > div:last-of-type dl {
  position: relative;
  z-index: 1;
}
.sec-header > div:last-of-type dl dt {
  /*
  font-size: 30px;
  letter-spacing: 0.05em;
  */
  margin: 0 0 60px;
}
.sec-header > div:last-of-type dl dd p { line-height: calc(30 / 14); }

/* Wave
---------------------------------- */
.wave {
  position: absolute;
  top: 70px;
  left: 0;
  width: calc(710 / 1500 * 100vw);
  height: 80px;
  overflow: hidden;
}
.wave_2 { height: 120px; }
/*
.century .wave { width: 110%; }
*/
.wave-canvas {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
/*
.wave-canvas#wave-canvas05 { display: none; }
*/
.wave span {
  position: absolute;
  width: 100%;
  height: 2px;
  display: inline-block;
  background: #e5e5e5;
}
.wave span::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 2px;
  background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%);
}
.wave span:first-of-type {
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transform: rotate(5.25deg);
  /*
  background: linear-gradient(to right,  rgba(229,229,229,1) 0%,rgba(198,198,198,1) 9%,rgba(229,229,229,1) 28%,rgba(213,213,213,1) 100%);
  animation: lineAnimate01 1s ease-in infinite;
  */
}
.wave span:first-of-type::after {
  content: "";
  top: 0;
  left: -50%;
  animation: lineAnimate01 2s ease-in-out infinite 0s alternate;
}
.wave span:last-of-type {
  bottom: 0;
  right: 0;
  transform-origin: 0 100%;
  transform: rotate(-10.5deg);
  /*
  background: linear-gradient(to right,  rgba(213,213,213,1) 0%,rgba(229,229,229,1) 48%,rgba(229,229,229,1) 79%,rgba(205,205,205,1) 90%,rgba(229,229,229,1) 97%);
  animation: lineAnimate02 1s ease-in infinite 2.5s;
  */
}
.wave span:last-of-type::after {
  content: "";
  bottom: 0;
  right: -50%;
  animation: lineAnimate02 2s ease-in-out infinite 4s alternate;
}

/* Slider Styles
---------------------------------- */
.sec-header .slick-slider { padding: 0; }
.sec-header .swiper { width: calc(790 / 1500 * 100%); }
.sec-header .swiper-wrapper { overflow: hidden; }
.sec-header .swiper-slide figure { overflow: hidden; }
.sec-header .swiper-slide.swiper-slide-active figure img,
.sec-header .swiper-slide.swiper-slide-duplicate-active figure img,
.sec-header .swiper-slide.swiper-slide-prev figure img {
  animation: zoomIn 12s infinite ease 0s normal both;
}
.sec-header .swiper-slide figure img {
  width: 100%;
  height: auto;
}

/* Movie
---------------------------------- */
.movie-unit {
  position: relative;
  width: calc(790 / 1500 * 100%);
  height: 0;
  padding: 0 0 calc(790 / 1500 * 56.25%);
  overflow: hidden;
  background-color: #000000;
}
.movie-unit video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Product LineUp
---------------------------------- */
.product-lineup {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 20px; /* Modified 202401 */
}
.product-item {
  position: relative;
  width: calc((100% - 120px) / 3);
  margin: 0 0 80px;
}
.product-item figure { /* margin: 0 0 5px; */ }
.product-item figure a {
  width: 100%;
  height: 0;
  cursor: pointer;
  padding: 0 0 calc(413 / 670 * 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  transition: all 0.6s ease;
  pointer-events: inherit;
  display: block;
}
.product-item figure a::before { content: ""; }
.product-item figure img {
  width: 100%;
  height: auto;
}
.product-item.new::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 60px;
  height: 60px;
  background: url(../images/century/new.png) no-repeat 0 0;
  background-size: cover;
}

/* Product Item Background Image
---------------------------------- */

/* Century */
.product-item .ci01 a { background-image: url(../images/century/lineup_century_img01.jpg); }
.product-item .ci02 a { background-image: url(../images/century/lineup_century_img02.jpg); }
.product-item .ci03 a { background-image: url(../images/century/lineup_century_img03.jpg); }
.product-item .ci04 a { background-image: url(../images/century/lineup_century_img04.jpg); }
.product-item .ci05 a { background-image: url(../images/century/lineup_century_img05.jpg); }
.product-item .ci06 a { background-image: url(../images/century/lineup_century_img06.jpg); }
.product-item .ci01 a::before, .product-item .ci01 a:hover { background-image: url(../images/century/lineup_century_img01_2.jpg); }
.product-item .ci02 a::before, .product-item .ci02 a:hover { background-image: url(../images/century/lineup_century_img02_2.jpg); }
.product-item .ci03 a::before, .product-item .ci03 a:hover { background-image: url(../images/century/lineup_century_img03_2.jpg); }
.product-item .ci04 a::before, .product-item .ci04 a:hover { background-image: url(../images/century/lineup_century_img04_2.jpg); }
.product-item .ci05 a::before, .product-item .ci05 a:hover { background-image: url(../images/century/lineup_century_img05_2.jpg); }
.product-item .ci06 a::before, .product-item .ci06 a:hover { background-image: url(../images/century/lineup_century_img06_2.jpg); }

/* Genius */
.product-item .gi01 a { background-image: url(../images/genius/lineup_genius_img01.jpg); }
.product-item .gi02 a { background-image: url(../images/genius/lineup_genius_img02.jpg); }
.product-item .gi03 a { background-image: url(../images/genius/lineup_genius_img03.jpg); }
.product-item .gi04 a { background-image: url(../images/genius/lineup_genius_img04.jpg); }
.product-item .gi05 a { background-image: url(../images/genius/lineup_genius_img05.jpg); }
.product-item .gi06 a { background-image: url(../images/genius/lineup_genius_img06.jpg); }
.product-item .gi01 a::before, .product-item .gi01 a:hover { background-image: url(../images/genius/lineup_genius_img01_2.jpg); }
.product-item .gi02 a::before, .product-item .gi02 a:hover { background-image: url(../images/genius/lineup_genius_img02_2.jpg); }
.product-item .gi03 a::before, .product-item .gi03 a:hover { background-image: url(../images/genius/lineup_genius_img03_2.jpg); }
.product-item .gi04 a::before, .product-item .gi04 a:hover { background-image: url(../images/genius/lineup_genius_img04_2.jpg); }
.product-item .gi05 a::before, .product-item .gi05 a:hover { background-image: url(../images/genius/lineup_genius_img05_2.jpg); }
.product-item .gi06 a::before, .product-item .gi06 a:hover { background-image: url(../images/genius/lineup_genius_img06_2.jpg); }

/* Smart Style */
.product-item .si01 a { background-image: url(../images/smart-style/lineup_smart-style_img01.jpg); }
.product-item .si02 a { background-image: url(../images/smart-style/lineup_smart-style_img02.jpg); }
.product-item .si03 a { background-image: url(../images/smart-style/lineup_smart-style_img03.jpg); }
.product-item .si04 a { background-image: url(../images/smart-style/lineup_smart-style_img04.jpg); }
.product-item .si05 a { background-image: url(../images/smart-style/lineup_smart-style_img05.jpg); }
.product-item .si06 a { background-image: url(../images/smart-style/lineup_smart-style_img06.jpg); }
.product-item .si01 a::before, .product-item .si01 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img01_2.jpg); }
.product-item .si02 a::before, .product-item .si02 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img02_2.jpg); }
.product-item .si03 a::before, .product-item .si03 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img03_2.jpg); }
.product-item .si04 a::before, .product-item .si04 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img04_2.jpg); }
.product-item .si05 a::before, .product-item .si05 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img05_2.jpg); }
.product-item .si06 a::before, .product-item .si06 a:hover { background-image: url(../images/smart-style/lineup_smart-style_img06_2.jpg); }

/* MJ Wood */
.product-item .mi01 a { background-image: url(../images/mj-wood/lineup_mj-wood_img01.jpg); }
.product-item .mi02 a { background-image: url(../images/mj-wood/lineup_mj-wood_img02.jpg); }
.product-item .mi03 a { background-image: url(../images/mj-wood/lineup_mj-wood_img03.jpg); }
.product-item .mi04 a { background-image: url(../images/mj-wood/lineup_mj-wood_img04.jpg); }
.product-item .mi05 a { background-image: url(../images/mj-wood/lineup_mj-wood_img05.jpg); }
.product-item .mi06 a { background-image: url(../images/mj-wood/lineup_mj-wood_img06.jpg); }
.product-item .mi01 a::before, .product-item .mi01 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img01_2.jpg); }
.product-item .mi02 a::before, .product-item .mi02 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img02_2.jpg); }
.product-item .mi03 a::before, .product-item .mi03 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img03_2.jpg); }
.product-item .mi04 a::before, .product-item .mi04 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img04_2.jpg); }
.product-item .mi05 a::before, .product-item .mi05 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img05_2.jpg); }
.product-item .mi06 a::before, .product-item .mi06 a:hover { background-image: url(../images/mj-wood/lineup_mj-wood_img06_2.jpg); }

.product-item dl dt {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: calc(30 / 20);
  /*
  letter-spacing: 0.075em;
  */
  margin: 30px 0;
}
.product-item dl dt a, .product-item dl dd p a {
  color: #000000;
  text-decoration: none;
  transition: all 0.3s;
}
.product-item dl dt a:hover,
.product-item dl dd p a:hover { opacity: 0.7; }
.product-item dl dt img { display: none; }
.product-item dl dt small { font-size: calc(15 / 20 * 1em); }
.product-item dl dd p { line-height: calc(22 / 14); }
.product-item dl dd:last-of-type { margin: 20px 0 0; }

.tag {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #a5a5a5;
  transition: all 0.3s;
  margin: 0 1em 0 0;
}
.tag:not(:last-of-type)::after { content: none; }
.tag::before { content: "#"; }
.tag:hover { color: rgba(165,165,165,0.7) }

/* Century
---------------------------------- */
.century {}
.century .sec-header > div:last-of-type dl dt img { width: 244px; }

.link-detail {
  font-size: 16px;
  line-height: calc(30 / 16);
  letter-spacing: 0.05em;
  text-align: center;
  display: none;
  width: 300px;
  line-height: 70px;
  border: solid 1px #c0c6d1;
  margin: 30px 0 0;
  transition: all 0.3s;
}
.link-detail:hover {
  color: #ffffff;
  background-color: #c0c6d1;
}

/* Genius
---------------------------------- */
.genius { margin: 200px 0 0; }
.genius .sec-header > div:last-of-type dl dt img { width: 190px; }
.genius .product-item:first-of-type dl dt img { width: 319px; }
.genius .product-item:nth-of-type(2) dl dt img { width: 138px; }
.genius .product-item:nth-of-type(3) dl dt img { width: 115px; }
.genius .product-item:nth-of-type(4) dl dt img { width: 137px; }
.genius .product-item:nth-of-type(5) dl dt img { width: 153px; }
.genius .product-item:last-of-type dl dt img { width: 168px; }
/*
.genius .product-item dl dt { text-align: center; }
.genius .product-item:first-of-type dl dt
.genius .product-item:nth-of-type(2) dl dt,
.genius .product-item:nth-of-type(3) dl dt { font-size: 18px; }
.genius .product-item:first-of-type dl dt small,
.genius .product-item:nth-of-type(2) dl dt small,
.genius .product-item:nth-of-type(3) dl dt small { font-size: calc(11 / 18 * 1em); }
.genius .product-item:nth-of-type(4) dl dt,
.genius .product-item:nth-of-type(5) dl dt,
.genius .product-item:last-of-type dl dt { font-size: 0; }
*/

/* Smart Style
---------------------------------- */
.smart-style { margin: 200px 0 0; }
.smart-style .sec-header > div:last-of-type dl dt img { width: 323px; }
.smart-style .product-item:first-of-type dl dt img { width: 224px; }
.smart-style .product-item:nth-of-type(2) dl dt img { width: 161px; }
.smart-style .product-item:nth-of-type(3) dl dt img { width: 243px; }
.smart-style .product-item:nth-of-type(4) dl dt img { width: 159px; }
.smart-style .product-item:nth-of-type(5) dl dt img { width: 161px; }
.smart-style .product-item:last-of-type dl dt img { width: 158px; }

/* Mj Wood
---------------------------------- */
.mj-wood { margin: 200px 0 0; }
.mj-wood .sec-header > div:last-of-type dl dt img { width: 221px; }
.mj-wood .product-item:first-of-type dl dt small { font-size: calc(15 / 20 * 1em); }
/*
.mj-wood .product-item:first-of-type dl dt img { width: 97px; }
.mj-wood .product-item:nth-of-type(2) dl dt img { width: 206px; }
.mj-wood .product-item:nth-of-type(3) dl dt img { width: 185px; }
.mj-wood .product-item:nth-of-type(4) dl dt img { width: 122px; }
.mj-wood .product-item:nth-of-type(5) dl dt img { width: 119px; }
.mj-wood .product-item:last-of-type dl dt img { width: 120px; }
*/

/* Other Model
---------------------------------- */
.other-model { margin: 200px 0 0; }
.other-model .link-next { margin: 100px 0 0; } /* Modified 202401 */
.other-model .sec-header { margin: 0; }
.other-model .sec-header > div:last-of-type { width: 100%; }
.other-model .sec-header > div:last-of-type dl dt h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 38px;
  letter-spacing: 0.075em;
}
.other-model .sec-header > div:last-of-type dl dt img { width: 474px; }
.other-model .wave { display: none; }
.other-model .wave-canvas { width: 100%; }

/* Banner
---------------------------------- */
.banner { padding: 150px 0 100px; }
/*
.banner ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
*/
.banner ul li a { display: block; }
.banner ul li a img {
  width: 100%;
  height: auto;
  transition: all .3s
}
.banner ul li a:hover img { opacity: 0.7; }