/* common */
:root {
  --black: #1A1C20;
  --red: #E60012;
  --purple: #833592;
  --pink: #E600B4;
}
html{
  font-size:62.5%;
}

body {
  font-family: "Zen Maru Gothic", serif;
  background-color:#ddd;
  color:#333;
}

a{
  cursor:pointer;
}

.main{
  width:375px;
  margin:0 auto;
  background-color:#fff;
}

.section-inner{
  padding:0 20px;
}

.marker{
  background: linear-gradient(transparent 60%, #ff9 60%);
  font-weight: 700;
}

.orange{
  color:#FF8C27;
}

.fz16{
  font-size: 1.6rem !important;
}

.fz18{
  font-size: 1.8rem !important;
}

.fz20{
  font-size: 2.0rem !important;
}

.fz24{
  font-size: 2.4rem !important;
}

.fz25{
  font-size: 2.5rem !important;
}

.fz30{
  font-size: 3.0rem !important;
}

.fw400{
  font-weight: 400 !important;
}

.fw500{
  font-weight: 500 !important;
}

.fw700{
  font-weight: 700 !important;
}

/* 導入 */

.intro{
  background-color: #FAFBF6;
  padding-top: 28px;
}

.intro-catch{
  padding:12px 18px;
  font-size: 1.6rem;
  font-weight: 500;
  border-top: 2px dashed #FBA5A4;
  border-bottom: 2px dashed #FBA5A4;
  margin-bottom: 28px;
}

.intro-balloon{
  margin-bottom: 40px;
}

.balloon-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.balloon-icon{
  width:50px;
  height:50px;
}

.balloon {
  padding: 12px 10px;
  position: relative;
  border-radius: 10px;
  border: 2px solid #FFDADA;
  background-color: #FFF;
  width: calc(100% - 66px);
}

.balloon.right{
  margin-left: 12px;
}

.balloon.left{
  margin-right: 12px;
}

.balloon.right::before {
  content: "";
  position: absolute;
  top: 30px;
  left: -8px;
  margin-top: -9px;
  border: 4px solid transparent;
  border-right: 8px solid #FFF;
  z-index: 2;
}

.balloon.right::after {
  content: "";
  position: absolute;
  top: 30px;
  left: -13px;
  margin-top: -10px;
  border: 5px solid transparent;
  border-right: 8px solid #F6D6FC;
  z-index: 1;
}

.balloon.left::before {
  content: "";
  position: absolute;
  top: 30px;
  right: -8px;
  margin-top: -9px;
  border: 4px solid transparent;
  border-left: 8px solid #FFF;
  z-index: 2;
}

.balloon.left::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -13px;
  margin-top: -10px;
  border: 5px solid transparent;
  border-left: 8px solid #F6D6FC;
  z-index: 1;
}

.balloon-txt{
  font-size: 1.5rem;
  font-weight: 500;
}

.intro-txt{
  font-size: 1.5rem;
  font-weight: 500;
}

.intro-txt p + p{
  margin-top: 7px;
}

.intro>img{
  width:335px;
  margin: 0 auto;
}

/* TOP3 */

.top3{
  padding-top: 20px;
}

.top3-title{
  padding: 0 4px 22px;
}

.top3-contents_wrapper{
  padding:0 15px 20px;
}

.top3-option_flex{
  display: flex;
}

.top3-option{
  display: flex;
  width:50%;
  border-radius: 10px 10px 0px 0px;
  padding:9px 0 2px 24px;
  align-items: center;
  cursor:pointer;

  img{
    width: 22.857px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 28px;
  }

  p{
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
  }

}

.top3-option.girl{
  background-color: #FEE1E1;

  p{
    color:#F46D6C;
  }
}

.top3-option.boy{
  background-color: #E6F5FF;

  p{
    color:#4C55DE;
  }
}

.top3-content{
  display: none;
  border-radius: 0px 0px 10px 10px;
}

.top3-content.active{
  display: block;
}

.top3-content{
  padding:10px 15px 15px;

  .bag-picture{
    width: 243.5px;
    height: 239px;
    display: block;
    margin:0 auto 10px;
  }

  .balloon-block{
    margin-bottom: 30px;
  }

  .balloon{
    padding-left: 40px;
  }
}

