@charset "UTF-8";
 /* --- 基本リセット --- */
*, *::before, *::after {
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, figure, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;

letter-spacing: .08em;
line-height: 1.8;
word-break: break-all;

}
html{scroll-behavior: smooth;
}
body {

color: #333;
scroll-behavior: smooth;
box-sizing: border-box;
background-color:#FFFFFF;
}
img {
border: none;
vertical-align: bottom;
}
.sp {display:none;}
.pc {display:block;}
@media screen and (max-width: 768px) {
:target {
  scroll-margin-top: 60px;
}
.sp {display: block !important;}
.pc {display: none !important;}
}
ul,li {list-style: none;}
html {
	background-color:#FFFFFF;
	font-size: 16px;
	line-height: 160%;
	color: #333;
}
/* Start of "Micro cf" */
.cf { zoom: 1; }
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }

a,a:visited,a:active {
	color: #000;
	text-decoration: none;
	/*\*/overflow: hidden;/**/
}

a:hover {
	color: #000;
	text-decoration: underline;
	/*\*/overflow: hidden;/**/
}
	
a:active,a:focus{
	outline: 0 none;
}


/* --- サイドバー（PC/スマホ共通スタイル） --- */
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 20%;
height: 100vh;
background-color:/* #591928*/#e9e0d5;

color: #333;

z-index: 3000;
overflow-y: auto;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sidebar a img.logo {
display: block;
max-width: 100%;
width:100%!important;
height: auto;
margin-bottom: 10px;
padding: 0px;

}

.sidebar a {
display: flex;
align-items: center;
transition: background-color 0.2s;
color: #333;
padding: 10px 30px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s;
border-top: 1px solid #cac0c0;
font-size: 0.85em;
cursor: pointer;
flex-wrap: wrap;


}
.sidebar h1 a,.sidebar a:first-child {
background-color: #591928;
border-top: unset;
}


.sidebar a:hover,
.sidebar h1 a,.sidebar .submenu a:first-child:hover {
background-color: #c8c0b4;
}
.sidebar a img {
display: block;
width:85%;
margin-bottom:0.25em;
}
.sidebar a p{letter-spacing:0.125em; }
  
.sidebar a p span {
  font-weight: bold;
  font-size:1.1em;
  display: block;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings:
    "wdth" 100;
}


/* 下層メニュー */
.submenu {
max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
}
.submenu.open {
max-height: 500px;
opacity: 1;
}
.sidebar h1 a,.sidebar .submenu a:first-child{
  background-color:/* #591928*/#cac3bb;
}

.submenu a {
padding: 1em 3em;
      font-size: 0.85em;
      background-color: rgb(107 94 94 / 15%);
      margin-top: 2px;
}
#about-arrow, #brand-arrow, #business-arrow {
      margin-left: auto; 
    }

/* --- メインコンテンツ --- */
.content {
margin-left: 20%; /* サイドバーの分だけ右にずらす */
padding: 0;
transition: margin-left 0.3s ease;
/* コンテンツが少なくてもフッタを下に押し下げるための設定（任意） */
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: "Noto Sans JP", "Roboto";
}

main {
flex: 1; /* フッタを最下部に押しやる */
}

/* --- HEROスライダー設定 --- */
.hero-slider {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background-color: #333;
}
.hero-slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: top center;
opacity: 0;
transition: opacity 1s ease;
pointer-events: none;
}
.hero-slide.active {
opacity: 1;
pointer-events: auto;
}

/* 画像設定（PC用） */
.slide-1 { background-image: url('/images/top/miyako-info.jpg'); }
.slide-2 { background-image: url('/images/top/hero-1.jpg'); }
.slide-3 { background-image: url('/images/top/banner-2025.jpg'); }
.slide-4 { background-image: url('/images/top/banner-2025-2-8.png'); }

/* スライダー操作パーツ */
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #fff;
background: rgba(0,0,0,0.4);
border: none;
cursor: pointer;
padding: 15px;
z-index: 10;
transition: background 0.3s;
}
.slider-btn:hover { background: rgba(0,0,0,0.7); }
.slider-btn.left { left: 0; }
.slider-btn.right { right: 0; }

.dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: all 0.3s;
}
.dot.active { background: #fff; transform: scale(1.3); }



/*section h2 {
color: #591928;
border-left: 5px solid #591928;
padding-left: 15px;
border-bottom: 1px solid #efefef;
}*/
section#infomation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 20px;
}
section#infomation #event {
   width:68%;
}
section#infomation #event .googleCalendar iframe {
width: 100%;
height: 540px;
}
section#infomation #event .title2 {
width: 100%;
/* height: 25px; */
height: 40px;
margin: 0px auto 16px auto;
border-bottom: 1px dotted #cccccc;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 1px 0;
}
section#infomation #info2 {
   width:30%;
   padding-top:40px;
}
section#infomation #info2 img.bnr {
   width:100%;
}
section#infomation #info2 .news .title {
width: 100%;
/* height: 25px; */
margin: 1em 0 0 0;
padding: 5px 0;
border-bottom: 1px dotted #cccccc;
width: 98%;
}
section#infomation #info2 .news ul {
margin: 0;
padding: 0;
}
section#infomation #info2 .news ul li {
padding: 0.5em 0;
border-bottom: 1px dotted #cccccc;
}

section#infomation #info2 .news .more-btn a {
border: 1px solid #cccccc;
padding: 0.5em 1em;
border-radius: 12px;
display: inline-block;
line-height: 1;
margin-top: 1em;
}



/* ベース設定 */
.action-section {
background: linear-gradient(to bottom, #f9fafb, #ffffff);
padding: 64px 16px;

}

.action-container {
max-width: 1150px;
margin: 0 auto;
}

/* グリッドレイアウト */
.action-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}

/* PC表示（768px以上）で3列にする */
@media (min-width: 768px) {
.action-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.action-section {
  padding: 80px 32px;
}
}

/* カード本体 */
.action-card {
display: block; /* リンクをブロック要素に */
position: relative;
overflow: hidden;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
min-height: 280px; /* カードの最低高さ */
}

/* ホバー時のカード全体の動き */
.action-card:hover {
transform: translateY(-8px);
text-decoration: none;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 背景画像 */
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

/* グラデーションオーバーレイ */
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: linear-gradient(135deg, #8B1538, #a82951);*/ /* 指定されたエンジ色のグラデーション */
background: linear-gradient(135deg, #b1a08a, #dfd0bd);/* グレージュ色のグラデーション */
opacity: 0.9;
transition: opacity 0.3s ease;
z-index: 1;
}

.action-card:hover .bg-overlay {
opacity: 0.7;
text-decoration: none;
}

/* コンテンツエリア */
.card-content {
position: relative;
z-index: 10;
padding: 32px; /* p-8 */
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
min-height: 280px;
}

@media (min-width: 1024px) {
.card-content {
  padding: 40px; /* lg:p-10 */
}
}

/* アイコン */
.icon-wrapper {
display: inline-flex;
padding: 16px;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
margin-bottom: 16px;
}
.icon-wrapper svg {
width: 32px;
height: 32px;
color: white;
stroke-width: 1.5;
}

/* テキスト */
.card-title {
color: white;
margin: 0 0 12px 0;
font-size: 1.25rem;
font-weight: bold;
}

.card-desc {
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-size: 1rem;
line-height: 1.5;
}

/* 「詳しく見る」リンク */
.link-text-wrap {
margin-top: 24px;
display: flex;
align-items: center;
color: white;
font-weight: bold;
}
.link-text-wrap span {
margin-right: 8px;
}
.arrow-icon {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}

/* ホバー時の矢印移動 */
.action-card:hover .arrow-icon {
transform: translateX(8px);
}

/* 装飾用の円（右上の薄い丸） */
.decorative-circle {
position: absolute;
top: 0;
right: 0;
width: 128px;
height: 128px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 9999px;
margin-top: -64px;
margin-right: -64px;
transition: transform 0.5s ease;
z-index: 2;
pointer-events: none; /* クリックを邪魔しないように */
}

.action-card:hover .decorative-circle {
transform: scale(1.5);
}

/* --- ★今回追加したフッタのスタイル --- */
footer {
background-color: #cdcdcd; /* 指定の背景色 */
color: #333;
text-align: center;
padding: 20px;
font-size: 1.0em;
}

/* --- フッター全体のスタイル --- */
.site-footer {
background-color: #f5f5f5;
border-top: 1px solid #efefef; /* border-gray-300 */
color: #333;
}

.footer-container {
max-width: 1280px; /* max-w-7xl */
margin: 0 auto;
padding: 32px 16px; /* py-8 px-4 */
}

/* PC幅（1024px以上）でのパディング調整 */
@media (min-width: 1024px) {
.footer-container {
  padding: 48px 32px; /* lg:py-12 lg:px-8 */
}
}

/* --- グリッドレイアウト --- */
.footer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
gap: 24px; /* gap-6 */
}

/* タブレット・PC（768px以上）で4列にする */
@media (min-width: 768px) {
.footer-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 48px; /* lg:gap-12 */
}
}

