@charset "utf-8";

/* all */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
html {
    font-size: 100%;
}
body {
    font-family: "Roboto","Noto Sans Japanese","ヒラギノ角ゴ Pro w3",sans-serif;
    line-height: 1.9;
    color: #6A6868;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
img {
    max-width: 100%;
}
*,*::after,::before{
    box-sizing: border-box;
}



/* header */
header {
    height: 60px;
    position: fixed;
    z-index: 999;
    top: 0%;
    left: 0%;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.3);
}
.page-header {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}
.wrapper{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 4%;
}

.logo-area {
    height: 100%;
}
.logo-area a {
    display: flex;
}
.logo-area-image {
    display: block;
    width: 150px;
    height: 57px;
}


/* nav-pc */

.nav-area{
    display: flex;
    align-items: center;
}
.nav-area .icon-btn-area {
    display: flex;
    width: 100%;
    text-align: center;
    gap: 20px;
}
.icon-btn-area li {
    width: 150px;
    list-style: none;
}
.icon-btn-area a {
    display: inline-block;
    color: #000;
    text-decoration: none;
}
.icon-btn-area a:hover {
    background-color: rgba(206, 119, 56, 0.5);
    border-bottom: solid 1px #6A6868;
}


/* mvスクロールテスト */

@keyframes scrollVis {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 2230px 0;
	}
}

@keyframes scrollVisWide {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 2601px 0;
	}
}

@keyframes scrollVisTablet {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 1784px 0;
	}
}

@keyframes scrollVisTabletWide {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 2081px 0;
	}
}

@keyframes scrollVisSp {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 738px 0;
	}
}

@keyframes scrollVisSpWide {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 860px 0;
	}
}

.mv_scroll {
    height: 95vh;
    display: flex;
    flex-direction: column;
}

.topScrollImg-no1 {
    background-image: url(/img/scroll1.webp);
    flex: 1;
}
.topScrollImg-no2 {
    background-image: url(/img/scroll2.webp);
    animation-direction: reverse;
    flex: 1;
}

