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

.dentistarPage{
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    font-style: normal;
    font-size: 16px;
    color: #63050a;
    max-width: 1000px;
    margin: 0 auto;
    background-color: #f0fcff;
}

.onlysp{
    display: none;
}

.onlypc{
        display: block;
    }

.dentistarPage div{
   
}

img{
    display: block;
}

.dentistarPage h1,h2,h3,h4,h5{
    font-weight: 100;
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-decoration: none;
}

.dentistarPage ul{
    list-style-type: none;
}

.noclick_bg{
    pointer-events: none;
}


.den_kv {
    position: relative;
    margin: 0px;
    padding: 0px;
    font-weight: 0;
    font-size: 0;
}

.den_kv_obj {
    position: absolute;
    left: 5.8%;
    bottom: 11.53%
}

.den_kv_message {
    position: relative;
}

.kv_m_01 {
    position: absolute;
    font-size: 1.0625em;
    left: 26.27272727%;
    width: 15%;
    line-height: 147%;
    top: -1.567%
}

.kv_m_02 {
    position: absolute;
    right: 14.36363636%;
    font-size: 1.0625em;
    width: 16%;
    line-height: 147%;
    top: 14%;
}

.den_order_blue {
    background-color: #f0fcff;
    margin-bottom: 100px;
}

.order_blue_titleArea {
    position: relative;
    margin-bottom: 20px;
}

.order_title {
    position: absolute;
    top: 17%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
}

.order_title_normal{
    margin: 20px auto;
    text-align: center;
}

.order_title p{
    margin: 0;
    padding: 0;
}

.title_littleText {
    font-size: 1.5em;
    margin: 0px;
}

.title_bigText {
  font-size: 1.875em;
  font-weight: bold;
  line-height: 1.8;
  color: #6b1c1c;
  margin: 0px;
}

.title_bigText span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.title_bigText span::before {
  content: "";
  position: absolute;
  bottom: 0.1em;
  left: 0;
  width: 100%;
  height: 0.6em;
  background-color: #eac1a5;
  z-index: -1;
}

.title_bigText_bl {
  font-size: 1.875em;
  font-weight: bold;
  line-height: 1.8;
  color: #6b1c1c;
  margin: 0px;
  text-align: center;
}

.title_bigText_bl span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.title_bigText_bl span::before {
  content: "";
  position: absolute;
  bottom: 0.1em;
  left: 0;
  width: 100%;
  height: 0.6em;
  background-color: #b6d0fc;
  z-index: -1;
}



.offer_den_item {
  width: 30%;
  text-align: center;
  position: relative;
}

.item_title {
  font-weight: bold;
  font-size: 1em;
  color: #fff;
  margin-bottom: 0.5em;
  border-radius: 8px;
  margin-bottom: 20px;
}

.item_image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1.8em;
}

.item_badge {
  position: absolute;
  bottom: 31%; /* 必要に応じて調整 */
  right: -8%;

}

.detail_btn {
  display: block;
  background-color: #f6a800;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0.4em;
    margin-bottom: 1em;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
    font-size: 1.2em;
}

.buy_btn {
  display: block;
  background-color: #e6003f;
  color: #fff;
  padding: 0.5em 1em;
  margin: 0.4em;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
    font-size: 1.2em;
}


.item_title_bgc1 {
    background-color: #c19c8b;
}

.item_title_bgc2 {
    background-color: #d0b777;
}

.item_title_bgc3 {
    background-color: #b0a6d0;
}

.title_lineTitle {
    line-height: 1.5;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
}

.tileline_den {
    margin: 0 auto 10px auto;
}

.nayami_block {
    position: relative;
}

.nayamiText {
    font-size: 1.5em;
    display: inline-block;
    position: absolute;
    line-height: 1.3;
}

.naPosi_01 {
    left: 24.1%;
    top: 33.1%;
}

.naPosi_02 {
    right: 30.2%;
    bottom: 18.9%;
}

.naPosi_03 {
    top: 0.1%;
    left: 27.8%;
}

.naPosi_04 {
    right: 23.2%;
    bottom: 41.6%;
}

.babysyabu_Text {
    background-color: #f9db98;
    border-radius: 30px;
    padding: 40px 25px !important;
}

