.pc { display: block; } @media (max-width: 768px) { .pc { display: none !important; } } .tb { display: none; } @media (max-width: 960px) { .tb { display: block !important; } } .sp { display: none; } @media (max-width: 768px) { .sp { display: block !important; } } .sp_s { display: none; } @media (max-width: 375px) { .sp_s { display: block !important; } } .nodata { width: 100%; text-align: center; } .align--center { text-align: center; } small { font-size: 0.88em; } sup { font-size: 0.7em; } body { background: #fff; } body.no-scroll { overflow: hidden; } main { display: block; } .tbl--style01 { border: none; } @media (max-width: 768px) { .tbl--style01 tr { display: block; } } .tbl--style01 tr td, .tbl--style01 tr th { padding: 1em 0; border: none; font-size: 1.4rem; } @media (max-width: 768px) { .tbl--style01 tr td, .tbl--style01 tr th { font-size: 1.3rem; padding: 0; width: 100%; display: block; } } .tbl--style01 tr:first-child td, .tbl--style01 tr:first-child th { padding: 0 0 1em 0; } @media (max-width: 768px) { .tbl--style01 tr:first-child td, .tbl--style01 tr:first-child th { padding: 0; } } .tbl--style01 tr th { text-align: left; width: 160px; font-weight: 700; } @media (max-width: 768px) { .tbl--style01 tr th { font-size: 1.4rem; } } @media (max-width: 768px) { .tbl--style01 tr th { width: 100%; } } .tbl--style01 tr td { line-height: 1.7; word-break: break-all; } .tbl--style01 tr td a { color: #357bb6; font-weight: 700; display: inline-block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 769px) { .tbl--style01 tr td a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .tbl--style01 tr td a:hover { text-decoration: underline; } } .tbl--style01 tr td a span { font-weight: 700; font-size: 1.8rem; -webkit-transform: translateY(0.1em); transform: translateY(0.1em); } .tbl--style01 tr td:first-child { width: 160px; font-weight: 700; } @media (max-width: 768px) { .tbl--style01 tr td:first-child { font-size: 1.4rem; } } @media (max-width: 768px) { .tbl--style01 tr td:first-child { width: 100%; } } @media (max-width: 768px) { .tbl--style01 tr td:nth-child(2) { margin-bottom: 30px; word-break: break-all; } } .tbl--style01 tr:last-child td, .tbl--style01 tr:last-child th { padding: 1em 0 0 0; } @media (max-width: 768px) { .tbl--style01 tr:last-child td, .tbl--style01 tr:last-child th { padding: 0; } } .back-to-top { z-index: 10; width: 50px; height: 50px; position: fixed; bottom: 0px; right: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .back-to-top { mix-blend-mode: difference; } } @media (max-width: 768px) { .back-to-top { width: 30px; height: 40px; } } .back-to-top.active::after { opacity: 1; pointer-events: all; } @media (min-width: 769px) { .back-to-top { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .back-to-top:hover::after { color: #000; } } .back-to-top::after { opacity: 0; pointer-events: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; content: ""; font-family: "Material Symbols Outlined"; content: "\e5dc"; font-size: 4rem; color: #ccc; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 768px) { .back-to-top::after { color: #fff; line-height: 1; } } .pic { width: 100%; height: auto; } @-webkit-keyframes anime-pop-up { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes anime-pop-up { 0% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 75% { -webkit-transform: scale(0.95); transform: scale(0.95); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes anime-pop-up-out { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @keyframes anime-pop-up-out { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes fadein-zoom { 0% { transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); } 25% { opacity: 1; } 70% { opacity: 1; transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); } 90% { opacity: 1; transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); } 100% { opacity: 1; transform: scale(1, 1); -webkit-transform: scale(1, 1); } } @keyframes fadein-zoom { 0% { transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); } 25% { opacity: 1; } 70% { opacity: 1; transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); } 90% { opacity: 1; transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); } 100% { opacity: 1; transform: scale(1, 1); -webkit-transform: scale(1, 1); } } /*-------------------------------------------------------------- animation --------------------------------------------------------------*/ @-webkit-keyframes anime-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes anime-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes anime-fade-out-out { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes anime-fade-out-out { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes anime-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes anime-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes anime-fade-in-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes anime-fade-in-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes anime-fade-in2 { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes anime-fade-in2 { 0% { opacity: 0; } 100% { opacity: 1; } } *[data-a=tra-fade-up] { opacity: 0 !important; -webkit-transform: translateY(30px) !important; transform: translateY(30px) !important; } *[data-a=tra-fade-up].anime-active { opacity: 1 !important; -webkit-transform: translateY(0px) !important; transform: translateY(0px) !important; } @-webkit-keyframes anime-fade-up { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes anime-fade-up { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes anime-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes anime-up { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes anime-up-out { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes anime-up-out { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @-webkit-keyframes anime-fade-up-out { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform: translateY(70px); transform: translateY(70px); opacity: 0; } } @keyframes anime-fade-up-out { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform: translateY(70px); transform: translateY(70px); opacity: 0; } } @-webkit-keyframes anime-fade-left { 0% { -webkit-transform: translateX(70px); transform: translateX(70px); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @keyframes anime-fade-left { 0% { -webkit-transform: translateX(70px); transform: translateX(70px); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } } @-webkit-keyframes anime-fade-left-out { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(70px); transform: translateX(70px); opacity: 0; } } @keyframes anime-fade-left-out { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(70px); transform: translateX(70px); opacity: 0; } } @-webkit-keyframes anime-fade-right { 0% { -webkit-transform: translateX(-10px) translateY(5px); transform: translateX(-10px) translateY(5px); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(0%) translateY(0px); transform: translateX(0%) translateY(0px); opacity: 1; } } @keyframes anime-fade-right { 0% { -webkit-transform: translateX(-10px) translateY(5px); transform: translateX(-10px) translateY(5px); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(0%) translateY(0px); transform: translateX(0%) translateY(0px); opacity: 1; } } @-webkit-keyframes anime-fade-right-out { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(-70px); transform: translateX(-70px); opacity: 0; } } @keyframes anime-fade-right-out { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1; } 70% { opacity: 1; } 100% { -webkit-transform: translateX(-70px); transform: translateX(-70px); opacity: 0; } } @-webkit-keyframes anime-move-right { 0% { opacity: 0; -webkit-transform: translate(20%, -50%); transform: translate(20%, -50%); } 70% { opacity: 1; } 100% { -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 1; } } @keyframes anime-move-right { 0% { opacity: 0; -webkit-transform: translate(20%, -50%); transform: translate(20%, -50%); } 70% { opacity: 1; } 100% { -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 1; } } @-webkit-keyframes anime-move-left { 0% { opacity: 0; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 30% { opacity: 1; } 100% { -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 1; } } @keyframes anime-move-left { 0% { opacity: 0; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); } 30% { opacity: 1; } 100% { -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); opacity: 1; } } *[data-a=fade-txt] span { -webkit-transition: all 0.6s cubic-bezier(0.14, 0.26, 0.44, 1.26); transition: all 0.6s cubic-bezier(0.14, 0.26, 0.44, 1.26); display: inline-block; opacity: 0; -webkit-transform: translate(0, 0.6em); transform: translate(0, 0.6em); -webkit-filter: blur(2px); filter: blur(2px); } *[data-a=fade-txt].anime-active span { -webkit-filter: blur(0px); filter: blur(0px); opacity: 1; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } *[data-a=pop-up] { -webkit-transform: scale(0); transform: scale(0); } *[data-a=pop-up-out] { -webkit-transform: scale(1); transform: scale(1); } *[data-a=fade-in-out] { opacity: 0; } *[data-a=fade-in] { opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } *[data-a=fade-up] { opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } *[data-a=fade-down] { opacity: 0; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes anime-fade-down { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes anime-fade-down { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } *[data-a=fade-left] { opacity: 0; } *[data-a=fade-right] { opacity: 0; } *[data-a=zoom-up] { opacity: 0; } @-webkit-keyframes anime-zoom-up { 0% { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes anime-zoom-up { 0% { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes anime-zoom-up-out { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @keyframes anime-zoom-up-out { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } *[data-a=zoom-in] { opacity: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); } @-webkit-keyframes anime-zoom-in { 0% { opacity: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes anime-zoom-in { 0% { opacity: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); } 100% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes anime-zoom-in-out { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); } } @keyframes anime-zoom-in-out { 0% { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform: scale(1.4, 1.4); transform: scale(1.4, 1.4); } } .anime-fade-in2 { -webkit-animation-name: anime-fade-in; animation-name: anime-fade-in; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-out { -webkit-animation-name: anime-fade-out; animation-name: anime-fade-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-in-out { -webkit-animation-name: anime-fade-in-out; animation-name: anime-fade-in-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-pop-up { -webkit-animation-name: anime-pop-up; animation-name: anime-pop-up; -webkit-animation-timing-function: cubic-bezier(0, 1.07, 0.71, 1.4); animation-timing-function: cubic-bezier(0, 1.07, 0.71, 1.4); } .anime-pop-up-out { -webkit-animation-name: anime-pop-up-out; animation-name: anime-pop-up-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-left { -webkit-animation-name: anime-fade-left; animation-name: anime-fade-left; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-left-out { -webkit-animation-name: anime-fade-left-out; animation-name: anime-fade-left-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-right { -webkit-animation-name: anime-fade-right; animation-name: anime-fade-right; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-fade-right-out { -webkit-animation-name: anime-fade-right-out; animation-name: anime-fade-right-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-move-left { -webkit-animation-name: anime-move-left; animation-name: anime-move-left; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-move-right { -webkit-animation-name: anime-move-right; animation-name: anime-move-right; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anm-fade-up { -webkit-animation-name: anime-fade-up; animation-name: anime-fade-up; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anm-fade-up-out { -webkit-animation-name: anime-fade-up-out; animation-name: anime-fade-up-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .anime-btn-active .off { pointer-events: none; display: none; } .anime-btn-active button, .anime-btn-active a { pointer-events: all !important; position: relative; z-index: 10; } .anime-reverse { animation-direction: reverse; } *[data-a=slide-zoom] { opacity: 0; clip-path: inset(10% 10% 10% 10%); position: relative; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); } *[data-a=slide-zoom].anime-active { opacity: 1; clip-path: inset(0 0 0 0); } *[data-a=slide-bottom] { clip-path: inset(0% 0% 100% 0); position: relative; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); } *[data-a=slide-bottom].anime-active { clip-path: inset(0 0 0 0); } *[data-a=slide-top] { clip-path: inset(100% 0% 0% 0); position: relative; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); } *[data-a=slide-top].anime-active { clip-path: inset(0 0 0 0); } *[data-a=slide-right] { clip-path: inset(0 100% 0 0); position: relative; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); } *[data-a=slide-right].anime-active { clip-path: inset(0 0 0 0); } *[data-a=slide-left] { clip-path: inset(0 0% 0 100%); position: relative; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); transition-timing-function: cubic-bezier(0.68, 0, 0.4, 0.99); } *[data-a=slide-left].anime-active { clip-path: inset(0 0 0 0); } *[data-a=mask-move-up] > * { display: block; overflow: hidden; } *[data-a=mask-move-up] > *:nth-child(1) > * { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } *[data-a=mask-move-up] > *:nth-child(2) > * { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } *[data-a=mask-move-up] > *:nth-child(3) > * { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; } *[data-a=mask-move-up] > *:nth-child(4) > * { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } *[data-a=mask-move-up] > *:nth-child(5) > * { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; } *[data-a=mask-move-up] > *:nth-child(6) > * { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } *[data-a=mask-move-up] > *:nth-child(7) > * { -webkit-transition-delay: 1.05s; transition-delay: 1.05s; } *[data-a=mask-move-up] > *:nth-child(8) > * { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } *[data-a=mask-move-up] > *:nth-child(9) > * { -webkit-transition-delay: 1.35s; transition-delay: 1.35s; } *[data-a=mask-move-up] > *:nth-child(10) > * { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; } *[data-a=mask-move-up] > * > * { display: block; -webkit-transform: translateY(150%); transform: translateY(150%); position: relative; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; } *[data-a=mask-move-up].anime-active > * > * { -webkit-transform: translateY(0%); transform: translateY(0%); } .site-header { position: fixed; width: 100%; height: 62px; left: 0; top: 0; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0s ease; transition: all 0s ease; z-index: 10000; pointer-events: none; } @media (min-width: 769px) { .site-header { background: rgb(255, 255, 255); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } @media (max-width: 768px) { .site-header { background: rgb(255, 255, 255); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: absolute; height: 85px; } } .site-header.hide { -webkit-transform: translateY(calc(-100% - 40px)); transform: translateY(calc(-100% - 40px)); } .site-header__title { pointer-events: all; position: absolute; left: 22px; width: 238px; height: auto; } @media (max-width: 768px) { .site-header__title { width: calc(100% - 120px); max-width: 290px; height: auto; left: 15px; top: auto; bottom: 10px; display: block; } } .site-header__title > * img { width: 100%; height: auto; } .site-header__branding { position: absolute; } @media (max-width: 768px) { .site-header__branding { width: calc(100% - 120px); } } .site-header__branding img { width: 184px; height: auto; } @media (max-width: 768px) { .site-header__branding img { width: 100%; max-width: 215px; } } @media (min-width: 769px) { .site-header__branding { right: 100px; top: 19px; } } @media (max-width: 768px) { .site-header__branding { left: 15px; top: 10px; } } .nav-toggle-wrap { width: 62px; height: 62px; -webkit-transition: all 0s ease; transition: all 0s ease; background: #0e8550; border-radius: 0 0 0 30px; position: fixed; right: 0; top: 0; z-index: 30000; } @media (max-width: 768px) { .nav-toggle-wrap { width: 85px; height: 85px; } } @media (min-width: 769px) { .nav-toggle-wrap { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .nav-toggle-wrap:hover { cursor: pointer; } .nav-toggle-wrap:hover #gnav-toggle-text { letter-spacing: 0.2em; } } .nav-toggle-wrap.open .nav-toggle span { -webkit-animation-duration: 0.6s !important; animation-duration: 0.6s !important; } .nav-toggle-wrap #gnav-toggle-text { color: #fff; position: absolute; left: 50%; bottom: 18%; -webkit-transform: translateX(-50%); transform: translateX(-50%); letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 0.75rem; margin: 0; padding: 0; } .nav-toggle-wrap #gnav-toggle-text else { font-weight: 400; } @media (max-width: 768px) { .nav-toggle-wrap #gnav-toggle-text { font-size: 1rem; } } @media (min-width: 769px) { .nav-toggle-wrap #gnav-toggle-text { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } .nav-toggle-wrap .nav-toggle { -webkit-transition: all 0s ease; transition: all 0s ease; position: absolute; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; width: 34%; display: block; height: 13px; top: 35%; } @media (max-width: 768px) { .nav-toggle-wrap .nav-toggle { height: 18px; } } .nav-toggle-wrap .nav-toggle > span { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; left: 0; width: 100%; height: 4px; background: #fff; display: block; border-radius: 5px 0 5px 5px; } @media (max-width: 768px) { .nav-toggle-wrap .nav-toggle > span { height: 6px; } } .nav-toggle-wrap .nav-toggle > span:nth-child(1) { z-index: 2; top: 0; -webkit-animation-name: anime-nav-toggle-top2; animation-name: anime-nav-toggle-top2; -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .nav-toggle-wrap .nav-toggle > span:nth-child(1).active { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .nav-toggle-wrap .nav-toggle > span:nth-child(2) { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0s ease; transition: all 0s ease; display: none; } .nav-toggle-wrap .nav-toggle > span:nth-child(3) { z-index: 2; bottom: 0; -webkit-animation-name: anime-nav-toggle-bottom2; animation-name: anime-nav-toggle-bottom2; -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .nav-toggle-wrap .nav-toggle > span:nth-child(3).active { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .nav-toggle-wrap.active .nav-toggle span:nth-child(1) { -webkit-animation-name: anime-nav-toggle-top; animation-name: anime-nav-toggle-top; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .nav-toggle-wrap.active .nav-toggle span:nth-child(2) { width: 0; } .nav-toggle-wrap.active .nav-toggle span:nth-child(3) { width: 100%; -webkit-animation-name: anime-nav-toggle-bottom; animation-name: anime-nav-toggle-bottom; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes anime-nav-toggle-top2 { 0% { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } 50% { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { top: 0%; } } @keyframes anime-nav-toggle-top2 { 0% { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } 50% { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { top: 0%; } } @-webkit-keyframes anime-nav-toggle-top { 0% { top: 0%; } 50% { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } } @keyframes anime-nav-toggle-top { 0% { top: 0%; } 50% { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } 100% { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } } @-webkit-keyframes anime-nav-toggle-bottom { 0% { bottom: 0%; } 50% { bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } 100% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); transform: translateY(50%) rotate(-45deg); } } @keyframes anime-nav-toggle-bottom { 0% { bottom: 0%; } 50% { bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } 100% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); transform: translateY(50%) rotate(-45deg); } } @-webkit-keyframes anime-nav-toggle-bottom2 { 0% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); transform: translateY(50%) rotate(-45deg); } 50% { bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } 100% { bottom: 0%; } } @keyframes anime-nav-toggle-bottom2 { 0% { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); transform: translateY(50%) rotate(-45deg); } 50% { bottom: 50%; -webkit-transform: translateY(50%); transform: translateY(50%); } 100% { bottom: 0%; } } .global-nav { width: 310px; height: 100%; background: #0e8550; position: fixed; right: 0; top: 0; z-index: 20000; padding: 75px 0 0 55px; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: 0.6s all ease; transition: 0.6s all ease; } @media (min-width: 769px) { .global-nav { border-radius: 0 0 0 30px; } } @media (max-width: 768px) { .global-nav { width: 100%; } } .global-nav.open { -webkit-transform: translateX(0%); transform: translateX(0%); } .global-nav ul { 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; } .global-nav ul li { width: 100%; } @-webkit-keyframes flyUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 12% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 24% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes flyUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 12% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 24% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .global-nav ul li a { width: 100%; color: #fff; font-size: 0.75rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 769px) { .global-nav ul li a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .global-nav ul li a:hover span span { -webkit-animation: flyUp 2s ease-out infinite; animation: flyUp 2s ease-out infinite; } } .global-nav ul li a span { letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 1.75rem; } .global-nav ul li a span span { display: inline-block; } .global-nav ul li a span else { font-weight: 400; } .global-nav-mask { width: 100%; height: 100%; z-index: 19000; background: linear-gradient(-120deg, rgb(14, 133, 80) 40%, rgb(203, 209, 3) 100%); position: fixed; left: 0; opacity: 0; top: 0; pointer-events: none; } @media (min-width: 769px) { .global-nav-mask { -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } } @media (max-width: 768px) { .global-nav-mask { display: none; } } .global-nav-mask.active { opacity: 0.2; pointer-events: all; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; } img { vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } @media (max-width: 768px) { h1, h2, h3, h4, h5, h6 { font-weight: 700; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } picture { display: inline-block; } body { line-height: 1.5; font-family: "Noto Sans JP", sans-serif; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; font-weight: 400; font-style: normal; font-size: 16px; color: #333; } body.noscroll { overflow: hidden; } @media (max-width: 768px) { body { overflow-x: hidden; } } p { line-height: 2; } ol, ul, menu, nav { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=text], input[type=email], input[type=password], input[type=submit], input[type=reset], input[type=tel], button, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; } input[type=text]:focus:not(:focus-visible), input[type=email]:focus:not(:focus-visible), input[type=password]:focus:not(:focus-visible), input[type=submit]:focus:not(:focus-visible), input[type=reset]:focus:not(:focus-visible), input[type=tel]:focus:not(:focus-visible), button:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } button { display: block; } button, input[type=reset], input[type=submit] { cursor: pointer; } a { text-decoration: none; color: #000; } ul li { margin-bottom: 0; } .kv { height: 100vh; width: 100%; position: relative; z-index: 0; 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; } @media (max-width: 768px) { .kv { overflow-x: clip; } } @media (min-width: 769px) { .kv { overflow: hidden; min-height: 600px; } } @media (max-width: 768px) { .kv { height: 152vw; } } @media (max-width: 768px) and (max-width: 375px) { .kv { height: 152vw; } } .kv__inner { height: 100%; width: 100%; position: relative; 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; z-index: 2; } .kv__01-img-01 { width: 35%; height: auto; position: absolute; left: 50%; top: 20%; -webkit-transform: translate(-50%); transform: translate(-50%); z-index: 2; display: block; } .kv__background { opacity: 0; pointer-events: none; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: calc(100vh - 100px); overflow: hidden; } @media (max-width: 768px) { .kv__background { height: calc(var(--vh, 1vh) * 100); } } .kv .swiper-wrapper { -webkit-transition-timing-function: ease; transition-timing-function: ease; } .kv.active .kv__background { -webkit-transition: 1s ease; transition: 1s ease; opacity: 1; } .kv.active .kv__wave { -webkit-transition: 1s ease; transition: 1s ease; opacity: 1; } .kv.active .kv__scroll { -webkit-transition: 1s ease; transition: 1s ease; opacity: 1; } .kv.active .kv__nav { -webkit-transition: 1s ease; transition: 1s ease; opacity: 1; } .kv.active .kv__swiper { opacity: 1; } .kv__swiper { width: 200%; position: relative; left: 0%; height: 100%; 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; position: relative; z-index: 10; opacity: 0; } .kv .kv__wave { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; position: absolute; top: 0%; left: 0%; -webkit-transform: rotate(10deg) scale(1.03); transform: rotate(10deg) scale(1.03); width: 100%; height: 100%; z-index: 2; opacity: 0; } @media (min-width: 769px) { .kv .kv__wave { -webkit-animation: waveRotate 10s ease-in-out infinite; animation: waveRotate 10s ease-in-out infinite; } } @media (max-width: 768px) { .kv .kv__wave { -webkit-animation: waveRotate2 10s ease-in-out infinite; animation: waveRotate2 10s ease-in-out infinite; -webkit-transform: rotate(5deg) scale(1.03); transform: rotate(5deg) scale(1.03); } } @-webkit-keyframes waveRotate { 0% { -webkit-transform: rotate(10deg) scale(1.03); transform: rotate(10deg) scale(1.03); } 50% { -webkit-transform: rotate(-10deg) scale(1.03); transform: rotate(-10deg) scale(1.03); } 100% { -webkit-transform: rotate(10deg) scale(1.03); transform: rotate(10deg) scale(1.03); } } @keyframes waveRotate { 0% { -webkit-transform: rotate(10deg) scale(1.03); transform: rotate(10deg) scale(1.03); } 50% { -webkit-transform: rotate(-10deg) scale(1.03); transform: rotate(-10deg) scale(1.03); } 100% { -webkit-transform: rotate(10deg) scale(1.03); transform: rotate(10deg) scale(1.03); } } @-webkit-keyframes waveRotate2 { 0% { -webkit-transform: rotate(5deg) scale(1.03); transform: rotate(5deg) scale(1.03); } 50% { -webkit-transform: rotate(-5deg) scale(1.03); transform: rotate(-5deg) scale(1.03); } 100% { -webkit-transform: rotate(5deg) scale(1.03); transform: rotate(5deg) scale(1.03); } } @keyframes waveRotate2 { 0% { -webkit-transform: rotate(5deg) scale(1.03); transform: rotate(5deg) scale(1.03); } 50% { -webkit-transform: rotate(-5deg) scale(1.03); transform: rotate(-5deg) scale(1.03); } 100% { -webkit-transform: rotate(5deg) scale(1.03); transform: rotate(5deg) scale(1.03); } } .kv .kv__wave #wave { position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-animation: floatWave 8s ease-in-out infinite alternate; animation: floatWave 8s ease-in-out infinite alternate; } .kv .kv__wave #waveCanvas { position: absolute; top: 50%; left: 0%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: 0; } .kv__controls { width: 100%; position: absolute; left: 0; bottom: 0; width: 70%; max-width: 1140px; } @media (max-width: 768px) { .kv__controls { width: 100%; } } .kv__logos .logo-text--01 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 20%; position: relative; margin-top: 30px; left: 40px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: auto; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: left bottom; transform-origin: left bottom; } @media (max-width: 1600px) { .kv__logos .logo-text--01 { -webkit-transform: scale(0.8); transform: scale(0.8); } } @media (max-width: 1420px) { .kv__logos .logo-text--01 { -webkit-transform: scale(0.6); transform: scale(0.6); } } @media (max-width: 1280px) { .kv__logos .logo-text--01 { -webkit-transform: scale(0.5); transform: scale(0.5); } } @media (max-height: 780px) { .kv__logos .logo-text--01 { left: 40px; } } @media (max-width: 768px) { .kv__logos .logo-text--01 { gap: 20%; left: 20px; } } .kv__logos .logo-text--01 img { display: block; opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-filter: blur(10px); filter: blur(10px); } .kv__logos .logo-text--01.active img { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-filter: blur(0px); filter: blur(0px); } .kv__logos .logo-text--01 > * { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(1) { margin-right: 0%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(2) { margin-right: 3%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(3) { margin-right: 4%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(4) { margin-right: 3%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(5) { margin-right: 3%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(6) { margin-right: 2%; } .kv__logos .logo-text--01 > *:nth-child(1) > :nth-child(7) { margin-right: 2%; } .kv__logos .logo-text--01 > *:nth-child(2) > :nth-child(1) { margin-right: 1%; } .kv__logos .logo-text--01 > *:nth-child(2) > :nth-child(2) { margin-right: 8%; } .kv__logos > * { display: block; } .kv__logos > *:nth-child(2) { margin-top: 20px; width: 100%; height: auto; position: relative; left: 3px; bottom: 0px; } @media (max-width: 768px) { .kv__logos > *:nth-child(2) { left: 0.5%; } } .kv__logos .logo-text--02 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; max-width: 1140px; width: 80%; } @media (max-height: 600px) { .kv__logos .logo-text--02 { width: 60%; } } @media (max-width: 768px) { .kv__logos .logo-text--02 { width: 102.5%; } } .kv__logos .logo-text--02 .g { max-width: 255px; width: 21%; height: auto; opacity: 0; -webkit-transform: scale(1.4) translateX(-40px) translateY(80px); transform: scale(1.4) translateX(-40px) translateY(80px); -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: 1s all ease; transition: 1s all ease; } .kv__logos .logo-text--02 .d { max-width: 226px; width: 19%; height: auto; opacity: 0; -webkit-transform: scale(1.4) translateX(40px) translateY(-80px); transform: scale(1.4) translateX(40px) translateY(-80px); -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: 1s all ease; transition: 1s all ease; } .kv__logos .logo-text--02.active .g { opacity: 1; -webkit-transform: scale(1) translateX(0px) translateY(0px); transform: scale(1) translateX(0px) translateY(0px); -webkit-filter: blur(0px); filter: blur(0px); } .kv__logos .logo-text--02.active .d { opacity: 1; -webkit-transform: scale(1) translateX(0px) translateY(0px); transform: scale(1) translateX(0px) translateY(0px); -webkit-filter: blur(0px); filter: blur(0px); } .kv__logos .logo-text--02 > div { position: relative; } .kv__logos .logo-text--02 .oo { width: 100%; height: auto; } .kv__logos .logo-text--02 .mask-wrap { max-width: 575px; width: 50%; opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); -webkit-transition: 0.8s all ease; transition: 0.8s all ease; } .kv__logos .logo-text--02 #maskPath { stroke-dasharray: 500; stroke-dashoffset: 500; } .kv__logos .logo-text--02.active .mask-wrap { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); } .kv__logos .logo-text--02.active #maskPath { stroke-dasharray: 500; stroke-dashoffset: 500; -webkit-animation: drawPath 2.5s ease forwards; animation: drawPath 2.5s ease forwards; } @-webkit-keyframes drawPath { to { stroke-dashoffset: 0; } } @keyframes drawPath { to { stroke-dashoffset: 0; } } .kv__nav { opacity: 0; width: 120px; height: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 100; position: relative; left: 40px; } @media (max-height: 780px) { .kv__nav { left: 40px; margin-bottom: -20px; } } @media (max-width: 1420px) { .kv__nav { left: 40px; margin-bottom: -20px; } } @media (max-width: 768px) { .kv__nav { position: absolute; left: auto; right: 24px; top: 40px; } } .kv__nav #swiper-play, .kv__nav #swiper-pause { width: 40px; height: 34px; line-height: 1; position: relative; /* .icon--play { display: block; &::after { position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 4px; height: 10px; background: $green; } &::before { position: absolute; left: 60%; top: 50%; transform: translate(-50%, -50%); content: ""; width: 4px; height: 10px; background: $green; } } */ } .kv__nav #swiper-play .icon--play, .kv__nav #swiper-pause .icon--play { display: block; } .kv__nav #swiper-play .icon--play::after, .kv__nav #swiper-pause .icon--play::after { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #000; border-right: 0; } .kv__nav #swiper-play .icon--stop, .kv__nav #swiper-pause .icon--stop { display: block; } .kv__nav #swiper-play .icon--stop::after, .kv__nav #swiper-pause .icon--stop::after { position: absolute; left: 40%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 4px; height: 10px; background: #000; } .kv__nav #swiper-play .icon--stop::before, .kv__nav #swiper-pause .icon--stop::before { position: absolute; left: 60%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 4px; height: 10px; background: #000; } .kv__nav #swiper-play { -webkit-transform: scaleY(1.5); transform: scaleY(1.5); font-size: 1.25rem; } @media (min-width: 769px) { .kv__nav #swiper-play { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv__nav #swiper-play:hover { color: #2e8b4e; } } .kv__nav #swiper-play.hide { display: none; } .kv__nav #swiper-pause { -webkit-transform: scaleY(1.5); transform: scaleY(1.5); font-size: 1.25rem; line-height: 1; } @media (min-width: 769px) { .kv__nav #swiper-pause { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv__nav #swiper-pause:hover { color: #2e8b4e; } } .kv__nav #swiper-pause.hide { display: none; } .kv__nav .swiper-next, .kv__nav .swiper-prev { width: 34px; height: 34px; border: solid 2px #0e8550; border-radius: 50%; position: relative; background: #fff; } @media (min-width: 769px) { .kv__nav .swiper-next, .kv__nav .swiper-prev { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv__nav .swiper-next:hover, .kv__nav .swiper-prev:hover { background: #0e8550; } } @media (min-width: 769px) { .kv__nav .swiper-next { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv__nav .swiper-next:hover::after { border-left: 10px solid #fff; } } .kv__nav .swiper-next::after { position: absolute; left: 55%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #2e8b4e; border-right: 0; } @media (min-width: 769px) { .kv__nav .swiper-prev { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv__nav .swiper-prev:hover::after { border-right: 10px solid #fff; } } .kv__nav .swiper-prev::after { position: absolute; left: 45%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #2e8b4e; border-left: 0; } .kv__scroll { opacity: 0; } .kv__scroll.scroller { width: 28px; height: 110px; position: absolute; right: 40px; bottom: 0px; overflow: hidden; z-index: 100; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; color: #666666; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 0.875rem; } @media (max-height: 600px) { .kv__scroll.scroller { bottom: 8vh; } } .kv__scroll.scroller else { font-weight: 400; } @media (max-width: 768px) { .kv__scroll.scroller { display: none; } } .kv__scroll.scroller span { height: 100%; width: 2px; background: #2e8b4e; position: absolute; right: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); z-index: 2; -webkit-animation-name: scroller; animation-name: scroller; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: cubic-bezier(0.52, 0.08, 0.46, 0.87); animation-timing-function: cubic-bezier(0.52, 0.08, 0.46, 0.87); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-webkit-keyframes scroller { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 70% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes scroller { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 70% { -webkit-transform: translateY(100%); transform: translateY(100%); } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); } } .kv .swiper { width: 100%; height: 100%; } @media (min-width: 769px) { .kv .swiper { padding-top: 100px; } } .kv .swiper-slide { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; height: 100%; 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; left: 4%; pointer-events: none; } .kv .swiper-slide a[target=_blank] figure { position: relative; } .kv .swiper-slide a[target=_blank] figure::after { content: ""; position: absolute; right: 2.5%; top: 2.5%; z-index: 12; background: #fff; border-radius: 50%; } @media (min-width: 961px) { .kv .swiper-slide a[target=_blank] figure::after { width: 6.5%; aspect-ratio: 1/1; } } @media (max-width: 960px) { .kv .swiper-slide a[target=_blank] figure::after { width: 36px; height: 36px; right: 12px; top: 12px; } } .kv .swiper-slide a[target=_blank] figure::before { content: ""; position: absolute; right: 3.8%; top: 4%; z-index: 13; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 961px) { .kv .swiper-slide a[target=_blank] figure::before { width: 4%; aspect-ratio: 1/1; } } @media (max-width: 960px) { .kv .swiper-slide a[target=_blank] figure::before { right: 20px; top: 20px; width: 20px; height: 20px; } } @media (max-width: 768px) { .kv .swiper-slide { height: 83%; left: 0%; } } .kv .swiper-slide.open > * div { opacity: 1; -webkit-transform: sclae(1); transform: sclae(1); -webkit-animation: fadeleft 2s ease; animation: fadeleft 2s ease; } .kv .swiper-slide.open.swiper-slide-active figcaption .activity-cat { clip-path: inset(0 0% 0 0); } .kv .swiper-slide.open.swiper-slide-active figcaption strong { clip-path: inset(0 0% 0 0); } .kv .swiper-slide > * { width: 60%; aspect-ratio: 1/0.7; height: auto; display: block; } @media (min-width: 769px) { .kv .swiper-slide > * { min-width: 360px; max-width: 55vh; } } @media (max-width: 768px) { .kv .swiper-slide > * { aspect-ratio: 1/0.9; width: 100%; } } .kv .swiper-slide > * > div { opacity: 0; -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transform: sclae(0.8); transform: sclae(0.8); } @-webkit-keyframes fadeleft { 0% { -webkit-transform: scale(1) translateX(35%); transform: scale(1) translateX(35%); } 100% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } } @keyframes fadeleft { 0% { -webkit-transform: scale(1) translateX(35%); transform: scale(1) translateX(35%); } 100% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } } @-webkit-keyframes bounce { 0% { -webkit-transform: scale(0.96); transform: scale(0.96); } 20% { -webkit-transform: scale(1.04); transform: scale(1.04); } 40% { -webkit-transform: scale(0.98); transform: scale(0.98); } 60% { -webkit-transform: scale(1.02); transform: scale(1.02); } 80% { -webkit-transform: scale(0.99); transform: scale(0.99); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounce { 0% { -webkit-transform: scale(0.96); transform: scale(0.96); } 20% { -webkit-transform: scale(1.04); transform: scale(1.04); } 40% { -webkit-transform: scale(0.98); transform: scale(0.98); } 60% { -webkit-transform: scale(1.02); transform: scale(1.02); } 80% { -webkit-transform: scale(0.99); transform: scale(0.99); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @media (min-width: 769px) { .kv .swiper-slide > * { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .kv .swiper-slide > *:hover figure picture img { -webkit-transform: scale(1.1); transform: scale(1.1); } .kv .swiper-slide > *:hover figure figcaption strong::after { right: 10px; } } .kv .swiper-slide > * figure { -webkit-transition: all 1s ease; transition: all 1s ease; width: 100%; height: auto; display: block; aspect-ratio: 1/0.85; position: relative; } .kv .swiper-slide > * figure > * { pointer-events: all; } @media (min-width: 769px) { .kv .swiper-slide > * figure { -webkit-transform: translateY(-140%) translateX(40%); transform: translateY(-140%) translateX(40%); } } @media (max-width: 768px) { .kv .swiper-slide > * figure { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } .kv .swiper-slide > * figure picture { width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 72px 0 72px 72px; } @media (min-width: 769px) and (max-width: 1280px) { .kv .swiper-slide > * figure picture { border-radius: 5.5vw 0 5.5vw 5.5vw; } } @media (max-width: 768px) { .kv .swiper-slide > * figure picture { border-radius: 11vw 0 11vw 11vw; } } .kv .swiper-slide > * figure picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 1; } @media (min-width: 769px) { .kv .swiper-slide > * figure picture img { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } } .kv .swiper-slide > * figure figcaption { position: absolute; left: 7%; bottom: 6%; max-width: 86%; } .kv .swiper-slide > * figure figcaption .activity-cat { clip-path: inset(0 100% 0 0); -webkit-transition: all 0.6s cubic-bezier(0.6, 0.06, 0.44, 0.94); transition: all 0.6s cubic-bezier(0.6, 0.06, 0.44, 0.94); -webkit-transition-delay: 0.8s; transition-delay: 0.8s; background: #0e8550; font-size: 1rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #fff; border-radius: 12px 12px 0 0; overflow: clip; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 400; line-height: 1.6; } @media (max-width: 768px) { .kv .swiper-slide > * figure figcaption .activity-cat { font-size: 0.875rem; } } .kv .swiper-slide > * figure figcaption .activity-cat else { font-weight: 400; } @media (min-width: 769px) and (max-width: 920px) { .kv .swiper-slide > * figure figcaption .activity-cat { font-size: 0.875rem; } } @media (min-width: 769px) and (max-width: 920px) and (max-width: 768px) { .kv .swiper-slide > * figure figcaption .activity-cat { font-size: 0.875rem; } } .kv .swiper-slide > * figure figcaption .activity-cat__people { background: #d66a00; } .kv .swiper-slide > * figure figcaption .activity-cat__society { background: #0070c7; } .kv .swiper-slide > * figure figcaption .activity-cat__earth { background: #0e8550; } .kv .swiper-slide > * figure figcaption .activity-cat li { height: 32px; min-width: 82px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .kv .swiper-slide > * figure figcaption .activity-cat li { height: 30px; min-width: 70px; } } .kv .swiper-slide > * figure figcaption > div { width: 100%; } .kv .swiper-slide > * figure figcaption strong { width: 100%; clip-path: inset(0 100% 0 0); -webkit-transition: all 0.6s cubic-bezier(0.6, 0.06, 0.44, 0.94); transition: all 0.6s cubic-bezier(0.6, 0.06, 0.44, 0.94); -webkit-transition-delay: 0.9s; transition-delay: 0.9s; display: block; background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: 0 100px 100px 112px; padding: 5px 40px 5px 16px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; min-width: 270px; } .kv .swiper-slide > * figure figcaption strong span { display: inline-block; line-height: 1.5; font-size: 1.125rem; font-weight: 400; } @media (max-width: 768px) { .kv .swiper-slide > * figure figcaption strong span { font-size: 1rem; } } @media (max-width: 420px) { .kv .swiper-slide > * figure figcaption strong span { font-size: 0.9375rem; font-weight: 400; } } @media (max-width: 420px) and (max-width: 768px) { .kv .swiper-slide > * figure figcaption strong span { font-size: 0.875rem; } } @media (min-width: 769px) and (max-width: 1080px) { .kv .swiper-slide > * figure figcaption strong span { font-size: min(1.7vw, 18px); } } @media (min-width: 769px) and (max-width: 920px) { .kv .swiper-slide > * figure figcaption strong span { font-size: min(1.7vw, 16px); } } .kv .swiper-slide > * figure figcaption strong::after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 14px; height: 10px; } @media (min-width: 769px) { .kv .swiper-slide > * figure figcaption strong::after { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } } .kv .swiper-slide.cat-people a[target=_blank] figure { position: relative; } .kv .swiper-slide.cat-people a[target=_blank] figure::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper-slide.cat-people figcaption strong::after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper-slide.cat-society a[target=_blank] figure { position: relative; } .kv .swiper-slide.cat-society a[target=_blank] figure::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper-slide.cat-society figcaption strong::after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper-slide.cat-earth a[target=_blank] figure { position: relative; } .kv .swiper-slide.cat-earth a[target=_blank] figure::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .kv .swiper-slide.cat-earth figcaption strong::after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 769px) { .kv .swiper-slide-prev > * figure { -webkit-transform: translateY(-60%) translateX(40%); transform: translateY(-60%) translateX(40%); } } @media (max-width: 768px) { .kv .swiper-slide-prev > * figure { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } @media (min-width: 769px) { .kv .swiper-slide-next > * figure { -webkit-transform: translateY(-60%) translateX(55%); transform: translateY(-60%) translateX(55%); } } @media (max-width: 768px) { .kv .swiper-slide-next > * figure { -webkit-transform: translateY(-40%); transform: translateY(-40%); } } @media (min-width: 769px) { .kv .swiper-slide-active > * figure { -webkit-transform: scale(1.8) translateY(0%) translateX(7%); transform: scale(1.8) translateY(0%) translateX(7%); } } @media (min-width: 769px) and (max-width: 1600px) { .kv .swiper-slide-active > * figure { -webkit-transform: scale(1.65) translateY(0%) translateX(5%); transform: scale(1.65) translateY(0%) translateX(5%); } } @media (min-width: 769px) and (max-width: 920px) { .kv .swiper-slide-active > * figure { -webkit-transform: scale(1.4) translateY(0%) translateX(5%); transform: scale(1.4) translateY(0%) translateX(5%); } } @media (max-width: 768px) { .kv .swiper-slide-active > * figure { -webkit-transform: translateY(0%); transform: translateY(0%); } } .kv__content { -webkit-animation-play-state: running; animation-play-state: running; -webkit-transform: translateY(-12%); transform: translateY(-12%); display: inline-block; } @media (max-width: 768px) { .kv__content { -webkit-transform: translateY(1%); transform: translateY(1%); } } @media (min-width: 769px) { .float-box { -webkit-animation: kvfloatUpDown_pc 6s ease-in-out infinite; animation: kvfloatUpDown_pc 6s ease-in-out infinite; } } @media (max-width: 768px) { .float-box { -webkit-animation: kvfloatUpDown_sp 6s ease-in-out infinite; animation: kvfloatUpDown_sp 6s ease-in-out infinite; } } @-webkit-keyframes kvfloatUpDown_sp { 0% { -webkit-transform: translateY(1%); transform: translateY(1%); } 50% { -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { -webkit-transform: translateY(1%); transform: translateY(1%); } } @keyframes kvfloatUpDown_sp { 0% { -webkit-transform: translateY(1%); transform: translateY(1%); } 50% { -webkit-transform: translateY(10%); transform: translateY(10%); } 100% { -webkit-transform: translateY(1%); transform: translateY(1%); } } @-webkit-keyframes kvfloatUpDown_pc { 0% { -webkit-transform: translateY(-12%); transform: translateY(-12%); } 50% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(-12%); transform: translateY(-12%); } } @keyframes kvfloatUpDown_pc { 0% { -webkit-transform: translateY(-12%); transform: translateY(-12%); } 50% { -webkit-transform: translateY(0%); transform: translateY(0%); } 100% { -webkit-transform: translateY(-12%); transform: translateY(-12%); } } .float-box:hover { -webkit-animation-play-state: paused; animation-play-state: paused; } .green-box-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow-x: clip; z-index: 0; } .green-box { position: absolute; top: 0; right: -100px; width: 40px; height: 40px; pointer-events: none; } @media (min-width: 769px) { .green-box { -webkit-animation: moveLeft 20s linear forwards; animation: moveLeft 20s linear forwards; } } @media (max-width: 768px) { .green-box { -webkit-animation: moveLeft2 10s linear forwards; animation: moveLeft2 10s linear forwards; } } .green-box-inner { width: 100%; height: 100%; background-color: #ccd202; } @-webkit-keyframes moveLeft { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-110vw); transform: translateX(-110vw); } } @keyframes moveLeft { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-110vw); transform: translateX(-110vw); } } @-webkit-keyframes moveLeft2 { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-150vw); transform: translateX(-150vw); } } @keyframes moveLeft2 { from { -webkit-transform: translateX(0px); transform: translateX(0px); } to { -webkit-transform: translateX(-150vw); transform: translateX(-150vw); } } @-webkit-keyframes floatUpDown { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(100px); transform: translateY(100px); } } @keyframes floatUpDown { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(100px); transform: translateY(100px); } } @-webkit-keyframes floatUpDown_sp { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @keyframes floatUpDown_sp { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(50px); transform: translateY(50px); } } .site-main { padding-bottom: 100px; } @media (max-width: 768px) { .site-main { padding-bottom: 40px; } } .sect-wrap { position: relative; overflow-x: clip; } .sect { position: relative; z-index: 2; } .sect--news { max-width: 880px; width: calc(100% - 80px); margin: 100px auto; padding: 0 0px; display: -ms-grid; display: grid; -ms-grid-columns: 126px 1fr; grid-template-columns: 126px 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; border-radius: 28px; background: #ececec; } .sect--news > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--news > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } @media (max-width: 920px) { .sect--news { width: calc(100% - 50px); } } @media (max-width: 768px) { .sect--news { width: calc(100% - 30px); } } @media (max-width: 768px) { .sect--news { max-width: 560px; margin: 40px auto 60px; display: block; } } .sect--news__header { border-radius: 28px 0 28px 28px; background: #0E8550; background: -webkit-gradient(linear, left top, right top, from(rgb(14, 133, 80)), color-stop(41%, rgb(14, 133, 80)), to(rgb(203, 209, 3))); background: linear-gradient(90deg, rgb(14, 133, 80) 0%, rgb(14, 133, 80) 41%, rgb(203, 209, 3) 100%); font-size: 1.3125rem; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media (max-width: 768px) { .sect--news__header { font-size: 1.4375rem; } } .sect--news__header else { font-weight: 400; } @media (min-width: 769px) { .sect--news__header { padding-top: 16px; padding-left: 25px; } } @media (max-width: 768px) { .sect--news__header { width: 180px; height: 72px; border-radius: 28px 0 28px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .sect--news ul { border-radius: 0 28px 28px 0; padding: 18px 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media (max-width: 768px) { .sect--news ul { padding: 25px; } } .sect--news ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 769px) { .sect--news ul li a { gap: 10px; } } @media (max-width: 768px) { .sect--news ul li a { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .sect--news ul li a time { font-size: 0.9375rem; } @media (min-width: 769px) { .sect--news ul li a time { margin-top: 0.2em; } } @media (max-width: 768px) { .sect--news ul li a time { font-size: 0.875rem; } } .sect--news ul li a p { font-size: 0.9375rem; } @media (min-width: 769px) { .sect--news ul li a p { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--news ul li a p:hover { text-decoration: underline; } } .sect--about { position: relative; max-width: 1600px; margin: auto; } @media (max-width: 768px) { .sect--about { overflow-x: clip; } } .sect--about--bottom { margin-top: 80px; } @media (max-width: 768px) { .sect--about--bottom { margin-top: 60px; } } .sect--about__inner { max-width: 960px; width: calc(100% - 80px); margin: auto; overflow: hidden; } @media (max-width: 920px) { .sect--about__inner { width: calc(100% - 50px); } } @media (max-width: 768px) { .sect--about__inner { width: 100%; } } .sect--about__header > * { text-align: center; } .sect--about__header > * img { width: 600px; margin: auto; } @media (max-width: 768px) { .sect--about__header > * img { max-width: 560px; width: calc(100% - 40px); } } .sect--about__message { margin: 40px auto; } @media (max-width: 768px) { .sect--about__message { margin: 30px auto; } } .sect--about__message .message-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: 0.6s all ease; transition: 0.6s all ease; height: 0px; opacity: 0; pointer-events: none; display: none; gap: 20px; } .sect--about__message .message-text.view { height: auto; pointer-events: all; opacity: 1; } .sect--about__message .message-text.active { pointer-events: all; opacity: 1; } @media (max-width: 768px) { .sect--about__message .message-text { width: 100%; margin: auto; } } .sect--about__message .message-text p { font-size: 1rem; } @media (max-width: 768px) { .sect--about__message .message-text p { font-size: 0.9375rem; } } .sect--about__message .message-navi { -webkit-transition: 1s all ease; transition: 1s all ease; margin-top: 0px; } .sect--about__message .message-navi.active { margin-top: 50px; } .sect--about__message #btn-view-message { padding-right: 100px; z-index: 10; } .sect--about__message #btn-view-message.hide .icon--plus::after { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .sect--about__read { margin: 40px auto; text-align: center; font-size: 1.5rem; } @media (max-width: 768px) { .sect--about__read { margin: 15px auto 20px; } } @media (max-width: 768px) and (max-width: 375px) { .sect--about__read { font-size: 1.25rem; } } .sect--about__read p { margin: 0; letter-spacing: 0.25em; line-height: 1.8; } .sect--about__branding { margin: 60px auto 0; text-align: center; } @media (max-width: 768px) { .sect--about__branding { margin: 30px auto; } } .sect--about__chart { max-width: 608px; width: 100%; margin: auto; margin: 60px auto; position: relative; } @media (max-width: 768px) { .sect--about__chart { max-width: 480px; } } @media (max-width: 768px) { .sect--about__chart { margin: 30px auto; } } .sect--about__chart p { text-align: center; margin: 0; } @media (max-width: 375px) { .sect--about__chart p { font-size: 0.9375rem; } } .sect--about__chart h4 { font-size: 1.3125rem; font-weight: 700; margin: 0 0 10px; text-align: center; } @media (max-width: 768px) { .sect--about__chart h4 { font-size: 1.25rem; } } @media (max-width: 768px) { .sect--about__chart h4 { padding-top: 20px; } } .sect--about__chart .about-chart { margin: 30% auto; position: relative; -webkit-transform: scale(1.4); transform: scale(1.4); } @media (max-width: 1120px) { .sect--about__chart .about-chart { -webkit-transform: scale(1.3); transform: scale(1.3); margin: 25% auto; } } @media (max-width: 1080px) { .sect--about__chart .about-chart { -webkit-transform: scale(1.2); transform: scale(1.2); } } @media (max-width: 980px) { .sect--about__chart .about-chart { -webkit-transform: scale(1.1); transform: scale(1.1); } } @media (max-width: 920px) { .sect--about__chart .about-chart { -webkit-transform: scale(1); transform: scale(1); } } @media (max-width: 768px) { .sect--about__chart .about-chart { width: 100%; margin: 130px auto 40px; } .sect--about__chart .about-chart__inner { position: relative; z-index: 2; } } .sect--about__chart .about-chart__icon { width: 40px; height: 40px; border-radius: 50%; background: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: auto; } @media (max-width: 768px) { .sect--about__chart .about-chart__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; gap: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 5px; } } .sect--about__chart .about-chart__text { position: absolute; left: 45%; width: 100%; text-align: center; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0.8); transform: translate(-50%, -50%) scale(0.8); z-index: 10; } @media (max-width: 1280px) { .sect--about__chart .about-chart__text { -webkit-transform: translate(-50%, -50%) scale(0.9); transform: translate(-50%, -50%) scale(0.9); } } @media (max-width: 960px) { .sect--about__chart .about-chart__text { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } } @media (max-width: 768px) { .sect--about__chart .about-chart__text { left: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .sect--about__chart .about-chart__text strong { letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 1.5rem; } .sect--about__chart .about-chart__text strong else { font-weight: 400; } @media (max-width: 768px) { .sect--about__chart .about-chart__text strong { font-size: 1.25rem; } } .sect--about__chart .about-chart__text p { font-size: 0.875rem; line-height: 1; } @media (max-width: 768px) { .sect--about__chart .about-chart__text p { font-size: 0.75rem; } } .sect--about__chart .about-chart__people { width: 180px; height: 170px; position: absolute; left: -3px; top: 66%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 3; } .sect--about__chart .about-chart__people .about-chart__icon { background: #d66a00; } .sect--about__chart .about-chart__people .about-chart__text { top: 45%; } .sect--about__chart .about-chart__people .about-chart__text strong { color: #d66a00; } .sect--about__chart .about-chart__people .masked-image-wrap { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .sect--about__chart .about-chart__people svg.mask-svg { position: absolute; top: 0px; left: 0px; width: 200px; height: 190px; pointer-events: none; z-index: 2; } .sect--about__chart .about-chart__people .masked-image-wrap.anime-active .masked-image-wrap { opacity: 1; } .sect--about__chart .about-chart__people .masked-image-wrap.anime-active #maskPath1 { -webkit-animation: drawPath 1.4s ease forwards; animation: drawPath 1.4s ease forwards; } .sect--about__chart .about-chart__people .masked-image-wrap .masked-image-wrap { opacity: 0; -webkit-transition: 0.8s all ease; transition: 0.8s all ease; } @media (max-width: 768px) { .sect--about__chart .about-chart__people { width: 100%; height: auto; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sect--about__chart .about-chart__people .about-chart__bg img { width: 42%; height: auto; display: block; margin: auto; } } @keyframes drawPath { to { stroke-dashoffset: 0; } } .sect--about__chart .about-chart__society { width: 387px; height: 244px; position: absolute; left: 0; top: 63%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } .sect--about__chart .about-chart__society .masked-image-wrap { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .sect--about__chart .about-chart__society svg.mask-svg { position: absolute; top: -4px; left: -35px; width: 470px; height: 370px; pointer-events: none; z-index: 2; } .sect--about__chart .about-chart__society .masked-image-wrap { opacity: 0; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .sect--about__chart .about-chart__society .masked-image-wrap.anime-active { opacity: 1; } .sect--about__chart .about-chart__society .masked-image-wrap.anime-active #maskPath2 { -webkit-animation: drawPath 1.8s ease 0.5s forwards; animation: drawPath 1.8s ease 0.5s forwards; } .sect--about__chart .about-chart__society .about-chart__icon { background: #0070c7; } .sect--about__chart .about-chart__society .about-chart__text { top: 45%; left: 67%; } .sect--about__chart .about-chart__society .about-chart__text strong { color: #0070c7; } @media (max-width: 768px) { .sect--about__chart .about-chart__society .about-chart__text { left: 50%; top: 63%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 768px) { .sect--about__chart .about-chart__society { width: 100%; height: auto; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .sect--about__chart .about-chart__society .about-chart__bg img { width: 62%; height: auto; display: block; margin: auto; } } .sect--about__chart .about-chart__earth { width: 608px; height: 327px; } .sect--about__chart .about-chart__earth svg.mask-svg { position: absolute; top: 28px; left: 2px; width: 640px; height: 400px; pointer-events: none; z-index: 2; } .sect--about__chart .about-chart__earth .masked-image-wrap { opacity: 0; -webkit-transition-delay: 1.1s; transition-delay: 1.1s; } .sect--about__chart .about-chart__earth .masked-image-wrap.anime-active { opacity: 1; } .sect--about__chart .about-chart__earth .masked-image-wrap.anime-active #maskPath3 { -webkit-animation: drawPath 1.4s ease 1s forwards; animation: drawPath 1.4s ease 1s forwards; } .sect--about__chart .about-chart__earth .about-chart__icon { background: #0e8550; } .sect--about__chart .about-chart__earth .about-chart__text { top: 53%; left: 76%; } .sect--about__chart .about-chart__earth .about-chart__text strong { color: #0e8550; } @media (max-width: 768px) { .sect--about__chart .about-chart__earth .about-chart__text { left: 50%; top: 73%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 768px) { .sect--about__chart .about-chart__earth { width: 100%; height: auto; } .sect--about__chart .about-chart__earth .about-chart__bg img { width: 100%; height: auto; } } .sect--about__chart .icon { position: absolute; } .sect--about__chart .icon--01 { top: 22%; left: 7%; -webkit-transform: rotate(-31deg); transform: rotate(-31deg); } @media (max-width: 768px) { .sect--about__chart .icon--01 { top: 0%; left: 0%; width: 8%; height: auto; } } .sect--about__chart .icon--02 { top: 5.5%; left: 14%; -webkit-transform: rotate(-26deg); transform: rotate(-26deg); } @media (max-width: 768px) { .sect--about__chart .icon--02 { top: -10%; left: 8%; width: 14%; height: auto; } } .sect--about__chart .icon--03 { top: 7%; left: 24%; -webkit-transform: rotate(-13deg); transform: rotate(-13deg); } @media (max-width: 768px) { .sect--about__chart .icon--03 { top: -8%; left: 23%; width: 14%; height: auto; } } .sect--about__chart .icon--04 { top: -15%; left: 50%; -webkit-transform: rotate(0deg); transform: rotate(0deg); } @media (max-width: 768px) { .sect--about__chart .icon--04 { top: -20%; left: 53%; width: 22%; height: auto; } } .sect--about__chart .icon--05 { top: 0%; left: 66%; -webkit-transform: rotate(10deg); transform: rotate(10deg); } @media (max-width: 768px) { .sect--about__chart .icon--05 { top: -9%; left: 77%; width: 4%; height: auto; } } .sect--about__chart .icon--06 { top: -10%; left: 70%; -webkit-transform: rotate(0deg); transform: rotate(0deg); } @media (max-width: 768px) { .sect--about__chart .icon--06 { top: -17%; left: 82%; width: 20%; height: auto; } } .sect--about__chart .icon--07 { top: 10%; left: 76%; -webkit-transform: rotate(30deg); transform: rotate(30deg); } @media (max-width: 768px) { .sect--about__chart .icon--07 { top: 0%; left: 88%; width: 9%; height: auto; } } .sect--about__text { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 0px 1fr 0px 1fr; grid-template-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 0px; } .sect--about__text > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--about__text > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .sect--about__text > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } @media (max-width: 768px) { .sect--about__text { display: block; padding: 0 30px; max-width: 560px; margin: auto; } } .sect--about__text li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } @media (max-width: 768px) { .sect--about__text li { padding: 20px 0; display: block; border-bottom: solid 1px #d1d1d1; } } @media (min-width: 769px) { .sect--about__text li:nth-child(1)::after, .sect--about__text li:nth-child(2)::after { content: ""; width: 2px; height: 75px; position: absolute; background: #d1d1d1; right: 0; top: 0; } } .sect--about__text li figure { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; } .sect--about__text li img { display: block; margin-top: 0.5em; } @media (max-width: 375px) { .sect--about__text li img { width: 45px; height: auto; } } .sect--about__text li:nth-child(1) strong { color: #d66a00; } .sect--about__text li:nth-child(2) strong { color: #0070c7; } .sect--about__text li:nth-child(3) strong { color: #0e8550; } .sect--about__text li strong { font-size: 1.25rem; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; } .sect--about__text li strong else { font-weight: 400; } .sect--about__text li p { font-size: 0.875rem; line-height: 1.6; } @media (max-width: 375px) { .sect--about__text li p { font-size: 0.75rem; } } .sect--about__nav { margin: 40px auto; } @media (max-width: 768px) { .sect--about .sp-bg { opacity: 0; width: 150%; height: calc(100% + 40px); background: #edf5ea; position: absolute; left: 50%; top: 80%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; } .sect--about .sp-bg.anime-active { -webkit-transition: 1s all ease; transition: 1s all ease; opacity: 1; top: 51%; } } .sect--activity { margin: 100px auto; position: relative; } @media (max-width: 768px) { .sect--activity { margin: 60px auto; } } .sect--activity__header { overflow: hidden; } .sect--activity__header .activity-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } @media (max-width: 768px) { .sect--activity__header .activity-title { gap: 3vw; } } .sect--activity__header .activity-title > div { position: relative; } @media (max-width: 768px) { .sect--activity__header .activity-title > div img { width: 75vw; height: auto; } } .sect--activity__header .activity-title > div .activity-title { position: absolute; left: 0; top: 0; z-index: 2; } .sect--activity__header h2 { margin-top: 20px; font-size: 1.125rem; text-align: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: auto; font-weight: 700; margin: 10px auto; } @media (max-width: 768px) { .sect--activity__header h2 { margin-top: 20px; } } .sect--activity__header h2 .activity-jp-title { display: block; } .sect--activity__header h2 .activity-jp-title * { display: block; } .sect--activity__header h2 span { display: block; } .sect--activity__header .under-line { margin-top: 10px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 4px 0.5fr 4px 0.3fr 4px 0.2fr; grid-template-columns: 1fr 0.5fr 0.3fr 0.2fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 4px; position: relative; } .sect--activity__header .under-line > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--activity__header .under-line > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } .sect--activity__header .under-line > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 5; } .sect--activity__header .under-line > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 7; } .sect--activity__header .under-line > * { height: 4px; border-radius: 30px; } .sect--activity__header .under-line > *:nth-child(1) { background: #62b787; } .sect--activity__header .under-line > *:nth-child(2) { background: #a5c858; } .sect--activity__header .under-line > *:nth-child(3) { background: #a5c858; } .sect--activity__header .under-line > *:nth-child(4) { background: #cad112; } .sect--activity__main { max-width: 1280px; margin: 40px auto; } .sect--activity__main .activity-tabs { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; padding: 0 50px; } .sect--activity__main .activity-tabs > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--activity__main .activity-tabs > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } .sect--activity__main .activity-tabs > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } .sect--activity__main .activity-tabs > *:nth-child(4) { -ms-grid-row: 1; -ms-grid-column: 4; } @media (max-width: 920px) { .sect--activity__main .activity-tabs { padding: 0 30px; } } @media (max-width: 768px) { .sect--activity__main .activity-tabs { padding: 0 15px; } } @media (max-width: 768px) and (max-width: 375px) { .sect--activity__main .activity-tabs { padding: 0 10px; } } .sect--activity__main .activity-tabs li:nth-child(1) button { background: #e4e86d; font-weight: 700; background: #e4e86d; color: #0e8550; -webkit-box-shadow: 0px 0px 0px 2px transparent inset; box-shadow: 0px 0px 0px 2px transparent inset; } .sect--activity__main .activity-tabs li:nth-child(1) button.active { background: #fff; color: #0e8550; -webkit-box-shadow: 0px 0px 0px 2px #c9d011 inset; box-shadow: 0px 0px 0px 2px #c9d011 inset; } .sect--activity__main .activity-tabs li:nth-child(2) button { background: #d66a00; -webkit-box-shadow: 0px 0px 0px 2px #d66a00 inset; box-shadow: 0px 0px 0px 2px #d66a00 inset; } .sect--activity__main .activity-tabs li:nth-child(2) button.active { background: #fff; color: #d66a00; } .sect--activity__main .activity-tabs li:nth-child(2) button.active img.icon-current { display: block; } .sect--activity__main .activity-tabs li:nth-child(2) button.active img:not(.icon-current) { display: none; } .sect--activity__main .activity-tabs li:nth-child(3) button { background: #0070c7; -webkit-box-shadow: 0px 0px 0px 2px #0070c7 inset; box-shadow: 0px 0px 0px 2px #0070c7 inset; } .sect--activity__main .activity-tabs li:nth-child(3) button.active { background: #fff; color: #0070c7; } .sect--activity__main .activity-tabs li:nth-child(3) button.active img.icon-current { display: block; } .sect--activity__main .activity-tabs li:nth-child(3) button.active img:not(.icon-current) { display: none; } .sect--activity__main .activity-tabs li:nth-child(4) button { background: #0e8550; -webkit-box-shadow: 0px 0px 0px 2px #0e8550 inset; box-shadow: 0px 0px 0px 2px #0e8550 inset; } .sect--activity__main .activity-tabs li:nth-child(4) button.active { background: #fff; color: #0e8550; } .sect--activity__main .activity-tabs li:nth-child(4) button.active img.icon-current { display: block; } .sect--activity__main .activity-tabs li:nth-child(4) button.active img:not(.icon-current) { display: none; } .sect--activity__main .activity-tabs li button { width: 100%; border-radius: 30px 15px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; height: 85px; padding-bottom: 5px; color: #fff; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 700; font-size: 1.125rem; } @media (min-width: 769px) { .sect--activity__main .activity-tabs li button { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-tabs li button:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .sect--activity__main .activity-tabs li button img.icon-current { display: none; } @media (max-width: 768px) { .sect--activity__main .activity-tabs li button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0px; } .sect--activity__main .activity-tabs li button img { width: 25px; height: auto; } } .sect--activity__main .activity-tabs li button else { font-weight: 400; } .sect--activity__main .activity-contents { margin-top: -13px; position: relative; z-index: 2; } .sect--activity__main .activity-contents__pickup { background: -webkit-gradient(linear, left bottom, left top, from(rgb(96, 182, 135)), to(rgb(203, 209, 3))); background: linear-gradient(0deg, rgb(96, 182, 135) 0%, rgb(203, 209, 3) 100%); } @media (min-width: 769px) { .sect--activity__main .activity-contents__pickup a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents__pickup a:hover figcaption strong { background: #e4e86d; } } .sect--activity__main .activity-contents__people { background: -webkit-gradient(linear, left top, left bottom, from(#d66a00), color-stop(30%, #e9cb00), to(#e97e00)); background: linear-gradient(180deg, #d66a00 0%, #e9cb00 30%, #e97e00 100%); } @media (min-width: 769px) { .sect--activity__main .activity-contents__people a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents__people a:hover figcaption strong { background: #d66a00; color: #fff; } } .sect--activity__main .activity-contents__society { background: -webkit-gradient(linear, left top, left bottom, from(#0070c7), to(#208ec7)); background: linear-gradient(180deg, #0070c7 0%, #208ec7 100%); } @media (min-width: 769px) { .sect--activity__main .activity-contents__society a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents__society a:hover figcaption strong { background: #0070c7; color: #fff; } } .sect--activity__main .activity-contents__earth { background: -webkit-gradient(linear, left top, left bottom, from(#0e8550), to(#39a575)); background: linear-gradient(180deg, #0e8550 0%, #39a575 100%); } @media (min-width: 769px) { .sect--activity__main .activity-contents__earth a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents__earth a:hover figcaption strong { background: #0e8550; color: #fff; } } .sect--activity__main .activity-contents > * { border-radius: 28px; padding: 45px; opacity: 0; position: absolute; pointer-events: none; visibility: hidden; height: 0; overflow: hidden; } @media (max-width: 1180px) { .sect--activity__main .activity-contents > * { padding: 40px 30px; } } @media (max-width: 920px) { .sect--activity__main .activity-contents > * { padding: 40px 25px; } } @media (max-width: 768px) { .sect--activity__main .activity-contents > * { padding: 40px 15px; border-radius: 0px; } } .sect--activity__main .activity-contents > *.active { opacity: 1; position: static; pointer-events: auto; visibility: visible; height: auto; } .sect--activity__main .activity-contents__pickup .activity-list > li:not(.more) a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--activity__main .activity-contents__pickup .activity-list > li:not(.more) figure::after { -webkit-transition: 2.4s all ease; transition: 2.4s all ease; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; content: ""; width: 500%; height: 200%; background: linear-gradient(99deg, rgba(204, 210, 2, 0) 10%, rgb(204, 210, 2) 30%, rgb(204, 210, 2) 100%); right: 0%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); position: absolute; z-index: 20; } .sect--activity__main .activity-contents__pickup .activity-list > li:not(.more):nth-child(odd) figure::after { background: linear-gradient(99deg, rgba(14, 133, 80, 0) 10%, rgb(14, 133, 80) 30%, rgb(14, 133, 80) 100%); } .sect--activity__main .activity-contents__people .activity-list > li:not(.more) a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--activity__main .activity-contents__people .activity-list > li:not(.more) figure::after { -webkit-transition: 2.4s all ease; transition: 2.4s all ease; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; content: ""; width: 500%; height: 200%; background: linear-gradient(99deg, rgba(242, 197, 145, 0) 10%, rgb(242, 197, 145) 30%, rgb(242, 197, 145) 100%); right: 0%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); position: absolute; z-index: 20; } .sect--activity__main .activity-contents__people .activity-list > li:not(.more):nth-child(odd) figure::after { background: linear-gradient(99deg, rgba(181, 98, 0, 0) 10%, rgb(181, 98, 0) 30%, rgb(181, 98, 0) 100%); } .sect--activity__main .activity-contents__society .activity-list > li:not(.more) a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--activity__main .activity-contents__society .activity-list > li:not(.more) figure::after { -webkit-transition: 2.4s all ease; transition: 2.4s all ease; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; content: ""; width: 500%; height: 200%; background: linear-gradient(99deg, rgba(34, 128, 201, 0) 10%, rgb(34, 128, 201) 30%, rgb(34, 128, 201) 100%); right: 0%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); position: absolute; z-index: 20; } .sect--activity__main .activity-contents__society .activity-list > li:not(.more):nth-child(odd) figure::after { background: linear-gradient(99deg, rgba(1, 95, 167, 0) 10%, rgb(1, 95, 167) 30%, rgb(1, 95, 167) 100%); } .sect--activity__main .activity-contents__earth .activity-list > li:not(.more) a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--activity__main .activity-contents__earth .activity-list > li:not(.more) figure::after { -webkit-transition: 2.4s all ease; transition: 2.4s all ease; -webkit-transition-delay: 0s !important; transition-delay: 0s !important; content: ""; width: 500%; height: 200%; background: linear-gradient(99deg, rgba(204, 210, 2, 0) 10%, rgb(204, 210, 2) 30%, rgb(204, 210, 2) 100%); right: 0%; top: 50%; -webkit-transform: translate(0%, -50%); transform: translate(0%, -50%); position: absolute; z-index: 20; } .sect--activity__main .activity-contents__earth .activity-list > li:not(.more):nth-child(odd) figure::after { background: linear-gradient(99deg, rgba(14, 133, 80, 0) 10%, rgb(14, 133, 80) 30%, rgb(14, 133, 80) 100%); } .sect--activity__main .activity-contents > *.selected .activity-list > li:not(.more) figure figcaption { clip-path: inset(0 0% 0 0); -webkit-transition-delay: 0s; transition-delay: 0s; } .sect--activity__main .activity-contents .activity-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 1fr; gap: 30px; position: relative; } @media (max-width: 920px) { .sect--activity__main .activity-contents .activity-list { gap: 3vw; } } @media (max-width: 768px) { .sect--activity__main .activity-contents .activity-list { max-width: 560px; margin: auto; -ms-grid-columns: 1fr 30px 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 30px; } .sect--activity__main .activity-contents .activity-list > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--activity__main .activity-contents .activity-list > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } } .sect--activity__main .activity-contents .activity-list > li:not(.more) { border-radius: 45px 45px 45px 0; position: relative; /* &::after{ transition: 3s all cubic-bezier(.41,.13,.53,.9); content:""; width: 500%; height: 200%; background: linear-gradient(65deg,rgba(204, 210, 2, 0) 20%, rgba(204, 210, 2, 1) 30%, rgba(204, 210, 2, 1) 70%, rgba(204, 210, 2, 0) 80%); left: -100%; top:50%; transform: translate(-100%,-50%); position: absolute; z-index: 20; } */ /* &:nth-child(odd){ &::after{ background: linear-gradient(99deg,rgba(14, 133, 80, 0) 0%, rgba(14, 133, 80, 1) 10%, rgba(14, 133, 80, 1) 93%, rgba(14, 133, 80, 0) 100%); } } */ position: relative; } .sect--activity__main .activity-contents .activity-list > li:not(.more).anime-active a[target=_blank]::before, .sect--activity__main .activity-contents .activity-list > li:not(.more).anime-active a[target=_blank]::after { opacity: 1; } .sect--activity__main .activity-contents .activity-list > li:not(.more).anime-active figure::after { -webkit-transform: translate(100%, -50%); transform: translate(100%, -50%); } .sect--activity__main .activity-contents .activity-list > li:not(.more).anime-active figure figcaption { clip-path: inset(0 0% 0 0); } .sect--activity__main .activity-contents .activity-list > li:not(.more).colspan-2 { -ms-grid-column-span: 2; grid-column: span 2; } .sect--activity__main .activity-contents .activity-list > li:not(.more).rowspan-2 { -ms-grid-row-span: 2; grid-row: span 2; } .sect--activity__main .activity-contents .activity-list > li:not(.more).colspan-2.rowspan-2 { -ms-grid-column-span: 2; grid-column: span 2; -ms-grid-row-span: 2; grid-row: span 2; } .sect--activity__main .activity-contents .activity-list > li:not(.more).colspan-2.rowspan-2 .activity-list__text01, .sect--activity__main .activity-contents .activity-list > li:not(.more).colspan-2.rowspan-2 .activity-list__text02 { font-size: 1.25rem; font-weight: 700; } .sect--activity__main .activity-contents .activity-list > li:not(.more) a { display: block; width: 100%; height: 100%; } .sect--activity__main .activity-contents .activity-list > li:not(.more) a[target=_blank]::after { opacity: 0; content: ""; width: 35px; height: 35px; position: absolute; right: 0; top: 0; z-index: 2; background: #fff; border-radius: 50%; -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-transition-delay: 1s; transition-delay: 1s; } .sect--activity__main .activity-contents .activity-list > li:not(.more) a[target=_blank]::before { opacity: 0; content: ""; width: 22px; height: 22px; position: absolute; right: 6px; top: 6px; z-index: 3; -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-transition-delay: 1s; transition-delay: 1s; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents .activity-list > li:not(.more) a:hover > div { -webkit-transform: scale(1.1); transform: scale(1.1); } .sect--activity__main .activity-contents .activity-list > li:not(.more) a:hover figure picture img { -webkit-transform: scale(1.1); transform: scale(1.1); } } .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div strong { padding-bottom: 40px; font-size: 1.125rem; font-weight: 700; text-align: center; } @media (max-width: 768px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div strong { font-size: 0.9375rem; } } @media (max-width: 768px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div strong { font-size: min(3.4vw, 15px); } } @media (max-width: 375px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) a > div strong { font-size: 3.4vw; } } .sect--activity__main .activity-contents .activity-list > li:not(.more) figure { overflow: clip; position: relative; overflow: hidden; border-radius: 45px 45px 45px 0; display: block; width: 100%; height: 100%; } .sect--activity__main .activity-contents .activity-list > li:not(.more) figure picture { display: block; width: 100%; height: 100%; overflow: hidden; } .sect--activity__main .activity-contents .activity-list > li:not(.more) figure img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure img { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption { position: absolute; left: 0; bottom: 1em; width: 100%; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; clip-path: inset(0 100% 0 0); -webkit-transition: 0.8s all cubic-bezier(0.68, 0, 0.4, 0.99); transition: 0.8s all cubic-bezier(0.68, 0, 0.4, 0.99); -webkit-transition-delay: 1s; transition-delay: 1s; } .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { font-size: 1rem; font-weight: 700; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } @media (max-width: 1180px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { font-size: 0.9375rem; } } @media (max-width: 1080px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { font-size: 0.875rem; } } @media (max-width: 920px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { font-size: 1.5vw; } } @media (max-width: 768px) { .sect--activity__main .activity-contents .activity-list > li:not(.more) figure figcaption > * { font-size: min(3vw, 16px); } } .sect--activity__main .activity-contents .activity-list > li.more a { height: 100%; display: block; border-radius: 45px 45px 45px 0; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li.more a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--activity__main .activity-contents .activity-list > li.more a:hover { /* .corcle-01 { animation: rotate 2s linear infinite; } */ } .sect--activity__main .activity-contents .activity-list > li.more a:hover .corcle-01, .sect--activity__main .activity-contents .activity-list > li.more a:hover .corcle-02 { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } .sect--activity__main .activity-contents .activity-list > li.more a:hover .corcle-01 { -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); } } @-webkit-keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } .sect--activity__main .activity-contents .activity-list > li.more a p { letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 1.125rem; color: #0e8550; } .sect--activity__main .activity-contents .activity-list > li.more a p else { font-weight: 400; } .sect--activity__main .activity-contents .activity-list > li.more a img { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: auto; position: absolute; -webkit-transform-origin: center center 0; transform-origin: center center 0; } @media (min-width: 769px) { .sect--activity__main .activity-contents .activity-list > li.more a img { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } .sect--activity__main .activity-contents .activity-list > li.more a img.corcle-01 { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .sect--activity__main .activity-contents .activity-list__text01 { border-radius: 0 0.3em 0.3em 0; background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.1em 0.5em 0.1em 0.3em; } .sect--activity__main .activity-contents .activity-list__text01.bg-green { background: #0e8550; color: #fff; } .sect--activity__main .activity-contents .activity-list__text02 { border-radius: 0 0.3em 0.9em 0; background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.1em 0.5em 0.1em 0.3em; } .sect--activity__main .activity-contents .activity-list__text02.bg-green { background: #0e8550; color: #fff; } .sect--activity__main .activity-contents__cat { letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; margin-top: 40px; text-align: right; color: #fff; line-height: 1; font-size: 1.75rem; } .sect--activity__main .activity-contents__cat else { font-weight: 400; } @media (max-width: 768px) { .sect--activity__main .activity-contents__cat { font-size: 1rem; } } @media (max-width: 768px) { .sect--activity__main .activity-contents__cat { margin-top: 40px; } } .sect--news-topics { margin: 90px auto; max-width: 930px; max-width: 1280px; padding: 0 40px; } @media (min-width: 769px) { .sect--news-topics__header { -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 1; grid-column: 1; } } @media (max-width: 768px) { .sect--news-topics__header h2 img { max-height: 50px; height: auto; width: auto; max-width: 100%; display: block; margin: auto; } } @media (max-width: 920px) { .sect--news-topics { padding: 0 25px; } } @media (max-width: 768px) { .sect--news-topics { margin: auto; padding: 0 15px; } } @media (min-width: 769px) { .sect--news-topics__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 2; grid-column: 2; } } .sect--news-topics__nav .btn--style-green { margin: 0; } @media (min-width: 769px) { .sect--news-topics__main { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/span 2; -ms-grid-row: 2; grid-row: 2; } } @media (max-width: 768px) { .sect--news-topics__main { max-width: 560px; margin: auto; padding: 0 20px; } } .sect--news-topics .cont-news-topics { margin: 40px auto; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 60px 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 40px 60px; } .sect--news-topics .cont-news-topics > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .sect--news-topics .cont-news-topics > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } @media (max-width: 768px) { .sect--news-topics .cont-news-topics { -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; } .sect--news-topics .cont-news-topics > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } } @media (max-width: 920px) { .sect--news-topics .cont-news-topics { gap: 40px 40px; } } @media (max-width: 768px) { .sect--news-topics .cont-news-topics { gap: 50px; } } .sect--news-topics .cont-news-topics li a { display: block; position: relative; } .sect--news-topics .cont-news-topics li a[target=_blank]::after { content: ""; width: 35px; height: 35px; position: absolute; right: 4px; top: 4px; z-index: 12; background: #fff; border-radius: 50%; -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-transition-delay: 1s; transition-delay: 1s; } .sect--news-topics .cont-news-topics li a[target=_blank]::before { content: ""; width: 22px; height: 22px; position: absolute; right: 10px; top: 10px; z-index: 13; -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-transition-delay: 1s; transition-delay: 1s; } @media (min-width: 769px) { .sect--news-topics .cont-news-topics li a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .sect--news-topics .cont-news-topics li a:hover figcaption p { text-decoration: underline; } } .sect--news-topics .cont-news-topics li a figcaption { padding: 13px 0 0 0; } .sect--news-topics .cont-news-topics li a figcaption > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sect--news-topics .cont-news-topics li a figcaption > div time { font-size: 0.875rem; font-weight: 700; } .sect--news-topics .cont-news-topics li a figcaption p { font-size: 1rem; margin-top: 10px; line-height: 1.8; } @media (max-width: 768px) { .sect--news-topics .cont-news-topics li a figcaption p { font-size: 0.9375rem; } } .sect--news-topics .cont-news-topics__category figcaption time + div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; color: #fff; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 0.875rem; border-radius: 30px 0 30px 30px; } .sect--news-topics .cont-news-topics__category figcaption time + div else { font-weight: 400; } .sect--news-topics .cont-news-topics__category--people a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--news-topics .cont-news-topics__category--society a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--news-topics .cont-news-topics__category--earth a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .sect--news-topics .activity-cat { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #fff; overflow: clip; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 0.875rem; border-radius: 30px 0 30px 30px; line-height: 1.6; } .sect--news-topics .activity-cat else { font-weight: 400; } @media (max-width: 768px) { .sect--news-topics .activity-cat { font-size: 0.875rem; } } .sect--news-topics .activity-cat > li { height: 32px; min-width: 82px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; padding: 0 1em; border-radius: 0px 0 20px 0px; } @media (max-width: 768px) { .sect--news-topics .activity-cat > li { height: 28px; min-width: 70px; border-radius: 0px 0 16px 0px; } } .sect--news-topics .activity-cat > li:first-child { z-index: 3; } .sect--news-topics .activity-cat > li:nth-child(2) { padding-left: 1.8em; margin-left: -1.2em; z-index: 2; } .sect--news-topics .activity-cat > li:nth-child(3) { padding-left: 1.8em; margin-left: -1.2em; z-index: 1; } .sect--news-topics .activity-cat__people { background: #d66a00; } .sect--news-topics .activity-cat__society { background: #0070c7; } .sect--news-topics .activity-cat__earth { background: #0e8550; } .deco-wrap { pointer-events: none; z-index: 0; max-width: 1680px; margin: auto; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 1680px) { .deco-wrap { overflow-x: clip; } } .deco-wrap__inner { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 769px) and (max-width: 1080px) { .deco-wrap__inner { width: 110%; overflow-x: clip; } } #home .deco-wrap__01 { top: 55%; height: 100%; } @media (max-width: 768px) { #home .deco-wrap__01 { top: 45%; } } .deco { position: absolute; background: #ccd202; } .deco--01 { width: 160px; height: 125px; right: 20px; top: -10%; border-radius: 45px 45px 45px 0; opacity: 0.3; } @media (max-width: 768px) { .deco--01 { border-radius: 15px 15px 15px 0; top: 10%; width: 73px; height: 45px; right: -25px; opacity: 0.2; } } .deco--02 { width: 160px; height: 125px; left: -3%; top: 0%; border-radius: 35px 0 35px 35px; opacity: 0.1; } @media (max-width: 768px) { .deco--02 { border-radius: 15px 15px 15px 0; top: 22%; width: 73px; height: 45px; right: -25px; opacity: 0.2; } } .deco--03 { width: 74px; height: 50px; right: 2%; top: 20%; border-radius: 16px 16px 16px 0px; opacity: 0.2; } @media (max-width: 768px) { .deco--03 { display: none; } } .deco--04 { width: 74px; height: 50px; left: 3%; top: 40%; border-radius: 16px 16px 16px 0px; opacity: 0.2; } @media (max-width: 768px) { .deco--04 { display: none; } } .deco--05 { width: 70px; height: 45px; left: 5%; top: 55%; border-radius: 16px 16px 16px 0px; opacity: 0.4; } @media (max-width: 768px) { .deco--05 { display: none; } } .deco--06 { width: 52px; height: 35px; left: 2%; top: 62%; border-radius: 16px 16px 16px 0px; opacity: 0.3; } @media (max-width: 768px) { .deco--06 { display: none; } } .deco--07 { width: 61px; height: 42px; right: 2%; top: 52%; border-radius: 16px 16px 16px 0px; opacity: 0.2; } @media (max-width: 768px) { .deco--07 { display: none; } } .deco--08 { width: 82px; height: 55px; right: 7%; top: 60%; border-radius: 16px 16px 16px 0px; opacity: 0.4; } @media (max-width: 768px) { .deco--08 { display: none; } } .deco--09 { width: 65px; height: 45px; left: 3%; top: 15%; border-radius: 12px 12px 12px 0; opacity: 0.3; } @media (max-width: 768px) { .deco--09 { display: none; } } .deco--10 { width: 130px; height: 75px; right: -7%; top: 55%; border-radius: 22px 22px 22px 0; opacity: 0.2; } @media (max-width: 768px) { .deco--10 { width: 80px; height: 70px; right: -5%; top: 35%; border-radius: 12px 12px 12px 0; opacity: 0.2; } } .deco--11 { width: 40px; height: 30px; left: -1%; top: 25%; border-radius: 8px 8px 8px 0; opacity: 0.8; } @media (max-width: 768px) { .deco--11 { display: none; } } .deco--12 { width: 95px; height: 75px; left: -1%; top: 60%; border-radius: 22px 22px 22px 0; opacity: 0.3; } @media (max-width: 768px) { .deco--12 { width: 45px; height: 45px; left: -1%; top: 100%; border-radius: 9px 9px 9px 0; opacity: 0.2; } } .deco--13 { width: 100px; height: 75px; right: 1%; top: 80%; border-radius: 22px 22px 22px 0; opacity: 0.2; } @media (max-width: 768px) { .deco--13 { width: 50px; height: 35px; right: -4%; top: 30%; border-radius: 10px 10px 10px 0; opacity: 0.2; } } .deco--14 { width: 110px; height: 85px; left: -3%; top: 10%; border-radius: 35px 0 35px 35px; opacity: 0.1; } @media (max-width: 768px) { .deco--14 { display: none; } } .page-header { overflow-x: clip; height: 400px; position: relative; width: 100%; margin-top: 62px; } @media (max-width: 768px) { .page-header { margin-top: 85px; height: 295px; } } .page-header.active .title-text--01 img { opacity: 1; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-filter: blur(0px); filter: blur(0px); } .page-header.active .title-text--01 img.txt--y { -webkit-transform: translateX(0%) translateY(1.5em); transform: translateX(0%) translateY(1.5em); } .page-header.active2 em { opacity: 1; } .page-header.active2 em span { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-filter: blur(0px); filter: blur(0px); } .page-header.active2 .page-header__wave { top: 0%; opacity: 1; } .page-header__title { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20; } .page-header__title h1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .page-header__title h1 .title-text--01 { -webkit-transform: scale(0.75); transform: scale(0.75); gap: 0.6em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-origin: center; transform-origin: center; } .page-header__title h1 .title-text--01 img { display: block; opacity: 0; -webkit-transform: translateX(60px); transform: translateX(60px); -webkit-transition: 1s all ease; transition: 1s all ease; -webkit-filter: blur(10px); filter: blur(10px); } .page-header__title h1 .title-text--01 img.txt--y { -webkit-transform: translateX(60px) translateY(1.5em); transform: translateX(60px) translateY(1.5em); } .page-header__title h1 em { opacity: 0; text-align: center; font-size: 1.125rem; font-weight: 700; margin-top: 15px; } @media (max-width: 768px) { .page-header__title h1 em { margin-top: 10px; } } .page-header__title h1 em > span { display: inline-block; -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: 1s all ease; transition: 1s all ease; opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); } .page-header__background { opacity: 1; pointer-events: none; position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: calc(100% - 100px); overflow-x: clip; } @media (max-width: 768px) { .page-header__background { height: calc(100% - 25px); } } .page-header__background .green-box-container { opacity: 1; width: 100%; height: 100%; } .page-header__wave { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; left: 0; top: 10%; -webkit-transform: rotate(6deg) scale(1.03); transform: rotate(6deg) scale(1.03); -webkit-transition: 3s all ease; transition: 3s all ease; opacity: 0; -webkit-animation: waveRotate 10s ease-in-out infinite; animation: waveRotate 10s ease-in-out infinite; } @media (max-width: 768px) { .page-header__wave { top: 0%; } } .page-header--post .page-header__title { left: 50%; top: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20; max-width: 1000px; width: 100%; padding: 0 40px; } @media (max-width: 768px) { .page-header--post .page-header__title { padding: 0 20px; top: 32%; } } .page-header--post .page-header__title em { display: block; font-style: normal; font-weight: 700; text-align: left; margin-top: 15px; } @media (max-width: 768px) { .page-header--post .page-header__title em { margin-top: 10px; font-size: 1rem; } } .page-header--post .page-header__title .title-text--01 { -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: center bottom 0; transform-origin: center bottom 0; width: 100%; } @media (max-width: 768px) { .page-header--post .page-header__title .title-text--01 { -webkit-transform-origin: center bottom 0; transform-origin: center bottom 0; -webkit-transform: scale(0.35); transform: scale(0.35); } } .page-header--post .page-header__title .title-text--01 .m--left { margin-left: 20px; } .page-header--post .page-header__nav { bottom: 100px; } @media (max-width: 768px) { .page-header--post { height: 360px; } } .page-header__nav { max-width: 1300px; width: 100%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; } .page-header #btn-toggle-animation { width: 40px; height: 40px; border: solid 2px #0e8550; border-radius: 50%; position: relative; background: #fff; position: absolute; right: 20px; bottom: 0; z-index: 10; } @media (max-width: 768px) { .page-header #btn-toggle-animation { right: 40px; bottom: 20px; } } @media (min-width: 769px) { .page-header #btn-toggle-animation { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .page-header #btn-toggle-animation:hover { background: #0e8550; } } .page-header #btn-toggle-animation.active::after { position: absolute; left: 55%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #2e8b4e; border-right: 0; } .page-header #btn-toggle-animation.active span { display: none; } .page-header #btn-toggle-animation span { display: block; position: relative; display: block; } .page-header #btn-toggle-animation span::after { position: absolute; left: 40%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 4px; height: 16px; background: #000; } .page-header #btn-toggle-animation span::before { position: absolute; left: 60%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); content: ""; width: 4px; height: 16px; background: #000; } @media (min-width: 769px) { .page-header #btn-toggle-animation { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .page-header #btn-toggle-animation:hover span::after, .page-header #btn-toggle-animation:hover span::before { background: #fff; } .page-header #btn-toggle-animation:hover::after { border-left: 10px solid #fff; } } @keyframes waveRotate { 0% { -webkit-transform: rotate(6deg) scale(1.03); transform: rotate(6deg) scale(1.03); } 50% { -webkit-transform: rotate(-6deg) scale(1.03); transform: rotate(-6deg) scale(1.03); } 100% { -webkit-transform: rotate(6deg) scale(1.03); transform: rotate(6deg) scale(1.03); } } #page .site-main { padding-bottom: 0px; } #page .sect { position: relative; z-index: 2; max-width: 1480px; margin: 110px auto; padding: 0 100px; } @media (max-width: 1680px) { #page .sect { overflow-x: clip; } } #page .sect--thoughts { position: relative; margin-top: 0 !important; } @media (max-width: 1280px) { #page .sect { padding: 0 40px; } } @media (max-width: 768px) { #page .sect { margin: 100px auto; padding: 0 15px; } } #page .sect__header { margin-bottom: 70px; } @media (max-width: 768px) { #page .sect__header { margin-bottom: 50px; } } #page .sect__header > * { padding-left: 38px; position: relative; font-size: 1.125rem; font-weight: 700; display: block; } @media (max-width: 768px) { #page .sect__header > * { font-size: 1.125rem; } } #page .sect__header > * > span { border-radius: 20px 0 20px 20px; width: 28px; height: 1.1em; background: -webkit-gradient(linear, left top, right top, from(rgb(14, 133, 80)), color-stop(10%, rgb(14, 133, 80)), to(rgb(203, 209, 3))); background: linear-gradient(90deg, rgb(14, 133, 80) 0%, rgb(14, 133, 80) 10%, rgb(203, 209, 3) 100%); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-40%); transform: translateY(-40%); } #page .sect--sustainability { position: relative; } #page .sect--sustainability__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #page .sect--sustainability__title h3 { font-size: 0.875rem; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } @media (max-width: 768px) { #page .sect--sustainability__title h3 { font-size: 0.875rem; } } @media (max-width: 768px) { #page .sect--sustainability__title h3 { padding: 0 20px; } } #page .sect--sustainability__title h3 img { height: auto; } @media (max-width: 768px) { #page .sect--sustainability__title h3 img { width: 100%; } } #page .sect--sustainability__read { margin: 40px auto; } #page .sect--sustainability__read p { text-align: center; } @media (max-width: 768px) { #page .sect--sustainability__read p { font-size: 0.9375rem; } } @media (max-width: 768px) { #page .sect--sustainability__inner { max-width: 560px; margin: auto; } } #page .sect--sustainability__chart { max-width: 1080px; margin: 60px auto 0; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 10px 1.5fr; grid-template-columns: 1fr 1.5fr; -ms-grid-rows: 1fr; grid-template-rows: 1fr; gap: 10px; } #page .sect--sustainability__chart > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } #page .sect--sustainability__chart > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 3; } @media (max-width: 768px) { #page .sect--sustainability__chart { display: block; } } @media (max-width: 768px) { #page .sect--sustainability__chart .chart-image { width: calc(100% - 40px); margin: auto auto 20px; } } #page .sect--sustainability__chart .chart-text { 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-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 768px) { #page .sect--sustainability__chart .chart-text { max-width: 560px; margin: auto; } } #page .sect--sustainability__chart .chart-text > div { border-bottom: solid 2px #1963a5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 769px) { #page .sect--sustainability__chart .chart-text > div > span { width: 2px; height: 108%; background: #1963a5; position: absolute; left: -1px; top: -8%; -webkit-transform: rotate(-27.5deg); transform: rotate(-27.5deg); -webkit-transform-origin: center bottom 0; transform-origin: center bottom 0; } #page .sect--sustainability__chart .chart-text > div:nth-child(1) { -webkit-box-flex: 0.85; -ms-flex: 0.85; flex: 0.85; -webkit-transform: translateX(-23.5%); transform: translateX(-23.5%); } #page .sect--sustainability__chart .chart-text > div:nth-child(2) { -webkit-box-flex: 1.02; -ms-flex: 1.02; flex: 1.02; -webkit-transform: translateX(-11.7%); transform: translateX(-11.7%); } #page .sect--sustainability__chart .chart-text > div:nth-child(3) { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: translateX(0%); transform: translateX(0%); } } #page .sect--sustainability__chart .chart-text > div:last-child { border-bottom: none; } #page .sect--sustainability__chart .chart-text > div dl { width: 100%; } @media (min-width: 769px) { #page .sect--sustainability__chart .chart-text > div dl { padding-left: 20px; } } @media (max-width: 768px) { #page .sect--sustainability__chart .chart-text > div dl { padding: 20px 0; } } @media (max-width: 1280px) { #page .sect--sustainability__chart .chart-text > div dl dt, #page .sect--sustainability__chart .chart-text > div dl dd { font-size: 1.4vw; } } #page .sect--sustainability__chart .chart-text > div dl dt { color: #1963a5; font-weight: 700; } @media (max-width: 768px) { #page .sect--sustainability__chart .chart-text > div dl dt { font-size: 1.3125rem; } } @media (max-width: 768px) and (max-width: 375px) { #page .sect--sustainability__chart .chart-text > div dl dt { font-size: 1.125rem; } } @media (max-width: 768px) { #page .sect--sustainability__chart .chart-text > div dl dd { font-size: 1rem; } } @media (max-width: 768px) and (max-width: 375px) { #page .sect--sustainability__chart .chart-text > div dl dd { font-size: 0.9375rem; } } #page .sect--policy .sect__header { padding: 0 15px; } #page .sect--policy .sect--about__header { padding: 0 15px; } @media (max-width: 768px) { #page .sect--policy { padding: 0; } } #page .sect--policy .sect--about__text { padding: 0 30px; } #page .sect--sdgs__main { text-align: center; } @media (max-width: 768px) { #page .sect--sdgs__main { max-width: 560px; margin: auto; } } #page .sect--sdgs__main img { display: block; max-width: 800px; margin: 50px auto; } @media (max-width: 768px) { #page .sect--sdgs__main img { max-width: 560px; margin: 20px auto; } } @media (max-width: 768px) { #page .sect--sdgs__main p { text-align: left; } } #page .sect--activity { max-width: 100%; padding: 0; } #page .sect--activity__main { border-radius: 45px; max-width: 100%; padding: 60px 0 30px; background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 182, 135)), to(rgb(203, 209, 3))); background: linear-gradient(180deg, rgb(96, 182, 135) 0%, rgb(203, 209, 3) 100%); } @media (max-width: 768px) { #page .sect--activity__main { border-radius: 15px; } } #page .sect--activity .activity-list > li:not(.more) { border-radius: 45px 45px 45px 0; position: relative; overflow: hidden; position: relative; } #page .sect--activity .activity-list > li:not(.more).colspan-2 { -ms-grid-column-span: 2; grid-column: span 2; } #page .sect--activity .activity-list > li:not(.more).rowspan-2 { -ms-grid-row-span: 2; grid-row: span 2; } #page .sect--activity .activity-list > li:not(.more).colspan-2.rowspan-2 { -ms-grid-column-span: 2; grid-column: span 2; -ms-grid-row-span: 2; grid-row: span 2; } #page .sect--activity .activity-list > li:not(.more).colspan-2.rowspan-2 .activity-list__text01, #page .sect--activity .activity-list > li:not(.more).colspan-2.rowspan-2 .activity-list__text02 { font-size: 1.25rem; font-weight: 700; } #page .sect--activity .activity-list > li:not(.more) a { display: block; width: 100%; height: 100%; } @media (min-width: 769px) { #page .sect--activity .activity-list > li:not(.more) a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } #page .sect--activity .activity-list > li:not(.more) a:hover figure picture img { -webkit-transform: scale(1.1); transform: scale(1.1); } } #page .sect--activity .activity-list > li:not(.more) figure { position: relative; overflow: hidden; border-radius: 45px 45px 45px 0; display: block; width: 100%; height: 100%; } #page .sect--activity .activity-list > li:not(.more) figure picture { display: block; width: 100%; height: 100%; overflow: hidden; } #page .sect--activity .activity-list > li:not(.more) figure img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 769px) { #page .sect--activity .activity-list > li:not(.more) figure img { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } #page .sect--activity .activity-list > li:not(.more) figure figcaption { position: absolute; left: 0; bottom: 1em; width: 100%; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5px; clip-path: inset(0 100% 0 0); -webkit-transition: 0.8s all cubic-bezier(0.68, 0, 0.4, 0.99); transition: 0.8s all cubic-bezier(0.68, 0, 0.4, 0.99); -webkit-transition-delay: 1s; transition-delay: 1s; } #page .sect--activity .activity-list > li:not(.more) figure figcaption > * { font-size: 1rem; font-weight: 700; } @media (max-width: 1180px) { #page .sect--activity .activity-list > li:not(.more) figure figcaption > * { font-size: 0.9375rem; } } @media (max-width: 1080px) { #page .sect--activity .activity-list > li:not(.more) figure figcaption > * { font-size: 0.875rem; } } @media (max-width: 920px) { #page .sect--activity .activity-list > li:not(.more) figure figcaption > * { font-size: 1.5vw; } } @media (max-width: 768px) { #page .sect--activity .activity-list > li:not(.more) figure figcaption > * { font-size: min(3vw, 16px); } } #page .sect--activity .activity-list > li.more a { height: 100%; display: block; border-radius: 45px 45px 45px 0; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } @media (min-width: 769px) { #page .sect--activity .activity-list > li.more a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } #page .sect--activity .activity-list > li.more a:hover { /* .corcle-01 { animation: rotate 2s linear infinite; } */ } #page .sect--activity .activity-list > li.more a:hover .corcle-01, #page .sect--activity .activity-list > li.more a:hover .corcle-02 { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } #page .sect--activity .activity-list > li.more a:hover .corcle-01 { -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } #page .sect--activity .activity-list > li.more a p { letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 1.125rem; color: #0e8550; } #page .sect--activity .activity-list > li.more a p else { font-weight: 400; } #page .sect--activity .activity-list > li.more a img { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: auto; position: absolute; -webkit-transform-origin: center center 0; transform-origin: center center 0; } @media (min-width: 769px) { #page .sect--activity .activity-list > li.more a img { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } #page .sect--activity .activity-list > li.more a img.corcle-01 { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } #page .sect--activity .activity-list__text01 { border-radius: 0 0.3em 0.3em 0; background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.1em 0.5em 0.1em 0.3em; } #page .sect--activity .activity-list__text01.bg-green { background: #0e8550; color: #fff; } #page .sect--activity .activity-list__text02 { border-radius: 0 0.3em 0.9em 0; background: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0.1em 0.5em 0.1em 0.3em; } #page .sect--activity .activity-list__text02.bg-green { background: #0e8550; color: #fff; } #page .sect--activity .activity-list li { width: 100%; } #page .sect--activity .activity-list li.item-even { -webkit-transform: translateY(-26px); transform: translateY(-26px); } #page .sect--activity .activity-list li::after { display: none; } #page .sect--activity .activity-list li figcaption { clip-path: inset(0 0 0 0) !important; } #page .sect--post { max-width: 1000px; padding: 0 40px; margin: -60px auto 0; position: relative; z-index: 10; margin-bottom: 175px; } @media (max-width: 768px) { #page .sect--post { padding: 0 0px; margin: -100px auto 0; } } #page .sect--post__category { 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; } #page .sect--post__category .sect--post__icon { width: 46px; height: 46px; background: #ccc; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { #page .sect--post__category .sect--post__icon { width: 11vw; height: 11vw; } } #page .sect--post__category .sect--post__icon img { width: 60%; height: auto; } #page .sect--post__category p { margin: 0; line-height: 1.2; letter-spacing: 0.05em; font-family: "Lato", sans-serif; font-weight: 500; font-size: 1.25rem; } #page .sect--post__category p else { font-weight: 400; } @media (max-width: 768px) { #page .sect--post__category p { font-size: 4.5vw; } } #page .sect--post__category--people .sect--post__icon { background: #d66a00; } #page .sect--post__category--people p { color: #d66a00; } #page .sect--post__category--society .sect--post__icon { background: #0070c7; } #page .sect--post__category--society p { color: #0070c7; } #page .sect--post__category--earth .sect--post__icon { background: #0e8550; } #page .sect--post__category--earth p { color: #0e8550; } #page .sect--post__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; gap: 30px; } @media (max-width: 768px) { #page .sect--post__header { padding: 0 20px; gap: 4vw; } } #page .sect--post__header h2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 1.875rem; font-weight: 700; } @media (max-width: 768px) { #page .sect--post__header h2 { font-size: 1.75rem; } } @media (max-width: 768px) { #page .sect--post__header h2 { font-size: 6.4vw; } } #page .sect--post__header h2 span { font-size: 1rem; font-weight: 700; } @media (max-width: 768px) { #page .sect--post__header h2 span { font-size: 0.875rem; } } @media (max-width: 768px) { #page .sect--post__header h2 span { margin-top: 0.1em; display: block; font-size: 3.5vw; } } @media (max-width: 768px) { #page .sect--post { margin-bottom: 90px; } } #page .sect--post .post-contents { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; gap: 75px; } #page .sect--post .post-contents > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } @media (max-width: 768px) { #page .sect--post .post-contents { gap: 70px; } } #page .sect--post .post-contents__box { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; gap: 45px; } #page .sect--post .post-contents__box > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } @media (max-width: 768px) { #page .sect--post .post-contents__box { gap: 40px; } } #page .sect--post .post-contents__title { margin-bottom: 22px; } @media (max-width: 768px) { #page .sect--post .post-contents__title { padding: 0 20px; margin-bottom: 18px; max-width: 560px; margin-left: auto; margin-right: auto; } } #page .sect--post .post-contents__title > strong { display: block; margin-top: 20px; font-size: 1.5rem; font-weight: 400; } @media (max-width: 768px) { #page .sect--post .post-contents__title > strong { font-size: 1.25rem; } } @media (max-width: 768px) { #page .sect--post .post-contents__title > strong { margin-top: 16px; } } #page .sect--post .post-contents__title > em { font-style: normal; display: block; padding-left: 38px; position: relative; font-size: 1.125rem; font-weight: 700; } @media (max-width: 768px) { #page .sect--post .post-contents__title > em { font-size: 1.125rem; } } #page .sect--post .post-contents__title > em > span { border-radius: 20px 0 20px 20px; width: 28px; height: 1.1em; background: -webkit-gradient(linear, left top, right top, from(rgb(14, 133, 80)), color-stop(10%, rgb(14, 133, 80)), to(rgb(203, 209, 3))); background: linear-gradient(90deg, rgb(14, 133, 80) 0%, rgb(14, 133, 80) 10%, rgb(203, 209, 3) 100%); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-40%); transform: translateY(-40%); } #page .sect--post .post-contents__eye-catch img { width: 100%; height: auto; } #page .sect--post .post-contents__image img { width: 100%; height: auto; } @media (max-width: 768px) { #page .sect--post .post-contents__image img { padding: 0 20px; } } #page .sect--post .post-contents__text { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto; grid-template-rows: auto; gap: 25px; } #page .sect--post .post-contents__text > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } @media (max-width: 768px) { #page .sect--post .post-contents__text { max-width: 560px; margin-left: auto; margin-right: auto; padding: 0 20px; } } @media (max-width: 768px) { #page .deco--04 { display: none; } } #page .deco-wrap__01 { top: 23%; height: 850px; } @media (max-width: 768px) { #page .deco-wrap__01 { top: 26%; height: 1200px; } } #page .deco-wrap__02 { top: 5%; height: 500px; } @media (max-width: 768px) { #page .deco-wrap__02 { top: 6%; height: 520px; } } #page .deco-wrap__03 { top: 52%; height: 1230px; } #page .message-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: 0.6s all ease; transition: 0.6s all ease; height: auto; opacity: 1; pointer-events: all; } .breadcrumbs { position: absolute; left: 20px; top: 70px; z-index: 50; } @media (max-width: 768px) { .breadcrumbs { top: 90px; } } .breadcrumbs ol { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .breadcrumbs ol li { position: relative; padding-right: 1.3em; } .breadcrumbs ol li::after { position: absolute; right: 0.2em; top: 55%; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: ""; width: 0.8em; height: 0.8em; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .breadcrumbs ol li:last-child::after { display: none; } @media (min-width: 769px) { .breadcrumbs ol li a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .breadcrumbs ol li a:hover { text-decoration: underline; } } .breadcrumbs ol li * { font-size: 0.875rem; } .ff--en { letter-spacing: 0.05em; font-family: "Lato", sans-serif; } .ff--en else { font-weight: 400; } .btn--style-green { background: #0e8550; height: 56px; padding: 0 110px 0 24px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; position: relative; overflow: hidden; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media (min-width: 769px) { .btn--style-green { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .btn--style-green:hover .icon--arrow::after { right: 15px; } } .btn--style-green > div { font-size: 1.3125rem; color: #fff; position: relative; z-index: 20; } .btn--style-green > div.fs-16 { font-size: 1rem; } .btn--style-green .icon--arrow::after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 23px; height: 16px; } @media (min-width: 769px) { .btn--style-green .icon--arrow::after { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } } .btn--mw350 { width: 350px !important; padding: 0 50px 0 50px !important; } @media (max-width: 768px) { .btn--mw350 { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } } .btn--mw180 { width: 180px !important; padding: 0 70px 0 27px !important; } @media (max-width: 768px) { .btn--mw180 { width: 218px !important; } } .btn--style-gradation { background: #0e8550; height: 56px; padding: 0 70px 0 24px; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; position: relative; overflow: hidden; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media (max-width: 768px) { .btn--style-gradation { padding: 0 70px 0 30px; min-width: 216px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (min-width: 769px) { .btn--style-gradation { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .btn--style-gradation:hover .btn--style-gradation__icon { width: 100%; } .btn--style-gradation:hover .icon--arrow::after { right: 15px; } } .btn--style-gradation > strong { font-size: 1.3125rem; color: #fff; position: relative; z-index: 20; display: block; text-align: center; line-height: 1.3; } .btn--style-gradation > strong.fs-16 { font-size: 1rem; } .btn--style-gradation .icon--plus { width: 22px; height: 22px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; } .btn--style-gradation .icon--plus::before { content: ""; width: 100%; height: 4px; background: #fff; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; border-radius: 10px; } .btn--style-gradation .icon--plus::after { -webkit-transition: 0.4s all ease; transition: 0.4s all ease; content: ""; width: 4px; height: 100%; background: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 10px; } .btn--style-gradation .icon--arrow::after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 23px; height: 16px; } @media (min-width: 769px) { .btn--style-gradation .icon--arrow::after { -webkit-transition: 0.3s all ease; transition: 0.3s all ease; } } .btn--style-gradation__icon { -webkit-transition: 0.6s all ease; transition: 0.6s all ease; display: block; width: 90px; height: 100%; position: absolute; right: 0; bottom: 0; z-index: 10; background: -webkit-gradient(linear, left top, right top, from(rgb(14, 133, 80)), to(rgb(203, 209, 3))); background: linear-gradient(90deg, rgb(14, 133, 80) 0%, rgb(203, 209, 3) 100%); } .splide--type01 .splide__track { overflow-y: visible; overflow-x: clip !important; } .splide--type01 .splide__nav { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: auto; margin-top: 20px; } @media (max-width: 768px) { .splide--type01 .splide__nav { padding: 0 20px; } } .splide--type01 .splide__arrow { -webkit-transform: translateY(0%) !important; transform: translateY(0%) !important; top: 0 !important; height: 40px !important; width: 40px !important; position: relative !important; background: #fff; opacity: 1 !important; } @media (min-width: 769px) { .splide--type01 .splide__arrow { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } .splide--type01 .splide__arrow:hover { background: #0e8550; } .splide--type01 .splide__arrow:hover::after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } } .splide--type01 .splide__arrow::after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; width: 46%; height: 36%; font-size: 2.5rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .splide--type01 .splide__arrow--next { right: 0 !important; left: 0 !important; } .splide--type01 .splide__arrow--prev { right: 0 !important; left: 0 !important; } .splide--type01 .splide__arrow--prev::after { -webkit-transform: translate(-50%, -50%) scaleX(-1); transform: translate(-50%, -50%) scaleX(-1); } .splide--type01 .splide__slide { border-radius: 0 !important; } .splide--type01 .splide__slide a[target=_blank] { position: relative; } .splide--type01 .splide__slide a[target=_blank]::after { content: ""; width: 35px; height: 35px; right: 0px; top: 0px; position: absolute; z-index: 12; background: #fff; border-radius: 50%; } @media (max-width: 960px) { .splide--type01 .splide__slide a[target=_blank]::after { width: 36px; height: 36px; right: 0px; top: 0px; } } .splide--type01 .splide__slide a[target=_blank]::before { content: ""; width: 22px; height: 22px; right: 6px; top: 6px; position: absolute; z-index: 13; } .splide--type01 .splide__slide.cat-people a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .splide--type01 .splide__slide.cat-society a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .splide--type01 .splide__slide.cat-earth a[target=_blank]::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-position: center; background-repeat: no-repeat; } .splide--type01 .splide__arrows { margin-top: 18px; gap: 30px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .splide--type01 .splide__arrows { gap: 40px; } } .splide--type01 .splide__pagination { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; bottom: 0 !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative !important; gap: 4px; width: fit-content; position: relative !important; } .splide--type01 .splide__pagination li { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; height: 8px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .splide--type01 .splide__pagination li button { -webkit-transition: all 1s ease; transition: all 1s ease; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.4); position: relative; } .splide--type01 .splide__pagination li button.is-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1; width: 25px; background: rgb(255, 255, 255); overflow: hidden; } .splide__pagination li button.is-active { background: rgba(255, 255, 255, 0.4); width: 36px; } .splide__pagination li button.is-active span { position: absolute; left: 0; top: 0; background: #fff; width: 100%; height: 100%; border-radius: 10px; z-index: 2; -webkit-transform: translateX(-100%); transform: translateX(-100%); }