@charset "UTF-8";

/* ===============================================
for SP 全環境に共通のデザイン
=============================================== */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
}

/* 変数 */
:root {
	--sans_serif: "Noto Sans JP", sans-serif;
  --serif: "Noto Serif JP", serif;
  
  --f1: 3.2rem; /* 32px */
	--f2: 2.8rem; /* 28x */
	--f3: 2.4rem; /* 24px */
	--f4: 1.8rem; /* 18px */
	--f5: 1.6rem;/* 16px : テキストサイズ */
	--f6: 1.4rem;  /* 14px */
  --f7: 1.2rem;  /* 12px */

  --main_color: #FDFDFB; /* 基本色 */
	--base_color: #ffffff; /* 基本背景色 */
  --bg_color: #FBF6F2; /* ブロック背景色 */
  --accent_color: #231715; /* ロゴ色（コピーライト背景） */
  --text_color: #333;
  --border_color: #c3c0c0;
  --border_color_light: #E6E6E6;
  --border_color_table: #CECECE; /* パンくずリスト、プライバシーポリシーttl */
  --border_color_side: #808080;

}

/* フォント・基本背景 */
body {
	font-family: var(--sans_serif);
  font-size: var(--f5);
  color: var(--text_color);
  background-color: #E4E6D8;
  background-image: url( ../img/main_back.png);
  background-repeat: repeat;
}

/* フォント｜見出し */
h1 {
	font-size: var(--f1);
}

h2 {
	font-size: var(--f3);
  font-family: var(--serif);
  text-align: center;
  font-weight: 600;
}

h3 {
	font-size: var(--f4);
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.25rem;
}

h4 {
	font-size: var(--f4);
}

h5 {
	font-size: var(--f5);
}

h6 {
	font-size: var(--f7);
}

/* ブロック｜その他書式、基本設定など */
p {
	line-height: 1.8;
	font-size: var(--f6);
  font-weight: 300;
  letter-spacing: 0.09rem;
  text-align: justify;
}
footer {
  margin-top: auto;
}

li {
  list-style: none;
}

