@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 0;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
  background: hsl(221, 90%, 29%);
}


header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; height: calc(102 / 750 * 100vw);
  box-sizing: border-box;
  padding: 0 calc(32 / 750 * 100vw) 0 calc(49 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border-bottom: max(calc(2 / 750 * 100vw), 2px) solid hsl(221, 90%, 29%);
}

header > h1 {
  width: calc(136 / 750 * 100vw);
  margin: 0;
}
header > h1 img {
  width: 100%; height: auto;
}

header > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(347 / 750 * 100vw); height: calc(59 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  background: hsl(217deg, 49%, 12%);
  border-radius: calc(59 / 2 / 750 * 100vw);
  user-select: none;
}

section {
  margin: 0;
}


#cover {
  width: 100%;
  padding: calc(39 / 750 * 100vw) 0 calc(40 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/cover_02_sp.webp) calc(383 / 750 * 100vw) calc(134 / 750 * 100vw) / calc(334 / 750 * 100vw) no-repeat,
    linear-gradient(hsla(221, 90%, 29%, 0) calc( 550 / 631 * 100%), hsla(221, 90%, 29%, 1) calc( 550 / 631 * 100%)),
    url(../../../images/lp/lppackageservice/cover_01.svg) center top / calc(25 / 750 * 100vw) repeat,
    hsl(0, 0%, 100%);
}

#cover > h2 {
  position: relative;
  width: fit-content;
  left: calc(50% - 334 / 750 * 100vw);
  margin: 0;
  font-weight: 900;
  font-size: calc(68 / 750 * 100vw); line-height: calc(90 / 750 * 100vw);
  letter-spacing: calc(50em / 1000);
  color: hsl(217deg, 49%, 12%);
}

#cover > ul {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: calc(16 / 750 * 100vw);
  width: 100%;
  margin: calc((84 + 17) / 750 * 100vw) 0 0; padding: 0;
}
#cover > ul > li {
  width: calc(325 / 750 * 100vw);
  box-sizing: border-box;
  padding: 0 0 calc(38 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(6 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: calc(18 / 750 * 100vw);
}
#cover > ul > li > h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(146 / 750 * 100vw); height: calc(40 / 750 * 100vw);
  margin: calc(-23 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(26 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 100%);
  background: hsl(221, 90%, 29%);
  border-radius: calc(3 / 750 * 100vw);
}
#cover > ul > li > p {
  width: 100%;
  margin: calc(31 / 750 * 100vw) auto 0;
  font-weight: 900;
  font-size: calc(28 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(75em / 1000);
  text-align: center;
  color: hsl(247deg, 49%, 12%);
}
#cover > ul > li > p > span {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 0 calc(10 / 750 * 100vw) calc(4 / 750 * 100vw);
  font-size: calc(46 / 750 * 100vw);
}
#cover > ul > li > p > span::before {
  content: '';
  display: block;
  width: 100%; height: calc(15 / 750 * 100vw);
  position: absolute;
  bottom: 0; left: 0; z-index: -1;
  background: hsl(47deg, 74%, 65%);
}
#cover > ul > li > p > span > small {
  font-size: calc(28 / 750 * 100vw);
}
#cover > ul > li:nth-of-type(1) > p > span { /* -- 15万円(税抜)～ */
  margin: 0 auto calc(10 / 750 * 100vw);
}
#cover > ul > li:nth-of-type(1) > p > span > span { /* -- 15 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: calc(-25em / 1000);
}
#cover > ul > li:nth-of-type(2) > p > span { /* -- 3週間 */
  margin: calc(10 / 750 * 100vw) auto 0;
}
#cover > ul > li:nth-of-type(2) > p > span > span { /* -- 3 */
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}


#issue {
  width: 100%; height: calc(451 / 750 * 100vw);
  box-sizing: border-box;
  position: relative;
  padding: calc(34 / 750 * 100vw) 0 0;
  background: hsl(221, 90%, 29%);
}
#issue::before {
  content: '';
  display: block;
  width: 50vw; height: calc(74 / 750 * 100vw);
  position: absolute;
  bottom: -1px; left: 0;
  background: hsl(0, 0%, 100%);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}
#issue::after {
  content: '';
  display: block;
  width: 50vw; height: calc(74 / 750 * 100vw);
  position: absolute;
  bottom: -1px; right: 0;
  background: hsl(0, 0%, 100%);
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}

#issue > h3 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto; padding: 0 0 calc(17 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(48 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 100%);
}
#issue > h3::before {
  content: '';
  width: calc(12 * 53 / 750 * 100vw); height: calc(2 / 750 * 100vw);
  position: absolute;
  bottom: 0; left: calc(50% - 12 * 53 / 2 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/issue_02.svg) center top / calc(12 / 750 * 100vw) repeat-x;
}

#issue > ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(19 / 750 * 100vw);
  width: 100%;
  box-sizing: border-box;
  margin: calc(32 / 750 * 100vw) auto 0; padding: 0;
}
#issue > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(102 / 750 * 100vw);
  box-sizing: border-box;
  padding: 0 0 calc(12 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
}
#issue > ul > li:nth-of-type(2n+1) {
  width: calc(376 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/issue_03_sp_1.svg) center top / calc(376 / 750 * 100vw) no-repeat;
}
#issue > ul > li:nth-of-type(2n) {
  width: calc(317 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/issue_03_sp_2.svg) center top / calc(317 / 750 * 100vw) no-repeat;
}


