html {
    box-sizing: border-box;
    font-size: 62.5%;
}

@media screen and (min-width: 821px) and (max-width: 1536px) {
    html {
        font-size: 0.65vw;
    }
}

@media screen and (max-width: 820px) {
    html {
        font-size: 1.3vw;
    }
}

@media screen and (max-width: 640px) {
    html {
        font-size: 1.3vw;
    }
}

body p {
    line-height: 4rem;
    font-family: 'Noto Serif JP', serif;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.flex {
    display: flex;
}

@media screen and (max-width: 820px) {
    .flex {
        flex-wrap: wrap;
        max-height: inherit;
    }
}

.lp_style * {
    box-sizing: border-box;
    z-index: 1;
}

.lp_style {
    -webkit-text-size-adjust: 100%;
    font-size: 100%;
    color: #333333;
    font-weight: normal;
    letter-spacing: .01em;
    line-height: 1;
    list-style: none;
    font-weight: 400;
    overflow: hidden;
    color: #333333;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}

.lp_style button {
    background: transparent;
    padding: 0;
    margin: 0;
}

.lp_style ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp_style a {
    text-decoration: none;
}

.lp_style img {
    display: block;
    max-width: 100%;
}

.sp_only {
    display: none !important;
}

@media screen and (max-width: 820px) {
    .space {
        display: none;
    }
}

@media screen and (min-width:751px),
print {
    .pc_only {
        display: block !important;
    }
}

@media screen and (max-width:820px),
print {
    .pc_only {
        display: none !important;
    }

    .sp_only {
        display: block !important;
    }
}

.TextGroup {
    display: inline-block;
}

/*==メインビジュアル==*/
.mainvisual {
    background-image: url("../img/bgimage.jpg");
    background-size: cover;
    text-align: center;
    padding: 5rem 0 30rem;
}

@media screen and (max-width:820px) {
    .mainvisual {
        padding: 9rem 5rem 35.8rem;
    }
}

.main-image {
    margin: 0 auto 5rem;
}

.main-image img {
    margin: 0 auto;
}

@media screen and (max-width:820px) {
    .main-image {
        width: 100%;
        margin: 0 auto 10rem;
    }
}

.pageCatch,
.main-txt {
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    color: #000;
}

.pageCatch {
    font-size: 3rem;
    font-weight: 200;
    margin-bottom: 5rem;
}

@media screen and (max-width:820px) {
    .pageCatch {
        font-size: 4rem;
        line-height: 1.25;
    }
}

.main-txt {
    font-size: 2rem;
    font-weight: 200;
    margin-bottom: 10rem;
}

@media screen and (max-width:820px) {
    .main-txt {
        font-size: 2.8rem;
        line-height: 1.78;
        margin-bottom: 0;
    }
}

.slider-relative {
    padding-left: 3rem;
    margin-top: -28rem;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width:820px) {
    .slider-relative {
        padding-left: 0;
        margin-top: -26rem;
    }
}


.slider-relative .slick-slide {
    max-width: 42rem;
    margin-right: 3rem;
}

@media screen and (max-width:820px) {
    .slider-relative .slick-slide {
        max-width: initial;
        margin-right: 3rem;
    }
}

.slider-relative .slick-slide img {
    width: 100%;
}

/*===mメインコンテンツ===*/
/* #content-group{margin-top: 25rem;} */
.tegusgroup {
    max-width: 148rem;
    margin: auto;
}

@media screen and (max-width:820px) {
    .tegusgroup {
        position: relative;
        max-width: inherit;
    }
}

.tegusleft {
    background-color: #e1eff5;
    padding: 12rem 0;
}

@media screen and (max-width:820px) {
    .tegusleft .rightarea2 {
        order: 1;
        padding: 0 3rem;
    }

    .tegusleft .leftarea2 {
        order: 2;
    }
}

.tegusright {
    background-color: #ffffff;
    padding: 12rem 0;
}

.sbttl {
    color: #000;
    font-size: 3rem;
    font-family: YuGothic, 'Yu Gothic', sans-serif;
    margin-bottom: 4rem;
}

.bold {
    font-weight: bold;
}

h2 {
    color: #FFF;
    font-size: 8rem;
    font-family: classico-urw, sans-serif;
    font-weight: 500;
    font-style: normal;
    margin-bottom: 5rem;
}

.num01 {
    width: 10.4rem;
}

.num02 {
    width: 11.8rem;
}

.num03 {
    width: 11.8rem;
}

.num04 {
    width: 12.4rem;
}

.num05 {
    width: 11.9rem;
}

.num06 {
    width: 12.5rem;
}

.num07 {
    width: 12.2rem;
}

.num08 {
    width: 12.4rem;
}

.num09 {
    width: 12.3rem;
}

.right-txt {
    text-align: right;
    color: #e1eff5;
    font-weight: 700;
    line-height: 1;
}

.left-txt {
    text-align: left;
    line-height: 1;
}

.right-txt,
.left-txt  {
    font-family: classico-urw, sans-serif;
    font-weight: 500;
    font-style: normal;
}

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

    .right-txt,
    .left-txt {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.left-num,
.tegus-txt,
.product-name {
    text-align: left;
}

.left-num,
.right-num {
    height: auto;
    margin-bottom: 3rem;
}

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

    .left-num,
    .right-num {
        text-align: left;
        margin-bottom: 3rem;
    }
}

.right-num {
    margin-left: auto;
}

@media screen and (max-width:820px) {
    .right-num {
        margin-left: 0;
    }
}

.right-sbttl {
    color: #000;
    font-size: 3rem;
    margin-bottom: 4rem;
    text-align: right;
    font-family: YuGothic, 'Yu Gothic', sans-serif;
}

@media screen and (max-width:820px) {
    .sbttl , .right-sbttl {
        font-size: 4rem;
        line-height: 1.25;
        text-align: left;
        margin-bottom: 8rem;
    }

}

.tegus-txt {
    font-size: 1.7rem;
    margin-bottom: 6rem;
    line-height: 3.6rem;
}

@media screen and (max-width:820px) {
    .tegus-txt {
        font-size: 2.6rem;
        margin-bottom: 6rem;
        line-height: 1.8;
    }
}

.product-name {
    font-size: 2.2rem;
    margin-bottom: 3rem;
    line-height: 3.6rem;
    font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
    font-weight: 500;
}

@media screen and (max-width:820px) {
    .product-name {
        font-size: 2.6rem;
        margin-bottom: 3rem;

        display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    }
}


.product-tegus {
    background-color: #e1eff5;
    padding: 5rem;
}

.product-tegus2 {
    background-color: #fff;
    padding: 5rem;
}

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

    .product-tegus,
    .product-tegus2 {
        display: flex;
        background-color: #e1eff5;
        padding: 4rem 3.5rem;
    }

    .product-tegus2 {
        background: #fff;
    }
}

.product-tegus img,
.product-tegus2 img {
    margin-bottom: 2rem;
}



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

    .product-tegus img,
    .product-tegus2 img {
        max-width: 31rem;
        margin-bottom: 0;
    }

    .product_tegus_desc,
    .product_tegus_desc2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - (31rem + 3rem));
        margin-left: 3rem;
    }

}



