@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Contents {

  width: auto;

  max-width: unset;

}



#footer {

  margin-top: 0;

}



footer {

  position: relative;

  z-index: 10;

}



.nav-top {

  display: none;

  z-index: 5;

}



:root {

  --font_regular: "lato", "ryo-gothic-plusn", sans-serif;

  --font_jpg-serif: "Noto Serif JP", serif;

  --font_eng-serif: "adobe-garamond-pro", serif;

  --color_regular: #1F1F1F;

  --color_weak: #666666;

  --color_accent_01: #d7827d;

  --color_accent_02: #d7827d;

  --color_accent_03: #F3DBDE;

  --color_1st: #B29D18;

  --color_2nd: #979797;

  --color_3rd: #B9815D;

  --color_lower: #BDBDBD;

  --color_bg_01: #f9f5f3;

  --color_bg_02: #f5ebea;

  --color_bg_03: #FFFFFF;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .125em;

  font-feature-settings: "palt";

}



.LP_page {

  padding-bottom: 8rem;

  background: var(--color_bg_03);

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

  color: inherit;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1rem;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .15s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .3s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .45s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .6s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

}

/*----------------------------all*/



/*first view---------------------*/

.firstview_area {

  padding-bottom: 8rem;

  background: var(--color_bg_01);

}



.main_ttl_wrap {

  position: relative;

  margin-bottom: 7.4rem;

  padding: 31.7rem 0 32.1rem;

}



.main_ttl_wrap::before,

.main_ttl_wrap::after {

  position: absolute;

  width: 100%;

  height: 28.8rem;

  background-repeat: repeat-x;

  background-size: auto 100%;

  content: "";

  animation: loop 40s linear infinite;

}



.main_ttl_wrap::before {

  top: 0;

  left: 0;

  background-image: url(../img/bg_top_251003.jpg);

}



.main_ttl_wrap::after {

  bottom: 0;

  right: 0;

  background-image: url(../img/bg_bottom_251003.jpg);

  animation-direction: reverse !important;

}



@keyframes loop {

  0% {

      background-position: 0 0;

  }



  100% {

      background-position: -150rem 0;

  }

}



.main_ttl {

  font-weight: 400;

  font-size: 5rem;

  letter-spacing: .1em;

  text-align: center;

}



.main_ttl .sub_ttl {

  display: block;

  margin-top: 2rem;

  font-size: 1.8rem;

}



.main_lead {

  margin-bottom: 5.6rem;

}



.main_lead p {

  font-size: 1.3rem;

  line-height: 2;

  text-align: center;

}



.main_lead p:nth-of-type(n+2) {

  margin-top: 2.5rem;

}



.navigation_list {

  display: flex;

  justify-content: center;

  margin-left: 2rem;

}



.navigation_list li:nth-of-type(n+2) {

  border-left: solid var(--color_accent_02);

  border-width: .1rem;

}



.navigation_list li a {

  display: grid;

  place-items: center;

  height: 5rem;

  padding: 0 4rem;

}



.navigation_list li a span {

  position: relative;

  padding-right: 2.4rem;

  font-size: 1.8rem;

}



.navigation_list li a span::before {

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  width: 1.2rem;

  height: 1.2rem;

  margin-top: .1rem;

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

}

/*---------------------first view*/



/*Series Selection---------------*/

.each_sec {

  padding: 8rem 0;

}



#SeriesSelection {

  padding-bottom: 8rem;

}



#SeriesSelection {

  background: var(--color_bg_02);

}



.sec_ttl {

  margin-bottom: 5.2rem;

  font-size: 3rem;

  font-weight: 400;

  text-align: center;

}



.thumbnail_list_wrap {

  padding-bottom: 1.2rem;

}



.thumbnail_list {

  display: flex;

  justify-content: center;

  gap: 3rem;

}



.thumbnail_list li input {

  display: none;

}



.thumbnail_list li label {

  position: relative;

  display: block;

  width: fit-content;

  padding-bottom: 1.3rem;

  cursor: pointer;

}



.thumbnail_list li .thumbnail_img {

  height: 10rem;

  margin-bottom: 1rem;

}



.thumbnail_list li .thumbnail_img picture,

.thumbnail_list li .thumbnail_img img {

  width: auto;

  height: 100%;

}



.thumbnail_list li .thumbnail_txt {

  display: grid;

  place-items: center;

  min-height: 4.5rem;

  font-size: 1.2rem;

  line-height: 1.8;

  text-align: center;

}



.thumbnail_list li label::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: calc(100% - 2rem);

  height: .2rem;

  background: var(--color_accent_01);

  content: "";

  opacity: 0;

  transition: opacity .3s;

}



.thumbnail_list li.selected label::before {

  opacity: 1;

}



.switching_area {

  padding-top: 3rem;

}



.each_content {

  opacity: 0;

  height: 0;

  overflow: hidden;

  transition: opacity .8s;

}



.each_content.selected {

  opacity: 1;

  height: auto;

  overflow: visible;

}



.series_ttl {

  margin-bottom: 1.5rem;

  font-size: 1.5rem;

  font-weight: 400;

  text-align: center;

  color: var(--color_weak);

}



.series_ttl .txt_L {

  display: block;

  margin-bottom: 1.4rem;

  font-family: var(--font_eng-serif);

  font-size: 4.2rem;

  letter-spacing: .035em;

  color: var(--color_accent_01);

}



.series_price {

  margin-bottom: 5.2rem;

  font-size: 1.4rem;

  text-align: center;

}



#SeriesSelection .each_content > div {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 3rem;

}



.series_img_list {

  width: 66rem;

  padding: 0 5.5rem;

}



.slider_area {

  opacity: 0;

  overflow: hidden;

  transition: opacity .3s;

}



#SeriesSelection .slider_area {

  height: 30rem;

}



.slider_area.active {

  height: auto !important;

  opacity: 1;

  overflow: visible;

}



.slick-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 1.8rem;

  height: 6rem;

}

.slick-prev {

  left: 0;

  margin-left: -.2rem;

}



.slick-next {

  right: 0;

  margin-right: -.2rem;

}



.slick-arrow::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/arrow_002.svg) center center / cover no-repeat;

  content: "";

}



.slick-next::before {

  transform: scaleX(-1);

}



.each_img {

  margin: 0 1rem;

}



.each_img a {

  display: flex;

  gap: 5rem;

}



.makeup_img {

  width: 30rem;

}



.series_img_list .itm_img {

  width: 20rem;

}



.series_detail {

  display: flex;

  flex-direction: column;

}



.variation_name_list {

  margin-bottom: 4.2rem;

}



.variation_name_list li {

  width: fit-content;

  margin: 0 auto;

  font-size: 1.4rem;

  text-align: center;

  opacity: 0;

  height: 0;

  overflow: hidden;

  transition: opacity .8s;

}



