@charset "UTF-8";

.main_inner {
  overflow-x: hidden;
}

/* ============================================================================
for small viewport
==============================================================================*/
@media screen and (max-width: 767px) {
  .p-contents {
    padding: 0;
  }
  .p-section {
    padding: 0 20px;
  }
  .p-productBlock__imageBox {
    display: grid;
  }
  .p-productBlock__logo{
    width: 30%;
    margin: auto;
  }
  .p-firstView__leadText{
    font-size: 24px;
  }
  .p-firstView__lead_sub_Text{
    font-size: 20px;
  }
  .p-section{
    font-size: 10px;
  }
  .p-productBlock {
    row-gap: 20px;
  }

  .p-firstView_image {
    max-width: 750px;
  }
  .p-productBlock_wrapper {
    padding-inline: 40px;
  }
  .p-productBlock_wrapper > .p-productBlock__link {
    margin-inline: initial;
  }
  .topics__container {
    padding-block-start: 0;
    width: calc(710*(100vw / 750));
    margin: 0 auto;
    padding-bottom: calc(20*(100vw / 750));
  }
  #breadcrumbs {
    font-family: var(--font-jp);
    max-width: initial;
    padding: 1rem 0 0.8rem;
    width: auto;
    margin-inline: auto;
    max-width: initial;
    padding: 1rem 0 0.8rem;
  }
}

/* ============================================================================
for large viewport
==============================================================================*/
@media screen and (min-width: 768px), print {
  #breadcrumbs {
    width: 140rem;
  }
  .contents_inner {
    width: 990px;
    margin-inline: auto;
  }
  .p-productBlock__image-02{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .p-button:hover,
  .p-linkArea > a:hover {
    opacity: 0.6;
  }
}

/* ============================================================================
credit
==============================================================================*/
.credit {
  font-size: 1.6rem;
  font-family: var(--font-f37-ginger);
}
.credit ul li a {
  display: flex;
  justify-content: space-between;
  gap: 0 0;
}
.credit .Buybtn img {
  width: 3.8rem;
}
@media screen and (max-width: 767px) {
  .credit {
    font-size: calc(14 * (100vw / 390));
  }
  .credit ul li {
    gap: 0 0;
  }
  .credit ul li span {
    width: calc(36 * (100vw / 390));
  }
}

/* ============================================================================
p-firstView
==============================================================================*/

.p-firstView .p-firstView_image {
  width: 140rem;
  margin: 0 auto;
}
.p-firstView_txt {
  margin-top: 7.6rem;
}
.p-firstView_txt .ttlArea {
  font-size: 3.2rem;
  color: #000000;
  text-align: center;
  font-family: var(--font-f37-ginger);
  font-weight: bold;
}
.p-firstView_txt .txtBox {
  font-size: 2rem;
  width: 84rem;
  margin: 2.8rem auto 0;
  line-height: 1.7;
  text-align: left;
  font-family: var(--font-yugothic);
}
@media screen and (max-width: 767px) {
  .p-firstView .p-firstView_image {
    width: calc(390 * (100vw / 390));
  }
  .p-firstView_txt {
    margin-top: calc(33 * (100vw / 390));
  }
  .p-firstView_txt .ttlArea {
    font-size: calc(18 * (100vw / 390));
  }
  .p-firstView_txt .txtBox {
    font-size: calc(16*(100vw / 390));
    width: calc(356*(100vw / 390));
    margin: calc(18*(100vw / 390)) auto 0;
  }
}


