@charset "utf-8";

/* normalize
------------------------------ */
body,html{height:100%;-webkit-text-size-adjust:none}blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}i{font-style:normal}img{max-width:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}::selection{background:#666;color:#fff}::-moz-selection{background:#666;color:#fff}
*, *::before, *::after { box-sizing: border-box; }

/* clearfix
------------------------------ */
.clearfix::after { display:table; content:""; clear:both }

/* base
------------------------------ */
body {
	height: auto;
	background: #fff;
	color: #444;
	font-family: -apple-system,"游ゴシック",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",sans-serif;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.05em;
	overflow-x: auto;
}

/* page
============================== */
.site_header { position: fixed; background-color: rgba(255,255,255,0.9) !important; }
.site_header .btn--drawer { color: #444; }
.site_header .btn--drawer span { background: #444; }
.site_footer {
  z-index: 2;
}
header,
header .logo svg { transition: all 0.3s ease; }
body:not(.scrolled) header { background: transparent; }
body:not(.scrolled) header .logo svg { fill: #444; }
footer { font-size: 14px; position: relative; z-index: 1; }
a { transition: all 0.3s ease; }

@media screen and (min-width: 1000px){
	html,body { font-size: 20px; /* font-size: 1.5vw; */ line-height: 1.8; }
}
@media screen and (max-width: 1000px){
	html,body { font-size: 14px; line-height: 1.8; }
	main { overflow: hidden; }
}



.maskMakeContents .strong {
  background-image: linear-gradient(to bottom, transparent 45%, #FFEC9F 45%);
}


@media screen and (min-width: 900px){
  .maskMakeContents {
    font-size: 20px;
  }
  .only-sp {
    display: none !important;
  }
}
@media screen and (max-width: 899px){
  .maskMakeContents {
    font-size: 14px;
  }
  .only-pc {
    display: none !important;
  }
}




/* kv
------------------------------ */
.hero {
  margin: 109px 0 60px;
  position: relative;
}
.hero .pageTitle {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 90;
  transform: translateX(-50%);
  width: 594px;
  pointer-events: none;
}
.hero:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 14px;
  background-image: linear-gradient(rgba(0,0,0,.08) 0%, rgba(0,0,0,.0) 100%);
  pointer-events: none;
}
.hero ul {
  display: flex;
}
.hero ul li {
  width: 33.33333%;
}
.hero ul li>span {
  display: block;
  position: relative;
  transition: opacity ease .3s;
  cursor: pointer;
}
.hero ul li>span:hover {
  opacity: .6;
}
.hero ul li img {
  width: 100%;
  vertical-align: top;
}
.hero ul li span {
  display: block;
}
.hero ul li .colorLabel {
  padding: 2em 0 0;
  position: absolute;
  bottom: min(40px,calc(40/570*100%));
  left: min(40px,calc(40/640*100%));
  width: 160px;
  line-height: 1;
  color: #003544;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.hero ul li .colorLabel:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 12px 12px;
  border-color: transparent transparent #003544 transparent;
}
.hero ul li .colorLabel:after {
  content: '';
  border: 1px #fff solid;
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}
.hero ul li .colorName {
  font-size: 22px;
  letter-spacing: -.05em;
}
.hero ul li .catName {
  margin: 0 auto .75em;
  padding: .75em 0 .75em;
  border-bottom: 1px #fff solid;
  width: calc(130/160*100%);
}
.hero ul li .colorLook {
  padding: 0 0 1.25em;
  font-weight: 500;
  letter-spacing: .2em;
}
.hero ul li span[data-href="#color01"] .colorLabel {
  background-color: #CEBFDD;
}
.hero ul li span[data-href="#color02"] .colorLabel {
  background-color: #EFD9A8;
}
.hero ul li span[data-href="#color03"] .colorLabel {
  background-color: #F8CCDF;
}
.hero ul li span[data-href="#color04"] .colorLabel {
  background-color: #B7BDCC;
}
.hero ul li span[data-href="#color05"] .colorLabel {
  background-color: #C6D0CE;
}
@media screen and (max-width: 1200px){
  .hero ul li .colorLabel {
    width: 112px;
    font-size: 11px;
  }
  .hero ul li .colorLabel:before {
    bottom: 12px;
    right: 12px;
    border-width: 0 0 8px 8px;
  }
  .hero ul li .colorLabel:after {
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
  }
  .hero ul li .colorName {
    font-size: 15px;
  }
}
@media screen and (max-width: 899px){
  .hero {
    margin: 58px 0 44px;
  }
  .hero .pageTitle {
    top: calc(209/375*100vw);
    left: 50%;
    transform: translate(-50%,0);
    width: calc(234/375*100%);
  }
  .hero img {
    width: 100%;
    vertical-align: top;
  }
  .hero ul {
    flex-wrap: wrap;
  }
  .hero ul li {
    width: 50%;
  }
  .hero ul li:nth-child(1) {
    order: 2;
  }
  .hero ul li:nth-child(2) {
    order: 1;
    width: 100%;
  }
  .hero ul li:nth-child(3) {
    order: 3;
  }
  .hero ul li .colorLabel {
    left: 0;
    bottom: 0;
    width: calc(102/375*100vw);
    font-size: 10px;
  }
  .hero ul li .colorLabel:before {
    bottom: 12px;
    right: 12px;
    border-width: 0 0 8px 8px;
  }
  .hero ul li .colorLabel:after {
    top: 5px;
    left: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  .hero ul li .colorName {
    font-size: 14px;
  }
  .hero ul li:nth-child(2) .colorLabel {
    bottom: calc(60/250*100%);
  }
}



/* fixed anchor
------------------------------ */

.fixedAnchor {
  position: fixed;
  top: 109px;
  left: 0;
  width: 100%;
  height: 57px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity ease .3s,visibility ease .3s;
}
.fixedAnchor.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.fixedAnchor ul {
  margin: 0 auto;
  display: flex;
  width: 900px;
}
.fixedAnchor ul li {
  width: 33.3333%;
  background-color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}
.fixedAnchor ul li span {
  padding: 21px 37px 0 0;
  position: relative;
  display: block;
  height: 57px;
  color: #fff;
  transition: opacity ease .3s;
  cursor: pointer;
  text-align: right;
}
.fixedAnchor ul li span:before {
  content: '';
  display: block;
  position: absolute;
  top: 16px;
  left: calc(50% - 36px);
  width: 72px;
  height: 24px;
  background: url("../images/icon_mask.svg") 0 0 no-repeat;
  background-size: contain;
}
.fixedAnchor ul li span:after {
  content: '';
  display: block;
  position: absolute;
  top: 24px;
  right: 13px;
  width: 18px;
  height: 9px;
  background: url("../images/icon_arrow_bottom.svg") 0 0 no-repeat;
  background-size: contain;
}
.fixedAnchor ul li span:hover {
  opacity: .6;
}
.fixedAnchor ul li span[data-href="#color01"] {
  background-color: #CEBFDD;
}
.fixedAnchor ul li span[data-href="#color02"] {
  background-color: #EFD9A8;
}
.fixedAnchor ul li span[data-href="#color03"] {
  background-color: #F8CCDF;
}
.fixedAnchor ul li span[data-href="#color04"] {
  background-color: #B7BDCC;
}
.fixedAnchor ul li span[data-href="#color05"] {
  background-color: #C6D0CE;
}
@media screen and (max-width: 899px){
  .fixedAnchor {
    top: 58px;
    height: 40px;
  }
  .fixedAnchor ul {
    width: 100%;
  }
  .fixedAnchor ul li span {
    padding: 0;
    height: 40px;
    font-size: 0;
    text-indent: -9999px;
  }
  .fixedAnchor ul li span:before {
    top: 12px;
    left: calc(50% - 18px);
    width: 36px;
    height: 12px;
  }
  .fixedAnchor ul li span:after {
    top: 30px;
    right: calc(50% - 4px);
    width: 8px;
    height: 4px;
    background-image: url("../images/icon_arrow_bottom_sp.svg");
  }
}














/* contents
------------------------------ */

.accBody {
  display: none;
}
.accBtn {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 880px;
  line-height: 110px;
  color: #fff;
  background-color: #003544;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center;
  cursor: pointer;
}
.accBtn:before {
  content: '';
  border: 1px #fff solid;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}
.accBtn:after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - 9px);
  right: 160px;
  width: 40px;
  height: 18px;
  background: url("../images/icon_arrow.svg") 0 0 no-repeat;
  background-size: contain;
  transform: rotate(180deg);
  transition: transform ease .3s;
}
.accBtn.open:after {
  transform: rotate(0);
}
.accBtn2 {
  border: 2px #003544 solid;
  color: #003544;
  background-color: #fff;
}
.accBtn2:before {
  border-color: #003544;
}
.accBtn2:after {
  background-image: url("../images/icon_arrow2.svg");
}
@media screen and (max-width: 899px){
  .accBtn {
    width: calc(345/375*100%);
    line-height: 86px;
    font-size: 20px;
  }
  .accBtn:after {
    top: calc(50% - 5px);
    right: 48px;
    width: 24px;
    height: 10px;
  }
}
@media screen and (max-width: 374px){
  .accBtn {
    font-size: 18px;
  }
  .accBtn:after {
    right: 20px;
  }
}



.howtoArea .leadTxt {
  margin: 0 0 60px;
  line-height: 1;
  color: #003544;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .4em;
  text-align: center;
}
@media screen and (max-width: 899px){
  .howtoArea .leadTxt {
    margin: 0 0 47px;
    font-size: 16px;
  }
}



.baseMakeLead {
  margin: 0 auto 95px;
  max-width: 900px;
}
.baseMakeLead .baseMakeKV {
}
.baseMakeLead p {
  margin: 64px 0 0;
  line-height: 1.8;
  color: #003544;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 899px){
  .baseMakeLead {
    margin-bottom: 65px;
  }
  .baseMakeLead .baseMakeKV {
  }
  .baseMakeLead p {
    margin: 48px auto 0;
    width: calc(288/375*100%);
    line-height: 1.71;
    font-size: 14px;
    text-align: left;
  }
  .baseMakeLead p br {
    display: none;
  }
}



.howtoAnchor {
  margin: 0 auto 110px;
  max-width: 880px;
}
.howtoAnchor ul {
  display: flex;
  justify-content: space-between;
}
.howtoAnchor ul li {
  width: calc(280/880*100%);
}
.howtoAnchor ul li>span {
  display: block;
  position: relative;
  transition: opacity ease .3s;
  cursor: pointer;
}
.howtoAnchor ul li>span:hover {
  opacity: .6;
}
.howtoAnchor ul li span {
  display: block;
}
.howtoAnchor ul li .colorLabel {
  padding: 2em 0 0;
  width: 280px;
  line-height: 1;
  color: #003544;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.howtoAnchor ul li .colorLabel:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 12px 12px;
  border-color: transparent transparent #003544 transparent;
}
.howtoAnchor ul li .colorLabel:after {
  content: '';
  border: 1px #fff solid;
  display: block;
  position: absolute;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}
.howtoAnchor ul li .colorName {
  display: inline;
  font-size: 16px;
  letter-spacing: -.05em;
}
.howtoAnchor ul li .catName {
  display: inline;
  font-size: 16px;
}
.howtoAnchor ul li .colorLook {
  margin: 12px auto 0;
  padding: 8px 0 1.25em;
  border-top: 1px #fff solid;
  display: block;
  width: 242px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
}
.howtoAnchor ul li span[data-href="#color01"] .colorLabel {
  background-color: #CEBFDD;
}
.howtoAnchor ul li span[data-href="#color02"] .colorLabel {
  background-color: #EFD9A8;
}
.howtoAnchor ul li span[data-href="#color03"] .colorLabel {
  background-color: #F8CCDF;
}
.howtoAnchor ul li span[data-href="#color04"] .colorLabel {
  background-color: #B7BDCC;
}
.howtoAnchor ul li span[data-href="#color05"] .colorLabel {
  background-color: #C6D0CE;
}
@media screen and (max-width: 899px){
  .howtoAnchor {
    margin: 0 auto 77px;
    width: calc(325/375*100%);
  }
  .howtoAnchor .pageTitle {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(216/375*100%);
  }
  .howtoAnchor ul {
    display: block;
  }
  .howtoAnchor ul li {
    width: 100%;
  }
  .howtoAnchor ul li + li {
    margin-top: 22px;
  }
  .howtoAnchor ul li .colorLabel {
    padding: 2.5em 0 2.2em 20px;
    position: relative;
    width: 100%;
    font-size: 10px;
    text-align: left;
  }
  .howtoAnchor ul li .colorLabel:before {
    bottom: 16px;
    right: 16px;
    border-width: 0 0 12px 12px;
  }
  .howtoAnchor ul li .colorLabel:after {
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  }
  .howtoAnchor ul li .colorName {
    margin: 0;
    padding: 0;
    display: inline;
    font-size: 17px;
  }
  .howtoAnchor ul li .catName {
    margin: 0;
    padding: 0;
    border: none;
    display: inline;
    font-size: 17px;
    font-weight: bold;
  }
  .howtoAnchor ul li .colorLook {
    margin: 0;
    padding: 0;
    border: none;
    position: absolute;
    top: calc(50% - 6px);
    right: 33px;
    width: auto;
    font-size: 16px;
    font-weight: 500;
  }
}





.sectionHeader {
  margin: 0 auto 120px;
  padding: 40px 125px 30px;
  border: 2px #003544 solid;
  position: relative;
  max-width: 880px;
  color: #003544;
  text-align: center;
}
.howtoSection .sectionHeader {
  margin-bottom: 70px;
}
.sectionHeader:after {
  content: "";
  display: block;
  border: 1px #003544 solid;
  position: absolute;
  top: 8px;
  left: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}
.sectionHeader .sectionTitle {
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 2px #003544 solid;
  line-height: 1.25;
  font-size: 32px;
  font-weight: 500;
}
.sectionHeader .sectionTitle:before,
.sectionHeader .sectionTitle:after {
  content: "";
  display: block;
  position: absolute;
  width: 82px;
  height: 2px;
  background-color: #003544;
  transform: rotate(-45deg);
}
.sectionHeader .sectionTitle:before {
  top: 15px;
  left: -24px;
}
.sectionHeader .sectionTitle:after {
  bottom: 15px;
  right: -24px;
}
.sectionHeader .sectionTitleSub {
  line-height: 1;
  font-size: 64px;
  font-weight: 500;
}
@media screen and (max-width: 899px){
  .sectionHeader {
    margin: 0 auto 48px;
    padding: calc(40/750*100vw) calc(38/750*100vw) calc(30/750*100vw);
    max-width: calc(670/750*100vw);
  }
  .howtoSection .sectionHeader {
    margin-bottom: 48px;
  }
  .sectionHeader:after {
    top: 3px;
    left: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
  }
  .sectionHeader .sectionTitle {
    margin: 0 0 10px;
    padding: 0 0 10px;
    font-size: 16px;
  }
  .sectionHeader .sectionTitle:before,
  .sectionHeader .sectionTitle:after {
    width: 41px;
    height: 1px;
  }
  .sectionHeader .sectionTitle:before {
    top: 8px;
    left: -12px;
  }
  .sectionHeader .sectionTitle:after {
    bottom: 8px;
    right: -12px;
  }
  .sectionHeader .sectionTitleSub {
    font-size: 32px;
  }
}













.stepBox {
  margin: 0 auto 90px;
  position: relative;
  max-width: 900px;
}
.stepBox p {
  line-height: 1.6;
}
.stepBox .sup {
  vertical-align: super;
  font-size: 50%;
}
.stepBox .stepLookmore {
  position: relative;
  z-index: 2;
}
.stepBox .stepLookmore a {
  line-height: 1.25;
  color: #003544;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.stepBox .stepLookmore a img {
  transition: all ease .6s;
}
.stepBox .stepLookmore a:hover img {
  transform: scale(1.04)
}
.stepBox .stepLookmore a .name {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}
.stepBox .stepImg {
  position: relative;
  z-index: 2;
  width: calc(400/900*100%);
  line-height: 1;
  font-size: 0;
}
.stepBox .stepContent {
  line-height: 1;
}
.stepBox .stepLabel {
  display: inline-block;
  position: relative;
  line-height: 1;
}
.stepBox .stepLabel .stepLabelImg img {
  vertical-align: bottom;
}
.stepBox .stepLabel .stepName {
  position: absolute;
  bottom: 10px;
  left: 8px;
  display: flex;
}
.stepBox .stepLabel .iconCheck {
  margin-right: 10px;
  position: relative;
}
.stepBox .stepLabel .iconCheck img {
	vertical-align: top;
}
.stepBox .stepLabel .iconCheck:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/icon_check.png") 0 0 no-repeat;
  background-size: contain;
}
.stepBox .stepLabel .stepNameTxt {
  color: #003544;
  font-size: 24px;
  font-weight: 500;
}
.stepBox .stepLabel .stepNameTxtSmall {
  font-size: 20px;
}
.stepBox .stepArticle {
  padding: 80px 50px 40px;
}
.stepBox .stepArticle p {
  line-height: 1.6;
}
.stepBox .stepArticle p + p {
  margin-top: 1em;
}
.stepBox .stepArticle ul {
  margin-left: -50px;
}
.stepBox .stepArticle ul li {
  padding-left: 90px;
  position: relative;
  line-height: 1.6;
}
.stepBox .stepArticle ul li + li {
  margin-top: 30px;
}
.stepBox .stepArticle ul li .num {
  padding-right: 10px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 70px;
  line-height: 32px;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  text-align: right;
}
.stepBox .stepArticle ul li.stepPoint .num {
  padding-right: 0;
  color: #003544;
  background-color: #fff !important;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .1em;
  text-align: center;
}
.stepBox .stepArticle ul li.stepPoint .strong {
  background-image: none;
  background-color: #FFEC9F;
}
.stepBox .stepInfo {
}
.stepBox .stepInfo p {
}
.stepBox .stepInfo p.notice {
  margin-top: .5em;
  font-size: 16px;
}
@media screen and (max-width: 899px){
  .stepBox {
    margin-left: calc(55/750*100%);
    margin-right: calc(55/750*100%);
		margin-bottom: 40px;
  }
  .stepBox p {
    line-height: 1.71;
  }
  .stepBox .stepLookmore {
  }
  .stepBox .stepImg {
    width: calc(400/640*100%);
    max-width: 400px;
  }
  .stepBox .stepArticle {
    padding: 50px calc(35/750*100vw) 30px;
  }
  .stepBox .stepArticle ul {
    margin-left: calc(-35/750*100vw);
  }
  .stepBox .stepArticle ul li {
    padding-left: 50px;
  }
  .stepBox .stepArticle ul li + li {
    margin-top: 20px;
  }
  .stepBox .stepArticle ul li .num {
    padding-right: 5px;
    width: 35px;
    line-height: 16px;
    font-size: 12px;
  }
  .stepBox .stepInfo p.notice {
    font-size: 10px;
  }
  .stepBox .stepLookmore a .name {
    font-size: 10px;
  }
}
@media screen and (max-width: 750px){
  .stepBox .stepLabel {
    width: calc(310/750*100vw);
  }
  .stepBox .stepLabel .stepName {
    bottom: calc(10/750*100vw);
    left: calc(8/750*100vw);
  }
  .stepBox .stepLabel .iconCheck {
    margin-right: calc(10/750*100vw);
    width: calc(27/750*100vw);
  }
  .stepBox .stepLabel .stepNameTxt {
    font-size: calc(24/750*100vw);
    white-space: nowrap;
  }
  .stepBox .stepLabel .stepNameTxtSmall {
    font-size: calc(20/750*100vw);
    letter-spacing: -.05em;
  }
  .stepBox .stepArticle ul li.stepPoint .num {
    font-size: calc(20/750*100vw);
  }
}
@media screen and (max-width: 374px){
  .stepBox .stepLookmore a .name {
    font-size: calc(20/750*100vw);
  }
}






.makeBase {
  margin-bottom: 170px;
}
.makeBase .step01 {
  margin-bottom: calc(-50/900*100%);
}
.makeBase .step01 .lookmore01 {
  margin: 0 0 0 calc(222/900*100%);
  width: calc(248/900*100%);
}
.makeBase .step01 .stepImg {
  margin: calc(-215/900*100%) 0 calc(-258/900*100%) calc(500/900*100%);
}
.makeBase .step01 .stepLabel {
  margin: 0 0 calc(-126/900*100%);
}
.makeBase .step01 .stepArticle {
  margin: calc(-114/900*100%) 0 0;
  padding-top: calc(126/900*100% + 35px);
  padding-right: 180px;
  width: calc(640/900*100%);
  background-color: #f7f5f5;
}
.makeBase .step01 .lookmore02 {
  margin: calc(-65/900*100%) 0 0 calc(500/900*100%);
  width: calc(200/900*100%);
}
.makeBase .step01 .stepInfo {
  margin: 0 0 0 calc(500/900*100%);
}
.makeBase .step01 .stepInfo p {
  letter-spacing: .04em;
}

.makeBase .step02 {
  margin-bottom: 100px;
}
.makeBase .step02 .stepImg {
  margin: 0 0 calc(-230/900*100%);
}
.makeBase .step02 .stepLabel {
  margin: 0 0 0 calc(400/900*100%);
}
.makeBase .step02 .stepArticle {
  margin: calc(-51/900*100%) 0 0 calc(352/900*100%);
  padding-right: 40px;
  padding-left: 90px;
  padding-bottom: 40px;
  background-color: #f7f5f5;
}
.makeBase .step02 .lookmore01 {
  margin: calc(-86/900*100%) 0 -60px;
  width: calc(408/900*100%);
}
.makeBase .step02 .stepInfo {
  margin: 0 0 0 calc(150/900*100%);
  width: 380px;
}

.makeBase .collaboItem {
  margin: 0 auto 160px;
  position: relative;
  max-width: 900px;
}
.makeBase .collaboItemImg {
}
.makeBase .iconNew {
  position: absolute;
  top: 50px;
}
.makeBase .btnDetail {
  position: absolute;
  bottom: -60px;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
}
.makeBase .btnDetail a {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  line-height: 1.5;
  color: #fff;
  background-color: #e77b8e;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  letter-spacing: 0;
}
.makeBase .btnDetail a:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 1px #fff solid;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
}
.makeBase .btnDetail a {
  transition: all ease .6s;
}
.makeBase .btnDetail a:hover {
  transform: scale(1.04)
}

.makeBase .plusAlpha {
  margin: 0 auto;
  position: relative;
  max-width: 900px;
}
.makeBase .plusAlphaLabel {
  margin-bottom: calc(-70/900*100%);
  width: calc(280/900*100%);
}
.makeBase .lookmore {
  margin-top: calc(78/900*100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(258/900*100%);
}
.makeBase .plusAlphaTitle {
  margin: 0 0 30px calc(180/900*100%);
  padding: 0 0 20px calc(140/900*100%);
  border-bottom: 2px #003544 solid;
  line-height: 1.33;
  color: #003544;
  font-size: 51.2px;
  font-weight: 500;
}
.makeBase .plusAlphaTitle .small {
  font-size: 32px;
}
.makeBase .plusAlpha p {
  margin-left: calc(320/900*100%);
  color: #003544;
}
.makeBase .plusAlpha p + p {
  margin-top: 1em;
  color: #444;
}
.makeBase .lookmore a img {
  transition: all ease .6s;
}
.makeBase .lookmore a:hover img {
  transform: scale(1.04)
}
@media screen and (max-width: 899px){
  .makeBase {
    margin-bottom: 90px;
  }
  .makeBase .step01 {
    margin-bottom: 90px;
  }
  .makeBase .step01 .lookmore01 {
    margin: 0 0 0 calc(36/750*100vw);
    width: calc(246/750*100vw);
  }
  .makeBase .step01 .stepImg {
    margin: calc(-326/640*100%) 0 calc(-110/640*100%) calc(300/640*100%);
    z-index: 2;
  }
  .makeBase .step01 .stepLabel {
    margin: 0;
  }
  .makeBase .step01 .stepArticle {
    margin: calc(-62/750*100vw) 0 0;
    padding-top: calc(55/750*100vw + 25px);
    padding-right: calc(35/750*100vw);
    width: auto;
    background-color: #f7f5f5;
  }
  .makeBase .step01 .lookmore02 {
    margin: 70px 0 0 calc(56/750*100vw);
    width: calc(200/750*100vw);
  }
  .makeBase .step01 .stepInfo {
    margin: 0;
    position: absolute;
    bottom: calc(120/750*100vw);
    left: calc(280/750*100vw);
  }
  .makeBase .step01 .stepInfo p {
    letter-spacing: .04em;
  }

  .makeBase .step02 {
    margin-bottom: 25px;
  }
  .makeBase .step02 .stepImg {
    margin: 0 0 0 calc(-55/750*100vw);
  }
  .makeBase .step02 .stepLabel {
    margin: calc(-145/750*100vw) 0 0 calc(345/750*100vw);
  }
  .makeBase .step02 .stepArticle {
    margin: calc(-66/750*100vw) 0 0;
    padding: calc(52/750*100vw + 25px) calc(35/750*100vw) calc(60/750*100vw);
  }
  .makeBase .step02 .lookmore01 {
    margin: calc(-30/750*100vw) 0 -35px calc(220/750*100vw);
    width: calc(423/750*100vw);
  }
  .makeBase .step02 .stepInfo {
    margin: 0 calc(50/750*100vw) 0 calc(30/750*100vw);
    width: auto;
  }

  .makeBase .collaboItem {
    margin: 0 auto 90px;
    width: calc(640/750*100vw);
  }
  .makeBase .collaboItemImg {
  }
  .makeBase .iconNew {
    top: 25px;
    width: 60px;
  }
  .makeBase .btnDetail {
    bottom: -40px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
  }
  .makeBase .btnDetail a {
    width: 80px;
    height: 80px;
    font-size: 12px;
  }

  .makeBase .plusAlpha {
  }
  .makeBase .plusAlphaLabel {
    margin: 0 0 calc(80/750*100%) calc(48/750*100%);
    width: calc(702/750*100%);
  }
  .makeBase .lookmore {
    margin-top: calc(36/750*100%);
    position: absolute;
    top: 0;
    left: auto;
    right: calc(20/750*100%);
    width: calc(289/750*100%);
  }
  .makeBase .plusAlphaTitle {
    margin: 0 0 calc(40/750*100% + 10px) calc(55/750*100%);
    padding: 0 0 10px;
    border-bottom-width: 1px;
    width: calc(500/750*100%);
    font-size: 22.4px;
    font-size: calc(22.4/375*100vw);
  }
  .makeBase .plusAlphaTitle .small {
    font-size: 63%;
  }
  .makeBase .plusAlpha p {
    margin: 0 auto;
    width: calc(580/750*100%);
  }
}




.makeSection {
  margin: 0 auto;
  max-width: 900px;
}
.patternTitle {
  margin: 0 0 114px;
  padding: 0 0 20px 50px;
  border-bottom: 8px #003544 solid;
  position: relative;
  line-height: 44px;
  color: #003544;
  font-size: 32px;
  font-weight: 500;
}
.patternTitle .em {
  font-size: 140%;
}
.patternTitle:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 100%;
  background-color: #fd8484;
}
.patternTitle:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #003544;
}
.pinkMask .patternTitle:before {
  background-color: #F8CCDF;
}


.patternKV {
  position: relative;
  width: calc(542/900*100%);
}
.patternKV:after {
  content: '';
  display: block;
  position: absolute;
  top: 20px;
  left: -20px;
  width: 128px;
  height: 48px;
  background: #000 url("../images/icon_mask.svg") center right 20px no-repeat;
  background-size: 48px 16px;
}
.patternKV img {
  vertical-align: top;
}
.patternLeadText {
  margin: -74px 0 120px calc(458/900*100%);
  position: relative;
}
.patternLeadText:before {
  content: '';
  display: block;
  position: absolute;
  top: 20px;
  left: -54px;
  width: 64px;
  height: 2px;
  background-color: #fff;
}
.patternLeadText p {
  padding: 1.2em;
  line-height: 1.75;
  color: #003544;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

@media screen and (max-width: 899px){
  .patternTitle {
    margin: 0 auto 68px;
    padding: 0 0 10px 30px;
    border-bottom-width: 4px;
    width: calc(690/750*100vw);
    line-height: 1.2;
    font-size: 20px;
  }
  .patternTitle:before {
    width: 10px;
    height: 100%;
  }
  .patternTitle:after {
    bottom: -8px;
    height: 2px;
  }
  .patternKV {
    margin-left: calc(13/375*100%);
    width: calc(262/375*100%);
  }
  .patternKV:after {
    left: calc(-13/375*100vw);
    width: 64px;
    height: 24px;
    background-position: center right 10px;
    background-size: 24px 8px;
  }
  .patternKV img {
    vertical-align: top;
  }
  .patternLeadText {
    margin: -45px 0 24px calc(165/375*100%);
  }
  .patternLeadText:before {
    top: 20px;
    left: -20px;
    width: 40px;
  }
  .patternLeadText p {
    padding: 1.8em;
    line-height: 2;
    font-size: 12px;
  }
}






.makeSection {
  margin-bottom: 160px;
}
.makeSection + .makeSection {
  margin-top: 135px;
}
.makeSection .step01 {
	position: relative;
}
.makeSection .step01 .stepImg {
  margin: 0 0 0 calc(500/900*100%);
}
.makeSection .step01 .stepContent {
  margin: calc(-260/900*100%) 0 0;
}
.makeSection .step01 .stepArticle {
  margin-top: calc(-25/900*100%);
  padding-top: calc(25/900*100% + 40px);
  padding-bottom: 73px;
  padding-right: 180px;
  width: calc(640/900*100%);
  background-color: #fcebe9;
}
.makeSection .step01 .lookmore01 {
  margin: calc(-57/900*100%) 0 0 calc(173/900*100%);
  width: calc(278/900*100%);
}
.makeSection .step01 .lookmore01 .name {
  padding: calc(130/260*100%) 0 0 calc(165/260*100%);
}
.makeSection .step01 .lookmore02 {
  margin: 0 0 calc(-70/900*100%);
	position: absolute;
	bottom: 0;
	left: calc(564/900*100%);
  width: calc(296/900*100%);
}
.makeSection .step01 .lookmore02 .name {
  padding: calc(230/310*100%) 0 0 calc(200/310*100%);
}
.makeSection .step02 {
  margin-bottom: 170px;
}
.makeSection .step02 .stepImg {
}
.makeSection .step02 .stepContent {
  margin: calc(-353/900*100%) 0 0 calc(360/900*100%);
}
.makeSection .step02 .stepLabel {
  margin-left: calc(40/540*100%);
}
.makeSection .step02 .stepArticle {
  margin-top: calc(-35/900*100%);
  padding-top: calc(87/900*100% + 25px);
  padding-bottom: 80px;
  background-color: #fbdee4;
}
.makeSection .step02 .stepArticle ul li {
  padding-left: 130px;
}
.makeSection .step02 .stepArticle ul li .num {
  width: 110px;
}
.makeSection .step02 .lookmore01 {
  margin: calc(-170/900*100%) 0 0 0;
  width: calc(347/900*100%);
}
.makeSection .step02 .lookmore01 .name {
  padding: calc(220/340*100%) 0 0 calc(190/340*100%);
}
.makeSection .step02 .lookmore02 {
  margin: 0 0 calc(-110/900*100%);
	position: absolute;
	bottom: 0;
	left: calc(380/900*100%);
  width: calc(346/900*100%);
}
.makeSection .step02 .lookmore02 .name {
  padding: calc(220/340*100%) 0 0 calc(190/340*100%);
}
.makeSection .step03 {
  margin-bottom: 190px;
}
.makeSection .step03 .stepImg {
  margin: 0 0 0 calc(500/900*100%);
}
.makeSection .step03 .stepContent {
  margin: 0;
  width: calc(507/900*100%);
}
.makeSection .step03 .stepArticle {
  margin-top: calc(-35/640*100%);
  padding-top: calc(40/640*100% + 30px);
  padding-right: 65px;
  padding-bottom: 35px;
  background-color: #f1f1f1;
  box-sizing: border-box;
}
.makeSection .step03 .lookmore01 {
  margin: calc(112/900*100%) 0 0;
	position: absolute;
	top: 0;
	left: calc(580/900*100%);
  width: calc(271/900*100%);
  z-index: 2;
}
.makeSection .step03 .lookmore01 .name {
  padding: calc(215/290*100%) 0 0 calc(180/290*100%);
}
.makeSection .step03 .lookmore02 {
  margin: calc(450/900*100%) 0 0;
	position: absolute;
	top: 0;
	left: calc(436/900*100%);
  width: calc(328/900*100%);
  z-index: 2;
}
.makeSection .step03 .lookmore02 .name {
  padding: calc(180/290*100%) 0 0 calc(180/290*100%);
}
.makeSection .step04 {
}
.makeSection .step04 .stepImg {
}
.makeSection .step04 .stepContent {
  margin: calc(-181/900*100%) 0 0 calc(360/900*100%);
}
.makeSection .step04 .stepLabel {
  margin-left: calc(40/540*100%);
}
.makeSection .step04 .stepArticle {
  margin-top: calc(-35/640*100%);
  padding: calc(60/640*100% + 30px) 50px 60px 82px;
}
.makeSection .step04 .lookmore01 {
  margin: calc(-130/900*100%) 0 0 calc(219/900*100%);
  width: calc(385/900*100%);
}
.makeSection .step04 .lookmore01 .name {
  padding: calc(250/390*100%) 0 0 calc(240/390*100%);
}
@media screen and (max-width: 899px){
  .makeSection {
    margin-bottom: 0;
  }
  .makeSection + .makeSection {
    margin-top: 80px;
  }
  .makeSection .step01 {
  }
  .makeSection .step01 .stepImg {
    margin: 0;
    position: absolute;
    right: calc(-55/750*100vw);
    bottom: calc(320/750*100vw);
    width: calc(424/750*100vw);
  }
  .makeSection .step01 .stepContent {
    margin: 0;
  }
  .makeSection .step01 .stepArticle {
    margin-top: calc(-60/750*100vw);
    padding: calc(60/750*100vw + 30px) calc(65/750*100vw) calc(100/750*100vw) calc(35/750*100vw);
    width: auto;
  }
  .makeSection .step01 .lookmore01 {
    margin: calc(20/750*100vw) 0 0;
    width: calc(282/750*100vw);
  }
  .makeSection .step01 .lookmore01 .name {
    padding: calc(145/750*100vw) 0 0;
  }
  .makeSection .step01 .lookmore02 {
    margin: calc(-120/750*100vw) 0 0 calc(134/375*100vw);
		position: relative;
		bottom: auto;
		left: auto;
    width: calc(386/750*100vw);
  }
  .makeSection .step01 .lookmore02 .name {
    padding: calc(210/750*100vw) 0 0 calc(170/750*100vw);
  }
  .makeSection .step02 {
    margin-bottom: 40px;
  }
  .makeSection .step02 .stepImg {
    margin: 0;
    position: absolute;
    right: calc(-55/750*100vw);
    bottom: calc(190/750*100vw);
  }
  .makeSection .step02 .stepContent {
    margin: 0;
  }
  .makeSection .step02 .stepLabel {
    margin: 0;
  }
  .makeSection .step02 .stepArticle {
    margin-top: calc(-60/750*100vw);
    padding: calc(60/750*100vw + 30px) calc(65/750*100vw) calc(120/750*100vw) calc(35/750*100vw);
  }
  .makeSection .step02 .stepArticle ul li {
    padding-left: 50px;
  }
  .makeSection .step02 .stepArticle ul li .num {
    width: 35px;
  }
  .makeSection .step02 .lookmore01 {
    margin: calc(-70/750*100vw) 0 0 calc(-30/750*100vw);
    width: calc(328/750*100vw);
  }
  .makeSection .step02 .lookmore01 .name {
    padding: calc(224/750*100vw) 0 0 calc(180/750*100vw);
  }
  .makeSection .step02 .lookmore02 {
    margin: calc(40/375*100vw) 0 0 calc(84/375*100vw);
    position: relative;
    bottom: auto;
    left: auto;
    width: calc(328/750*100vw);
  }
  .makeSection .step02 .lookmore02 .name {
    padding: calc(224/750*100vw) 0 0 calc(180/750*100vw);
  }
  .makeSection .step03 {
    margin-bottom: 20px;
  }
  .makeSection .step03 .stepImg {
    margin: 0;
    position: absolute;
    right: calc(-55/750*100vw);
    bottom: calc(-175/750*100vw);
  }
  .makeSection .step03 .stepContent {
    margin: 0;
    width: auto;
  }
  .makeSection .step03 .stepArticle {
    margin-top: calc(-60/750*100vw);
    padding: calc(60/750*100vw + 30px) calc(65/750*100vw) calc(90/750*100vw) calc(35/750*100vw);
  }
  .makeSection .step03 .lookmore01 {
    margin: 0 0 0 calc(222/750*100vw);
    width: calc(228/750*100vw);
    z-index: 2;
  }
  .makeSection .step03 .lookmore01 {
    margin: calc(-50/750*100vw) 0 0 calc(120/750*100vw);
    position: relative;
    top: auto;
    left: auto;
    width: calc(578/750*100vw);
  }
  .makeSection .step03 .lookmore01 .name {
    padding: calc(200/750*100vw) 0 0 0;
  }
  .makeSection .step03 .lookmore02 {
    margin: calc(50/750*100vw) 0 0 0;
    position: relative;
    top: auto;
    left: auto;
    width: calc(590/750*100vw);
  }
  .makeSection .step03 .lookmore02 .name {
    padding: calc(295/750*100vw) 0 0 calc(300/750*100vw);
  }
  .makeSection .step04 {
    margin-bottom: 70px;
  }
  .makeSection .step04 .stepImg {
    margin: 0;
    position: absolute;
    right: calc(-55/750*100vw);
    bottom: calc(200/750*100vw);
    width: calc(488/640*100%);
  }
  .makeSection .step04 .stepContent {
    margin: 0;
    width: auto;
  }
  .makeSection .step04 .stepLabel {
    margin: 0;
  }
  .makeSection .step04 .stepArticle {
    margin-top: calc(-60/750*100vw);
    padding: calc(60/750*100vw + 30px) calc(65/750*100vw) calc(100/750*100vw);
  }
  .makeSection .step04 .lookmore01 {
    margin: calc(96/750*100vw) 0 0 calc(60/750*100vw);
    width: calc(348/750*100vw);
  }
  .makeSection .step04 .lookmore01 .name {
    padding: calc(250/750*100vw) 0 0 calc(220/750*100vw);
  }
}





.pinkMask .patternLeadText,
.pinkMask .patternKV:after {
  background-color: #F8CCDF;
}
.pinkMask .step01 .stepArticle {
  background-color: rgba(248,204,223,.15);
}
.pinkMask .stepArticle ul li .num {
  background-color: #F8CCDF;
}
.pinkMask .step02 .stepArticle {
  background-color: rgba(248,204,223,.25);
}
.pinkMask .step03 .stepArticle {
  background-color: rgba(248,204,223,.5);
}
.pinkMask .step04 .stepArticle {
  background-color: rgba(248,204,223,.7);
}





.lgMask .patternTitle:before,
.lgMask .patternLeadText,
.lgMask .patternKV:after {
  background-color: #C6D0CE;
}
.lgMask .stepArticle ul li .num {
  background-color: #C6D0CE;
}
.lgMask .step01 .stepArticle {
  background-color: rgba(198,208,206,.15);
}
.lgMask .step02 .stepArticle {
  background-color: rgba(198,208,206,.25);
}
.lgMask .step03 .stepArticle {
  background-color: rgba(198,208,206,.5);
}
.lgMask .step04 .stepArticle {
  background-color: rgba(198,208,206,.7);
}
@media screen and (min-width: 900px){
  .lgMask .step01 .lookmore02 .name {
    padding-left: calc(180/310*100%);
  }
  .lgMask .step02 {
    margin-bottom: 60px;
    padding-bottom: calc(150/900*100%);
  }
  .lgMask .step02 .lookmore01 {
    margin-top: calc(-230/900*100%);
  }
  .lgMask .step02 .lookmore02 {
    margin-bottom: 0;
  }
  .lgMask .step03 {
    margin-bottom: 320px;
  }
  .lgMask .step03 .lookmore02 {
    left: calc(384/900*100%);
  }
}
@media screen and (max-width: 899px){
  .lgMask .step02 .lookmore01 .name {
    padding-left: calc(160/750*100vw);
    letter-spacing: -.05em;
  }
  .lgMask .step03 .lookmore02 {
    width: calc(550/750*100vw);
  }
  .lgMask .step03 .lookmore02 .name {
    padding-top: calc(290/750*100vw);
    padding-left: calc(262/750*100vw);
  }
}





.purpleMask .patternTitle:before,
.purpleMask .patternLeadText,
.purpleMask .patternKV:after,
.purpleMask .stepArticle ul li .num {
  background-color: #CEBFDD;
}
.purpleMask .step01 .stepArticle {
  background-color: rgba(206,191,221,.15);
}
.purpleMask .step02 .stepArticle {
  background-color: rgba(206,191,221,.25);
}
.purpleMask .step03 .stepArticle {
  background-color: rgba(206,191,221,.5);
}
.purpleMask .step04 .stepArticle {
  background-color: rgba(206,191,221,.7);
}
@media screen and (min-width: 900px){
  .purpleMask .step01 .lookmore02 {
    width: calc(250/900*100%);
  }
  .purpleMask .step01 .lookmore02 .name {
    padding: calc(120/250*100%) 0 0 calc(170/250*100%);
  }
  .purpleMask .step03 {
    margin-bottom: 320px;
  }
  .purpleMask .step03 .lookmore01 {
    width: calc(283/900*100%);
  }
}
@media screen and (max-width: 899px){
  .purpleMask .step01 .stepImg {
    
  }
  .purpleMask .step01 .lookmore01 {
    margin: calc(-20/750*100vw) 0 0;
    width: calc(290/750*100vw);
  }
  .purpleMask .step01 .lookmore02 {
    margin: calc(-20/750*100vw) 0 0 calc(113/375*100vw);
    width: calc(314/750*100vw);
  }
  .purpleMask .step01 .lookmore02 .name {
    padding: calc(150/750*100vw) 0 0;
  }
  .purpleMask .step02 .lookmore01 .name {
    padding-left: calc(160/750*100vw);
    letter-spacing: -.05em;
  }
  .purpleMask .step03 .lookmore01 {
    width: calc(566/750*100vw);
  }
  .purpleMask .step03 .lookmore02 {
    width: calc(574/750*100vw);
  }
  .purpleMask .step03 .lookmore02 .name {
    padding-top: calc(300/750*100vw);
    padding-left: calc(280/750*100vw);
  }
  .purpleMask .step04 .lookmore01 {
    width: calc(340/750*100vw);
  }
}





.dgMask .patternTitle:before,
.dgMask .patternLeadText,
.dgMask .patternKV:after,
.dgMask .stepArticle ul li .num {
  background-color: #B7BDCC;
}
.dgMask .step01 .stepArticle {
  background-color: rgba(183,189,204,.15);
}
.dgMask .step02 .stepArticle {
  background-color: rgba(183,189,204,.25);
}
.dgMask .step03 .stepArticle {
  background-color: rgba(183,189,204,.5);
}
.dgMask .step04 .stepArticle {
  background-color: rgba(183,189,204,.7);
}
@media screen and (min-width: 900px){
  .dgMask .step01 .lookmore02 {
    width: calc(292/900*100%);
  }
  .dgMask .step01 .lookmore02 .name {
    padding: calc(215/292*100%) 0 0 calc(170/292*100%);
  }
  .dgMask .step03 {
    margin-bottom: 320px;
  }
  .dgMask .step03 .lookmore01 {
    margin: calc(180/900*100%) 0 0;
    width: calc(264/900*100%);
  }
  .dgMask .step03 .lookmore01 .name {
    padding: calc(200/264*100%) 0 0 calc(165/264*100%);
  }
  .dgMask .step03 .lookmore02 {
    margin: calc(510/900*100%) 0 0;
    left: calc(370/900*100%);
    width: calc(316/900*100%);
  }
  .dgMask .step03 .lookmore02 .name {
    padding: calc(205/316*100%) 0 0 calc(185/316*100%);
  }
}
@media screen and (max-width: 899px){
  .dgMask .step02 .lookmore01 .name {
    padding-left: calc(160/750*100vw);
    letter-spacing: -.05em;
  }
  .dgMask .step02 .lookmore02 {
    width: calc(338/750*100vw);
  }
  .dgMask .step03 .lookmore01 {
    margin-left: calc(144/750*100vw);
    width: calc(550/750*100vw);
  }
  .dgMask .step03 .lookmore01 .name {
    padding-top: calc(260/750*100vw);
  }
  .dgMask .step03 .lookmore02 {
    width: calc(626/750*100vw);
  }
  .dgMask .step03 .lookmore02 .name {
    padding-top: calc(300/750*100vw);
    padding-left: calc(330/750*100vw);
  }
  .dgMask .step04 .lookmore01 {
    width: calc(358/750*100vw);
  }
}





.beigeMask .patternTitle:before,
.beigeMask .patternLeadText,
.beigeMask .patternKV:after,
.beigeMask .stepArticle ul li .num {
  background-color: #EFD9A8;
}
.beigeMask .step01 .stepArticle {
  background-color: rgba(239,217,168,.15);
}
.beigeMask .step02 .stepArticle {
  background-color: rgba(239,217,168,.25);
}
.beigeMask .step03 .stepArticle {
  background-color: rgba(239,217,168,.5);
}
.beigeMask .step04 .stepArticle {
  background-color: rgba(239,217,168,.7);
}
@media screen and (min-width: 900px){
  .beigeMask .step01 .lookmore02 {
    width: calc(250/900*100%);
  }
  .beigeMask .step01 .lookmore02 .name {
    padding: calc(135/250*100%) 0 0 calc(160/250*100%);
  }
  .beigeMask .step03 {
    margin-bottom: 320px;
  }
  .beigeMask .step03 .lookmore01 {
    width: calc(264/900*100%);
  }
  .beigeMask .step03 .lookmore01 .name {
    padding: calc(210/264*100%) 0 0 calc(185/264*100%);
  }
  .beigeMask .step03 .lookmore02 {
    width: calc(320/900*100%);
  }
  .beigeMask .step03 .lookmore02 .name {
    padding: calc(210/320*100%) 0 0 calc(190/320*100%);
  }
}
@media screen and (max-width: 899px){
  .beigeMask .step01 .lookmore01 {
    margin-top: calc(60/750*100vw);
  }
  .beigeMask .step01 .lookmore02 {
    margin: calc(-60/750*100vw) 0 0 calc(328/750*100vw);
    width: calc(314/750*100vw);
  }
  .beigeMask .step01 .lookmore02 .name {
    padding-top: calc(140/750*100vw);
    padding-left: 0;
  }
  .beigeMask .step02 .lookmore01 {
    width: calc(308/750*100vw);
  }
  .beigeMask .step02 .lookmore01 .name {
    padding-top: calc(250/750*100vw);
    padding-left: calc(160/750*100vw);
    letter-spacing: -.05em;
  }
  .beigeMask .step02 .lookmore02 {
    margin-left: calc(220/750*100vw);
  }
  .beigeMask .step03 .lookmore02 {
    width: calc(560/750*100vw);
  }
  .beigeMask .step03 .lookmore02 .name {
    padding-top: calc(292/750*100vw);
    padding-left: calc(260/750*100vw);
  }
}





/* use item
------------------------------ */

.useItems {
  margin: 90px auto 40px;
  max-width: 900px;
}
.useItems dl {
}
.useItems dl dt {
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-bottom: 1px #003544 solid;
  color: #003544;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: .15em;
  text-align: center;
}
.useItems dl dd {
}
.useItems dl dd ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.useItems dl dd ul li {
  margin: 0 10px 10px;
  max-width: 164px;
}
.useItems dl dd ul li a {
}
.useItems dl dd ul li a img {
  transition: all ease .6s;
}
.useItems dl dd ul li a:hover img {
  transform: scale(1.04);
}
@media screen and (max-width: 899px){
  .useItems {
    margin: 70px auto 20px;
    width: calc(285/375*100%);
  }
  .useItems dl dt {
    margin-bottom: 2em;
    font-size: 14px;
  }
  .useItems dl dd {
  }
  .useItems dl dd ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .useItems dl dd ul li {
    margin: 0 0 10px;
    width: calc(95/285*100%);
  }
}





/* anime
------------------------------ */
.hero,
.hero .heroTxt {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero .heroTxt {
  transition-delay: 2s;
}
.hero.is-show,
.hero.is-show .heroTxt {
  opacity: 1;
  pointer-events: all;
}

.anime01 {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime01.is-show {
  opacity: 1;
  pointer-events: all;
}
.anime02,
.anime02 .stepLabel .iconCheck:before {
  opacity: 0;
  pointer-events: none;
  transition: transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94),opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime02 {
	transform: translateY(50px);
}
.anime02 .stepLabel .iconCheck:before {
  transition-duration: .6s;
  transition-delay: 1.6s;
}
.anime02.is-show,
.anime02.is-show .stepLabel .iconCheck:before {
  opacity: 1;
  pointer-events: all;
	transform: translateY(0);
}
.anime03,
.anime03 .btnDetail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime03 .btnDetail {
  transition-delay: 1.3s;
}
.anime03.is-show,
.anime03.is-show .btnDetail {
  opacity: 1;
  pointer-events: all;
}

.anime04>* {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime04>*:nth-child(2) {
  transition-delay: .4s;
}
.anime04>*:nth-child(3) {
  transition-delay: .8s;
}
.anime04>*:nth-child(4) {
  transition-delay: 1.2s;
}
.anime04.is-show>* {
  opacity: 1;
  pointer-events: all;
}

.anime05,
.anime05 .maskMakeTitle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime05 .maskMakeTitle {
  transition-delay: 1.2s;
}
.anime05.is-show,
.anime05.is-show .maskMakeTitle {
  opacity: 1;
  pointer-events: all;
}

.anime06,
.anime06 .itemName {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anime06 .itemName {
  transition:  color ease .9s,opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s !important;
}
.anime06.is-show,
.anime06.is-show .itemName {
  opacity: 1;
  pointer-events: all;
}





/* add banner
------------------------------ */
.snsLink {
  margin: 140px 0 160px;
}
.snsLinkTitle {
  margin: 0 auto 160px;
  padding: 0 0 15px;
  border-bottom: 8px #003544 solid;
  position: relative;
  max-width: 900px;
  line-height: 1.5;
  color: #003544;
  font-size: 39.2px;
  font-weight: 500;
  text-align: center;
}
.snsLinkTitle span {
  margin: 0 5px;
  border-bottom: 2px #003544 solid;
  display: inline-block;
  line-height: 1.2;
}
.snsLinkTitle:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #003544;
}
.snsLink ul {
  display: flex;
  justify-content: center;
}
.snsLink ul li {
  margin: 0 40px;
  max-width: 320px;
  line-height: 1;
}
.snsLink ul li a {
  transition: opacity ease .3s;
}
.snsLink ul li a:hover {
  opacity: .6;
}
@media screen and (max-width: 899px){
  .snsLink {
    margin: 70px 0 80px;
  }
  .snsLinkTitle {
    margin: 0 auto 80px;
    padding: 0 0 6px;
    border-bottom-width: 4px;
    width: calc(690/750*100%);
    line-height: 40px;
    font-size: 22.4px;
  }
  .snsLinkTitle span {
    line-height: 1.2;
    border-bottom-width: 1px;
  }
  .snsLinkTitle:after {
    bottom: -8px;
    height: 2px;
  }
  .snsLink ul {
    display: block;
  }
  .snsLink ul li {
    margin: 0 auto;
    width: calc(448/750*100%);
  }
  .snsLink ul li + li {
    margin-top: 60px;
  }
}