.top3-item + .top3-item{
  margin-top: 30px;
  border-top: 2px dashed #FBA5A4;
  padding-top: 30px;
}

.top3-item_catch{
  background-image: url(../img/cloud.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  padding:12px 0;
}

.top3-item_rank{
  display: flex;
  align-items:center;
  justify-content: center;
  margin-bottom: 10px;

    img{
    width: 50px;
    height: 32.051px;
    flex-shrink: 0;
    margin-right: 10px;
  }

  a{
    font-size: 2.9rem;
    font-weight: 700;
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }
}

.top3-point_block{
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 12px;

  li{
    display: flex;
    font-family: "Zen Maru Gothic";
    font-size: 1.4rem;
    font-weight: 400;
  }

  li + li{
    margin-top: 16px;
  }

  img{
    width: 28px;
    height: 28px;
    margin-right: 10px;
  }
}

.top3-price{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;

  img{
    display: block;
    margin-right: 10px;
    width:52px;
    height:50px;
  }

  p{
    font-size: 2.0rem;
    font-weight: 500;
  }
}

.top3-btn{
  border-radius: 10px;
  background: #74B853;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding:21px 18px;

  p{
    color: #FAFBF6;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-right: 10px;
  }

  img{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

.top3-btn + .balloon-block{
  margin-top: 30px;
}


.top3-content.girl{
  background-color: #FEE1E1;

  .top3-item_rank{
    a{
      color: #F46D6C;
    }
  }

  .top3-point_block{
    border: 2px solid #FBA5A4;
  }
}

.top3-content.boy{
  background-color: #E6F5FF;

  .top3-item_rank{
    a{
      color: #4C55DE;
    }
  }

  .balloon{
    padding-left: 35px;
  }
  .top3-point_block{
    border: 2px solid #6398F4;
  }

  .top3-item_catch{
    background-image: url(../img/cloud02.png);
  }

  .top3-item + .top3-item {
    border-top: 2px dashed #6398F4;
}
}

/* 徹底比較 */

.compare{
  background-color: #FAFBF6;
  padding: 20px 0;

  .section-inner{
    padding:0 7px;
  }
}

.compare-title{
  padding:0 4px;
  margin-bottom: 20px;
}

.compare-txt{
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 30px;
  padding-left: 20px;
  margin-bottom: 20px;
}

.compare-option_flex{
  display: flex;
}

.compare-option{
  width: calc(100% / 3);
  border-radius: 10px 10px 0px 0px;
  padding: 9px 0;
  align-items: center;
  cursor: pointer;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
}

.compare-option.design{
  color:#FF8C27;
  background: #FBF7CD;
}

.compare-option.spec{
  color:#F46D6C;
  background: #FFE7E6;
}

.compare-option.price{
  color:#5981C8;
  background: #CFE1FF;
}

.compare-content{
  display: none;
  padding:25px 8px 14px;
  border-radius: 0 0 10px 10px;
}

.compare-content.active{
  display: block;
}

.compare-content.design{
  background: #FBF7CD;


  .brand-name{
    background:#FEC540;
    border-radius:10px 10px 0 0;
    color: #FFF;
    text-align: center;
    font-size: 2.3rem;
    font-weight: 700;
    padding:15px;
  }

  .brand-content{
    padding:20px 12px;
    background:#FFF;
    border-radius:0 0 10px 10px;
  }

  ul{
    padding:15px 0 20px;

    li{
      display: flex;
      align-items: flex-start;

      img{
        width: 22px;
        height: 22px;
        display: block;
        margin-right: 8px;
      }

      p{
        color: #000;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 20px;
      }
    }

    li + li{
      margin-top: 10px;
    }
  }


.compare-btn{
  border-radius: 30px;
  width:270px;
  background: #5FB237;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding:10px 18px;
  margin:0 auto;

    p{
      color: #FFF;
      text-align: center;
      font-size: 2.0rem;
      font-weight: 700;
      margin-right: 10px;
    }

    img{
      width: 8px;
      height: 12px;
      flex-shrink: 0;
    }
  }

  .compare-item + .compare-item{
    margin-top: 19px;
  }
}

.compare-content.spec,
.compare-content.price{
  background-color: #FFE7E6;
  padding:20px 4px 14px;

  table{
    background: #FFF;
    border:4px solid #FFDFDE;
    border-radius:10px;
    width:100%;
    padding:0 4px;
    border-collapse: separate;

    border-spacing: 0;

    img{
      width:60px;
      max-height:70px;
      margin:0 auto;
    }

    thead{
      color:#F46D6C;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 120%;
      text-align: center;

      th{
        border-bottom:1px solid #FFE7E6;
      }

      tr{
        height:44px;
      }

    }

    th{
      a{
        text-decoration: none;
      }
        p{
          color: #F46D6C;
          font-size: 1.2rem;
          font-style: normal;
          line-height: normal;
          text-decoration-line: underline;
          text-underline-position: from-font;
        }
    }


    td,th{
      border-bottom:1px dashed #FFE7E6;
    }

    tr{
      padding:20px 0;
    }

    td{
      text-align: center;
      padding:16px 0;
    }

    .spec-weight{
      color: #F46D6C;
      font-size: 1.2rem;
      font-weight: 700;
      border-radius: 6px;
      background: #FFE7E6;
      width:60px;
      padding:10px;
      height:74px;
    }

    .spec-feature{
      color: #F46D6C;
      font-size: 1.3rem;
      font-weight: 700;
      border-radius: 6px;
      background: #FAFBF6;
      width:66px;
      padding:10px 5px;
      border: 2px solid #FFE7E6;
      height:74px;
      display: flex;
      align-items: center;
    }

    .spec-function{
      color: #F46D6C;
      font-size: 1.0rem;
      font-weight: 700;
      border-radius: 6px;
      background: #FFE7E6;
      width:110px;
      padding:10px 5px;
      height:74px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

  }
}

.compare-content.price{
  background-color: #CFE1FF;

  table{
    border:4px solid #DAE8FF;

    img{
      width:60px;
      max-height:70px;
      margin:0 auto;
    }

    thead{
      color:#6398F4;

      th{
        border-bottom:1px solid #CFE1FF;
        width:33.3%;
      }

    }

    td,th{
      border-bottom:1px dashed #CFE1FF;
    }

    .price-price{
      color: #FF8C27;
      font-size: 1.2rem;
      background: #FFFFCF;
      width:86px;
      border: 2px solid #FEC540;
      height:84px;
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 700;
      margin:0 auto;

      img{
        width:29px;
        height:29px;
      }

      p{
        margin-top: 2px;
      }
    }

    .price-insure{
      max-width:38px;
      max-height:55px;
      display: block;
      margin:0 auto;
    }

  }
}

/* いつ買った？ */

.season-title{
    padding: 0 4px 22px;
}

.season-balloon{
  text-align: center;
}

.balloon-circle {
  position: relative;
  display: inline-block;
  padding: 0 5px;
  width: 75px;
  height: 75px;
  line-height: 75px;
  text-align: center;
  color: #FFF8F7;
  font-size: 1.6rem;
  font-weight: 700;
  background: #FBA5A4;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon-circle:before {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 60%;
  margin-left: -15px;
  border: 6px solid transparent;
  border-top: 15px solid #FBA5A4;
  z-index: 0;
}

.season-dot{
  display: block;
  margin:0 auto;
  width:5px;
  margin-top: 9px;
}

.season {
  .section-inner{
    padding:0 13px 95px;
    position:relative;

    .season-result{
      position:absolute;
      bottom:8px;
      left:13px;
      right:0;
      width:345px;
    }
  }
  .balloon.left::before,
  .balloon.left::after{
    top:50px;
  }
}

/* 実際の声 */

.voice{
  background: #FFF8F7;
  margin:0 5px 15px;
  border-radius: 4px;

}

.voice-title{
  width:226px;
  margin:0 auto;
  padding:15px 0 8px;
  display: block;
}

.comments{
  overflow: auto;
  height: 365px;
  border: 3px solid #FFE7E6;
  background-color: #fff;
  border-radius: 10px;
  padding:0 15px;

  p{
    span{
      font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
    }
  }
}

.comment-box{
  padding:15px 0;

  img{
    width:38px;
    margin-right: 25px;
  }
}

.comment-icon{
  display: flex;
  align-items: center;
}

.comment-name>p{
  font-size: 1.8rem;
  font-weight: 500;
}

.comment-season{
  display: flex;
  color:#F46D6C;
  font-size: 1.6rem;
  font-weight: 700;

  p + p{
    margin-left: 22px;
  }
}

.comment-box>p{
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 10px;
}

.comment-box + .comment-box{
  border-top:2px dashed #fad2cf;
}

/* スケジュール */

.schedule{
  background-color: #F3FFF1;

  .balloon-block{
    margin:0 22px;

    .balloon.right::before,
    .balloon.right::after{
      top:50px;
    }
  }
}

.schedule-title{
  padding:15px 4px 20px;
}

.schedule-wrapper{
  margin: 20px 5px 0;
  border-radius: 4px;
  background: #C2EDB9;
  position: relative;
  padding:20px 18px;
}

.schedule-wrapper>img{
  position: absolute;
  top:-20px;
  right:0;
  width:36px;
  height:36px;
}

.schedule-box{
  padding: 13px 8px;
  border-radius: 10px;
  border: 3px solid #ACDBA2;
  background: #FFF;

  p + p{
    border-top:2px dashed #ACDBA2;
  }
}

.schedule-box + .schedule-box{
  margin-top: 10px;
}

/* ハイライト表示用のクラス */
.schedule-box.highlight {
  background-color: #FBF7CD;
}

.schedule-age{
  color: #2BC167;
  font-size: 1.7rem;
  font-weight: 700;
  padding-bottom:4px;
}

.schedule-topic{
  font-size: 1.6rem;
  font-weight: 400;
  padding-top:4px;
}

.schedule-balloon{
  padding:18px 0 20px;

  .balloon-block + .balloon-block{
    margin-top: 20px;
  }
}

/* オンライン */

.online{
  padding:11px 0 0;
  text-align: center;

  .balloon-block{
    padding:20px 0 17px;
    width:332px;
    margin:0 auto;
  }

  .balloon-circle{
    width:60px;
    height:60px;
    line-height:60px;
    font-size: 1.6rem;
    background:#6398F4;
  }

  .balloon-circle:before{
    bottom: -14px;
    left: 62%;
    border-top: 15px solid #6398F4;
  }
}

.online-title{
  padding:0 4px;
}

.online-risk{
  background-image: url(../img/online-bg.png);
  background-size: cover;
  height:363px;
}

.online-risk>p{
  color: #6398F4;
  font-size: 2.0rem;
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 14px;
}

.online-risk_image{
  display: flex;
  padding:0 10px;
  justify-content: space-between;
}

.risk-image_block{
  border-radius: 10px;
  border: 3px solid #D5E5FF;
  background: #FFF;
  padding:10px 5px;
  width:calc((100% - 12px)/2);

  p{
    color: #0D1F3E;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
  }
}

/* .risk-image_block + .risk-image_block{
  margin-left: 12px;
} */

.online-flow{
  background-image: url(../img/online-bg02.png);
  background-size: cover;
  padding:16px 15px 0;
}

.online-flow>p{
  margin-bottom: 16px;
}

.online-cloud{
  background-image: url(../img/cloud.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 1.8em;
  font-weight: 500;
  padding:12px 0;
}

.online-illust3{
  width: 169px;
  height: 142px;
  display: block;
  margin:0 auto 16px;
}

.online-illust4{
  width: 197px;
  height: 163px;
  display: block;
  margin:0 auto 16px;
}

.online-result p{
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 4.8px;
}

.online-point{
color:  #FF8C27; /* オレンジ色 */
font-family: "Zen Maru Gothic", sans-serif;
font-size: 2.3rem !important;
font-style: normal;
letter-spacing: 0 !important;
font-weight: 900 !important;
line-height: normal;
/* 白い縁取りを設定 */
-webkit-text-stroke-width: 1px; /* 縁取りの幅 */
-webkit-text-stroke-color:  #FAFBF6; /* 縁取りの色 */
/* テキストのシャドウ（影）を設定 */
text-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
}


.online-bottom{
  padding:20px 10px;

  .balloon{
    padding:5px 10px;
  }

  .balloon-txt{
    text-align: left;
    font-size: 1.5rem;
  }

  .balloon.left::before,
  .balloon.left::after{
    top:44px;
  }
}

.cloud-yellow{
  background-image: url(../img/cloud-yellow.png);
  background-size: cover;
  padding:53px 43px 52px;
  width:340px;
  height:202.37px;
  margin:0 auto 14px;

  p{
    font-size: 1.9rem;
    font-weight: 400;
    text-align: left;
    position: relative;
  }

  .supplement{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 600;
    bottom:-5px;
    right:39px;
    color:#FF8C27;
    -webkit-text-stroke-width:0.45px;
  }
}

.caution{
  color: #000;
  font-size: 1.0rem;
  font-weight: 400;
  text-align: left;
  padding:0 10px;
}

.online-btn_block{
  border-radius: 10px;
  border: 2px solid#FBA5A4;
  position: relative;
  padding:30px 0 10px;
  margin-top: 30px;
}

.online-btn_ttl{
  position: absolute;
  top:-15px;
  padding:3px 0;
  left:0;
  right:0;
  border-radius: 4px;
  background: #FBA5A4;
  color: #FAFBF6;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  width:316px;
  margin:0 auto;
}

.online-btn{
  border-radius: 30px;
  background: #5FB237;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding:7px 0;
  width:240px;
  margin:0 auto;

  p{
    color: #FAFBF6;
    text-align: center;
    font-size: 2.0rem;
    font-weight: 700;
    margin-right: 20px;
  }

  img{
    width: 8px;
    height: 13px;
  }
}

.online-btn + .online-btn{
  margin-top: 20px;
}

/* 人気のランドセル */

.pop-title{
  padding:11px 4px 0;
  margin-bottom: 20px;
}

.pop{

  .balloon{
    padding:12px 8px;
  }

  .balloon-block{
    padding:0 23px;
  }
}

.pop-contents_wrapper{
  padding:0 7px 40px;
}

.pop-option_flex{
  display: flex;
}

.pop-option{
  display: flex;
  width:50%;
  border-radius: 10px 10px 0px 0px;
  padding:9px 0 2px 24px;
  align-items: center;
  cursor:pointer;

  img{
    width: 22.857px;
    height: 32px;
    flex-shrink: 0;
    margin-right: 28px;
  }

  p{
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
  }

}

.pop-option.girl{
  background-color: #FEE1E1;

  p{
    color:#F46D6C;
  }
}

.pop-option.boy{
  background-color: #E6F5FF;

  p{
    color:#4C55DE;
  }
}

.pop-content{
  display: none;
}

.pop-content.active{
  display: block;
}

.pop-item{
  padding:23px 13px 0;
  border: 3px solid #FEE1E1;
  border-bottom:none;
  border-top:none;
}

.pop-item_inner{
  padding-bottom: 23px;
  border-bottom:2px dashed #FBA5A4;
}

.pop-item:last-of-type .pop-item_inner{
  border-bottom:none;
}

.pop-item_rank{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;

  img{
    width: 50px;
    height: 32.051px;
    flex-shrink: 0;
    margin-right: 10px;
  }

  p{
    font-size: 2.9rem;
    font-weight: 700;
    text-align: center;
  }
}

.pop{

  .bag-picture{
    max-height:280px;
    margin:0 auto 11px;
  }

  .bag-row_picture{
    padding:0 16px;
    margin-bottom: 24px;
  }

}

p.pop-item_txt{
  font-size: 1.5rem;
  font-weight: 500;
  padding:0 7px;
  margin-bottom: 24px;
}

.pop-content.girl{
.pop-item:nth-of-type(odd){
  background-color:#FEE1E1;
}

.pop-item:nth-of-type(even){
  background-color:#FFFAFA;
}

  .pop-item_rank{
    p{
      color:  #F46D6C;
    }
  }
}


table.pop-item_table{
  border: 1px solid #FBA5A4;
  border-radius:5px;
  border-spacing: 0;
  margin-bottom: 24px;

  th{
    width:80px;
    background: #FBA5A4;
    color:  #FAFBF6;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom:1px dashed #FAFBF6;
    position: relative;
  }

  td{
    border-bottom:1px dashed #FBA5A4;
    position: relative;
    background-color: #fff;
    padding:12px;
    font-size: 1.5rem;
    font-weight: 400;
    width:247px;
  }

  tr:last-of-type th,
  tr:last-of-type td{
    border-bottom:none;
  }

  tr:last-of-type td{
    border-radius:0 0 5px 0 ;
  }

  tr:first-of-type td{
    border-radius:0 5px 0 0;
  }

  tr:last-of-type th::before,
  tr:last-of-type th::after,
  tr:last-of-type td::before,
  tr:last-of-type td::after{
    display: none;
  }

  th::before {
    content: "";
    position: absolute;
    bottom: -1px; /* 線と同じ位置 */
    left: 0;
    width: 6px; /* 両端の隠す幅 */
    height: 1px;
    background-color: #FBA5A4; /* 背景色で線を隠す */
  }
  th::after {
    content: "";
    position: absolute;
    bottom: -1px; /* 線と同じ位置 */
    right: 0;
    width: 6px; /* 両端の隠す幅 */
    height: 1px;
    background-color: #FBA5A4; /* 背景色で線を隠す */
  }
  td::before {
    content: "";
    position: absolute;
    bottom: -1px; /* 線と同じ位置 */
    left: 0;
    width: 6px; /* 両端の隠す幅 */
    height: 1px;
    background-color: #FFF; /* 背景色で線を隠す */
  }
  td::after {
    content: "";
    position: absolute;
    bottom: -1px; /* 線と同じ位置 */
    right: 0;
    width: 6px; /* 両端の隠す幅 */
    height: 1px;
    background-color: #FFF; /* 背景色で線を隠す */
  }
  .star-rate{
    height:18px;
    margin:8px 0;
  }

  .pop-bag_color{
    height:160px;
  }

}

.pop-item:last-of-type{
  border-radius: 0px 0px 10px 10px;
}

.pop-item_review{
  border-radius: 10px;
  background: #FBA5A4;
  padding:14px 15px;
  margin-bottom: 24px;
}

.pop-review_title{
  margin-bottom: 14px;
}

.pop-review_block{
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 2px solid #FFD0CF;
  background: #FFF;
  padding:15px 6px;
}

.pop-review_block + .pop-review_block{
  margin-top: 10px;
}

.pop-review_icon{
  width:60px;
  margin-right: 8px;

  p{
    text-align: center;
  }
}

.pop-review_txt{
  width:calc(100% - 60px);
}

.pop-review_txt p{
  align-self: stretch;
  font-size: 1.4rem;
  font-weight: 400;
}

.pop-review_txt p + p{
  margin-top: 6px;
}

.pop-item_btn{
  border-radius: 10px;
  background: #74B853;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding:21px 18px;
  margin:0 10px;

  p{
    color: #FAFBF6;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-right: 10px;
  }

  img{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

.pop-content.boy{

  .pop-item{
    border: 3px solid #E6F5FF;
    border-bottom:none;
    border-top:none;
  }

  .pop-item:nth-of-type(odd){
    background-color:#E6F5FF;
  }

  .pop-item:nth-of-type(even){
    background-color:#F7FCFF;
  }

  .pop-item_rank{
    p{
      color:  #4C55DE;
    }
  }

  table.pop-item_table{
    border-color:#6398F4;

    th{
      background:#6398F4;
    }

    th::before,
    th::after{
      background:#6398F4;
    }
    td{
      border-color: #6398F4;
    }
  }

  .pop-item_review{
    background:#6398F4;
  }

  .pop-review_block{
    border-color:#E6F5FF;
  }

  .pop-item_inner{
    border-color:#6398F4;
  }
}

/* リアルな口コミ */

.real-voice{
  padding:10px 4px;
}

.real-voice-balloon{
  padding:20px 18px;

  .balloon-block:nth-of-type(1) .balloon{
    padding-left:48px;
  }

  .balloon-block:nth-of-type(2) .balloon{
    padding-left:35px;
  }

  .balloon.right::before,
  .balloon.right::after{
    top:50px;
  }
}

.real-voice_collect{
  border-radius: 4px;
  background: #FFF4F4;
  padding:30px 6px;
}

.voice-collect_block{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.voice-collect_block + .voice-collect_block{
  margin-top: 10px;
}

.voice-collect_icon{
  width:71px;

  p{
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
  }
}

.voice-collect_txt{
  background: #FFF;
  padding:20px 11px;
  border-radius:10px;
  border:4px solid #FFE7E6;
  width:280px;

  p{
    font-size: 1.4rem;
    font-weight: 400;
  }

  p + p{
    margin-top: 8px;
  }
}

.voice-collect_theme{
  align-self: stretch;
  color: #F46D6C;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 13px;
}

/* 調査 */

.survey{
  padding:13px 0 20px;
}

.survey-title{
  padding:0 4px;
  margin-bottom: 20px;
}

.survey-data{
  padding:0 12px;
  margin-bottom: 20px;

  p{
    font-size: 1.2rem;
    font-weight: 400;
    margin-left: 8px;
  }
}

.survey-balloon{
  padding:0 15px;

  .balloon.left{
    padding:12px 34px;
  }

  .balloon.right::after,
  .balloon.right::before{
    top:50px;
  }
}

/* Q&A */

.qa{
  padding: 20px 15px;
  background: #FAFBF6;
}

.qa-title{
  padding:0 23px;
  margin-bottom: 19px;
}

.qa-block + .qa-block{
  margin-top: 24px;
}

.qa-block_q{
  padding: 10px;
  border-radius: 10px;
  background: #FFF;
  justify-content: center;
  align-items: center;
  width:292px;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 13px;
}

.qa-block:nth-of-type(1) .qa-block_q{
  border: 3px solid #FBA5A4;
  color: #F46D6C;
}

.qa-block:nth-of-type(2) .qa-block_q{
  border: 3px solid #FEC540;
  color: #FEC540;
}

.qa-block:nth-of-type(3) .qa-block_q{
  border: 3px solid #2BC167;
  color: #2BC167;
}

.qa-block:nth-of-type(4) .qa-block_q{
  border: 3px solid #6398F4;
  color: #6398F4;
}

.qa-block_a{
  position: relative;
  display: flex;
  padding: 20px 10px;
  border-radius: 10px;
  border: 3px solid #FFE7E6;
  background: #FFF;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;

  p,li{
    font-size: 1.5rem;
    font-weight: 400;
  }

  ul{
    padding: 8px 3px;
    border-radius: 4px;
    border: 3px solid #FFE7E6;
    background: #FAFBF6;

    li + li{
      margin-top: 4px;
    }
  }
}

.qa-icon{
  position:absolute;
  width:47px;
  right:-5px;
  top:-86px;
}

/* 購入までの流れ */

.flow{
  padding:13px 0 20px;
}

.flow-title{
  padding:0 4px;
  margin-bottom: 20px;
}

.flow-balloon{
  padding:0 20px;

  .balloon::before,
  .balloon::after{
    top:50px;
  }
}

.flow-content{
  background-image: url(../img/flow-bg.png);
  background-size: cover;
  margin:0 15px 30px;
  height:928px;
}

.flow-content_block{
  padding:14px 25px;

  img{
    margin:0 auto;
    display: block;
  }

  .flow-illust01{
    width:161px;
  }

  .flow-illust02,
  .flow-illust04{
    width:180px;
  }

  .flow-illust03{
    width:210px;
  }
}

.flow-content_block + .flow-content_block{
  margin-top: 10px;
}

.flow-content_block:nth-of-type(3){
  margin-top: 18px;
}

.flow-content_block:nth-of-type(4){
  margin-top: 18px;
}

.circle-number{
  height:24px;
  width:24px;
  border-radius:50%;
  line-height:22px;
  background:#FF8C27;
  text-align:center;
  color:#FFF;
  font-size: 2.2rem;
  font-weight: 700;
  margin-right: 10px;
}

.flow-topic{
  display: flex;
  align-items: center;
}

.flow-topic>p{
  color:#FF8C27;
  font-size: 1.8rem;
  font-weight: 700;
}

/* bottom */

.bottom{
  padding:20px 0;

  .balloon-txt{
    font-size: 1.7rem;
  }

  .balloon{
    padding:12px 18px;
  }
}

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

.bottom-inner{
  padding:0 30px;
}

.bottom-btn_block{
  p{
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 6px;
  }
}

.bottom-btn{
  border-radius: 10px;
  background: #74B853;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding:21px 18px;
  margin-bottom: 20px;

  p{
    color: #FAFBF6;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-right: 10px;
  }

  img{
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }
}

.specified{
  display: block;
  text-align: center;
  font-size: 1.0rem;
  margin-top: 16px;
}