/* =========================
   Reset / Base
========================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #fff;
  color: #4F2C1E;
  line-height: 1.8;
  padding: 24px 0 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =========================
   Common
========================= */
.container {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section {
  margin: 0 20px 32px;
  border-radius: 40px;
}

.section-title {
  text-align: center;
  font-size: 22px;
  color: #f08ca6;
  margin-bottom: 32px;
}

.section-title img {
  margin: 0 auto;
}

/* =========================
   Header
========================= */
header {
  background: #ffffff;
  padding: 8px 0;
  list-style: none;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
  font-size: 20px;
}

.nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  font-size: 14px;
}

.nav_pc a {
  height: 38px;
  display: flex;
  align-items: center;
  padding-left: 45px;
}
.nav_pc .nav_01 {
  background: url(../img/icon_nav_01.svg) 0 0 no-repeat;
  background-size: auto 38px;
}
.nav_pc .nav_02 {
  background: url(../img/icon_nav_02.svg) 0 0 no-repeat;
  background-size: auto 38px;
}
.nav_pc .nav_03 {
  background: url(../img/icon_nav_03.svg) 0 0 no-repeat;
  background-size: auto 38px;
}
.nav_pc .nav_04 {
  background: url(../img/icon_nav_04.svg) 0 0 no-repeat;
  background-size: auto 38px;
}

.nav_pc a:hover {
  opacity: 1;
}
.nav_pc a img {
  border-bottom: 1px solid transparent;
}
.nav_pc a:hover img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(6476%) hue-rotate(291deg) brightness(93%) contrast(91%);
  transition-duration: .2s;
  border-bottom: 1px solid #E782A9;
}

.link_visit_chiyoda {
  position: absolute;
  right: 18px;
  top: 97px;
}
.link_visit_chiyoda a {
  background: url(../img/icon_arrow_right.svg) right 0 no-repeat;
  background-size: 24px 24px;
  height: 24px;
  display: flex;
  align-items: center;
  padding-right: 32px;
}
.link_visit_chiyoda a:hover {
  opacity: 1;
}
.link_visit_chiyoda a img {
  border-bottom: 1px solid transparent;
}
.link_visit_chiyoda a:hover img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(6476%) hue-rotate(291deg) brightness(93%) contrast(91%);
  transition-duration: .2s;
  border-bottom: 1px solid #E782A9;
}

.link_detail {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin-top: 1em;
}
.link_detail:hover,
.link_detail img:hover {
  opacity: 1;
}
.link_detail img {
  border-bottom: 1px solid transparent;
}
.link_detail:hover picture img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(6476%) hue-rotate(291deg) brightness(93%) contrast(91%);
  transition-duration: .2s;
  border-bottom: 1px solid #E782A9;
}
.link_detail .icon-arrow {
  margin-left: 8px;
}

/* =========================
   Hero
========================= */
.hero {
  background: #e8dff0;
  padding: 80px 5px 3px;
  text-align: center;
  position: relative;
}
.hero:before {
  content: '';
  display: block;
  width: calc(100% - 4px);
  height: 50px;
  background: url(../img/illust_tape.png) repeat;
  position: absolute;
  left: 2px;
  top: 8px;
  border-radius: 30px 30px 0 0;
  animation: scroll-bg 10s linear infinite;
}

@keyframes scroll-bg {
  0% {
    background-position: 0 0;
  }
  100% {
    /* background-position: 100% 0; */ /* 横幅いっぱいに移動 */
    background-position: -323px 0; /* 画像の幅に合わせて調整 */
  }
}

.hero nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  width: 624px;
  background: #fff;
  margin: 0 auto 24px;
  padding: 8px 32px;
  border-radius: 80px;
}

.hero-image img {
  /* width: 763px; */
  margin: 0 auto;
}