#solution {
  width: 100%;
  padding: calc(48 / 750 * 100vw) 0 calc(99 / 750 * 100vw);
  background: linear-gradient(hsla(0, 0%, 100%, 1) calc(798 / 2997 * 100%), hsla(0, 0%, 100%, 0) calc(798 / 2997 * 100%)),
    url(../../../images/lp/lppackageservice/solution_01.svg) center top / calc(25 / 750 * 100vw) repeat,
    hsl(0, 0%, 100%);
  border-bottom: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 35%);
}

#solution > h3 {
  width: fit-content;
  margin: 0 auto;
  font-weight: 900;
  font-size: calc(48 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
}

#solution > ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(35 / 750 * 100vw);
  width: calc(690 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(40 / 750 * 100vw) auto 0; padding: calc(47 / 750 * 100vw) 0 calc(48 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
  border: calc(6 / 750 * 100vw) solid hsl(221, 90%, 29%);
  border-radius: calc(38 / 750 * 100vw);
}
#solution > ul > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(29 / 750 * 100vw) calc(23 / 750 * 100vw);  
  width: calc(590 / 750 * 100vw);
  box-sizing: border-box;
  padding: calc(35 / 750 * 100vw) 0 0;
  border-top: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 79%);
}
#solution > ul > li > h4 {
  width: 100%;
  margin: 0;
  font-weight: 900;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(217deg, 49%, 12%);
}
#solution > ul > li > h4 > br {
  display: none;
}
#solution > ul > li > img {
  width: calc(166 / 750 * 100vw); height: auto;
}
#solution > ul > li > p {
  width: calc(400 / 750 * 100vw);
  margin: 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
}
#solution > ul > li:first-of-type {
  padding: 0;
  border-top: none;
}


#template {
  width: 100%;
  margin: calc(99 / 750 * 100vw) 0 0;
  background: url(../../../images/lp/lppackageservice/template_01_sp.webp) calc(72 / 750 * 100vw) calc(325 / 750 * 100vw) / calc(587 / 750 * 100vw) no-repeat;
}

#template > hgroup {
  width: calc(666 / 750 * 100vw);
  margin: 0 auto;
}
#template > hgroup > h3 {
  width: 100%;
  margin: 0;
}
#template > hgroup > h3 img {
  width: 100%; height: auto;
}
#template > hgroup > p {
  display: none;
}

#template > p {
  width: calc(690 / 750 * 100vw);
  margin: calc(30 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(38 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
}
#template > p > br:nth-of-type(2) {/* -- をご用意。<br>最適化され */
  display: none;
}
#template > p > br:nth-of-type(5) {/* -- ることで、<br>自社らしさ */
  display: none;
}

#template > h4 {
  width: calc(650 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(617 / 750 * 100vw) auto 0; padding: 0 0 calc(26 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(48 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
  border-bottom: max(calc(2 / 750 * 100vw), 2px) solid hsl(217deg, 49%, 12%);
}

#template > ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: calc(12 / 750 * 100vw);
  width: calc(650 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(21 / 750 * 100vw) auto 0; padding: 0;
}
#template > ul > li {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0 0 0 calc(35 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(30 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
}
#template > ul > li::before {
  content: '';
  display: block;
  width: calc(28 / 750 * 100vw); height: calc(30 / 750 * 100vw);
  position: absolute;
  top: 0; left: 0;
  background: url(../../../images/lp/lppackageservice/template_03.svg) left top / calc(28 / 750 * 100vw) no-repeat;
}

#template > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(614 / 750 * 100vw); height: calc(105 / 750 * 100vw);
  position: relative;
  margin: calc(57 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(40.8 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  background: hsl(221, 90%, 29%);
  border-radius: calc(105 / 2 / 750 * 100vw);
  user-select: none;
}
#template > a::after {
  content: '';
  width: calc(20 / 750 * 100vw); height: calc(34 / 750 * 100vw);
  position: absolute;
  top: calc(50% - 34 / 2 / 750 * 100vw); right: calc(37 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/template_04.svg) center / calc(20 / 750 * 100vw) no-repeat;
}

#price {
  width: 100%;
  padding: calc(75 / 750 * 100vw) 0 calc(101 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}

#price > h3 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto; padding: 0 0 calc(2 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: calc(90 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
  background: url(../../../images/lp/lppackageservice/price_01.svg) center bottom / calc(12 / 750 * 100vw) repeat-x;
}

#price > div {
  width: calc(690 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(59 / 750 * 100vw) auto 0; padding: 1px 0 calc(88 / 750 * 100vw);
  background: hsl(220, 100%, 98%) url(../../../images/lp/lppackageservice/price_02_1.svg) right calc(21 / 750 * 100vw) bottom / calc(143 / 750 * 100vw) no-repeat;
  border-radius: calc(36 / 750 * 100vw);
}
#price > div > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(302 / 750 * 100vw); height: calc(34 / 750 * 100vw);
  margin: calc((-17 / 750 * 100vw) - 1px) auto 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 100%);
  background: hsl(221, 90%, 29%);
  border-radius: calc(6 / 750 * 100vw);
}
#price > div > p {
  width: fit-content;
  margin: calc(78 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(30 / 750 * 100vw); line-height: calc(75 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 0%);
}
#price > div > p > span {
  font-weight: 900;
  font-size: calc(75 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  color: hsl(350deg, 100%, 39%);
}
#price > div > p > span > small {
  font-size: calc(37 / 750 * 100vw); line-height: calc(75 / 750 * 100vw);
}
#price > h4 {
  width: fit-content;
  margin: calc(50 / 750 * 100vw) auto 0;
  font-weight: 900;
  font-size: calc(30 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
}

