@charset "UTF-8";
/*SP表示の際に左右に余白がつく要素を囲んでください。--------------------------------------------------------*/
.f-c-widthControl {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 12px;
}

.f-c-widthControl.f-c-widthControl--narrow {
  max-width: 740px;
}

@media screen and (min-width: 1145px) {
  .f-c-widthControl {
    padding: 0;
  }
}

.f-c-fullSizeTxtBlock,
.f-c-narrowSizeTxtBlock {
  padding: 0 14px;
}

.f-c-normalTxt {
  font-size: 14px;
  line-height: 1.6;
  margin: 16px auto 0;
}

.f-c-normalTxt + .f-c-normalTxt {
  margin-top: 12px;
}

.f-c-pageTitle {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 20px 10px;
  text-align: center;
}

.f-c-pageTitle span {
  display: inline-block;
}

.f-c-caution {
  color: #000;
  font-size: 11px;
  line-height: 1.8;
  margin-bottom: 16px;
  text-align: left;
}

@media screen and (min-width: 601px) {
  /* PCレイアウトで幅100%未満、モバイルで幅100%で配置する場合に使用 */
  .f-c-narrowSizeTxtBlock {
    padding: 0;
  }

  .f-c-normalTxt {
    margin: 20px auto 0;
    font-size: 16px;
  }

  .f-c-pageTitle {
    padding: 40px 10px 50px;
  }

  .f-c-caution {
    margin-bottom: 14px;
    text-align: center;
  }

}

@media screen and (min-width: 1145px) {
  .f-c-fullSizeTxtBlock {
    padding: 0;
  }
}

/*商品詳細---------------------------------------------------------------------------------------------*/
.f-c-goodsWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

.f-c-goods {
  box-sizing: border-box;
  width: 80%;
  margin:0 auto 50px;
}

.f-c-goodsWrap.f-c-goodsWrap--flexible .f-c-goods {
  width: 50%;
  padding: 0 6px;
  margin: 0 0 50px;
}

.f-c-goods.is-double {
  width: 50%;
  padding: 0 6px;
  margin: 0 0 50px;
}

@media screen and (min-width: 601px) {
  .f-c-goods {
    width: 45%;
    max-width: 342px;
    padding: 10px;
    margin: 0 0 50px;
  }

  .f-c-goods.is-pcTriple {
    width: 33%;
    width: -webkit-calc(100%/3);
    width: calc(100%/3);
    padding: 10px;
    margin: 0 0 50px;
  }

  .f-c-goods.is-pcQuad {
    width: 25%;
    padding: 10px;
    margin: 0 0 50px;
  }

  .f-c-goodsWrap.f-c-goodsWrap--flexible .f-c-goods {
    width: -webkit-calc(100% / 3);
    width: calc(100% / 3);
    padding: 10px;
  }
}

@media screen and (min-width: 751px) {
  .f-c-goodsWrap.f-c-goodsWrap--flexible .f-c-goods {
    width: 25%;
  }
}

.f-c-goodsPhoto {
  margin-bottom: 10px;
  text-align: center;
}

.f-c-goodsPhotoImg {
  border-radius: 10px;
}

.f-c-goodsName {
  font-size: 12px;
}

.f-c-goodsPrice {
  font-size: 18px;
  margin-bottom: 10px;
}

.f-c-goodsPriceTax {
  font-size: 12px;
  display: inline-block;
}

.f-c-goodsDescription {
  color: #787878;
  margin-bottom: 10px;
}

.f-c-cartBtn {
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items: center;
}

.f-c-cartBtnSize {
  box-sizing: border-box;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
}

.f-c-cartBtnSize.f-c-cartBtnSize--short {
  width: 10%;
}

.f-c-cartBtnSize.f-c-cartBtnSize--middle {
  width: 17%;
}

.f-c-cartBtnSize.f-c-cartBtnSize--long {
  width: 25%;
}

.f-c-cartBtnAnc {
  background: #47D9C0;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 16px 0;
  text-align: center;
  width: 100%;
}

.f-c-cartBtnSize--short + .f-c-cartBtnAnc {
  width: 90%;
}

