@charset "utf-8";
html {
font-size: 18px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
border: 0;
vertical-align:top;
max-width: 100%;
height: auto;
}
a {
margin: 0;
padding: 0;
text-decoration: none;
color: #59B200;
}
a:hover {
opacity: 0.7;
}
h1,h2,h3,h4,h5,h6 {
font-weight: 600;
}
body {
font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 1.7;
text-size-adjust: 100%;
}
ul {
list-style-type: none;
}
.container {
max-width: 1080px;
margin: 0 auto;
}
.wrapper {
overflow: hidden;
}
.pc {
display: block;
}
.sp {
display: none;
}
a[href^="tel:"] {
pointer-events: none;
color: #000;
text-decoration: none;
}
/*----------------------------------------
ヘッダー
----------------------------------------*/
#header {
padding: 1.11rem 0;
}
#header h1 {
padding: 1.11rem 0;
}
#header h1 img {
width: 22rem;
height: auto;
aspect-ratio: 396/100;
}
.header-top {
display: flex;
align-items: center;
justify-content: center;
gap: 1.66rem;
font-size: 0.88rem;
margin-bottom: 1.11rem;
}
.publication-date {
width: 7.22rem;
aspect-ratio: 130/122;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
line-height: 1.1;
background: url("../img/circle.png") no-repeat center center/cover;
flex-shrink: 0;
}
.publication-month {
font-size: 2.77rem;
font-weight: 600;
}
.header-bottom {
display: flex;
justify-content: center;
align-items: center;
gap: 1.11rem;
}
.header-bottom::before {
content: "";
border-top: 0.55rem dotted #D1E9C4;
flex-grow: 1;
margin: 0 1.11rem;
}
.header-bottom::after {
content: "";
border-top: 0.55rem dotted #D1E9C4;
flex-grow: 1;
margin: 0 1.11rem;
}
.publication-number {
background: #E4FAE3;
padding: 0 1.38rem;
line-height: 1.4;
border-radius: 50px;
}
/*----------------------------------------
メイン
----------------------------------------*/
.bg {
background: url("../img/bg.png") repeat center center;
padding: 2.22rem 0;
}
.inner {
background: #fff;
box-shadow: 0 0.27rem 0.77rem 0 rgba(0, 0, 0, 0.12);
border-radius: 1.11rem;
}
main {
padding: 3.33rem;
}
/* about */
.about-inner {
display: flex;
justify-content: center;
align-items: center;
gap: 3.33rem;
}
.about-left img {
width: 21.66rem;
height: auto;
box-shadow: 0 0.27rem 0.77rem 0 rgba(0, 0, 0, 0.12);
}
.about-right h2 {
font-size: 1.22rem;
margin-bottom: 1.38rem;
}
.about-right h3 {
font-weight: 500;
color: #59B200;
font-size: 1.11rem;
margin-bottom: 0.55rem;
}
.about-right p {
margin-bottom: 0.83rem;
}
.notice {
font-size: 0.66rem;
vertical-align: top;
}
.icon-notice {
background: #FFFCEA;
padding: 1.11rem 1.38rem;
margin-top: 1.66rem;
border-radius: 0.55rem;
}
.icon-notice>p {
font-size: 0.77rem;
margin-bottom: 0.55rem;
}
.icon-description {
display: flex;
gap: 0.83rem;
align-items: center;
}
.icon-description-image img {
width: 2.88rem;
height: auto;
aspect-ratio: 52/52;
}
.icon-description-inner {
display: flex;
gap: 0.83rem;
align-items: center;
}
.icon-description-text {
font-size: 0.77rem;
}
/* list */
#list {
margin-top: 3.33rem;
position: relative;
z-index: 1;
}
.list-title {
display: flex;
align-items: center;
justify-content: center;
gap: 1.11rem;
width: 100%;
position: relative;
z-index: 2;
}
.topics-title,.news-title {
width: 23.88rem;
padding: 1.6rem 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.11rem;
border-radius: 0.55rem 0.55rem 0 0;
cursor: pointer;
}
.topics-title:hover ,.news-title:hover {
opacity: 0.7;
}
.topics-title {
background: url("../img/topics-title-bg.png") no-repeat center center/cover;
}
.news-title {
background: url("../img/news-title-bg.png") no-repeat center center/cover;
}
.topics-inner {
padding: 0 3.33rem 3.33rem 3.33rem;
background: #fff;
border-radius: 0.55rem;
border: 8px solid #CCEFF8;
}
.all-btn {
display: flex;
align-items: center;
justify-content: center;
}
.all-btn a {
width: 21.66rem;
padding: 1rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1.11rem;
border-radius: 50px;
background: #E9F7FA;
color: #000;
}
.all-btn img {
width: 2.88rem;
height: 100%;
aspect-ratio: 52/52;
}
.topics-inner>ul>li {
padding: 1.66rem 0;
border-bottom: 1px solid #e7e7e7;
}
.topics-inner>ul>li>ul>li {
display: flex;
align-items: center;
}
.topics-inner>ul>li>ul>li {
display: flex;
align-items: center;
}
.flex {
display: flex;
gap: 1rem;
align-items: center;
}
.list-inner .flex {
gap: 0;
}
.data {
display: flex;
align-items: flex-start;
gap: 2rem;
flex-grow: 1;
}
.page {
font-weight: 600;
background: #e9f7fa;
text-align: center;
flex-shrink: 0;
border-radius: 50px;
font-size: 0.9rem;
width: 6rem;
}
.page2 {
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.55rem;
}
.page2::before {
content: "";
width: 0.55rem;
height: 0.16rem;
background: #26c4f9;
}
.title-inner {
flex-grow: 1;
}
.title-inner h3 {
font-size: 1.11rem;
}
.title-inner a {
color: #000;
}
.title-inner h3 + h3 {
margin-top: 0.83rem;
}
.title-inner h4 {
font-weight: 500;
font-size: 0.88rem;
padding-left: 1rem;
text-indent: -1rem;
}
.title-inner h4.bold {
font-weight: 600;
}
.dot {
padding-left: 8rem;
}
.dot .flex {
padding: 0.66rem 0;
border-bottom: 2px dotted #e5e5e5;
}
.dot .data {
flex-direction: column;
gap: 0.6rem;
}
.download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.83rem;
padding: 0 1rem;
flex-shrink: 0;
}
.download-btn img {
width: 2.88rem;
height: 100%;
aspect-ratio: 60/60;
}
.show-area {
display: none;
position: relative;
z-index: 3;
}
.show-area.show {
display: block;
}
.active-area {
margin-bottom: -1.66rem;
}
.active-area.active {
margin-bottom: 0;
}
#news .topics-inner>ul {
display: flex;
flex-wrap: wrap;
gap: 0 2%;
}
#news .topics-inner>ul>li {
width: 49%;
border-bottom: 1px solid #e7e7e7;
}
#news .topics-inner>ul>li:first-child {
width: 100%;
border: unset;
}
#news .topics-inner {
border: 8px solid #dcf8dd;
}
#news .title-inner {
margin-left: 5%;
}
#news .all-btn a {
background: #eafae9;
}
.bold {
font-weight: 600;
}
.mt10 {
margin-top: 0.55rem;
padding-left: 0.66rem;
}
/*----------------------------------------
フッター
----------------------------------------*/
#footer {
padding: 1.66rem 3.33rem;
background: url("../img/footer-bg.png") no-repeat center center/cover;
}
.footer-logo {
margin-bottom: 1.66rem;
}
#copyright {
margin-top: 0.55rem;
display: block;
}
#copyright a {
color: #008C00;
}
@media (max-width: 1120px) {
html {
font-size: clamp(14px, 1.4vw, 16px);
}
.container {
margin: 0 1.11rem;
}
}
@media (max-width: 890px) {
.about-inner {
flex-direction: column;
}
.topics-title,
.news-title {
width: 46%;
}
}
@media (max-width: 767px) {
html {
font-size: clamp(13px, 2.5vw, 15px);
}
.pc {
display: none;
}
.sp {
display: block;
}
a[href^="tel:"] {
pointer-events: auto;
text-decoration: underline;
color: #59B200;
}
main {
padding: 3rem 1.5rem;
}
.publication-date {
width: 6.8rem;
}
#header h1 img {
width: 90%;
height: auto;
}
.flex {
flex-direction: column;
align-items: unset;
}
.list-inner .flex {
flex-direction: row;
}
#list {
margin-top: 2.8rem;
}
#news .topics-inner>ul>li.grow {
width: 100%;
}
.title-inner h4,
.title-inner ul {
font-size: 0.92rem;
}
.icon-description {
flex-direction: column;
align-items: flex-start;
}
.topics-inner {
padding: 0 1.2rem 1.7rem 1.2rem;
background: #fff;
border-radius: 0.55rem;
border: 8px solid #CCEFF8;
}
.icon-notice>p,
.about-right p {
font-size: 0.92rem;
}
.all-btn p {
width: 100%;
}
.all-btn a {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 1.11rem;
border-radius: 50px;
background: #E9F7FA;
color: #000;
}
.topics-title,
.news-title {
width: 42%;
padding: 1.2rem 0;
font-size: 1rem;
}
.topics-inner>ul>li {
align-items: flex-start;
gap: 0.66rem;
}
.dot {
padding-left: 0;
}
.data {
flex-direction: column;
width: 100%;
gap: 0.66rem;
}
.page {
width: unset;
background: #e9f7fa;
display: inline-block;
padding: 0 1rem;
border-radius: 50px;
}
.download-btn {
gap: 0.3rem;
padding: 0 0.3rem;
}
#footer {
padding: 1.66rem 1.2rem;
}
.footer-logo img {
width: 50%;
height: auto;
}
}