#price > ul:nth-of-type(1) {/* -- お客様にご用意いただくもの */
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(18 / 750 * 100vw) calc(21 / 750 * 100vw);
  width: 100%;
  margin: calc(32 / 750 * 100vw) auto 0; padding: 0;
}
#price > ul:nth-of-type(1) > li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(334 / 750 * 100vw); height: calc(193 / 750 * 100vw);
  font-weight: 700;
  font-size: calc(26 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(217deg, 49%, 12%);
  border-radius: calc(27 / 750 * 100vw);
}
#price > ul:nth-of-type(1) > li:nth-of-type(1) {/* -- ロゴデータ */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_2.svg) right calc(8 / 750 * 100vw) bottom / calc(109 / 750 * 100vw) no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(2) {/* -- キャッチコピー テキスト原稿 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_3.svg) right calc(2 / 750 * 100vw) bottom calc(4 / 750 * 100vw) / calc(125 / 750 * 100vw) no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(3) {/* -- 写真・製品画像 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_4.svg) right calc(-4 / 750 * 100vw) bottom / calc(115 / 750 * 100vw) no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(4) {/* -- メインカラー デザインイメージ等のご希望 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_5.svg) right calc(1 / 750 * 100vw) bottom calc(-13 / 750 * 100vw) / calc(97 / 750 * 100vw) no-repeat;
}

#price > ul:nth-of-type(2) {/* -- 注釈 */
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  width: calc(680 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(25 / 750 * 100vw) auto 0; padding: 0;
}
#price > ul:nth-of-type(2) > li {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 1em;
  font-weight: 700;
  font-size: calc(20 / 750 * 100vw); line-height: calc(30 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-indent: -1em;
  color: hsl(0, 0%, 31%);
}
#price > ul:nth-of-type(2) > li::before {
  content: '※';
}


.fascia {
  width: 100%;
  box-sizing: border-box;
  padding: calc(77 / 750 * 100vw) 0 calc(72 / 750 * 100vw);
  background: hsl(221, 90%, 29%);
}

.fascia > h3 {
  width: calc(550 / 750 * 100vw);
  margin: 0 auto;
}
.fascia > h3 img {
  width: 100%; height: auto;
}

.fascia > p {
  width: fit-content;
  margin: calc(30 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(26 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 100%);
}

.fascia  > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(506 / 750 * 100vw); height: calc(86 / 750 * 100vw);
  position: relative;
  margin: calc(57 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: hsl(0, 0%, 1%);
  background: hsl(0, 0%, 100%);
  border-radius: calc(86 / 2 / 750 * 100vw);
  user-select: none;
}


#option {
  width: 100%;
  box-sizing: border-box;
  padding: calc(75 / 750 * 100vw) 0 calc(99 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}

#option > h3 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto; padding: 0 0 calc(2 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: calc(90 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
  background: url(../../../images/lp/lppackageservice/price_01.svg) center bottom / calc(12 / 750 * 100vw) repeat-x;
}

#option > p {
  width: 100%;
  margin: calc(32 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(38 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
}

#option > table {
  border-spacing: 0;
  width: calc(692 / 750 * 100vw);
  overflow: hidden;
  box-sizing: border-box;
  margin: calc(19 / 750 * 100vw) auto 0;
  border: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 31%);
  border-radius: calc(25 / 750 * 100vw);
}
#option > table > thead th,
#option > table > thead td {
  padding: calc(32 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(24 / 750 * 100vw); line-height: calc(30 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
  background: hsl(53, 100%, 90%);
  border-left: max(calc(1 / 750 * 100vw), 1px) solid hsl(0, 0%, 31%);
}
#option > table > thead th:first-child,
#option > table > thead td:first-child {
  border-left: none;
}
#option > table > thead th:nth-of-type(1) {/* -- オプション */
  width: calc(325 / 750 * 100vw);
}
#option > table > thead th:nth-of-type(2) {/* -- 納期目安 */
  width: calc(165 / 750 * 100vw);
}
#option > table > thead th:nth-of-type(3) {/* -- 料金 */
  width: calc(196 / 750 * 100vw);
}
#option > table > tbody th,
#option > table > tbody td {
  padding: calc(19 / 750 * 100vw);
  font-size: calc(24 / 750 * 100vw); line-height: calc(30 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
  border-top: max(calc(1 / 750 * 100vw), 1px) solid hsl(0, 0%, 31%);
  border-left: max(calc(1 / 750 * 100vw), 1px) solid hsl(0, 0%, 31%);
}
#option > table > tbody th {
  font-weight: 700;
  text-align: left;
}
#option > table > tbody td {
  font-weight: 500;
  text-align: center;
}
#option > table > tbody > tr:first-child th,
#option > table > tbody > tr:first-child td {
  border-top: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 31%);
}
#option > table > tbody th:first-child,
#option > table > tbody td:first-child {
  border-left: none;
}
#option > table > tbody th > ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0; padding: 0;
}
#option > table > tbody th > ul > li {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0 0 1em;
  font-weight: 500;
  font-size: calc(22 / 750 * 100vw); line-height: calc(28 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-indent: -1em;
  color: hsl(0, 0%, 50%);
}
#option > table > tbody th > ul > li::before {
  content: '※';
}
#option > table > tbody td > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(134 / 750 * 100vw); height: calc(32 / 750 * 100vw);
  box-sizing: border-box;
  background: hsl(53, 100%, 90%);
}


#flow {
  width: 100%;
  box-sizing: border-box;
  padding: calc(75 / 750 * 100vw) 0 calc(98 / 750 * 100vw);
  background: hsl(0, 0%, 96%);
}

