@charset "utf-8";

/*---------------------- common CSS start---------------------- */
@import url('https://use.typekit.net/rsv8klx.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --font_color: #8B0113;
  --fontsub_color: #707070;
  --bg_color: #5F5F5F;

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 180px;
}

ul {
  list-style-type: none;
}

body {
  color: var(--font_color);
  font-family: "Noto Sans JP", serif;
}


img {
  max-width: 100%;
  vertical-align: bottom;
}



h2 img {
  display: block;
  width: clamp(12.5rem, 9.37rem + 15.65vw, 18.75rem);
  /* 200-300px 320px-959px */
  margin-right: auto;
  margin-left: auto;
}

h3 {
  /* font-weight: 500; */
  font-size: clamp(1.125rem, 1rem + 0.63vw, 1.375rem);
  /* 18-22px 320-959px */
  line-height: 2.8;
  text-align: center;
}

@media(min-width: 960px) {
  h3 {
    text-align: left;
    line-height: 1.5;
    font-size: 20px;
  }
}

h4 {}

section {}

section h2 {}

p {
  line-height: 1.8;
  letter-spacing: .1rem;
  text-align: justify;
  /* word-break: auto-phrase; */
}

iframe {
  display: block;
}


.inner {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}




/* common media query start*/
.PC_only,
.TB_only,
.PC_only_2,
.PC_only_3 {
  display: none !important;
}

@media(min-width: 441px) {
  .SP_only {
    display: none;
  }

  .TB_only {
    display: block !important;
  }
}

@media(min-width: 768px) {
  .PC_only {
    display: block !important;
  }

}

@media(min-width: 960px) {
  .PC_only_3 {
    display: block !important;
  }

  .SP_only_2 {
    display: none;
  }

}


@media(min-width: 1280px) {
  .inner {
    width: 90%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
  }

  .TB_only {
    display: none !important;
  }


}

/* common media query End*/
/*---------------------- common CSS end---------------------- */

/*---------------------- header CSS start------------------------ */
header {
  position: relative;
}

.header_tuiyu {
  width: 100%;
  height: 56px;
  background-color: #fff;
  position: fixed;
  top: 0px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 4px rgba(139, 1, 19, .1);
}

.header_tuiyu img {
  height: 56px;
}

/* 最初はアニメーションなし（待機状態） */
.header_logo {
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 0;
  width: 230px;

  opacity: 0;
  transform: translateY(-80px);
}

/* ロード完了後に追加されるクラス */
.header_logo.active {
  animation: dropIn 0.8s ease-out forwards;
  animation-delay: 0.3s;
  /* ロード消滅から少し間を空ける */
}

@keyframes dropIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media(min-width: 960px) {
  .header_tuiyu {
    height: 74px;
    top: -1px;
  }

  .header_tuiyu img {
    height: 74px;
  }

  .header_logo {
    width: clamp(17.5rem, -1.389rem + 31.48vw, 28.125rem);
    /* 280-450px 960-1500px */
  }
}

/* header_tuiyu_sub */
.header_tuiyu_sub {
  width: 100%;
  height: 56px;
  background-color: #fff;
  /* position: fixed; */
  top: 0px;
  z-index: 10;
  /* opacity: 0; */
  /* visibility: hidden; */
  box-shadow: 0 0 4px rgba(139, 1, 19, .1);
}

.header_tuiyu_sub img {
  height: 56px;
}

@media(min-width: 960px) {
  .header_tuiyu_sub {
    height: 74px;
    position: relative;
    top: -1px;
  }

  .header_tuiyu_sub img {
    height: 74px;
  }

}

#overlay-button {
  position: fixed;
  width: 56px;
  height: 56px;
  right: 0;
  top: 0;
  padding: 26px 11px;
  z-index: 5000;
  cursor: pointer;
  user-select: none;
  content: "";
  background-color: #fff;
  background-image: url(../images/hamburger_btn.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
  transform-origin: center;
}

#overlay-button:hover {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 8px 20px rgba(255, 150, 150, 0.3);
  animation: purupuru-img 0.4s ease-in-out;
}

@keyframes purupuru-img {
  0% {
    transform: scale(1.08) rotate(-2deg);
  }

  25% {
    transform: scale(1.1) rotate(1deg);
  }

  50% {
    transform: scale(1.05) rotate(-1deg);
  }

  75% {
    transform: scale(1.1) rotate(1deg);
  }

  100% {
    transform: scale(1.08) rotate(-2deg);
  }
}

#overlay-button span {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  /* background-color: #FFF; */
  /* border: 2px dotted var(--font_color); */
  position: absolute;
  top: 3px;
  right: 3px;
  display: block;
  transition: all .2s ease-in-out;
}





#overlay-button span:before {
  height: 3px;
  width: 33px;
  border-radius: 16px;
  background-color: var(--font_color);
  position: absolute;
  content: "";
  transition: all .2s ease-in-out;
  right: 9px;
  top: 8px;
  visibility: visible;
}

#overlay-button span:after {
  height: 3px;
  width: 33px;
  border-radius: 16px;
  background-color: var(--font_color);
  position: absolute;
  right: 9px;
  top: 17px;
  content: "";
  transition: all .2s ease-in-out;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]:checked~#overlay {
  visibility: visible;
}

input[type=checkbox]:checked~#overlay-button span:before {
  transform: rotate(45deg) translate(3px, 7px);
  width: 29px;
}

input[type=checkbox]:checked~#overlay-button span:after {
  transform: rotate(-47deg) translate(0px, -5px);
  width: 28px;
}

#overlay {
  height: 100vh;
  width: 100vw;
  z-index: 10;
  visibility: hidden;
  position: fixed;
  top: 0;
  background-color: #fff;
}

#overlay ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  height: 100vh;
  /* padding-top: 16px; */
  background-color: #fff;
}

#overlay ul li {
  padding: 16px;
  font-size: 12px;
  letter-spacing: 4px;
}

#overlay ul li:first-of-type {
  padding-top: 50px;
}

#overlay ul li a {
  text-decoration: none;
  font-size: 1.5em;
}

#overlay ul li a:hover {
  color: #000 !important;
}

@media(min-width: 768px) {
  #overlay-button {
    /* right: 4px; */
    /* top: -1px; */
  }
}

@media(min-width: 960px) {
  #overlay-button {
    position: absolute;
    top: -73px;
    right: 24px;
    width: 74px;
    height: 74px;
  }

  .sub #overlay-button {
    top: 0px;
  }

  #overlay-button span:after {
    right: 18px;
    top: 23px;
  }

  #overlay-button span:before {
    right: 18px;
    top: 14px;
  }

  #overlay {
    z-index: 10;
    top: 0;
    right: 0;
    width: 70%;
  }

  #overlay ul {
    padding-top: 56px;
  }

  #overlay ul li {
    padding-top: 8px;
  }

  #overlay ul li:first-of-type {
    padding-top: 8px;
  }
}


/* PC only menu */
.PC_menu {
  display: none;
}

