@charset "utf-8";



@media only screen and (min-width:992px)	{.tategaki{ display:inline-flex; text-align: left; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; font-feature-settings: "pkna"; font-weight: 400; line-height: 2.5;letter-spacing: .2em;}}

.inner{background-color: rgba(239,239,239,0.95); padding: 80px 80px; color: #333;height: 536px;display: grid;}
.inner p{margin-left:auto;margin-right: auto;}
@media only screen and (max-width:991px) {.inner{padding:40px 20px;}.inner{display: block;height:auto;text-align: left;}}

#layer{ padding-top:125px;}
@media only screen and (max-width:991px) {#layer{}}

#layer .top_img{position: relative; top: 0; left: 0; width:75%;}
#layer .top_img span { display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}

@media only screen and (max-width:991px) {#layer .top_img{width: 100%;}
#layer .top_img span{ display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}
#layer .col-12{ padding-top:40%;}}

#layer h2{ display: inline;margin-left: auto; text-align: left;
	-webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
 text-orientation: upright;
-webkit-text-orientation: upright;
 font-feature-settings: "pkna";
 font-weight: bold;
 line-height: 2;
 letter-spacing: .2em;
 font-size: 38px;
 margin-bottom: 75px;}
@media only screen and (max-width:991px)	{#layer h2{font-size: 28px;margin-bottom: 30px;background: #fff; padding: 40px 15px;min-height:360px;}}

#layer h2 span{ font-size:20px; color:#333; display:block; padding-top:15px; font-weight:bold;}

@media only screen and (max-width:991px)	{#layer h2 span{ display:block;}}


/*レイヤー2*/

#layer2{ padding-top:125px;}
@media only screen and (max-width:991px) {#layer2{}}

#layer2 .top_img{position: relative; top: 0; left: 0; right: 0; width:100%;}
#layer2 .top_img span { display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}

@media only screen and (max-width:991px) {#layer2 .top_img{width: 100%;}
#layer2 .top_img span{ display: block; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: auto; position: absolute;}
#layer2 .col-12{ padding-top:40%;}}

#layer2 h2{ display: inline;margin-left: auto;margin-right: auto; text-align: left;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
-webkit-text-orientation: upright;
font-feature-settings: "pkna";
font-weight: bold;
line-height: 2;
letter-spacing: .2em;
font-size: 38px;
margin-bottom: 75px;
color: #fff;}

@media only screen and (max-width:991px)	{#layer2 h2{font-size: 28px;margin-bottom: 30px;background: #fff; padding: 40px 15px;color: #1f1f1f;min-height:380px;}}

#layer2 h2 span{ font-size:20px; color:#333; display:block; padding-top:15px; font-weight:bold;}

#layer2 .inner{height: 450px;}
@media only screen and (max-width:991px)	{#layer2 h2 span{ display:block;}#layer2 .inner{height: auto;}}


/* news */
#news{background: url(../images/top/bg-news.jpg) top 23px center; background-repeat-y:no-repeat;}
#news .container{max-width: 1500px;}

#news h2{text-align: left;font-size: 40px;margin-bottom: 100px;font-weight: bold; text-align:center;}
#news h2 span{font-size:20px;font-weight: bold; display:block;font-style: italic;}

	@media only screen and (max-width:991px)	{#news h2{font-size: 24px;margin-bottom: 30px;-webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit;text-align: center;}
	#news h2 span{text-align: center;font-size:16px;font-weight: bold; display:block;}}

/* index1 */
#index1{border-bottom:1px solid #ccc; }
#index1 .container{max-width: 1500px;}

#index1 h2{text-align: left;font-size: 36px;margin-bottom: 75px;font-weight: bold; text-align:center;}
#index1 h2 span{font-size:20px;font-weight: bold; display:block;font-style: italic;}

	@media only screen and (max-width:991px)	{#index1 h2{font-size: 24px;margin-bottom: 30px;-webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit;text-align: center;}
	#index1 h2 span{text-align: center;font-size:16px;font-weight: bold; display:block;}}

.news-box{}

.news-article{display: table;width: 100%;align-items:center;}
	@media only screen and (max-width:991px)	{.news-article{display: block;}}

.news-article + .news-article{margin-top: 15px;}

.news-date,.news-comment{display: table-cell;vertical-align: top;}
	@media only screen and (max-width:991px)	{.news-date,.news-comment{display: block;}}

.news-date{width: 150px;text-align: center;padding: 9px 0;}
	@media only screen and (max-width:991px)	{.news-date{width: auto;}}

.news-date.shp{border-bottom: 1px solid #000000;}
.news-date.tpc{border-bottom: 1px solid #00c1ff;}

.news-comment{border-bottom: 1px solid #999;padding: 9px 15px;}
	@media only screen and (max-width:991px)	{.news-comment{}}

.date{color: #bb9f78; font-weight: bold;}
#index2{ }
#index2 h2{color:#000;}
	@media only screen and (max-width:991px)	{#index2 h2{font-size: 24px;margin-bottom: 30px;}}


#about{background: #e9dfd3;}
#about h2{color:#000;}
	@media only screen and (max-width:991px)	{#index2 h2{font-size: 24px;margin-bottom: 30px;}}

#about h3{margin: 25px 0 30px; font-size: 22px; color: #323f6b;}
#about p{margin-bottom: 75px;}

.gallery-box{ padding:20px; position:relative; margin-bottom:45px; text-align:center;}
.gallery-box h3{ font-size:28px; font-weight:bold; margin-bottom:20px;}
.gallery-box p{ margin-bottom:30px;}


.check{list-style: none;}
.check li{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 24px;padding-left: 24px;}}

.check li:before{content: "";background: url(../images/common/checkmark.png) left center /30px no-repeat;width: 30px;height: 48px;display: block;position: absolute;top: 0;left: 0;right: 0;}
	@media (max-width:991px)	{.check li:before{width: 30px;height: 24px;background-size:20px;}}

.comment{font-size: 18px;line-height: 48px;padding-left: 45px;padding-left: 48px;position: relative;}
	@media (max-width:991px)	{.check li{font-size: 16px;line-height: 18px;padding-left: 24px;}}


#contact{background: url(../images/top/bg-contact.jpg) center center /cover no-repeat #fff;}
#contact p{color:#fff;}
#contact h2{font-size: 36px; text-align: center; margin-bottom: 40px;color:#fff;}
#contact .inner-contact{ background: rgba(255,255,255,.6);padding: 80px;}
@media (max-width:991px)	{#contact .inner-contact{padding: 20px;}}


/* ==========================================
   レスポンシブ・列数固定スタイルの追加
   ========================================== */

/* 1. 基本設定（スマホ：まずは1列 100%） */
.post-grid-list .col-grid-item {
    width: 100%;
    margin-bottom: 0; /* 隙間はBootstrapの g-4 に任せる */
}

/* 2. タブレット（画面幅 576px 以上：2列 50%） */
@media screen and (min-width: 576px) {
    .post-grid-list .col-grid-item {
        width: 48% !important;
				margin: 0 1% 2%;
    }
}

/* 3. PC・大画面（画面幅 992px 以上：最大3列 33.33%） */
@media screen and (min-width: 992px) {
    .post-grid-list .col-grid-item {
			width: 31% !important;
			margin: 0 1% 2%;
    }
}


/* --- 以下は前回のスタイル（そのまま維持） --- */
.news-grid-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.news-thumbnail a { display: block; overflow: hidden; }
.news-thumbnail img { width: 100%; height: 230px; object-fit: cover; }
.news-content { padding: 15px 0; display: flex; flex-direction: column; flex-grow: 1; }
.news-meta {}
.news-meta .date {
	font-size: 15px;
	color: #BB9F78;
	margin-top: 7px;
	display: block;
}
.cat-badge {
	display: inline-block;
	padding: 5px 19px;
	font-size: 13px;
	color: #fff;
	line-height: 1.2;
}
.cat-info{
	background-color: #323F6B;
}
.cat-interview{
	background-color: #6287BF;
}
.cat-event{
	background-color: #C77443;
}
.cat-column{
	background-color: #5F7B51;
}
.cat-news-post{
	background-color: #7b574c;
}
.title-link { text-decoration: none; color: #333; }
.title-link h4 {
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
	font-weight: bold;
	color: #000;
}
.title-link:hover h4 { text-decoration: underline; }