@CHARSET "utf-8";

/*
Theme Name: e
Author URI: https://hachi.here-kochi.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 10px;
}		
}


.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 10px;
}
@media only screen and (max-width : 760px){
article.post {
	margin:0 5px;
}	
}

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: #FFDD64;
	padding:0px;
	color:#603813;
	margin-top: 70px;	
}

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

/*
==================================================
フッターカスタマイズ
==================================================
*/
.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: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #FFDD64;
  opacity: 0.8;
  border-radius: 50%;
  z-index:999;
}
#pagetop a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#pagetop a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #603813;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pagetop a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #603813;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/* ▲▲▲ページのトップに戻る（右下のボタン）▲▲▲ */

/* ▼▼▼翻訳ボタン▼▼▼ */
#translate-btn {
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 100px; /* PAGE TOPボタンの上に配置 */
  background: #4A90E2; /* 青系の色で差別化 */
  opacity: 0.8;
  border-radius: 50%;
  z-index: 999;
  transition: opacity 0.3s;
}

#translate-btn:hover {
  opacity: 1;
}

#translate-btn a {
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}

#translate-btn a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f0ac'; /* 地球アイコン */
  font-size: 30px;
  color: #fff;
  position: absolute;
  width: 30px;
  height: 30px;
  top: 20px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#translate-btn a::after {
  content: '5 Languages';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 55px;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  font-weight: bold;
}
/* ▲▲▲翻訳ボタン▲▲▲ */

/*==================================================
スライダーのための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;
}
/* ▲▲▲カテゴリーの色付け▲▲▲ */


/*
==================================================
口コミ体験談　左
==================================================
*/
.balloon1 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon1 .faceicon1 {
    float: left;
    margin-right: -90px;
    width: 80px;
}

.balloon1 .faceicon1 img{
    width: 100%;
    height: auto;
    border: solid 3px #FFF0F5;
    border-radius: 50%;
}

.balloon1 .chatting1 {
    width: 100%;
}

.says1 {
    display: inline-block;
    position: relative; 
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #FFF0F5;
}

.says1:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px; 
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF0F5;
}

.says1 p {
    margin: 0;
    padding: 0;
    font-size: 15px;	
}

/*
==================================================
口コミ体験談　右
==================================================
*/

.balloon2 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon2 .faceicon2 {
    float: right;
    margin-left: -90px;
    width: 80px;
}

.balloon2 .faceicon2 img{
    width: 92%;
    height: auto;
    border: solid 3px #D7EEFF;
    border-radius: 50%;
}

.balloon2 .chatting2 {
    width: 100%;
}

.says2 {
    display: inline-block;
    position: relative; 
    margin: 5px 105px 0 0px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #D7EEFF;	
}

.says2:after {
	content: "";
	position: absolute;
	top: 18px;
	right: -24px;
	border: 12px solid transparent;
	border-left: 14px solid #D7EEFF;
}

.says2 p {
    margin: 0;
    padding: 0;
    font-size: 15px;	
}


/*
==================================================
吹き出し　灰色枠　右
==================================================
*/

.balloon61 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon61 .faceicon61 {
    float: right;
    margin-left: -90px;
    width: 80px;
}

.says61 {
    position: relative; 
    margin: 0px 105px 0px 0px;
    padding: 3px 15px 3px 15px;
    border-radius: 6px 6px 6px 6px;
    border: solid 1px #999999;
    background-color: #fff;
}

.says61 p {
    margin: 7px 0px 7px 5px; 
	padding: 3px 3px 3px 3px;
    font-size: 1.05em;
    line-height: 1.8em;
}

.says61:before {
	content: "";
	position: absolute;
	top: 30px;
	right: -23px;
 	margin-top: -8px;
	border: 12px solid transparent;
	border-left: 12px solid #fff;
 	z-index: 2;
}

.says61:after {
    content: "";
    position: absolute;
    top: 33px;
    right: -24px;
    margin-top: -11px;
    border: 12px solid transparent;
    border-left: 12px solid #999999;
    z-index: 1;
}

/*
==================================================
吹き出し　灰色枠　左
==================================================
*/

.balloon62 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon62 .faceicon62 {
    float: left;
    margin-right: -90px;
    width: 80px;
}

.balloon62 .chatting62 {
    width: 100%;
}

.says62 {
    position: relative; 
    margin: 0px 0px 0px 105px;
    padding: 10px 10px;
    border-radius: 6px 6px 6px 6px;
    border: solid 1px #999999;
}

.says62:before {
	content: "";
	position: absolute;
	top: 40px;
	left: -24px;
 	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #fff;
 	z-index: 2;
}

.says62:after {
	content: "";
	position: absolute;
	top: 40px;
	left: -28px;
 	margin-top: -14px;
	border: 14px solid transparent;
	border-right: 14px solid #999;
 	z-index: 1;
}

.says62 p {
    margin: 7px 0px 7px 5px; 
	padding: 3px 0px 3px 0px;
    font-size: 1.0em;
    line-height: 1.8em;	
}


/*
==================================================
ボックス８
==================================================
*/
.box8 {
    position: relative;
    margin: 25px 0px 25px 0px;
    padding: 25px 10px 7px;
    border: solid 2px #FFA500;
}
.box8 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 9px 9px 9px 9px;
    height: 40px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 19px;
    background: #FFA500;
    color: #ffffff;
    font-weight: bold;
}
.box8 p {
    padding: 15px 20px;
    margin: 0;
}

/*
==================================================
ボックス15
==================================================
*/
.box15 {
    padding: 0.5em 0.5em 0.5em 0.7em;
    margin: 1em 0;
    color: #2c2c2f;
    background: #F5F5F5;/*背景色*/
    border-left: solid 7px #FFD700;/*左線*/
    border-right: solid 7px #FFD700;/*右線*/	
}
.box15 p {
    margin: 20px 0px 20px 0px;
    padding: 0px 5px 0px;
}

/*
==================================================
ボックス２２　女性の手順で使う
==================================================
*/
.box22 {
    position: relative;
    padding: 0.5em 0.7em;
    margin: 1em 0;
    background: #FFF5EE;
    color: #5c98d4;
    font-weight: bold;
  font-size: 19px;	
  color: #555;
}

.box22:after{
    position: absolute;
    content: '';
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #FFF5EE;
    width: 0;
    height: 0;
}

.box22 p {
	margin: 0;
	padding: 0;
    font-weight: bold;
    text-align: center;	
}

/*
==================================================
ボックス２３　女性の手順で使う最後
==================================================
*/
.box23 {
  position: relative;
  display: inline-block;
  margin: 0em 0 1.5em 0;
  padding: 7px 10px;
  min-width: 100%;
  max-width: 100%;
  color: #555;
  font-size: 19px;
  box-sizing: border-box;
  border-radius: 5px;
  background: #FFF5EE;	
}

.box23 p {
	margin: 0;
	padding: 0;
    font-weight: bold;	
    text-align: center;	
}

/*
==================================================
ボックス２４　モデルコースで使う
==================================================
*/
.box24 {
  position: relative;
  padding: 1.0rem 2rem;
  border-bottom: 3px solid #d8d8d8;
  background: #fff;
  margin:50px 0;
  text-align:center;
  font-size:20px;
  font-weight:bold;
}

.box24:before {
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}

.box24:after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}


/*
==================================================
おすすめの記事タグ
==================================================
*/
.r {
    overflow: hidden;
	padding: 10px 10px 10px 10px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f5f5f5;
    border-top: solid 5px #FFA07A;
    border-bottom: solid 5px #FFA07A;
}
.r_image {
    float: left;
    margin: 0px 10px 0px 0px;
}

.r_text {
    font-size: 14px;
    overflow: hidden;
    margin: 0; 
    padding: 0;
	line-height: 1.7em;
}

.r_head {
    font-size: 16px;
    font-weight: bold;
	border-bottom:none;
	margin: 0px 0px 0px 0px;
    line-height: 1.5em;
	margin: -10px 0px -10px 0px;
}

@media screen and (max-width: 760px) {
.r {
    overflow: hidden;
	padding: 0px 10px 10px 10px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f5f5f5;
    border-top: solid 4px #FFA07A;
    border-bottom: solid 4px #FFA07A;
}
.r_image {
    margin: 40px 10px 0px 0px;
	float: left;
	width:	130px;
}
.r_text {
    font-size: 12px;
	line-height: 1.5em;
}
.r_head {
    font-size: 14px;
    font-weight: bold;
	line-height: 1.5em;
	margin: -10px 0px -10px 0px;
}
}

