@charset "UTF-8";

* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; text-decoration: none !important; margin: 0; padding: 0; list-style-type: none; line-height: 1.4;}
img {width: 100%; vertical-align: bottom;}
a {color: #000;}

.sp {display: block;}
.pc {display: none;}

body {position: relative;}
article {filter: saturate(125%);}

.kvBox {position: relative; background:linear-gradient(90deg,#b3e2d0 0%,#b3e2d0 50%,#ffdbb3 50%,#ffdbb3 100%); padding-top: 4%; margin-bottom: 2%; overflow: hidden;}
.kvBox__logo {width: 9%; margin: 0 0 4% 4%; filter: saturate(70%);}
.kvBox__title {width: 85%; margin: 0 auto 7%;}
.kvBox__main {position: relative; width: 79%; margin: 0 auto; transform: translateY(100%); opacity: 0; transition: 3s ease; -webkit-transition: 3s ease; -ms-transition: 3s ease;}
.kvBox__ribbon {position: absolute; top: -8%; left: 50%; width: 38%; height: 17%; transform: translateX(-50%); z-index: 3;}
.kvBox__scissors_right {position: absolute; top: 70%; left: 45%; width: 12%; height: 17%; z-index: 5; animation: scissors01 .8s linear infinite alternate forwards;}
@keyframes scissors01 {
  0%{transform: rotateZ(0deg); transform-origin: 60% 30%;}
  100%{transform: rotateZ(20deg); transform-origin: 60% 30%;}
}
.kvBox__scissors_left {position: absolute; top: 70%; left: 45%; width: 12%; height: 17%; z-index: 3; animation: scissors02 .8s linear infinite alternate forwards;}
@keyframes scissors02 {
  0%{transform: rotateZ(0deg); transform-origin: 60% 15%;}
  100%{transform: rotateZ(-25deg); transform-origin: 60% 15%;}
}
.kvBox__icon01 {position: absolute; top: 50%; left: 3%; width: 17%; height: 19%; background: url(../img/icon_01.svg) no-repeat; background-size: 100%;}
.kvBox__icon02 {position: absolute; top: 50%; right: 3%; width: 19%; height: 20%; background: url(../img/icon_02.svg) no-repeat; background-size: 100%;}
.kvBox .slider {position: absolute; top: 10%; left: 51.5%; width: 40%; height: 0%; background-size: 100%; transform: translateX(-50%); opacity: 0;}

.mainCont {font-family: fot-tsukuardgothic-std, sans-serif;}

.ttl {position: relative; text-align: center; padding: 4% 0; margin-bottom: 4%;}
.ttl img.point {width: 66%;}
.ttl img.select {width: 69%;}
.ttl img.howto {width: 67%;}
.ttl.color01 {background: #ffdbb3;}
.ttl.color02 {background: #b3e2d0;}
.ttl:before {position: absolute; top: 4%; left: 0; content: ""; width: 100%; height: 3%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}
.ttl:after {position: absolute; bottom: 4%; left: 0; content: ""; width: 100%; height: 3%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}

/* about */
.about {margin-bottom: 11%;}
.about__lead {font-size: 4.54vw; font-weight: bold; letter-spacing: -2px; text-align: justify; margin: 0 2% 11% 2%;}
.about__inner {padding: 0 5%;}
.about__icon {width: 19%; margin: 0 auto 2%;}
.about__heading {width: 93%; margin: 0 auto 9%;}
.aboutList {display: flex; justify-content: space-between; flex-wrap: wrap;}
.aboutList li {width: 46.5%;}
.aboutList li:nth-child(-n+4) {margin-bottom: 7%;}

/* point */
.point__inner {padding: 3% 2% 11%;}
.pointList {display: flex; justify-content: space-between; flex-wrap: wrap;}
.pointList li {width: 48%;}
.pointList li:nth-child(-n+2) {margin-bottom: 2%;}

/* select */
.select__inner {padding: 10% 8% 10% 11%;}
.selectContainer {}
.selectItems:not(:last-child) {margin-bottom: 16%;}
.selectInnerContainer {display: flex; align-items: flex-end; margin-bottom: 2%;}
.selectItems__left {width: 42%;}
.selectItems__right {width: 49%; margin-left: 7%;}
.selectItems__ttl {margin-bottom: 4%;}
.selectItems__ttl.size01 {width: 90%;}
.selectItems__txt01 {width: 93%; margin-bottom: 2%;}
.selectItems__txt02 {width: 93%;}
.selectItems__note {font-size: 3.13vw; line-height: 1.2;}

/* howto */
.howto__inner {padding: 0 3%;}
.howto__lead {font-size: 4.54vw; font-weight: bold; text-align: justify; letter-spacing: -2px; margin-bottom: 7%;}
.howto__innertxt {padding: 0 7%;}
.howto__txt {width: 93%; margin: 0 auto 7%;}
.howtoAnker {margin-bottom: 11%;}
.howtoAnker li {background: #ffdbb3;}
.howtoAnker li a {position: relative; display: block; padding: 7% 11% 7% 14%; line-height: 1;}
.howtoAnker li a.num01 img {width: 95%;}
.howtoAnker li a.num01:before {position: absolute; top: 50%; left: 6%; content: ""; width: 3%; height: 50%; background: url(../img/icon_num01.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoAnker li a.num02 img {width: 14.5%;}
.howtoAnker li a.num02:before {position: absolute; top: 50%; left: 5%; content: ""; width: 6%; height: 50%; background: url(../img/icon_num02.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoAnker li a.num03 img {width: 30%;}
.howtoAnker li a.num03:before {position: absolute; top: 50%; left: 5%; content: ""; width: 6%; height: 50%; background: url(../img/icon_num03.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoAnker li a:after {position: absolute; top: 50%; right: 4%; content: ""; width: 5%; height: 24%; background: url(../img/icon_arrow.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoAnker li:not(:last-child) {margin-bottom: 3%;}
.howtoFlowContainer.mb01 {margin-bottom: 7%;}

.howtoFlowContainerWrap.mb01 {margin-bottom: 7%;}

.howtoRange ul li.mb {
  margin-bottom: 0.5em;
}

.howtoFlow.mb01 {margin-bottom: 8.5%;}
.howtoFlow.mb02 {margin-bottom: 9%;}
.howtoFlow.mb03 {margin-bottom: 4%;}
.howtoFlow__ttlWrap {background: #ffdbb3;}
.howtoFlow__ttl {position: relative; text-align: center; padding: 6.8% 0; margin-bottom: 8%; line-height: 1;}
.howtoFlow__ttl:after {position: absolute; bottom: -22%; left: 50%; content: ""; width: 10%; height: 23%; background: url(../img/icon_balloon.svg) no-repeat; background-size: 100%; transform: translateX(-50%);}
.howtoFlow__ttl.num01:before {position: absolute; top: 50%; left: 8%; content: ""; width: 3%; height: 54%; background: url(../img/icon_num01.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoFlow__ttl.num01 img {position: relative; display: inline-block; width: 66%;}
.howtoFlow__ttl.num02:before {position: absolute; top: 50%; left: 7%; content: ""; width: 7%; height: 62%; background: url(../img/icon_num02.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoFlow__ttl.num02 img {position: relative; display: inline-block; width: 10%;}
.howtoFlow__ttl.num03:before {position: absolute; top: 50%; left: 7%; content: ""; width: 7%; height: 60%; background: url(../img/icon_num03.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoFlow__ttl.num03 img {position: relative; display: inline-block; width: 21%;}
.howtoFlow__lead {font-size: 4vw; font-weight: bold; text-align: justify; margin-bottom: 2%;}
.howtoFlow__note {font-size: 4.07vw; font-weight: bold; text-align: justify; color: #c0271b; text-indent: -1em; padding-left: 1em;} 
.howtoRange {position: relative;}
.howtoRange__inner {position: relative; padding: 2% 4% 4% 4%; margin-bottom: 11%;}
.howtoRange__inner:before {position: absolute; top: 50%; left: 0; content: ""; width: 100%; height: 95%; background: url(../img/howto_bg02.png); background-repeat: repeat-y; background-size: 100%; background-position-y: center; transform: translateY(-50%);}
.howtoRange:before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 1%; background: url(../img/howto_bg.png) no-repeat; background-size: 100%;}
.howtoRange:after {position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1%; background: url(../img/howto_bg.png) no-repeat; background-size: 100%;}
.howtoRange__inner h4 {font-size: 3.97vw; font-weight: bold; text-align: center; line-height: 1; margin-bottom: 2%;}
.howtoRange ul li h5 {font-size: 3.6vw; font-weight: bold; line-height: 1.2;}
.howtoRange ul li {font-size: 3.6vw; font-weight: bold; line-height: 1.2;}
.howtoRange ul li p {font-size: 3.6vw; font-weight: bold; line-height: 1.2; color: #c0271b; text-indent: -1em; padding-left: 1em;}
.howtoFlowItems:not(:last-child) {margin-bottom: 7%;}
.howtoFlow__title-left{width: 100%; max-width: 123px; margin: 0 auto 20px;}
.howtoFlow__title-right{width: 100%; max-width: 70px; margin: 0 auto 20px;}
.howtoFlow__heading {position: relative; text-align: center; padding: 4% 0 4.5%; margin: 0 -3% 4% -3%;}
.howtoFlow__heading:before {position: absolute; top: 10%; left: 0; content: ""; width: 100%; height: 5%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}
.howtoFlow__heading:after {position: absolute; bottom: 10%; left: 0; content: ""; width: 100%; height: 7%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}
.howtoFlow__heading.pattern01 img {width: 26%;}
.howtoFlow__heading.pattern02 img {width: 17%;}
.howtoFlow__heading.flow01 img {width: 26%;}
.howtoFlow__heading.flow01 .exit-design-img{width: 48%;}
@media screen and (min-width: 769px) {
  .howtoFlow__heading.flow01 .exit-design-img {
    width: 33%;
  }
}
.howtoFlow__heading.flow02 img {width: 12.8%;}
.howtoFlow__heading.pattern03 img {width: 12.8%;}
.howtoFlow__img {width: 90%; margin: 0 auto 4%;}
.howtoFlowList li a {position: relative; display: inline-block; width: 60%; font-size: 3.87vw; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; line-height: 2.2; margin-left: 20%;}
.howtoFlowList li a:before {position: absolute; top: 50%; left: -12%; content: ""; width: 9%; height: 70%; background: url(../img/icon_download.svg) no-repeat; background-size: 100%; transform: translateY(-50%);}
.howtoFlowItems02:not(:last-child) {margin-bottom: 4%;}
.howtoFlowList02 {margin-bottom: 7%;}
.howtoFlowList02 li {font-size: 4.07vw; font-weight: bold;}
.howtoList03flex:nth-child(3) {position: relative;}
.howtoList03flex:nth-child(3):before {position: absolute; top: 13%; left: 37%; content: ""; width: 16%; height: 37%; background: url(../img/howto_img05_2.svg) no-repeat; background-size: 100%;}
.howtoList03flex__txt {position: relative; font-size: 4.54vw; font-weight: bold; line-height: 1.2; padding: 0 4% 0 9%; margin-bottom: 4%;}
.howtoList03flex__txt.num01:before {position: absolute; top: 0; left: 0; content: ""; width: 7%; height: 67%; background: url(../img/icon_listNum01.svg) no-repeat; background-size: 100%;}
.howtoList03flex__txt.num02:before {position: absolute; top: 0; left: 0; content: ""; width: 7%; height: 67%; background: url(../img/icon_listNum02.svg) no-repeat; background-size: 100%;}
.howtoList03flex__txt.num03:before {position: absolute; top: 0; left: 0; content: ""; width: 7%; height: 67%; background: url(../img/icon_listNum03.svg) no-repeat; background-size: 100%;}
.howtoList03flex__txt.num04:before {position: absolute; top: 0; left: 0; content: ""; width: 7%; height: 67%; background: url(../img/icon_listNum04.svg) no-repeat; background-size: 100%;}
.howtoList03flex__img {margin-bottom: 7%; padding: 0 4% 0 3%;}
.howtoFin__inner {padding: 0 5%;}
.howtoFin__icon {width: 95%; padding-left: 5%; margin-bottom: 2%;}
.howtoFin__img {margin-bottom: 4%;}
.howtoFin__txt {font-size: 4.05vw; font-weight: bold; text-align: justify; letter-spacing: -2px; line-height: 1.4;}

/* footer */
.footer .share__inner {padding: 0 1%; margin-bottom: 2%;}
.footer .share__icon {width: 24%; margin: 0 auto 4%;}
.footer .share__link { text-align: center; letter-spacing: -1px; margin-bottom: 1%; background: #e9f3fa; border: solid .7px #000; border-radius: 3px;}
.footer .share__link a {position: relative; display: block; padding: 2.8% 0 3% 10%; font-size: 3.6vw; font-weight: bold; font-family: fot-tsukuardgothic-std, sans-serif; line-height: 1;}
.footer .share__link a:before {position: absolute; top: 18%; left: 23%; content: ""; width: 6%; height: 66%; background: url(../img/icon_tw.svg) no-repeat; background-size: 100%;}
.footer .shareContainer {display: flex; justify-content: space-between;}
.footer .shareItems__img {width: 49.5%;}
.footer .copy {display: flex; align-items: center; justify-content: space-between; padding: 0 3%; margin-bottom: 4%;}
.footer .copy__txt {font-size: 3.91vw; font-family: 'Noto Sans JP', sans-serif; color: #707070;}
.footer .copy__img {width: 9%; filter: saturate(70%);}

.pageTop {position: fixed; right: 3%; width: 10%;}

  @media screen and (min-width: 769px) {
  .sp {display: none;}
  .pc {display: block;}

  .kvBox {padding-top: 1%; margin-bottom: 2%;}
  .kvBox__logo {width: 4%; margin: 0 0 6% 2%;}
  .kvBox__logo a {transition: .6s; -webkit-transition: .6s; -moz-transition: .6s; -ms-transition: .6s;}
  .kvBox__logo a:hover {opacity: .7;}
  .kvBox__title {position: absolute; top: 4%; left: 50%; width: 35%; margin: 0; transform: translateX(-50%);}
  .kvBox__main {width: 30%;}
  .kvBox__ribbon {top: -8%; width: 34%; height: auto;}
  .kvBox__icon01 {top: 43%; left: 31%; width: 7%; height: 22%;}
  .kvBox__icon02 {top: 43%; right: 30%; width: 8%; height: 22%;}
  .kvBox__icon03 {position: absolute; top: 43%; left: 21%; width: 7.5%; height: 23%; background: url(../img/icon_03.svg) no-repeat; background-size: 100%;}
  .kvBox__icon04 {position: absolute; top: 43%; left: 12%; width: 6.5%; height: 23%; background: url(../img/icon_04.svg) no-repeat; background-size: 100%;}
  .kvBox__icon05 {position: absolute; top: 40%; left: 1%; width: 9%; height: 26%; background: url(../img/icon_05.svg) no-repeat; background-size: 100%;}
  .kvBox__icon06 {position: absolute; top: 43%; right: 20%; width: 7%; height: 27%; background: url(../img/icon_06.svg) no-repeat; background-size: 100%;}
  .kvBox__icon07 {position: absolute; top: 47.5%; right: 13%; width: 4%; height: 16%; background: url(../img/icon_07.svg) no-repeat; background-size: 100%;}
  .kvBox__icon07_2 {position: absolute; top: -58%; right: 9%; width: 9%; height: 110%; background: url(../img/icon_07_2.svg) no-repeat; background-size: 100%; transform: translateY(-100%); transition: 4s ease; -webkit-transition: 4s ease; -moz-transition: 4s ease; -ms-transition: 4s ease;}
  .kvBox__icon08 {position: absolute; top: 43%; right: 1%; width: 6%; height: 26%; background: url(../img/icon_08.svg) no-repeat; background-size: 100%;}
  .kvBox .slider {top: 11%; width: 39%; height: auto;}

  .ttl {padding: 2% 0; margin-bottom: 4%;}
  .ttl img.point {width: 38%;}
  .ttl img.select {width: 40%;}
  .ttl img.howto {width: 39%;}
  .ttl:before {top: 4%; height: 3%; background-size: 2%;}
  .ttl:after {bottom: 4%; height: 4%; background-size: 2%;}
  .ttl span {font-size: 3.4vw; letter-spacing: -2px;}

  /* about */
  .about {margin-bottom: 11%;}
  .about__lead {font-size: 2.6vw; letter-spacing: 0; line-height: 1.4; text-align: center; margin: 0 0 4% 0;}
  .about__inner {padding: 0 8%;}
  .about__icon {width: 9%; margin-bottom: 4%;}
  .about__heading {width: 60%; margin: 0 auto 6%;}
  .aboutList li {width: 29.5%;}
  .aboutList li:nth-child(-n+4) {margin-bottom: 0;}
  .aboutList li:nth-child(-n+3) {margin-bottom: 5.5%;}

  /* point */
  .point__inner {padding: 4% 8% 9%;}
  .pointList li {width: 24%;}
  .pointList li:nth-child(-n+2) {margin-bottom: 0;}

  /* select */
  .select__inner {padding: 4% 10% 9%;}
  .selectContainer {display: flex; justify-content: space-between; align-items: flex-end;}
  .selectItems {width: 48%;}
  .selectItems:not(:last-child) {margin-bottom: 0;}
  .selectInnerContainer {display: flex; margin-bottom: 2%;}
  .selectItems__left {width: 42%;}
  .selectItems__right {width: 49%; margin-left: 7%;}
  .selectItems__ttl {margin-bottom: 7%;}
  .selectItems__ttl.size01 {width: 88%;}
  .selectItems__txt01 {width: 100%; margin-bottom: 2%;}
  .selectItems__txt02 {width: 100%;}
  .selectItems__note {font-size: 1.4vw;}

  /* howto */
  .howto__inner {padding: 0 10%;}
  .howto__lead {font-size: 2.4vw; text-align: center; letter-spacing: -1px; line-height: 1.4; margin-bottom: 6%;}
  .howto__innertxt {padding: 0 15%;}
  .howto__txt {width: 83%; margin: 0 auto 3%;}
  .howtoAnker {margin-bottom: 14%;} 
  .howtoAnker li a {position: relative; display: block; padding: 5.5% 17%;}
  .howtoAnker li a.num01 img {width: 90%;}
  .howtoAnker li a.num01:before {width: 2.7%; left: 9%; height: 57%;}
  .howtoAnker li a.num02 img {width: 13.5%;}
  .howtoAnker li a.num02:before {width: 5.2%; left: 8%; height: 57%;}
  .howtoAnker li a.num03 img {width: 28%;}
  .howtoAnker li a.num03:before {width: 5.2%; left: 8%; height: 55%;}
  .howtoAnker li a:after {right: 10%; width: 4%; height: 24%; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s;}
  .howtoAnker li a:hover:after {transform: translateY(-5px);}
  .howtoAnker li:not(:last-child) {margin-bottom: 2.5%;}
  .howtoFlow.mb01 {margin-bottom: 4.5%;}
  .howtoFlow.mb02 {margin-bottom: 5%;}
  .howtoFlow.mb03 {margin-bottom: 3%;}
  .howtoFlow__ttl {padding: 1.8% 0; margin-bottom: 5%;}
  .howtoFlow__ttl:after {bottom: -30%; width: 5%; height: 31%;}
  .howtoFlow__ttl.num01:before {left: 29%; width: 1.2%; height: 64%;}
  .howtoFlow__ttl.num01 img {width: 35%;}
  .howtoFlow__ttl.num02:before {left: 28.5%; width: 2.5%; height: 67%;}
  .howtoFlow__ttl.num02 img {width: 5.4%;}
  .howtoFlow__ttl.num03:before {left: 28.5%; width: 2.5%; height: 65%;}
  .howtoFlow__ttl.num03 img {width: 11%;}
  .howtoFlow__ttlWrap:after {bottom: -30%; width: 5%; height: 31%;}
  .howtoFlow__lead {font-size: 2.4vw; text-align: center; margin-bottom: 1%; letter-spacing: -2px;}
  .howtoFlow__lead.align {text-align: left; font-size: 2.4vw; line-height: 1.4; letter-spacing: 0; padding: 0 7%; margin-bottom: 2%;}
  .howtoFlow__note {font-size: 2.1vw; letter-spacing: 0; line-height: 1.4; padding: 0 10%; }
  .howtoRange__inner {position: relative; width: 90%; margin: 0 auto 7%; padding: 2% 4% 4% 4%;}
  .howtoRange__inner:before {width: 100%; height: 95%; background: url(../img/howto_bg_pc02.png); background-size: 100%;}
  .howtoRange:before {left: 0; width: 100%; height: 2%; background: url(../img/howto_bg_pc.png) no-repeat; background-size: 90%; background-position-x: center; transform: none;}
  .howtoRange:after {left: 0; width: 100%; height: 2%; background: url(../img/howto_bg_pc.png) no-repeat; background-size: 90%; transform: none; background-position-x: center;}
  .howtoRange__inner h4 {font-size: 2.5vw; margin-bottom: 1%;}
  .howtoRange ul li.mb {margin-bottom: 1%;}
  .howtoRange ul li h5 {font-size: 2.4vw;}
  .howtoRange ul li {font-size: 2.4vw; line-height: 1.4;}
  .howtoRange ul li p {font-size: 2.2vw;}

  .howtoFlowContainerWrap > .howtoFlow__heading.pattern01  {
      margin-right: 100px;
      margin-left: 100px;
  }
  .howtoFlowContainer {display: flex; justify-content: space-between;}
  .howtoFlowContainer.is-center {
    justify-content: center;
  }
  .howtoFlowItems {width: 48%;}
  .howtoFlowItems.is-with-01 {width: 43%;
    margin-left: 4%;
  }

  .howtoFlowItems:not(:last-child) {margin-bottom: 0;}
  .howtoFlow__heading {padding: 3% 0; margin: 0 0 6% 0;}
  .howtoFlow__heading:before {position: absolute; top: 10%; left: 0; content: ""; width: 100%; height: 5%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}
  .howtoFlow__heading:after {position: absolute; bottom: 10%; left: 0; content: ""; width: 100%; height: 5%; background: url(../img/ttl_stitch.png); background-repeat: repeat-x; background-size: 3%;}
  .howtoFlow__heading.pattern01 img {width: 26%;}
  .howtoFlow__heading.pattern02 img {width: 17%;}
  .howtoFlow__heading.pattern03 img {width: 15%;}
  .howtoFlow__heading.flow01 img {width: 16%;}
  .howtoFlow__heading.flow02 img {width: 7.9%;}
  .howtoFlow__heading.flow01 {margin-bottom: 3%;}
  .howtoFlow__heading.flow02 {margin-bottom: 6%;}
  .howtoFlow__heading.flow01,
  .howtoFlow__heading.flow02 {padding: 2% 0}
  .howtoFlow__heading.flow01:before,
  .howtoFlow__heading.flow01:after {background-size: 2%;}
  .howtoFlow__heading.flow02:before,
  .howtoFlow__heading.flow02:after {background-size: 2%;}
  .howtoFlow__img {width: 90%; margin: 0 auto 2%;}
  .howtoFlowList li a {width: 73%; font-size: 2vw; line-height: 2.2; margin-left: 27%; letter-spacing: -1px; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s;}
  .howtoFlowList li a:hover {opacity: .7; color: #000; text-decoration: underline !important;}
  .howtoFlowList li a:before {top: 25%; left: -8%; width: 6%; height: 60%; transform: none;}
  .howtoFlowItems02:not(:last-child) {margin-bottom: 4%;}
  .howtoFlowList02 {width: 54%; margin: 0 auto 4%;}
  .howtoFlowList02 li {font-size: 2vw; letter-spacing: 0;}
  .howtoList03flex {display: flex; justify-content: space-between; margin-bottom: 4%;}
  .howtoList03flex:nth-child(2) {margin-bottom: 7%;}
  .howtoList03flex:nth-child(3):before {position: absolute; top: -6%; left: 69%; content: ""; width: 9%; height: 34%; background: url(../img/howto_img05_2_pc.svg) no-repeat; background-size: 100%;}
  .howtoList03flex__txt {width: 49%; font-size: 2.1vw; line-height: 1.4; letter-spacing: 0; padding: 0 0 0 5%; margin-bottom: 0;}
  .howtoList03flex__txt.num01:before {top: -1%; width: 9%; height: 16%;}
  .howtoList03flex__txt.num02:before {top: -1%; width: 9%; height: 16%;}
  .howtoList03flex__txt.num03:before {top: -1%; width: 9%; height: 16%;}
  .howtoList03flex__txt.num04:before {top: -1%; width: 9%; height: 16%;}
  .howtoList03flex__img {width: 49%; margin-bottom: 0; padding: 0 0 0 0;}
  .howtoFin__inner {padding: 0 2%;}
  .howtoFin__icon {width: 100%; padding-left: 0; margin-bottom: 2%;}
  .howtoFin__img {width: 65%; margin: -3% auto 0; margin-bottom: 4%;}
  .howtoFin__txt {font-size: 2.4vw; text-align: center;}

  /* footer */
  .footer .share__inner {padding: 0 20%; margin-bottom: 1%;}
  .footer .share__icon {width: 13%; margin: 0 auto 2%;}
  .footer .share__link {margin-bottom: 1%; border-radius: 5px;}
  .footer .share__link a {padding: 2.8% 0 2.5% 10%; font-size: 2.3vw; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s;}
  .footer .share__link a:hover {opacity: .7; color: #000;}
  .footer .shareItems__img a {transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s;}
  .footer .shareItems__img a:hover {opacity: .7;}
  .footer .copy {padding: 0 20%; margin-bottom: 4%;} 
  .footer .copy__txt {font-size: 1.2vw; padding-left: 2%;}
  .footer .copy__img {width: 6%; }
  .footer .copy__img a {transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s;}
  .footer .copy__img a:hover {opacity: .7;}

  .pageTop {right: 3%; width: 5%; cursor: pointer;}
  .pageTop:hover {opacity: .7;}
  }


    @media screen and (min-width: 1020px) {
    .kvBox {padding-top: 1.5%; margin-bottom: 44px;}
    .kvBox__logo {width: 3.8%; margin: 0 0 7% 2%;}
    .kvBox__title {width: 39%;}
    .kvBox__main {width: 33.5%;}
    .kvBox__ribbon {top: -8%; width: 34%;}
    .kvBox__icon01 {top: 47%; left: 30%; width: 6.2%; height: 19%;}
    .kvBox__icon02 {top: 47%; right: 28.8%; width: 7.4%; height: 19%;}
    .kvBox__icon03 {top: 47%; left: 20.5%; width: 6.6%; height: 19%;}
    .kvBox__icon04 {top: 47%; left: 11.3%; width: 6%; height: 19%;}
    .kvBox__icon05 {top: 44%; left: 1.1%; width: 8.4%; height: 22%;}
    .kvBox__icon06 {top: 47%; right: 18.7%; width: 6.6%; height: 19%;}
    
    .kvBox__icon07 {top: 53.2%; right: 12.3%; width: 3.6%; height: 14%;}
    .kvBox__icon07_2 {top: -42%; right: 8%; width: 9%; height: 103%;}
    .kvBox__icon08 {top: 47%; right: 1.1%; width: 5.8%; height: 19%;}
    .kvBox .slider {top: 10%; width: 40.5%; height: auto;}

    .ttl {padding: 15px 0; margin-bottom: 42px;}
    .ttl img.point {width: 429px;}
    .ttl img.select {width: 416px;}
    .ttl img.howto {width: 410px;}
    .ttl:before {top: 3px; height: 3px; background-size: 1%;}
    .ttl:after {bottom: 3px; height: 3px; background-size: 1%;}

    /* about */
    .about {margin-bottom: 103px;}
    .about__lead {font-size: 26.4px; margin: 0 0 45px 0;}
    .about__inner {width: 1020px; margin: 0 auto; padding: 0 98px;}
    .about__icon {width: 82px; height: 98px; margin-bottom: 50px;}
    .about__heading {width: 487px; margin: 0 auto 35px;}
    .aboutList li {width: 241px;}
    .aboutList li:nth-child(-n+4) {margin-bottom: 0;}
    .aboutList li:nth-child(-n+3) {margin-bottom: 5.5%;}

    /* .point {} */
    .point__inner {width: 1020px; margin: 0 auto; padding: 38px 50px 76px;}
    .pointList li {width: 213px;}

    /* select */
    .select__inner {width: 1020px; margin: 0 auto; padding: 38px 98px 92px;}
    .selectItems {width: 400px;}
    .selectInnerContainer {margin-bottom: 15px;}
    .selectItems__left {width: 42%;}
    .selectItems__left.size01 {width: 167px;}
    .selectItems__left.size02 {width: 178px;}
    .selectItems__right {width: 49%; margin-left: 28px;}
    .selectItems__ttl {width: 178px; margin-bottom: 15px;}
    .selectItems__ttl.size01 {width: 178px;}
    .selectItems__ttl.size02 {width: 205px;}
    .selectItems__txt01 {width: 199px; margin-bottom: 5px;}
    .selectItems__txt02 {width: 199px;}
    .selectItems__note {font-size: 14.95px;}

    /* howto */
    .howto__inner {width: 1020px; margin: 0 auto; padding: 0;}
    .howto__lead {font-size: 24px; margin-bottom: 41px;}
    .howto__innertxt {padding: 0;}
    .howto__txt {width: 461px; margin: 0 auto 12px;}
    .howtoAnker {width: 573px; margin: 0 auto 86px;}
    .howtoAnker li a {padding: 30.4px 98px;}
    .howtoAnker li a.num01 img {width: 344px;}
    .howtoAnker li a.num01:before {width: 14px; left: 63px; height: 47px;}
    .howtoAnker li a.num02 img {width: 51px;}
    .howtoAnker li a.num02:before {width: 26px; left: 56px; height: 45px;}
    .howtoAnker li a.num03 img {width: 109px;}
    .howtoAnker li a.num03:before {width: 28px; left: 55px; height: 46px;}
    .howtoAnker li a:after {right: 47px; width: 22px; height: 19px;}
    .howtoAnker li:not(:last-child) {margin-bottom: 13px;}
    .howtoFlow.mb01 {margin-bottom: 42px;}
    .howtoFlow.mb02 {margin-bottom: 50px;}
    .howtoFlow.mb03 {margin-bottom: 45px;}
    .howtoFlow__ttl {width: 1020px; margin: 0 auto; padding: 21px 0; margin-bottom: 51px;}
    .howtoFlow__ttl:after {bottom: -16px; width: 43px; height: 17px;}
    .howtoFlow__ttl.num01:before {left: 291px; width: 13px; height: 46px;}
    .howtoFlow__ttl.num01 img {width: 359px;}
    .howtoFlow__ttl.num02:before {left: 28.5%; width: 2.5%; height: 59%;} 
    .howtoFlow__ttl.num02 img {width: 5.4%;} 
    .howtoFlow__ttl.num03:before {left: 28.5%; width: 2.5%; height: 60%;} 
    .howtoFlow__ttl.num03 img {width: 11%;} 
    .howtoFlow__lead {font-size: 24px; margin-bottom: 6px; letter-spacing: -3px;}
    .howtoFlow__lead.align {font-size: 24px; padding: 0 148px; margin-bottom: 16px;}
    .howtoFlow__note {font-size: 21px; padding: 0 170px;}
    .howtoRange__inner {width: 722px; margin: 0 auto 60px; padding: 16px 38px 22px;}
    .howtoRange:before {height: 3px; background-size: 722px;}
    .howtoRange:after {height: 3px; background-size: 722px;}
    .howtoRange__inner h4 {font-size: 26px; margin-bottom: 10px;}
    .howtoRange ul li.mb {margin-bottom: 10px;}
    .howtoRange ul li h5 {font-size: 21px;}
    .howtoRange ul li {font-size: 21px;}
    .howtoRange ul li p {font-size: 18px;}
    .howtoFlowContainer {padding: 0 100px;}
    .howtoFlowContainer.mb01 {margin-bottom: 42px;}
    .howtoFlowItems {width: 388px;}
    .howtoFlowItems.is-with-01 {width: 357px;
        margin-left: 40px;
    }
    .howtoFlowContainerWrap.mb01 {
    margin-bottom: 42px;
  }


    .howtoFlow__heading {padding: 10px 0; margin: 0 0 35px 0;}
    .howtoFlow__heading:before {top: 0px; height: 3px; background-size: 10px;}
    .howtoFlow__heading:after {bottom: 0; height: 3px; background-size: 10px;}
    .howtoFlow__heading.pattern01 img {width: 126px;}
    .howtoFlow__heading.pattern02 img {width: 93px;}
    .howtoFlow__heading.pattern03 img {width: 70px;}
    .howtoFlow__heading.flow01 img {width: 135px;}
    .howtoFlow__heading.flow01 .exit-design-img {width: 250px;}
    .howtoFlow__heading.flow02 img {width: 66px;}
    .howtoFlow__heading.flow01,
    .howtoFlow__heading.flow02 {padding: 9px 0; width: 820px; margin: 0 auto;}
    .howtoFlow__heading.flow01 {margin-bottom: 29px;}
    .howtoFlow__heading.flow02 {margin-bottom: 51px;}
    .howtoFlow__heading.flow01:before,
    .howtoFlow__heading.flow01:after {background-size: 10px}
    .howtoFlow__heading.flow02:before,
    .howtoFlow__heading.flow02:after {background-size: 10px}
    .howtoFlow__img {width: 360px; margin: 0 auto 12px;}

    .howtoFlowItems.is-with-01 .howtoFlow__img {
        width: 325px;
    }

    .howtoFlowList li a {width: 290px; font-size: 19px; margin-left: 95px;}
    .howtoFlowList li a:before {top: 9px; left: -31px; width: 23px; height: 26px;}
    .howtoFlowItems02:not(:last-child) {margin-bottom: 4%;} 
    .howtoFlowList02 {width: 440px; margin: 0 auto 45px;}
    .howtoFlowList02 li {font-size: 20px; line-height: 1.6;}
    .howtoList03 {width: 820px; margin: 0 auto;}
    .howtoList03flex {margin-bottom: 43px;}
    .howtoList03flex:nth-child(2) {margin-bottom: 60px;}
    .howtoList03flex:nth-child(3):before {top: -17px; left: 564px; width: 69px; height: 86px;}
    .howtoList03flex__txt {font-size: 24px; padding: 0 0 0 40px; letter-spacing: -1px;}
    .howtoList03flex__txt.num01:before {top: 0; width: 35px; height: 35px;}
    .howtoList03flex__txt.num02:before {top: 0; width: 35px; height: 35px;}
    .howtoList03flex__txt.num03:before {top: 0; width: 35px; height: 35px;}
    .howtoList03flex__txt.num04:before {top: 0; width: 35px; height: 35px;}
    .howtoList03flex__img {width: 417px;}
    .howtoFin__inner {width: 1020px; margin: 0 auto; padding: 0;}
    .howtoFin__icon {margin-bottom: 0;}
    .howtoFin__img {width: 635px; margin: -10px auto 0; margin-bottom: 44px;}
    .howtoFin__txt {font-size: 24px;}

    /* footer */
    .footer .share__inner {width: 1020px; margin: 0 auto; padding: 0 195px; margin-bottom: 10px;}
    .footer .share__icon {width: 86px; margin: 0 auto 13px;} 
    .footer .share__link {margin-bottom: 5px;}
    .footer .share__link a {padding: 17px 0 17px 82px; font-size: 23px;}
    .footer .share__link a:before {top: 11px; left: 162px; width: 33px; background: url(../img/icon_tw.svg) no-repeat;}
    .footer .copy {width: 1020px; margin: 0 auto; padding: 0 195px; margin-bottom: 35px;}
    .footer .copy__txt {font-size: 14px; padding-left: 12px; letter-spacing: .5px;}
    .footer .copy__img {width: 41px;}

    /* .pageTop {right: calc(50% - 480px);} */
    .pageTop {right: 20px; width: 40px;}
    }


    /*3/30 追加スタイル*/

    .howtoFlow__img.is--pkg__column {
        display: flex;
        justify-content: space-between;
    }

    .pkg__column__item {
        width: 47.7%;
    }

    .pkg__column__item > img {
      border: solid 1px #000;
    }

    .pkg__column__item__txt {
      display: block;
      text-align: center;
      font-size: 4.25vw;
      font-weight: bold;
    }


        /*PC可変*/
    @media screen and (min-width: 769px) {
        .pkg__column__item__txt {
            font-size: 1.65vw;
        }

    }

    /*PC固定*/
    @media screen and (min-width: 1020px) {
        .pkg__column__item__txt {
            font-size: 18px;
        }
    }