@charset "utf-8";
/*---------------------
    common
---------------------*/
#container{
    overflow: hidden;
}

#container .wrapper {
    color: #40403e;
    font: 3.8vw/6vw "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-feature-settings: "palt";
    letter-spacing: .1em;
    padding-bottom: 20px;
    text-align: justify;
}

#container .wrapper * {
    box-sizing: border-box;
}

#container .wrapper p{
    margin: 0;
}

#container .wrapper img{
	display: block;
	margin: 0 auto;
	width: 100%;
}

#container .wrapper a:hover{
    opacity: 1;
}

#container .pc-only{
	display: none;
}

#container h2 {
    font-size: 5.5vw;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left;
}

#container .sp-only{
	display: block;
}
#container .pc-only{
	display: none;
}

@media screen and (min-width:768px){
#container .sp-only{
	display: none;
}
#container .pc-only{
	display: block;
}

#container .wrapper {
	font-size: 1.5vw;
	line-height: 3vw;
}

#container h2 {
    font-size: 2vw;
}
}

/*-- スクロール制御 --*/
html{
	scroll-padding-top: var(--gloNavi-h);
}
#container section[id]{
	scroll-margin-top: var(--gloNavi-h);
}
#container #gloNavi_spacer{
	height: 0;
	display: block;
}

/*---------------------
    mainvisual
---------------------*/
#container .mainvisual {
  background-color: #f4f2f3;
  overflow: hidden;
  position: relative;
  padding-top: 92vw;
  padding-bottom: 15vw;
}

/*-- 画像スライダー --*/
#container .mainvisual-slider {
  height: 95vw;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

#container .mainvisual-track {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.55s ease;
}

#container .mainvisual-track.no-transition {
  transition: none;
}

#container .mainvisual-slide {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  flex: 0 0 100%;
  height: 100%;
}

#container .mv-slide01 {
  background-image: url("https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/clinic-recomenditem/fv_1.jpg");
}

#container .mv-slide02 {
  background-image: url("https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/clinic-recomenditem/fv_2.jpg");
}

#container .mv-slide03 {
  background-image: url("https://7beauty.jp/contents/shop/sevenbeauty/img/freepage/clinic-recomenditem/fv_3.jpg");
}

/*-- テキストエリア --*/
#container .mainvisual-inner {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  width: 100%;
  padding: 0 8vw;
}

#container .mv-title {
  color: #4d4a48;
  font-size: 5vw;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: -0.01px;
  margin: 0;
}

#container .mv-sub {
  font-size: 4vw;
  font-weight: 500;
  line-height: 1.8;
  padding: 5vw 0 6vw;
}

#container .item-btn a {
  box-sizing: border-box;
  background-color: #a08965;
  color: #fff;
  display: inline-block;
  font-size: 3.5vw;
  line-height: 1;
  padding: 4vw 5vw;
  text-align: center;
  text-decoration: none;
}

/*-- 左右矢印ボタン --*/
#container .mv-arrow {
  position: absolute;
  top: 38vw;
  z-index: 5;
  width: 9vw;
  height: 14vw;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.18);
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#container .mv-arrow-prev {
  left: 0;
}

#container .mv-arrow-next {
  right: 0;
}

#container .mv-arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3vw;
  height: 3vw;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

#container .mv-arrow-prev span {
  transform: translate(-35%, -50%) rotate(-135deg);
}

#container .mv-arrow-next span {
  transform: translate(-65%, -50%) rotate(45deg);
}

/*-- nav --*/
#container .gloNavi {
  margin: 10vw 0;
  overflow: hidden;
  padding-bottom: 4vw;
}

#container .gloNavi h2 {
  color: #a08965;
  margin-bottom: 8vw;
  text-align: center;
}

/*-- 横スクロールエリア --*/
#container .gloNavi nav {
  box-sizing: border-box;
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5vw;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#container .gloNavi nav:active {
  cursor: grabbing;
}

#container .gloNavi nav::-webkit-scrollbar {
  display: none;
}

#container .mv-nav {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0 8vw;
  width: max-content;
}

#container .mv-nav li {
  flex: 0 0 50vw;
  width: 50vw;
  min-width: 50vw;
  box-sizing: border-box;
}

#container .mv-nav li + li {
  margin-left: 6vw;
}

#container .mv-nav a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

#container .mv-nav img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

#container .mv-nav p {
  box-sizing: border-box;
  width: 100%;
  margin: 5vw 0 0;
  font-size: 4vw;
  line-height: 1.5;
}

#container .custom-scrollbar {
  background-color: #e6dcd1;
  border-radius: 10px;
  height: 5px;
  margin: 4vw 0 10vw;
  position: relative;
}

