@CHARSET "utf-8";

/*
Theme Name: e
Author URI: https://leopard-hachi.com/
*/

/*---------------------------------------------------------*/
/* General */
/*---------------------------------------------------------*/
body {
    font-family: Helvetica, "游ゴシック",Meiryo, sans-serif, serif,"sans-serif", 'Lucida Grande','Hiragino Kaku Gothic ProN';
    font-size: 17px;
    color: #42210B;
    padding: 0;
    margin: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,body {
     margin: 0;
     padding: 0;
}	

@media (min-width: 1024px) {
    body {
        font-size: 16px; /* 必要に応じて調整 */
    }
}

/* iPadとiPad Pro専用のリセット */
@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
  html, body {
    font-size: 17px;
  }
  
  p {
    font-size: 17px;
  }
  
  /* 重要なテキスト要素のサイズも強制的に調整 */
  h1, h2, h3, h4, h5, h6, span, div, li, a {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100% ;
  }
}

	
@media screen and (max-width:760px) {
body {
	font-size: 16px;
}
}

/* 画像属性等 */
img {
	max-width: 100%;
	height: auto;
	-webkit-transition:all 0.25s ease-in-out;
	transition:all 0.25s ease-in-out;
	vertical-align: bottom;
}

figure {
    display: block;
	margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

figcaption {
    display: block;
	padding:5px 0;
}

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

a {
    color: #1111cc;
	text-decoration: underline;
}
a img {
    border: none;
}
a:hover {
    color: #1111cc;
    text-decoration: none;
}

a:hover img.hoverIMG{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
}

p {
	font-size: 17px;
}	


div#container {
    margin: 0 auto;
    width: 100%;
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
	overflow:hidden;
}
@media screen and (max-width:760px) {
div#container {
margin: 10px 0px 0px 0px;
}
}


#header {
    display: block;
	background-color:#fff;
	margin-bottom:0;
	height:100%;
}
@media screen and (max-width:760px) {
#header {
}
}

div#main {
    display:block;
}
@media screen and (max-width:760px) {
div#main {
}	
}

.ie {
    background-color: #fff;
    overflow: hidden;
	max-width:100%;
	min-width:760px;
	margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	height:100%;
	padding:50px 0 0 0;
}
@media only screen and (max-width : 760px){
.ie {
	max-width:100%;
	min-width: 100%;	
    background-color: #fff;
    margin-top: 0px;   
    overflow: hidden;
	padding: 0;
}		
}


.single-ie {
    background-color: #fff;
    overflow: hidden;
	max-width:80%;
	min-width:760px;
	margin: 0px auto;
	margin-top:0px;
	height:100%;
	padding:50px 0 0 0;
}
@media only screen and (max-width : 760px){
.single-ie {
	max-width:100%;
	min-width: 100%;	
    background-color: #fff;
    margin-top: 0px;   
    overflow: hidden;
	padding:0 10px;
}		
}

.category-ie {
    background-color: #fff;
    overflow: hidden;
	max-width:80%;
	min-width:760px;
	margin: 0px auto;
	margin-top:0px;
	height:100%;
	padding:50px 0 0 0;
}
@media only screen and (max-width : 760px){
.category-ie {
	max-width:100%;
	min-width: 100%;	
    background-color: #fff;
    margin-top: 0px;   
    overflow: hidden;
	padding:0 10px;
}		
}

.archive-ie {
    background-color: #fff;
    overflow: hidden;
	max-width:80%;
	min-width:760px;
	margin: 0px auto;
	margin-top:0px;
	height:100%;
	padding:50px 0 0 0;
}
@media only screen and (max-width : 760px){
.archive-ie {
	max-width:100%;
	min-width: 100%;	
    background-color: #fff;
    margin-top: 0px;   
    overflow: hidden;
	padding:0 10px;
}		
}

div#page-content {
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}
@media screen and (max-width:760px) {
div#page-content {

}
}

div#content {
    width: 70%;
    float: left;
    padding: 0px 0 0 0;
    margin: 0px 10px 10px 10px;
	min-height: 100vh;
}
@media screen and (max-width:760px) {
div#content {
    width: 100%;
    padding: 0;
    margin: 60px 0 0 0;
}
}

article.post {
	display: block;
	margin: 0;
}
@media only screen and (max-width : 760px){
article.post {
	margin: 0;
}	
}

div#sidebar {
    width: 24%;
    float: right;
    padding: 0 10px;
    margin: 5px;
}
@media screen and (max-width: 760px) {  
div#sidebar {
    width: 100%;
	padding: 0 5px;
    margin: 0 ;
	box-sizing: border-box;
}
}

.clr { clear:both; }

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 5px;
}


/*---------------------------------------------------------*/
/* Header */
/*---------------------------------------------------------*/
header {
	margin: 0px;
	padding: 0px 10px 0px 10px;
	background-color:#fff;
}
@media only screen and (max-width : 760px){
header {
	padding: 0px 0px 0px 0px;
}	
}

h1.top_page {
    margin: 5px 0 0 25px;
}
a.no_underline {
	text-decoration:none;
}

div#site_title_wrapper {
	float:left;
}

h1#site-title {
    font-size: 2.0em;
    margin: 15px 0 5px 0;
    color:#2ea7e0;
}
h1#site-title a {
    color: #2ea7e0;
}
h2#site-description {
    font-size: 1.2em;
    font-weight: bold;
    color: #555555;
    margin: 0 0 10px 0;
}


/*---------------------------------------------------------*/
/* Article's Header */
/*---------------------------------------------------------*/
h1.single_title {
  position: relative;
  padding: 0.3rem 1.5rem;
  font-size:30px;
  margin: 40px 0px 30px 0;
}

@media only screen and (max-width : 760px){
h1.single_title {
  position: relative;
  padding: 0.3rem 0.5rem;
  font-size:27px;
}
}	
h2.k {
    background: #FFDD64;
    padding: .5em .8em;
    font-size: 24px;
    color: #fff;
    margin: 40px 0 20px 0;
}

h3.k {
    font-size: 22px;
    padding: .6em .5em .3em .8em;
    margin: 2.3em .3em 0em .3em;
    color: #494949;
    background: #f9f9f9;
    border-bottom: solid 3px #eee;
    letter-spacing: 1.5px;
    border-left: solid 6px #FFDD64;
}
h3.k:after {
    border-bottom: none;
}

h4.k {
    padding: .3em .7em;
    color: #494949;
    background: transparent;
    border-bottom: solid 3.5px #FFDD64;
    font-size: 22px;
    letter-spacing: 1.5px;
    margin: 0.7em .5em 0em .5em;
}	

h1.post_title {
	padding: 0.3em 0.5em 0.3em 0.8em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #f9f9f9;/*背景色*/
	border-left: solid 6px #ff8c00;/*左線（実線 太さ 色）*/
	border-bottom: solid 3px #EEEEEE;/*左線（実線 太さ 色）*/
	font-size:24px;
}
@media only screen and (max-width : 760px){
h1.post_title {
	padding: 5px 10px;
}	
}

/* メインタイトル */
.post_title_page-container {
    text-align: center;
    margin: 120px 0 50px 0;
    position: relative;
}
.post_title_page {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    padding: 30px 0;
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 760px) {
    .post_title_page {
		padding: 0;
    }
}
@media screen and (max-width: 576px) {
    .post_title_page {
        font-size: 24px;
    }
}

h2.post_title {
	font-size: 24px;
	padding: 10px 20px;
	margin: 50px 0 0 0;
	color: #fff;/*文字色*/
	background: #ff8c00;/*背景色*/
	border-left: none;/*左線（実線 太さ 色）*/
	border-bottom: none;/*左線（実線 太さ 色）*/
}
@media only screen and (max-width : 760px){
h2.post_title {
	font-size: 22px;
	padding: 10px 20px;
	margin: 30px 0 0 0;
}	
}

p.post-meta {
    color: #555;
    font-size: 1.0em;
    padding: 5px 0 5px 20px;
    margin: 0 0 3px 0;
    text-align: right;
}

h3 {
    display: block;
    font-size: 22px;
    margin-block-start: 2em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2.border_yellow {
    display: block;
    font-size: 1.5em;
    margin: 2em 0em 1em 0em;
    font-weight: bold;
    unicode-bidi: isolate;
}

h3.border_yellow {
    display: block;
    font-size: 22px;
    margin: 2em 0em 1em 0em;
    font-weight: bold;
    padding: 0.25em 0.5em 0.25em 0.7em;/*上下 左右の余白*/
    border-left: solid 5px #FFDD64;/*左線*/
}
@media screen and (max-width: 760px) {
h3.border_yellow {
    display: block;
    font-size: 22px;
    margin: 2em 0em 1em 0em;
}
}

h4.bubble {
color: #555;
font-size: 1.3rem;
margin-top: 25px;
margin-bottom: 30px;
background-color: #FFDD64;
padding: 10px 15px;
border-radius: 8px;
display: inline-block;
position: relative;
font-weight: normal;
letter-spacing: 0.5px;
margin-block-end: 0.5em;
}
        
h4.bubble::after {
content: '';
position: absolute;
left: 15px;
bottom: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #FFDD64;
}

h3.double_blue {
	position: relative;
	width: 100%;
	margin: 30px 0px 10px 0px;
	padding: 5px 15px;
	border-bottom: 2px solid #3fa9f5;
	font-size:22px;
}
@media only screen and (max-width : 760px){
h3.double_blue {
	margin-left: 0;
}	
}

h3.double_blue::before {/*疑似要素*/
	position: absolute;
	content: "";
	width: 100%;
	min-height: 100%;
	top: -12px;
	left: 0px;
	border-bottom: 1px solid #3fa9f5;
	padding: 0;
	margin: 8px 0px 0px 0px;
}

h2.orenge,h3.orenge,h4.orenge,h5.orenge {
	padding: 0.3em 0.5em 0.3em 0.8em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #f9f9f9;/*背景色*/
	border-left: solid 6px #ff8c00;/*左線（実線 太さ 色）*/
	border-bottom: solid 3px #EEEEEE;/*左線（実線 太さ 色）*/
}

h4 {
	font-size:20px;
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h5 {
    display: block;
    font-size: 18px;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}


h3.course {
  font-size: 30px;
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem 1rem 130px;
  word-break: break-all;
  border-bottom: 3px solid #009245;
  border-radius: 12px 0 0 0;
}

h3.course span {
  font-size: 40px;
  font-size: 3.5rem;
  position: absolute;
  top: 5px;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  border-radius: 10px 20px 0 10px;
  background: #009245;
}

@media only screen and (max-width : 760px){
h3.course {
	font-size: 21px;
	padding: 10px 5px 0px 65px;
}

h3.course span {
	font-size: 27px;
	font-size: 1.7rem;
  top: 5px;
  left: 0;
  padding: 3px 10px;
}
}

/*---------------------------------------------------------*/
/* Article post */
/*---------------------------------------------------------*/
div.post-content {
    padding: 0px 0px 0px 0px;
}
@media only screen and (max-width : 760px){
div.post-content {
    padding: 0px 0px 10px 0px;
}	
}

/*---------------------------------------------------------*/
/* アーカイブ post */
/*---------------------------------------------------------*/
div.archive-content {
    padding: 0;
    height: 100%;
    width: 100%;
    margin: 0;
}


/*---------------------------------------------------------*/
/* カテゴリー post */
/*---------------------------------------------------------*/
div.category-content {
    padding: 0;
	height: 100%;
	width: 100%;
	margin: 0 10px;
}
@media only screen and (max-width : 760px){
div.category-content {
	margin: 0 0px;
}	
}

/* ▼▼▼カテゴリーにあるアイキャッチ画像▼▼▼ */
/* リスト */
.category_01 {
	list-style: none;
	padding: 0;
	margin: 20px 0px;
}
@media only screen and (max-width : 760px){
.category_01 {
	list-style: none;
	padding: 0px;
	margin: 20px 0px;
}	
}

/* h2 */
h2.category_02 {
	font-size: 1.3em;
	padding: 0;
	margin: 5px 0px;
	font-weight:bold;
}


/* 画像 */
.category img {
	padding: 0;
	margin: 5px 20px 5px 10px;
	float:left;
}
@media only screen and (max-width : 760px){
.category img {
	margin: 0px 0px 20px 0px;
}	
}

/* ボックス */
.category {
	width:100%;
	padding: 0.5em 1em 3.5em 1em;
    color: #000;/*文字色*/
	background-color: #FFF;
    border-bottom: solid 1px #C0C0C0;/*線*/
}
@media only screen and (max-width : 760px){
.category {
	padding: 0.5em 1em 2.0em 1em;
}	
}

.category p {
	font-size:16px;
	padding: 0;
	margin: 0px 0px 20px 0px;
}
@media only screen and (max-width : 760px){
.category p {
}
}

.more_link {
	text-decoration:underline;
}	

a:hover.more_link {
	text-decoration:none;
}
/* ▲▲▲カテゴリーにあるアイキャッチ画像▲▲▲ */

/* ▼▼▼アイキャッチ画像の大きさ▼▼▼ */
.l-size {
	width:120px;
	height:auto;
}	
/* ▲▲▲アイキャッチ画像の大きさ▲▲▲ */

h1.cat_title {
    font-size: 1.5em;
	padding: 0.3em 0.5em 0.3em 0.8em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #f9f9f9;/*背景色*/
	border-left: solid 6px #ff8c00;/*左線（実線 太さ 色）*/
	border-bottom: solid 3px #EEEEEE;/*左線（実線 太さ 色）*/
    margin: 0.83em 0;
}
@media only screen and (max-width : 760px){
h1.cat_title {
	padding: 5px 10px;
}	
}


/*---------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------*/
#footer {
    font-size: 16px;
    width:100%;
    height: 100%;
    margin: 0px;
    background-color: #FFE500;
	padding:0px;
	color:#603813;
	margin-top: 70px;	
}

p.foot {
	font-size:16px;
	text-align:center;
	padding:0 0 10px 0;
	margin:0;
}


/* フッター */
.yurara-privacy-footer {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.yurara-privacy-back-link {
    display: inline-block;
    padding: 12px 25px;
    background: #FFDD64;
    color: #333;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.yurara-privacy-back-link:hover {
    background: #FFE77A;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 221, 100, 0.3);
    text-decoration: none;
    color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .yurara-privacy-section {
        padding: 40px 0;
    }
    
    .yurara-privacy-container {
        padding: 0 15px;
    }
    
    .yurara-privacy-title {
        font-size: 28px;
    }
    
    .yurara-privacy-intro {
        padding: 20px;
    }
    
    .yurara-privacy-intro p {
        font-size: 15px;
    }
    
    .yurara-privacy-item h2 {
        font-size: 20px;
    }
    
    .yurara-privacy-item h3 {
        font-size: 17px;
    }
    
    .yurara-privacy-item p,
    .yurara-privacy-item li {
        font-size: 14px;
    }
    
    .yurara-privacy-item ul {
        padding-left: 20px;
    }
}

@media (max-width: 480px) {
    .yurara-privacy-header {
        margin-bottom: 40px;
    }
    
    .yurara-privacy-title {
        font-size: 24px;
    }
    
    .yurara-privacy-intro {
        padding: 15px;
    }
    
    .yurara-privacy-item {
        margin-bottom: 40px;
    }
}

/*---------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------*/
/*
==================================================
フッター右寄せ問題の修正
==================================================
*/

#footer {
  text-align: center !important; /* 強制的にセンタリング */
  padding: 0px 0 20px 0;
  margin: 0;
  width: 100%;
  clear: both; /* フロートの影響を除去 */
}

.footer-content {
  background-color: #fff;
  padding: 20px 20px;
}

.footer_01 {
  color: #222; /* ゆら・らの赤色 */
  text-decoration: none;
}

.footer_01:hover {
  text-decoration: underline;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .foot {
    font-size: 0.8rem;
    padding: 0 15px;
  }
}

#footer .container {
  text-align: center; /* フッター内だけセンタリング */
}


/*
==================================================
フッター3カラム
==================================================
*/
/* フッター */
.footer {
	background-color: #B8E8EE;
	text-align: left;
	color: #333;
	padding: 40px;
	margin-top: 0px;
}
        
.footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 3rem;
}
        
.footer-logo {
	font-size: 1.2rem;
	font-weight: 500;
	margin-bottom: 2rem;
}

/* ロゴ画像のスタイル */
.footer-logo-image {
  margin-bottom: 20px;
  max-width: 200px;
  height: auto;
  display: block;
}
        
.footer-description {
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
	max-width: 400px;
}
        
.footer-social {
	display: flex;
	gap: 1rem;
}
        
.footer-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}
        
/* Facebook */
.footer-social-link.facebook {
    background-color: #1877F2;
    color: #fff;
    border: 2px solid #1877F2;
}

.footer-social-link.facebook:hover {
    background-color: #fff;
    color: #1877F2;
}

/* Instagram */
.footer-social-link.instagram01 {
    background-color: #E4405F;
    color: #fff;
    border: 2px solid #E4405F;
}

.footer-social-link.instagram01:hover {
    background-color: #fff;
    color: #E4405F;
}

/* X（Twitter） */
.footer-social-link.twitter {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
}

.footer-social-link.twitter:hover {
    background-color: #fff;
    color: #000;
}

/* LINE */
.footer-social-link.line {
    background-color: #06C755;
    color: #fff;
    border: 2px solid #06C755;
}

.footer-social-link.line:hover {
    background-color: #fff;
    color: #06C755;
}

/* YouTube */
.footer-social-link.youtube {
    background-color: #FF0000;
    color: #fff;
    border: 2px solid #FF0000;
}

.footer-social-link.youtube:hover {
    background-color: #fff;
    color: #FF0000;
}

        
.footer-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
}
        
.footer-links {
	list-style: none;
}
        
.footer-link {
	margin-bottom: 0.8rem;
	color: #fff;
}
        
.footer-link a {
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.3s ease;
	color: #333;
}
        
