@charset "utf-8";
/* CSS Document */
/*@import url("saruta.css");
@import url("tekawa.css");
@import url("base-layout-new.css");
@import url(https://cdn.jsdelivr.net/npm/fontisto@v3.0.4/css/fontisto/fontisto.min.css);*/
/* !Margin ------------------------------------------------------------------ */
.mt00 { margin-top: 0   !important;}
.mt05 { margin-top: 5px !important;}
.mt10 { margin-top:10px !important;}
.mt12 { margin-top:12px !important;}
.mt15 { margin-top:15px !important;}
.mt20 { margin-top:20px !important;}
.mt25 { margin-top:25px !important;}
.mt28 { margin-top:28px !important;}
.mt30 { margin-top:30px !important;}
.mt35 { margin-top:35px !important;}
.mt40 { margin-top:40px !important;}
.mt45 { margin-top:45px !important;}
.mt50 { margin-top:50px !important;}
.mr00 { margin-right: 0   !important;}
.mr05 { margin-right: 5px !important;}
.mr10 { margin-right:10px !important;}
.mr12 { margin-right:12px !important;}
.mr15 { margin-right:15px !important;}
.mr20 { margin-right:20px !important;}
.mr25 { margin-right:25px !important;}
.mr30 { margin-right:30px !important;}
.mr35 { margin-right:35px !important;}
.mr40 { margin-right:40px !important;}
.mr45 { margin-right:45px !important;}
.mr50 { margin-right:50px !important;}
.mb00 { margin-bottom: 0   !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom:10px !important;}
.mb12 { margin-bottom:12px !important;}
.mb15 { margin-bottom:15px !important;}
.mb20 { margin-bottom:20px !important;}
.mb25 { margin-bottom:25px !important;}
.mb30 { margin-bottom:30px !important;}
.mb35 { margin-bottom:35px !important;}
.mb40 { margin-bottom:40px !important;}
.mb45 { margin-bottom:45px !important;}
.mb50 { margin-bottom:50px !important;}
.mb55 { margin-bottom:55px !important;}
.ml00 { margin-left: 0   !important;}
.ml05 { margin-left: 5px !important;}
.ml10 { margin-left:10px !important;}
.ml12 { margin-left:12px !important;}
.ml15 { margin-left:15px !important;}
.ml20 { margin-left:20px !important;}
.ml25 { margin-left:25px !important;}
.ml30 { margin-left:30px !important;}
.ml35 { margin-left:35px !important;}
.ml37 { margin-left:37px !important;}
.ml40 { margin-left:40px !important;}
.ml45 { margin-left:45px !important;}
.ml50 { margin-left:50px !important;}
.ml55 { margin-left:55px !important;}
.mt-over10 { margin-top: -10px !important;}
.mt-over50 { margin-top: -50px !important;}

/* !Padding  ---------------------------------------------------------------- */
.pt00 { padding-top: 0   !important;}
.pt05 { padding-top: 5px !important;}
.pt10 { padding-top:10px !important;}
.pt12 { padding-top:12px !important;}
.pt13 { padding-top:13px !important;}
.pt15 { padding-top:15px !important;}
.pt20 { padding-top:20px !important;}
.pt25 { padding-top:25px !important;}
.pt30 { padding-top:30px !important;}
.pt35 { padding-top:35px !important;}
.pt40 { padding-top:40px !important;}
.pt45 { padding-top:45px !important;}
.pt50 { padding-top:50px !important;}
.pr00 { padding-right: 0   !important;}
.pr05 { padding-right: 5px !important;}
.pr10 { padding-right:10px !important;}
.pr12 { padding-right:12px !important;}
.pr15 { padding-right:15px !important;}
.pr20 { padding-right:20px !important;}
.pr25 { padding-right:25px !important;}
.pr30 { padding-right:30px !important;}
.pr35 { padding-right:35px !important;}
.pr40 { padding-right:40px !important;}
.pr45 { padding-right:45px !important;}
.pr50 { padding-right:50px !important;}
.pb00 { padding-bottom: 0   !important;}
.pb05 { padding-bottom: 5px !important;}
.pb10 { padding-bottom:10px !important;}
.pb12 { padding-bottom:12px !important;}
.pb13 { padding-bottom:13px !important;}
.pb15 { padding-bottom:15px !important;}
.pb20 { padding-bottom:20px !important;}
.pb25 { padding-bottom:25px !important;}
.pb30 { padding-bottom:30px !important;}
.pb35 { padding-bottom:35px !important;}
.pb40 { padding-bottom:40px !important;}
.pb45 { padding-bottom:45px !important;}
.pb50 { padding-bottom:50px !important;}
.pl00 { padding-left: 0   !important;}
.pl05 { padding-left: 5px !important;}
.pl10 { padding-left:10px !important;}
.pl12 { padding-left:12px !important;}
.pl15 { padding-left:15px !important;}
.pl20 { padding-left:20px !important;}
.pl25 { padding-left:25px !important;}
.pl30 { padding-left:30px !important;}
.pl35 { padding-left:35px !important;}
.pl40 { padding-left:40px !important;}
.pl45 { padding-left:45px !important;}
.pl50 { padding-left:50px !important;}