#container .gloNavi .custom-scrollbar {
  margin: 4vw 8vw 0;
  width: calc(100% - 16vw);
}

#container .custom-scrollbar-thumb {
  background-color: #a08965;
  border-radius: 10px;
  cursor: pointer;
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  touch-action: none;
}

@media screen and (min-width:768px){
#container .mainvisual {
  height: 40vw;
  padding: 0;
  z-index: 4;
}

#container .mainvisual-slider {
  height: 40vw;
  left: auto;
  right: 0;
  width: 45vw;
}

#container .mainvisual-slide {
  background-position: right top;
  background-size: auto 100%;
  min-width: 100%;
  width: 100%;
}

#container .mainvisual-inner {
  margin: 0 3vw;
  padding-top: 6vw;
}

#container .mv-title {
  font-size: 2vw;
  letter-spacing: .1vw;
  line-height: 1.9;
}

#container .mv-sub {
  font-size: 1.2vw;
  letter-spacing: .1vw;
  line-height: 1.9;
  padding: 2vw 0;
}

#container .item-btn a {
  font-size: 1.1vw;
  letter-spacing: .1vw;
  padding: 1vw 1.5vw;
}

#container .mv-arrow {
  height: 3.5vw;
  top: 50%;
  width: 2.5vw;
}

#container .mv-arrow span {
  width: 1.2vw;
  height: 1.2vw;
}

#container .mv-arrow-next {
  right: 0;
}

#container .mv-arrow-prev {
  left: 54.8%;
}

/*-- nav --*/
#container .gloNavi {
  margin: 5vw auto;
  padding-bottom: 0;
  text-align: center;
  width: 60%;
}

#container .gloNavi h2 {
  margin-bottom: 3vw;
}

#container .gloNavi nav {
    padding-bottom: 0;
}

#container .mv-nav {
  display: grid;
  gap: 3vw;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  width: 100%;
}

#container .mv-nav li {
  min-width: 0;
  text-align: center;
  width: auto;
}

#container .mv-nav li + li {
  margin-left: 0;
}

#container .mv-nav p {
  font-size: 1.1vw;
  font-weight: 500;
  letter-spacing: .2vw;
  margin: 1vw 0 0;

}

#container .custom-scrollbar {
  display: none !important;
}

}

/*---------------------
    sec1
---------------------*/
#container .worries .worriesInner{
  background-color:#e9e9e9 ;
  padding: 12vw 8vw 10vw;
}

#container .worries h2{
  text-align: center;
}

#container .worries ul {
  margin-top: 5vw;
}

#container .worries li {
  box-sizing: border-box;
  background-color: #fff;
  border: 3px solid #e6dcd1;
  font-size: 3.4vw;
  font-weight: 400;
  letter-spacing: -0.05px;
  margin-bottom: 3vw;
  position: relative;
  padding: 2.5vw 4vw 2.5vw 7vw;
  text-align: left;
  width: 100%;
}

#container .worries li::before {
  content: "・";
  color: #a08965;
  font-size: 7vw;
  left: 3vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#container .worries-en {
  font-size: 4.5vw;
  font-weight: 700;
  line-height: 2;
  letter-spacing: -0.05px;
  margin: 13vw 0 0;
  padding-top: 10vw;
  position: relative;
  padding: 10vw 8vw;
  text-align: center;
}

#container .worries-en::before {
  content: "・\A・\A・";
  color: #a08965;
  font-size: 5.5vw;
  line-height: 1;
  left: 50%;
  position: absolute;
  top: -17%;
  transform: translateX(-50%);
  white-space: pre;
}

#container .worries-en span {
  color: #a08965;
  display: block;
  font-weight: 700;
  font-size: 5.5vw;
  letter-spacing: 0.05em;
}

@media screen and (min-width:768px){
#container .worries .worriesInner{
  margin: 0 auto;
  padding: 5vw 0;
}

#container .worries ul{
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  justify-content: center;
  margin-top: 2vw;
  padding: 0;
}

#container .worries li{
  border: .3vw solid #e6dcd1;
  font-size: 1.3vw;
  line-height: 1.3;
  letter-spacing: .1vw;
  margin-bottom: 0;
  padding: 1vw 5vw;
  width: 42vw;
}

#container .worries li::before{
  font-size: 3.2vw;
  left: 3vw;
}

#container .worries-en{
  font-size: 2vw;
  margin: 6vw 0 0;
  padding: 4vw;
}

#container .worries-en::before {
  font-size: 2vw;
  top: -3vw;
}

#container .worries-en span{
  display: inline;
  font-size: 2.4vw;
}
}

/*---------------------
    sec2~ common
---------------------*/
#container .box{
  padding: 12vw 8vw 10vw;
}

