@charset "utf-8";
main p strong {color: #cb5a72;}

@media screen and (min-width:641px){
#siteheader nav ul li:nth-child(5) a:after {background-position: -709px -185px; opacity: 1;}
.pageheader h1 span {min-width: 0px; width: 155px; padding: 0;}
main {background: url(../images/system/bg.jpg) center 0 no-repeat fixed; color: #502555; padding-bottom: 150px;}
.ie11 .cont01 h2{height: 57px;}

main .steps {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; padding: 56px 0 0; position: relative; left: -2px;}
main .step {position: relative; font-size: 0; line-height: 1; width: 549px; margin: 0 36px 0 0;}
main .step:nth-child(even) {margin: 0 0 0 36px;}
main .step:nth-child(n+3) {margin-top: 65px;}
main .step img {width: 431px; height: 51px; display: block; backface-visibility: hidden; margin: 0 auto;}
main .step div {position: relative;}
main .step div img {width: 549px; height: 325px; position: relative; z-index: 0;}
main p {font-size: 17px; line-height: 35px; letter-spacing: 0.05em; color: #502555; text-align: center; }
main .step p {font-size: 16px; line-height: 26px; padding: 0 0 0 2px; margin-top: 15px;}
main .step a{display: block; width: 512px; height: 289px; position: absolute; left: 20px; top: 20px;}
main .step a:after{content: ''; background: rgba(255,255,255,0.3); position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; transition: 0.4s; opacity: 0;}
main .step a:before{content: ''; background: url(../images/common/btn-zoom.png); backface-visibility: hidden; position: absolute; right: 0; bottom: 0; z-index: 20; width: 30px; height: 30px; background-size: 30px 30px;}
main .step a:hover:after {opacity: 1;}

main .step h3{text-align: center; padding-left: 2px; margin: 0 0 35px;}
main .step h3 span { color: #991658; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; margin-top: 20px; display: block;}
main .step h3 span em { background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; text-align: center; padding: 20px 0 0; font-size: 28px; font-weight: bold;}

.cont01 {margin: 106px 0 0;}



.cont02 {margin: 105px 0 0;}
.cont02 p {font-size: 16px; line-height: 26px; letter-spacing: 0.05em; color: #502555; text-align: center;}
.cont02 h2 + p {margin-bottom: 47px; font-size: 17px; line-height: 35px;}
.cont02 h3 + p { font-size: 17px; line-height: 35px;}
.cont02 .imgs {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; padding: 37px 0 0; position: relative; left: -2px;}
.cont02 .img {position: relative; font-size: 0; line-height: 1; width: 549px; text-align: center; margin: 0;}
.cont02 .img.new:after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -37px; top: -43px; z-index: 100;}
.cont02 .img + .img {margin: 0 0 0 36px;}
.cont02 .img a{display: block; width: 512px; height: 289px; position: absolute; left: 20px; top: 20px;}
.cont02 .img a:after{content: ''; background: rgba(255,255,255,0.3); position: absolute; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; transition: 0.4s; opacity: 0;}
.cont02 .img a:before{content: ''; background: url(../images/common/btn-zoom.png); -webkit-backface-visibility: hidden; position: absolute; right: 0; bottom: 0; z-index: 20; width: 30px; height: 30px; background-size: 30px 30px;}
.cont02 .img a:hover:after {opacity: 1;}
.cont02 .img img {width: 549px; height: 325px; position: relative; z-index: 0;-webkit-backface-visibility: hidden;}
.cont02 .img h3 {font-size: 20px; line-height: 29px; color: #a15982;}
.cont02 .img div + p {margin-top: 12px;}
.cont02 .img-single {text-align: center; margin-bottom: 55px;}
.cont02 .img-single .img {width: 661px; text-align: center; margin: 0 auto;}
.cont02 .img-single .img img{width: 661px; height: 391px;}
.cont02 .img-single .img a {width: 616px; height: 346px; left: 25px; top: 25px;}
.cont02 h3 {text-align: center; margin-bottom: 32px; margin-top: 30px;}
.cont02 h3 span{ color: #991658; font-size: 36px; line-height: 1; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: bold; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; position: relative; margin-bottom: 23px; letter-spacing: 0.1em; white-space: nowrap; left: -5px;}
.cont02 .imgs + h3 {margin-top: 100px;}
.cont02 h3 span::after{content: ''; width: 133px; height: 43px; background: url(../images/system03/ornament-left.png) left top no-repeat; position: absolute; left: -133px; top: 50%; margin: -22px 0 0 -15px;}
.cont02 h3 span::before{content: ''; width: 133px; height: 43px; background: url(../images/system03/ornament-right.png) left top no-repeat; position: absolute; right: -133px; top: 50%; margin: -22px -15px 0 0;}
.cont02.new .wrap:after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: 80px; top: -28px; z-index: 100; margin-left: 8px;}


.cont03 {padding-top: 100px;}
.cont03 img{width: 549px; height: auto;}
.cont03 .img a{display: block; width: 512px; height: 289px; position: absolute; left: 21px; top: 20px; background: url(../images/common/btn-zoom.png) right bottom no-repeat; background-size: 30px auto; transition: 0.3s; font-size: 0;}
.cont03 .img a:hover {background-color: rgba(255,255,255,0.30);}
.cont03 .item {clear: both; zoom:1;}
.cont03 .item:after{content: ''; clear: both; display: block;}
.cont03 .item + .item {position: relative; padding-top: 33px;}
.cont03 .item .img {float: left; position: relative; left: 32px; -webkit-backface-visibility: hidden;}
.cont03 .item .texts {float: right; width: 575px; text-align: left; position: relative; left: 0; padding: 107px 30px 0 5px;}
.cont03 .item + .item .texts {padding: 90px 30px 0 0;}
.cont03 h3 { color: #991658; font-size: 36px; line-height: 1; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: bold; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; position: relative; margin-bottom: 23px; letter-spacing: 0; white-space: nowrap; left: -5px;}
.cont03 p{color:#502555;/* font-weight: bold;*/ line-height: 35px; letter-spacing: 0.1em; text-align: left; }
.cont03 .img {position: relative;}
.cont03 .img p {font-size: 21px; line-height: 1; margin: 6px 0 0;}


}
@media screen and (min-width:1401px){

}
@media screen and (min-width:1920px){main {background-size: 100% auto;}}




@media screen and (max-width:640px){

#spnav ul li:nth-child(5) a:before {opacity: 1;}
#spnav ul li:nth-child(5) a:after {opacity: 0;}

main { color: #502555;}
main:before {content: ''; width: 100%; height: 100%; background: url(../images/system/sp/bg.jpg) center top no-repeat ; background-size: 100% auto; position: fixed; left: 0; top: 0; z-index: -1;}

main .steps {margin-top: 3.1rem; margin-bottom: 6.3rem;}
main .step {position: relative; font-size: 0; line-height: 1; width: 100%; text-align: center;}
main .step + .step {margin-top: 2.5rem;}
main .step img {width: 29rem; height: auto;}
main .step div img {width: 30.35rem; height: 17.95rem; position: relative; z-index: 0; backface-visibility: hidden;}
main .step a{display: none;}

main .step h3{text-align: center; padding-left: 2px; margin: 0 0 1.5rem;}
main .step h3 span { color: #991658; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; margin-top: 1.5rem; display: block;}
main .step h3 span em { background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; text-align: center; padding: 20px 0 0; font-size: 1.8rem; font-weight: bold;}

main p {font-size: 1.15rem; line-height: 2rem; letter-spacing: 0.05em; color: #502555;}
main .step p {margin: 0.95rem 0 0;}

.cont01 {margin: 5.7rem 0 0;}
.cont01 .wrap {text-align: center;}


.cont02 {margin: 4.5rem 0 0;}
.cont02 .wrap {text-align: center;}
.cont02 p {font-size: 1.15rem; line-height:2rem; letter-spacing: 0.0em; color: #502555; margin: 0.95rem 1rem 0;}
.cont02 h2 + p {margin-bottom: 3rem;}

.cont02 .imgs {margin-top: 1.5rem;}
.cont02 .img {position: relative; font-size: 0; line-height: 1; width: 100%; text-align: center;}
.cont02 .img.new:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -1.3rem; top: -2rem; z-index: 10; background-size: 100% auto;}
.cont02 .img + .img {margin-top: 3.1rem;}
.cont02 .img a{display: none;}
.cont02 .img img {width: 30.35rem; height: 17.95rem; position: relative; z-index: 0; backface-visibility: hidden;}
.cont02 .img p {font-size: 1.15rem; line-height: 1.75rem; letter-spacing: 0.05em; color: #502555; margin: 0.95rem 0.85rem 0;}
.cont02 .img h3 {font-size: 1.35rem; line-height: 1; color: #a15982 ;margin: .5rem 0 0; font-weight: bold;}
.cont02 .img-single {text-align: center; margin-bottom: 3.1rem;}
.cont02 h3 {text-align: center;}
.cont02 h3 span {font-size: 1.75rem; line-height: 1; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: bold; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; margin: 0 auto 0.8rem; display: inline-block; position: relative;}
.cont02 h3 span::after{content: ''; width: 6.7rem; height: 2.2rem; background: url(../images/system03/ornament-left.png) left top no-repeat; position: absolute; left: -3.7rem; top: 50%; margin: -1.1rem 0 0 -2.1rem; background-size: 100% auto; transform: scale(0.6);}
.cont02 h3 span::before{content: ''; width: 6.7rem; height: 2.2rem; background: url(../images/system03/ornament-right.png) left top no-repeat; position: absolute; right: -3.7rem; top: 50%; margin: -1.1rem -2.1rem 0 0; background-size: 100% auto; transform: scale(0.6);}
.cont02.new .wrap:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -0.5rem; top: -2.5rem; z-index: 10; background-size: 100% auto;}
.cont02 .imgs + h3 {margin-top: 5rem;}

.cont03 {padding: 4.2rem 0 0; margin-bottom: 6.3rem;}
.cont03 p{color: #502555;padding: 0 1.5rem; margin-bottom: 1.7rem;}
.cont03 .img {text-align: center;}
.cont03 img {width: 30.35rem; height: auto;}
.cont03 .img a {display: none;}
.cont03 .img p {font-size: 1.15rem; line-height: 1; margin: 0.25rem 0 0;}
.cont03 .item + .item {margin-top: 4.1rem; position: relative;}
.cont03 h3 {font-size: 2.4rem; line-height: 1; display: block; font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R', 游明朝, YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E',  HG明朝E, 'HGS明朝E',  HGS明朝E, 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', 'MS PMincho', serif; font-weight: bold; background: -webkit-linear-gradient(-90deg, rgba(182,17,89,1) 0%,rgba(80,36,84,1) 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; font-style: italic; margin: 0 1.5rem 0.8rem 1.3rem;}


}


/* bugfix */
.ie main .step h3 span,
.android main .step h3 span {font-family: 'Noto Serif Japanese', serif;}

/* bugfix */
.ie .cont02 h3 span,
.android .cont02 h3 span,
.ie .cont02 h3 span,
.android .cont02 h3 span {font-family: 'Noto Serif Japanese', serif;}

.ie .cont03 h3,
.android .cont03 h3,
.ie .cont03 h3,
.android .cont03 h3 {font-family: 'Noto Serif Japanese', serif;}