@charset "utf-8";
/* store */
#store .wrap {margin: 0 20px 150px;}
#store .wrap .store {display: flex; justify-content: center; align-items: center;}
#store .wrap .store a {text-decoration: none; color: #003687; font-family: "Kosugi Maru", '游ゴシック', 'Yu Gothic', YuGothic, 'ヒラギノゴシック Pro', 'Hiragino Kaku Gothic ProN', 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 50px; transition: .5s; display: flex;}
#store .wrap .store a:hover {opacity: .7;}
#store .wrap .store a:first-child {margin: 0 100px 0 0;}
#store .wrap .store a span {padding: 0 1em 0 0; border-right: 1px solid #003687;}
#store .wrap .store a img {height: 87.5px; padding: 0 0 0 1em;}
@media screen and (max-width:1200px) {
    #store .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #store .wrap {margin: 0 10px 100px;}
    #store .wrap .store {flex-direction: column;}
    #store .wrap .store a:first-child {margin: 0 auto 20px;}
}
@media screen and (max-width:768px) {
    #store .wrap {margin: 0 10px 70px;}
}
@media screen and (max-width:590px) {
    #store .wrap {margin: 0 5px 70px;}
    #store .wrap .store a {font-size: 30px;}
    #store .wrap .store a img {height: 52.5px;}
}
/* maker */
#maker .wrap {margin: 0 20px 150px;}
#maker .wrap .head {display: flex; align-items: center;}
#maker .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
/* #maker .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#maker .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
#maker .wrap .swiper .swiper-wrapper {transition-timing-function: linear;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a {transition: .5s;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a img {width: 100%;}
@media screen and (max-width:1200px) {
    #maker .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #maker .wrap {margin: 0 10px 100px;}
}
@media screen and (max-width:768px) {
    #maker .wrap {margin: 0 10px 70px;}
    #maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 75px; width: 125px;}
}
@media screen and (max-width:590px) {
    #maker .wrap {margin: 0 5px 70px;}
    #maker .wrap .head {display: block; margin: 0 0 30px;}
    #maker .wrap .head h2 {margin: 0;}
    #maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 60px; width: 100px;}
}
#maker .wrap .maker {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 150px;}
#maker .wrap .maker a img {display: block; width: 100%;}
#maker .wrap .maker a {transition: .5s;}
#maker .wrap .maker a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #maker .wrap .maker {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #maker .wrap .maker {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #maker .wrap .maker {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #maker .wrap .maker {grid-template-columns: repeat(3, 1fr);}
}
/* related */
#related .wrap {margin: 0 20px 150px;}
#related .wrap .head {display: flex; align-items: center;}
#related .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
/* #related .wrap .head h2 {font-size: clamp(16px, 1.6vw, 26px); margin: 0 0 0 50px; color: #003687;} */
#related .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
#related .wrap .related {display: grid; column-gap: 150px;}
#related .wrap .related .item {display: flex; justify-content: center; align-items: center;}
#related .wrap .related a img {display: block; width: 100%;}
#related .wrap .related a {transition: .5s; text-decoration: none; color: #003687; font-size: clamp(14px, 1.2vw, 22px); font-weight: bold; text-wrap: nowrap;}
#related .wrap .related a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #related .wrap {margin: 0 10px 150px;}
    #related .wrap .related {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #related .wrap {margin: 0 10px 100px;}
    #related .wrap .related {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #related .wrap {margin: 0 10px 70px;}
    #related .wrap .related {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #related .wrap {margin: 0 5px 70px;}
    #related .wrap .head {display: block; margin: 0 0 30px;}
    #related .wrap .head h2 {margin: 0;}
    #related .wrap .related {grid-template-columns: repeat(3, 1fr);}
}