@media(min-width: 960px) {
  .PC_menu {
    display: flex !important;
    justify-content: space-between;
    width: calc(100% - 48px);
    height: 74px;
    position: absolute;
    top: -97px;
    z-index: 6;
    background-color: rgba(255, 255, 255, 1);
    margin-right: 24px;
    margin-left: 24px;
    margin-top: 24px;
    /*デフォルトで非表示にする*/
    /* opacity: 0;
    visibility: hidden; */
  }

  @media(min-width: 960px) {
    .header_tuiyu .PC_only_2 {
      display: block !important;
      z-index: 11;
    }

    .header_tuiyu .PC_only_2 ul {
      justify-content: end;
    }
  }

  /*このクラスが付与されると表示する*/
  .active {
    opacity: 1;
    visibility: visible;
  }

  .PC_menu ul {
    display: flex;
    margin-right: 96px;
  }

  .PC_menu ul li {
    font-size: 14px;
    letter-spacing: 4px;
    padding: 10px 24px 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
    transform-origin: center;
  }

  .PC_menu ul li:hover {
    transform: scale(1.08) rotate(-2deg);
    animation: purupuru-img 0.4s ease-in-out;
  }

  @keyframes purupuru-img {
    0% {
      transform: scale(1.08) rotate(-2deg);
    }

    25% {
      transform: scale(1.1) rotate(1deg);
    }

    50% {
      transform: scale(1.05) rotate(-1deg);
    }

    75% {
      transform: scale(1.1) rotate(1deg);
    }

    100% {
      transform: scale(1.08) rotate(-2deg);
    }
  }

  .PC_menu ul li span {
    display: block;
    margin-top: -8px;
  }

  .PC_menu ul img {
    width: auto;
    height: 40px;
    object-fit: inherit;
  }

  .PC_menu_logo {
    height: 74px !important;
    width: auto;
    opacity: 0;
    visibility: hidden;
  }


  .header_tuiyu_sub .PC_menu ul {
    height: 76px;
    margin-top: 76px;
  }
}


/*---------------------- header CSS end------------------------ */
/*---------------------- mainVisual CSS start------------------------ */
.mainVisual {
  margin-top: -24px;
  position: relative;
}

.scroll {
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: -58px;
  left: 13px;
}

.scroll .scroll_logo {
  width: 100px;
  transform: rotate(-13deg);
}

.scroll .scroll_yazirusi {
  width: 100px;
  transform: rotate(94deg);
  display: block;
  margin-top: 43px;
}

.mainVisual .SP_only {
  display: block;
  width: 93%;
  margin-right: 0;
  margin-left: auto;
}

@media(min-width: 441px) {
  .mainVisual .SP_only {
    display: none;
  }

  .mainVisual .TB_only {
    display: block;
    width: 93%;
    margin-right: 0;
    margin-left: auto;
  }
}

@media(min-width: 768px) {
  .mainVisual .TB_only {
    display: none !important;
  }

  .mainVisual .PC_only {
    display: block;
    width: 84%;
    margin-right: 0;
    margin-left: auto;
  }
}