#flow > h3 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto; padding: 0 0 calc(2 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: calc(90 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
  background: url(../../../images/lp/lppackageservice/price_01.svg) center bottom / calc(12 / 750 * 100vw) repeat-x;
}

#flow > ol {
  list-style: none;
  counter-reset: count;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(47 / 750 * 100vw);
  width: 100%;
  box-sizing: border-box;
  margin: calc((49 + 30) / 750 * 100vw) 0 0; padding: 0;
}
#flow > ol > li {
  counter-increment: count;
  display: block;
  width: calc(694 / 750 * 100vw);
  position: relative;
  padding: 0 0 calc(28 / 750 * 100vw);
  box-sizing: border-box;
  background: hsl(0, 0%, 100%);
  border: calc(4 / 750 * 100vw) solid hsl(217deg, 49%, 12%);
  border-radius: calc(21 / 750 * 100vw);
}
#flow > ol > li::before {
  content: counter(count);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(63 / 750 * 100vw); height: calc(63 / 750 * 100vw);
  margin: calc(-34 / 750 * 100vw) auto 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: calc(40 / 750 * 100vw); line-height: 1;
  color: hsl(0, 0%, 100%);
  background: hsl(221, 90%, 29%);
  border-radius: 50%;
}
#flow > ol > li > h4 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: calc(16 / 750 * 100vw) auto 0; padding: 0 0 calc(14 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(0, 0%, 31%);
}
#flow > ol > li > h4::before {
  content: '';
  width: calc(145 / 750 * 100vw); height: calc(4 / 750 * 100vw);
  position: absolute;
  bottom: 0; left: calc(50% - 145 / 2 / 750 * 100vw);
  background: hsl(221, 90%, 29%);
}
#flow > ol > li > p {
  width: 100%;
  margin: calc(13 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 31%);
}
#flow > ol > li:nth-of-type(1) > p > br:nth-of-type(1) {/* -- ォームor<br>弊社営業あ */
  display: none;
}
#flow > ol > li:nth-of-type(2) > p > br:nth-of-type(1) {/* -- ィレクター<br>によるお打 */
  display: none;
}
#flow > ol > li:nth-of-type(2) > p > br:nth-of-type(3) {/* -- ち合わせを<br>させていた */
  display: none;
}
#flow > ol > li:nth-of-type(3) > p > br:nth-of-type(1) {/* -- いただき、<br>デザイン制 */
  display: none;
}
#flow > ol > li:nth-of-type(4) > p > br:nth-of-type(1) {/* -- ンをご確認<br>いただきま */
  display: none;
}
#flow > ol > li:nth-of-type(4) > p > br:nth-of-type(2) {/* -- だきます。<br>2回まで修 */
  display: none;
}
#flow > ol > li:nth-of-type(5) > p > br:nth-of-type(1) {/* -- サイト構築<br>を行います */
  display: none;
}
#flow > ol > li:nth-of-type(6) > p > br:nth-of-type(1) {/* -- ンをご確認<br>いただきま */
  display: none;
}
#flow > ol > li:nth-of-type(6) > p > br:nth-of-type(2) {/* -- だきます。<br>2回まで修 */
  display: none;
}
#flow > ol > li:nth-of-type(7) > p > br:nth-of-type(1) {/* -- ング校了後<br>納品させて */
  display: none;
}
#flow > ol > li:nth-of-type(7) > p > br:nth-of-type(3) {/* -- バーアップ<br>をお選びい */
  display: none;
}
#flow > ol > li > ul {
  display: flex;
  list-style: none;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0; padding: 0;
}
#flow > ol > li > ul > li {
  width: fit-content;
  box-sizing: border-box;
  padding: 0 0 0 1em;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(36 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-indent: -1em;
  color: hsl(0, 0%, 31%);
}
#flow > ol > li > ul > li::before {
  content: '※';
}


#faq {
  width: 100%;
  box-sizing: border-box;
  padding: calc(75 / 750 * 100vw) 0 calc(97 / 750 * 100vw);
  background: hsl(0, 0%, 100%);
}

#faq > h3 {
  width: fit-content;
  box-sizing: border-box;
  position: relative;
  margin: 0 auto; padding: 0 0 calc(2 / 750 * 100vw);
  font-weight: 900;
  font-size: calc(60 / 750 * 100vw); line-height: calc(90 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
  background: url(../../../images/lp/lppackageservice/price_01.svg) center bottom / calc(12 / 750 * 100vw) repeat-x;
}

#faq > details {
  width: calc(690 / 750 * 100vw);
  box-sizing: border-box;
  margin: calc(36 / 750 * 100vw) auto 0; padding: calc(33 / 750 * 100vw) 0 0;
  border-top: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 31%);
}
#faq > details:first-of-type {
  margin: calc(49 / 750 * 100vw) auto 0;
}
#faq > details > summary {
  list-style: none;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 0 calc(64 / 750 * 100vw) 0 1em;
  font-weight: 700;
  font-size: calc(26 / 750 * 100vw); line-height: calc(35 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-indent: -1em;
  color: hsl(217deg, 49%, 12%);
  cursor: pointer;
}
#faq > details > summary::before {
  content: 'Q.';
}
#faq > details > summary::after {
  content: '';
  display: block;
  width: calc(29 / 750 * 100vw); height: calc(18 / 750 * 100vw);
  position: absolute;
  top: calc(9 / 750 * 100vw); right: calc(18 / 750 * 100vw);
  background: url(../../../images/lp/lppackageservice/faq_01.svg) center bottom / calc(29 / 750 * 100vw) no-repeat;
  transform-origin: center;
}
#faq > details:open > summary::after {
  transform: rotate(180deg);
}
#faq > details > p {
  width: 100%;
  box-sizing: border-box;
  margin: calc(31 / 750 * 100vw) 0 0; padding: 0 0 0 1em;
  font-weight: 500;
  font-size: calc(24 / 750 * 100vw); line-height: calc(28 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-indent: -1em;
  color: hsl(0, 0%, 0%);
}
#faq > details > p::before {
  content: 'A.';
}
#faq > details > p > small {
  display: inline-block;
  padding: 0 0 0 1em;
  font-size: calc(24 / 750 * 100vw); line-height: calc(28 / 750 * 100vw);
  text-indent: -1em;
}
#faq > details > p > small::before {
  content: '※';
}


