/*    よみものページのCSS記述です    */


body {
  overflow-x: hidden;
}
.block-page-block--frame,
.block-page-block--frame:nth-child(odd) {
  padding: 0 10px 25px;
  margin: 0 auto 25px;
}
.container {
  width: 100%;
}


/*    画像サイズ指定 ダウンロード禁止   */
.block-page-block--frame img {
  height: auto!important;
  max-width: 600px!important;
  width: 100%!important;
  pointer-events: none; 
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}
/*    aタグダウンロード禁止解除   */
.block-page-block--frame a img {
  pointer-events: auto !important;
}

/*    ブロック配置指定    */
.block-page-block--contents-body-text-1column ol {
margin: 10px;
}
.block-page-block--contents-body-text-1column ol li {
  list-style: decimal;
  margin-left: 1em;
  font-weight: bold;
}
.block-page-block--contents-body-text-1column ol li span {
  font-size: 1em!important;
}

.block-page-block--contents-body-imgtext-1column {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: end;
}
.block-page-block--contents-body-imgtext-1column img {
  width: 30%!important;
  height: 100%!important;
}
.block-page-block--contents-body-imgtext-1column-text {
  width: 65%;
}

.block-page-block--frame .wrap_ {
  border: solid 10px #ffb6c1;
  width: 90%;
}

/*    アンカー指定    */
a.anchor {
  display: block;
  padding-top: 100px;
  margin-top: -100px;
}

/*    商品リスト指定    */
.block-page-block--contents-goodslist {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  max-width: 880px;
}
.js-enhanced-ecommerce-item {
  display: inline-block;
  width: 40% !important;
  margin-right: 20px;
}
.block-page-block--goods-name {
white-space: normal;
}

.frame{
height: none;
}




/*    ツール装飾指定    */
/*    太字    */
.block-page-block--frame strong {
  font-weight: bold;
}