.footer-link a:hover {
	text-decoration: underline;
}
        
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: -2rem;
	text-align: center;
	font-size: 0.85rem;
}
        
        /* レスポンシブデザイン */
        @media (max-width: 992px) {
            .footer-top {
                grid-template-columns: 1fr 1fr;
            }
			
			  .footer-logo {
                text-align: left;
            }
  
            .footer-logo-image {
                text-align: center;
            }
        }
        
        @media (max-width: 768px) {
            .footer-top {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }
        
        @media (max-width: 576px) {

        }
@media screen and (max-width: 480px) {
        .contact-container {
            display: block;
        }
        .contact-title {
            font-size: 1.3rem;
        }	
}
@media screen and (max-width: 360px) {
        .social-links {
            gap: 0.4rem;
        }	
        .footer-top {
            display: block;
        }	
	.footer {
    padding: 60px 15px;
        }
}


/* 事業所情報のスタイル */
.footer-contact-info {
    margin: 0rem 0 1.0rem 0;
    padding: 1.5rem 0rem 1.5rem 0rem;
    border-radius: 8px;
    max-width: 400px;
}

.footer-contact-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 0.5rem;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.footer-contact-item:last-child {
    margin-bottom: 0;
}

.footer-contact-item i {
    width: 16px;
    margin-right: 0.8rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
    color: #333;
}

.footer-contact-item span {
    color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .footer-contact-info {
        max-width: 100%;
        margin: 1.5rem 0 1rem 0;
        padding: 1rem;
    }
    
    .footer-contact-item {
        font-size: 0.8rem;
    }
    
    .footer-contact-item i {
        margin-right: 0.6rem;
    }
}


/*
==================================================
フッターカスタマイズ
==================================================
*/
.footer-block {

}

.footer-block-in {
    width: 33%;
    padding: 10px 10px 10px 50px;
    float: left;
	margin:0 ;
}
 
.footer-block-in > ul {
    padding: 5px;
    list-style-type: none;
    margin-bottom:10px;
}
 
.footer-block-in > ul ul {
    text-align: left;
    margin: 15px 0px 13px 0px; 
	padding: 0;
}
 
.footer-block:after{
    content: "";
    clear: both;
    display: block;
}
 
@media (max-width: 770px) {
.footer-block-in {
	width: 98%;
	padding: 10px 1%;
	float: none;
}
}

div.cat_img { margin: 0px 4px 4px 4px;}

/* ▼▼▼フッターのメニュー横並び▼▼▼ */
.f_navi{
	font-size:16px;
text-align: center;
	margin: 10px 0px;
}
@media screen and (max-width: 760px) {
.f_navi{
text-align: center;
	margin: 10px 0px 15px 0px;
}
}

.f_navi ul{
margin: 0 ;
padding: 1% 3% 1% 3%;
}
@media screen and (max-width: 760px) {
.f_navi ul{
margin: 0 ;
padding: 5px 0px 10px 0px;
}
}

.f_navi ul li{
	list-style: none;
	display: inline-block;
	width: 12%;
	min-width: 75px;
	margin:10px 0;
	vertical-align:bottom;
}
@media screen and (max-width: 760px) {
.f_navi ul li{
list-style: none;
display: inline-block;
width: 100%;
min-width: 35px;
}
}

.f_navi ul li a{
text-decoration: none;
color: #603813;
}
@media screen and (max-width: 760px) {
.f_navi ul li a{

}
}

.f_navi ul li.f_navi01 a{
color: #F33135;
}
@media screen and (max-width: 760px) {
.f_navi ul li.f_navi01 a{
color: #F33135;
}
}

.f_navi ul li a:hover{
text-decoration: underline;
}
@media screen and (max-width: 760px) {
.f_navi ul li a:hover{
}
}

.f_navi img{
    margin: 0 10px;
}

a.footer_01{
	color:#603813;
text-decoration: none;
}

a:hover.footer_01{
text-decoration: underline;
}
/* ▲▲▲フッターのメニュー横並び▲▲▲ */


/*---------------------------------------------------------*/
/* Sidebar */
/*---------------------------------------------------------*/
.sidebar-wrapper {
	margin:15px 0;
}
.sidebar-title {
	font-size: 22px;
	padding: 6px 0 6px 10px;
	margin: 20px 0 10px 0;
	color: #555;
	border-bottom: solid 1px #ccc;
}
.textwidget {
	padding: 0 0px;
}
#calendar_wrap {
	text-align: center;
}
#calendar_wrap table {
	margin-left: auto;
	margin-right: auto;
}
#calendar_wrap table a {
	text-decoration: underline;
	color: #2ea7e0;
}
#calendar_wrap table a:hover {
	background-color: #2ea7e0;
	color: #fff;
}
.sidebar-wrapper ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.sidebar-wrapper li {
	border-bottom: dotted 1px #ff8c00;
	margin:10px 0 5px 0;
}
.sidebar-wrapper li a {
	display: block;
	color: #555;
	padding: 10px 0 10px 8px;
	text-decoration:none;
}
.sidebar-wrapper li a:hover {
    color: #aaaaaa;
}

/* コメント・トラックバック */
div#respond {
	margin:10px;
}
@media only screen and (max-width : 760px){
div#respond {	
	margin:5px;
}	
}

.tback {border: none;}
.tback h2{margin-bottom: 0; padding-bottom: 15px;}
.tback p {margin: 0 0 10px 10px;padding: 0;font-size: 12px; line-height: 1.6em;}
.comments{margin: 10px 0; border: none;}
.comments ul{list-style: none;margin: 0; color:#444; font-size: 100%;}
.comments ul li {margin-bottom: 10px;background: #FFF; padding: 12px;}
.comments ul li.depth-1{border-bottom: 1px dotted #CCC;margin-bottom: 12px;}
.comments ul.children {list-style: none;}
.comments p{padding: 0 10px 5px 20px; text-align: left;}
.comments form p{line-height: 1.8em; display: block;}
.comments label{font-weight: 600;display:block;}
.comments form p.comment-notes,.comments form p.form-allowed-tags{font-size: 100%;text-align: left;}
.comments .reply{width: 40px;height: 20px;margin-left: 20px;text-align: center;line-height: 20px;border: 1px solid #CCC;background: #FFF;display: block;}
.comments .reply a{color: #444;text-decoration: none;display: block;} 
.comments .reply a:hover{color: #FFF;background: #009CDE;} 
.comments h3 small{font-size: 114%;}
#author{width: 200px; height: 2em;}
#email{width: 200px; height: 2em;}
#url{width: 200px; height: 2em;}
#comment{width: 99%; height:100px;}
a#cancel-comment-reply-link {font-size: 92%; color: #009CDE;}
#submit	{margin:0; padding:2px 25px; cursor:pointer;}


/*---------------------------------------------------------*/
/* ナビゲーションメニュー */
/*---------------------------------------------------------*/
/* ▼▼▼ヘッダーのメニュー横並び（パソコン版）▼▼▼ */
#contact{
	text-align: right;	
	background-color:#fff;
	max-width:100%;
	min-width:100%;
}
@media screen and (max-width: 760px) {
#contact{
	text-align: center;
}
}

#contact ul{
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 760px) {
#contact ul{
	padding: 10px 0px;
}
}

#contact ul li{
	list-style: none;
	display: inline-block;
	width: 15%;
	min-width: 100px;
	font-size:16px;
	margin: 10px 15px;
	padding: 0;	
}
@media screen and (max-width: 760px) {
#contact ul li{
	width: 18%;
	min-width: 35px;
}
}

.contact01 a {
	color: #000;
}

.contact01:hover {
	color: #aaaaaa;
}

.contact02 a {
	color: #fff;
}
.contact02 a:hover {
	color: #fff;
}

#contact img{
    margin: 0 10px 0px 10px;
}


/*---------------------------------------------------------*/
/* ナビゲーションメニュー */
/*---------------------------------------------------------*/
/* ▼▼▼ヘッダーのメニュー横並び（パソコン版）▼▼▼ */
#header_navi{
	text-align: right;	
	background-color:#fff;
	padding:0;
	margin:0;
}
@media screen and (max-width: 760px) {
#header_navi{
	text-align: center;
}
}

#header_navi ul{
	margin: 0px;
	padding: 0px;
}
@media screen and (max-width: 760px) {
#header_navi ul{
	padding: 10px 0px;
}
}

#header_navi ul li{
	list-style: none;
	display: inline-block;
	width: 6%;
	min-width: 70px;
	font-size:16px;	
	margin: 10px 15px;
	padding: 0;	
}
@media screen and (max-width: 760px) {
#header_navi ul li{
	width: 18%;
	min-width: 35px;
}
}

#header_navi ul li a{
	text-decoration: none;
	color: #333;
}
@media screen and (max-width: 760px) {
#header_navi ul li a{
}
}

#header_navi ul li.header_navi01 a{
	color: #F33135;
}
@media screen and (max-width: 760px) {
#header_navi ul li.header_navi01 a{

}
}

#header_navi ul li a:hover{
	color: #aaaaaa;
}
@media screen and (max-width: 760px) {
#header_navi ul li a:hover{

}
}

#header_navi img{
    margin: 0 10px 0px 10px;
}
/* ▲▲▲ヘッダーのメニュー横並び（パソコン版）▲▲▲ */


/* ▼▼▼ハンバーガーメニュー▼▼▼ */
#nav-drawer {
	position: relative;
	display: flex;
	margin: 0px -5px 0px 0px;
}
@media screen and (max-width: 960px) {
#nav-drawer {

}
}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
}
@media screen and (max-width: 960px) {	
.nav-unshown {

}
}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 44px;
	height: 40px;
	vertical-align: middle;
	background-color: #fff;
	margin-left: auto;
	padding: 8px 18px 0px 18px;
}
@media screen and (max-width: 960px) {	
#nav-open {
	width: 100%;
	height: 45px;
	padding: 5px 28px 0px 18px;
}
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	right: 0.7%;
	height: 3px;/*線の太さ*/
	width: 33px;/*長さ*/
	border-radius: 3px;
	background: #555;
	display: block;
	content: '';
	cursor: pointer;
}
@media screen and (max-width: 960px) {		
#nav-open span, #nav-open span:before, #nav-open span:after {
    right: 1.9%;
}
}

#nav-open span:before {
	bottom: -12px;
}
@media screen and (max-width: 960px) {		
#nav-open span:before {

}
}

#nav-open span:after {
	bottom: -24px;
}
@media screen and (max-width: 960px) {		
#nav-open span:after {

}
}

@media only screen and (max-width : 960px){
#nav-open p {
    position: absolute;
    left: 1.9%;
    width: 100%;
    display: block;
    content: '';
    cursor: pointer;
	margin: 0;
	font-size: 20px;
	font-weight: bold;
}	
}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	right: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
@media screen and (max-width: 960px) {		
#nav-close {

}
}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0%;
	z-index: 9999;/*最前面に*/
	width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 330px;/*最大幅（調整してください）*/
	height: 100%;
	background: #fff;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(205%);
	transform: translateX(205%);/*左に隠しておく*/
	padding:50px 50px 50px 50px;
}
@media screen and (max-width: 960px) {		
#nav-content {
	max-width: 230px;/*最大幅（調整してください）*/
	padding:10px 10px 10px 20px;
}
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}
@media screen and (max-width: 960px) {		
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {

}
}

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
@media screen and (max-width: 960px) {		
#nav-input:checked ~ #nav-content {

}	
}

#nav-drawer ul li {
	text-align:left;
}

#nav-drawer ul li a{
	text-decoration: none;
	color: #333;
}

#nav-drawer ul li a:hover{
	color: #aaaaaa;
	text-decoration: underline;
}
/* ▲▲▲ハンバーガーメニュー▲▲▲ */


/* ▼▼▼ハンバーガーメニューの中のSNSボタン▼▼▼ */
.sns_button {
	position: relative; 
	overflow: hidden; 
}
.sns_button ul {
	position: relative;
	left: 50%;
	float: left;
}
.sns_button ul li {
	position: relative;
	left: -50%;
	float: left;
}
.sns_button img {
	margin: 0px 5px;
}
/* ▲▲▲ハンバーガーメニューの中のSNSボタン▲▲▲ */


/* ▼▼▼ハンバーガーメニューのナビゲーション（レスポンシブ対応）▼▼▼ */
#hamburger{
    width: 100%;	
}	
#hamburger ul{
    padding: 0;
    margin-top: 0px;
}
@media screen and (max-width: 960px) {
/* 760px以下は3列 */
#hamburger ul{
    margin-top: 20px;
}
}

#hamburger li{
	font-size: 20px;
    padding:10px 0;
    margin: 15px 0px;
    box-sizing:border-box;
    display: block;
    text-align: center;
}
@media screen and (max-width: 960px) {
#hamburger li{
	font-size: 17px;
    margin: 5px 0px;
}
}
/* ▲▲▲ハンバーガーメニューのナビゲーション（レスポンシブ対応）▲▲▲ */


/* ▼▼▼ハンバーガーメニューの固定▼▼▼ */
.fixed {
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
}
/* ▲▲▲ハンバーガーメニューの固定▲▲▲ */


/* ▼▼▼パソコンとスマホでスライドショーの表示内容を切り替え（スマホ　760px）▼▼▼ */
.pc_display {
	display:block;
	margin:0;
}
.sp_display {
	display:none;
}
@media only screen and (max-width : 760px){
.pc_display {
	display:none;
}
.sp_display {
	display:block;
}
}
/* ▲▲▲パソコンとスマホでスライドショーの表示内容を切り替え（スマホ　760px）▲▲▲ */


/* ▼▼▼パソコンとスマホでスライドショーの表示内容を切り替え（スマホ　960px）▼▼▼ */
.pc_display_01 {
	display:block;
	margin:0;
}
.sp_display_01 {
	display:none;
}
@media only screen and (max-width : 960px){
.pc_display_01 {
	display:none;
}
.sp_display_01 {
	display:block;
}
}
/* ▲▲▲パソコンとスマホでスライドショーの表示内容を切り替え（スマホ　960px）▲▲▲ */


.btn_blue {
	width:100%;
	position: relative;
	display: inline-block;
	padding: 0.1em 0.5em;
	text-decoration: none;
	background: #3fa9f5;/*色*/
	border: solid 1px #0f9ada;/*線色*/
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	text-align:center;
	color:#fff;
}

.btn_blue a {
	color:#fff;	
}

.btn_blue:hover {
  background-color: #fff;
	border:solid 1px #59b1eb;
	color:#000;
}

.btn_blue:active {
	border: solid 1px #03A9F4;
	box-shadow: none;
	text-shadow: none;
}

.box2 {
	float:right;
	width:200px
}

.box3 {
    padding: 0.8em 1em 2em 1em;
    margin: 2em 0;
	color: #000;/*文字色*/
    background: #FFF;
    border: solid 1px #C0C0C0;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box3 p {
	margin: 20px 5px; 
    padding: 0;
	line-height:1.0em;
}


.double {
	position: relative;
	width: 350px;
	margin: 0 auto;
	padding: 15px;
	text-align: center;
	border-bottom: 2px solid #E73820;
	font-size:40px;
}
@media only screen and (max-width : 480px){
.double {
	width: 300px;
	font-size:30px;
}	
}

.double::before {/*疑似要素*/
	position: absolute;
	content: "";
	width: 100%;
	min-height: 100%;
	top: -10px;
	left: 0px;
	border-bottom: 1px solid #E73820;
	padding: 0;
	margin: 8px 0px 0px 0px;
}


/* ▼▼▼トップページの最新の投稿を表示（アイキャッチ画像の大きさ指定）▼▼▼ */
.ileft {
	width:300px;
height:200px;
}

@media only screen and (max-width : 760px){
.ileft {
	width:100%;
height:auto;
}
}
/* ▲▲▲トップページの最新の投稿を表示（アイキャッチ画像の大きさ指定）▲▲▲ */


/* ▼▼▼タグ一覧ページの投稿を表示（アイキャッチ画像の大きさ指定）▼▼▼ */
.itag {
	width:220px;
	height:150px;
}
/* ▲▲▲タグ一覧ページの投稿を表示（アイキャッチ画像の大きさ指定）▲▲▲ */


/* ▼▼▼トップページの最新の投稿を表示　アイキャッチ画像▼▼▼ */
/* リスト */
.new_01 {
	list-style: none;
	padding: 0px;
	margin: 15px 0px;
}
@media only screen and (max-width : 760px){
.new_01 {

}	
}

/* h5 */
.new_02 {
	font-size:1.3em;
	font-weight:bold;
	padding: 0;
	margin: 15px 0 0 0;
}
@media only screen and (max-width : 760px){
.new_02 {
	font-size:1.2em;
	margin: 10px 0 0 0;
}	
}

.new_03 {
	font-size:20px;
	font-weight:bold;
	padding: 0;
	margin: 0;
}


/* 画像 */
.new img {
	float: left;
	padding: 0;
	margin: 5px 20px 5px 10px;
}
@media only screen and (max-width : 760px){
.new img {
	margin: 5px 0px 15px 0px;
}	
}

/* ボックス */
.new {
	width:100%;
	padding: 0.5em 1em 1.0em 1em;
    color: #000;/*文字色*/
    background-color: #FFF;
    border-bottom: solid 1px #C0C0C0;/*線*/
}
@media only screen and (max-width : 760px){
.new {
	padding: 0.5em 0em;
}	
}

.new p {
	font-size:16px;
	padding: 0;
	margin: 20px 0px;
}
@media only screen and (max-width : 760px){
.new p {
	font-size:15px;
}	
}

.back_05 {
    padding: 0px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #fff;
}
@media only screen and (max-width : 960px){
.back_05 {
	padding: 10px 5px;
}	
}
/* ▲▲▲トップページの最新の投稿を表示　アイキャッチ画像▲▲▲ */


.front_01 {
	font-size:28px;
	font-weight:bold;
	padding: 0.3em 0.5em 0.3em 0.8em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #f9f9f9;/*背景色*/
	border-left: solid 6px #ff8c00;/*左線（実線 太さ 色）*/
	border-bottom: solid 3px #EEEEEE;/*左線（実線 太さ 色）*/
}
@media only screen and (max-width : 960px){
.front_01 {

}	
}
@media only screen and (max-width : 480px){
.front_01 {
	font-size:18px;
}	
}


/* ▼▼▼画像横並び（スマホだと列が変わる）▼▼▼ */
*, *:before, *:after {
	box-sizing: border-box;
}

.col_2 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div {
	width: 50%;
	padding: 8px;
}
@media screen and (max-width: 960px) {
.col_2 > div {
		width: 100%;
}
}
@media screen and (max-width: 480px) {
.col_2 > div {

}
}

.col_3 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div {
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
.col_3 > div {
		width: 50%;
		padding: 5px 2px;
}
}
@media screen and (max-width: 480px) {
.col_3 > div {
		width: 100%;
		padding: 5px 7px;		
}
}

p.consultation {
	font-size:1.0em
}	
@media only screen and (max-width : 480px){
p.consultation {
	font-size:1.2em
}	
}	
	