#container .box.chairbed,
#container .box.accessory,
#container .box.more{
  background-color: #f4f2f3;
}

/*---- グリット画像部分 ----*/
#container .sceneBox {
  display: block;
  margin-top: 6vw;
}

#container .sceneBox,
#container .scene-main,
#container .scene-sub {
  position: relative;
  overflow: visible;
}

#container .scene-main {
  margin-bottom: 4vw;
}

#container .scene-main > img {
  display: block;
  width: 100%;
  height: auto;
}

#container .scene-sub {
 display: grid;
     grid-template-columns: 0.86fr 1fr;
    gap: 4vw;
  align-items: start;
}

#container .scene-sub > img {
  display: block;
  width: 100%;
}

#container .scene-sub > img:nth-of-type(4) {
  transform: translateY(-8vw);
}

/*---- グリット内ボタン ----*/
#container .hotspot {
  position: absolute;
  z-index: 30;
}

#container .hotspot::before {
  content: "";
  position: absolute;
  left: -2vw;
  top: -2vw;
  width: 11vw;
  height: 11vw;
  pointer-events: auto;
}

#container .hotspot-btn {
  position: relative;
  width: 7vw;
  height: 7vw;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(64, 64, 62, 0.45);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 2;
}

#container .hotspot-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.2vw;
  height: 3.2vw;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}

#container .hotspot.is-active .hotspot-btn::after {
  width: 1.4vw;
  height: 1.4vw;
}

/*-- 商品カード --*/
#container .hotspot-card {
   position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
}

#container .hotspot.is-active .hotspot-card {
  opacity: 1;
  visibility: visible ;
  pointer-events: auto ;
}

#container .hotspot-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

#container .hotspot-info {
  position: relative;
  width: 46vw;
  padding: 3vw 8vw 3vw 3vw;
  box-sizing: border-box;
  background: #fff;
  background-color: #fff;
  border: 1px solid #dddddd;
}

#container .hotspot-info::before {
  content: "";
  position: absolute;
  right: 7vw;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: #dfdfdf;
  z-index: 10;
  display: block;
  pointer-events: none;
}

#container .hotspot-text-link {
  display: block;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}

#container .hotspot-info p{
   margin: 0 0 1.4vw;
  font-size: 2.7vw;
  line-height: 1.65;
  text-align: left;
}

#container .hotspot-arrow-link {
  position: absolute;
  right: 0;
  top: 0;
  width: 7vw;
  height: 100%;
  box-sizing: border-box;
  z-index: 4;
  text-decoration: none;
}

/* 矢印の共通デザイン */
#container .hotspot-arrow-link::after,
#container .hotspot-card > a::after{
  content: "";
  position: absolute;
  width: 2.2vw;
  height: 2.2vw;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

#container .hotspot-arrow-link::after {
  left: 50%;
  top: 50%;
  transform: translate(-60%, -50%) rotate(45deg);
}

#container .hotspot-card > a::after {
  right: 3vw;
  top: 50%;
}

#container .hotspot-card p:last-child {
  margin-bottom: 0;
}

#container .hotspot-name {
  color: #a08965;
  font-weight: 700;
}

#container .hotspot-name em {
font-weight: 700;
}

#container .hotspot-movie-btn {
  padding-top:2vw;
}

#container .hotspot-movie-btn figure {
  display: inline-block;
  margin: 0;
  cursor: pointer;
}

#container .hotspot-movie-btn img {
  display: block;
  width: 7vw;
  height: 7vw;
  margin: 0;
}

/* ボタン位置 */
#container .hotspot.hotspot-01 {
  left: 45%;
  top: 35%;
}

#container .hotspot.hotspot-02 {
  left: 70%;
  top: 10%;
}

#container .hotspot.hotspot-03 {
  left: 44%;
  top: 55%;
}

#container .hotspot.hotspot-04 {
  left: 18%;
  top: 1%;
}

#container .hotspot.hotspot-05 {
  left: 3%;
  top: 40%;
}

#container .hotspot.hotspot-06 {
  left: 70%;
  top: 10%;
}

#container .hotspot.hotspot-07 {
  left: 25%;
  top: 55%;
}

#container .hotspot.hotspot-08 {
  left: 15%;
  top: 30%;
}

#container .hotspot.hotspot-09 {
  left: 13%;
  top: 60%;
}

#container .hotspot.hotspot-10 {
  left: 70%;
  top: 7%;
}

#container .hotspot.hotspot-11 {
  left: 52%;
  top: 76%;
}

#container .hotspot.hotspot-12 {
  left: 75%;
  top: 45%;
}

#container .hotspot.hotspot-13 {
  left: 15%;
  top: 20%;
}

#container .hotspot.hotspot-14 {
  left: 57%;
  top: 25%;
}