#order {
  width: 100%;
  box-sizing: border-box;
  padding: calc(71 / 750 * 100vw) 0 calc(66 / 750 * 100vw);
  background: hsl(0, 0%, 96%);
}

#order > h3 {
  width: calc(550 / 750 * 100vw);
  margin: 0 auto;
}
#order > h3 img {
  width: 100%; height: auto;
}

#order > p {
  width: fit-content;
  margin: calc(30 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: calc(26 / 750 * 100vw);
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(221, 90%, 29%);
}

#order > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(506 / 750 * 100vw); height: calc(86 / 750 * 100vw);
  position: relative;
  margin: calc(36 / 750 * 100vw) auto 0;
  font-weight: 700;
  font-size: calc(36 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: hsl(0, 0%, 100%);
  background: hsl(221, 90%, 29%);
  border-radius: calc(86 / 2 / 750 * 100vw);
  user-select: none;
}


aside {
  width: 100%; height: 0;
  position: sticky;
  bottom: calc(200 / 750 * 100vw);
}

aside > a {
  width: calc(137 / 750 * 100vw); height: calc(137 / 750 * 100vw);
  overflow: hidden;
  position: absolute;
  top: calc(-111 / 750 * 100vw); left: calc(50% + 196 / 750 * 100vw);
  z-index: 1;
  background: hsl(217deg, 49%, 12%);
  border-radius: 50%;
  user-select: none;
}
aside > a img {
  width: 100%; height: auto;
}


footer {
  width: 100%;
  padding: calc(36 / 750 * 100vw) 0 0;
  background: hsl(221, 90%, 29%);
}

footer > h3 {
  width: fit-content;
  box-sizing: border-box;
  margin: 0 auto;
  font-weight: 700;
  font-size: calc(24 / 750 * 100vw); line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: hsl(0, 0%, 100%);
}

footer > a{
  display: block;
  width: calc(234 / 750 * 100vw);
  margin: calc(29 / 750 * 100vw) auto 0;
}
footer > a img {
  width: 100%; height: auto;
}

footer > p {
  width: fit-content;
  box-sizing: border-box;
  margin: calc(27 / 750 * 100vw) auto 0;
  font-weight: 500;
  font-size: calc(22 / 750 * 100vw); line-height: calc(28 / 750 * 100vw);
  letter-spacing: 0;
  text-align: center;
  color: hsl(0, 0%, 100%);
}

footer > small {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: calc(31 / 750 * 100vw) auto 0; padding: calc(18 / 750 * 100vw) 0 calc(21 / 750 * 100vw);
  font-weight: 500;
  font-size: calc(20 / 750 * 100vw); line-height: 1;
  letter-spacing: calc(25em / 1000);
  text-align: center;
  color: hsl(0, 0%, 100%);
  border-top: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 100%);
}





@media (min-width: 768px) {

body {
  min-width: 1240px;
  font-size: 18px;
}


header {
  height: 101px;
  padding: 0 80px 0 57px;
  border-bottom: 1px solid hsl(221, 90%, 27%);
  box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.15);
}

header > h1 {
  width: 136px;
}

header > a {
  width: 258px; height: 44px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  font-size: 18px;
  border-radius: calc(44px / 2);
}
header > a::before {
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0; z-index: -1;
  background: hsl(221, 90%, 29%);
  transform: translate(-100%, 0);
  transition: transform 0.4s;
}
header > a:hover::before {
  transform: translate(0, 0);
}

#cover {
  padding: 73px 0;
  background: url(../../../images/lp/lppackageservice/cover_02_pc.webp) calc(50% + 123px + 473px / 2) 42px / 473px no-repeat,
    url(../../../images/lp/lppackageservice/cover_01.svg) center top / 25px repeat,
    hsl(0, 0%, 100%);
}

#cover > h2 {
  left: calc(50% - 600px);
  font-size: 72px; line-height: 95px;
  letter-spacing: calc(75em / 1000);
}
#cover > h2 > br:nth-of-type(2) {/* -- パッケージ<br>サービス */
  display: none;
}

#cover > ul {
  gap: 16px;
  width: 666px;
  position: relative;
  left: calc(50% - 600px);
  margin: calc(22px + 10px) 0 0;
}
#cover > ul > li {
  width: 325px;
  padding: 0 0 38px;
  border: 6px solid hsl(221, 90%, 29%);
  border-radius: 18px;
}
#cover > ul > li > h3 {
  width: 108px; height: 29px;
  margin: -16px auto 0;
  font-size: 18px;
  border-radius: 3px;
}
#cover > ul > li > p {
  margin: 33px auto 0;
  font-size: 28px;
}
#cover > ul > li > p > span {
  padding: 0 10px 4px;
  font-size: 43px;
}
#cover > ul > li > p > span::before {
  width: 100%; height: 15px;
}
#cover > ul > li > p > span > small {
  font-size: 28px;
}
#cover > ul > li:nth-of-type(1) > p > span { /* -- 15万円(税抜)～ */
  margin: 0 auto 9px;
}
#cover > ul > li:nth-of-type(2) > p > span { /* -- 3週間 */
  margin: 9px auto 0;
}