.variation_name_list li.selected {

  opacity: 1;

  height: auto;

  overflow: visible;

}



.series_caption {

  margin-bottom: 1.5rem;

  font-size: 1.5rem;

  line-height: 2;

  text-align: center;

}



.evaluation_list {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  border: solid var(--color_accent_02);

  border-width: .1rem;

  width: 32rem;

  margin: 0 auto 2rem;

  padding: .2rem;

}



#Series04 .evaluation_list {

  padding: .2rem 2rem;

}



.evaluation_list li {

  position: relative;

  padding: 0 1.1rem;

  font-size: 1.3rem;

  line-height: 2;

}



.evaluation_list li:nth-of-type(n+2)::before {

  position: absolute;

  top: 0;

  left: 0;

  margin-left: -.2rem;

  font-size: 1.3rem;

  content: "|";

}



#Series04 .evaluation_list li:nth-of-type(3)::before {

  display: none;

}



.color_list {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1rem;

  margin: 0 auto;

}



.color_list li {

  position: relative;

  width: 4rem;

}



.color_list li::after {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 1.8rem;

  height: 1.8rem;

  border-radius: 50%;

  background: #fff;

  opacity: 0;

  content: "";

  transition: opacity .3s;

  pointer-events: none;

}



.color_list li input {

  display: none;

}



.color_list li label {

  display: block;

  cursor: pointer;

}



.color_list li.selected label {

  pointer-events: none;

}



.color_list li p {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin: 0 0 0 .1rem;

  font-size: 1.2rem;

  text-align: center;

  color: #fff;

  white-space: nowrap;

  pointer-events: none;

}



.color_list li.selected::after {

  opacity: .8;

}



.to_colorMap {

  position: fixed;

  z-index: 20;

  bottom: 0;

  right: 0;

  width: 12rem;

  height: 12rem;

  margin: 0 3rem 3rem 0;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s;

}



.to_colorMap.active {

  opacity: 1;

  pointer-events: auto;

}



.to_colorMap a {

  position: relative;

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: rgba(255, 255, 255, .6);

  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .08));

}



.to_colorMap a::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: 6rem;

  height: 4.5rem;

  margin-top: 2rem;

  content: "";

}



#Series01 .to_colorMap a::before {

  background: url(../img/texture_001.png) center center / cover no-repeat;

}



#Series02 .to_colorMap a::before {

  background: url(../img/texture_002.png) center center / cover no-repeat;

}



#Series03 .to_colorMap a::before {

  background: url(../img/texture_003.png) center center / cover no-repeat;

}



#Series04 .to_colorMap a::before {

  background: url(../img/texture_004.png) center center / cover no-repeat;

}



#Series05 .to_colorMap a::before {

  background: url(../img/texture_005.png) center center / cover no-repeat;

}



#Series06 .to_colorMap a::before {

  background: url(../img/texture_006.png) center center / cover no-repeat;

}



#Series07 .to_colorMap a::before {

  background: url(../img/texture_007.png) center center / cover no-repeat;

}



#Series08 .to_colorMap a::before {

  background: url(../img/texture_008.png) center center / cover no-repeat;

}



.to_colorMap a span {

  position: relative;

  padding-top: 4rem;

  font-size: 1.4rem;

  letter-spacing: .125em;

  color: var(--color_accent_01);

}



.to_colorMap a span::before,

.to_colorMap a span::after {

  position: absolute;

  top: 100%;

  left: 50%;

  translate: -50% 0;

  width: .1rem;

  height: 1rem;

  margin-top: .6rem;

  border-radius: 10rem;

  background: var(--color_accent_01);

  content: "";

}



.to_colorMap a span::after {

  rotate: 90deg;

}



.colorMap_wrap {

  position: relative;

  width: 120rem;

  background: #fff;

}



.colorMap {

  width: 100%;

}



.colorMap_wrap .each_color {

  position: absolute;

  top: 0;

  left: 0;

  width: fit-content;

}



.colorMap_wrap .each_color a {

  padding: 0 1.5rem 1rem;

}



.colorMap_wrap .each_color.bg_white_pc {

  background: #fff;

}



#ColorMap08 .colorMap_wrap .each_color.color_01 {

  margin: 14.3rem 0 0 45.2rem;

}



#ColorMap08 .colorMap_wrap .each_color.color_02 {

  margin: 33.2rem 0 0 37.7rem;

}



#ColorMap08 .colorMap_wrap .each_color.color_03 {

  margin: 25.2rem 0 0 50.5rem;

}



#ColorMap08 .colorMap_wrap .each_color.color_04 {

  margin: 33.2rem 0 0 70.6rem;

}



#ColorMap08 .colorMap_wrap .each_color.color_05 {

  margin: 49.6rem 0 0 71.4rem;

}



