@charset "utf-8";
/* CSS Document */

#kiwi-maru-regular{
  font-family: "Kiwi Maru", serif;
  font-weight: 20;
  font-style: normal;
}
h1{
	font-size: 48px;
    color: #1fbb2d;
    text-align: center;
    margin-top: 120px;
}
h2{
	font-size: 25px;
}

/*TOPここから*/
.TOP{
	background-color: #d5ecc6;
}
.TOP_visual{
	position: relative;
	display: grid;
}
.TOP_nashi_img{
	position: relative;
	top: 30px;
}
.oishinashi_img{
	position: absolute;
	left: 18%;
	top: 70px;
	z-index: 10;
}
.otodoke_img{
	position: absolute;
	left: 13%;
	top: 210px;
	z-index: 10;
}

.TOP_nashi_logo{
    position: absolute;
    top: 550px;
    left: 70%;
}

/*TOPビューここまで*/
/*オンラインショップ*/
.online_nashi_logo{
	position: fixed;
	left: 4%;   /* 画面の左端からの距離 */
	bottom: 30px; /* 画面の下端からの距離 */
	z-index: 999; /* 他の要素の下に隠れないように前面へ配置 */
	width: 150px; /* 必要に応じてサイズを調整してください */
	height: auto;
	transition: transform 0.3s ease;
}
.online_nashi_logo:hover {
	transform: scale(1.08);
	transform: translateY(-4px);
}
/*営業時間*/
.eigyo_jikan{
	padding-top: 10%;
	display: flex;
	justify-content: center;
	margin: auto;
}
/*梨について　ここから*/
.nashi_bun{
    color: #eb7d1d;
    font-size: 30px;
    margin-top: 130px;
    margin-left: 43%;
}
.nashi_nashi1_img{
    margin-top: -20px;
    margin-left: 7%;
    margin-right: 10%;
}
.nashi_ni_tuite{
	display: flex;
	justify-content: center;
	margin: auto;
}

/*News*/
.News_bun{
	margin-top: 20%;
    display: flex;
	justify-content: center;
	margin: auto;
}
.News_itiran{
    margin-top: 20%;
    display: flex;
	justify-content: center;
	margin: auto;
}
/*焼きいも*/
.yakiimo_background{
	background-image: url("../img/yakiimo_background_02.png");
}
.yakiimo_background{
    margin-top: 120px;
}
.yakiimo_ni_tuite{
    margin-top: 20%;
    display: flex;
	justify-content: center;
	margin: auto;
}
/*キッチンカー*/
.kitchencar_background{
	background-image: url("../img/yakiimo_background_04.png");
}
.kitchencar_background{
    margin-top: 120px;
	margin-bottom: 20%;
}
.kitchencar_ni_tuite{
    display: flex;
	justify-content: center;
	margin: auto;
}
/*TOPここまで*/

/*↓↓ドロップダウンメニューここから↓↓*/
.header-navi {
  display: flex;
  justify-content: space-between; /* ロゴを左、ドロップダウンを右に分散 */
  align-items: center;            /* 上下の位置を中央揃え */
  list-style: none;
  padding: 0 10px;                 /* 端に少し余白をつける */
  margin: 0;
}
/* 右寄せにしたドロップダウン要素 */
/* ドロップダウンの親要素 */
.dropdown {
  position: fixed;
  top: 20px;       /* 画面上からの距離 */
  right: 16px;     /* 画面右端からの距離 */
  margin-left: 0;
  z-index: 10000;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 340px;
  max-width: 90vw;
  /* ↓ 最前面（文字や画像より上）に表示させる設定 */
  z-index: 9999;
  background-color: rgba(168, 211, 150, 0.85);
  padding: 14px 12px;
  list-style: none;
  margin-top: 10px;
  border: 6px solid #1fbb2d;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(248, 195, 205, 0.4);
  /* アニメーション設定 */
  opacity: 0.8;
  visibility: hidden;
  transform: translateY(-12px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
  pointer-events: none;
}
.dropdown-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  opacity: 0.9; /* 透過度を調整 */
  pointer-events: none;
  z-index: -1;
}
.drop_menu_leaf{
	transition: transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
	transform: translateY(0);
	will-change: transform;
}
.drop_menu_leaf:hover {
	transform: scale(1.08);
	transform: translateY(-4px);
}
/* --- メニューが開いた時（.is-active クラス付与時） --- */
.dropdown-menu.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1); /* ふわっと跳ねるように登場 */
  pointer-events: auto;
}

/* 各項目のスタイル */
.dropdown-menu li {
  margin-bottom: 6px;
}
.dropdown-menu li:last-child {
  margin-bottom: 0;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
	margin: 0;
  color: #5a4438;/*茶色#5a4438*/
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  border-radius: 12px;
  transition: background-color 0.2s, transform 0.2s;
}
.dropdown-menu a img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.dropdown-menu a:hover {
  background-color: #1fbb2d;
  color: #ffffff;
  transform: translateX(4px);
}
/* メニューアイコンのクリック範囲 */
.dropdown-toggle {
  display: block;
  position: relative;
  z-index: 10001;
  width: fit-content;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  text-decoration: none;
}
/* メニューアイコン画像 */
.dropdown-toggle img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
/* キーボード操作時のフォーカス表示 */
.dropdown-toggle:focus-visible {
  outline: 2px solid #1fbb2d;
  outline-offset: 4px;
  border-radius: 5px;
}
.contact_drop{
	padding-top: 30px;
	display: flex;
	justify-content: center;
}
/*↑↑ドロップダウンメニューここまで↑↑*/

/*共通*/
.midashi{
	color: #eb7d1d;
}
.midashi h1{
	background-color: #ffffff;
	border-radius: 0 20px 20px 0;
	margin-left: 50px;
	padding-left: 4%;
	opacity: 0.85;
}
.midashi h2{
	margin-top: -5px;
}
.bun_Green{
	color: #1fbb2d;
}
.hon_bun{
	padding-left: 50px;
}
.hon_bun h3{
	background-color: #ffffff;
	border-radius: 0 20px 20px 0;
	padding-left: 2%;
	opacity: 0.85;
}
ul{
	list-style: none;
}
/*footer*/
.TOP_footer{
	background-image: url("../img/footer_nashi_frame.png");
}
.TOP_footer a{
    text-decoration: none;
}
.TOP_footer a:link{
    color: #1fbb2d;
}
.TOP_footer a:visited{
    color: #31D8E6;
}
.TOP_footer a:hover{
    color: #31D8E6;
}
.TOP_footer a:active{
    color: #DA6CD2;
	display: flex;
	justify-content: center;
	margin: auto;
}
.footer_nashi_logo{
	padding-left: 8%;
}
address{
    padding-top: 40px;
    padding-left: 100px;
    color: #1fbb2d;
}
.footer_address_icon{
    padding-top: -300px;
    padding-left:  330px;
}
.other{
    color: #1fbb2d;
    margin-top: 30px;
    margin-left: 25%;
    margin-bottom: 50px;
}
copyright{
    margin-left: 320px;
    margin-bottom: 20px;
    color: #1fbb2d;
}
.dummy{
	margin-left: 22%;
}
@media screen and (min-with: 768px){
	
}
/*TOP画像たち*/
.TOP_visual{
	display: flex;
}
.nashi_TOPimg{
	text-align: center;
	flex-basis: 60%;
}
.oisiinashi_otodoke_pire{
	flex-basis: 20%;
}
.TOP_nashi_logo{
	flex-basis: 20%;
}