.topScrollImg {
    height: 266px;
    background-size: cover;
    background-repeat: repeat-x;
    background-position: 0 0;
    animation-name: scrollVis;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
    animation-duration: 90s;
    animation-timing-function: linear;
    transform: none;
}
.mv_text {
    background-color: antiquewhite;
    flex: 1.5;
    display: flex;
}
.mv_box {
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}
.mv_inner {
    max-width: 90vw;
}
.mv_title {
    font-size: 40px;
    margin: 0 auto;
    flex: 2;
}
.mv_title p {
    font-weight: 600;
    color:#CE7738
}
.highlighter {
	background: linear-gradient(transparent 60%, #E2DDD3 60% 90%, transparent 90%);
}
.mv_logo {
    flex: 1.5;
}
.mv_logo img {
    margin: auto 0;
}

/*　main */
.gBody {
    margin-top: 30px;
}
main{
    margin-top: 60px;
    background-color: rgba(239, 217, 182, 0.2);
    padding-bottom: 50px;
}
.main-wrapper{
    max-width: 900px;
    margin: 0 auto;
}
.mv {
    position: relative;
    max-width: 1700px;
    margin: 0 auto;
}
.mv_image {
    object-fit: cover;
}
.mv_image img{
    width: 100%;
    object-position: 50% 50%;
}
/*
.mv_text img {
    width: 30%;
    position: absolute;
    top: 30%;
    left: 35%;
    transform: translate( -0%, -0%);
    transition: all 3s ease;
    opacity: 1;
}
*/
.mv_sp {
    display: none;
}
.sp_only {
    display: none;
}

/*　greeting　*/

.greeting .text {
    margin: 80px auto 80px;
    text-align: center;
    line-height: 2.5;
    font-weight: 600;
}
.greeting .text p{
    font-size: 25px;
}

/*　メイン全体　*/
.container {
    margin-bottom: 100px;
}
.textarea .title{
    margin-bottom: 20px;
    color: #CE7738;
}/* h2の設定*/

/* ボタン */
.textarea  .btn-area {
    margin: 50px 0 0 0;
    padding: 5px;
    background-color: #CE7738;
    float: right;
    width: 170px;
    height: 40px;
    border-radius: 5px;
    position: relative;
}
.btn-area a{
    color: #fff;;
    display: block;
    padding: 0 0 0 10px ;
}
.btn-area a::before{
    position: absolute;
    top: calc(50% - 6px);
    right: 22px;
    width: 9.5px;
    height: 9.5px;
    content: "";
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 3px 3px 0 0;
    border-radius: 1px;
}
.btn-area:hover {
    background-color: #CEA180;
}

/*　消防団　*/
.container .box {
    display: flex;
    justify-content: space-between;
    margin: 0 30px;
}
.container .box .side-img {
    flex: 1;
}
.container .textarea {
    max-width: 450px;
    flex: 2;
}

/* 福生市消防団団について */
.fussashi  .box{
    flex-direction: row-reverse;
}
.fussashi .box .side-img img {
    float: right;
}
.soshikizu img{
    width: 100%;
    margin-top: 50px;
    box-shadow: 7px 9px 22px -9px rgba(0,0,0,0.6);
}

/*　インタビュー　*/
.topinterview {
    margin-bottom: 100px;
    width: 100%;
    height: 100%;
}
.topinterview_inner {
    background-image: url(/img/gray.jpg);
    background-size: cover;
    border-radius: 10px;
}
.topinterview_mask {
    background: rgba(255, 255, 255, 0.7);
    padding-bottom: 30px;
}
.topinterview_textarea {
    margin-bottom: 20px;
}
.topinterview_title{
    margin-bottom: 20px;
    color: #CE7738;
    position: relative;
    padding-top: 20px;
    padding-left: 40px;
}
.topinterview_title::after{
    content: "";
    width: 40%;
    height: 3px;
    background-color: #CE7738;
    display: block;
    position: absolute;
    bottom: 0;
}
.topinterview_textarea p {
    padding-left: 40px;
}
.topinterview_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 50px;
    margin: 0 70px 40px;
}
.topinterview_list.sick-initialized {
    visibility: visible;
}
.list_slide {
    margin: 10px;
    width: 80%;
    margin: 0 auto;
}
.topinterview_mask  .btn-area {
    margin: 0px auto;
    padding: 5px;
    background-color: #CE7738;
    width: 170px;
    height: 40px;
    border-radius: 5px;
    position: relative;
}
.topinterview_mask  .btn-area:hover {
    background-color: #CEA180;
}

/*SNS*/
.sns_access_container {
    width: 100%;
    margin-bottom: 100px;
}
.main-wrapper2 {
    max-width: 900px;
    margin: 0 auto;
}
.top_boxes {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    height: 50%;
}
.sns_inner {
    background-color: #CEA180;
    width: 100%;
}
.sns_mask {
    margin: 0 auto;
}
.sns_textarea {
    margin: 0 20px;
}
.sns_textarea h2{
    margin-bottom: 20px;
    color: #fff;
    position: relative;
    padding-top: 20px;
}
.sns_textarea h2::after{
    content: "";
    width: 100%;
    height: 3px;
    background-color: #fff;
    display: block;
    position: absolute;
    bottom: 0;
}
.sns_textarea p {
    color: #fff;
    padding-bottom: 10px;
}
.facebook_plugin{
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}
.facebook_plugin .fb-page {
    width: 100%;
    height: 500px;
}

/*アクセス*/
.access_inner {
    background-color: #fff;
    width: 500px;
}
.sns_mask {
    margin: 0 auto;
}
.access_textarea {
    margin: 0 20px;
}
.access_textarea h2{
    margin-bottom: 20px;
    color: #707070;
    position: relative;
    padding-top: 20px;
}
.access_textarea h2::after{
    content: "";
    width: 100%;
    height: 3px;
    background-color: #707070;
    display: block;
    position: absolute;
    bottom: 0;
}
.access_textarea p {
    color: #707070;
    padding-bottom: 10px;
}
.map_plugin{
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}
.map_plugin iframe {
    width: 100%;
    height: 400px;

}

/*　footer　*/
footer {
    background-color: #CE7738;
}
.footer_container {
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    margin: 0 auto;
}
.footer_logo {
    width: 160px;
    margin: auto 0;
    padding-left: 0px;
}
.footer_address {
    margin: auto 0;
}

