@charset "UTF-8";
html {
font-size: 0.7vw;
}
body {
background-color: #fff;
font-size: 11px;
font-weight: 400;
font-style: normal;
line-height: 1.72;
letter-spacing: .03em;
}
body.open,
html.open {
overflow: hidden;
}
/* header */
.top-header {
position: relative;
z-index: 2;
}
.top-header h1 {
position: fixed;
left: 15px;
top: 10px;
width: 262px;
}
.top-header p {
display: none;
}
@media screen and (min-width: 768px) {
.top-header h1 {
position: fixed;
left: 20px;
top: 20px;
width: 262px;
}
}
@media screen and (min-width: 860px) {
.top-header p {
display: block;
position: fixed;
right: 15px;
top: 20px;
width: 464px;
}
}
/* contents */
.img-wrap {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 80px;
box-sizing: content-box;
}
.img-wrap.last {
margin-bottom: 0;
}
.wrap-l {
max-width: 1326px;
}
.wrap-m {
max-width: 994px;
}
.img-inner {
display: block;
margin-left: auto;
margin-right: auto;
}
.key-img {
width: 100%;
}
.area01 {
padding-top: 80px;
}
@media screen and (max-width: 767px) {
.area01 .img-wrap {
padding-left: 0px;
padding-right: 0px;
}
}
@media screen and (min-width: 768px) {
.img-wrap {
padding-left: 20px;
padding-right: 20px;
margin-bottom: 200px;
}
.key-img {
width: 68.41%;
}
.area01 {
padding-top: 146px;
}
}
.box-flex {
display: flex;
justify-content: space-between;
}
.box-flex .img-inner {
margin-left: 0;
margin-right: 0;
}
.img-inner a {
display: block;
}
.img-wrap a img {
display: block;
}
.img-01 {
width: 60%;
max-width: 600px;
}
.img-02 {
width: 30%;
max-width: 300px;
}
.img-03 {
width: 29.2%;
max-width: 292px;
}
.img-04 {
width: 40%;
max-width: 400px;
}
.img-05 {
width: 80%;
max-width: 800px;
}
.img-06 {
width: 50%;
max-width: 500px;
}
.box-01 {
align-items: flex-end;
}
.box-09 {
align-items: flex-start;
}
.box-02, .box-04, .box-06, .box-07, .box-10 {
align-items: center;
}
.box-02 .img-03 a:first-child, .box-04 .img-03 a:first-child, .box-06 .img-03 a:first-child, .box-07 .img-03 a:first-child, .box-10 .img-03 a:first-child {
margin-bottom: 5.96%;
}
@media screen and (min-width: 1280px) {
.box-06 {
align-items: flex-start;
}
.box-06 .img-03 {
display: flex;
align-items: flex-start;
width: 60.4%;
max-width: 604px;
}
.box-06 .img-03 a:first-child {
margin-right: 3.15%;
}
}
/* contents hover */
@media screen and (min-width: 768px) {
.img-wrap a {
overflow: hidden;
border-radius: 0;
transition: all .25s linear;
position: relative;
z-index: 1;
}
.img-wrap a::after {
content: "";
display: inline-block;
color: #000;
width: 21.67%;
aspect-ratio: 130 / 21;
background-image: url(../images/txt_view.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
opacity: 0;
transition: all .25s linear;
}
.img-wrap a img {
transition: all .25s linear;
}
.img-wrap a:hover img {
opacity: 0.5!important;
transform: scale(1.03)!important;
}
.img-wrap a:hover {
border-radius: 12.33% 12.33% 12.33% 12.33% / 9.87% 9.87% 9.87% 9.87%;
}
.img-wrap a.img-05:hover {
border-radius: 7.4% 7.4% 7.4% 7.4% / 13.16% 13.16% 13.16% 13.16%;
}
.img-wrap a:hover::after {
opacity: 1;
}
}
.img-04 {
width: 40%;
max-width: 400px;
}
[data-aos="fade-in"] {
transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000)!important;
transition-duration: 2s!important;
}
.btn a {
display: inline-block;
border: 1px solid #111;
border-radius: 16px;
background: #fff;
display: block;
/* color: #111;
width: 23.4rem;
height: 4.6rem;
font-size: 1.7rem;
line-height: 4.6rem;
text-align: center;
transition: all .3s linear;
backdrop-filter: blur(3px);
*/
}
.btn a img {
display: block;
}
@media screen and (min-width: 768px) {
.btn a {
transition: all .25s linear;
border: 1px solid #111;
}
.btn a:hover {
filter: invert(100%);
border-color: #fff;
}
}
.sticky-btn01, .sticky-btn02 {
width: 134px;
position: sticky;
left: 50%;
bottom: 40px;
padding-top: 70px;
z-index: 2;
transform: translateX(-50%);
}
.sticky-space {
}
@media screen and (max-width: 767px) {
.sticky-btn01, .sticky-btn02 {
bottom: 20px;
padding-top: 50px;
z-index: 2;
transform: translateX(-50%);
}
}
/* footer */
.footer {
margin-top: 80px;
border-top: 1px solid #000;
}
.footer .img-wrap {
margin-bottom: 0;
}
.footer-01 {
padding-top: 42px;
padding-bottom: 42px;
border-bottom: 1px solid #000;
}
.footer-02 {
display: flex;
justify-content: space-between;
padding-top: 13px;
padding-bottom: 13px;
}
@media screen and (max-width: 768px) {
.footer, .footer-01 {
border-width: 1px;
}
}
@media screen and (max-width: 767px) {
.footer {
margin-top: 80px;
}
}
/* modal */
.btn-open-modal, .btn-close-modal {
cursor: pointer;
}
.btn-open-modal a {
pointer-events: none;
}
.modal-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
z-index: 4;
overflow-y: auto;
display: none;
background: #fff;
}
.modal-img {
position: relative;
}
.modal-img img {
display: block;
}
.modal-img .btn-open-modal {
width: 9px;
position: absolute;
}
.modal-img .back {
left: 0;
top: 50%;
transform: translateY(-50%);
padding-left: 15px;
padding-right: 50vw;
height: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.modal-img .next {
right: 0;
top: 50%;
transform: translateY(-50%);
padding-right: 15px;
padding-left: 50vw;
height: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.ico-close {
width: 23px;
position: absolute;
right: 15px;
top: 15px;
}
.credit {
padding-left: 15px;
padding-right: 15px;
}
.credit li a {
display: flex;
flex-wrap: wrap;
font-size: 13px;
line-height: 1.5;
padding: 0.5px 0;
}
.credit .name {
font-weight: 700;
margin-right: 5px;
}
.credit .bland {
margin-right: 5px;
}
.credit .bland::before {
content: "by ";
}
.credit .price {
margin-right: 7px;
}
.credit .buy span {
display: inline-block;
border: 1px solid #000;
font-size: 10px;
padding: 0 4px;
line-height: 1.2;
}
.credit a[href=""] {
pointer-events: none;
}
.credit a[href=""] .buy span {
opacity: 0.3;
}
.back-btn a {
width: 134px;
display: block;
}
@media screen and (max-width: 767px) {
.credit {
padding: 10px 15px;
}
.credit li a {
justify-content: space-between;
}
.credit a > div:first-child {
width: calc(100% - 78px);
}
.credit .buy {
width: 78px;
text-align: right;
}
.back-btn {
padding: 14px 15px;
border-top: 1px solid #000;
}
.back-btn a {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 768px) {
.modal-wrap {
position: fixed;
left: 0;
top: 0;
overflow: hidden;
}
.modal-img img {
width: auto;
height: calc(var(--vh, 1vh) * 100);
text-align: center;
margin-left: auto;
margin-right: auto;
}
.modal-img .btn-open-modal {
width: 17px;
}
.modal-img .back {
padding-left: 20px;
padding-right: 20vw;
}
.modal-img .next {
padding-right: 20px;
padding-left: 20vw;
}
.ico-close {
width: 30px;
right: 20px;
top: 20px;
}
.credit {
padding-left: 20px;
padding-right: 20px;
position: absolute;
left: 0;
bottom: 14px;
}
.credit a {
transition: all .25s linear;
}
.credit a:hover {
opacity: .5;
}
.credit .buy span {
border-width: 1px;
}
.back-btn {
position: fixed;
left: 20px;
top: 20px;
}
}
.opening {
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background: #fff;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
position: fixed;
left: 0;
top: 0;
z-index: 9;
}
.path-logo {
fill: none;
stroke: #fff;
stroke-width: 14.5;
}
.svg-wrap {
position: relative;
width: 90%;
max-width: 758px;
height: 71.19vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
transform: translateY(-4%);
}
.img-op {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
text-align: center;
}
.img-op img {
width: 52.37%;
height: 100%;
object-fit: contain;
object-position: center;
}
.mask-wrap {
position: relative;
z-index: 1;
mix-blend-mode: multiply;
width: 100%;
}
.txt-op {
width: 64.23%;
max-width: 541px;
position: absolute;
bottom: 7.301%;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
.img-op img {
width: 71%;
}
.txt-op {
width: 67.5%;
bottom: 8%;
}
}