kitagata_old/css/style.css

@media (max-width: 768px) {
    body {
        font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
        background-color: #F7F3BC;
    }

    /*　ヘッダー　*/
    .header {
        display: flex;
        margin-bottom: 16px;
        width: 100%;
        background-color: #ffffff;
    }

    .headerLogo__image {
        margin: 10px 6px;
        width: 37px;
        height: 32px;
        object-fit: cover;
    }

    .headerTitle {
        align-self: center;
        color: #109033;
        font-size: 7.5vw;
    }

    .headerSubTitle {
        align-self: center;
        padding-top: 8px;
        padding-left: 8px;
        color: #109033;
        font-size: 3.8vw;
    }

    /*　新型コロナウィルス感染症について　*/
    .coronaNotice {
        position: relative;
        margin: 0 20px 16px;
        padding: 1px;
        min-height: 120px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .coronaNoticepadding {
        display: block;
        position: relative;
        margin: 6px auto;
        width: 94%;
    }

    .aboutCorona {
        display: block;
        position: relative;
        width: 100%;
    }

    .kitagataTownSituation {
        display: block;
        position: relative;
        top: -1%;
        width: 50%;
    }

    .eventCancel {
        display: block;
        position: relative;
        top: -1%;
        width: 50%;
    }

    /* .coronaVaccination {
        display: block;
        position: absolute;
        top: 24%;
        left: 50%;
        width: 50%;
    } */
                .coronaVaccination {
                    display: block;
                    width: 100%;
                }

    .aboutCoronaImg {
        width: 100%;
    }

    .kitagataTownSituationImg {
        width: 100%;
    }

    .eventCancelImg {
        width: 100%;
    }

    .coronaVaccinationImg {
        width: 100%;
    }

    /* 災害情報 */
    .disasterInfo {
        display: flex;
        margin: 0 20px 16px;
        min-height: 32px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .disasterInfoTitleWrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;
    }

    .disasterInfoTitle {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        padding: 0 4px;
        height: 20px;
        background-color: #38abd0;
    }

    .disasterInfoTitle__text {
        font-size: 2.8vw;
        color: #ffffff;
    }

    .disasterInfoDetail {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
        font-size: 3.2vw;
    }

    /* 新着情報 */
    .newInfo {
        margin: 0 20px 16px;
        min-height: 120px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .newInfoTitle {
        position: relative;
        margin-bottom: 4px;
        min-height: 22px;
        border-radius: 8px 8px 0 0;
        background-color: #FF6666;
    }

    .newInfoTitle__text {
        padding: 6px 0 0 16px;
        font-size: 3.2vw;
    }

    .newInfoText {
        color: #ffffff;
    }

    .newInfoList {
        margin-top: 3px;
        font-size: 2vw;
        color: #ffffff;
    }

    .newInfoTitle__list {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 70px;
        top: 16%;
        right: 5%;
        background-color: #707070;
    }

    .newInfoTopic {
        margin: 0 auto;
        padding: 0 8px;
        height: 120px;
        width: 84%;
        overflow: scroll;
    }

    .newInfoTopicWrap {
        position: relative;
        display: inline-block;
        margin-bottom: 4px;
    }

    .newInfoTopicWrap__date {
        margin-bottom: 2px;
        font-size: 2.8vw;
    }

    .newInfoTopicWrap__date:before {

    }

    .newInfoTopicWrap__text {
        margin-bottom: 4px;
        font-size: 3.2vw;
    }

    /*  ライフイベント  */
    .lifeEvent {
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 396px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .lifeEventTitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0 24px;
    }

    .lifeEventTitle__text {
        position: relative;
        font-size: 5.4vw;
    }

    .lifeEventTitle__text:before {
        position: absolute;
        bottom: -8px;
        /*left: 20%;*/
        width: 100%;
        height: 2px;
        background: #49A01E;
        content: '';
    }

    .lifeEventContents {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        width: 88%;
    }

    .lifeEventContent {
        display: flex;
        margin-bottom: 16px;
        width: 50%;
    }

    .lifeEventName {
        align-self: center;
        margin-left: 4px;
        font-size: 3.2vw;
    }

    .lifeEventNameException {
        align-self: center;
        margin-left: 4px;
        font-size: 2.8vw;
    }

    /*　町長の部屋以下　*/
    .mayorRoom {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 568px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .mayorRoomContent {
        margin: 16px 12px 8px;
        width: 92%;
    }

    .parliamentContent {
        margin: 0 auto 8px;
        width: 92%;
    }

    .disasterPreventionContent {
        margin: 0 auto 8px;
        width: 92%;
    }

    .kouhouKitagataContent {
        margin: 0 auto 8px;
        width: 92%;
    }

    .kawasemiStoolsContent {
        margin: 0 auto 16px;
        width: 92%;
    }

    .mayorRoomImg {
        width: 100%;
    }

    /*  きたがたまなびすと  */
    .kitagatamanabisuto {
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 597px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .kitagatamanabisutoContents {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 16px 12px;
        width: 92%;
    }

    .kitagatamanabisutoContent {
        width: 47%;
        margin-bottom: 16px;
    }

    .kitagatamanabisutoImg {
        width: 100%;
    }

    /*  関連リンク　*/
    .relatedLinks {
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 249px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .relatedLinksTitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0 24px;
    }

    .relatedLinksTitle__text {
        position: relative;
        font-size: 5.4vw;
    }

    .relatedLinksTitle__text:before {
        position: absolute;
        bottom: -8px;
        /*left: 5%;*/
        width: 100%;
        height: 2px;
        background: #49A01E;
        content: '';
    }

    .relatedLinksContents {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 20px;
        width: 88%;
    }

    .relatedLinksContents__left {
        margin-right: 4px;
        margin-bottom: 4px;
        width: 32%;
    }

    .relatedLinksContents__center {
        margin-right: 4px;
        margin-bottom: 4px;
        width: 32%;
    }

    .relatedLinksContents__right {
        margin-bottom: 4px;
        width: 32%;
    }

    .relatedLinksImg {
        min-height: 37px;
        width: 100%;
    }

    /*  広告スペース　*/
    .advertisementLink {
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 462px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .advertisementLinkTitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0 24px;
    }

    .advertisementLinkTitle__text {
        position: relative;
        font-size: 5.4vw;
    }

    .advertisementLinkTitle__text:before {
        position: absolute;
        bottom: -8px;
        /*left: 12%;*/
        width: 100%;
        height: 2px;
        background: #49A01E;
        content: '';
    }

    .advertisementLinkContents {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 20px;
        width: 88%;
    }

    .advertisementLinkContents__left {
        margin-right: 4px;
        margin-bottom: 4px;
        width: 32%;
    }

    .advertisementLinkContents__center {
        margin-right: 4px;
        margin-bottom: 4px;
        width: 32%;
    }

    .advertisementLinkContents__right {
        margin-bottom: 4px;
        width: 32%;
    }

    .advertisementLinkImg {
        width: 100%;
    }

    /*  町の人口　*/
    .people {
        margin: 0 20px 16px;
        padding-top: 1px;
        min-height: 281px;
        width: 90%;
        border-radius: 8px;
        background-color: #ffffff;
    }

    .peopleTitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 18px 0 24px;
    }

    .peopleTitle__text {
        position: relative;
        font-size: 5.4vw;
    }

    .peopleTitle__text:before {
        position: absolute;
        bottom: -8px;
        /*left: -3%;*/
        width: 100%;
        height: 2px;
        background: #49A01E;
        content: '';
    }

    .peopleContent {
        display: flex;
        align-items: center;
        margin: 0 62px 12px;
        width: 62%;
    }

    .peopleLastContent {
        display: flex;
        align-items: center;
        margin: 0 62px 16px;
        width: 62%;
    }

    .peopleImg {
        width: 12%;
    }

    .people__img {
        width: 100%;
    }

    .icon {
        color: #565656;
        font-size: 1.5em;
    }

    .people__unit {
        margin-left: 8px;
        width: 30%;
        font-size: 3.2vw;
    }

    .people__population {
        margin-bottom: 1px;
        font-size: 4.8vw;
        font-weight: bold;
    }

    .lastUpdate {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
    }

    .lastUpdate__text {
        margin-right: 52px;
        font-size: 3.2vw;
    }

    .peopleLink {
        display: flex;
        justify-content: space-evenly;
        margin: 0 auto 16px;
        width: 68%;
    }

    .peopleLinkText {
        font-size: 3.8vw;
        color: #707070;
    }

    /*  フッター  */
    .footerTitle {
        margin-bottom: 16px;
    }

    .footerTitleLogo {
        display: flex;
        justify-content: center;
    }

    .footerTitleLogo__img {
        margin: 10px 6px;
        width: 37px;
        height: 32px;
        object-fit: cover;
    }

    .footerTitleTownName {
        display: flex;
        justify-content: center;
    }

    .footerTitleLogo__text {
        font-size: 5.4vw;
        color: #109033;
    }

    .footerContent {
        margin-bottom: 16px;
    }

    .footerTextWrap {
        display: flex;
        justify-content: center;
        margin-bottom: 4px;
    }

    .footerLink {
        margin-bottom: 16px;
    }

    .footerTextWrap__text {
        font-size: 4vw;
    }

    .footerLinkWrap {
        display: flex;
        justify-content: center;
        margin-bottom: 4px;
    }

    .footerLinkWrap__text {
        display: block;
        font-size: 10px;
        transform: scale(0.8);
        transform-origin: 0 0;
    }

    #backToButton {
        position: fixed;
        right: 30px;
        bottom: 30px;
        padding: 10px;
        font-size: 86%;
        text-decoration: none;
        border-radius: 5px;
        opacity: 0.0;
        transition: ease .3s;
    }

    #backToButton.view {
        opacity: 1.0;
    }

    .linkNone {
        color: black;
        text-decoration: none;
    }
}