/* カスタマイズ用CSS */

/* 初めての方用CSS */

/* レイアウト */
.container {
  padding: 0 90px;
}

.block {
  display: flex;
  justify-content: space-around;
  padding-bottom: 60px;
}

.navigation {
  display: flex;
  margin: 10px auto 60px auto;
  width: fit-content;
}

@media only screen and (max-width: 480px) {
  .navigation {
    display: block;
  }
}

.top_nav {
  margin: 10px 0;
  padding: 5px 0;
  font-weight: bold;
}

.subtitle {
  margin: 0 auto 50px auto;
}

.tool_subtitle {
  margin: 0 0 50px 35px;
}

.tool-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
  width: fit-content;
  gap: 70px 15px;
}

.sub_tool_block {
  padding: 0 10px;
  margin: 0 0px;
  width: 45%;
  text-align: left;
}

.enjoydoll {
  margin: 0 auto;
  margin-bottom: 60px;
  width: 500px;
}

.enjoydoll_block {
  text-align: center;
  margin-bottom: 60px;
}

.sentence {
  display: inline-block;
  text-align: center;
}

.enjoydoll_sentence {
  text-align: left;
  margin-bottom: 60px;
}
/* レイアウトここまで */

/* 見出し(h1,h2)*/
h1 {
  margin: 10px auto 30px auto;
  width: fit-content;
  color: #4c4948;
  font-size: 23px;
  font-family: "Noto Sans JP", sans-serif;
}

.h1_enjoydoll {
  margin-top: 60px;
}

h2 {
  margin: 40px auto;
  width: fit-content;

  color: #4c4948;
  font-size: 17px;

  font-family: "Noto Sans JP", sans-serif;
}
/* 見出しここまで */

/* 文字(p) */
p {
  width: fit-content;
  color: #4c4948;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
}

.p_introduction {
  margin: 40px auto 60px auto;
}

.p_subtitle {
  margin: 40px auto;
  color: #4c4948;
  font-size: 17px;
  font-family: "Noto Sans JP", sans-serif;
}

.p_enjoydoll {
  text-align: center;
  margin: 20px auto 40px auto;
}

.tool_name {
  margin: 20px auto;
}

/* 文字ここまで */

/* アンカーリンク（a）ここから */
a {
  color: #4c4948;
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
}

.a_top {
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #4c4948;
  vertical-align: bottom;
  text-decoration: none;
  font-size: 15px;
}

.a_top::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: 3px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #4c4948;
  border-right: 1px solid #4c4948;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.a_top::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.a_nav_item {
  position: relative;
  display: inline-block;
  padding: 0 25px;
  margin: 0 10px;
  color: #e1d37f;
}

.a_nav_item::before,
.a_nav_item::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #4c4948;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.a_nav_item::before {
  left: 0;
}

.a_nav_item::after {
  right: 0;
}

.a_nav_item:visited {
  color: #e1d37f;
}

/* スマホ用の中点（PCでは非表示） */
.bullet_point {
  display: none;
}

@media only screen and (max-width: 480px) {
  .a_nav_item {
    position: relative;
    display: block;
    padding: 0px;
    margin: 0;
  }

  /* /記号を削除 */
  .a_nav_item::before {
    display: none;
  }

  .a_nav_item::after {
    display: none;
  }
}
/* アンカーリンクここまで */

/* 画像(img) */
.img_hajimete-main {
  display: block;
  margin: 0 auto;
}

.img_about_doll {
  width: 40%;
  margin-left: 20px;
}

.img_three_dolls {
  margin-right: 30px;
  width: 50%;
}

.img_makeup {
  margin-right: 15px;
}

.img_skannbiki {
  width: 100%;
  display: inline-block;
}

.img_dollstand {
  width: 100%;
}

.img_melamine-sponge {
  width: 100%;
}

.img_aipate {
  width: 100%;
}

.img_siliconcap {
  width: 100%;
}

.img_sixdolls {
  width: 100%;
  margin-bottom: 20px;
}

.doll_enjoy_sp {
  display: none;
}

/* 画像ここまで */

/* 初めての方用CSSここまで */

/* TOP画面用CSS */
/* レイアウト */
.ec-layoutRole .ec-layoutRole__contents {
  /* トップスライダー下部余白 */
  margin-top: 30px;
}

/* PC表示時のトップ表示 */
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: block;
    width: 25vw;
    padding-top: 60px;
  }
}

/* モニター表示時のトップ画像 */
.slick-slide img {
  width: 28vw; /* 画面幅の28% */
  display: block;
}

.sns_block {
  margin-left: 20px;
}