.leftarea {
    max-width: 54rem;
}

@media screen and (max-width:820px) {
    .leftarea {
        max-width: inherit;
        padding: 0 3rem;
    }
}

.rightarea {
    max-width: 86rem;
    width: 100%;
    height: auto;
    margin-left: 10rem;
    position: relative;
}

@media screen and (max-width:820px) {
    .rightarea {
        max-width: inherit;
        margin-left: 0;
        position: static;
    }

}

.Coord-btn {
    position: absolute;
    right: 0;
    bottom: 0;
}

@media screen and (max-width:820px) {
    .Coord-btn {
        display: none;
    }
}

.Coord-btn img {
    width: 17.2rem;
    height: auto;
}

.leftarea2 {
    order: 1;
    max-width: 86rem;
    width: 100%;
    position: relative;
}

@media screen and (max-width:820px) {
    .leftarea2 {
        position: static;
        max-width: inherit;
    }
}

.rightarea2 {
    order: 2;
    max-width: 54rem;
    margin-left: 10rem;
}

@media screen and (max-width:820px) {
    .rightarea2 {
        max-width: inherit;
        margin-left: 0;
    }
}




.Coord-btn2 {
    position: absolute;
    left: 0;
    bottom: 0;
}

.Coord-btn2 img {
    width: 17.2rem;
    height: auto;
}

