/*
Theme Name: ラピス株式会社
Description: Habakiri の子テーマです
Template: habakiri
*/
body {
	font-size:18px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.pc {
	background: #fff5e8;
}
.sp {
	display:none;
	background: #fff5e8;
}

/*--------------------header--------------------*/
.site-branding {
    padding: 10px 0;
}
.site-branding__heading img {
	max-width: 350px;
}
.header--center .global-nav .menu {
    width: 100%;
}
.menu > li {
	width: 14.285%;
}
/*ヘッダー分離固定*/
#global-nav {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}
#global-nav.m_fixed {
  position: fixed;
  top: 0;
	left: 0;
	right:0;
	z-index: 2;
	margin:0 auto;
}
.header__content {
   margin-right: -15px;
   margin-left: -15px;
}
@media (min-width: 992px){
#global-nav {
	width: 970px;
}
#contents {
margin-top:0 !important;
}
}
@media (min-width: 1200px){
#global-nav {
	width: 1170px;
}
}
@media screen and (max-width:991px){
#global-nav {
	display:none;
}
.is-fixed {
 	position: fixed;
	top: 0;
	z-index: 2;
	width: 100%;
	box-shadow: 0 0 3px rgba(0,0,0,.2);
	overflow: auto;
	transform: translate3d(0, 0, 0);
}
.header__content .header__col {
  float: left;
}
}
#responsive-btn{
	right: 5px;
}
.topnav3 {
	display: flex;
    justify-content: flex-end;
    align-items: center;
	font-size: 14px;
    font-weight: bold;
	margin: 20px 0 0;
}
.topnav2 {
	list-style:none;
	margin-bottom: 0;
	align-items: center;
}
.f-cv-tel {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 0;
    color: #996600;
}
.f-cv-tel span {
    display: block;
    font-size: 11px;
    text-align: center;
    border: solid 1px #666;
    border-radius: 5px;
    color: #333;
}
.f-cv-tel i {
    padding-right: 5px;
}
.h-time td {
	padding: 0px 10px;
}
.f-info {
	display: flex;
	justify-content: space-between;
	margin: 60px 0;
}
.clinicLogo {
	width: 30%;
}
.logo {
	width:250px;
	margin:0 auto 20px;
	text-align: center;
}
/*--------------------nav--------------------*/
.responsive-nav a {
	border-left: 1px dashed rgba(255,255,255,0.4);
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.responsive-nav li:last-child a {
	border-right: 1px dashed rgba(255,255,255,0.4);
}
.responsive-nav a span {
	display:block;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 0.2em;
	opacity: 0.5;
}
/*ハンバーガー*/
.off-canvas-nav a {
    font-weight: bold;
}
.off-canvas-nav--dark .current-menu-item > a, .off-canvas-nav--dark .current_page_ancestor > a, .off-canvas-nav--dark .current-page-ancestor > a, .off-canvas-nav--dark .current_page_item > a, .off-canvas-nav--dark .current_page_parent > a {
    background-color: #fff;
    color: #fff;
}
.off-canvas-nav--dark a:hover, .off-canvas-nav--dark a:active, .off-canvas-nav--dark a:focus {
    background-color: #e9f7ee;
    color: #fff;
}
.off-canvas-nav--dark {
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.off-canvas-nav--dark a {
    color: #006431 !important;
    padding: 10px 20px;
}
.off-canvas-nav--dark li {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #f7f7f7;
}
.off-canvas-nav--dark > ul, .off-canvas-nav--dark > * > ul {
    border-bottom: 1px solid #ccc;
}
.off-canvas-nav--dark ul ul {
    border-top: none;
    border-left: none;
	margin-left: 0;
}
.off-canvas-nav--dark ul ul li {
    border-left: none;
	padding-left:20px;
}
/*--------------------common--------------------*/
.page-header__title {
    font-size: 33px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
.page-header {
    background-color: #fff !important;
    color: #fff !important;
    background: url(/wp/wp-content/uploads/2021/03/header.jpg) no-repeat;
	background-size: cover;
	text-shadow: 0px 0px 8px rgb(0 0 0 / 30%);
}
.box-1 {
	margin-bottom:80px;
	overflow:hidden;
}
.box-2 {
	margin-bottom:50px;
	overflow:hidden;
}
.linklist {
	display:flex;
	justify-content:center;
	list-style:none;
	padding:0;
}
.linklist li {
	width: 25%;
    margin: 0 5px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.linklist li>a {
	display:block;
	color: #f3b770;
	font-weight:bold;
	border: solid 1px #f3b770;
    border-radius: 5px;
	padding:0 10px;
}
.linklist li>a:hover {
	text-decoration: none;
}
.g_calendar {
	text-align:center;
}
.g_calendar iframe {
	margin-bottom:30px;
}
/*--------------------main--------------------*/
.yokoku {
	text-align:center;
	font-size:30px;
	font-weight:bold;
	margin:20px auto;
	color:#fff;
	background:#f3b770;
	padding:10px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
#main h2 {
	clear: both;
	margin-bottom: 20px;
	padding: 10px 35px;
	font-size: 160%;
	color: #fff;
	background: #7ebb77;
	border-radius: 10px;
	font-family: 'M PLUS Rounded 1c', sans-serif;

    text-indent: -20px;
}
#main h2::first-letter {
    border-left: 3px solid #fff;
    padding-left: 15px;
}
h3 {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.gr {
	text-align:center;
	margin-bottom:50px;
	padding: 0;
	line-height: 2.0;
	font-size:20px;
	transform: rotate(0.03deg);  /* シャギーを防ぐ指定 */
}
#main .pc .gr h2 {
	color: #7ebb77;
	background: transparent;
}
#main .pc .gr h2:first-letter {
    border:none;
}

#main .sp .gr h2 {
	color: #7ebb77;
	background: transparent;
}
#main .sp .gr h2:first-letter {
    border:none;
}
.flexArea,.flexArea-2 {
	display:flex;
}
.flexArea .f-img {
	width:35%;
	text-align: center;
}
.flexArea .f-text {
	width:60%;
	margin-left: 20px;
}
.flexArea-2 {
	flex-direction:row-reverse;
}
.flexArea-2 .f-img {
	width:35%;
	text-align: center;
}
.flexArea-2 .f-text {
	width:65%;
	margin-right: 20px;
	transform: rotate(0.03deg);  /* シャギーを防ぐ指定 */
}
.float-right {
	float:right;
	width: 35%;
	margin-left:20px;
}
#main .h2_2 {
	border: 1px solid #ccc;
	background:#fff;
	color:initial;
	font-size: 140%;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
