.supporter-slider {
position: relative;
margin-top: 80px
}
@media(max-width: 768px) {
.supporter-slider {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 0
}
}
.supporter-slider .slick-slide {
-webkit-transition: all .6s;
transition: all .6s;
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0
}
.supporter-slider .slick-slide.slick-active {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
.supporter-slider .slick-slide>div {
margin: 2.8vw 1.4vw 0
}
@media(min-width: 1441px) {
.supporter-slider .slick-slide>div {
margin: 40px 20px 0
}
}
@media(max-width: 768px) {
.supporter-slider .slick-slide>div {
margin: 24px 12px 0
}
}
.supporter-slider .slick-list {
max-width: 1000px;
margin: 0 auto
}
.supporter-slider__wrapper {
padding: 0 80px
}
@media(max-width: 768px) {
.supporter-slider__wrapper {
background-color: #fff;
padding: 16px 24px 40px;
border-radius: 8px
}
}
.supporter-slider__slide {
position: relative;
border-radius: 6px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
padding-top: 100%;
cursor: pointer;
-webkit-transition: all .3s;
transition: all .3s
}
.supporter-slider__slide:hover {
-webkit-box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
box-shadow: 0 0 12px rgba(255, 0, 0, 0.5)
}
.supporter-slider__slide::before,
.supporter-slider__slide::after {
content: "";
width: 16px;
height: 2px;
background-color: #acacac;
border-radius: 5px;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 40px;
margin: 0 auto
}
@media(max-width: 1000px) {
.supporter-slider__slide::before,
.supporter-slider__slide::after {
width: 12px;
bottom: 24px
}
}
@media(max-width: 768px) {
.supporter-slider__slide::before,
.supporter-slider__slide::after {
width: 3.2vw;
bottom: 6.4vw
}
}
.supporter-slider__slide::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.supporter-slider__logo {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 3.1vw;
height: 3.9vw;
width: 64%
}
@media(min-width: 1441px) {
.supporter-slider__logo {
top: 44px;
height: 56px
}
}
@media(max-width: 768px) {
.supporter-slider__logo {
top: 30%;
height: 9.6vw;
width: 60%
}
}
.supporter-slider__logo img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center center;
object-position: center center
}
.supporter-slider__arrows {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
max-width: 1174px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
top: calc(50% - 40px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none
}
@media(max-width: 768px) {
.supporter-slider__arrows {
position: relative;
left: auto;
right: auto;
top: auto;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 24px
}
}
.supporter-slider__arrow {
width: 64px;
height: 64px;
border: 1px solid #000;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
pointer-events: auto;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.supporter-slider__arrow {
width: 40px;
height: 40px;
margin: 0 16px
}
}
.supporter-slider__arrow.slick-disabled {
opacity: .3
}
.supporter-slider__arrow.slick-disabled:hover {
border-color: #000
}
.supporter-slider__arrow.slick-disabled:hover::after {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/icon-arrow-right-black.svg)
}
.supporter-slider__arrow::after {
content: "";
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/icon-arrow-right-black.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 14px;
-webkit-transition: all .3s;
transition: all .3s
}
@media(max-width: 768px) {
.supporter-slider__arrow::after {
width: 10px;
height: 7px
}
}
.supporter-slider__arrow:hover {
border-color: red
}
.supporter-slider__arrow:hover::after {
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/common/icon-arrow-right-main.svg)
}
.supporter-slider__prev::after {
-webkit-transform: scaleX(-1);
transform: scaleX(-1)
}
.supporter-slider__counter {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 40px
}
@media(max-width: 768px) {
.supporter-slider__counter {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
margin-bottom: 16px
}
}
.supporter-slider__current-num,
.supporter-slider__total-num {
font-family: "MinionPro", "Noto Serif JP", sans-serif;
font-weight: 500;
font-size: 40px
}
@media(max-width: 768px) {
.supporter-slider__current-num,
.supporter-slider__total-num {
font-size: 14px
}
}
.supporter-slider__slash {
display: none
}
@media(max-width: 768px) {
.supporter-slider__slash {
display: block;
margin: 0 4px
}
}
.supporter-slider__dots {
width: 160px;
height: 2px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin: 0 48px
}
@media(max-width: 768px) {
.supporter-slider__dots {
display: none !important
}
}
.supporter-slider__dots li {
font-size: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
background-color: #acacac;
height: 1px
}
.supporter-slider__dots li.slick-active {
height: 2px;
background-color: red
}
.supporter-modal {
position: fixed;
top: 0;
left: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
padding: 80px 30px;
z-index: 100;
-webkit-transition: all .3s;
transition: all .3s;
opacity: 0;
visibility: hidden
}
.supporter-modal.is-active {
opacity: 1;
visibility: visible
}
.supporter-modal__overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.48)
}
.supporter-modal__content {
position: relative;
max-width: 1200px;
max-height: 900px;
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #fff;
-webkit-transition: all .3s;
transition: all .3s;
opacity: 0;
visibility: hidden;
display: none;
cursor: auto;
overflow: hidden;
z-index: 10
}
.supporter-modal__content.is-active {
opacity: 1;
visibility: visible;
display: block;
-webkit-animation: show .3s;
animation: show .3s
}
.supporter-modal__close-btn {
position: absolute;
width: 38px;
height: 38px;
right: 30px;
top: 30px;
-webkit-transition: all .3s;
transition: all .3s
}
.js-supporter-modal-close-btn02{
display: block;
font-size: 18px;
color: #fff;
text-align: center;
width: 90%;
max-width: 290px;
margin: 60px auto auto;
padding: 1.1em 0;
background-color: #1a1a1a;
position: relative;
transition: .4s;
}
.js-supporter-modal-close-btn02:hover{
background-color: #e00000;
}
@media(max-width: 768px) {
.supporter-modal__close-btn {
right: 16px;
top: 16px;
width: 28px;
height: 28px
}
.js-supporter-modal-close-btn02{
font-size: 14px;
width: 90%;
max-width: 221px;
margin: 30px auto auto;
}
}
.supporter-modal__close-btn::before,
.supporter-modal__close-btn::after {
content: "";
width: 100%;
height: 1px;
display: block;
background-color: #1a1a1a;
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
@media(max-width: 768px) {
.supporter-modal__close-btn::before,
.supporter-modal__close-btn::after {
width: 24px;
height: 2px
}
}
.supporter-modal__close-btn::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.supporter-modal__close-btn::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.supporter-modal__close-btn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.supporter-modal__inner {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 0 80px;
overflow-y: auto
}
@media(max-width: 768px) {
.supporter-modal__inner {
padding: 0 20px
}
}
.supporter-modal__inner-content {
max-width: 850px;
width: 100%;
margin: 0 auto;
padding-top: 120px
}
@media(max-width: 768px) {
.supporter-modal__inner-content {
padding-top: 40px
}
}
.supporter-modal__title {
position: relative;
font-size: 28px;
font-weight: 700;
padding-left: 1.72em;
}
.supporter-modal__title::before{
content: "";
display: block;
width: .86em;
height: .43em;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/deco01.svg) no-repeat center / contain;
position: absolute;
left: 0;
top: .5em;
}
@media(max-width: 768px) {
.supporter-modal__title {
font-size: 20px;
padding-left: 24px
}
}
.supporter-modal__type {
font-size: 14px;
font-weight: 600;
margin-top: 16px
}
@media(max-width: 768px) {
.supporter-modal__type {
padding-left: 24px;
margin-top: 8px
}
}
.supporter-modal__info {
margin-top: 40px;
padding-bottom: 150px
}
@media(max-width: 768px) {
.supporter-modal__info {
padding-bottom: 32px
}
}
.supporter-modal__table {
width: 100%;
font-size: 14px;
font-weight: 500;
line-height: 2
}
@media(max-width: 768px) {
.supporter-modal__table {
font-size: 12px;
border-bottom: none
}
}
.supporter-modal__table tr {
border-top: 1px solid #1a1a1a;
}
.supporter-modal__table tr:nth-last-of-type(1){
border-bottom: 1px solid #1a1a1a;
}
@media(max-width: 768px) {
.supporter-modal__table tr {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border: none
}
}
.supporter-modal__table th,
.supporter-modal__table td {
font-size: 16px;
padding: 1.15em 1.75em;
}
@media(max-width: 768px) {
.supporter-modal__table th,
.supporter-modal__table td {
font-size: 13px;
width: 100%;
padding: .5em 1em;
}
}
.supporter-modal__table th {
text-align: left;
white-space: nowrap;
background-color: #f0f0f0
}
@media(max-width: 768px) {
.supporter-modal__table th {
border-right: none
}
}
.supporter-modal__table td{
font-weight: 400;
}
.supporter-modal__table td a {
text-decoration: underline;
-webkit-transition: all .3s;
transition: all .3s
}
.supporter-modal__table td a:hover {
color: red
}
.supporter-modal__vid-list {
padding-bottom: 50px
}
@media(max-width: 768px) {
.supporter-modal__vid-list {
padding-bottom: 32px
}
}
.supporter-modal__vid-item {
width: 100%;
}
@media(max-width: 768px) {
.supporter-modal__vid-item {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
.supporter-modal__vid-item:not(:first-child) {
margin-top: 32px
}
}
.supporter-modal__vid-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 8px;
overflow: hidden
}
.supporter-modal__vid-wrap iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.supporter-modal__vid-text {
font-size: 18px;
font-weight: 600;
margin-bottom: 30px
}
@media(max-width: 768px) {
.supporter-modal__vid-text {
margin-top: 0;
margin-bottom: 16px
}
} #supporter{
padding: 120px 0 150px;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/supporters_bg.webp) no-repeat bottom/cover;
}
.no-webp #supporter{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/supporters_bg.jpg);
}
#supporter .title_primary{
line-height: 1.5;
margin-bottom: 50px;
}
#supporter .swiper_container{
position: relative;
}
#supporter_swiper{
height: min(612px, 51vw);
}
#supporter_swiper .swiper-slide{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
height: 47%;
background-color: #fff;
position: relative;
overflow: hidden;
}
#supporter_swiper .swiper-slide:hover{
cursor: pointer;
}
#supporter_swiper .swiper-slide::before{
content: "";
display: block;
width: 20%;
padding-top: 20%;
background-color: #000;
-webkit-clip-path: polygon(0 100%, 100% 0, 100% 100%);
clip-path: polygon(0 100%, 100% 0, 100% 100%);
position: absolute;
right: -1px;
bottom: -1px;
transition: .4s;
}
#supporter_swiper .swiper-slide:hover::before{
background-color: #e00000;
}
#supporter_swiper .swiper-slide::after{
content: "";
display: block;
width: 8%;
padding-top: 8%;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/plus.svg) no-repeat center/contain;
position: absolute;
right: 2%;
bottom: 2%;
z-index: 1;
}
#supporter_swiper .swiper-slide .img{
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 66.7%;
height: 66.7%;
margin: auto;
transition: .4s;
}
#supporter_swiper .swiper-slide:hover .img{
transform: scale(1.15);
}
#supporter .swiper-button-prev{
left: -7.5%;
}
#supporter .swiper-button-next{
right: -7.5%;
}
#supporter .swiper-button-prev,
#supporter .swiper-button-next{
width: 58px;
height: 58px;
background: #1a1a1a url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/slide_arrow.svg) no-repeat center/30% 30%;
transition: .4s;
}
#supporter .swiper-button-prev{
transform: scale(-1, 1);
}
#supporter .swiper-button-prev:hover,
#supporter .swiper-button-next:hover{
background-color: #e00000;
}
#supporter .swiper-button-prev::after,
#supporter .swiper-button-next::after{
display: none;
}
#supporter_pagination{
display: -webkit-box;
display: flex;
width: calc(80% - 110px);
max-width: calc(320px - 110px);
margin: auto;
left: 0;
right: 0;
bottom: -7.5%;
}
#supporter_pagination::before{
content: "";
display: block;
width: 94%;
height: 1px;
margin: auto;
background-color: #fff;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
#supporter_pagination .swiper-pagination-bullet{
-webkit-box-flex: 1;
flex-grow: 1;
width: auto;
height: 4px;
margin: 0;
border-radius: 0;
background-color: #e00000;
opacity: 0;
z-index: 1;
}
#supporter_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
opacity: 1;
}
#supporter_pagination02{
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
font-family: "Outfit", sans-serif;
font-size: 28px;
color: #fff;
width: 80%;
max-width: 320px;
margin: auto;
left: 0;
right: 0;
bottom: calc(-7.5% - 18px);
}
#supporter_swiper02{
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
@media(max-width: 1400px) {
#supporter .swiper-button-prev, #supporter .swiper-button-next{
width: 3.6%;
height: auto;
padding-top: 3.6%;
}
#supporter .swiper-button-prev{
left: -4%;
}
#supporter .swiper-button-next{
right: -4%;
}
}
@media screen and (max-width: 768px) {
#supporter{
padding: 45px 0 95px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/supporters_bg_sp.webp);
}
.no-webp #supporter{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/supporters_bg_sp.jpg);
}
#supporter .title_primary{
margin-bottom: 45px;
}
#supporter_swiper{
height: min(1010px, 134.66vw);
}
#supporter_swiper .swiper-slide{
height: calc((100% - 12px)/3);
}
#supporter .swiper-button-prev, #supporter .swiper-button-next{
width: 34px;
height: auto;
padding-top: 34px;
top: auto;
bottom: -50px;
}
#supporter .swiper-button-prev{
left: 0;
}
#supporter .swiper-button-next{
right: 0;
}
#supporter_pagination{
display: -webkit-box;
display: flex;
width: 40%;
bottom: -38px;
}
#supporter_pagination .swiper-pagination-bullet{
height: 2px;
}
#supporter_pagination02{
font-size: 18px;
width: 56%;
bottom: -50px;
}
} #insta{
padding: 130px 0 120px;
background: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/insta_bg.webp) no-repeat center/cover;
}
.no-webp #insta{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/insta_bg.png);
}
#insta .title_primary{
line-height: 1.35;
margin-bottom: 70px;
}
.insta_box{
margin-bottom: 65px;
}
#sb_instagram .sb_instagram_header, .sb_instagram_header{
display: none;
}
#sb_instagram #sbi_load{
display: none;
}
#insta .btn_primary{
margin: auto;
}
@media screen and (max-width: 768px) {
#insta{
padding: 50px 0 40px;
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/insta_bg_sp.webp);
}
.no-webp #insta{
background-image: url(//forjapan-project.com/wp-content/themes/for-japan-theme/assets/img/pages/front2024/insta_bg_sp.png);
}
#insta .title_primary{
margin-bottom: 40px;
}
.insta_box{
margin-bottom: 15px;
}
}