.hero-circle {
  background: #fff;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hero-circle h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* =========================
   Greeting
========================= */
.greeting {
  background: #E3F1E2;
}

.greeting .container {
  padding: 64px 20px;
}

.greeting-box {
  width: 675px;
  height: 626px;
  margin: 0 auto 32px;
  padding: 78px 74px;
  text-align: center;
  position: relative;
  transition: none;
}

.greeting-box:before {
  content: '';
  display: block;
  background: url(../img/bg_greeting_flower_pc@2x.png) no-repeat;
  background-size: 690px 606px;
  width: 690px;
  height: 606px;
  position: absolute;
  left: -24px;
  top: 34px;
  z-index: 1;
  transition: none;
}

.greeting-box:after {
  content: '';
  display: block;
  background: url(../img/bg_greeting@2x.png) no-repeat;
  background-size: 675px 626px;
  width: 675px;
  height: 626px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: none;
}

.greeting-box-inner {
  position: relative;
  z-index: 3;
}

.greeting-message img {
  margin: 0 auto;
}


/* =========================
   Pickup
========================= */
.title-pickup {
  position: relative;
  margin-bottom: 16px;
}
.title-pickup img {
  margin: 0 auto;
}

.pickup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.pickup-card {
  background: #fff;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  padding: 32px;
  border-radius: 16px;
}

.pickup-card img {
  margin: 0;
}

.pickup-img {
  border-radius: 8px;
}

.pickup-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pickup-name {
  color: #f08ca6;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 16px;
}

.pickup-description {
  font-size: 14px;
}

/* =========================
   News
========================= */
.news {
  background: #FFFBC6;
}

.news .container {
  padding: 64px 20px;
}

.news-list {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  font-size: 14px;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.news-list dt {
  width: 6em;
  position: relative;
}

.news-list dd {
  width: calc(100% - 6em - 32px);
}

.news-list dd a {
  color: #4F2C1E;
  text-decoration: underline;
}
.news-list dd a.text_red {
  color: #ff0000;
}
.news-list dd a:hover {
  text-decoration: none;
}

.news-list dt:after {
  content: '';
  display: block;
  position: absolute;
  right: -16px;
  top: -3px;
  background: #E782A9;
  opacity: .2;
  width: 3px;
  height: 32px;
  border-radius: 20%;
}


/* =========================
   Project
========================= */
.project {
  background: #e8dff0;
}

.project .container {
  padding: 64px 20px;
}

.project-btn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 52px;
}

.project-btn-link {
  background: #fff;
  padding: 24px;
  text-align: center;
  border: 4px solid #fff;
  border-radius: 40px;
}

.project-btn-link:hover {
  opacity: 1;
  border-color: #E782A9;
}

.project-btn-img {
  margin-bottom: 16px;
}

.project-btn-img img {
  width: 100%;
}

.project-btn-link:hover .project-btn-img img,
.project-btn-link:hover .project-btn-title img {
  opacity: 1;
}

.project-btn-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-btn-title .title-text img {
  margin: 0 auto;
  border-bottom: 1px solid transparent;
}

.project-btn-link:hover .project-btn-title .title-text img {
  filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(6476%) hue-rotate(291deg) brightness(93%) contrast(91%);
  transition-duration: .2s;
  border-bottom: 1px solid #E782A9;
}

.project-btn-title .icon-arrow {
  margin-left: 8px;
}

.project .more-plan img {
  margin: 0 auto;
}

.project-box {
  background: #fff;
  padding: 56px 32px;
  border-radius: 24px;
  margin-top: 32px;
}
#project-01 {
  margin-top: 56px;
}

.project-box img {
  margin: 0 auto;
/*  width: 100%;*/
}

.project-gridbox {
  display: grid;
  gap: 32px;
  text-align: left;
  margin-top: 40px;
}

.project-gridbox-01 {
  grid-template-columns: 1fr 335px;
}
.project-gridbox-02 {
  grid-template-columns: 1fr 358px;
}
.project-gridbox-03 {
  grid-template-columns: 1fr 335px;
}

.project-gridbox .project-text-01 {
  font-size: 16px;
  font-weight: bold;
}
.project-gridbox .project-text-02 {
  font-size: 13px;
  margin-top: 1em;
}

.project-grid {
  display: grid;
/*  grid-template-columns: repeat(3, 264px);*/
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  text-align: center;
}

