@charset "UTF-8";

*{
  box-sizing: border-box;
}

#miffy70th{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 24px;
}

.block-topic-path--list{
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

.pane-contents{
  padding-bottom: 0;
}

img{
  max-width: 100%;
}

.container a{
  text-decoration: none;
}

.pc{
  display: block;
}

.sp {
  display: none;
}

#mv {
  margin-bottom: 100px;
}

p {
  line-height: 1.5em;
}

.heading{
  margin-bottom: 50px;
}

.arrow{
  margin-bottom: 50px;
}

#intro{
  background-color: #E95412;
  padding: 2vw;
  margin-bottom: 100px;
  border-radius: 2vw;
  position: relative;
}

.intro_img{
  position: absolute;
  top: 2.2vw;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}

.intro_inner{
  background-color: #fff;
  margin: 10px;
}

.intro_inner p{
  padding: 2vw;
  text-align: justify;
  line-height: 1.2;
  font-size: 32px;
  letter-spacing: 0.01em;
}

#intro .flexbox{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6.25vw 0 0 0;
}

#intro .flexbox p{
  padding: 0;
  font-size: 85px;
  color: #E95412;
  line-height: 1;
  text-align: center;
  margin-left: 20px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 0.01em;
}

#intro .flexbox img{
  width: 100px;
}

/* <!-- #item --> */

#item{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#item h3{
  font-size:18px;
  text-align: left;
  line-height: 1.2;
  margin-bottom: 5px;
}

#item img {
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}

#item .name {
  margin-top: 20px;
  text-align-last: left;
  font-size: 23px;
}

#item .value {
  margin-top: 10px;
  font-size: 40px;
}

#item .value span {
  font-size: 20px;
}

#item .detail {
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  padding: 15px;
  display: block;
}

.flex_item{
  width: 49%;
}

.flex_item:nth-of-type(odd){
  margin-right: 16px;
}

.flex_container{
  display: flex;
  flex-wrap: wrap;
}

.flex_container a{
  text-decoration: none;
}

.flex_container a:hover{
  opacity: 0.7;
  transition: 0.5s;
}

.title{
  padding: 40px;
  color: #FFF;
  background-color: #137A1F;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  margin-bottom: 50px;
}

.title h2{
  font-size: 60px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.title p{
  width: 60px;
}

#item .sub_title h3{
  color: #000;
  font-size: 24px;
  font-weight: 600;
}

#item .flex_item:nth-of-type(n+5) h3, #item .flex_item:nth-of-type(n+5) p{
  color: #FFF;
}

#item .button p{
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  color: #000;
}

#item .button .detail{
  background-color: #005599;
  color: #FFF;
}

#item .flex_item:nth-of-type(n+5) .detail{
  background-color: #FFC80B;
  color: #000;
}

#item .flex_item:nth-of-type(3) .name{
  font-size: 17px;
}

.flex_item{
  border-radius: 30px;
  background-color: #FFC80B;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 20px;
}

.flex_item:nth-of-type(n+5){
  background-color: #005599;
}

.flex_item{
  margin-bottom: 20px;
}

.flex_item:last-of-type{
  margin-bottom: 0;
  white-space: nowrap;
}

/*
.flex_item:nth-of-type(7), .flex_item:nth-of-type(8){
  margin-bottom: 0;
}
*/

/* <!-- .click_banner --> */

.click_banner{
  padding: 100px 0;
}

.click_banner_inner{
  background-color: #F26522;
  padding: 30px;
  border-radius: 40px;
  width: 800px;
  margin: 0 auto;
}

.click_banner p{
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
  font-size: 28px;
}

/* 在庫切れ商品のスタイル */
.flex_item.sold-out {
  background-color: #999999 !important; /* 明るめのグレー */
}

/* テキストを白色に変更 */
.flex_item.sold-out .sub_title h3,
.flex_item.sold-out .button .name,
.flex_item.sold-out .button .value,
.flex_item.sold-out .button .value span {
  color: #333333 !important; /* 濃いグレーで視認性向上 */
}