.footer_address p {
    font-size: 15px;
    color: #fff;
    line-height: 1.6;
}
.footer_address a{
    color: #fff;
}
.copyright {
    color: #fff;
    font-size: 11px;
    text-align: center;
    padding-bottom: 10px;
}

/*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background:#FA822B;
    border-radius: 120px;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    text-transform: uppercase; 
    text-decoration: none;
    font-size:0.6rem;
    transition:all 0.3s;
  }
  
  #page-top a:hover{
    background: #777;
  }
  
  /*リンクを右下に固定*/
  #page-top {
    position: fixed;
    right: 30px;
    bottom:100px;
    z-index: 2;
      /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  
  /*　上に上がる動き　*/
  
  #page-top.UpMove{
    animation: UpAnime 0.5s forwards;
  }
  @keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /*　下に下がる動き　*/
  
  #page-top.DownMove{
    animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(0);
    }
    to {
      opacity: 1;
    transform: translateY(100px);
    }
  }


/* ここから「消防団ってなに？」ページ */
#treatment {
    padding-top: 100px;
    margin-top: -100px;
}
.h1_area {
    color: #fff;
    position: relative;
    height: 250px;
}
.flag2 {
    height: 250px;
    width: 100%;
    object-fit: cover;
    filter: brightness(.5);
}

.page-head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page-link {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: -40px;
}
.page-link_item {
    display: inline-flex;
    position: relative;
} 
.page-link_item:nth-child(2) {
    padding-left: 40px;
} 
.page-link_item:nth-child(3) {
    padding-left: 40px;
} 
.page-link_inner {
    color: #fff;
    background-color: #FA822B;
    width: 200px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem;
}
.page-link_inner:hover {
    opacity: 0.8;
}

/*　treatment　*/
.page-linkG1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 500px;
}
.main_box {
    margin-bottom: 50px;
}
.main_inner {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}
.title_lv1 {
    font-size: 44px;
    text-align: center;
    margin-bottom: 1rem;
}
.syouboudan_textarea {
    margin:50px 50px;
}
.syouboudan_title {
    margin-bottom: 20px;
}
.syouboudan_textarea h2::after{
    content: "";
    width: 90%;
    height: 3px;
    background-color: #707070;
    display: block;
    position: absolute;
}
.syouboudan_boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin: 0 50px;
}
.title_lv3 {
    color: #FA822B;
    text-align: center;
    margin-bottom: 20px;
    font-size: 21px;
}
.box_icon {
    margin: 0 auto;
    text-align: center;
}
.contents_box img{
    width: 140px;
    margin-bottom: 20px;
}

/* activity */
#activity {
    padding-top: 100px;
    margin-top: -100px;
}
.normaly {
    margin-bottom: 50px;
}
.activity_box {
    margin-bottom: 100px;
}
.title_active {
    margin-bottom: 60px;
}
.contents_box {
    position: relative;
    margin-bottom: 20px;
}
.title_lv4 {
    color: #6A6868;
    margin-bottom: 20px;
    font-size: 18px;
}
.title_lv4 span {
    border-left: 5px solid #FA822B;
    display: block;
    padding: 5px 0 5px 10px;
    line-height: 1.2;
} 
.box_activity img {
    width: 290px;
    height: 100%;
    padding: 0 0 10px;
    display: block;
    margin: 0 auto;
}
.top-btn {
    display: block;
    text-align: center;
    margin-top: 70px;
}
.top-btn-text {
    display: inline-block;
    background-color: #FA822B;
    color: #fff;
    padding: 5px 10px;
    width: 180px;
}
.top-btn-text:hover {
    background-color: #CE7738;
}

/* 「5分団について」ページ  */
.page-linkG2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    width: 600px;
}
.page-link_itemG {
    display: inline-block;
    width: 100%;
    background-color: #FA822B;
}
.page-link_itemG:hover {
    background-color: #CE7738;
}
.page-link_innerG {
    color: #fff;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 30px 20px 30px 10px;
}