@media screen and (max-width:820px) {
    .Coord-btn2 {
        display: none;
    }
}


.tegus-btn,
.lineup-btn,.tegus-btn-c {
    background-color: #000;
    width: 30rem;
    font-size: 1.8rem;
    padding: 2rem;
    margin: auto;
    text-align: center;
    color: #FFF ;
    display: block;
    position: relative;
    letter-spacing: 0.3rem;
}

.tegus-btn {
    color: #fff !important;
}


.tegus-btn::after,
.lineup-btn::after {
    content: '';
    border: 0;
    border-top: solid .2rem #fff;
    border-right: solid .2rem #fff;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 2.8rem;
    right: 2rem;
    transform: translateY(-50%) rotate(45deg);
}

.lineup-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46rem;
    height: 9rem;
    padding: 0;
    font-size: 2.4rem;
    letter-spacing: .05em;
    color: #fff !important;
}

.lineup-btn::after {
    top: 4.3rem;
}

.tegus-btn:link,
.tegus-btn:hover,
.tegus-btn:focus {
    color: #fff;
}

.lineup {
    padding-bottom: 20rem;
}

.lineup img {
    width: 100%;
    margin-bottom: 6rem;
}

.lineup-ttl {
    width: 100%;
    background-color: #e0edc4;
    padding: 3.5rem;
    font-size: 3.4rem;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: bold;
    text-align: center;
}

.topbtn {
    position: fixed;
    bottom: 30px;
    right: 10px;
    font-weight: bold;
    padding: 0.7em;
    text-align: center;
    transition: 0.3s;
}

.topbtn img {
    width: 13rem;
    height: 13rem;
}

.tegus-btn:link,
.tegus-btn:hover,
.tegus-btn:focus {
    color: #fff;
}


.sp_image-main,
.sp_image-sub{
    display: none;
}

.tegus-btn-c {
    display: none;
}

@media screen and (max-width:820px) {
    .lp_style .pc_visual {
        display: none;
    }
    .box-sp {
        padding: 0 3.5rem;
    }

    .sp_image-main,
    .sp_image-sub{
        display: block;
        margin-bottom: 6rem;
    }
    .tegus-btn-c {
        display: block;
        margin-bottom: 1rem;
        border: 2px solid #0abfd6;
        background: #fff;
        color: #0abfd6 !important;
    }
    .tegus-btn-c::after {
        border-top: solid .2rem #0abfd6;
        border-right: solid .2rem #0abfd6;
    }

    .slick-list {
        padding: 0 30rem 0 0 !important;
    }
    .slick-list img {
      width: 100%;
    }

}


@media screen and (max-width:820px) {
    .tegus-btn ,.tegus-btn-c  {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
        height: 6rem;
        font-size: 2.2rem;
    }
    .tegus-btn-c {
        font-size: 2rem;
        letter-spacing: .05em;
    }
}


.fadein {
    opacity: 0.1;
    transform: translate(0, 50px);
    transition: all 600ms;
  }
  
  .fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
  }


  .visual_stage {
    position: relative;
    height: 100%;
  }



#content01 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 54rem;
}

#content01 .visual_stage img:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 42rem;
}


#content02 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 48rem;
}

#content02 .visual_stage img:nth-of-type(2) {
    position: absolute;
    top: 18rem;
    right: 4rem;
    width: 36rem;
}

#content02 .visual_stage img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32rem;
}

/* -------------------------------- */

#content03 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 48rem;
}

#content03 .visual_stage img:nth-of-type(2) {
    position: absolute;
    top: 18rem;
    left: 4rem;
    width: 36rem;
}

#content03 .visual_stage img:nth-of-type(3) {
    position: absolute;
    bottom: 14rem;
    left: 33rem;
    width: 30rem;
}

#content03 .visual_stage img:nth-of-type(4) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30rem;
}

/* -------------------------------- */

#content04 .visual_stage a:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 48rem;
}

#content04 .visual_stage a:nth-of-type(2) {
    position: absolute;
    top: 24rem;
    right: 4rem;
    width: 36rem;
}

