@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
.page__inner{
		width:100vw;
	}
a{outline: none; text-decoration: none;}
a:focus{outline:none;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}
#pro_wrapper{
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;	
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
p, dl, dt, dd, ul li{
	margin: 0px;
	padding: 0px;
}
h4, h5{
	margin: 0px 0px 0px 0px;
	padding: 0px;
}
li{ list-style-type: none;}
 :root {
      --pink:           #ef5f87;
      --pink-light:     #fbeef3;
      --pink-mid:       #f9d0e6;
      --blue:           #0078cc;
      --blue-light:     #d6eaf8;
      --blue-bg:        #e8f4fb;
      --red-badge:      #e00;
      --green:          #2e7d32;
      --gray-bg:        #f5f5f5;
      --text:           #333;
      --text-light:     #555;
      --white:          #fff;
      --border:         #ddd;
      --box1-width:  600px;
      --content-width:  980px;
      --content-pad:    clamp(5%, calc((100% - var(--content-width)) / 2), 50%);
    }

    /* inner */
    .inner {
      max-width: var(--content-width);
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.7;
      font-size: 15px;
    }

    /* ===== mv ===== */
    .mv {
      background: var(--white);
      text-align: center;
      padding: 48px 0 40px;
    }
    .mv__inner {
      max-width: var(--content-width);
      width: 90%;
      margin: 0 auto;
    }
    .mv__title {
      font-size: clamp(24px, 5.5vw, 38px)!important;
      font-weight: 700;
      color: var(--pink);
      letter-spacing: .05em;
      margin-bottom: 20px;
    }

    /* mv__line */
    .mv__line {
      margin: 0 auto 32px;
      max-width: 540px;
    }
    .mv__line-img-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .mv__line-img-wrap img {
      width: 100%;
      max-width: 540px;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    /* mv__line-fallback */
    .mv__line-fallback {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .mv__line-fallback__line {
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, transparent, var(--pink) 20%, var(--pink) 80%, transparent);
    }
    .mv__line-fallback__arrow {
      width: 0;
      height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-top: 14px solid var(--pink);
    }

    .mv__subtitle {
      font-size: clamp(16px, 2.5vw, 18px)!important;
      color: var(--text);
      margin-bottom: 20px;
    }
    .mv__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;                    /* ← テキストと矢印の間隔 */
  background: var(--pink);
  color: var(--white)!important;
  border: 2px solid var(--pink);
  border-radius: 50px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  padding: 6px 18px;
  text-decoration: none!important;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.badge:hover {
  opacity: .88;
  transform: translateY(-2px);
}
.badge::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  margin-bottom: 3px;          /* ← 視覚的な上下中央調整 */
}

    /* ===== SECTION COMMON ===== */
    .section {
      padding: 48px 20px;
    }
    .section--gray { background: var(--gray-bg); }
    .section--blue { background: var(--blue-bg); }
    .section--pink { background: var(--pink-light); }
    .section--white { background: var(--white); }

    .section__inner {
      max-width: var(--content-width);
      width: 90%;
      margin: 0 auto;
    }

    .section__heading {
      text-align: center;
      font-size: clamp(16px, 3.5vw, 22px);
      font-weight: 700;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 8px;
    }
    .section__heading em {
      font-style: normal;
      color: var(--pink);
      font-size: clamp(20px, 4.5vw, 28px);
    }

    /* ===== DOSIMETER SECTION ===== */
    .dosimeter-section {
      background: var(--pink-light);
      padding: 40px 0;
    }
    .dosimeter-section__inner {
      max-width: var(--content-width);
      width: 90%;
      margin: 0 auto;
    }
    .dosimeter-section__heading {
      text-align: center;
      font-size: clamp(16px, 3vw, 20px);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .dosimeter-section__heading-large {
      text-align: center;
      font-size: clamp(19px, 4.5vw, 26px);
      font-weight: 700;
      color: var(--pink);
      margin-bottom: 28px;
    }

    /* dosimeter-block */
    .dosimeter-block {
      margin-bottom: 24px;
    }
    .dosimeter-block__label {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }

    /* dosimeter-figures */
    .dosimeter-figures {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    /* img-placeholder */
    .img-placeholder {
      background: #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      font-size: 12px;
      text-align: center;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    .img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
    }
    .img-placeholder .placeholder-text {
      position: relative;
      z-index: 1;
      padding: 8px;
    }

    /* figure-person */
    .figure-person {
      width: clamp(100px, 22vw, 160px);
      height: clamp(180px, 38vw, 280px);
    }

    /* badge-cards */
    .badge-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }
    .badge-card {
      background: var(--white);
      border: 2px solid var(--pink);
      border-radius: 8px;
      padding: 10px 14px;
      text-align: center;
      width: clamp(140px, 32vw, 200px);
    }
    .badge-card--yellow { border-color: #f0c000; }
    .badge-card__title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .badge-card__img {
      width: 100%;
      height: 60px;
      border-radius: 4px;
    }
    .badge-card__note {
      font-size: 11px;
      color: var(--pink);
      margin-top: 4px;
      font-weight: 700;
    }
    .badge-card--yellow .badge-card__note { color: #c8900a; }

    /* badge-cards-row */
    .badge-cards-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* dosimeter-cta-text */
    .dosimeter-cta-text {
      text-align: center;
      font-size: clamp(18px, 3.5vw, 24px);
      font-weight: 700;
      color: var(--pink);
      margin-top: 24px;
    }

    /* ===== CTA ===== */
    .cta-block {
      padding: 32px 20px 36px;
      text-align: center;
      background: var(--blue-bg);
    }
    .cta-block__inner {
      max-width: var(--content-width);
      width: 90%;
      margin: 0 auto;
    }
    .cta-block__label {
      font-size: 16px;
      color: var(--text);
      margin-bottom: 16px;
    　font-weight: 700!important;
    }
    .btn-cta {
  position: relative; /* ← 追加 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--blue);
  color: var(--white)!important;
  font-size: clamp(15px, 3vw, 18px);
  font-weight: 700;
  padding: 18px 48px;
  border-radius: 50px;
  text-decoration: none!important;
  min-width: clamp(240px, 60vw, 360px);
  transition: opacity .2s, transform .15s;
  box-shadow: 0 3px 12px rgba(26,110,200,.25);
}

.btn-cta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 27px;
  width: 12px;
  height: 12px;
  margin: auto;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.btn-cta:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,110,200,.3); }

/* PC表示時に460px */
@media screen and (min-width: 768px) {
  .btn-cta {
    min-width: 460px;
  }
}
@media (max-width: 480px) {
.btn-cta { padding: 18px 48px;}
}

    /* ===== LAW SECTION ===== */
    .law-section {
      background: var(--white);
      padding: 52px 0 30px;
    }
    .law-section__inner { max-width: var(--box1-width); width: 90%; margin: 0 auto; }
    .law-section__heading {
      text-align: center;
      font-size: clamp(16px, 2.8vw, 18px);
      font-weight: 700;
      margin-bottom: 28px;
      line-height: 1.7;
      color: var(--text);
    }
    .law-list {
      list-style: none;
      background: #fdf0f6;
      border-radius: 10px;
      padding: 20px 24px;
      margin-bottom: 24px;
    }
    .law-list__item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
      padding: 8px 0;
      border-bottom: 1px solid #f0d8e8;
      line-height: 1.7;
      color: var(--text);
    }
    .law-list__item:last-child { border-bottom: none; }
   .law-list__item::before {
      content: '';
      color: var(--pink);
      font-size: 10px;
      flex-shrink: 0;
      margin-top: 5px;
    }
    .law-note {
      background: var(--white);
      border: none;
      border-radius: 0;
      padding: 4px 0 0;
      font-size: 16px;
      line-height: 1.8;
      text-align: center;
      color: var(--text);
    }
    .law-note strong { color: var(--pink); font-weight: 700; }
@media screen and (max-width: 768px) {
  .law-list__sub {
    display: block;
    text-align: left;
  }
     .law-note {
      text-align: left;
    }
}
    /* ection-arrow */
    .section-arrow {
      background: linear-gradient(to bottom, var(--white) 50%, var(--pink-light) 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      overflow: hidden;
    }
    .section-arrow__shape {
      width: 150px;
      height: 60px;
      background: var(--white);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    /* ===== RING SECTION ===== */
    .ring-section {
      background: var(--pink-light);
      padding: 48px 0;
    }
    .ring-section__inner { max-width: var(--content-width); width: 90%; margin: 0 auto; }
    .ring-section__heading {
      text-align: center;
      font-size: clamp(16px, 3.5vw, 22px);
      font-weight: 700;
      margin-bottom: 28px;
      line-height: 1.5;
    }

    .ring-card {
      background: var(--pink-light);
      border-radius: 12px;
      padding: 24px 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: center;
      margin-bottom: 24px;
    }
    .ring-card__left { flex: 1 1 200px; }
    .ring-card__right { flex: 1 1 180px; }
    .ring-card__title {
      font-size: 14px;
      font-weight: 700;
      color: var(--pink);
      background: var(--white);
      display: inline-block;
      padding: 3px 10px;
      border-radius: 4px;
      margin-bottom: 12px;
    }
    .ring-card__img {
      width: 100%;
      height: 120px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    .ring-card__size {
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 4px;
    }
    .ring-card__size em {
      font-style: normal;
      color: var(--pink);
      font-size: 16px;
    }
    .ring-card__note {
      font-size: 11px;
      color: var(--text-light);
    }
    .ring-card__glove {
      font-size: 13px;
      font-weight: 700;
      margin-top: 12px;
      line-height: 1.6;
    }
    .ring-card__glove em { font-style: normal; color: var(--pink); }

    /* doctor illustration */
    .ring-doctor-img {
      width: 100%;
      max-width: 260px;
      height: 220px;
      display: block;
      margin: 0 auto;
      border-radius: 8px;
    }

    /* ===== BOTTOM NOTE ===== */
    .bottom-note {
      background: var(--white);
      padding: 48px 0 40px;
    }
    .bottom-note__inner { max-width: var(--content-width); width: 90%; margin: 0 auto; }
    .bottom-note__text {
      font-size: 18px;
      line-height: 2;
      margin-bottom: 8px;
      text-align: center;
    }
    .bottom-note__text strong { color: var(--pink); font-weight: 700; }
    .bottom-note__text--arrow {
      text-align: center;
      color: var(--text);
      font-size: 16px;
      line-height: 2;
      margin-bottom: 8px;
    }
    .bottom-note__ref {
      text-align: right;
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 24px;
    }

    .measurement-box {
      background: var(--white);
      border: 2px solid var(--pink);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 40px;
    }
    .measurement-box__header {
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
      background: var(--pink);
      display: block;
      width: 100%;
      padding: 10px 18px;
      text-align: left;
    }
    .measurement-box__body {
      font-size: 16px;
      line-height: 2;
      color: var(--text);
      padding: 18px 20px;
      text-align: left;
    }
    .measurement-box__body strong {
      font-weight: 700;
    }

    .final-cta-text {
      text-align: center;
      font-size: clamp(18px, 4vw, 22px);
      font-weight: 700;
      color: var(--pink);
      line-height: 1.6;
      margin-bottom: 32px;
    }
@media (max-width: 480px) {
       .bottom-note__text {
      text-align: left;
      font-size: 16px;
    }
    }
    /* ===== ring-img-wrap ===== */
    .ring-img-wrap {
      width: 100%;
    }
    .ring-img-wrap img {
      width: 80%;
      margin: 0 auto;
      height: auto;
      display: block;
      border-radius: 12px;
    }

    /* ring-img-placeholder　*/
    .ring-img-placeholder {
      background: var(--white);
      border: 2px dashed var(--pink);
      border-radius: 12px;
      padding: 28px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      text-align: center;
      position: relative;
    }
    .ring-img-placeholder__left {
      flex: 1 1 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .ring-img-placeholder__title {
      background: var(--pink);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      padding: 5px 14px;
      border-radius: 4px;
      width: 100%;
    }
    .ring-img-placeholder__ring-area {
      background: #f0e0ec;
      color: #999;
      font-size: 12px;
      width: 100%;
      height: 120px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ring-img-placeholder__arrow {
      font-size: 28px;
      color: var(--pink);
      font-weight: 700;
      flex-shrink: 0;
    }
    .ring-img-placeholder__right {
      flex: 1 1 180px;
      background: #f0e0ec;
      color: #999;
      font-size: 12px;
      height: 180px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ring-img-placeholder__note {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 11px;
      color: #bbb;
    }

    @media (max-width: 480px) {
      .ring-img-placeholder { flex-direction: column; }
      .ring-img-placeholder__arrow { transform: rotate(90deg); }
      .ring-img-wrap img { width: 100%;}
    }

    /* ===== DOSIMETER  ===== */
    .dosimeter-img-wrap {
      width: 100%;
      margin-bottom: 8px;
    }
    .dosimeter-img-wrap img {
      width: 80%;
      margin: 0 auto;
      height: auto;
      display: block;
      border-radius: 8px;
    }

    /* dosimeter-img-placeholder  */
    .dosimeter-img-placeholder {
      background: #f0e8f0;
      border: 2px dashed var(--pink);
      border-radius: 10px;
      padding: 24px 16px;
      text-align: center;
    }
    .dosimeter-img-placeholder__outer-label,
    .dosimeter-img-placeholder__inner-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 12px;
    }
    .dosimeter-img-placeholder__inner-label { margin-top: 16px; }
    .dosimeter-img-placeholder__figures {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .dosimeter-img-placeholder__person {
      background: #d8c8d8;
      color: #666;
      font-size: 12px;
      width: clamp(80px, 18vw, 130px);
      height: clamp(140px, 30vw, 210px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      text-align: center;
      padding: 8px;
    }
    .dosimeter-img-placeholder__badges {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dosimeter-img-placeholder__badges-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .dosimeter-img-placeholder__badge {
      background: var(--white);
      border: 2px solid var(--pink);
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--pink);
      padding: 10px 16px;
      min-width: 120px;
    }
    .dosimeter-img-placeholder__badge--yellow { border-color: #e0aa00; color: #b08000; }
    .dosimeter-img-placeholder__badge--pink   { border-color: var(--pink); color: var(--pink); }
    .dosimeter-img-placeholder__badge--blue   { border-color: var(--blue); color: var(--blue); }
    .dosimeter-img-placeholder__note {
      font-size: 11px;
      color: #999;
      margin-top: 12px;
    }

/*PCとSPで出しわける用*/
.pc {
    display: block;
  }
  .sp {
    display: none;
  }
  
@media screen and (min-width: 350px) and (max-width: 768px){
    .pc {
      display: none;
    }
    .sp {
      display: block;
    }
  }
@media screen and (min-width: 350px) and (max-width: 768px){

   .dosimeter-img-wrap img {
      width: 100%!important;
    }
	/*お問い合わせ*/
.btn-bg{
	background-color: #fde7f6;
	width: 100%;
}
.btn-box{
	margin: 0 auto;
	padding: 2rem 0;
}
.btn a {
  position: relative;
  display: block;
  width: 300px;
  background-color: #de51af;
  border-radius: 60px;
  font-size: 1rem;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn a:link{
	color: #FFFFFF!important;
	text-decoration: none;
}
.btn a:hover{
	color: #FFFFFF!important;
	text-decoration: none;
}
.btn-long a {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 90px;
  background-color: #de51af;
  border-radius: 60px;
  font-size: 1rem;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn-long a:link{
	color: #FFFFFF!important;
	text-decoration: none;
}
.btn-long a:hover{
	color: #FFFFFF!important;
	text-decoration: none;
}
.btn-box{
	margin: 0 auto;
	padding: 1rem 0;
}
.btn-box-orange{
	margin: 0 auto;
	padding: 2rem 0;
}
.btn-orange a {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 50px;
  background-color: #eb8029;
  border-radius: 60px;
  font-size: 1rem;;
   font-weight: 700;
  color: #FFFFFF!important;
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
}
.btn-orange a:link{
	color: #FFFFFF!important;
	text-decoration: none;
}
.btn-orange a:hover{
	color: #FFFFFF!important;
	text-decoration: none;
}



/* -----------------------------------------------------------
 ↑↑↑↑↑ CSSの追記はここまで ↑↑↑↑↑
----------------------------------------------------------- */



/* for IE7 only */
*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}