#issue {
  width: 100%; height: 427px;
  padding: 12px 0 0;
  background: hsl(221, 90%, 29%) url(../../../images/lp/lppackageservice/issue_01.svg) center top / 1820px repeat;
}
#issue::before {
  width: max(50vw, calc(1240px / 2));
  height: 151px;
}
#issue::after {
  width: max(50vw, calc(1240px / 2));
  height: 151px;
}

#issue > h3 {
  width: 910px;
  padding: 42px 0 36px;
  font-size: 48px;
  background: hsl(221, 90%, 29%);
}
#issue > h3::before {
  width: calc(12px * 53); height: 2px;
  position: absolute;
  bottom: 21px; left: calc(50% - 12px * 53 / 2);
  background: url(../../../images/lp/lppackageservice/issue_02.svg) center top / 12px repeat-x;
}

#issue > ul {
  justify-content: space-between;
  gap: normal;
  width: 1214px; height: 120px;
  margin: 0 auto; padding: 10px 7px 0;
}
#issue > ul > li {
  height: 103px;
  padding: 0 0 12px;
  font-size: 18px; line-height: 30px;
}
#issue > ul > li:nth-of-type(2n+1) {
  width: 290px;
  background: url(../../../images/lp/lppackageservice/issue_03_pc.svg) center top / 290px no-repeat;
}
#issue > ul > li:nth-of-type(2n) {
  width: 290px;
  background: url(../../../images/lp/lppackageservice/issue_03_pc.svg) center top / 290px no-repeat;
}


#solution {
  padding: 51px 0 100px;
  background: linear-gradient(hsla(0, 0%, 100%, 1) calc(358 / 1431 * 100%), hsla(0, 0%, 100%, 0) calc(358 / 1431 * 100%)),
    url(../../../images/lp/lppackageservice/solution_01.svg) center top / 25px repeat,
    hsl(0, 0%, 100%);
  border-bottom: 2px solid hsl(0, 0%, 35%);
}

#solution > h3 {
  font-size: 48px;
}

#solution > ul {
  gap: normal;
  width: 1200px;
  margin: 30px auto 0; padding: 29px 0;
  border: 6px solid hsl(221, 90%, 29%);
  border-radius: 49px;
}
#solution > ul > li {
  align-content: start;
  gap: 18px;  
  width: 294px;
  padding: 0;
  border-top: none;
  border-left: max(calc(2 / 750 * 100vw), 2px) solid hsl(0, 0%, 79%);
}
#solution > ul > li > h4 {
  width: 224px;
  margin: -4px auto 0;
  font-size: 22px; line-height: 31px;
}
#solution > ul > li > h4 > br {
  display: inline;
}
#solution > ul > li > img {
  width: 138px;
}
#solution > ul > li > p {
  width: 224px;
  margin: 0 auto;
  font-size: 16px; line-height: 26px;
}
#solution > ul > li:first-of-type {
  border-left: none;
}


#template {
  width: 1200px;
  margin: 55px auto 0; padding: 57px 0 0;
  background: url(../../../images/lp/lppackageservice/template_01_pc.webp) right top / 585px no-repeat;
}

#template > hgroup {
  width: 766px;
  margin: 0;
}
#template > hgroup > p {
  display: block;
  margin: 19px 0 0;
  font-weight: 700;
  font-size: 24px; line-height: 1;
  letter-spacing: calc(25em / 1000);
  color: hsl(217deg, 49%, 12%);
}

#template > p {
  width: 780px;
  margin: 33px 0 0;
  font-weight: 700;
  font-size: 18px; line-height: 30px;
}
#template > p > br:nth-of-type(1) {/* -- 洗練された<br>デザインテ */
  display: none;
}
#template > p > br:nth-of-type(2) {/* -- をご用意。<br>最適化され */
  display: inline;
}
#template > p > br:nth-of-type(3) {/* -- れた構成や<br>導線設計を */
  display: none;
}
#template > p > br:nth-of-type(4) {/* -- スタマイズ<br>することで */
  display: none;
}
#template > p > br:nth-of-type(5) {/* -- ることで、<br>自社らしさ */
  display: inline;
}
#template > p > br:nth-of-type(6) {/* -- ーディかつ<br>リーズナブ */
  display: none;
}

#template > h4 {
  width: 559px;
  margin: 34px 0 0; padding: 0 0 12px;
  font-size: 24px;
  border-bottom: 2px solid hsl(217deg, 49%, 12%);
}

#template > ul {
  gap: 14px;
  width: 559px;
  margin: 19px 0 0;
}
#template > ul > li {
  padding: 0 0 0 38px;
  font-weight: 700;
  font-size: 18px; line-height: 23px;
}
#template > ul > li::before {
  width: 22px; height: 23px;
  background: url(../../../images/lp/lppackageservice/template_03.svg) left top / 22px no-repeat;
}

#template > a {
  width: 361px; height: 62px;
  overflow: hidden;
  z-index: 0;
  margin: 69px auto 0;
  font-size: 24px;
  border-radius: calc(62px / 2);
}
#template > a::before {
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0; z-index: -1;
  background: hsl(45, 100%, 64%);
  transform: translate(-100%, 0);
  transition: transform 0.4s;
}
#template > a:hover::before {
  transform: translate(0, 0);
}
#template > a::after {
  width: 11px; height: 18px;
  top: calc(50% - 18px / 2); right: 21px;
  background: url(../../../images/lp/lppackageservice/template_04.svg) center / 11px no-repeat;
}

