html {
font-size: 62.5%;
color: #000;
font-feature-settings: "palt";
max-width: 1920px;
font-family: "Hiragino Mincho ProN", YuMincho, "Noto Serif JP", serif;
font-weight: bold;
margin: 0 auto;
}
.pc {
display: block;
}
.sp {
display: none !important;
}
.header {
position: relative;
height: 100vh;
width: 100%;
z-index: 2;
}
.header__kv__image {
content: "";
background-image: url(../img/kv-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
z-index: -1;
top: 0;
left: 0;
height: 100vh;
width: 100%;
}
.header__kv__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
/* アニメーション */
opacity: 0;
transition: all 1s ease;
}
.header__kv__logo.active {
opacity: 1;
transform: translate(-50%, -50%);
}
.header__kv__logo img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.satsu {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.1em;
}
.about {
background-image: url(../img/about-bg.png);
background-position: center top;
position: relative;
top: -5px;
left: 0;
width: 100%;
}
.about::before {
position: absolute;
z-index: 100;
top: 100px;
left: 100px;
content: "";
width: calc(100% - 200px);
height: calc(100% - 200px);
border: 11px solid #c09b0f;
background: transparent;
}
.about__intro {
background-image: url(../img/intro-bg.png);
background-size: cover;
background-position: top;
padding: 180px 18.22916666666667% 130px;
box-sizing: border-box;
}
.about__intro-title {
font-size: 11rem;
display: flex;
flex-direction: column;
font-weight: bold;
line-height: 1.64;
text-wrap-mode: nowrap;
margin-bottom: 1em;
}
.about__intro-title span {
display: block;
/* アニメーション */
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__intro-title.active span {
opacity: 1;
transform: translateX(0);
}
.about__intro-text {
font-size: 3.2rem;
line-height: 2.588;
letter-spacing: 0.2em;
text-wrap-mode: nowrap;
}
.about__intro-image {
display: flex;
justify-content: center;
margin-top: 135px;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__intro-image.active {
opacity: 1;
transform: scale(1);
}
.about__intro-image img {
width: 100%;
}
.about__origin {
display: flex;
justify-content: space-between;
padding: 120px 180px;
box-sizing: border-box;
}
.about__origin-content {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 65%;
}
.about__origin-title {
position: relative;
left: 0;
top: 0;
background: #c09b0f;
display: flex;
flex-direction: column;
font-size: 5.6rem;
font-weight: bold;
line-height: 1.785;
text-wrap-mode: nowrap;
width: 11em;
margin-bottom: 110px;
}
.about__origin-title::before {
content: "";
position: absolute;
top: 0;
left: -180px;
width: 180px;
height: 100%;
background: #c09b0f;
}
.about__origin-title span {
/* アニメーション */
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__origin-title.active span {
opacity: 1;
transform: translateX(0);
}
.about__origin-content p {
font-size: 2.4rem;
line-height: 2.583;
}
.about__origin-image {
position: relative;
display: flex;
flex-direction: column;
width: 40%;
gap: 30px;
right: -120px;
}
.about__origin-image.active img {
opacity: 1;
transform: scale(1);
}
.about__origin-image img {
display: block;
width: 100%;
object-fit: cover;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__origin__gallery {
position: relative;
left: 0;
top: 0;
display: flex;
gap: 37px;
}
.about__origin__gallery-item {
display: block;
width: 24.94791666666667vw;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__origin__gallery-item.active {
opacity: 1;
transform: scale(1);
}
.about__origin__gallery-item:nth-child(1).active {
transition-delay: 0.2s;
}
.about__origin__gallery-item:nth-child(2).active {
transition-delay: 0.4s;
}
.about__origin__gallery-item:nth-child(3).active {
transition-delay: 0.6s;
}
.about__feature {
position: relative;
left: 0;
top: 0;
z-index: 1;
display: flex;
gap: 64px;
align-items: flex-end;
justify-content: space-between;
padding: 180px 180px 120px;
box-sizing: border-box;
overflow-x: hidden;
}
.about__feature-image {
height: 100%;
max-height: 100%;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__feature-image.active {
opacity: 1;
transform: scale(1);
}
.about__feature-image img {
height: 100%;
object-fit: contain;
max-height: 850px;
margin-left: 80px;
}
.about__feature-title {
position: relative;
left: 0;
top: 0;
background: #c09b0f;
display: flex;
flex-direction: column;
font-size: 5.6rem;
font-weight: bold;
line-height: 1.785;
text-wrap-mode: nowrap;
width: 15em;
margin-bottom: 110px;
}
.about__feature-title::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 350px;
height: 100%;
background: #c09b0f;
}
.about__feature-title span {
/* アニメーション */
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__feature-title.active span {
opacity: 1;
transform: translateX(0);
}
.about__feature-content p {
font-size: 2.4rem;
line-height: 2.583;
}
.about__feature__gallery {
position: relative;
left: 0;
top: 0;
display: flex;
justify-content: right;
gap: 37px;
}
.about__feature__gallery-item {
display: block;
width: 24.94791666666667vw;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__feature__gallery-item.active {
opacity: 1;
transform: scale(1);
}
.about__feature__gallery-item:nth-child(1).active {
transition-delay: 0.2s;
}
.about__feature__gallery-item:nth-child(2).active {
transition-delay: 0.4s;
}
.about__feature__gallery-item:nth-child(3).active {
transition-delay: 0.6s;
}
.about__story {
position: relative;
left: 0;
top: 0;
z-index: 1;
}
.about__recommend {
position: relative;
left: 0;
top: 0;
z-index: 1;
display: flex;
gap: 8px;
padding: 180px 180px 120px;
box-sizing: border-box;
}
.about__recommend-content {
width: 55%;
display: flex;
flex-direction: column;
}
.about__recommend-title {
position: relative;
left: 0;
top: 0;
background: #c09b0f;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 5.6rem;
font-weight: bold;
line-height: 1.785;
text-wrap-mode: nowrap;
width: 14em;
margin-bottom: 110px;
}
.about__recommend-title::before {
content: "";
position: absolute;
top: 0;
left: -180px;
width: 180px;
height: 100%;
background: #c09b0f;
}
.about__recommend-title span {
/* アニメーション */
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__recommend-title.active span {
opacity: 1;
transform: translateX(0);
}
.about__recommend-subtitle span {
font-size: 5.46rem;
line-height: 2.583;
border-bottom: 11px solid #c09b0f;
/* アニメーション */
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__recommend-subtitle.active span {
opacity: 1;
transform: translateX(0);
}
.about__recommend-content p {
font-size: 2.4rem;
line-height: 2.583;
}
.about__recommend-image {
width: 45%;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__recommend-image.active {
opacity: 1;
transform: scale(1);
}
.about__recommend-image img {
margin: 0 auto;
width: 100%;
display: block;
object-fit: cover;
}
.about__impression {
position: relative;
left: 0;
top: 0;
z-index: 1;
display: flex;
justify-content: space-between;
padding: 0 216px 200px;
box-sizing: border-box;
height: 100%;
}
.about__impression-image {
position: relative;
width: 50%;
background-color: transparent;
/* アニメーション */
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
.about__impression-image.active {
opacity: 1;
transform: scale(1);
}
.about__impression-image img {
position: absolute;
left: 0;
bottom: 0;
display: block;
object-fit: cover;
max-height: 1400px;
}
.about__impression-content {
width: 68%;
}
.about__impression-title {
font-size: 5.46rem;
line-height: 2.583;
border-bottom: 11px solid #c09b0f;
/* アニメーション */
display: inline;
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.about__impression-title.active {
opacity: 1;
transform: translateX(0);
}
.about__impression-text {
font-size: 2.4rem;
line-height: 2.583;
}
.history {
background: url(../img/history_bg.png) no-repeat;
background-size: cover;
position: relative;
height: 100vh;
width: 100%;
min-height: 700px;
}
.history.history--history {
top: -5px;
}
.history::before {
position: absolute;
z-index: 100;
top: 100px;
left: 100px;
content: "";
width: calc(100% - 200px);
height: calc(100% - 200px);
border: 11px solid #c09b0f;
z-index: 0;
}
.history__text {
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
width: 100%;
color: #c09b0f;
text-align: center;
font-size: 10.4rem;
font-weight: bold;
font-family: "Noto Serif JP", serif;
}
.history__text2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
color: #c09b0f;
text-align: center;
font-size: 10.4rem;
font-weight: bold;
font-family: "Noto Serif JP", serif;
}
.history--history:after {
position: absolute;
z-index: 2;
top: 100%;
content: "";
height: 100px;
width: 100%;
background-image: url(../img/coming_soon-bg.png);
background-position: center center;
background-size: cover;
}
.footer {
position: relative;
z-index: 2;
background-image: url(../img/footer-bg.png);
background-size: cover;
background-position: center center;
padding: 225px 15.22916666666667%;
}
.footer__catch {
font-size: 9rem;
line-height: 1.65;
display: flex;
flex-direction: column;
margin-bottom: 80px;
}
.footer__text {
font-size: 3.019rem;
line-height: 2.588;
}
.footer__catch span {
display: block;
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease;
}
.footer__catch.active span {
opacity: 1;
transform: translateX(0);
}
.footer__logo {
margin-top: 132px;
/* アニメーション */
opacity: 0;
transform: translateY(-20%);
transition: all 1s ease;
}
.footer__logo.active {
opacity: 1;
transform: translateY(0);
}
.footer__logo img {
display: block;
margin: 0 auto;
width: 37.86458333333333%;
}
.satsuma {
background-color: #c09b0f;
display: flex;
flex-direction: column;
padding: 100px 0 0;
}
.satsuma-container {
display: flex;
justify-content: space-between;
width: 50%;
margin: 0 auto 80px;
}
.satsuma-container img {
display: block;
margin: 0 auto;
}
.satsuma-text-container {
padding: 0 0 125px;
text-align: center;
color: #fff;
font-size: 18px;
font-family: sans-serif;
font-weight: 300;
}
@media screen and (max-width:1800px) {
.about__intro-title {
font-size: 8rem;
}
.about__origin {
padding: 120px 140px;
}
.about__origin-image {
right: -100px;
}
.about__feature {
padding: 200px 140px 120px;
}
.about__recommend {
padding: 200px 140px 120px;
}
.about__impression {
padding: 0 140px 200px;
}
}
@media screen and (max-width:1600px) {
.about::before {
top: 70px;
left: 70px;
width: calc(100% - 140px);
height: calc(100% - 140px);
}
.about__intro-title {
font-size: 8rem;
}
.about__intro-text {
font-size: 2.6rem;
line-height: 2.2;
}
.about__feature-image img {
max-height: 680px;
}
.about__origin-title {
font-size: 4.5rem;
margin-bottom: 80px;
}
.about__origin-content p {
font-size: 2rem;
line-height: 2.2;
}
.about__origin-image {
right: -60px;
}
.about__feature-title {
font-size: 4.5rem;
margin-bottom: 80px;
}
.about__feature-content p {
font-size: 2rem;
line-height: 2.2;
}
.about__recommend-title {
font-size: 4.5rem;
margin-bottom: 80px;
}
.about__recommend-subtitle span {
font-size: 4.3rem;
}
.about__recommend-content p {
font-size: 2rem;
line-height: 2.2;
}
.about__impression-title {
font-size: 4.5rem;
margin-bottom: 80px;
}
.about__impression-text {
font-size: 2.2rem;
line-height: 2.2;
}
.about__impression-image img {
max-height: 1200px;
}
.about__origin {
padding: 120px 110px;
}
.about__feature {
padding: 120px 110px;
}
.about__recommend {
padding: 120px 110px;
}
.about__impression {
padding: 0 110px 260px;
}
.history::before {
top: 50px;
left: 50px;
width: calc(100% - 100px);
height: calc(100% - 100px);
z-index: 0;
}
.history__text,
.history__text2 {
font-size: 9rem;
}
.history__text {
top: 20%;
}
.history {
background-color: #000;
position: relative;
height: 60vh;
width: 100%;
}
.history__list {
bottom: calc(5% + 50px);
left: calc(5% + 50px);
}
.history__item {
font-size: 2.7rem;
line-height: 2.13;
}
.footer {
padding: 200px 10%;
}
.footer__catch {
font-size: 8rem;
line-height: 1.65;
}
.footer__text {
font-size: 2.8rem;
line-height: 2.4;
}
.satsuma {
background-color: #c09b0f;
display: flex;
flex-direction: column;
padding: 100px 0 0;
}
.satsuma-container a img {
display: block;
max-width: 22vw;
}
.satsuma-container img {
display: block;
margin: 0 auto;
max-width: 30vw;
}
.satsuma-text-container {
padding: 0 0 125px;
text-align: center;
color: #fff;
font-size: 15px;
}
}
@media screen and (max-width:1400px) {
.about__intro {
background-position: center bottom;
padding: 160px 18.22916666666667%;
}
.about__intro-title {
font-size: 6.8rem;
}
.about__intro-text {
font-size: 2.1rem;
line-height: 2.2;
}
.about__origin-title {
font-size: 3.9rem;
margin-bottom: 80px;
}
.about__origin-content p {
font-size: 2rem;
line-height: 1.8;
}
.about__origin-image {
right: -60px;
}
.about__feature-title {
font-size: 3.9rem;
margin-bottom: 80px;
}
.about__feature-image {
margin-left: 40px;
}
.about__feature-image img {
max-height: 550px;
}
.about__feature-content p {
font-size: 2rem;
line-height: 1.8;
}
.about__recommend-title {
font-size: 3.9rem;
margin-bottom: 80px;
}
.about__recommend-subtitle span {
font-size: 3.7rem;
}
.about__recommend-content p {
font-size: 2rem;
line-height: 1.8;
}
.about__impression-title {
font-size: 3.9rem;
margin-bottom: 80px;
}
.about__impression-text {
font-size: 2rem;
line-height: 1.8;
}
.about__impression-image img {
max-height: 1000px;
}
.about__origin {
padding: 120px 100px;
}
.about__feature {
padding: 120px 100px;
}
.about__recommend {
padding: 120px 100px;
}
.about__impression {
padding: 0 100px 130px;
}
.history__text,
.history__text2 {
font-size: 7.8rem;
}
.footer {
padding: 160px 9%;
}
.footer__catch {
font-size: 6.5rem;
line-height: 1.65;
}
.footer__text {
font-size: 2.6rem;
line-height: 2.4;
}
}
@media screen and (max-width:1200px) {
.about::before {
top: 20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
border: 8px solid #c09b0f;
}
.about__intro {
padding: 140px 10% 120px;
}
.about__origin {
padding: 120px 40px;
}
.about__origin-title {
font-size: 2.6rem;
margin-bottom: 60px;
}
.about__origin-content p {
font-size: 1.4rem;
line-height: 1.8;
}
.about__feature {
padding: 120px 40px;
}
.about__feature-title {
font-size: 2.6rem;
margin-bottom: 60px;
}
.about__feature-content p {
font-size: 1.4rem;
line-height: 1.8;
}
.about__origin-image {
right: -20px;
}
.about__recommend {
padding: 120px 40px;
}
.about__recommend-title {
font-size: 2.6rem;
margin-bottom: 60px;
}
.about__recommend-content p {
font-size: 1.4rem;
line-height: 1.8;
}
.about__impression {
padding: 0 40px 120px;
}
.about__impression-text {
font-size: 1.4rem;
line-height: 1.8;
}
.history__text,
.history__text2 {
font-size: 5.8rem;
}
.footer {
padding: 160px 4%;
}
}
@media screen and (max-width:900px) {
.about__intro-title {
font-size: 6rem;
}
.about__intro-text {
font-size: 1.8rem;
}
.about__origin {
padding: 90px 40px;
}
.about__origin-content {
width: 70%;
}
.about__origin-title {
font-size: 2.4rem;
margin-bottom: 52px;
}
.about__feature {
padding: 90px 40px;
}
.about__feature-title {
font-size: 2.4rem;
margin-bottom: 52px;
}
.about__feature-image img {
max-height: 450px;
margin-left: 32px;
}
.about__recommend {
padding: 90px 40px;
}
.about__recommend-title {
font-size: 2.4rem;
margin-bottom: 52px;
}
.about__recommend-content {
width: 60%;
}
.about__recommend-image {
width: 35%;
}
.about__impression {
padding: 0 40px 90px;
}
.about__impression-image img {
max-height: 700px;
}
.about__impression-image {
width: 30%;
}
.footer__catch {
font-size: 6rem;
}
.footer__text {
font-size: 2.3rem;
}
.footer {
padding: 120px 40px;
}
.satsuma {
background-color: #c09b0f;
display: flex;
flex-direction: column;
padding: 60px 0 0;
}
.satsuma-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
margin: 0 auto 40px;
gap: 40px;
}
.satsuma-container a img {
display: block;
max-width: 66vw;
}
.satsuma-container img {
display: block;
margin: 0 auto;
max-width: 77vw;
}
.satsuma-text-container {
padding: 0 0 60px;
text-align: center;
color: #fff;
font-size: 8px;
}
}
@media screen and (max-width:800px) {
.about__intro {
padding: 100px 40px 120px;
}
.about__intro-title {
font-size: 5.5rem;
}
.about__intro-text {
font-size: 1.6rem;
line-height: 2.2;
}
.about__origin-title {
font-size: 2.2rem;
margin-bottom: 40px;
}
.about__origin-content p {
font-size: 1.5rem;
}
.about__feature-image img {
max-height: 400px;
margin-left: 0;
}
.about__feature-title {
font-size: 2.2rem;
margin-bottom: 40px;
}
.about__feature-content p {
font-size: 1.5rem;
}
.about__recommend-title {
font-size: 2.3rem;
margin-bottom: 40px;
}
.about__recommend-content p {
font-size: 1.5rem;
}
.about__impression-image img {
max-height: 600px;
}
.about__impression-text {
font-size: 1.5rem;
}
.history__text,
.history__text2 {
font-size: 4.5rem;
}
.history {
background-color: #000;
position: relative;
height: 40vh;
width: 100%;
}
.footer__catch {
font-size: 5.5rem;
line-height: 1.65;
}
.footer__text {
font-size: 2rem;
line-height: 2.4;
}
}
/* スマホ */
@media screen and (max-width:700px) {
.pc {
display: none;
}
.sp {
display: block !important;
}
.header__kv__logo {
width: 67.2%;
}
.about__intro {
padding: 50px 35px 30px;
}
.about::before {
top: 15px;
left: 15px;
width: calc(100% - 30px);
height: calc(100% - 30px);
border: 4.4px solid #c09b0f;
}
.about__intro-title {
font-size: 2.6rem;
}
.about__intro-text {
font-size: 1.6rem;
letter-spacing: 0em;
line-height: 2;
text-wrap-mode: nowrap;
}
.about__intro-image {
margin-top: 65px;
justify-content: start;
overflow-x: scroll;
position: relative;
z-index: 101;
}
.about__intro-image img {
max-height: 260px;
width: auto;
}
.about__origin {
padding: 55px 45px 35px;
position: relative;
overflow-x: hidden;
}
.about__origin-content {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.about__origin-title {
font-size: 2rem;
margin-bottom: 0;
width: 11em;
z-index: 2;
}
.about__origin-image {
position: relative;
top: -10px;
left: 0;
width: 76%;
z-index: 1;
margin-bottom: 15px;
}
.about__origin-image img {
position: relative;
top: 0;
left: 50%;
}
.about__origin-image img:last-child {
position: relative;
top: 0;
left: -17.5%;
}
.about__origin-content p {
font-size: 1.6rem;
font-weight: bold;
line-height: 1.8;
}
.about__origin__gallery {
gap: 20px;
}
.about__origin__gallery-item {
width: 28vw;
}
.about__feature {
padding: 55px 45px 35px;
}
.about__feature-title {
font-size: 1.8rem;
margin-left: 48px;
margin-bottom: 25px;
}
.about__feature-image {
margin-left: 25px;
}
.about__feature-image img {
max-height: 220px;
margin-bottom: 25px;
}
.about__feature-content p {
font-size: 1.6rem;
font-weight: bold;
}
.about__feature__gallery {
justify-content: right;
gap: 20px;
}
.about__feature__gallery-item {
width: 28vw;
}
.about__recommend {
padding: 55px 45px 35px;
}
.about__recommend-content {
width: 100%;
}
.about__recommend-title {
font-size: 2rem;
margin-bottom: 0;
}
.about__recommend-subtitle {
margin-bottom: 10px;
}
.about__recommend-subtitle span {
font-size: 2.5rem;
border-bottom: 5px solid #c09b0f;
}
.about__recommend-image {
position: relative;
top: -10px;
left: 6em;
width: 60%;
z-index: -1;
font-size: 2rem;
}
.about__recommend-content p {
font-size: 1.6rem;
line-height: 1.8;
font-weight: bold;
}
.about__impression {
flex-direction: column;
padding: 0 40px 55px;
}
.about__impression-image {
position: relative;
width: 100%;
height: 250px;
margin-bottom: 25px;
}
.about__impression-image img {
max-height: 600px;
}
.about__impression-content {
width: 100%;
display: flex;
flex-direction: column;
justify-content: end;
}
.about__impression-title {
font-size: 2.5rem;
border-bottom: 5px solid #c09b0f;
margin-bottom: 25px;
margin-left: auto;
margin-right: 1em;
line-height: 1.1;
}
.history {
background-color: #000;
position: relative;
height: 40vh;
width: 100%;
min-height: 400px;
}
.history::before {
top: 15px;
left: 15px;
width: calc(100% - 30px);
height: calc(100% - 30px);
border: 4.4px solid #c09b0f;
z-index: 0;
}
.history__text,
.history__text2 {
font-size: 3rem;
width: 100%;
}
.history__list {
bottom: 40px;
left: 40px;
padding: 0;
}
.history__item {
font-size: 1.6rem;
line-height: 2.13;
}
.history--history:after {
height: 50px;
}
.history--campaign {
margin-top: 45px;
}
.footer {
padding: 55px 42px;
background-position: top;
}
.footer__catch {
font-size: 2.65rem;
line-height: 1.65;
margin-bottom: 25px;
}
.footer__text {
font-size: 1.6rem;
line-height: 2.4;
}
.footer__logo {
margin-top: 25px;
opacity: 0;
transform: translateY(-20%);
transition: all 1s ease;
}
.footer__logo img {
width: 67.2%;
}
}
@media screen and (max-width:400px) {
.footer__catch {
font-size: 2.4rem;
}
}
@media screen and (min-width:2000px) {
.about {
background-size: cover;
}
.about__impression {
padding: 0 216px 300px;
}
.about__origin__gallery-item {
display: block;
width: 22vw;
opacity: 0;
transform: scale(0.95);
transition: 0.8s;
}
.about__feature__gallery-item {
display: block;
width: 22vw;
opacity: 0;
transform: scale(0.95);
transition: all 0.8s ease;
}
}
@media screen and (max-width: 1400px) {
.about__recommend-title {
font-size: 3.9rem;
margin-bottom: 80px;
}
}
@media screen and (max-width: 1600px) {
.about__recommend-title {
font-size: 4.5rem;
margin-bottom: 80px;
}
}
@media screen and (min-width: 1600px) {
.satsuma-container a img {
width: 100%;
}
.satsuma-container a {
width: 45%;
}
}