﻿

.main-area {
  margin-bottom: calc(50* (100vw /375));
  font-family: var(--yugothic);
	font-weight: normal;
	overflow: hidden;
	box-sizing: border-box;
}

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

.sp_only {
	display: block;
}

.pc_only {
	display: none;
}

.img_box_shadow{
  box-shadow: 0 10px 25px 0 rgba(0, 0, 20, .1);
}


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

  .js_imgFadeIn_left {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  .js_imgFadeIn_center {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  }

  .js_imgFadeIn01 {
    opacity: 0;
    transition: transform 1s ease-in-out, 
    opacity 1s ease-in-out;
    transition-delay: 700ms;
  }

  .js_imgFadeIn02 {
    opacity: 0;
    transition: transform 1s ease-in-out, 
    opacity 1s ease-in-out;
    transition-delay: 900ms;
  }

  .js_imgFadeIn03 {
    opacity: 0;
    transition: transform 1s ease-in-out, 
    opacity 1s ease-in-out;
    transition-delay: 1100ms;
  }

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


/************** common **************/
  .sec {
    margin: 0 auto calc(60* (100vw /375));
  }

  /*** sec_ttl ***/
  .sec_ttl {
    position: relative;
    z-index: 5;
    pointer-events: none;
  }

  .sec_ttl .sec_main_ttl {
    margin-bottom: calc(6* (100vw /375));
    font-size: calc(58* (100vw /375));
    line-height: 0.96;
    letter-spacing: 0.025em;
    font-family: "baskerville-display-pt", serif;
    font-weight: 400;
    font-style: normal;
  }

  .sec_ttl .sec_sub_ttl {
    font-size: calc(13* (100vw /375));
    line-height: 1.69;
    letter-spacing: 0.075em;
    font-weight: 700;
    font-style: normal;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin-top: calc(18* (100vw /375));
    width: max-content;
    font-size: calc(12* (100vw /375));
    letter-spacing: 0.04em;
    line-height: 1.66;
    font-family: "pragmatica", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  /*** sec_text ***/
  .sec_text {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.075em;
    line-height: 1.92;
  }

  /*** flex_box ***/
  .flex_box {
    display: flex;
    flex-direction: column;
  }

  .flex_box_vertical {
    display: flex;
    flex-direction: column;
  }


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

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

  .mv_text01 {
    margin: 0 auto calc(14* (100vw /375));
    font-size: calc(19* (100vw /375));
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.57;
  }

  .mv_text02 {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.85;
    text-align: center;
  }


/************** sec01 **************/
  .sec01 {
    position: relative;
  }

  .sec01_bg{
    width: 100%;
    height: calc(751* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    background-color: #C7EBCF;
    z-index: -1;
  }

  .sec01_box {
    margin-bottom: calc(54* (100vw /375));
  }

  /*** sec01_box01 ***/
  .sec01_box01 {
    padding: calc(46* (100vw /375)) 0 0;
  }

  /*** sec01_sec_ttl ***/
  .sec01 .sec_ttl {
    margin-left: calc(20* (100vw /375));
    color: #23A069;
  }

  /*** sec01_model01 ***/
  .sec01_model01 {
    margin: calc(-70* (100vw /375)) 0 0 auto;
    width: calc(306* (100vw /375));
    align-items: flex-end
  }

  .sec01_model01 .sec_tax {
    margin-right: calc(14* (100vw /375));
  }

  /*** sec01_box02 ***/
  .sec01_box02 {
    margin: calc(-60* (100vw /375)) auto 0;
  }

  .sec01_box02_img {
    margin: 0 0 calc(16* (100vw /375)) calc(12* (100vw /375));
    width: calc(204* (100vw /375));
  }
  
  .sec01_box02 .sec_text {
    margin: 0 auto;
    width: calc(336* (100vw /375));
  }


  /************** sec02 **************/
  .sec02 {
    position: relative;
  }

  .sec02_bg{
    width: 100%;
    height: calc(632* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    background-color: #F5C1D9;
    z-index: -1;
  }

  .sec02_box {
    margin-bottom: calc(54* (100vw /375));
  }

  /*** sec02_box01 ***/
  .sec02_box01 {
    margin-bottom: calc(73* (100vw /375));
    padding: calc(46* (100vw /375)) 0 0;
    display: flex;
    flex-direction: column-reverse;
  }

  .sec02_box01_img {
    width: calc(330* (100vw /375));
  }

  /*** sec02_sec_ttl ***/
  .sec02 .sec_ttl {
    margin: calc(-130* (100vw /375)) calc(18* (100vw /375)) 0 auto;
    color: #FFFFFF;
  }
  
  /*** sec02_box02 ***/
  .sec02_box02 {
    margin: 0 auto calc(44* (100vw /375));
  }

  .sec02_box02 .sec_tax {
    margin: calc(18* (100vw /375)) auto calc(33* (100vw /375));
  }

  .sec02_box02_text {
    margin: 0 auto;
    width: calc(335* (100vw /375));
  }

  /*** sec02_box03 ***/
  .sec02_box03 {
    align-items: center;
  }

  .sec02_box03_img01 {
    margin-bottom: calc(60* (100vw /375));
    width: calc(267* (100vw /375));
  }

  .sec02_box03_img02 {
    width: calc(335* (100vw /375));
  }

  .sec02_box03 .sec_tax {
    margin-bottom: calc(50* (100vw /375));
  }

  .sec02_box03_text_box {
    width: calc(335* (100vw /375));
  }

  .sec02_box03_text_1 {
    margin-bottom: calc(10* (100vw /375));
    font-size: calc(16* (100vw /375));
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.87;
    text-align: center;
  }


/************** sec03 **************/
  .sec03 {
    position: relative;
  }

  .sec03_bg{
    width: 100%;
    height: calc(751* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    background-color: #D6EDF7;
    z-index: -1;
  }

  .sec03_box {
    margin-bottom: calc(66* (100vw /375));
  }

  /*** sec03_box01 ***/
  .sec03_box01 {
    padding: calc(46* (100vw /375)) 0 0;
  }

  /*** sec03_sec_ttl ***/
  .sec03 .sec_ttl {
    margin-left: calc(20* (100vw /375));
    color: #33B8EC;
  }

  .sec03 .sec_main_ttl {
    margin-bottom: calc(1* (100vw /375));
  }

  /*** sec03_model01 ***/
  .sec03_model01 {
    margin: calc(-67* (100vw /375)) 0 0 auto;
    width: calc(306* (100vw /375));
    align-items: flex-end
  }

  .sec03_model01 .sec_tax {
    margin-right: calc(14* (100vw /375));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  /*** sec03_box02 ***/
  .sec03_box02 {
    margin: calc(-40* (100vw /375)) auto calc(55* (100vw /375));
  }

  .sec03_box02_img {
    margin: 0 0 calc(12* (100vw /375)) calc(4* (100vw /375));
    width: calc(214* (100vw /375));
  }

  .sec03_box02 .sec_text {
    margin: 0 auto;
    width: calc(336* (100vw /375));
  }

  /*** sec03_box03 ***/
  .sec03_box03 {
    align-items: center;
  }

  .sec03_box03_img01 {
    width: calc(335* (100vw /375));
    pointer-events: none;
  }

  .sec03_box03_img02 {
    width: calc(335* (100vw /375));
  }

  .sec03_box03 .sec_tax {
    margin-bottom: calc(53* (100vw /375));
    text-align: center;
  }

  .sec03_box03_text_box {
    width: calc(335* (100vw /375));
  }

  .sec03_box03_text_1 {
    margin-bottom: calc(10* (100vw /375));
    font-size: calc(16* (100vw /375));
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.87;
    text-align: center;
  }

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

  .sec04_bg{
    width: 100%;
    height: calc(330* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    top: calc(30* (100vw /375));
    background-size: contain;
    background-color: #F4F5B3;
    z-index: -1;
  }

  /*** sec04_box01 ***/

  /*** sec04_sec_ttl ***/
  .sec04 .sec_ttl {
    margin: 0 auto calc(35* (100vw /375));
    color: #C7C752;
    text-align-last: center;
  }

  .sec04_box01_img01 {
    margin: 0 auto calc(60* (100vw /375));
    width: calc(335* (100vw /375));
  }

  .sec04_box01_img02 {
    margin: 0 auto;
    width: calc(267* (100vw /375));
    pointer-events: none;
  }

  .sec04 .sec_tax {
    margin: calc(18* (100vw /375)) auto calc(50* (100vw /375));
    text-align: center;
  }

  .sec04_box01_img03 {
    margin-bottom: calc(33* (100vw /375));
  }

  .sec04_box01_text_1 {
    margin: 0 auto;
    width: calc(335* (100vw /375));
  }

  
/************** sec_btn **************/
  .sec_btn a {
    width: calc(260 * (100vw / 375));
    height: calc(45 * (100vw / 375));
    font-size: calc(13* (100vw /375));
    font-weight: 600;
    font-family: var(--hirakaku);
  }

  .pink_btn {
    margin: 0 auto calc(14* (100vw /375));
    background-color: #FFAFB5;
    color: var(--white);
  }

  .pink_btn:hover {
    border: solid 1px #FFAFB5;
    background-color: var(--white);
    color: #FFAFB5;
  }

  .white_btn {
    margin: 0 auto;
    background-color: var(--white);
    color: var(--black);
    border: solid 1px var(--black);
  }

  .white_btn:hover {
    background-color: var(--black);
    color: var(--white);
    opacity: 1;
  }


/* ===============================================
### PC用デザイン###
=============================================== */
  @media screen and (min-width:768px) {

  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  .main-area {
    margin-bottom: 8rem;
  }


  /************** js **************/
  .js_imgFadeIn_right {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateX(100%);
  }

  .js_imgFadeIn_left {
    opacity: 0;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    transform: translateX(-100%);
  }

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


/************** common **************/
  .sec {
    margin: 0 auto 10.7rem;
    width: 100rem;
    position: relative;
  }

  /*** sec_ttl ***/
  .sec_ttl .sec_main_ttl {
    margin: 0 0 1.2rem;
    font-size: 8rem;
    line-height: 0.975;
  }

  .sec_ttl .sec_sub_ttl {
    margin-left: .2rem;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin-top: 0;
    width: max-content;
    font-size: 1.2rem;
    line-height: 2;
  }

  /*** sec_text ***/
  .sec_text {
    font-size: 1.4rem;;
    line-height: 2;
  }

  /*** flex_box ***/
  .flex_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .flex_box_vertical {
    display: flex;
    flex-direction: column;
  }


/************** mv **************/
  .mv {
    margin: 0 auto 9rem;
    width: 120rem;
  }

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

  .mv_text01 {
    margin: 0 auto 2rem;
    font-size: 2rem;
    line-height: 1.2;
  }

  .mv_text02 {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    line-height: 2.26;
  }


/************** sec01 **************/
  .sec01 {
    margin: 0 auto 9rem;
    max-width: 140rem;
  }

  .sec01_box {
    margin: 0 auto;
    height: 89.2rem;
  }

  .sec01_bg{
    width: 100vw;
    height: 50rem;
    top: 18rem;
    left: 16.3rem;
  }

  /*** sec01_box01 ***/
  .sec01_box01 {
    padding: 0;
    position: relative;
  }

  /*** sec01_sec_ttl ***/
  .sec01 .sec_ttl {
    margin-left: 0;
    position: absolute;
    top: 13.5rem;
    left: 13.5rem;
    z-index: 10;
  }

  /*** sec01_model01 ***/
  .sec01_model01 {
    margin: 0 0 0 auto;
    width: 62.5rem;
    align-items: flex-end;
    position: absolute;
    right: .4rem;
    left: auto;
  }

  .sec01_box01_img {
    width: 45rem;
  }

  .sec01_model01 .sec_tax {
    margin-right: 0;
  }

  /*** sec01_box02 ***/
  .sec01_box02 {
    margin: 0;
    width: 86.3rem;
    position: absolute;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    pointer-events: none;
  }

  .sec01_box02_img {
    margin: 0;
    width: 33.4rem;
  }

  .sec01_box02 .sec_text {
    margin: auto 0 5.8rem 0;
    width: 47rem;
  }


/************** sec02 **************/
  .sec02 {
    margin: 0 auto 9.4rem;
    max-width: 140rem;
  }

  .sec02_bg{
    width: 100vw;
    height: 50rem;
    top: 6.4rem;
    right: 16.3rem;
    left: auto;
  }

  .sec02_box {
    margin-bottom: 0;
  }

  /*** sec02_box01 ***/
  .sec02_box01 {
    margin: 0 0 8rem 5rem;
    padding: 0;
    width: 80.8rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  .sec02_box01_img {
    width: 45rem;
  }

  /*** sec02_sec_ttl ***/
  .sec02 .sec_ttl {
    margin: 16.4rem 0 0 0;
  }

  /*** sec02_box02 ***/
  .sec02_box02 {
    margin: 0 auto 7.4rem;
    width: 76rem;
  }

  .sec02_box02 .sec_tax {
    margin: 1.9rem auto 4rem;
    text-align: center;
  }

  .sec02_box02_text {
    margin: 0 auto;
    width: 57rem;
  }

  /*** sec02_box03 ***/
  .sec02_box03_img01 {
    margin: 0 0  8rem;
    width: 36rem;
  }

  .sec02_box03_img02 {
    width: 42rem;
  }

  .sec02_box03 .sec_tax {
    margin: 1.9rem 0 5.7rem;
  }

  .sec02_box03_text_box {
    width: 57rem;
  }

  .sec02_box03_text_1 {
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto;
    max-width: 140rem;
  }

  .sec03_bg{
    width: 100vw;
    height: 50rem;
    top: 18rem;
    left: 16.3rem;
  }

  /*** sec03_box01 ***/
  .sec03_box01 {
    margin: 0 0 6.7rem 14.2rem;
    width: 87.2rem;
    height: 89.2rem;
    padding: 0;
    position: relative;
  }

  /*** sec03_sec_ttl ***/
  .sec03 .sec_ttl {
    margin-left: 0;
    position: absolute;
    top: 13.5rem;
    left: -.8rem;
    z-index: 10;
  }

  /*** sec03_model01 ***/
  .sec03_model01 {
    margin: 0 0 0 auto;
    width: 63.9rem;
    align-items: flex-end;
    position: absolute;
    right: .4rem;
    left: auto;
  }

  .sec03_box01_img {
    width: 45rem;
  }

  .sec03_model01 .sec_tax {
    margin: 0 0 0 0;
    align-items: flex-start;
  }

  /*** sec03_box02 ***/
  .sec03_box02 {
    margin: 0;
    width: 87.3rem;
    position: absolute;
    top: 50.5rem;
    left: 12.6rem;
    pointer-events: none;
  }

  .sec03_box02_img {
    margin: 0;
    width: 35rem;
  }

  .sec03_box02 .sec_text {
    margin: auto 0 4.2rem 0;
    width: 47rem;
  }

  /*** sec03_box03 ***/
  .sec03_box03 {
    align-items: center;
  }

  .sec03_box03_img01 {
    margin-bottom: 2.1rem;
    width: 42rem;
  }

  .sec03_box03 .sec_tax {
    margin-bottom: 4rem;
    text-align: left;
  }

  .sec03_box03_text_box {
    width: 57rem;
  }

  .sec03_box03_text_1 {
    margin-bottom: 2.8rem;
    font-size: 1.6rem;
    letter-spacing: 0.075em;
    line-height: 1.875;
  }

  /************** sec04 **************/
  .sec04 {
    margin: 0 auto;
    position: relative;
  }

  .sec04_bg{
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 50rem;
    top: 5rem;
  }

  .sec04_box {
    margin-bottom: 10.4rem;
  }

  /*** sec04_sec_ttl ***/
  .sec04 .sec_ttl {
    margin: 0 auto 3rem;
  }

  .sec04_box01_img01 {
    margin: 0 auto 8rem;
    width: 45rem;
  }

  .sec04_box01_img02 {
    margin: 0 auto;
    width: 36rem;
  }

  .sec04 .sec_tax {
    margin: 2.1rem auto 7.8rem;
    text-align: center;
  }

  .sec04_box01_img03 {
    margin: 0 auto 4.2rem;
    width: 76rem;
  }

  .sec04_box01_text_1 {
    margin: 0 auto;
    width: 57rem;
  }


  /************** sec_btn **************/
  .sec_btn a {
    width: 36rem;
    max-width: 36rem;
    height: 6rem;
    max-height: 6rem;
    font-size: 1.5rem;
  }

  .pink_btn {
    margin: 0 auto 2rem;
  }

}


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

