@charset "utf-8";
/********************************/
/*        ページタイトル        */
/********************************/
.cs_main h2 {
    text-align: center;
    margin-bottom: 20px;
}
.cs_main h2 span {
    padding: 0 20px 3px;
    border-bottom: 3px solid transparent;
    border-image: url(../images/line.png) 30 round;
}
/********************************/
/*           コメント           */
/********************************/
.cs_comment {
    margin: 0 auto 30px;
    color: var(--kuro);
    line-height: 2.0;
}
@media (min-width: 580px) {
.cs_comment {
    width: 580px;
    font-size: 1.2rem;
}
}
@media (max-width: 579px) {
.cs_comment {
    width: 90%;
    font-size: 1.0rem;
}
}
/********************************/
/*          高知県地図          */
/********************************/
.map-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}
.map-wrap { /* 任意：中央寄せしたい場合 */
    max-width: 843px; /* 元画像幅。全幅にしたい場合は消してOK */
    margin: 0 auto 60px;
}
  /* アクセシビリティ向上：キーボードフォーカス見える化 */
area:focus {
    outline: 2px solid #000; /* ブラウザによっては効かないので保険 */
}
/********************************/
/*         消防団リスト         */
/********************************/
.cs_list {
    width: 100%;
    padding: 80px 0 80px;
    background-color: var(--pink);
}
.cs_list_content {
    width: 870px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
}
@media (min-width: 601px) {
.cs_list_content {
    width: 870px;
}
}
@media (max-width: 600px) {
.cs_list_content {
    width: 95%;
}
}
.cs_list_content p{
    float: left;
    margin-left: 40px;
    margin-bottom: 10px;
    width: 250px;
    background-image: url(../images/icon_list.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 15px;
}
.cs_list_content p a:link,
.cs_list_content p a:visited {
    color: var(--kuro);
}
/********************************/
/*           行事予定           */
/********************************/
@media (max-width: 600px) {
.cs_yotei table tr:first-child th,
.cs_yotei table tr:first-child td {
    display: none;
}
}
/********************************/
/*           各消防団           */
/********************************/
.cs_belt {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color: #FED8A1;
}
/*消防団名*/
.cs_name{
    text-align: center;
    font-size: 3.4rem;
    margin-bottom: 30px;
}
.cs_name span {
    margin-left: 25px;
    font-size: 2.4rem;
    letter-spacing: 3px;
}
/*ふりがな*/
.cs_name rt{
    font-size: 1.4rem;
    display: ruby-text;
}
.cs_contents_block {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
/*住所、電話番号、FAX*/
.cs_content{
    width: 310px;
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #FFF;
    border: 3px solid #F60;
    border-radius: 5px;         /* CSS3草案 */
    font-weight: 700;
}
/*各情報タイトル*/
.cs_content_title {
	margin-top: 20px;
	font-size: 1.4rem;
	text-align: center;
}
.cs_content_title img {
    margin-right: 10px;
}
/*住所-郵便番号*/
.cs_content_post {
    margin-top: 10px;
    margin-left: 30px;
}

/*住所*/
.cs_content_address {
    margin-left: 30px;
    font-size: 1.3rem;
}
/*事務所管*/
.cs_content_place {
    text-align: right;
    margin-right: 30px;
}
/*電話番号、FAX*/
.cs_content_number{
    margin-top: 30px;
    text-align: center;
    font-size: 1.8rem;
}
/*消防団詳細*/
.cs_info{
    margin: 55px 0 45px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
/*団長写真*/
.cs_info_img{
    position: relative;
    margin: 0 10px 10px;
    overflow: hidden;
    border-radius: 5px;
    border: solid 1px #CCC;
}
@media (min-width: 710px) {
.cs_info_img{
    width: 690px;
    height: 520px;
}
.cs_info_img img{
    width: 690px;
    height: 520px;
    object-fit: contain; 
}
}
@media (max-width: 709px) {
.cs_info_img{
    width: calc(100% - 20px);
}
.cs_info_img img{
    width: 100%;
}
}
.cs_info_img_name{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 10px 25px;
    text-align: center;
    font-weight: 700;
    background-color: rgba( 204, 204, 204, 0.55 );
    text-shadow: 1px 0px 1px #ffffff,
                -1px 1px 1px #ffffff,
                 1px -1px 1px #ffffff,
                -1px -1px 1px #ffffff;
}
@media (min-width: 710px) {
.cs_info_img_name{
    width: 690px;
    font-size: 1.6rem;
}
.cs_info_img_name span{
    font-size: 1.0rem;
}
}
@media (max-width: 709px) {
.cs_info_img_name{
    width: 100%;
    font-size: 1.0rem;
}
.cs_info_img_name span{
    font-size: 0.8rem;
}
}
@media (max-width: 709px) {.pcnm {display: none;}}
@media (min-width: 710px) {.mbnm {display: none;}}
/*団員情報*/
.cs_info_content{
    margin: 0 10px;
}
.cs_info_content_table th,
.cs_info_content_table td {
    border: solid 1px #D9D9D9;
}
.cs_info_content_table th {
    background-color: #EFEFEF;
    padding: 15px;
}
.cs_info_content_table td {
    text-align: center;
    font-weight: 700;
    padding: 25px 20px;
}
.cs_info_content_now{
    text-align: right;
}
.cs_info_content_hp {
    margin-top:5px;
    text-align: right;
    word-break: break-all;
}
/*地図*/
/* ========== レスポンシブなマップ枠 ========== */
.map-wrap2 {
    width: 100%;
    /*max-width: 940px;*/     /* ページ幅に合わせて調整してね */
    margin: 0 auto;
    /* アスペクト比で高さを確保（16:9）。固定高にしたいなら .map に height を指定でもOK */
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.map {
  width: 100%;
  height: 100%; /* 親の aspect-ratio に追従 */
}

/* 画面が縦長のスマホで“ちょい高め”にしたいとき */
@media (max-width: 480px) {
  .map-wrap2 { aspect-ratio: 4 / 3; }
}