/*************************************************
PC/SP共通
*************************************************/
  .main_area {
    font-family: "kozuka-mincho-pro", serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-feature-settings: "palt";
  }

  .main_area img {
    width: 100%;
    height: auto;
  }

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

  .grid_box {
    display: grid;
  }

  .white_box {
    height: max-content;
  }

  
/*************************************************
変数
*************************************************/
  .main_area {
    --garamond: "adobe-garamond-pro", serif;
    --orpheuspro: "orpheuspro", serif;
    --parkside: "parkside", cursive;
    --century: "century-gothic", sans-serif;
  }


/************************************************
タブレット用デザイン
*************************************************/
  @media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    html {
      font-size: calc(10 * (100vw / 1400));
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    html {
      font-size: calc(10 * (100vw / 1400));
    }
  }

/************** js **************/
  .js_imgFadeIn {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  .imgAnimated {
    opacity: 1;
  }


/*************************************************
SP用デザイン
*************************************************/
  .main_area {
    margin: 0 auto calc(100* (100vw /750));
  }

  .main_area .sec {
    margin: 0 auto calc(88* (100vw /750));
  }

  .main_area .sec:last-child {
    margin: 0 auto;
  }

  .main_area .sec .sec_box .sec_box_inner {
    margin: 0 auto;
    width: calc(650* (100vw /750));
  }

  .main_area .sec_bg {
    padding: calc(62* (100vw /750)) 0 calc(59* (100vw /750));
    background-color: #BEA493;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin-bottom: calc(22* (100vw /750));
    width: max-content;
    display: flex;
    flex-direction: column;
    z-index: 10;
    height: max-content;
  }

  .sec_tax li a {
    font-size: calc(22* (100vw /750));
    letter-spacing: 0;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    font-family: var(--garamond);
    color: #707070;
  }

  .sec_tax .li_block {
    display: block;
    width: 100%;
  }

  /*** number_ttl ***/
  .main_area {
    counter-reset: number 0; /* 初期値0 */
  }

  .main_area h3 {
    width: max-content;
    font-size: calc(50* (100vw /750));
    font-family: var(--orpheuspro);
    font-weight: 400;
    letter-spacing: 0;
    color: #707070;
  }

  .main_area .sec_box03 h3 { 
    font-size: calc(60* (100vw /750));
  }

  .main_area h3::before {
    content: '#' counter(number);
    counter-increment: number 1;
    display: inline-block;
  }

  /*** tax_box ***/
  .main_area .tax_box {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .main_area .tax_box p {
    margin-bottom: calc(27* (100vw /750));
    font-size: calc(50* (100vw /750));
    font-family: var(--parkside);
    font-weight: 200;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    color: #707070;
  }

  .main_area .tax_box .color_box {
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(11* (100vw /750));
  }

  .main_area .tax_box .color_box span {
    display: block;
    width: calc(24* (100vw /750));
    height: calc(24* (100vw /750));
  }

  /*** chek_item ***/
  .check_item {
    margin: 0 auto;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: calc(293 * (100vw / 750));
    height: calc(58 * (100vw / 750));
    font-family: var(--century);
    font-size: calc(24 * (100vw / 750));
    letter-spacing: .05em;
    line-height: 1;
    opacity: 1;
    background-color: #343434;
    color: #FFFFFF;
  }

  /*** video ***/
  .main_area .sec_img {
    position: relative;
  }

  .main_area .img_video {
    position:relative;
    pointer-events: none;
  }

  .main_area .img_video iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events: none;
  }

  /* .main_area .img05 .img_video {
    padding:0 0 119.5%;
  } */

  .main_area .img09 .img_video {
    padding:0 0 149%;
  }


/************** mv **************/
  .mv {
    margin: 0 auto calc(36* (100vw /750));
    width: 100%;
  }

  .mv h2 {
    margin: 0 auto calc(29* (100vw /750));
  }

  .mv p {
    font-size: calc(20* (100vw /750));
    letter-spacing: 0;
    line-height: 1.75;
    text-align: center;
    color: #707070;
    font-feature-settings: normal;
  }


/************** sec01 **************/
  /*** number_ttl ***/
  .sec_box01 .number_ttl {
    margin: 0 0 calc(20* (100vw /750)) calc(4* (100vw /750));
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box01 .sec_box_inner {
    margin: 0;
  }

  .sec_box01 .sec_box_inner .sub_box01 {
    margin: 0 auto calc(46* (100vw /750));
    width: calc(550* (100vw /750));
  }

  .sec_box01 .sub_box02 {
    margin: 0 0 calc(42* (100vw /750)) auto;
    width: calc(639* (100vw /750));
    align-items: center;
  }

  .sec_box01 .sub_box02 .img02 {
    width: calc(305* (100vw /750));
  }

  .sec_box01 .sub_box02 .tax_box {
    margin-top: calc(-10* (100vw /750));
  }

  .sec_box01 .sub_box03 {
    margin: 0 auto calc(77* (100vw /750));
  }

  .sec_box01 .sub_box03 .sec_img {
    width: calc(305* (100vw /750));
  }


/************** sec02 **************/
  /*** number_ttl ***/
  .sec_box02 .number_ttl {
    margin: 0 0 0 calc(4* (100vw /750));
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box02 .sec_box_inner .sub_box01 {
    margin: 0 0 calc(55* (100vw /750)) auto;
    width: calc(597* (100vw /750));
    align-items: center;
  }

  .sec_box02 .sub_box01 .img03 {
    width: calc(305* (100vw /750));
    margin-left: calc(305* (100vw /750));
    margin-top: calc(-300* (100vw /750));
  }

  .sec_box02 .sub_box02 {
    margin: 0 auto calc(60* (100vw /750));
    width: calc(550* (100vw /750));
  }

  .sec_box02 .sub_box03 {
    margin: 0 auto calc(77* (100vw /750));
    width: calc(650* (100vw /750));
  }

  .sec_box02 .sub_box03 .sec_img {
    width: calc(305* (100vw /750));
  }

  .sec_box02 .tax_box {
    margin-right: calc(100* (100vw /750));
    margin-top: calc(100* (100vw /750));
  }

/************** sec03 **************/
  /*** number_ttl ***/
  .sec_box03 .number_ttl {
    margin: 0 0 calc(19* (100vw /750)) calc(14* (100vw /750));
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box03 .sec_box_inner .sub_box01 {
    margin: 0 auto calc(81* (100vw /750));
    width: calc(550* (100vw /750));
  }

  .sec_box03 .sub_box02 {
    margin-right: calc(50% - 50vw);
    margin-bottom: calc(77* (100vw /750));
    width: calc(700* (100vw /750));
    grid-template-columns: calc(271* (100vw /750)) calc(54* (100vw /750)) calc(60* (100vw /750)) calc(226* (100vw /750)) auto;
    grid-template-rows: calc(250* (100vw /750)) calc(77* (100vw /750)) calc(79* (100vw /750)) auto;
  }

  .sec_box03 .sub_box02 .img05 {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .sec_box03 .sub_box02 .img06 {
    grid-column: 3/6;
    grid-row: 1/2;
  }

  .sec_box03 .sub_box02 .tax_box {
    grid-column: 4/5;
    grid-row: 3/5;
  }

  .sec_box03 .sub_box03 {
    margin: 0 auto calc(77* (100vw /750));
    width: calc(650* (100vw /750));
  }

  .sec_box03 .sub_box03 .sec_img {
    width: calc(305* (100vw /750));
  }

/************** sec04 **************/
  /*** number_ttl ***/
  .sec_box04 .number_ttl {
    margin: 0 0 0 calc(4* (100vw /750));
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box04 .sec_box_inner .sub_box01 {
    margin: 0 0 calc(55* (100vw /750)) auto;
    width: calc(597* (100vw /750));
    align-items: center;
  }

  .sec_box04 .sub_box01 .img08 {
    width: calc(305* (100vw /750));
    margin-left: calc(305* (100vw /750));
    margin-top: calc(-300* (100vw /750));
  }

  .sec_box04 .sub_box02 {
    margin: 0 auto calc(60* (100vw /750));
    width: calc(550* (100vw /750));
  }

  .sec_box04 .sub_box05 {
    margin: 0 auto calc(77* (100vw /750));
    width: calc(650* (100vw /750));
  }

  .sec_box04 .sub_box05 .sec_img {
    width: calc(305* (100vw /750));
  }

  .sec_box04 .tax_box {
    margin-right: calc(100* (100vw /750));
    margin-top: calc(100* (100vw /750));
  }



/************** sec05 **************/
  /*** number_ttl ***/
  .sec_box05 .number_ttl {
    margin: 0 0 calc(19* (100vw /750)) calc(14* (100vw /750));
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box05 .sec_box_inner .sub_box01 {
    margin: 0 auto calc(81* (100vw /750));
    width: calc(550* (100vw /750));
  }

  .sec_box05 .sub_box02 {
    margin-right: calc(50% - 50vw);
    margin-bottom: calc(77* (100vw /750));
    width: calc(700* (100vw /750));
    grid-template-columns: calc(271* (100vw /750)) calc(54* (100vw /750)) calc(60* (100vw /750)) calc(226* (100vw /750)) auto;
    grid-template-rows: calc(250* (100vw /750)) calc(77* (100vw /750)) calc(79* (100vw /750)) auto;
  }

  .sec_box05 .sub_box02 .img10 {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .sec_box05 .sub_box02 .img11 {
    grid-column: 3/6;
    grid-row: 1/2;
  }

  .sec_box05 .sub_box02 .tax_box {
    grid-column: 4/5;
    grid-row: 3/5;
  }

  .sec_box05 .sub_box03 {
    margin: 0 auto calc(77* (100vw /750));
    width: calc(650* (100vw /750));
  }

  .sec_box05 .sub_box03 .sec_img {
    width: calc(305* (100vw /750));
  }



/*************************************************
PC用デザイン
*************************************************/
@media screen and (min-width:768px) {
/************** common **************/
  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  .white_box {
    background-color: #fff;
  }


/************** common **************/
  .main_area {
    margin: 0 auto 11rem;
    width: 69.5rem;
  }

  .main_area .sec {
    margin: 0 auto 8.1rem;
  }

  .main_area .sec:last-child {
    margin: 0 auto;
  }

  .main_area .sec .sec_box .sec_box_inner {
    width: 60.3rem;
  }

  .main_area .sec_bg {
    padding: 6rem 0 5.5rem;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin-bottom: 2.1rem;
  }

  .sec_tax li a {
    font-size: 1.9rem;
  }

  /*** number_ttl ***/
  .main_area h3 {
    font-size: 5rem;
  }

  .main_area .sec_box01 h3 { 
    font-size: 4.7rem;
  }

  .main_area .sec_box03 h3 { 
    font-size: 6rem;
  }

  /*** tax_box ***/
  .main_area .tax_box p {
    margin-bottom: 2.6rem;
    font-size: 4.6rem;
  }

  .main_area .tax_box .color_box {
    gap: 0 1rem;
  }

  .main_area .tax_box .color_box span {
    width: 2.25rem;
    height: 2.25rem;
  }

  /*** chek_item ***/
  .check_item {
    width: 27.2rem;
    height: 5.4rem;
    font-size: 2.2rem;
  }


/************** mv **************/
  .mv {
    margin: 0 auto 3.3rem;
    width: 100%;
  }

  .mv h2 {
    margin-bottom: 2.7rem;
  }

  .mv p {
    font-size: 1.8rem;
    line-height: 1.77;
  }


/************** sec01 **************/
  /*** number_ttl ***/
  .sec_box01 .number_ttl {
    margin: 0 0 1.8rem .4rem;
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box01 .sec_box_inner .sub_box01 {
    margin: 0 auto 4.3rem;
    width: 51rem;
  }

  .sec_box01 .sub_box02 {
    margin: 0 0 3.9rem auto;
    width: 59.2rem;
  }

  .sec_box01 .sub_box02 .img02 {
    width: 28.3rem;
  }

  .sec_box01 .sub_box02 .tax_box {
    margin-top: -.7rem;
  }

  .sec_box01 .sub_box03 {
    margin: 0 auto 7rem;
  }

  .sec_box01 .sub_box03 .sec_img {
    width: 28.3rem;
  }


/************** sec02 **************/
  /*** number_ttl ***/
  .sec_box02 .number_ttl {
    margin: 0 0 -.5rem .2rem;
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box02 .sec_box_inner .sub_box01 {
    margin: 0 0 4.8rem auto;
    width: 55.4rem;
  }

  .sec_box02 .sub_box01 .img03 {
    width: 28.3rem;
    margin-left: 30rem;
    margin-top: -27rem;
  }

  .sec_box02 .sub_box02 {
    margin: 0 auto 5.7rem;
    width: 51rem;
  }

  .sec_box02 .sub_box03 {
    margin: 0 auto 7.2rem;
    width: 60.3rem;
  }

  .sec_box02 .sub_box03 .sec_img {
    width: 28.3rem;
  }

  .sec_box02 .tax_box {
    margin-right: 10rem;
    margin-top: 9rem;
  }

/************** sec03 **************/
  /*** number_ttl ***/
  .sec_box03 .number_ttl {
    margin: 0 0 1.2rem 1rem;
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box03 .sec_box_inner .sub_box01 {
    margin: 0 auto 7.5rem;
    width: 51rem;
  }

  .sec_box03 .sub_box02 {
    margin-bottom: 7.2rem;
    margin-right: calc(50% - 50vw);
    width: 64.8rem;
    grid-template-columns: 25.1rem 5.1rem 5.6rem 20.8rem auto;
    grid-template-rows: 23.2rem 7.1rem 7.9rem auto;
  }

  .sec_box03 .sub_box02 .img05 {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .sec_box03 .sub_box02 .img06 {
    grid-column: 3/6;
    grid-row: 1/2;
  }

  .sec_box03 .sub_box02 .tax_box {
    grid-column: 4/5;
    grid-row: 3/5;
  }

  .sec_box03 .sub_box03 {
    margin: 0 auto 7.2rem;
    width: 60.3rem;
  }

  .sec_box03 .sub_box03 .sec_img {
    width: 28.3rem;
  }


/************** sec04 **************/
  /*** number_ttl ***/
  .sec_box04 .number_ttl {
    margin: 0 0 -.5rem .2rem;
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box04 .sec_box_inner .sub_box01 {
    margin: 0 0 4.8rem auto;
    width: 55.4rem;
  }

  /* .sec_box04 .sub_box01 .img05 {
    width: 28.3rem;
  } */

  .sec_box04 .sub_box01 .img08 {
    width: 28.3rem;
    margin-left: 30rem;
    margin-top: -27rem;
  }

  .sec_box04 .sub_box02 {
    margin: 0 auto 5.7rem;
    width: 51rem;
  }

  .sec_box04 .sub_box05 {
    margin: 0 auto 7.2rem;
    width: 60.3rem;
  }

  .sec_box04 .sub_box05 .sec_img {
    width: 28.3rem;
  }

  .sec_box04 .tax_box {
    margin-right: 10rem;
    margin-top: 9rem;
  }


/************** sec05 **************/
  /*** number_ttl ***/
  .sec_box05 .number_ttl {
    margin: 0 0 1.2rem 1rem;
  }

  /*** sec_box .sec_box_inner ***/
  .sec_box05 .sec_box_inner .sub_box01 {
    margin: 0 auto 7.5rem;
    width: 51rem;
  }

  .sec_box05 .sub_box02 {
    margin-bottom: 7.2rem;
    margin-right: calc(50% - 50vw);
    width: 64.8rem;
    grid-template-columns: 25.1rem 5.1rem 5.6rem 20.8rem auto;
    grid-template-rows: 23.2rem 7.1rem 7.9rem auto;
  }

  .sec_box05 .sub_box02 .img10 {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .sec_box05 .sub_box02 .img11 {
    grid-column: 3/6;
    grid-row: 1/2;
  }

  .sec_box05 .sub_box02 .tax_box {
    grid-column: 4/5;
    grid-row: 3/5;
  }

  .sec_box05 .sub_box03 {
    margin: 0 auto 7.2rem;
    width: 60.3rem;
  }

  .sec_box05 .sub_box03 .sec_img {
    width: 28.3rem;
  }

}



/*************************************************
PC 商品一覧レイアウト調整
*************************************************/
@media screen and (min-width: 561px) {
  #Wrap {
    max-width: initial;
  }

  .ProductListSortItem {
    max-width: 120rem;
    margin-inline: auto;
  }

  #pagination.below {
    max-width: 120rem;
    margin-inline: auto;
  }
}