.col_4 {
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div {
	width: 25%;
	padding: 5px;
	text-align: center;	
}
@media screen and (max-width: 960px) {
.col_4 > div {
	width: 50%;
}
}
@media screen and (max-width: 480px) {
.col_4 > div {

}
}
/* ▲▲▲画像横並び（スマホだと列が変わる）▲▲▲ */


.box1 {
    padding: 0em;
    margin: 0em;
    border: solid 1px #C0C0C0;
}
.box1 p {
    margin: 10px; 
    padding: 0;
	text-align:center;
}


/* ▼▼▼アーカイブにあるアイキャッチ画像▼▼▼ */
h1.archive_title {
	font-size:1.5em;
	padding: 0.3em 0.5em 0.3em 0.8em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	background: #f9f9f9;/*背景色*/
	border-left: solid 6px #ff8c00;/*左線（実線 太さ 色）*/
	border-bottom: solid 3px #EEEEEE;/*左線（実線 太さ 色）*/
	margin: 0.83em 0;
}
@media only screen and (max-width : 760px){
h1.archive_title {
	padding: 5px 10px;
}	
}


h2.archive_title {
	font-size: 1.2em;
	padding: 0;
	margin: 20px 0px;
}

/* リスト */
.archive_01 {
	list-style: none;
	padding: 0;
	margin: 20px 0px;
}
@media only screen and (max-width : 760px){
.archive_01 {
	list-style: none;
	padding: 0;
	margin: 20px 5px;
}	
}

/* h5 */
.archive_02 {
	font-size:16px;
	padding: 0;
	margin: 0;	
}
@media only screen and (max-width : 760px){
.archive_02 {
	
}	
}

/* 画像 */
.archive img {
	float: left;
	padding: 0;
	margin: 5px 20px 5px 10px;
}
@media only screen and (max-width : 760px){
.archive img {

}	
}

/* ボックス */
.archive {
	width:100%;
	padding: 0.5em 1em 1.5em 1em;
    font-weight: bold;
    color: #000;/*文字色*/
    background-color: #FFF;
    border-bottom: solid 1px #C0C0C0;/*線*/
}
@media only screen and (max-width : 760px){
.archive {
	padding: 0.5em 0.5em 2.0em 0.5em;
}	
}

.archive p {
	font-size:12px;
	padding: 0;
	margin: 20px 0px;
}
@media only screen and (max-width : 760px){
.archive p {

}	
}
/* ▲▲▲アーカイブにあるアイキャッチ画像▲▲▲ */


/*
==================================================
目次タグ
==================================================
*/
.rnd1{
	padding: 15px;
	margin: 15px auto;
	line-height: 30px;
}

.rbox2 {
	background-color: #FFF;
	border: 2px solid #bbb;
	border-radius: 15px;
}

.jump {
   margin-top:147px;
   padding-top:47px;
}

/*
==================================================
ジャンプ先を変更する
==================================================
*/
#a,#b,#c,#d,#e,#f,#g,#h,#i,#j,#k,#l,#m,#n  {
	margin-top:-120px;
	padding-top:120px;
}

* {

}

table {
    max-width: 100%;	
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse;
	margin:20px 0px;
	text-indent: initial;
    display: table;
}
@media only screen and (max-width : 760px){
table {
}
}

th{
	border: solid 1px #aaaaaa;	
	padding: 15px 10px;
	background: #f7f7f7;
	text-align:center;
}

@media only screen and (max-width : 760px){
table th, table td {
    padding: 10px;
    font-size: 0.8em;
}
}

td{
	border: solid 1px #aaaaaa;	
	padding: 15px 10px;
	text-align: left;
	vertical-align: top;
    box-sizing: border-box;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
/* ▲▲▲表▲▲▲ */

.center_img {
	text-align : center;
}


/* ▼▼▼トップページのスライドショー▼▼▼ */
.Box{ height: 100%; }

.swiper-slide{ height: auto; }

.swiper-container{
    width: 100%;
	margin:55px 0 0px 0;
	position: relative;
}

.swiper-pagination-bullet {
	margin:20px 0;
}
/* ▲▲▲トップページのスライドショー▲▲▲ */


/* ▼▼▼モデルコースのスライドショー▼▼▼ */
.slider1 .swiper-slide{ height: auto; }

.slider1 .swiper-container{
    width: 100%;
	margin:0px 0;
	position: relative;
}

.slider1 .swiper-pagination-bullet {
	margin:20px 0;
}

.slider-caption {
  padding: 0px 20px;
	margin:0;
  line-height: 1.5em;
  background: #fff;
  color: #000;
  font-size: 1.0rem;
  font-weight: 700;
}

p.slider-caption {
  padding: 0px 20px;
	margin:0;	
}

@media only screen and (max-width : 760px){
.slider-caption {
  padding: 0px 20px;
	margin:0;
  line-height: 1.5em;
  background: #fff;
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
}	
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
}

.sw-1 {
    position: absolute;
    top: 40%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
/* ▲▲▲モデルコースのスライドショー▲▲▲ */


/* ▼▼▼トップページの地図（SVG画像）▼▼▼ */
      .cls-1 {
        fill: #a3d9ef;
      }

      .cls-1, .cls-10, .cls-11, .cls-13, .cls-7, .cls-8, .cls-9 {
        stroke: #fff;
        stroke-width: 0.75px;
      }

      .cls-1, .cls-10, .cls-11, .cls-13, .cls-3, .cls-4, .cls-7, .cls-8, .cls-9 {
        stroke-miterlimit: 10;
      }

.cls-10 {
	 fill:#ee9c20
}
      .cls-2 {
        fill: #fff;
      }

      .cls-3 {
        fill: #ee9c20;
      }

      .cls-3, .cls-4 {
        stroke: #ee9c20;
      }

      .cls-4 {
        fill: none;
      }

      .cls-5 {
        font-size: 21px;
      }

      .cls-5, .cls-6 {
        fill: #231815;
        font-family: TBCineRGoStd-Medium-90ms-RKSJ-H, TBCineRGothic Std;
      }

      .cls-6 {
        font-size: 14px;
      }

      .cls-7 {
        fill: #e2b9d6;
      }

      .cls-8 {
        fill: #f9cc95;
      }

      .cls-9 {
        fill: #ee8383;
      }

      .cls-10 {
        fill: #f5ed4a;
      }

      .cls-11 {
        fill: #add164;
      }

      .cls-12 {
        fill: #f6b751;
      }

      .cls-13 {
        fill: #f6b751;
      }

#aki-muroto path:hover {
fill: #d0ebf6;
}

#monobe path:hover {
fill: #f9e4ef;
}

#reihoku path:hover {
fill: #fce1c6;
}

#kochi path:hover {
fill: #f4aeaf;
}

#niyodo path:hover {
fill: #f7f397;
}

#okushimanto path:hover {
fill: #d7e69d;
}

#shimanto-ashizuri path:hover {
fill: #fbe2b4;
}
/* ▲▲▲トップページの地図（SVG画像）▲▲▲ */

.event_icatch img {
	float: left;
	padding: 0;
	margin: 5px 20px 5px 10px;
}
.event_icatch {
	width:150px
}
.css-events-list table.events-table td {
    padding: 10px !important;
}


/*
==================================================
レスポンシブ対応　グリッドレイアウト
==================================================
*/

.box_1 {
padding:0 10px;
margin:10px 0;
}
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.item {
  border-radius: 10px;
  background: #f5f5f5;
  padding: 10px 10px 5px 10px;
}
.item img {
margin: 0 auto;
display: block;
}
.tag p {
  text-align: left;
	margin:10px;
	font-size:16px;
}


/* ▼▼▼表（観光スポットの情報詳細）レスポンシブ▼▼▼ */
.guide {
 width: 100%;
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
 background: #f5f5f5;
 color: #000;
	table-layout: auto;
}
.guide th {
 padding: 10px;
 background: #ffefd5;
 border: solid 2px #ffffff;
}
.guide td {
 padding: 10px;
 border: solid 2px #ffffff;
}
/* ▲▲▲表（観光スポットの情報詳細）レスポンシブ▲▲▲ */


/* ▼▼▼カテゴリーの記事一覧のページネーション▼▼▼ */
.pagination {
  clear: both;
  padding: 20px 0;
  position: relative;
  font-size: 14px;
  line-height: 1em;
        text-align: center;
}
.pagination-box {
  display: inline-block;
}
.pagination span, .pagination a {
  display: block;
  float: left;
  margin: 2px 2px 2px 0;
  padding: 10px 14px 10px 14px;
  text-decoration: none;
  width: auto;
  color: #fff; /* 通常の文字色 */
  background: #ff8c00; /* 通常の背景色 */
  border-radius: 50%; /* 角を丸くして円形に */
}
.pagination span.page-of {
  background: none;
  color: #000;
}
.pagination a:hover{
  color: #000; /* マウスホバー時の文字色 */
  background: #EEEEEE; /* マウスホバー時の背景色 */
}
.pagination .current{
  padding: 10px 14px 10px 14px;
  color: #000; /* 現在のページの文字色 */
  background: #EEEEEE; /* 現在のページの背景色 */
}
@media only screen and (max-width: 413px) {
.pagination {
  font-size: 12px;
  line-height: 12px;
}
.pagination span, .pagination a {
  padding: 7px 10px 7px 10px;
}
.pagination .current{
  padding: 7px 10px 7px 10px;
}
}
/* ▲▲▲カテゴリーの記事一覧のページネーション▲▲▲ */


/*
==================================================
YouTubeの大きさを100％にする（レスポンシブ）
==================================================
*/
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 760px) {
.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
}

/* ▼▼▼ページのトップに戻る（右下のボタン）▼▼▼ */
#pagetop {
  width: 100px;
  height: 100px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  transition: all 0.3s ease;
}
#pagetop:hover {
  transform: translateY(-5px);
}
#pagetop a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
#pagetop a::before,
#pagetop a::after {
  display: none;
}
#pagetop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.2));
  transition: filter 0.3s ease;
}
#pagetop:hover img {
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}
/* ▲▲▲ページのトップに戻る（右下のボタン）▲▲▲ */


/*==================================================
スライダーのためのcss
===================================*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.slider-caption {
  padding: 0px 20px;
	margin:0;
  line-height: 1.5em;
  background: #fff;
  color: #000;
  font-size: 1.0rem;
  font-weight: 700;
}

p.slider-caption {
  padding: 0px 20px;
	margin:0;	
}

@media only screen and (max-width : 760px){
.slider-caption {
  padding: 0px 20px;
	margin:0;
  line-height: 1.5em;
  background: #fff;
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
}	
}

/* ▼▼▼SNSシェアボタン▼▼▼ */
.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: 'B!';
}
 
.share {
  margin-top: 20px;
  margin-bottom: 40px;
}
 
.share ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.share ul:after {
  display: block;
  clear: both;
  content: '';
}
 
.share li {
  float: left;
  width: 25%;
  margin: 0;
  margin-top: 15px;
}
 
.share li i {
    font-size: 1.3em;
    padding-top: 3px;
  }
  .share li span {
    display: none;
  }
.share li a {
  font-size: 14px;
  display: block;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
 
.share li a:hover {
  opacity: .8;
}
 
.share li a:visited {
  color: #fff;
}
 
.tweet a {
  background-color: #55acee;
}
 
.facebook a {
  background-color: #315096;
}
 
.pocket a {
  background-color: #dd4b39;
}
 
.hatena a {
  background-color: #008fde;
}
 
@media(max-width: 599px) {
  .share li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
  }
  .share li i {
    font-size: 1.3em;
    padding-top: 3px;
  }
  .share li span {
    display: none;
  }
}
/* ▲▲▲SNSシェアボタン▲▲▲ */


/* ▼▼▼パン屑リスト▼▼▼ */
#breadcrumb {
	margin: 10px 0 0 20px;
}
@media only screen and (max-width : 760px){
#breadcrumb {
	margin: 10px 0 0 10px;
}
}
/* ▲▲▲パン屑リスト▲▲▲ */

@media only screen and (max-width : 760px){
label {
	width:100%:
}
}

/* ▼▼▼カテゴリーの色付け▼▼▼ */
.eat{
  background:#eb7b00;
	padding:2px;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.play{
  background:#ed3131;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.health{
  background:#1E90FF;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.history{
  background:#8A2BE2;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.connect{
  background:#FF9900;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.work{
  background:#3366CC;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.kochi{
  background:#ee8383;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.niyodo{
  background:#ffd700;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.okushimanto{
  background:#add164;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.shimanto{
  background:#f6b751;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.reihoku{
  background:#e9967a;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.monobe{
  background:#e2b9d6;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.aki{
  background:#a3d9ef;
	padding:0px 2px 1px 2px;
	margin:0 2px;
}

.new_04 {
	text-align:right;
	margin:10px 2px 0 2px;
}

.new_04 a {
	font-size:14px;
	color: #fff;
	text-decoration:none;
	text-align:right;
}

.new_05 {
	text-align:left;
	margin:5px 0 0 0;
}

@media only screen and (max-width : 760px){
.new_05 {
	text-align:left;
	margin:15px 0 0 0;
}
}

.new_05 {
	text-align:left;
}

.new_05 a {
	font-size:14px;
	color: #fff;
	text-decoration:none;
	text-align:right;
}
/* ▲▲▲カテゴリーの色付け▲▲▲ */



.red {
    color: #FF0000;
    font-size: 120%;
}
.red-01 {
    color: #FF0000;
}

/* ▼▼▼下線マーカー▼▼▼ */
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFFF99 0%) repeat scroll 0 0;}

.pink_line{	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffc0cb 0%) repeat scroll 0 0;}

.blue_line{	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #c1e0ff 0%) repeat scroll 0 0;}

.green_line{	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #b2ffb2 0%) repeat scroll 0 0;}

.orange_line{	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffe0c1 0%) repeat scroll 0 0;}
/* ▲▲▲下線マーカー▲▲▲ */


.ez-toc-page-1, .ez-toc-heading-level-3 {
	margin:8px 0px 8px 0px !important;
}

div#ez-toc-container ul li {
	margin:8px 0px 8px 0px !important;
}



/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
	width:33.3333%!important;
list-style:none;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}


/*
==================================================
お問い合わせ
==================================================
*/
.contact-width{max-width: 100%;}

/*必須の調整*/
.haveto{
 font-size:7px;
 padding:5px;
 background:#ff9393;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}
/*任意の調整*/
.any{
 font-size:7px;
 padding:5px;
 background:#93c9ff;
 color:#fff;
 border-radius:2px;
 margin-right:5px;
 position:relative;
 bottom:1px;
}

/*送信ボタンのデザイン変更*/
#formbtn{
 display: block;
 padding:1em 0;
 margin-top:30px;
 width:100%;
 background:#ffaa56;
 color:#fff;
 font-size:18px;
 font-weight:bold;	 
 border-radius:30px;
 border: none;
}
/*送信ボタンマウスホバー時*/
#formbtn:hover{
 background:#FFCC99;
 color:#fff;
}

.inquiry th{
text-align:left;
vertical-align: top;
}

input {

}
@media screen and (max-width: 960px) {
input {
width: 100%;
}
}

textarea {
width: 100%;
}

.wpcf7-form-control{
font-size:17px;
}

input[type="checkbox" i] {
margin: 3px 3px 3px 4px;
}


.contact_kakomi {
    width: 900px;
    margin: 0 auto;	
}
.contact_kakomi p {
	font-size:24px;
	text-align:center;
}
@media screen and (max-width: 960px) {
.contact_kakomi {
    width: 100%;
	text-align:left;
}
}
@media screen and (max-width: 960px) {
.contact_kakomi p {
	text-align:left;
}
}

/* ▼▼▼reCAPTCHAボタンを表示させない▼▼▼ */
.grecaptcha-badge { visibility: hidden; }
/* ▲▲▲reCAPTCHAボタンを表示させない▲▲▲ */



/*
==================================================
お問い合わせページ
==================================================
*/
.contact-page {
    padding: 80px 20px;
    background-color: #f5f5f5;
    min-height: 70vh;
}

.contact-page-container {
    max-width: 800px;
    margin: 0 auto;
}

.contact-page .section-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-page .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.contact-page .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.contact-page .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

.contact-description {
    text-align: center;
    font-size: 1rem;
    line-height: 2;
    color: #666;
    margin-bottom: 40px;
}

/* フォームエリア */
.contact-form-wrapper {
    background-color: #fff;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Contact Form 7 スタイル */
.contact-form-wrapper label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea,
.contact-form-wrapper select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.contact-form-wrapper input[type="text"]:focus,
.contact-form-wrapper input[type="email"]:focus,
.contact-form-wrapper input[type="tel"]:focus,
.contact-form-wrapper textarea:focus,
.contact-form-wrapper select:focus {
    outline: none;
    border-color: #5BC8D4;
}

.contact-form-wrapper textarea {
    min-height: 200px;
    resize: vertical;
}

/* 送信ボタン */
.contact-form-wrapper input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 18px 30px;
    background-color: #FFE500;
    color: #333;
    border: none;
    border-radius: 35px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.contact-form-wrapper input[type="submit"]:hover {
    background-color: #f5d800;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 必須マーク */
.contact-form-wrapper .wpcf7-form-control-wrap {
    display: block;
}

/* エラーメッセージ */
.contact-form-wrapper .wpcf7-not-valid-tip {
    color: #C62828;
    font-size: 0.85rem;
    margin-top: -15px;
    margin-bottom: 15px;
}

/* 送信完了メッセージ */
.contact-form-wrapper .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

.contact-form-wrapper .wpcf7-mail-sent-ok {
    background-color: #E8F5E9;
    border: 1px solid #4CAF50;
    color: #2E7D32;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .contact-page {
        padding: 60px 15px;
    }
    
    .contact-page .section-title {
        font-size: 2rem;
    }
    
    .contact-description br {
        display: none;
    }
    
    .contact-form-wrapper {
        padding: 30px 20px;
    }
}

@media screen and (max-width: 480px) {
    .contact-page .section-title {
        font-size: 1.7rem;
    }
    
    .contact-form-wrapper input[type="submit"] {
        max-width: 100%;
    }
}





/*
==================================================
リンクボタン　黄色
==================================================
*/
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 380px;
	height: 60px;
	color: #333;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
}
@media screen and (max-width: 760px) {
.btn a {
	width: 100%;
}
}

.btn a:hover {
	color: #808080;
}

.btn01 a {
	background-color: #fff100;
	border: 1px solid transparent;
	border-radius: 35px;
}

.btn01 a::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid #888888;
	border-radius: 35px;
}

.btn01 a:hover {
	background-color: #FFFF66;
}


/*-------------------------
  ブログカード
-------------------------*/
.tmt-blog-card {
	margin:50px 0;
}
a.tmt-blog-card {
	color:#000;
  border: 1px solid #e1e1e1;
  box-shadow: 2px 2px #ddd;
  display: block;
  padding: 20px;
  position: relative;
  width: 100%;
text-decoration: none;
}
a.tmt-blog-card::before {
    background-color: #FFCC33;
    border: solid 1px #939393;
    color: #FFFFFF;
    content: '合わせて読みたい';
    font-size: 14px;
		font-weight: bold;
    display: block;
    padding: 4px 20px;
    position: absolute;
    top: -15px;
    left: 25px;
  }
a.tmt-blog-card::after {
    border: solid 1px #939393;
    color: #000;
    content: '続きを読む';
    font-size: 14px;
    display: block;
    padding: 5px 20px;
    position: absolute;
    bottom: 10px;
    right: 20px;
  }
a.tmt-blog-card:hover {
    box-shadow: none;
    opacity: .8;
text-decoration: underline;
  }
.tmt-blog-card-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.tmt-blog-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #428bca;
    padding-bottom: 5px;
  }

.tmt-blog-card-thumbnail {
    flex: 1;
    margin-right: 15px;
    padding-top: 5px;
  }
.tmt-blog-card-thumbnail img {
      width: 80%;
    }
.tmt-blog-card-content {
    flex: 2.5;
  }

.tmt-blog-card-excerpt {
    color: #000;
    font-size: 14px;
    padding-bottom: 15px;
  }
.tmt-blog-card-site {
    color: #b2b2b2;
    font-size: 11px;
    padding-left: 5px;
  }
.tmt-blog-card-site img {
      margin-right: 5px;
      vertical-align: bottom;
      width: 20px;
    }