#ColorMap08 .colorMap_wrap .each_color.color_06 {

  margin: 47.2rem 0 0 41.2rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_01 {

  margin: 18.2rem 0 0 21.6rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_02 {

  margin: 18.3rem 0 0 69.2rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_03 {

  margin: 26.2rem 0 0 53rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_04 {

  margin: 47.2rem 0 0 42.6rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_05 {

  margin: 47.2rem 0 0 21.4rem;

}



#ColorMap07 .colorMap_wrap .each_color.color_06 {

  margin: 56.2rem 0 0 69.2rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_01 {

  margin: 16.2rem 0 0 29rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_02 {

  margin: 46.3rem 0 0 53.4rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_03 {

  margin: 39.2rem 0 0 69.5rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_04 {

  margin: 61.3rem 0 0 81rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_05 {

  margin: 22.2rem 0 0 16.5rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_06 {

  margin: 55.3rem 0 0 36.6rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_07 {

  margin: 19.2rem 0 0 80.8rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_08 {

  margin: 46.3rem 0 0 91.3rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_09 {

  margin: 28.2rem 0 0 27.8rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_10 {

  margin: 28.2rem 0 0 59.8rem;

}



#ColorMap06 .colorMap_wrap .each_color.color_11 {

  margin: 43.8rem 0 0 79.2rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_01 {

  margin: 19.2rem 0 0 43.6rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_02 {

  margin: 39.3rem 0 0 37rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_03 {

  margin: 44.3rem 0 0 83.5rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_04 {

  margin: 25.2rem 0 0 63.5rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_05 {

  margin: 15.2rem 0 0 75rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_06 {

  margin: 25.2rem 0 0 19.7rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_07 {

  margin: 31.2rem 0 0 84.5rem;

}



#ColorMap01 .colorMap_wrap .each_color.color_08 {

  margin: 57.3rem 0 0 68.8rem;

}



#ColorMap02 .colorMap_wrap .each_color.color_01 {

  margin: 17.2rem 0 0 54.2rem;

}



#ColorMap02 .colorMap_wrap .each_color.color_02 {

  margin: 30.7rem 0 0 45.5rem;

}



#ColorMap02 .colorMap_wrap .each_color.color_03 {

  margin: 45.3rem 0 0 37.5rem;

}



#ColorMap02 .colorMap_wrap .each_color.color_04 {

  margin: 45.3rem 0 0 64rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_01 {

  margin: 16.2rem 0 0 50.6rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_02 {

  margin: 31.2rem 0 0 29.5rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_03 {

  margin: 48.2rem 0 0 38.4rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_04 {

  margin: 48.2rem 0 0 81.5rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_05 {

  margin: 59.3rem 0 0 76.5rem;

}



#ColorMap03 .colorMap_wrap .each_color.color_06 {

  margin: 43.8rem 0 0 65rem;

}



#ColorMap04 .colorMap_wrap .each_color.color_01 {

  margin: 30rem 0 0 54.5rem;

}



#ColorMap04 .colorMap_wrap .each_color.color_02 {

  margin: 30rem 0 0 20.5rem;

}



#ColorMap04 .colorMap_wrap .each_color.color_03 {

  margin: 39.3rem 0 0 90.5rem;

}



#ColorMap04 .colorMap_wrap .each_color.color_04 {

  margin: 16.2rem 0 0 38.8rem;

}



#ColorMap05 .colorMap_wrap .each_color.color_01 {

  margin: 22.2rem 0 0 37rem;

}



#ColorMap05 .colorMap_wrap .each_color.color_02 {

  margin: 43.8rem 0 0 21.3rem;

}



#ColorMap05 .colorMap_wrap .each_color.color_03 {

  margin: 54.8rem 0 0 75.3rem;

}



#ColorMap05 .colorMap_wrap .each_color.color_04 {

  margin: 45.8rem 0 0 86.4rem;

}



#ColorMap05 .colorMap_wrap .each_color.color_05 {

  margin: 16.2rem 0 0 79.2rem;

}



.colorMap_wrap .each_color .color_img {

  width: 8rem;

  margin: 0 auto 1.1rem;

}



.colorMap_wrap .each_color .color_name {

  font-size: 1.2rem;

  font-weight: 400;

  line-height: 1.8;

  letter-spacing: .125em;

  text-align: center;

  white-space: nowrap;

}



#SeriesSelection .each_content .to_link {

  position: relative;

  z-index: 1;

  width: 26rem;

  height: 4.6rem;

  margin: 4rem auto 0;

}



#SeriesSelection .each_content .to_link::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 100vw;

  height: .1rem;

  margin: 0 calc(50% - 50vw);

  background: var(--color_accent_02);

  content: "";

}



#SeriesSelection .each_content .to_link a {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  background: var(--color_accent_01);

  font-size: 1.6rem;

  letter-spacing: .075em;

  color: #fff;

}



.texture_img_wrap {

  position: relative;

  width: 40rem;

  margin: 9rem auto 0;

}



.texture_name_list {

  position: absolute;

  top: 0;

  left: 0;

}



.texture_name_list li {

  position: absolute;

  top: 0;

  left: 0;

  font-size: 1.3rem;

  white-space: nowrap;

}



.texture_name_list li:nth-of-type(1) {

  margin: 13.8rem 0 0 31.5rem;

}



.texture_name_list li:nth-of-type(2) {

  margin: 19.6rem 0 0 27rem;

}



.texture_name_list li:nth-of-type(3) {

  margin: 25rem 0 0 22.5rem;

}



.texture_name_list li:nth-of-type(4) {

  margin: 29.8rem 0 0 19rem;

}



.texture_img_wrap .to_textureMap {

  position: absolute;

  bottom: 0;

  right: 0;

  width: 10rem;

  height: 10rem;

  margin: 0 -5rem -5rem 0;

}



.texture_img_wrap .to_textureMap a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  font-size: 1.6rem;

  color: #fff;

}



.texture_img_wrap .to_textureMap a::before {

  position: absolute;

  top: 0;

  left: 0;

  z-index: -1;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: var(--color_accent_01);

  content: "";

  animation: circle 3s infinite;

}



@keyframes circle {

  0% {

    transform: scale(1);

  }



  50% {

    transform: scale(1.16);

  }





  100% {

    transform: scale(1);

  }

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



.LP_page.modalOpen,

#FooterWrap.modalOpen {

  overflow-y: scroll;

  height: 100%;

}



header.hide,

.to_menu.hide,

#share.hide {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0s !important;

}



.modal_outside.hide {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 100;

  top: 0;

  left: 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  opacity: .4;

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_outside input {

  display: none;

}



.modal_wrap {

  display: block;

  margin: 0 auto;

  max-height: 100%;

  padding: 5rem 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.modal_close {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 2;

  width: 3rem;

  height: 3rem;

  border: none;

  margin: 2.5rem 3rem 0 0;

  background: none;

  cursor: pointer;

}



.modal_close::before,

.modal_close::after {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%) rotate(45deg);

  width: .1rem;

  height: 4.2rem;

  background: var(--color_weak);

  content: "";

}



.modal_close::after {

  transform: translateX(-50%) rotate(-45deg);

}



.textureMap_wrap {

  position: relative;

  width: 120rem;

  background: #fff;

}



.textureMap {

  width: 100%;

}



.textureMap_wrap .itm_wrap {

  position: absolute;

  top: 0;

  left: 0;

  width: fit-content;

}



.textureMap_wrap .itm_wrap a {

  padding: 1rem 1rem .5rem;

  background: #fff;

}



.textureMap_wrap .itm_wrap.itm_01 {

  margin: 38.7rem 0 0 54.6rem;

}



.textureMap_wrap .itm_wrap.itm_02 {

  margin: 48.5rem 0 0 86rem;

}



.textureMap_wrap .itm_wrap.itm_03 {

  margin: 17.2rem 0 0 71.6rem;

}



.textureMap_wrap .itm_wrap.itm_04 {

  margin: 17.2rem 0 0 37.6rem;

}



.textureMap_wrap .itm_wrap.itm_05 {

  margin: 17.2rem 0 0 54.6rem;

}



.textureMap_wrap .itm_wrap .itm_img {

  width: 10rem;

  margin: 0 auto 1.1rem;

}



.textureMap_wrap .itm_wrap .itm_name {

  font-size: 1.2rem;

  font-weight: 400;

  line-height: 1.8;

  text-align: center;

}



/*---------------Series Selection*/





/*Engraving Service--------------*/

#EngravingService {

  padding-bottom: 8.2rem;

}



#EngravingService .sec_ttl_wrap {

  width: 70rem;

  height: 36rem;

  margin: 0 auto 3rem;

  background: url(../img/bnr_001.jpg) center center / cover no-repeat;

  text-align: center;

  color: #fff;

}



#EngravingService .sec_ttl_wrap a {

  width: 100%;

  height: 100%;

}



#EngravingService .sec_ttl_inner {

  width: 40rem;

  padding-top: 13rem;

}



#EngravingService .sec_ttl {

  margin-bottom: 2.5rem;

  font-size: 2.2rem;

  letter-spacing: .075em;

}