/* ============================================================================
contents01
==============================================================================*/
.contents01 {
  margin-top: 15rem;
}
.contents01 .model_img.model01 {
  width: 50rem;
  margin: 0 0 0 19.5rem;
}
.contents01 .flexArea01 {
  width: 60rem;
  margin: 2.6rem auto 0;
}
.contents01 .flexArea01 .box1 {
  width: 35rem;
}
.contents01 .flexArea01 .box2 {
  width: 30rem;
  margin-left: auto;
  margin-top: -22rem;
}
.contents01 .model_img.model04 {
  width: 40rem;
  margin: 2.4rem 19.5rem 0 0;
  margin-left: auto;
}
.contents01 .flexArea02 {
  width: 60rem;
  margin: 2.4rem auto 0;
}
.contents01 .flexArea02 .box1 {
  width: 40rem;
}
.contents01 .flexArea02 .box2 {
  width: 30rem;
  margin-left: auto;
  margin-top: -26rem;
}
.credit.credit01 {
  width: 31.1rem;
  margin: 2.5rem auto 0;
}
.credit.credit01 ul li:nth-of-type(2) {
  margin-top: 1.5rem;
}
.credit.credit01 ul li:nth-of-type(3) {
  margin-top: 1.4rem;
}
@media screen and (max-width: 767px) {
  .contents01 {
    margin-top: calc(82 * (100vw / 390));
  }
  .contents01 .model_img.model01 {
    width: calc(295 * (100vw / 390));
    margin: 0 0 0 calc(18 * (100vw / 390));
  }
  .contents01 .flexArea01 {
    width: calc(354 * (100vw / 390));
    margin: calc(15 * (100vw / 390)) auto 0;
  }
  .contents01 .flexArea01 .box1 {
    width: calc(206 * (100vw / 390));
  }
  .contents01 .flexArea01 .box2 {
    width: calc(176 * (100vw / 390));
    margin-top: calc(-129 * (100vw / 390));
  }
  .contents01 .model_img.model04 {
    width: calc(236*(100vw / 390));
    margin: calc(15*(100vw / 390)) calc(18*(100vw / 390)) 0 0;
    margin-left: auto;
  }
  .contents01 .flexArea02 {
    width: calc(354 * (100vw / 390));
    margin: calc(14 * (100vw / 390)) auto 0;
  }
  .contents01 .flexArea02 .box1 {
    width: calc(236 * (100vw / 390));
  }
  .contents01 .flexArea02 .box2 {
    width: calc(176 * (100vw / 390));
    margin-top: calc(-155 * (100vw / 390));
  }
  .credit.credit01 {
    width: calc(267 * (100vw / 390));
    margin: calc(23 * (100vw / 390)) auto 0;
  }
  .credit.credit01 ul li:nth-of-type(2) {
    margin-top: calc(14 * (100vw / 390));
  }
  .credit.credit01 ul li:nth-of-type(3) {
    margin-top: calc(14 * (100vw / 390));
  }
}


/* ============================================================================
contents02
==============================================================================*/
.contents02 {
  margin-top: 10.2rem;
}
.contents02 .model_img.model07 {
  width: 50rem;
  margin: 0 19.5rem 0 0;
  margin-left: auto;
}
.contents02 .model_img.model08 {
  width: 60rem;
  margin: 2.7rem auto 0;
}
.contents02 .flexArea03 {
  width: 60rem;
  margin: 2.5rem auto 0;
}
.contents02 .flexArea03 .box1 {
  width: 40rem;
  margin-left: auto;
}
.contents02 .flexArea03 .box2 {
  width: 30rem;
  margin-top: -19.5rem;
}
.credit.credit02 {
  width: 31.1rem;
  margin: 2.7rem auto 0;
}
.credit.credit02 ul li:nth-of-type(2) {
  margin-top: 1.5rem;
}
.credit.credit02 ul li:nth-of-type(3) {
  margin-top: 1.4rem;
}