@media (max-width: 980px) {
  .tmt-blog-card-excerpt {
    border: none;
  }
.tmt-blog-card-thumbnail img {
      width: 100%;
    }
}
@media (max-width: 640px) {
  a.tmt-blog-card {
    padding: 10px 10px 20px 10px;
  }
  a.tmt-blog-card::before {
    font-size: 11px;
    padding: 2.5px 8px;
    top: -15px;
    left: 10px;
  }
  a.tmt-blog-card::after {
    font-size: 12px;
    padding: 2px 13px;
    right: 10px;
  }
  .tmt-blog-card-thumbnail {
    margin-right: 10px;
    padding-top: 10px;
  }
  .tmt-blog-card-title {
    font-size: 14px;
  }
  .tmt-blog-card-excerpt {

  }
.tmt-blog-card-content {
	flex: 1;
  }
}


/*スクロールバーの横幅指定*/
.scrollArea{
	height: 300px;
	overflow: auto;
	padding-right: 20px;
	    border: 1px #ffbf7f solid;
	
	margin:25px 5px 20px 5px;
padding:5px 8px 5px 8px;
}
/*スクロールバーの横幅指定*/
.scrollArea.deco::-webkit-scrollbar {
    width: 15px;
}
/*スクロールバーの背景色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-track {
  border-radius: 10px;
	background: #f2f2f2;
}
/*スクロールバーの色・角丸指定*/
.scrollArea.deco::-webkit-scrollbar-thumb {
  border-radius: 10px;
	background:#09C9D9;
}



/*
==================================================
引用タグ　カスタマイズ
==================================================
*/
blockquote {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    font-style: italic;
    color: #4e4e4e;
    background: #f3f3f3;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
content:"\f10d";
 font-family: "Font Awesome 5 Free";
    color: #c4c4c4;
    font-size: 58px;
    line-height: 1;
    font-weight: 900;
}

blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    text-align: center;
content:"\f10d";
 font-family: "Font Awesome 5 Free";
    color: #c4c4c4;
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

.mask-bg {
  color: transparent;
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, 100%);
}
 
.mask-bg.is-animated {
  color: #362ae0;
}
.mask-bg.is-animated::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}
 
@keyframes mask-bg {
  0% {
    transform: translate(0, 101%)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(0, -100%)
  }
}


/*
==================================================
ボタンを押すと開く
==================================================
*/
.grad-btn {
  display:block;  
  max-width: 280px;
  border: 2px solid #FF9900;
  background-color: #FF9900;
  font-size: 16px;
  color: #FFF;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}
.grad-btn:hover {
  border: 2px solid #FF9900;
  background-color: #FFF;
  color: #333
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}



/*---------------------------------------------------------*/
/* ヘッダーナビゲーション（レスポンシブ） - 新デザイン */
/*---------------------------------------------------------*/

.header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 77px;
  z-index: 999;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 1370px) {
  .header{
    height: 80px;
  }
}

@media only screen and (max-width: 760px) {
  .header{
    height: 60px;
  }
}

