@charset "utf-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

/* var */
:root {
  --color_k: #000000;
  --color_w: #ffffff;
  --color_gray: #f2f2f2;
  --en: "Montserrat", 'Zen Kaku Gothic New', YuGothic, 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  --mg: 2.5rem;
  --mg2: 4rem;
  --mg3: 8rem;
}

/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
section, article { display: block; }

/* iOS reset */
input[type=text] { border:none; -webkit-border-radius : 0; -webkit-appearance : none; -webkit-tap-highlight-color : var(--color_k); }
input[type="submit"],
input[type="button"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration { display: none; }
input[type="submit"]::focus,input[type="button"]::focus { outline-offset: -0.15em; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; background: transparent; }
button,input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; }
input[type="radio"] { display: none; }
input[type="radio"]:checked + label { background: var(--color_k); }

/* base */
html { position: relative; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
  position: relative;
  animation: openPage 1s ease 0s 1 normal; -webkit-animation: openPage 1s ease 0s 1 normal;
  -webkit-font-smoothing: auto; -webkit-font-feature-settings: 'palt'; font-feature-settings: 'palt';
  word-wrap : break-word; overflow-wrap : break-word; font-kerning: normal; -webkit-font-kerning: normal;
  font-family: Arial, Helvetica, 'Zen Kaku Gothic New',YuGothic, 'Yu Gothic', '游ゴシック', '游ゴシック体', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.5em; letter-spacing: 0; font-weight: bold;
  box-sizing: border-box; background-color: var(--color_w); color: var(--color_k); padding: 0; margin: 0;
  -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }
img { vertical-align: bottom; height: auto; width: 100%; }
::selection { background: var(--color_k); color: var(--color_w); }
::-moz-selection { background: var(--color_k); }

/* fadein */
.openPage { opacity : 0; transform: translateY(0); transition: all 0.6s; }
@keyframes openPage { 0% { opacity: 0 } 100% { opacity: 1 } }
@-webkit-keyframes openPage { 0% { opacity: 0 } 100% { opacity: 1 } }

/* link */
a { transition: all 0.15s ease-in-out; }
a[href^="tel:"] { color: var(--color_k); text-decoration: none; }

/* options */
.pc { display:block; }
.sp { display:none; }
.sp_inline { display:none; }
.rl { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings : "pkna"; }

/* br */
.br__inline { display: inline-block; }
.br__pc { display:block; }
.br__sp { display:none; }

