/*step*/
.step_box{ border: 4px solid #d4d7dc; padding: 20px; background: #fff; margin: 40px auto;}
.step_box h2{ text-align: center; text-align: center; color: #38a8e1; font-size: 48px; letter-spacing: 0.1em; font-weight: bold; margin-bottom: 20px;}
.step_box h2 span{ display: inline-block; vertical-align: middle; width: 120px; margin-right: 10px;}
.step_box h2 span img{ vertical-align: middle; position: relative; top: -0.1em;}
.step_box figure{ text-align: center; margin: 0 auto;}
@media screen and (max-width: 767px) {
.step_box{ border:1vw solid #d4d7dc; padding:3%; margin:6% auto;}
.step_box h2{ font-size:7.5vw; margin-bottom:3%;}
.step_box h2 span{ width:16.6666vw; margin-right:3%;}
}

/*step1*/
#step1 p{ font-size: 32px; letter-spacing: 0.1em; font-weight: bold; color: #333; text-align: center; margin: 20px auto;}
#step1_fb{ margin-top: 20px; text-align: center;}
#step1_fb .fb-comments{ margin: 0 auto;}
@media screen and (max-width: 767px) {
#step1 p{ font-size:4vw; letter-spacing:0.05em; margin:3% auto;}
#step1_fb{ margin-top:3%;}
}

/*step2*/
#step2 h2{ margin-bottom: 0;}
#step2 dl{ background: #f4f5b7; display: table; table-layout: fixed; width: 100%; padding: 10px 20px; margin-top: 20px;}
#step2 dl dt{ display: table-cell; vertical-align: middle; padding-right: 20px;}
#step2 dl dd{ display: table-cell; vertical-align: middle; width: 160px;}
#step2 dl dt p{ color: #333; font-weight: bold; font-size: 32px; letter-spacing: 0.1em; line-height: 1.4em; margin-bottom: 10px;}
#step2 dl dt input{ text-align: center; border: none; width: 100%; color: #333; font-weight: bold; font-size: 24px; letter-spacing: 0.1em;}
#step2 a{ transition: 0.3s;}
#step2 a:hover{ opacity: 0.7;}
@media screen and (max-width: 767px) {
#step2 dl{ padding:3%; margin-top:3%;}
#step2 dl dt{ display:block; padding:0; margin-bottom: 4.5%;}
#step2 dl dd{ display:block; width:100%; text-align: center;}
#step2 dl dd img{ width: 50%;}
#step2 dl dt p{ font-size:4vw; letter-spacing:0.025em; margin-bottom:3%;}
#step2 dl dt input{ font-size:4.5vw;}
}

/*step3*/
#step3{ padding-bottom: 0;}
#step3 dl{ display: table; table-layout: fixed; margin: 0 auto;}
#step3 dl dt{ display: table-cell; vertical-align: middle; width: 240px;}
#step3 dl dd{ display: table-cell; vertical-align: middle; padding-right: 40px;}
#step3 dl dd p{ color: #333; font-weight: bold; font-size: 32px; letter-spacing: 0.1em; line-height: 1.4em; margin-bottom: 40px; text-align: center;}
#step3 dl dd #step3_message{ background: url("https://instagram.wdos1.com/images/step3_message_bg.png") center center no-repeat; background-size: auto 100%; text-align: center; margin-top: 20px; padding: 0.5em 0.75em 0.5em 0.5em; font-size: 32px; letter-spacing: 0.1em; font-weight: bold; color: #333;}
@media screen and (max-width: 767px) {
#step3{ padding-bottom: 3%;}
#step3 dl{ display:block;}
#step3 dl dt{ display:block; width:100%; text-align: center; margin-bottom: 3%;}
#step3 dl dt img{ width: 33.3333%;}
#step3 dl dd{ display:block; padding:0;}
#step3 dl dd p{ font-size:5vw; margin-bottom:3%;}
#step3 dl dd #step3_message{ margin-top:3%; font-size:7.5vw;}
}

/*アニメーションボタン*/
.animate72,.a-option72,.a-btnsub72 {-webkit-animation-timing-function: ease-in;-moz-animation-timing-function: ease-in;-o-animation-timing-function: ease-in;animation-timing-function: ease-in;-moz-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;-o-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;}a.a-btn {position:relative;display:inline-block;margin:auto;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;}a.a-btn img {display: block;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}img.a-main {width:100%;position:relative;z-index: 54;}a.shover:hover * {animation-name:none!important;}@-moz-keyframes animate72 {0%{ -moz-transform:rotate(0deg);}40%{ -moz-transform:rotate(0deg);}50%{ -moz-transform:rotate(2deg);}60%{ -moz-transform:rotate(-1deg);}70%{ -moz-transform:rotate(3deg);}80%{ -moz-transform:rotate(-2deg);}90%{ -moz-transform:rotate(0deg);}100%{ -moz-transform:rotate(0deg);}}@-o-keyframes animate72 {0%{ -o-transform:rotate(0deg);}40%{ -o-transform:rotate(0deg);}50%{ -o-transform:rotate(2deg);}60%{ -o-transform:rotate(-1deg);}70%{ -o-transform:rotate(3deg);}80%{ -o-transform:rotate(-2deg);}90%{ -o-transform:rotate(0deg);}100%{ -o-transform:rotate(0deg);}}@-webkit-keyframes animate72 {0%{ -webkit-transform:rotate(0deg);}40%{ -webkit-transform:rotate(0deg);}50%{ -webkit-transform:rotate(2deg);}60%{ -webkit-transform:rotate(-1deg);}70%{ -webkit-transform:rotate(3deg);}80%{ -webkit-transform:rotate(-2deg);}90%{ -webkit-transform:rotate(0deg);}100%{ -webkit-transform:rotate(0deg);}}@keyframes animate72 {0%{ transform:rotate(0deg);}40%{ transform:rotate(0deg);}50%{ transform:rotate(2deg);}60%{ transform:rotate(-1deg);}70%{ transform:rotate(3deg);}80%{ transform:rotate(-2deg);}90%{ transform:rotate(0deg);}100%{ transform:rotate(0deg);}}.animate72{-webkit-animation-name: animate72;-moz-animation-name: animate72;-o-animation-name: animate72;animation-name: animate72;}.a-btn72{padding-left:0%!important;}.a-option72{top:0%!important;}.a-option72{width:20%!important;}.a-btn72{max-width:100%!important;}.animate72,.a-btnsub72,.a-option72{animation-duration:1.7s!important;-webkit-animation-duration:1.7s;-ms-animation-duration:1.7s;-moz-animation-duration:1.7s!important;}