.header_inner {
  position: relative;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.logo{
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1371px) {
  .logo{
    padding: 3px 10px;
  }
}

.title{
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.logo-image {
  width: 200px;
  height: auto;
  margin-right: 10px;
}
@media screen and (max-width: 760px) {
.logo-image {
  width: 170px;
  height: auto;
  margin-right: 10px;
}
}
@media screen and (max-width: 480px) {
.logo-image {
  width: 170px;
  height: auto;
  margin-right: 10px;
}
}

.logo-text {
  font-size: 1.2rem;
  color: #333;
}

.support-btn a {
  background-color: #5BC8D4;
  color: white !important;
  padding: 12px 20px !important;
  border-radius: 30px;
  transition: background-color 0.3s;
  border: 2px solid #5BC8D4;
	font-weight: 800 !important;
}

.support-btn a:hover {
  background-color: #fff;
  color: #5BC8D4 !important;
}

@media only screen and (max-width: 1371px) {
  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  
  .hamburger {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }
  
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .nav_item {
    text-align: center;
    padding: 0px 14px 0px 14px;
  }
  
  .nav_item a {
    display: block;
    padding: 28px 10px 18px 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  
  .nav_item a:hover {
    background-color: #eee;
  }
  
  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 30px;
    height: 3px;
    background-color: #333;
    transition: all .6s;
  }
  
  .hamburger_border_top {
    top: 14px;
  }
  
  .hamburger_border_center {
    top: 24px;
  }
  
  .hamburger_border_bottom {
    top: 34px;
  }
  
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }
  
  .support-btn a {
    margin: 20px auto;
    width: 80%;
  }
}/* sp */

@media only screen and (min-width: 1370px) {
  .header_inner{
    width: 100%;
    padding: 10px 10px 10px 30px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .logo{
    padding: 3px 0;
  }
  
  .nav_list{
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .nav_item{
    margin: 0 25px;
  }
  
  .nav_item a{
    color: #333;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding: 10px 0;
    display: inline-block;
  }
  
  .nav_item a::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: #FFDD64;
    transition: .2s;
  }
  
  .nav_item a:hover::after {
    width: 100%;
  }
  
  .support-btn {
    margin-left: 15px;
  }
  
  .support-btn a::after {
    display: none;
  }
}/* pc */

/* ハンバーガーメニュー固定用 */
.hamburger.fixed {
  position: fixed;
  top: 10px;
}


/*
==================================================
ヘッダーメニューのSNSアイコン
==================================================
*/
/* SNSアイコン用のCSS */
.social-icons {
  display: flex;
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  color: #ffffff !important;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 1;
}

.social-icon:hover {
  transform: translateY(-2px);
}

.social-icon.facebook {
  background-color: #3b5998;
}

.social-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon i {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* レスポンシブ対応 */
@media only screen and (max-width: 1370px) {
  .social-icons {
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 20px;
  }
  
  .social-icon {
    width: 42px;
    height: 42px;
    margin: 0;
  }
  
  .social-icon i {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .nav_item.social-icons {
    border-bottom: 1px solid #eee;
  }
  
  .nav_item.social-icons a {
    display: inline-flex;
    border-bottom: none;
    padding: 0;
  }
}

/* PC表示での調整 */
/* アイコンのレイアウト修正追加 */
.social-icon.facebook i {
  position: relative;
  left: 1px; /* Facebookのアイコンを少し右に調整 */
}

.social-icon.instagram i {
  position: relative;
  top: 0px; /* Instagramのアイコンの縦位置調整 */
}

@media only screen and (min-width: 1371px) {
  .social-icons {
    margin-left: 0px;
  }
  
  .social-icon {
    width: 32px;
    height: 32px;
  }
  
  .social-icon i {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .nav_item.social-icons a::after {
    display: none;
  }
}


/*---------------------------------------------------------*/
/* 四角で囲む（黄色） */
/*---------------------------------------------------------*/
.shikaku {
    padding: 5px;
    border: 2px solid #FFD700;
}


/*
==================================================
ボタンを押すと開く
==================================================
*/
.grad-btn {
  display:block;  
  max-width: 280px;
  border: 2px solid #FF9900;
  background-color: #FF9900;
  font-size: 16px;
  color: #FFF;
  font-weight: bold;
  padding:16px;
  text-align: center;
  border-radius: 4px;
  transition: .4s;
}
.grad-btn:hover {
  border: 2px solid #FF9900;
  background-color: #FFF;
  color: #333
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /*グラデーションで隠す高さ*/
  background: #fff;
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}


/*
==================================================
外部サイトアイコン
==================================================
*/
.link_01 {

}
.link_01:before {
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
  font-weight: 900;
  padding: 0px 5px 0px 0;
	margin:0px;
  color: #f89174;/*アイコンの色*/
}

/*
==================================================
関連記事アイコン
==================================================
*/
.link_02 {
	
}

.link_02:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  padding-right: 5px;
	  padding-top: 5px;
	margin:2px 0px 2px 0px;
font-size: 1.5em;
  color: #f89174;/*アイコンの色*/
	vertical-align: top;
}







/*
==================================================
ホームページトップデザイン
==================================================
*/

/*
==================================================
メインページのトップ画像（画像切替）
==================================================
*/
/* ヒーローセクションのCSS（header.phpに直接記述） */
.hero-section {
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slider {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;  /* 上部を重視して表示 */
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .hero-section {
        height: 100vh;
        display: flex;
        align-items: flex-start;
    }
	
	.hero-slide img {
        object-position: center;
    }

	.hero-slide {
        top: 0px;
}
}

@media screen and (max-width: 480px) {
    .hero-section {
        height: 100vh;
    }
    
    .hero-slide img {
        object-position: center;
    }
}

/*
==================================================
キャッチコピー（常時表示）
==================================================
*/
.hero-catchcopy {
    position: absolute;
    z-index: 10;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;	
}

.hero-catchcopy .line {
    display: inline-block;
    background-color: #FFE500;
    color: #000000;
    font-size: 4rem;
    font-weight: bold;
    padding: 15px 30px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.hero-catchcopy .line:last-child {
    margin-bottom: 0;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .hero-catchcopy {
        left: 3%;
        top: 40%;
    }
    
    .hero-catchcopy .line {
        font-size: 2.5rem;
        padding: 10px 20px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 480px) {
    .hero-catchcopy {
        left: 3%;
        top: 35%;
    }
    
    .hero-catchcopy .line {
        font-size: 1.8rem;
        padding: 8px 15px;
        margin-bottom: 8px;
    }
}






/*
==================================================
お知らせセクション
==================================================
*/
.news-section {
    max-width: 1200px;
    margin: 20px auto 80px;
    padding: 60px 20px;
}

/* セクションヘッダー */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.section-title {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.section-title-en {
    font-size: 2rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

/* ニュースリスト */
.news-list {
    border-top: 2px solid #ddd;
}

.news-item {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    border-bottom: 2px solid #ddd;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.news-item:hover {
    background-color: #f9f9f9;
}

/* サムネイル */
.news-thumbnail {
    width: 200px;
    height: 130px;
    flex-shrink: 0;
    margin-right: 30px;
    overflow: hidden;
    border-radius: 8px;
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* コンテンツ */
.news-content {
    flex: 1;
}

.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.news-category {
    display: inline-block;
    background-color: #5BC8D4;
    color: #fff;
    font-size: 0.9rem;
    padding: 6px 18px;
    border-radius: 25px;
    margin-right: 20px;
    font-weight: bold;
}

.news-date {
    font-size: 1.1rem;
    color: #666;
}

.news-title {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
}

/* 矢印 */
.news-arrow {
    font-size: 1.5rem;
    color: #FF6B6B;
    margin-left: 30px;
    flex-shrink: 0;
}

.news-arrow i {
    transition: transform 0.3s;
}

.news-item:hover .news-arrow i {
    transform: translateX(5px);
}

/* もっと見るボタン */
.news-more {
    text-align: center;
    margin-top: 40px;
}

.more-button {
    display: inline-block;
    padding: 15px 50px;
    background-color: #fff;
    border: 2px solid #5BC8D4;
    color: #5BC8D4;
    text-decoration: none;
    border-radius: 35px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s;
}

.more-button:hover {
    background-color: #5BC8D4;
    color: #fff;
}

/* お知らせがない場合 */
.no-news {
    text-align: center;
    padding: 50px;
    color: #666;
    font-size: 1.1rem;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .news-section {
        margin: 20px auto 50px;
        padding: 40px 15px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-title-en {
        font-size: 1.2rem;
    }
    
    .news-item {
        padding: 20px 0;
    }
    
    .news-thumbnail {
        width: 150px;
        height: 100px;
        margin-right: 20px;
    }
    
    .news-title {
        font-size: 1.1rem;
    }
    
    .news-arrow {
        font-size: 2rem;
        margin-left: 15px;
    }
}

@media screen and (max-width: 480px) {
    .section-title {
        font-size: 1.8rem;
    }
    
    .news-thumbnail {
        width: 100%;
        height: 180px;
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-right: 40px;
    }
    
    .news-arrow {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .news-title {
        font-size: 1rem;
    }
}









/*
==================================================
ゆずの会についてセクション
==================================================
*/
.about-section {
    background-color: #f5f5f5;
    padding: 80px 0;
    overflow: hidden;
}

.about-container {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* 左側：画像（左端いっぱい） */
.about-image {
    flex: 1;
    max-width: 55%;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 右側：コンテンツ */
.about-content {
    flex: 1;
    max-width: 500px;
    padding-right: 40px;
	text-align: center;
}

.about-header {
    text-align: center;
    margin-bottom: 30px;
}

.about-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.about-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.about-title-en {
    font-size: 1.5rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 5px;
}

.about-text {
    margin-bottom: 30px;
	text-align: left;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #333;
    margin: 0 0 15px 0;
}

.about-text p:last-child {
    margin-bottom: 0;
}

/* ボタン */
.about-button {
    display: inline-block;
    padding: 15px 50px;
    background-color: #FFE500;
    color: #333;
    text-decoration: none;
    border-radius: 35px;
    font-size: 1.1rem;
    font-weight: bold;
    border: 2px solid #FFE500;
    transition: all 0.3s;
}

.about-button:hover {
    background-color: #fff;
    color: #333;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1200px) {
    .about-container {
        gap: 50px;
    }
    
    .about-image {
        max-width: 50%;
    }
}

@media screen and (max-width: 968px) {
    .about-section {
        padding: 60px 20px;
    }
    
    .about-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .about-image {
        max-width: 100%;
    }
    
    .about-image img {
        border-radius: 10px;
    }
    
    .about-content {
        max-width: 100%;
        padding-right: 0;
    }
    
    .about-header {
        text-align: center;
    }
    
    .about-text {
        text-align: left;
    }
}

@media screen and (max-width: 768px) {
    .about-section {
        padding: 50px 15px;
    }
    
    .about-title {
        font-size: 2rem;
    }
    
    .about-title-en {
        font-size: 1.2rem;
    }
    
    .about-text p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 480px) {
    .about-section {
        padding: 40px 15px;
    }
    
    .about-title {
        font-size: 1.7rem;
    }
    
    .about-title-en {
        font-size: 1rem;
    }
    
    .about-button {
        padding: 12px 40px;
        font-size: 1rem;
    }
}








/*
==================================================
コンテンツセクション
==================================================
*/
.contents-section {
    background-color: #fff;
    padding: 80px 20px;
}

.contents-grid > p {
    display: none;
}

.contents-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* セクションヘッダー */
.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.section-title {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.section-title-en {
    font-size: 1.8rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

/* 説明文 */
.contents-description {
    text-align: center;
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 50px;
}

/* カードグリッド */
.contents-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* カード */
.contents-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contents-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* カード画像部分 */
.card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-label {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #C62828;
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 6px 15px;
    border-radius: 3px;
}

/* 画像右下の矢印 */
.card-arrow {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.contents-card:hover .card-arrow {
    background-color: #fff;
}

/* カード本文部分 */
.card-body {
    padding: 25px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 15px 0;
    color: #333;
}

.card-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
    margin: 0 0 20px 0;
}

.card-link {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    color: #2E7D32;
    font-weight: bold;
}
/* 詳しく見るのアイコン */
.link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: #2E7D32;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    margin-right: 10px;
}

.link-icon i {
    margin-left: 2px;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
    .contents-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media screen and (max-width: 768px) {
    .contents-section {
        padding: 60px 20px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-title-en {
        font-size: 1.4rem;
    }
    
    .contents-description {
        font-size: 1rem;
    }
    
    .contents-description br {
        display: none;
    }
    
    .contents-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .card-image {
        height: 200px;
    }
}

@media screen and (max-width: 480px) {
    .contents-section {
        padding: 40px 15px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-title-en {
        font-size: 1.1rem;
    }
    
    .card-body {
        padding: 20px;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
}











/*
==================================================
議員紹介セクション
==================================================
*/
.member-section {
    background-color: #fff;
    padding: 80px 20px;
}

.member-container {
    max-width: 1200px;
    margin: 0 auto;
}

.member-description {
    text-align: center;
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
    margin-bottom: 50px;
}

/* 議員グリッド */
.member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.member-grid > p {
    display: none;
}

/* 議員カード */
.member-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* カードのリンク部分のみホバーで動く */
.member-link:hover ~ .member-sns,
.member-link:hover {
    /* リンク部分にホバーした時だけカードが動く */
}

.member-card:has(.member-link:hover) {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* SNSにホバーした時はカードは動かない */
.member-card:has(.member-sns:hover) {
    transform: none;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

/* 議員画像 */
.member-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-city {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #2E7D32;
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 8px 15px;
}

/* 議員情報 */
.member-info {
    padding: 20px;
}

.member-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #333;
}

.member-message {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* もっと見るボタン */
.member-more {
    text-align: center;
    margin-top: 40px;
}

.member-more .more-button {
    display: inline-block;
    padding: 15px 50px;
    background-color: #fff;
    border: 2px solid #2E7D32;
    color: #2E7D32;
    text-decoration: none;
    border-radius: 35px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s;
}

.member-more .more-button:hover {
    background-color: #2E7D32;
    color: #fff;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media screen and (max-width: 768px) {
    .member-section {
        padding: 60px 20px;
    }
    
    .member-description br {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .member-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .member-image {
        height: 250px;
    }
}

/* 議員カード（SNS対応版） */
.member-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.member-link {
    display: block;
    text-decoration: none;
    color: #333;
}

/* SNSアイコン */
.member-sns {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    background-color: #f9f9f9;
}

.sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    transition: transform 0.3s, opacity 0.3s;
}
/* X（Twitter） */
.sns-twitter {
    background-color: #000;
    color: #fff;
    border: 2px solid #000;
}

.sns-twitter:hover {
    background-color: #fff;
    color: #000;
}

/* Facebook */
.sns-facebook {
    background-color: #1877F2;
    color: #fff;
    border: 2px solid #1877F2;
}

.sns-facebook:hover {
    background-color: #fff;
    color: #1877F2;
}

/* 公式サイト */
.sns-website {
    background-color: #2E7D32;
    color: #fff;
    border: 2px solid #2E7D32;
}

.sns-website:hover {
    background-color: #fff;
    color: #2E7D32;
}


/*
==================================================
議員個別ページ
==================================================
*/
.member-single {
    padding: 60px 20px;
    background-color: #f5f5f5;
}

.member-single-container {
    max-width: 900px;
    margin: 0 auto;
}

.member-profile {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.member-profile-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
}

.member-city-label {
    display: inline-block;
    background-color: #2E7D32;
    color: #fff;
    font-size: 0.9rem;
    padding: 5px 15px;
    border-radius: 3px;
    margin-bottom: 15px;
}

.member-profile-name {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
}

.member-profile-assembly {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.member-profile-content {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.member-profile-image {
    flex: 0 0 300px;
}

.member-profile-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.member-profile-info {
    flex: 1;
}

.member-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.member-info-table th,
.member-info-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.member-info-table th {
    width: 40%;
    background-color: #f9f9f9;
    font-weight: bold;
}

.member-profile-sns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sns-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.sns-btn:hover {
    opacity: 0.8;
}

.sns-btn.sns-twitter {
    background-color: #000;
}

.sns-btn.sns-facebook {
    background-color: #1877F2;
}

.sns-btn.sns-website {
    background-color: #2E7D32;
}

.member-profile-message,
.member-profile-detail {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.member-profile-message h2,
.member-profile-detail h2 {
    font-size: 1.5rem;
    margin: 0 0 20px 0;
}

.member-back {
    text-align: center;
    margin-top: 40px;
}

.back-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s;
}

.back-button:hover {
    background-color: #333;
    color: #fff;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .member-profile {
        padding: 25px;
    }
    
    .member-profile-name {
        font-size: 1.8rem;
    }
    
    .member-profile-content {
        flex-direction: column;
    }
    
    .member-profile-image {
        flex: none;
    }
}










/*
==================================================
県民の声セクション
==================================================
*/
.voice-section {
    position: relative;
    background-image: url('https://yuzu.kochi-ai.com/wp-content/uploads/header-pc-01.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 80px 20px;
    min-height: 600px;
}

.voice-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 60px;
}

/* 左側：フォームエリア */
.voice-form-area {
    flex: 1;
    background-color: #fff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.voice-form-area .section-header {
    text-align: center;
    margin-bottom: 30px;
}

.voice-form-area .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.voice-form-area .section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.voice-form-area .section-title-en {
    font-size: 1.2rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

/* Contact Form 7 スタイル調整 */
.voice-form input[type="text"],
.voice-form input[type="email"],
.voice-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.voice-form textarea {
    min-height: 150px;
    resize: vertical;
}

.voice-form input[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px 30px;
    background-color: #FFE500;
    color: #333;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.voice-form input[type="submit"]:hover {
    background-color: #f5d800;
    transform: translateY(-2px);
}

/* 右側：メッセージエリア */
.voice-message-area {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 40px;
}

.voice-message {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.message-line {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: #FFE500;
    color: #000;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 20px 15px;
    line-height: 1.5;
    height: auto;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .voice-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .voice-message-area {
        justify-content: center;
        padding-top: 0;
    }
    
    .message-line {
        font-size: 1.5rem;
        padding: 15px 12px;
    }
}

@media screen and (max-width: 768px) {
    .voice-section {
        padding: 60px 15px;
        background-attachment: scroll;
    }
    
    .voice-form-area {
        padding: 30px 20px;
    }
    
    .voice-form-area .section-title {
        font-size: 1.5rem;
    }
    
    .voice-message {
        gap: 10px;
    }
    
    .message-line {
        font-size: 2rem;
        padding: 15px 10px;
    }
}

@media screen and (max-width: 480px) {
    .voice-form-area .section-title {
        font-size: 1.3rem;
    }
    
    .message-line {
        padding: 12px 8px;
    }
}









/*
==================================================
特集記事セクション
==================================================
*/
.pickup-section {
    background-color: #fff;
    padding: 80px 20px;
}

.pickup-container {
    max-width: 1000px;
    margin: 0 auto;
}

.pickup-section .section-header {
    text-align: center;
    margin-bottom: 20px;
}

.pickup-section .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.pickup-section .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.pickup-section .section-title-en {
    font-size: 1.5rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

.pickup-description {
    text-align: center;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 40px;
}

/* バナーグリッド */
.pickup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.pickup-grid > p {
    display: none;
}

.pickup-grid > a,
.pickup-grid .pickup-banner {
    display: block;
    width: 100%;
}

.pickup-banner {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.pickup-banner:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.pickup-banner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.pickup-banner:hover img {
    transform: scale(1.05);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .pickup-section {
        padding: 60px 20px;
    }
    
    .pickup-section .section-title {
        font-size: 2rem;
    }
    
    .pickup-grid {
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    .pickup-section .section-title {
        font-size: 1.7rem;
    }
    
    .pickup-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}








/*
==================================================
固定ページの幅調整
==================================================
*/
.page-container {
    width: 900px;
    margin: 0 auto;
	font-size:20px;
}
@media screen and (max-width: 960px) {
.page-container {
    width: 100%;
margin: 0;
	padding:0;
}
}
@media screen and (max-width: 760px) {
.page-container {
	margin-top: 30px;
}
}


/*
==================================================
投稿ページのSNSシェアボタン
==================================================
*/
        .participation-info {
            text-align: center;
            margin: 40px 0;
            font-size: 18px;
            position: relative;
        }
        
        .participation-info::before,
        .participation-info::after {
            content: "";
            position: absolute;
            width: 25px;
            height: 1px;
            background-color: #333;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .participation-info::before {
            left: 20%;
            transform: translateY(-50%) rotate(50deg);
        }
        
        .participation-info::after {
            right: 20%;
            transform: translateY(-50%) rotate(130deg);
        }

.social-share-container {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
  width: 100%;
}

.share-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24%;
  height: 45px;
  color: white;
  font-size: 26px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.share-button:hover {
	color: #fff;
}

.facebook {
  background-color: #1877f2;
}

.twitter {
  background-color: #000000;
}

.x-logo {
  height: 18px;
  width: auto;
}

.line {
  background-color: #06C755;
}

.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

/* インスタグラムのスタイルを以下のはてなブックマークのスタイルに変更 */
.hatena {
  background-color: #00A4DE;
}
/* フォントを太く表示するためのスタイル */
.hatena {
  font-weight: bold;
  font-family: Arial, sans-serif;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .social-share-container {
    flex-wrap: wrap;
  }
  
  .share-button {
    width: 48%;
    margin-bottom: 10px;
    font-size: 16px;
  }
  
  .x-logo {
    height: 16px;
  }
}

@media (max-width: 480px) {
  .share-button {
    font-size: 14px;
    height: 40px;
  }
  
  .x-logo {
    height: 14px;
  }
}




/*
==================================================
スタッフ紹介ページ
==================================================
*/
       .staff-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start; /* 左詰め */
            max-width: 1200px;
            margin: 0px auto;
            gap: 20px;
        }
        
        .staff-card {
            width: 250px;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .staff-photo-box {
            /* クラス名を変更 */
            border-radius: 10px; /* 枠の角を丸く */
            height: 250px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden; /* はみ出た画像を隠す */
        }
        
        .staff-photo-box img {
            /* セレクタも更新 */
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px; /* 画像の角も丸く */
        }
        
        .photo-placeholder {
            /* プレースホルダー用のクラス名も変更 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
        }
        
        .staff-info {
            padding: 10px 0;
            min-height: 50px;
        }
        
        .staff-position {
            font-size: 1em;
            color: #666;
            margin-bottom: 5px;
			font-weight: bold;
        }
        
        .staff-name {
            font-size: 1.1em;
            font-weight: normal;
            margin: 0;
        }
        
        @media (max-width: 768px) {
            .staff-container {
                gap: 15px;
            }
            
            .staff-card {
                width: calc(50% - 15px);
            }
        }
        
        @media (max-width: 480px) {
            .staff-card {
                width: 100%;
            }
        }


/*
==================================================
運営者情報で使ってる表
==================================================
*/
/* table01 */
#table01 {
    width: 100%;
    margin: 0 auto 50px;
	font-size:20px;
}
@media screen and (max-width: 960px) {
#table01 {
    width: 100%;
margin: 0;
	padding:0;
}
}


#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
	padding:20px 10px;
	vertical-align:middle;

}

#table01 th {
  width: 30%;
	background-color: #fff;
	text-align: left;
}

/* sp */
@media only screen and (max-width: 760px) {
	#table01 {
	font-size: 17px;
}
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
	  font-size: 1.0em;
  }

  #table01 th {
    width: 100%;
	background-color: #F5F5F5;
  }

  #table01 td {
    padding-top: 10px;
  }
	
  #table01 tr {
    border-bottom: none;
  }
}



/*
==================================================
フッターのSNSボタン
==================================================
*/
.footer-sns-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.sns-button-wrapper {
  display: flex;
  gap: 20px;
}

.sns-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 20px;
}

.sns-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  color: #fff;
}

.facebook {
  background-color: #3b5998;
}

.instagram {
  background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.future-sns {
  background-color: #777777;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .sns-button {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  
  .sns-button-wrapper {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .sns-button {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .sns-button-wrapper {
    gap: 10px;
  }
}


/*
==================================================
画像を角丸にする
==================================================
*/
.rounded_img {
    border-radius: 20px;
  }

/*
==================================================
レ点のリストタグ
==================================================
*/
        .circle-check-list {
            list-style-type: none;
            padding-left: 0;
        }
        
        .circle-check-list li {
            padding: 8px 0 8px 35px;
            position: relative;
            margin-bottom: 10px;
        }
        
        .circle-check-list li:before {
            content: "\f058"; /* FontAwesome circle-check icon */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 7px;
            color: #4CAF50;
            font-size: 1.2em;
        }

        /* Alternate style with different color */
        .circle-check-list.blue li:before {
            color: #009245;
        }


/*
==================================================
ヒョウのハチ物語タイムライン
==================================================
*/
.leopard-hachi-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 20px 20px;
}

.leopard-hachi-timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #009944;
    top: 0;
    bottom: 0;
    left: 50px;
    z-index: 0;
}

.leopard-hachi-timeline-item {
    position: relative;
    margin-bottom: 50px;
}

.leopard-hachi-year-marker {
    position: absolute;
    width: 38px;
    height: 38px;
    background-color: #ffcc00;
    border-radius: 50%;
    top: 20px;
    left: 14px;
    z-index: 1;
    box-sizing: border-box;
}

.leopard-hachi-year-label {
    background-color: #009944;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 14px;
    width: max-content;
    margin-bottom: 10px;
}

.leopard-hachi-event-card {
    background-color: #fff9e6;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    margin-left: 100px;
}

.leopard-hachi-event-title {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0px 10px 0px;
    border-bottom: 2px solid #ffcc00;
    padding: 0px 7px 5px 7px;
    display: inline-block;
}

.leopard-hachi-event-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.leopard-hachi-event-text {
    flex: 1;
    min-width: 300px;
}

.leopard-hachi-event-image {
    flex: 0 0 40%;
    max-width: 250px;
    min-width: 150px;
}

.leopard-hachi-event-image img {
    width: 100%;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
.leopard-hachi-timeline {
    padding: 20px 0 20px 0px;
}
    .leopard-hachi-timeline::after {
        left: 11px;
        margin-left: 0;
    }
    
    .leopard-hachi-year-marker {
        left: -6px;
    }
    
    .leopard-hachi-year-label {
        max-width: 100%;
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .leopard-hachi-event-card {
        margin-left: 30px;
    }
    
    .leopard-hachi-event-content {
        flex-direction: column;
    }
    
    .leopard-hachi-event-image {
        max-width: 100%;
    }
    
    .leopard-hachi-event-text {
        flex: 1;
        min-width: 100%;
    }
}
/*
==================================================
ヒョウのハチ 寄付セクション
==================================================
*/
.leopard-hachi-donation-section {
    background-color: #f5f5f5;
    padding: 60px 20px;
    margin-top: 50px;
    border-top: 3px solid #009944;
}

.leopard-hachi-donation-title {
    color: #009944;
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    position: relative;
}

.leopard-hachi-donation-title:after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background-color: #ffcc00;
    margin: 15px auto 0;
}

.leopard-hachi-donation-content {
    max-width: 1000px;
    margin: 0 auto;
}

.leopard-hachi-donation-text {
    text-align: center;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.8;
}

.leopard-hachi-donation-progress-container {
    text-align: center;
    margin-bottom: 40px;
}

.leopard-hachi-donation-progress {
    background-color: #e0e0e0;
    height: 30px;
    border-radius: 15px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    max-width: 600px;
}

.leopard-hachi-progress-bar {
    background-color: #009944;
    height: 100%;
    border-radius: 15px;
}

.leopard-hachi-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.leopard-hachi-progress-amount {
    font-weight: bold;
    font-size: 18px;
}

.leopard-hachi-donation-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    justify-content: center;
}

.leopard-hachi-donation-method {
    background-color: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    flex: 1;
    min-width: 300px;
    max-width: 450px;
}

.leopard-hachi-donation-method h3 {
    color: #009944;
    margin-top: 0;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: inline-block;
}

.leopard-hachi-donation-cta {
    text-align: center;
    margin-bottom: 40px;
}

.leopard-hachi-donation-button {
    display: inline-block;
    background-color: #ffcc00;
    color: #333;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s;
}

.leopard-hachi-donation-button:hover {
    background-color: #ffcc00;
    transform: translateY(-3px);
	color: #333;
}

.leopard-hachi-donation-info {
    background-color: #fff9e6;
    padding: 30px;
    border-radius: 10px;
    margin-top: 100px;
}

.leopard-hachi-donation-info h3 {
    color: #009944;
    margin-top: 20px;
    margin-bottom: 10px;
}

.leopard-hachi-donation-info h3:first-child {
    margin-top: 0;
}

.leopard-hachi-donation-info ul {
    padding-left: 20px;
}

@media (max-width: 768px) {
    .leopard-hachi-donation-methods {
        flex-direction: row;
		margin-bottom: 40px
    }
    
    .leopard-hachi-donation-method {
        max-width: 100%;
    }
    
    .leopard-hachi-donation-title {
        font-size: 24px;
    }
.leopard-hachi-donation-text {
    text-align: left;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.8;
}	
.leopard-hachi-donation-info {
    padding: 30px 20px;
}	
}

/* メディアクエリ */
/* レスポンシブタブ用のCSS追加分 */
@media screen and (max-width: 768px) {
  /* 種（ヒョウについて）のタブ切替 */
  .leopard-hachi-tabs {
    flex-direction: column;
    border-bottom: none;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .leopard-hachi-tab-button {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    border-radius: 5px;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 12px 15px;
  }
  
  .leopard-hachi-tab-button.active {
    background-color: #FFDD64;
    color: #42210B;
    border-bottom: 1px solid #FFDD64;
  }
  
  .leopard-hachi-tab-button:after {
    content: "\f0da"; /* FontAwesomeの右矢印アイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  
  .leopard-hachi-tab-button.active:after {
    transform: translateY(-50%) rotate(90deg);
  }
  
  /* 物語（ハチの物語をより深く知る）のタブ切替 */
  .leopard-hachi-story-tabs {
    flex-direction: column;
    border-bottom: none;
    margin-bottom: 20px;
    width: 100%;
  }
  
  .leopard-hachi-story-tab-button {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    border-radius: 5px;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 12px 15px;
  }
  
  .leopard-hachi-story-tab-button.active {
    background-color: #FFDD64;
    color: #42210B;
    border-bottom: 1px solid #FFDD64;
  }
  
  .leopard-hachi-story-tab-button:after {
    content: "\f0da"; /* FontAwesomeの右矢印アイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
  }
  
  .leopard-hachi-story-tab-button.active:after {
    transform: translateY(-50%) rotate(90deg);
  }
  
  /* タブパネルのスタイル調整 */
  .leopard-hachi-tab-panel, 
  .leopard-hachi-story-tab-panel {
    padding: 15px 10px;
  }
  
  /* 画像とテキストの調整 */
  .leopard-hachi-panel-image {
    margin-top: 15px;
  }
  
  .leopard-hachi-panel-image img {
    max-width: 100%;
  }
	
.leopard-hachi-story-tab-panel h3 {
	margin-block-start: 0em;
    margin-block-end: 1em;
  }
	
}









/* ヒョウのハチ ストーリーセクションのスタイル */
.leopard-hachi-story-section {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
.leopard-hachi-story-section {
  padding: 0;
}
}

.leopard-hachi-story-title {
  text-align: center;
  color: #333;
  font-size: 32px;
  margin-top: 80px !important;
  margin-bottom: 40px;
  position: relative;
}

.leopard-hachi-story-title:after {
  content: '';
  display: block;
  width: 80px;
  height: a 4px;
  background-color: #009944;
  margin: 15px auto 0;
}

.leopard-hachi-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.leopard-hachi-story-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.leopard-hachi-story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.leopard-hachi-story-card-header {
  background-color: #FFDD64;
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
}

.leopard-hachi-story-card-header h3 {
  margin: 0;
  font-size: 20px;
	color: #42210B;
}

.leopard-hachi-story-icon {
  background-color: #FFDD64;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: #fff;
  font-size: 24px;
}

.leopard-hachi-story-card-body {
  padding: 20px;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.leopard-hachi-year-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #ffcc00;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
}

.leopard-hachi-story-cta {
  text-align: center;
}

.leopard-hachi-button {
  display: inline-block;
  background-color: #ffcc00;
  color: #333;
  font-weight: bold;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.leopard-hachi-button:hover {
  background-color: #ffcc00;
  transform: translateY(-3px);
	color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .leopard-hachi-story-title {
    font-size: 26px;
  }
  
  .leopard-hachi-story-grid {
    grid-template-columns: 1fr;
	    gap: 0px;
  }
}

.leopard-hachi-hero-image {
  max-width: 100%;  /* 親要素の幅を超えないように */
  width: auto;      /* 元の縦横比を維持 */
  height: auto;     /* 元の縦横比を維持 */
  display: block;   /* インライン要素の余白を削除 */
  margin: 0 auto;   /* 中央揃え */
  border-radius: 10px; /* 角を丸く */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  max-height: 500px; /* 高さの最大値を設定 */
  object-fit: contain; /* 画像が切れないようにコンテナ内に収める */
}


/* タブコンテンツのスタイル */
.leopard-hachi-deep-story {
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.leopard-hachi-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  gap: 5px;
}

.leopard-hachi-tab-button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}

.leopard-hachi-tab-button:hover {
  background-color: #e0e0e0;
}

.leopard-hachi-tab-button.active {
  background-color: #FFDD64;
  color: #42210B;
  border-bottom: 2px solid #FFDD64;
}

.leopard-hachi-tab-content {
  padding: 20px 0;
}

.leopard-hachi-tab-panel {
  display: none;
}

.leopard-hachi-tab-panel.active {
  display: block;
}

.leopard-hachi-tab-panel h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 22px;
}

.leopard-hachi-tab-panel p {
  margin-bottom: 15px;
  line-height: 1.7;
}

.leopard-hachi-panel-image {
  margin-top: 20px;
  text-align: center;
}

.leopard-hachi-panel-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 執筆者情報のスタイル - オプション1用 */
.leopard-hachi-author-info {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.leopard-hachi-author-image {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #FFDD64;
  margin: 0 auto; /* 中央揃え */
}

.leopard-hachi-author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 画像の中央部分を表示 */
}

.leopard-hachi-author-details {
  flex: 1;
	margin: 0 0 0 15px;
}

.leopard-hachi-author-details h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 18px;
}

.leopard-hachi-author-details p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 執筆者情報のスタイル - オプション2用 */
.leopard-hachi-tab-author {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
  margin-top: 30px;
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}

/* メディアクエリ */
@media (max-width: 768px) {
  .leopard-hachi-author-info,
  .leopard-hachi-tab-author {
    flex-direction: column;
    text-align: center;
  }
  
  .leopard-hachi-author-image {
    margin-bottom: 15px;
  }
}

/*
==================================================
動物のヒョウについて
==================================================
*/
/* 種のタブシステム用スタイル */
.leopard-hachi-species-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  gap: 5px;
}

.leopard-hachi-species-tab-button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}

.leopard-hachi-species-tab-button:hover {
  background-color: #e0e0e0;
}

.leopard-hachi-species-tab-button.active {
  background-color: #FFDD64;
  color: #42210B;
  border-bottom: 2px solid #FFDD64;
}

.leopard-hachi-species-tab-content {
  padding: 20px 0;
}

.leopard-hachi-species-tab-panel {
  display: none;
}

.leopard-hachi-species-tab-panel.active {
  display: block;
}

/* 物語のタブシステム用スタイル */
.leopard-hachi-story-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 2px solid #eee;
  gap: 5px;
}

.leopard-hachi-story-tab-button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-bottom: -2px;
}

.leopard-hachi-story-tab-button:hover {
  background-color: #e0e0e0;
}

.leopard-hachi-story-tab-button.active {
  background-color: #FFDD64;
  color: #42210B;
  border-bottom: 2px solid #FFDD64;
}

.leopard-hachi-story-tab-content {
  padding: 20px 0;
}

.leopard-hachi-story-tab-panel {
  display: none;
}

.leopard-hachi-story-tab-panel.active {
  display: block;
}

/* 導入文のスタイル */
.leopard-hachi-introduction {
  margin-bottom: 0px;
  padding: 0 15px;
}

.leopard-hachi-introduction p {
  font-size: 16px;
  line-height: 1.8;
  padding: 15px 0;
  margin: 0;
}




/*
==================================================
銀行口座の項目
==================================================
*/
.donation-bank-info {
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 800px;
  margin: 50px auto;
  padding: 35px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  position: relative;
}

.section-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
  text-align: center;
}

.bank-info-container {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.bank-info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e9ecef;
}

.bank-info-item:last-child {
  border-bottom: none;
}

.bank-info-label {
  flex: 0 0 100px;
  font-weight: 600;
  color: #495057;
}

.bank-info-value {
  flex: 1;
  font-size: 16px;
  color: #212529;
}
@media (max-width: 768px) {
.bank-info-value {
text-align: left;
	margin: 0 0 0 30px;
}
}

.copy-all-container {
  text-align: center;
  margin: 25px 0;
}

.copy-all-btn {
  background-color: #009961;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 3px 6px rgba(0, 153, 97, 0.2);
  display: inline-flex;
  align-items: center;
}

.copy-all-btn i {
  margin-right: 8px;
}

.copy-all-btn:hover {
  background-color: #007a4d;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 153, 97, 0.3);
}

.copy-all-btn:active {
  transform: translateY(0);
}

.donation-note {
  margin-top: 25px;
  font-size: 14px;
  color: #6c757d;
  line-height: 1.6;
}

.donation-note p {
  margin-bottom: 10px;
}

.donation-note a {
  color: #009961;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.donation-note a:hover {
  color: #007a4d;
  text-decoration: underline;
}

/* コピー通知 */
.copy-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #333;
  color: white;
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.copy-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification-content {
  display: flex;
  align-items: center;
  padding: 12px 20px;
}

.notification-content i {
  margin-right: 10px;
  color: #4caf50;
  font-size: 18px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .donation-bank-info {
    padding: 25px 20px;
    margin: 30px 15px;
  }
  
  .bank-info-item {
    flex-direction: row;
  }
  
  .bank-info-label {
    margin-bottom: 5px;
	  flex: 0 1 auto;
	  text-align:left;
  }
  
  .copy-notification {
    bottom: 20px;
    right: 20px;
    left: 20px;
    text-align: center;
  }
  
  .notification-content {
    justify-content: center;
  }
}



/*
==================================================
ハチと兵士の像を建てるプロジェクト
==================================================
*/
/* ヘッダーセクション */
.hachi-button {
    display: inline-block;
    background-color: #00A651; /* 濃い緑色をそのまま使用 */
    color: #ffffff; /* 白色テキスト */
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* シャドウを少し濃くする */
    border: 2px solid #008543; /* 境界線を追加して視認性を高める */
}

.hachi-button:hover {
    background-color: #008543;
    color: #ffffff; /* ホバー時も白色を維持 */
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

        .hero-section {
            position: relative;
            min-height: 600px;
            background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('path-to-background-image.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 50px 20px;
        }
        
        .hero-content {
            max-width: 800px;
            z-index: 2;
        }
        
        .hero-title {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero-subtitle {
            font-size: 1.8rem;
            color: var(--light-brown);
            margin-bottom: 30px;
        }
        
        .hero-description {
            font-size: 1.2rem;
            margin-bottom: 40px;
        }
        
        .hero-images {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
        }
 @media (max-width: 768px) {
        .hero-images {
            display: block;
        }
}       

        .hero-image {
            width: 30%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
@media (max-width: 768px) {
        .hero-image {
			width: 100%;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			margin: 10px ;
        }
}

        /* ストーリーセクション */
        .story-section {
            padding: 80px 0;
            background-color: white;
            position: relative;
        }
@media (max-width: 768px) {
        .story-section {
            padding: 0px 0 40px 0;
        }
}

        .story-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
 @media (max-width: 768px) {
        .story-title {
            font-size: 1.6rem;
        }
}
        .timeline {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #009245;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -15px;
        }
        
        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
        }
        
        .timeline-item:nth-child(odd) {
            left: 0;
        }
        
        .timeline-item:nth-child(even) {
            left: 50%;
        }
        
        .timeline-content {
            padding: 20px;
            background-color: white;
            position: relative;
            border-radius: 6px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .timeline-date {
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
			font-size: 18px;
        }

        /* 目的セクション */
        .purpose-section {
            padding: 80px 0;
            background-color: #f9f9f9;
        }
@media (max-width: 768px) {
        .purpose-section {
            padding: 80px 0 30px 0;
        }
}

        .purpose-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
@media (max-width: 768px) {
        .purpose-title {
            font-size: 1.6rem;
        }
}

        .purpose-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
        }
        
        .purpose-card {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: calc(50% - 15px);
            text-align: center;
        }
        
        .purpose-icon {
            font-size: 40px;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        /* 像デザインセクション */
        .design-section {
            padding: 80px 0;
            background-color: white;
        }
 @media (max-width: 768px) {
        .design-section {
            padding: 40px 0 10px 0;
            background-color: white;
        }
}

        .design-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
@media (max-width: 768px) {
        .design-title {
            font-size: 1.6rem;
        }
}

        .design-content {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
        }
@media (max-width: 768px) {
        .design-content {
			            display: block;
            gap: 20px;
        }
}

        .design-image {
            flex: 1;
            min-width: 300px;
			border-radius: 20px;
        }

        .design-image img {
            flex: 1;
			border-radius: 20px;
        }

        .design-text {
            flex: 1;
            min-width: 300px;
        }
        
        .statue-quote {
            background-color: #f5f5f5;
            padding: 20px;
            border-left: 4px solid var(--secondary-color);
            font-style: italic;
            margin: 20px 0;
        }
        
        .map-container {
            margin-top: 40px;
        }
        
        /* 会の思いセクション */
        .message-section {
            padding: 80px 0;
            background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('path-to-light-background.jpg');
            background-size: cover;
            background-position: center;
            text-align: center;
			margin: 0 50px;
        }
 @media (max-width: 768px) {
        .message-section {
            padding: 0;
			margin: 0 ;
        }
}

        .message-title {
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
 @media (max-width: 768px) {
        .message-title {
            font-size: 2.0rem;
        }
}

        .message-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .message-card {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: calc(50% - 20px);
            position: relative;
            text-align: left;
        }
        
        .person-image-01 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--secondary-color);
            margin-bottom: 20px;
        }
        
        .quote-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 40px;
            color: var(--secondary-color);
            opacity: 0.3;
        }
        
        .person-name {
            font-weight: bold;
            display: block;
            margin-top: 10px;
            text-align: right;
        }
        
        /* スケジュールセクション */
        .schedule-section {
            padding: 80px 0;
            background-color: #f9f9f9;
        }
 @media (max-width: 768px) {
        .schedule-section {
            padding: 60px 0 50px 0;
        }
}

        .schedule-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
@media (max-width: 768px) {
        .schedule-title {
            font-size: 1.9rem;
			margin: 10px 10px 40px 10px;
        }
}        

        .schedule-timeline {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            padding: 20px 0;
			font-size: 20px;
        }
@media (max-width: 768px) {
        .schedule-timeline {
			font-size: 18px;
        }
}
        
        .schedule-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 4px;
            background: linear-gradient(to bottom, #4CAF50, var(--secondary-color));
        }
        
        .schedule-item {
            margin-bottom: 30px;
            padding-left: 30px;
            position: relative;
        }
@media (max-width: 768px) {
        .schedule-item {
            margin-bottom: 30px;
            padding: 0 20px;
        }
}
        
        .schedule-item::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 5px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--secondary-color);
            border: 4px solid #f9f9f9;
            z-index: 1;
        }
        
        .schedule-date {
            font-weight: bold;
            margin-bottom: 5px;
        }
        

/*
==================================================
ハチと兵士の像を建てるプロジェクト
==================================================
*/
/* 支援セクション全体のスタイル */
.support-section {
    padding: 80px 0;
    background-color: white;
}

@media (max-width: 768px) {
    .support-section {
        padding: 50px 0 0 0;
    }
}

.support-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .support-title {
        font-size: 1.9rem;
    }
}

.goal-container {
    max-width: 100%;
    width: 600px;
    justify-content: center;
    margin: 60px auto;
    padding: 0 70px;
}

@media (max-width: 768px) {
    .goal-container {
        padding: 0 15px;
    }  
}

.goal-info {
    flex: 1;
    min-width: 300px;
}

.donate-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.donate-method {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    width: calc(33.333% - 14px);
    text-align: center;
}

@media (max-width: 768px) {
    .donate-method {
        width: 100%;
        padding: 20px 10px;
    }
}

.method-icon {
    font-size: 30px;
    color: var(--primary-color, #009961);
    margin-bottom: 10px;
}

/* 銀行情報のスタイル */
.bank-info-container {
    margin-top: 15px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.bank-info-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.bank-info-item:last-child {
    border-bottom: none;
}

.bank-info-label {
    flex: 0 0 80px;
    font-weight: 600;
    color: #495057;
}

.bank-info-value {
    flex: 1;
    font-size: 14px;
    color: #212529;
}

.copy-all-container {
    margin-top: 15px;
    text-align: center;
}

.copy-all-btn {
    background-color: #009961;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
}

.copy-all-btn i {
    margin-right: 5px;
}

.copy-all-btn:hover {
    background-color: #007a4d;
}

/* コピー通知のスタイル */
.copy-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #333;
    color: white;
    padding: 0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.copy-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.notification-content {
    display: flex;
    align-items: center;
    padding: 12px 20px;
}

.notification-content i {
    margin-right: 10px;
    color: #4caf50;
    font-size: 18px;
}

/* ゆうちょ銀行情報のスタイル改善 */
.yucho-info-container {
    margin-top: 15px;
}

.yucho-method {
    margin-bottom: 12px;
}

.yucho-method-title {
    background-color: #009961;
    color: white;
    padding: 8px 12px;
    border-radius: 5px 5px 0 0;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.yucho-method-title i {
    margin-right: 6px;
}

.yucho-method .bank-info-container {
    border-radius: 0 0 5px 5px;
    margin-top: 0;
    border: 1px solid #eee;
}

.yucho-account-name .bank-info-container {
    background-color: #fffaf0;
    border: 1px solid #ffeeba;
    margin-top: 15px;
}

.yucho-account-name .bank-info-item {
    border-bottom: none;
}

.yucho-account-name .bank-info-label {
    font-weight: 700;
    color: #856404;
}

.yucho-account-name .bank-info-value {
    font-weight: 600;
    color: #212529;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .copy-notification {
        left: 20px;
        right: 20px;
        bottom: 20px;
        text-align: center;
    }
    
    .notification-content {
        justify-content: center;
    }
    
    .yucho-method-title {
        font-size: 13px;
    }
    
    .bank-info-label, .bank-info-value {
        font-size: 13px;
    }
}
     

/*
==================================================
ハチと兵士の像を建てるプロジェクト
==================================================
*/
        /* 賛同者セクション */
        .supporters-section {
            padding: 80px 0;
            background-color: #f9f9f9;
        }
        
        .supporters-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }
@media (max-width: 768px) {
        .supporters-title {
			font-size: 1.8rem;
        }
}

        .supporters-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }
        
        .supporter-item {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            width: calc(25% - 15px);
            display: flex;
            align-items: center;
        }
        
        .supporter-name {
            font-weight: bold;
            font-size: 17px;
        }
        
        .supporter-position {
            font-size: 16px;
            color: #777;
        }
        
        /* 最終CTAセクション */
        .final-cta-section {
            position: relative;
            padding: 100px 10px;
            text-align: center;
            background-color: #FFDD64;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: #42210B;
        }
        
        .final-cta-title {
            font-size: 2.5rem;
            color: #42210B;
            margin-bottom: 30px;
        }
@media (max-width: 768px) {
        .final-cta-title {
            font-size: 1.7rem;
        }
}
        
        .final-cta-text {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 40px;
        }
        

        /* レスポンシブ対応 */
        @media screen and (max-width: 992px) {
            .hero-title {
                font-size: 2.8rem;
            }
            
            .hero-subtitle {
                font-size: 1.5rem;
            }
            
            .timeline-item {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
                left: 0 !important;
            }
            
            .timeline::after {
                left: 31px;
            }
            
            .purpose-card {
                width: 100%;
            }
            
            .message-card {
                width: 100%;
            }
            
            .donate-method {
                width: calc(50% - 10px);
            }
        }
        
        @media screen and (max-width: 768px) {
            .hero-title {
                font-size: 2.2rem;
            }
            
            .hero-subtitle {
                font-size: 1.3rem;
            }
            
            .hero-description {
                font-size: 1rem;
            }
            
            .supporter-item {
                width: calc(50% - 10px);
            }
            
            .donate-method {
                width: 100%;
            }
			.timeline-item {
                padding-left: 30px;
                padding-right: 25px;
            }
        }
        
        @media screen and (max-width: 576px) {
            .hero-title {
                font-size: 1.8rem;
            }
            
            .hero-section {
                min-height: 500px;
            }
            
            .supporter-item {
                width: 100%;
            }
        }


/*
==================================================
【吹き出し】碑文についてのページ
==================================================
*/
.speech-bubble-container {
  position: relative;
  max-width: 450px;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.circular-image-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFD84D;
  flex-shrink: 0;
}

.person-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.speech-bubble {
  position: relative;
  background-color: #fff;
  color: #333;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-size: 16px;
  line-height: 1.4;
  flex-grow: 1;
}

.speech-bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #fff;
}

@media (max-width: 500px) {
  .speech-bubble-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .circular-image-container {
    width: 100px;
    height: 100px;
  }
  
  .speech-bubble {
    font-size: 14px;
  }
  
  .speech-bubble:before {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid #fff;
    border-top: none;
  }
}



/*
==================================================
書籍・関連メディアページ
==================================================
*/
  /* 中央配置のための全体コンテナ */
  .hachi-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
@media screen and (max-width: 768px) {
  .hachi-container {
    padding: 0;
  }
}

  /* メインビジュアル領域 */
  .hachi-main-visual {
    position: relative;
    background-color: #009245;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gap-extra);
    overflow: hidden;
    border-radius: var(--edge-medium);
    text-align: center;
  }
  
  .hachi-main-visual::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url('/api/placeholder/650/450');
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    mix-blend-mode: overlay;
  }
  
  .hachi-main-visual::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background-color: var(--warm-sand);
    border-radius: 50%;
    opacity: 0.15;
  }
  
  .hachi-main-message {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: var(--gap-large) var(--gap-medium);
    text-align: center;
  }
  
  .hachi-main-visual h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--gap-medium);
    line-height: 1.3;
    position: relative;
    display: inline-block;
  }
  
  .hachi-main-visual h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #ffdd64;
  }
  
  .hachi-main-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin: var(--gap-medium) auto 0;
    max-width: 90%;
  }
  
  /* コンテンツセクション */
  .hachi-content-block {
    margin-bottom: var(--gap-extra);
    text-align: center;
  }
  
  .hachi-content-block h2 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    color: #42210b;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
  }
  
  .hachi-content-block h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: #ffdd64;
  }
  
  .hachi-intro-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0 auto var(--gap-large);
    color: rgba(41, 37, 34, 0.85);
    max-width: 800px;
    text-align: center;
  }
  
  /* 書籍一覧 */
  .hachi-book-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-large);
    margin-bottom: var(--gap-large);
  }
  
  .hachi-book-item {
    background-color: white;
    border-radius: var(--edge-medium);
    overflow: hidden;
    box-shadow: var(--box-float);
    transition: var(--movement);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  
  .hachi-book-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .hachi-book-jacket {
    height: 280px;
    position: relative;
	  background-color: #ffdd64;
    overflow: hidden;
  }
  
  .hachi-book-jacket img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--movement);
  }
  
  .hachi-book-item:hover .hachi-book-jacket img {
  }
  
  .hachi-book-jacket-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--gap-medium);
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 1;
  }
  
  .hachi-book-jacket-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .hachi-book-data {
    padding: var(--gap-medium);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
@media screen and (max-width: 768px) {
  .hachi-book-data {
    padding: 20px 10px;
  }
}  

  .hachi-book-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--deep-charcoal);
    margin-bottom: var(--gap-mini);
    line-height: 1.4;
  }
  
  .hachi-book-writer {
    font-size: 0.9rem;
    color: var(--earth-brown);
    margin-bottom: var(--gap-small);
  }
  
  .hachi-book-summary {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(41, 37, 34, 0.8);
    margin-bottom: var(--gap-medium);
  }
  
  /* 感想欄 */
  .hachi-reader-impression {
    margin-top: auto;
    padding: var(--gap-medium);
    background-color: var(--pale-parchment);
    border-radius: var(--edge-soft);
    position: relative;
  }
  
  .hachi-reader-impression::before {
    content: '"';
    position: absolute;
    top: -5px;
    left: 20px;
    font-size: 3rem;
    font-family: serif;
    color: var(--warm-sand);
    opacity: 0.3;
    line-height: 1;
  }
  
  .hachi-impression-photo {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto var(--gap-small);
    border: 2px solid var(--warm-sand);
  }
  
  .hachi-impression-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hachi-impression-author {
    font-weight: 500;
    font-size: 1rem;
    color: var(--forest-green);
    text-align: center;
    margin-bottom: var(--gap-small);
  }
  
  .hachi-impression-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(41, 37, 34, 0.85);
  }
  
  /* メディア集 */
  .hachi-media-showcase {
    margin-top: var(--gap-large);
    text-align: center;
  }
  
  .hachi-media-heading {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5rem;
    color: var(--forest-green);
    margin-bottom: var(--gap-medium);
    display: inline-block;
  }
  
  .hachi-media-mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gap-medium);
  }
  
  .hachi-media-piece {
    position: relative;
    height: 180px;
    border-radius: var(--edge-soft);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #ffdd64;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--movement);
  }
  
  .hachi-media-piece:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-float);
  }
  
  .hachi-media-piece::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .hachi-media-name {
    position: relative;
    z-index: 2;
    color: #42210b;
    font-weight: 500;
    text-align: left;
    padding: var(--gap-small);
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  /* 展示会セクション */
  .hachi-exhibition-section {
    margin: var(--gap-extra) auto;
    padding: var(--gap-large);
    background-color: #009245;
    color: white;
    border-radius: var(--edge-medium);
    text-align: center;
  }
  
  .hachi-exhibition-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap-large);
    align-items: center;
  }
  
  .hachi-exhibition-photo {
    width: 100%;
    height: 300px;
    border-radius: var(--edge-medium);
    overflow: hidden;
    box-shadow: var(--box-float);
    background-color: var(--warm-sand);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  .hachi-exhibition-text {
    text-align: left;
  }
  
  .hachi-exhibition-text h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.8rem;
    margin-bottom: var(--gap-medium);
  }
  
  .hachi-exhibition-text p {
    margin-bottom: var(--gap-medium);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* ボタンスタイル */
  .hachi-action-button {
    display: inline-block;
    padding: var(--gap-small) var(--gap-medium);
    background-color: #fff;
    color: #42210b;
    border: none;
    border-radius: var(--edge-soft);
    font-weight: 500;
    text-decoration: none;
    transition: var(--movement);
    cursor: pointer;
  }
  
  .hachi-action-button:hover {
    background-color: var(--earth-brown);
    color: white;
    transform: translateY(-2px);
  }
  
  /* フッターメッセージ */
  .hachi-footer-message {
    margin: var(--gap-extra) auto 0;
    padding: var(--gap-medium);
    background-color: var(--pale-parchment);
    border-radius: var(--edge-medium);
    text-align: center;
  }
  
  .hachi-message-text {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: var(--gap-small);
  }
  
  .hachi-footer-note {
    font-size: 0.9rem;
    color: var(--deep-charcoal);
    opacity: 0.7;
  }
  
  /* レスポンシブデザイン */
  @media (max-width: 768px) {
    .hachi-book-collection {
      grid-template-columns: 1fr;
    }
    
    .hachi-exhibition-layout {
      grid-template-columns: 1fr;
    }
    
    .hachi-main-visual::before {
      display: none;
    }
  }


























/* 会長メッセージのスタイル */
.president-message-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 30px 0;
}

