@charset "UTF-8";

/*=============================
  共通部分
=============================*/
#customsemi{background: #d6c6af;}
#customsemi p{color: #534741; font-weight: 400; text-align: center;}
#customsemi .fontRed{color: #cc3333;}
#customsemi #contents{max-width: 1050px; width: 100%; margin: 0 auto; background: #fff;}
#customsemi #contents .contentsInner{max-width: 750px; width: 100%; margin: 0 auto;}
#customsemi #contents h2{font-size: 50px; text-align: center; color: #534741; padding: 1em 0 0.2em;}
#customsemi #contents h2 .imgBox{display: block; margin-bottom: 0.2em;}
#customsemi #contents .subTtl{font-size: 26px; font-weight: 600;}
#customsemi #contents h3{text-align: center; font-size: 30px; font-weight: 600; width: fit-content; margin: 0 auto; }
#customsemi #contents h3 .h3Inner{line-height: 1.5; background: linear-gradient(#f4d9d0,#f4d9d0); background-repeat: no-repeat; background-size: 100% 0.6em; background-position: 0 110%; color: #534741;}
#customsemi #contents p.subTxt{text-align: center;}
#customsemi #contents .section{margin: 2em auto 4em; font-size: 18px;}
.message .social-bottom .social-icon{width: 14%;}

/* btnBox */
#customsemi .btnBox{width: fit-content; margin: 2.5em auto 0;}
#customsemi .btnBox a{position: relative; display: block; font-size: 20px; line-height: 1; padding: 0.6em 2.2em; color: #fff; background: #736357; border-radius: 2em; font-weight: 600;}
#customsemi .btnBox a:hover{text-decoration: none; opacity: 0.7;}
#customsemi .btnBox a::after{position: absolute; top: 50%; right: 1em; transform: translateY(-50%); content: ""; border-top: transparent solid 9px; border-bottom: transparent solid 9px; border-left: #fff solid 12px;}


/*=============================
  lineupSec
=============================*/
#customsemi #lineupSec h3{font-size: 50px; background: none; margin-bottom: 0.2em;}
#customsemi #lineupSec h4{font-size: 30px; text-align: center; color: #947f28; line-height: 1;}
#customsemi #lineupSec .design{width: 100%; margin: 2em auto;}
#customsemi #lineupSec table{margin: 0 auto; width: 100%;}
#customsemi #lineupSec table th,
#customsemi #lineupSec table td{border: none; padding: 0.5em 0; text-align: center;}
#customsemi #lineupSec table thead th{padding-bottom: 1em;}
#customsemi #lineupSec table thead .tableTtl{position: relative; color: #947f28; font-size: 30px; font-weight: 600; padding-bottom: 0.2em;}
#customsemi #lineupSec table thead .tableTtl::after{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ""; background: #947f28; width: 3em; height: 1px;}
#customsemi #lineupSec table .imgBox{width: 170px; margin: 0 auto;}
#customsemi #lineupSec table .base{width: 45%;}
#customsemi #lineupSec table .custom{width: 55%;}
#customsemi #lineupSec table .arrow{position: relative; padding-right: 4em;}
#customsemi #lineupSec table .arrow:not(thead th):after{position: absolute; top: 50%; right: 1.1em; transform: translateY(-50%); content: ""; background-image: url(../images/img_deco05.png); background-repeat: no-repeat; background-size: contain; width: 46px; height: 17px;}

/* 金縁（外枠は金色の背景色の上に白背景で線に見せ、内枠は通常のborder） */
#customsemi #lineupSec .designInner{border: #947f28 solid 1px; width: 100%; padding: 1.5em 3em 0.5em;}
#customsemi #lineupSec .outerGold{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 0, transparent 19px, #947f28 20px), radial-gradient(circle at 0 0, transparent 19px, #947f28 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    padding: 2px;
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #947f28;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #947f28;
    }
}
#customsemi #lineupSec .outerWhite{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 0, transparent 19px, #fff 20px), radial-gradient(circle at 0 0, transparent 19px, #fff 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    padding: 6px;
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #fff;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #fff;
    }
}