/* レイアウトここまで */

/* 文字 */
.h1_top {
  margin: 10px auto 30px auto;
  width: fit-content;
  color: #4c4948;
  font-size: 18px;
  font-weight: 200;
  font-family: "Noto Sans JP", sans-serif;
}

.top_product_name {
  margin: 0 auto;
  font-size: 13px;
}

.top_product_price {
  margin: 0 auto;
  font-size: 13px;
}

.p_introduction {
  font-size: 13px;
}
/* 文字ここまで */

/* 新着情報ここから */
/* デフォルトスタイルの上書き */
.ec-secHeading {
  text-align: center;
}

.ec-secHeading .ec-secHeading__en {
  font-size: 25px;
  font-weight: normal;
}
.ec-secHeading .ec-secHeading__line {
  display: none;
}
.top_product_description {
  display: none;
}
.ec-secHeading__ja {
  display: none;
}
.ec-secHeading__en {
  margin: 10px auto 30px auto;
  width: fit-content;
  color: #4c4948;
  font-size: 23px;
  font-weight: 200;
  font-family: "Noto Sans JP", sans-serif;
}

.ec-newsRole__news {
  border: none;
  padding: none;
}
.ec-newsRole .ec-newsRole__news {
  border: 16px solid white;
  padding: 5px 30px;
}

.ec-newItemRole__list {
  margin: 0 auto;
}

.ec-newsRole .ec-newsRole__newsTitle {
  font-size: 14px;
  font-weight: normal;
  color: black;
}
.ec-newsRole .ec-newsRole__newsItem {
  padding: 5px;
}

.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
  border-bottom: none; /* デフォルトの下線無効化 */
}
.ec-newsRole__newsItem {
  background-color: #f8f9fe;
  margin: 8px;
  padding: 8px;
}
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
  color: black;
}

.fa-angle-down {
  color: #8b598c; /* トグルアイコンの色を変更 */
}
/* 新着情報ここまで */

/* 新着アイテムここから */

.ec-newItemRole {
  padding: 20px 0; /* デフォルトスタイルの上書き */
}
/* 新着アイテムここまで */

/* スライダー関連 */

.main_visual.top {
  width: 90%; /* トップスライダーの大きさ */
}

.slick-slider {
  width: 90%; /* 新着アイテムスライダーの大きさ */
}

.slider_wrapper {
  padding: 10px; /* スライダー間の余白 */
}

.slick-dotted.slick-slider {
  margin: 0 auto 5px auto; /* スライダーの下部余白 */
}
/*

/* 矢印 */
.slick-arrow {
  display: block;
  position: absolute;
  top: -57px;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: white;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
  background-color: #8b598c; /* スライダーボタンの背景色を紫に変更 */
}
.slick-arrow:hover {
  background-color: #8b598c; /* スライダーボタンの背景色を紫に変更 */
}

/* 矢印共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  padding: 7px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: ""; /* デフォルトの文字を無効化 */
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 15px;
  height: 15px;
  border-top: 3px solid #fff; /* 矢印の太さ */
  border-right: 3px solid #fff; /* 矢印の太さ */
}

/* next */

.slick-next {
  right: 0;
}
.slick-next::after {
  right: 6px; /* 矢印の位置調整 */
  transform: rotate(45deg);
}

/* prev */

.slick-prev {
  left: -0;
}
.slick-prev::after {
  left: 6px; /* 矢印の位置調整 */
  transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
  .slick-next::after,
  .slick-prev::after {
    width: 10px;
    height: 10px;
  }
  .slick-next {
    right: 8px;
  }
  .slick-prev {
    left: 8px;
  }
  .slick-next::after {
    right: 2px;
  }
}

/* スライダー関連ここまで */

/* 画像 */
.img_item_image2 {
  margin: auto 0 auto 20px;
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
}

/* ボタン */
.btn_top {
  text-align: center;
  margin: 0 auto;
  width: 230px;
  height: 40px;
  background-color: #3a3a3a;
  border-radius: 35px;
  font-family: "Noto Sans JP", sans-serif;
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
  display: inline-block;
  margin-left: auto;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  color: white;
  text-align: center;
  background: transparent;
  cursor: pointer;
  position: absolute;
  right: 5px;
}
/* ボタンここまで */

/* リンク */
.a_btn_top {
  margin: 0 auto;
  color: white;
  line-height: 40px;
  text-decoration: none;
}

.a_btn_top:hover {
  color: bisque;
}
/* リンクここまで */

/* ヘッダーここから */
header {
  border-bottom: 1px solid #cccccc;
}