.president-photo-container {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.circular-image-container {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #009961;
  margin-bottom: 10px;
}

.circular-image-container.small {
  width: 80px;
  height: 80px;
  margin-bottom: 0;
}

.president-image, .person-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.president-name {
  font-weight: bold;
  font-size: 16px;
  margin-top: 5px;
  text-align: center;
}

.president-message-content {
  flex: 1;
  min-width: 300px;
}

.president-message-content p {
  margin-bottom: 15px;
  line-height: 1.6;
}

/* 吹き出しスタイル */
.president-speech-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}

.president-speech-bubble {
  position: relative;
  background-color: #fff;
  border: 2px solid #009961;
  color: #333;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  font-size: 15px;
  line-height: 1.4;
  flex: 1;
}

.president-speech-bubble:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #fff;
  z-index: 2;
}

.president-speech-bubble:after {
  content: '';
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #009961;
  z-index: 1;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .president-photo-container {
    margin: 0 auto 0;
  }
	
.president-message-container {
  gap: 0px;
  margin: 0;
}  
  .president-speech-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .circular-image-container.small {
    margin: 0 auto;
  }
  
  .president-speech-bubble {
    width: 100%;
  }
  
  .president-speech-bubble:before, .president-speech-bubble:after {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: none;
  }
  
  .president-speech-bubble:before {
    border-bottom: 15px solid #fff;
  }
  
  .president-speech-bubble:after {
    top: -18px;
    border-bottom: 18px solid #009961;
  }
}