/* カード位置 */
#container .hotspot .hotspot-card,
#container .hotspot.is-active .hotspot-card {
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
}

/* hotspot-01 */
#container .hotspot.hotspot-01 .hotspot-card,
#container .hotspot.hotspot-01.is-active .hotspot-card {
  left: -18vw;
  top: 20vw;
}

/* hotspot-02 */
#container .hotspot.hotspot-02 .hotspot-card,
#container .hotspot.hotspot-02.is-active .hotspot-card {
  left: 4vw;
  top: 10vw;
}

/* hotspot-03 */
#container .hotspot.hotspot-03 .hotspot-card,
#container .hotspot.hotspot-03.is-active .hotspot-card {
  left: 19vw;
  top: 14vw;
}

/* hotspot-04 */
#container .hotspot.hotspot-04 .hotspot-card,
#container .hotspot.hotspot-04.is-active .hotspot-card {
  left: 10vw;
  top: 9vw;
}

/* hotspot-05 */
#container .hotspot.hotspot-05 .hotspot-card,
#container .hotspot.hotspot-05.is-active .hotspot-card {
  left: 15vw;
  top: 10vw;
}

/* hotspot-06 */
#container .hotspot.hotspot-06 .hotspot-card,
#container .hotspot.hotspot-06.is-active .hotspot-card {
  left: 3vw;
  top: 10vw;
}

/* hotspot-07 */
#container .hotspot.hotspot-07 .hotspot-card,
#container .hotspot.hotspot-07.is-active .hotspot-card {
  left: 5vw;
  top: 10vw;
}

/* hotspot-08 */
#container .hotspot.hotspot-08 .hotspot-card,
#container .hotspot.hotspot-08.is-active .hotspot-card {
  left: 7vw;
  top: -25vw;
}

/* hotspot-09 */
#container .hotspot.hotspot-09 .hotspot-card,
#container .hotspot.hotspot-09.is-active .hotspot-card {
  left: 14vw;
  top: 9vw;
}

/* hotspot-10 */
#container .hotspot.hotspot-10 .hotspot-card,
#container .hotspot.hotspot-10.is-active .hotspot-card {
  left: 3vw;
  top: 10vw;
}

/* hotspot-11 */
#container .hotspot.hotspot-11 .hotspot-card,
#container .hotspot.hotspot-11.is-active .hotspot-card {
  left: 19vw;
  top: -22vw;
}

/* hotspot-12 */
#container .hotspot.hotspot-12 .hotspot-card,
#container .hotspot.hotspot-12.is-active .hotspot-card {
  left: -7vw;
  top: 10vw;
}

/* hotspot-13 */
#container .hotspot.hotspot-13 .hotspot-card,
#container .hotspot.hotspot-13.is-active .hotspot-card {
  left: 7vw;
  top: 10vw;
}

/* hotspot-14 */
#container .hotspot.hotspot-14 .hotspot-card,
#container .hotspot.hotspot-14.is-active .hotspot-card {
  left: 14vw;
  top: 10vw;
}

#container .ItemBox h3 {
  font-size: 4.4vw;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 5vw;
}

#container .voice {
  font-size: 3.5vw;
  line-height: 1.7;
  margin-bottom: 3vw;
}

#container .voice p {
  margin-top: 2vw;
}

#container .voice-title {
  color: #a08965;
  font-size: 4vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

#container .voice-title em {
  font-size: 3vw;
}

/*-- -- 動画を見るボタン ----*/
#container .movie-btn {
  text-align: right;
}

#container .movie-btn figure {
  align-items: center;
  box-sizing: border-box;
  background-color: #a08965;
  color: #fff;
  display: inline-flex;
  font-size: 3.5vw;
  height: 8vw;
  justify-content: center;
  line-height: 1;
  min-width: 30vw;
  position: relative;
  padding: 0 4vw 0 11vw;
  text-align: center;
  text-decoration: none;
}

#container .movie-btn figure::before {
  border-radius: 50%;
  background-color: #fff;
  content: "";
  height: 4vw;
  left: 4.5vw;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  width: 4vw;

}

#container .movie-btn figure::after {
  border-top: 1.2vw solid transparent;
  border-bottom: 1.2vw solid transparent;
  border-left: 1.6vw solid #a08965;
  content: "";
  left: 6vw;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
}

/*---- 商品情報カード ----*/
#container .item-cord {
  box-sizing: border-box;
  cursor: grab;
  display: flex;
  flex-wrap: nowrap;
  gap: 7vw;
  list-style: none;
  margin: 0 -8vw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8vw 8vw 5vw;
  scrollbar-width: none;
  width: calc(100% + 16vw);
  -webkit-overflow-scrolling: touch;
}

