@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/*
col0：活動報告の中身
col1：プロフィールの中身
col2：お問合せの中身
col3：政策の中の写真
col4：お願いの中身
col5：what's newの中身
*/
/* ==========================================================================
   Base Styles
   ========================================================================== */
   :root {/*OK*/
    --main-yellow: #FFEA00;
    --soft-yellow: #FFF9C4;
    --accent-orange: #FF9800;
    --text-black: #333333;
    --bg-white: #FFFFFF;
    --bg-light: #FAFAFA;
    --tag-event: #FF7043;
    --tag-report: #4DB6AC;
}



/* ==========================================================================
   Main Visual
   ========================================================================== */


/* reset */
marker01,
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,/*見出し〜プロフィール〜等*/
h3,
h4,/*小見出し〜その他の活動〜等、リボン風*/
h5,/*小見出し　プロフィール欄、付箋風*/
h6,
h7,/*read more*/
h8,/*詳細*/
h9,/*小文字*/
pre,
form,
fieldset,
input,
textarea,
p,
p2,/*小文字*/
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,

var {
	font-style: normal;
}

ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th {
	text-align: left;
}

q:before,
q:after {
	content: '';
}

object,
embed {
	vertical-align: top;
}

legend {
	display: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
}

img,
abbr,
acronym,
fieldset {
	border: 0;
}

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
*/
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--text-black);
    font-family: 'Noto Sans JP', sans-serif;
    background-color: var(--bg-white);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
}

p{
	line-height: 3;
	font-size:1.5rem;
}

a:hover,
.active {
	text-decoration: underline;
}

a:active,
a:focus,
input:active,
input:focus {
	outline: 0;
}


/* ==========================================================================
   Header
   ========================================================================== */
/* --- ヘッダー全体のデザイン修正 --- */
#header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: var(--soft-yellow);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 影を薄くしてすっきり */
}

/* --- 2. 上段：ユーティリティバー（右寄せの強化） --- */
.header-top {
    background: rgba(0, 0, 0, 0.03); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 3px 0; /* 上下の隙間を最小限に */
}

.header-top .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 左右に20pxの余白を追加 */
}

.top-text {
    font-size: 1.0rem; /* 文字を少し小さく */
    color: #666;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; /* 強制的に右側に寄せます */
}

.header-sns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-sns img {
    height: 16px; /* アイコンを少し小さく */
    width: auto;
}

/* --- 3. 下段：ロゴとナビの横並びを完璧にする --- */
#headerWrap {
    padding: 0; /* ここでの余白をゼロにします */
}

#headerWrap .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px; /* 左右に20pxの余白を追加 */
}

.logo-area {
    line-height: 1.1;
    flex-shrink: 0; /* ロゴが潰れないように固定 */
}

.logo-area a {
    display: block;
    text-decoration: none;
    position: relative;
    padding: 10px 0;
}

/* 肩書きエリア */
.logo-title-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    border-left: 3px solid var(--accent-orange); /* オレンジの縦ラインでアクセント */
    padding-left: 10px;
}

.ward-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #666;
    letter-spacing: 0.15em;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 無所属ラベル：より洗練されたデザインへ */
.indie-badge {
    font-size: 1.1rem;
    background: #333;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

/* 名前エリア：PCで最大化 */
.logo-name-box {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;
    color: var(--text-black);
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.family-name {
    font-size: 4.8rem; /* 圧倒的なサイズ感 */
    letter-spacing: 0.2em;
}

.given-name {
    font-size: 4.2rem; /* 下の名前をわずかに小さくしてリズムを作る */
    letter-spacing: 0.15em;
}

/* マウスホバーで上品に光る効果 */
.logo-area a:hover .logo-name-box {
    color: var(--accent-orange);
    transition: 0.4s;
}

/* --- ヘッダーの高さ調整（ロゴを大きくした分、少し広げます） --- */
#headerWrap .header-container {
    height: 100px !important; /* PC版：ロゴが呼吸できるように高さを100pxに */
}

/* --- 4. メニューのボタン（高さを抑える） --- */
#mainnav ul {
    display: flex;
    align-items: center;
    gap: 2px; /* ボタン同士を少し近づける */
}

#mainnav li a {
    font-size: 1.3rem; /* 文字サイズを調整 */
    padding: 5px 10px; /* 上下の余白を削って縦幅を薄く */
    border-radius: 4px;
}