/* リンク */
a {
  text-decoration: none;
  color: var(--text_color);
  transition-duration: 0.8s;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

a:link {
  color: var(--textcolor);
}

a:hover {
  color: #3333339c;
  opacity: 0.8;
  transition-duration: 0.2s;
}

/* アンカーリンクの位置 */
.anchor::before {
  content: "";
  display: block;
  height: 100px; 
  margin-top: -100px; 
  visibility: hidden;
}

/* その他基本設定 */
.wrapper {
  margin: 0 auto;
  max-width: 425px;
  min-width: 375px;
  background-color: var(--base_color);
  border-left: 2px solid var(--accent_color);
  border-right: 2px solid var(--accent_color);
}

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


/* コンテンツ非表示（PC時のみ表示させる） */
.pc_only {
  display: none;
}
/* ポップアップ */
.modal {
	display: none; /* 初期非表示 */
	left: 0;
	position: fixed;
  bottom: 0;
	width: 100%;
	z-index: 10;
}
.modal-overlay {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    background: black;
    /* width: clamp(240px, 32vw, 396px); */
    backdrop-filter: blur(22px);
    background: #00000012;
    background-color: #ffffff4d;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.64);
  }
.modal-content {
	overflow-y: auto;
  padding: 16px 40px 4px;
  text-align: center;
}
@media(min-width:960px) {
  .modal-content {
    padding: 24px 40px 8px;
  }
  .modal-overlay {
    padding: 0 0 8px;
    width: clamp(240px, 37vw, 444px);
  }
}
.modal-close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 26px;
}
@media(min-width:960px) {
  .modal-close {
    font-size: 22px;
  }
}
.modal img {
	max-width: 100%;
}
.modal_title_p {
    font-size: 17px;
    font-weight: 300;
    text-align: center;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-weight: 600;
}
.modal_text_p {
  margin: 10px 0 0;
  line-height: 1.5;
}
.modal_text_p a span {
    font-weight: bold;
    text-align: center;
    display: block;
    font-size: 13px;
    margin: 8px 0 0;
}
@media(min-width:960px) {
  .modal_text_p {
    font-size: 15px;
    margin: 16px 0 0;
  }
  .modal_title_p {
    margin: 0 0 -8px;
  }
}
.modal_img_a {
    height: 100%;
    display: block;
}
/* ポップアップここまで */
/* ===============================================
for tablet and PC
=============================================== */
/* for tablet */
@media screen and (min-width: 768px){
  

}
/* for PC */
@media screen and (min-width:1024px){
/* ------ PCのみのコンテンツ ------- */

/* 基本背景を無くす */
  body {
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
}

/* カラムに関する設定 */
.column {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-width: 1024px;
  position: fixed;
}
/* 左カラム */
/* 左 - 背景 */
.left_column {
  display: block;
  background-image: url(../img/top_bg_left.png);
  background-repeat: no-repeat;
  background-position: left 80px;
  background-size:32% auto;
  background-attachment: fixed;
  width: calc((100% - 425px)/2);
}

/* 左 - 注意書き、購入はこちらリンク画像 */
.left_contents {
  margin-top: 50vh;
  margin-left: 3vw;
}

.left_attention {
  font-family: var(--serif);
  font-weight: 600;
  padding-top: 50px;
}

.left_img_box {
  width: 230px;
  margin-left: 30px;
  margin-top: 50px;
}





/* ------ メイン（中央）カラム ------ */
.main_column {
  margin: 0 auto;
  width: 425px;
  flex: auto;
  min-width: 425px;
  overflow-y: scroll;
}





/* ------ 右カラム ------ */
.right_column {
  background-image: url(../img/bg_r_02@2x.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size:35% auto;
  background-attachment: fixed;
  width: calc((100% - 425px)/2);
}

/* 右 - メニュー  */
.right_contents {
  text-align-last: left;
}

/* 縦書きメニュー （時間の関係で一旦保留）*/
.menu_pc{
  margin-top: 160px;
  margin-left: 20%;
  writing-mode: vertical-rl;
  font-size: 17px;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.2rem;
}
.menu_pc li {
  margin-bottom: 7px;
  padding: 44px 16px 22px;
  border-left: 2px solid var(--text_color);
}

.menu_pc li:nth-child(1) {
 border-right: 2px solid var(--text_color);
}
.menu_pc li:nth-child(1),.menu_pc li:nth-child(2),.menu_pc li:nth-child(3),.menu_pc li:nth-child(4),.menu_pc li:nth-child(5),.menu_pc li:nth-child(6) {
  position: relative;
}
.menu_pc li:before {
  font-family: "Font Awesome 6 Free";
  content: "";
  height: 16px;
  background-image: url(../img/menu_list_mark.png);
  width: 16px;
  position: absolute;
  background-size: 100%;
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
}
}



/* コンテンツ表示（SP時は非表示） */
@media(min-width:1320px) {
.pc_only {
  display: block;
}
}















/* ===============================================
TOP｜ヘッダーのスタイリング
=============================================== */
/* ------　ヘッダー自体　------ */
.header {
  height: 80px;
  background-color: var(--base_color);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.header_container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: inherit;
  color: #fff;
  padding: 0 15px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);

  @media screen and (min-width: 400px) {
  padding: 0 25px;
  }

}

/* ------　サイトタイトル、ロゴ　------ */
.header_logo_box {
  position: relative;
  width: 200px;
}

.header_logo img {
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

.header_shoplist {
  text-align: left;
  margin-left: 10px;
  width: 93px;

  @media screen and (min-width: 768px) {
  margin-left: 30px;
  }

}



/* ------　ハンバーガーメニュー　------ */
/* メニューのスタイル */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  background-color: var(--bg_color);
  color: var(--text_color);
  transition: right 0.3s ease;
  padding: 20px;
  box-sizing: border-box;
  z-index: 100;
}

/* メニューが開いているとき */
.menu.open {
  right: 0;
}