#container .item-cord:active {
  cursor: grabbing;
}

#container .item-cord::-webkit-scrollbar {
  display: none;
}

#container .item-cord li {
  border-radius: 0 0 5vw 0;
  box-shadow: 1.2vw 1.4vw 3vw rgba(0, 0, 0, 0.1);
  background-color: rgba(160, 160, 160, 0.05);
  flex: 0 0 auto;
  height: 100%;
  height: 35vw;
  overflow: hidden;
}

#container .item-cord a {
  align-items: stretch;
  background-color:rgba(160, 160, 160, 0.05);
  color: inherit;
  display: flex;
  gap: 0.8vw;
  text-decoration: none;
  height: 100%;
}

#container .itemPht {
  box-sizing: border-box;
  background-color: #fff;
  flex-shrink: 0;
  height: 35vw;
  width: 35vw;
}

#container .itemPht img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

#container .itemInfo {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0 0 5vw 0;
  display: flex;
  flex-direction: column;
  height: 35vw;
  letter-spacing: -0.05px;
  padding: 4vw 3vw 4vw 2vw;
  width: 25vw;
}

#container .itemName {
  font-size: 2.7vw;
  flex: 1 1 auto;
  line-height: 1.65;
  margin: 0;
  overflow: hidden;
}

#container .itemPrice {
  flex: 0 0 auto;
  line-height: 1;
  margin: 2vw 0 0;
}

#container .itemPrice span {
  font-size: 3.8vw;
  font-weight: 700;
}

#container .itemPrice em {
  font-style: normal;
  font-size: 3vw;
  margin-right: 0.3vw;
}

@media screen and (min-width:768px){
#container .box {
  padding: 5vw 8vw 2vw;
}

#container .sceneBox{
  align-items: stretch;
  display: grid;
  grid-template-columns: 0.845fr 1.2fr;
  gap: 1.8vw;
  margin: 3vw 0 -1.5vw;
}

#container .scene-main img{
  height: auto;
  width: 100%;
}

#container .scene-sub{
  display: grid;
  gap: 1.8vw;
}

#container .scene-sub img{
  height: auto;
  width: 100%;
}

#container .scene-sub > img:nth-of-type(4) {
    transform: translateY(-4.8vw);
}

#container .hotspot-btn{
    height: 2vw;
    width: 2vw;
}

#container .hotspot-btn::after {
  height: 1vw;
  width: 1vw;
}

#container .hotspot.is-active .hotspot-btn::after {
  height: .6vw;
  width: .6vw;
}

#container .hotspot-info {
  padding: 1vw 2vw 1vw 1vw;
  width: 13vw;
}

#container .hotspot-info::before {
  right: 1.5vw;
}

#container .hotspot-info p {
  font-size: 0.7vw;
  line-height: 1.5;
  margin-bottom: 0.5vw;
}

#container .hotspot-movie-btn {
  height: 2vw;
  padding-top: 0.3vw;
  width: 2vw;
}

#container .hotspot-arrow-link::after,
#container .hotspot-card > a::after{
  height: .7vw;
  width: .7vw;
}

#container .hotspot-arrow-link::after{
  left: 87%;
}

#container .hotspot-card > a::after{
  left: 89%;
}

#container .ItemBox{
  column-gap: 9vw;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: .8vw;
}

#container .ItemBox h3{
  font-size: 1.6vw;
  margin-bottom: 0;
}

#container .voice{
  font-size: .9vw;
  grid-column: 1;
  line-height: 1.8;
  margin: 0;
}

#container .voice-title{
  font-size: 1.3vw;
}

#container .voice-title em{
  font-size: 1vw;
}

#container .voice p{
  margin-top: 0.8vw;
}

#container .movie-btn{
  align-self: end;
  grid-column: 2;
  justify-self: end;
}

#container .movie-btn figure {
    font-size: 1vw;
    height: 2.5vw;
    min-width: 10vw;
    padding: 0 2vw 0 4vw;
}

#container .movie-btn figure::before {
    height: 1.3vw;
    left: 2vw;
    width: 1.3vw;
}

#container .movie-btn figure::after {
    border-top: .4vw solid transparent;
    border-bottom: .4vw solid transparent;
    border-left: .6vw solid #a08965;
    left: 2.5vw;
}

/*--商品カード--*/
#container .item-cord{
  margin: 2vw 0 0;
  gap: 2vw;
  padding: 0 0 4vw;
}

#container .item-cord li {
  height: auto;
  box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, 0.05);
}

#container .item-cord a {
    gap: 0.3vw;
}

#container .itemPht{
  width: 12vw;
  height: 12vw;
}