#EngravingService .sec_ttl .txt_S {

  display: block;

  margin-top: 1.5rem;

  font-size: 1.5rem;

}



#EngravingService .sec_lead {

  font-size: 1.2rem;

  line-height: 2;

}



#EngravingService .to_link_wrap {

  text-align: center;

}



#EngravingService .to_link {

  width: 26rem;

  margin: 0 auto 1.8rem;

  color: var(--color_accent_01);

}



#EngravingService .to_link a {

  position: relative;

  width: 100%;

  border-bottom: solid var(--color_accent_02);

  border-width: .1rem;

  padding-bottom: .8rem;

  font-size: 1.6rem;

  letter-spacing: .075em;

}



#EngravingService .to_link a::before {

  position: absolute;

  bottom: 0;

  right: 0;

  width: .1rem;

  height: 1.3rem;

  border-radius: 0 0 1rem 1rem;

  margin-bottom: -.05rem;

  background: var(--color_accent_02);

  transform: rotate(-50deg);

  transform-origin: bottom center;

  content: "";

}



#EngravingService .notes {

  font-size: 1rem;

  color: var(--color_weak);

}

/*--------------Engraving Service*/



/*Color Selection----------------*/

#ColorSelection {

  background: var(--color_bg_01);

}



#ColorSelection .thumbnail_list li label::before {

  width: calc(100% - 4rem);

}



#ColorSelection .thumbnail_list li .thumbnail_img {

  height: 7.5rem;

}



.color_ttl {

  margin-bottom: 3.8rem;

  font-family: var(--font_eng-serif);

  font-size: 4.2rem;

  font-weight: 400;

  letter-spacing: .035em;

  text-align: center;

  color: var(--color_accent_01);

}



#ColorSelection .switching_area {

  padding-top: 4rem;

}



#ColorSelection .item_list {

  max-width: 90rem;

  margin: 0 auto;

}



.item_list__inner {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 5rem;

}



.item_list__item {

  position: relative;

  display: flex;

  flex-direction: column;

  text-align: center;

  width: 18rem;

  height: auto;

}



#ColorSelection .icn_rank {

  display: none;

}



.item_list__img {

  margin-bottom: 1.2rem;

}



.item_list__title {

  flex-grow: 1;

  margin-bottom: 1.6rem;

}



.item_list__title a {

  font-size: 1.3rem;

  line-height: 2;

}



.item_list__price {

  margin-bottom: 2.2rem;

  font-size: 1.2rem;

}



.item_list__item .to_link {

  width: 12rem;

  height: 2.4rem;

  margin: 0 auto;

}



.item_list__item .to_link a {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  background: var(--color_accent_01);

  font-size: 1.2rem;

  letter-spacing: .075em;

  color: #fff;

}



.item_list__item .soldout {

  display: none;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 1s;

}



.accordion_outside.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_outside.accordion_unset .accordion_wrap {

  display: block;

}



.accordion_inner {

  min-height: 18rem;

  overflow: hidden;

}



.accordion_btn {

  width: fit-content;

  margin: 4.8rem auto 0;

  font-size: 1.4rem;

  text-align: center;

  cursor: pointer;

}



.accordion_outside.accordion_unset .accordion_btn {

  display: none;

}



.accordion_btn .to_open,

.accordion_outside.open .accordion_btn .to_close {

  opacity: 1;

  font-size: inherit;

  transition: opacity .3s;

}



.accordion_outside.open .accordion_btn .to_open,

.accordion_btn .to_close {

  opacity: 0;

  font-size: 0;

}



.item_list__cicon {

  position: absolute;

  top: 0;

  left: 0;

}



.item_list__cicon .icon02 {

  display: grid;

  place-items: center;

  width: 4rem;

  height: 4rem;

  border-radius: 50%;

  background: var(--color_accent_01);

  font-size: 1.2rem;

  letter-spacing: .075em;

  color: #fff;

}

/*----------------Color Selection*/



/*Ranking------------------------*/

#Ranking {

  background: var(--color_bg_02);

}



#Ranking .item_list__inner {

  justify-content: flex-start;

  flex-wrap: nowrap;

  gap: 2rem;

}



#Ranking .swiper-wrapper {

  transition-timing-function: linear;

}



#Ranking .item_list__item {

  width: 24rem !important;

  padding: 2rem 3.5rem 3rem;

  background: #fff;

}



.item_list__item .icn_rank {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

  width: 4.2rem;

  height: 5rem;

  margin-left: 1rem;

  border-radius: 0 0 10rem 10rem;

  background: var(--color_lower);

  font-size: 2rem;

  color: #fff;

}



.item_rank1 .icn_rank {

  background: var(--color_1st);

}



.item_rank2 .icn_rank {

  background: var(--color_2nd);

}



.item_rank3 .icn_rank {

  background: var(--color_3rd);

}



#Ranking .item_list__item .item_list__cicon .icon02 {

  display: none;

}



/*------------------------Ranking*/



/*CHECK ALL ITEMS----------------*/

.btn_wrapup {

  width: 96rem;

  height: 6.6rem;

  margin: 8rem auto 0;

}



.btn_wrapup a {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  background: var(--color_accent_01);

}



.btn_wrapup a span {

  margin-top: .1rem;

  font-size: 2.4rem;

  letter-spacing: .075em;

  color: #fff;

}

/*----------------CHECK ALL ITEMS*/



/*menu---------------------------*/

.to_menu {

  position: fixed;

  z-index: 5;

  bottom: 0;

  right: 0;

  margin: 0 3rem 3rem 0;

  width: 8rem;

  height: 8rem;

}



.to_menu a {

  position: relative;

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: var(--color_accent_03);

  box-shadow: 4px 4px 4px rgba(0, 0, 0, .08);

}



.to_menu a::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mask-image: url(../img/icon_001.svg);

  mask-size: 100% auto;

  mask-position: center center;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/icon_001.svg);

  -webkit-mask-size: 100% auto;

  -webkit-mask-position: center center;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_accent_01);

  content: "";

}



.to_menu a img {

  opacity: 0;

}



.menu_wrap {

  width: 100rem;

  padding: 2.2rem 7rem 1.5rem;

  background: #fff;

}



.each_menu {

  padding: 4rem 0 3.6rem;

}



.each_menu:nth-of-type(n+2) {

  border-top: solid var(--color_accent_02);

  border-width: .1rem;

}



.each_menu .sec_ttl {

  margin-bottom: 0;

  font-size: 2.4rem;

}



.each_menu .sec_ttl a {

  position: relative;

  padding-bottom: 4.7rem;

}



