@charset "utf-8"; .aimeine-archive-240419 { width: 100%; margin: auto; margin-bottom: 224px; font-family: 'Noto Serif JP', serif; font-weight: 400; color: #1A1311; } .aimeine-archive-240419 img { width: 100%; max-width: none; } @keyframes fadeAnime { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:translateY(0px) } } .aimeine-archive-240419 .fade { visibility: hidden; } .aimeine-archive-240419 .fade.is-in { visibility: visible; -webkit-animation-name: fadeAnime; animation-name: fadeAnime; -webkit-animation-duration: 1000ms; animation-duration: 1000ms; opacity: 0; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .aimeine-archive-240419 .fade-text { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); -webkit-transition: 1s; transition: 1s; } .aimeine-archive-240419 .fade-text.is-in { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .aimeine-archive-240419 .aimeine-concept { position: relative; width: calc(910 / 1400 * 100vw); margin: 0 auto calc(134 / 1400 * 100vw); padding-bottom: calc(122 / 1400 * 100vw); text-align: center; } .aimeine-archive-240419 .aimeine-concept::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(57 / 1400 * 100vw); height: 2px; background: #707070; } .aimeine-archive-240419 .aimeine-concept .aimeine-banner { margin-bottom: calc(55 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-concept .logo { width: calc(250 / 1400 * 100vw); margin: 0 auto calc(78 / 1400 * 100vw); padding-bottom: calc(75 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-concept .logo::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(88 / 1400 * 100vw); height: 2px; background: #707070; } .aimeine-archive-240419 .aimeine-concept h1 { width: calc(400 / 1400 * 100vw); margin: 0 auto calc(92 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-jp { margin-bottom: calc(59 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-jp p { font-size: 19px; line-height: 30px; letter-spacing: 0.04em; } .aimeine-archive-240419 .aimeine-concept .description-jp p+p { margin-top: 14px; } .aimeine-archive-240419 .aimeine-concept .description-en p { font-size: 16px; line-height: 25px; } .aimeine-archive-240419 .aimeine-concept .description-en p+p { margin-top: 44px; } .aimeine-archive-240419 .aimeine-style .style-title { position: relative; text-align: center; } .aimeine-archive-240419 .aimeine-style .style-title .num { width: auto; height: calc(23 / 1400 * 100vw); margin: 0 auto calc(27 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style-title .num img { width: auto; height: 100%; } .aimeine-archive-240419 .aimeine-style .style-title h2 { font-family: "linotype-didot", serif; font-size: 38px; line-height: 140%; font-weight: 400; letter-spacing: 0.03em; } .aimeine-archive-240419 .aimeine-style .swiper-wrapper { height: auto; } .aimeine-archive-240419 .aimeine-style .image-list { position: relative; margin: auto; } .aimeine-archive-240419 .aimeine-style .image-list .image { position: relative; } .aimeine-archive-240419 .aimeine-style .image-list .image .color { position: absolute; right: calc(-12 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .color img { width: 100%; } .aimeine-archive-240419 .aimeine-style .image-list .image .credit { display: flex; align-items: flex-end; flex-direction: column; margin-top: calc(30 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit a { height: calc(16.5 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit a+a { margin-top: calc(14.5 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit img { width: auto; height: 100%; } .aimeine-archive-240419 .aimeine-style .image-list .slider { position: relative; padding-bottom: calc(30 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .slider .swiper-pagination { bottom: 0; left: 50%; transform: translateX(-50%); } .aimeine-archive-240419 .aimeine-style .image-list .slider .swiper-pagination .swiper-pagination-bullet { width: calc(80 / 1400 * 100vw); height: calc(8 / 1400 * 100vw); margin: 0 calc(1.5 / 1400 * 100vw); border: 1px solid #BCBBBB; border-radius: 0; background: #fff; opacity: 1; } .aimeine-archive-240419 .aimeine-style .image-list .slider .swiper-pagination .swiper-pagination-bullet-active { background: #BCBBBB; } .aimeine-archive-240419 .aimeine-style .style01 .list03 h3 { text-align: center; font-family: "linotype-didot", serif; font-size: calc(53 / 1400 * 100vw); line-height: calc(81 / 1400 * 100vw); color: #1F2E55; font-weight: 400; } .aimeine-archive-240419 .aimeine-style .staff { width: calc(696 / 1400 * 100vw); margin: calc(224 / 1400 * 100%) auto 0; } .aimeine-archive-240419 .aimeine-style .view-item { display: block; width: calc(219 / 1400 * 100vw); margin: calc(84 / 1400 * 100%) auto 0; } .aimeine-archive-240419 .archive { width: calc(836 / 1400 * 100vw); margin: calc(184 / 1400 * 100%) auto 0; } .aimeine-archive-240419 .archive h2 { display: block; width: calc(114 / 1400 * 100vw); margin: 0 auto calc(44 / 1400 * 100vw); } .aimeine-archive-240419 .archive ul li+li { margin-top: calc(20 / 1400 * 100vw); } @media screen and (min-width: 769px) { .aimeine-archive-240419 .aimeine-style .swiper-container { position: unset; } .aimeine-archive-240419 .aimeine-style .swiper-wrapper { position: unset; transform: unset; } .aimeine-archive-240419 .aimeine-style .style01 { margin-bottom: calc(106 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .style-title { margin-bottom: calc(126 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 { display: flex; flex-wrap: wrap; justify-content: space-between; left: calc(18 / 1400 * 100vw); width: calc(1038 / 1400 * 100vw); margin-bottom: calc(170 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .style-title { order: 1; } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-01 { order: 3; width: calc(431 / 1400 * 100vw); margin-top: calc(294 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-01 .color { top: calc(16 / 1400 * 100vw); width: calc(25 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-02 { order: 2; width: calc(576 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 { display: flex; flex-wrap: wrap; width: calc(979 / 1400 * 100vw); margin-bottom: calc(107 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .slider { order: 1; width: 100%; margin-bottom: calc(58 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .slider .swiper-container { width: calc(562 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-05 { order: 3; width: calc(446 / 1400 * 100vw); margin-top: calc(278 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-05 .color { top: calc(22 / 1400 * 100vw); width: calc(19 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-06 { order: 2; width: calc(495 / 1400 * 100vw); margin-right: calc(38 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-07 { width: calc(622 / 1400 * 100vw); margin: 0 auto calc(69 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-07 .color { top: calc(26.7 / 1400 * 100vw); width: calc(25 / 1400 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 h3 { margin-bottom: calc(51 / 1400 * 100vw); letter-spacing: .014em; } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-08 { width: calc(586 / 1400 * 100vw); margin: auto; } } @media screen and (min-width: 1400px) { } @media screen and (max-width: 769px) { .aimeine-archive-240419 { width: auto; margin-bottom: calc(80 / 390 * 100vw); } .aimeine-archive-240419 .aimeine-concept { width: auto; margin-bottom: calc(100 / 750 * 100vw); padding-bottom: calc(123 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept::after { width: calc(72 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .aimeine-banner { margin-bottom: calc(74 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .logo { width: calc(270 / 750 * 100vw); margin-bottom: calc(79 / 750 * 100vw); padding-bottom: calc(83 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .logo::after { width: calc(103 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept h1 { left: calc(-4 / 750 * 100vw); width: calc(437 / 750 * 100vw); margin-bottom: calc(102 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-jp { margin-bottom: calc(69 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-jp p { font-size: calc(16 / 750 * 100vw); line-height: calc(30 / 750 * 100vw); letter-spacing: .1em; } .aimeine-archive-240419 .aimeine-concept .description-jp p+p { margin-top: calc(19 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-en p { font-size: calc(14 / 750 * 100vw); line-height: calc(30 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-concept .description-en p+p { margin-top: calc(56 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style-title { margin-bottom: calc(79 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style-title .num { height: calc(26 / 750 * 100vw); margin-bottom: calc(26 / 750 * 100vw); font-size: calc(24 / 750 * 100vw); line-height: calc(40 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style-title h2 { font-size: calc(41 / 750 * 100vw); line-height: calc(53 / 750 * 100vw); letter-spacing: -0.01em; } .aimeine-archive-240419 .aimeine-style .image-list { position: relative; margin: auto; } .aimeine-archive-240419 .aimeine-style .image-list .image .color { right: calc(-9 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit { margin-top: calc(34 / 750 * 100vw); margin-right: calc(5 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit a { height: calc(18 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .image-list .image .credit a+a { margin-top: calc(13 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 { margin-bottom: calc(96 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-01 { width: calc(585 / 750 * 100vw); margin: 0 auto calc(71 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-01 .color { top: calc(35 / 750 * 100vw); width: calc(27 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-02 { margin-bottom: calc(96 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list01 .image01-02 .credit { margin-right: calc(34 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 { margin-bottom: calc(123 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .slider { margin-bottom: calc(82 / 750 * 100vw); padding-bottom: 0; } .aimeine-archive-240419 .aimeine-style .style01 .list02 .slider .swiper-container { width: calc(100% + (5 / 750 * 100vw)); margin-left: calc(-5 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .slider .swiper-slide { width: calc(674 / 750 * 100vw); margin: 0 calc(5 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-05 { width: calc(612 / 750 * 100vw); margin-bottom: calc(70 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-05 .color { top: calc(28 / 750 * 100vw); width: calc(23.5 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list02 .image01-06 { width: calc(612 / 750 * 100vw); margin-left: auto; margin-right: calc(30 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-07 { margin: 0 auto calc(97 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-07 .color { top: calc(40 / 750 * 100vw); right: calc(28 / 750 * 100vw); width: calc(28 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .style01 .list03 h3 { margin-bottom: calc(102 / 750 * 100vw); font-size: calc(45 / 750 * 100vw); line-height: calc(70 / 750 * 100vw); letter-spacing: .02em; } .aimeine-archive-240419 .aimeine-style .style01 .list03 .image01-08 { width: calc(661 / 750 * 100vw); margin: auto; } .aimeine-archive-240419 .aimeine-style .staff { width: calc(404 / 750 * 100vw); margin-top: calc(170 / 750 * 100vw); } .aimeine-archive-240419 .aimeine-style .view-item { width: calc(360 / 750 * 100vw); margin-top: calc(132 / 750 * 100vw); } .aimeine-archive-240419 .archive { left: 0; width: calc(636 / 750 * 100vw); margin-top: calc(115 / 750 * 100%); } .aimeine-archive-240419 .archive h2 { position: relative; left: calc(20 / 750 * 100vw); width: calc(97 / 750 * 100vw); margin-bottom: calc(39.6 / 750 * 100vw); } } .aimeine-instagram { width: calc(1000 / 1400 * 100vw); margin: auto; padding-top: calc(142 / 1400 * 100vw); border-top: 1px solid #E0E0E0; } .aimeine-instagram img { width: 100%; max-width: none; } .aimeine-instagram h2 { width: calc(227 / 1400 * 100vw); margin: 0 auto calc(56 / 1400 * 100vw); } .aimeine-instagram .instagram-account { display: flex; justify-content: center; margin-bottom: calc(56 / 1400 * 100vw); margin-left: calc(12 / 1400 * 100vw); } .aimeine-instagram .instagram-account a { height: calc(21 / 1400 * 100vw); } .aimeine-instagram .instagram-account a+a { margin-left: calc(135 / 1400 * 100vw); } .aimeine-instagram .instagram-account a img { width: auto; height: 100%; } .aimeine-instagram .instagram-item-list ul { display: flex; flex-wrap: wrap; } .aimeine-instagram .view-all { display: block; width: calc(204 / 1400 * 100vw); margin: calc(56 / 1400 * 100%) auto 0; } @media screen and (min-width: 769px) { .aimeine-instagram .instagram-item-list ul { gap: calc(4 / 1400 * 100vw); } .aimeine-instagram .instagram-item-list ul li { width: calc(247 / 1400 * 100vw); } .aimeine-instagram .instagram-item-list ul li:not(:nth-of-type(-n+8)) { display: none; } } @media screen and (min-width: 1400px) { .aimeine-instagram { width: 1000px; padding-top: 142px; } .aimeine-instagram h2 { width: 227px; margin: 0 auto 56px; } .aimeine-instagram .instagram-account { margin-bottom: 56px; margin-left: 12px; } .aimeine-instagram .instagram-account a { height: 21px; } .aimeine-instagram .instagram-account a+a { margin-left: 135px; } .aimeine-instagram .instagram-item-list ul { gap: 4px; } .aimeine-instagram .instagram-item-list ul li { width: 247px; } .aimeine-instagram .view-all { display: block; width: 204px; margin: 56px auto 0; } } @media screen and (max-width: 769px) { .aimeine-instagram { width: 100%; padding-top: calc(80 / 390 * 100vw); } .aimeine-instagram h2 { width: calc(143 / 390 * 100vw); margin: 0 auto calc(35 / 390 * 100vw); } .aimeine-instagram .instagram-account { margin-bottom: calc(35 / 390 * 100vw); margin-left: 0; } .aimeine-instagram .instagram-account a { height: calc(16 / 390 * 100vw); } .aimeine-instagram .instagram-account a+a { margin-left: calc(60 / 390 * 100vw); } .aimeine-instagram .instagram-item-list ul { gap: calc(4 / 390 * 100vw); } .aimeine-instagram .instagram-item-list ul li { width: calc(100% / 3 - ((4 / 390 * 100vw) * 2 / 3)); } .aimeine-instagram .view-all { width: calc(172 / 750 * 100vw); margin: calc(44 / 390 * 100vw) auto 0; } }