#container .itemInfo {
    height: 12vw;
    padding: 1.2vw .8vw .5vw .6vw;
    width: 7vw;
}

#container .itemName {
    font-size: .7vw;
    flex: 0.3 1 auto;
    line-height: 1.7;
}

#container .itemPrice span {
    font-size: 1.2vw;
}

#container .itemPrice em {
    font-size: 1vw;
}

/*--hotspot-card位置--*/
#container .hotspot.hotspot-01 .hotspot-card, #container .hotspot.hotspot-01.is-active .hotspot-card {
  left: 11vw;
  top: -12.5vw;
}

#container .hotspot.hotspot-02 .hotspot-card, #container .hotspot.hotspot-02.is-active .hotspot-card {
  left: -3vw;
  top: 6vw;
}

#container .hotspot.hotspot-03 {
    left: 45%;
    top: 55%;
}

#container .hotspot.hotspot-03 .hotspot-card, #container .hotspot.hotspot-03.is-active .hotspot-card {
    left: 10vw;
    top: 8vw;
}

#container .hotspot.hotspot-04 {
    left: 20%;
    top: 4%;
}

#container .hotspot.hotspot-04 .hotspot-card, #container .hotspot.hotspot-04.is-active .hotspot-card {
    left: 2vw;
    top: 5vw;
}

#container .hotspot.hotspot-05 {
    left: 7%;
    top: 38%;
}

#container .hotspot.hotspot-05 .hotspot-card, #container .hotspot.hotspot-05.is-active .hotspot-card {
    left: 10vw;
    top: 0;
}

#container .hotspot.hotspot-06 {
    top: 7%;
}

#container .hotspot.hotspot-06 .hotspot-card, #container .hotspot.hotspot-06.is-active .hotspot-card {
    left: 5vw;
    top: 3vw;
}

#container .hotspot.hotspot-07 .hotspot-card, #container .hotspot.hotspot-07.is-active .hotspot-card {
    top: 4vw;
}

#container .hotspot.hotspot-08 .hotspot-card, #container .hotspot.hotspot-08.is-active .hotspot-card {
    left: 6vw;
    top: 4vw;
}

#container .hotspot.hotspot-09 {
    left: 8%;
    top: 71%;
}

#container .hotspot.hotspot-09 .hotspot-card, #container .hotspot.hotspot-09.is-active .hotspot-card {
    left: 10vw;
    top: 1vw;
}

#container .hotspot.hotspot-10 .hotspot-card, #container .hotspot.hotspot-10.is-active .hotspot-card {
    left: -3vw;
    top: 4vw;
}

#container .hotspot.hotspot-11 {
    left: 63%;
    top: 71%;
}

#container .hotspot.hotspot-11 .hotspot-card, #container .hotspot.hotspot-11.is-active .hotspot-card {
    left: 9vw;
    top: -6vw;
}

#container .hotspot.hotspot-12 {
    left: 78%;
}

#container .hotspot.hotspot-12 .hotspot-card, #container .hotspot.hotspot-12.is-active .hotspot-card {
    left: 0;
    top: 4vw;
}

#container .hotspot.hotspot-13 {
    left: 17%;
    top: 20%;
}

#container .hotspot.hotspot-13 .hotspot-card, #container .hotspot.hotspot-13.is-active .hotspot-card {
    left: 3vw;
    top: 5vw;
}

#container .hotspot.hotspot-14 {
    left: 59%;
}

#container .hotspot.hotspot-14 .hotspot-card, #container .hotspot.hotspot-14.is-active .hotspot-card {
    left: 11vw;
    top: 0;
}
}

/*---------------------
    sec3
---------------------*/
@media screen and (min-width:768px){
#container .box.stoolwagon  {
  padding: 5vw 8vw 4vw;
}

#container .box.stoolwagon .item-cord {
  padding: 0 0 2vw;
}
}

/*---------------------
    sec4.5.6 common
---------------------*/
#container .box.accessory h3,
#container .box.cosme h3{
  margin-bottom: 2vw;
}

@media screen and (min-width:768px){
#container .box.accessory h3, 
#container .box.cosme h3 {
    margin-bottom: 0;
}

#container .ItemBox.nogrid{
  display: block;
}

#container .ItemBox.nogrid .voice p {
  width: 75%;
}
}

/*---------------------
    sec4
---------------------*/
#container .voice .subject {
  font-size: 3.2vw;
  margin-top: 4vw;
}

#container .voice.nomargin {
  margin-bottom: 0;
}

@media screen and (min-width:768px){
#container .voice .subject {
  font-size:.8vw;
  margin-top: 1.5vw;
}
}

/*---------------------
    sec5
---------------------*/
#container .voice-plus{
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #a08965;
  font-size: 3.5vw;
  letter-spacing: -0.05px;
  margin-top: 5vw;
  padding: 5vw;
  width: 100%;
}