.project-img {
  background: #ddd;
  height: 140px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* =========================
   Goods
========================= */
.goods {
  background: #eaf5e8;
}

.goods .container {
  max-width: 1080px;
  padding: 64px 20px;
}

.goods .section-title {
  margin-bottom: 16px;
}

.goods-sales-note {
  font-weight: bold;
  margin-bottom: 32px;
}

.goods-grid-01 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.goods-grid-01 .goods-card {
  background: #fff;
  display: grid;
  grid-template-columns: 490px 1fr;
  gap: 32px;
  padding: 16px 32px 16px 16px;
  border-radius: 32px;
}



.goods-grid-02 {
  display: grid;
  grid-template-columns: repeat(3, 330px);
  gap: 24px;
}

.goods-grid-02 .goods-card {
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border-radius: 24px;
  padding: 16px;
}

.goods-img {
  border-radius: 16px;
}

.goods-grid-02 .goods-img {
  background: #ccc;
  height: 172px;
}

.goods-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.goods-name {
  color: #f08ca6;
  font-size: 28px;
  font-weight: bold;
}
.goods-grid-01 .goods-name {
  margin-top: 24px;
}


.goods-description {
  font-size: 16px;
  text-align: left;
}

.goods-description a {
  color: #4F2C1E;
  text-decoration: underline;
}
.goods-description a.text_red {
  color: #ff0000;
}
.goods-description a:hover {
  text-decoration: none;
}

.goods-price {
  font-size: 18px;
  font-weight: bold;
  color: #4F2C1E;
  text-align: right;
}
.goods-grid-01 .goods-price {
  font-size: 22px;
}

.goods .more-plan {
  margin: 48px auto 24px;
}
.goods .more-plan img {
  margin: 0 auto;
}

.footer .container {
  padding-top: 0;
}

.footer .container .footer-img:not(:last-child) {
  margin-bottom: 80px;
}

.footer-img img {
  margin: 0 auto;
}

.footer-copyright {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;;
  font-size: 14px;
  letter-spacing: -0.05em;
}



/* =========================
   Footer
========================= */
footer {
  background: #111;
  color: #ccc;
  font-size: 12px;
  padding: 40px 20px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.footer-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-inner ul {
  list-style: none;
}

.footer-inner li {
  margin-bottom: 5px;
}

.copyright {
  text-align: center;
  margin-top: 30px;
  font-size: 11px;
}

#totop {
  position: fixed;
  right: 32px;
  bottom: 32px;
  display: none;
  z-index: 9;
}
#totop:hover,
#totop:hover img,
#totop:hover img:hover {
  opacity: 1;
}
#totop .totop_01 {
  position: absolute;
  left: -16px;
  top: -48px;
  transition-duration: .2s;
}
#totop:hover .totop_01 {
  position: absolute;
  left: -16px;
  top: -58px;
}

/* =========================
   Responsive
========================= */
@media screen and (min-width:781px) {
  .hero {
    height: calc(100vh - 24px - 32px);
    min-height: 590px;
  }
  .hero-image img {
    margin: 0 auto;
    /* height: calc(100vh - 80px - 78px - 24px - 32px - 3px); */
    height: calc(100% - 78px);
    object-fit: cover;
  }
}

@media screen and (min-width:781px) and (max-width:1100px) {
  .link_visit_chiyoda {
    top: 156px;
  }
}

