.main-area {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	overflow: hidden;
	box-sizing: border-box;
  color: #000;
  font-weight: 400;
}

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

.sp_only {
	display: block;
}

.pc_only {
	display: none;
}

/************** js **************/
  .js_imgFadeIn {
    opacity: 0;
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
    transform: translateY(100px);
  }

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

/************** common **************/
  .main-area .sec_box {
    margin: 0 auto calc(33* (100vw /375));
    width: calc(355* (100vw /375));
    position: relative;
  }

  .main-area .sec05 .sec_box:last-child {
    margin: 0 auto calc(56* (100vw /375));
  }

  /*** sec_ttl ***/
  .sec_ttl {
    margin: 0 0 calc(20* (100vw /375));
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .sec_ttl_img {
    width: calc(70* (100vw /375));
  }

  .sec_ttl .text_box {
    width: calc(270* (100vw /375));
    font-family: var(--ebgaramond);
    font-weight: 400;
    font-style: normal;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sec_ttl .small_text {
    padding-bottom: calc(10* (100vw /375));
    font-size: calc(15* (100vw /375));
    letter-spacing: 0.05em;
    border-bottom: 1px solid #000;
  }

  .sec_ttl .bland_name {
    font-size: calc(26* (100vw /375));
    letter-spacing: 0.05em;
    line-height: 1;
    padding-bottom: calc(3* (100vw /375));
    white-space: nowrap;
  }
  
  .sec04 .sec_ttl .bland_name {
    font-size: calc(17* (100vw /375));
    padding-bottom: calc(13*(100vw / 375));
  }

  /*** sec_img ***/
  .sec_img {
    margin-bottom: calc(14* (100vw /375));
    width: 100%;
  }

  /*** sec_text ***/
  .sec_text {
    font-size: calc(15* (100vw /375));
    font-weight: 300;
    line-height: 1.86;
    letter-spacing: 0.05em;
  }

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

  .sec_tax li {
    display: flex;
    flex-direction: column;
    gap: calc(13* (100vw /375)) 0;
  }

  .sec_tax li a {
    display: inline-block;
    width: max-content;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: calc(18* (100vw /375));
    letter-spacing: 0.05em;
    color: #000000;
    line-height: 1.75;
  }

  .sec_tax li a:nth-of-type(1) span {
    font-size: calc(12* (100vw /375));
  }

  .sec_tax li a:nth-of-type(2) {
    margin: 0 0 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    width: calc(153*(100vw / 375));
    padding: calc(8*(100vw / 375)) 0 calc(8*(100vw / 375));
    font-size: calc(16*(100vw / 375));
    font-weight: 500;
    font-family: var(--ebgaramond);
    letter-spacing: 0.105em;
    line-height: 1.625;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: calc(4*(100vw / 375));
  }

  .brand_btn a {
    margin: 0 auto;
    display: block;
    text-align: center;
    text-decoration: none;
    width: calc(355*(100vw / 375));
    padding: calc(15*(100vw / 375)) 0 calc(15*(100vw / 375));
    font-size: calc(16*(100vw / 375));
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.625;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: calc(4*(100vw / 375));
  }

/************** before.after **************/
  .sec {
    margin: 0 auto calc(81* (100vw /375));
  }

  .sec01,
  .sec04 {
    position: relative;
    margin: 0 auto calc(53* (100vw /375));
  }

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


/************** mv **************/
  .mv {
    margin: 0 auto calc(80* (100vw /375));
    position: relative;
  }

  .mv_img {
    margin: 0 auto calc(33* (100vw /375));
    width: 100%;
  }

  .mv p {
    font-size: calc(15* (100vw /375));
    font-weight: 300;
    line-height: 1.8666;
    text-align: center;
    letter-spacing: 0.05em;
  }

  .mv .coupon_content {
    margin: calc(55* (100vw /375)) auto calc(13* (100vw /375));
    width: calc(355* (100vw /375));
  }

  .mv .coupon_content h3 {
    margin: 0 auto calc(30* (100vw /375));
    width: calc(262* (100vw /375));
  }

  .mv .coupon_content .coupon_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(20* (100vw /375)) 0;
  }

  .mv .coupon_content .coupon_box .sub_box {
    width: 100%;
    position: relative;
  }

  .mv .coupon_content .coupon_box .sub_box p  {
    font-size: calc(22* (100vw /375));
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-align: center;
    width: max-content;
    position: absolute;
    top: auto;
    bottom: 6%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
    color: #FFFFFF;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  }

  .mv .last_text {
    margin: 0 auto;
    text-align: left;
    width: calc(355*(100vw / 375));
    letter-spacing: 0.05em;
    font-size: calc(14*(100vw / 375));
    line-height: 2;
  }

  .link_box {
    margin: calc(34* (100vw /375)) auto 0;
    width: calc(355* (100vw /375));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(7.5* (100vw /375)) 0;
  }

  .link_box li {
    width: calc(113* (100vw /375));
  }

/************** btn **************/
  .sec_btn {
    padding-bottom: calc(149* (100vw /375));
    background-color: #fff;
    position: relative;
    z-index: 10;
  }

  .sec_btn a {
    margin: 0 auto;
    width: calc(355* (100vw /375));
    height: calc(56* (100vw /375));
    font-size: calc(16* (100vw /375));
    max-width: 100%;
    max-height: 100%;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    display: -webkit-box;
    background-color: #000;
    border: none;
    color: #fff;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    border-radius: calc(4* (100vw /375));
  }

  .sec_btn a:nth-of-type(2) {
    margin-top: calc(20* (100vw /375));
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
  }

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

  .pc_only {
    display: block;
  }

  .main-area {
    margin: 0 auto 0;
    padding: 0;
  }

  /************** common **************/
  .main-area .sec_box {
    margin: 0 auto;
    width: 120rem;
    position: relative;
  }

  .main-area .sec05 .sec_box:last-child {
    margin: 0 auto 5.6rem;
  }

  /*** sec_ttl ***/
  .sec_ttl {
    margin: 0 0 6.3rem;
    width: 60rem;
    height: max-content;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .sec_ttl_img {
    width: 12rem;
  }

  .sec_ttl .text_box {
    padding-top: .6rem;
    width: 46rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sec10 .sec_ttl .bland_name {
    font-size: 3.3rem;
    padding-bottom: 1.6rem;
  }

  .sec_ttl .small_text {
    padding-bottom: 1.6rem;
    font-size: 2.7rem;
  }

  .sec_ttl .bland_name {
    font-size: 4rem;
    line-height: 1;
    padding-bottom: 1rem;
  }
  
  .sec04 .sec_ttl .bland_name {
    font-size: 3rem;
    padding-bottom: 2rem;
  }

  /*** sec_img ***/
  .sec_img {
    margin-bottom: 0;
    width: 50rem;
  }

  /*** sec_text ***/
  .sec_text {
    font-size: 1.5rem;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin:  0 0 5.4rem;
  }

  .sec02 .sec_tax {
    margin-top: 17.5rem;
  }

  .sec05 .sec_tax {
    margin-top: 18rem;
  }

  .sec_tax li {
    display: flex;
    flex-direction: column;
    gap: 2.2rem 0;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: 2.2rem;
  }

  .sec_tax li a:nth-of-type(1) span {
    font-size: 1.5rem;
  }

  .sec_tax li a:nth-of-type(2) {
    margin: 0;
    display: block;
    text-align: center;
    text-decoration: none;
    width: 15.8rem;
    padding: .5rem 0 .5rem;
    font-size: 1.8rem;
    border-radius: .6rem;
  }

  .brand_btn a {
    margin: 6rem auto 0; 
    display: block;
    text-align: center;
    text-decoration: none;
    width: 60rem;
    padding: 1.4rem 0 1.6rem;
    font-size: 1.8rem;
    border-radius: .6rem;
  }

  .grid_box {
    display: grid;
    grid-template-columns: 1fr 10rem 1fr;
    grid-template-rows: auto;
  }

  .sec02 .grid_box {
    grid-template-columns: 60rem 10rem 1fr;
  }

  .sec05 .grid_box {
    grid-template-columns: 50rem 10rem 1fr;
  }

  .main-area .sec:nth-child(even) .grid_box .sec_ttl,
  .main-area .sec:nth-child(even) .grid_box .sec_text,
  .main-area .sec:nth-child(even) .grid_box .sec_tax {
    grid-column: 3/4;
  }

  .main-area .sec:nth-child(even) .grid_box .sec_img {
    grid-column: 1/2;
    grid-row: 1/5;
  }

  .main-area .sec:nth-child(odd) .grid_box .sec_ttl,
  .main-area .sec:nth-child(odd) .grid_box .sec_text,
  .main-area .sec:nth-child(odd) .grid_box .sec_tax {
    grid-column: 1/2;
  }

  .main-area .sec:nth-child(odd) .grid_box .sec_img {
    grid-column: 3/4;
    grid-row: 1/5;
  }

/************** before.after **************/
  .sec {
    margin: 0 auto 16.1rem;
  }

  .sec01,
  .sec04 {
    position: relative;
    margin: 0 auto 6rem;
  }

  .sec10 {
    margin: 0 auto 2.0rem;
  }

/************** mv **************/
  .mv {
    margin: 0 auto 17rem;
    position: relative;
    width: 120rem;
  }

  .mv_img {
    margin: 0 auto 5.3rem;
    width: 100%;
  }

  .mv p {
    font-size: 1.5rem;
  }

  .mv .coupon_content {
    margin: 7.4rem auto 3.4rem;
    width: 120rem;
  }

  .mv .coupon_content h3 {
    margin: 0 auto 3.0rem;
    width: 26.2rem;
  }

  .mv .coupon_content .coupon_box {
    width: 120rem;
    display: flex;
    flex-direction: row;
    gap: 0 0;
    justify-content: space-between;
  }

  .mv .coupon_content .coupon_box .sub_box {
    width: 36rem;
    position: relative;
  }

  .mv .coupon_content .coupon_box .sub_box p  {
    font-size: 2rem;
    bottom: 4.6%;
  }

  .mv .last_text {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
    line-height: 1.8666;
  }

  .link_box {
    margin: 7.4rem auto 0;
    width: 120rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2rem 3.6rem;
  }

  .link_box li {
    width: 17rem;
  }

/************** btn **************/
  .sec_btn {
    padding-bottom: 13rem;
    background-color: #fff;
    position: relative;
    z-index: 10;
  }

  .sec_btn a {
    margin: 0 auto;
    width: 60rem;
    height: 6rem;
    font-size: 1.8rem;
    border-radius: .6rem;
  }

  .sec_btn a:nth-of-type(2) {
    margin-top: 2.0rem;
  }
}

/************************************************
タブレット用デザイン
*************************************************/

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