#main .h2_2:first-letter {
    border-left: 3px solid #7ebb77;
    padding-left: 15px;
}
.ikiru img {
	width:200px;
}
.flow {
	border: 3px solid #7ebb77;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 80px;
	position:relative;
	align-items: center;
}
.flow:after {
	content: '';
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
	margin: auto;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 35px solid #2c9948;
}
.flow h3 {
	margin:0;
}
.flow-last {
	margin-bottom:0;
}
.flow-last:after {
	content:none;
}
.cur {
	color: #ffffff;
    font-weight: bold;
    background: #f3b770;
	border-radius: 5px;
	border: solid 1px #f3b770;
	padding: 0 10px;
}
#staff .flow{
	margin-bottom:20px;
}
#staff .flow:after {
	content:none;
}
/*お知らせ*/
#newsArea ul {
	list-style:none;
	padding:0;
	width:70%;
	margin:20px auto;
}
#newsArea ul li {
	padding:10px 0;
}
#newsArea ul a li {
	display:flex;
	position:relative;
	align-items:center;
	color:initial;
	border-bottom:solid 1px #ccc;
}
#newsArea ul a:hover {
	text-decoration:none;
}
#newsArea ul a:hover li {
	opacity:0.7;
}
.news-time {
	margin:0 10px 0 0;
	color:#999;
}
.news-title {
	margin:0 0 0 0;
}
.new-txt {
	font-size:10px;
	padding-left:5px;
	color:red;
}
.newsmore {
	float:right;
	color:initial;
}
.newsmore:hover {
	color: #7ebb77;
}
.author,.categories {
	display:none;
}
.cl_r {
	color:red;
}
.cl_b {
	color:#0070C0;
}
.box_Area {
	display: flex;
	list-style:none;
	padding:0;
	margin: 20px auto;
	transform: rotate(0.03deg);  /* シャギーを防ぐ指定 */
}
.box_Area ul {
  display: flex;
  justify-content: space-between;
}
.box_Area li {
	display: flex;
	flex-direction: column;
	width:32.333%;
	border-radius:10px;
	border: solid 3px #cfa979;
	margin:0 5px;
	padding:10px 15px;
}
.box_Area li .title {
	text-align:center;
	font-weight:bold;
	font-size:18px;
	color: #cfa979;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.box_Area li .bottom {
	margin-top: auto;
}
.box_Area img {
  margin-bottom: 15px;
}
.box_Area a{
	display:block;
	width:200px;
	background: #f3b770;
	text-align:center;
	margin:20px auto 0;
	padding:10px;
	margin-bottom:10px;
	border-radius:50px;
	color:#fff;
	font-weight:bold;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.box_Area a:hover {
	text-decoration:none;
	color:#fff;
	transition:all .5s;
	opacity:0.7;
}
}
.price_table {
	width:100%;
	margin-bottom:20px;
}
.price_table th {
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	border-left:solid 1px #ccc;
	border-right:solid 1px #ccc;
	background:#f2f2f2;
	padding: 10px;
	width:20%;
}
.price_table td {
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;
	border-right:solid 1px #ccc;
	padding: 10px;
	width:80%;
}
.tableT {
	font-size:20px;
}
.subT {
	color: #006400;
	font-weight:bold;
	font-size:18px;
}
.pricebox .subT{
	text-align: center;
}
.priceBox {
	background: #fffbe3;
	border-radius:10px;
	padding:20px;
}
.priceBoxText span {
	font-weight: bold;
	border-bottom: solid 1px red;
}
.priceBoxText_2 {
	font-size:20px;
	font-weight: bold;
	text-align:center;
}
.tablecap {
	font-size:14px;
}
.pricebox {
	justify-content:space-between;
	align-items:center;
	margin:30px auto 20px;
}
.inner_1 {
	width:45%;
	margin-right:10px;
	background:#fff;
	border-radius:10px;
	padding:10px;
}
.inner_1 table,.inner_2 table {
	width:100%;
}
.inner_2 {
	width:45%;
	margin-left:10px;
	background:#fff;
	border-radius:10px;
	padding:10px;
}
.plus {
	text-align:center;
	font-size:20px;
	font-weight:bold;
}
.facility {
	width:100%;
}
.facility td {
	width:50%;
	padding:0 5px;
	vertical-align: top;
}
.facility-cp {
	text-align:center;
	font-size:14px;
}
.schedule {
	width:100%;
	margin-bottom: 20px;
	color: #333;
}
.schedule th {
	background: #fffbe3;
	border: 1px solid #b7b7b7;
	text-align: center;
	padding:10px;
}
.schedule td {
	border: 1px solid #b7b7b7;
	padding:10px;
	text-align: center;
	background: #fff;
}
.form_dl {
	display:block;
	width:290px;
	background: #f3b770;
	text-align:center;
	margin:20px auto 0;
	padding:10px;
	border-radius:50px;
	color:#fff;
	font-weight:bold;
}
.form_dl:hover {
	text-decoration:none;
	color:#fff;
	transition:all .5s;
	opacity:0.7;
}
.travelFlow .flexArea .f-img {
	width:100px;
}
.travelFlow .f-text {
    width: 85%;
}
.travelFlow .flow {
    align-items: flex-start;
}
.price_table_2 {
	width:100%;
}
.price_table_2 th {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    background: #f2f2f2;
    padding: 10px;
    width: 33.333%;
}
.price_table_2 td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    padding: 10px;
    width: 33.333%;
}
.a-img,.a-text {
	width:70%;
	margin:0 auto 20px;
}
.sitemap {
	width:100%;
}
.sitemap h3{
	font-size:18px;
}
.sitemap td {
	width:50%;
	vertical-align:top;
}
.sitemap h3:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    padding-right: 10px;
    color: #f3b770;
}
.pict img {
	width:100px;
}
.faq {
	padding:0;
}
.faq li {
	padding-bottom:20px;
	display:flex;
}
.q-1,.a-1 {
	width:40px;
	margin-right:20px;
}
.faq-text {
	width:900px;
}
.prImage {
    width: 100px;
    text-align: center;
    margin: 10px auto;
}
/*--------------------footer--------------------*/
/*.footer {
	border-top: 5px solid #7ebb77;
}*/
.footer h3 {
	text-align:center;
	color:#006400;
}
.footer table {
	width:100%;
	margin-bottom: 20px;
	color: #333;
}
.footer table th {
	background: #fffbe3;
	border: 1px solid #b7b7b7;
	text-align: center;
	padding:10px;
}
.footer table td {
	border: 1px solid #b7b7b7;
	padding:10px;
	text-align: center;
	background: #fff;
}
.footer .col-md-6 {
    width: 50%;
    margin: 20px 0;
}
.reho {
	background: #ff0000;
	color: #fff;
	padding: 10px 25px;
	margin-bottom: 20px;
	border-radius: 3px;
}
.f-menuArea {
	background: #fffbe3;
}
.f-info_1 {
	background: #f3b770;
	border-radius: 10px;
	text-align: center;
	line-height: 1.5;
	padding: 5px;
	color:#fff;
}
.f-info_1 .nom {
	font-size: 40px;
}
.f-menu {
	list-style:none;
	padding:0;
	margin:30px 0;
	display:flex;
	justify-content:space-around;
	color: #f3b770;
}
.f-menu li i {
	padding-right:5px;
}
.f-menu a {
	color: #228b22;
}
.f-menu a:hover {
	color: #228b22;
}
.copyright {
	text-align:center;
	color: #fff;
	background-color: #228b22;
}
.copyright a {
	color: #fff;
}
.copyright a:hover {
	color: #eee;
}