/*=============================
  stepSec
=============================*/
#customsemi #stepSec ol{margin: 2em auto 0; gap: 3em;}
#customsemi #stepSec ol li{position: relative; display: flex; flex-direction: column; justify-content: space-around; width: calc(100% / 3); padding: 1.8em 0.5em 0.6em; border: 2px solid #534741; border-radius: 10px;}
#customsemi #stepSec ol li .step{position: absolute; top: -18px; left: 50%; transform: translateX(-50%); color: #fff; background: #534741; border-radius: 10px; line-height: 1; padding: 0.3em 0.6em 0.2em; font-size: 22px;}
#customsemi #stepSec ol li p{font-weight: 600; line-height: 1.2;}
#customsemi #stepSec ol li p .fontS{font-size: 80%; font-weight: 500;}
/* #customsemi #stepSec ol li .imgBox{margin-top: 0.5em;} */
/* 矢印 */
#customsemi #stepSec ol li::after{position: absolute; top: 50%; right: -2.2em; transform: translateY(-50%); content: ""; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: #ffa9b8 solid 18px;}
#customsemi #stepSec ol li:last-of-type::after{display: none;}


/*=============================
  tableSec
=============================*/
#customsemi #tableSec{margin-bottom: 3em;}
#customsemi #tableSec .tableWrap{overflow-x: auto; -webkit-overflow-scrolling: touch;}
#customsemi #tableSec table{width: 750px; margin: 2em 0 0;}
#customsemi #tableSec table tr th{border: 2px solid #fff; border-left: 2px solid #d45167; border-right: none;}
#customsemi #tableSec table tr:last-child th{border-bottom: 2px solid #d45167;}
#customsemi #tableSec table tr:nth-child(1) th{border: 2px solid #fff; border-top: 2px solid #d45167; border-bottom: none;}
#customsemi #tableSec table tr:nth-child(1) th:first-of-type{border-left: 2px solid #d45167; border-right: 2px solid #fff; border-bottom: 2px solid #fff;}
#customsemi #tableSec table tr:nth-child(1) th:last-of-type{border-right: 2px solid #d45167;}
#customsemi #tableSec table th{background: #d45167; color: #fff; font-size: 90%; padding: 0.8em;}
#customsemi #tableSec table td{background: #fff; color: #534741; border: 2px solid #d45167; text-align: center; vertical-align: middle; font-weight: 400; font-size: 84%; line-height: 1.3; width: 218px; padding: 0.8em 0.5em;}

/* 赤枠 */
#customsemi #tableSec table tr .focus{border-left: 4px solid #cc3333 !important; border-right: 4px solid #cc3333 !important; font-weight: 600;}
#customsemi #tableSec table tr:nth-child(1) .focus{border-top: 4px solid #cc3333 !important;}
#customsemi #tableSec table tr:last-child .focus{border-bottom: 4px solid #cc3333 !important;}
#customsemi #tableSec table tr td.focus{background: #fff2f4;}

/* NEWの文字 */
#customsemi #tableSec table tr:nth-child(1) .focus{position: relative;}
#customsemi #tableSec table tr:nth-child(1) .focus::before{content: "NEW！"; position: absolute; top: -2em; left: 50%; transform: translateX(-50%); color: #cc3333;}

/* 花の装飾 */
#customsemi #tableSec .flower{position: relative; margin: 0 auto;}
#customsemi #tableSec .flower::before{position: absolute; top: 19px; left: -14px; content: ""; background-image: url(../images/img_deco02.png); background-repeat: no-repeat; background-size: contain; width: 54px; height: 92px; z-index: 1;}
#customsemi #tableSec .flower::after{position: absolute; bottom: -12px; right: -14px; content: ""; background-image: url(../images/img_deco03.png); background-repeat: no-repeat; background-size: contain; width: 54px; height: 92px; z-index: 1;}