.syabu_title {
    font-size: 1.3em;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 15px;
}

.saybu_mainText {
    font-size: 1.3em;
    line-height: 1.5;
}

.babysyaburi {
    width: 86%;
    margin: 50px auto !important;
}

.reazun_title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    max-width: 748px;
    margin: 0 auto;
    align-items: center;
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
}

.sizeUp_title {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 748px;
    margin: 0 auto;
    align-items: center;
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
}

.reazun_text01 {
    width: 57.9%;
    font-size: 1.8em;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    margin: 0px;
}

.sizeUp_text01 {
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0px;
}


.reazun_image {
    width: 39.4%;
}

.reazun_text02 {
    font-size: 1.8em;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}


.sizeUp_text02 {
    font-size: 1.6em;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}

.reazun_img {
    max-width: 300px;
    height: auto;
}

.reazun_area {
    position: relative;
}

.reazun_reazun {
    background-color: #fff8d9;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 30px;
}

.rr_img {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 748px;
    margin: 30px auto;
    
}

.rr_img_img {
    width: 45%;
    height: auto;
}

.rr_ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rr_li {
  display: flex;
  align-items: center;  
  margin-bottom: 20px;
}

.red_roundmark {
  min-width: 36px;
  min-height: 36px;
  background-color: #c3002f;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-size: 1.3em;
  margin-right: 1em;
  flex-shrink: 0;
}

.li_text {
  color: #600000;
  font-size: 1.3em;
  line-height: 1.5;
  margin: 0;
}

.den_qaset {
  border-bottom: 1px solid #63050a;
  padding: 1em 0;
  font-size: 1.3em;
}

.den_q {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-weight: bold;
  color: #63050a;
  width: 100%;
}

.round_q {
  background-color: #63050a;
  color: #fff;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  line-height: 1.5em;
  font-weight: bold;
  flex-shrink: 0;
}

.den_q_q {
  font-size: 1em;
}

.den_a_wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.3s ease;
  padding-left: 2.2em;
}

.den_qaset.active .den_a_wrap {
  max-height: 1000px;
  padding-top: 0.5em;
}

.den_a {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  color: #63050a;
  line-height: 1.6;
}

.round_a {
  background-color: transparent;
  border: 2px solid #63050a;
  color: #63050a;
  border-radius: 50%;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  line-height: 1.4em;
  font-weight: bold;
  flex-shrink: 0;
}

/* 背景の半透明グレー */
.shopfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* モーダル本体 */
.chooseshop {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 90vw;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-sizing: border-box;
}