/* メニューリストのスタイル */
.menu ul {
  list-style-type: none;
  padding: 0;
  margin-top: 80px;
}

.menu li {
  padding: 20px 0;
  border-bottom: 1px solid #444;
}

.menu li a {
  color: var(--text_color);
  text-decoration: none;
  display: block;
}

/* ボタンのスタイル */
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 20;
}

/* ボタンの３本線 */
.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--text_color);
  margin: 5px 0;
  transition: 0.4s;
}

/* ボタンの３本線 - バツ印に変化 */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ハンバーガーメニューの下に「menu」という文字を表示 */
.hamburger::after{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 25px;
  content: "MENU";
  color: var(--text_color);
  font-size: 11px;  
}
@media(min-width:1320px) {
  .hamburger {
    display: none;
  }
}



/* ===============================================
TOP｜メインコンテンツのスタイリング
=============================================== */
/* ------　トップ｜ファーストビューイメージ　------ */
.top_fv {
  margin-top: 80px;
  text-align: center;
}





/* ------　コンセプト｜宮崎の景勝地と祭りを伝え繋いでいきたい。　------ */
.top_second {
 text-align: center;
}

.concept h2 {
  margin-bottom: 90px;
  position: relative;
}

.concept h2::after {
  content: "";
  display: inline-block;
  width: 150px;
  height: 80px;
  background: url(../img/top_sub_concept.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 75px;
  left: 115px;

  @media screen and (min-width: 400px) {
  left: 135px;
  }
}

.concept p {
  width: 85%;
  margin: 0 auto;
}





/* ------　ラインナップ｜商品について　------ */
.lineup {
  margin-top: 80px;
  margin-bottom: 120px;
}

.lineup h2 {
  margin-bottom: 90px;
  position: relative;
  z-index: 5;
}

.lineup h2::after {
  content: "";
  display: inline-block;
  width: 110px;
  height: 65px;
  background: url(../img/top_sub_lineup.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 125px;
  z-index: -5;

  @media screen and (min-width: 400px) {
  left: 150px;
  }

}

.pac_box01,.pac_box02,.pac_box03 {
  margin: 0 auto 50px;
  text-align: center;
  width: 80%;
}

.pac_size {
  padding: 5px;
  border: 1px solid var(--border_color);
}

.lineup h3 {
  margin-top: 10px;
}

.attention {
  font-family: var(--serif);
  font-weight: 600;
  padding: 10px 15px 10px 18px;
  width: 85%;
  margin: 0 auto;
  border: 1px solid var(--border_color);
}





/* ------　商品詳細　------ */
/* --- 景・祭・味（六角形の画像） フィルター　共通 --- */
.topics {
  display: flex;
  justify-content: space-around;
  margin: 20px auto 50px;
}

.topics img {
  height: auto;
  padding: 3px;
}

.topics img:hover{
	filter:grayscale(100%); /* グレーのフィルターをかける */
	/* transition:0.2s; */
}


/* .topics {
  display: flex;
  margin: 20px 5px 50px;
} */

/* 
.topics_img {
  width: 100%;
  background-size:contain; 
}

.topics_img a {
  display: inline-block;
}

.topics_img a:hover {
  background-color: transparent;
}

.topics_img a:hover img {
  visibility: hidden;
} */

/* 景・祭・味（六角形の画像）ホバー時 個別*/
/* 日向市（細島） */
/* .hyuga_spot {
  background-image: url(/img/top_hyuga_spot02.png);
}

.hyuga_fes {
  background-image: url(/img/top_hyuga_fes02.png);
}

.hyuga_taste {
  background-image: url(/img/top_hyuga_hebesu02.png);
} */

/* 高千穂 画像ができたら差し替え（htmlも）*/
/* .takachiho_spot {
  background-image: url(/img/top_hyuga_spot02.png);
}

.takachiho_fes {
  background-image: url(/img/top_hyuga_fes02.png);
}

.takachiho_taste {
  background-image: url(/img/top_hyuga_hebesu02.png);
} */

/* 青島 画像ができたら差し替え（htmlも）*/
/* .miyazaki_spot {
  background-image: url(/img/top_hyuga_spot02.png);
}

.miyazaki_fes {
  background-image: url(/img/top_hyuga_fes02.png);
}

.miyazaki_taste {
  background-image: url(/img/top_hyuga_hebesu02.png);
} */






/* --- 概要、詰め合わせ内容　共通 --- */
.overview {
  width: 85%;
  margin: 0 auto 150px;
}

.overview h2 {
  font-weight: 700;
  letter-spacing: 0.15rem;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 5px;
}

.overview p {
  font-size: var(--f5);
  font-weight: 400;
  letter-spacing: 0.15rem;
}

.overview h4 {
  letter-spacing: 0.1rem;
  margin-top: 20px;
  margin-bottom: 15px;
}

.assortment {
  font-size: var(--f6);
  line-height: 1.8;
  letter-spacing: 0.1rem;
  margin: 2rem;
}

/* ---　ボタン「詳細はこちら」　（一旦他のページも共通スタイリングにしている）--- */
.btn_detail a {
  font-family: var(--serif);
  color: #fff;
  background: var(--text_color);
  border: solid 1px var(--text_color);
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 10px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  letter-spacing: 0.1rem;
}
/* ボタン「詳細はこちら」|ホバー時 */
.btn_detail a:hover {
  color: var(--textcolor);
  background: var(--base_color);
  transition: all 0.3s;
}





/* ------　アーティスト｜コラボアーティストと共に。　------ */
.artist {
  background-color: var(--bg_color);
  margin-top: 180px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.artist h2 {
  font-weight: 700;
  letter-spacing: 0.15rem;
  margin-bottom: 80px;
  position: relative;
}

.artist h2::after {
  content: "";
  display: inline-block;
  width: 208px;
  height: 80px;
  background: url(../img/top_sub_artist.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 64px;
  left: 115px;

  @media screen and (min-width: 400px) {
  left: 50%;
  transform: translate(-50%, 0);
  }

}

.artist p {
  width: 85%;
  margin: 0 auto;
}

.momonoya_logo,.hata_prf {
  margin: 100px auto 20px;
  width: 165px;
  height: auto;
}

.field,.occupation {
  font-size: 12px;
}

.artist_name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
}

.momonoya,.hata-yasuko {
  text-align: center;
  margin-bottom: 120px;
}

.profile {
  width: 200px;
  margin: 0 auto;
  padding-bottom: 15px;
  border-bottom: 1px solid #CECECE;
}

.icon {
  width: 90%;
  margin: 0 auto;
  padding: 15px 0;
}

.ic_home {
  font-size: 22px;
  margin-right: 5px;
}

.ic_insta {
  font-size: 25px;
  vertical-align: bottom;
}

.ic_insta::before {
  font-family: "Font Awesome 6 Brands";
}

.intoroduce {
  text-align: left;
}





/* ------　ショップリスト｜販売場所のご案内　------ */
.shoplist {
  margin-top: 70px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.shoplist h2 {
  font-weight: 700;
  letter-spacing: 0.15rem;
  margin-bottom: 100px;
  position: relative;
}

.shoplist h2::after {
  content: "";
  display: inline-block;
  width: 150px;
  height: 80px;
  background: url(../img/top_sub_shoplist.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 35px;
  left: 115px;

  @media screen and (min-width: 400px) {
  left: 135px;
  }

}

.shoplist p {
  width: 85%;
  margin: 0 auto;
}





/* ------　ニュース｜お知らせ　------*/
.news {
  background-color: var(--bg_color);
  padding-top: 60px;
  padding-bottom: 60px;
}

.news h2 {
  font-weight: 700;
  letter-spacing: 0.15rem;
  margin-bottom: 100px;
  position: relative;
  z-index: 5;
}

.news h2::after {
  content: "";
  display: inline-block;
  width: 120px;
  height: 60px;
  background: url(../img/top_sub_news.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 130px;
  z-index: -5;

  @media screen and (min-width: 400px) {
  left: 145px;
  }

}

/* ===============================================
ショップリスト＆お知らせ　テーブル　共通
=============================================== */

.table_shop ,.table_news {
  margin-top: 30px;
  margin-bottom: 50px;
}

.table_shop table,
.table_news table{
	font-size: 14px;
	margin: 0px auto;
  width: 90%;
  border-collapse: collapse;  
}
 
.table_shop table tr,
.table_news table tr {
  border-bottom: 1px solid var(--border_color_table);
}

.table_shop table tr:first-child,
.table_news table tr:first-child {
  border-top: 1px solid var(--border_color_table);
}

.table_shop table th,
.table_news table th{
  font-weight: normal;
	text-align: left;
  letter-spacing: 0.1rem;
  padding: 1.4rem;
}


.table_shop table td,
.table_news table td {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  text-align: end;
  letter-spacing: 0.05rem;
  padding: 1.4rem;
  vertical-align: top;
  white-space: nowrap;
}





/* ===============================================
フッター　全ページ共通
=============================================== */
/* ------　フッターメニュー  ------ */
.footer_top {
 color: #808080;
 background: #ffffff;
 text-align: center;
 padding: 30px;
 font-family: var(--serif);
 font-size: 12px;
}

.footer a {
 color: var(--textcolor);
 text-decoration: none;
 font-size: 12px;
}

.menu_ft {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.menu_ft li {
margin-bottom: 16px;
padding: 0 10px;
border-right: 1px solid var(--border_color_side);
line-height: 1rem;
}
/* メニューサイドのボーダー */
.menu_ft li:nth-child(3),
.menu_ft li:nth-child(6),
.menu_ft li:nth-child(7) {
 border-right: none;
}

.footer_menu {
  width: 97%;
  max-width: 300px;
  margin: auto;
}

.footer_logo {
  margin: 60px auto 30px auto;
  width: 200px;
}

.footer_logo img {
  object-fit: cover;
}

.copyright {
  text-align: center;
  background-color: var(--accent_color);
  color: var(--main_color)
}

.company{
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 20px 5px 10px;
  border-top: 1px solid var(--border_color);
}

.company_left {
  width: 38%;
  padding-left: 15px;
}

.company_left img {
  width: 85%;
}

.company_right {
  width: 60%;
}

.company p {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: bold;
  padding-top: 6px;
}










/* ===============================================
下層ページ共通
=============================================== */
/* ------　タイトルビュー　------ */
.common_view {
  background-color: var(--base_color);
  margin-top: 80px;
  padding: 30px 0;
}





/* ------　パンくずリスト ------ */
.common_breadcrums {
  background-color: var(--base_color);
  padding: 15px 0;
  border-top: 1px solid var(--border_color_table);
  border-bottom: 1px solid var(--border_color_table);
}

.breadcrumb {
  margin: 0 0 0 20px;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;
  list-style: none;
  font-weight: bold;
}

.breadcrumb li:after {
  content: '>'; /* >を表示*/
  padding: 0 0.2em;
  color: var(--text_color);
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: var(--text_color);
  font-size: var(--f6);
  font-weight: 400;
}

.breadcrumb li a:hover {
  text-decoration: underline var(--text_color);
  text-underline-offset: 5px
}



/* ===============================================
商品詳細ページ（lineup__.html）
=============================================== */
/*------ 共通　見出し、下線 ------ */
.prd_ttl {
  text-align: center;
  font-size: 2.2rem;
  padding-top: 50px;
  padding-bottom: 10px;
}

.prd_sub_ttl {
  font-weight: 400;
  text-align: center;
}

.prd_border {
  position: relative;
  text-align: center;
  margin: 0 30px 20px;
  padding-bottom: 15px;
}

.prd_border::after {
  content: '';
  position: absolute;
  display: inline-block;
  left: 50%;
  bottom: 0px;
  width: 100px;
  height: 1px;
  transform: translateX(-50%);
  background-color: var(--text_color);
  border-radius: 2px;
}

.prd_h4 {
  font-family: var(--serif);
  margin-bottom: 10px;
  letter-spacing: 0.25rem;
}

.border_top_bottom {
  text-align: center;
  padding: 5px 0;
  border-top: 1px solid var(--border_color_table);
  border-bottom: 1px solid var(--border_color_table);
  
}

/*------　ボタン「販売場所はこちら」、「詳細はこちら」　（一旦トップページのボタンと同じスタイリング）　------*/
.prd_btn a {
  font-family: var(--serif);
  color: #fff;
  background: var(--text_color);
  border: solid 1px var(--text_color);
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 10px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
/* .prd_btn.shop a {
  color: var(--text_color);
  background: #fff;
  margin: 0 auto;
  padding: 10px 48px;
} */
.prd_btn.shop {
  padding: 0 0 32px;
}
/* ボタン「販売場所はこちら」|ホバー時 */
.prd_btn a:hover {
  color: var(--text_color);
  background: var(--base_color);
  transition: all 0.3s;
}
/* .prd_btn.shop a:hover {
  color: var(--base_color);
  background: var(--text_color);
  transition: all 0.3s;

} */






/* ------　商品詳細　------ */
.prd_yokan {
  background-color: var(--bg_color);
}


/* ---　商品詳細｜スライドショー　--- */
.slideshow_container {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade 15s infinite;
}

.slide img {
  width: 100%;
}

.slide:nth-child(1) {
  animation-delay: 0s;
}

.slide:nth-child(2) {
  animation-delay: 5s;
}

.slide:nth-child(3) {
  animation-delay: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  53% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}




/* ---　商品情報　--- */
.prd_yokan_detail {
  padding-bottom: 50px;
}

.prd_yokan_detail_intro,.prd_yokan_detail_outline,
.prd_nutrition_label {
  margin-bottom: 35px;
}

.intro_01 {
  margin: 10px auto 20px;
  width: 85%;
}

.intro_02 {
  width: 85%;
  margin: 0 auto;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.1rem;
  line-height: 1.8;
}



/* ---　商品情報｜アコーディオンメニュー　--- */
.sub_info {
  width: 85%;
  margin: 0 auto 32px;  
}

.in_01 {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1rem;
  margin: 20px auto 40px;
}

.accordion {
  max-width: 500px;
  margin-bottom: 7px;
  border-bottom: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
}

.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1.5rem 2rem;
  color: var(--text_color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1rem;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';/* タイトル横矢印を表示*/
  transition: transform .3s;
}

.accordion[open] summary::after {
  transform: rotate(225deg);
}

.accordion_in {
  transform: translateY(-10px);
  margin: 0;
  padding: 1rem 0;
  color: var(--text_color);
  transition: transform .5s, opacity .5s;
}

.accordion_in[open] {
  transform: none;
  opacity: 1;
}



/* ---　商品詳細｜栄養表示成分表　--- */
.prd_nutrition_label table {
	font-size: 11px;
	margin: 0px auto;
  width: 100%;
  border-collapse: collapse; 
 
  @media screen and (min-width: 400px) {
	font-size: 12px;
  }

}

.prd_nutrition_label tr {
  border-bottom: 1px solid var(--border_color_table);
}

.prd_nutrition_label tr:first-child {
  border-top: 1px solid var(--border_color_table);
}

.prd_nutrition_label th {
  font-weight: 400; 
	text-align: center;
  letter-spacing: 0.1rem;
  padding: 0.5rem;
}

.prd_nutrition_label td {
  text-align: end;
  letter-spacing: 0.05rem;
  padding: 0.5rem;
}

.prd_nutrition_label .prd_item {
  text-align: center;
}














/* ------　パッケージについて　------ */
.prd_package {
  margin: 56px auto 100px;
}
.prd_package_detail {
  margin-bottom: 30px;
}

.prd_package p {
  width: 85%;
  margin: 0 auto;
}

.note {
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  text-align: left;
  margin-top: 5px;
  margin-bottom: 40px;
}

.prd_package_img_01,
.prd_package_img_02 {
  width: 80%;
  margin: 0 auto 50px;
  text-align: center;
}






/* ------　祭りについて　------ */
.prd_fes {
  margin: 50px auto 100px;
}

.prd_fes_minato {
  width: 85%;
  margin: 0 auto;
}

.prd_fes_img {
  margin: 0 auto 50px;
  text-align: center;
}





/* ------　景勝地について　------ */
.prd_spot {
  margin: 50px auto 100px;
}

.prd_spot_hyugamisaki,
.prd_spot_kurusu {
  width: 85%;
  margin: 0 auto 100px; 
}

.prd_spot_img_01,
.prd_spot_img_02 {
  margin: 0 auto 50px;
  text-align: center;
}
.lineup_02_area_tanada_img {
  margin: 16px 0 0;
  height: 240px;
  object-fit: cover;
}




/* ------　地域について　------ */
.prd_area {
  margin: 50px auto auto;
  padding-bottom: 5px
}

.prd_area_hososhima,
.prd_area_hyuga {
  width: 85%;
  margin: 0 auto 100px;
}

.prd_area_img_01,
.prd_area_img_02 {
  margin: 0 auto 50px;
  text-align: center;
}





/* ===============================================
お知らせ（news.html）
=============================================== */
/* ------　お知らせ　メイン　------ */
.news_info {
  padding: 80px 0 100px;
  text-align: center;
  background-color: var(--bg_color);
}

.news_info article {
  width: 85%;
  margin: 0 auto 80px;
  padding: 40px 40px 35px;
  text-align: left;
  background-color: var(--base_color);
}

.news_info article h3 {
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border_color_light);
}

.news_info article .text_content {
  line-height: 2.0;
}





/* ---　お知らせ｜ページネーション　(２ページ目以降ができた時)--- */
.pager {
  margin: 0 auto;
  border-top: 1px solid var(--border_color_light);
  border-bottom: 1px solid var(--border_color_light);
  width: 85%;
  padding: 15px;
}

.pager__list {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.pager__item {
  min-width: 40px;
  text-align: center;
  font-size: 1.4rem;
}

.pager__item a:hover {
  text-decoration: underline;
}




/* ===============================================
お問い合わせ（contact.html）
=============================================== */
/* ------　フォームエリア　------ */
.form_area {
  padding: 50px 0;   
  /* background-image: url( ../img/back_texture.jpg); */
  background-color: var(--bg_color);
  background-blend-mode:lighten;
  background-repeat: repeat;
}
    
.form {
  width: 80%;
  margin: 0 auto;  
}


/* ===============================================
プライバシーポリシー（privacy.html）
=============================================== */
/* 見出し、下線  共通　*/
.pr_border {
  font-size: 1.7rem;
  text-align: left;
  margin: 60px 30px auto;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border_color_table);
}

/* リード */
.pr_lead {
  margin: 40px 20px auto;
}

/* メインテキスト */
.pr_main_text {
  padding-bottom: 10px;
}

.pr_main_text p {
  margin: 15px 30px auto;
}

.pr_main_text a {
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.pr_url_bold {
  font-weight: 500;
}

/* 改訂日 */
.pr_revision_date {
  text-align: end;
}

/*------　ボタン「お問い合わせフォームはこちらから」（一旦トップページのボタンと同じスタイリング）　------*/
.pr_btn_contact a {
  font-family: var(--serif);
  color: #fff;
  background: var(--text_color);
  border: solid 1px var(--text_color);
  display: block;
  box-sizing: border-box;
  max-width: 300px;
  text-align: center; 
  padding: 10px 64px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.pr_btn_contact a:hover {
  color: var(--text_color);
  background: var(--base_color);
  transition: all 0.3s;
}





/* ===============================================
外回り用ページの設定（不要になったら削除する）
=============================================== */
.coming_soon {
  font-size: 30px;
  text-align: center;
  padding-top: 20px;
}
/*----　ここまで↑　----*/