@charset "utf-8";

#ccBox {
	width: 100%;
	margin: 0 auto;
    background-color: #d0cece;
	padding-bottom: 5%;
	text-align: center;
	align-items: center;
    font-family: "noto-serif-jp",sans-serif;
    line-height: 2.8rem;
    scroll-behavior: smooth;   
    font-size: 20px;
}
#ccBox div,
#ccBox p,
#ccBox span,
#ccBox figure,
#ccBox h2,
#ccBox h3,
#ccBox dl,
#ccBox dt,
#ccBox dd,
#ccBox ol,
#ccBox ul,
#ccBox li{
  font-size: 16px !important;
  line-height: 2.8rem;
}
#ccBox a,
#ccBox a:hover{
  color: #000!important;
}
img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 980px) {
#ccBox {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 5%;
  font-size: 25px;
  line-height: 1.5rem;
}
}
/*===================================================
			戻るボタン　CSS
===================================================*/

html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}
/*===================================================
			オリジナル　CSS
===================================================*/
.fv {
    width: 100%;
    margin-bottom: 10%;
}
.fv_tx {
    text-align: center;
    margin-bottom: 6%;
}
.fv_tx h1 {
    font-weight: 700;
    font-size: 2.8rem;
    margin-bottom: 3%;
}
.TTBox {
  width: 80%;
  max-width: 600px;
  text-align: center;
  padding: 1% 2%;
  border: 1px solid #000;
  margin: 7% auto;
}
.TTBox span {
  font-size: 20p!important;
}

.contain_2 {
  width: 80%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 30px;
}
.content_bl {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.content_bl img {
  width: 35%;
  max-width: 180px;
  height: auto;
  flex: 0 0 35%;
}
.TX_bl {
  flex: 1;
  min-width: 0;
  text-align: left;
  margin: auto;
}
.TX_bl h1 {
  font-family: "futura-pt",sans-serif;
  font-weight: 300;
  font-size: 20px;
}
.TX_bl span {
  font-size: 15px;
}
.articleBox {
  width: 60%;
  max-width: 1800px;
  margin: 0 auto;
  margin-bottom: 10%;

}
.articleBox .TT {
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #000;
  padding: 0 1rem 0.5rem;
}
.TT span {
  font-size: 20px!important;
}
.articleBox .picture {
  width: 100%;
  max-width: 900px;
  margin: 5% auto;
}
.articleBox .TXT {
  text-align: center;
  margin: 0 auto;
  margin-bottom: 5%;
  max-width: 900px;
}
.containerBox {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  max-width: 900px;
    margin: 0 auto;
}
.containerBox .cc {
  display: block;
}
.articleBox .B-btn {
  width: 50%;
  max-width: 300px;
  margin: 5% auto;
  background-color: #979696;
  padding: 1%;
  transition: all 0.3s ease;
  border: 1px solid #323232;
}
.articleBox .B-btn a{
  color: #d0cece;
  text-decoration: none;
}
.articleBox .B-btn:hover {
  background-color: #727171;
}
.articleBox__2 {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 5% ;
  border: 1px solid #000;
  gap:30px;
}
.articleBox__2 .picture {
  width: 300px;
}
.articleBox__2 .TXT {
  text-align: left;
  margin: auto;
}
#s p {
  width: 30%;
  text-align: center;
  max-width: 1200px;
  background-color: #000;
  color: #d0cece;
  font-size: 25px;
  padding: 1% 2%;
  margin-bottom: 5%;
}
#m {
  margin-bottom: 5%;
}
#m a {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-bottom: 1%;  
}
#m a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
#m a:hover {
  color: #666 !important;
}
#m a:hover::after {
  transform: scaleX(1);
}
.containerBox__3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  max-width: 900px;
    margin: 0 auto;
}
.containerBox__3 .cc {
  display: block;
}
.shop_list {
  margin: 0 auto;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}
.shop_dt {
  padding: 2%;
  border: 1px solid #000;
  transition: border-color 0.3s ease;
}
.shop_dt a {
  display: block;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
}
.shop_dt:hover {
  border-color: #999;
}
.shop_dt:hover a {
  color: #999;
}
/*===================================================
			選択ボタン　CSS
===================================================*/

.anchorNav {
  padding: 50px 5%;
}
.anchorNav__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2列 */
  column-gap: 5%;
  row-gap: 32px;
}
.anchorNav__list a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 12px 16px;
  border-bottom: 2px solid #000;           /* 下の黒い線 */
  color: #000;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  transition: opacity 0.3s;
}

/* ▼ をCSSで描く */
.anchorNav__list a::before {
  content: "";
  flex: none;
  border-style: solid;
  border-width: 12px 8px 0 8px;
  border-color: #000 transparent transparent transparent;
  transition: transform 0.3s;
}

/* ホバー時：少し薄くなり、▼が下に動く */
.anchorNav__list a:hover {
  opacity: 0.6;
}
.anchorNav__list a:hover::before {
  transform: translateY(3px);
}
.itemName a {
  position: relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  transition: color 0.3s ease;
  margin-bottom: 5%;  
}
.itemName a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.itemName a:hover {
  color: #666 !important;
}
.itemName a:hover::after {
  transform: scaleX(1);
}
/*===================================================
			カラバリ　CSS
===================================================*/
.color-swatches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin: 2% auto 0;
}

.color-swatch {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;
  background-color: var(--swatch-color);
}
@media screen and (max-width: 980px) {
  .fv_tx {
    text-align: justify;
    width: 90%;
    margin: 0 auto;
  }
  .fv_tx h1 {
    font-size: 1.9rem;
  }
  .anchorNav {
    text-align: center;
  }
  .anchorNav__list {
    display: block;
    width: 90%;
  }
  .anchorNav__list a{
    font-size: 13px !important;
  }
   .anchorNav__list li{
    padding-top: 10px;
   }
  .contain_2 {
    display: block;
  }
  .content_bl {
    display: block;
  }
  .content_bl img {
    width: 600px;
    margin: 5% auto;

  }
  .TX_bl {
    width: 90%;
  }
  .articleBox  {
    width: 90%;
  }
  .articleBox .TXT {
    text-align: left;
  }
  .shop_list {
    max-width: initial;
  }
  .shop_dt {
    padding: 4%;
  }
  .containerBox__3 {
    display: block;
  }
    .containerBox__3 .cc{
      margin-bottom: 5%;
    }
  .containerBox {
    display: block;
  }
  .containerBox .cc {
    margin-bottom: 5%;
  }
  .articleBox__2 {
    display: block;
  }
  #ccBox div,
#ccBox p,
#ccBox span,
#ccBox figure,
#ccBox h2,
#ccBox h3,
#ccBox dl,
#ccBox dt,
#ccBox dd,
#ccBox ol,
#ccBox ul,
#ccBox li{
  font-size: 11px !important;
}
.articleBox__2  {
  max-width: 300px;
}
.articleBox__2 .picture {
  width: 100%;
}
.TTBox {
  margin: 15% auto;
}
#s p {
  width: initial;
}
.color-swatches {
  margin: 0 auto 10% auto;
}
}