/* 「ご支援のお願い」ボタンもスリムに */
.nav-special a {
    background: var(--main-yellow) !important;
    border: 1.5px solid #333 !important; /* 線を少し細く */
    box-shadow: 1.5px 1.5px 0px #333 !important; /* 影も控えめに */
    padding: 5px 12px !important; /* 他のボタンと高さを合わせる */
    margin-left: 5px;
}

/* --- 5. メイン画像の開始位置を修正 --- */
#mainImg {
    margin-top: 85px !important; /* ヘッダーが薄くなった分、ここも調整 */
}
/* ==========================================================================
   Main Visual
   ========================================================================== */
/*メインイメージ画像*/
#mainImg {/*OK*/
    margin-top: 70px;
    position: relative;
	z-index: -1;
}

.video-container {/*OK*/
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-container video {/*OK*/
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.main-copy p {/*OK*/
    background: rgba(255, 255, 255, 0.8);
    display: inline-block;
    padding: 15px 40px;
    font-size: 2.4rem;
    font-weight: 700;
    border-radius: 50px;
    color: var(--accent-orange);
}

/* ==========================================================================
   Headline & Titles
   ========================================================================== */
   .section-header {/*OK*/
    text-align: center;
    margin-bottom: 50px;
}

.title-main {/*OK*/
    font-size: 3.2rem;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}






/* ==========================================================================
   Cards (What's New)
   ========================================================================== */
   .card-grid {/*OK*/
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.info-card {/*OK*/
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border: 2px solid var(--soft-yellow);
    transition: transform 0.3s;
}

.info-card:hover {/*OK*/
    transform: translateY(-5px);
}

.category {/*OK*/
    display: inline-block;
    padding: 2px 12px;
    border-radius: 50px;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.tag-event { background: var(--tag-event); }/*OK*/
.tag-report { background: var(--tag-report); }/*OK*/

.date {/*OK*/
    display: block;
    font-size: 1.3rem;
    color: #888;
}

.info-card h3 {/*OK*/
    font-size: 1.8rem;
    margin: 10px 0 15px;
}

.more-link {/*OK*/
    color: var(--accent-orange);
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: underline;
}


/* フッター
------------------------------------------------------------*/
#footer {/*ok*/
    background: var(--text-black);
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    font-size: 1.2rem;
}


/* 共通
------------------------------------------------------------*/

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

video {
	width: 100%;
	height: auto;
}

section {
	clear: both;
	padding-top: 70px;
}

section h2 {
	/*	  font-family: YuGothic,'Yu Gothic',YuGothic,'Yu Gothic',sans-serif;*/
	font-family: 'Arial', 'Courier', 'メイリオ', sans-serif;

	/*background: url(../images/borderBlack.png) repeat-x 0 50%;
	background-size: 1px 1px;
	background-color: #FFFF00;*/
}

 
.marker01 {
	color: #2d2d2d;
	border-bottom:5px solid #db7093;
	padding-bottom:0px;/*下線として表示する太線*/
	font-size: 20px;
	line-height:1;
	display:inline-block;
  }



h2{
	position: relative;
	padding: 15px 20px;
	background: #fffacd;
	font-size: 2.4rem;/*20px;*/
	color: #2d2d2d;
	margin-left: -0px;
	line-height: 1.3;
	border-bottom: solid 3px rgb(249, 204, 121);
	z-index:-2;

	/* 左右中央に配置し、左右に隙間を作る設定 */
    width: calc(100% - 40px); /* 左右の隙間分（20px×2)を引く */
    margin: 0 auto 40px;      /* 左右中央に配置し、下のコンテンツとの隙間を40pxあける */
    box-sizing: border-box;   /* パディングを含めて幅を計算する */
    text-align: center;       /* 文字を中央寄せにする */
  }
  
 

section h2 span {

	padding: 0 ;

}

h3 {
	font-size: 2.5rem;
	text-align: center;
}

h4 {
	position: relative;
	padding: 0.5em;
	background: #fffacd;
	color: black;
	text-align: center;
	z-index: -1;
  }
  
  h4::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 15px transparent;
	border-right: solid 20px rgb(149, 158, 155);
	z-index: -1;
  }


  h5{
	background: #fffacd;
	box-shadow: 0px 0px 0px 5px #fffacd;
	border: dashed 2px rgba(0, 0, 0, 0.325);
	padding: 0.2em 0.5em;
	text-align:center;
  }


/*h5 {
	position: relative;
	display: inline-block;
	margin: 1rem 0 1rem -10px;
	padding: 1rem 3rem;
	color: #000000;
	border-radius: 0 100vh 100vh 0;
	background: #fffacd;
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
	z-index: -1;
  }
  
  h5:before {
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 0;
	height: 0;
	content: '';
	border-top: 10px solid #fffacd;
	border-left: 10px solid transparent;
  }
*/

  h7 {
    position: relative;
    display: inline-block;    /* ★これを追加（余白や背景を正しく表示するため） */
    color: black;
    background: #fffacd;
    line-height: 1.4;
    padding: 0.5em 3em;
    margin: 1.0em 0 0.5em;    /* 上の余白を少し増やしました */
    font-size: 1.4rem;        /* 0.8emから調整して読みやすく */
    border-radius: 0 5px 5px 5px;
    z-index: 1;               /* ★ -1 から 1 に変更（背景より前に出す） */
}
  
h7 a {
    text-decoration: none !important;
    display: block;
}

  h7:after {
	/*タブ*/
	position: absolute;
	font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
	font-weight: 900;
	content: 'Click here';
	background: #FFC778;
	color: #fff;
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 0.5px 7px 0.5px;
	font-size: 0.7em;
	line-height: 1;
	letter-spacing: 0.05em
  }

  h8 {
	background: linear-gradient(transparent 70%, #FFC778 70%);
	font-size:1.5rem;
  }

  h9{
	line-height: 0.5;
	font-size:1.5rem;
}

h10{
	line-height: 0.5;
	font-size:1.2rem;
}

strong {
	font-size: 1.5rem;
}

em {
	font-size: 1.5rem;
	color: rgb(255, 0, 0);
	font-weight: bold;
}

/* ==========================================================================
   Layout
   ========================================================================== */
   .inner-section {
    padding: 60px 20px 60px; /* 上下の余白を 80px から 60px くらいに絞る */
}

.inner {/*OK*/
    max-width: 1080px;
	width:90%;
    margin: 0 auto;
}

.bg-light { background-color: var(--bg-light); }/*OK*/
.bg-yellow { background-color: var(--soft-yellow); }/*OK*/

.innerS {
	width: 60%;
	margin: 0 auto;
	padding-bottom: 80px;
}


.center {
	text-align: center;
}


 .wrapper{
	padding-top:30px;
 }





/* Whats new
------------------------------------------------------------*/


.col5 {
	/*線の種類（二重線）太さ 色*/
	border-bottom: double 5px #FFC778;
}

.col5 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.col5 p{
	text-align: left;
}

.col5 li:nth-of-type(1) {
    -webkit-flex-basis: 150px;
    flex-basis: 150px;
}
/*.col5 li:nth-of-type(2) {
    -webkit-flex-basis: 150px;
    flex-basis: 150px;
}
*/
.col5 li:nth-of-type(2) {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

/* sec06 イベント情報
------------------------------------------------------------*/


/* SEC01 プロフィール
------------------------------------------------------------*/


.col1 img {
	display: block;
	margin: 0 auto 5px;
}

.col1 li {
	line-height: 2.0;
}


.col1 .img {
	/*padding: 80px 50px;*/
	position: relative;
	margin-bottom: 2px;
	line-height: 0 !important;
	/*background: #f6f6f6;*/
	z-index: -1;
}

[data-aos] {
	will-change: transform, opacity; /* ヒントを与える */
	position:relative;
	z-index: 1 !important;        /* 明示的に上書き */
	transform:translateZ(0);
	backface-visibility:hidden;
  }



/*エンドロール用*/
.endroll-container {
	margin:0px auto;
	height: 300px; /* 表示範囲（エンドロール枠） */
	width: 94%;
	overflow: hidden;
	position: relative;
	background: #fffaf5;

	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	justify-content: center;
	align-items: center;
  }
  
  .endroll-content {
	display: block;
/*	animation: scroll-up 45s linear forwards;/*一回だけ再生*/
	animation: scroll-up 80s linear infinite;/*何度も再生*/
	text-align: center;
	width:100%;
	font-size:2;
	line-height:2;
	color:#444;
	padding:0 2rem;
	box-sizing:border-box;
  }
  
  @keyframes scroll-up {
	from {
	  transform: translateY(25%);
	}
	to {
	  transform: translateY(-100%);
	}
  }

 /* 最後の固定表示メッセージ（最初は非表示） */
#endroll-final-message {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	z-index: 100;
  }
  .hidden-image {
	opacity: 0;
	transition: opacity 2s ease;
	/* 必要な位置設定もここに */

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
  }
  
  .show-image {
	opacity: 1;
  }




/*エンドロール用ここまで*/

/*フェードインのjavaを呼び出す
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:3s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
	from{
		opacity:0;
		transform:translateY(100px);
/*		filter:blur(10px);*/
/*		transform:scale(1.02);*/
/*	}
	to{
		opacity:1;
		transform:translateY(0);
/*		filter:blur(0);*/
/*		transform:scale(1);*/
/*	}
}
*/
/*.fadeUpTrigger{
	opacity:0;
}
*/


.col1 {
/*	padding-top:50px;*/
	text-align:center;
/*	padding-bottom:50px;*/


}

.haikei{
	position: relative;
	padding-top:150px;
	background-image:url("daigaku.jpg");
	background-color:rgba(255,255,255,0.7);
	background-blend-mode: lighten;
	background-repeat:no-repeat;
/*	background-size:contain;*/
	background-size:cover;
/*	background-attachment:fixed;*/

/*	height:100vh;*/
	background-position:center;
	margin-bottom:50px;
	z-index:-2;

}


.col1 li {
	display: inline-block;
	width: 28%;
	padding: 0 2.5% 50px;
	margin-bottom: 0;
	vertical-align: top;
	text-align: center;
}


/* SEC02 Gallery
------------------------------------------------------------*/


#sec02 img {
	width: 100%;
}

/*元々ここから
#sec02 header{
	display: none;
}

#gallery li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}

#gallery img{
	width: 100%;
	height: auto;
}
元々ここまで*/

/* SEC03 お願い
------------------------------------------------------------*/


#sec03 img {
	width: 100%;
	margin-bottom: 30px;
}


.col4 li {
	display: inline-block;
	width: 40%;
	padding: 0 2.5% 0px;
	margin-bottom: 0;
	vertical-align: top;
	text-align: left;
}


/* SEC04 活動報告
------------------------------------------------------------*/



.col0 {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	height: auto;
	margin: 20px 0;
	gap: 0 20px;
	  /*線の種類（二重線）太さ 色*/
	  border-bottom: double 5px #FFC778;
	  z-index:auto!important;
}



.youtube {
	max-width: 100%;
}

.youtube_vid {
	max-width: 100%;
	max-height: auto;
}

.col3 img {
	display: inline;
	margin: 0 auto 5px;
}

.col3 li {
	line-height: 2.0;
}

.col3 .img {
	padding: 0px 0px;
	margin-bottom: 10px;
	line-height: 0 !important;
	background: #f6f6f6;
}

.col3_a {
	text-align: center;
}

#sec04_02 {
	background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

#sec04_02 img {
	width: auto;
}


