.main-area {
  padding-bottom: calc(125* (100vw /375));
  font-family: var(--noto-sans);
	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;
}

/************** common **************/
  .main-area .sec {
    padding: 0 0 calc(60* (100vw /375));
    width: calc(345* (100vw /375));
    position: relative;
  }

  .Coorde_img {
    margin-bottom: calc(26* (100vw /375));
  }
  
  /*** coordinate_box ***/
  .coordinate_box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .coordinate_box h2 {
    margin-bottom: calc(18* (100vw /375));
    width: max-content;
  }

  .coordinate_box .ttl_text {
    font-size: calc(44* (100vw /375));
    letter-spacing: 0.04em;
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

  .coordinate_box .ttl_img {
    margin: 0 auto calc(2* (100vw /375));
  }

  .sec_text {
    margin-bottom: calc(44* (100vw /375));
    width: max-content;
    font-size: calc(12* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.875;
    text-align: center;
  }

  /*** item_box ***/
  .item_box {
    width: 100%;
    padding: calc(18* (100vw /375)) 0 calc(40* (100vw /375));
    background-color: #fff;
    position: relative;
    z-index: 5;
    border-radius: 4%;
  }

  .item_box h3 {
    width: calc(177* (100vw /375));
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item_box ul {
    margin: 0 auto;
    width: calc(285* (100vw /375));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(31* (100vw /375));
  }

  .item_box ul li {
    width: calc(123* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  .item_box ul li .item_img {
    margin-bottom: calc(6* (100vw /375));
    width: calc(123* (100vw /375));
  }

  /*** sec_tax ***/
  .sec_tax {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sec_tax_center {
    text-align: center;
  }

  .sec_tax dt {
    margin-bottom: calc(8* (100vw /375));
    font-size: calc(11* (100vw /375));
    line-height: 1.36;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: 400;
  }

  .sec_tax .buy_btn {
    font-size: calc(11* (100vw /375));
    width: calc(71* (100vw /375));
    height: calc(19* (100vw /375));
    max-width: 100%;
    max-height: 100%;
    color: #fff;
  }

/************** before.after **************/
  .sec01::before,.sec02::before,.sec03::before,.sec04::before,.sec05::before,.mv::before,.sec01::after,.sec02::after,.sec03::after,.sec04::after,.sec05::after {
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 100%;
    z-index: -1;
    top: 0;
  }

  .sec01::after,.sec02::after,.sec03::after,.sec04::after,.sec05::after {
    z-index: 5;
    pointer-events: none;
  }

  .mv::before {
    top: 83.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(200* (100vw /375));
    height: calc(3* (100vw /375));
    background-color: #EDCB8C;
  }

  .sec01::after {
    width: calc(236* (100vw /375));
    height: calc(71* (100vw /375));
    top: -4.3%;
    left: 58%;
    transform: translate(-50%, -50%);
    background-image: url(../img/svg/sp_line01.svg);
  }

  .sec02::after {
    width: calc(253* (100vw /375));
    height: calc(96* (100vw /375));
    top: -4.5%;
    left: 56.5%;
    transform: translate(-50%, -50%);
    background-image: url(../img/svg/sp_line02.svg);
  }

  .sec03::after {
    width: calc(236* (100vw /375));
    height: calc(100* (100vw /375));
    top: -4.2%;
    left: 54.5%;
    transform: translate(-50%, -50%);
    background-image: url(../img/svg/sp_line03.svg);
  }

  .sec04::after {
    width: calc(95* (100vw /375));
    height: calc(100* (100vw /375));
    top: -5.3%;
    left: 33%;
    transform: translate(-50%, -50%);
    background-image: url(../img/svg/sp_line04.svg);
  }

  .sec05::after {
    width: calc(186* (100vw /375));
    height: calc(97* (100vw /375));
    top: -5.2%;
    left: 54.2%;
    transform: translate(-50%, -50%);
    background-image: url(../img/svg/sp_line05.svg);
  }

  .sec01::before {
    background-color: #EFF0DB;
  }

  .sec02::before {
    background-color: #FDF3E3;
  }

  .sec03::before {
    background-color: #F8FBFF;
  }

  .sec04::before {
    background-color: #FFEFE8;
  }

  .sec05::before {
    background-color: #FFF8EB;
  }

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

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

  .mv p {
    text-align: center;
    letter-spacing: 0.1em;
  }

  .mv_text01 {
    margin-bottom: calc(50* (100vw /375));
    font-size: calc(15* (100vw /375));
    font-weight: 500;
    line-height: 1.57;
  }

  .mv_text02 {
    font-size: calc(13* (100vw /375));
    font-weight: 400;
    line-height: 2;
  }

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

  .sec01 .coordinate_box .ttl_img {
    width: calc(97* (100vw /375));
  }

  .sec01 .ttl_text {
    color: #A9A273;
  }

  .sec01 .sec_tax .buy_btn {
    background-color: #A9A273;
  }

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

  .sec02 .coordinate_box .ttl_img {
    width: calc(103* (100vw /375));
  }

  .sec02 .ttl_text {
    color: #C3964F;
  }

  .sec02 .item_box ul li:last-child {
    width: 100%;
  }

  .sec02 .sec_tax .buy_btn {
    background-color: #C3964F;
  }

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

  .sec03 .coordinate_box .ttl_img {
    width: calc(99* (100vw /375));
  }

  .sec03 .ttl_text {
    color: #72ADBE;
  }
  
  .sec03 .sec_text {
    line-height: 2;
  }

  .sec03 .sec_tax .buy_btn {
    background-color: #72ADBE;
  }

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

  .sec04 .coordinate_box .ttl_img {
    width: calc(102* (100vw /375));
  }

  .sec04 .ttl_text {
    color: #C5795F;
  }

  .sec04 .sec_text {
    line-height: 2;
  }

  .sec04 .sec_tax .buy_btn {
    background-color: #C5795F;
  }
  
/************** sec05 **************/
  .sec05 {
    margin: 0 auto calc(80* (100vw /375));
  }

  .sec05 .coordinate_box .ttl_img {
    width: calc(102* (100vw /375));
  }

  .sec05 .ttl_text {
    color: #BFA478;
  }

  .sec05 .sec_text {
    line-height: 2;
  }

  .sec05 .sec_tax .buy_btn {
    background-color: #BFA478;
  }
  
/************** btn **************/
  .sec_btn a {
    margin: 0 auto;
    width: calc(249* (100vw /375));
    height: calc(63* (100vw /375));
    max-width: 100%;
    max-height: 100%;
    font-size: calc(18* (100vw /375));
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #FFFFFF;
    display: block;
  }


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

  .pc_only {
    display: block;
  }

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

/************** common **************/
  .main-area .sec {
    padding: 10rem 0 10rem;
    width: 108.2rem;
    display: flex;
    justify-content: space-between;
  }

  .Coorde_img {
    margin-bottom: 0;
    width: 50rem;
  }

  /*** coordinate_box ***/
  .coordinate_box {
    width: 52rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .coordinate_box h2 {
    margin-bottom: 2.5rem;
  }

  .coordinate_box .ttl_text {
    font-size: 4.4rem;
    letter-spacing: 0.04em;
  }

  .coordinate_box .ttl_img {
    margin: 0 auto .2rem;
  }

  .sec_text {
    margin-bottom: 4.3rem;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    line-height: 2;
  }

  /*** item_box ***/
  .item_box {
    width: 100%;
    padding: 1.8rem 0 4.0rem;
    border-radius: 1.5%;
  }

  .item_box h3 {
    width: 17.6rem;
    top: 0%;
  }

  .item_box ul {
    margin: 0 auto;
    width: 37rem;
    gap: 3.3rem;
  }

  .item_box ul li {
    width: 16rem;
  }

  .item_box ul li .item_img {
    margin-bottom: .6rem;
    width: 16rem;
  }

  /*** sec_tax ***/
  .sec_tax dt {
    margin-bottom: .7rem;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }

  .sec_tax .buy_btn {
    font-size: 1.1rem;
    width: 7.1rem;
    height: 1.9rem
  }

/************** before.after **************/
  .sec01::after,.sec02::after,.sec03::after,.sec04::after,.sec05::after {
    margin: 0;
  }

  .mv::before {
    top: 88%;
    left: 50%;
    width: 20.0rem;
    height: .3rem;
    margin: 0;
  }

  .sec01::after {
    width: 45.1rem;
    height: 13.4rem;
    top: 1.4%;
    left: 58.4%;
    background-image: url(../img/svg/pc_line01.svg);
  }

  .sec02::after {
    width: 86.6rem;
    height: 35.4rem;
    top: 2%;
    left: 36.8%;
    background-image: url(../img/svg/pc_line02.svg);
  }

  .sec03::after {
    width: 81.5rem;
    height: 39.9rem;
    top: -.5%;
    left: 54.0%;
    background-image: url(../img/svg/pc_line03.svg);
  }

  .sec04::after {
    width: 26rem;
    height: 29.6rem;
    top: -6%;
    left: 47.6%;
    background-image: url(../img/svg/pc_line04.svg);
  }

  .sec05::after {
    width: 75rem;
    height: 18.9rem;
    top: 1.6%;
    left: 57.8%;
    background-image: url(../img/svg/pc_line05.svg);
  }

/************** mv **************/
  .mv {
    margin: 0 auto 7.6rem;
    padding: 0 2rem;
    width: min(100%, 124rem);
  }

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

  .mv p {
    text-align: center;
    letter-spacing: 0.1em;
  }

  .mv_text01 {
    margin-bottom: 4.5rem;
    font-size: 1.9rem;
  }

  .mv_text02 {
    font-size: 1.4rem;
  }

/************** sec01 **************/
  .sec01 {
    margin: 0 auto;
  }

  .sec01 .coordinate_box {
    margin-top: 4.9rem;
  }

  .sec01 .coordinate_box .ttl_img {
    width: 9.7rem;
  }

  .sec01 .sec_text {
    margin-bottom: 4.4rem;
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    line-height: 1.84;
  }

/************** sec02 **************/
  .sec02 {
    margin: 0 auto;
    flex-direction: row-reverse;
  }

  .sec02 .coordinate_box {
    margin-top: .6rem;
  }

  .sec02 .Coorde_img {
    margin-top: 12.6rem;
  }

  .sec02 .coordinate_box .ttl_img {
    width: 10.3rem;
  }

/************** sec03 **************/
  .sec03 {
    margin: 0 auto;
  }

  .sec03 .coordinate_box {
    margin-top: .6rem;
  }

  .sec03 .Coorde_img {
    margin-top: 11.5rem;
  }

  .sec03 .coordinate_box .ttl_img {
    width: 9.9rem;
  }

  .sec03 .sec_text {
    line-height: 2;
  }

/************** sec04 **************/
  .sec04 {
    margin: 0 auto;
    flex-direction: row-reverse;
  }

  .sec04 .coordinate_box {
    margin-top: 5rem;
  }

  .sec04 .coordinate_box .ttl_img {
    width: 10.2rem;
  }

  .sec04 .sec_text {
    line-height: 2;
  }

/************** sec05 **************/
  .sec05 {
    margin: 0 auto 7.8rem;
  }

  .sec05 .coordinate_box {
    margin-top: 4.3rem;
  }

  .sec05 .coordinate_box .ttl_img {
    width: 10.2rem;
  }

  .sec05 .sec_text {
    line-height: 2;
  }

/************** btn **************/
.sec_btn a {
    margin: 0 auto;
    width: 30.9rem;
    height: 8.6rem;
    font-size: 1.8rem;
  }
}

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

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