@charset "utf-8";
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }

.t-black { color: #222; }
.t-red { color: #AC2024; }
.t-bold { font-weight: bold; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.t-sub { font-size: .9375rem; }
.t-note { padding-left: 2em; font-size: .75rem; }
.t-note::before { content: '※'; margin-left: -2em; width: 2em; display: inline-block; }

.t-underline,
a.t-underline{ text-decoration: underline; }

.bg-blue { background: #F4FBFE; }

.sp-only {display: none; }
@media screen and (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: initial; }
}

.title-line { font-family: 'Noto Serif JP', serif; font-size: 1.5rem; padding-left: .5em; border-left: 4px solid #F2CA1F;  margin-bottom: 1em; }

.link-card { background: #FFF; border-radius: 10px; text-align: center; display: block; padding: 3.5rem 0; text-align: center; }


.link-card.common::before { content: ''; width: 90px; height: 90px; background: #000 url("../img/common/logo-white.svg") no-repeat center center / auto 80%; display: block; border-radius: 50%; margin: 0 auto 1em; }

.home-menu-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; font-size: 1.25rem; line-height: 1.5; }
.home-menu-primary .link-card img { width: 6em; height: 6em; margin: 0 auto 1em; }
.home-menu-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.home-menu-tertiary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.home-menu-secondary .link-card .icon { width: 10em; height: 7em; margin: 0 auto 1em; object-fit: contain; border-radius: 0; }

.home-menu-secondary.-first .link-card { padding: 2em 0 3.5em;}
.home-menu-secondary.-first  .link-card .icon { width: 11em; height: 9em; }

.home-othe-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

@media screen and (max-width: 900px) {
  .home-menu-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  .home-othe-menu { grid-template-columns: 1fr; gap: 50px; }
}

@media screen and (max-width: 768px) {
  .link-card { padding: 2rem 0; font-size: .85rem; }
  .link-card.common::before { width: 60px; height: 60px; }
  
  
  .home-menu-secondary.-first .link-card { padding: 1rem 0 2rem; }
  .home-menu-primary { grid-template-columns: 1fr; }
  .home-menu-primary .link-card { display: flex; align-items: center; justify-content: center; text-align: left; }
  .home-menu-primary .link-card img { margin: 0 1em 0 0; }
  .home-menu-primary .link-card p { width: 11em; }
  .home-menu-secondary  { gap: 1rem; }
  .home-menu-tertiary  { gap: 1rem; }
}
.news-list dt { float: left; }
.news-list dd { padding: 0 0 1em 10em ;margin-bottom: 1em; }
.news-list dd:not(:last-child) { border-bottom: 1px solid #D0D0D0;  }

@media screen and (max-width: 768px) {
  .news-list dt { float: none; }
  .news-list dd { padding-left: 0; }
}

.page-head { padding: 1rem 0; }
.page-head .title { font-size: 2rem; font-family: 'Noto Serif JP', serif; text-align: center; padding: 2em 0; }
.page-head .title .sub-t { font-size: 1.25rem; }
.page-head .title .sub-b { font-size: 1rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.page-head .title .sub-b::before,
.page-head .title .sub-b::after { content: ''; width: 2em; height: 1px; display: inline-block; background: #CECECE; }
.page-head .title .sub-b::before { margin-right: 1em; }
.page-head .title .sub-b::after { margin-left: 1em;}

@media screen and (max-width: 768px) {
  .page-head .title { font-size: 1.5rem; grid-column-end: 120px; }
}
.breadcrumb { display: flex; flex-wrap: wrap; color: #777777; font-size: .9375rem; }
.breadcrumb li + li::before { content: '>'; margin: 0 .2em; }
.breadcrumb a { text-decoration: underline; }

@media screen and (max-width: 768px) {
  .breadcrumb { font-size: .75rem; }
}
.front-page-body,
.page-body { background: #F7F7F7; padding: 50px 0; }
.page-body * { word-break: break-all; }


.category-conts + .category-conts { margin-top: 3rem; }

.page-body h1 { font-size: 1.6rem; font-family: 'Noto Serif JP', serif; padding-left: 4em; align-items: center; margin-bottom: 1em; vertical-align: middle; min-height: 3.5em; position: relative; line-height: 1.5; padding-top: 1em; }
.page-body h1::before { content: ''; width: 3.5em; height: 3.5em; background: #222 url(../img/common/logo-white.svg) no-repeat center center / auto 80%; border-radius: 50%; display: inline-block; margin-left: -4em; margin-right: .5em; position: absolute; left: 0; top: 0; margin: auto;  }


.mainvisual img { width: 100%; }
.page-body h1#hazard-map::before { background: url(../img/icon-hazardmap-color.jpg) no-repeat center center/ contain;  }
.page-body h1#shelter::before { background: url("../img/icon-shelter-color.jpg") no-repeat center center/ contain; }
.page-body h1#contact::before { background: url("../img/icon-contact-color.jpg") no-repeat center center/ contain;}
.page-body h1#preparation::before { background: url(../img/icon-preparation-color.jpg) no-repeat center center/ contain; }
.page-body h1#about-kamakura::before { background: url("../img/icon-info.png") no-repeat center center/ contain;}
.page-body h1#kamakura-sightseeing::before { background: url("../img/icon-life.png") no-repeat center center/ contain; }

.page-body h1#earthquakes::before { background: url(../img/icon1.png) no-repeat center center/ contain; border-radius: 0; }

.page-body h1#tsunami::before { background: url(../img/icon2.png) no-repeat center center/ contain; border-radius: 0; }
.page-body h1#typhoon::before { background: url(../img/icon3.png) no-repeat center center/ contain; border-radius: 0; }
.page-body h1#wind-flood::before { background: url(../img/icon4.png) no-repeat center center/ contain; border-radius: 0; }
.page-body h1#sediment-disasters::before { background: url(../img/icon5.png) no-repeat center center/ contain; border-radius: 0; }
.page-body h1#heat-stroke::before { background: url(../img/icon6.png) no-repeat center center/ contain; border-radius: 0; }
.page-body h1#photochemical-smog::before { background: url("../img/disaster7-2.png") no-repeat center center/ contain; border-radius: 0; }



.page-body h2 { font-size: 1.6rem; border-left: 4px solid #F2CA1F; padding-left: .5em; font-family: 'Noto Serif JP', serif; margin-bottom: 1em; }
.page-body h3 { font-size: 1.25rem; font-family: 'Noto Serif JP', serif; text-decoration: underline; text-decoration-color: #F2CA1F; text-decoration-thickness: .2em; text-underline-offset: -.1em; margin-bottom: .5em; text-decoration-skip-ink: none; }

.page-body h4 { background: #FFF; width: fit-content; padding: 0 .5em; font-family: 'Noto Serif JP', serif; font-size: 1.125rem; color: #5E4634; }
.page-body h5 { font-size: 1.125rem; font-weight: bold; font-family: 'Noto Serif JP', serif; margin-bottom: .5em;  }

.page-body p { margin-bottom: 1.5em; }
.page-body a { text-decoration: underline; }

.page-body ul { margin: 1em 0; }
.page-body ul > li { padding-left: 2em; position: relative; }
.page-body ul > li::before { content: ''; width: 1.2em; height: 1.2em; background: url("../img/common/icon-star.svg") no-repeat center center/ contain; margin-left: -2em ;margin-right: .8em; display: inline-block; vertical-align: middle; position: absolute; }


.page-body ol { margin: 1em 0; counter-reset: listnum; list-style: none; }
.page-body ol > li { counter-increment: listnum; padding-left: 2em; position: relative; }
.page-body ol > li::before { content: counter(listnum); font-size: .7em; background: #F2CA1F; width: 2em; height: 2em; margin-left: -2em; margin-right: 1.6em; vertical-align: middle; display: inline-block; border-radius: 50%; line-height: 2; text-align: center; position: absolute; }

.page-body table { width: 100%; border: none; margin: 1em 0; }
.page-body table tr,
.page-body table th,
.page-body table td {border: none; }
.page-body table tr + tr { border-top: 1rem solid transparent; }
.page-body table td:first-child { border-left: 2px solid #F2CA1F; width: 30%; vertical-align: middle; font-family: 'Noto Serif JP', serif; font-size: 1.125rem; padding: 0 2em; }
.page-body table td { padding: 0 0 0 1em; }

.page-body table p { margin: 0; }
.page-body table th { background: #f2ca1f; text-align: center; font-family: 'Noto Serif JP', serif; font-size: 1.125rem; }

.page-body .occur-table { border: none;  }
.page-body .occur-table .item + .item { margin-top: 4px; }
.page-body .occur-table .item { border-radius: 10px; display: flex; width: 100%; overflow: hidden; }
.page-body .occur-table .head,
.page-body .occur-table .conts { background: #FFF; border: none;  }
.page-body .occur-table .head {position: relative; display: grid; width: 40%; grid-template-columns: 50px minmax(0, 1fr); gap: 1rem; align-items: center; font-family: 'Noto Serif JP', serif; font-weight: 500; padding: 1em 2em;  }
.page-body .occur-table .head strong { font-size: 1.25rem; font-weight: 500; }
.page-body .occur-table .head::after { content: ''; width: 1px ;height: calc(100% - 2rem); position: absolute;  right: 0; top: 0; bottom: 0; margin: auto; background: #F2CA1F; }
.page-body .occur-table .conts { width: 70%; display: flex; align-items: center; padding: 1em 3em; 
}


.page-body :where(.wp-block-columns.is-layout-flex) { column-gap: 1rem; }
.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__content, 
.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media, 
.wp-block-media-text>.wp-block-media-text__content,
.wp-block-media-text>.wp-block-media-text__media { align-self: flex-start; }

@media screen and (max-width: 768px) {
  .page-body h1 { font-size: 1.4rem;  grid-template-columns: 2.5em minmax(0, 1fr); }
  .page-body h2 { font-size: 1.3rem;}
  .page-body h3 { font-size: 1.2rem;}
  
  .page-body table tr,
  .page-body table td:nth-child(n) { display: block; width: 100%; padding: 0 1em; }
  .page-body table tr + tr { border-top: 2rem solid transparent; }
  .page-body table td:first-child { padding: 0 1em; }
  
  .page-body .occur-table .item { flex-wrap: wrap; }
  .page-body .occur-table .head { width: 100%; padding: 1rem; grid-template-columns: 30px minmax(0, 1fr); }
  .page-body .occur-table .head::after { width: calc(100% - 2rem); height: 1px; bottom: 0; top: auto; left: 0; }
  .page-body .occur-table .conts { width: 100%; padding: 1rem; }
}