.main-area {
  font-family: var(--hirakaku);
	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(80* (100vw /375));
    width: calc(345* (100vw /375));
    position: relative;
  }

  /*** sec_ttl ***/
  .sec_ttl {
    margin: 0 auto calc(40* (100vw /375));
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .sec_ttl p {
    width: max-content;
    font-family: "baskerville-display-pt", serif;
    font-weight: 400;
    font-style: normal;
    color: #333333;
  }

  .sec_ttl .style_name {
    margin-bottom: calc(18* (100vw /375));
    font-size: calc(16* (100vw /375));
    letter-spacing: 0.05em;
  }

  .sec_ttl .number {
    margin-bottom: calc(40* (100vw /375));
    border-bottom: 3px solid #333;
    font-size: calc(60* (100vw /375));
    letter-spacing: 0.025em;
    line-height: 1;
  }

  .sec01 .sec_ttl .number {
    letter-spacing: 0.075em;
  }

  .sec_ttl .norc_logo {
    width: calc(121* (100vw /375));
  }

  .sec_ttl .ac_logo {
    width: calc(122* (100vw /375));
  }

  .sec_ttl .ecrile_logo {
    width: calc(121* (100vw /375));
  }

  .sec_ttl .petit_logo {
    width: calc(118* (100vw /375));
  }

  .sec_ttl .rose_logo {
    width: calc(121* (100vw /375));
  }

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

  /*** sec_text ***/
  .sec_text {
    font-size: calc(13* (100vw /375));
    font-weight: 300;
    line-height: 2.3;
    letter-spacing: 0.1em;
    text-align: center;
  }

  .sec01 .sec_text {
    margin: 0 auto calc(58* (100vw /375));
  }
  
  .sec02 .sec_text {
    margin: 0 auto calc(48* (100vw /375));
  }

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

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

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

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

  .sec_tax li {
    font-size: calc(10* (100vw /375));
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #454545;
  }

  .sec .sec_tax li:nth-of-type(1) {
    text-decoration: none;
  }


/************** before.after **************/
  .sec {
    position: relative;
  }

  .sec01::before,
  .sec03::before,
  .sec05::before {
    width: 100%;
    height: 108.3%;
    content: '';
    display: block;
    position: absolute;
    top: calc(60* (100vw /375));
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F4F4F4;
    z-index: -1;
  }

  .sec03::before {
    height: 108.5%;
  }

  .sec05::before {
    height: 102%;
  }

  .sec_text {
    position: relative;
  }

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

  .sec_text::before {
    background-image: url(../img/svg/double_quotes01.svg);
    left: 0%;
    top: -15%;
  }

  .sec_text::after {
    background-image: url(../img/svg/double_quotes02.svg);
    top: auto;
    bottom: -16.4%;
    right: -0%;
    left: auto;
  }

  .sec03 .sec_text::before {
    top: -19%;
  }

  .sec03 .sec_text::after {
    bottom: -21%;
  }

  .sec04 .sec_text::before {
    top: -22%;
  }

  .sec04 .sec_text::after {
    bottom: -19%;
  }

  .sec05 .sec_text::before {
    top: -12.5%;
  }

  .sec05 .sec_text::after {
    bottom: -11.4%;
  }


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

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

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


/************** btn **************/
  .sec_btn {
    padding: calc(80* (100vw /375)) 0 calc(148* (100vw /375));
    background-color: #fff;
    position: relative;
    z-index: 10;
    transform:translateZ(2px);
  }

  .sec_btn a {
    margin: 0 auto;
    width: calc(240* (100vw /375));
    height: calc(50* (100vw /375));
    font-size: calc(13* (100vw /375));
    max-width: 100%;
    max-height: 100%;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    display: -webkit-box;
    background-color: #333333;
    color: #FFFFFF;
    border: none;
  }

/* ===============================================
### 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 20.2rem;
    padding: 8rem 0 1.8rem;
    width: 110rem;
    position: relative;
  }

  .main-area .sec05 .sec_box{
    margin: 0 auto 12.2rem;
  }

  .main-area .sec03 .sec_box {
    margin: 0 auto 20.1rem;
  }

  /*** sec_ttl ***/
  .sec_ttl {
    margin: 0;
  }

  .sec_ttl .style_name {
    margin-bottom: 1.8rem;
    font-size: 1.6rem;
  }

  .sec_ttl .number {
    margin-bottom: 4.0rem;
    font-size: 6.0rem;
  }

  .sec_ttl .norc_logo {
    width: 12.1rem;
  }

  .sec_ttl .ac_logo {
    width: 12.2rem;
  }

  .sec_ttl .ecrile_logo {
    width: 12.1rem;
  }

  .sec_ttl .petit_logo {
    width: 11.8rem;
  }

  .sec_ttl .rose_logo {
    width: 12.1rem;
  }

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

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

  .sec01 .sec_text {
    margin: 1.7rem auto 0;
  }
  
  .sec02 .sec_text {
    margin: 2.5rem auto 0;
  }

  .sec03 .sec_text {
    margin: 3.6rem auto 0;
  }

  .sec04 .sec_text {
    margin: 3.8rem auto 0;
  }

  .sec05 .sec_text {
    margin: 2rem auto 0;
  }

  /*** sec_tax ***/
  .sec_tax {
    gap: 1.2rem 0;
  }

  .sec_tax li {
    font-size: 1.0rem;
  }
  
  .grid_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 29rem 19rem auto;
  }

  .sec03 .grid_box {
    grid-template-rows: 29rem 17.4rem auto;
  }

  .sec04 .grid_box {
    grid-template-rows: 29rem 17.1rem auto;
  }

  .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 {
    padding-right: 1rem;
    grid-column: 2/3;
  }

  .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 {
    padding-left: 1rem;
    grid-column: 1/2;
  }

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

  .main-area .sec .grid_box .sec_ttl {
    margin: 9.7rem auto 0;
    grid-row: 1/2;
  }

  .main-area .sec04 .grid_box .sec_ttl {
    margin: 9.4rem auto 0;
  }

  .main-area .sec03 .grid_box .sec_ttl {
    margin: 11.7rem auto 0;
  }

  .main-area .sec .grid_box .sec_text {
    grid-row: 2/3;
  }

  .main-area .sec .grid_box .sec_tax {
    margin: .5rem 0 0 7rem;
    grid-row: 3/4;
  }

  .main-area .sec03 .grid_box .sec_tax {
    margin: 0 0 0 7rem;
    grid-row: 3/4;
  }

  .main-area .sec02 .grid_box .sec_tax {
    margin: .25rem 0 0 7rem;
  }

  .main-area .sec05 .grid_box .sec_tax {
    margin: 2.7rem 0 0 7rem;
  }


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

  .mv_img {
    margin: 0 auto 3.3rem;
  }

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

  /************** before.after **************/
  .sec {
    position: relative;
  }

  .sec02::before,
  .sec04::before {
    margin: 0 calc(50% - 100vw);
    width: 100vw;
    height: 108.3%;
    top: 0rem;
    left: 32.2rem;
    content: '';
    display: block;
    position: absolute;
    top: 0rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #F4F4F4;
    z-index: -1;
  }

  .sec01::before,
  .sec03::before,
  .sec05::before {
    margin: 0 calc(50% - 100vw);
    left: auto;
    width: 100vw;
    height: 108.3%;
    top: 0rem;
    right: 32.4rem;
  }

  .sec_text::before,
  .sec_text::after {
    width: 2.2rem;
    height: 1.6rem;
  }

  .sec_text::before {
    left: -13.2%;
    top: -10.5%;
  }

  .sec_text::after {
    bottom: 19.9%;
    right: -10.3%;
  }

  .sec02 .sec_text::before {
    left: -13%;
    top: -11%;
  }

  .sec02 .sec_text::after {
    bottom: 16.6%;
    right: -16.5%;
  }

  .sec03 .sec_text::before {
    top: -13%;
    left: -20%;
  }

  .sec03 .sec_text::after {
    bottom: 22%;
    right: -17%;
  }

  .sec04 .sec_text::before {
    top: -13%;
    left: -16%;
  }

  .sec04 .sec_text::after {
    bottom: 19%;
    right: -20%;
  }

  .sec05 .sec_text::before {
    top: -11.2%;
    left: -17.3%;
  }

  .sec05 .sec_text::after {
    bottom: 1.6%;
    right: -14%;
  }


/************** btn **************/
  .sec_btn {
    padding: 0 0 16rem;
    position: relative;
    z-index: 10;
  }

  .sec_btn a {
    margin: 0 auto;
    width: 24rem;
    height: 5rem;
    font-size: 1.3rem;
  }
}

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

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