#message {
    padding-top: 100px;
    margin-top: -100px;
}
.message_box {
    display: flex;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
.box_person {
    flex: 1;
    text-align: center;
}
.box_person img {
    width: 200px;
}
.box_name-area {
    text-align: center;
}
.leader_name {
    font-size: 30px;
    font-weight: 600;
    color: #FA822B;
    position: relative;
}
.leader_name::after{
    content: "Yasuyuki Ota";
    font-size: 12px;
    color: #6A6868;
    position: absolute;
    top: 50px;
    left: 66px;
}
.leader_box span {
    display: block;
    padding-top: 20px;
}
.box_text {
    flex: 2;
}
.box_text p {
    text-align: justify;
}
#interview {
    padding-top: 100px;
    margin-top: -100px;
}

.interview_boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 70px 40px;
}
.interview_boxes.sick-initialized {
    visibility: visible;
}

.box_interview img {
    width: 170px;
    height: 100%;
    padding: 0 0 10px;
    display: block;
    margin: 0 auto;
}
/*
.box_interview > .title_lv4 {
    text-align: center;
}
*/
.box_interview > .title_lv4 span {
    border-left: 5px solid #FA822B;
    padding: 5px 0 5px 10px;
    display: inline;
    line-height: 1.2;
} 

.leader_name .status {
    text-align: center;
    font-size: 0.8rem;
}
.box_interview .status {
    text-align: center;
    font-size: 0.8rem;
}

.member_box span {
    display: block;
}

.member_name {
    font-size: 24px;
    font-weight: 600;
    color: #FA822B;
    position: relative;
}
.member_name .status {
    font-size: 10px;
    font-weight: 600;
    color: #FA822B;
    position: relative;
}

.main_inner .btn-area {
    margin: 0 auto;
    padding: 5px;
    background-color: #CE7738;
    width: 170px;
    height: 40px;
    border-radius: 5px;
    position: relative;   
}
.main_inner  .btn-area:hover {
    background-color: #CEA180;
}
#eligible {
    padding-top: 100px;
    margin-top: -100px;
}
.eligible_list {
    margin: 10px 40px;
}
.eligible_contact {
    margin: 0 50px;
}
.eligible_contact a {
    color: #707070;
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto 50px;
}

.slider img {
    width: 200px;;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}


