@charset "UTF-8";
/* CSS Document */

html {
  font-size: 62.5% !important;
}

.pc {
  display: initial;
}

.sp {
  display: none;
}

@media screen and (max-width:768px) { /* スマホ表示用 */
  .pc {
    display: none;
  }

  .sp {
    display: initial;
  }
}

.flex {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}

/*===============================================================================
* コンテナ
*=============================================================================*/.fs-l-main {margin: 8px auto;
    padding: 0;
}
main {
  box-sizing: border-box;
  font-family: "メイリオ", Meiryo, verdana, Hiragino Kaku Gothic Pro, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif !important;
  width: 100%;
  max-width: 980px;
  margin: 0 auto 66px;
}

@media all and (-ms-high-contrast: none) { /* IE対策 */
  main {
    display: block;
  }
}

main * {
  box-sizing: border-box;
}

main img {
  display: block;
  width: 100%;
}

main a img:hover,
main a p:hover {
  opacity: 0.7;
}

main a:link,
main a:visited,
main a:hover,
main a:active {
  color: #000 !important;
}

@media screen and (max-width:768px) { /* スマホ表示用 */
  main {
    width: 100%;
    margin-bottom: 6.7347%;
  }

  main img {
    display: block;
    width: 100%;
    height: auto;
  }

  main a img:hover,
  main a p:hover {
    opacity: 1.0;
  }
}

/*===============================================================================
* メインビジュアル
*=============================================================================*/

#mainVisual {
  margin-top: 15px !important;
}

#mainVisual {
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
}

@media screen and (max-width:768px) { /* スマホ表示用 */
  #mainVisual {
    padding: 0 3.125%;
    width: 100%;
  }

  #mainVisual { /* ← オーバライド */
    margin-top: 0 !important;
    padding: 0; 
  }
}

/*===============================================================================
* 共通パターン
*=============================================================================*/
/*[id^='series_'] {
  margin-top: -45px;
  padding-top: 45px;
}*/

.title {
  width: 600px;
  margin-top: 66px;
}

.title + p {
  padding: 2.2rem 0;
  font-size: 1.8rem;
  line-height: 1.5em;
  text-align: left;
}

[id^='series_'] section:nth-of-type(3) .mainImage {
  margin-top: 44px;
}

.itemName,
.price {
  text-align: center;
}

.itemName {
  font-size: 1.4rem;
  /*font-weight: bold;*/
  line-height: 1.5em;
  padding: .5em 0;
}

.price {
  font-size: 2.5rem;
}

.price span {
  font-size: 2rem;
}

.details {
  text-align: center !important;
  font-size: 2rem;
  line-height: initial;
  padding: .25em 0;
  text-decoration: none !important;
  border: solid 1px #000;
  margin-bottom: 66px;
}

.catalog{
  font-size: 2rem;
  text-decoration: none !important;
  padding-bottom: 6rem;
}
.catalog a {
  display: block !important;
  background-color: #000;
  color: #fff !important;
  text-align: center !important;
  line-height: initial;
  padding: .25em 0;
  text-decoration: none !important;
}
.catalog a:link,
.catalog a:visited,
.catalog a:active{
  color: #fff !important;
}
.catalog a:hover {
  opacity: 0.7;
}

@media all and (-ms-high-contrast: none) { /* IE対策 */
  .catalog {
    line-height: 3rem;
  }
}

@media screen and (max-width:768px) { /* スマホ表示用 */
  [id^='series_'] {
    margin-top: 0;
    padding: 0 3.125%;
  }
  
  .title {
    /*width: 61.2245%;*/
    width: 100%;
    /*margin-top: 6.7347%;*/
    margin-top: 10.3125%;
  }

  .title + p {
    padding: 2.245% 0;
    font-size: 1.2rem;
  }

  [id^='series_'] section:nth-of-type(3) .mainImage,
  [id^='series_'] section:nth-of-type(4) .mainImage {
    margin-top: 4.49%;
  }

  .itemName {
    font-size: 1rem;
    padding: .5em 0;
  }

  .price {
    font-size: 1.8rem;
    font-weight: bold;
  }

  .price span {
    font-size: 1.2rem;
  }

  .details,
  .catalog {
    font-size: 1.4rem;
    padding-bottom: 5rem;
  }

  .catalog a:hover {
  opacity: 1.0;
    font-size: 1.4rem;
}

  .details {
    margin-bottom: 6.7347%;
    display: block;
  }

  /*.pattern_A .mainImage a {
    visibility: hidden;
  }*/
  .mainImage a {
    visibility: hidden;
  }
}
/*===============================================================================
* Aパターン
*=============================================================================*/
.mainImage {
  position: relative;
  width: 100%;
}

.pattern_A .items {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 22px 0;
  padding-inline-start: 0;
  list-style: none;
}

.pattern_A .items li {
  position: relative;
  width: 24%;
  margin-bottom: 22px;
}

.pattern_A .items li.dummy {
  height: 0;
  margin: 0 !important;
}

/*.mainImage:hover,
.pattern_A .items li:hover {
  opacity: 0.7;
}*/
/*.mainImage:hover > *:not(.btnBuy),
.pattern_A .items li:hover > *:not(.btnBuy){
  opacity: 0.7;
  cursor: pointer;
}*/

.mainImage:hover a,
.pattern_A .items li:hover a{
  background: rgba(255,255,255,0.5);
}
.mainImage.notHover:hover a,
.pattern_A .items li.notHover:hover a{
  background: rgba(255,255,255,0);
}

.mainImage a,
.pattern_A .items li a {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
}