#content04 .visual_stage a:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    right: 17rem;
    width: 46rem;
}

/* -------------------------------- */

#content05 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 48rem;
}

#content05 .visual_stage img:nth-of-type(2) {
    position: absolute;
    top: 18rem;
    left: 4rem;
    width: 36rem;
}

#content05 .visual_stage img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    width: 36rem;
    right: 20rem;
}

/* -------------------------------- */

#content06 .visual_stage img:nth-of-type(1) {
    position: absolute;
    width: 43rem;
    top: 0;
    left: 0;
}

#content06 .visual_stage img:nth-of-type(2) {
    position: absolute;
    width: 30rem;
    top: 9rem;
    right: 14.7rem;
}

#content06 .visual_stage img:nth-of-type(3) {
    position: absolute;
    width: 37rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#content06 .visual_stage img:nth-of-type(4) {
    position: absolute;
    width: 30rem;
    bottom: 5rem;
    right: 0;
}

/* -------------------------------- */
#content07 .visual_stage img:nth-of-type(1) {
    position: absolute;
    width: 60rem;
    top: 0;
    right: 0;
}

#content07 .visual_stage img:nth-of-type(2) {
    position: absolute;
    width: 46rem;
    top: 40.6rem;
    left: 4rem;
}

#content07 .visual_stage img:nth-of-type(3) {
    position: absolute;
    width: 46rem;
    bottom: 0;
    left: 18rem;
}

/* -------------------------------- */
#content08 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 48rem;
}

#content08 .visual_stage img:nth-of-type(2) {
    position: absolute;
    bottom: 26rem;
    right: 4rem;
    width: 44rem;
}

#content08 .visual_stage img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    left: 20.6rem;
    width: 40rem;
}

/* -------------------------------- */


#content09 .visual_stage img:nth-of-type(1) {
    position: absolute;
    top: 0;
    right: 0;
    width: 48rem;
}

#content09 .visual_stage img:nth-of-type(2) {
    position: absolute;
    top: 20rem;
    left: 2.8rem;
    width: 37.5rem;
}

#content09 .visual_stage img:nth-of-type(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 27rem;
}

#content09 .visual_stage img:nth-of-type(4) {
    position: absolute;
    bottom: 0;
    left: 33rem;
    width: 31rem;
}

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

    .visual_stage {
        display: none;
    }
}

.brandname {
    position: relative;
}

@media screen and (max-width:820px) {
    .brandname {
        position: relative;
        padding: 0 6.5rem;
    }
    .brandname .right-txt, 
    .brandname .left-txt  {
        text-align: right;
        letter-spacing: normal;
    }
}

.left-num , .right-num {
    position: absolute;
    top: 0;
}



.left-num {
    left: 0;
}

.right-num {
    right: 0;
}

@media screen and (max-width:820px) {
    .left-num , .right-num {
        top: 0;
        left: 6.5rem;
    }
}


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

    .right-txt,
    .left-txt {
        position: static;
        top: 0;
        right: 0;
    }
}


#content-group section:nth-of-type(odd) .sp_image-main {
    border: 2px solid #000;
}

#content-group section:nth-of-type(even) .sp_image-main {
    border: 2px solid #bebebe;
}




/* add */

.slider .slick-prev {
    left: 2rem !important;
    transform: translateX(-50%);
}

.slider  .slick-next {
    right: calc((100vw - 50%) - 50%) !important;
}

@media screen and (max-width:820px) {
    .slider  .slick-next {
        right: 0 !important;
    }
}

.slider  .slick-prev,.slider  .slick-next {
    width: 6rem;
    height: 6rem;
    background: #fff;
    border:1px solid #333333;
    border-radius: 50%;
}

@media screen and (max-width:820px) {
    .slider  .slick-prev,.slider  .slick-next {
        display: none !important;
    }

}

.slick-prev:before, .slick-next:before {
    color: #333333;
    font-size: 3rem;
}

.slider  .slick-prev:before {
    content:"\0ab";
}

.slider  .slick-next:before {
    content:"\0bb";
}


@media screen and (min-width:821px) {
    .sbttl , .right-sbttl {
        font-weight: bold;
    }
}