#container .voice-plus span{
  font-weight: 700;
  line-height: 2.3;
}

@media screen and (min-width:768px){
#container .voice-plus {
  font-size: .9vw;
  line-height: 1.8;
  margin: 2vw 0 3vw;
  padding: 1.5vw;
}

#container .voice-plus span {
  font-size: 1.2vw;
}
}
/*---------------------
    sec6
---------------------*/
#container .box.more h3{
  color: #a08965;
  font-size: 4.2vw;
  margin-bottom: 2vw;
  text-align: center;
}

#container .more {
  background-color: #f4f2f3;
  padding: 12vw 0;
  overflow: hidden;
}

#container .more .ItemBox {
  padding: 0 8vw;
  box-sizing: border-box;
  margin-bottom: 3vw;
}

#container .more .ItemBox a {
  display: block;
}

#container .more .ItemBox img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width:768px){
#container .more {
  padding: 5vw 0;
}

#container .box.more h3 {
  font-size: 2vw;
  margin-bottom: 1vw;
}

#container .more .ItemBox img {
  width: 50%;
}
}

/*---- 動画スクロール ----*/
#container .doctor-box + .custom-scrollbar {
  margin: 4vw 8vw 0;
  width: calc(100% - 16vw);
}

#container .doctor-box {
  box-sizing: border-box;
  cursor: grab;
  display: flex;
  flex-wrap: nowrap;
  gap: 5vw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8vw 8vw 5vw;
  scrollbar-width: none;
  width: 100%;
}

#container .doctor-box:active {
  cursor: grabbing;
}

#container .doctor-box::-webkit-scrollbar {
  display: none;
}

/*----  プロフィールカード ----*/
#container .profile {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10vw 0 0 0;  
  box-shadow: 1.2vw 1.4vw 3vw rgba(0, 0, 0, 0.1);
  flex: 0 0 65vw;
  padding: 5vw 5vw 3vw;
  width: 65vw;
}

#container .profile img {
  display: block;
  height: 30vw;
  margin: 0 auto 2vw;
  width: 30vw;
}

#container .clinic-role {
  color: #a08965;
  font-size: 2.8vw;
  line-height: 1.7;
  text-align: center;
}

#container .clinic-role em {
  display: inline-block;
  font-style: normal;
  font-size: 3.8vw;
  font-weight: 700;
  margin-bottom: 1.5vw;
}

#container .voice-description {
  font-size: 2.7vw;
  line-height: 1.8;
  padding-bottom: 2vw;
}

#container .profile .btn {
  align-items: center;
  display: flex;
  font-size: 2.8vw;
  line-height: 2;
  position: relative;
  padding-left: 4vw;
}

#container .profile .btn::before {
  border-top: 1px solid #b19844;
  border-right: 1px solid #b19844;
  border-left-color: #b19844;
  content: "";
  height: 5px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 35%;
  transform: translateY(-50%) rotate(45deg);
  text-align: center;
  transform: rotate(45deg);
  transition: all .3s;
  width: 5px;
}

#container .profile .insta {
  height: 4vw;
  margin: 0 1vw 0 0;
  width: 4vw;
}

/*-- 動画カード --*/
#container .movie_box {
  flex: 0 0 60vw;
  width: 60vw;
}

/*-- モーダル --*/
#container .movie_modal {
  background-color: rgba(0, 0, 0, 0.82);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

#container .movie_modal.is-open {
  align-items: center;
  display: flex;
  justify-content: center;
}

#container .movie_modal_content {
  max-width: 420px;
  position: relative;
  width: 86vw;
}

#container .movie_modal_close {
  border: none;
  background-color: transparent;
  cursor: pointer;
  height: 9vw;
  position: absolute;
  padding: 0;
  right: -2vw;
  top: -12vw;
  width: 9vw;
}

#container .movie_modal_close::before,
#container .movie_modal_close::after {
  background-color: #fff;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 8vw;
}

#container .movie_modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#container .movie_modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#container .movie_modal_video {
  background-color: #000;
  position: relative;
  padding-top: 177.777%;
  width: 100%;
}

#container .movie_modal_video video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*-- モーダル動画スライド --*/
#container .movie_slide_btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 10vw;
  height: 10vw;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(160, 137, 101, 0.95);
  box-shadow: 0 0 0 1px rgba(160, 137, 101, 0.4), 0 0 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-50%);
  cursor: pointer;
  animation: movieArrowPulse 1.8s ease-in-out infinite;
}

#container .movie_slide_prev {
  left: -4vw;
}

#container .movie_slide_next {
  right: -4vw;
}