@media screen and (max-width: 767px) {
  .contents02 {
    margin-top: calc(81 * (100vw / 390));
  }
  .contents02 .model_img.model07 {
    width: calc(295*(100vw / 390));
    margin: 0 calc(18*(100vw / 390)) 0 0;
    margin-left: auto;
  }
  .contents02 .model_img.model08 {
    width: calc(354 * (100vw / 390));
    margin: calc(13 * (100vw / 390)) auto 0;
  }
  .contents02 .flexArea03 {
    width: calc(354 * (100vw / 390));
    margin: calc(15 * (100vw / 390)) auto 0;
  }
  .contents02 .flexArea03 .box1 {
    width: calc(236 * (100vw / 390));
    margin-left: auto;
  }
  .contents02 .flexArea03 .box2 {
    width: calc(178 * (100vw / 390));
    margin-top: calc(-114 * (100vw / 390));
  }
  .credit.credit02 {
    width: calc(267 * (100vw / 390));
    margin: calc(22 * (100vw / 390)) auto 0;
  }
  .credit.credit02 ul li:nth-of-type(2) {
    margin-top: calc(14 * (100vw / 390));
  }
  .credit.credit02 ul li:nth-of-type(3) {
    margin-top: calc(14 * (100vw / 390));
  }
  
}


/* ============================================================================
contents03
==============================================================================*/
.contents03 {
  margin-top: 10.2rem;
}
.contents03 .model_img.model11 {
  width: 50rem;
  margin-left: 19.5rem;
}
.contents03 .model_img.model12 {
  width: 60.1rem;
  margin: 2.4rem auto 0;
}
.contents03 .flexArea04 {
  width: 60rem;
  margin: 2.5rem auto 0;
}
.contents03 .flexArea04 .box1 {
  width: 40rem;
  margin-left: auto;
}
.contents03 .flexArea04 .box2 {
  width: 30rem;
  margin-top: -25rem;
}
.contents03 .model_img.model15 {
  width: 40rem;
  margin: 2.4rem 19.5rem 0 0;
  margin-left: auto;
}
.credit.credit03 {
  width: 31.6rem;
  margin: 2.9rem auto 0;
}

@media screen and (max-width: 767px) {
  .contents03 {
    margin-top: calc(80 * (100vw / 390));
  }
  .contents03 .model_img.model11 {
    width: calc(295 * (100vw / 390));
    margin: 0 0 0 calc(18 * (100vw / 390));
  }
  .contents03 .model_img.model12 {
    width: calc(355 * (100vw / 390));
    margin: calc(15 * (100vw / 390)) auto 0;
  }
  .contents03 .flexArea04 {
    width: calc(354 * (100vw / 390));
    margin: calc(14 * (100vw / 390)) auto 0;
  }
  .contents03 .flexArea04 .box1 {
    width: calc(236 * (100vw / 390));
    margin-left: auto;
  }
  .contents03 .flexArea04 .box2 {
    width: calc(178 * (100vw / 390));
    margin-top: calc(-148 * (100vw / 390));
  }
  .contents03 .model_img.model15 {
    width: calc(236*(100vw / 390));
    margin: calc(14*(100vw / 390)) calc(18*(100vw / 390)) 0 0;
    margin-left: auto;
  }
  .credit.credit03 {
    width: calc(267 * (100vw / 390));
    margin: calc(22 * (100vw / 390)) auto 0;
  }
  
}


/* ============================================================================
contents04
==============================================================================*/
.contents04 {
  margin-top: 10.2rem;
}
.model_img.model16 {
  width: 50rem;
  margin: 0 19.5rem 0 0;
  margin-left: auto;
}
.contents04 .flexArea05 {
  width: 60rem;
  margin: 2.5rem auto 0;
}
.contents04 .flexArea05 .box1 {
  width: 40rem;
}
.contents04 .flexArea05 .box2 {
  width: 30rem;
  margin-left: auto;
  margin-top: -18.8rem;
}
.model_img.model19 {
  width: 40rem;
  margin: 2.4rem auto 0;
}
.credit.credit04 {
  width: 31.1rem;
  margin: 3rem auto 0;
}
.credit.credit04 ul li:nth-of-type(2) {
  margin-top: 1.4rem;
}