/* Text  ---------------------------------------------------------------- */
.tx-11{font-size: 11px;line-height: 18px;}
.tx-12{font-size: 12px;line-height: 20px;}
.tx-13{font-size: 13px;line-height: 22px;}
.tx-14{font-size: 14px;line-height: 24px;}
.tx-15{font-size: 15px;line-height: 26px;}
.tx-16{font-size: 16px;line-height: 28px;}
.tx-18{font-size: 18px;line-height: 30px;}
.tx-20{font-size: 20px;line-height: 26px;}
.tx-24{font-size: 24px;line-height: 32px;}
.tx-30{font-size: 30px;line-height: 40px;}
.tx-50{font-size: 50px;}
.tx-60{font-size: 60px;}

.stack-4>*+* {margin-top: 8px;}
.stack-8>*+* {margin-top: 16px;}
.stack-12>*+* {margin-top: 24px;}
.stack-16>*+* {margin-top: 32px;}
.stack-20>*+* {margin-top: 40px;}
.stack-24>*+* {margin-top: 48px;}
.stack-28>*+* {margin-top: 56px;}
.stack-32>*+* {margin-top: 64px;}
.stack-36>*+* {margin-top: 72px;}
.stack-40>*+* {margin-top: 80px;}
@media print, screen and (min-width:751px) {
.stack-4>*+* {margin-top: 4px;}
.stack-8>*+* {margin-top: 8px;}
.stack-12>*+* {margin-top: 12px;}
.stack-16>*+* {margin-top: 16px;}
.stack-20>*+* {margin-top: 20px;}
.stack-24>*+* {margin-top: 24px;}
.stack-28>*+* {margin-top: 28px;}
.stack-32>*+* {margin-top: 32px;}
.stack-36>*+* {margin-top: 36px;}
.stack-40>*+* {margin-top: 40px;}
}

b {font-weight: 600;}

.flex {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
.flex-box {display: flex;}
.flex_column_row {display: flex; flex-direction: column;}
.flex_column_row .item_img {margin-top: 16px;}
.baseTXc { color: #3D62AD; }
.baseBackc { background-color: #3D62AD;}
.pink01c { background-color: #ff6a9e;}
.blue01c { background-color: #6d89c2;}


.sale-price {color:#DB0000;}

/* icon  ---------------------------------------------------------------- */
.i-check {
  display: inline-flex; 
  width: 1em; 
  height: 1em; 
  border: 2px solid #000; 
  justify-content: center; 
  align-items: center; 
  vertical-align: text-bottom;
  margin-right: 0.2em;
}
.i-check::after {
  content: '';
  display: block;
  width: 0.6em;
  height: 0.25em;
  border-left: 4px solid #000;
  border-bottom: 4px solid #000;
  transform: rotate(-45deg);
  margin-bottom: 4px;
}
@media print, screen and (min-width:751px) {
  .i-check {border-width: 1px;}
  .i-check::after {border-width: 2px; margin-bottom: 2px;}
  .flex_column_row {flex-direction: row; gap:31px;}
  .flex_column_row .item_img {margin-top: 0px;}
}


/*リストスタイル 数字*/
.list-num-circle {
  list-style: none;
  counter-reset: num-counter;
}
.list-num-circle li {
  counter-increment: num-counter;
  display: flex; 
  gap: 0.25em;
}
.list-num-circle li::before {
  content: counter(num-counter);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  flex:0 0 1.5em;
  line-height: 1;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-weight: 600;
}

.Blue01 .list-num-circle li::before {background-color: #1eadb9;} 
.artmake .list-num-circle li::before {background-color: #cf7563;} 
.Pink03 .list-num-circle li::before, .Pink03 .list-alpha-circle li::before {background-color: #EA7E92;} 
.Orig02 .list-num-circle li::before {background-color: #EF7150;}

@media print, screen and (min-width:751px) {
    .list-num-circle li>.contents-box {
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
    gap:24px;
  }
}

/*リストスタイル アルファベット*/
.list-alpha-circle  {
  list-style: none;
  counter-reset: alpha-counter;
}
.list-alpha-circle li {
  counter-increment: alpha-counter;
  display: flex;
  gap: 0.25em;
}
.list-alpha-circle li::before {
  content: counter(alpha-counter, upper-alpha);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  flex:0 0 1.5em;
  line-height: 1;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-weight: 600;
}

/*画像ズーム表示*/
.zoom-area {
  position: relative;
  /*width: 496px;*/
  height: auto;
  overflow: hidden;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* PC用カーソル・拡大スタイル */
#zoom-img.pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  cursor: url('/commons/images/cursor-plus.png') 16 16, pointer;
  transition: left 0.05s, top 0.05s;
}

/* スマホでは普通に表示 */
#zoom-img.mobile {
  position: static;
  width: 100%;
  height: auto;
  cursor: default;
  transition: none;
}

/* 拡大縮小ボタンエリア */
.zoom-controls {
  /*width: 496px;*/
  text-align: center;
  margin-top: 12px;
}

/* 円形ボタン */
.zoom-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7f7f7;
  border: 1px solid #ccc;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.1s, opacity 0.2s;
}

/* ホバー時 */
.zoom-btn:hover {
  background: #eee;
  transform: scale(1.05);
}

/* ボタン内アイコン */
.zoom-btn img {
  width: 20px;
  height: 20px;
}

/* 非アクティブ時（薄く） */
.zoom-btn.inactive {
  opacity: 0.4;
  pointer-events: none;
}

/* アクティブ時（濃く） */
.zoom-btn.active {
  opacity: 1;
  pointer-events: auto;
}
#体成分測定でわかること .zoom-area {width: 496px;
}
@media print, screen and (max-width:750px) {
  #体成分測定でわかること .zoom-area {width: 100%!important;
    height: auto!important;
}