#container .movie_slide_btn::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 3vw;
  height: 3vw;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

#container .movie_slide_prev::before {
  left: 56%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

#container .movie_slide_next::before {
  left: 44%;
  transform: translate(-50%, -50%) rotate(45deg);
}

#container .movie_slide_btn.is-hidden {
  display: none;
}

@keyframes movieArrowPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(160, 137, 101, 0.4), 0 0 12px rgba(0, 0, 0, 0.25);
  }

  50% {
    box-shadow: 0 0 0 1.5vw rgba(160, 137, 101, 0.25), 0 0 22px rgba(0, 0, 0, 0.45);
  }

  100% {
    box-shadow: 0 0 0 1px rgba(160, 137, 101, 0.4), 0 0 12px rgba(0, 0, 0, 0.25);
  }
}

@media screen and (min-width:768px){
#container .doctor-box {
  align-items: center; 
  gap: 3vw;
  margin: 0 auto;    
  overflow-x: auto; 
  position: relative;           
  padding: 3vw 0 5vw;
  scroll-behavior: smooth;
  width: 70%;                   
}

/* 左右矢印 */
#container .doctor-arrow-left,
#container .doctor-arrow-right {
  position: absolute;
  top: 96%;
  transform: translateY(-50%);
  width: 2.5vw;
  height: 3.5vw;
  background-color: rgba(0,0,0,0.3); 
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

#container .doctor-arrow-left::after {
  content: "";
  display: block;
  width: 1.2vw;
  height: 1.2vw;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-135deg);
  position: relative;
  left: 15%;
}

/* 右矢印 */
#container .doctor-arrow-right::after {
  content: "";
  display: block;
  width: 1.2vw;
  height: 1.2vw;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);  
  position: relative;
  right: 15%;
}

#container .doctor-arrow-left {
  left: 10vw; 
}
#container .doctor-arrow-right {
  right: 10vw;
}

#container .profile {
 border-radius: 4vw 0 0 0;
 flex: 0 0 21vw;
 padding: 2vw;
}

#container .profile img {
  height: 12vw;
  width: 12vw;
}

#container .clinic-role {
  font-size: .8vw;
}

#container .clinic-role em {
  font-size: 1.3vw;
  margin-bottom: .5vw;
}

#container .voice-description {
  font-size: .8vw;
  line-height: 1.8;
  padding-bottom: 1vw;
}

#container .profile .btn {
  font-size: .9vw;
  padding-left: 1.2vw;
}

#container .profile .btn::before {
  height: .5vw;
  width: .5vw;
}

#container .profile .insta {
  height: 1.2vw;
  margin: 0 .5vw 0 0;
  width: 1.2vw;
}

#container .movie_box {
  flex: 0 0 21vw;
  width: 21vw;
}

  #container .custom-scrollbar.more {
  display: block !important;     
  overflow-x: auto;             
  overflow-y: hidden;          
  -webkit-overflow-scrolling: touch; 
}

#container .custom-scrollbar.more::-webkit-scrollbar {
  height: 6px;
}

#container .custom-scrollbar.more::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

#container .custom-scrollbar.more::-webkit-scrollbar-track {
  background: transparent;
}

#container .movie_modal_close {
  height: 5vw;
  right: -3vw;
  top: -1vw;
  width: 0vw;
}

#container .movie_modal_close::before,
#container .movie_modal_close::after {
  height: 2px;
  width: 3vw;
}

#container .movie_slide_btn {
  height: 3vw;
  width: 3vw;
}

#container .movie_slide_btn::before {
  height: 1vw;
  width: 1vw;
}

#container .movie_slide_next {
    right: -4.8vw;
}

#container .movie_slide_prev {
    left: -4.8vw;
}
}

/*---------------------
    glo-navi-foot
---------------------*/
#container .glo-navi-foot {
  background-color: rgb(183 160 124 / 90%);
  bottom: 0;
  color: #ffffff;
  font-size: 4vw;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 1000;

  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#container .glo-navi-foot.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#container .glo-navi-foot ul {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  height: 65px;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#container .glo-navi-foot li {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: calc(100% / 4);
}

#container .glo-navi-foot li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 32px;
  background-color: #fff;
  transform: translateY(-50%);
}

#container .glo-navi-foot li:nth-of-type(4)::after {
  display: none;
}

#container .glo-navi-foot li a {
  align-items: center;
  color: #ffffff;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1.45;
  margin: 0;
  text-decoration: none;
}

@media screen and (min-width:768px){
#container .glo-navi-foot {
  font-size: 1vw;
}

#container .glo-navi-foot ul {
  height: 4vw;
  margin: 0 auto;
  width: 80%;
}

#container .glo-navi-foot li::after {
  height: 2.5vw;
}
}