/* SEC05 COMPANY
------------------------------------------------------------*/


#sec05 p {
	margin-bottom: 5px;
}

.col2 li {
	display: inline-block;
	width: 100%;
	margin: 20px 0;
}

#sns img {
	padding: 35px 10px 5px 0;
}

#sns a:hover img {
	opacity: .8;
}

/* お問い合わせマップのレスポンシブ対応 */
.contact-map {
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}

.contact-map iframe {
    width: 100% !important;   /* 親要素（100%）に合わせる */
    height: 400px;            /* PCでの高さ */
    border: 0;
    border-radius: 15px;      /* 角を丸くしておしゃれに統合 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 軽い影で浮かせる */
}

/* ==========================================================================
   Notice Box
   ========================================================================== */
   .notice-box {
    background: #FFFDE7;
    border: 3px dashed var(--accent-orange);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
}

.notice-item {
    margin: 15px 0;
}

.link-btn {
    background: var(--accent-orange);
    color: #fff;
    padding: 8px 25px;
    border-radius: 50px;
    display: inline-block;
    font-weight: 700;
}

.link-btn:hover {
    background: #e68a00;
}

/* ==========================================================================
   Profile
   ========================================================================== */
   .flex-container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.name {
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.name span {
    font-size: 1.6rem;
    margin-left: 15px;
    color: #888;
}

.img-round {
    border-radius: 30px;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}






/* ==========================================================================
   Responsive
   ========================================================================== */


@media only screen and (min-width: 1200px) {
	.inner {
		width: 1024px;
	}
}

@media only screen and (min-width: 1101px) {
	#mainImg {
        margin-top: 125px !important; /* ヘッダーを100pxにした分、さらに下げる */
    }

	body {
	/*	font-size: 1.4rem;*/
	}

	a#menu {
		display: none;
	}

	.panel {
		display: block !important;
	}

	#mainnav li {
		display: inline-block;
		padding: 0;
		font-size: 1.5rem;
	}

	/* SEC01 プロフィール
	-----------------*/
	.col1 {
		text-align: left;
	}

	.col1 li {
		display: inline-block;
		width: 28%;
		padding: 0 2.5% 50px;
		margin-bottom: 0;
		vertical-align: top;
		text-align: left;
	}

	#footer {
		padding: 30px 10px 70px 0;
	}


