/* ================================================================= */
/* ======================== 0 〜 824px以上 =========================== */
/* ============================================================== */

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

.wrapper {
text-align: center;
overflow: hidden;
}

/*===== mainvisual =====*/
.mainvisual {
min-width: 100%;
margin: 0 auto 62px;
}
.mainvisual h1 {
width: 251px;
margin: 109px auto 137px;
position: relative;
z-index: 2;
}
.mainvisual h1 img {
width: 100%;
height: auto;
}
.mainvisual p {
font-size: 18px;
line-height: 1.666;
}

/*===== itemdetail =====*/
.introduction {
position: relative;
min-width: 100%;
margin: 0 auto;
padding-top: 130px;
overflow: hidden;
}
.introduction::before {
content: "";
display: block;
width: 100%;
height: 322px;
position: absolute;
top: 0;
background-image: url(../images/redcard/bg-01.png);
background-position: left center;
background-size: cover;
z-index: -1;
}
.introduction h2 {
width: 250px;
margin: 0 auto;
color: #009b32;
margin-bottom: 162px;
}
.introduction h2 img {
width: 100%;
height: auto;
}
.introduction p {
font-size: 18px;
line-height: 1.666;
margin-bottom: 79px;
}
.positionrelative {
position: relative;
width: 100%;
margin: 0 auto;
}
.positionrelative::after {
content: "";
display: block;
width: 100%;
height: 322px;
position: absolute;
top: 562px;
background-image: url(../images/redcard/bg-01.png);
background-size: cover;
background-position: left center;
z-index: -1;
}
.introduction .detail {
width: 310px;
margin: 107px auto 0;
text-align: left;
}
.introduction .detail dt {
width: 250px;
margin: 0 auto;
margin-bottom: 140px;
}
.introduction .detail dd {
width: 100%;
margin: 0 auto;
font-size: 12px;
line-height: 2;
text-align: left;
letter-spacing: -0.025em;
}
.introduction .buybtn {
width: 89px;
height: 34px;
line-height: 34px;
margin: 38px auto 32px;
font-size: 10px;
background-color: #ffffff;
}
.introduction .buybtn a {
display: block;
width: 89px;
height: 34px;
line-height: 34px;
color: #000000;
}
.introduction .img02 {
margin-bottom: 15px;
}
.introduction .img03 {
margin-bottom: 56px;
}
.introduction .img04 {
width: 46.3%;
margin: 0 auto 21px;
}
.introduction .buyer {
text-align: left;
font-size: 9px;
line-height: 1.666;
margin-left: 26%;
}
.introduction .buyer dt {
margin-bottom: 20px;
}
.introduction .buyer dt span {
display: block;
margin-bottom: 16px;
font-size: 7px;
}
.introduction .buyer dd {
font-size: 7px;
line-height: 2;
}

