@charset "UTF-8";


/* Start with m+ LP */ 

.bg-wrap {
  background: #f8f6f2;
}

#lp-m-plus01 {
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  color:#1f2636;
  line-height: 1.8;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.01em;
  @media only screen and (min-width: 600px) {
 font-size: 13px;
 letter-spacing: 0.04em;
  }
  @media only screen and (min-width: 1025px) {
    font-size: 14px;
  }
}

/* ----- その他フォント関連設定（ネスト） ----- */
 h2, h3, p {
  margin:1rem 0;
  padding: 0;
}
h2, h3, h4 {
  font-weight: 300;
  line-height: 1.3;
  color:#30416c;
}
h5 {
  font-weight: 300;
  line-height: 1;
  margin:1rem 0;
}



/* 英字フォント */
.outfit-light {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
}
/* フォントサイズ */
.fz-en-hero {font-size: 45px;}
.fz-en-heading-L {font-size: 34px; line-height: 1; margin-bottom: 0;}
.fz-en-heading-M {font-size: 28px;}
.fz-en-heading-S {font-size: 22px;}

.fz-jp-heading-XL {font-size: 20px; letter-spacing: 0;}
.fz-jp-heading-L {font-size: 17px;}
.fz-jp-heading-M {font-size: 16px;}
.fz-jp-heading-S {font-size: 14px;}

.fz-jp-body-M {font-size: 13px;}
 
@media only screen and (min-width: 600px) {
.fz-en-hero {font-size: 75px;}
.fz-en-heading-L {font-size: 50px;}
.fz-en-heading-M {font-size: 41px;}
.fz-en-heading-S {font-size: 28px;}

.fz-jp-heading-XL {font-size: 28px;}
.fz-jp-heading-L {font-size: 24px;}
.fz-jp-heading-M {font-size: 20px;}
.fz-jp-heading-S {font-size: 16px;}

.fz-jp-body-M {font-size: 14px;}
  }
@media only screen and (min-width: 1025px) {
.fz-en-hero {font-size: 100px;}

.fz-en-heading-L {font-size: 68px;}
.fz-en-heading-M {font-size: 54px;}
.fz-en-heading-S {font-size: 36px;}

.fz-jp-heading-XL {font-size: 44px;}
.fz-jp-heading-L {font-size: 36px;}
.fz-jp-heading-M {font-size: 25px;}
.fz-jp-heading-S {font-size: 18px;}

.fz-jp-body-M {font-size: 16px;}
  }


.txt-mplus {
  font-size: 200%;
  padding: 0 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 100 !important;
}
.color-primary {
  color: #30416c;
}
.color-secondary {
  color: #bea283; 
}





/* ---- LP各セクションスタイル ----- */
/* コンセプト */
.concept-section {
  max-width :1366px;
  margin: 0 auto;
  padding:1rem 1rem 2rem;
  @media only screen and (min-width: 600px) {
    padding:50px 30px 80px;
  }
  @media only screen and (min-width: 1025px) {
    padding:80px;         
  }
  .section-inner { 
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom:2rem;
  h3 {
    margin: 1rem 0;
    @media only screen and (min-width: 600px) {
    margin: 1rem 0 2rem;
  }
  @media only screen and (min-width: 1025px) {
    margin: 2rem 0 3rem;      
  }
  }
 
  @media only screen and (min-width: 600px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 40px; 
    padding-bottom:50px;

    .concept-heading {
      flex:0 0 390px;
  }
  .concept-image {
    flex:0 0 1;
  }
  }
  @media only screen and (min-width: 1025px) {
     padding-bottom:80px; 
     
     .concept-heading {
      flex:0 0 710px;
  }
  .concept-image {
    flex:0 0 1;
  }       
  }  
  }
    .image-wide {
      display: block;
      width: 100%;
  }
}

/* SPEC */
.spec-section {
  .section-inner { 
   max-width :1366px;
  margin: 0 auto;
  padding:1rem;

  @media only screen and (min-width: 600px) {
    padding:40px 30px;
  }
  @media only screen and (min-width: 1025px) {
    padding:80px;         
  } 
 .spec-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* モバイル：2列 */
  gap: 16px;
  padding:1rem 0;
  @media (min-width: 600px) {
    grid-template-columns: repeat(4, 1fr); /* タブレット・PC：4列 */
    gap: 24px;
    padding:2rem 0;
}
@media only screen and (min-width: 1025px) {
    padding:4rem 0;         
  } 
}

 .standard-box {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* モバイル：2列 */
  gap: 8px;

  @media (min-width: 600px) {
    grid-template-columns: repeat(3, 1fr); /* タブレット・PC：4列 */
    gap: 24px;
    padding:1rem 0 0;
}
@media only screen and (min-width: 1025px) {
    padding:2rem 0 0;         
  } 
}
  }
}