#price {
  padding: 99px 0 95px;
}

#price > h3 {
  margin: 0 auto; padding: 0 0 18px;
  font-size: 48px; line-height: 1;
  background: url(../../../images/lp/lppackageservice/price_01.svg) bottom center / 12px repeat-x;
}

#price > div {
  width: 1200px;
  margin: 59px auto 0; padding: 1px 0 74px;
  border-radius: 36px;
  background: hsl(220, 100%, 98%) url(../../../images/lp/lppackageservice/price_02_1.svg) bottom right 145px / 176px no-repeat;
}
#price > div > h4 {
  width: 302px; height: 34px;
  margin: calc(-17px - 1px) auto 0;
  font-size: 24px; line-height: 1;
  border-radius: 6px;
}
#price > div > p {
  margin: 62px auto 0;
  font-size: 30px; line-height: 75px;
}
#price > div > p > span {
  font-size: 75px;
}
#price > div > p > span > small {
  font-size: 37px; line-height: 75px;
}
#price > h4 {
  margin: 70px auto 0;
  font-size: 30px;
}

#price > ul:nth-of-type(1) {/* -- お客様にご用意いただくもの */
  gap: 18px;
  width: 1200px;
  margin: 32px auto 0;
}
#price > ul:nth-of-type(1) > li {
  width: 286px; height: 183px;
  font-size: 18px; line-height: 30px;
  border-radius: 32px;
}
#price > ul:nth-of-type(1) > li:nth-of-type(1) {/* -- ロゴデータ */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_2.svg) bottom right 8px / 109px no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(2) {/* -- キャッチコピー テキスト原稿 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_3.svg) bottom 4px right 2px / 125px no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(3) {/* -- 写真・製品画像 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_4.svg) bottom right -4px / 115px no-repeat;
}
#price > ul:nth-of-type(1) > li:nth-of-type(4) {/* -- メインカラー デザインイメージ等のご希望 */
  background: hsl(0, 0%, 96%) url(../../../images/lp/lppackageservice/price_02_5.svg) bottom -13px right 1px / 97px no-repeat;
}

#price > ul:nth-of-type(2) {/* -- 注釈 */
  width: 540px;
  margin: 25px auto 0;
}
#price > ul:nth-of-type(2) > li {
  width: 100%;
  font-weight: 500;
  font-size: 16px; line-height: 26px;
}
#price > ul:nth-of-type(2) > li::before {
  content: '※';
}


.fascia {
  padding: 44px 0 48px;
  background: hsl(221, 90%, 29%);
}

.fascia > h3 {
  width: 407px;
}

.fascia > p {
  margin: 22px auto 0;
  font-weight: 700;
  font-size: 18px; line-height: 1;
}
.fascia > p > br {
  display: none;
}

.fascia  > a {
  width: 361px; height: 62px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin: 30px auto 0;
  font-size: 24px;
  border-radius: calc(62px / 2);
}
.fascia > a::before {
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0; z-index: -1;
  background: hsl(45, 100%, 64%);
  transform: translate(-100%, 0);
  transition: transform 0.4s;
}
.fascia > a:hover::before {
  transform: translate(0, 0);
}


#option {
  padding: 99px 0;
}

#option > h3 {
  padding: 0 0 18px;
  font-size: 48px; line-height: 1;
  background: url(../../../images/lp/lppackageservice/price_01.svg) bottom center / 12px repeat-x;
}

#option > p {
  margin: 29px auto 0;
  font-size: 16px; line-height: 1;
}
#option > p > br {
  display: none;
}

#option > table {
  width: 1002px;
  margin: 60px auto 0;
  border: 2px solid hsl(0, 0%, 31%);
  border-radius: 21px;
}
#option > table > thead th,
#option > table > thead td {
  padding: 32px;
  font-size: 24px; line-height: 1;
  border-left: 1px solid hsl(0, 0%, 31%);
}
#option > table > thead th:nth-of-type(1) {/* -- オプション */
  width: 342px;
}
#option > table > thead th:nth-of-type(2) {/* -- 納期目安 */
  width: 315px;
}
#option > table > thead th:nth-of-type(3) {/* -- 料金 */
  width: 339px;
}
#option > table > tbody th,
#option > table > tbody td {
  padding: 24px 58px;
  font-size: 16px; line-height: 30px;
  border-top: 1px solid hsl(0, 0%, 31%);
  border-left: 1px solid hsl(0, 0%, 31%);
}
#option > table > tbody > tr:first-child th,
#option > table > tbody > tr:first-child td {
  border-top: 2px solid hsl(0, 0%, 31%);
}
#option > table > tbody td:nth-of-type(2) {/* -- 料金 */
  padding-left: 84px;
  text-align: left;
}
#option > table > tbody th > ul > li {
  font-size: 14px; line-height: 30px;
}
#option > table > tbody td > span {
  width: 75px; height: 26px;
  margin: 0 10px 0 0;
}
#option > table > tbody td > br {
  display: none;
}


#flow {
  padding: 99px 0 98px;
}

#flow > h3 {
  margin: 0 auto; padding: 0 0 18px;
  font-size: 48px; line-height: 1;
  background: url(../../../images/lp/lppackageservice/price_01.svg) bottom center / 12px repeat-x;
}

