@import url(cssreset.css);
@import url(common.css);
@import url(footer.css);
@import url(header_pc.css) screen and (min-width: 769px);
@import url(header_sp.css) screen and (max-width: 768px);

/* top.css */
/*--------------------------------------*/
section {
    position: relative;
}

/* main image link */
.main-image {
    position: relative;
}
.main-image ul li {
    position: absolute;
    width: 4.0%;
    height: 4.2%;
    z-index: 2;
}
.main-image ul li a {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-indent: -9999px;
}
.main-image ul li a:hover {
    opacity: 1;
    transform: scale(2.0);
}
.main-image ul li.link01 a {/*百葉箱*/
    background-image: url(../images/top_icon_balloon01.png);
}
.main-image ul li.link02 a {/*ハザードマップ*/
    background-image: url(../images/top_icon_balloon02.png);
}
.main-image ul li.link03 a {/*火山の噴火*/
    background-image: url(../images/top_icon_balloon01.png);
}
.main-image ul li.link04 a {/*ストローハウス*/
    background-image: url(../images/top_icon_balloon01.png);
}
.main-image ul li.link05 a {/*小さな雷*/
    background-image: url(../images/top_icon_balloon04.png);
}
.main-image ul li.link06 a {/*雨粒の形*/
    background-image: url(../images/top_icon_balloon03.png);
}
.main-image ul li.link07 a {/*過冷却水*/
    background-image: url(../images/top_icon_balloon03.png);
}

.main-image ul li.link01 {/*百葉箱*/
    top: 53.9%;
    left: 52.4%;
}
.main-image ul li.link02 {/*ハザードマップ*/
    right: 8.2%;
    bottom: 22.6%;
}
.main-image ul li.link03 {/*火山の噴火*/
    left: 11.7%;
    bottom: 30.0%;
}
.main-image ul li.link04 {/*ストローハウス*/
    left: 50.7%;
    bottom: 32.4%;
}
.main-image ul li.link05 {/*小さな雷*/
    top: 32.7%;
    left: 42.9%;
}
.main-image ul li.link06 {/*雨粒の形*/
    top: 23.9%;
    left: 54.4%;
}
.main-image ul li.link07 {/*過冷却水*/
    top: 23.9%;
    left: 58%;
}


section#lead {
    background-color: #006536;
    padding: 60px 3% 50px;
}
@media only screen and (max-width: 768px) {
    section#lead {
        padding: 8vw 1% 8vw;
    }
}

section#lead .btn {
    margin-bottom: 2em;
}
section#lead .btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em;
    border: 2px solid #8fc31f;
    border-radius: 9999px;
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.4);
    text-align: center;
    line-height: 1.2;
    font-size: 20px;
    font-weight: 900;
    color: #006536;
}
section#lead .btn a:hover {
    box-shadow: none;
    transform: translate(3px,3px);
}
@media only screen and (max-width: 768px) {
    section#lead .btn a {
        font-size: 3.0vw;
    }
}

section#lead p {
    text-align: center;
    line-height: 2.0;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
@media only screen and (max-width: 768px) {
    section#lead p {
        font-size: 3.0vw;
    }
}


section#menu01 {
    background-color: #cfe298;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: url(../images/top_bg_contents.jpg);
    background-size: 50%;
    padding-bottom: 15px;
}
section#menu01:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #006536;
    content: "";
}
@media only screen and (max-width: 768px) {
    section#menu01:before {
        height: 28vw;
    }
}
section#menu01 article {
    z-index: 1;
}

section#menu02 {
    background-color: #fbd39a;
    padding-top: 60px;
    padding-bottom: 10px;
}

/* article common */
section .flex-wrap {
    width: 94%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
section article {
    position: relative;
    width: 47.5%;
    margin-bottom: 50px;
    z-index: 1;
}
@media only screen and (max-width: 1080px) {
    section article {
        margin-bottom: 4.2vw;
    }
}
@media only screen and (max-width: 768px) {
    section article {
        width: 100%;
        margin-bottom: 8vw;
    }
}

section article .sub-title {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100px;
    padding-left: 5%;
}
section article .sub-title h2 {
    font-family: "Mochiy Pop One", sans-serif;
    font-size: 34px;
    font-weight: 400;
}
@media only screen and (max-width: 1080px) {
    section article .sub-title {
        height: 9vw;
    }
    section article .sub-title h2 {
        font-size: 3.2vw;
    }
}
@media only screen and (max-width: 768px) {
    section article .sub-title {
        height: 19.5vw;
    }
    section article .sub-title h2 {
        font-size: 7vw;
    }
}

section article .sub-title:after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    padding-top: 26.087%;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    content: ""
}
section article.menu-a .sub-title:after {
    background-image: url("../images/top_bg_menu_a.png");
}
section article.menu-b .sub-title:after {
    background-image: url("../images/top_bg_menu_b.png");
}
section article.menu-c .sub-title:after {
    background-image: url("../images/top_bg_menu_c.png");
}
section article.menu-d .sub-title:after {
    background-image: url("../images/top_bg_menu_d.png");
}
section article.menu-e .sub-title:after {
    background-image: url("../images/top_bg_menu_e.png");
}
section article.menu-f .sub-title:after {
    background-image: url("../images/top_bg_menu_f.png");
}
section article.menu-g .sub-title:after {
    background-image: url("../images/top_bg_menu_g.png");
}