.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;
}


/*
==================================================
ボックス26
==================================================
*/
.box26 {
    padding: 15px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #f5f5f5;
}
.box26 p {
	font-size:14px;
    margin: 0; 
    padding: 0;
}

.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.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ボタンを表示させない▲▲▲ */


/*
==================================================
リンクボタン　黄色
==================================================
*/
.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;
}


/* ▼▼▼次の記事・前の記事▼▼▼ */
.box4 {
	width:100%;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
	padding: 10px 5px;
	margin: 50px 0px 40px 0px;
}


.next {
    background: #FFF;
    padding: 0px;
    overflow: hidden;
}
.next_image {
    float: left;
    margin: 0px 10px 0px 0px;
}
.next_summary {
    overflow: hidden;
}
.next_heading {
    font-size: 16px;
    font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
	text-align:left;
}

p.next_text {
	padding: 0px 0px 0px 0px;
	margin: 25px 0px 0px 0px;
	text-align:left;
	line-height:1.3em;
}
@media only screen and (max-width : 760px){
p.next_text {
	padding: 0px 0px 0px 0px;
	margin: 15px 0px 0px 0px;
	text-align:left;
}	
}



.prev {
    background: #FFF;
    padding: 0px;
    overflow: hidden;
}
.prev_image {
    float: right;
    margin: 0px 0px 0px 10px;
}
.prev_summary {
    overflow: hidden;
}
.prev_heading {
    font-size: 16px;
    font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
	text-align:right;
}

p.prev_text {
	padding: 0px 0px 0px 0px;
	margin: 25px 0px 0px 0px;
	text-align:right;
	line-height:1.2em;
}
@media only screen and (max-width : 760px){
p.prev_text {
	padding: 0px 0px 0px 0px;
	margin: 15px 0px 0px 0px;
	text-align:right;
}	
}

.prev_thumbnail {
	width:100px;
	padding: 0px 0px 0px 0px;
	margin: 0px 20px;
	float: left;
}
@media only screen and (max-width : 760px){
.prev_thumbnail {
	width:70px;
	padding: 0px 0px 0px 0px;
	margin: 5px;
	float: left;
}	
}

.next_thumbnail {
	width:100px;
	padding: 0px 0px 0px 0px;
	margin: 0px 20px;
	float: right;	
}
@media only screen and (max-width : 760px){
.next_thumbnail {
	width:70px;
	padding: 0px 0px 0px 0px;
	margin: 5px;
	float: right;
}	
}
/* ▲▲▲次の記事・前の記事▲▲▲ */


/*
==================================================
ボックス10
==================================================
*/
.box10 {
    margin: 2em 0;
    background: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box10 .box-title {
    font-size: 1.3em;
    background: #FF0000;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box10 p {
	font-size: 1.0em;
    padding: 20px 20px 20px 20px;
    margin: 0;
	font-weight: normal;
}

/*
==================================================
引用タグ　カスタマイズ
==================================================
*/
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を非表示にする*/
}


/*
==================================================
会員表
==================================================
*/
 
.table-responsive .wrap_scroll_table {
  width: 400px;
  overflow-x: scroll;
  margin: 0 auto;
}

.table-responsive .scroll_table {
  margin-top: 10px;
  max-width: 400px;
  margin: 0 auto;
}

.table-responsive .scroll_table,
.table-responsive .scroll_table td,
.table-responsive .scroll_table th {
  border: 1px solid #cbced2;
  border-collapse: collapse;
  text-align: center;
}

.table-responsive .scroll_table th {
  background: #01214d;
  color: #fff;
  padding: 4px 12px;
}

.table-responsive .scroll_table td {
  background: #f5f6f8;
  padding: 4px 12px;
}

.table-responsive .txt {
  width: 400px;
  margin: 0 auto;
  font-size: 14px;
  font-size: 1.4rem;
  margin-top: 2px;
}


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

.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: 320px;
  height: auto;
  margin-right: 10px;
}
@media screen and (max-width: 760px) {
.logo-image {
  width: 260px;
  height: auto;
  margin-right: 10px;
}
}
@media screen and (max-width: 480px) {
.logo-image {
  width: 240px;
  height: auto;
  margin-right: 10px;
}
}

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

.support-btn a {
  background-color: #009961;
  color: white !important;
  padding: 12px 20px !important;
  border-radius: 30px;
  transition: background-color 0.3s;
}

.support-btn a:hover {
  background-color: #007a4d;
}

@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;
}