/*
==================================================
教育長からのメッセージ
==================================================
*/
.message_box {
  background-color: #f8f8f8;
  border-left: 5px solid #FFD700;
  padding: 20px;
  margin: 20px 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.message_header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.profile_image {
  margin-right: 15px;
}

.profile_image img {
  width: 120px;
  border-radius: 50%;
}

.profile_info h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
}

.message_content {
  line-height: 1.8;
  color: #333;
}















/* ▼▼▼次の記事・前の記事▼▼▼ */
.post-navigation {
    display: flex;
    gap: 20px;
    margin: 50px 0 40px 0;
}

.nav-prev, .nav-next {
    flex: 1;
}

.nav-prev a, .nav-next a {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
}

.nav-prev a:hover, .nav-next a:hover {
    border-color: #FFDD64;
}

.nav-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
}

.nav-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-text {
    flex: 1;
}

.nav-prev .nav-text {
    margin-left: 15px;
}

.nav-next .nav-text {
    margin-right: 15px;
    text-align: right;
}

.nav-label {
    font-size: 12px;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.nav-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column;
        gap: 15px;
    }
}
/* ▲▲▲次の記事・前の記事▲▲▲ */










/* パンくずリスト - 適切なセレクタで上書き */
#breadcrumb {
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    display: inline-table;
    width: auto;
    border-spacing: 0;
}
#breadcrumb div[style*="table-cell"] {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}
#breadcrumb a {
    color: #2E7D32;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}
#breadcrumb a:hover {
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
}

/* 全てのリンクにアイコン用のスペースを確保 */
#breadcrumb a span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
}

/* ホームアイコン（最初のリンク） */
#breadcrumb div[style*="table-cell"]:first-child a span::before {
    content: "\f015";
}

/* お知らせアイコン */
#breadcrumb a[href*="news"] span::before,
#breadcrumb a[href*="info"] span::before,
#breadcrumb a[href*="oshirase"] span::before {
    content: "\f0f3";
}

/* 活動報告アイコン */
#breadcrumb a[href*="activity"] span::before,
#breadcrumb a[href*="katudo"] span::before {
    content: "\f4d8";
}

/* 区切り文字 */
#breadcrumb div[style*="table-cell"]:not(:last-child)::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f054";
    color: #6c757d;
    font-size: 10px;
    margin: 0 8px;
}

/* 元の区切り文字を隠す */
#breadcrumb div[style*="table-cell"] {
    font-size: 0;
}
#breadcrumb div[style*="table-cell"] a,
#breadcrumb div[style*="table-cell"] span {
    font-size: 14px;
}















/*
==================================================
プライバシーポリシーページ
==================================================
*/
.policy-page {
    padding: 80px 20px;
    background-color: #fff;
}

.policy-page-container {
    max-width: 900px;
    margin: 0 auto;
}

.policy-page .section-header {
    text-align: center;
    margin-bottom: 50px;
}

.policy-page .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.policy-page .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.policy-page .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

/* コンテンツエリア */
.policy-content {

    padding: 50px;
    border-radius: 15px;
}

.policy-update {
    text-align: right;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 30px;
}

.policy-intro {
    font-size: 1rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

/* 各セクション */
.policy-section {
    margin-bottom: 40px;
}

.policy-section:last-child {
    margin-bottom: 0;
}

.policy-section h2 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #5BC8D4;
}

.policy-section h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 25px 0 10px 0;
}

.policy-section p {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    margin: 0 0 15px 0;
}

.policy-section p:last-child {
    margin-bottom: 0;
}

.policy-section ul {
    margin: 15px 0;
    padding-left: 25px;
}

.policy-section li {
    font-size: 0.95rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 8px;
}

.policy-section a {
    color: #5BC8D4;
    text-decoration: underline;
}

.policy-section a:hover {
    color: #3aa8b4;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .policy-page {
        padding: 60px 15px;
    }
    
    .policy-page .section-title {
        font-size: 2rem;
    }
    
    .policy-content {
        padding: 30px 20px;
    }
    
    .policy-section h2 {
        font-size: 1.15rem;
    }
}

@media screen and (max-width: 480px) {
    .policy-page .section-title {
        font-size: 1.7rem;
    }
    
    .policy-content {
        padding: 25px 15px;
    }
    
    .policy-section h2 {
        font-size: 1.1rem;
    }
    
    .policy-section p,
    .policy-section li {
        font-size: 0.9rem;
    }
}



















/*
==================================================
ゆずの会についてページ
==================================================
*/
.about-page {
    padding: 80px 0;
    background-color: #fff;
}

/* ページ全体のコンテナは横幅制御しない */
.about-page-container {
    width: 100%;
}

/* セクションヘッダー */
.about-page .section-header {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0 20px;
    text-align: center;
}

.about-page .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.about-page .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.about-page .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

/* 写真＋テキストブロック（広め） */
.about-block {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-block.reverse {
    flex-direction: row-reverse;
}

.about-block-content {
    flex: 1;
}

.about-block-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #5BC8D4;
}

.about-block-content p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    margin: 0 0 15px 0;
}

.about-block-content p:last-child {
    margin-bottom: 0;
}

.about-block-image {
    flex: 0 0 450px;
}

.about-block-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 組織概要（狭め） */
.about-info-section {
    margin: 0 auto 80px;
    padding: 50px;
    background-color: #f5f5f5;
}

.about-info-container {
	max-width: 900px;
    margin: 20px auto;
    padding: 50px;
    background-color: #fff;
    border-radius: 15px;
}

.about-info-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 30px 0;
    text-align: center;
}

.about-info-table {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border-collapse: collapse;
}

.about-info-table th,
.about-info-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    font-size: 1rem;
}

.about-info-table th {
    width: 35%;
    background-color: #e8e8e8;
    font-weight: bold;
    color: #333;
}

.about-info-table td {
    background-color: #fff;
    color: #555;
}

/* 重点課題（広め） */
.about-issues-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.about-issues-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 20px 0;
    text-align: center;
}

.about-issues-intro {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 40px;
}

.about-issues-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.about-issues-grid > p {
    display: none;
}

.about-issue-card {
    background-color: #f9f9f9;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.about-issue-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.issue-icon {
    width: 60px;
    height: 60px;
    background-color: #5BC8D4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.issue-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.about-issue-card h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}

.about-issue-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* 代表メッセージ（中くらい） */
.about-message-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px;
    background-color: #f5f5f5;
    border-radius: 15px;
}

.about-message-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 40px 0;
    text-align: center;
}

.about-message-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.about-message-content > p {
    display: none;
}

.about-message-image {
    flex: 0 0 200px;
    text-align: center;
}

.about-message-image img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.message-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.message-position {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.about-message-text {
    flex: 1;
}

.about-message-text p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    margin: 0 0 15px 0;
}

.about-message-text p:last-child {
    margin-bottom: 0;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .about-issues-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .about-page {
        padding: 60px 0;
    }
    
    .about-page .section-title {
        font-size: 2rem;
    }
    
    .about-block {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    
    .about-block.reverse {
        flex-direction: column;
    }
    
    .about-block-image {
        flex: none;
        width: 100%;
    }
    
    .about-block-title {
        font-size: 1.5rem;
    }
    
    .about-info-section {
        margin-left: 0px;
        margin-right: 0px;
        padding: 30px 20px;
    }
	
	.about-info-container {
    padding: 50px 20px;
}
    
    .about-info-table th,
    .about-info-table td {
        display: block;
        width: 100%;
    }
    
    .about-info-table th {
        border-bottom: none;
        padding-bottom: 5px;
    }
    
    .about-info-table td {
        padding-top: 5px;
        margin-bottom: 15px;
    }
    
    .about-issues-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .about-message-section {
        margin-left: 20px;
        margin-right: 20px;
        padding: 30px 20px;
    }
    
    .about-message-content {
        flex-direction: column;
        text-align: center;
    }
    
    .about-message-image {
        flex: none;
        margin-bottom: 20px;
		margin: 0 auto;
    }
    
    .about-message-text {
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    .about-page .section-title {
        font-size: 1.7rem;
    }
    
    .about-block-title {
        font-size: 1.3rem;
    }
    
    .about-info-title,
    .about-issues-title,
    .about-message-title {
        font-size: 1.5rem;
    }
}



















/*
==================================================
高知県を知るページ
==================================================
*/
.kochi-page {
    padding: 80px 0;
    background-color: #fff;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #333;
    line-height: 1.8;
}

/* ページ全体のコンテナは横幅制御しない */
.kochi-page-container {
    width: 100%;
}

/* セクションヘッダー */
.kochi-page .section-header {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0 20px;
    text-align: center;
}

.kochi-page .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.kochi-page .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.kochi-page .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

.kochi-page .section-lead {
    max-width: 700px;
    margin: 30px auto 0;
    font-size: 1rem;
    line-height: 2;
    color: #555;
}

/* ヘッダー画像 */
.kochi-header-image {
    max-width: 900px;
    margin: 40px auto 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.kochi-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

.kochi-header-image .image-placeholder {
    background: linear-gradient(135deg, #5BC8D4 0%, #4CAF50 100%);
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    padding: 20px;
}

/* 基本データセクション（広め） */
.kochi-basic-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.kochi-basic-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #5BC8D4;
    display: flex;
    align-items: center;
    gap: 15px;
}

.kochi-basic-title i {
    color: #5BC8D4;
}

.kochi-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.kochi-overview-grid > p {
    display: none;
}

.kochi-overview-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.kochi-overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.kochi-card-icon {
    width: 60px;
    height: 60px;
    background: #5BC8D4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.kochi-card-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.kochi-card-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
}

.kochi-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2E7D32;
}

.kochi-card-value span {
    font-size: 1rem;
    font-weight: 400;
}

.kochi-card-note {
    font-size: 0.8rem;
    color: #999;
    margin-top: 5px;
}

/* データテーブル */
.kochi-data-table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}

.kochi-data-table tr {
    border-bottom: 1px solid #b5b1b1;
    border-color: none;
}

.kochi-data-table th,
.kochi-data-table td {
    padding: 18px 20px;
    text-align: left;
    font-size: 1rem;
}

.kochi-data-table th {
    width: 35%;
    background-color: #fff;
    font-weight: bold;
    color: #333;
    border: none;
}

.kochi-data-table td {
    background-color: #fff;
    color: #555;
    border: none;
}

/* 人口データセクション（広め） */
.kochi-population-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.kochi-population-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.kochi-population-content > p {
    display: none;
}

.kochi-population-text {
    flex: 1;
}

.kochi-population-text p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    margin: 0 0 20px 0;
}

.kochi-population-chart {
    flex: 1;
    background: #f5f5f5;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
}

.kochi-population-chart img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.kochi-chart-placeholder {
    background: #e0e0e0;
    height: 280px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px;
}

.kochi-chart-caption {
    margin-top: 15px;
    font-size: 0.85rem;
    color: #666;
}

.highlight-red {
    background: linear-gradient(transparent 60%, #FFEB3B 60%);
    font-weight: 700;
}

.highlight-green {
    color: #2E7D32;
    font-weight: 700;
}

/* 課題セクション（広め） */
.kochi-challenges-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.kochi-challenges-intro {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 40px;
}

.kochi-challenges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.kochi-challenges-grid > p {
    display: none;
}

.kochi-challenge-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.kochi-challenge-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.kochi-challenge-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kochi-challenge-card-image .image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C62828;
    font-size: 0.85rem;
    text-align: center;
}

.kochi-challenge-card-content {
    padding: 25px;
}

.kochi-challenge-card h4 {
    font-size: 1.2rem;
    color: #C62828;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.kochi-challenge-card p {
    color: #666;
    font-size: 0.95rem;
    margin: 0 0 15px 0;
    line-height: 1.8;
}

.kochi-challenge-stat {
    background: #FFF3F3;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.kochi-challenge-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #C62828;
}

.kochi-challenge-stat .stat-label {
    font-size: 0.85rem;
    color: #666;
}

/* 明るい兆しセクション（広め） */
.kochi-positive-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.kochi-positive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.kochi-positive-grid > p {
    display: none;
}

.kochi-positive-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    border: 2px solid #4CAF50;
}

.kochi-positive-card .kochi-positive-icon {
    width: 70px;
    height: 70px;
    background: #4CAF50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.kochi-positive-card .kochi-positive-icon i {
    font-size: 1.8rem;
    color: #fff;
}

.kochi-positive-card h4 {
    font-size: 1.1rem;
    color: #2E7D32;
    margin: 0 0 10px 0;
}

.kochi-positive-card .kochi-positive-value {
    font-size: 2rem;
    font-weight: 700;
    color: #2E7D32;
    margin-bottom: 5px;
}

.kochi-positive-card .kochi-positive-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* 知事コメント */
.kochi-governor-comment {
    background: #f9f9f9;
    border-radius: 20px;
    padding: 40px;
    position: relative;
}

.kochi-governor-comment::before {
    content: '"';
    font-size: 5rem;
    color: #5BC8D4;
    opacity: 0.3;
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: Georgia, serif;
}

.kochi-governor-comment p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    padding-left: 50px;
    margin: 0;
}

.kochi-governor-comment .kochi-comment-source {
    text-align: right;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #999;
    padding-left: 50px;
}

/* 市町村マップセクション（広め） */
.kochi-map-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.kochi-map-container {
    background: #f9f9f9;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-bottom: 40px;
}

.kochi-map-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Googleマップ用レスポンシブ対応 */
.kochi-map-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9のアスペクト比 */
    border-radius: 10px;
    overflow: hidden;
    background: #e8e8e8;
}

.kochi-map-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 10px;
}

.kochi-map-caption {
    margin-top: 20px;
    font-size: 0.9rem;
    color: #666;
}

/* 市町村一覧 */
.kochi-municipality-category {
    margin-bottom: 30px;
}

.kochi-municipality-category h4 {
    font-size: 1.1rem;
    color: #2E7D32;
    margin: 0 0 15px 0;
    padding: 10px 15px;
    background: rgba(46, 125, 50, 0.1);
    border-radius: 8px;
    display: inline-block;
}

.kochi-municipality-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kochi-municipality-tag {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.kochi-municipality-tag:hover {
    background: #5BC8D4;
    color: #fff;
    border-color: #5BC8D4;
}

.kochi-municipality-tag.city {
    border-color: #2E7D32;
    color: #2E7D32;
}

.kochi-municipality-tag.city:hover {
    background: #2E7D32;
    color: #fff;
}

/* 関連リンクセクション（中くらい） */
.kochi-links-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px;
    background-color: #f5f5f5;
    border-radius: 15px;
}

.kochi-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.kochi-links-grid > p {
    display: none;
}

.kochi-link-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    display: block;
}

.kochi-link-card:hover {
    border-color: #5BC8D4;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
}

.kochi-link-card i {
    font-size: 2rem;
    color: #5BC8D4;
    margin-bottom: 15px;
}

.kochi-link-card h4 {
    font-size: 1rem;
    margin: 0 0 8px 0;
}

.kochi-link-card p {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}

/* データ出典 */
.kochi-data-source {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #666;
}

.kochi-data-source h5 {
    font-size: 0.9rem;
    color: #333;
    margin: 0 0 10px 0;
}

.kochi-data-source ul {
    margin: 0;
    padding-left: 20px;
}