.each_menu .thumbnail_list {

  gap: 5rem;

  margin-top: 3rem;

}



.each_menu .thumbnail_list li a {

  width: 8rem;

  padding-bottom: 2rem;

}



.each_menu .thumbnail_list li a::before {

  display: none;

}



.each_menu .thumbnail_list li a::after,

.each_menu .sec_ttl a::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 1.2rem;

  height: 1.2rem;

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

}



.each_menu .sec_ttl a::after {

  width: 2.4rem;

  height: 2.4rem;

  background: url(../img/arrow_003.svg) center center / cover no-repeat;

}



/*---------------------------menu*/



/*Smart phone---------------------------------------------*/

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

/*all----------------------------*/

.LP_page .only_pc {

  display: none;

}



#share {

  right: auto !important;

  left: 5%;

  z-index: 5 !important;

}



.share-txt {

  margin: 0 !important;

  padding-bottom: calc(40 * (100vw / 780));

  background: #fff;

}



.LP_page {

  padding-bottom: calc(120 * (100vw / 780));

}



.LP_page sup {

  font-size: calc(20 * (100vw / 780));

}



/*----------------------------all*/

/*first view---------------------*/

.firstview_area {

  padding-bottom: calc(100 * (100vw / 780));

}



.main_ttl_wrap {

  margin-bottom: calc(90 * (100vw / 780));

  padding: calc(374 * (100vw / 780)) 0;

}



.main_ttl_wrap::before,

.main_ttl_wrap::after {

  height: calc(324 * (100vw / 780));

}



@keyframes loop {

  0% {

      background-position: 0 0;

  }



  100% {

      background-position: calc(-1687.5 * (100vw / 780)) 0;

  }

}



.main_ttl {

  font-size: calc(64 * (100vw / 780));

}



.main_ttl .sub_ttl {

  margin-top: calc(31.5 * (100vw / 780));

  font-size: calc(28 * (100vw / 780));

}



.main_lead {

  margin-bottom: calc(95 * (100vw / 780));

}



.main_lead p {

  font-size: calc(24 * (100vw / 780));

}



.main_lead p:nth-of-type(n+2) {

  margin-top: calc(30.5 * (100vw / 780));

}



.navigation_list {

  flex-wrap: wrap;

  margin-left: 0;

  border-top: solid var(--color_accent_02);

  border-bottom: solid var(--color_accent_02);

  border-width: calc(2 * (100vw / 780));

}



.navigation_list li {

  width: 50%;

}



.navigation_list li:nth-of-type(n+2) {

  border: none;

}



.navigation_list li:nth-of-type(even) {

  border-left: solid var(--color_accent_02);

  border-width: calc(2 * (100vw / 780));

}



.navigation_list li:nth-last-of-type(1) {

  width: 100%;

  border-top: solid var(--color_accent_02);

  border-width: calc(2 * (100vw / 780));

}



.navigation_list li a {

  height: calc(90 * (100vw / 780));

  padding: 0;

}



.navigation_list li a span {

  padding-right: calc(40 * (100vw / 780));

  font-size: calc(32 * (100vw / 780));

}



.navigation_list li a span::before {

  width: calc(24 * (100vw / 780));

  height: calc(24 * (100vw / 780));

  margin: 0 calc(-5 * (100vw / 780)) 0 0;

}

/*---------------------first view*/



/*Series Selection---------------*/

.each_sec {

  padding: calc(120 * (100vw / 780)) 0;

}



#SeriesSelection {

  padding-bottom: calc(120 * (100vw / 780));

}



.sec_ttl {

  margin-bottom: calc(80 * (100vw / 780));

  font-size: calc(54 * (100vw / 780));

}



.thumbnail_list_wrap {

  padding-bottom: calc(15 * (100vw / 780));

}



.thumbnail_list {

  gap: calc(10 * (100vw / 780));

}



#SeriesSelection .thumbnail_list {

  overflow-x: scroll;

  justify-content: flex-start;

  padding: 0 calc(20 * (100vw / 780));

  -ms-overflow-style: none;

  scrollbar-width: none;

}



#SeriesSelection .thumbnail_list::-webkit-scrollbar {

  display:none;

}



.thumbnail_list li label {

  padding-bottom: calc(23 * (100vw / 780));

}



.thumbnail_list li .thumbnail_img {

  height: calc(150 * (100vw / 780));

  margin-bottom: calc(16 * (100vw / 780));

}



.thumbnail_list li .thumbnail_txt {

  min-height: unset;

  font-size: calc(22 * (100vw / 780));

}



.thumbnail_list li label::before {

  width: calc(140 * (100vw / 780));

  height: calc(4 * (100vw / 780));

}



.scrl-bar {

  width: calc(150 * (100vw / 780));

  height: calc(4 * (100vw / 780));

  margin-top: calc(30 * (100vw / 780));

  background: #D8D8D8;

}



.switching_area {

  padding-top: calc(50 * (100vw / 780));

}



.series_ttl {

  margin-bottom: calc(30 * (100vw / 780));

  font-size: calc(28 * (100vw / 780));

}



.series_ttl .txt_L {

  margin-bottom: calc(32 * (100vw / 780));

  font-size: calc(74 * (100vw / 780));

}



.series_price {

  margin-bottom: calc(60 * (100vw / 780));

  font-size: calc(28 * (100vw / 780));

}



#SeriesSelection .each_content > div {

  display: block;

}



.series_img_list {

  width: calc(710 * (100vw / 780));

  padding: 0 calc(60 * (100vw / 780));

}



#SeriesSelection .slider_area {

  height: calc(390 * (100vw / 780));

  margin: 0 auto;

}



.slick-arrow {

  width: calc(30 * (100vw / 780));

  height: calc(90 * (100vw / 780));

  margin-top: calc(25 * (100vw / 780));

}

.slick-prev {

  margin-left: calc(2 * (100vw / 780));

}



.slick-next {

  margin-right: calc(2 * (100vw / 780));

}



.slick-arrow::before {

  background: url(../img/arrow_002_sp.svg) center center / cover no-repeat;

}



.each_img {

  margin: 0 calc(20 * (100vw / 780));

}



.each_img a {

  align-items: flex-end;

  gap: calc(30 * (100vw / 780));

}



.makeup_img {

  width: calc(320 * (100vw / 780));

}



.series_img_list .itm_img {

  width: calc(240 * (100vw / 780));

}



.series_detail {

  display: block;

  width: calc(640 * (100vw / 780));

  margin: calc(46 * (100vw / 780)) auto 0;

}



.variation_name_list {

  margin-bottom: calc(65 * (100vw / 780));

}



.variation_name_list li {

  font-size: calc(28 * (100vw / 780));

}



.series_caption {

  margin-bottom: calc(34 * (100vw / 780));

  font-size: calc(30 * (100vw / 780));

}



