@charset "UTF-8";
 html {
overflow-x: hidden;
}
body {
font-family: "Noto Sans JP", serif;
font-weight: 300;
font-style: normal;
background: #1a1a1a;
letter-spacing: 2px;
color: #ffffff;
font-size: 18px;
line-height: 2em;
padding: 140px 0 0;
margin: 0;
overflow-x: hidden;
position: relative;
}
@media screen and (max-width: 768px) {
body {
padding-top: 80px;
font-size: 16px;
line-height: 2em;
}
}
img,
object,
video {
max-width: 100%;
height: auto;
}
.header {
width: 100%;
height: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px 0 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
position: absolute;
z-index: 9999;
left: 0;
top: 0;
}
@media screen and (max-width: 980px) {
.header {
padding-left: 20px;
}
}
@media screen and (max-width: 768px) {
.header {
height: 60px;
}
}
.header__logo {
font-size: 0;
line-height: 0;
max-width: 308px;
}
@media screen and (max-width: 1300px) {
.header__logo {
max-width: 200px;
}
}
.header__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
padding: 0;
}
@media screen and (max-width: 1050px) {
.header__nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9998;
padding-top: 60px;
display: block;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
@media screen and (max-width: 1050px) {
.header__nav.active {
opacity: 1;
pointer-events: inherit;
}
}
@media screen and (max-width: 1050px) {
.header__nav-item {
width: 100%;
}
}
.header__nav-item:not(:first-child) {
margin-left: 50px;
}
@media screen and (max-width: 1300px) {
.header__nav-item:not(:first-child) {
margin-left: 20px;
}
}
@media screen and (max-width: 1050px) {
.header__nav-item:not(:first-child) {
margin-left: 0;
margin-top: 40px;
}
}
.header__nav-item.active a:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.header__nav-item a {
font-size: 16px;
display: block;
text-decoration: none;
position: relative;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
letter-spacing: 1px;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
}
@media screen and (max-width: 1050px) {
.header__nav-item a {
text-align: center;
}
}
.header__nav-item a:after {
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 1050px) {
.header__nav-item a:after {
display: none;
}
}
.header__nav-item a:link, .header__nav-item a:visited {
color: #fff;
}
.header__nav-item a:hover, .header__nav-item a:active {
color: #fff;
}
.header__nav-item a:hover:after, .header__nav-item a:active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.header__nav-item a sup {
position: absolute;
right: -12px;
}
.header__nav-item--contact a {
border: 1px solid #fff;
border-radius: 30px;
padding: 8px 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.header__nav-item--contact a:after {
display: none;
}
@media screen and (max-width: 1050px) {
.header__nav-item--contact a {
text-align: center;
margin: 0 40px;
}
}
.header__nav-item--contact a:hover {
background: #fff;
color: #1a1a1a;
}
.header__nav-item--lang {
padding-left: 20px;
margin-left: 20px !important;
border-left: 1px solid #808080;
position: relative;
}
@media screen and (max-width: 1050px) {
.header__nav-item--lang {
border-left: 0;
padding-left: 0;
margin-left: 0 !important;
}
}
.header__nav-item--lang a:after {
display: none;
}
.header__btn {
width: 40px;
height: 40px;
position: fixed;
right: 20px;
top: 10px;
font-size: 0;
line-height: 0;
z-index: 9999;
cursor: pointer;
}
@media screen and (min-width: 1051px) {
.header__btn {
display: none;
}
}
.header__btn.active:after {
width: 30px;
right: 0;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.header__btn.active:before {
width: 30px;
right: 0;
top: 50%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.header__btn.active span {
display: none;
}
.header__btn:after {
content: "";
width: 30px;
height: 1px;
background: #fff;
display: block;
position: absolute;
top: 10px;
right: 0;
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
transition: width 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, width 0.3s;
transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
}
.header__btn:before {
content: "";
width: 10px;
height: 1px;
background: #fff;
display: block;
position: absolute;
bottom: 10px;
right: 0;
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
transition: width 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, width 0.3s;
transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
}
.header__btn span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 100%;
height: 100%;
}
.header__btn span:after {
content: "";
width: 20px;
height: 1px;
background: #fff;
display: block;
position: absolute;
top: 50%;
right: 0;
}
.title {
margin: 0 0 60px;
font-weight: normal;
}
@media screen and (max-width: 768px) {
.title {
margin-bottom: 40px;
}
}
.title__en {
font-size: 32px;
line-height: 1em;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 400;
margin: 0;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
.title__en {
font-size: 28px;
line-height: 1.5em;
}
}
.title__en sup {
font-size: 18px;
}
.title__jp {
font-size: 15px;
line-height: 1.5em;
font-weight: 500;
width: 80%;
}
@media screen and (max-width: 768px) {
.title__jp {
font-size: 10px;
line-height: 1.5em;
width: 100%;
}
}
.title__jp--narrow {
letter-spacing: 0;
}
.subtitle {
margin: 0 0 40px;
font-weight: normal;
}
@media screen and (max-width: 768px) {
.subtitle {
margin-bottom: 40px;
}
}
.subtitle__en {
font-size: 48px;
line-height: 1.4em;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 400;
letter-spacing: 0;
}
@media screen and (max-width: 768px) {
.subtitle__en {
font-size: 28px;
line-height: 1.5em;
}
}
.subtitle__en sup {
font-size: 18px;
line-height: 1em;
}
.subtitle__jp {
font-size: 15px;
line-height: 1.2em;
font-weight: normal;
}
@media screen and (max-width: 768px) {
.subtitle__jp {
font-size: 10px;
line-height: 1.5em;
}
}
.lang {
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
list-style: none;
}
@media screen and (max-width: 768px) {
.lang {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: inherit;
-webkit-box-direction: inherit;
-ms-flex-direction: inherit;
flex-direction: inherit;
max-width: 50%;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
}
}
.lang:hover .lang__item {
height: 1.5em;
}
@media screen and (max-width: 768px) {
.lang:hover .lang__item {
height: 30px;
}
}
.lang__item {
-webkit-transition: height 0.3s, opacity 0.3s;
transition: height 0.3s, opacity 0.3s;
height: 0;
overflow: hidden;
opacity: 0.3;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
@media screen and (max-width: 768px) {
.lang__item {
opacity: 1;
height: inherit;
background: #1a1a1a;
width: 50%;
height: 30px;
line-height: 30px;
}
}
.lang__item:hover {
opacity: 0.6;
}
@media screen and (max-width: 768px) {
.lang__item:hover {
opacity: 1;
}
}
@media screen and (max-width: 768px) {
.lang__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 5px 20px;
}
}
.lang__item.active {
height: 1.5em;
height: 1em;
opacity: 1;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 768px) {
.lang__item.active {
background: #fff;
color: #000;
height: 30px;
}
.lang__item.active a {
color: #000;
line-height: 1em;
}
}
.kv {
padding: 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.kv {
padding: 0;
margin-top: -20px;
margin-bottom: 60px;
}
}
.kv__text {
width: calc(25% - 16px);
position: relative;
z-index: 1;
}
@media screen and (max-width: 980px) {
.kv__text {
width: calc(40% - 16px);
}
}
@media screen and (max-width: 768px) {
.kv__text {
width: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 20px 0;
margin-top: -30px;
}
}
.kv__image {
font-size: 0;
line-height: 0;
width: 75%;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 980px) {
.kv__image {
width: 60%;
}
}
@media screen and (max-width: 768px) {
.kv__image {
width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.kv__image video {
aspect-ratio: 16 / 9;
-o-object-fit: cover;
object-fit: cover;
}
.kv__title {
width: 187%;
height: auto;
font-size: 0;
line-height: 0;
margin: 0 0 40px;
}
@media screen and (max-width: 980px) {
.kv__title {
width: 110%;
height: auto;
}
}
@media screen and (max-width: 768px) {
.kv__title {
width: 80%;
margin-bottom: 20px;
}
}
.kv__title_en {
width: 220%;
height: auto;
font-size: 0;
line-height: 0;
margin: 0 0 40px;
}
@media screen and (max-width: 980px) {
.kv__title_en {
width: 110%;
height: auto;
}
}
@media screen and (max-width: 768px) {
.kv__title_en {
width: 80%;
margin-bottom: 20px;
}
}
.kv__desc {
font-size: 16px;
line-height: 2em;
}
.top-news {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 40px;
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.top-news {
padding: 0 20px;
margin-bottom: 60px;
}
}
.top-news__header {
width: calc(25% - 16px);
}
@media screen and (max-width: 768px) {
.top-news__header {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.top-news .news {
width: 75%;
}
@media screen and (max-width: 768px) {
.top-news .news {
width: 100%;
}
}
.btn--more {
font-size: 15px;
line-height: 1.5em;
text-decoration: none !important;
position: relative;
padding-bottom: 3px;
}
.btn--more:link, .btn--more:visited {
color: #fff;
}
.btn--more:hover, .btn--more:active {
color: #fff;
}
.btn--more:hover:before, .btn--more:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.btn--more:after {
content: "";
width: 16px;
height: 6px;
background: url(https://sp-2025.com/cms/wp-content/themes/sp2025/img/icon-arrow.png) no-repeat center center;
background-size: cover;
display: inline-block;
margin-left: 5px;
}
.btn--more:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
display: block;
background: #fff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: left top;
transform-origin: left top;
}
.btn--contact {
font-size: 15px;
line-height: 1.5em;
border: 1px solid #1a1a1a;
border-radius: 50px;
text-decoration: none;
padding: 10px 20px;
-webkit-transition: 0.3s;
transition: 0.3s;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
letter-spacing: 0;
}
.btn--contact:link, .btn--contact:visited {
color: #1a1a1a;
}
.btn--contact:hover, .btn--contact:active {
color: #fff;
background: #1a1a1a;
border-color: #1a1a1a;
}
.btn--show {
display: inline-block;
padding: 0 0 3px 15px;
position: relative;
font-size: 14px;
line-height: 1em;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
position: relative;
cursor: pointer;
}
.btn--show:link, .btn--show:visited {
text-decoration: none;
color: #fff;
}
.btn--show:hover, .btn--show:active {
text-decoration: none;
color: #fff;
}
.btn--show:hover:after, .btn--show:active:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.btn--show:before {
content: "+";
width: 14px;
height: 14px;
line-height: 14px;
text-align: center;
font-size: 12px;
display: block;
position: absolute;
left: 0;
top: calc(50% - 7px);
}
.btn--show:after {
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
display: block;
background: #fff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: left top;
transform-origin: left top;
}
.btn--show.active:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn--totop {
font-size: 0;
line-height: 0;
width: 40px;
height: 40px;
position: fixed;
right: 40px;
bottom: 80px;
cursor: pointer;
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
pointer-events: none;
z-index: 9998;
}
.btn--totop.scroll {
pointer-events: inherit;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.news:not(:last-child) {
margin-bottom: 40px;
}
.news__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid #333;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Arial", "Yu Gothic", "Meiryo", sans-serif;
padding: 30px 20px;
position: relative;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.news__item {
padding-left: 0;
padding-right: 0;
}
}
.news__item:first-child {
padding-top: 0;
}
.news__item:after {
content: "";
width: 30%;
height: 1px;
background: #d9d8d7;
display: block;
position: absolute;
left: 0;
bottom: -1px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform-origin: left top;
transform-origin: left top;
}
.news__item:hover:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.news__item-date {
color: #bfbfbf;
font-size: 15px;
line-height: 1.6em;
width: 140px;
}
@media screen and (max-width: 768px) {
.news__item-date {
font-size: 12px;
line-height: 1.6em;
margin-bottom: 10px;
}
}
.news__item-title {
font-size: 16px;
line-height: 1.6em;
width: calc(100% - 140px);
}
@media screen and (max-width: 768px) {
.news__item-title {
width: 100%;
}
}
.news__item-title a {
display: block;
text-decoration: none;
}
.news__item-title a:link, .news__item-title a:visited {
color: #fff;
}
.news__item-title a:hover, .news__item-title a:active {
color: #fff;
}
.top-vision {
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.top-vision {
margin-bottom: 60px;
}
}
.top-vision__image {
font-size: 0;
line-height: 0;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
width: 42%;
}
@media screen and (max-width: 768px) {
.top-vision__image {
width: calc(100% - 20px);
margin-bottom: 40px;
}
}
.top-vision__image img {
width: 100%;
height: auto;
}
.top-vision__text {
width: 58%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 11% 0 9%;
}
@media screen and (max-width: 768px) {
.top-vision__text {
width: 100%;
padding: 0 20px;
}
}
.top-vision__desc {
border-left: 1px solid #808080;
padding-left: 20px;
}
.top-vision__desc p {
margin: 0;
}
.top-vision__desc p:not(:last-child) {
margin-bottom: 1em;
}
.top-mb {
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.top-mb {
margin-bottom: 60px;
}
}
.top-mb__image {
font-size: 0;
line-height: 0;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
width: 42%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
@media screen and (max-width: 768px) {
.top-mb__image {
width: calc(100% - 20px);
margin-left: 20px;
margin-bottom: 40px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.top-mb__text {
width: 58%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 11% 0 9%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 768px) {
.top-mb__text {
width: 100%;
padding: 0 20px;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.top-mb__desc {
border-left: 1px solid #808080;
padding-left: 20px;
}
.top-mb__desc p {
margin: 0;
}
.top-mb__desc p:not(:last-child) {
margin-bottom: 1em;
}
.top-company {
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.top-company {
margin-bottom: 60px;
}
}
.top-company__image {
font-size: 0;
line-height: 0;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
width: 42%;
}
@media screen and (max-width: 768px) {
.top-company__image {
width: calc(100% - 20px);
margin-bottom: 40px;
}
}
.top-company__text {
width: 58%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 11% 0 9%;
}
@media screen and (max-width: 768px) {
.top-company__text {
width: 100%;
padding: 0 20px;
}
}
.top-company__desc {
border-left: 1px solid #808080;
padding-left: 20px;
}
.top-company__desc p {
margin: 0;
}
.top-company__desc p:not(:last-child) {
margin-bottom: 1em;
}
.top-partners {
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.top-partners {
margin-bottom: 60px;
}
}
.top-partners__image {
font-size: 0;
line-height: 0;
width: 42%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
-webkit-transform-origin: left center;
transform-origin: left center;
}
@media screen and (max-width: 768px) {
.top-partners__image {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
width: calc(100% - 20px);
-webkit-transform: scale(1);
transform: scale(1);
margin-left: 20px;
margin-bottom: 30px;
}
}
.top-partners__image-item {
width: calc(33.3% - 6px);
margin-bottom: 10px;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
}
.top-partners__text {
width: 58%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 9% 0 11%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
@media screen and (max-width: 768px) {
.top-partners__text {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: 100%;
padding: 0 20px;
}
}
.top-partners__desc {
border-left: 1px solid #808080;
padding-left: 20px;
}
.top-partners__desc p {
margin: 0;
}
.top-partners__desc p:not(:last-child) {
margin-bottom: 1em;
}
.action {
background: url(https://sp-2025.com/cms/wp-content/themes/sp2025/img/action-bg.jpg) no-repeat center center;
background-size: cover;
margin: 0 40px 120px;
text-align: center;
border-radius: 400px;
padding: 50px 0;
color: #191919;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
overflow: hidden;
position: relative;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.action {
border-radius: 10px;
margin: 0 20px 60px;
}
}
.action:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
display: block;
left: 0;
top: 0;
background: #fff;
opacity: 0.8;
}
.action__title {
font-size: 90px;
line-height: 1em;
margin: 0 0 40px;
position: relative;
z-index: 1;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 300;
font-style: normal;
letter-spacing: -1px;
}
@media screen and (max-width: 768px) {
.action__title {
font-size: 38px;
line-height: 1.1em;
margin-bottom: 20px;
}
}
.action__desc {
margin-bottom: 40px;
position: relative;
z-index: 1;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.action__desc {
margin-bottom: 20px;
font-size: 16px;
line-height: 2em;
}
}
.action__btn {
position: relative;
z-index: 1;
}
.expo2025 {
text-align: center;
position: relative;
padding: 0 20px 120px;
}
@media screen and (max-width: 768px) {
.expo2025 {
padding-bottom: 60px;
}
}
.expo2025:after {
content: "";
width: 100%;
height: calc(100% - 60px);
bottom: 0;
left: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#1f1f1f), to(rgba(0, 0, 0, 0.7)));
background: linear-gradient(to bottom, #1f1f1f, rgba(0, 0, 0, 0.7));
display: block;
position: absolute;
}
.expo2025__image {
font-size: 0;
line-height: 0;
position: relative;
z-index: 1;
margin: 0 auto 40px;
max-width: 388px;
width: 100%;
-webkit-box-shadow: 0 0 40 black;
box-shadow: 0 0 40 black;
}
@media screen and (max-width: 768px) {
.expo2025__image {
margin-bottom: 20px;
max-width: 60%;
}
}
.expo2025__desc {
position: relative;
z-index: 1;
}
@media screen and (max-width: 768px) {
.expo2025__desc {
font-size: 14px;
line-height: 1.8em;
text-align: left;
}
}
.expo2025__desc p {
margin: 0;
}
.expo2025__desc p:not(:last-child) {
margin-bottom: 1em;
}
.footer {
background: #292929;
padding: 80px 20px 120px;
text-align: center;
}
@media screen and (max-width: 1050px) {
.footer {
padding-top: 0;
}
}
@media screen and (max-width: 768px) {
.footer {
padding: 0 0 40px;
}
}
.footer__nav {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
list-style: none;
margin: 0 0 60px;
}
@media screen and (max-width: 1050px) {
.footer__nav {
display: block;
}
}
.footer__nav-item {
font: 16px;
line-height: 1.5em;
}
@media screen and (max-width: 1050px) {
.footer__nav-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
}
.footer__nav-item:not(:first-child) {
margin-left: 50px;
}
@media screen and (max-width: 1050px) {
.footer__nav-item:not(:first-child) {
margin-left: 0;
}
}
.footer__nav-item a {
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
text-decoration: none;
display: block;
position: relative;
}
@media screen and (max-width: 1050px) {
.footer__nav-item a {
padding: 20px;
}
}
.footer__nav-item a:after {
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 1050px) {
.footer__nav-item a:after {
display: none;
}
}
.footer__nav-item a:link, .footer__nav-item a:visited {
color: #fff;
}
.footer__nav-item a:hover, .footer__nav-item a:active {
color: #fff;
}
.footer__nav-item a:hover:after, .footer__nav-item a:active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.footer__logo {
font-size: 0;
line-height: 0;
margin: 0 0 40px;
}
.footer__logo img {
max-width: 240px;
height: auto;
}
.footer__info {
font-size: 15px;
line-height: 2em;
margin-bottom: 60px;
}
.footer__info p {
margin: 0;
}
.footer__info p:not(:last-child) {
margin-bottom: 1em;
}
.footer__subnav {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
list-style: none;
margin: 0 0 60px;
}
@media screen and (max-width: 1050px) {
.footer__subnav {
max-width: 600px;
margin: 0 auto 60px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media screen and (max-width: 768px) {
.footer__subnav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
}
.footer__subnav-item {
font-size: 14px;
line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.footer__subnav-item {
font-size: 12px;
line-height: 1.5em;
}
}
.footer__subnav-item:not(:first-child) {
margin-left: 50px;
}
@media screen and (max-width: 1050px) {
.footer__subnav-item:not(:first-child) {
margin: 0;
}
}
.footer__subnav-item a {
text-decoration: none;
display: block;
position: relative;
margin-bottom: 1rem;
}
.footer__subnav-item a:after {
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 768px) {
.footer__subnav-item a:after {
display: none;
}
}
.footer__subnav-item a:link, .footer__subnav-item a:visited {
color: #fff;
}
.footer__subnav-item a:hover, .footer__subnav-item a:active {
color: #fff;
}
.footer__subnav-item a:hover:after, .footer__subnav-item a:active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.footer__copyright {
font-size: 11px;
line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.footer__copyright {
font-size: 10px;
line-height: 1.5em;
}
}
@media screen and (min-width: 769px) {
.pc-hide {
display: none;
}
}
@media screen and (max-width: 768px) {
.sp-hide {
display: none;
}
}
.bg {
width: 100%;
height: 100vh;
position: fixed;
opacity: 0.2;
top: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
@media screen and (max-width: 768px) {
.bg {
opacity: 0.1;
}
}
.bg .video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.bg .video video {
position: absolute;
top: 50%;
left: 50%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
#mouse-stalker {
pointer-events: none;
position: fixed;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 999;
text-align: center;
font-size: 0;
opacity: 0;
}
#mouse-stalker.is_active {
top: -70px;
left: -70px;
width: 140px;
height: 140px;
-webkit-transition: 0.2s;
transition: 0.2s;
opacity: 1;
background: rgba(0, 0, 0, 0.9);
line-height: 140px;
font-size: 18px;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
letter-spacing: 0;
}
.column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 40px;
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.column {
padding: 0 20px;
margin-bottom: 60px;
}
}
.column__sub {
width: 24%;
}
@media screen and (max-width: 768px) {
.column__sub {
width: 100% !important;
margin-bottom: 40px;
}
}
.column__sub-title {
font-size: 26px;
line-height: 1.5em;
margin: 0;
font-weight: normal;
}
.column__sub-title + .nav-small {
margin-top: 60px;
}
@media screen and (max-width: 768px) {
.column__sub-title + .nav-small {
margin-top: 40px;
}
}
.column__main {
width: calc(76% - 16px);
}
@media screen and (max-width: 768px) {
.column__main {
width: 100%;
}
}
.column__main-wrap {
max-width: 848px;
}
.column__main-wrap:not(:last-child) {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.column__main-wrap:not(:last-child) {
margin-bottom: 40px;
}
}
.column__main-block:not(:last-child) {
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.column__main-block:not(:last-child) {
margin-bottom: 60px;
}
}
.column__main-desc:not(:last-child) {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.column__main-desc:not(:last-child) {
margin-bottom: 40px;
}
}
.column__main-desc p {
margin: 0;
}
.column__main-desc p:not(:last-child) {
margin-bottom: 1em;
}
.column__main .pager {
margin: 0;
}
.topicpath {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
color: #bfbfbf;
font-size: 15px;
line-height: 1.5em;
padding: 0 40px;
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
.topicpath {
margin-bottom: 20px;
padding: 0 20px;
font-size: 10px;
line-height: 1.5em;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media screen and (max-width: 768px) {
.topicpath__item {
display: inline;
}
}
.topicpath__item:not(:first-child):before {
content: "/";
display: inline-block;
margin: 0 10px;
}
.topicpath__item a {
-webkit-transition: color 0.3s;
transition: color 0.3s;
text-decoration: none;
}
.topicpath__item a:link, .topicpath__item a:visited {
color: #bfbfbf;
}
.topicpath__item a:hover, .topicpath__item a:active {
color: #fff;
}
.topicpath__item small {
font-size: 8px;
display: inline-block;
position: relative;
top: -4px;
}
.pager {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-size: 14px;
line-height: 1.5em;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.pager span {
display: block;
margin: 0 5px;
position: relative;
padding: 0 2px;
}
.pager span:after {
content: "";
width: 100%;
height: 1px;
display: block;
position: absolute;
left: 0;
bottom: 0;
background: #fff;
}
.pager a {
display: block;
text-decoration: none;
margin: 0 5px;
position: relative;
padding: 0 2px;
}
.pager a:after {
content: "";
width: 100%;
height: 1px;
display: block;
position: absolute;
left: 0;
bottom: 0;
background: #fff;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.pager a:link, .pager a:visited {
color: #fff;
}
.pager a:hover, .pager a:active {
color: #fff;
}
.pager a:hover:after, .pager a:active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.pager a.next {
width: 16px;
height: 16px;
background: url(https://sp-2025.com/cms/wp-content/themes/sp2025/img/icon-arrow.png) no-repeat center center/100% auto;
font-size: 0;
line-height: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.pager a.next:after {
display: none;
}
.pager a.prev {
width: 16px;
height: 16px;
background: url(https://sp-2025.com/cms/wp-content/themes/sp2025/img/icon-arrow.png) no-repeat center center/100% auto;
font-size: 0;
line-height: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.pager a.prev:after {
display: none;
}
.article {
font-size: 16px;
line-height: 2em;
word-break: break-all;
}
.article a {
text-decoration: underline;
}
.article a:link, .article a:visited {
color: #fff;
}
.article a:hover, .article a:active {
color: #fff;
}
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
margin: 0 0 20px;
font-weight: normal;
}
.article h1:not(:first-child),
.article h2:not(:first-child),
.article h3:not(:first-child),
.article h4:not(:first-child),
.article h5:not(:first-child),
.article h6:not(:first-child) {
margin-top: 40px;
}
.article h1 {
font-size: 24px;
line-height: 1.5em;
}
.article h2 {
font-size: 22px;
line-height: 1.5em;
}
.article h3 {
font-size: 20px;
line-height: 1.5em;
}
.article h4 {
font-size: 18px;
line-height: 1.5em;
}
.article h5 {
font-size: 16px;
line-height: 1.5em;
}
.article h6 {
font-size: 16px;
line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.article h6 {
font-size: 16px;
line-height: 1.5em;
}
}
.article p {
margin: 0 0 20px;
}
.article p:last-child {
margin-bottom: 0;
}
.article ul {
margin: 0;
padding: 0 0 0 20px;
}
.article ul:not(:last-child) {
margin-bottom: 20px;
}
.article table {
background: #292929;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.01);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.01);
margin: 0 0 40px;
}
@media screen and (max-width: 768px) {
.article table {
display: block;
}
}
@media screen and (max-width: 768px) {
.article table tbody {
display: block;
}
}
.article table:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.article table tr {
display: block;
width: 100%;
}
}
.article table tr th {
text-align: left;
padding: 20px;
font-weight: normal;
width: 30%;
vertical-align: top;
}
@media screen and (max-width: 768px) {
.article table tr th {
display: block;
width: 100%;
padding-bottom: 5px;
font-size: 12px;
line-height: 1.6em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
.article table tr td {
text-align: left;
padding: 20px;
font-weight: normal;
}
@media screen and (max-width: 768px) {
.article table tr td {
padding-top: 0;
border-top: none;
display: block;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
.article table tr:nth-of-type(even) th,
.article table tr:nth-of-type(even) td {
background: #212121;
}
.news-detail:not(:last-child) {
margin-bottom: 60px;
}
.news-detail__header {
margin: 0 0 60px;
}
.news-detail__header-date {
color: #bfbfbf;
font-size: 15px;
line-height: 1.6em;
margin-bottom: 20px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
@media screen and (max-width: 768px) {
.news-detail__header-date {
font-size: 12px;
line-height: 1.6em;
}
}
.news-detail__header-title {
margin: 0;
font-size: 24px;
line-height: 1.6em;
}
.news-detail__eyecatch {
font-size: 0;
line-height: 0;
max-width: 848px;
margin-bottom: 60px;
}
.news-detail__text {
max-width: 848px;
}
.page__header {
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.page__header {
margin-bottom: 60px;
}
}
.page__header p {
margin: 0;
}
.page__header p:not(:last-child) {
margin-bottom: 1em;
}
.page__contents {
max-width: 632px;
}
.nav-small:not(:last-child) {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.nav-small:not(:last-child) {
margin-bottom: 40px;
}
}
.nav-small-title {
font-size: 12px;
line-height: 1.5em;
color: #858382;
margin: 0 0 20px;
font-weight: normal;
}
.nav-small ul {
list-style: none;
border-left: 1px solid #808080;
padding-left: 20px;
}
.nav-small ul li:not(:last-child) {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.nav-small ul li:not(:last-child) {
margin-bottom: 0;
}
}
.nav-small ul li a {
display: inline-block;
-webkit-transition: color 0.3s;
transition: color 0.3s;
text-decoration: none;
position: relative;
font-size: 16px;
line-height: 1.4em;
}
.nav-small ul li a:after {
content: "";
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
@media screen and (max-width: 768px) {
.nav-small ul li a:after {
display: none;
}
}
.nav-small ul li a:link, .nav-small ul li a:visited {
color: #ffffff;
}
.nav-small ul li a:hover, .nav-small ul li a:active {
color: #ffffff;
}
.nav-small ul li a:hover:after, .nav-small ul li a:active:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-small ul li a.active {
position: relative;
}
.nav-small ul li a.active:before {
content: "";
position: absolute;
width: 1px;
height: 100%;
left: -21px;
top: 0;
background: #ffffff;
}
.about {
position: relative;
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (max-width: 768px) {
.about {
margin-bottom: 60px;
}
}
.about__text {
max-width: 632px;
}
@media screen and (max-width: 768px) {
.about__text {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.about__text-desc {
margin-bottom: 40px;
}
.about__text-desc p {
margin: 0;
}
.about__text-desc p:not(:last-child) {
margin-bottom: 1em;
}
.about__text-block {
border: 1px solid #fff;
padding: 20px;
}
.about__text-block p {
font-size: 16px;
line-height: 2em;
margin: 0;
}
.about__text-block p:not(:last-child) {
margin-bottom: 1em;
}
.about__image {
font-size: 0;
line-height: 0;
position: absolute;
width: 490px;
left: 672px;
top: 0;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
.about__image {
position: relative;
left: auto;
top: auto;
margin-bottom: 40px;
width: auto;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.service {
position: relative;
margin-bottom: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (max-width: 768px) {
.service {
margin-bottom: 60px;
}
}
.service__subtitle {
font-size: 22px;
line-height: 1.6em;
margin: 0 0 60px;
}
@media screen and (max-width: 767px) {
.service__subtitle {
margin-bottom: 40px;
font-size: 18px;
line-height: 1.6em;
}
}
.service__image {
font-size: 0;
line-height: 0;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
margin: 0 0 60px;
}
@media screen and (max-width: 767px) {
.service__image {
margin-bottom: 40px;
}
}
.service__text-desc p {
margin: 0;
}
.service__text-desc p:not(:last-child) {
margin-bottom: 1em;
}
.message {
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.message {
margin-bottom: 60px;
}
}
.message__video {
max-width: 632px;
}
.message__video div {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.message__video div iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.outline__text {
max-width: 632px;
}
.creative {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 120px;
}
.creative__item {
width: 44%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: auto;
margin-top: 60px;
}
@media screen and (max-width: 768px) {
.creative__item {
width: 100%;
margin-top: 40px;
}
}
.creative__item:first-child {
width: 100%;
margin-top: 0;
}
.creative__item:first-child .creative__item-header {
margin-top: 0 !important;
padding-left: 40px;
}
@media screen and (max-width: 768px) {
.creative__item:first-child .creative__item-header {
padding-left: 16px;
}
}
.creative__item:first-child .creative__item-image {
margin-top: 0 !important;
}
.creative__item:first-child .creative__item-image:before {
padding-top: 100%;
}
.creative__item:first-child .creative__item-title {
font-size: 36px;
line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.creative__item:first-child .creative__item-title {
font-size: 18px;
line-height: 1.5em;
}
}
.creative__item-image {
position: relative;
width: calc(50% - 16px);
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
z-index: 1;
}
.creative__item-image:first-child {
margin-top: 70px;
}
@media screen and (max-width: 768px) {
.creative__item-image:first-child {
margin-top: 0;
}
}
.creative__item-image:first-child + .creative__item-header {
margin-top: 70px;
}
@media screen and (max-width: 768px) {
.creative__item-image:first-child + .creative__item-header {
margin-top: 0;
}
}
.creative__item-image:before {
content: "";
display: block;
padding-top: 56%;
}
.creative__item-image div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.creative__item-logo {
font-size: 0;
line-height: 0;
margin-bottom: 10px;
width: 100%;
}
.creative__item-logo img {
max-height: 60px;
width: auto;
}
.creative__item-header {
width: calc(50% + 16px);
background: #212121;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 10px 10px 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
position: relative;
z-index: 2;
}
.creative__item-header .creative__item-logo {
margin-top: 15%;
margin-left: -100px;
position: relative;
}
@media screen and (max-width: 768px) {
.creative__item-header .creative__item-logo {
margin-left: -40px;
margin-top: auto;
}
}
.creative__item-header .creative__item-logo img {
max-height: 180px;
}
@media screen and (max-width: 768px) {
.creative__item-header .creative__item-logo img {
max-height: 60px;
}
}
.creative__item-header .creative__item-logo + .creative__item-title {
margin-top: 0;
}
.creative__item-title {
font-size: 16px;
line-height: 1.5em;
color: #fff;
margin: auto 0 10px;
}
.creative__item-url {
margin-bottom: auto;
font-size: 11px;
line-height: 1.5em;
font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Yu Gothic", "Meiryo", sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #808080;
}
.creative__item-url a {
text-decoration: underline;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.creative__item-url a:link, .creative__item-url a:visited {
color: #808080;
}
.creative__item-url a:hover, .creative__item-url a:active {
color: #fff;
text-decoration: none;
}
.creative__item-desc {
width: 100%;
margin-top: 20px;
}
.creative__item-desc p {
font-size: 16px;
line-height: 1.8em;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.creative__item-desc p:not(:last-child) {
margin-bottom: 1em;
}
.creative__item-desc.active p {
white-space: inherit;
}
.investment {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.investment:after {
content: "";
width: calc(33.3% - 10px);
height: 0;
display: block;
}
.investment__item {
width: calc(33.3% - 10px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.investment__item {
width: 100%;
}
}
.investment__item-image {
position: relative;
width: 100%;
-webkit-box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 40 rgba(0, 0, 0, 0.4);
z-index: 1;
margin-bottom: 20px;
}
.investment__item-image:before {
content: "";
display: block;
padding-top: 56%;
}
.investment__item-image div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.investment__item-logo {
font-size: 0;
line-height: 0;
margin-bottom: 10px;
width: 100%;
}
.investment__item-logo img {
max-width: 308px;
}
.investment__item-header {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
z-index: 2;
}
.investment__item-header .creative__item-logo {
margin-top: 15%;
margin-left: -100px;
position: relative;
}
.investment__item-header .creative__item-logo img {
max-width: 375px;
}
.investment__item-header .creative__item-logo + .creative__item-title {
margin-top: 0;
}
.investment__item-title {
font-size: 16px;
line-height: 1.5em;
color: #fff;
margin: auto 0 10px;
}
.investment__item-url {
margin-bottom: auto;
font-size: 11px;
line-height: 1.5em;
font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", "Helvetica", "Yu Gothic", "Meiryo", sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #808080;
}
.investment__item-url a {
text-decoration: underline;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.investment__item-url a:link, .investment__item-url a:visited {
color: #808080;
}
.investment__item-url a:hover, .investment__item-url a:active {
color: #fff;
text-decoration: none;
}
.investment__item-desc {
width: 100%;
margin-top: 20px;
}
.investment__item-desc p {
font-size: 16px;
line-height: 1.8em;
margin: 0;
}
.investment__item-desc p:not(:last-child) {
margin-bottom: 1em;
}
.fade {
-webkit-transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
opacity: 0;
}
.fade.move-fix {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.move-v {
-webkit-transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
opacity: 0;
-webkit-transform: translate(0, 20px);
transform: translate(0, 20px);
}
.move-v.move-fix {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.move-l {
-webkit-transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
opacity: 0;
-webkit-transform: translate(20px, 0);
transform: translate(20px, 0);
}
.move-l.move-fix {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.move-r {
-webkit-transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s;
transition: opacity 0.8s 0.1s, transform 0.8s 0.1s, -webkit-transform 0.8s 0.1s;
opacity: 0;
-webkit-transform: translate(-20px, 0);
transform: translate(-20px, 0);
}
.move-r.move-fix {
opacity: 1;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contents:not(:last-child) {
margin-bottom: 120px;
}
@media screen and (max-width: 768px) {
.contents:not(:last-child) {
margin-bottom: 60px;
}
}
.contents:nth-of-type(even) .contents__image {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
.contents:nth-of-type(even) .contents__text {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.contents__image {
width: 46%;
font-size: 0;
line-height: 0;
}
@media screen and (max-width: 768px) {
.contents__image {
width: 100%;
margin-bottom: 40px;
-webkit-box-ordinal-group: 2 !important;
-ms-flex-order: 1 !important;
order: 1 !important;
}
}
.contents__image img {
aspect-ratio: 1 / 1;
-o-object-fit: cover;
object-fit: cover;
}
.contents__image + .contents__text {
width: 46%;
}
@media screen and (max-width: 768px) {
.contents__image + .contents__text {
width: 100%;
-webkit-box-ordinal-group: 3 !important;
-ms-flex-order: 2 !important;
order: 2 !important;
}
}
.contents__text-title {
font-size: 22px;
line-height: 1.6em;
margin: 0 0 60px;
font-weight: 500;
}
@media screen and (max-width: 768px) {
.contents__text-title {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 40px;
}
}
.contents__text-desc p {
margin: 0;
}
.contents__text-desc p:not(:last-child) {
margin-bottom: 1em;
}
.list__no {
margin: 0;
}
.list__no:not(:last-child) {
margin-bottom: 40px;
}
.list__no dt {
font-size: 22px;
line-height: 1.5em;
margin: 0 0 40px;
text-indent: -28px;
padding-left: 28px;
}
.list__no dd {
margin: 0;
padding: 0 0 0 20px;
border-left: 1px solid #808080;
}
.list__no dd:not(:last-child) {
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.list__no dd:not(:last-child) {
margin-bottom: 40px;
}
}
.caption {
font-size: 10px !important;
line-height: 1.6em !important;
text-align: center !important;
color: #fff !important;
margin-top: 10px !important;
width: 100%;
clear: both;
}
.sec:not(:last-child) {
margin-bottom: 128px;
}
@media screen and (max-width: 768px) {
.sec:not(:last-child) {
margin-bottom: 64px;
}
}
.sec-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.sec-block .cb {
width: 100%;
}
.sec-block a:link, .sec-block a:visited {
text-decoration: underline;
color: #fff;
}
.sec-block a:hover, .sec-block a:active {
text-decoration: none;
color: #fff;
}
.sec-block p {
margin: 0;
}
.sec-block p:not(:last-child) {
margin-bottom: 1em;
}
.sec-block:not(:last-child) {
margin-bottom: 40px;
}
.sec-block__image {
width: 46%;
font-size: 0;
line-height: 0;
}
@media screen and (max-width: 768px) {
.sec-block__image {
width: 100%;
margin-bottom: 30px;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
.sec-block__image img {
aspect-ratio: 1 / 1;
-o-object-fit: cover;
object-fit: cover;
}
.sec-block__text {
width: 46%;
}
@media screen and (max-width: 768px) {
.sec-block__text {
width: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.sec-block__title {
font-size: 22px;
line-height: 1.4em;
font-weight: 500;
margin: 0 0 1em;
}
@media screen and (max-width: 768px) {
.sec-block__title {
font-size: 18px;
line-height: 1.4em;
}
}
.block-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 72px;
padding-top: 32px;
width: 100%;
}
@media screen and (max-width: 768px) {
.block-list {
padding-top: 0;
gap: 40px;
}
}
.block-list__item {
width: calc(50% - 36px);
}
@media screen and (max-width: 768px) {
.block-list__item {
width: 100%;
}
}
.block-list--three {
gap: 16px;
}
@media screen and (max-width: 768px) {
.block-list--three {
gap: 40px;
}
}
.block-list--three .block-list__item {
width: calc(33.3% - 11px);
}
@media screen and (max-width: 768px) {
.block-list--three .block-list__item {
width: 100%;
}
}
.block-list--slider {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 40px;
}
.block-list--slider:not(:last-child) {
margin-bottom: 1em;
}
.block-list--slider .block-list__item {
float: left;
width: auto;
margin-right: 16px;
}
.slick-list {
overflow: inherit;
}
.slick-slider .slick-arrow {
position: absolute;
bottom: 0;
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.slick-slider .slick-arrow:after {
content: "";
width: 24px;
height: 24px;
border: 1px solid #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
}
@media screen and (min-width: 769px) {
.slick-slider .slick-arrow:hover img {
-webkit-animation: arrow 0.6s ease-in-out;
animation: arrow 0.6s ease-in-out;
}
}
.slick-slider .slick-disabled {
opacity: 0.3;
pointer-events: none;
}
.slick-slider .slick-prev {
right: 40px;
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.slick-slider .slick-next {
right: 0;
}
.slick-slider .slick-dots {
list-style: none;
margin: 40px 0 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 2px;
-ms-flex-item-align: center;
align-self: center;
height: 24px;
font-size: 0;
line-height: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.slick-slider .slick-dots > li.slick-active button {
opacity: 1;
}
.slick-slider .slick-dots > li button {
display: block;
font-size: 0;
line-height: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background: #ffffff;
opacity: 0.3;
width: 80px;
height: 2px;
border: none;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
@media screen and (max-width: 1200px) {
.slick-slider .slick-dots > li button {
width: 40px;
}
}
@media screen and (max-width: 768px) {
.slick-slider .slick-dots > li button {
width: 24px;
}
}
.block__title {
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 1.6em;
padding: 20px 0;
margin: 0;
border-top: 1px solid #333;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.block__image {
font-size: 0;
line-height: 0;
}
.block__image:not(:last-child) {
margin-bottom: 20px;
}
.block__image img {
aspect-ratio: 4 / 3;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: auto;
}
.block__desc--short p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow: hidden;
}
.block__desc--short.active p {
white-space: inherit;
}
.get-wallet {
position: relative;
aspect-ratio: 10 / 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.get-wallet {
aspect-ratio: 2 / 1;
}
}
.get-wallet:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
pointer-events: none;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
@media screen and (max-width: 768px) {
.get-wallet:before {
opacity: 0;
}
}
@media screen and (min-width: 769px) {
.get-wallet:hover:before {
opacity: 0;
}
.get-wallet:hover .get-wallet__arrow img {
-webkit-animation: arrow 0.6s ease-in-out;
animation: arrow 0.6s ease-in-out;
}
}
.get-wallet__image {
font-size: 0;
line-height: 0;
position: absolute;
left: 0;
top: 0;
}
.get-wallet__image a {
display: block;
border-radius: 8px;
overflow: hidden;
}
.get-wallet__image a img {
aspect-ratio: 10 / 3;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 768px) {
.get-wallet__image a img {
aspect-ratio: 2 / 1;
}
}
.get-wallet__text {
margin-top: 32px;
position: relative;
z-index: 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
pointer-events: none;
}
.get-wallet__en {
font-size: 48px;
line-height: 1.4em;
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-weight: 400;
letter-spacing: 0;
}
@media screen and (max-width: 768px) {
.get-wallet__en {
font-size: 28px;
line-height: 1.5em;
}
}
.get-wallet__jp {
font-size: 10px;
line-height: 1em;
font-weight: 500;
}
.get-wallet__arrow {
font-size: 0;
line-height: 0;
width: 24px;
height: 24px;
position: relative;
margin-top: 16px;
}
.get-wallet__arrow:after {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #fff;
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body.page-hardware_wallet {
padding-top: 0;
}
.wallet-mv {
font-size: 0;
line-height: 0;
position: relative;
z-index: 0;
margin: 0 0 40px;
aspect-ratio: 16 / 9;
background: #000;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
overflow: hidden;
}
.wallet-mv.slick-initialized {
opacity: 1;
}
.wallet-mv:after {
content: "";
width: 100%;
height: 150px;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(transparent));
background: linear-gradient(to bottom, #000, transparent);
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
}
.wallet-mv__item {
float: left;
overflow: hidden;
}
.wallet-mv__item img {
aspect-ratio: 16 / 9;
-o-object-fit: cover;
object-fit: cover;
}
.wallet-mv__item.add-animation img {
-webkit-animation: zoomOut 6s linear 0s normal both;
animation: zoomOut 6s linear 0s normal both;
}
@-webkit-keyframes zoomOut {
0% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoomOut {
0% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes arrow {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
50% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
opacity: 0;
}
51% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@keyframes arrow {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
50% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
opacity: 0;
}
51% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
}
@-webkit-keyframes balloon {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
50% {
opacity: 0.3;
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
@keyframes balloon {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
50% {
opacity: 0.3;
}
100% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
}
.buynow {
width: 100px;
height: 100px;
position: fixed;
right: 20px;
top: calc(50vh - 30px);
z-index: 9999;
}
@media screen and (max-width: 768px) {
.buynow {
width: 80px;
height: 80px;
right: 15px;
}
}
.buynow:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
display: block;
border-radius: 50%;
background: rgba(227, 156, 0, 0.85);
-webkit-animation: balloon 1.6s ease-in-out infinite;
animation: balloon 1.6s ease-in-out infinite;
width: 100%;
height: 100%;
}
.buynow a {
background: rgba(227, 156, 0, 0.85);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: 1em;
position: relative;
z-index: 2;
-webkit-transition: opacity 0.3s, background 0.3s;
transition: opacity 0.3s, background 0.3s;
letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
.buynow a {
font-size: 8px;
}
}
.buynow a:link, .buynow a:visited {
text-decoration: none;
color: #fff;
}
.buynow a:hover, .buynow a:active {
text-decoration: none;
color: #fff;
}
@media screen and (min-width: 769px) {
.buynow a:hover, .buynow a:active {
background: rgba(227, 156, 0, 0.95);
}
}
.buynow a:after {
content: "";
width: 6px;
height: 6px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
display: block;
position: absolute;
left: calc(50% - 3px);
bottom: 15px;
}
.buynow.under a:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: auto;
top: 15px;
}
.item-list {
border-top: 1px solid #333;
width: 100%;
}
.item-list__item {
border-bottom: 1px solid #333;
}
.item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 40px 0;
width: 100%;
}
@media screen and (max-width: 768px) {
.item {
gap: 20px;
}
}
.item__image {
font-size: 0;
line-height: 0;
width: calc(50% - 36px);
}
@media screen and (max-width: 768px) {
.item__image {
width: 100%;
}
}
.item__image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
-o-object-fit: cover;
object-fit: cover;
}
.item__slide {
width: 100%;
overflow: hidden;
}
.item__slide > div {
float: left img;
float-width: 100%;
}
.item__text {
width: calc(50% - 36px);
}
@media screen and (max-width: 768px) {
.item__text {
width: 100%;
}
}
.item__name {
font-family: "Times New Roman";
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 1.2em;
margin: 0 0 8px;
letter-spacing: 0;
}
.item__name sup {
font-size: 18px;
}
.item__subname {
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 1.6em;
letter-spacing: 1.8px;
margin: 0 0 20px;
}
.item__price {
font-family: Inter;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: 1em;
letter-spacing: 2.4px;
margin: 0 0 40px;
}
.item__desc {
margin-bottom: 40px;
}
.item__btn {
margin-bottom: 40px;
}
.item__btn > span {
display: block;
text-align: center;
border: 1px solid #333;
padding: 16px;
background: rgba(0, 0, 0, 0.4);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.6em;
letter-spacing: 0;
color: #333;
}
.item__tag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 16px;
}
.item__tag span {
display: block;
border-radius: 2px;
border: 1px solid #808080;
padding: 6px 16px;
font-size: 14px;
line-height: 1.2em;
}
.faq-list {
border-top: 1px solid #333;
}
.faq-list__item {
border-bottom: 1px solid #333;
padding: 40px 0;
}
.faq__title {
font-size: 18px;
line-height: 2em;
font-weight: 700;
margin: 0;
}
.faq__desc {
padding-left: 1em;
}
.btn--standard {
border: 1px solid #fff;
display: inline-block;
padding: 8px 24px;
border-radius: 30px;
font-size: 12px;
line-height: 1.4em;
-webkit-transition: background 0.3s;
transition: background 0.3s;
font-weight: 400;
}
.btn--standard:link, .btn--standard:visited {
text-decoration: none !important;
color: #fff;
}
.btn--standard:hover, .btn--standard:active {
text-decoration: none !important;
color: #fff;
}
@media screen and (min-width: 769px) {
.btn--standard:hover, .btn--standard:active {
background: #fff;
color: #000 !important;
}
}
.btn--buy {
cursor: pointer;
border-radius: 2px;
background: -webkit-gradient(linear, left top, right top, from(#e39c00), to(#c98a00));
background: linear-gradient(90deg, #e39c00 0%, #c98a00 100%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 24px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.6em;
letter-spacing: 0;
position: relative;
text-decoration: none !important;
}
.btn--buy > span {
position: relative;
z-index: 2;
}
.btn--buy:after {
content: "";
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #fff;
display: block;
position: absolute;
right: 24px;
top: calc(50% - 12px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-item-align: 2;
-ms-grid-row-align: 2;
align-self: 2;
}
.btn--buy img {
position: relative;
z-index: 2;
}
.btn--buy:before {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 0;
background: -webkit-gradient(linear, left top, right top, from(#ffbb00), to(#ffaf00));
background: linear-gradient(90deg, #ffbb00 0%, #ffaf00 100%);
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
@media screen and (min-width: 769px) {
.btn--buy:hover:before {
opacity: 1;
}
.btn--buy:hover img {
-webkit-animation: arrow 0.6s ease-in-out;
animation: arrow 0.6s ease-in-out;
}
}
.sec-download {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 40px;
}
@media screen and (max-width: 768px) {
.sec-download {
gap: 24px;
}
}
.sec-download__image {
font-size: 0;
line-height: 0;
width: 100%;
max-width: 265px;
}
@media screen and (max-width: 980px) {
.sec-download__image {
max-width: 100%;
}
}
.sec-download__image img {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sec-download__text {
width: 100%;
max-width: calc(100% - 305px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 32px;
}
@media screen and (max-width: 980px) {
.sec-download__text {
max-width: 100%;
gap: 24px;
}
}
.sec-download__btn {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 24px;
font-size: 0;
line-height: 0;
}
@media screen and (max-width: 1100px) {
.sec-download__btn {
gap: 8px;
}
}
@media screen and (max-width: 768px) {
.sec-download__btn {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 16px;
}
}
@media (hover: hover) {
.sec-download__btn a {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.sec-download__btn a:hover {
opacity: 0.8;
}
}
.sec-download__btn a img {
width: auto;
height: 80px;
}
@media screen and (max-width: 1100px) {
.sec-download__btn a img {
height: 60px;
}
}
@media screen and (max-width: 768px) {
.sec-download__btn a img {
height: 40px;
}
}
.sec-download__note {
font-size: 12px;
line-height: 1.5em;
}
@media screen and (max-width: 768px) {
.sec-download__note {
font-size: 10px;
line-height: 1.5em;
}
}
.sec-start {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 40px;
width: 100%;
}
@media screen and (max-width: 768px) {
.sec-start {
gap: 40px;
}
}
.sec-start__image {
font-size: 0;
line-height: 0;
width: 100%;
max-width: 265px;
}
@media screen and (max-width: 768px) {
.sec-start__image {
max-width: 100%;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.sec-start__image img {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sec-start__text {
width: 100%;
max-width: calc(100% - 305px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px;
}
@media screen and (max-width: 768px) {
.sec-start__text {
max-width: 100%;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
gap: 24px;
}
}
.sec-function {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.sec-function__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 8px;
width: 100%;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sec-function__item span {
width: 30px;
height: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
background: #fff;
color: #000;
font-size: 18px;
line-height: 1em;
font-weight: bold;
-webkit-transform: translateY(3px);
transform: translateY(3px);
}
.sec-function__item p {
width: 100%;
max-width: calc(100% - 48px);
}
.banner {
position: relative;
overflow: hidden;
-webkit-transition: -webkit-transform 0.4s ease;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
@media (any-pointer: fine) {
.banner:hover {
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
}