.f-c-cartBtnSize--middle + .f-c-cartBtnAnc {
  width: 83%;
}

.f-c-cartBtnSize--long + .f-c-cartBtnAnc {
  width: 75%;
}

.f-c-cartBtnAnc:hover {
  color: #fff;
}

.f-c-cartBtnAnc::before {
  content: '';
  width: 14px;
  height: 14px;
  background: url(https://cdn.super-groupies.com/images/feature/common/cart_l.svg) center bottom no-repeat;
  background-size: 14px 13px;
  display: inline-block;
  margin-right: 9px;
}

.f-c-cartBtnAnc.is-closed {
  background: #ddd;
  pointer-events: none;
}

.f-c-detailPageBtn {
  margin-bottom: 10px;
}

.f-c-detailPageBtnAnc {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #656565;
  display: block;
  font-size: 12px;
  line-height: 1;
  padding: 16px 0;
  position: relative;
  text-align: center;
}

.f-c-detailPageBtnAnc:hover {
  color: #656565;
}

.f-c-detailPageBtnAnc::after {
  content: '';
  position: absolute;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: auto;
  top: 0;
  bottom: 0;
  right: 15px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #47D9C0;
  border-right: 2px solid #47D9C0;
}

/*受注生産について---------------------------------------------------------------------------------------------*/
.f-c-bto {
  background: #f9f9f9;
  box-sizing: border-box;
  padding: 20px 12px;
  text-align: left;
}

.f-c-btoHeading {
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 14px;
}

.f-c-btoPreorderPeriod ,
.f-c-btoShippingDate {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 16px;
}

.f-c-btoNote {
  color: #656565;
  font-size: 11px;
  line-height: 18px;
  margin-bottom: 16px;
}

@media screen and (min-width: 601px) {
  .f-c-bto {
    padding: 30px 12px;
    text-align: center;
  }

  .f-c-btoPreorderPeriod ,
  .f-c-btoShippingDate {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 14px;
  }

  .f-c-btoNote {
    margin-bottom: 14px;
  }
}

/*クレジット---------------------------------------------------------------------------------------------*/
.f-c-credit {
  border: 1px solid #636363;
  color: #636363;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 auto 50px;
  padding: 14px;
  box-sizing: border-box;
}

.f-c-creditHeading {
  font-weight: bold;
}

.f-c-creditTxt a {
  text-decoration: underline;
  /* color: #636363; */
  color: #47D9C0;
}

.f-c-creditTxt a:hover {
  text-decoration: none;
}

@media screen and (min-width: 601px) {
  .f-c-credit {
    margin-bottom: 80px;
  }
}

/*================================================================================
project
================================================================================*/
.f-metaphor_02_light {
  margin-bottom: 30px;
  word-break: normal;
}

.f-metaphor_02_light img {
  width: 100%;
}

.f-metaphor_02_light-fv {
  text-align: center;
}

.f-metaphor_02_light-fvMainVis {
  display: inline-block;
  max-width: 1120px;
  width: 100%;
}

.f-metaphor_02_light-fvLogo {
  text-align: center;
  padding: 30px 0 10px;
}

.f-metaphor_02_light-fvLogo img {
  width: 200px;
  height: auto;
}

.f-metaphor_02_light-fvCopyright {
  color: #656565;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  margin-bottom: 36px;
  padding: 0 12px;
}

.f-metaphor_02_light-introOuter {
  margin: 60px auto 130px;
  padding: 0;
}

.f-metaphor_02_light-introCatch {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  margin-bottom: 20px;
  text-align: center;
}

.f-metaphor_02_light-introTxt {
  color: #000;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  padding: 0 14px;
}

.f-metaphor_02_light-introBlock {
  display: block;
  margin: 16px auto;
}

.f-metaphor_02_light-introBlock__imgArea {
  width: 100%;
}

.f-metaphor_02_light-introBlock__imgArea {
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

.f-metaphor_02_light-normalLink {
  color: #47D9C0;
  text-decoration: underline;
}

.f-metaphor_02_light-normalLink:hover {
  color: #47D9C0;
}

.f-metaphor_02_light-introTxt + .f-metaphor_02_light-introTxt {
  margin-top: 1em;
}

@media screen and (min-width: 601px) {
  .f-metaphor_02_light-introOuter {
    margin: 120px auto 150px;
  }

  .f-metaphor_02_light-introCatch {
    font-size: 20px;
  }

  .f-metaphor_02_light-introTxt {
    text-align: center;
    font-size: 16px;
    line-height: 1.8;
    padding: 0;
  }

  .f-metaphor_02_light-introTxt.f-metaphor_02_light-introTxt--pcTaC {
    text-align: left;
  }

  .f-metaphor_02_light-introBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 50px auto;
  }

  .f-metaphor_02_light-introBlock__imgArea {
    width: 50%;
  }

  .f-metaphor_02_light-introBlock__imgArea {
    width: 48%;
    margin-top: 0px;
    box-sizing: border-box;
  }

}

/*---------------------------------------------------------------------------------------------*/

.f-metaphor_02_light-secHeading {
  font-size: 24px;
  /* font-size: 20px; */
  text-align: left;
  margin: 0 auto 20px;
}

.f-metaphor_02_light-secHeading img {
  height: 50px;
  width: auto;
}

.f-metaphor_02_light-secHeading.f-metaphor_02_light-secHeading--necklace img {
  height: 40px;
  width: auto;
}

.f-metaphor_02_light-secHeading::after {
  content: '';
  background-image: url(../img/line.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  background-position: center;
  height: min(4.3vw, 29px);
  width: 100%;
  margin: 0 auto 10px;
}

.f-metaphor_02_light-copyright {
  color: #656565;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 36px;
  padding: 0 12px;
  box-sizing: border-box;
}

.f-metaphor_02_light-mainBlock {
  display: block;
}

.f-metaphor_02_light-mainBlock.f-metaphor_02_light-mainBlock--necklace{
  margin-bottom: 0;
}

.f-metaphor_02_light-mainBlock__imgArea {
  width: 100%;
}

.f-metaphor_02_light-mainBlock__imgArea + .f-metaphor_02_light-mainBlock__imgArea {
  margin-top: 10px;
}

.f-metaphor_02_light-cartBlock {
  display: block;
}

.f-metaphor_02_light-cartBlock__imgArea {
   width: 100%;
}

.f-metaphor_02_light-cartBlock__txtArea {
   width: 100%;
   margin-top: 20px;
}

.f-metaphor_02_light-normalTxt {
  font-size: 14px;
  line-height: 1.6;
  margin: 16px auto 0;
}

.f-metaphor_02_light-normalTxt + .f-metaphor_02_light-normalTxt {
  margin-top: 12px;
}

.f-metaphor_02_light-necklacecartBlock {
  max-width: 1120px;
  margin: 0 auto;
  height: min(76.6vw, 460px);
  box-sizing: border-box;
  background-image: url(../img/necklace_sub.jpg);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.f-metaphor_02_light-gallery {
  max-width: 1120px;
  /* height: min(108.6vw, 652px); */
  height: calc((100vw - 24px) * .92875);
  box-sizing: border-box;
  background-image: url(../img/yokoku_background.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  align-items: center;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-metaphor_02_light-galleryItemBlock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}

.f-metaphor_02_light-galleryItemBlock__imgArea {
  width: 45%;
}

.f-metaphor_02_light-galleryCatch {
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.f-metaphor_02_light-galleryTxt {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px auto 0;
  text-align: center;
}

.f-metaphor_02_light-galleryAttentionBlock {
  font-size: 11px;
  line-height: 1.6;
  margin: 16px auto 0;
  text-align: center;
}

@media screen and (min-width: 601px) {
  .f-metaphor_02_light-secHeading {
    font-size: 28px;
    margin: 0 auto 25px;
  }

  .f-metaphor_02_light-secHeading img {
    height: 100px;
  }

  .f-metaphor_02_light-secHeading.f-metaphor_02_light-secHeading--necklace img {
    height: 90px;
  }

  .f-metaphor_02_light-secHeading::after {
    background-image: url(../img/line_pc.jpg);
    height: min(2.9vw, 33px);
    margin: 0 auto 15px;
  }

  .f-metaphor_02_light-mainBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .f-metaphor_02_light-mainBlock.f-metaphor_02_light-mainBlock--necklace{
    margin-bottom: 100px;
  }

  .f-metaphor_02_light-mainBlock__imgArea {
    width: calc(50% - 6px);
  }

  .f-metaphor_02_light-cartBlock {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .f-metaphor_02_light-cartBlock__imgArea {
    width: 50%;
  }

  .f-metaphor_02_light-cartBlock__txtArea {
    width: 47%;
    margin-top: 20px;
  }

  .f-metaphor_02_light-normalTxt {
    margin: 0 auto;
    font-size: 16px;
  }

  .f-metaphor_02_light-necklacecartBlock {
    height: 380px;
    background-image: url(../img/necklace_sub_pc.jpg);
  }

  .f-metaphor_02_light-gallery {
    height: min(56.2vw, 630px);
    padding: 36px 20px;
    background-image: url(../img/yokoku_background_pc.jpg);
  }

  .f-metaphor_02_light-galleryItemBlock {
    width: 65%;
  }

  .f-metaphor_02_light-galleryCatch {
    margin-bottom: min(1.78vw, 20px);
    font-size: clamp(16px, 2.6vw, 24px);
  }

  .f-metaphor_02_light-galleryTxt {
    margin: 0 auto 0;
    font-size: clamp(14px, 2.3vw, 16px);
  }

  .f-metaphor_02_light-galleryAttentionBlock {
    margin: min(2.67vw, 30px) auto 0;
    font-size: clamp(12px, 2vw, 14px);
  }
}

/*================================================================================
Utility
================================================================================*/
/*margin---------------------------------------------------------------------------------------------*/
.f-u-mb-l { margin: 0 auto 80px;}
.f-u-mb-m { margin: 0 auto 50px;}
.f-u-mb-s { margin: 0 auto 36px;}
@media screen and (min-width: 601px) {
  .f-u-mb-l { margin: 0 auto 150px;}
  .f-u-mb-m { margin: 0 auto 100px;}
  .f-u-mb-s { margin: 0 auto 50px;}
}
.f-u-mt0 { margin-top: 0 !important;}
.f-u-mb0 { margin-bottom: 0 !important;}

/*width---------------------------------------------------------------------------------------------*/
.f-u-w-10 { width: 10%;}
.f-u-w-20 { width: 20%;}
.f-u-w-30 { width: 30%;}
.f-u-w-40 { width: 40%;}
.f-u-w-50 { width: 50%;}
.f-u-w-60 { width: 60%;}
.f-u-w-70 { width: 70%;}
.f-u-w-80 { width: 80%;}
.f-u-w-90 { width: 90%;}
.f-u-w-100 { width: 100%;}
@media screen and (min-width: 601px) {
  .f-u-w-pc10 { width: 10%;}
  .f-u-w-pc20 { width: 20%;}
  .f-u-w-pc30 { width: 30%;}
  .f-u-w-pc40 { width: 40%;}
  .f-u-w-pc50 { width: 50%;}
  .f-u-w-pc60 { width: 60%;}
  .f-u-w-pc70 { width: 70%;}
  .f-u-w-pc80 { width: 80%;}
  .f-u-w-pc90 { width: 90%;}
  .f-u-w-pc100 { width: 100%;}
}
/*---------------------------------------------------------------------------------------------*/
.f-u-flex { display: -webkit-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important;}
.f-u-blockC { margin-left: auto; margin-right: auto;}
.f-u-ta-c { text-align: center !important;}
.f-u-ta-l { text-align: left !important;}
.f-u-ta-r { text-align: right !important;}
.f-u-mincho { font-family: '游明朝', 'YuMincho', '游明朝体', 'Yu Mincho', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'Kozuka Mincho Std', '小塚明朝 Std R', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;}
.f-u-fw-b { font-weight: bold !important;}
.f-u-fw-n { font-weight: normal !important;}
/*---------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {.f-u-pcOnly { display: none !important;}}
@media screen and (min-width: 601px) {.f-u-spOnly { display: none !important;}}