.evaluation_list {

  width: calc(590 * (100vw / 780));

  border-width: calc(2 * (100vw / 780));

  margin-bottom: calc(43 * (100vw / 780));

  padding: calc(4 * (100vw / 780)) 0 calc(6 * (100vw / 780));

}



#Series04 .evaluation_list {

  padding: calc(4 * (100vw / 780)) calc(60 * (100vw / 780)) calc(6 * (100vw / 780));

}



.evaluation_list li {

  padding: 0 calc(20 * (100vw / 780));

  font-size: calc(24 * (100vw / 780));

}



.evaluation_list li:nth-of-type(n+2)::before {

  margin-left: calc(-2 * (100vw / 780));

  font-size: calc(24 * (100vw / 780));

}



.color_list {

  max-width: calc(480 * (100vw / 780));

  gap: calc(20 * (100vw / 780));

}



.color_list.SPcolumn3 {

  max-width: calc(280 * (100vw / 780));

}



.color_list.SPcolumn4 {

  max-width: calc(380 * (100vw / 780));

}



.color_list li {

  width: calc(80 * (100vw / 780));

}



.color_list li p {

  margin: 0 0 0 calc(2 * (100vw / 780));

  font-size: calc(24 * (100vw / 780));

}



.color_list li::after {

  width: calc(40 * (100vw / 780));

  height: calc(40 * (100vw / 780));

}



.to_colorMap {

  width: calc(180 * (100vw / 780));

  height: calc(180 * (100vw / 780));

  margin: 0 calc(20 * (100vw / 780)) calc(20 * (100vw / 780)) 0;

}



.to_colorMap a::before {

  width: calc(88 * (100vw / 780));

  height: calc(66 * (100vw / 780));

  margin-top: calc(25 * (100vw / 780));

}



.to_colorMap a span {

  padding-top: calc(50 * (100vw / 780));

  font-size: calc(22 * (100vw / 780));

}



.to_colorMap a span::before,

.to_colorMap a span::after {

  width: calc(2 * (100vw / 780));

  height: calc(16 * (100vw / 780));

  margin-top: calc(13 * (100vw / 780));

  border-radius: calc(100 * (100vw / 780));

}



.colorMap_wrap {

  width: calc(740 * (100vw / 780));

}



.colorMap_wrap .each_color a {

  padding: 0 calc(20 * (100vw / 780)) calc(10 * (100vw / 780));

}



.colorMap_wrap .each_color.bg_white_pc {

  background: transparent;

}



.colorMap_wrap .each_color.bg_white_sp {

  background: #fff;

}



#ColorMap08 .colorMap_wrap .each_color.color_01 {

  margin: calc(410 * (100vw / 780)) 0 0 calc(502 * (100vw / 780));

}



#ColorMap08 .colorMap_wrap .each_color.color_02 {

 margin: calc(300 * (100vw / 780)) 0 0 calc(350 * (100vw / 780));

}



#ColorMap08 .colorMap_wrap .each_color.color_03 {

  margin: calc(490 * (100vw / 780)) 0 0 calc(340 * (100vw / 780));

}



#ColorMap08 .colorMap_wrap .each_color.color_04 {

  margin: calc(685 * (100vw / 780)) 0 0 calc(325 * (100vw / 780));

}



#ColorMap08 .colorMap_wrap .each_color.color_05 {

  margin: calc(685 * (100vw / 780)) 0 0 calc(114 * (100vw / 780));

}