/* --- 各カラムのスタイル --- */
.footer-heading {
margin-top: 0;
margin-bottom: 16px; /* mb-4 */
font-weight: bold;
font-size: 1rem;
}

@media (min-width: 1024px) {
.footer-heading {
  margin-bottom: 24px; /* lg:mb-6 */
  text-align: left;
}
}

/* 特定の見出しをPCで透明にする (md:opacity-0) */
@media (min-width: 768px) {
.desktop-hidden-text {
  opacity: 0;
  pointer-events: none; /* 透明時はクリック不可に */
}
}

/* --- リンクりスト --- */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}

.footer-links li {
margin-bottom: 8px; /* space-y-2 */
}

@media (min-width: 1024px) {
.footer-links li {
  margin-bottom: 12px; /* lg:space-y-3 */
  text-align: left;
}
}

.footer-links a {
color: #374151; /* text-gray-700 */
text-decoration: none;
font-size: 0.875rem; /* text-sm */
transition: color 0.2s;
}

.footer-links a:hover {
color: #111827; /* hover:text-gray-900 */
}

/* --- コピーライト部分 --- */
.footer-bottom {
margin-top: 32px; /* mt-8 */
padding-top: 24px; /* pt-6 */
border-top: 1px solid #d1d5db; /* border-gray-300 */
text-align: center;
font-size: 0.875rem; /* text-sm */
color: #4b5563; /* text-gray-600 */
}

@media (min-width: 1024px) {
.footer-bottom {
  margin-top: 48px; /* lg:mt-12 */
  padding-top: 32px; /* lg:pt-8 */
}
}

/* --- スマホ・タブレット用ヘッダ --- */
.header {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #591928;
color: #fff;
padding: 0 20px;
align-items: center;
justify-content: space-between;
z-index: 2000;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.header img { height: 48px; }

.hamburger {
width: 30px;
height: 24px;
position: relative;
cursor: pointer;
z-index: 3500;
}
.hamburger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 0; }

.hamburger.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 2500;
opacity: 0;
transition: opacity 0.4s ease;
}
.overlay.active { display: block; opacity: 1; }

.page-top-btn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background-color: #591928;
      color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 1500; 
      opacity: 0; 
      visibility: hidden; 
      transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      font-size: 24px;
      user-select: none;
    }

    /* 表示状態のクラス */
    .page-top-btn.show {
      opacity: 1;
      visibility: visible;
    }

    /* ホバー時の動き */
    .page-top-btn:hover {
      background-color: #732040;
      transform: translateY(-5px);
    }


/* --- レスポンシブ設定（スマホ向け） --- */
@media (max-width: 767px) {
.header { display: flex; }

.sidebar {
  width: 280px;
  transform: translateX(-100%);
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}
.sidebar.active { transform: translateX(0); }

.content {
  margin-left: 0;
  padding-top: 60px;
}

section { padding: 40px 20px; }
.hero-slider { height: 350px; }

/* 画像設定（スマホ用） */
.slide-1 { background-image: url('/images/top/miyako-info.png'); }
/*.slide-2 { background-image: url('/images/top/top_02.jpg'); }
.slide-3 { background-image: url('/images/top/top_03.jpg'); }*/

section#infomation {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
section#infomation #event {
width: 100%;
}
section#infomation #info2 {
width: 100%;

}
.page-top-btn {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
      }

}