/*===========================================
    c-button
===========================================*/
#p-product [class*="c-button-"][class*="-samplepdf"] {
  background-color: #e95464;
  color: #fff;
}

[class*="c-heading"][class*="-underline"]{
  border-bottom: 6px double #999;
}


/*===========================================
    uvprint
===========================================*/
@media screen and (min-width: 601px),
print {
  #p-product [class*="p-overview"] .overview__order .order__action .action__draw>* {
    width: 100%;
  }
}

#p-product [class*="p-overview"] .overview__detail .detail__section .section__set .set__item {
  width: 7rem;
}

.box_image {
  height: 300px;
}

.box_image img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.box_imgModal {
  height: 500px;
}

.box_imgModal img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}


.appearance {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
}

#designKey [class*="l-article"] {
  margin-bottom: 0rem !important;
}

#designKey [class*="l-article"] [class*="article__content"] {
  margin-top: 0.6rem;
}

#designKey .u-margin--left-16 {
  margin-left: 0rem !important;
}

#p-product .l-main [class*="main__sub"][class*="-gray"] {
  background-color: #fff;
  border-top: solid 1px #ddd;
}

#p-product .l-main [class*="main__sub"][class*="-gray"]:before,
#p-product .l-main [class*="main__sub"][class*="-gray"]:after {
  background-color: #fff;
}

#tagSection [class*="c-flame"][class*="-sm"] {
  padding: 2rem;
  border: solid 8px #f3f3f3;
}

[class*="c-list"] .list__item__red {
  padding-left: 1em;
  color: red;
  font-weight: bolder;
}

#p-product [class*="c-flame"][class*="-column"][class*="-2"] [class*="flame__content"]:nth-child(2n) {
  margin-top: 0rem;
}


#p-product [class*="p-overview"] .overview__order {
  border-bottom: solid 1px #ddd;
  padding-bottom: 0.2rem;
}

#p-product [class*="c-label"][class*="-primary"] {
  background-color: #1DAEE9;
  color: #fff;
  border: solid 1px #fff;
  box-shadow: none;
  background-image: none;
}

#p-product [class*="c-flame"][class*="-semiorder"] {
  border: solid 1px #999;
}



#p-product [class*="p-overview"] .overview__detail .detail__section .section__set .set__content {
  min-height: 0px;
}

#p-product [class*="p-overview"] .overview__detail .detail__section .section__set {
  padding: 0.5rem 0;
}

[class*="d-section"] {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: solid 1px #ddd;
}

[class*="l-article"] [class*="article__content"].box_image {
  background-color: #f4f4f4;
}

.js-modal__content img {
  background-color: #f4f4f4;
}

[class*="c-heading"] [class*="heading__image"] {
  width: 1.2em;
  height: 2.2em;
}

/*modalサイズ大きく*/
@media screen and (min-width: 601px),
print {
  .js-modal__content {
    max-width: 1100px;
  }
}






.p-spec [class*="l-article"] {
  margin-bottom: 2rem !important;
}

[class*="d-section"] {
  margin-top: 1rem;
  padding-top: 5rem;
}

/*
.p-spec h3 {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.4;
}

.p-spec h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\2714";
  font-weight: bold;
  position: absolute;
  font-size: 1em;
  left: 0;
  top: auto;
  color: #000;
  font-weight: 900;
}
*/
.p-spec h3 {
  position: relative;
}


[class*="c-icon"][class*="-arrow-b"]:before,
[class*="c-icon"][class*="-arrow-b"]:after {
  background-color: #fff;
}

#p-product [class*="c-button-"][class*="-uv"] {
  background: #1DAEE9;
  background: -webkit-gradient(linear, left top, left bottom, from(#1DAEE9), to(#2992de));
  background: -webkit-linear-gradient(top, #1DAEE9 0%, #2992de 100%);
  background: linear-gradient(to bottom, #1DAEE9 0%, #2992de 100%);
  padding: 1em;
}

#p-product [class*="c-button-"][class*="-uv"]:hover {
  background: -webkit-gradient(linear, left bottom, left top, from(#1DAEE9), to(#2992de));
  background: -webkit-linear-gradient(bottom, #1DAEE9 0%, #2992de 100%);
  background: linear-gradient(to top, #1DAEE9 0%, #2992de 100%);
}

#p-product [class*="p-overview"] .overview__order .order__action .action__button {
  margin-bottom: 2rem;
}

.box_image img {
  margin-bottom: 2rem
}

/*ブロックで追加*/
ul#imgThumbnail {
  display: flex;
  justify-content: center;
}

ul#imgThumbnail li {
  list-style: none;
}

ul#imgThumbnail li:nth-child(2) {
  margin: 0 10px;
}

ul#imgThumbnail li:nth-child(4) {
  margin: 0 10px;
}

p#chktxt.c-text--center {
  margin-top: 3rem
}