/* デザイン　ピックアップ */
.pickup-section {
 .section-inner{
  max-width :1366px;
  margin: 0 auto;
  padding:1rem;
  @media only screen and (min-width: 600px) {
    padding:30px;
  }
   @media only screen and (min-width: 1025px) {
    padding: 80px;
  }
 
.pickup-item {
  display: flex;
  flex-direction: column;  
  border-bottom: dotted 2px #ccc;
  margin-bottom:1rem;
  padding-bottom: 1rem;
  

    p {
      margin:1rem 0;
       @media only screen and (min-width: 1025px) {
        margin:2rem 0;
  }
    }
    .pickup-image2 {
    display: flex;
    flex-direction: row;
    gap: 8px;
     .ph_design {
    flex:0 0 1;
  }
  }  

  @media only screen and (min-width: 600px) {
    padding-bottom: 0;
    margin-bottom: 50px;
    flex-direction: row;
    gap: 30px;
    align-items: flex-end;
    border:none;

    &:nth-child(even) {
      flex-direction: row-reverse;
    }

  .pickup-text {
    flex:0 0 1;
  }
  .pickup-image {
    flex:0 0 55%;
  }
  }
   @media only screen and (min-width: 1025px) {
    margin-bottom: 80px;
    gap: 40px;

     .pickup-text {
    flex:0 0 1;
  }
  .pickup-image {
    flex:0 0 51%;
  }
  }
}
 }
 .pickup-item:last-child {
    border: none;
    padding-bottom:0;
  }
}



/* COST */
.cost-section {
  .section-inner { 
   max-width :1366px;
  margin: 0 auto;
  padding:1rem 1rem 2rem;

  @media only screen and (min-width: 600px) {
    padding:40px 30px 80px;
  }
  @media only screen and (min-width: 1025px) {
    padding:80px;         
  } 
  
  .fukidashi {
position: relative;
display: inline-block;
padding:0 1rem;
letter-spacing: 0;
@media only screen and (min-width: 600px) {
    padding:0 1rem;
    letter-spacing: 0.1em;
  }


&::before, &::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3px;
  height: 44px;
  background-color: #bea283;
  translate: 0 -50%;
   @media only screen and (min-width: 600px) {
    width: 6px;
  height: 70px;    
  }
}
&::before {
  right: 0;
  transform: rotate(30deg); 
  @media only screen and (min-width: 600px) {
    right: -16px;   
  }
}
&::after {
  left: 0; 
  transform: rotate(-30deg);
  @media only screen and (min-width: 600px) {
   left: -16px;  
  }
}
    }
  
 .cost-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* モバイル：2列 */
  gap: 16px;
  padding:0;
  color:#30416c;
  line-height: 1.5;
  @media (min-width: 600px) {
    grid-template-columns: repeat(4, 1fr); /* タブレット・PC：4列 */
    gap: 24px;
    padding:2rem 0;
}
@media only screen and (min-width: 1025px) {
    padding:1rem 0;         
  } 
}
.cost-info {
  margin-top: 2rem;
  padding: 1rem;
  border: 4px solid #bea283;
  background:#fff;
  display: flex;
  flex-direction: column;
  gap: 0;

  
  ul {
  list-style: none;
  margin: 0 ;
  padding: 0;

  li {
  position: relative;
  padding-left: 1.2em; 
  margin-bottom: 0.5em;
  line-height: 1.6;
  &::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.3em;
  height: 0.3em;
  background-color: #bea283;
  border-radius: 50%;
}
}
}
p + h5 {
    margin-top: 2rem;
  }
  p, ul {
    margin-left: 1rem;
  }

 
  @media only screen and (min-width: 600px) {
    flex-direction: row;
    align-items: center;
    gap: 40px; 
    padding: 1.5rem;
}
@media only screen and (min-width: 1025px) {
           
  } 

  }
}
}




/* ********************************************* */

/* ハンバーガーメニュー */
.hamburger-overlay {
  background-color: rgba(48, 65, 108, 0.95);
}

.nav-overlay {
  background-color: rgba(48, 65, 108, 0.99);
}
.nav-overlay__link:hover {
  color: #bea283;
}