/* 在庫切れ商品の詳細ボタン */
.flex_item.sold-out .button .detail {
  background-color: #666666 !important; /* ミディアムグレー */
  color: #ffffff !important;
  pointer-events: none;
}

/* 在庫切れ商品のリンク無効化 */
.flex_item.sold-out > a {
  pointer-events: none;
  cursor: default;
}

/* 画像エリア全体を相対配置 */
.flex_item.sold-out .item_img {
  position: relative;
}

/* 画像の上にグレー半透明オーバーレイ */
.flex_item.sold-out .item_img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.7); /* グレー半透明 */
  z-index: 1;
}

/* 「完売しました」テキストオーバーレイ */
.flex_item.sold-out .item_img::after {
  content: 'ご好評につき\A完売いたしました';
  white-space: pre-wrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  line-height: 1.5;
  z-index: 2;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* 文字を読みやすく */
  background-color: #FFF;
  padding: 20px 10px;
  width: 75%;
  opacity: 0.9;
}



/* SP */

@media screen and (max-width: 520px) { /* SP */

.pc {
    display: none;
}

.sp {
    display: block;
}

.pane-main > div:last-child{
  padding-bottom: 0;
}

#miffy70th{
  padding-bottom: 0;
  background-image: none;
  background-attachment: scroll;
}

#mv {
  margin-bottom: 50px;
}

h1 {
  margin-bottom: 10px;
}

h2 {
  background-color: transparent;
  font-weight: normal;
}

.heading{
  margin-bottom: 30px;
}

/* <!-- #intro --> */


/* #intro{
  background-image: url(https://www.infirmiere.co.jp/stg/img/usr/feature/fea_miffy70th/heading_sp.png);
  padding: 30px;
  background-size: contain;
  background-position: center;
} */

#intro{
  margin-bottom: 50px;
}

.intro_inner{
  padding: 2.5vw;
}
.intro_img{
  top: 3vw;
}

#intro p{
  font-size: 12px;
  text-align: justify;
  padding: 5px 0;
  letter-spacing: 0;
}

#intro .flexbox{
  padding: 3vw;
}

#intro .flexbox p{
  margin-bottom: 5px;
  font-size: 8vw;
  margin-left: 3vw;
}

#intro .flexbox img{
  width: 8vw;
}

/* <!-- #item --> */

#item .name {
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-align: left;
}

#item .value {
  margin-top: 10px;
  font-size: 26px;
  line-height: 1;
}

#item .value span {
  font-size: 16px;
  letter-spacing: 0.01em;
}

#item .detail {
  margin-top: 10px;
  font-size: 20px;
  padding: 10px;
}

#item .sub_title h3{
  font-size: 17px;
  letter-spacing: 0.01em;
}

#item .flex_item{
  width: 100%;
  margin-bottom: 20px;
  }

  .flex_item:nth-of-type(-n+2){
    margin: 0;
  }

  .flex_item:nth-of-type(odd){
    margin-right: 0;
  }
	
  .flex_item:last-of-type{
  white-space: normal;
}

  .flex_container{
    display: block;
  }

  .flex_container a{
    color: #FFF;
  }

  .flex_contents{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    padding: 30px;
  }

  .title{
    padding: 20px;
    margin-bottom: 30px;
  }

  .title h2{
    font-size: 6.5vw;
  }

  /* <!-- .click_banner --> */

  .click_banner{
    padding: 30px 0;
  }

  .click_banner_inner{
    padding: 10px;
    border-radius: 20px;
    width: 100%;
  }

  .click_banner p{
    font-size: 4.5vw;
    line-height: 1.2;
    margin-bottom: 3px;
  }

/* 在庫切れ商品のスタイル */
  .flex_item.sold-out .item_img::after {
    font-size: 20px;
    line-height: 1.4;
  }
	
  .flex_item.sold-out .item_img::after{
    width: 90%;
  }

}