/* SEC03 Q&A
	-----------------*/
.col3 {
	text-align: center;
}

.col3 li {
	display: inline-block;
	width: 28%;
	padding: 0 2.5% 50px;
	margin-bottom: 0;
	vertical-align: top;
	text-align: left;
}

#footer {
	padding: 30px 10px 70px 0;
}


/* SEC03 お願い
	-----------------*/
.col4 {
	text-align: center;
}


.col4 li {
	display: inline-block;
	width: 40%;
	padding: 0 2.5% 0px;
	margin-bottom: 0;
	vertical-align: top;
	text-align: left;
}


}

@media only screen and (min-width: 641px) {
	.col2 li {
		width: 60%;
		vertical-align: top;
	}

	.col2 li:first-child {
		width: 35%;
		padding-right: 4%;
	}
}




@media only screen and (max-width: 640px) {
	.flex-container {
        flex-direction: column;
    }
	.innerS {
		width: 94%;
		padding-bottom: 70px;
	}

	.col1 li {
		line-height: 1.7;
	}

	.col1 img {
		margin: 0 auto;
	}

	.col1 .img {
		padding: 30px;
		margin-bottom: 20px;
	}

	/*col3 sec02のQ&Aの中で使用*/
	.col3 li {
		line-height: 1.7;
	}

	.col3 img {
		margin: 0 auto;
	}

	.col3 .img {
		padding: 0px;
		margin-bottom: 20px;
	}

	/*col4 sec03のお願いの中で使用*/
	.col4 li {
		line-height: 1.7;
	}


	#gallery li {
		float: none;
		width: 100%;
	}

	#map iframe {
		width: 96% !important;
		left: 2%;
	}

	#sec04_02 {
		padding: 50px 20px;
	}
	.col0 {
        flex-direction: column !important;
        gap: 15px 0 !important;
        margin-bottom: 30px !important;
        padding-bottom: 15px !important;
    }

    .col0 li {
        width: 100% !important;
    }

    .col0 li img {
        width: 100% !important; /* 写真を横幅いっぱいに広げる */
        height: auto !important;
    }

    /* 2. 文字サイズの調整（インラインスタイルを上書き） */
    .col0 li p a {
        font-size: 1.6rem !important; /* タイトルを少し小さく */
        display: block;
        margin-top: 5px;
    }

    /* 3. 説明文を短く見せる（最大3行で省略） */
    .col0 li p:last-child {
        font-size: 1.3rem !important; /* 説明文を小さく */
        line-height: 1.5 !important;
        margin-top: 8px !important;
        
        /* 3行以上になったら自動で「...」を表示する設定 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; 
        overflow: hidden;
    }


}

/* 1100px以下の表示設定：ここから最後まで上書き */
@media only screen and (max-width: 1100px) {
	/* 1. スマホ時だけ肩書きを非表示にして横幅を稼ぐ */
    .sp-hide {
        display: none;
    }

/* 2. 上段バーの余白と文字サイズを極限まで微調整 */
.header-top .header-container {
	padding: 5px 10px; /* 左右の余白を少し詰める */
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap; /* 意地でも改行させない */
}

.top-text {
	font-size: 1.0rem; /* サイズを維持、または0.9remに */
	white-space: nowrap; /* 途中で改行させない */
	overflow: hidden;
	text-overflow: ellipsis; /* 万が一入り切らない場合は語尾を「...」にする */
}

.top-links {
	gap: 8px; /* ボタンとSNSアイコンの隙間を少し詰める */
	flex-shrink: 0; /* 右側のセットが潰れないようにする */
}

.util-btn {
	padding: 2px 8px !important; /* お問い合わせボタンを少しスリムに */
	font-size: 1.0rem !important;
}

.header-sns img {
	height: 14px; /* アイコンを少しだけ小さく */
}



	#headerWrap .header-container {
        height: 70px !important; /* スマホではコンパクトに */
    }

    .logo-title-box {
        gap: 6px;
        margin-bottom: 2px;
        padding-left: 6px;
    }

    .ward-title { font-size: 1.0rem; }
    .indie-badge { font-size: 0.9rem; padding: 1px 6px; }

    .logo-name-box { gap: 8px; }
    .family-name { font-size: 2.4rem; letter-spacing: 0.1em; }
    .given-name { font-size: 2.1rem; letter-spacing: 0.05em; }

    #mainImg {
        margin-top: 100px !important; /* スマホ版の余白 */
    }


	#header {
        max-height: none !important;
        height: auto !important;
    }

    #headerWrap .header-container {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 15px;
    }

    /* 三本線ボタンを表示 */
    a#menu {
        display: block !important;
        position: relative;
        width: 40px;
        height: 40px;
        z-index: 1100;
        cursor: pointer;
    }

    /* 三本線の「真ん中の棒」 */
    #menuBtn {
        display: block !important;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background: #333 !important;
        margin: -1px 0 0 -12px !important;
        transition: .3s;
    }

    /* 三本線の「上下の棒」 */
    #menuBtn:before,
    #menuBtn:after {
        display: block;
        content: "";
        position: absolute;
        width: 24px;
        height: 2px;
        background: #333;
        transition: .3s;
    }
    #menuBtn:before { top: -8px; left: 0; }
    #menuBtn:after { top: 8px; left: 0; }

    /* ×印になった時の動き */
    #menuBtn.close {
        background: transparent !important;
    }
    #menuBtn.close:before {
        top: 0;
        transform: rotate(45deg);
    }
    #menuBtn.close:after {
        top: 0;
        transform: rotate(-45deg);
    }

    /* 展開されるメニューパネル */
	.panel {
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		background: var(--soft-yellow); /* 薄い黄色に変更 */
		display: none;
		z-index: 999;
		box-shadow: 0 5px 10px rgba(0,0,0,0.1);
		border-top: 1px solid rgba(0,0,0,0.05); /* 境目を少しだけはっきりさせる場合 */
	}

    #mainnav ul {
        flex-direction: column !important;
        width: 100%;
    }

	#mainnav li {
		width: 100% !important;
		display: block !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* グレーの線を少し透過した黒に */
	}

    #mainnav li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        font-size: 1.6rem !important;
        text-align: left;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    #mainImg {
        margin-top: 85px !important;
    }
	.notice-box {
        padding: 20px 10px; /* ボックス自体の左右の余白を少し削って幅を確保 */
    }

    .notice-item {
        display: flex;
        flex-direction: column; /* 日付とボタンを縦並びにする */
        align-items: center;     /* 中央に寄せる */
        gap: 8px;               /* 日付とボタンの間の隙間 */
        margin: 20px 0;
    }

    .notice-item .date {
        display: block;
        margin-bottom: 5px;
    }

    .link-btn {
        display: inline-block;
        padding: 8px 15px !important; /* 左右の余白を少し詰める */
        font-size: 1.4rem !important; /* 文字サイズをわずかに小さく */
        white-space: nowrap;          /* ★重要：絶対に改行させない設定 */
        width: auto;                  /* 幅は中身に合わせる */
        max-width: 95%;               /* 画面からはみ出さないように制限 */
    }
	.contact-map iframe {
        height: 250px;        /* スマホでは高さを抑えてコンパクトに */
    }

} /* メディアクエリ終了 */



	.col1 li {
		margin: 50px auto 0 auto;
		display: block;
		width: 94%;
		text-align: center;
		font-size:1.5rem;
	}

	.col3 li {
		margin: 50px auto 0 auto;
		display: block;
		width: 94%;
	}

	.col4 li {
		margin: 50px auto 0 auto;
		display: block;
		width: 94%;
		text-align: center;
	}

	section {
		clear: both;
		padding-top: 0; /* ここでの余白を一旦ゼロにする */
		scroll-margin-top: 100px; /* ★リンクで飛んだ時の「止まる位置」だけを100px分あける */
	}

	section h2 {
		margin: 0 auto 20px;
	}

	section h2 span {
		padding: 0 30px;
	}
	/* SEC04 活動報告
	-----------------*/
.col0 img{
	width:250px;
	min-width:200px;
}