/* こんな方におすすめ */
#customsemi #tableSec .recommendBox{width: 100%; margin: 0 auto;}
#customsemi #tableSec .recommendBoxInner{padding: 1.5em;}
#customsemi #tableSec .recommendBox h4{color: #534741; font-size: 30px; text-align: center; margin-bottom: 0.2em;}
#customsemi #tableSec .recommendBox ul li{position: relative; color: #534741; font-size: 16px; font-weight: 500; padding: 0.5em 0 0.5em 2em;}
#customsemi #tableSec .recommendBox ul li::before{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ""; background-image: url(../images/img_deco04.png); background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px;}
#customsemi #tableSec .recommendBox ul li .underline{background: linear-gradient(transparent 60%, #f4d9d0 40%);}
/* 金縁（金色の背景色の上に白背景で線に見せるのを二重にしている） */
#customsemi #tableSec .outerGold{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: /* サイズ変更はここのpxを一括置換 */ radial-gradient(circle at 0 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 0, transparent 19px, #947f28 20px), radial-gradient(circle at 0 0, transparent 19px, #947f28 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    padding: 2px;
    /* 中央にできる十字の隙間を埋める */
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #947f28;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #947f28;
    }
}
#customsemi #tableSec .outerWhite{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 0, transparent 19px, #fff 20px), radial-gradient(circle at 0 0, transparent 19px, #fff 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    padding: 6px;
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #fff;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #fff;
    }
}
#customsemi #tableSec .innerGold{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 100%, transparent 19px, #947f28 20px), radial-gradient(circle at 100% 0, transparent 19px, #947f28 20px), radial-gradient(circle at 0 0, transparent 19px, #947f28 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    padding: 1px;
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #947f28;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #947f28;
    }
}
#customsemi #tableSec .innerWhite{
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 0 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 100%, transparent 19px, #fff 20px), radial-gradient(circle at 100% 0, transparent 19px, #fff 20px), radial-gradient(circle at 0 0, transparent 19px, #fff 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    width: 100%;
    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: -1;
      content: '';
      width: 5px;
      height: 99%;
      transform: translateX(-50%);
      background-color: #fff;
    }
     &::after {
      position: absolute;
      top: 50%;
      left: 0;
      z-index: -1;
      content: '';
      width: 100%;
      height: 5px;
      transform: translateY(-50%);
      background-color: #fff;
    }
}


/*=============================
  SP版の調整ここから
=============================*/
@media only screen and (max-width: 979px) {
  /* 共通部分 */
  #customsemi #contents{padding: 0 1em;}
  #customsemi #contents h2{font-size: 8vw;}
  #customsemi #contents h2 .imgBox{width: 16vw; height: 16vw; margin: 0 auto;}
  #customsemi #contents .subTtl{font-size: clamp(16px, 4vw, 32px); line-height: 1.2;}
  #customsemi #contents h3{font-size: clamp(16px, 6vw, 32px);}
  #customsemi #contents h3 .h3Inner{background-size: 100% 0.4em;}
  #customsemi #contents p.subTxt{text-align: left; margin: 1em 0.5em 2em;}
  #customsemi #contents .section{margin: 2em auto 3em; font-size: 16px; text-align: center;}
  .message .social-bottom .social-icon{width: 30%;}

  /* btnBox */
  #customsemi .btnBox{margin: 1.5em auto 0;}
  #customsemi .btnBox a{font-size: 18px;}

  /* lineupSec */
  #customsemi #lineupSec .design{margin: 0;}
  #customsemi #lineupSec .designInner{padding: 2vw 4vw;}
  #customsemi #lineupSec table thead .tableTtl{font-size: 4vw;}
  #customsemi #lineupSec table thead th{padding-bottom: 0.2em;}
  #customsemi #lineupSec table .imgBox{width: 20vw;}
  #customsemi #lineupSec table .arrow{padding-right: 8vw;}
  #customsemi #lineupSec table .arrow:not(thead th):after{aspect-ratio: 46 / 17; width: 6vw; height: auto; right: 3vw;}

  /* stepSec */
  #customsemi #stepSec ol{flex-direction: column;}
  #customsemi #stepSec ol li{width: 100%;}
  #customsemi #stepSec ol li::after{top: auto; bottom: -1.8em; right: 50%; transform: translateX(50%); border-top: #ffa9b8 solid 18px; border-right: transparent solid 14px; border-bottom: none; border-left: transparent solid 14px;}
  #customsemi #stepSec ol li p{font-size: 120%;}

  /* tableSec */
  #customsemi #tableSec table{width: 475px;}
  #customsemi #tableSec table th{font-size: 80%; padding: 0.4em; width: 5em; line-height: 1.2;}
  #customsemi #tableSec table td{font-size: 80%; padding: 0.8em 0.4em; width: calc((475px - 5em) / 3);}
  #customsemi #tableSec .flower::before{width: calc(54px / 1.5); height: calc(92px / 1.5);}
  #customsemi #tableSec .flower::after{width: calc(54px / 1.5); height: calc(92px / 1.5);}
  .scroll-hint-icon-white .scroll-hint-text{text-align: center; font-weight: 500;}
}