section article .content {
    position: relative;
    background-color: #ffffff;
    padding: 5%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
@media only screen and (max-width: 768px) {
    section article .content {
        padding: 5% 3%;
    }
}
section article.menu-a,
section article.menu-b,
section article.menu-c,
section article.menu-d {
    display: flex;
    flex-direction: column;
}
section article.menu-a .content,
section article.menu-b .content,
section article.menu-c .content,
section article.menu-d .content {
    flex-grow: 1;
}

section article a.cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
section article a.cover ~ .sub-title,
section article a.cover ~ .content p {
    transition: all .3s ease;
}
section article a.cover:hover ~ .sub-title,
section article a.cover:hover ~ .content p {
    opacity: 0.7;
}

section article p {
    line-height: 1.6;
    font-size: 18px;
    font-weight: 700;
}
@media only screen and (max-width: 768px) {
    section article p {
        text-align: center;
        font-size: 4.2vw;
    }
}

section article dl {
    margin-top: 1em;
}
section article dl div {
    display: flex;
    justify-content: space-between;
}
section article dl div:not(:last-of-type) {
    margin-bottom: 0.5em;
}
section article dl dt {
    display: flex;
    align-items: center;
    width: 5em;
    height: 2.4rem;
    border-radius: 4px;
    text-align: center;
    transition: all .3s ease;
}
section article dl dt:hover {
    opacity: 0.7;
}
section article dl dt a {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}
section article dl dd {
    width: calc(100% - 5.5em);
    padding-top: 0.45em;
    line-height: 1.4;
    font-weight: 700;
}
@media only screen and (max-width: 768px) {
    section article dl div {
        flex-direction: column;
    }
    section article dl div:not(:last-of-type) {
        margin-bottom: 1.5em;
    }
    section article dl dt {
        width: 10em;
        margin-left: auto;
        margin-right: auto;
    }
    section article dl dt a {
        font-size: 3.8vw !important;
    }
    section article dl dd {
        width: 100%;
        text-align: center;
        font-size: 3.4vw;
    }
}
@media only screen and (max-width: 460px) {
    section article dl dt a {
        font-size: 4.6vw !important;
    }
    section article dl dd {
        font-size: 3.8vw;
    }
}

/* 2文字 */
section article dl .volcano a,
section article dl .earthquake a,
section article dl .tsunami a,
section article dl .tornado a,
section article dl .typhoon a,
section article dl .observation a,
section article dl .experiment a,
section article dl .application a {
    letter-spacing: 0.35em;
    text-indent: 0.35em;
}
/* 4文字 */
section article dl .aurora a {
    font-size: 0.985em;
}
/* 5文字 */
section article dl .strategy a {
    font-size: 0.975em;
    letter-spacing: -0.05em;
}


section article.menu-a .sub-title h2,
section article.menu-a p  {
    color: #592c1a;
}
section article.menu-b .sub-title h2,
section article.menu-b p  {
    color: #0073a4;
}
section article.menu-c .sub-title h2,
section article.menu-c p  {
    color: #007679;
}
section article.menu-d .sub-title h2,
section article.menu-d p  {
    color: #ab2075;
}
section article.menu-e .sub-title h2,
section article.menu-e p  {
    color: #aa3f00;
}
section article.menu-f .sub-title h2,
section article.menu-f p  {
    color: #094576;
}
section article.menu-g .sub-title h2,
section article.menu-g p  {
    color: #006637;
}

section article dl .volcano dt {background-color: #c32f07;}
section article dl .earthquake dt {background-color: #592c1a;}
section article dl .tsunami dt {background-color: #0077a6;}
section article dl .cloud dt {background-color: #007981;}
section article dl .rain dt {background-color: #373f82;}
section article dl .snow dt {background-color: #556669;}
section article dl .river dt {background-color: #0061ae;}
section article dl .ocean dt {background-color: #0058a3;}
section article dl .wind dt {background-color: #423885;}
section article dl .tornado dt {background-color: #335261;}
section article dl .typhoon dt {background-color: #503e3f;}
section article dl .thunderstorm dt {background-color: #3a656d;}
section article dl .rainbow dt {background-color: #770e81;}
section article dl .aurora dt {background-color: #4c1885;}
section article dl .observation dt {background-color: #1f469f;}
section article dl .experiment dt {background-color: #283c7f;}
section article dl .strategy dt {background-color: #542a1b;}
section article dl .application dt {background-color: #00573d;}