.ec-headerRole {
  padding-top: 0; /* デフォルトの上部pを無効化 */
}

.ec-headerNaviRole {
  margin: 10px auto;
}

.ec-headerSearch .ec-headerSearch__keyword {
  margin-right: 60px;
  float: right;
  width: 120%;
  border-radius: 50px;
  background-color: white;
}

.ec-headerSearch .ec-headerSearch__keyword input {
  height: 30px;
}

.ec-headerNaviRole .logo {
  width: 40%;
}

.img_search .icon {
  width: 40%;
  margin-top: 10px;
}

/* ヘッダーここまで */

/* ナビゲーションバーここから */

.ec-itemNav {
  margin: 0 auto; /* ナビゲーションバーの要素を横並び */
}
.ec-itemNav .ec-itemNav__nav.top_nav_bar {
  flex-direction: row;
}

.ec-itemNav__nav li {
  float: left;
  width: 270px; /* カテゴリーナビの幅一定に */
}

.ec-itemNav.navigation_bar {
  margin: 0 auto;
  width: fit-content;
}

/* ナビゲーションバーここまで */

/* カテゴリーナビここから */

.ec-layoutRole__left {
  width: 400px;
}

/* ホバー時に下層カテゴリー表示 */
.ec-itemNav__nav li ul li:hover {
  height: fit-content;
}

.ec-itemNav__nav li a,
.ec-itemNav__nav li ul li a {
  font-size: 14px;
  padding: 12px;
}

/* 二重矢印修正 */
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li ul:before {
    position: fixed;
  }
}

/* カテゴリー名下の下線 */
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li a {
    text-align: center;
    border-bottom: 1px solid #cccccc;
  }

  .ec-headerNaviRole {
    padding-bottom: 25px;
  }
}

/* 下層カテゴリー */
.ec-itemNav__nav li ul li a {
  background-color: white;
  color: #3a3a3a;
  border-bottom: none; /* 下線を消す */
}

.ec-itemNav__nav li ul li a:hover {
  background-color: white;
  color: #3a3a3a;
}

.ec-categoryNaviRole {
  margin: 20px auto;
}

.ec-categoryNaviRole img {
  width: 100%;
}

.icon_img {
  display: inline-block;
  height: 40px;
}

.category_name {
  margin: 0 auto;
  padding: 5px;
}

.ec-itemNav__nav .right_border {
  width: 160px;
  height: 60px;

  color: #494949;
  background: transparent;
  border-right: solid 1px #cccccc;
}

.ec-itemNav__nav {
  display: flex;
  flex-direction: column; /*カテゴリ縦も並べる*/
}

.ec-itemNav__nav li a {
  font-weight: 100;
  text-align: left; /*文字を左寄せ*/
}

.ec-itemNav__nav li ul li ul,
.ec-itemNav__nav li ul li:hover ul li {
  width: 100%; /*カテゴリの位置と横幅調整*/
}

.ec-itemNav__nav li ul {
  left: 100%;
  width: 100%;
  top: 0;
}

.ec-itemNav__nav > li:hover > a {
  background-color: #eee; /*背景色、文字サイズ調整*/
}

a.nav_item.right_border.none {
  border-right: none; /* 初めての方の右だけ縦線なし */
}

/* カテゴリーナビここまで */

/* サイドバーここから */
.sidebar_container {
  margin-top: 60px;
  margin-left: 90px;
  width: 200px;
  height: 500px;
}

.ec-categoryNaviRole.sidebar {
  margin-top: 100px;
  margin-left: 0;
  width: 200px;
  height: 500px;
}

.category_nav_block {
  height: 40px;
  justify-content: space-between;
}

.category_nav_block.none {
  height: 40px;
  border-bottom: none;
}

.category_nav_heading {
  margin-bottom: 10px;
  padding: 0.25em 0.5em; /*上下 左右の余白*/
  line-height: 40px;
  width: fit-content;
  color: #494949; /*文字色*/
  background: transparent; /*背景透明に*/
  border-left: solid 8px #8b598c; /*左線*/
}

.category_nav_sub_heading {
  margin-left: 8px;
  line-height: 40px;
}

.category_nav_content_wrapper {
  margin: 30px 0 40px 0;
}

.sidebar_category_icon {
  display: block;
}

.category_nav_p {
  display: inline-block;
  width: 93%;
  font-weight: 100;
}

.span_category_icon {
  width: fit-content;
}

.fa-chevron-right {
  color: #786779;
}

.ec-itemNav__nav > li:hover li:hover > a {
  background: white; /* 子カテゴリーホバー時の背景色を修正 */
}

