@charset "utf-8";
/* CSS Document */ :root {
  /*--- color ---*/
  --color-base: #F4E4D5;
  --color-base2:#FBF5E9;
  --color-sub: #000000;
  --color-accent1: #CE6663;
  --color-accent2: #F4A785;
  /*--- font-size 16px → 10px ---*/
  font-size: 62.5%;
}

html{
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-sub);
  background: var(--color-base);
  font-size: 1.6rem;
}

h2 {
  color: var(--color-accent1);
}

h3 {
  font-size: 2.0rem;
}

.small {
  font-size: 1.4rem;
  font-weight: lighter;
}

p.cp {
  font-size: 2.2rem;
  line-height: 1.5em;
}

.caption {
  font-size: 1.4rem;
}

#add, #step, #point, #brand, #map {
  margin-top: -80px;
  padding-top: 80px;
}
 


@media screen and (max-width: 1260px) {
  .container {
    max-width: 1200px;
  
  }
}
/**--- 画面サイズによる表示切替　---**/



/*--- pc ---*/
  .display-sp, .display-sptb, .display-tb {
    display: none;
  }
  .display-tbpc, .display-pc, .display-sppc {
    display: block;
  }

/**--- コンテナ幅を超えて表示　---**/
.width-max {
  /*-- コンテナ幅を超えて画面幅いっぱい --*/
  margin: 0 calc(50% - 50vw) !important;
}
.width-max-overhang-right {
  /*-- コンテナ幅を超えて右側だけ画面幅いっぱい --*/
  margin-right: calc(50% - 50vw) !important;
}
.width-max-overhang-left {
  /*-- コンテナ幅を超えて左側だけ画面幅いっぱい --*/
  margin-left: calc(50% - 50vw) !important;
}
.width-max-shift-right { 
  /*-- コンテナをはみ出して右寄せ --*/
  margin-left: auto !important;
  margin-right: 0 !important;
}
.width-max-shift-left { 
  /*-- コンテナはみ出して左寄せ --*/
  margin-left: 0 !important;
  margin-right: auto !important;
}

/*--- tb ---*/
@media screen and (max-width: 768px) {
  .display-tb, .display-sptb,.display-tbpc {
    display: block;
  }
  .display-sp, .display-pc, .display-sppc  {
    display: none;
  }
}


/*--- mobile ---*/

@media screen and (max-width: 520px) {
  .display-sp, .display-sptb, .display-sppc  {
    display:block;
  }
  .display-tbpc, .display-pc ,.display-tb{
    display: none;
  }
}