/*
==================================================
記事下の関連記事ボックス
==================================================
*/
.box_link {
    margin: 2em 0;
    background: #fff;
	border-radius:10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box_link a {
    color: #494949;
    text-decoration: underline;
}

.box_link a:hover {
    color: #494949;
    text-decoration: none;
}

.box_link .box-title {
    font-size: 1.2em;
    background: #f89174;
    padding: 4px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.05em;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.box_link p {
    padding: 7px 40px;
    margin: 0;
}
@media screen and (max-width: 480px) {
	.box_link p {
    padding: 7px 20px;
    margin: 0;
}
}


/*
==================================================
記事下の関連記事 自動取得
==================================================
*/
.relevance_post{
    width: auto;
    margin-bottom: 40px;
}
.relevance_post h3{
    font-size: 20px;
    font-weight: 600;
    border-left: 9px solid #51342B;
    text-align: justify;
    margin-bottom: 40px;
    padding: 0 15px;
    box-sizing: border-box;
}
.relevance_post_container{
    width: auto;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.relevance_post_container li{
    width: 24%;
    margin-right: 1.3%;
}
.relevance_post_container li:nth-child(4){
    margin-right: 0;
}
.relevance_post_container li:nth-child(8){
    margin-right: 0;
}
.relevance_post_container li:nth-child(n+1):nth-child(-n+4){
    margin-bottom: 10px;
}
.relevance_post_container a{
    display: flex;
    flex-direction: column;
    color: #1f1411;
}
.relevance_thumb{
    width: 100%;
}
.relevance_title{
    font-size: 12px;
    font-weight: 700;
}
@media (max-width: 550px){
    .relevance_post h3{
        font-size: 18px;
    }
    .relevance_post_container{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .relevance_post_container li{
        width: auto;
        margin-right: 0;
        margin-bottom: 10px;
        border: 1px solid #E8E8E8;
    }
    .relevance_post_container li:nth-child(n+1):nth-child(-n+4){
        margin-bottom: 10;
    }
    .relevance_post_container a{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .relevance_thumb{
        width: 43%;
    }
    .relevance_thumb img{
        vertical-align: bottom;
    }
    .relevance_title{
        width: 55%;
        font-size: 12px;
    }
}


/*
==================================================
ボックス２
==================================================
*/
.box52 {
position: relative;
margin: 25px 0px 25px 0px;
padding: 25px 10px 15px;
border: solid 2px #1E90FF;
}
.box52 .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 9px 9px 9px 9px;
height: 40px;
line-height: 25px;
vertical-align: middle;
font-size: 19px;
background-color: #1E90FF;
color: #ffffff;
font-weight: bold;
}
.box52 p {
margin: 30px 0px 0px 10px;
padding: 0;
}


.text-k-01 {
margin:0px 22px 0px 0px;
padding:0px 0px 0px 0px;
line-height: 1.5em;
}

.text-kk-02 {
font-size: 17px;
margin:0px 8px 8px 0px;
padding:0 0px 0 0;
line-height: 0.15em;
}

@media screen and (max-width: 480px) {
.text-kk-51 {
font-size: 16px;
margin:8px 8px 0px 8px;
padding:8px 8px 0px 8px;
}
}

ul.l-k>li {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
}

ul.l-k>li>a {
display: block;
background: url(https://money-iroha.com/wp-content/uploads/next-001-1.png) no-repeat right center;
background-size: 15px 23px;
padding: 12px 20px 12px 10px;
margin:0px 8px 0px 8px;
font-size: 16px;
text-decoration: none
}

.r-case_01 {
margin:45px 0 ;
}

.r-case_01 p {
margin:0px 0 ;
padding:0;
}

/* ------ 全ての大きさ------ */
div.r-case_01 ul.l-k>li a {
padding: 0 0 0 0;
}

/* ------ 文章を整列------ */
div.r-case_01 ul dd {
display: table-cell;
padding: 10px 0 10px 0px;
color: #000;
vertical-align: middle
}

/* ------ gazouno * ookisa * ------ */
div.r-case_01 ul dd:first-of-type img {
max-width: 150px;
max-height: 150px;
}
@media screen and (max-width: 480px) {
div.r-case_01 ul dd:first-of-type img {
max-width: 400px;
max-height: 400px;
}
}

.relevance {
display: inline-block;
width: 100%;
height:70px;
padding: 30px 10px 0px 5px;
margin:-20px 5px 5px 15px;
}

.relevance01 {
position: relative;
}
.relevance01::after {
content: "関連記事";
text-align: center;
vertical-align: middle;
width: 65px;
height:22px;
font-size: 13px;
font-weight: bold;
color: #ffffff;
background-color: #ff744d;
position: absolute;
padding:2px;
top: 0;
left: 8px;
}


@media screen and (max-width:480px) {
.text-k-01 {
margin: 0 10px 0 0;
padding: 0;
}
}

@media screen and (max-width:780px) {
  .text-k-01 {
    margin: 0 10px;
    padding: 0;
  }

  .text-kk-02 {
    font-size: 17px;
  }
}

@media screen and (max-width:480px) {
  .text-kk-02 {
    font-size: 16px;
  }
}

.text-k-01 {
  margin: 0 22px 0 0;
  padding: 0;
  line-height: 1.5em;
}

.text-kk-01,
.text-kk-02 {
  font-size: 15px;
  margin: 0 8px 8px 0;
  line-height: .15em;
}

.text-kk-03,
.text-kk-04,
.text-kk-05 {
  font-size: 14px;
  margin: 0 8px 8px 0;
  line-height: 1.05em;
}

.text-kk-06,
.text-kk-07,
.text-kk-08,
.text-kk-09 {
  font-size: 14px;
  margin: 0 8px 8px 0;
  line-height: .15em;
}

.text-kk-51 {
  font-size: 22px;
  margin: 8px;
  padding: 8px;
}

@media screen and (max-width:480px) {
.text-kk-51 {
font-size: 16px;
margin: 8px 0;
padding: 8px 0;
}
ul.l-k > li > a {
margin: 0;
}
}

.text-kk-51 {
font-size: 22px;
margin: 8px;
padding: 8px;
}

ul.l-k > li {

}

ul.l-k > li > a {
display: block;
background: url(https://money-iroha.com/wp-content/uploads/next-001-1.png) no-repeat right center;
background-size: 15px 23px;
padding: 12px 20px 12px 10px;
font-size: 16px;
text-decoration: none;
}

.r-case_01 {
margin: 45px 0;
}

.r-case_01 p {
margin: 0;
padding: 0;
}

.r-case_01 ul.l-k > li.more a,
.r-case_01 ul.l-k > li.more2 a {
padding: 15px 0 15px 10px;
font-size: 18px;
color: #333;
}

@media screen and (max-width:480px) {
.r-case_01 ul.l-k > li.more a,
.r-case_01 ul.l-k > li.more2 a {
padding: 23px 0 23px 10px;
font-size: 22px;
color: #333;
}
.r-case_01 ul.l-k > li.more2 a {
padding: 13px 0 13px 10px;
font-size: 20px;
}
}

.r-case_01 ul dd:first-of-type img {
max-width: 150px;
max-height: 150px;
}

@media screen and (max-width:480px) {
.r-case_01 ul dd:first-of-type img {
max-width: 400px;
max-height: 400px;
}
}

.tabContents_01 {
display: none;
}

.showContents_01,
ul.l-s > li > a {
display: block;
}

.relevance {
display: inline-block;
width: 100%;
height: 70px;
padding: 30px 10px 0 5px;
margin: -20px 5px 5px 15px;
}



@media screen and (max-width:800px) {
  .relevance {
    display: inline-block;
    width: 100%;
    height: 100px;
    padding: 30px 20px 0 5px;
    margin: -20px 5px 5px;
  }
}

.relevance01::after {
  content: "関連記事";
  position: absolute;
  top: 0;
  left: 8px;
  width: 65px;
  height: 22px;
  padding: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background-color: #ff744d;
  text-align: center;
}

.text-s-01 {
  margin: 0 22px 0 10px;
  line-height: 1.15em;
}

p.text-k-01 {
  margin: 7px 15px;
}

.text-ss-01 {
  font-size: 15px;
  margin: 0 8px 8px 0;
  line-height: .15em;
}

.text-ss-02 {
  font-size: 16px;
}

.text-ss-102 {
  font-size: 12px;
}

@media screen and (max-width:480px), (max-width:780px) {
  .text-s-01 {
    margin: 0 10px 0 0;
  }
}





@media screen and (max-width:780px) {
  .text-ss-02, .text-ss-102 {
    font-size: 15px;
  }
}

@media screen and (max-width:480px) {
  .text-ss-02, .text-ss-102 {
    font-size: 12px;
  }
}

.text-ss-03, .text-ss-04, .text-ss-05 {
  font-size: 14px;
  margin: 0 8px 8px 0;
  line-height: 1.05em
}

.text-ss-06, .text-ss-07, .text-ss-08, .text-ss-09 {
  font-size: 14px;
  margin: 0 8px 8px 0;
}

.text-ss-51 {
  font-size: 22px;
  margin: 8px;
  padding: 8px;
}






@media screen and (max-width:480px) {
.text-ss-51 {
font-size: 16px;
margin: 8px 0 0;
padding: 8px 0 0
}

div.r-case_02 ul.l-s>li.more a {
padding: 23px 10px;
font-size: 22px;
color: #333
}
}

ul.l-s>li {
border-bottom: 1px solid #bbb;
}

ul.l-s>li>a {
background: url(https://money-iroha.com/wp-content/uploads/next-001-1.png)no-repeat right center;
background-size: 15px 23px;
padding: 12px 10px;
margin-right: 5px;
font-size: 16px;
text-decoration: none;
}

.r-case_02, .r-case_102 {
margin: 20px 0;
}

.r-case_02 p, .box4_01 p, .r-case_102 p {
margin: 0;
padding: 0;
}

div.r-case_02 ul.l-s>li.more a {
padding: 15px 10px;
font-size: 18px;
color: #333;
}

div.r-case_02 ul.l-s>li.more2 a {
padding: 21px 10px;
font-size: 24px;
color: #333;
}




@media screen and (max-width:480px) {
div.r-case_02 ul.l-s>li.more2 a {
padding: 13px 0 13px 10px;
font-size: 20px;
color: #333
}
div.r-case_02 ul dd:first-of-type img {
max-width: 300px;
max-height: 300px;
}
div.r-case_102 ul.l-s>li.more a {
padding: 23px 0 23px 10px;
font-size: 22px;
color: #333;
}
}

div.r-case_02 ul.l-s>li.more a, div.r-case_102 ul.l-s>li.more a {
padding: 15px 0 15px 10px;
font-size: 18px;
color: #333;
}

ul.l-s>li {
border-bottom: 1px solid #bbb;
}

ul.l-s>li>a {
background: url(https://money-iroha.com/wp-content/uploads/next-001-1.png)no-repeat right center;
background-size: 15px 23px;
padding: 12px 20px 12px 10px;
margin: 0 5px 0 0;
font-size: 16px;
text-decoration: none;
}

div.r-case_02 ul dt, div.r-case_102 ul dd {
display: table-cell;
padding: 10px 13px 10px 3px;
color: #000;
vertical-align: middle;
}

div.r-case_02 ul dt {
width: 1px;
text-align: left;
}

div.r-case_02 ul dd:first-of-type img, div.r-case_102 ul dd:first-of-type img {
max-width: 300px;
width: 75px;
}

.r-case_02 p, .r-case_102 p {
margin: 0;
padding: 0;
}

.box4_01 p, .r-case_102 p {
margin: 0;
padding: 0;
line-height:120%;
}

.r-case_02, .r-case_102 {
margin: 20px 0;
}

.text-ss-51 {
font-size: 16px;
margin: 8px 8px 0;
padding: 8px 8px 0;
}





.r-case_102 ul {
margin: -10px 0 0 0;
padding: 0 0 0 0;
}


@media (max-width:480px) {
  div.r-case_102 ul.l-s>li.more2 a {
    padding: 13px 0 13px 10px;
    font-size: 20px;
    color: #333;
  }
}

div.r-case_102 ul dt {
  display: table-cell;
  width: 35px;
  color: #000;
  text-align: left;
}

div.r-case_102 ul dd:first-of-type img {
  max-width: 300px;
  width: 90px;
}



@media only screen and (max-width:520px) {
.box5_03 {
color: #000;
background-color: #fff;
border: 2px solid #b5b5b6;
border-radius: 10px;
padding: 10px 3px 10px 5px;
margin: 15px 5px 10px;
}
.box5_03 p {
padding: 5px 3px 5px 5px;
margin: 5px;
}
}

.blinking {
animation: blink .8s ease-in-out infinite alternate;
}


/*
==================================================
関連記事の三角アイコン
==================================================
*/
.link_01 p, .link_02 p {
  margin: 0;
  padding: 0;
}

.link_01:before, .link_02:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.link_01:before {
  content: "\f35d";
  padding-right: 0;
  padding-top: 0;
  margin: 0;
  color: #f89174;
}

.link_02:before {
  content: "\f0da";
  padding-right: 5px;
  padding-top: 5px;
  margin: 2px 0;
  font-size: 1.5em;
  color: #f89174;
  vertical-align: top;
}

.link_03, .link_04 p {
  margin: 0;
  padding: 0;
}

.link_03:before, .link_04:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.link_03:before {
  content: "\f35d";
  padding: 0 5px 0 0;
  color: #009045;
}

.link_04:before {
  content: "\f0da";
  padding-right: 5px;
  padding-top: 5px;
  margin: 2px 0 2px 0;
  font-size: 1.5em;
  color: #036EB7;
  vertical-align: top;
}


/*
==================================================
Check!ボックス
==================================================
*/
.box_poit,
.readmore {
  position: relative;
  margin: 3.5em 0 2.5em;
  padding: .5em 1em;
  border: solid 2px #007BBD;
  max-width: 900px;
  margin: 60px auto;
}

.box_poit .box-title {
  position: absolute;
  display: inline-block;
  top: -25px;
  left: 10px;
  padding: 0 9px;
  background: #fff;
  color: #007BBD;
  font-size: 19px;
  font-weight: 700;
}

.box_poit .box-title:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(https://here-kochi.com/wp-content/uploads/check-1.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin: 0 0 10px;
}

.box_poit p {
  margin: 15px 10px 10px;
  padding: 0;
}


/*
==================================================
アイコン【チェック青】
==================================================
*/
.check_01 p, .check_02 p {
margin: 0;
padding: 0;
}

.check_01:before, .check_02:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
font-weight: 900;
padding-right: 5px;
padding-top: 5px;
margin: 2px 0;
font-size: 1em;
vertical-align: top;
}

.check_01:before {
color: #036EB7;
}

.check_02:before {
color: #f89174;
}


/*
==================================================
ハチの像を建てる会　ホームページトップデザイン
==================================================
*/
/* 背景ブロブ */
.blob-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M107.5,81.5c48.1-27.3,115.8-44.8,169.9-31.1c54.1,13.8,94.5,59,144.8,92.3c50.3,33.3,110.5,54.8,152,93.9c41.5,39.1,64.4,95.9,56.5,147.3c-7.8,51.4-46.5,97.3-96.9,125.6c-50.4,28.2-112.5,38.9-168.1,28c-55.5-10.9-104.5-43.4-153.7-76.2c-49.2-32.8-98.6-65.8-121.9-111.2c-23.3-45.4-20.6-103-4.1-147.2C102.4,159.8,59.4,108.9,107.5,81.5z' fill='%23FFD84D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center;
    pointer-events: none;
    animation: rotate-blob 60s linear infinite;
}

/* コンテナ */
.top-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

/* 上部セクション */
.top-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.main-image {
    width: 70%;
    max-width: 700px;
}

.main-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease; /* transform を除去して box-shadow のみに */
}

.main-image img:hover {
    /* transform: scale(1.02); を削除 */
    /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); */
}

/* メッセージバブル */
.message-bubble {
    position: absolute;
    top: 160px;
    right: 0;
    width: 500px;
    height: 500px;
    position: relative;
}

.message-background {
    top: -20px;
    left: -20px;
    width: 540px;
    height: 540px;
    z-index: -1;
    display: block;
}

.message-text {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;	
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    font-size: 3em;
    font-weight: 800;
    line-height: 1.4;
    writing-mode: vertical-rl;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 肉球アイコン */
.paw-print {
    position: absolute;
    width: 30px;
    height: auto;
}

.paw-1 {
    top: 90px;
    right: 90px;
}

.paw-2 {
    top: 43px;
    right: 70px;
}

.paw-3 {
    top: 5px;
    right: 110px;
}

.paw-4 {
    bottom: 0px;
    left: 120px;
}

.paw-5 {
    bottom: 60px;
    left: 80px;
}

/* 写真セクション */
.photos-section {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.right-photo {
    width: 33%;
    margin-left: auto;
    margin-bottom: 40px;
    margin-top: -100px;
}

.photos-section img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease; /* transform を除去 */
}

.photos-section img:hover {
    /* transform: scale(1.05); を削除 */
    /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); */
}

.spacer {
    width: 100%;
    height: 30px;
}

/* 情報セクション */
.info-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -80px;
    gap: 30px;
}

.left-photo {
    width: 40%;
}

.left-photo img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease; /* transform を除去 */
}

.left-photo img:hover {
    /* transform: scale(1.05); を削除 */
    /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); */
}

.project-info {
    width: 50%;
    position: relative;
    z-index: 1;
}

.info-line {
    background-color: #FFD84D;
    padding: 10px 15px;
    font-size: 34px;
	font-weight: 500;
    margin-bottom: 10px;
    border-radius: 0;
    display: inline-block;
    width: auto;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/*
.info-line:hover {
    background-color: #FFE280;
    transform: translateX(5px);
}
*/

.details-button {
    display: inline-block;
    background-color: #00A651;
    color: white;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    font-size: 18px;
    transition: all 0.3s ease;
}

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


/* アニメーションクラス */
.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.animate-fade-in-slow {
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out 0.5s forwards;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-paw {
    opacity: 0;
    animation: fadeInRotate 0.8s ease-in-out forwards;
}

.paw-1 {
    animation-delay: 0.3s;
}

.paw-2 {
    animation-delay: 0.6s;
}

.paw-3 {
    animation-delay: 0.9s;
}

.paw-4 {
    animation-delay: 1.2s;
}

.paw-5 {
    animation-delay: 1.5s;
}

.animate-slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    animation: slideInRight 1s ease-in-out forwards;
}

.animate-slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    animation: slideInLeft 1s ease-in-out forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* アニメーションキーフレーム */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes fadeInRotate {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-20deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate-blob {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* レスポンシブ対応 */
@media screen and (max-width: 1200px) {
    .message-bubble {
        width: 400px;
        height: 400px;
    }
    
    .message-background {
        width: 440px;
        height: 440px;
    }
    
    .message-text {
        font-size: 2.5em;
    }
    
    .info-line {
        font-size: 28px;
    }
}

@media screen and (max-width: 992px) {
    .top-section {
        flex-direction: column;
        align-items: center;
    }
    
    .main-image {
        width: 100%;
        max-width: 600px;
    }
    
    .message-bubble {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 400px;
        margin-top: 30px;
    }
    
    .message-background {
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
    
    .right-photo {
        width: 50%;
        margin-top: 0;
    }
    
    .info-section {
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .info-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .left-photo, .project-info {
        width: 100%;
    }
    
    .message-text {
        font-size: 2em;
    }
    
    .info-line {
        font-size: 24px;
        white-space: normal;
    }
    
    .right-photo {
        width: 70%;
    }
    
    .paw-print {
        width: 25px;
    }
}

@media screen and (max-width: 576px) {
    .message-text {
        font-size: 1.8em;
		top: 35%;
    }
    
    .info-line {
        font-size: 20px;
		font-weight: 600;
    }
    
    .details-button {
        padding: 10px 20px;
        font-size: 16px;
    }
    
    .right-photo {
        width: 100%;
    }
    
    .paw-print {
        width: 20px;
    }
}


/* アニメーション前の初期状態 */
.scroll-fade-in,
.scroll-fade-in-slow {
    opacity: 0;
}

.scroll-slide-in-right {
    opacity: 0;
    transform: translateX(50px);
}

.scroll-slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
}

.scroll-paw {
    opacity: 0;
}

/* 元々のアニメーションクラスは変更なし */
.animate-fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

.animate-fade-in-slow {
    animation: fadeIn 1.5s ease-in-out 0.5s forwards;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-paw {
    animation: fadeInRotate 0.8s ease-in-out forwards;
}

.animate-slide-in-right {
    animation: slideInRight 1s ease-in-out forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 1s ease-in-out forwards;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* 肉球のアニメーション遅延も残す */
.paw-1 {
    animation-delay: 0.3s;
}

.paw-2 {
    animation-delay: 0.6s;
}

.paw-3 {
    animation-delay: 0.9s;
}

.paw-4 {
    animation-delay: 1.2s;
}

.paw-5 {
    animation-delay: 1.5s;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

/* 追加するCSSコード */
.project-description {
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 90%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.project-description:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
    .project-description {
        font-size: 14px;
        padding: 12px;
        max-width: 100%;
    }
}


/*
==================================================
碑文セクション
==================================================
*/
/* 著者情報サイドバースタイル */
.author-sidebar {
  position: absolute;
  left: -90px; /* メインコンテンツの左側に配置 */
  top: -70px;
  width: 90px;
  text-align: center;
}

.author-photo-container {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #FFD84D;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin: 0 auto 10px;
}

.author-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-name {
  font-size: 14px;
  font-weight: 600;
  color: #42210B;
  line-height: 1.4;
}

/* 位置調整用 */
.hachi-comment-section {
  position: relative; /* サイドバーの基準位置 */
}

/* スマホ対応 - サイドバーをヘッダーに変換 */
@media screen and (max-width: 992px) {
  .author-sidebar {
    position: static;
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .author-photo-container {
    margin: 0 15px 0 0;
  }
  
  .author-name {
    font-size: 16px;
    text-align: left;
  }
}

@media screen and (max-width: 576px) {
  .author-sidebar {
    flex-direction: column;
  }
  
  .author-photo-container {
    margin: 0 0 10px 0;
  }
  
  .author-name {
    text-align: center;
  }
}

/* ハチプロジェクト専用スタイル */
.hachi-page-wrapper {
    background-image: url('https://hachi.here-kochi.com/wp-content/uploads/hachi-page-bg.png');
    background-repeat: repeat;
    padding: 0px 0 80px 0;
    color: #42210B;
    line-height: 1.6;
	margin: 0;
}

.hachi-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
	padding: 0px 20px 40px 20px;
}

/* メインコンテンツ */
.hachi-main-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 0px;
}

/* 碑文セクション */
.hibun-page-wrapper {
    background-image: url('https://hachi.here-kochi.com/wp-content/uploads/hachi-page-bg.png');
    background-repeat: repeat;
    padding: 0px 0 80px 0;
    color: #42210B;
    line-height: 1.6;
	margin: 0;
}

.hibun-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
	padding: 100px 20px 40px 20px;
}

@media screen and (max-width: 576px) {

.hachi-page-wrapper {
    padding: 10px 10px 80px 10px;
}
.hachi-content-wrapper {
    padding: 0px 0px;
  }
}
.hachi-inscription-box {
    flex: 1;
    /* background-color: #f0f0f0; */
    border-radius: 15px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    max-width: 45%;
}

.hachi-inscription-box h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
    color: #555;
}

.hachi-inscription-box p {
    font-size: 16px;
    line-height: 1.8;
}

/* 吉岡コメントセクション */
.hachi-comment-section {
    flex: 1;
    max-width: 45%;
}

/* 黄色い吹き出し画像を使ったスタイル */
.hachi-comment-bubble-container {
    position: relative;
    max-width: 100%;
    margin-bottom: 30px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;	
}

.yellow-blob-image {
    width: 200px;	
    max-width: 200px;
    height: auto;
    display: block;
}

.hachi-comment-bubble-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  z-index: 0;
}

.hachi-comment-main-title {
  position: relative;
  z-index: 1;
  padding: 20px;
  margin: 0 0 50px 0;
}

.hachi-comment-text {
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.8;
}


/* 横並びセクション全体 */
.hachi-author-section {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 40px auto;
  max-width: 1200px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* 題字と経歴情報（左側） */
.hachi-profile {
  flex: 1;
  min-width: 250px;
}

.hachi-author-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #42210B;
}

.hachi-author-info {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}

.hachi-author-indent {
  margin-left: 20px;
}

/* エピソード部分（右側） */
.hachi-story {
  flex: 2;
  min-width: 250px;
  padding: 20px;
  border-left: 3px solid #FFD84D;
	background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.hachi-story p {
  font-size: 17px;
  line-height: 1.8;
  margin: 0;
  color: #42210B;
	font-style: italic;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .hachi-author-section {
    flex-direction: column;
    gap: 20px;
  }
  
  .hachi-profile, 
  .hachi-story {
    width: 100%; /* 幅を100%に設定 */
  }
}

@media screen and (max-width: 576px) {
.hachi-content-wrapper {
    padding: 0px 0px;
  }

.hachi-page-wrapper {
    padding: 10px 10px 80px 10px;
}
	
  .hachi-author-section {
    padding: 15px 15px 50px 15px;
    margin: 30px auto;
  }
  
  .hachi-author-title {
    font-size: 22px;
	  text-align: center;
  }
  
  .hachi-author-info,
  .hachi-story p {
    font-size: 18px;
  }
  
  .hachi-story {
    padding: 0px;
	border-left: none;
  }
}

/* 写真セクション */
.hachi-photo-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3列グリッド */
    gap: 20px;
    margin-top: 0px;
}

.hachi-photo-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hachi-photo-placeholder {
    height: auto;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #777;
}

.hachi-photo-info {
    padding: 20px;
}

.hachi-photo-info h3 {
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}

.hachi-photo-info p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.hachi-read-more {
    text-align: center;
    display: block;
    background-color: #00A651;
    color: white;
    padding: 15px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    margin: 0 auto;
    width: fit-content;
}

.hachi-read-more:hover {
    background-color: #008543;
	color: #fff;
}

/* レスポンシブ対応 */
@media screen and (max-width: 992px) {
    .hachi-main-content {
        flex-direction: column;
    }
    
    .hachi-inscription-box, .hachi-comment-section {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .hachi-photo-container {
        grid-template-columns: 1fr; /* スマホでは1列表示 */
        gap: 30px;
    }
}

@media screen and (max-width: 576px) {
    .hachi-inscription-box {
        padding: 0px;
    }

    .hachi-main-content {
        gap: 0px;
    }
	
    .yellow-blob-image {
    width: 70px;	
    max-width: 70px;
    }
}

/* ハチと兵士の物語セクション */
.hachi-story-section {
    margin: 60px 0 0px 0;
    padding: 30px 0;
}

.hachi-story-title-container {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.hachi-story-title-bg {
    display: inline-block;
    background-color: #FFD84D;
    padding: 10px 40px;
    border-radius: 30px;
}

.hachi-story-main-title {
    font-size: 28px;
    font-weight: 600;
    color: #42210B;
    margin: 0;
}

.hachi-story-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    border-radius: 15px;
    padding: 30px;
}

.hachi-story-image {
    flex: 1;
    max-width: 45%;
}

.hachi-story-image-placeholder {
    background-color: #eee;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.hachi-story-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hachi-story-image-caption {
    text-align: center;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

.hachi-story-text {
    flex: 1;
    max-width: 55%;
}

.hachi-story-subtitle {
    font-size: 22px;
    color: #42210B;
    border-bottom: 2px solid #FFD84D;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 600;
}

.hachi-story-text p {
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}

/* レスポンシブ対応 */
@media screen and (max-width: 992px) {
    .hachi-story-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .hachi-story-image,
    .hachi-story-text {
        max-width: 100%;
    }
    
    .hachi-story-image-placeholder {
        height: 300px;
    }
}

@media screen and (max-width: 576px) {
    .hachi-story-section {
        margin: 40px 0 0px 0;
        padding: 20px 0 0px 0;
    }
    
    .hachi-story-title-bg {
        padding: 10px 20px;
    }
    
    .hachi-story-main-title {
        font-size: 22px;
    }
    
    .hachi-story-content {
        padding: 20px;
    }
    
    .hachi-story-subtitle {
        font-size: 22px;
    }
    
    .hachi-story-image-placeholder {
        height: 250px;
    }
    
    .hachi-story-text p {

    }
}


/*
==================================================
ハチの像を建てる会のセクション
==================================================
*/
/* ミッションセクションスタイル */
.hachi-mission-section {
    width: 100%;
    max-width: 1500px;
    margin: 0px auto;
    position: relative;
}

/* 画像コンテナ */
.mission-image-container {
    width: 100%;
    height: 400px;
    background-color: #e5e5e5;
    position: relative;
    margin-bottom: -150px; /* カードを画像に重ねる */
	margin-top: 160px;
}

.mission-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 24px;
}

/* ミッションカード */
.mission-card {
    background-color: white;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 60%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.mission-subtitle {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px 0;
    text-align: center;
}

.mission-title {
    font-size: 32px;
    margin: 0 0 40px 0;
    text-align: center;
    font-weight: 600;
}

.mission-content {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 30px;
}

@media screen and (max-width: 768px) {
    .mission-image-container {
        height: 300px;
        margin-bottom: -100px;
	margin-top: 60px;		
    }
    
    .mission-card {
        padding: 30px;
    }
    
    .mission-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    
    .mission-subtitle {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    .mission-image-container {
        height: 250px;
        margin-bottom: -80px;
    }
    
    .mission-card {
        padding: 25px;
		max-width: 95%;
    }
    
    .mission-title {
        font-size: 22px;
        margin-bottom: 25px;
    }
    
    .mission-subtitle {
        font-size: 14px;
    }
    
    .mission-content {
        font-size: 14px;
    }
}


/*
==================================================
平和を希求するハチの剥製のセクション
==================================================
*/
/* ハチ彫刻者セクションのスタイル */
.hachi-sculptor-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* タイトルコンテナ */
.sculptor-title-container {
    text-align: center;
    margin-top: 170px;
    margin-bottom: 60px;
    position: relative;
}

/* 黄色い背景 - 名前を変更 */
.hachi-title-yellow-bg {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
}

.hachi-title-yellow-bg::before {
    content: "";
    background-image: url('https://hachi.here-kochi.com/wp-content/uploads/yellow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* メインタイトル */
.sculptor-main-title {
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    padding: 30px 0;
    position: relative;
    z-index: 1;
}

/* サブタイトル */
.sculptor-subtitle {
    font-size: 24px;
    font-weight: 500;
    margin: 20px 0 40px;
}

/* コンテンツ行レイアウト */
.sculptor-content-row {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

/* 写真エリア */
.sculptor-photo {
    width: 100%;
}

/* テキストエリア */
.sculptor-text {
    width: 60%;
    font-size: 16px;
    line-height: 1.8;
}

.sculptor-text p {
    margin-bottom: 20px;
}

/* 写真コンテナ */
.photo-container {
    border-radius: 20px;
    padding: 20px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 写真 */
.sculptor-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
    border-radius: 10px;
}

/* 写真キャプション */
.image-caption {
    font-size: 16px;
    line-height: 1.5;
}

/* 肉球アイコン */
.paw-print {
    position: absolute;
    width: 25px;
    height: auto;
}

/* レスポンシブデザイン */
@media screen and (max-width: 992px) {
    .sculptor-photo,
    .sculptor-text {
        width: 50%;
    }
}

/* スマホ表示での調整 */
@media screen and (max-width: 768px) {
    /* セクションの余白調整 */
    .hachi-sculptor-section {
        margin: 40px auto 30px;
        padding: 0 15px;
    }
    
    /* タイトル関連の余白調整 */
    .sculptor-title-container {
        margin-bottom: 50px;
    }
	
    .hachi-title-yellow-bg::before {
		height: 130px;
    }
    
    .sculptor-subtitle {
        margin: 10px 0 20px;
        font-size: 20px;
    }
    
    /* コンテンツ行のレイアウト */
    .sculptor-content-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }
    
    /* 写真とテキストの幅調整 */
    .sculptor-photo,
    .sculptor-text {
        width: 100%;
    }
    
    /* 写真エリアを必ず上に配置 */
    .sculptor-photo {
        order: -1;
        margin-bottom: 0;
    }
    
    /* 写真コンテナの調整 */
    .photo-container {
        padding: 15px;
		flex-direction: row;
    }
    
    /* テキストエリアの余白 */
    .sculptor-text {
        padding: 0;
    }
    
    /* テキスト段落の余白 */
    .sculptor-text p {
        margin-bottom: 15px;
    }
    
    /* 写真の最大幅を制限 */
    .sculptor-image {
        max-width: 100%;
    }
    
    /* 肉球アイコン位置の調整 */
    .paw-print {
        width: 18px;
    }
}

@media screen and (max-width: 576px) {
    /* より小さい画面での調整 */
    .hachi-sculptor-section {
        margin: 130px auto 20px;
        padding: 0 10px;
    }
    
    .hachi-title-yellow-bg::before {
        width: 320px;
        height: 170px;
    }
    
    .sculptor-main-title {
        font-size: 24px;
        padding: 30px 0 20px 0;
    }
    
    .sculptor-subtitle {
        font-size: 18px;
        margin: 10px 0 15px;
    }
    
    .sculptor-content-row {
        gap: 15px;
        margin-bottom: 25px;
    }
    
    .photo-container {
        padding: 12px;
        border-radius: 15px;
    }
    
    .sculptor-image {
        margin-bottom: 10px;
    }
    
    .image-caption {
        font-size: 14px;
    }
}


/*
==================================================
ハチの像建設プロジェクトのセクション
==================================================
*/       
        /* 名前被りを避けるためのプレフィックスを追加 */
        .memorial-project-wrap {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
            position: relative;
        }
        
        /* ヘッダー部分 */
        .memorial-header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
			padding: 40px 0 10px;
        }
        
.memorial-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background-image: url('https://hachi.here-kochi.com/wp-content/uploads/yellow.png');
    background-repeat: no-repeat;
    background-position: center;
	background-size: 230px auto;
    z-index: 0;
}

.memorial-green-title, .memorial-main-title, .memorial-subtitle {
    position: relative;
    z-index: 1;
}
        
        .memorial-green-title {
            color: #006400;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 0px;
            padding-top: 0px;
            position: relative;
            z-index: 1;    /* 追加: 画像より前面に */
        }
        
        .memorial-main-title {
            font-size: 28px;
            font-weight: 600;
            margin: 0 auto;
            padding: 80px 0 30px 0;
            max-width: 600px;
            position: relative;
            z-index: 1;
        }
        
        .memorial-subtitle {
            font-size: 24px;
            font-weight: 500;
            margin: 30px 0 0;
			z-index: 3;  /* 追加: 画像より前面に */
        }
        
        /* 第1セクション - 写真と解説 */
        .memorial-first-section {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 80px;
            align-items: center;
            gap: 40px;
        }
        
        .memorial-main-photo {
            flex: 1;
            min-width: 300px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px;
            font-size: 24px;
            color: #777;
        }

        .memorial-main-photo img {
            border-radius: 20px;
        }
        
        .memorial-main-text {
            flex: 1;
            min-width: 300px;
            font-size: 18px;
            line-height: 1.8;
        }

        .memorial-main-text p {
            font-size: 20px;
        }
        
        /* 第2セクション - テキストと2つの写真 */
        .memorial-second-section {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            margin: 100px 0;
        }
        
        .memorial-description {
            flex: 2;
            min-width: 400px;
            padding: 20px 40px;
            font-size: 16px;
            line-height: 1.7;
        }
        
/* 左の写真を上に配置 */
.memorial-left-photo {
    position: relative;
	width: 450px;
    margin-right: 0px;
	margin-top: 40px; /* 上に40px移動 */
}
        
        .memorial-left-image {
            width: 100%;
            height: 100%;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #777;
        }

        .memorial-left-image img {
            border-radius: 20px;
        }
        
/* 右の写真を下に配置 */
.memorial-right-photo {
    position: relative;
    width: 250px;
    height: 320px;
    margin-left: auto;
	margin-top: -40px; /* 下に40px移動 */
}
        
        .memorial-right-image {
            width: 100%;
            height: 100%;
            background-color: #eee;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #777;
        }

        .memorial-right-image img {
            border-radius: 20px;
        }
        
        /* 肉球アイコン */
        .memorial-paw {
            position: absolute;
            width: 20px;
            height: 20px;
        }
        
        .memorial-paw-1 {
            top: -15px;
            left: 20px;
        }
        
        .memorial-paw-2 {
            top: 5px;
            left: 45px;
        }
        
        .memorial-paw-3 {
            top: 35px;
            left: 20px;
        }
        
        .memorial-paw-4 {
            top: -20px;
            right: 10px;
        }
        
        .memorial-paw-5 {
            top: 10px;
            right: 30px;
        }
        
        .memorial-paw-6 {
            top: 40px;
            right: 0px;
        }
        
        /* レスポンシブデザイン */
        @media screen and (max-width: 992px) {
            .memorial-first-section,
            .memorial-second-section {
                gap: 30px;
            }
            
            .memorial-description {
                padding: 20px;
                min-width: 300px;
            }
            
            .memorial-left-photo,
            .memorial-right-photo {
                width: 220px;
                height: 280px;
            }
        }
        
@media screen and (max-width: 768px) {
    /* 基本的なスタイルは維持 */
    .memorial-main-title {
        font-size: 24px;
        padding: 50px 0 20px 0;
    }
    
    .memorial-subtitle {
        font-size: 20px;
        margin: 15px 0 30px;
    }
    
    /* 強制的に隙間をなくす */
    .memorial-first-section {
        flex-direction: column;

    }
    
    .memorial-main-photo {
        width: 100%;
        padding: 20px 20px 0px 20px;
    }
    
    .memorial-main-text {
        margin-bottom: 0 !important;
    }
    
    .memorial-main-text p {
        margin-bottom: 15px !important;
    }
    
    /* 第2セクションを固定高さにせず、連続して配置 */
    .memorial-second-section {
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important; /* flexをブロックに変更 */
    }
    
    .memorial-description {
        order: 2;
        width: 100%;
        padding: 10px 0;
        margin: 0 !important;
    }
    
    .memorial-left-photo {
        order: 1;
        width: 80%;
        margin: 20px auto !important;
        padding: 0 !important;
        min-height: 150px;
    }
    
    .memorial-left-image {
        height: 400px;
        min-height: 150px;
    }
    
    .memorial-right-photo {
        order: 3;
        width: 80%;
        margin: 65px auto 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 150px;
    }
    
    .memorial-right-image {
        height: auto !important;
        min-height: 150px;
    }
    
    /* 肉球の位置調整 */
    .memorial-paw {
        width: 18px;
        height: 18px;
    }
    
    /* 絶対配置で隙間をなくす方法 */
    .memorial-project-wrap {
        position: relative;
        overflow: hidden;
    }
    

    
    /* 隙間を埋めるためのセレクタ - 特に強力な指定 */
    .memorial-project-wrap *:not(img) {
        margin-bottom: 0 !important;
    }
    
    .memorial-project-wrap > * + * {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 576px) {
    .memorial-project-wrap {
        margin: 0px auto;
        padding: 0 15px;
    }
    
    .memorial-yellow-blob {
        width: 250px;
    }
    
    .memorial-green-title {
        font-size: 18px;
		padding-top: 0px;
    }
    
    .memorial-main-title {
        font-size: 22px;
    }
    
    .memorial-subtitle {
        font-size: 18px;
    }
    
    .memorial-main-text {
        font-size: 16px;
    }
    
    .memorial-description {
        font-size: 15px;
    }
    
    .memorial-left-photo,
    .memorial-right-photo {
        width: 100%;
        height: 250px;
        min-height: 150px;
    }
    
    /* 写真間の距離を詰める */
    .memorial-second-section > * {
        margin-bottom: 10px !important;
    }

}


/*
==================================================
建立予定地のセクション
==================================================
*/    
        .map-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 30px;
        }
        
        .map-area {
            flex: 3;
            min-width: 600px;
        }
        
        .info-area {
            flex: 1;
            min-width: 300px;
        }
        
        .map-image {
            width: 100%;
            height: auto;
            border: 1px solid #eee;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .location-title {
            font-size: 28px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .location-address {
            font-size: 18px;
            margin-bottom: 15px;
            line-height: 1.4;
        }
        
        .completion-date {
            font-size: 16px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .map-container {
                flex-direction: column-reverse;
				gap: 0px;
            }
            
            .map-area, .info-area {
                flex: 1;
                min-width: 100%;
            }
            
            .map-area {
                margin-top: 20px;
            }
            
            .location-title {
                font-size: 24px;
				text-align: center;
            }
            
            .location-address {
                font-size: 16px;
            }
        }


/*
==================================================
クラウドファンディングのセクション
==================================================
*/  
        /* 背景部分 */
        .funding-bg-top {
            background-color: #FFE066;
            width: 100%;
            height: 250px; /* 上部の高さ */
            /* position: absolute削除 */
        }
        
        .funding-wrapper {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            margin-top: -150px; /* 背景とカードを重ねる */
        }
        
        .funding-card {
            background-color: #fff;
            border-radius: 30px;
            width: 100%;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 40px;
            margin-bottom: 40px;
        }
        
        .headline {
            text-align: center;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .megaphone-icon {
            font-size: 40px;
            margin-right: 15px;
            color: #FFD700;
        }
        
        .headline-text {
            font-size: 20px;
            font-weight: normal;
            line-height: 1.8;
        }

        .headline-text p {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.8;
        }
        
        .progress-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .status, .goal {
            flex: 1;
        }
        
        .status-label, .goal-label {
            font-size: 18px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .amount {
            font-size: 32px;
            font-weight: bold;
            color: #3949AB;
        }
        
        .goal .amount {
            color: #777;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background-color: #ccc;
            border-radius: 10px;
            margin: 30px 0;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            width: 20%; /* 達成率に合わせて変更 */
            background-color: #00A651;
            border-radius: 10px;
        }
        
        .stats-section {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 16px;
            color: #666;
        }
        
        .usage-section {
            background-color: #FFFCEE;
			border: solid 2px #FFDD64;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 40px;
        }
        
        .usage-title {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
            font-weight: bold;
        }
        
        .usage-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.check-icon i {
    color: #00A651; /* 緑色または好みの色 */
    font-size: 24px; /* アイコンサイズ */
}
        
        .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);
        }
        
        .button-section {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        
        .donate-button {
            flex: 1;
            background-color: #FFE066;
			color: #42210B;			
            border: none;
            border-radius: 50px;
            padding: 15px 30px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            transition: background-color 0.3s;
        }
        
        .donate-button:hover {
            background-color: #FFD700;
			color: #42210B;
        }
        
        @media (max-width: 768px) {
            .funding-bg-top {
                height: 200px;
            }
            
            .funding-wrapper {
                margin-top: -120px;
				padding: 0 0px;
				
            }
            
            .funding-card {
                padding: 30px 10px;
            }
            
            .headline-text {
                font-size: 18px;
            }
            
/* キャンプファイアー ウィジェット強制中央揃えスタイル */
.progress-section {
  width: 100% !important;
  max-width: 100% !important;
  margin: 40px auto !important;
  text-align: center !important;
  display: block !important;
  position: relative !important;
}

.progress-section iframe {
  margin: 0 auto !important;
  display: block !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 500px !important;
  height: 365px !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .progress-section iframe {
    max-width: 90%; /* 小さい画面では幅を調整 */
  }
}
            
            .stats-section {
                flex-direction: column;
                gap: 30px;
            }
            
            .stat-item {
                margin-bottom: 15px;
            }
            
            .button-section {
                flex-direction: column;
            }
            
            .participation-info::before {
                left: 5%;
            }
            
            .participation-info::after {
                right: 5%;
            }

        .headline-text p {
            font-size: 20px;

        }		
			
        .megaphone-icon {
            font-size: 30px;
        }			
        }


/*
==================================================
お知らせ情報・活動報告セクション
==================================================
*/  
/* イベント情報・活動報告用のスタイル */
.hachi-background {
  background-image: url('https://hachi.here-kochi.com/wp-content/uploads/hachi-page-bg.png');
  background-repeat: repeat;
  background-size: cover;
  padding: 100px 20px 300px 20px;
  margin: 0 auto;
	width:100%;

}
.hachi-event-box,
.hachi-activity-box {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	max-width: 1100px;
}

.hachi-event-heading,
.hachi-activity-heading {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.hachi-event-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hachi-event-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.hachi-event-image {
    width: 120px;
    height: 120px;
    background-color: #eee;
    flex-shrink: 0;
}

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

.hachi-event-content {
    flex-grow: 1;
	margin: 0 0 0 15px;
}

.hachi-event-date,
.hachi-activity-date {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
}

.hachi-event-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

h3.hachi-event-title {
	margin: 0;
}

.hachi-event-description,
.hachi-activity-description {
    font-size: 16px;
    color: #444;
}

.hachi-activity-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hachi-activity-item {
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.hachi-activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hachi-activity-title {
    font-size: 18px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .hachi-event-box,
    .hachi-activity-box {
        padding: 25px;
    }
    
    .hachi-event-item {
        flex-direction: column;
    }
    
    .hachi-event-image {
        width: 100%;
        height: 180px;
        margin-bottom: 15px;
    }
	
.hachi-activity-title {
	margin: 0;
}	
}

        /* イベント情報のリンクスタイル */
        .hachi-event-link {
            display: flex;
            text-decoration: underline;
            color: #1111cc;
            transition: all 0.3s ease;
        }
        
        .hachi-event-link:hover {
            opacity: 0.8;
        }
        
        .hachi-event-more-container {
            text-align: right;
            width: 100%;
            margin-top: 10px;
        }
        
        .hachi-event-more {
            display: inline-block;
            color: #00A651;
            font-size: 14px;
            position: relative;
            padding-right: 20px;
        }
        
        .hachi-event-more::after {
            content: "→";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease;
        }
        
        .hachi-event-link:hover .hachi-event-more::after {
            transform: translate(5px, -50%);
        }
        
        /* 活動報告のリンクスタイル */
        .hachi-activity-link {
            display: block;
            text-decoration: none;
            color: inherit;
            padding: 0;
        }
        
        .hachi-activity-link:hover {

        }
        
        .hachi-activity-more-container {
            text-align: right;
            width: 100%;
            margin-top: 10px;
        }
        
        .hachi-activity-more {
            display: inline-block;
            color: #00A651;
            font-size: 14px;
            position: relative;
            padding-right: 20px;
        }
        
        .hachi-activity-more::after {
            content: "→";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.3s ease;
        }
        
        .hachi-activity-link:hover .hachi-activity-more::after {
            transform: translate(5px, -50%);
        }



        .hachi-activity-content-wrapper {
            display: flex;
            gap: 20px;
        }
        
        .hachi-activity-image {
            flex: 0 0 auto;
            max-width: 150px;
        }

        .hachi-activity-image {
            overflow: hidden; /* はみ出る部分を隠す */
        }

        .hachi-activity-image img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            transition: transform 0.3s ease; /* 拡大アニメーションをスムーズに */
        }
        .hachi-activity-image img:hover {
            transform: scale(1.1); /* ホバー時に1.1倍に拡大 */
        }

        .hachi-activity-content {
            flex: 1;
        }

        /* レスポンシブ対応 */
        @media screen and (max-width: 768px) {
            .hachi-activity-content-wrapper {
                flex-direction: column;
                gap: 15px;
            }
            
            .hachi-activity-image {
                max-width: 100%;
                margin-bottom: 10px;
            }
            
            .hachi-activity-image img {
                max-width: 100%;
                width: 100%;
            }
        }


/*
==================================================
ハチの書籍・関連メディアセクション
==================================================
*/

/* ラッパーとカーブ背景 */
.book-section-wrapper {
  position: relative;
  width: 100%;
  padding: 50px 0 0;
  margin: -200px 0 0 0;
  background-color: #fff; /* グレー背景 */
  overflow: hidden;
  /* 上部に大きな弧を作る */
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

/* 白い長方形コンテンツエリア */
.book-section {
  max-width: 1200px;
  width: 85%;
  margin: 30px auto;
  padding: 40px 40px 10px 40px;
  background-color: #fff;
  border-radius: 20px;

}

/* タイトル部分 */
.book-title-container {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.book-yellow-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  height: auto;
  z-index: 0;
}

.book-title-content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

.book-main-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.book-subtitle {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

/* 書籍一覧 */
.books-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 0px;
}

.book-item {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  /* transition: transform 0.3s ease; を削除 */
}

.book-item:hover {
  /* transform: translateY(-5px); を削除 */
}

.book-image {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.book-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.book-image:hover img {
  transform: scale(1.05);
}

.book-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.book-author {
  font-size: 16px;
  color: #666;
  margin: 0 0 15px 0;
}

.book-description {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex: 1;
}

.book-link {
  align-self: flex-start;
  display: inline-block;
  background-color: #00A651;
  color: white;
  padding: 8px 16px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.book-link:hover {
  background-color: #008543;
	color: #fff;
}

/* 書籍説明文 */
.books-description {
  max-width: 100%;
	width: 800px;
  margin: 30px auto;
  font-size: 16px;
  line-height: 1.8;
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .books-container {
    justify-content: center;
  }

  .book-item {
    flex: 0 0 calc(50% - 20px);
  }
}

@media screen and (max-width: 768px) {
  .book-section-wrapper {
    padding: 30px 0 60px;
    border-radius: 50% 50% 0 0 / 10% 10% 0 0;
  }
  
  .book-section {
    width: 90%;
    padding: 90px 20px 0px 20px;
  }
  
  .book-title-container {
    height: 130px;
    margin-bottom: 40px;
  }
  
  .book-yellow-blob {
    width: 250px;
  }
  
  .book-main-title {
    font-size: 24px;
  }
  
  .book-subtitle {
    font-size: 18px;
  }
  
  .books-container {
    gap: 0px;
  }
  
  .book-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .book-image {
    height: 300px;
  }
}

@media screen and (max-width: 576px) {
  .book-section-wrapper {
    padding: 20px 0 0px;
    border-radius: 30px;;
  }
  
  .book-section {

  }
  
  .book-title-container {
    height: 120px;
    margin-bottom: 30px;
  }
  
  .book-yellow-blob {
    width: 200px;
  }
  
  .book-main-title {
    font-size: 22px;
  }
  
  .book-subtitle {
    font-size: 16px;
  }
  
  .book-image {
    height: 250px;
  }
  
  .book-title {
    font-size: 18px;
  }
  
  .book-author {
    font-size: 14px;
  }
  
  .book-description {
    font-size: 14px;
  }
}


/*
==================================================
協力団体・リンクなどセクション
==================================================
*/
/* 協力団体・リンクなどセクション */
.partners-outer {
  background-color: #FFF8E7; /* ベージュ背景 */
  padding: 60px 0;
  width: 100%;
}

.partners-container {
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 20px;
  padding: 50px 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.partners-title {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 50px;
  color: #333;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.partners-column {
  flex: 1;
  min-width: 250px;
  padding: 0 10px;
}

.partner-item {
  position: relative;
  padding-left: 25px; /* アイコン用のスペース確保 */
  margin-bottom: 20px;
  line-height: 1.6;
}

.partner-item i {
  position: absolute;
  left: 0;
  top: 3px; /* 微調整 */
  color: #8B4513; /* 肉球アイコンの色（ブラウン） */
  font-size: 16px;
}

.partner-item span {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .partners-outer {
    padding: 80px 0;
  }
  
  .partners-container {
    padding: 30px 20px;
  }
  
  .partners-title {
    font-size: 24px;
	  margin-top: 40px;
    margin-bottom: 0px;
  }
  
  .partners-list {
    flex-direction: column;
  gap: 0px;	  
  }
  
  .partners-column {
    width: 100%;
  }
  
  .partner-item {
    margin-bottom: 15px;
  }
  
  .partner-item i {
    font-size: 18px;
  }
  
  .partner-item span {
    font-size: 14px;
  }
}

@media screen and (max-width: 576px) {
  .partners-outer {

  }
  
  .partners-container {
    padding: 25px 15px;
    width: 95%;
  }
  
  .partners-title {
    font-size: 22px;
  }
  
  .partner-item i {
    font-size: 16px;
    margin-right: 10px;
  }
  
  .partner-item span {
    font-size: 13px;
  }
}


/*
==================================================
固定ページの幅調整
==================================================
*/
.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シェアボタン
==================================================
*/
.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: 900px;
    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;
}

/* sp */
@media only screen and (max-width: 760px) {
  #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;
  }
}


.table_kakomi {
	width:100%;
}
.table_kakomi_01 {
	margin:10px;
	padding:0;

}


/*
==================================================
フッターの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-title {
  font-size: 26px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.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;
  }
  
  .section-title {
    font-size: 22px;
  }
  
  .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;
}