@media(min-width: 960px) {
  .top_body {
    background-color: var(--font_color);
  }

  .mainVisual {
    background-color: #fff;
    margin: 98px 24px 24px;
    height: 400px;
    /* position: relative; */
  }

  .mainVisual::after {
    content: "";
    background-image: url(../images/ashirai_oji.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: clamp(0.438rem, -3.229rem + 6.11vw, 2.5rem);
    width: clamp(8rem, 2rem + 10vw, 11.375rem);
    /* height: clamp(6.125rem, 1.458rem + 7.78vw, 8.75rem); */
    height: clamp(11.125rem, 3.458rem + 12.78vw, 15.438rem);
  }

  .scroll {
    bottom: -216px;
  }

}


@media(min-width: 1188px) {
  .scroll {
    bottom: -321px;
  }

}

@media(min-width: 1280px) {
  .mainVisual {
    height: 600px;
  }

  .mainVisual .PC_only {
    height: 130%;
  }

  .scroll {
    bottom: -216px;
    left: 70px;
  }
}

@media(min-width: 1414px) {
  .mainVisual .PC_only {
    /* height: 200%; */
  }
}

/*---------------------- mainVisual CSS end------------------------ */
/*---------------------- home_read CSS start------------------------ */
.home_read {
  background-color: var(--font_color);
  color: #fff;
  margin-top: -120px;
}

.home_read_textBOX {
  padding-top: 216px;
}

.line {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

.home_read_text {
  font-size: clamp(0.875rem, 0.812rem + 0.31vw, 1rem);
  /* font-weight: 300; */
  line-height: 2.5;
  padding-right: 16px;
  padding-left: 16px;
}

.home_read_IMG {
  margin-top: 124px;
  position: relative;
}

.home_read_IMG::before {
  content: "";
  background-image: url(../images/ashirai_Smile.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 84px;
  position: absolute;
  top: -100px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 960px) {
  .line {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .home_read {
    margin-top: clamp(10.25rem, -11.5rem + 36.25vw, 17.5rem);
  }

  .home_read_textBOX {
    padding-top: 56px;
  }

  .home_read_wrap {
    width: 90%;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    gap: clamp(1.5rem, -3rem + 7.5vw, 3rem);
    align-items: center;
  }

  .home_read_text {
    line-height: 2;
    padding-right: 0;
    padding-left: 0;
  }

  .home_read_IMG::before {
    top: inherit;
    right: inherit;
    left: -350px;
    bottom: 0px;
  }
}

@media(min-width: 1280px) {
  .home_read {
    margin-top: 153px;
  }
}

/*---------------------- home_read CSS end------------------------ */


/*---------------------- home_bread CSS start------------------------- */
.home_bread {
  margin-top: 96px;
  opacity: 0;
  transform: translateX(100px);
  /* 右からスライド */
  transition: all 1s ease-out;
}

.home_bread.scrollin {
  opacity: 1;
  transform: translateX(0);
}

.home_bread_IMG {
  margin-top: 248px;
  position: relative;
}

.home_bread_IMG::before {
  content: "";
  background-image: url(../images/ashirai_family_02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 300px;
  height: 200px;
  position: absolute;
  top: -224px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 960px) {
  .home_bread {
    margin-top: 120px;
    background-color: #fff;
    padding-bottom: 120px;
  }

  .home_bread_wrap {
    width: 90%;
    height: 556px;
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
    /* padding-top: -120px; */
    padding-bottom: 56px;
    display: flex;
    flex-direction: row-reverse;
    gap: clamp(1.5rem, -3rem + 7.5vw, 3rem);
    align-items: end;
  }

  .home_bread_textBOX {
    align-self: anchor-center;
  }

  .home_bread_title {
    margin-top: 16px;
  }

  .home_bread_IMG::before {
    top: 75%;
    left: 130%;
  }
}


/* readmore btn */
.readmore_btn {
  display: block;
  width: 200px;
  margin: 40px auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.readmore_btn:hover {
  animation: purupuru-btn 0.4s ease-in-out;
  transform: scale(1.05) rotate(-2deg);
  /* box-shadow: 0 8px 20px rgba(255, 160, 160, 0.3); */
}

@keyframes purupuru-btn {
  0% {
    transform: scale(1.05) rotate(-2deg);
  }

  25% {
    transform: scale(1.08) rotate(1deg);
  }

  50% {
    transform: scale(1.03) rotate(-1deg);
  }

  75% {
    transform: scale(1.08) rotate(1deg);
  }

  100% {
    transform: scale(1.05) rotate(-2deg);
  }
}

@media(min-width: 960px) {
  .readmore_btn {
    padding-top: 56px;
  }
}

/*---------------------- home_bread CSS end------------------------ */


/* ----------------------home_lineUP start------------------------*/

.home_lineUP {
  background-image: url(../images/check02.webp);
  background-repeat: repeat;
  background-size: 60%;
  background-position: bottom;
  padding-top: 10%;
  padding-bottom: 10%;
}

.home_lineUP_inner {
  background-color: #fff;
  padding-top: 10%;
  padding-bottom: 10%;
}

.home_lineUP_main_title::after {
  content: "商品ラインナップ";
  font-size: clamp(0.688rem, 0.594rem + 0.47vw, 0.875rem);
  /* 11-14px 320-959px */
  /* font-weight: 300; */
  display: block;
  width: max-content;
  margin-top: -22px;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 960px) {
  .home_lineUP {
    background-size: 30%;
  }
}

/* 個々の設定 */
.home_lineUP_wrap {
  margin-top: 56px;
}

.home_lineUP_IMG {
  width: clamp(12.5rem, 6.25rem + 31.25vw, 25rem);
  /* 200-400px 320-959px */
  margin-right: auto;
  margin-left: auto;
}

@keyframes purupuru {
  0% {
    transform: scale(1) rotate(0deg);
  }

  25% {
    transform: scale(1.05) rotate(1deg);
  }

  50% {
    transform: scale(0.97) rotate(-1deg);
  }

  75% {
    transform: scale(1.02) rotate(1deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.purupuru {
  animation: purupuru 0.6s ease-in-out;
}

.home_lineUP_title {
  width: clamp(12.5rem, 6.25rem + 31.25vw, 25rem);
  /* 200-400px 320-959px */
  font-family: active, sans-serif;
  /* font-family: "aktiv-grotesk-std", "Noto Sans JP", sans-serif; */
  font-size: 50px;
  letter-spacing: 3px;
  margin-right: 0;
  margin-left: auto;
  position: relative;
}

.home_lineUP_text {
  padding: 10px clamp(1.25rem, 0.447rem + 3.42vw, 2.5rem) 20px;
  /* 20-40px 375-959px */
  font-size: clamp(0.875rem, 0.795rem + 0.34vw, 1rem);
  /* 14-16px 375-959px */
  /* font-weight: 300; */
  line-height: 1.8;
}

/* 洋梨のデニッシュ */
.TopPearDanish {
  position: relative;
}

.TopPearDanish::after {
  content: "";
  background-image: url(../images/ashirai_yazirushi04.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(2.75rem, 1.907rem + 3.6vw, 4.063rem);
  /* 44-65 */
  height: clamp(1.75rem, 1.148rem + 2.57vw, 2.688rem);
  /* 28-43 */
  position: absolute;
  bottom: 0px;
  right: 5px;
  transform: rotate(32deg);
}

.home_Lineup_PearDanish::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--font_color);
  position: absolute;
  display: block;
  bottom: clamp(2.5rem, 1.248rem + 6.26vw, 5rem);
  /* 40-80px 320-959px */
  left: -16px;
}

.home_Lineup_PearDanish::after {
  content: "洋梨のデニッシュ";
  display: block;
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);
  /* 14-18px 320-959px */
  /* font-weight: 600; */
  margin-top: -10px;
  margin-left: 4px;
}

/* クロワッサン */
.TopCroissant {
  position: relative;
}

.TopCroissant::before {
  content: "";
  background-image: url(../images/ashirai_sunburst.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(4.688rem, 3.845rem + 3.6vw, 6rem);
  height: clamp(2.063rem, 1.661rem + 1.71vw, 2.688rem);
  transform: rotate(-35deg);
  position: absolute;
  top: clamp(0.438rem, -0.486rem + 3.94vw, 1.875rem);
  left: clamp(1.25rem, -0.516rem + 7.53vw, 4rem);
}

.TopCroissant::after {
  content: "";
  background-image: url(../images/ashirai_yazirushi02.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(4.688rem, 2.962rem + 7.36vw, 7.375rem);
  height: clamp(0.75rem, 0.429rem + 1.37vw, 1.25rem);
  position: absolute;
  bottom: clamp(1.688rem, 0.162rem + 6.51vw, 4.063rem);
  right: clamp(0.813rem, 1.334rem + -2.23vw, 0rem);
  transform: rotate(106deg);
}

.home_Lineup_Croissant::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--font_color);
  position: absolute;
  display: block;
  bottom: clamp(2.5rem, 1.248rem + 6.26vw, 5rem);
  /* 40-80px 320-959px */
  left: -16px;
}

.home_Lineup_Croissant::after {
  content: "クロワッサン";
  display: block;
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);
  /* 14-18px 320-959px */
  /* font-weight: 600; */
  margin-top: -10px;
  margin-left: 4px;
}

/* クリームパン */
.TopCreamBread {
  position: relative;
}

.TopCreamBread::before {
  content: "";
  background-image: url(../images/ashirai_yazirushi03.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(3.625rem, 2.06rem + 6.68vw, 6.063rem);
  height: clamp(1.625rem, 0.862rem + 3.25vw, 2.813rem);
  transform: rotate(83deg);
  position: absolute;
  bottom: -23px;
  left: -17px;
}

.TopCreamBread::after {
  content: "";
  background-image: url(../images/TopCreamBread_02.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(3.75rem, 2.185rem + 6.68vw, 6.188rem);
  height: clamp(3.875rem, 2.35rem + 6.51vw, 6.25rem);
  position: absolute;
  bottom: -10px;
  right: -52px;

}

.home_Lineup_CreamBread::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--font_color);
  position: absolute;
  display: block;
  bottom: clamp(2.5rem, 1.248rem + 6.26vw, 5rem);
  /* 40-80px 320-959px */
  left: -16px;
}

.home_Lineup_CreamBread::after {
  content: "クリームパン";
  display: block;
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);
  /* 14-18px 320-959px */
  /* font-weight: 600; */
  margin-top: -10px;
  margin-left: 4px;
}

/* カヌレ */
.TopCanele {
  position: relative;
}

.TopCanele::before {
  content: "";
  background-image: url(../images/ashirai_STAR.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(2.938rem, 2.095rem + 3.6vw, 4.25rem);
  height: clamp(2.813rem, 1.97rem + 3.6vw, 4.125rem);
  transform: rotate(-9deg);
  position: absolute;
  top: clamp(0rem, -0.482rem + 2.05vw, 0.75rem);
  left: clamp(2.063rem, 0.939rem + 4.79vw, 3.813rem);
}

.TopCanele::after {
  content: "";
  background-image: url(../images/ashirai_yazirushi02.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(3.75rem, 1.944rem + 7.71vw, 6.563rem);
  height: clamp(0.625rem, 0.384rem + 1.03vw, 1rem);
  position: absolute;
  bottom: clamp(1.125rem, 0.764rem + 1.54vw, 1.688rem);
  right: 14px;
  transform: rotate(117deg);

}

.home_LineupCanele::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--font_color);
  position: absolute;
  display: block;
  bottom: clamp(2.5rem, 1.248rem + 6.26vw, 5rem);
  /* 40-80px 320-959px */
  left: -16px;
}

.home_LineupCanele::after {
  content: "カヌレ（バニラ・チョコ）";
  display: block;
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);
  /* 14-18px 320-959px */
  /* font-weight: 600; */
  margin-top: -10px;
  margin-left: 4px;
}


/* バタール */
.TopBatard {
  position: relative;
}

.TopBatard::before {
  content: "";
  background-image: url(../images/ashirai_yazirushi03.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: clamp(4.25rem, 3.126rem + 4.79vw, 6rem);
  height: clamp(2rem, 1.599rem + 1.71vw, 2.625rem);
  transform: rotate(83deg);
  position: absolute;
  bottom: 24px;
  left: clamp(0rem, -2.729rem + 11.64vw, 4.25rem);
}



.home_LineupBatard::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--font_color);
  position: absolute;
  display: block;
  bottom: clamp(2.5rem, 1.248rem + 6.26vw, 5rem);
  /* 40-80px 320-959px */
  left: -16px;
}

.home_LineupBatard::after {
  content: "バタール";
  display: block;
  font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.125rem);
  /* 14-18px 320-959px */
  /* font-weight: 600; */
  margin-top: -10px;
  margin-left: 4px;
}


@media(min-width: 960px) {
  .home_lineUP_inner {
    padding-right: clamp(3.5rem, -1rem + 7.5vw, 6.5rem);
    padding-left: clamp(3.5rem, -1rem + 7.5vw, 6.5rem);
    max-width: 1000px;
  }

  .home_lineUP_wrap {
    display: flex;
    gap: clamp(1.5rem, -3rem + 7.5vw, 3rem);
    align-items: center;
  }

  .reverse {
    flex-direction: row-reverse;
  }

  .home_lineUP,
  .home_lineUP_textBOX {
    flex: 1;
  }

  .home_lineUP_title {
    width: 200px;
    margin-right: auto;
    margin-left: 56px;
  }

  /* 洋梨のデニッシュ */
  .home_Lineup_PearDanish::before {
    bottom: 44px;
  }

  .TopPearDanish::after {
    transform: scale(-1, 1) rotate(345deg);
    bottom: inherit;
    top: 32px;
    right: -48px;

  }

  /* クロワッサン */
  .home_Lineup_Croissant::before {
    bottom: 44px;
  }

  .TopCroissant::after {
    bottom: inherit;
    right: 0;
    left: -72px;
    top: 95px;
    transform: rotate(22deg);
  }

  /* クリームパン */
  .home_Lineup_CreamBread::before {
    bottom: 44px;
  }

  .TopCreamBread::before {
    transform: rotate(180deg);
    bottom: inherit;
    left: 360px;
  }

  .TopCreamBread::after {
    content: "";
    background-image: url(../images/ashirai_Heart.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 48px;
    height: 65px;
    position: absolute;
    bottom: inherit;
    top: -24px;
    right: inherit;
    left: 0;
    transform: scale(-1, 1) rotate(32deg);
  }

  .home_Lineup_CreamBread_text {
    position: relative;
  }

  .home_Lineup_CreamBread_text::after {
    content: "";
    background-image: url(../images/TopCreamBread_02.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: clamp(3.75rem, 2.185rem + 6.68vw, 6.188rem);
    height: clamp(3.875rem, 2.35rem + 6.51vw, 6.25rem);
    position: absolute;
    top: -100px;
    right: 16px;
  }

  /* カヌレ */
  .home_LineupCanele::before {
    bottom: 44px;
  }

  .home_LineupCanele::after {
    white-space: nowrap;
  }

  .TopCanele::after {
    bottom: inherit;
    right: 0;
    left: -80px;
    top: 86px;
    transform: rotate(13deg);
  }

  /* バタール */
  .home_LineupBatard::before {
    bottom: 44px;
  }

  .TopBatard::before {
    transform: rotate(180deg);
    left: 332px;
    bottom: inherit;
    top: 40px;
  }

  /* read morebtn */
  .home_lineUP .readmore_btn {
    margin-right: 0;
  }
}

@media(min-width: 1280px) {
  .home_lineUP_inner {
    max-width: 1280px;
  }

  /* 洋梨のデニッシュ */
  .TopPearDanish::after {
    width: 100px;
    height: 64px;
    right: -72px;
  }

  /* クリームパン */
  .TopCreamBread::before {
    left: 380px;
    top: 24px;
  }

}



/*---------------------- home_lineUP CSS end------------------------ */
/*------------------------ img scroll　start ------------------------*/
.scroll-container {
  width: 100%;

  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.scroll-content {
  display: inline-block;
  animation: scroll-left 40s linear infinite;
}

.scroll-content img {
  height: clamp(9.375rem, 5.49rem + 16.57vw, 18.75rem);
  /* 150-300px 375-1280px */
  margin-right: -4px;
  vertical-align: middle;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/*------------------------ img scroll　END ------------------------*/
/*---------------------- access CSS start------------------------ */

.home_access {
  background-color: var(--font_color);
  margin-top: -24px;
  margin-bottom: -24px;
  padding-top: 10%;
}

.home_access_inner {
  background-color: #fff;
  padding-top: 20%;
  padding-bottom: 10%;
}

@media(min-width: 600px) {
  .home_access_inner {
    padding-top: 10%;
    max-width: 1280px;
  }

  .home_access_textBOX {
    padding-top: 5%;
  }
}

.home_access_title {
  position: relative;
}

.home_access_title::before {
  content: "";
  background-image: url(../images/ashirai_sunburst.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 71px;
  height: 32px;
  position: absolute;
  top: -33px;
  left: 0;
  right: 0;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.home_access_IMG {
  width: 93%;
  margin-right: auto;
  margin-left: auto;
  margin-top: 24px;
}

.home_access_textBOX img {
  width: 200px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 24px;
}

.home_access_text {
  text-align: center;
  font-size: 14px;
  margin-top: 24px;
}

.home_access_textBOX a {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  transform-origin: center;
}

.home_access_textBOX a:hover {
  transform: scale(1.08) rotate(-2deg);
  /* box-shadow: 0 8px 20px rgba(255, 150, 150, 0.3); */
  animation: purupuru-img2 0.4s ease-in-out;
}

@keyframes purupuru-img2 {
  0% {
    transform: scale(1.08) rotate(-2deg);
  }

  25% {
    transform: scale(1.1) rotate(1deg);
  }

  50% {
    transform: scale(1.05) rotate(-1deg);
  }

  75% {
    transform: scale(1.1) rotate(1deg);
  }

  100% {
    transform: scale(1.08) rotate(-2deg);
  }
}

@media (min-width: 960px) {
  .home_access_textBOX {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, -3rem + 7.5vw, 3rem);
    padding-top: 5%;
    /* padding-bottom: 5%; */
  }

  .home_access_text {
    text-align-last: left;
    padding-left: 10%;
    white-space: nowrap;
    font-size: 16px;
  }

  .home_access_textBOX img {
    padding-left: 10%;
  }
}

/*---------------------- access CSS end---------------------- */
/*----------------------  footer CSS start---------------------- */
footer {
  background-color: var(--font_color);
}

/*---------------------- footer CSS end------------------------ */




/*---------------------- top btn flex CSS start------------------------ */
.top_btn_flex {
  position: fixed;
  bottom: 8px;
  right: 8px;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

.active {
  opacity: 1;
  visibility: visible;
}

.top_btn_flex:hover {
  transition: all 0.5s;
  transform: scale(1.05);
}

.top_btn_flex img {
  width: 80px;
}

@media(min-width: 768px) {
  .top_btn_flex img {
    width: 120px;
  }
}

/*---------------------- top btn flex end------------------------ */
/******* sub page *common* ******/
.header_logo_sub {
  top: 0px;
  height: 56px;
}

.header_logo_sub img {
  height: 56px;
}

/******* sub page *Concept* ******/
/*---------------------- Concept CSS start------------------------ */
/* concept */
.concept {
  /* padding-top: 56px; */
  /* background-color: #fff; */
}

.concept_IMG {
  /* padding-top: 56px; */
}

.concept_textBOX {
  margin-top: 96px;
  margin-bottom: 200px;
  position: relative;
}

.concept_textBOX::before {
  content: "";
  background-image: url(../images/menu_Concept.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(18.75rem, 14.737rem + 17.12vw, 25rem);
  height: clamp(5.688rem, 5.246rem + 1.88vw, 6.375rem);
  position: absolute;
  top: -113px;
  left: -40px;
}

.concept_textBOX::after {
  content: "";
  background-image: url(../images/ashirai_flower.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 298px;
  height: 89px;
  position: absolute;
  bottom: -120px;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 768px) {
  .concept_textBOX::after {
    margin-right: 10%;
  }

  .concept_text {
    padding: 2% 10% 0;
  }
}

@media(min-width: 960px) {
  .concept_IMG {
    /* padding-top: 0; */
  }

  .concept_textBOX {
    margin-top: 120px;
  }

  .concept_title {
    text-align: center;
  }

  .concept_textBOX::before {
    top: -140px;
    left: 0;
  }

  .concept_text {
    padding: 0% 10% 0;
  }

}

@media(min-width: 1280px) {
  .concept_IMG img {
    height: 500px;
    width: 100%;
  }
}

/* history */
.history {
  background-color: var(--font_color);
  padding-top: 96px;
  color: #fff;
}

.history_IMG {
  width: 80%;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.history_IMG img {
  width: 80%;
}

.history_IMG::before {
  content: "";
  background-image: url(../images/about_history_02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6.25rem, 2.216rem + 17.21vw, 12.5rem);
  height: clamp(7.5rem, 2.659rem + 20.65vw, 15rem);
  position: absolute;
  top: clamp(5.5rem, 0.256rem + 22.38vw, 13.625rem);
  left: -20px;
}

.history_IMG::after {
  content: "";
  background-image: url(../images/About_History.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(11.25rem, 6.434rem + 20.55vw, 18.75rem);
  height: clamp(4.688rem, 1.557rem + 13.36vw, 9.563rem);
  position: absolute;
  top: clamp(4.688rem, 0.474rem + 17.98vw, 11.25rem);
  right: -40px;
}

.history_title {
  margin-left: 80px;
  margin-top: 56px;
}

.history .line {
  margin-left: clamp(9.375rem, -0.257rem + 41.1vw, 24.375rem);
}

.history_text {
  margin-top: 16px;
}

@media(min-width: 768px) {
  .history_text {
    padding: 2% 10% 0;
  }
}

@media(min-width: 960px) {
  .history .line {
    margin-left: 324px;
  }

  .history_title {
    margin-left: 300px;
  }

  .history_text {
    padding: 2% 5% 0 37%;
  }

}

@media(min-width: 1280px) {
  .history .line {
    margin-left: 40%;
  }

  .history_title {
    margin-left: 37%;
  }

  .history_IMG::before {
    width: 300px;
    height: 350px;
    top: 250px;
    left: -100px;
  }
}

/* concept_bread */
.concept_bread {
  padding-top: 96px;
  padding-bottom: 16px;
  background-color: var(--font_color);
}

.concept_bread .inner {
  background-color: #fff;
  padding-top: 56px;
  padding-right: 10%;
  padding-left: 10%;
}

.concept_bread_text {
  margin-top: 8px;
  margin-bottom: 96px;
}

@media(min-width: 768px) {
  .concept_bread {
    padding-bottom: 56px;
  }

  .concept_bread .inner {
    padding-top: 96px;
  }
}

@media(min-width: 960px) {
  .concept_bread_wrap {
    display: flex;
    gap: clamp(1.5rem, -3rem + 7.5vw, 3rem);
    align-items: center;
  }

  .concept_bread_wrap:first-of-type,
  .concept_bread_wrap:last-of-type {
    flex-direction: row-reverse;
  }

  .concept_bread_textBOX {
    flex-basis: 45%;
  }

  .concept_bread_IMG {
    flex-basis: 55%;
  }

  .concept_bread_text {
    margin-bottom: 72px;
  }
}


/* バゲット */
.concept_bread_wrap_baguette {
  position: relative;
}

.concept_bread_wrap_baguette::before {
  content: "";
  background-image: url(../images/ashirai_baguette.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 54px;
  position: absolute;
  bottom: clamp(13.5rem, 3.788rem + 41.44vw, 28.625rem);
  left: 0px;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 768px) {
  .concept_bread_wrap_baguette::before {
    margin-right: 12%;
  }
}

@media(min-width: 960px) {
  .concept_bread_wrap_baguette::before {
    bottom: -0px;
  }
}

@media(min-width: 1414px) {
  .concept_bread_wrap_baguette::before {
    margin-right: 15%;
  }
}


/* 食パン */
.concept_bread_wrap_syoku {
  position: relative;
}

.concept_bread_wrap_syoku::before {
  content: "";
  background-image: url(../images/ashirai_flag.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 69px;
  position: absolute;
  bottom: clamp(13.5rem, 3.788rem + 41.44vw, 28.625rem);
  left: 0px;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 768px) {
  .concept_bread_wrap_syoku::before {
    margin-right: 12%;
  }
}

@media(min-width: 960px) {
  .concept_bread_wrap_syoku::before {
    bottom: -8px;
    margin-left: 12%;
    margin-right: auto;
  }
}

@media(min-width: 1414px) {
  .concept_bread_wrap_syoku::before {
    margin-left: 16%;
  }
}

/* クロワッサン */
.concept_bread_wrap_croissant {
  position: relative;
  padding-bottom: 56px;
}

.concept_bread_wrap_croissant::before {
  content: "";
  background-image: url(../images/ashirai_butter.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 250px;
  height: 61px;
  position: absolute;
  bottom: clamp(16.5rem, 6.828rem + 41.27vw, 31.563rem);
  left: 0px;
  right: 0;
  margin-right: auto;
  margin-left: auto;
}

@media(min-width: 768px) {
  .concept_bread_wrap_croissant {
    padding-bottom: 96px;
  }

  .concept_bread_wrap_croissant::before {
    margin-right: 12%;
  }
}

@media(min-width: 960px) {
  .concept_bread_wrap_croissant::before {
    bottom: 88px;

  }
}

@media(min-width: 960px) {
  .concept_bread_wrap_croissant::before {
    margin-right: 16%;

  }
}

/*---------------------- Concept CSS end------------------------ */
/*---------------------- information CSS start------------------------ */
/* ショップ */
.shop {
  position: relative;
}

.shop::after {
  content: "";
  background-image: url(../images/About_Shop.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(11.25rem, 6.434rem + 20.55vw, 18.75rem);
  height: clamp(4.688rem, 1.557rem + 13.36vw, 9.563rem);
  position: absolute;
  top: clamp(10rem, -0.354rem + 44.18vw, 26.125rem);
  left: 0px;
}

.shop_wrap {
  margin-top: clamp(6rem, 3.753rem + 9.59vw, 9.5rem);
  display: flex;
  flex-direction: column;
}

.shop_IMG {
  width: clamp(9.375rem, 4.96rem + 18.84vw, 16.25rem);
  margin-right: auto;
  margin-left: auto;
}

.shop_title {
  margin-top: 56px;
}

.shop_text {
  text-align: center;
  line-height: 2.5;
}

.shop_textBOX img {
  width: 200px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 24px;
}

.mapbtn:hover {
  transform: scale(1.08) rotate(-2deg);
  animation: purupuru-img 0.4s ease-in-out;

}

@media(min-width: 960px) {
  .shop::after {
    left: 200px;
  }

  .shop_wrap {
    flex-direction: row;
    align-items: center;
    gap: 15%;
    margin-bottom: 152px;
  }

  .shop_IMG,
  .shop_textBOX {
    flex: 1;
    justify-self: center;
    width: 80%;
  }

  .shop_title {
    margin-top: 0;
    margin-left: 40px;
  }

  .shop_text {
    text-align: left;
    margin-left: 40px;
  }
}

@media (min-width: 1280px) {
  .shop_IMG_header img {
    height: 500px;
    width: 100%;
  }

  .inner.PC_only_3 {
    max-width: 1500px;
  }
}



/* アクセス */
.Access {
  margin-top: 96px;
  margin-bottom: 96px;

}

.info_access {
  position: relative;
}

.info_access::after {
  content: "";
  background-image: url(../images/home_LineupAccess.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(11.25rem, 6.434rem + 20.55vw, 18.75rem);
  height: clamp(4.688rem, 1.557rem + 13.36vw, 9.563rem);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

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

.info_access img {
  opacity: 0.7;
}

.info_access_title {
  margin-top: 56px;
  text-align: center;
}

.info_access_text {
  text-align: center;
  white-space: nowrap;
}

.info_access_IMG {
  margin-top: 56px;
}

@media(min-width: 960px) {
  .info_access_wrap {
    flex-direction: row;
    align-items: center;
    gap: 5%;
    margin-top: 40px;
  }

  .info_access_title,
  .info_access_text {
    text-align: left;
  }
}

@media(min-width: 1280px) {
  .info_access img {
    height: 500px;
    width: 100%;
  }
}

/* info_gallery */

.info_gallery {
  background-image: url(../images/check02.webp);
  background-repeat: repeat;
  background-size: 60%;
  background-position: bottom;
  padding-top: 10%;
  padding-bottom: 10%;
}

.info_gallery_box {
  background-color: #fff;
  padding-top: 5%;
  padding-right: 5%;
  padding-left: 5%;
  width: 100%;
  display: flex;
  gap: 5%;
}

.info_gallery_box:last-of-type {
  padding-bottom: 5%;
}

.info_gallery_box img {
  width: 45%;
}

@media(min-width: 960px) {
  .info_gallery {
    background-size: 30%;
  }

  .info_gallery_box img {
    width: 30%;
  }
}

/*---------------------- information CSS end------------------------ */

/*---------------------- lineup Category CSS start------------------------ */
.category_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  margin-top: 56px;
}

.category_BOX {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: calc((100% - 16px) / 2);
  aspect-ratio: 1 / 1;

  background-color: #fff;
  border-radius: 50%;
  padding: 10px 16px 30px;
  margin-bottom: 24px;

  text-decoration: none;
  /* リンクの下線を消す */
  color: inherit;
  /* 文字色を親に合わせる */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category_BOX:hover {
  transform: scale(1.03) rotate(-2deg);
  animation: purupuru-img 0.4s ease-in-out;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.category_title {
  font-family: active, sans-serif;
  /* font-family: "aktiv-grotesk-std", "Noto Sans JP", sans-serif; */
  font-size: clamp(1.375rem, 0.958rem + 2.08vw, 2.625rem);
  letter-spacing: 2px;
  padding-top: 32px;
}

.category_subtitle {
  padding-top: 8px;
  font-size: clamp(0.625rem, 0.458rem + 0.83vw, 1.125rem);
}

@media (min-width: 768px) {
  .category_BOX {
    width: calc((100% - (16px * 2)) / 3);
  }
}


@media (min-width: 1280px) {
  .category_title {
    padding-top: 0;
  }

  .category_subtitle {
    padding-top: 0;
    padding-bottom: 14px;
  }

}

/*---------------------- lineup Category CSS end------------------------ */
/*---------------------- lineup CSS start------------------------ */

.inner_lineup {
  width: 82%;
  margin-right: 4%;
  position: relative;
  margin-top: 56px;
  padding-top: 0;
  padding-bottom: 0;
}

.inner_lineup nav {
  position: absolute;
  top: 51px;
  left: -89px;
}

.lineUP_main_title::after {
  content: "";
  font-size: clamp(0.688rem, 0.594rem + 0.47vw, 0.875rem);
  /* 11-14px 320-959px */
  /* font-weight: 300; */
  display: block;
  width: max-content;
  margin-top: -22px;
  margin-right: auto;
  margin-left: auto;
}

/* タブ画像 */
.tab-buttons img {
  transform: rotate(270deg);
  width: 140px;
  margin-bottom: 103px;
}


/* パンの画像のサイズ */
.lineup-item {
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 32px;
}

.lineup-item:last-child {
  padding-bottom: 80px;
}

.lineup-item img {
  transform: scale(1.1);
}

.lineup-item img:hover {
  transform: scale(1.2);
  transition: all .5s;
}

/* あしらい英語 */
.lineup_text_English {
  font-family: active, sans-serif;
  /* font-family: "aktiv-grotesk-std", "Noto Sans JP", sans-serif; */
  display: block;
  text-align: center;
}

/* 説明テキスト */
.lineup_text {
  margin-top: clamp(0.5rem, 0.018rem + 2.05vw, 1.25rem);
  font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1rem);
}

/* アレルギー */
.Allergie_wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.Allergie_wrap .Allergie_item {
  width: 50px;
  border: 1px solid var(--font_color);
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
}
.Allergie_wrap .Allergie_item2 {
  width: 160px;

}

/* LINE */
.Separator {
  width: 80%;
  margin: 40px auto;
  height: 2px;
  background-color: var(--font_color);
}


/* hard */
#hard {
  padding-top: 10%;
  padding-bottom: 10%;
}

/* あしらい */
.ashirai {
  position: relative;
}

.ashirai01::before {
  content: "";
  background-image: url(../images/stamp01.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(7.5rem, 1.079rem + 27.4vw, 17.5rem);
  height: clamp(7.5rem, 1.079rem + 27.4vw, 17.5rem);
  position: absolute;
  bottom: clamp(24.625rem, 17.923rem + 28.6vw, 35.063rem);
  left: clamp(10.625rem, -0.652rem + 48.12vw, 28.188rem);
}

.ashirai02::before {
  content: "";
  background-image: url(../images/gaisenmon.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(8.125rem, 5.316rem + 11.99vw, 12.5rem);
  height: clamp(8.125rem, 5.316rem + 11.99vw, 12.5rem);
  position: absolute;
  bottom: -64px;
  left: -39px;
}

.ashirai03::before {
  content: "";
  background-image: url(../images/letter03.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(8.125rem, 5.075rem + 13.01vw, 12.875rem);
  height: clamp(3.75rem, 2.385rem + 5.82vw, 5.875rem);
  position: absolute;
  bottom: clamp(21.875rem, 15.615rem + 31.3vw, 34.375rem);
  right: -27px;
  transform: rotate(9deg);
}

.ashirai04::before {
  content: "";
  background-image: url(../images/ashirai_Heart.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(2.313rem, 1.63rem + 2.91vw, 3.375rem);
  height: clamp(3.125rem, 2.162rem + 4.11vw, 4.625rem);
  position: absolute;
  bottom: clamp(22.5rem, 14.473rem + 34.25vw, 35rem);
  left: clamp(1.25rem, -2.924rem + 17.81vw, 7.75rem);
  transform: scaleX(-1) rotate(24deg);
}

.ashirai05::before {
  content: "";
  background-image: url(../images/bird01.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(3.375rem, 1.449rem + 8.22vw, 6.375rem);
  height: clamp(3.125rem, 1.199rem + 8.22vw, 6.125rem);
  position: absolute;
  bottom: clamp(15.625rem, 9.605rem + 25.68vw, 25rem);
  right: -20px;
}

.ashirai06::before {
  content: "";
  background-image: url(../images/tower.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(3.938rem, 2.332rem + 6.85vw, 6.438rem);
  height: clamp(8.75rem, 5.299rem + 14.73vw, 14.125rem);
  position: absolute;
  top: clamp(21.875rem, 15.855rem + 25.68vw, 31.25rem);
  left: -25px;
}


/* sweet */
#sweet {
  padding-top: 10%;
  padding-bottom: 10%;
}

.ashirai07::before {
  content: "";
  background-image: url(../images/bird02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(3.813rem, 2.007rem + 7.71vw, 6.625rem);
  height: clamp(4.688rem, 2.761rem + 8.22vw, 7.688rem);
  position: absolute;
  top: 0;
  right: 3px;
  transform: rotate(8deg);
}

.ashirai08::before {
  content: "";
  background-image: url(../images/letter03.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 188px;
  height: 86px;
  position: absolute;
  bottom: -98px;
  left: -52px;
  transform: rotate(353deg);
}

.ashirai09::before {
  content: "";
  background-image: url(../images/ashirai_sunburst.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6.25rem, 4.645rem + 6.85vw, 8.75rem);
  height: clamp(2.75rem, 2.028rem + 3.08vw, 3.875rem);
  position: absolute;
  top: clamp(0rem, -2.007rem + 8.56vw, 3.125rem);
  left: clamp(0.313rem, -1.774rem + 8.9vw, 3.563rem);
  transform: rotate(315deg);
}

.ashirai09::after {
  content: "";
  background-image: url(../images/recommendation.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6.25rem, 4.444rem + 7.71vw, 9.063rem);
  height: clamp(3.938rem, 0.767rem + 13.53vw, 8.875rem);
  position: absolute;
  top: -3px;
  left: clamp(9.375rem, 0.144rem + 39.38vw, 23.75rem);
  transform: rotate(5deg);
}

.ashirai10::before {
  content: "";
  background-image: url(../images/cupcake.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6.625rem, 4.779rem + 7.88vw, 9.5rem);
  height: clamp(9.938rem, 7.409rem + 10.79vw, 13.875rem);
  position: absolute;
  top: -79px;
  right: -38px;
}

.ashirai11::before {
  content: "";
  background-image: url(../images/gaisenmon.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(7.813rem, 4.722rem + 13.18vw, 12.625rem);
  height: clamp(8.25rem, 5.24rem + 12.84vw, 12.938rem);
  position: absolute;
  bottom: 25px;
  left: -38px;
}

.ashirai19 {
  z-index: 2;
}

.ashirai19::before {
  content: "";
  background-image: url(../images/stamp02.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(10.313rem, 8.828rem + 6.34vw, 12.625rem);
  height: clamp(9.563rem, 8.238rem + 5.65vw, 11.625rem);
  position: absolute;
  top: 0px;
  right: clamp(6rem, -1.54rem + 29.09vw, 17.5rem);
  z-index: -1;
}

.ashirai20::before {
  content: "";
  background-image: url(../images/tower.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(4.5rem, 2.373rem + 9.08vw, 7.813rem);
  height: clamp(10.063rem, 5.568rem + 19.18vw, 17.063rem);
  position: absolute;
  bottom: clamp(23.625rem, 17.364rem + 26.71vw, 33.375rem);
  left: clamp(12.25rem, 0.05rem + 52.05vw, 31.25rem);
}


.ashirai12::before {
  content: "";
  background-image: url(../images/letter01.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(10.313rem, 7.222rem + 13.18vw, 15.125rem);
  height: clamp(4.813rem, 3.448rem + 5.82vw, 6.938rem);
  position: absolute;
  bottom: clamp(25.938rem, 16.506rem + 40.24vw, 40.625rem);
  right: clamp(6.625rem, -5.174rem + 50.34vw, 25rem);
  transform: rotate(355deg);
}

.ashirai13::before {
  content: "";
  background-image: url(../images/pan01.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(9.563rem, 6.553rem + 12.84vw, 14.25rem);
  height: clamp(2.625rem, 1.742rem + 3.77vw, 4rem);
  position: absolute;
  top: clamp(23.75rem, 11.469rem + 52.4vw, 42.875rem);
  left: clamp(8.375rem, 1.512rem + 29.28vw, 19.063rem);
  transform: rotate(34deg);
}

/* white */
#white {
  padding-top: 10%;
  padding-bottom: 10%;
}

.ashirai14::before {
  content: "";
  background-image: url(../images/letter03.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(8.813rem, 6.886rem + 8.22vw, 11.813rem);
  height: clamp(3.938rem, 2.934rem + 4.28vw, 5.5rem);
  position: absolute;
  top: -8px;
  right: -37px;
  transform: rotate(8deg);
}

.ashirai15::before {
  content: "";
  background-image: url(../images/jam.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(3.75rem, 2.265rem + 6.34vw, 6.063rem);
  height: clamp(4.875rem, 3.029rem + 7.88vw, 7.75rem);
  position: absolute;
  top: -34px;
  left: -10px;
  transform: rotate(350deg);
}

.ashirai16::before {
  content: "";
  background-image: url(../images/tatemono.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(9.688rem, 6.276rem + 14.55vw, 15rem);
  height: clamp(5.875rem, 3.788rem + 8.9vw, 9.125rem);
  position: absolute;
  bottom: -15px;
  right: -10px;
}

/* canele */
#canele {
  padding-top: 10%;
  padding-bottom: 10%;
}

.ashirai17::before {
  content: "";
  background-image: url(../images/Popularity.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6.25rem, 3.12rem + 13.36vw, 11.125rem);
  height: clamp(2.938rem, 1.613rem + 5.65vw, 5rem);
  position: absolute;
  bottom: clamp(24.75rem, 15.961rem + 37.5vw, 38.438rem);
  left: clamp(1.938rem, -1.474rem + 14.55vw, 7.25rem);
}

.ashirai18::before {
  content: "";
  background-image: url(../images/letter02.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(6rem, 3.833rem + 9.25vw, 9.375rem);
  height: clamp(5.313rem, 3.346rem + 8.39vw, 8.375rem);
  position: absolute;
  bottom: clamp(6.313rem, 5.309rem + 4.28vw, 7.875rem);
  left: clamp(0.563rem, -0.842rem + 5.99vw, 2.75rem);
  transform: rotate(16deg);
}

.ashirai18::after {
  content: "";
  background-image: url(../images/tower.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: clamp(3.063rem, 1.979rem + 4.62vw, 4.75rem);
  height: clamp(7.063rem, 4.735rem + 9.93vw, 10.688rem);
  position: absolute;
  bottom: 1px;
  right: clamp(13.688rem, 2.41rem + 48.12vw, 31.25rem);
}





#deli {
  padding-top: 10%;
  padding-bottom: 10%;
}

@media (min-width: 768px) {
  .lineup-item {
    width: 75%;
  }

  .lineup_text {
    padding: 0 40px 0;
  }

}

@media (min-width: 960px) {
  .inner_lineup {
    margin-right: auto;
  }

  .lineup-item {
    display: flex;
    padding-bottom: 0;
  }

  .lineup-item-reverse {
    flex-direction: row-reverse;
  }

  .lineup_text_title {
    text-align: center !important;
    margin-bottom: 10px;
    font-size: clamp(1.25rem, 0.904rem + 0.58vw, 1.625rem);
  }

  .lineup-item img {
    width: 50%;
    flex-basis: 50%;
    object-fit: contain;
  }

  .lineup_textBOX {
    width: 50%;
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ashirai */
  .ashirai01::before {
    top: 100px;
    left: clamp(26.25rem, 7.212rem + 31.73vw, 46.875rem);
  }

  .ashirai02::before {
    content: "";
    background-image: url(../images/ashirai_sunburst.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 106px;
    height: 45px;
    position: absolute;
    bottom: clamp(11.063rem, 1.063rem + 16.67vw, 16.688rem);
    left: clamp(26.375rem, -4.514rem + 51.48vw, 43.75rem);
    transform: rotate(35deg);
  }

  .ashirai03::before {
    content: "";
    background-image: url(../images/gaisenmon.webp);
    width: 172px;
    height: 173px;
    transform: rotate(0deg);
    bottom: clamp(12rem, 6.889rem + 8.52vw, 14.875rem);
    right: clamp(25rem, -8.333rem + 55.56vw, 43.75rem);
  }


  .ashirai04::before {
    content: "";
    background-image: url(../images/ashirai_Heart.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: clamp(2.313rem, 0.869rem + 2.406vw, 3.125rem);
    height: clamp(3.125rem, 1.125rem + 3.333vw, 4.25rem);
    position: absolute;
    bottom: clamp(12.5rem, 8.722rem + 6.3vw, 14.625rem);
    right: clamp(26.25rem, -4.861rem + 51.85vw, 43.75rem);
    left: auto;
    transform: scaleX(-1) rotate(24deg);
  }

  .ashirai21::before {
    content: "";
    background-image: url(../images/letter03.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 274px;
    height: 126px;
    position: absolute;
    top: clamp(12.5rem, 1.389rem + 18.52vw, 18.75rem);
    left: clamp(25rem, -8.333rem + 55.56vw, 43.75rem);
    transform: rotate(10deg);
  }

  .ashirai05::before {
    content: "";
    background-image: url(../images/bird01.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: clamp(3.375rem, -0.403rem + 6.296vw, 5.5rem);
    height: clamp(3.125rem, -0.653rem + 6.296vw, 5.25rem);
    position: absolute;
    bottom: clamp(12.5rem, 8.722rem + 6.3vw, 14.625rem);
    right: auto;
    left: clamp(18.75rem, 7.639rem + 18.52vw, 25rem);
  }

  .ashirai06::before {
    top: 150px;
  }

  .ashirai07::before {
    top: clamp(11.875rem, 2.431rem + 15.74vw, 17.188rem);
    right: auto;
    left: clamp(30rem, -5.111rem + 58.52vw, 49.75rem);
  }

  .ashirai08 {
    z-index: 2;
  }

  .ashirai08::before {
    bottom: auto;
    left: auto;
    top: clamp(10.813rem, 8.479rem + 3.89vw, 12.125rem);
    right: clamp(19.313rem, -11.91rem + 52.04vw, 36.875rem);
    transform: rotate(353deg);
    z-index: -1;
    width: clamp(11.75rem, 8.083rem + 6.11vw, 13.813rem);
    height: clamp(5.375rem, 3.597rem + 2.96vw, 6.375rem);
  }

  .ashirai09::after {
    top: auto;
    bottom: 200px;
    left: clamp(25rem, -5.556rem + 50.93vw, 42.188rem);
    width: clamp(7.25rem, 4.027rem + 5.372vw, 9.063rem);
    height: clamp(4.938rem, -2.061rem + 11.665vw, 8.875rem);
  }

  .ashirai09::before {
    width: clamp(5.0rem, 1.445rem + 5.926vw, 7.0rem);
    height: clamp(2.2rem, 0.636rem + 2.607vw, 3.08rem);
    left: clamp(16.5rem, -1.722rem + 30.37vw, 26.75rem);
    top: auto;
    bottom: clamp(13.25rem, 10.361rem + 4.81vw, 14.875rem);
  }

  .ashirai10::before {
    top: auto;
    bottom: clamp(12.5rem, 3.833rem + 14.44vw, 17.375rem);
    right: auto;
    left: clamp(30.813rem, -3.299rem + 56.85vw, 50rem);
    width: clamp(9.5rem, 4.434rem + 8.444vw, 12.35rem);
    height: clamp(13.875rem, 6.475rem + 12.333vw, 18.0375rem);
  }

  .ashirai22::before {
    content: "";
    background-image: url(../images/ashirai_Heart.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 34px;
    height: 45px;
    position: absolute;
    top: 19px;
    left: clamp(0rem, -2.667rem + 4.44vw, 1.5rem);
    transform: scaleX(-1) rotate(28deg);
  }

  .ashirai11::before {
    width: clamp(8.063rem, -0.047rem + 13.517vw, 12.625rem);
    height: clamp(8.5rem, 0.611rem + 13.149vw, 12.938rem);
  }

  .ashirai19::before {
    transform: rotate(350deg);
    right: clamp(21.563rem, -6.771rem + 47.22vw, 37.5rem);
    bottom: clamp(5.688rem, -3.757rem + 15.74vw, 11rem);
  }

  .ashirai20::before {
    bottom: auto;
    top: 200px;
    left: clamp(30.375rem, 4.486rem + 43.15vw, 44.938rem);
  }

  .ashirai12 {
    z-index: 2;
  }

  .ashirai12::before {
    transform: rotate(14deg);
    bottom: clamp(53.125rem, 31.236rem + 36.48vw, 65.438rem);
    right: clamp(20.688rem, -5.313rem + 43.33vw, 35.313rem);
    z-index: -1;
  }

  .ashirai12 {
    z-index: 2;
  }

  .ashirai13::before {
    width: 400px;
    height: 114px;
    position: absolute;
    top: auto;
    bottom: 65px;
    left: clamp(10.625rem, -22.708rem + 55.56vw, 29.375rem);
    transform: rotate(32deg);
  }

  .ashirai14::before {
    transform: rotate(350deg);
    right: clamp(22.563rem, -10.771rem + 55.56vw, 41.313rem);
    width: clamp(11.813rem, 3.481rem + 13.887vw, 16.5rem);
    height: clamp(5.5rem, 1.621rem + 6.465vw, 7.682rem);
  }

  .ashirai15::before {
    top: clamp(15.25rem, 13.806rem + 2.41vw, 16.063rem);
    left: clamp(12.5rem, -0.056rem + 20.93vw, 19.563rem);
    transform: rotate(16deg);
  }

  .ashirai16::before {
    bottom: 44px;
    right: clamp(0rem, -3.111rem + 5.19vw, 1.75rem);
    width: clamp(15rem, 4.334rem + 17.778vw, 21rem);
    height: clamp(9.125rem, 2.637rem + 10.815vw, 12.775rem);
  }

  .ashirai17::before {
    bottom: clamp(12.5rem, 6.833rem + 9.44vw, 15.688rem);
    left: clamp(0rem, -5.667rem + 9.44vw, 3.188rem);
  }

  .ashirai18 {
    padding-bottom: 350px !important;
  }

  .ashirai18::after {
    right: clamp(28.125rem, -10.764rem + 64.81vw, 50rem);
  }
}



/*---------------------- lineup CSS CSS end------------------------ */

/* ロード画面全体 */
#loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease;

  /* 周りを赤の点線で囲む */
  border: 3px dotted #b22222;
  /* ← 赤い点線を優先 */
  box-sizing: border-box;
}

/* 中身（画像＋テキスト） */
.loader-content {
  text-align: center;
}

/* パン画像（動かない） */
.loader-content img {
  width: 120px;
}

#loader {
  position: fixed;
  inset: 0;
  background: #fff;
  /* 全画面の白背景を維持 */
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

/* 点線の赤枠だけを擬似要素で描画 */
#loader::after {
  content: "";
  position: absolute;
  top: 2%;
  /* 画面の高さに対して5%内側 */
  left: 2%;
  /* 画面の幅に対して5%内側 */
  right: 2%;
  bottom: 2%;
  border: 3px dotted #b22222;
  pointer-events: none;
  box-sizing: border-box;
}

/*---------------------- ふわっとCSS------------------------ */
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;

  &.fadein-left {
    transform: translate(-30px, 0);
  }

  &.fadein-right {
    transform: translate(30px, 0);
  }

  &.fadein-up {
    transform: translate(0, -30px);
  }

  &.fadein-bottom {
    transform: translate(0, 30px);
  }

  &.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/* ===================================
   スクロールアニメーション用の設定
   =================================== */

/* アニメーション前の初期状態 */
.fadein,
.slidein {
  opacity: 0;
  /* 最初は透明にする */
  transition: all 1s;
  /* 1秒かけて変化させる */
}

.slidein {
  transform: translateY(30px);
  /* 少し下に配置しておく */
}

/* アニメーション後の最終状態（scrollinクラスが付いたら適用） */
.fadein.scrollin,
.slidein.scrollin {
  opacity: 1;
  /* 透明を解除 */
  transform: translateY(0);
  /* 元の位置に戻す */
}