@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/system03/bg.jpg) center 0 no-repeat fixed; color: #502555; padding-bottom: 150px;}


.cont01 {margin: 105px 0 0;}
.cont01 p {font-size: 16px; line-height: 26px; letter-spacing: 0.05em; color: #502555; text-align: center;}
.cont01 h2 + p {margin-bottom: 47px; font-size: 17px; line-height: 35px;}
.cont01 .imgs {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; padding: 37px 0 0; position: relative; left: -2px;}
.cont01 .img {position: relative; font-size: 0; line-height: 1; width: 549px; text-align: center; margin: 0;}
.cont01 .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;}
.cont01 .img + .img {margin: 0 0 0 36px;}
.cont01 .img a{display: block; width: 512px; height: 289px; position: absolute; left: 20px; top: 20px;}
.cont01 .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;}
.cont01 .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;}
.cont01 .img a:hover:after {opacity: 1;}
.cont01 .img img {width: 549px; height: 325px; position: relative; z-index: 0;-webkit-backface-visibility: hidden;}
.cont01 .img h3 {font-size: 20px; line-height: 29px; color: #a15982;}
.cont01 .img div + p {margin-top: 12px;}
.cont01 .img-single {text-align: center; margin-bottom: 55px;}
.cont01 .img-single .img {width: 661px; text-align: center; margin: 0 auto;}
.cont01 .img-single .img img{width: 661px; height: 391px;}
.cont01 .img-single .img a {width: 616px; height: 346px; left: 25px; top: 25px;}
.cont01 h3 {text-align: center; margin-bottom: 32px; margin-top: 8px;}
.cont01 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.04em; white-space: nowrap; left: -5px;}
.cont01 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;}
.cont01 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;}
.cont01.new .wrap:after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: 125px; top: -28px; z-index: 100; margin-left: 8px;}


.cont02 {margin: 96px 0 0;}
.cont02 p {font-size: 16px; line-height: 26px; letter-spacing: 0.05em; color: #502555; text-align: center;}
.cont02 h2 + p {margin-bottom: 48px; font-size: 17px; line-height: 35px;}
.cont02 .imgs {display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: center; padding: 0px 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.new .wrap:after{content: ''; width: 127px; height: 127px; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: 100px; top: -2px; z-index: 100; margin-left: 8px;}




}

@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;}

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

.cont01 .imgs {margin-top: 1.5rem;}
.cont01 .img {position: relative; font-size: 0; line-height: 1; width: 100%; text-align: center;}
.cont01 .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;}
.cont01 .img + .img {margin-top: 3.1rem;}
.cont01 .img a{display: none;}
.cont01 .img img {width: 30.35rem; height: 17.95rem; position: relative; z-index: 0; backface-visibility: hidden;}
.cont01 .img p {font-size: 1.15rem; line-height: 1.75rem; letter-spacing: 0.05em; color: #502555; margin: 0.95rem 0.85rem 0;}
.cont01 .img h3 {font-size: 1.35rem; line-height: 1; color: #a15982 ;margin: .5rem 0 0; font-weight: bold;}
.cont01 .img-single {text-align: center; margin-bottom: 3.1rem;}
.cont01 h3 {text-align: center;}
.cont01 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;}
.cont01 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);}
.cont01 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);}
.cont01.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: -1.5rem; z-index: 10; background-size: 100% auto;}

.cont02 {margin: 4.5rem 0 ;}
.cont02.new {margin: 10rem 0 4.5rem;}
.cont02 .wrap {text-align: center;}
.cont02 p {font-size: 1.15rem; line-height: 1.75rem; letter-spacing: 0.05em; color: #502555; margin: 0.95rem 1rem 0;}
.cont02 h2 {font-size: 1.9rem;}
.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.45rem 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.new .wrap:after{content: ''; width: 6.35rem; height: 6.35rem; background: url(../images/common/new.png) left top no-repeat; position: absolute; left: -1.3rem; top: -6.5rem; z-index: -1; background-size: 100% auto;}

.pagearr {position:absolute; left: -4rem; top: 37.6rem; z-index: 1200; width: 3.4rem; transition: 0.8s ease; opacity: 0; font-size: 0; line-height: 1;}
.pagearr a {display: block; width: 3.4rem; height: 5.4rem; background:url(../images/common/arr-left.png) left top no-repeat; transition:  0.3s; background-size: 100% auto;}
.pagearr.next {left: inherit; right: -4rem; margin-left: inherit; margin-right: 0; text-align: right;}
.pagearr.next a{background: url(../images/common/arr-right.png) left top no-repeat; float: right; background-size: 100% auto;}
/*.windowloaded .pagearr {opacity: 1;}*/
.pagearr.show {opacity: 1; left: 1rem;}
.pagearr.next.show {opacity: 1; left: inherit; right: 1rem;}

}



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