/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(0deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(0deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
End スライダーのためのcss
===================================*/

/*「問い合わせ」ページ*/
.contact_form {
    width: 100%;
    height: 1200px;
}


/* タブレットサイズ */
@media screen and (max-width: 999px) {
    /* メイン全体 */
    body {
        line-height: 1.8;
    }
    p {
        margin-block-start: 0;
        margin-inline-end: 0;
    }
    /* header */
    .wrapper {
        max-width: 820px;
        padding: 0 20px;
    }
    .nav-area .icon-btn-area {
        display: flex;
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 20px;
    }
    .gNav.isShow {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
        transition-delay: 0s, 0s, 0s;
        pointer-events: auto;
    }
    .gNav {
        background-color: #f8f8f8;
        position: absolute;
        z-index: 1;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        overflow: auto;
        box-sizing: border-box;
        padding: 40px 0 50px;
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transform-origin: center top;
        transform-origin: center top;
        opacity: 0;
        transition-property: opacity, transform, -webkit-transform;
        transition-duration: .5s, 0s, 0s;
        transition-delay: 0s, .5s, .5s;
        pointer-events: none;
    }
    .icon-btn-area li {
        list-style: none;
        font-size: 30px;
        width: 100%;
    }
    .gNav li {
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .gNav li::after {
        content: "";
        display: block;
        width: 305px;
        max-width: 100%;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        height: 1px;
        background-color: #cacaca;
        bottom: 0;
        position: absolute;
        z-index: 0;
    }
    .gNav li > a {
        display: flex;
        text-decoration: none;
        color: inherit;
        font-weight: bold;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        transition-duration: .3s;
    }
    .gNav li > a:first-child {
        padding: 0px 10px 10px;
    }
    .gNav li > a:nth-child(2) {
        padding: 50px 10px 10px;
    }
    .gNav li > a:last-child {
        padding: 50px 10px 10px;
    }

    .gMenuBtn_bar {
        display: block;
        width: 24px;
        height: 2px;
        background-color: currentColor;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        top: 0;
        transition-duration: .3s;
        transition-property: transform, top;
    }
    .gMenuBtn_bar-no2 {
        margin: 5px auto;
    }
    .isShow > .gMenuBtn_bar-no1 {
		top: 7px;
		transform: rotate(-45deg);
	}
	.isShow > .gMenuBtn_bar-no2 {
		transform: scale(0, 1);
	}
	.isShow > .gMenuBtn_bar-no3 {
		top: -7px;
		transform: rotate(45deg);
	}

    .gMenuBtn {
        display: block;
        position: fixed;
        z-index: 1002;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
        background-color: #CE7738;
        color: #fff;
    }
    .gMenuBtn_img {
        display: block;
        position: fixed;
        right: 11px;
        margin-top: 2px;
    }

    
    /* footer */
    .footer_address p {
        font-size: 15px;
        color: #fff;
    }

    /*mvスクロール*/
    .mv_scroll {
        height: 98vh;
        display: flex;
        flex-direction: column;
    }    
    .mv_text {
        background-color: antiquewhite;
        flex: 1.1;
        display: flex;
    }
    .mv_box {
        margin: 0px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 50px;
    }
    .mv_title {
        font-size: 37px;
        margin: 0 auto;
        flex: 2;
    }
    .mv_title p {
        font-weight: 600;
        color:#CE7738
    }


    /* トップページ */
    .greeting .text {
        line-height: 2.0;
    }
    .container .box {
        display: flex;
        justify-content: space-between;
        margin: 0 50px;
        gap: 50px;
    }
    .topinterview_inner {
        background-image: url(/img/gray.jpg);
        background-size: cover;
        border-radius: 10px;
        max-width: 730px;
        margin: 0 auto;
    }
    .top_boxes{
        display: flex;
        justify-content: space-between;
        gap: 25px;
        height: 50%;
    }
    .sns_access_container {
        max-width: 750px;
        margin: 0 auto;
        margin-bottom: 0px;
        display: flex;
        justify-content: space-between;
    }
    .sns_inner {
        background-color: #CEA180;
        width: 80%;
        margin: 0 auto;
        max-width: 350px;
    }
    .sns_mask {
        margin: 0 auto;
        max-height: 680px;
    }
    .facebook_plugin {
        max-width: 350px;
        height: 100%;
    }
    .access_inner {
        background-color: #fff;
        width: 100%;
        max-width: 400px;
    }
    .map_plugin {
        width: 100%;
    }
    /* 消防団ってなに？ */
    .syouboudan_textarea {
        margin: 15px 50px;
    }
    .syouboudan_textarea h2::after{
        content: "";
        width: 88%;
        height: 3px;
        background-color: #707070;
        display: block;
        position: absolute;
    }
    .normaly {
        margin-top: 50px;
    }
    .activity_box {
        margin-bottom: 50px;
    }
    .syouboudan_boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    /* 第5分団について */
    .main_inner {
        max-width: 800px;
        margin: 0 auto;
        width: 100%;
        position: relative;
    }
    .message_box {
        display: flex;
        gap: 2rem;
        max-width: 720px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .leader_name {
        font-size: 24px;
        font-weight: 600;
        color: #FA822B;
        position: relative;
    }
    .leader_name::after{
        content: "Yasuyuki Ota";
        font-size: 12px;
        color: #6A6868;
        position: absolute;
        top: 40px;
        left: 55px;
    }
    .box_name-area span {
    display: block;
    font-size: 14px;
    padding-top: 12px;
    }
    .status {
        padding-top: 5px;
        text-align: center;
        font-size: 0.8rem;
        line-height: 1.0;
    }
    .eligible_contact p {
        margin-bottom: 0;
    }
    .box_interview > .title_lv4 span {
        border-left: 5px solid #FA822B;
        padding: 5px 0 5px 10px;
        display: inline;
        line-height: 1.2;
    } 
    /*「問い合わせ」ページ*/
.contact_form {
    width: 100%;
    height: 880px;
    }
}

/* SPサイズ */
@media screen and (max-width: 700px) {
    /* メイン全体 */
    .gBody {
        text-align: justify;
    } /*テキスト本文の両端揃え*/
    .gBody p {
        font-size: 14px;
    }

    /* ヘッダー */

    /*footer*/
    .footer_container {
        height: 190px;
        display: block;
    }
    .footer_logo {
        padding: 30px 0 15px;
        margin: 0 auto;
    }
    .footer_address {
        text-align: center;
        line-height: 1.6;
    }
    .copyright {
        color: #fff;
        font-size: 11px;
        text-align: center;
        padding-bottom: 10px;
        padding-top: 20px;
    }

    /*mvスクロール*/
    .mv_box {
        margin: 0px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .mv_title {
        writing-mode: vertical-rl;
        margin: 20px auto;
        flex: 1.3;
        padding-right: 30px;
    }
    .mv_title p {
        font-size: 22px;
        font-weight: 600;
        color: #CE7738;
    }
    .highlighter {
        background: linear-gradient(90deg, transparent 40%, #E2DDD3 100% 100%, transparent 100%);
    }
    .mv_logo {
        width: 50%;
    }

    /* トップページ */
    .mv_pc {
        display: none;
    }
    .mv_sp {
        display: block;
    }
    /*
    .mv_text img {
        width: 90%;
        position: absolute;
        top: 20%;
        left: 10%;
        transform: translate( -5%, -0%);
        transition: all 1s ease;
        opacity: 1;
    }*/
    .container .box {
        display: flex;
        flex-flow: column;
        margin: 0 10px;
        gap: 0;
    }
    .container .box .side-img {
        flex: 3;
    }
    .pc_only {
        display: none;
    }
    .sp_only {
        display: block;
    }

    /* greeting */
    .greeting .text p {
        font-size: 16px;
    }
    .facebook_plugin iframe {
        width: 100%;
        aspect-ratio: 16/9;
    }
    .map_plugin iframe {
        width: 100%;
        aspect-ratio: 16/9;
    }

    /*========= ページトップのためのCSS ===============*/

/*リンクの形状*/
#page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background:#FA822B;
    border-radius: 120px;
    width: 50px;
    height: 50px;
    color: #fff;
    text-align: center;
    text-transform: uppercase; 
    text-decoration: none;
    font-size:0.6rem;
    transition:all 0.3s;
  }
  
  #page-top a:hover{
    background: #777;
  }
  
  /*リンクを右下に固定*/
  #page-top {
    position: fixed;
    right: 20px;
    bottom:30px;
    z-index: 2;
      /*はじめは非表示*/
    opacity: 0;
    transform: translateY(100px);
  }
  
  /*　上に上がる動き　*/
  
  #page-top.UpMove{
    animation: UpAnime 0.5s forwards;
  }
  @keyframes UpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /*　下に下がる動き　*/
  
  #page-top.DownMove{
    animation: DownAnime 0.5s forwards;
  }
  @keyframes DownAnime{
    from {
      opacity: 1;
    transform: translateY(0);
    }
    to {
      opacity: 1;
    transform: translateY(100px);
    }
  }


    /* 福生市消防団団について */
    .top_title_boxes{
        display: flex;
    }
    .reverse {
        flex-direction: row-reverse;
    }
    .side-img {
        flex: 2;
    }
    .textarea .title {
        flex: 1;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 30px;
        margin: 0 auto;
    }
    .top_title_boxes .side-img img {
        float: right;
    }
    .soshikizu img{
        width: 100%;
        margin-top: 50px;
        box-shadow: 7px 9px 22px -9px rgba(0,0,0,0.6);
    }
    .box .description {
        padding-top: 30px;
    }
    .soshikizu img {
        width: 100%;
        margin-top: 10px;
        box-shadow: 7px 9px 22px -9px rgb(0 0 0 / 60%);
    }

    /* ボタン */
    .box .btn-area {
        margin: 20px auto 0;
        padding: 5px;
        background-color: #CE7738;
        float: right;
        width: 170px;
        height: 40px;
        border-radius: 5px;
        position: relative;
    }
    /* interview */
    .main-wrapper {
        max-width: 340px;
    }
    .topinterview {
        margin-bottom: 50px;
        width: 100%;
        height: 100%;
    }
    .topinterview_title {
        margin-bottom: 20px;
        color: #CE7738;
        position: relative;
        padding: 20px 0 10px;
        text-align: center;
    }
    .topinterview_title::after{
        content: "";
        width: 80%;
        height: 3px;
        background-color: #CE7738;
        display: block;
        position: absolute;
        left: 10%;
        bottom: 0;
    }
    .topinterview_textarea p {
        padding: 0 20px;
        display: inline-block;
    }

    /*　SNS　*/
    .sns_access_container {
        max-width: 350px;
        margin-bottom: 0px;
    }
    .top_boxes {
        display: flex;
        flex-direction: column;
        gap: 25px;
        row-gap: 25px;
        column-gap: 25px;
        height: 50%;
    }
    .sns_inner {
        background-color: #CEA180;
        width: 100%;
        margin: 0 auto;
        max-width: 350px;
    }
    .facebook_plugin .fb-page {
        width: 100%;
        height: 100%;
    }
    /* access */
    .access_inner {
        background-color: #fff;
        width: 100%;
        max-width: 350px;
    }

    /*　「消防団ってなに？」ページ　*/
    .page-linkG1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        width: 320px;
    }
    .page-link_inner {
        color: #fff;
        background-color: #FA822B;
        width: 140px;
        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        padding: 0.5rem;
    }
    .syouboudan_textarea {
        margin: 50px 20px 30px;
    }
    .syouboudan_boxes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3rem;
    }
    .title_active  {
        color: #FA822B;
        text-align: center;
        margin-bottom: 30px;
        font-size: 21px;
        position: relative;
        padding: 1rem 1rem;
    }
    .title_active:after {
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 10px;
        content: '';
        background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
        background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
        background-size: 7px 7px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
     .activity_box .syouboudan_boxes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .contents_box {
        position: relative;
        margin-bottom: 30px;
    }
    .top-btn {
        display: block;
        text-align: center;
        margin: 50px 0 30px;
    }

    /* 第5分団について */
    .page-linkG2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 290px;
    }
    .page-link_itemG {
        display: inline-block;
        width: 100%;
        background-color: #FA822B;
    }
    .page-link_innerG {
        color: #fff;
        width: 150px;
        text-align: center;
        font-size: 0.8rem;
        font-weight: bold;
        padding: 10px 20px 10px 10px;
    }
    .page-head .title_lv1 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 1rem;
    }
    .message_box {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: 335px;
        margin: 0 auto;
        padding: 0 20px;
    }
    .box_flex {
        display: flex;
        justify-content: space-between;
    }
    .interview_boxes .box_interview {
        margin: 0 auto;
    }
    .box_person {
        flex: 1;
    }
    .box_name-area {
        flex: 1;
        margin: auto 0;
    }
    .leader_name span {
        font-size: 20px;
    }
    .box_name-area p {
        font-size: 24px;
        font-weight: 600;
        color: #FA822B;
        position: relative;
    }
    .leader_name::after {
        content: "Yasuyuki Ota";
        font-size: 12px;
        color: #6A6868;
        position: absolute;
        top: 36px;
        left: 38px;
    }
    .eligible_list {
        margin: 10px 40px;
    }
    .box_interview > .title_lv4 span {
        border-left: 5px solid #FA822B;
        padding: 5px 0 5px 10px;
        display: inline;
        line-height: 1.2;
    } 
    .status > p {
        margin-bottom: 8px;
    }
    .eligible_contact {
        margin: 0 20px;
    }
    /*「団員紹介」ページ*/
    .interviews .h1_area {
    height: 180px;
    color: #fff;
    }
    .interviews > .h1_area > picture > .flag2 {
        height: 180px;
        width: 100%;
        object-fit: cover;
        filter: brightness(.5);   
    }
    .interview_box01 {
        margin-top: 50px;
    }
    .syouboudan_title {
        margin-bottom: 20px;
        font-size: 22px;
    }
    .interviews .message_box {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: 340px;
        margin: 0 auto;
        padding: 0 5px;
    }
    /*「問い合わせ」ページ*/
    .interviews .h1_area {
        height: 180px;
        color: #fff;
        }
        .interviews > .h1_area > picture > .flag2 {
            height: 180px;
            width: 100%;
            object-fit: cover;
            filter: brightness(.5);   
        }
    .interview_main_box {
        height: 1100px;
    }
    .contact_form {
        width: 100%;
        height: 1000px;
        position: absolute;
        top: 50px;
    }
}