@media screen and (max-width: 767px) {
  .contents04 {
    margin-top: calc(81 * (100vw / 390));
  }
  .model_img.model16 {
    width: calc(295 * (100vw / 390));
    margin: 0 calc(18 * (100vw / 390)) 0 0;
    margin-left: auto;
  }
  .contents04 .flexArea05 {
    width: calc(355 * (100vw / 390));
    margin: calc(15 * (100vw / 390)) auto 0;
  }
  .contents04 .flexArea05 .box1 {
    width: calc(236 * (100vw / 390));
  }
  .contents04 .flexArea05 .box2 {
    width: calc(176 * (100vw / 390));
    margin-left: auto;
    margin-top: calc(-112 * (100vw / 390));
  }
  .model_img.model19 {
    width: calc(236 * (100vw / 390));
    margin: calc(17 * (100vw / 390)) auto 0;
  }
  .credit.credit04 {
    width: calc(267 * (100vw / 390));
    margin: calc(23 * (100vw / 390)) auto 0;
  }
  .credit.credit04 ul li:nth-of-type(2) {
    margin-top: calc(13 * (100vw / 390));
  }
}


/* ============================================================================
contents05
==============================================================================*/
.contents05 {
  margin-top: 10.2rem;
  margin-bottom: 7rem;
}
.model_img.model20 {
  width: 50rem;
  margin: 0 auto;
}
.credit.credit05{
  width: 31.1rem;
  margin: 4.6rem auto 0;
}
.contents05 .flexArea06 {
  width: 60rem;
  margin: 10.2rem auto 0;
}
.contents05 .flexArea06 .box1 {
  width: 60rem;
}
.contents05 .flexArea06 .box2 {
  width: 50rem;
  margin: 2.4rem 0 0 0;
  margin-left: auto;
}
.credit.credit06{
  width: 31.1rem;
  margin: 3rem auto 0;
}
.All_Item a {
  font-size: 1.8rem;
  color: #fff;
  font-family: var(--font-f37-ginger);
  text-align: center;
  margin-left: 0rem;
  width: 35.5rem;
  height: 3.3rem;
  margin: 26.2rem auto 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.model_img.model23 {
  width: 60.1rem;
  margin: 26rem auto 0;
}

@media screen and (max-width: 767px) {
  .contents05 {
    margin-top: calc(81 * (100vw / 390));
    margin-bottom: 70px;
  }
  .model_img.model20 {
    width: calc(295 * (100vw / 390));
    margin: 0 auto;
  }
  .credit.credit05{
    width: calc(267 * (100vw / 390));
    margin: calc(22 * (100vw / 390)) auto 0;
  }
  .contents05 .flexArea06 {
    width: calc(354 * (100vw / 390));
    margin: calc(82 * (100vw / 390)) auto 0;
  }
  .contents05 .flexArea06 .box1 {
    width: calc(354 * (100vw / 390));
  }
  .contents05 .flexArea06 .box2 {
    width: calc(295 * (100vw / 390));
    margin: calc(14 * (100vw / 390)) 0 0 0;
    margin-left: auto;
  }
  .credit.credit06{
    width: calc(267 * (100vw / 390));
    margin: calc(21 * (100vw / 390)) auto 0;
  }
  .All_Item a {
    font-size: calc(15 * (100vw / 390));
    color: #fff;
    width: calc(251 * (100vw / 390));
    margin: calc(131 * (100vw / 390)) auto 0;
    height: calc(66*(100vw / 750));
    background: #000;
  }
  .model_img.model23 {
    width: calc(356 * (100vw / 390));
    margin: calc(129 * (100vw / 390)) auto 0;
  }
  
}



/* ============================================================================
contents05
==============================================================================*/
#HERITAGE .jsFade {
  opacity: 0;
  transform: translateY(20px);
}
#HERITAGE .jsFade.isActive {
  opacity: 1;
  transform: translateY(0px);
  transition: all .7s;
}