@charset "utf-8";


/*==========================
main visual
==========================*/

/* スライダー */
.slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

/* ロゴ中央配置（既存でOK） */
.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: opacity 0.5s ease, z-index 0s ease 0.5s; 
}

.logo img {
  width: 26vw;
  height: 26vw;
  max-width: 500px;
  max-height: 500px;
  min-width: 187px;
  min-height: 187px;
}


/* スクロール用のダミーエリア（画面いっぱい） */
.spacer {
  height: 100vh;
}

/* ロゴをスクロール後に非表示 */
body.scrolled .logo {
  opacity: 0;
  z-index: -1; 
  pointer-events: none; 
}

/********* スクロールダウン *********/


/*スクロールダウン全体の場所*/
.scrolldown1{
position:absolute;
left:50%;
bottom:10px;
height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
position: absolute;
left:-15px;
top: -15px;
color: #eee;
font-size: 16px;
letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
content: "";
position: absolute;
top: 0;
width: 1px;
height: 30px;
background: #eee;
  /*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
left: 8px;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
  height:0;
  top:0;
  opacity: 0;
}
30%{
  height:30px;
  opacity: 1;
}
100%{
  height:0;
  top:50px;
  opacity: 0;
}
}

/* スクロールするとスクロールダウンが消える */
body.scrolled .scrolldown1 {
  display: none;
}


/*==========================
main caption
==========================*/

/* キャプション部分が下からスクロールしてくる */
.main_caption {
  position: relative;
  z-index: 1;
  background-color:rgba(255,255,255,0.8);
  padding: 96px 27.6%;
  opacity: 1;
}


.main_caption_title {
  text-align: center;
  font-size: clamp(18px, 2.08vw, 30px);
  font-weight: 700;
  letter-spacing: 0.5em;
}

.main_caption_txt {
  margin-top: 60px;
  font-size: clamp(13px, 1.73vw, 25px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  
}

.btn {
  margin: 116px auto 0;
  border-radius: 30px;
  background: #2D3D62;
  color: #FFF;
  font-size: clamp(13px, 1.73vw, 25px);
  /* font-weight: 700; */
  display: flex;
  width: 390px;
  height: 70px;
  padding: 14px 49px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  border: 2px solid transparent; /* ← 追加: 初期状態で透明な枠 */
}

.btn:hover {
  background: #fff;
  color: #2d3d62;
  border-color: #2D3D62; /* ← 枠に色をつける */
}

/* .btn::after{
  position: absolute;
  content: '';
  top: 1.3em;
  right: 85px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
} */

/* .container {
  display: flex;
  justify-content: center;  
  align-items: center; 
  margin-top: 100px;    
} */




@media screen and (max-width: 1024px) {
  .main_caption {
    padding: 96px 21.6%;
  }
}

@media screen and (max-width: 768px) {
  .main_caption {
    padding: 96px 9.6%;
  }

  .main_caption_txt {
    margin-top: 30px;
  }

  .btn {
    margin: 50px auto 0;
    width: 159px;
    height: 36px;
  }
}

@media screen and (max-width: 401px) {
  .main_caption {
    padding: 75px 4.2%;
  }

  .main_caption_title {
    letter-spacing: 0.3em;
  }
}

/* @media screen and (max-width: 717px) {
  .main_caption {
    padding: 50px 4.2%;
  }

  .btn {
    margin: 50px auto;
    font-size: 14px;
    width: 200px;
    height: 44px;
  }

} */


/*==========================
read img 1
==========================*/
.lead_img {
  background: #fff;
  position: relative;
  height: 90vw;
  overflow: hidden;
}

/* 共通 figure スタイル */
.lead_img figure {
  position: absolute;
  margin: 0;
}

.lead_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 個別配置 */
.lead_img01 {
  width: 41.5vw;
  height: 30.8vw;
  top: 13%;
  aspect-ratio: 796 / 591;
}

.lead_img02 {
  width: 41.6vw;
  height: 27.4vw;
  right: 0;
  top: 38%;
}

.lead_img07 {
  width: 25.5vw;
  height: 26.1vw;
  bottom: 8%;
  left: 22%;
}

@media screen and (max-width: 768px) {
  .lead_img {
    height: 150vw;
  }

  .lead_img01 {
    width: 62.5vw;
    height: 43.8vw;
    top: 13%;
  }
  
  .lead_img02 {
    width: 55.6vw;
    height: 37.4vw;
    right: 0;
    top: 50%;
  }
  
  .lead_img07 {
    width: 25.5vw;
    height: 26.1vw;
    bottom: 10%;
    left: 11%;
  }
}




/*==========================
variety
==========================*/

.btn_online {
  margin: 116px auto 0;
  border-radius: 30px;
  background: #2D3D62;
  color: #FFF;
  font-size: clamp(13px, 1.73vw, 25px);
  font-weight: 700;
  display: flex;
  width: 390px;
  height: 70px;
  padding: 14px 49px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  border: 2px solid transparent; /* ← 追加: 初期状態で透明な枠 */
}

.btn_online:hover {
  background: #fff;
  color: #2d3d62;
  border-color: #2D3D62; /* ← 枠に色をつける */
}

/* .btn_online::after{
  position: absolute;
  content: '';
  top: 1.3em;
  right: 85px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
} */

.variety {
  background-color: #FFF;
  padding: 100px 8.3% 150px;
  margin-top: -5px;
}

.topics {
  color: #2D3D62;
  font-size: clamp(20px, 2.08vw, 30px);
  font-weight: 700;
  text-align: center;
  position: relative;
}

.topics::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px; 
  background-color: #2D3D62; 
  margin: 15px auto 0; 
}

.variety ul {
  display: flex;
}

.variety li {
  text-align: center;
  margin: 0 auto;
}

.variety h3 {
  text-align: center;
  font-size: clamp(16px, 1.38vw, 20px);
  font-weight: 700;
}

.variety p {
  font-size: clamp(14px, 1.11vw, 16px);
  text-align: left;
  display: inline-block;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {

  .btn_online {
    margin: 50px auto 0;
    width: 159px;
    height: 36px;
  }


  .variety {
    padding: 50px 4.2% 100px;
  }

  .variety ul {
    display: block;
  }

  .variety li {
    margin: 30px auto;
  }

  .topics::after {
    margin: 5px auto 0; 
  }
}

@media screen and (max-width: 375px) {
  .topics::after {
    margin: 10px auto 0; 
    width: 30px;
  }
}

/*==========================
gift
==========================*/
.gift {
  background-color: #fff;
  padding: 100px 8.3% 250px;
  margin-top: -1px;
}


.topics_txt {
  font-size: clamp(14px, 1.11vw, 16px);
  text-align: center;
  margin-top: 50px;
}

.gift_box {
  width: 580px;
  height: 390px;
  margin: 0 auto;
  display: block;
  margin-top: 50px;
}

.btn--online::after {
  display: none;
}

/* .btn::after{
  position: absolute;
  content: '';
  top: 1.3em;
  right: 85px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: rotate(45deg);
} */

@media screen and (max-width: 768px) {
  .gift {
    padding: 50px 4.2% 100px;
  }

  .gift_box {
    width: 75.5vw;
    height: 50.7vw;
    margin: 0 auto;
    display: block;
    margin-top: 50px;
  }
}

@media screen and (max-width: 414px) {
  .topics_txt {
    margin-top: 30px;
  }
  
  .gift_box {
    margin-top: 30px;
  }
}

/*==========================
picture
==========================*/
/* .farmer {
  background: url(../images/read_img03.webp);
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  aspect-ratio: 640 / 251;
  background-repeat: no-repeat;
  background-position: center;
  
} */

.farmer {
  width: 100%;
  aspect-ratio: 640 / 251;  /* ← 元画像の比率に合わせる（任意） */
  overflow: hidden;
}

.farmer img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* はみ出しをトリミングして調整 */
  display: block;
}


/* 共通 figure スタイル */
.read_picture figure {
  position: absolute;
  margin: 0;
}

.read_picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.read_picture {
  position: relative;
  overflow: hidden;
  background-color: #FFF;
  font-size: 0;
  line-height: 0;
  height: 90vw; 
  display: flow-root; 
  margin-top: -5px;
}

/* 風景 */
.pic01 {
  position: absolute;
  width: 58vw;
  height: 33vw;
  top: 48%;
  left: 0%;
  object-fit: cover;
}

/* いちご */
.pic02 {
  position: absolute;
  width: 56vw;
  height: 38vw;
  top: -2%;
  right: 0%;
  object-fit: cover;
}

/* 花 */
.pic03 {
  position: absolute;
  width: 20.6vw;
  height: 25.4vw;
  bottom: 3%;
  right: 6%;
  object-fit: cover;
}

/* @media screen and (max-width: 375px) {
  .farmer {
    aspect-ratio: 640 / 360;
  }
} */

@media screen and (max-width: 768px) {
  .read_picture {
    height: 140vw; 
  }

  /* 風景 */
.pic01 {
  width: 67vw;
  height: 41vw;
  top: 39%;
  left: 0%;
}

/* いちご */
.pic02 {
  width: 62vw;
  height: 43vw;
  top: 2%;
  right: 0%;
}

/* 花 */
.pic03 {
  width: 29.6vw;
  height: 24.4vw;
  bottom: 8%;
  right: 15%;
}
}

/*==========================
shop
==========================*/
.shop {
  background-color: #FFF;
  padding: 200px 8.3% 250px;
  margin-top: 0;
}

.topics_txt {
  text-align: center;
}

.topics_txt p {
  text-align: left;
  display: inline-block;
}

.shop_slider {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.shop_slider img {
  width: 100%;
    height: 28vw;
    object-fit: cover;
    display: block;
}

.shop_wrap {
  display: flex;
  margin-top: 50px;
  gap: 83px;
}

.shop_info_text {
  flex: 1;
  min-width: 300px;
}

.shop_info_text dl {
  margin-bottom: 20px;
  
}

.shop_info_text dt {
  
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 700;
}

.shop_info_text dd {
  margin: 5px 0 15px;
  border-bottom: 1px dashed #999;
  margin-top: 10px;
  font-size: clamp(14px, 1.11vw, 16px);
}

.note {
  font-size: clamp(14px, 1.11vw, 16px);
}

.tel {
  display: flex;
  gap: 28px;
  margin-top: 30px;
}

.tel p {
  text-align: center;
  font-size: clamp(20px, 1.73vw, 25px);
  font-weight: 700;
}

.shop_info_wrap {
  display: flex;
  gap: 50px;
}

.shop_info_img {
  width: 18.4vw;
  height: 13.3vw;
}

.shop_info_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; 
}

/* .btn_shop {
  border-radius: 30px;
  background: #2D3D62;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  width: 252px;
  height: 70px;
  padding: 14px 49px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
} */


.btn_shop {
  margin: 116px auto 0;
  border-radius: 30px;
  background: #2D3D62;
  color: #FFF;
  font-size: clamp(12px, 1.73vw, 25px);
  /* font-weight: 700; */
  display: flex;
  width: 390px;
  height: 70px;
  padding: 14px 49px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  border: 2px solid transparent; /* ← 追加: 初期状態で透明な枠 */
}

.btn_shop:hover {
  background: #fff;
  color: #2d3d62;
  border-color: #2D3D62; /* ← 枠に色をつける */
}
@media screen and (max-width: 768px) {
  .shop {
    padding: 100px 4.2%;
  }

  .shop_wrap {
    display: block;
    margin-top: 50px;
    gap: 83px;
  }

  .shop_slider img {
    /* height: 45vw;  */
    height: 55vw; 
  }

  .shop_info_text {
    margin-top: 30px;
  }

  .shop_info_img {
    width: 31.4vw;
    height: 26.3vw;
  }

  .shop_info_wrap {
    display: flex;
    gap: 40px;
  }

  .btn_shop {
    font-size: 14px;
    /* width: 200px;
    height: 44px; */
    white-space: nowrap;
    width: 179px;
    height: 47px;
  }
}

@media screen and (max-width: 500px) {
  .shop_info_wrap {
    display: block;
  }

  .tel {
    justify-content: center; 
  }

  .btn_shop {
    margin: 30px auto 0; 
  }

  .shop_info_img {
    width: 81.4vw;
    height: 51.3vw;
    margin: 20px auto;
  }
}



/*==========================
map
==========================*/
.map {
  padding: 5.2vw 8.3%;
  background-color: #FFF;
}

.map_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* デフォルト（16:9） */
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
}

.map_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map .topics {
  margin-bottom: 30px;
}

/* スマホ用：高さを少し大きめに */
@media screen and (max-width: 600px) {
  .map_wrap {
    padding-top: 70%; /* 16:9より少し縦長に */
  }

  .map {
    padding: 5.2vw 8.3% 50px;
    background-color: #FFF;
  }
}