@media screen and (max-width: 600px) {
  p#chktxt.c-text--center {
    margin-top: 0rem
  }
}

@media screen and (max-width: 600px) {
  label#imgChk.form__checkbox {
    margin-top: 4rem;
  }
}

div#finalchk.l-article--column {
  margin-bottom: 0rem !important;
}

/*===========================================
    imgThumbnail
===========================================*/
ul#imgThumbnail img {
  height: 48px;
  object-fit: cover;
}

#p-product [class*="p-overview"] .overview__detail .detail__section ul#imgThumbnail img {
  width: 48px;
  border: 2px solid #009A98;
}

/*===========================================
    UVケースの色見本
===========================================*/
#body_color_p,
#body_back_color_p {
  display: block;
  width: 85% !important;
  margin: 1rem auto !important;
  height: auto !important;
  /* 縦横比を維持 */
}

/*===========================================
    UVケース最終確認欄表示調整
===========================================*/
#step-10 input.unit__inline.form__output {
  text-align: center;
  font-size: 0.866rem;
}


/*===========================================
    スマホで画像を縦並び
===========================================*/
@media screen and (max-width: 600px) {

  .l-article--column-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem;
  }

  .l-article--column-2 .article__content {
    width: 100% !important;
  }

  .l-article--column-2 .article__content img {
    width: 100%;
    height: auto;
    display: block;
  }

}

/*===========================================
    pencilボタン調整
===========================================*/
.c-button--pdf {
	width: 60%;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
	.c-button--pdf {
		width: 90%;
		padding: 0.8em;
		font-size: 12px !important;
		line-height: 1.4;
		white-space: normal !important;
		height: auto !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		/* 👇【追記】改行された2行のテキストをどちらも中央揃えにする設定 */
		text-align: center !important;
	}

	/* パソコンでは改行を無視し、スマホの時だけ強制改行させる設定 */
	.c-button--pdf br.u-sp-only {
		display: block !important;
	}
}

/* 初期状態（パソコン画面）では改行タグを非表示にする */
.c-button--pdf br.u-sp-only {
	display: none;
}

/*===========================================
    色見本表示調整
===========================================*/
/* ===================================================
   PC・スマホ共通の設定（メディアクエリの外に書きます）
   =================================================== */
/* 💡 color-sample内のカラー名だけを、画面サイズ問わず中央揃えにします */
ul.color-sample > li .card__title {
  text-align: center !important;
  padding: 4px 2px 0 2px !important; /* 周りの余白を微調整 */
}


/* ===================================================
   スマホ用の設定（画面幅767px以下）
   =================================================== */
@media screen and (max-width: 767px) {
  /* 親要素（ul）に隙間を設定 */
  ul.c-cardGroup--6.color-sample {
    gap: 8px !important;
    justify-content: center !important;
    padding: 0 4px !important;
  }

  /* 子要素（li）の幅を3列用に調整 */
  ul.c-cardGroup--6.color-sample > li {
    width: calc((100% - 16px) / 3) !important;
    margin: 0 !important;
  }

  /* 💡 スマホの時だけ文字サイズを少し小さくして改行をスマートにします */
  ul.c-cardGroup--6.color-sample > li .card__title {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* ===================================================
   見積はこちらのボタンの設定
   =================================================== */
   .c-button--lg-mitsumori {
       display: block;       /* ブロック要素化 */
       max-width: 60%;     /* ボタンの最大横幅 */
       width: 100%;
       margin: 30px auto 0;  /* ボタン自体を中央揃え */

       /* 👇 中の白い文字を中央揃えにするための追加設定 */
       text-align: center;   /* 文字を横方向の中央に */
       padding: 15px 0;      /* ボタンに上下の厚み（余白）を持たせる */
       box-sizing: border-box;
   }