#flow > ol {
  gap: 66px 30px;
  width: 1200px;
  margin: 79px auto 0;
}
#flow > ol > li {
  width: 274px; height: 240px;
  padding: 0;
  border: 4px solid hsl(217deg, 49%, 12%);
  border-radius: 21px;
}
#flow > ol > li::before {
  width: 62px; height: 62px;
  margin: -34px auto 0;
  font-size: 40px;
}
#flow > ol > li::after {
  content: '';
  display: block;
  width: 16px; height: 29px;
  position: absolute;
  top: calc(50% - 29px /2); right: -18px;
  background: url(../../../images/lp/lppackageservice/flow_01.svg) center / 16px no-repeat;
}
#flow > ol > li:last-of-type::after {
  display: none;
}
#flow > ol > li > h4 {
  margin: 27px auto 0; padding: 0 0 6px;
  font-size: 24px;
}
#flow > ol > li > h4::before {
  width: 145px; height: 2px;
  left: calc(50% - 145px / 2);
}
#flow > ol > li > p {
  margin: 25px auto 0;
  font-size: 16px; line-height: 26px;
}
#flow > ol > li:nth-of-type(1) > p > br:nth-of-type(1) {/* -- ォームor<br>弊社営業あ */
  display: inline;
}
#flow > ol > li:nth-of-type(2) > p > br:nth-of-type(1) {/* -- ィレクター<br>によるお打 */
  display: inline;
}
#flow > ol > li:nth-of-type(2) > p > br:nth-of-type(2) {/* -- ターによる<br>お打ち合わ */
  display: none;
}
#flow > ol > li:nth-of-type(2) > p > br:nth-of-type(3) {/* -- ち合わせを<br>させていた */
  display: inline;
}
#flow > ol > li:nth-of-type(3) > p > br:nth-of-type(1) {/* -- いただき、<br>デザイン制 */
  display: inline;
}
#flow > ol > li:nth-of-type(4) > p > br:nth-of-type(1) {/* -- ンをご確認<br>いただきま */
  display: inline;
}
#flow > ol > li:nth-of-type(4) > p > br:nth-of-type(2) {/* -- だきます。<br>2回まで修 */
  display: inline;
}
#flow > ol > li:nth-of-type(5) > p > br:nth-of-type(1) {/* -- サイト構築<br>を行います */
  display: inline;
}
#flow > ol > li:nth-of-type(6) > p > br:nth-of-type(1) {/* -- ンをご確認<br>いただきま */
  display: inline;
}
#flow > ol > li:nth-of-type(6) > p > br:nth-of-type(2) {/* -- だきます。<br>2回まで修 */
  display: inline;
}
#flow > ol > li:nth-of-type(7) > p > br:nth-of-type(1) {/* -- ング校了後<br>納品させて */
  display: inline;
}
#flow > ol > li:nth-of-type(7) > p > br:nth-of-type(3) {/* -- バーアップ<br>をお選びい */
  display: inline;
}
#flow > ol > li > ul > li {
  font-size: 14px; line-height: 24px;
}


#faq {
  padding: 98px 0 101px;
}

#faq > h3 {
  margin: 0 auto; padding: 0 0 18px;
  font-size: 48px; line-height: 1;
  background: url(../../../images/lp/lppackageservice/price_01.svg) bottom center / 12px repeat-x;
}

#faq > details {
  width: 1200px;
  margin: 40px auto 0; padding: 39px 0 0;
  border-top: 2px solid hsl(0, 0%, 31%);
}
#faq > details:first-of-type {
  margin: 100px auto 0;
}
#faq > details:last-of-type {
  padding-bottom: 39px;
  border-bottom: 2px solid hsl(0, 0%, 31%);
}
#faq > details > summary {
  padding: 0 118px 0 1em;
  font-size: 18px; line-height: 1;
}
#faq > details > summary::after {
  width: 26px; height: 15px;
  top: 1px; right: 46px;
  background: url(../../../images/lp/lppackageservice/faq_01.svg) bottom center / 26px no-repeat;
}
#faq > details > p {
  margin: 34px 0 0;
  font-size: 16px; line-height: 28px;
}
#faq > details > p > small {
  font-size: 16px; line-height: 28px;
}


#order {
  padding: 42px 0 49px;
}

#order > h3 {
  width: 407px;
}

#order > p {
  margin: 16px auto 0;
  font-weight: 700;
  font-size: 18px; line-height: 1;
}
#order > p > br {
  display: none;
}

#order > a {
  width: 361px; height: 62px;
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin: 30px auto 0;
  font-size: 24px;
  border-radius: calc(64px / 2);
}
#order > a::before {
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0; z-index: -1;
  background: hsl(45, 100%, 64%);
  transform: translate(-100%, 0);
  transition: transform 0.4s;
}
#order > a:hover::before {
  transform: translate(0, 0);
}


aside {
  bottom: 0;
}

aside > a {
  width: 77px; height: 77px;
  overflow: hidden;
  position: absolute;
  top: -107px; left: calc(50% + 600px - 77px);
  z-index: 1;
}
aside > a::before {
  content: '';
  width: 100%; height: 100%;
  position: absolute;
  top: 0; left: 0; z-index: -1;
  background: hsl(221, 90%, 29%);
  transform: translate(0, 100%);
  transition: transform 0.4s;
}
aside > a:hover::before {
  transform: translate(0, 0);
}
aside > a img {
  width: 100%; height: auto;
}


footer {
  padding: 42px 0 0;
}

footer > h3 {
  font-size: 20px;
}

footer > a{
  width: 157px;
  margin: 16px auto 0;
}

footer > p {
  margin: 14px auto 0;
  font-size: 18px; line-height: 23px;
}

footer > small {
  margin: 35px auto 0; padding: 14px 0;
  font-size: 14px;
  border-top: 1px solid hsl(0, 0%, 100%);
}

}