.pattern_A .items div {
  width: 100%;
  border: solid 1px #000;
}
.pattern_A .items div.btnDtl,
.pattern_A .items div.btnBuy {
  width: 100%;
  border: none;
}


@media screen and (max-width:768px) { /* スマホ表示用 */
  .pattern_A .items {
    margin: 2.245% 0;
  }

  .pattern_A .items li {
    width: 49%;
    margin-bottom: 2.245%;
  }

  /*.mainImage:hover,
  .pattern_A .items li:hover {
    opacity: 1.0;
  }*/
/*.mainImage:hover > *:not(.btnBuy),
.pattern_A .items li:hover > *:not(.btnBuy){
    opacity: 1.0;
}*/
  .mainImage:hover a,
  .pattern_A .items li:hover a{
  background: none;
  }
  .mainImage.notHover:hover a,
  .pattern_A .items li.notHover:hover a{
  background: none;
  }
}

/*===============================================================================
* Bパターン
*=============================================================================*/
.pattern_B .mainImage {
  position: relative;
  margin-bottom: 44px;
  text-align: center;
}

@media screen and (max-width:768px) { /* スマホ表示用 */
  .pattern_B .mainImage {
    margin-bottom: 4.49%;
  }
}


/*===============================================================================
* 購詳しく見るボタン
*=============================================================================*/
.btnDtl {
  width: 100%;
  height: 34px;
  line-height: 34px;
  margin: 10px 0 5px 0;
  /*padding: 5px;*/
  background: #999999;
  border: none;
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.btnDtl a {
  position: static;
  background: #999;
  color: #fff !important;
  text-decoration: none;
}
.btnDtl a:link,
.btnDtl a:visited,
.btnDtl a:hover,
.btnDtl a:active {
  color: #fff !important;
}
.pattern_B .btnDtl {
  display: inline-block;
  width: 24%;
  margin: 10px 10px 5px 10px;
  vertical-align: top;
  }

@media screen and (max-width:768px) { /* スマホ表示用 */
  .pattern_B .btnDtl {
    width: 49%;
    margin: 10px auto 5px auto;
  }
  .btnDtl {
    /*padding: 8px 5px;*/
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  .btnDtl a {
    visibility: visible;
    position: static;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: none;
    color: #fff !important;
    background: #999 !important;
  }


}
/*===============================================================================
* 購入ボタン
*=============================================================================*/
.btnBuy {
  position: relative;
  margin: 10px 0 5px 0;
  z-index: 0;
}
.pattern_B .btnBuy {
  display: inline-block;
  width: 24%;
  margin: 10px 10px 5px 10px;
  vertical-align: top;
  }
.btnBuy input {
  display: block;
  width: 100%;
  /*padding: 5px;*/
  height: 34px;
  line-height: 34px;
  background: #e46386;
  border: none;
  color: #fff;
  font-size: 16px;
  text-align: center;
  border-radius:0;
}
.btnBuy input:hover {
  background: #e23d6c;
  cursor: pointer;
}
@media screen and (max-width:768px) { /* スマホ表示用 */
  .pattern_B .btnBuy {
    width: 49%;
    margin: 10px auto 5px auto;
  }
  .btnBuy input {
    /*padding: 8px 5px;*/
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
}

/*===============================================================================
* アンカーリンクのズレ補正
*=============================================================================*/


@media screen and (max-width:768px) { /* スマホ表示用 */
  [id^='box_'] {
    margin-top: -29%;
    padding-top: 29%;
  }
}

/*===============================================================================
* 各コンテンツの背景色
*=============================================================================*/

#point {
  background: #eff3fa;
}






/*===============================================================================
* 傘のアイコン(2021.04追加）
*=============================================================================*/.icon_casa{ width: 19%;  margin-top: -28.2%;}

/*===============================================================================
* コーデ特集など(2021.04追加）
*=============================================================================*/

.fes_coordi {max-width: 980px; margin: 0 auto;}
.fes_coordi .pattern_A .mainImage {margin-top: 0%; max-width: 418px; min-width: 40%;margin-right: 2.6%;flex-basis: 51%;}
.fes_coordi .pattern_A .mainImage + div {flex-basis: 65%;}
.fes_coordi .c_copy{max-width: 436px; margin: 10% 6%; margin-bottom: 20%;}
.fes_coordi .pattern_A .items li { width: 48%;}
.fes_coordi .pattern_A {display: flex; margin-bottom: 6%;}
.fes_coordi .pattern_A .items { margin-bottom: 0;}
.fes_coordi .pattern_A .catalog {margin-bottom: 8%;}
.fes_coordi .nav ul{display:flex;list-style-type: none;padding: 0;margin-bottom:22%;margin-top: 3%;}
.fes_coordi .nav li{margin:0;}
.fes_coordi .youtube img{margin:3% auto 5px ; width: unset;max-width:90%}
.fes_coordi #mainVisual{margin:0 auto 8% auto;}
.fes_coordi .youtube p{text-align:center;font-size:1.5rem;}

@media screen and (min-width: 640px){
.fes_coordi .item3more { margin: 6% 6%; margin-bottom: 15%;}
 .youtube p{font-size: 2.8rem;}
}
@media screen and (max-width: 640px){
.fes_coordi .btnDtl, .fes_coordi .btnBuy{display:none;}
.fes_coordi .c_copy{max-width: 88%;}
.fes_coordi .itemName {display: none;}
.fes_coordi .price {    font-size: 1rem; font-weight: bold; margin: 5% 0;}
.fes_coordi .price span { font-size: 1rem;}
.fes_coordi .pattern_B .mainImage a { visibility: unset;}
}