@media (max-width: 780px) {
  body {
    padding: 0;
  }

  header {
    background: #ffffff;
    padding: 8px 0;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
  }

  .header-inner {
    padding: 0 24px;
  }

  .logo {
    font-weight: bold;
    font-size: 20px;
  }

  .section {
    margin: 0 16px 16px;
    border-radius: 40px;
    position: relative;
    z-index: 1;
  }

  .section-title {
    margin-bottom: 24px;
  }

  .pickup-card,
  .project-btn,
  .project-grid,
  .goods-grid-01,
  .goods-grid-02,
  .goods-grid-01 .goods-card,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .project-btn {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px;
    gap: 16px;
  }

  .project-gridbox-01,
  .project-gridbox-02,
  .project-gridbox-03 {
    grid-template-columns: 1fr;
  }

  .link_detail {
    min-height: 20px;
  }
  .link_detail .icon-arrow {
    height: 20px;
  }

  .hero {
    margin-top: 64px;
    padding: 76px 2px 2px;
  }

  .hero-image img {
    border-radius: 40px;
  }

      
  .hero-circle {
    width: 260px;
    height: 260px;
  }

  .greeting {
    overflow: hidden;
  }
  .greeting .container {
    padding: 40px 16px 32px;
  }

  .greeting-box {
    width: 100%;
    margin: 0 auto 32px;
    padding: 44px 0;
    text-align: center;
    position: relative;
  }
  .greeting-box:before {
    content: '';
    display: block;
    background: url(../img/bg_greeting_flower_sp@2x.png) no-repeat;
    background-size: 100%;
    width: 94.48%;
    height: 40px;
    position: absolute;
    left: 2.76%;
    top: auto;
    bottom: -34px;
    z-index: 1;
  }
  .greeting-box:after {
    content: '';
    display: block;
    background: url(../img/bg_greeting@2x.png) no-repeat;
    background-size: 675px 626px;
    width: 675px;
    height: 626px;
    position: absolute;
    left: calc((-1 * (675px - 100vw) / 2) - 30px);
    top: 0;
  }
  .title-pickup {
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
  }
  .pickup-card {
    gap: 32px;
    padding: 20px 16px;
  }
  .pickup-img img {
    width: 100%;
    height: auto;
  }

  .news .container {
    padding: 32px 20px;
  }

  .news-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px
  }

  .news-list dt {
    width: 6em;
    position: relative;
  }

  .news-list dd {
    width: 100%
  }

  .news-list dt:after {
    content: '';
    display: block;
    position: absolute;
    right: auto;
    left: 0;
    top: calc(1em + 17px);
    background: #E782A9;
    opacity: .2;
    width: 32px;
    height: 3px;
    border-radius: 20%;
  }

  .project .container {
    padding: 32px 20px;
  }
  .project .section-title img {
    height: auto;
  }
  .project-btn-link {
    padding: 12px 10px;
  }
  .project-btn-img {
    margin: 0 10px;
    margin-bottom: 8px;
  }
  .project-btn-title .icon-arrow {
    margin-left: 4px;
    margin-right: -8px;
    width: 20px;
  }
  .project-box {
    padding: 32px 16px;
    margin-top: 24px;
  }
  #project-01 {
    margin-top: 24px;
  }

  .project-gridbox {
    gap: 20px;
    margin-top: 16px;
  }

  .project-gridbox .project-gridbox-left {
    order: 1;
  }
  .project-gridbox .project-gridbox-right {
    order: 2;
  }
  .project-gridbox .project-gridbox-right img {
    width: 100%;
    height: auto;
  }

  .project-gridbox .project-text-01 {
    font-size: 14px;
  }

  .goods .container {
    padding: 32px 16px;
  }
  .goods .section-title {
    margin-bottom: 12px;
  }
  .goods-sales-note {
    font-weight: bold;
    margin-bottom: 24px;
  }
  .goods-grid-01 .goods-card {
    gap: 24px;
    padding: 16px;
  }
  .goods-grid-01 .goods-name {
    margin-top: 0;
  }
  .goods-grid-01 .goods-price {
    font-size: 18px;
  }
  
  .goods-img img {
    width: 100%;
    height: auto;
  }
  .goods-grid-02 .goods-img {
    height: 136px;
  }

  .goods-name img {
    margin: 0;
  }

  .goods .more-plan {
    margin: 36px auto 12px;
  }

  .footer .container {
    padding: 20px 0;
  }
  .footer .container .footer-img:not(:last-child) {
    margin-bottom: 66px;
  }
  .banner_footer_01 {
    width: 100%;
    height: auto;
  }

  #humberger {
    position: relative;
    height: 48px;
    width: 48px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #E782A9;
    border-radius: 50%;
  }
  #humberger div {
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: #fff;
    position: absolute;
    left: 13px;
    transition-duration: .2s;
  }
  
  #humberger div:nth-of-type(1) {
    bottom: 29px;
  }
  #humberger div:nth-of-type(2) {
    bottom: 23px;
  }
  #humberger div:nth-of-type(3) {
    bottom: 17px;
    width: 13px;
  }
  .menu_open {
    overflow: hidden;
  }
  .menu_open #humberger div:nth-of-type(1) {
    transform:rotate(45deg); 
    bottom: 23px;
  }
  .menu_open #humberger div:nth-of-type(2) {
    transform:rotate(-45deg); 
  }
  .menu_open #humberger div:nth-of-type(3) {
    display: none;
  }
  .nav_sp {
    display: none;
  }
  .menu_open .nav_sp {
    display: block;
    position: absolute;
    width: 100vw;
    height: calc(100vh - 64px);
    left: 0;
    top: 64px;
    background: #E782A9;
    z-index: 10;
    padding: 16px;
  }
  .menu_open .nav_sp ul {
    background: #fff;
    border-radius: 24px;
    height: calc(100vh - 64px - 16px - 16px);
    padding: 20px;
  }
  .menu_open .nav_sp ul li {
    border-bottom: 2px dashed #E782A9;
  }
  .menu_open .nav_sp ul li img {
    height: 28px;
  }
  .menu_open .nav_sp a {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 16px 0 16px 54px;
    box-sizing: content-box;
    background-position: 0 16px !important;
  }
  .menu_open .nav_sp .nav_01 {
    background: url(../img/icon_nav_01.svg) 0 0 no-repeat;
    background-size: auto 42px;
  }
  .menu_open .nav_sp .nav_02 {
    background: url(../img/icon_nav_02.svg) 0 0 no-repeat;
    background-size: auto 42px;
  }
  .menu_open .nav_sp .nav_03 {
    background: url(../img/icon_nav_03.svg) 0 0 no-repeat;
    background-size: auto 42px;
  }
  .menu_open .nav_sp .nav_04 {
    background: url(../img/icon_nav_04.svg) 0 0 no-repeat;
    background-size: auto 42px;
  }

  #totop {
    right: 16px;
    bottom: 16px;
    z-index: 8;
  }
  #totop .totop_01 {
    width: 60px;
  }
  #totop .totop_02 {
    width: 61px;
  }
  #totop .totop_01 {
    position: absolute;
    left: -12px;
    top: -33px;
  }
  #totop:hover .totop_01 {
    position: absolute;
    left: -12px;
    top: -39px;
  }
}
@media (max-width: 330px) {
  .greeting-box {
    padding: 80px 0;
  }
  .project-btn-title .icon-arrow {
    width: 16px;
  }
}