.main-area {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #EAE5E1;
    color: #846F6C;
  }

  .main-area img {
    width: 100%;
    height: auto;
  }

  .main-area .sp_only {
    display: block;
  }

  .main-area .pc_only {
    display: none;
  }

  .main-area .sec {
    width: 100%;
    position: relative;
  }

  .main-area .flex_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .main-area .grid_box {
    display: grid;
  }

  .main-area .position_box {
    position: relative;
  }


/************** js **************/
  .main-area .js_imgFadeIn {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateY(50px);
  }

  .main-area .imgAnimated{
    opacity: 1;
    transform: translateY(0);
  }

  /*** slick縦にならないように ***/
  .top__slider {
    opacity: 0;
    transition: opacity .3s linear;
  }

  .slick-initialized {
    opacity : 1 ;
  }


/************** common **************/
  /*** font ***/
  .mv_text,
  .sec01 h2,
  .sec_text,
  .main-area h3,
  .main-area .look__caption .tag-list li a {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .main-area .sec_btn a {
    font-family: "fot-tsukuardgothic-std", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal;
  }

  /* まる */
  .main-area .mv .run{
    animation: rotate-anime 17s  linear infinite;
  }

  .main-area .mv .ttl01 {
    width: calc(170* (100vw /375));
    position: absolute;
    top: calc(300* (100vw /375));
    left: calc(-22* (100vw /375));
    z-index: 15;
  }

  .main-area .secHome_about-ticker {
    left: 0;
  }

  .main-area .secHome_about-ticker-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .sec_text {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: center;
  }

  /*** h3 ***/
  .main-area h3 {
    margin: 0 auto calc(13* (100vw /375));
    font-size: calc(29* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: center;
  }

/************** before,after **************/
  .variation_box_bg::before,
  .sec01_bg::before,
  .sec01_bg::after {
    height: calc(37* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
  }

  .variation_box_bg .flex_box,
  .sec01_bg h2,
  .sec02 h3 {
    position: relative;
    z-index: 3;
  }

  .variation_box_bg::before {
    background-image: url(../img/ttl01.svg);
    width: calc(280* (100vw /375));
    top: -4%;
    left: -1%;
  }

  .sec01_bg::before {
    background-image: url(../img/ttl02.svg);
    width: calc(257* (100vw /375));
    top: -1.6%;
    left: auto;
    right: 0;
  }

  .sec01_bg::after {
    background-image: url(../img/ttl03.svg);
    width: calc(356* (100vw /375));
    top: auto;
    bottom: -8.4%;
    left: -1.6%;
  }

  
/************** mv **************/
  .main-area .mv {
    margin: 0 auto calc(33* (100vw /375));
  }

  .main-area .top__slider--wrapper {
    margin: calc(15 * (100vw / 375)) 0 calc(56* (100vw /375));
    width: calc(375 * (100vw / 375));
  }

  .main-area .top__slider img {
    margin: 0;
    height: calc(435 * (100vw / 375));
    width: auto;
  }

  .main-area .top__slider a,
  .main-area .top__slider .ovh {
    max-width: calc(350 * (100vw / 375));
  }

  .main-area .top__slider li {
    max-width: calc(350 * (100vw / 375)) !important;
    margin: 0 calc(20* (100vw /375));
  }

  .main-area .mv_text {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.025em;
    line-height: 2;
    text-align: center;
  }


/************** item_box **************/
  .main-area .item_box {
    margin: 0 auto calc(80* (100vw /375));
  }

  .main-area .fv__change {
    margin: 0 auto;
    width: calc(328* (100vw /375));
    gap: calc(10* (100vw /375)) 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .main-area .fv__change-img {
    width: calc(100* (100vw /375));
  }

  .main-area .fv__change-img:nth-child(4) {
    margin-left: calc(57* (100vw /375));
  }

  .main-area .fv__change-img:nth-child(5) {
    margin: 0 calc(57* (100vw /375)) 0 auto;
  }


/************** variation_box **************/
  .variation_box {
    margin: 0 auto calc(73* (100vw /375));
    width: calc(340* (100vw /375));
  }

  .variation_box ul {
    gap: calc(20* (100vw /375)) 0;
  }

  .variation_box ul li {
    width: calc(160* (100vw /375));
  }
  

/************** sec01 **************/
  .sec01 {
    margin: 0 auto calc(84* (100vw /375));
  }

  .sec01 h2 {
    margin: 0 auto calc(21* (100vw /375));
    font-size: calc(24* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: center;
  }

  /*** box01 ***/
  .sec01 .box01 {
    margin: 0 auto calc(43* (100vw /375));
  }

  .sec01 .img01 {
    margin: 0 auto calc(22* (100vw /375));
    width: calc(250* (100vw /375));
  }

  /*** box02 ***/
  .sec01 .box02 {
    margin: 0 auto calc(50* (100vw /375));
    width: calc(350* (100vw /375));
  }

  .sec01 .box02 .sub_box {
    margin-bottom: calc(23* (100vw /375));
    grid-template-columns: calc(143* (100vw /375)) auto;
    grid-template-rows: calc(346* (100vw /375)) auto;
  }

  .sec01 .box02 .img02 {
    width: calc(302* (100vw /375));
    grid-column: 1/3;
    grid-row: 1/3
  }

  .sec01 .box02 .img03 {
    width: calc(208* (100vw /375));
    grid-column: 2/3;
    grid-row: 2/3
  }

  .sec01 .box02 .sec_text {
    margin: calc(23* (100vw /375)) auto 0;
    width: max-content;
    grid-column: 1/3;
    grid-row: 3/4;
  }

/************** sec02 **************/
  .sec02 {
    margin: 0 auto calc(106* (100vw /375));
  }

  .sec02 h3,
  .sec02 .look__caption .tag-list li a {
    color: #8F91AC;
  }

  .sec02 .look__slider[data-slide] .swiper-pagination-bullet {
    border: 1px solid #8F91AC;
  }

  .sec02 .look__slider[data-slide] .swiper-pagination-bullet-active,
  .sec02 .swiper-pagination-bullet-active::before,
  .sec02 .swiper-pagination-bullet-active {
    background-color: #8F91AC;
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto calc(106* (100vw /375));
  }

  .sec03 h3,
  .sec03 .look__caption .tag-list li a {
    color: #9F8D6C;
  }

  .sec03 .look__slider[data-slide] .swiper-pagination-bullet {
    border: 1px solid #9F8D6C;
  }

  .sec03 .look__slider[data-slide] .swiper-pagination-bullet-active,
  .sec03 .swiper-pagination-bullet-active::before,
  .sec03 .swiper-pagination-bullet-active {
    background-color: #9F8D6C;
  }


/************** sec04 **************/
  .sec04 {
    margin: 0 auto calc(106* (100vw /375));
  }

  .sec04 h3 {
    color: #AC9BB7;
  }

  .sec04 h3,
  .sec04 .look__caption .tag-list li a {
    color: #AC9BB7;
  }

  .sec04 .look__slider[data-slide] .swiper-pagination-bullet {
    border: 1px solid #AC9BB7;
  }

  .sec04 .look__slider[data-slide] .swiper-pagination-bullet-active,
  .sec04 .swiper-pagination-bullet-active::before,
  .sec04 .swiper-pagination-bullet-active {
    background-color: #AC9BB7;
  }


/************** sec05 **************/
  .sec05 {
    margin: 0 auto calc(106* (100vw /375));
  }

  .sec05 h3 {
    color: #81858E;
  }

  .sec05 h3,
  .sec05 .look__caption .tag-list li a {
    color: #81858E;
  }

  .sec05 .look__slider[data-slide] .swiper-pagination-bullet {
    border: 1px solid #81858E;
  }

  .sec05 .look__slider[data-slide] .swiper-pagination-bullet-active,
  .sec05 .swiper-pagination-bullet-active::before,
  .sec05 .swiper-pagination-bullet-active {
    background-color: #81858E;
  }


/************** sec06 **************/
  .sec06 {
    margin: 0 auto calc(116* (100vw /375));
  }

  .sec06 h3 {
    color: #CE9090;
  }

  .sec06 h3,
  .sec06 .look__caption .tag-list li a {
    color: #CE9090;
  }

  .sec06 .look__slider[data-slide] .swiper-pagination-bullet {
    border: 1px solid #CE9090;
  }

  .sec06 .look__slider[data-slide] .swiper-pagination-bullet-active,
  .sec06 .swiper-pagination-bullet-active::before,
  .sec06 .swiper-pagination-bullet-active {
    background-color: #CE9090;
  }


/************** btn **************/
  .main-area .sec_btn {
    margin: 0 auto;
    padding: 0 0 calc(100* (100vw /375));
  }

  .main-area .sec_btn a {
    margin: 0 auto;
    font-size: calc(16* (100vw /375));
    letter-spacing: 0.1em;
    font-weight: 700;
    width: calc(280* (100vw /375));
    max-width: calc(280* (100vw /375));
    height: calc(60* (100vw /375));
    max-height: calc(60* (100vw /375));
    background-color: #846F6C;
    font-family:var(--noto-sans);
    color: #fff;
    border-radius: 15px;
    border: #846F6C 2px solid;
  }

  .main-area .sec_btn a:last-child {
    margin-top: calc(25* (100vw /375));
    background-color: transparent;
    color: #846F6C;
  }
  


/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {

  .main-area .sp_only {
    display: none;
  }

  .main-area .pc_only {
    display: block;
  }

  .main-area .sec {
    width: min(100%, 124rem);
    padding: 0 2rem;
  }

/************** js **************/
  .variation_box ul li img  {
    border: 1px solid white
  }

  .variation_box ul li:hover img {
    border: solid 1px #846F6C;
  }
  

/************** common **************/
  /* まる */
  .main-area .mv_ttl {
    margin: 0 auto;
    width: 85.3rem;
    position: relative;
    top: -50rem;
  }

  .main-area .mv .ttl01 {
    width: 24rem;
    position: absolute;
    top: 0;
    left: 0;
  }

  .main-area .secHome_about-ticker-row.__btm {
    margin-top: 2.4rem;
  }

  .main-area .secHome_about-ticker-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .sec_text {
    font-size: 1.6rem;
  }

  /*** h3 ***/
  .main-area h3 {
    margin: 0 auto 2.1rem;
    font-size: 4rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: center;
  }


/************** mv **************/
  .main-area .mv {
    margin: 0 auto 3.4rem;
  }

  .main-area .mv .top__slider--wrapper {
    margin: 1.5rem 0 7.2rem;
    width: 100%;
  }

  .main-area .mv .top__slider img {
    height: 58.8rem;
    width: auto;
  }

  .main-area .mv .top__slider li {
    max-width: 47.2rem !important;
    margin: 0 2.5rem;
  }

  .main-area .mv .mv_text {
    font-size: 1.6rem;
  }

  .main-area .mv .slick-initialized .slick-slide{
    width: auto !important;
  }

  .main-area .mv .slick-slide img{
    width: auto !important;
    height: 58.8rem;
  }

  .main-area .mv .slick-slider .slick-track, .slick-slider .slick-list{
    height: 58.8rem;
  }

/************** before,after **************/
  .variation_box_bg::before,
  .sec01_bg::before,
  .sec01_bg::after {
    height: 7.7rem;
  }

  .variation_box_bg::before {
    width: 61.5rem;
    top: -11%;
    left: 1.4%;
  }

  .sec01_bg::before {
    width: 56.3rem;
    top: -3.4%;
    left: auto;
    right: 1.5%;
  }

  .sec01_bg::after {
    width: 77.7rem;
    top: auto;
    bottom: -14.8%;
    left: 2%;
  }

/************** item_box **************/
  .main-area .item_box {
    margin: 0 auto 18rem;
  }

  .main-area .fv__change {
    margin: 0 auto;
    width: min(100%, 124rem);
    padding: 0 2rem;
    gap: 0;
  }

  .main-area .fv__change-img {
    width: 23.2rem;
  }

  .main-area .fv__change-img:nth-child(4) {
    margin-left: 0;
  }

  .main-area .fv__change-img:nth-child(5) {
    margin: 0;
  }


/************** variation_box **************/
  .variation_box_bg {
    margin: 0 auto;
    width: min(100%, 144rem);
    padding: 0 2rem;
  }

  .variation_box {
    margin: 0 auto 20.6rem;
    width: min(100%, 120rem);
  }

  .variation_box ul {
    gap: 4rem 0;
  }

  .variation_box ul li {
    width: 27rem;
  }


/************** sec01 **************/
  .sec01_bg {
    margin: 0 auto;
    width: min(100%, 144rem);
    padding: 0 2rem;
  }

  .sec01 {
    margin: 0 auto 20.1rem;
  }

  .sec01 h2 {
    margin: 0 auto 3rem;
    font-size: 3rem;
  }

  /*** box01 ***/
  .sec01 .box01 {
    margin: 0 auto 5.3rem;
  }

  .sec01 .img01 {
    margin: 0 auto 2.1rem;
    width: 36rem;
  }

  /*** box02 ***/
  .sec01 .box02 {
    margin: 0 auto 5.0rem;
    width: 88rem;
  }

  .sec01 .box02 .sub_box {
    margin-bottom: 2.3rem;
    grid-template-columns: 44.9rem 5rem auto;
    grid-template-rows: 40rem 34.1rem auto;
  }

  .sec01 .box02 .img02 {
    width: 54rem;
    grid-column: 1/4;
    grid-row: 1/3
  }

  .sec01 .box02 .img03 {
    width: 38rem;
    grid-column: 3/4;
    grid-row: 2/4;
  }

  .sec01 .box02 .sec_text {
    margin: 0 0 0 auto;
    width: max-content;
    grid-column: 1/2;
    grid-row: 3/4;
  }


/************** sec02 **************/
  .sec02 {
    margin: 0 auto 14.9rem;
  }

/************** sec03 **************/
  .sec03 {
    margin: 0 auto 8.8rem;
    width: 61rem;
    height: 100rem;
    overflow: hidden;
  }

  .main-area .sec03 .look__slider {
    width: 61rem;
  }

/************** sec04 **************/
  .sec04 {
    margin: 0 auto 13.8rem;
  }

/************** sec05 **************/
  .sec05 {
    margin: 0 auto 8.8rem;
    width: 61rem;
    height: 100rem;
    overflow: hidden;
  }

  .main-area .sec05 .look__slider {
    width: 61rem;
  }

/************** sec06 **************/
  .sec06 {
    margin: 0 auto 14.4rem;
  }

/************** btn **************/
  .main-area .sec_btn {
    margin: 0 auto;
    padding: 0 0 10.0rem;
    width: 55rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .main-area .sec_btn a {
    margin: 0;
    font-size: 1.6rem;
    width: 24.0rem;
    max-width: 24.0rem;
    height: 6.0rem;
    max-height: 6.0rem;
    border-radius: 15px;
    transition: all .1s linear;
  }

  .main-area .sec_btn a:hover {
    background-color: transparent;
    color: #846F6C;
    opacity: 1;
  }

  .main-area .sec_btn a:last-child {
    margin-top: 0;
  }

  .main-area .sec_btn a:last-child:hover {
    background-color: #846F6C;
    color: #fff;
    opacity: 1;
  }

  
}
/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}




/* ===============================================### 
swiper箇所
###=============================================== */
.main-area .content-inner:not(.content-inner--fw) {
  max-width: 100%;
  margin-inline: auto;
}
.main-area .content-inner--fw:last-of-type .inner {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  height: 90rem;
}
.main-area .content-inner--fw:last-of-type .inner {
  padding-block-end: 4.5rem;
}
.main-area .content-inner--fw:last-of-type .inner > * {
  width: 100%;
}
.main-area .content-inner--fw + *:not(:first-of-type) {
  --mtop-content: 1rem;
}
.main-area .look__slider {
  pointer-events: all;
  margin: 0 auto;
  width: calc(350* (100vw /375));
}
.main-area .look__slider[data-slide] {
  overflow: visible;
}
.main-area .look__slider[data-slide] .swiper-wrapper {
  margin: 0 auto;
  padding-inline-start: 0;
}
.main-area .look__caption[data-slide] {
  overflow: visible;
}
.main-area .look__caption[data-slide] .swiper-wrapper {
  margin: 0 auto;
  padding-inline-start: 0;
}


/*** スライダーtax ***/
.main-area .look__slider-tag {
  margin: calc(19* (100vw /375)) 0 0 0;
}
.main-area .look__slider-tag .swiper-slide {
    position: relative;
    z-index: 0;
    visibility: hidden;
  }
.main-area .look__slider-tag .swiper-slide.swiper-slide-active {
    display: block;
    z-index: 5;
    visibility: visible;
    backface-visibility: visible;
  }
.main-area .look__slider-tag .tag-list {
  --c-gap: 1.2em;
}
.main-area .look__slider-tag .tag-list li {
  pointer-events: all;
}
.main-area .look__caption .tag-list {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(10* (100vw /375)) 0;
}
.main-area .look__caption .tag-list li a {
  font-size: calc(14* (100vw /375));
  letter-spacing: 0.025em;
  line-height: 1.75;
  align-items: center;
  display: flex;
  text-align: center;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}


@media screen and (min-width: 768px) {
  .main-area .look__slider {
    margin: 0;
    width: 100%;
  }
  .main-area .content-inner:not(.content-inner--fw) {
    max-width: 100rem;
    margin-inline: auto;
  }
  .main-area .content-inner--fw:last-of-type .inner {
    padding-block: 6rem 4.6rem;
  }
  .main-area .content-inner--fw + *:not(:first-of-type) {
    --mtop-content: 10rem;
  }
  .main-area .look__slider[data-slide] .swiper-wrapper {
    padding-inline-start: 31vw;
  }
  .main-area .sec03 .look__slider[data-slide] .swiper-wrapper,
  .main-area .sec05 .look__slider[data-slide] .swiper-wrapper {
    padding-inline-start: 0;
  }
  .main-area .look__slider-tag {
    margin: 2.7rem 0 0 0;
  }
  .main-area .look__caption .tag-list { 
    gap: .4rem 0;
  }
  .main-area .look__caption .tag-list li a {
    font-size: 1.6rem;
  }
}

/*** dots ***/
.main-area .swiper-pagination {
  bottom: calc(-165* (100vw /375));
}

.main-area .swiper-pagination-bullet {
  background-color: transparent;
  position: relative;
  border-radius: 4em;
  overflow: hidden;
  opacity: 1;
  transition: background-color 0.3s ease;
  width: 2rem;
  height: 2rem;
  pointer-events: all;
  margin: 0;
}
.main-area .swiper-pagination-bullet:not(:last-of-type) {
  margin-right: calc(12* (100vw /375));
}
@media screen and (min-width: 768px) {
  .main-area .swiper-pagination {
    bottom: -13.3rem;
  }
  .main-area .swiper-pagination-bullet:not(:last-of-type) {
    margin-right: 1.2rem;
  }
  .main-area .sec03 .swiper-pagination,
  .main-area .sec05 .swiper-pagination {
    bottom: -13.5rem;
  }  
}
  .main-area .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: auto;
  }
.main-area .swiper-pagination-bullet::before {
  content: "";
  background-color: transparent;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 0;
}

@media screen and (max-width: 767px) {
  .main-area .swiper-pagination-bullet-active {
    background-color: #535353;
  }
}

.main-area .swiper-pagination-bullet:hover {
  opacity: 0.7;
}