/*    下線    */
u {
font-weight:bolder;
text-decoration: #fdd783;
background: linear-gradient(transparent 70%, #fdd783 60%);
padding: 0 3px;
}

/*    リスト    */
.block-page-block ul {
list-style-type: disc;
padding-left: 1em;
padding-inline-start: 35px;
}
.block-page-block li {
  list-style-type: disc;
}


/*    h1    */
.block-page-block--frame h1 {
margin: 14px 0;  
}
.block-page-caption h1 {
  margin: 22px 0 14px;
  text-align: left;
}
.block-topic-path {
margin-bottom: 0;
}


/*    h2    */
.block-page-block--frame h2{
  margin: 32px 0 24px 0;
  text-align: left;
}

/*    h3    */
.block-page-block--frame h3{
  margin: 24px 0;
}  
.block-page-block--frame h3:after{
box-sizing: border-box;
}


/*    h4    */
.block-page-block--frame h4 {
  margin: 16px 0;
}
.block-page-block--frame h4::before{
  margin-right: 10px;
  color: #222;
  background-color: #98D4B5;
  border-radius: 50%;
  padding: 3px;
  font-family: 'Material Symbols Rounded';
  content: 'Check';
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
/* .block-page-block--frame h4 + div {
width: 100%;
border-right: none!important;
padding: 1em!important;
margin-right: 0;
margin-bottom: 1em;
border-bottom: 1px dotted #009D91!important;
} */


/*    h5    */
.block-page-block--frame h5 {
  display: inline-flex;
  width: 100%;
  background-color: rgb(255 116 119 / 8%) !important;
  padding: 10px 30px;
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0 50px 0;
  min-height: 60px;

  border-radius: 20px;
}
.block-page-block--frame h5::before{
  font-family: 'Material Symbols Rounded';
  content: "error";
  font-variation-settings: 'FILL' 1;
  margin-right: 10px;
  color: lightpink;
}


/*    吹き出し    */
.yomimono-fukidasi {
position: relative;
padding: 0.4em 1.0em;
background: #98D4B5;
color: #222;
width: max-content;
}

.yomimono-fukidasi:after {
position: absolute;
content: '';
top: 98%;
left: 45%;
border: 10px solid transparent;
border-top: 12px solid #98D4B5;
width: 0;
height: 0;
} 


/*    記事リンク    */
.yomimono-check {
width: 100%;
border: 1px solid #e6e6e6;
margin: 0 auto;
list-style-type: none;
padding-inline-start: 10px !important;
padding: 16px 10px;
}
.yomimono-checklink {
display: none;
}
.yomimono-check-list {
display: grid;
grid-template-columns: 40% 60%;
width: 100%;
align-items: center;
}
.yomimono-check-list img{
grid-column: 1;
grid-row: 1/ 3;
}
.yomimono-check-list a{
  overflow: hidden;
  padding-left: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.yomimono-check-list::before {
content: "あわせて読みたい";
color: #222;
background-color: #98D4B5;
text-decoration: none;
width: fit-content;
padding: 0 5px;
margin-left: 10px;
margin-bottom: 8px;
}





/*    ラベル    */
.yomimono-ptlabel{
position: relative;
padding: 0 1em;
background: #98D4B5;
color: #222;
border-radius: 50em;
display: inline-block;
}

.yomimono-cm-label{
position: relative;
padding:0 1em;
background: #c5afc4;
color: #000;
border-radius: 50em;
display: inline-block;
}



/*    ポイント    */
.yomimono-point {
  width: 100%;
  padding: 0;
  margin: 0;
  border: transparent;
  }
ul.yomimono-point {
  list-style-type: none;
  padding-left: 0;
  padding-inline-start: 0;
  }
  .yomimono-point-list {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 1%;
  margin: auto;
  }
  .yomimono-point-list img{
  width: 15% !important;
  height: 15% !important;
  padding: 0px;
  margin-right: 15px;
  }


/*    記事監修フレーム    */
.kiji-frame{
  padding: 1em;
  margin: 0 0;
  background: #FFF;
  border: solid 1px #e6e6e6;
  border-radius: 15px;
}
.kansyu{
  font-weight: bold;
  color: #000;
  width: max-content;
  background: #98D4B5;
}
.kaita{
  font-weight: bold;
  color: #000;
  width: max-content;
  background: #fed8e0;
}
.writer{
  width: 100%;
  border: transparent;
}
ul.writer {
  list-style-type: none;
  padding-left: 0;
  padding-inline-start: 0;
}
.writer-list{
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  margin: 2% 0;
  border-bottom: solid 1px #ccc;
}
.writer-list img{
  width: 35% !important;
  height: 35% !important;
  margin: 2% 2% 2% 0;
  }
.writer-name{
  width: 70%;
  padding: 1%;
  white-space: nowrap;
}
li .comment{
  padding: 1%;
}
li.writer-list,
li.comment {
  list-style-type: none;
  }

/*    動画    */
iframe{
  height: auto !important;
  width: -webkit-fill-available;
  }
.youtube{
  aspect-ratio: 16/9 !important;
  }



/*    MioReha紹介   */  
.mioreha_referral {
  text-align: center;
  width: 100%;
  max-width: 600px;
  margin: 40px auto;
}
.mioreha_referral img {
  width: 100%;
  max-width: 600px;
}
.mioreha_referral .btn {
  margin: 0 auto 30px auto;
  width: 360px;
  display: block;
}  
.mioreha_referral a {
  text-decoration: none;
}

/*    コメントブロック    */  
.cmt-block_0 {
  width: 100%;
  max-width: 800px;
  align-items: center;
  margin: 48px auto;
  position: relative;
  background: #fff;
  padding: 15px;
}
.cmt-block_0 p {
  margin: 0; 
  padding: 0;
}


.cmt-block_1 {
  width: 100%;
  max-width: 800px;
  align-items: center;
  margin: 48px auto;
  position: relative;
  background: #fff;
  box-shadow: 0px 0px 0px 2px #222;
  padding: 15px;
}
.cmt-block_1:after{
  position: absolute;
  content: '';
  left: -3px;
  top: -3px;
  border-width: 0 0 20px 20px;
  border-style: solid;
  border-color: #ffdb88 #fff #ffdb88;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.cmt-block_1 p {
  margin: 0; 
  padding: 0;
}


.cmt-block_2 {
  width: 100%;
  max-width: 800px;
  align-items: center;
  margin: 48px auto;
  position: relative;
  background: #fdf9e6;
  box-shadow: 0px 0px 0px 5px #fdf9e6;
  border: dashed 2px white;
  padding: 15px;
}
.cmt-block_2:after{
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff388 #fff #fff388;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.cmt-block_2 p {
  margin: 0; 
  padding: 0;
}


.cmt-block_3 {
  width: 100%;
  max-width: 800px;
  align-items: center;
  margin: 48px auto;
  border: 2px solid #222222;
  border-radius: 5px;
  color: #222222;
}
.cmt-block_3 span {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -13px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #fff;
  color: #222222;
  font-weight: 600;
  vertical-align: top;
}
.cmt-block_3 span::before {
  width: 22px;
  height: 22px;
  content: '';
  background-image: url("/img/page_block/pen.png");
  background-size: cover;
}
.cmt-block_3 p {
  margin: 0;
  padding: 0 1.5em 1em;
}


/*    表示制御    */  
.pc_only {
  display: none;
}
.sp_only {
  display: block;
}






@media screen and (max-width:767px) { /* スクリーンサイズが767px以下の場合に適用 */
  
  /* .block-page-block--frame, .block-page-block--frame:nth-child(odd) {
      padding: 0 10px 25px;
      margin: 0 auto 25px;
  } */

  
  /* .block-page-block--contents-body-imgtext-1column {
      display: block;
  }
  .block-page-block--contents-body-imgtext-1column img {
      width: 50%!important;
      margin: 0 auto;
      display: block;
      padding: 10px 0;
  }
  .block-page-block--contents-body-imgtext-1column-text {
      width: 100%;
  } */
  
  /* .block-page-block--frame h2::after {
      display: none;
  } */
  /* #pane-footer-link .container {
      width: calc(100% - 20px);
  } */
  
  /* .block-page-block--frame h1 {
  font-size: 20px;
  } */
/* li p{
position: relative;
margin:0.5px;
padding:0 2%;
color: #000;
width:max-content;
font-size: 12px;
} */
}

/* ----------- PC_個別指定 ----------- */
@media screen and (min-width:767px) { /* スクリーンサイズが767px以上の場合に適用 */
/*    h1    */
  .block-page-caption h1 {
  margin: 48px 0 32px;
  }
/*    h2    */
.block-page-block--frame h2{
  margin: 48px 0 32px 0;
  }  
/*    h3    */
.block-page-block--frame h3{
  margin: 32px 0 24px 0;
  padding: 8px 0;
  }  
/*    h4    */
.block-page-block--frame h4 {
  margin: 16px 0 8px;
  padding: 8px 0;
  }
/*    スマホ用コンテンツ非表示    */
.sp_only {
  display: none;
  }
/*    ブロック指定    */ 
.block-page-block--frame .wrap_ {
  border: solid 20px #ffb6c1;
  border-radius: 25px;
  margin: 20px auto;
  padding: 10px 20px;
  width: 80%;
  }
/*    アイテム指定    */
.js-enhanced-ecommerce-item {
  width: 20% !important;
  }  
/*    記事監修    */
.kiji-frame {
  padding: 1.5em 3em;
  margin: 2em 0;
  }
.writer-list img {
  width: 20% !important;
  height: 20% !important;
  }
/*    あわせて読みたい    */
ul.yomimono-check {
  width: 70%;
  padding: 8px;
  margin: 24px auto;
  padding-inline-start: 8px;
  }
  .yomimono-check-list {
    grid-template-columns: 25% 75%;
  }
/*    ポイント    */
.yomimono-point {
  width: 800px;
  margin: 10px 30px;
  }
.yomimono-point-list img{
  width: 10% !important;
  height: 10% !important;
  }
}