@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&family=BIZ+UDPMincho&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&family=BIZ+UDPMincho&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.logo{font-family: "BIZ UDPMincho", serif; font-size: 1.62vw; color: #616161; text-align: center;}
h2{font-family: "BIZ UDMincho", serif; font-size: 6.28vw; font-weight: 400; text-align: center; padding: 3.64vw 0; box-sizing: border-box;}

.category{width: 1520px; margin: 0 auto; font-size: clamp(0px, 2.77vw, 53.33px); font-family: "Inter", sans-serif;}
.category::after{display: block; margin: 2rem 0; content: url(./../../img/mimi-magazine/wave.svg); width: 18.358rem;}
.category-title{width: 1520px; margin: 0 auto; font-size: clamp(0px, 1.8vw, 34.67px); font-weight: bold;}

.hero-section{position: relative;}
.hero-section .back-color{position: absolute; left: 0; bottom: 0; width: 100%; height: 75%; background-color: #E3F5E6; z-index: -1;}
.hero-section .recent-article{position: relative; width: 91.66%; max-width: 1520px; margin: 0 auto clamp(0px, 7.5vw, 147.85px);}
.hero-section .recent-article .content .img{position: relative; width: 100%;}
.hero-section .recent-article .content .img::after{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; content:""; background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,50%));}
.hero-section .recent-article .content .text{position: absolute; left: clamp(0px, 3.19vw, 61.33px); bottom: clamp(0px, 2.88vw, 55.48px); font-size: clamp(0px, 1.66vw, 32px); font-weight: bold; color: #000; line-height: normal;}
.hero-section .recent-article .content .text .title{font-family: dnp-shuei-ymincho-std, sans-serif;}
.hero-section .recent-article .content .text .date{font-family: "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif !important; color: #000 !important;}

.hero-section .pick-article{position: relative; width: 91.66%; max-width: 1520px; margin: 0 auto; padding-bottom: clamp(0px, 4.68vw, 90px);}
.hero-section .pick-article .pick-article_link{display: flex; flex-direction: row; margin-top: clamp(0px, 1.49vw, 28.67px);}
.hero-section .pick-article .pick-article_link .section__inner-img{width: 44.74%; max-width: 680px;}
.hero-section .pick-article .pick-article_link .section__inner-content{display: flex; flex-direction: column; justify-content: center; flex-grow: 1; font-size: clamp(0px, 1.66vw, 32px); line-height: normal; padding-left: clamp(0px, 6.25vw, 120px); box-sizing: border-box;}
.hero-section .pick-article .pick-article_link .section__inner-content .title{width: 100%; font-size: clamp(0px, 1.66vw, 32px);}
.hero-section .pick-article .pick-article_link .section__inner-content .date{width: 100%; font-size: clamp(0px, 1.11vw, 21.33px);}

.swiper{width: 91.66%; padding: 55px 0; box-sizing: border-box;}
.swiper ul{display: flex; flex-wrap: wrap; width: 100%; max-width: 1520px; margin: 0 auto;}
.swiper ul li.swiper-slide{width: 25%; padding: 0 18px; box-sizing: border-box;}
.swiper ul li.swiper-slide .content{margin-top: 60px;}
.swiper ul li.swiper-slide .content .img{margin-bottom: 42px;}
.swiper ul li.swiper-slide .content .title{margin-bottom: 17px; font-size: 16px; font-weight: bold; line-height: normal; color: #262626;}
.swiper ul li.swiper-slide .content .date{font-size: 13px; color: #5A5A5A;}

.vision{position: relative; width: 100%; height: 512px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.vision .vision-back{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
.vision .title{font-family: "BIZ UDPMincho", serif; font-size: 60px; color: #fff; text-align: center; line-height: 1.5; margin-bottom: 60px;}
.vision .content{font-family: "BIZ UDPMincho", serif; font-size: 20px; color: #fff; text-align: center; line-height: 2;}

.blog-link{display: block; width: fit-content; font-size: 16px; font-weight: bold; color: #000; padding: 18px 90px; box-sizing: border-box; border: 2px solid #000; margin: 0 auto; transition: all 0.2s; margin-top: clamp(0px, 8.88vw, 128px);}
.blog-link:hover{color: #fff !important; background-color: #000;}

@media screen and (max-width: 768px){
    .logo{font-family: "BIZ UDPMincho", serif; font-size: 3.39vw; color: #616161; text-align: center;}
    h2{font-family: "BIZ UDMincho", serif; font-size: 8.69vw; font-weight: 400; text-align: center; padding: 3.64vw 0; box-sizing: border-box;}

    .category{width: 1520px; margin: 0 auto; font-size: clamp(0px, 7.17vw, 28px); font-family: dnp-shuei-ymincho-std, sans-serif;}
    .category::after{display: block; margin: 5.38vw 0; content: url(./../../img/mimi-magazine/wave.svg); width: 20.5vw;}
    .category-title{width: 1520px; margin: 0 auto; font-size: clamp(0px, 5.12vw, 20px); font-family: dnp-shuei-ymincho-std, sans-serif;}

    .hero-section{position: relative;}
    .hero-section .back-color{position: absolute; left: 0; bottom: 0; width: 100%; height: 75%; background-color: #E3F5E6; z-index: -1;}
    .hero-section .recent-article{position: relative; width: 100%; max-width: 1520px; margin: 0 auto clamp(0px, 14.35vw, 56px);}
    .hero-section .recent-article .content .img{position: relative; width: 100%;}
    .hero-section .recent-article .content .img::after{position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; content:""; background-image: linear-gradient(to bottom, transparent, #646464);}
    .hero-section .recent-article .content .text{position: absolute; left: clamp(0px, 3.19vw, 61.33px); bottom: clamp(0px, 2.88vw, 55.48px); font-size: clamp(0px, 4.61vw, 18px); font-weight: bold; color: #fff; line-height: normal;}
    .hero-section .recent-article .content .text .title{font-family: dnp-shuei-ymincho-std, sans-serif;}
    .hero-section .recent-article .content .text .date{font-family: "\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3", "Hiragino Kaku Gothic Pro", "\30E1\30A4\30EA\30AA", Meiryo, "\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF", sans-serif !important; color: #fff !important;}

    .hero-section .pick-article{position: relative; width: 91.66%; max-width: 1520px; margin: 0 auto; padding-bottom: clamp(0px, 8.46vw, 33px);}
    .hero-section .pick-article .pick-article_link{display: flex; flex-direction: column; margin-top: clamp(0px, 5.64vw, 22px);}
    .hero-section .pick-article .pick-article_link .section__inner-img{width: 90.76%; max-width: none;}
    .hero-section .pick-article .pick-article_link .section__inner-content{display: flex; flex-direction: column; justify-content: center; flex-grow: 1; font-size: clamp(0px, 1.66vw, 32px); line-height: normal; padding-left: 0; box-sizing: border-box;}
    .hero-section .pick-article .pick-article_link .section__inner-content .title{width: 100%; font-size: clamp(0px, 4.61vw, 18px); font-weight: bold; line-height: normal; margin-top: 4.1vw;}
    .hero-section .pick-article .pick-article_link .section__inner-content .date{width: 100%; font-size: clamp(0px, 3.33vw, 13px); line-height: normal;}

    .swiper{width: 91.66%; padding: 10.25vw 0 18.97vw; box-sizing: border-box;}
    .swiper ul{display: flex; flex-wrap: wrap; width: 100%; max-width: 1520px; margin: 0 auto;}
    .swiper ul li.swiper-slide{width: 50%; padding: 0 18px 0 0; box-sizing: border-box;}
    .swiper ul li.swiper-slide:nth-child(2n){padding: 0 0 0 0;}
    .swiper ul li.swiper-slide .content{margin-top: 60px;}
    .swiper ul li.swiper-slide .content .img{margin-bottom: 42px;}
    .swiper ul li.swiper-slide .content .title{margin-bottom: 17px; font-size: 16px; line-height: normal; color: #262626;}
    .swiper ul li.swiper-slide .content .date{font-size: 13px; color: #5A5A5A;}

    .vision{position: relative; width: 100%; height: 135.89vw; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .vision .vision-back{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}
    .vision .title{font-size: 8.71vw; color: #fff; text-align: center; line-height: 1.5; margin-bottom: 14.1vw;}
    .vision .content{font-size: 4.1vw; color: #fff; text-align: center; line-height: 2;}

    .blog-link{display: block; width: fit-content; font-size: 4.1vw; font-weight: bold; color: #000; padding: 4.61vw 23.84vw; box-sizing: border-box; border: 2px solid #000; margin: 0 auto; transition: all 0.2s; margin-top: clamp(0px, 8.88vw, 128px);}
    .blog-link:hover{color: #fff !important; background-color: #000;}
}