#footerFloatingMenu {
	display:none;
}
.googlemaps {
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
    position: relative;
}
.googlemaps iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
/*--------------------RWD(ここから)--------------------*/
@media screen and (max-width:1200px) {
.pricebox {
    display: block;
}
.inner_1,.inner_2 {
    width: 100%;
	margin: 0;
}
#menu-item-789 a {
    font-size: 12px !important;
	line-height:2;
}
}
@media screen and (max-width:991px){
/*header*/
.menu > li {
    width: 100%;
}
.topnav2,.topnav3 {
	display:none;
}
.off-canvas-nav--dark a span {
    display: none;
}
/*トップ*/
.site-branding__heading img {
    max-width: 270px;
}

/*フロート*/
#footerFloatingMenu {
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 62px;
	z-index: 99999998;
	border-top: 1px solid #fff;
}
#footerFloatingMenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#footerFloatingMenu ul li {
	float: left;
	width: 33.33333%;
	text-align: center;
	line-height: 62px;
	box-sizing: border-box;
	border-right: 1px solid #fff;
	font-weight: bold;
}
#footerFloatingMenu ul li:last-child {
	border-right: none;
}
#footerFloatingMenu ul li i {
	padding-right:5px;
}
#footerFloatingMenu a {
	color:#fff;
}
#footerFloatingMenu i {
	color:#fff;
}
.copyright {
	padding: 15px 0 77px;
}
.ft-tel {
	background: #f3b770;
}
.ft-tel2 {
	background-color: #cfa979;
}
.ft-web {
	background-color: #996600;
}
.logo-f {
	width:50%;
}
.menu-gnavi-container {
    padding-bottom: 62px;
}
/*フッター*/
.f-menu {
    display: block;
    padding: 5px 0;
	margin: 0;
}
.f-menu li {
    border-bottom: dotted 1px #fff;
    padding: 10px 0px;
}
.f-menu li:last-child {
	border:none;
}
.footer .col-md-6 {
    width: 100%;
    margin: 20px 0;
}
.logo-f {
    width: 50%;
    margin: 20px auto;
}
}
@media screen and (max-width:768px) {
/**header/
.site-branding__heading img {
    max-width: 340px;
}
/*トップ*/
#newsArea ul {
    width: 100%;
}
.box_Area {
    display: block;
}
.box_Area li {
    width: 70%;
    margin: 0 auto 20px;
}
.price_table {
	border-top: solid 1px #ccc;
}
.price_table td {
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-left: solid 1px #ccc;
    padding: 10px;
    width: 100%;
    display: block;
}
.price_table th {
    border-top: none;
    border-bottom: none;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    background: #f2f2f2;
    padding: 10px;
    width: 100%;
    display: block;
}
.logo-f {
    width: 70%;
    margin: 20px auto;
}
.faq-text {
    width: 95%;
}
.q-1, .a-1 {
    width: 5%;
    margin-right: 20px;
}
.linklist {
    flex-wrap: wrap;
}
.linklist li {
    width: 48%;
    margin: 5px;
}
}
@media screen and (max-width:600px) {
.pc {
	display:none;
}	
.sp {
	display:block;
}
/*header*/
.site-branding__heading img {
    max-width: 230px;

}
/*トップ*/
.flexArea,.flexArea-2 {
    display: block;
}
.flexArea .f-img {
    width: 290px;
    margin: 0 auto 20px;
}
.flexArea .f-text {
    width: 100%;
    margin-left: 0;
}
.flexArea-2 .f-img {
    width: 290px;
    margin: 0 auto 20px;
}
.flexArea-2 .f-text {
    width: 100%;
	margin-right: 0;
}
.float-right {
    float: none;
    width: 290px;
    margin: 0 auto 20px;
}
.box_Area li {
    width: 80%;
}
.travelFlow .flow h3 {
	text-align:center;
}
.inner_1 table th, .inner_2 table th,.inner_1 table td, .inner_2 table td {
	display:block;
}
.inner_1 table td, .inner_2 table td {
	margin-bottom:10px;
}
.a-img,.a-text {
	width:100%;
	margin:0 auto 20px;
}
.sitemap td {
	display:block;
	width:100%;
}
}
@media screen and (max-width:480px){
/*header*/
body {
	font-size:16px;
}
.site-branding__heading img {
    max-width: 200px;
}
.linklist li {
    width: 100%;
    margin: 5px;
}
/*トップ*/
.flexArea .f-img,.flexArea-2 .f-img {
    width: auto;
}
.float-right {
    width: auto;
}
.linklist {
    display: block;
}
.linklist li {
    border-left: none;
}
.linklist li:last-child {
    border-right: none;
}
.box_Area li {
    width: auto;
}
.facility td {
    width: 100%;
    padding: 0;
    vertical-align: top;
    display: block;
    margin-bottom: 20px;
}
.faq-text {
    width: 90%;
}
.q-1, .a-1 {
    width: 10%;
    margin-right: 20px;
}
/*クリニック紹介*/

/*診療時間*/
#footerFloatingMenu ul li {
    font-size: 14px;
}
.logo-f {
    width: auto;
    margin: 20px auto;
}
}
@media screen and (max-width:435px) {
.schedule th, .schedule td,.footer table th,.footer table td {
	zoom: .8;
}
}
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }

/*--------------------ブログ投稿ウィジェット--------------------*/
.custom-blog-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.custom-blog-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.blog-card {
    width: calc(33.33% - 20px);
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.blog-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}

.blog-content {
    padding: 15px;
}

.blog-time {
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.blog-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    transition: color 0.3s;
}

.blog-title:hover {
    color: #0073aa;
}

.blog-excerpt {
    font-size: 14px;
    color: #666;
}

/*--------------------レスポンシブ対応--------------------*/
@media screen and (max-width: 768px) {
    .blog-card {
        width: calc(50% - 20px);
    }

    .blog-thumb img {
        height: 150px;
    }
}

@media screen and (max-width: 480px) {
    .blog-card {
        width: 100%;
    }

    .blog-thumb img {
        height: 120px;
    }
}
/* ブログセクションのスタイリング */
.blog-slider {
    padding: 20px 0;
    background: #f9f9f9;
    border-radius: 10px;
}

/* カードのデザイン */
.card {
    border: none;
    transition: all 0.3s ease-in-out;
}

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

.card-img-top {
    height: 200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card-body {
    padding: 15px;
    text-align: center;
}

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

.card-text {
    font-size: 0.9rem;
    color: #666;
}

.card-date {
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.blog-link {
    text-decoration: none;
    color: inherit;
}

.blog-link:hover .card-title {
    color: #0073e6;
}

/* Swiperのナビゲーションボタン */
.swiper-button-next,
.swiper-button-prev {
    color: #0073e6;
}

/* Swiperのページネーション */
.swiper-pagination-bullet {
    background: #0073e6;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .card-img-top {
        height: 150px;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-text {
        font-size: 0.8rem;
    }
}

/* お知らせ一覧テスト */
.news-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.news-item {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    margin-bottom: 15px;
    transition: all 0.3s ease-in-out;
}

.news-item h3 {
    font-size: 22px;
    margin: 0 0 10px;
}

.news-item a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
}

.news-item a:hover {
    color: #3498db;
}

.news-date {
    font-size: 14px;
    color: #777;
}

.news-excerpt {
    font-size: 16px;
    color: #555;
}

/* 全体レイアウトの調整 */
.blog-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    background: #f5f5f5;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ページタイトルのスタイリング */
.page-title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 3px solid #0073aa;
    display: inline-block;
    padding-bottom: 10px;
}

/* ブログ一覧グリッドのスタイル */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

/* ブログカードのスタイル */
.blog-card {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* サムネイル画像のデザイン */
.blog-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 5px solid #0073aa;
}

/* 記事内容のスタイル */
.blog-content {
    padding: 25px;
    text-align: left;
}

.blog-date {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.blog-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.3s ease-in-out;
}

.blog-title:hover {
    color: #0073aa;
}

.blog-excerpt {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

/* 「続きを読む」ボタンのスタイル */
.blog-content a {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 15px;
    font-size: 16px;
    color: #fff;
    background: #0073aa;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.blog-content a:hover {
    background: #005f87;
}

/* ページネーションのスタイル */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    gap: 10px;
}

.pagination a {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #0073aa;
    border-radius: 30px;
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.pagination a:hover,
.pagination .current {
    background-color: #0073aa;
    color: #fff;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .page-title {
        font-size: 28px;
    }

    .blog-thumbnail img {
        height: 180px;
    }

    .blog-title {
        font-size: 20px;
    }

    .pagination a {
        padding: 10px 20px;
    }
}