.ec-itemNav__nav > li:hover li:hover li:hover > a {
  background: white; /* 孫カテゴリーホバー時の背景色を修正 */
}

.ec-itemNav__nav > li:hover li:hover li > a {
  background: white;
}

/* サイドバーここまで */

/* フッターここから */
.ec-footerRole {
  margin-top: 0; /* デフォルトの上書き */
  background-color: #3a3a3a;
}

@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__inner img {
    width: 18%;
  }
}

@media only screen and (min-width: 768px) {
  .ec-footerTitle {
    padding: 20px 0 20px;
  }
}

.ec-footerTitle .ec-footerTitle__logo {
  margin-bottom: 30px;
}
.ec-footerNavi {
  padding-bottom: 30px;
}
.footer_sns_logo {
  margin: 10px auto 30px auto;
  width: 20%;
}

.footer_twitter_logo {
  width: 10%;
  margin-right: 10px;
}

.footer_insta_logo {
  width: 10%;
  margin-left: 10px;
}

.footer_sentence {
  margin: 12px auto;
  color: white;
  width: fit-content;
}

.p_footer {
  color: white;
}

.footer_link_block {
  margin-bottom: 5px;
}
/* フッターここまで */

/* 「初めての方へ」SPページ */
@media only screen and (max-width: 480px) {
  /* レイアウト関連ここから */
  .container {
    padding: 0 50px;
  }

  .block {
    display: flex;
    justify-content: space-around;
    padding-bottom: 0px;
    flex-wrap: wrap;
  }

  .tool-block {
    gap: 50px 15px;
  }

  .sub_tool_block {
    padding: 0;
  }

  .block.reverse {
    display: flex;
    justify-content: space-around;
    padding-bottom: 0px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    align-items: center;
  }

  .enjoydoll {
    width: 100%;
    margin-bottom: 40px;
  }

  .enjoydoll_block {
    text-align: center;
    margin-bottom: 25px;
  }

  .basic_explanation {
    padding-bottom: 50px;
  }

  .navigation {
    margin: 10px auto 35px auto;
  }

  .enjoydoll {
    margin-bottom: 40px;
  }

  .sub_tool_block {
    width: 100%; /* 道具ブロックの並び順を変更 */
  }

  .tool_subtitle {
    margin: 0 auto 40px auto; /* PC用の余白を打ち消し */
  }
  /* レイアウト関連ここまで */

  /* 画像 */
  .img_hajimete-main {
    width: 100%;
  }

  .img_about_doll {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
  }

  .img_three_dolls {
    margin: 3px;
    width: 100%;
    margin-bottom: 10px;
  }

  .img_makeup {
    width: 100%;
    margin-bottom: 10px;
  }

  .img_skannbiki {
    width: 100%;
    display: inline-block;
  }

  .img_search.logo {
    width: 150px;
  }

  .img_sixdolls {
    display: none;
  }

  .doll_enjoy_sp {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  /* 画像ここまで */

  /* 文字ここから */
  h1 {
    margin: 10px auto;
    font-size: 18px;
  }

  .h1_enjoydoll {
    margin-top: 40px;
  }

  h2 {
    margin: 40px auto 10px auto;
    font-size: 18px;
  }

  .h2_enjoy_doll {
    font-size: 17px;
    margin-top: 30px;
  }

  p {
    font-size: 13px;
  }

  .p_enjoydoll {
    margin: 0px auto 25px auto;
  }

  .p_introduction {
    margin: 25px auto 25px auto;
  }

  .enjoydoll_sentence {
    margin-bottom: 0px;
  }

  .subtitle {
    font-size: 13px;
    margin: 0 auto;
  }

  .tool_subtitle {
    margin: 0 auto 25px auto;
  }

  .tool_name {
    margin: 10px auto;
    font-size: 15px;
  }
  /* 文字ここまで */

  /* アンカーリンクここから */
  .navigation > a {
    border-bottom: 1px solid #cccccc;
  }
  /* アンカーリンクここまで */

  /* フッターここから */
  .footer_insta_logo {
    width: 40%;
    margin-left: 0px;
  }

  .footer_twitter_logo {
    width: 40%;
    margin-right: 10px;
  }

  .footer_vertical_line {
    display: none !important; /* フッターカテゴリ横縦線を無効化 */
  }

  .ec-footerNavi {
    padding-bottom: 0px;
    margin-bottom: 0;
  }

  .ec-footerTitle {
    padding: 40px 0 0 0;
  }
  /* フッターここまで */
}

/* 「初めての方へ」画像のレスポンシブ設定 */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .img_hajimete-main {
    width: 100%;
  }
}