.kochi-data-source li {
    margin-bottom: 5px;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .kochi-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kochi-challenges-grid {
        grid-template-columns: 1fr;
    }
    
    .kochi-positive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .kochi-page {
        padding: 60px 0;
    }
    
    .kochi-page .section-title {
        font-size: 2rem;
    }
    
    .kochi-basic-title {
        font-size: 1.5rem;
    }
    
    .kochi-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .kochi-overview-card {
        padding: 20px 15px;
    }
    
    .kochi-card-value {
        font-size: 1.4rem;
    }
    
    .kochi-population-content {
        flex-direction: column;
    }
    
    .kochi-data-table th,
    .kochi-data-table td {
        display: block;
        width: 100%;
    }
    
    .kochi-data-table th {
        border-bottom: none;
        padding-bottom: 5px;
    }
    
    .kochi-data-table td {
        padding-top: 5px;
        margin-bottom: 15px;
    }
    
    .kochi-positive-grid {
        grid-template-columns: 1fr;
    }
    
    .kochi-links-section {
        margin-left: 20px;
        margin-right: 20px;
        padding: 30px 20px;
    }
    
    .kochi-links-grid {
        grid-template-columns: 1fr;
    }
    
    .kochi-governor-comment {
        padding: 30px 20px;
    }
    
    .kochi-governor-comment p {
        padding-left: 30px;
    }
    
    .kochi-governor-comment .kochi-comment-source {
        padding-left: 30px;
    }
    
    .kochi-header-image {
        margin: 30px 20px 0;
    }
    
    .kochi-header-image .image-placeholder {
        height: 250px;
    }
    
    .kochi-challenge-card-image {
        height: 150px;
    }
}

@media screen and (max-width: 480px) {
    .kochi-page .section-title {
        font-size: 1.7rem;
    }
    
    .kochi-basic-title {
        font-size: 1.3rem;
    }
    
    .kochi-overview-grid {
        grid-template-columns: 1fr;
    }
    
    .kochi-municipality-list {
        justify-content: center;
    }
    
    .kochi-header-image .image-placeholder {
        height: 200px;
    }
}
















/*
==================================================
議員になるページ
==================================================
*/
.become-page {
    padding: 80px 0;
    background-color: #fff;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
    color: #333;
    line-height: 1.8;
}

.become-page-container {
    width: 100%;
}

/* セクションヘッダー */
.become-page .section-header {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 0 20px;
    text-align: center;
}

.become-page .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.become-page .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.become-page .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

.become-page .section-lead {
    max-width: 700px;
    margin: 30px auto 0;
    font-size: 1rem;
    line-height: 2;
    color: #555;
}

/* ヘッダー画像 */
.become-header-image {
    max-width: 900px;
    margin: 40px auto 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.become-header-image img {
    width: 100%;
    height: auto;
    display: block;
}

.become-header-image .image-placeholder {
    background: linear-gradient(135deg, #5BC8D4 0%, #4CAF50 100%);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    text-align: center;
    padding: 20px;
}

/* 共通セクションタイトル */
.become-section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 30px 0;
    padding-bottom: 15px;
    border-bottom: 3px solid #5BC8D4;
    display: flex;
    align-items: center;
    gap: 15px;
}

.become-section-title i {
    color: #5BC8D4;
}

/* イントロセクション */
.become-intro-section {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-intro-box {
    background: linear-gradient(135deg, #E3F2FD 0%, #fff 100%);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    border: 2px solid #5BC8D4;
}

.become-intro-box h3 {
    font-size: 1.8rem;
    color: #333;
    margin: 0 0 20px 0;
}

.become-intro-box p {
    font-size: 1.1rem;
    color: #555;
    line-height: 2;
    margin: 0;
}

.become-intro-box .highlight {
    background: linear-gradient(transparent 60%, #FFEB3B 60%);
    font-weight: 700;
}

/* 議員の仕事セクション */
.become-work-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

.become-work-grid > p {
    display: none;
}

.become-work-card {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.become-work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.become-work-icon {
    width: 70px;
    height: 70px;
    background: #5BC8D4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.become-work-icon i {
    font-size: 1.8rem;
    color: #fff;
}

.become-work-card h4 {
    font-size: 1.2rem;
    color: #333;
    margin: 0 0 15px 0;
}

.become-work-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* 1日のスケジュール */
.become-schedule-box {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.become-schedule-box h4 {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 25px 0;
    text-align: center;
}

.become-schedule-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.become-schedule-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f5;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.95rem;
}

.become-schedule-item .time {
    font-weight: 700;
    color: #5BC8D4;
}

/* 立候補の条件セクション */
.become-requirements-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-requirements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.become-requirements-grid > p {
    display: none;
}

.become-requirement-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border-top: 5px solid #5BC8D4;
}

.become-requirement-card h4 {
    font-size: 1.2rem;
    color: #333;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.become-requirement-card h4 i {
    color: #5BC8D4;
}

.become-requirement-card ul {
    margin: 0;
    padding-left: 20px;
}

.become-requirement-card li {
    margin-bottom: 12px;
    color: #555;
    line-height: 1.7;
}

.become-requirement-card .highlight-box {
    background: #FFF8E1;
    padding: 15px 20px;
    border-radius: 10px;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
}

.become-requirement-card .highlight-box strong {
    color: #F57C00;
}

/* 報酬セクション */
.become-salary-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-salary-intro {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 40px;
}

.become-salary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.become-salary-table th,
.become-salary-table td {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.become-salary-table th {
    background: #5BC8D4;
    color: #fff;
    font-weight: bold;
}

.become-salary-table tr:last-child td {
    border-bottom: none;
}

.become-salary-table .salary-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2E7D32;
}

.become-salary-note {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 15px;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.8;
}

.become-salary-note h5 {
    font-size: 1rem;
    color: #333;
    margin: 0 0 10px 0;
}

/* なり手不足セクション */
.become-issue-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-issue-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.become-issue-content > p {
    display: none;
}

.become-issue-text {
    flex: 1;
}

.become-issue-text p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
    margin: 0 0 20px 0;
}

.become-issue-stats {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.become-issue-stat-card {
    background: #FFF3F3;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    border: 2px solid #FFCDD2;
}

.become-issue-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #C62828;
    margin-bottom: 5px;
}

.become-issue-stat-card .stat-label {
    font-size: 0.85rem;
    color: #666;
}

/* インタビューセクション（仮） */
.become-interview-section {
    max-width: 1100px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-interview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.become-interview-grid > p {
    display: none;
}

.become-interview-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.become-interview-card:hover {
    transform: translateY(-5px);
}

.become-interview-card-image {
    height: 200px;
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.9rem;
}

.become-interview-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.become-interview-card-content {
    padding: 25px;
}

.become-interview-card .interview-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

.become-interview-card .interview-role {
    font-size: 0.85rem;
    color: #5BC8D4;
    margin: 0 0 15px 0;
}

.become-interview-card .interview-quote {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.become-interview-card .interview-quote::before {
    content: '"';
    color: #5BC8D4;
    font-size: 1.5rem;
}

.become-interview-coming {
    text-align: center;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 10px;
    margin-top: 30px;
    color: #999;
    font-size: 0.9rem;
}

/* FAQセクション */
.become-faq-section {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding: 0 20px;
}

.become-faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.become-faq-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.become-faq-question {
    padding: 25px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #f9f9f9;
}

.become-faq-question .q-mark {
    width: 35px;
    height: 35px;
    background: #5BC8D4;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.become-faq-answer {
    padding: 25px 30px 25px 80px;
    font-size: 1rem;
    color: #555;
    line-height: 1.9;
}

/* CTAセクション */
.become-cta-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 40px;
    background: linear-gradient(135deg, #5BC8D4 0%, #4CAF50 100%);
    border-radius: 20px;
    text-align: center;
    color: #fff;
}

.become-cta-section h3 {
    font-size: 1.8rem;
    margin: 0 0 20px 0;
}

.become-cta-section p {
    font-size: 1.1rem;
    margin: 0 0 30px 0;
    opacity: 0.95;
}

.become-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.become-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 35px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.become-cta-btn.primary {
    background: #fff;
    color: #5BC8D4;
}

.become-cta-btn.primary:hover {
    background: #f5f5f5;
    transform: translateY(-3px);
}

.become-cta-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 2px solid #fff;
}

.become-cta-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .become-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .become-interview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .become-issue-content {
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    .become-page {
        padding: 60px 0;
    }
    
    .become-page .section-title {
        font-size: 2rem;
    }
    
    .become-section-title {
        font-size: 1.5rem;
    }
    
    .become-intro-box {
        padding: 30px 20px;
    }
    
    .become-intro-box h3 {
        font-size: 1.4rem;
    }
    
    .become-work-grid {
        grid-template-columns: 1fr;
    }
    
    .become-requirements-grid {
        grid-template-columns: 1fr;
    }
    
    .become-issue-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .become-interview-grid {
        grid-template-columns: 1fr;
    }
    
    .become-salary-table {
        font-size: 0.9rem;
    }
    
    .become-salary-table th,
    .become-salary-table td {
        padding: 15px 10px;
    }
    
    .become-faq-answer {
        padding-left: 30px;
    }
    
    .become-cta-section {
        margin: 0 20px;
        padding: 40px 25px;
    }
    
    .become-cta-section h3 {
        font-size: 1.5rem;
    }
    
    .become-header-image {
        margin: 30px 20px 0;
    }
}

@media screen and (max-width: 480px) {
    .become-page .section-title {
        font-size: 1.7rem;
    }
    
    .become-section-title {
        font-size: 1.3rem;
    }
    
    .become-issue-stats {
        grid-template-columns: 1fr;
		width: 100%
    }
    
    .become-schedule-list {
        flex-direction: column;
        align-items: center;
    }
    
    .become-cta-buttons {
        flex-direction: column;
    }
    
    .become-cta-btn {
        width: 100%;
        justify-content: center;
    }
}




















/* =====================================================
   議員一覧ページ（archive-member）
===================================================== */
.member-archive {
    padding: 80px 0;
    background-color: #fff;
}

.member-archive-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.member-archive .section-header {
    text-align: center;
    margin-bottom: 40px;
}

.member-archive .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.member-archive .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.member-archive .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
}

.member-archive-description {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 50px;
}

/* 議員グリッド */
.member-archive .member-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.member-archive .member-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-archive .member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.member-archive .member-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.member-archive .member-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.member-archive .member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.member-archive .member-card:hover .member-image img {
    transform: scale(1.05);
}

.member-archive .member-city {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #5BC8D4;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 1;
}

.member-archive .member-info {
    padding: 20px;
}

.member-archive .member-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}

.member-archive .member-message {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* SNSアイコン */
.member-archive .member-sns {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 15px 20px;
    border-top: 1px solid #eee;
}

.member-archive .sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #666;
    transition: all 0.3s ease;
}

.member-archive .sns-icon:hover {
    transform: translateY(-3px);
}

.member-archive .sns-twitter:hover {
    background: #000;
    color: #fff;
}

.member-archive .sns-facebook:hover {
    background: #1877F2;
    color: #fff;
}

.member-archive .sns-website:hover {
    background: #5BC8D4;
    color: #fff;
}

/* ページネーション */
.member-pagination {
    margin: 40px 0;
}

.member-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.member-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.member-pagination .page-numbers:hover {
    background: #5BC8D4;
    color: #fff;
}

.member-pagination .page-numbers.current {
    background: #5BC8D4;
    color: #fff;
}

/* 戻るボタン */
.member-back {
    text-align: center;
    margin-top: 40px;
}

.member-back .back-button {
    display: inline-block;
    padding: 15px 40px;
    background: #fff;
    color: #333;
    text-decoration: none;
    border: 2px solid #333;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.member-back .back-button:hover {
    background: #333;
    color: #fff;
}

/* レスポンシブ */
@media screen and (max-width: 1024px) {
    .member-archive .member-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .member-archive {
        padding: 60px 0;
    }
    
    .member-archive .section-title {
        font-size: 2rem;
    }
    
    .member-archive .member-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 480px) {
    .member-archive .member-grid {
        grid-template-columns: 1fr;
    }
    
    .member-archive .section-title {
        font-size: 1.7rem;
    }
}


/* =====================================================
   議員詳細ページ（single-member）
===================================================== */
.member-single {
    padding: 80px 0;
    background-color: #fff;
}

.member-single-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* プロフィールヘッダー */
.member-profile-header {
    text-align: center;
    margin-bottom: 40px;
}

.member-city-label {
    display: inline-block;
    background: #5BC8D4;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.member-profile-name {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}

.member-profile-assembly {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* プロフィールコンテンツ */
.member-profile-content {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    align-items: flex-start;
}

.member-profile-image {
    flex: 0 0 300px;
}

.member-profile-image img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.member-profile-info {
    flex: 1;
	width: 100%;

}

/* 情報テーブル */
.member-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}

.member-info-table tr {
    border-bottom: 1px solid #eee;
}

.member-info-table th,
.member-info-table td {
    padding: 15px 10px;
    text-align: left;
    font-size: 1rem;
}

.member-info-table th {
    width: 35%;
    color: #666;
    font-weight: bold;
}

.member-info-table td {
    color: #333;
}

/* SNSボタン */
.member-profile-sns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.member-profile-sns .sns-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.member-profile-sns .sns-twitter {
    background: #000;
    color: #fff;
}

.member-profile-sns .sns-twitter:hover {
    background: #333;
}

/* Facebookアイコンを青色に */
.member-archive .sns-icon.sns-facebook {
    background: #1877F2;
    color: #fff;
}

.member-archive .sns-icon.sns-facebook:hover {
    background: #0d65d9;
}

.member-profile-sns .sns-website {
    background: #5BC8D4;
    color: #fff;
}

.member-profile-sns .sns-website:hover {
    background: #4ab5c0;
}

/* メッセージセクション */
.member-profile-message {
    background: #f9f9f9;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 40px;
}

.member-profile-message h2 {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #5BC8D4;
    display: inline-block;
}

.member-profile-message p {
    font-size: 1.1rem;
    line-height: 2;
    color: #555;
    margin: 0;
}

/* プロフィール詳細 */
.member-profile-detail {
    margin-bottom: 50px;
}

.member-profile-detail h2 {
    font-size: 1.3rem;
    color: #333;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #5BC8D4;
    display: inline-block;
}

.member-profile-detail p {
    font-size: 1rem;
    line-height: 2;
    color: #555;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .member-single {
        padding: 60px 0;
    }
    
    .member-profile-name {
        font-size: 2rem;
    }
    
    .member-profile-content {
        flex-direction: column;
    }
    
    .member-profile-image {
        flex: none;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .member-info-table th,
    .member-info-table td {
        display: block;
        width: 100%;
        padding: 10px 0;
    }
    
    .member-info-table th {
        border-bottom: none;
        padding-bottom: 5px;
    }
    
    .member-info-table td {
        padding-top: 0;
        margin-bottom: 15px;
    }
	.member-profile-info {
    width: 100%;
}
}

@media screen and (max-width: 480px) {
    .member-profile-name {
        font-size: 1.7rem;
    }
    
    .member-profile-sns .sns-btn {
        width: 100%;
        justify-content: center;
    }
}






















/* =====================================================
   カテゴリ・アーカイブページ
===================================================== */
.category-archive {
    padding: 80px 0;
    background-color: #fff;
}

.category-archive-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.category-archive .section-header {
    text-align: center;
    margin-bottom: 40px;
}

.category-archive .section-icon {
    width: 30px;
    height: auto;
    margin-bottom: 10px;
}

.category-archive .section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.category-archive .section-title-en {
    font-size: 1.3rem;
    color: #5BC8D4;
    font-weight: bold;
    letter-spacing: 0.15em;
    margin-top: 10px;
    text-transform: uppercase;
}

.category-description {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 50px;
    line-height: 1.8;
}

/* 記事リスト */
.news-list-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-item-page {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eee;
    transition: background 0.3s ease;
}

.news-item-page:first-child {
    border-top: 1px solid #eee;
}

.news-item-page:hover {
    background: #f9f9f9;
}

.news-thumbnail-page {
    flex: 0 0 180px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
}

.news-thumbnail-page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-item-page:hover .news-thumbnail-page img {
    transform: scale(1.05);
}

.news-content-page {
    flex: 1;
    min-width: 0;
}

.news-meta-page {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.news-category-page {
    display: inline-block;
    background: #5BC8D4;
    color: #fff;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
}

.news-date-page {
    font-size: 0.85rem;
    color: #999;
}

.news-title-page {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.news-excerpt-page {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-arrow-page {
    flex: 0 0 30px;
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.news-item-page:hover .news-arrow-page {
    color: #5BC8D4;
    transform: translateX(5px);
}

/* 記事なし */
.no-posts {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 1rem;
}

/* ページネーション */
.category-pagination {
    margin: 50px 0;
}

.category-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.category-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.category-pagination .page-numbers:hover {
    background: #5BC8D4;
    color: #fff;
}

.category-pagination .page-numbers.current {
    background: #5BC8D4;
    color: #fff;
}

/* 戻るボタン */
.category-back {
    text-align: center;
    margin-top: 40px;
}

.category-back .back-button {
    display: inline-block;
    padding: 15px 40px;
    background: #fff;
    color: #333;
    text-decoration: none;
    border: 2px solid #333;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.category-back .back-button:hover {
    background: #333;
    color: #fff;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .category-archive {
        padding: 60px 0;
    }
    
    .category-archive .section-title {
        font-size: 2rem;
    }
    
    .news-item-page {
        flex-wrap: wrap;
        gap: 15px;
        padding: 20px 0;
    }
    
    .news-thumbnail-page {
        flex: 0 0 120px;
        height: 80px;
    }
    
    .news-content-page {
        flex: 1 1 calc(100% - 150px);
    }
    
    .news-title-page {
        font-size: 1rem;
    }
    
    .news-excerpt-page {
        display: none;
    }
    
    .news-arrow-page {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .category-archive .section-title {
        font-size: 1.7rem;
    }
    
    .news-item-page {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .news-thumbnail-page {
        flex: none;
        width: 100%;
        height: 180px;
    }
    
    .news-content-page {
        flex: none;
        width: 100%;
    }
}




















/* CSSを子テーマのstyle.cssまたはカスタマイザーの追加CSSに入力 */
.contact-form {
    background-color: var(--white);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.form-control {
    width: 100%;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text);
    background-color: #f9f9f9;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(58, 125, 106, 0.1);
}

.form-control.textarea {
    height: 150px;
    resize: none;
}

/* 送信ボタンのスタイル */
.cta-button-01 {
    background-color: #5BC8D4;
	border: solid 2px #5BC8D4;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 1rem 2rem 1rem 3.5rem; /* 左側のパディングを増やしてアイコン用のスペースを確保 */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.cta-button-01:hover {
    background-color: #fff;
	color: #5BC8D4;
	border: solid 2px #5BC8D4;
}

/* Font Awesomeアイコンの追加 */
.cta-button-01::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1d8"; /* paper-planeアイコン */
    font-weight: 900;
    margin: 0 8px;
}
/* CTAボタンホバー時のアイコン色 */
.cta-button-01:hover::before {
    color: #5BC8D4;
}
    
/* 追加するCSSコード */
/* すでに提供されているCSSに追加 */
.submit-container {
    position: relative;
}

.submit-container::before {
    content: "\f1d8"; /* paper-planeアイコン */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: white;
    pointer-events: none;
	padding: 0 5px;
}

.submit-container:hover::before {
    color: #5BC8D4;
}

@media (max-width: 768px) {
.contact-form {
	margin: 5rem 0rem 2rem 0rem;
    padding: 2rem 1rem;
}
	
.cta-button-01::before {
    margin: -50px 8px 0 8px;
}	
}

@media (max-width: 480px) {
.cta-button-01 {
	width: 100%;
}
.submit-container::before {
    top: 35%;
}	
}