/*===== beforecordinate =====*/
.beforecordinate {
min-width: 100%;
height: 518px;
margin: 127px auto 43px;
position: relative;
overflow: hidden;
}
.beforecordinate .inner {
width: 100%;
text-align: left;
margin: 0 auto;
position: relative;
}
.beforecordinate::after {
content: "";
display: block;
width: 100%;
height: 518px;
position: absolute;
top: 0;
right: 0;
background-image: url(../images/redcard/bg-03.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.beforecordinate h2 {
width: 287px;
height: auto;
margin: 168px auto 0;
}

/*===== coordinate =====*/
.coordinate {
position: relative;
}
.coordinate .inner {
text-align: left;
position: relative;
min-width: 100%;
margin: 0 auto;
}

/*===== style01 =====*/
.style01 .subinner {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.style01 h3 {
width: 105px;
margin: 0 auto 75px;
}
.style01 dl.name {
width: 160px;
margin: 30px auto 40px;
}
.style01 dl.name dt {
font-size: 12px;
margin-bottom: 25px;
}
.style01 dl.name dd {
font-size: 24px;
}
.style01 dl.name dd span {
display: block;
font-size: 18px;
margin-top: 15px;
}
.style01 dl.stylist {
width: 85.866%;
margin: 55px auto 60px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style01 dl.stylist dt {
font-size: 9px;
margin-bottom: 15px;
line-height: 1.25;
}
.style01 dl.stylist dt span {
display: block;
margin: 0 0 15px 0;
}
.style01 dl.stylist dd {
width: 100%;
font-size: 7px;
line-height: 1.571;
}
.style01 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style01 p.txt {
width: 85.866%;
margin: 60px auto 50px;
font-size: 9px;
line-height: 2.667;
letter-spacing: -0.1em;
}
.style01 p.lastlead {
font-size: 13px;
line-height: 2;
text-align: center;
padding-top: 80px;
margin-bottom: 43px;
position: relative;
}
.style01 p.lastlead::before {
content: "";
display: block;
width: 100%;
height: 242px;
position: absolute;
top: 0;
background-image: url(../images/redcard/bg-01.png);
background-size: cover;
background-position: center center;
z-index: -1;
}


/*===== style02 =====*/
.style02 {
position: relative;
}
.style02 .subinner {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.style02 h3 {
width: 113px;
margin: 33px auto 80px;
}
.style02 dl.name {
width: 100%;
margin: 0 auto;
padding: 30px 0 40px;
}
.style02 dl.name::after {
content: "";
display: block;
width: 387px;
height: 356px;
position: absolute;
bottom: 11px;
right: -242px;
background-image: url(../images/redcard/bg-06.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style02 dl.name dt {
width: 130px;
margin: 0 auto;
font-size: 12px;
margin-bottom: 25px;
}
.style02 dl.name dd {
width: 130px;
margin: 0 auto;
font-size: 24px;
}
.style02 dl.name dd span {
display: block;
font-size: 18px;
margin-top: 15px;
}
.style02 dl.stylist {
width: 85.866%;
margin: 50px auto 48px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style02 dl.stylist dt {
font-size: 9px;
margin-bottom: 15px;
line-height: 1.25;
}
.style02 dl.stylist dt span {
display: block;
margin: 0 0 15px 0;
}
.style02 dl.stylist dd {
width: 100%;
font-size: 7px;
line-height: 1.571;
}
.style02 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style02 p.txt {
width: 85.866%;
margin: 48px auto 43px;
font-size: 9px;
line-height: 2.667;
letter-spacing: -0.1em;
}
.style02 p.lastlead {
font-size: 14px;
text-align: center;
padding-top: 59px;
padding-bottom: 54px;
position: relative;
}
.style02 p.lastlead::after {
content: "";
display: block;
width: 515px;
height: 474px;
position: absolute;
bottom: -58px;
right: 14px;
background-image: url(../images/redcard/bg-06.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style02 .img01,
.style02 .img03 {
position: relative;
z-index: 2;
}


/*===== style03 =====*/
.style03 .subinner {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
}
.style03 h3 {
width: 105px;
margin: 32px auto 77px;
}
.style03 dl.name {
width: 160px;
margin: 0 auto;
padding: 32px 0 65px;
}
.style03 dl.name dt {
font-size: 12px;
margin-bottom: 25px;
}
.style03 dl.name dd {
font-size: 24px;
}
.style03 dl.name dd span {
display: block;
font-size: 18px;
margin-top: 15px;
}
.style03 dl.stylist {
width: 85.866%;
margin: 55px auto 60px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style03 dl.stylist dt {
font-size: 9px;
margin-bottom: 15px;
line-height: 1.25;
}
.style03 dl.stylist dt span {
display: block;
margin: 0 0 15px 0;
}
.style03 dl.stylist dd {
width: 100%;
font-size: 7px;
line-height: 1.571;
}
.style03 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style03 p.txt {
width: 85.866%;
margin: 60px auto 59px;
font-size: 9px;
line-height: 2.667;
letter-spacing: -0.1em;
}
.style03 p.lastlead {
font-size: 13px;
line-height: 2;
text-align: center;
padding-top: 96px;
margin-bottom: 65px;
position: relative;
}
.style03 p.lastlead::before {
content: "";
display: block;
width: 100%;
height: 242px;
position: absolute;
top: 0;
background-image: url(../images/redcard/bg-01.png);
background-size: cover;
background-position: center center;
z-index: -1;
}


/*===== movie =====*/
.movie {
position: relative;
margin-top: 80px;
margin-bottom: 90px;
}
.movie::before {
content: "";
display: block;
width: 100%;
height: 250px;
position: absolute;
top: 80px;
background-image: url(https://tomorrowland.jp/topic/mystandard/assets/images/bg-05.png);
background-position: center center;
background-size: cover;
z-index: -1;
}
.movie h2 {
width: 269px;
margin: 0 auto;
color: #000000;
font-size: 110px;
margin-bottom: 110px;
}
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

/*===== buyarea =====*/
.buyarea {
position: relative;
margin-top: 42px;
}
.buyarea .subinner {
width: 100%;
margin: 0 auto;
}
.buyarea .article {
margin-bottom: 59px;
}
.buyarea .article figure {
width: 100%;
position: relative;
}
.buyarea .article figcaption {
text-align: left;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.buyarea .article figcaption ul {
width: 70%;
margin:  0 auto;
margin-top: 43px;
}
.buyarea .article figcaption ul li {
font-size: 9px;
line-height: 3;
letter-spacing: -0.025em;
}
.buyarea .article figcaption ul li:first-child {
margin-bottom: 18px;
}
.buyarea .article figcaption ul li a {
color: #6683ff;
text-decoration: underline;
}
.buyarea .style1 h2 {
width: 105px;
margin: 0 auto 88px;
}
.buyarea .style2 h2 {
width: 113px;
margin: 0 auto 94px;
}
.buyarea .style3 h2 {
width: 113px;
margin: 0 auto 88px;
}

/* ================================================= */
/* ===================== SP END. ===================== */
/* =============================================== */

}

/* ================================================================= */
/* ======================== 825px以上 ============================= */
/* ============================================================== */

@media screen and (min-width:825px) and (max-width:1440px) {

.wrapper {
min-width: 1008px;
text-align: center;
overflow: hidden;
}

/*===== mainvisual =====*/
.mainvisual {
min-width: 1008px;
margin: 0 auto;
}
.mainvisual .youtubearea {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.mainvisual .youtubearea iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.mainvisual h1 {
width: 721px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 721px;
height: 351px;
}
.mainvisual h1 img {
width: 100%;
height: auto;
}
.mainvisual p {
font-size: 25px;
line-height: 2;
margin-top: 140px;
margin-bottom: 145px;
}

/*===== itemdetail =====*/
.introduction {
position: relative;
min-width: 1008px;
margin: 0 auto;
padding-top: 184px;
overflow: hidden;
}
.introduction::before {
content: "";
display: block;
width: 100%;
height: 484px;
position: absolute;
top: 0;
background-image: url(../images/redcard/bg-01.png);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
.introduction h2 {
width: 470px;
margin: 0 auto;
color: #009b32;
margin-bottom: 260px;
}
.introduction h2 img {
width: 100%;
height: auto;
}
.introduction p {
font-size: 25px;
line-height: 1.666;
margin-bottom: 282px;
}
.positionrelative {
position: relative;
width: 1008px;
margin: 0 auto;
height: 2120px;
}
.positionrelative::after {
content: "";
display: block;
width: 1040px;
height: 958px;
position: absolute;
top: -155px;
right: -315px;
background-image: url(../images/redcard/bg-02.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.introduction .detail {
position: absolute;
left: 534px;
text-align: left;
}
.introduction .detail dt {
width: 471px;
margin-top: 18px;
margin-bottom: 74px;
position: relative;
z-index: 3;
}
.introduction .detail dd {
width: 371px;
font-size: 17px;
line-height: 2;
padding-left: 105px;
letter-spacing: -0.025em;
}
.introduction .buybtn {
width: 132px;
height: 51px;
line-height: 51px;
font-size: 14px;
position: absolute;
top: 775px;
left: 639px;
}
.introduction .buybtn a {
display: block;
color: #000000;
background-color: #ffffff;
width: 132px;
height: 51px;
line-height: 51px;
}
.introduction .buyer {
position: absolute;
top: 1949px;
left: 580px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.introduction .buyer dt {
font-size: 18px;
margin-bottom: 20px;
line-height: 1.25;
}
.introduction .buyer dt span {
display: block;
margin: 0 0 25px 0;
font-size: 13px;
}
.introduction .buyer dd {
width: 500px;
font-size: 12px;
line-height: 2;
}
.introduction .img01 {
width: 615px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.introduction .img02 {
width: 550px;
position: absolute;
top: 950px;
left: 3px;
}
.introduction .img03 {
width: 426px;
position: absolute;
top: 866px;
right: 3px;
}
.introduction .img04 {
width: 261px;
position: absolute;
top: 1530px;
left: 580px;
}
.introduction .img05 {
width: 249px;
position: absolute;
bottom: 0;
left: 317px;
}

/*===== beforecordinate =====*/
.beforecordinate {
min-width: 1008px;
height: 705px;
margin: 187px auto 0;
position: relative;
overflow: hidden;
}
.beforecordinate .inner {
width: 1008px;
height: 705px;
text-align: left;
margin: 0 auto;
position: relative;
}
.beforecordinate .inner::after {
content: "";
display: block;
width: 987px;
height: 705px;
position: absolute;
top: 0;
right: 0;
background-image: url(../images/redcard/bg-03.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.beforecordinate h2 {
width: 745px;
height: 262px;
position: absolute;
top: 237px;
left: 125px;
z-index: 2;
}

/*===== coordinate =====*/
.coordinate {
position: relative;
}
.coordinate .inner {
text-align: left;
position: relative;
min-width: 1008px;
margin: 0 auto;
}

/*===== style01 =====*/
.style01 {
margin-top: 203px;
margin-bottom: 46px;
height: 2806px;
position: relative;
}
.style01 .subinner {
position: relative;
width: 1008px;
height: 100%;
margin: 0 auto;
}
.style01 .subinner::before {
content: "";
display: block;
width: 605px;
height: 613px;
position: absolute;
top: 157px;
left: -155px;
background-image: url(../images/redcard/bg-04.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style01::after {
content: "";
display: block;
width: 100%;
height: 613px;
position: absolute;
bottom: 0;
left: 0;
background-image: url(../images/redcard/bg-05.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style01 h3 {
width: 211px;
margin: 0 auto;
}
.style01 .img01 {
width: 782px;
position: absolute;
top: 342px;
left: 95px;
}
.style01 .img02 {
width: 521px;
position: absolute;
top: 746px;
left: 4px;
}
.style01 .img03 {
width: 521px;
position: absolute;
top: 1834px;
left: 10px;
}
.style01 .img04 {
width: 521px;
position: absolute;
top: 1602px;
right: 10px;
}
.style01 p.txt {
width: 423px;
font-size: 18px;
line-height: 2.667;
position: absolute;
top: 900px;
right: 0;
letter-spacing: -0.06em;
}
.style01 dl.name {
position: absolute;
top: 387px;
right: 0;
z-index: 2;
}
.style01 dl.name dt {
font-size: 24px;
margin-bottom: 50px;
}
.style01 dl.name dd {
font-size: 48px;
margin-bottom: 50px;
}
.style01 dl.name dd span {
display: block;
font-size: 36px;
margin-top: 25px;
}
.style01 dl.stylist {
position: absolute;
top: 1587px;
left: 4px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style01 dl.stylist dt {
font-size: 18px;
margin-bottom: 20px;
line-height: 1.25;
}
.style01 dl.stylist dt span {
display: block;
margin: 0 0 25px 0;
}
.style01 dl.stylist dd {
width: 500px;
font-size: 14px;
line-height: 1.571;
}
.style01 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style01 .lastlead {
font-size: 27px;
line-height: 2;
text-align: center;
position: absolute;
bottom: 170px;
right: 5px;
}

/*===== style02 =====*/
.style02 {
margin-top: 203px;
margin-bottom: 46px;
height: 3305px;
position: relative;
}
.style02 .subinner {
position: relative;
width: 1008px;
height: 100%;
margin: 0 auto;
}
.style02 .subinner::before {
content: "";
display: block;
width: 773px;
height: 712px;
position: absolute;
top: 859px;
right: -107px;
background-image: url(../images/redcard/bg-06.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style02 h3 {
width: 211px;
margin: 0 auto;
}
.style02 .img01 {
width: 521px;
position: absolute;
top: 294px;
right: 132px;
z-index: 2;
}
.style02 .img02 {
width: 521px;
position: absolute;
top: 1035px;
left: 4px;
}
.style02 .img03 {
width: 521px;
position: absolute;
top: 2138px;
left: 10px;
}
.style02 .img04 {
width: 521px;
position: absolute;
bottom: 0;
right: 4px;
}
.style02 p.txt {
width: 443px;
font-size: 18px;
line-height: 2.667;
position: absolute;
top: 1650px;
right: 0;
letter-spacing: -0.06em;
}
.style02 dl.name {
position: absolute;
top: 514px;
left: 42px;
z-index: 2;
}
.style02 dl.name dt {
font-size: 24px;
margin-bottom: 50px;
}
.style02 dl.name dd {
font-size: 48px;
margin-bottom: 50px;
}
.style02 dl.name dd span {
display: block;
font-size: 36px;
margin-top: 25px;
}
.style02 dl.stylist {
position: absolute;
top: 1871px;
left: 4px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style02 dl.stylist dt {
font-size: 18px;
margin-bottom: 20px;
line-height: 1.25;
}
.style02 dl.stylist dt span {
display: block;
margin: 0 0 25px 0;
}
.style02 dl.stylist dd {
width: 500px;
font-size: 14px;
line-height: 1.571;
}
.style02 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style02 .lastlead {
font-size: 27px;
line-height: 2;
text-align: center;
position: absolute;
top: 1203px;
right: 44px;
}

/*===== style03 =====*/
.style03 {
margin-top: 66px;
margin-bottom: 46px;
height: 2915px;
position: relative;
}
.style03 .subinner {
position: relative;
width: 1008px;
height: 100%;
margin: 0 auto;
}
.style03 .subinner::before {
content: "";
display: block;
width: 605px;
height: 613px;
position: absolute;
top: 209px;
right: 4px;
background-image: url(../images/redcard/bg-07.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style03::after {
content: "";
display: block;
width: 100%;
height: 484px;
position: absolute;
bottom: 0;
left: 0;
background-image: url(../images/redcard/bg-08.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style03 h3 {
width: 211px;
margin: 0 auto;
}
.style03 .img01 {
width: 780px;
position: absolute;
top: 506px;
left: 4px;
z-index: 2;
}
.style03 .img02 {
width: 520px;
position: absolute;
top: 934px;
right: -4px;
}
.style03 .img03 {
width: 521px;
position: absolute;
top: 1755px;
left: 4px;
}
.style03 .img04 {
width: 521px;
position: absolute;
bottom: 105px;
right: 4px;
}
.style03 p.txt {
width: 449px;
font-size: 18px;
line-height: 2.667;
position: absolute;
top: 1083px;
left: 0;
letter-spacing: -0.06em;
}
.style03 dl.name {
position: absolute;
top: 270px;;
left: 60px;
z-index: 2;
}
.style03 dl.name dt {
font-size: 24px;
margin-bottom: 50px;
}
.style03 dl.name dd {
font-size: 48px;
margin-bottom: 50px;
}
.style03 dl.name dd span {
display: block;
font-size: 36px;
margin-top: 25px;
}
.style03 dl.stylist {
position: absolute;
top: 1765px;
right: -4px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style03 dl.stylist dt {
font-size: 18px;
margin-bottom: 20px;
line-height: 1.25;
}
.style03 dl.stylist dt span {
display: block;
margin: 0 0 25px 0;
}
.style03 dl.stylist dd {
width: 307px;
font-size: 14px;
line-height: 1.571;
}
.style03 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style03 .lastlead {
font-size: 27px;
line-height: 2;
text-align: center;
position: absolute;
bottom: 190px;
left: 0;
}

/*===== buyarea =====*/
.buyarea {
position: relative;
margin-top: 131px;
margin-bottom: 113px;
}
.buyarea .subinner {
width: 1115px;
margin: 0 auto;
padding-left: 63px;
}
.buyarea .article {
margin-bottom: 36px;
}
.buyarea .article figure {
width: 521px;
float: left;
margin-right: 55px;
position: relative;
}
.buyarea .article figcaption {
width: 535px;
height: 782px;
display: flex;
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
float: left;
position: relative;
text-align: left;
}
.buyarea .article figcaption ul li {
font-size: 15px;
line-height: 3;
letter-spacing: -0.025em;
}
.buyarea .article figcaption ul li:first-child {
margin-bottom: 28px;
}
.buyarea .article figcaption ul li a {
color: #6683ff;
text-decoration: underline;
}
.buyarea .style1 h2 {
width: 211px;
position: absolute;
top: -48px;
left: 43px;
margin: 0;
z-index: 2;
}
.buyarea .style2 h2 {
width: 227px;
position: absolute;
top: -48px;
left: 43px;
margin: 0;
z-index: 2;
}
.buyarea .style3 h2 {
width: 227px;
position: absolute;
top: -48px;
left: 43px;
margin: 0;
z-index: 2;
}

/* ================================================= */
/* ==================== PC END. ====================== */
/* =============================================== */

}


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

.wrapper {
min-width: 1440px;
text-align: center;
overflow: hidden;
}

/*===== mainvisual =====*/
.mainvisual {
min-width: 1440px;
margin: 0 auto;
}
.mainvisual h1 {
width: 961px;
height: 468px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.mainvisual h1 img {
width: 100%;
height: auto;
}
.mainvisual p {
font-size: 36px;
line-height: 1.666;
margin-top: 186px;
margin-bottom: 195px;
}

/*===== itemdetail =====*/
.introduction {
position: relative;
min-width: 1440px;
margin: 0 auto;
padding-top: 245px;
overflow: hidden;
}
.introduction::before {
content: "";
display: block;
width: 100%;
height: 645px;
position: absolute;
top: 0;
background-image: url(../images/redcard/bg-01.png);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
}
.introduction h2 {
width: 627px;
margin: 0 auto 344px;
color: #009b32;
}
.introduction h2 img {
width: 100%;
height: auto;
}
.introduction p {
font-size: 27px;
line-height: 2;
margin-bottom: 396px;
}
.positionrelative {
position: relative;
width: 1344px;
margin: 0 auto;
height: 2866px;
}
.positionrelative::after {
content: "";
display: block;
width: 1387px;
height: 1277px;
position: absolute;
top: -207px;
right: -420px;
background-image: url(../images/redcard/bg-02.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.introduction .detail {
position: absolute;
right: 0;
text-align: left;
}
.introduction .detail dt {
width: 628px;
margin-top: 24px;
margin-bottom: 98px;
position: relative;
z-index: 3;
}
.introduction .detail dd {
width: 497px;
font-size: 24px;
line-height: 2;
padding-left: 140px;
letter-spacing: -0.04em;
}
.introduction .buybtn {
width: 177px;
height: 69px;
line-height: 69px;
font-size: 20px;
position: absolute;
top: 1034px;
left: 850px;
}
.introduction .buybtn a {
display: block;
color: #000000;
background-color: #ffffff;
width: 177px;
height: 69px;
line-height: 69px;
}
.introduction .buyer {
position: absolute;
top: 2600px;
left: 774px;
text-align: left;
font-size: 18px;
line-height: 1.666;
}
.introduction .buyer dt {
font-size: 24px;
margin-bottom: 40px;
line-height: 1.25;
}
.introduction .buyer dt span {
display: block;
margin: 0 0 45px 0;
font-size: 18px;
}
.introduction .buyer dd {
width: 500px;
font-size: 18px;
line-height: 2;
}
.introduction .img01 {
width: 820px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.introduction .img02 {
width: 733px;
position: absolute;
top: 1268px;
left: 3px;
}
.introduction .img03 {
width: 568px;
position: absolute;
top: 1156px;
right: 4px;
}
.introduction .img04 {
width: 348px;
position: absolute;
top: 2041px;
left: 774px;
}
.introduction .img05 {
width: 249px;
position: absolute;
bottom: 0;
left: 317px;
}

/*===== beforecordinate =====*/
.beforecordinate {
min-width: 1344px;
height: 941px;
margin: 250px auto 0;
position: relative;
overflow: hidden;
}
.beforecordinate .inner {
width: 1315px;
height: 941px;
text-align: left;
margin: 0 auto;
position: relative;
}
.beforecordinate .inner::after {
content: "";
display: block;
width: 1315px;
height: 941px;
position: absolute;
top: 0;
right: 0;
background-image: url(../images/redcard/bg-03.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.beforecordinate h2 {
width: 993px;
height: 349px;
position: absolute;
top: 316px;
left: 184px;
z-index: 2;
}

/*===== coordinate =====*/
.coordinate {
position: relative;
}
.coordinate .inner {
text-align: left;
position: relative;
min-width: 1344px;
margin: 0 auto;
}

/*===== style01 =====*/
.style01 {
margin-top: 269px;
height: 3742px;
position: relative;
}
.style01 .subinner {
position: relative;
width: 1344px;
height: 100%;
margin: 0 auto;
}
.style01 .subinner::before {
content: "";
display: block;
width: 605px;
height: 613px;
position: absolute;
top: 157px;
left: -155px;
background-image: url(../images/redcard/bg-04.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style01::after {
content: "";
display: block;
width: 100%;
height: 645px;
position: absolute;
bottom: 0;
left: 0;
background-image: url(../images/redcard/bg-05.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style01 h3 {
width: 280px;
margin: 0 auto;
}
.style01 .img01 {
width: 1043px;
position: absolute;
top: 457px;
left: 127px;
}
.style01 .img02 {
width: 695px;
position: absolute;
top: 995px;
left: 4px;
}
.style01 .img03 {
width: 695px;
position: absolute;
top: 2446px;
left: 4px;
}
.style01 .img04 {
width: 695px;
position: absolute;
top: 2137px;
right: 10px;
}
.style01 p.txt {
width: 590px;
font-size: 24px;
line-height: 2.667;
position: absolute;
top: 1210px;
right: 0;
letter-spacing: -0.06em;
}
.style01 dl.name {
position: absolute;
top: 517px;
right: 0;
z-index: 2;
}
.style01 dl.name dt {
font-size: 32px;
margin-bottom: 70px;
}
.style01 dl.name dd {
font-size: 64px;
}
.style01 dl.name dd span {
display: block;
font-size: 48px;
margin-top: 25px;
}
.style01 dl.stylist {
position: absolute;
top: 2116px;
left: 4px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style01 dl.stylist dt {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.25;
}
.style01 dl.stylist dt span {
display: block;
margin: 0 0 40px 0;
}
.style01 dl.stylist dd {
width: 500px;
font-size: 18px;
line-height: 1.571;
}
.style01 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style01 .lastlead {
font-size: 36px;
line-height: 2;
text-align: center;
position: absolute;
bottom: 227px;
right: 5px;
}

/*===== style02 =====*/
.style02 {
margin-top: 203px;
margin-bottom: 87px;
height: 4407px;
position: relative;
}
.style02 .subinner {
position: relative;
width: 1344px;
height: 100%;
margin: 0 auto;
}
.style02 .subinner::before {
content: "";
display: block;
width: 1031px;
height: 949px;
position: absolute;
top: 1146px;
right: -143px;
background-image: url(../images/redcard/bg-06.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style02 h3 {
width: 303px;
margin: 0 auto;
}
.style02 .img01 {
width: 695px;
position: absolute;
top: 393px;
right: 176px;
z-index: 2;
}
.style02 .img02 {
width: 695px;
position: absolute;
top: 1380px;
left: 12px;
}
.style02 .img03 {
width: 695px;
position: absolute;
top: 2851px;
left: 10px;
}
.style02 .img04 {
width: 695px;
position: absolute;
bottom: 0;
right: 4px;
}
.style02 p.txt {
width: 590px;
font-size: 24px;
line-height: 2.667;
position: absolute;
top: 2200px;
right: 0;
letter-spacing: -0.06em;
}
.style02 dl.name {
position: absolute;
top: 685px;
left: 56px;
z-index: 2;
}
.style02 dl.name dt {
font-size: 32px;
margin-bottom: 70px;
}
.style02 dl.name dd {
font-size:64px;
margin-bottom: 40px;
}
.style02 dl.name dd span {
display: block;
font-size: 48px;
margin-top: 25px;
}
.style02 dl.stylist {
position: absolute;
top: 2496px;
left: 12px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style02 dl.stylist dt {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.25;
}
.style02 dl.stylist dt span {
display: block;
margin: 0 0 25px 0;
}
.style02 dl.stylist dd {
width: 500px;
font-size: 18px;
line-height: 1.571;
}
.style02 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style02 .lastlead {
font-size: 36px;
line-height: 2;
text-align: center;
position: absolute;
top: 1601px;
right: 59px;
}

/*===== style03 =====*/
.style03 {
margin-top: 66px;
height: 3888px;
position: relative;
}
.style03 .subinner {
position: relative;
width: 1344px;
height: 100%;
margin: 0 auto;
}
.style03 .subinner::before {
content: "";
display: block;
width: 807px;
height: 817px;
position: absolute;
top: 280px;
right: -143px;
background-image: url(../images/redcard/bg-07.png);
background-size: cover;
background-position: center center;
z-index: -1;
}
.style03::after {
content: "";
display: block;
width: 100%;
height: 645px;
position: absolute;
bottom: 0;
left: 0;
background-image: url(../images/redcard/bg-08.png);
background-size: cover;
background-position: center center;
z-index: -1;
}

.style03 h3 {
width: 301px;
margin: 0 auto;
}
.style03 .img01 {
width: 1040px;
position: absolute;
top: 675px;
left: 4px;
z-index: 2;
}
.style03 .img02 {
width: 693px;
position: absolute;
top: 1247px;
right: -8px;
}
.style03 .img03 {
width: 693px;
position: absolute;
top: 2341px;
left: 4px;
}
.style03 .img04 {
width: 693px;
position: absolute;
bottom: 140px;
right: 4px;
}
.style03 p.txt {
width: 598px;
font-size: 24px;
line-height: 2.667;
position: absolute;
top: 1445px;
left: 4px;
letter-spacing: -0.06em;
}
.style03 dl.name {
position: absolute;
top: 361px;
left: 80px;
z-index: 2;
}
.style03 dl.name dt {
font-size: 32px;
margin-bottom: 50px;
}
.style03 dl.name dd {
font-size: 64px;
margin-bottom: 50px;
}
.style03 dl.name dd span {
display: block;
font-size: 48px;
margin-top: 25px;
}
.style03 dl.stylist {
position: absolute;
top: 2354px;
right: -4px;
text-align: left;
font-size: 12px;
line-height: 1.666;
}
.style03 dl.stylist dt {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.25;
}
.style03 dl.stylist dt span {
display: block;
margin: 0 0 25px 0;
}
.style03 dl.stylist dd {
width: 410px;
font-size: 18px;
line-height: 1.571;
}
.style03 dl.stylist dd a {
color: #000000;
text-decoration: underline;
}
.style03 .lastlead {
font-size: 36px;
line-height: 2;
text-align: center;
position: absolute;
bottom: 253px;
left: 0;
}

/*===== buyarea =====*/
.buyarea {
position: relative;
margin-top: 175px;
margin-bottom: 152px;
}
.buyarea .subinner {
width: 1487px;
margin: 0 auto;
padding-left: 71px;
}
.buyarea .article {
margin-bottom: 48px;
}
.buyarea .article figure {
width: 695px;
float: left;
margin-right: 70px;
position: relative;
}
.buyarea .article figcaption {
width: 714px;
height: 1043px;
display: flex;
flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
justify-content: center; /* 子要素をflexboxにより中央に配置する */
float: left;
position: relative;
text-align: left;
}
.buyarea .article figcaption ul li {
font-size: 20px;
line-height: 3;
letter-spacing: -0.025em;
}
.buyarea .article figcaption ul li:first-child {
margin-bottom: 40px;
}
.buyarea .article figcaption ul li a {
color: #6683ff;
text-decoration: underline;
}
.buyarea .style1 h2 {
width: 280px;
position: absolute;
top: -66px;
left: 59px;
margin: 0;
z-index: 2;
}
.buyarea .style2 h2 {
width: 303px;
position: absolute;
top: -66px;
left: 59px;
margin: 0;
z-index: 2;
}
.buyarea .style3 h2 {
width: 301px;
position: absolute;
top: -66px;
left: 59px;
margin: 0;
z-index: 2;
}

}


/* ================================================================= */
/* ======================== 1920px以上 ============================= */
/* ============================================================== */

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

.introduction {
padding-top: 12.8%;
}
.introduction::before,
.style01::after,
.style03::after {
padding-top: 33.6%;
height: 0;
}

/* ================================================= */
/* ==================== PC END. ====================== */
/* =============================================== */

}