/* タイトル */
.shopfield_title {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

/* ショップリンク */
.shoplink {
  display: inline-block;
  margin: 1rem;
  width: 80%;
  max-width: 300px;
}

.shoplink img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* 閉じるボタン */
.shopclose {
  margin-top: 2rem;
  background-color: #ccc;
  border: none;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 0.5rem;
}



.reazun_risk {
    margin: 60px auto;
}

.risk_video {
    width: 80%;
    background-color: #b0a6d0;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 30px 0px 60px 0px;
    border-radius: 25px;
}

.rise_title {
    width: 100%;
    text-align: center;
    padding: 15px 0px;
    font-weight: 600;
    font-size: 1.4em;
    margin-bottom: 15px;
}

.youtubevideo {
    width: 100%;
    display: block;
    
}

.video_box {
    width: 80%;
    margin: 0 auto;
}

.sizeUp_2type {
    background-color: #f6ffe1;
    padding-bottom: 60px;
    
}

.sizeUp {
    max-width: 748px;
    margin: 0px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.sizeUp div{
    margin-bottom: 15px;
}

.st_33 {
    width: 33.333%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.4;
}

.st_33img {
    width: auto;
    padding: 10px 0px;
}

.offer_den　p_20 {
    padding-top: 20%;
}

.onlyoffer {
    padding: 50px 0px 60px 0px;
}

.heath_body {
    position: relative;
}

.hb_mark {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    position: absolute;
    top: 4%;
    right: 0%;
    left: 11%;
    
}

.hb_mark_logo {
    width: 22%;
    margin-right: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hb_text {
    display: flex;
    font-size: 1.3em;
    line-height: 1.3;
    text-align: justify;
    width: 70%;
    text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}

.whshb {
    width: 53%;
    background-color: #306db5;
    border-radius: 20px;
    padding: 10px;
    color: #FFFFFF;
    position: absolute;
    left: 5%;
    bottom: 6%;
}

.whshb_title {
    font-weight: 600;
    font-size: 1.2em;
    text-align: left;
}

.whshb_text {
    font-size: 1em;
    line-height: 1.6;
    text-align: justify;
    padding-bottom: 10px;
    margin: 0;
}

.use_title {
    position: relative;
}

.use_body {
    position: relative;
}

.biko {
    position: absolute;
    left: 11%;
    bottom: 4%;
    font-size: 14px;
}

.t30 {
    top: 30%;
}

.QA_title {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 748px;
    margin: 60px auto 30px auto;
    align-items: center;
    
}


.den_qaarea {
    width: 80%;
    margin: 30px auto 0 auto;
}

.den_QA {
    margin-bottom: 60px;
}

.footeroffer_title {
    position: relative;
    margin-bottom: 20px;
}

.footeroffer {
    background-color: #fff8d9;
}

@media screen and (min-width: 769px){
    .offer_den {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  list-style: none;
    width: 90%;
    margin: 0 auto;
}
    
}


@media screen and (max-width: 768px) {
    img{
        display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
    }
    .dentistarPage{
        width: 100%;
        overflow-x: hidden;
    }
    
    .onlypc{
        display: none;
    }
    
    .onlysp{
    display: block;
}
    
    .kv_m_01 {
    position: absolute;
    font-size: 4vw;
    left: 54.272727%;
    width: 38%;
    line-height: 127%;
    top: -1.967%;
}
    
    .kv_m_02 {
    position: absolute;
    right: 9.463636%;
    font-size: 4vw;
    width: 45%;
    line-height: 147%;
    top: 54%;
}
    .title_littleText {
    font-size: 5vw;
    margin: 0px;
}
    .title_bigText {
    font-size: 6vw;
    font-weight: bold;
    line-height: 1.8;
    color: #6b1c1c;
    margin: 0px;
}
    
    .order_title {
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
}
    
    .slider-container{
        overflow: visible;
    }
    
    /* スライダーの外枠 */
 .offer_den {
    display: flex;
    overflow-x: auto;
     white-space: nowrap;
     width: 100%;
    padding: 20px 0;
    scroll-snap-type: x mandatory; 
  -webkit-overflow-scrolling: touch; 
    list-style: none;
    margin: 0 auto;
}
    
    .offer_den_item {
        flex: 0 0 auto;
    width: 80%;
    text-align: center;
    position: relative;
     scroll-snap-align: start; 
       padding-left: 8vw;
}
    
.offer_den::-webkit-scrollbar {
  display: none;
}
    
       .detail_btn {
    display: block;
    background-color: #f6a800;
    color: #fff;
    padding: 0.3em 1em;
    margin: 0.4em;
    margin-bottom: 1em;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}
    .buy_btn {
    display: block;
    background-color: #e6003f;
    color: #fff;
    padding: 0.4em 1em;
    margin: 0.4em;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}
    
    .item_badge {
    position: absolute;
    bottom: 31%;
    right: -8%;
    width: 21vw;
}

.title_lineTitle {
    line-height: 1.5;
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
}
    
    .reazun_title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
    align-items: center;
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
}
    
    .nayamiText {
    font-size: 4vw;
    display: inline-block;
    position: absolute;
    line-height: 1.3;
}
    
    .den_order_blue {
    background-color: #f0fcff;
    margin-bottom: 40px;
}
    
    .naPosi_01 {
    left: 27.2%;
    top: 26.6%;
}
    
    .naPosi_03 {
    top: 4.9%;
    left: 23.8%;
}
    
    .naPosi_04 {
    right: 21.2%;
    bottom: 41.2%;
}
    
    .naPosi_02 {
    right: 37.9%;
    bottom: 21%;
}
    
    .syabu_title {
    font-size: 5vw;
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 15px;
}
    .saybu_mainText {
    font-size: 4.4vw;
    line-height: 1.5;
}
    .reazun_image {
    width: 41.4%;
}
    
    .reazun_text01 {
    width: 57.9%;
    font-size: 5.2vw;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    margin: 0px;
}
    
    
    .reazun_text02 {
    font-size: 5.5vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}
    
    .rr_img_img {
    width: 49%;
    height: auto;
}
    
    
    
    
  .rr_li {
    flex-direction: row;
    align-items: flex-start;
              width: 95%;
        margin: 0 auto;
        margin-bottom: 20px;
  }

  .red_roundmark {
    min-width: 28px;
    min-height: 28px;
    line-height: 28px;
    font-size: 0.9em;
    margin-right: 0.5em;
  }

  .li_text {
    font-size: 1em;
  }
    
    .risk_video {
    width: 95%;
    background-color: #b0a6d0;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 10px 0px 44px 0px;
    border-radius: 25px;
}
    
    .rise_title {
    width: 95%;
    text-align: center;
    padding: 15px 0px;
    font-weight: 600;
    font-size: 5vw;
    margin-bottom: 15px;
}
    .video_box {
    width: 98%;
    margin: 0 auto;
}
    
    .sizeUp_text02 {
    font-size: 6vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0 auto;
}
    .sizeUp_text01 {
    font-size: 5vw;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    margin: 0px;
}
    
    .st_sp{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    width: 100%
    }
    
    .st_sp_text{
       font-size: 4vw;
    text-align: center;
    width: 49%; 
        line-height: 1.5;
        margin: 0;
    }
    
    .sizeUp_2type {
    background-color: #f6ffe1;
    padding-bottom: 17px;
}
    
    .onlyoffer {
    padding: 20px 0px 0px 0px;
}
    
    .title_bigText_bl {
    font-size: 6.7vw;
    font-weight: bold;
    line-height: 1.8;
    color: #6b1c1c;
    margin: 0px;
    text-align: center;
}
    
    .hb_mark {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 95%;
    position: absolute;
    top: 6%;
    right: 2%;
    /* left: 11%; */
}
    
    .hb_mark_logo {
    width: 35%;
    margin-right: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
    .hb_text {
    display: flex;
    font-size: 4.1vw;
    line-height: 1.3;
    text-align: justify;
    width: 60%;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    margin: 0px;
}
    
    .whshb {
    width: 90%;
    background-color: #306db5;
    border-radius: 20px;
    padding: 10px;
    color: #FFFFFF;
    position: absolute;
    left: 2.5%;
    bottom: -10%;
}
    
    .hb_mark {
        display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    width: 95%;
    position: absolute;
    top: 5%;
    left: 1%;
}
    .hb_mark_logo {
        width: 36%;
    margin-right: 6%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
    
    .hb_text {
        display: flex;
    font-size: 4vw;
    line-height: 1.3;
    text-align: justify;
    width: 56%;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    margin: 0;
}
    
    .heath_body{
        padding-bottom: 45px;
    }
    
    .whshb {
    width: 90%;
    background-color: #306db5;
    border-radius: 20px;
    padding: 10px;
    color: #FFFFFF;
    position: absolute;
    left: 2%;
    bottom: 6%;
}
    
    .whshb_title {
    font-weight: 600;
    font-size: 4vw;
    text-align: left;
}
    
    .fir_of_li{
        padding-left: 10%;
    }
    

    
    .whshb_text {
    font-size: 3.6vw;
    line-height: 1.6;
    text-align: justify;
    padding-bottom: 10px;
    margin: 0;
}
    
    .biko {
    position: absolute;
    left: 67%;
    bottom: 22%;
    font-size: 14px;
}
    
    
    
    
 .den_qaset {
    font-size: 1em;
    padding: 0.8em 0;
  }

  .round_q,
  .round_a {
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    font-size: 0.9em;
  }

  .den_q_q {
    font-size: 1em;
  }

  .den_a_wrap {
    padding-left: 1.8em;
  }

  .den_a {
    font-size: 1em;
    line-height: 1.5;
  }
    
    .den_qaarea {
    width: 90%;
    margin: 0 auto;
}
    
  .chooseshop {
    padding: 1.5rem;
  }

  .shopfield_title {
    font-size: 1rem;
  }

  .shoplink {
    width: 100%;
    margin: 0.5rem 0;
  }

  .shopclose {
    width: 100%;
    font-size: 1rem;
  }
    
}