#ColorMap08 .colorMap_wrap .each_color.color_06 {

  margin: calc(370 * (100vw / 780)) 0 0 calc(185 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_01 {

  margin: calc(170 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_02 {

 margin: calc(650 * (100vw / 780)) 0 0 calc(452 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_03 {

  margin: calc(490 * (100vw / 780)) 0 0 calc(368 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_04 {

  margin: calc(360 * (100vw / 780)) 0 0 calc(132 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_05 {

  margin: calc(170 * (100vw / 780)) 0 0 calc(146 * (100vw / 780));

}



#ColorMap07 .colorMap_wrap .each_color.color_06 {

  margin: calc(650 * (100vw / 780)) 0 0 calc(45 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_01 {

  margin: calc(345 * (100vw / 780)) 0 0 calc(514 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_02 {

  margin: calc(602 * (100vw / 780)) 0 0 calc(125 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_03 {

  margin: calc(736 * (100vw / 780)) 0 0 calc(225 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_04 {

  margin: calc(920 * (100vw / 780)) 0 0 0;

}



#ColorMap06 .colorMap_wrap .each_color.color_05 {

  margin: calc(178 * (100vw / 780)) 0 0 calc(442 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_06 {

  margin: calc(430 * (100vw / 780)) 0 0 calc(73 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_07 {

  margin: calc(872 * (100vw / 780)) 0 0 calc(496 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_08 {

  margin: calc(1030 * (100vw / 780)) 0 0 calc(108 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_09 {

  margin: calc(304 * (100vw / 780)) 0 0 calc(372 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_10 {

  margin: calc(662 * (100vw / 780)) 0 0 calc(363 * (100vw / 780));

}



#ColorMap06 .colorMap_wrap .each_color.color_11 {

  margin: calc(872 * (100vw / 780)) 0 0 calc(155 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_01 {

  margin: calc(425 * (100vw / 780)) 0 0 calc(464 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_02 {

  margin: calc(340 * (100vw / 780)) 0 0 calc(260 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_03 {

  margin: calc(973 * (100vw / 780)) 0 0 calc(145 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_04 {

  margin: calc(672 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_05 {

  margin: calc(812 * (100vw / 780)) 0 0 calc(534 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_06 {

  margin: calc(150 * (100vw / 780)) 0 0 calc(430 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_07 {

  margin: calc(974 * (100vw / 780)) 0 0 calc(370 * (100vw / 780));

}



#ColorMap01 .colorMap_wrap .each_color.color_08 {

  margin: calc(770 * (100vw / 780)) 0 0 calc(40 * (100vw / 780));

}



#ColorMap02 .colorMap_wrap .each_color.color_01 {

  margin: calc(472 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



#ColorMap02 .colorMap_wrap .each_color.color_02 {

  margin: calc(340 * (100vw / 780)) 0 0 calc(340 * (100vw / 780));

}



#ColorMap02 .colorMap_wrap .each_color.color_03 {

  margin: calc(270 * (100vw / 780)) 0 0 calc(146 * (100vw / 780));

}



#ColorMap02 .colorMap_wrap .each_color.color_04 {

  margin: calc(612 * (100vw / 780)) 0 0 calc(140 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_01 {

  margin: calc(520 * (100vw / 780)) 0 0 calc(410 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_02 {

  margin: calc(190 * (100vw / 780)) 0 0 calc(376 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_03 {

  margin: calc(320 * (100vw / 780)) 0 0 calc(145 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_04 {

  margin: calc(875 * (100vw / 780)) 0 0 calc(165 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_05 {

  margin: calc(790 * (100vw / 780)) 0 0 calc(56 * (100vw / 780));

}



#ColorMap03 .colorMap_wrap .each_color.color_06 {

  margin: calc(670 * (100vw / 780)) 0 0 calc(182 * (100vw / 780));

}



#ColorMap04 .colorMap_wrap .each_color.color_01 {

  margin: calc(507 * (100vw / 780)) 0 0 calc(373 * (100vw / 780));

}



#ColorMap04 .colorMap_wrap .each_color.color_02 {

  margin: calc(170 * (100vw / 780)) 0 0 calc(357 * (100vw / 780));

}



#ColorMap04 .colorMap_wrap .each_color.color_03 {

  margin: calc(776 * (100vw / 780)) 0 0 calc(312 * (100vw / 780));

}



#ColorMap04 .colorMap_wrap .each_color.color_04 {

  margin: calc(360 * (100vw / 780)) 0 0 calc(477 * (100vw / 780));

}



#ColorMap05 .colorMap_wrap .each_color.color_01 {

  margin: calc(320 * (100vw / 780)) 0 0 calc(388 * (100vw / 780));

}



#ColorMap05 .colorMap_wrap .each_color.color_02 {

  margin: calc(190 * (100vw / 780)) 0 0 calc(190 * (100vw / 780));

}



#ColorMap05 .colorMap_wrap .each_color.color_03 {

  margin: calc(642 * (100vw / 780)) 0 0 calc(60 * (100vw / 780));

}



#ColorMap05 .colorMap_wrap .each_color.color_04 {

  margin: calc(834 * (100vw / 780)) 0 0 calc(124 * (100vw / 780));

}



#ColorMap05 .colorMap_wrap .each_color.color_05 {

  margin: calc(692 * (100vw / 780)) 0 0 calc(456 * (100vw / 780));

}



.colorMap_wrap .each_color .color_img {

  width: calc(80 * (100vw / 780));

  margin: 0 auto calc(10 * (100vw / 780));

}



.colorMap_wrap .each_color .color_name {

  font-size: calc(20 * (100vw / 780));

  line-height: 1.6;

}



#SeriesSelection .each_content .to_link {

  width: calc(520 * (100vw / 780));

  height: calc(84 * (100vw / 780));

  margin: calc(70 * (100vw / 780)) auto 0;

}



#SeriesSelection .each_content .to_link::before {

  height: calc(2 * (100vw / 780));

}



#SeriesSelection .each_content .to_link a {

  font-size: calc(32 * (100vw / 780));

  letter-spacing: .125em;

}



.texture_img_wrap {

  width: calc(640 * (100vw / 780));

  margin: calc(130 * (100vw / 780)) auto 0;

}



.texture_name_list li {

  font-size: calc(24 * (100vw / 780));

}



.texture_name_list li:nth-of-type(1) {

  margin: calc(214 * (100vw / 780)) 0 0 calc(480 * (100vw / 780));

}



.texture_name_list li:nth-of-type(2) {

  margin: calc(302 * (100vw / 780)) 0 0 calc(420 * (100vw / 780));

}



.texture_name_list li:nth-of-type(3) {

  margin: calc(392 * (100vw / 780)) 0 0 calc(356 * (100vw / 780));

}



.texture_name_list li:nth-of-type(4) {

  margin: calc(470 * (100vw / 780)) 0 0 calc(310 * (100vw / 780));

}



.texture_img_wrap .to_textureMap {

  width: calc(160 * (100vw / 780));

  height: calc(160 * (100vw / 780));

  margin: 0 calc(-40 * (100vw / 780)) calc(-40 * (100vw / 780)) 0;

}



.texture_img_wrap .to_textureMap a {

  font-size: calc(28 * (100vw / 780));

}



.modal_wrap {

  padding: calc(20 * (100vw / 780)) 0;

}



.modal_close {

  width: calc(50 * (100vw / 780));

  height: calc(50 * (100vw / 780));

  margin: calc(20 * (100vw / 780)) calc(25 * (100vw / 780)) 0 0;

}



.modal_close::before,

.modal_close::after {

  width: calc(2 * (100vw / 780));

  height: calc(60 * (100vw / 780));

}



.textureMap_wrap {

  width: calc(740 * (100vw / 780));

}



.textureMap_wrap .itm_wrap a {

  padding: calc(20 * (100vw / 780)) calc(5 * (100vw / 780)) calc(14 * (100vw / 780));

}



.textureMap_wrap .itm_wrap.itm_01 {

  margin: calc(455 * (100vw / 780)) 0 0 calc(302 * (100vw / 780));

}



.textureMap_wrap .itm_wrap.itm_02 {

  margin: calc(865 * (100vw / 780)) 0 0 calc(165 * (100vw / 780));

}



.textureMap_wrap .itm_wrap.itm_03 {

  margin: calc(705 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



.textureMap_wrap .itm_wrap.itm_04 {

  margin: calc(162 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



.textureMap_wrap .itm_wrap.itm_05 {

  margin: calc(455 * (100vw / 780)) 0 0 calc(460 * (100vw / 780));

}



.textureMap_wrap .itm_wrap .itm_img {

  width: calc(120 * (100vw / 780));

  margin: 0 auto calc(12 * (100vw / 780));

}



.textureMap_wrap .itm_wrap .itm_name {

  font-size: calc(20 * (100vw / 780));

  line-height: 1.7;

}



/*---------------Series Selection*/





/*Engraving Service--------------*/

#EngravingService {

  padding-bottom: calc(126 * (100vw / 780));

}



#EngravingService .sec_ttl_wrap {

  width: calc(640 * (100vw / 780));

  height: calc(740 * (100vw / 780));

  margin: 0 auto calc(50 * (100vw / 780));

  background: url(../img/bnr_001_sp.jpg) center center / cover no-repeat;

}



#EngravingService .sec_ttl_inner {

  width: 100%;

  padding-top: calc(40 * (100vw / 780));

}



#EngravingService .sec_ttl {

  margin-bottom: calc(458 * (100vw / 780));

  font-size: calc(46 * (100vw / 780));

}



#EngravingService .sec_ttl .txt_S {

  margin-top: calc(25 * (100vw / 780));

  font-size: calc(30 * (100vw / 780));

}



#EngravingService .sec_lead {

  font-size: calc(22 * (100vw / 780));

  line-height: 1.8;

}



#EngravingService .to_link {

  width: calc(500 * (100vw / 780));

  margin: 0 auto calc(28 * (100vw / 780));

}



#EngravingService .to_link a {

  border-width: calc(2 * (100vw / 780));

  padding-bottom: calc(15 * (100vw / 780));

  font-size: calc(34 * (100vw / 780));

  letter-spacing: .125em;

}



#EngravingService .to_link a::before {

  width: calc(2 * (100vw / 780));

  height: calc(24 * (100vw / 780));

  border-radius: 0 0 calc(2 * (100vw / 780)) calc(2 * (100vw / 780));

  margin: 0 calc(-1 * (100vw / 780)) calc(-1 * (100vw / 780)) 0;

}



#EngravingService .notes {

  font-size: calc(20 * (100vw / 780));

}

/*--------------Engraving Service*/



/*Color Selection----------------*/

#ColorSelection {

  padding-bottom: calc(125 * (100vw / 780));

}



#ColorSelection .thumbnail_list {

  gap: calc(20 * (100vw / 780));

}



#ColorSelection .thumbnail_list li .thumbnail_img {

  height: calc(120 * (100vw / 780));

}



#ColorSelection .thumbnail_list li label::before {

  width: calc(100% - calc(28 * (100vw / 780)));

}



.color_ttl {

  margin-bottom: calc(70 * (100vw / 780));

  font-size: calc(74 * (100vw / 780));

}



#ColorSelection .switching_area {

  padding-top: calc(85 * (100vw / 780));

}



#ColorSelection .item_list {

  max-width: unset;

}



.item_list__inner {

  gap: 0 calc(40 * (100vw / 780));

}



.item_list__item {

  width: calc(320 * (100vw / 780));

}



#ColorSelection .item_list__item:nth-of-type(n+3) {

  padding-top: calc(80 * (100vw / 780));

}



.item_list__img {

  margin-bottom: calc(28 * (100vw / 780));

}



.item_list__title {

  margin-bottom: calc(34 * (100vw / 780));

}



.item_list__title a {

  font-size: calc(24 * (100vw / 780));

}



.item_list__price {

  margin-bottom: calc(42 * (100vw / 780));

  font-size: calc(24 * (100vw / 780));

}



.item_list__item .to_link {

  width: calc(200 * (100vw / 780));

  height: calc(50 * (100vw / 780));

}



.item_list__item .to_link a {

  font-size: calc(24 * (100vw / 780));

  letter-spacing: .125em;

}



#ColorSelection .item_list__item:nth-of-type(n+3) .soldout {

  margin-top: calc(80 * (100vw / 780));

}



.accordion_outside.accordion_unset .accordion_wrap {

  display: block;

}



.accordion_inner {

  min-height: calc(320 * (100vw / 780));

}



.accordion_btn {

  margin: calc(80 * (100vw / 780)) auto 0;

  font-size: calc(28 * (100vw / 780));

}



.item_list__cicon .icon02 {

  width: calc(76 * (100vw / 780));

  height: calc(76 * (100vw / 780));

  font-size: calc(20 * (100vw / 780));

}

/*----------------Color Selection*/



/*Ranking------------------------*/

#Ranking .item_list__inner {

  gap: calc(30 * (100vw / 780));

}



#Ranking .item_list__item {

  width: calc(400 * (100vw / 780)) !important;

  padding: calc(40 * (100vw / 780)) calc(40 * (100vw / 780)) calc(60 * (100vw / 780));

}



#Ranking .item_list__img {

  margin-bottom: calc(8 * (100vw / 780));

}



#Ranking .item_list__title {

  margin-bottom: calc(30 * (100vw / 780));

}



#Ranking .item_list__price {

  margin-bottom: calc(46 * (100vw / 780));

}



.item_list__item .icn_rank {

  width: calc(66 * (100vw / 780));

  height: calc(76 * (100vw / 780));

  margin-left: calc(20 * (100vw / 780));

  border-radius: 0 0 calc(100 * (100vw / 780)) calc(100 * (100vw / 780));

  font-size: calc(34 * (100vw / 780));

}



.item_list__item .icn_rank span {

  margin-top: calc(-8 * (100vw / 780));

}



/*------------------------Ranking*/



/*CHECK ALL ITEMS----------------*/

.btn_wrapup {

  width: calc(660 * (100vw / 780));

  height: calc(110 * (100vw / 780));

  margin: calc(120 * (100vw / 780)) auto 0;

}



.btn_wrapup a span {

  margin-top: calc(-5 * (100vw / 780));

  font-size: calc(40 * (100vw / 780));

  letter-spacing: .125em;

}

/*----------------CHECK ALL ITEMS*/



/*menu---------------------------*/

.to_menu {

  margin: 0 calc(30 * (100vw / 780)) calc(30 * (100vw / 780)) 0;

  width: calc(120 * (100vw / 780));

  height: calc(120 * (100vw / 780));

}



.menu_wrap {

  width: calc(740 * (100vw / 780));

  padding: calc(32 * (100vw / 780)) calc(30 * (100vw / 780)) calc(30 * (100vw / 780));

}



.each_menu {

  padding: calc(50 * (100vw / 780)) 0 calc(40 * (100vw / 780));

}



.each_menu:nth-of-type(n+2) {

  border-width: calc(2 * (100vw / 780));

}



.each_menu .sec_ttl {

  font-size: calc(40 * (100vw / 780));

}



.each_menu .sec_ttl a {

  padding-bottom: calc(60 * (100vw / 780));

}



.each_menu .thumbnail_list {

  flex-wrap: wrap;

  justify-content: center;

  gap: calc(30 * (100vw / 780)) calc(60 * (100vw / 780));

  margin-top: calc(38 * (100vw / 780));

  padding: 0;

}



.menu_ColorSelection .thumbnail_list {

  gap: calc(30 * (100vw / 780));

}



.each_menu .thumbnail_list li a {

  width: calc(130 * (100vw / 780));

  padding-bottom: calc(35 * (100vw / 780));

}



.each_menu .thumbnail_list li a::after,

.each_menu .sec_ttl a::after {

  width: calc(24 * (100vw / 780));

  height: calc(24 * (100vw / 780));

}



.each_menu .sec_ttl a::after {

  width: calc(46 * (100vw / 780));

  height: calc(46 * (100vw / 780));

}



.each_menu .thumbnail_list li .thumbnail_img {

  margin-bottom: calc(12 * (100vw / 780));

}



.each_menu .thumbnail_list li .thumbnail_txt {

  font-size: calc(20 * (100vw / 780));

}



/*---------------------------menu*/



}



/*---------------------------------------------Smart phone*/



/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .only_sp {

    display: none;

  }



  .color_list.PCcolumn5 {

    max-width: 24rem;

  }

  

  .color_list.PCcolumn6 {

    max-width: 29rem;

  }

  

  .color_list.PCcolumn7 {

    max-width: 34rem;

  }

}

/*------------------------------------------------------PC*/



/*レスポンシブ＆タブレット対応-------------------------------*/

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

  html {

    font-size: calc(10 * (100vw / 1400));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/