@charset "UTF-8";

/*＝＝画面の大きさ＝＝*/
/* SP       ～519px
   tab 520px～959px
   PC  960px～      */

/* ＝＝【slidebox】＝＝ */

.slidebox {
   margin-top: 100px;
   height: 600px;
   overflow: hidden;
   /* ↑ はみ出した部分を非表示 */
   position: relative;
   margin-bottom: calc(var(--gutter-base)*3);
}

/* ↓ slidebox上のテキスト */
.slidebox .slidebox_text {
   white-space: nowrap;
   /* ↑ 自動改行しない */
   font-size: 20px;
   color: #fff;
   z-index: 11;
   /* ↑ slidebox画像(z-index:10)より上層 */
   position: absolute;
   top: 60%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-shadow: 1px 2px 3px #808080;
}

/* ↓ slidebox画像 */
.slidebox .item {
   z-index: 10;
   opacity: 0;
   width: 100%;
   height: 600px;
   background-position: center center;
   /* ↑ 背景画像の初期位置 */
   background-repeat: no-repeat;
   /* ↑ 背景画像を敷き詰める方法⇒繰り返さない */
   background-size: cover;
   /* ↑ 比を保ったまま領域全面を覆う最小サイズにする */
   position: absolute;
   left: 0;
   top: 0;
   animation: anime 30s 0s infinite;
   /* ↑ anime（名前） 30s（1回分の時間） 0s（すぐに開始） infinite（無限に繰り返し） */
}

/* ↓ slidebox画像2枚目 :nth-of-type(2)は疑似クラス */
.slidebox .item:nth-of-type(2) {
   animation-delay: 10s;
}

/* ↓ slidebox画像3枚目 :nth-of-type(3)は疑似クラス */
.slidebox .item:nth-of-type(3) {
   animation-delay: 20s;
}

/* ↓ slideboxふわっとアニメ animetionプロパティの動きを定義
　　　アニメーション名"anime"で紐づける */
@keyframes anime {
   0% {
      opacity: 0;
   }

   30% {
      opacity: 1;
   }

   50% {
      opacity: 0;
      z-index: 9;
      /* ↑ 下層の画像と入れ替わり始める */
   }

   100% {
      opacity: 0;
      /* ↑ 下層の画像と完全に入れ替わる */
   }
}

/* ＝＝【slidebox】＝＝PC版 */

@media screen and (min-width:960px) {
   .slidebox {
      height: 800px;
   }

   /* ↓ slidebox上のテキスト */
   .slidebox .slidebox_text {
      font-size: 32px;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
   }

   /* ↓ slidebox画像 */
   .slidebox .item {
      width: 100%;
      height: 800px;
   }
}

/* ＝＝【concept】＝＝ */

.concept {
   margin-bottom: var(--section-gutter);
}

.concept .concept_inner {
   padding-left: var(--side-gutter);
   padding-right: var(--side-gutter);
}

.concept .concept_text {
   color: var(--main-color);
   max-width: 520px;
   margin-left: auto;
   margin-right: auto;
}

/* ＝＝【concept】＝＝PC版 */

@media screen and (min-width:960px) {
   .concept {
      margin-bottom: var(--contents-gutter-pc);
   }
}

/* ＝＝【flower】＝＝ */

.flower {
   margin-bottom: var(--section-gutter);
}

.flower .flower_inner {
   padding: 0 var(--side-gutter);
}

.flower .flower_img {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   /* ↑ 画像の最小幅は250px、画面の横幅に応じて横並びの枚数を調整 */
   gap: calc(var(--gutter-base)*5);
   margin-bottom: var(--contents-gutter);
}

.flower .flower_img figcaption {
   text-align: center;
   margin-top: var(--gutter-base);
}

/* ↓ 花の画像全体をクリックできるようにする（親要素） */
.flower .flower_img figure {
   position: relative;
}

/* ↓ 花の画像全体をクリックできるようにする（親要素が基準） */
.flower .flower_img figure a {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

/* ＝＝【flower】＝＝PC版 */

@media screen and (min-width:960px) {
   .flower {
      margin-bottom: var(--section-gutter-pc);
   }

   .flower .flower_img {
      margin-bottom: var(--contents-gutter-pc);
   }

   .flower .flower_img figure a:hover {
      background-color: rgba(255, 255, 255, 0.3);
   }
}

/* ＝＝【cafe】＝＝ */

.cafe {
   margin-bottom: var(--section-gutter);
}

.cafe .cafe_inner {
   padding: 0 var(--side-gutter);
}

.cafe .cafe_img {
   margin-bottom: var(--contents-gutter);
   display: block;
}

.cafe .cafe_text {
   margin-bottom: var(--contents-gutter);
}

/* ＝＝【cafe】＝＝PC版 */

@media screen and (min-width:960px) {
   .cafe {
      margin-bottom: var(--section-gutter-pc);
   }

   /* ↓ PC画面では横2列表示にする */
   .cafe .cafe_inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      align-items: center;
      column-gap: calc(var(--gutter-base)*4);
   }

   .cafe h2 {
      align-self: self-end;
   }

   .cafe .cafe_text {
      margin-bottom: var(--contents-gutter);
      padding: 0 calc(var(--gutter-base)*3) 0;
   }

   /* ↓ PC画面ではCafe画像は右側2マス分の場所に表示 */
   .cafe .cafe_img {
      grid-column: 2/3;
      grid-row: 1/4;
      margin-bottom: 0;
   }

   .cafe .btn {
      width: 350px;
      align-self: self-start;
   }
}

/* ＝＝【news】＝＝ */

.news {
   margin-bottom: var(--section-gutter);
}

.news dl {
   padding: 0 var(--side-gutter);
   margin-bottom: calc(var(--gutter-base)*2);
}

/* ↓ 最終行は下に余白を取らない */
.news dl:last-child {
   margin-bottom: 0;
}

.news dl dd {
   border-bottom: 2px dotted var(--main-color);
   padding-bottom: var(--gutter-base);
}

/* ＝＝【news】＝＝Tab版・PC版 */

@media screen and (min-width:520px) {
   .news {
      margin-bottom: var(--section-gutter-pc);
   }

   /* ↓ 日付とトピックを横並びに変更 */
   .news dl {
      display: flex;
      border-bottom: 2px dotted var(--main-color);
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
   }

   .news dl dt {
      width: 30%;
      /* ↑ 日付の幅 */
   }

   .news dl dd {
      width: 70%;
      /* ↑ トピックの幅 */
      border-bottom: none;
   }
}