/* flex */
.flex { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.fill { object-fit: cover; font-family: 'object-fit: cover;'; }

/* cWrap */
.cWrap { position: relative; max-width:1680px; margin:auto; }

.cHeader { width: 50%; padding:5rem 0 0 0; margin-left:50%; }
.cHeader h1 { width:8rem; margin:auto; }
.cHeader .contact { z-index: 777; position: fixed; top: 1.5rem; right:1.5rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1rem; line-height: 1em; padding-bottom:0.25em; border-bottom:solid 1.5px #333; }
.cHeader .faq { z-index: 777; position: fixed; top: 4rem; right:1.5rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1rem; line-height: 1em; padding-bottom:0.25em; border-bottom:solid 1.5px #333; }

.cMain { display:flex; flex-direction: row-reverse; }
.cMain .cMain__left { position: fixed; left:0; bottom:0; width:50%; height:100vh; }
.cMain .cMain__left img { object-fit: cover; width:100%; height:100%; }
.cMain .cMain__right { position: static; z-index: 0; width: 50%; padding:0 8.5rem; margin-top:4rem; }
.cMain .cMain__right .cMain__inner { display: block; width: 100%; }
.cMain .cMain__right .cMain__inner .cMain__title { width:67.5%; margin:auto; }
.cMain .cMain__right .cMain__inner .cMain__title h2 {  }
.cMain .cMain__right .cMain__inner .cMain__cover { margin: 3rem; }
.cMain .cMain__right .cMain__inner .cMain__ex { margin: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__ex img { display: block; width: 90%; margin: 0 auto var(--mg) auto; }
.cMain .cMain__right .cMain__inner .cMain__txt { margin: var(--mg3) 0; }
.cMain .cMain__right .cMain__inner .cMain__txt h3 { font-size: 2.4rem; line-height: 1.2em; letter-spacing: 0.025em; margin-bottom: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__txt h4 { font-size: 1.75rem; line-height: 1.2em; letter-spacing: 0.025em; margin-bottom: 0.5em; }
.cMain .cMain__right .cMain__inner .cMain__txt p { font-size: 1.2rem; line-height: 1.5em; font-weight: bold; letter-spacing: 0; margin-bottom: 1.5rem; }
.cMain .cMain__right .cMain__inner .cMain__txt p.cap { font-size: 0.8rem; line-height: 1.8em; text-align: right; margin-bottom: 0; }
.cMain .cMain__right .cMain__inner .cMain__txt--gd { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cMain .cMain__right .cMain__inner .cMain__txt--gd img { width: 12%; }
.cMain .cMain__right .cMain__inner .cMain__txt--gd p { width: 84%; font-size: 1rem; margin-bottom: 0; }
.cMain .cMain__right .cMain__inner .cMain__txt--wash { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__txt--wash img { width: 16%; }
.cMain .cMain__right .cMain__inner .cMain__txt--wash--inner { width: 80%; margin-bottom: 0; }
.cMain .cMain__right .cMain__inner .cMain__txt--wash p { font-size: 1.8rem; margin-bottom: 0; }
.cMain .cMain__right .cMain__inner .cMain__txt--wash p.att { font-size: 0.8rem; line-height: 1.3em; margin: 1.5em 0 0 0; }
.cMain .cMain__right .cMain__inner .cMain__slider { width: 100%; margin: var(--mg2) auto; }
.cMain .cMain__right .cMain__inner .cMain__products { margin: var(--mg3) auto; }
.cMain .cMain__right .cMain__inner .cMain__products h3 { font-size: 2.4rem; line-height: 1.2em; letter-spacing: 0.025em; margin-bottom: 1.5rem; margin-left: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__products__main { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4/3; }
.cMain .cMain__right .cMain__inner .cMain__products__main img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease-in-out; }
.cMain .cMain__right .cMain__inner .cMain__products__main img.fade { z-index: 2; }
.cMain .cMain__right .cMain__inner .cMain__products__colorList { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__products__colorList li { display: inline-block; margin-bottom: 0.5rem; width: 12.6%; font-size: 1.5rem; cursor:pointer; position: relative; }
.cMain .cMain__right .cMain__inner .cMain__products__colorList li img { border-radius: 50%; }
.cMain .cMain__right .cMain__inner .cMain__products__colorList span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color_w); opacity:0; }
.cMain .cMain__right .cMain__inner .cMain__products__colorList span.k { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--color_k); opacity:0; }
.cMain .cMain__right .cMain__inner .cMain__products__colorList li:hover span,
.cMain .cMain__right .cMain__inner .cMain__products__colorList li.active span { opacity:1; }

.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-arrow { display: block; position: absolute; top: 0; bottom: 0; margin: auto; padding: 0; width: 20px; height: 28px; color: transparent; z-index: 1; transition: opacity 0.5s; z-index: 1; }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-arrow:hover  { opacity: 0.7; }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-prev::before,
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-prev::after,
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-next::before,
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-next::after { position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle; }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-prev::after,
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-next::after { width: 20px; height: 20px; border-top: 1.5px solid var(--color_w); border-right: 1.5px solid var(--color_w); }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-prev { left: 15px; }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-prev::after { left: 4px; transform: rotate(-135deg); }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-next { right: 15px; }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-next::after { right: 4px; transform: rotate(45deg); }
.cMain .cMain__right .cMain__inner .cMain__products .products__slider .slick-dots { position: relative; bottom: -0.75rem; }

.cMain .cMain__right .cMain__inner .cMain__products__info { display: flex; flex-direction: row; justify-content: space-between; align-items: start; margin: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__products__info .cMain__products--detail { font-size: 1rem; line-height: 1.2em; letter-spacing: 0.025em; }
.cMain .cMain__right .cMain__inner .cMain__products__info .cMain__products--price { font-size: 2rem; line-height: 1.1em; text-align: right; }
.cMain .cMain__right .cMain__inner .cMain__products__info .cMain__products--price span { font-size: 1.5rem; }
.cMain .cMain__right .cMain__inner .cMain__faq { width: 100%; margin: var(--mg2) auto; padding: var(--mg) 0; background-color: var(--color_gray); }
.cMain .cMain__right .cMain__inner .cMain__faq h3 { font-size: 2rem; line-height: 1.2em; letter-spacing: 0.025em; margin-bottom: var(--mg); margin-left: var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__faq details { display: block; width: 90%; margin: auto; font-size: 1.2rem; line-height: 1.2em; margin-bottom: 0.4rem; }
.cMain .cMain__right .cMain__inner .cMain__faq details summary { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-size: 1.2rem; line-height: 1.2em; padding: 1rem 1.5rem; background-color: var(--color_w); }
.cMain .cMain__right .cMain__inner .cMain__faq details summary .arrow { display: block; transform: rotate(45deg); width: 0.6rem; height: 0.6rem; margin-left: var(--mg); border-bottom: 2px solid var(--color_k); border-right: 2px solid var(--color_k); content: ''; transition: transform 0.4s; }
.cMain .cMain__right .cMain__inner .cMain__faq details.is-opened summary .arrow { transform: rotate(225deg); }
.cMain .cMain__right .cMain__inner .cMain__faq details summary::-webkit-details-marker { display: none; }
.cMain .cMain__right .cMain__inner .cMain__faq details .cMain__faq--answer { overflow: hidden; }
.cMain .cMain__right .cMain__inner .cMain__faq details .cMain__faq--answer--inner { font-size: 1.2rem; line-height: 1.2em; padding: 1rem; }

.cFooter { width: 50%; margin: var(--mg2) 0 var(--mg2) 50%; }
.cFooter dl { display: flex; flex-direction: column; align-items: center; }
.cFooter dt { font-size: 1.5rem; line-height: 2em; }
.cFooter dd { font-size: 1rem; line-height: 1.5em; }
.cFooter h1 { width:8rem; margin:auto; }
.cFooter .jp_link { text-align: center; margin:3rem auto 5rem auto; font-family: Arial, Helvetica, sans-serif; }
.cFooter .jp_link a { font-weight: bold; font-size: 1rem; line-height: 1em; padding-bottom:0.25em; border-bottom:solid 1.5px #333; }

@media screen and (max-width: 600px) {

/* var */
:root {
  --mg: 1.75rem;
  --mg2: 3.5rem;
  --mg3: 5.25rem;
}

/* options */
.pc { display:none; }
.sp { display:block; }

/* br */
.br__pc { display:none; }
.br__sp { display:block; }

/* cWrap */
.cWrap { position: relative; max-width:600px; margin:auto; }

.cHeader { width: 100%; padding:2.5rem 0; margin-left:0; }
.cHeader h1 { width:10rem; margin:auto; }
.cHeader .contact { z-index: 777; position: fixed; top: auto; bottom: 2rem; right:2rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2rem; line-height: 1em; padding-bottom:0.25em; border-bottom:solid 1px #000000; }
.cHeader .faq { z-index: 777; position: fixed; top: auto; right: auto; bottom: 2rem; left:2rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1.2rem; line-height: 1em; padding-bottom:0.25em; border-bottom:solid 1px #000000; }

.cMain { display:flex; flex-direction:column; }
.cMain .cMain__left { position: static; left:0; bottom:0; width:100%; height:auto; }
.cMain .cMain__left img { object-fit: cover; width:100%; height:74vh; height: 74svh; }
.cMain .cMain__right { position: static; width: 100%; padding:0 0; margin-top:10rem; }
.cMain .cMain__right .cMain__inner .cMain__txt { margin: var(--mg3) var(--mg); }
.cMain .cMain__right .cMain__inner .cMain__txt h3 { font-size: 2.2rem; }
.cMain .cMain__right .cMain__inner .cMain__txt h4 { font-size: 1.6rem; }

.cFooter { width: 100%; margin-left:0; margin-bottom: 10rem; }
.cFooter .jp_link a { font-size: 1.2rem; }

}

/* size */
html { font-size: clamp(7px, 1vw, 16px); }

@media screen and (max-width: 1024px) {
html { font-size: clamp(7px, 1.2vw, 16px); }
}

@media screen and (max-width: 600px) {
html { font-size: clamp(0px, 3vw, 16px); }
}