/* スマホ専用 */
@media (max-width: 600px) {
	body {
		font-family: "Klee One", serif;
		margin-top: 10px;
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.main {
		margin-left: auto;
		margin-right: auto;
		max-width: 640px;
	}

	#header {
		padding: 1px 0;
		min-height: 54px;
		position: sticky;   /* ← スクロールで上に張り付く */
	  top: 0;
	  z-index: 1000;
	  background: rgba(255,255,255,.75);   /* 半透明の白 */
	  backdrop-filter: blur(8px);           /* ぼかし（対応ブラウザのみ） */
	  -webkit-backdrop-filter: blur(8px);
	}

  #header .hamburger{
    display: block;
    right: 16px;
    top: 8px;
    z-index: 1101;
  }

  .nav{
    position:fixed; inset:56px 0 0 0; /* ヘッダー下から全画面 */
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:.25s;
  }
  .nav.is-open{
    transform:none; opacity:1; pointer-events:auto;
  }

  .nav ul{
    list-style:none; padding:16px; margin:0;
    display:flex; flex-direction:column; gap:2px;
  }
  .nav a{
    display:block; padding:12px 16px;
    font-size:1.1rem; color:#333; text-decoration:none;
    border-radius:10px; background:#fff1;
  }

  /* ドロワーパネルをダークに（お好みで） */
	.drawer__panel{
	  background: #101010;
	  color: #eee;
	}

	/* ドロワー内だけ pill の見た目を矩形に上書き */
	.drawer .menu-pill{
	  list-style: none;
	  padding: 8px 10px 24px;
	  margin: 0;
	  display: flex;
	  flex-direction: column;
	  gap: 8px;
	}

	.drawer .pill{
	  /* ここが楕円→四角の肝 */
	  width: 100%;
	  margin: 0;
	  padding: 14px 14px 14px 18px;
	  text-align: left;
	  border-radius: 10px;                   /* 角丸小さめ */
	  background: #151515;                   /* フラットな濃色 */
	  border: 1px solid #232323;             /* 細い枠線 */
	  color: #e9edf2;
	  letter-spacing: .03em;                 /* 楕円の広い字間を戻す */
	  font-weight: 500;
	  box-shadow: none;                      /* 楕円の影を無効化 */
	  transition: background .15s, border-color .15s, transform .08s;
	  position: relative;
	}

	/* 左側のアクセントバー（細いライン） */
	.drawer .pill::before{
	  content: "";
	  position: absolute;
	  inset: 10px auto 10px 10px;
	  width: 3px;
	  border-radius: 3px;
	  background: linear-gradient(180deg,#4da3ff 0%, #34d4c5 100%);
	  opacity: .85;
	}

	/* hover / active */
	.drawer .pill:hover{
	  background: #1a1a1a;
	  border-color: #2f2f2f;
	}
	.drawer .pill:active{
	  transform: translateY(1px);
	}

	/* 現在ページを強調したいとき */
	.drawer .pill .is-current{
	  background: #1f2530;
	  border-color: #101010;
	}

  /* 既存の“丸ボタン”デザインを無効化したい場合はここで上書き */
  .nav li{ width:70%; height:auto; }

	.header-list {
		display: flex;
		margin-left: auto;
		margin-right: auto;
		max-width: 640px;
		padding: 0px;
	  background: rgba(255,255,255,.75);   /* 半透明の白 */
	}

	.header-circle {
		width: 70px;
		height: 39px;
		border-radius: 0%;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 9.2px;
		text-align: left !important;
		margin: 0px 5px;
		padding: 0px;
	  background-color: #393939 !important;
	}

	.header-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-decoration: none;
		text-align: left;
		color: #ffffff !important;
		font-family: "Klee One", serif;
	}

	.contact-mail {
		font-size: 17.6px;
	}

	.main-img {
		width: 100%;
	}

	.relative {
	  position: relative;
	}

	.main-motto-img {
		width: 50%;
	  position: absolute;
	  right: 25%;
	  bottom: 25%;
	}

	.main-content {
		width: 100%;
	    text-align: center;
	}

	.main-pre {
		white-space: pre;
		line-height:42px;
	}

	.main-news {
		text-align: center;
	}

	.main-news-list{
	  list-style:none;
	  margin:0; padding:0;
	  border-top:1px solid #333;
	  text-align:left;              /* 親にcenterが当たっていたら左寄せに戻す */
	}

	.main-news-list li{
	  border-bottom:1px solid #333;
	  padding:0.6em 0;
	}

	/* 文字部分だけ中央寄せして2カラム化 */
	.main-news-row{
	  max-width: 560px;             /* 好きな幅に */
	  margin: 0 auto;               /* 中央寄せ */
	  display:grid;
	  grid-template-columns: 8em minmax(0,1fr);  /* 左:日付固定 / 右:本文可変 */
	  column-gap: 1em;              /* 列の間隔 */
	  align-items: center;          /* 縦位置をそろえる */
	  justify-items: start;         /* セル内は左寄せ */
	}

	.main-newsymd{
	  text-align:left;
	  white-space:nowrap;           /* 日付は改行させない（任意） */
	}

	/* 本文が長い時のはみ出し対策（任意） */
	.main-newsbody{
	  overflow-wrap: anywhere;
	}

	/** 色系のクラス */
	.color-peru {
		background-color: #ea8f3f;
		color: #ffffff;
	}
	.color-chocolate {
		background-color: #e17531;
		color: #ffffff;
	}
	.color-mediumTurquoise {
		background-color: #50bbdf;
		color: #ffffff;
	}
	.color-steelBlue {
		background-color: #5b8fc8;
		color: #ffffff;
	}

	.kunugi-img {
		width: 100%;
		text-align: center;
		margin-top: 120px;
	}

	.kunugi-img img {
		width: 30%;
		margin: auto;
	}

	#footer {
		margin-top: 90px;
		margin-bottom: 30px;
		text-align: center;
		font-size: 12px;
	}

	.comming {
		text-align: center;
		margin-top: 100px;
		font-size: 2.1em;
	}
}