@charset "UTF-8";
/* common parts ---------------------------------------*/
html:has(.js-lsPopBox.show) {
overflow: hidden;
}
@media screen and (max-width: 991px) {
body.home .site-header {
background-color: transparent;
}
body.home .site-header-logo {
background: url(../img/top/header_logo.png) center/cover no-repeat;
}
body.home .site-header-logo img {
opacity: 0;
}
body.home .site-header-teiIcon {
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home #vk-mobile-nav-menu-btn {
background: transparent url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home #vk-mobile-nav-menu-btn.menu-open {
background: #fff url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home.header_scrolled .site-header {
background-color: #fff;
}
body.home.header_scrolled .site-header-logo {
background: none;
}
body.home.header_scrolled .site-header-logo img {
opacity: 1;
}
body.home.header_scrolled .site-header-teiIcon {
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home.header_scrolled #vk-mobile-nav-menu-btn {
background: transparent url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home.header_scrolled #vk-mobile-nav-menu-btn.menu-open {
background: #fff url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
}
body.home.header_scrolled .lightning_swiper {
margin-top: 0 !important;
}
}
@media screen and (min-width: 992px) {
body.home .site-header {
transition: 0s;
}
body.home .site-footer-cta {
transition: opacity 0.5s ease;
}
body.home:not(.header_scrolled) .site-header {
width: 305px;
max-width: 305px;
height: 100vh;
min-height: 800px;
padding: 30px 0;
position: absolute;
transition: 0s;
}
body.home:not(.header_scrolled) .site-header-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-gap: 20px;
}
body.home:not(.header_scrolled) .site-header-container::before, body.home:not(.header_scrolled) .site-header-container::after {
display: none;
}
body.home:not(.header_scrolled) .site-header-logo {
width: 150px !important;
margin: 0 0 35px !important;
}
body.home:not(.header_scrolled) .site-header-logo img {
width: 100%;
max-height: 100%;
}
body.home:not(.header_scrolled) .site-header .global-nav {
width: 100%;
height: auto;
margin: 0;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu {
width: 100%;
border: 0;
display: grid;
grid-gap: 24px;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item {
width: 100%;
padding: 0 calc((100% - 225px) / 2) 6px;
font-size: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item::after {
content: "";
width: 100%;
max-width: 225px;
height: 1px;
background-color: rgba(0, 159, 45, 0.55);
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scale(0, 1);
transition: 0.5s;
transform-origin: left;
pointer-events: none;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item:has(.sub-menu)::before {
content: "";
width: 10px;
height: 20px;
background-color: transparent;
clip-path: polygon(0 50%, 100% 100%, 100% 0);
display: block;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
transition: 0.5s;
pointer-events: none;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item:has(.sub-menu):hover::before {
background-color: #488171;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item:hover::after {
transform: translateX(-50%) scale(1, 1);
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item:hover .sub-menu {
width: auto;
min-width: 240px;
padding: 30px;
z-index: 1;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item a {
padding: 0;
border: 0;
text-align: left;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu-item:first-child .sub-menu {
top: 0;
transform: translate(0, 0);
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .global-nav-name {
font-size: 100%;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .acc-btn {
width: 20px;
height: 18px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
border: 0 !important;
display: block;
position: relative;
top: 1px;
right: 0;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu {
width: 0;
min-width: 0;
max-height: 100vh;
padding: 30px 0;
grid-gap: 14px;
top: 50%;
bottom: auto;
left: 285px;
transform: translate(0, -50%);
transform-origin: left;
overflow: hidden !important;
transition: all 0.3s linear;
pointer-events: auto;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu::before {
display: none;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item::before, body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item::after {
display: none;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item a {
padding: 0 0 5px;
font-size: 16px;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item:has(.sub-menu) {
flex-direction: column;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item:has(.sub-menu) .acc-btn {
display: none;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item .sub-menu {
padding: 20px;
margin-top: 10px;
background-color: #fff;
opacity: 1;
position: relative;
inset: 0;
transform: translate(0, 0);
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item .sub-menu .menu-item {
padding-bottom: 0;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item .sub-menu .menu-item a {
padding-bottom: 0;
color: var(--text);
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item .sub-menu .menu-item a::after {
border: 1px solid #488171;
}
body.home:not(.header_scrolled) .site-header .global-nav .menu .sub-menu .menu-item .sub-menu .menu-item a::before {
background-color: #488171;
}
body.home:not(.header_scrolled) .site-header .global-nav .sub-menu .menu-item {
padding: 0 0 5px;
}
body.home:not(.header_scrolled) .site-header__bnrList {
max-width: 225px;
margin-top: 15px;
order: 1;
}
body.home:not(.header_scrolled) .site-header__bnrList .listItem::after {
display: none;
}
body.home:not(.header_scrolled) .site-header-afterBlk {
order: 1;
}
body.home:not(.header_scrolled) .site-header-afterBlk .telInfo {
display: none;
}
body.home:not(.header_scrolled) .site-header .snsList {
align-items: center;
justify-content: center;
grid-gap: 5px;
order: 1;
}
body.home:not(.header_scrolled) .site-header .snsList li {
width: 20px;
margin: 0;
}
body.home:not(.header_scrolled) .site-footer-cta {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
body.home.header_scrolled .site-header__bnrList {
display: none !important;
}
body.home.header_scrolled .site-header + .lightning_swiper {
margin-top: 0 !important;
}
}
@media screen and (min-width: 1440px) {
body.home-container {
padding-bottom: 50px;
}
}
.site-body {
padding: 0;
margin-top: 0;
}
.site-body-container {
width: 100%;
max-width: 100%;
}
.main-section {
margin-bottom: 0;
}
.secTtl {
color: #1F5C2C;
font-size: 112.5%;
font-weight: 700;
letter-spacing: 0.05em;
display: flex;
align-items: center;
grid-gap: 10px;
}
.secTtl::before {
content: "";
width: 30px;
height: 1px;
background-color: #1F5C2C;
display: block;
}
.secTtl--white {
color: #fff;
}
.secTtl--white::before {
background-color: #fff;
}
/* MV ------------------------------------------------*/
.site-header + .lightning_swiper {
width: 100%;
height: 100vh;
}
.site-header + .lightning_swiper .swiper-pagination, .site-header + .lightning_swiper .swiper-button-next, .site-header + .lightning_swiper .swiper-button-prev {
display: none;
}
.site-header + .lightning_swiper .swiper-slide img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.site-header + .lightning_swiper .swiper-slide:first-child.swiper-slide-active img {
animation-delay: -2s;
}
.site-header + .lightning_swiper .swiper-slide-active img, .site-header + .lightning_swiper .swiper-slide-prev img {
animation: mv_animation_current 10s linear;
}
@keyframes mv_animation_current {
from {
transform: scale(1.1) translateX(0);
}
to {
transform: scale(1.1) translateX(5%);
}
}
.site-header + .lightning_swiper .overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
mix-blend-mode: multiply;
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 2;
pointer-events: none;
}
.site-header + .lightning_swiper .scroll {
width: 1px;
height: 120px;
background: linear-gradient(180deg, transparent 4em, rgba(255, 255, 255, 0.5) 4em);
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 1em;
position: absolute;
top: 50%;
right: 20px;
z-index: 2;
transform: translateY(-50%);
}
.site-header + .lightning_swiper .scroll::before {
content: "scroll";
color: #fff;
font-weight: 500;
font-family: "Times New Roman", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
writing-mode: vertical-lr;
flex-shrink: 0;
}
.site-header + .lightning_swiper .scroll::after {
content: "";
width: 1px;
height: 100%;
background-color: #fff;
display: block;
animation: mv_scroll 3s ease infinite;
}
@media screen and (min-width: 1200px) {
.site-header + .lightning_swiper .scroll {
height: 180px;
right: 40px;
}
}
@media screen and (min-width: 1440px) {
.site-header + .lightning_swiper .scroll {
font-size: 14px;
}
}
@keyframes mv_scroll {
0% {
transform: scaleY(0);
transform-origin: top;
}
50% {
transform: scaleY(1);
transform-origin: top;
}
51% {
transform: scaleY(1);
transform-origin: bottom;
}
100% {
transform: scaleY(0);
transform-origin: bottom;
}
}
.site-header + .lightning_swiper::before, .site-header + .lightning_swiper::after {
content: "";
display: block;
position: absolute;
}
.site-header + .lightning_swiper::before {
width: 80%;
max-width: 370px;
padding-top: 82%;
background: url(../img/top/mv_txt.png) center/contain no-repeat;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
opacity: 0;
animation: mvTxt 0.3s 0.3s ease-out forwards;
}
@keyframes mvTxt {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1.3);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@media screen and (min-width: 992px) {
.site-header + .lightning_swiper {
min-height: 800px;
}
.site-header + .lightning_swiper::before {
max-width: 450px;
top: 50%;
left: calc(50% + 152.5px);
}
.site-header + .lightning_swiper::after {
width: calc(100% - 305px);
padding-top: min((100% - 305px) * 0.072086, 47px);
left: calc(50% + 152.5px);
transform: translate(-50%, 240%);
}
}
@media screen and (min-width: 1440px) {
.site-header + .lightning_swiper::after {
background-size: min(50%, 652px);
}
}
/* News ----------------------------------------------*/
.secNews {
padding: 30px 0;
}
@media screen and (min-width: 992px) {
.secNews {
padding: 24px 0;
}
}
.secNews__container {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 20px;
}
@media screen and (min-width: 992px) {
.secNews__container {
flex-direction: row;
align-items: center;
}
}
.secNews__ttl {
padding-right: 20px;
font-size: 150%;
font-weight: 700;
flex-shrink: 0;
position: relative;
}
.secNews__ttl::after {
content: "";
width: 1px;
height: 0.75em;
background-color: #424242;
display: block;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.secNews__newsWrap {
width: 100%;
height: 7em;
overflow: hidden;
}
.secNews__newsWrap .swiper-wrapper {
height: 100%;
align-items: flex-start;
}
.secNews__newsWrap .swiper-slide {
height: 7em !important;
margin: 0;
}
@media screen and (min-width: 768px) {
.secNews__newsWrap {
height: 3em;
}
.secNews__newsWrap .swiper-slide {
height: 3em !important;
display: flex;
align-items: center;
}
}
.secNews__newsList_row {
width: 100%;
}
.secNews__newsList_row .link {
width: 100%;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 8px;
}
.secNews__newsList_row .date {
font-size: 87.5%;
}
@media screen and (min-width: 768px) {
.secNews__newsList_row .link {
flex-direction: row;
align-items: center;
}
}
@media screen and (min-width: 992px) {
.secNews__newsList_row .link {
grid-gap: 20px;
}
}
.secNews__moreBtn {
margin-left: auto;
flex-shrink: 0;
}
/* About ---------------------------------------------*/
.secAbout {
padding: 100px 0;
}
@media screen and (min-width: 992px) {
.secAbout {
padding: 150px 0;
}
}
.secAbout__container {
margin-bottom: 120px;
}
@media screen and (min-width: 768px) {
.secAbout__container {
margin-bottom: 160px;
}
}
@media screen and (min-width: 992px) {
.secAbout__container {
margin-bottom: 80px;
}
}
.secAbout__ttl {
margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
.secAbout__ttl {
margin-bottom: 10px;
}
}
.secAbout__txtWrap {
width: 100%;
margin-bottom: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 20px;
}
.secAbout__txtWrap_ttl {
font-size: 200%;
line-height: 1.3;
}
.secAbout__txtWrap_txt {
line-height: 2.125;
}
@media screen and (min-width: 768px) {
.secAbout__txtWrap {
margin-bottom: 0;
}
}
@media screen and (min-width: 992px) {
.secAbout__txtWrap {
padding-bottom: 20px;
flex-direction: row;
grid-gap: 32px;
}
.secAbout__txtWrap_ttl {
font-size: 250%;
}
}
@media screen and (min-width: 1200px) {
.secAbout__txtWrap_ttl {
font-size: 312.5%;
}
}
@media screen and (min-width: 1440px) {
.secAbout__txtWrap {
grid-gap: 57px;
}
}
.secAbout__img {
width: 100%;
max-width: 170px;
}
@media screen and (min-width: 768px) {
.secAbout__img {
max-width: 230px;
}
}
.secAbout__imgsWrap {
background: linear-gradient(180deg, #E1E3D9 calc(100% - 60px), transparent calc(100% - 60px));
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 60px;
}
.secAbout__imgsWrap_row {
width: 100%;
position: relative;
}
.secAbout__imgsWrap_row--row01 {
padding-bottom: 100px;
}
.secAbout__imgsWrap_row--row02 {
padding-top: 80px;
}
.secAbout__imgsWrap_img01 {
width: 100%;
overflow-x: hidden;
}
.secAbout__imgsWrap_img01 img {
width: 140%;
max-width: 140%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.secAbout__imgsWrap_img02 {
width: 28%;
position: absolute;
top: -150px;
left: 20px;
}
.secAbout__imgsWrap_img03 {
width: 30%;
position: absolute;
bottom: -25px;
right: 20px;
}
.secAbout__imgsWrap_img04 {
width: calc(100% - 40px);
}
.secAbout__imgsWrap_img05 {
width: 50%;
max-width: 200px;
position: absolute;
top: 0;
right: 30px;
}
@media screen and (min-width: 768px) {
.secAbout__imgsWrap {
background: linear-gradient(180deg, #E1E3D9 calc(100% - 100px), transparent calc(100% - 100px));
grid-gap: 90px;
}
.secAbout__imgsWrap_img01 img {
width: 100%;
max-width: 100%;
left: 0;
transform: translateX(0);
}
.secAbout__imgsWrap_img02 {
max-width: 150px;
top: -84px;
}
.secAbout__imgsWrap_img03 {
max-width: 180px;
bottom: 0;
}
.secAbout__imgsWrap_img04 {
width: 89.5833%;
}
.secAbout__imgsWrap_img05 {
width: 35%;
max-width: 432px;
}
}
@media screen and (min-width: 992px) {
.secAbout__imgsWrap {
background: linear-gradient(180deg, #E1E3D9 calc(100% - 250px), transparent calc(100% - 250px));
grid-gap: 45px;
}
.secAbout__imgsWrap_row {
position: relative;
}
.secAbout__imgsWrap_row--row01 {
padding-bottom: 0;
}
.secAbout__imgsWrap_row--row02 {
padding-top: 100px;
}
.secAbout__imgsWrap_img02 {
max-width: 230px;
top: -24px;
}
.secAbout__imgsWrap_img03 {
max-width: 360px;
top: 75px;
bottom: auto;
}
.secAbout__imgsWrap_img05 {
max-width: 432px;
top: -30px;
}
}
@media screen and (min-width: 1700px) {
.secAbout__imgsWrap_img02 {
left: calc(50vw - 830px);
}
.secAbout__imgsWrap_img03 {
right: calc(50vw - 830px);
}
.secAbout__imgsWrap_img04 {
width: calc(100% - (50vw - 830px) - 70px);
}
.secAbout__imgsWrap_img05 {
right: calc(50vw - 830px);
}
}
@media screen and (min-width: 1830px) {
.secAbout__imgsWrap_img03 {
right: calc(50vw - 900px);
}
}
.secAbout__shBlk {
width: 100%;
padding-top: 100px;
padding-bottom: 60px;
background-color: #fff;
position: relative;
}
.secAbout__shBlk::before {
content: "";
width: calc(100% - 40px);
height: calc(100% - 140px);
background: url(../img/common/bg-sand.jpg) center/100% repeat;
display: block;
position: absolute;
top: 140px;
left: 50%;
transform: translate(-50%, 0);
}
.secAbout__shBlk_container {
display: flex;
flex-direction: column;
grid-gap: 100px;
z-index: 1;
}
.secAbout__shBlk_row {
width: 100%;
position: relative;
}
.secAbout__shBlk_txtWrap {
margin-bottom: 30px;
}
.secAbout__shBlk_txtWrap_ttl {
font-size: 200%;
line-height: 110%;
letter-spacing: 0.15em;
white-space: nowrap;
writing-mode: vertical-rl;
text-shadow: 0 0 15px #FFF;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 0.15em;
}
.secAbout__shBlk_txtWrap_ttl span {
padding-left: 0.05em;
border-left: 1px solid #333;
display: block;
}
.secAbout__shBlk_txtWrap_ttl strong {
font-size: 125%;
font-weight: 500;
letter-spacing: 0.09em;
}
.secAbout__shBlk_imgBox {
width: 100%;
max-width: 500px;
padding: 50px 0;
background: url(../img/top/about_sh_img01.jpg) center/cover no-repeat;
}
.secAbout__shBlk_imgBox_inner {
width: calc(100% - 40px);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 60px;
}
.secAbout__shBlk_imgBox_txt {
color: #FFF;
font-size: 150%;
text-align: center;
white-space: nowrap;
}
.secAbout__shBlk_contList {
width: 100%;
max-width: 400px;
padding: 0 20px;
margin: 0 auto;
grid-gap: 60px;
}
.secAbout__shBlk_contList .listItem {
padding: 0;
margin: 0;
}
.secAbout__shBlk_contList .listItem__link {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 20px;
}
.secAbout__shBlk_contList .listItem__img {
width: min(100%, 400px);
padding-top: min(100%, 400px);
}
.secAbout__shBlk_contList .listItem__txtWrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
grid-gap: 10px;
}
.secAbout__shBlk_contList .listItem__txtWrap_ttl {
width: 100%;
padding-left: 0.75em;
border-left: 1px solid #333;
font-size: 112.5%;
line-height: 1.5;
}
.secAbout__shBlk_enTxt {
width: 50%;
max-width: 210px;
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
z-index: 1;
}
@media screen and (min-width: 768px) {
.secAbout__shBlk {
padding-top: 120px;
}
.secAbout__shBlk::before {
height: calc(100% - 160px);
top: 160px;
}
.secAbout__shBlk_container {
grid-gap: 60px;
}
.secAbout__shBlk_txtWrap {
padding-left: 20px;
margin-bottom: 0;
}
.secAbout__shBlk_imgBox {
width: 66.6667%;
max-width: 800px;
padding: min(600px, 50%) 0 0;
flex-shrink: 0;
position: relative;
}
.secAbout__shBlk_imgBox_inner {
height: 100%;
justify-content: center;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.secAbout__shBlk_imgBox_btn {
position: absolute;
right: 0;
bottom: 20px;
}
.secAbout__shBlk_contList {
max-width: 890px;
padding: 0 20px;
margin: 0;
grid-gap: 20px;
}
.secAbout__shBlk_contList .listItem__txtWrap {
align-items: center;
grid-gap: 25px;
}
.secAbout__shBlk_enTxt {
width: 30%;
max-width: 407px;
top: 0;
left: -15px;
}
}
@media screen and (min-width: 992px) {
.secAbout__shBlk {
padding-top: 150px;
}
.secAbout__shBlk::before {
width: calc(100% - 100px);
max-width: 1140px;
height: calc(100% - 210px);
background-size: 50%;
top: 210px;
left: calc(50% - 30px);
transform: translate(-50%, 0);
}
.secAbout__shBlk_txtWrap_ttl {
font-size: 250%;
}
.secAbout__shBlk_imgBox_inner {
width: calc(100% - 60px);
}
.secAbout__shBlk_imgBox_txt {
font-size: 187.5%;
}
.secAbout__shBlk_imgBox_btn {
bottom: 28px;
}
.secAbout__shBlk_contList {
grid-gap: 30px;
}
.secAbout__shBlk_contList .listItem__txtWrap {
grid-gap: 27px;
}
.secAbout__shBlk_contList .listItem__txtWrap_ttl {
font-size: 125%;
}
.secAbout__shBlk_enTxt {
width: 40%;
max-width: 290px;
top: 30px;
}
}
@media screen and (min-width: 1200px) {
.secAbout__shBlk_txtWrap {
padding-left: 96px;
}
.secAbout__shBlk_contList {
padding-left: 60px;
}
}
@media screen and (min-width: 1440px) {
.secAbout__shBlk_enTxt {
max-width: 407px;
left: calc(-1 * (50vw - 630px));
}
}
@media screen and (min-width: 1700px) {
.secAbout__shBlk_enTxt {
left: -230px;
}
}
/* Works ---------------------------------------------*/
.secWorks {
padding: 0 0 150px;
background-color: #fff;
}
.secWorks__ttl {
margin-bottom: 30px;
}
@media screen and (min-width: 992px) {
.secWorks__ttl {
margin-bottom: 50px;
}
}
.secWorks__mv {
width: 100%;
padding: 50px 0;
margin-bottom: 60px;
background: url(../img/top/works_mv.jpg) center/cover no-repeat;
}
.secWorks__mv_container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.secWorks__mv_txtBox {
padding: 40px 40px 50px;
background-color: #fff;
grid-gap: 16px;
}
.secWorks__mv_txtBox_number {
font-size: 187.5%;
letter-spacing: 0;
line-height: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.secWorks__mv_txtBox_number strong {
font-size: 333.3333%;
font-weight: 500;
letter-spacing: -0.05em;
line-height: 1;
}
.secWorks__mv_txtBox_txt {
line-height: 2;
}
@media screen and (min-width: 768px) {
.secWorks__mv {
width: calc(100% - 20px);
margin-left: auto;
}
.secWorks__mv_container {
justify-content: flex-start;
}
}
@media screen and (min-width: 992px) {
.secWorks__mv {
padding: 0;
margin-bottom: 80px;
}
.secWorks__mv_container {
width: 100%;
max-width: 100%;
height: auto;
padding-top: min(44.8718%, 700px);
position: relative;
}
.secWorks__mv_txtBox {
padding: 40px 50px 50px;
position: absolute;
top: 40px;
left: 40px;
}
}
@media screen and (min-width: 1240px) {
.secWorks__mv {
width: calc(100% - (50vw - 600px));
}
}
.secWorks__worksList {
width: 100%;
margin-bottom: 80px;
display: grid;
grid-gap: 55px 40px;
}
@media screen and (min-width: 576px) {
.secWorks__worksList {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 768px) {
.secWorks__worksList {
margin-bottom: 100px;
}
}
.secWorks__worksList .postItem {
margin: 0;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
.secWorks__worksList .postItem__link {
text-decoration: none;
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
grid-gap: 18px;
}
.secWorks__worksList .postItem__img {
width: 100%;
padding-top: 75%;
}
.secWorks__worksList .postItem__txtWrap {
width: 100%;
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
grid-gap: 10px;
}
.secWorks__worksList .postItem__txtWrap_ttl {
font-size: 112.5%;
}
.secWorks__worksList .postItem__txtWrap_tags {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
grid-gap: 10px;
}
.secWorks__worksList .postItem__txtWrap_tags li {
padding: 1px 8px;
margin: 0;
border: 1px solid #333;
font-size: 75%;
display: inline-flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.secWorks__worksList .postItem__txtWtrap {
grid-gap: 0;
}
}
@media screen and (min-width: 992px) {
.secWorks__worksList .postItem__link {
grid-gap: 22px;
}
.secWorks__worksList .postItem__txtWrap_ttl {
font-size: 125%;
}
}
/* What’s YONEZAWA -----------------------------------*/
.secWhats {
padding: 150px 0 0;
background-color: #E1E3D9;
}
.secWhats__container {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 45px;
}
@media screen and (min-width: 768px) {
.secWhats__container {
padding-bottom: 275px;
align-items: center;
grid-gap: 76px;
}
}
.secWhats__ttl {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 30px;
}
.secWhats__ttl_jp {
font-size: 200%;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.secWhats__ttl {
align-self: flex-start;
}
}
@media screen and (min-width: 992px) {
.secWhats__ttl {
grid-gap: 75px;
}
.secWhats__ttl_jp {
font-size: 312.5%;
}
}
.secWhats__txtWrap {
width: 100%;
}
.secWhats__txtWrap p {
line-height: 2.125;
}
.secWhats__txtWrap p + p {
margin-top: 2.125em;
}
@media screen and (min-width: 768px) {
.secWhats__txtWrap {
width: 340px;
}
}
.secWhats__img {
position: relative;
}
.secWhats__img--img01 {
width: 60%;
margin: 0 -20px 0 auto;
}
.secWhats__img--img01 .txtImg {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -15%);
}
.secWhats__img--img02 {
width: 50%;
margin: 0 auto 0 -20px;
}
.secWhats__img--img03 {
width: 60%;
margin: -30px 0 0 auto;
transform: translate(0, 30%);
z-index: 1;
}
@media screen and (min-width: 768px) {
.secWhats__img {
position: absolute;
}
.secWhats__img--img01 {
width: 34.1666%;
max-width: 410px;
top: 8px;
right: 0;
}
.secWhats__img--img01 .txtImg {
max-width: 115%;
max-width: 115%;
transform: translate(-75%, 25%);
}
.secWhats__img--img02 {
width: 20%;
max-width: 240px;
bottom: 18%;
left: 0;
}
.secWhats__img--img03 {
width: 30%;
max-width: 360px;
margin: 0;
bottom: 0;
right: 0;
transform: translate(-40%, 40%);
}
}
@media screen and (min-width: 992px) {
.secWhats__img--img01 {
width: 30%;
}
.secWhats__img--img01 .txtImg {
transform: translate(-45%, -35%);
}
}
@media screen and (min-width: 1240px) {
.secWhats__img--img01 {
margin-right: 0;
right: calc(-1 * (50vw - 600px));
}
.secWhats__img--img02 {
margin-left: 0;
left: calc(-1 * (50vw - 600px));
}
}
@media screen and (min-width: 1440px) {
.secWhats__img--img01 {
width: 34.1666%;
max-width: 410px;
}
.secWhats__img--img01 .txtImg {
transform: translate(-75%, 25%);
}
}
/* Welcome -------------------------------------------*/
.secWelcome {
padding: 90px 0 110px;
background-color: #35453F;
color: #fff;
}
.secWelcome::before {
content: "YONEZAWA";
height: 100vh;
color: rgba(255, 255, 255, 0.1);
font-size: 562.5%;
font-weight: 400;
font-family: "Times New Roman", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
letter-spacing: 0.05em;
line-height: 1;
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
top: 0;
left: -0.175em;
}
@media screen and (min-width: 768px) {
.secWelcome {
padding-left: clamp(130px, 15vw, 250px);
}
.secWelcome::before {
font-size: clamp(190px, 25vw, 250px);
}
}
@media screen and (min-width: 992px) {
.secWelcome {
padding-bottom: 130px;
}
}
@media screen and (min-width: 1440px) {
.secWelcome::before {
font-size: 300px;
}
}
@media screen and (min-width: 1700px) {
.secWelcome {
padding-left: calc(50vw - 600px - 20px);
}
}
.secWelcome__container {
z-index: 1;
}
@media screen and (min-width: 768px) {
.secWelcome__container {
display: flex;
align-items: flex-start;
}
}
@media screen and (min-width: 1240px) {
.secWelcome__container {
margin-left: 20px;
}
.secWelcome__container.container--wide {
max-width: 1430px;
}
}
.secWelcome__ttl {
padding-left: 3.75em;
margin-bottom: 4.0625em;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 1.875em;
position: relative;
z-index: 1;
}
.secWelcome__ttl::after {
content: "Welcome!";
width: 11.25em;
padding-top: calc(11.25em * 0.570397);
margin: 2.5em 0 1.25em auto;
background: url(../img/top/welcome_img04.png) center/contain no-repeat;
color: transparent;
display: block;
}
.secWelcome__ttl_jp {
font-size: 200%;
line-height: 1.6;
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.secWelcome__ttl {
margin-bottom: 5.3125em;
padding-left: 0;
}
.secWelcome__ttl::after {
width: 200px;
padding-top: 114.0794px;
margin: 0;
position: absolute;
top: 0;
right: 0;
transform: translate(100%, 0%);
}
}
@media screen and (min-width: 992px) {
.secWelcome__ttl {
grid-gap: 75px;
}
.secWelcome__ttl::after {
width: 277px;
padding-top: 157.999969px;
top: 90px;
right: -20px;
transform: translate(70%, -20%);
}
.secWelcome__ttl_jp {
font-size: 312.5%;
}
}
.secWelcome__list {
width: 100%;
padding-top: 60px;
border-top: 1px solid #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 60px;
}
.secWelcome__list .listItem {
width: 100%;
padding: 0 0 60px;
margin: 0;
border-bottom: 1px solid #fff;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 30px;
}
.secWelcome__list .listItem__txtWrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.secWelcome__list .listItem__txtWrap_ttl {
margin-bottom: 0.8235em;
font-size: 150%;
}
.secWelcome__list .listItem__txtWrap_txt {
margin-bottom: 30px;
line-height: 1.25;
}
.secWelcome__list .listItem__img {
width: min(100%, 400px);
padding-top: min(217px, 54.2657%);
}
@media screen and (min-width: 768px) {
.secWelcome__list {
padding-top: 40px;
grid-gap: 40px;
}
.secWelcome__list .listItem {
padding-bottom: 40px;
flex-direction: row;
align-items: center;
grid-gap: 20px;
}
.secWelcome__list .listItem__txtWrap_ttl {
font-size: 150%;
line-height: 1.5;
}
.secWelcome__list .listItem__txtWrap_txt {
line-height: 1.5;
}
.secWelcome__list .listItem__img {
width: 50%;
padding-top: 27.1329%;
flex-shrink: 0;
}
}
@media screen and (min-width: 992px) {
.secWelcome__list {
padding-top: 30px;
grid-gap: 30px;
}
.secWelcome__list .listItem {
padding-bottom: 30px;
align-items: flex-start;
}
.secWelcome__list .listItem__txtWrap_ttl {
padding-top: 1.5385em;
font-size: 162.5%;
line-height: 34px;
}
.secWelcome__list .listItem__txtWrap_txt {
margin-bottom: 80px;
line-height: 34px;
}
.secWelcome__list .listItem__img {
width: 45%;
padding-top: 24.4196%;
}
}
@media screen and (min-width: 1200px) {
.secWelcome__list .listItem {
grid-gap: 30px;
}
.secWelcome__list .listItem__txtWrap_ttl {
font-size: 162.5%;
}
.secWelcome__list .listItem__img {
width: 50%;
padding-top: 27.1329%;
}
}
@media screen and (min-width: 1440px) {
.secWelcome__list .listItem__txtWrap_ttl {
font-size: 187.5%;
}
}
/* Life Style ----------------------------------------*/
.secLifestyle {
padding: 0 0 100px;
margin: -1px 0 0;
background: #35453F;
color: #fff;
}
.secLifestyle::before {
content: "";
width: 100%;
height: calc(100% - 460px);
background: url(../img/common/bg-sand.jpg) center/100% repeat;
display: block;
position: absolute;
bottom: 0;
left: 0;
}
@media screen and (min-width: 992px) {
.secLifestyle::before {
background-size: 50%;
}
}
.secLifestyle__container {
margin-bottom: 60px;
grid-gap: 40px;
z-index: 1;
}
@media screen and (min-width: 992px) {
.secLifestyle__container {
margin-bottom: 80px;
grid-gap: 170px;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__ttl {
padding-top: 30px;
}
}
.secLifestyle__txtWrap {
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 30px;
}
.secLifestyle__txtWrap_ttl {
font-size: 187.5%;
line-height: 1.6;
white-space: nowrap;
}
@media screen and (min-width: 992px) {
.secLifestyle__txtWrap {
grid-gap: 40px;
}
.secLifestyle__txtWrap_ttl {
font-size: 312.5%;
}
}
.secLifestyle__boxList {
width: 100%;
margin-bottom: 60px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
counter-reset: secLifestyle__boxList 0;
position: relative;
z-index: 1;
}
.secLifestyle__boxList .listItem {
padding-top: 100%;
margin: 0;
position: relative;
}
.secLifestyle__boxList .listItem__img {
width: 100%;
height: 100%;
}
.secLifestyle__boxList .listItem__img img {
transition: 0.5s;
}
.secLifestyle__boxList .listItem__img .overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
mix-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
transition: 0.5s;
}
.secLifestyle__boxList .listItem__txtWrap {
width: 100%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-gap: 20px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
opacity: 0;
transition: 0.5s;
}
.secLifestyle__boxList .listItem__txtWrap_number {
width: 55px;
height: 55px;
color: #fff;
font-size: 15px;
letter-spacing: -0.05em;
line-height: 40px;
position: absolute;
top: 0;
left: 5px;
}
.secLifestyle__boxList .listItem__txtWrap_number::before {
content: "";
width: 50px;
height: 1px;
background: #FFF;
display: block;
position: absolute;
top: 14px;
right: 3px;
transform-origin: bottom right;
transform: rotate(-45deg);
}
.secLifestyle__boxList .listItem__txtWrap_number::after {
counter-increment: secLifestyle__boxList 1;
content: counter(secLifestyle__boxList, decimal-leading-zero);
padding-left: 2px;
font-size: 20px;
letter-spacing: -0.05em;
}
.secLifestyle__boxList .listItem__txtWrap_ttl {
padding-top: 0.5em;
font-size: 87.5%;
text-align: center;
}
.secLifestyle__boxList .listItem__txtWrap_txt {
font-size: 87.5%;
line-height: 2;
text-align: center;
}
.secLifestyle__boxList .listItem__link {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.secLifestyle__boxList .listItem__link:hover {
opacity: 1;
}
.secLifestyle__boxList .listItem__link:hover .listItem__img img {
filter: blur(5px);
}
.secLifestyle__boxList .listItem__link:hover .listItem__img .overlay {
opacity: 1;
}
.secLifestyle__boxList .listItem__link:hover .listItem__txtWrap {
opacity: 1;
}
.secLifestyle__boxList .listItem--01, .secLifestyle__boxList .listItem--06 {
grid-column: span 2;
}
.secLifestyle__boxList .listItem--01 .listItem__txtWrap_ttl, .secLifestyle__boxList .listItem--06 .listItem__txtWrap_ttl {
padding-top: 0;
font-size: 125%;
}
@media screen and (min-width: 768px) {
.secLifestyle__boxList {
margin-bottom: 80px;
grid-template-columns: repeat(3, calc((100% - 20px) / 3));
}
.secLifestyle__boxList .listItem__txtWrap_ttl {
font-size: 112.5%;
}
.secLifestyle__boxList .listItem--01 {
grid-column: 1/3;
grid-row: span 2;
}
.secLifestyle__boxList .listItem--02 {
grid-column: 3/4;
grid-row: 1;
}
.secLifestyle__boxList .listItem--03 {
grid-column: 3/4;
grid-row: 2;
}
.secLifestyle__boxList .listItem--04 {
grid-column: 1/2;
grid-row: 3;
}
.secLifestyle__boxList .listItem--05 {
grid-column: 1/2;
grid-row: 4;
}
.secLifestyle__boxList .listItem--06 {
grid-column: 2/4;
grid-row: 3/5;
}
.secLifestyle__boxList .listItem--01, .secLifestyle__boxList .listItem--06 {
padding-top: 0;
height: 100%;
}
.secLifestyle__boxList .listItem--01 .listItem__txtWrap_ttl, .secLifestyle__boxList .listItem--06 .listItem__txtWrap_ttl {
font-size: 30px;
}
.secLifestyle__boxList .listItem--01 .listItem__txtWrap_txt, .secLifestyle__boxList .listItem--06 .listItem__txtWrap_txt {
font-size: 100%;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__boxList {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.secLifestyle__boxList .listItem__txtWrap_number {
width: 65px;
font-size: 16px;
}
.secLifestyle__boxList .listItem__txtWrap_number::before {
width: 60px;
}
.secLifestyle__boxList .listItem__txtWrap_number::after {
font-size: 24px;
}
.secLifestyle__boxList .listItem--01 {
grid-column: span 2;
grid-row: span 3;
}
.secLifestyle__boxList .listItem--02 {
grid-column: span 1;
grid-row: span 2;
}
.secLifestyle__boxList .listItem--03 {
grid-column: span 1;
grid-row: span 2;
}
.secLifestyle__boxList .listItem--04 {
grid-column: 1/2;
grid-row: span 2;
}
.secLifestyle__boxList .listItem--05 {
grid-column: 2/3;
grid-row: span 2;
}
.secLifestyle__boxList .listItem--06 {
grid-column: 3/5;
grid-row: 3/6;
}
.secLifestyle__boxList .listItem--01, .secLifestyle__boxList .listItem--06 {
height: auto;
padding-top: 75.7576%;
}
.secLifestyle__boxList .listItem--01 .listItem__txtWrap_ttl, .secLifestyle__boxList .listItem--06 .listItem__txtWrap_ttl {
font-size: 30px;
}
.secLifestyle__boxList .listItem--01 .listItem__txtWrap_txt, .secLifestyle__boxList .listItem--06 .listItem__txtWrap_txt {
font-size: 100%;
}
}
@media screen and (min-width: 1200px) {
.secLifestyle__boxList .listItem__txtWrap_number {
width: 85px;
font-size: 20px;
line-height: 60px;
top: 2px;
left: 10px;
}
.secLifestyle__boxList .listItem__txtWrap_number::before {
width: 100px;
}
.secLifestyle__boxList .listItem__txtWrap_number::after {
font-size: 30px;
}
}
@media screen and (min-width: 1440px) {
.secLifestyle__boxList .listItem__txtWrap_number {
width: 100px;
font-size: 25px;
top: 5px;
left: 15px;
}
.secLifestyle__boxList .listItem__txtWrap_number::before {
top: 20px;
right: 0;
}
.secLifestyle__boxList .listItem__txtWrap_number::after {
font-size: 40px;
}
.secLifestyle__boxList .listItem__txtWrap_ttl {
font-size: 24px;
}
}
@media screen and (min-width: 1660px) {
.secLifestyle__boxList .listItem__txtWrap_number {
width: 135px;
height: 130px;
font-size: 30px;
line-height: 65px;
top: 8px;
left: 20px;
}
.secLifestyle__boxList .listItem__txtWrap_number::before {
width: 130px;
top: 24px;
right: 15px;
}
.secLifestyle__boxList .listItem__txtWrap_number::after {
font-size: 50px;
}
}
.secLifestyle__popup {
width: 100%;
height: 100%;
background-color: rgba(51, 51, 51, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
left: 0;
z-index: 2101;
opacity: 0;
pointer-events: none;
transition: 0.5s;
}
.secLifestyle__popup.show {
opacity: 1;
pointer-events: auto;
}
.secLifestyle__popup.show + .secLifestyle__popupSlider {
opacity: 1;
pointer-events: auto;
}
@media screen and (min-width: 768px) {
.secLifestyle__popup {
display: flex;
align-items: center;
justify-content: center;
}
}
.secLifestyle__popupSlider {
width: calc(100% - 80px);
max-width: 1200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2101;
opacity: 0;
pointer-events: none;
}
.secLifestyle__popupSlider_arrow {
width: 20px;
height: 20px;
background: #1F5C2C url('data:image/svg+xml;charset=utf8,') center/8px no-repeat;
border: 1px solid #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.secLifestyle__popupSlider_arrow.prev {
left: 10px;
transform: translateY(-50%) scale(-1, 1);
}
.secLifestyle__popupSlider_arrow.next {
right: 10px;
}
.secLifestyle__popupSlider_arrow:focus {
outline: 0;
}
@media screen and (min-width: 768px) {
.secLifestyle__popupSlider {
width: calc(100% - 120px);
max-height: calc(100vh - 100px);
}
.secLifestyle__popupSlider_wrapper {
align-items: center;
}
.secLifestyle__popupSlider_arrow {
width: 30px;
height: 30px;
}
.secLifestyle__popupSlider_arrow.prev {
left: 15px;
}
.secLifestyle__popupSlider_arrow.next {
right: 15px;
}
}
@media screen and (min-width: 1320px) {
.secLifestyle__popupSlider_arrow.prev {
left: auto;
right: calc(50% + 620px);
}
.secLifestyle__popupSlider_arrow.next {
left: calc(50% + 620px);
right: auto;
}
}
@media screen and (min-width: 1440px) {
.secLifestyle__popupSlider_arrow {
width: 40px;
height: 40px;
background-size: 12px;
}
}
.secLifestyle__popupBox {
width: 100%;
height: auto;
max-height: calc(100vh - 100px);
padding: 20px 0;
background-color: #fff;
border-radius: 10px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.secLifestyle__popupBox::-webkit-scrollbar {
display: none;
}
@media screen and (min-width: 768px) {
.secLifestyle__popupBox {
height: 100%;
padding: 40px 10px;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__popupBox {
padding: 40px 20px;
}
}
.secLifestyle__popupBox_container {
max-width: 400px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
grid-gap: 1.8em 0;
}
@media screen and (min-width: 768px) {
.secLifestyle__popupBox_container {
max-width: 100%;
flex-wrap: nowrap;
grid-gap: 0 30px;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__popupBox_container {
grid-gap: 0 40px;
}
}
.secLifestyle__popupBox .txtWrap {
width: 100%;
color: var(--text);
font-size: 81.25%;
display: contents;
}
.secLifestyle__popupBox .txtWrap p {
width: 100%;
line-height: 1.8;
}
.secLifestyle__popupBox .txtWrap p strong {
color: var(--main);
font-size: 112.5%;
font-weight: 600;
}
.secLifestyle__popupBox .txtWrap__ttl {
width: 100%;
margin: 0 auto;
color: var(--main);
font-size: 171.43%;
font-weight: 600;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
order: -1;
}
.secLifestyle__popupBox .txtWrap__ttl small {
margin-bottom: -1.0714em;
font-size: 58.33%;
letter-spacing: -0.05em;
display: block;
align-self: flex-start;
position: relative;
}
.secLifestyle__popupBox .txtWrap__ttl small::before {
content: "";
width: 150%;
height: 1px;
background-color: var(--main);
display: block;
position: absolute;
top: 45%;
right: -30px;
transform: rotate(-45deg);
transform-origin: right top;
}
.secLifestyle__popupBox .txtWrap__ttl small span {
font-size: 228.57%;
letter-spacing: -0.05em;
}
@media screen and (min-width: 768px) {
.secLifestyle__popupBox .txtWrap {
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 1.8em;
}
.secLifestyle__popupBox .txtWrap__ttl {
margin: 0;
align-items: center;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__popupBox .txtWrap {
font-size: 87.5%;
}
.secLifestyle__popupBox .txtWrap p strong {
font-size: 125%;
}
.secLifestyle__popupBox .txtWrap__ttl {
font-size: 187.5%;
}
}
@media screen and (min-width: 1200px) {
.secLifestyle__popupBox .txtWrap {
font-size: 100%;
}
}
@media screen and (min-width: 1440px) {
.secLifestyle__popupBox .txtWrap {
font-size: 125%;
}
}
.secLifestyle__popupBox .imgWrap {
display: contents;
}
.secLifestyle__popupBox .imgWrap__main {
width: 100%;
padding-top: 100%;
order: -1;
}
.secLifestyle__popupBox .imgWrap__sub {
width: calc(50% - 10px);
padding-top: calc(50% - 10px);
}
@media screen and (min-width: 768px) {
.secLifestyle__popupBox .imgWrap {
width: 40%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
grid-gap: 10px;
}
.secLifestyle__popupBox .imgWrap__sub {
width: calc(50% - 5px);
padding-top: calc(50% - 5px);
}
}
.secLifestyle__charmBlk {
color: #333;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.secLifestyle__charmBlk::before {
content: "";
width: calc(100% - 20px);
height: calc(100% - 40px);
clip-path: polygon(calc(100% - 150px) 0, calc(100% - 150px) 50%, calc(100% - 10px) 50%, calc(100% - 10px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
border: 1px solid #1F5C2C;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.secLifestyle__charmBlk:has(.secLifestyle__charmBlk_ttlWrap.visible)::before {
animation: appear 1s 0.5s linear forwards;
}
.secLifestyle__charmBlk_ttlWrap {
width: 140px;
padding: 10px;
margin: 0 20px 0 auto;
writing-mode: vertical-rl;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
position: relative;
z-index: 2;
}
.secLifestyle__charmBlk_ttlWrap_ttl {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 10px;
}
.secLifestyle__charmBlk_ttlWrap_ttl .secTtl::before {
width: 1px;
height: 30px;
}
.secLifestyle__charmBlk_ttlWrap_ttl .jp {
font-size: 200%;
text-shadow: 0 0 5px #FFF;
}
.secLifestyle__charmBlk_ttlWrap_txt {
line-height: 1.1;
text-shadow: 0 0 3px #FFF;
}
.secLifestyle__charmBlk_listWrap {
width: calc(100% + 40px);
padding: 0 20px;
margin: -40px -20px 40px;
position: relative;
z-index: 1;
}
.secLifestyle__charmBlk_list {
transition-timing-function: linear !important;
}
.secLifestyle__charmBlk_list .listItem {
margin: 0;
}
.secLifestyle__charmBlk_list .listItem__img {
width: 100%;
padding-top: 100%;
}
.secLifestyle__charmBlk_moreBtn {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.secLifestyle__charmBlk::before {
width: calc(100% - 40px);
max-width: 1560px;
height: calc(100% - 40px - 140px);
top: auto;
bottom: 40px;
transform: translate(-50%, 0);
}
.secLifestyle__charmBlk_ttlWrap {
padding: 10px 20px;
margin-right: 30px;
}
}
@media screen and (min-width: 992px) {
.secLifestyle__charmBlk::before {
clip-path: polygon(calc(100% - 215px) 0, calc(100% - 215px) 50%, calc(100% - 20px) 50%, calc(100% - 20px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
.secLifestyle__charmBlk_ttlWrap {
width: 195px;
margin-right: 40px;
grid-gap: 0;
}
.secLifestyle__charmBlk_ttlWrap_ttl {
grid-gap: 12px;
}
.secLifestyle__charmBlk_ttlWrap_ttl .jp {
font-size: 312.5%;
}
}
@media screen and (min-width: 1200px) {
.secLifestyle__charmBlk_ttlWrap {
margin-right: max(40px, 50vw - 600px + 20px);
}
.secLifestyle__charmBlk_listWrap {
margin-top: -80px;
}
}
@media screen and (min-width: 1240px) {
.secLifestyle__charmBlk::before {
clip-path: polygon(calc(100% - 215px - (50vw - 620px)) 0, calc(100% - 215px - (50vw - 620px)) 50%, calc(100% - (50vw - 600px)) 50%, calc(100% - (50vw - 600px)) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}
@media screen and (min-width: 1320px) {
.secLifestyle__charmBlk::before {
clip-path: polygon(calc(100% - 215px - (50vw - 660px)) 0, calc(100% - 215px - (50vw - 660px)) 50%, calc(100% - (50vw - 640px)) 50%, calc(100% - (50vw - 640px)) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
.secLifestyle__charmBlk_ttlWrap {
margin-right: calc(50vw - 620px);
}
}
@media screen and (min-width: 1640px) {
.secLifestyle__charmBlk::before {
clip-path: polygon(calc(100% - 215px - 160px) 0, calc(100% - 215px - 160px) 50%, calc(100% - 180px) 50%, calc(100% - 180px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
}
@media screen and (min-width: 1700px) {
.secLifestyle__charmBlk::before {
clip-path: polygon(calc(100% - 215px - 130px) 0, calc(100% - 215px - 130px) 50%, calc(100% - 150px) 50%, calc(100% - 150px) 0, 100% 0, 100% 100%, 0 100%, 0 0);
}
.secLifestyle__charmBlk_ttlWrap {
margin-right: 200px;
}
}
/* Event ---------------------------------------------*/
.secEvent {
padding: 80px 0 100px;
}
@media screen and (min-width: 992px) {
.secEvent {
padding: 135px 0 150px;
}
}
.secEvent__ttl {
margin-bottom: 40px;
}
@media screen and (min-width: 992px) {
.secEvent__ttl {
margin-bottom: 55px;
}
}
.secEvent__header {
margin-bottom: 60px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 40px;
}
.secEvent__header_ttl {
margin-bottom: 30px;
font-size: 200%;
line-height: 1.6;
}
.secEvent__header_txt {
line-height: 2.5;
}
.secEvent__header_txt strong {
font-size: 112.5%;
font-weight: 500;
line-height: 2.5;
}
.secEvent__header_btnsWrap {
width: 100%;
max-width: 410px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.secEvent__header_btnsWrap > li {
margin: 0;
}
.secEvent__header_btnsWrap a {
width: 100%;
height: 60px;
border: 1px solid #333;
font-size: 87.5%;
letter-spacing: 0.05em;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.secEvent__header_ttl {
margin: 0 40px 0 0;
}
.secEvent__header_txt strong {
font-size: 125%;
}
.secEvent__header_btnsWrap {
max-width: 100%;
display: flex;
justify-content: center;
grid-gap: 20px;
}
.secEvent__header_btnsWrap > li {
width: 100%;
max-width: 200px;
}
}
@media screen and (min-width: 992px) {
.secEvent__header {
margin-bottom: 80px;
grid-gap: 70px;
}
.secEvent__header_ttl {
font-size: 50px;
}
.secEvent__header_btnsWrap a {
font-size: 100%;
}
}
.secEvent__eventList {
width: 100%;
margin-bottom: 60px;
display: grid;
}
.secEvent__eventList .postItem {
margin: 0 0 55px;
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
grid-gap: 0;
}
.secEvent__eventList .postItem:last-child {
margin-bottom: 0;
}
.secEvent__eventList .postItem__link {
text-decoration: none;
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
grid-gap: 20px;
}
.secEvent__eventList .postItem__img {
width: 100%;
}
.secEvent__eventList .postItem__txtWrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 10px;
}
.secEvent__eventList .postItem__txtWrap_ttl {
font-size: 112.5%;
}
.secEvent__eventList .postItem__txtWrap_tags {
font-size: 75%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
grid-gap: 10px;
}
.secEvent__eventList .postItem__txtWrap_tags li {
padding: 1px 8px;
margin: 0;
border: 1px solid #333;
display: inline-flex;
align-items: center;
}
@media screen and (min-width: 992px) {
.secEvent__eventList .postItem__txtWrap_ttl {
font-size: 125%;
}
.secEvent__eventList .postItem__txtWrap_tags {
font-size: 87.5%;
}
}
.secEvent__eventList .postItem {
margin-bottom: 40px;
}
.secEvent__eventList .postItem__txtWrap_tags {
display: none;
}
@media screen and (min-width: 768px) {
.secEvent__eventList {
grid-template-columns: repeat(2, 1fr);
grid-gap: 0 20px;
}
.secEvent__eventList .postItem {
margin-bottom: 50px;
}
.secEvent__eventList .postItem:nth-last-child(2) {
margin-bottom: 0;
}
}
@media screen and (min-width: 992px) {
.secEvent__eventList {
margin-bottom: 95px;
grid-gap: 0 40px;
}
}
.secEvent__moreBtn {
display: flex;
align-items: center;
justify-content: center;
}
/* Voice ---------------------------------------------*/
.secVoice__container {
width: 100%;
max-width: 100%;
}
@media screen and (min-width: 768px) {
.secVoice__container {
max-width: 1920px;
display: flex;
}
}
.secVoice__imgsWrap {
width: 100%;
}
.secVoice__imgsWrap .swiper-wrapper {
transition-timing-function: linear !important;
}
.secVoice__imgsWrap .swiper-slide {
margin: 0;
}
.secVoice__imgsWrap_img {
width: 100%;
padding-top: 62.3529%;
}
@media screen and (min-width: 768px) {
.secVoice__imgsWrap {
width: 20%;
flex-shrink: 0;
}
.secVoice__imgsWrap_img {
height: 100%;
padding-top: 0;
}
}
@media screen and (min-width: 1200px) {
.secVoice__imgsWrap {
width: 24%;
}
}
@media screen and (min-width: 1600px) {
.secVoice__imgsWrap {
width: 26.5625%;
max-width: 510px;
}
}
.secVoice__txtBlk {
width: 100%;
padding: 20px;
background-color: #35453F;
color: #fff;
}
.secVoice__txtBlk_inner {
width: 100%;
padding: 50px 20px;
border: 1px solid #FFF;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 40px;
}
.secVoice__txtBlk_txt {
color: #CADD60;
font-size: 112.5%;
font-weight: 600;
letter-spacing: 0.15em;
text-align: center;
}
.secVoice__txtBlk_txt small {
font-size: 93.75%;
font-weight: 600;
letter-spacing: 0.15em;
}
.secVoice__txtBlk_txt strong {
font-size: 125%;
font-weight: 600;
letter-spacing: 0.15em;
}
.secVoice__txtBlk_moreBtn {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.secVoice__txtBlk_inner {
height: 100%;
padding: 40px 20px 50px;
justify-content: center;
grid-gap: 25px;
}
}
@media screen and (min-width: 992px) {
.secVoice__txtBlk {
padding: 40px;
}
.secVoice__txtBlk_inner {
grid-gap: 40px;
}
.secVoice__txtBlk_txt {
font-size: 150%;
}
}
@media screen and (min-width: 1200px) {
.secVoice__txtBlk_inner {
padding: 50px 20px 70px;
grid-gap: 80px;
}
.secVoice__txtBlk_txt {
font-size: 200%;
}
}
@media screen and (min-width: 1600px) {
.secVoice__txtBlk_inner {
padding: 0 20px 20px;
}
}
.secVoice__ttl {
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 30px;
}
.secVoice__ttl_jp {
font-size: 200%;
}
@media screen and (min-width: 992px) {
.secVoice__ttl {
grid-gap: 30px;
}
.secVoice__ttl_jp {
font-size: 312.5%;
}
}
@media screen and (min-width: 1200px) {
.secVoice__ttl {
grid-gap: 75px;
}
}
/* Pickup --------------------------------------------*/
.secPickup {
padding: 60px 0 80px;
}
@media screen and (min-width: 992px) {
.secPickup {
padding: 140px 0 115px;
}
}
.secPickup__ttl {
margin-bottom: 40px;
}
@media screen and (min-width: 992px) {
.secPickup__ttl {
margin-bottom: 70px;
}
}
.secPickup__header {
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 20px;
}
.secPickup__header_ttl {
margin-bottom: 30px;
font-size: 200%;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.secPickup__header_ttl {
margin: 0 40px 0 0;
}
}
@media screen and (min-width: 992px) {
.secPickup__header {
margin-bottom: 45px;
grid-gap: 50px;
}
.secPickup__header_ttl {
font-size: 50px;
}
}
.secPickup__slider {
margin-bottom: 60px;
display: flex;
align-items: center;
grid-gap: 10px;
}
.secPickup__slider_arrow {
width: 15px;
height: 32px;
background: url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
flex-shrink: 0;
}
.secPickup__slider_arrow.next {
transform: scale(-1, 1);
}
@media screen and (min-width: 768px) {
.secPickup__slider {
grid-gap: 20px;
}
.secPickup__slider_arrow {
width: 20px;
height: 43px;
}
}
@media screen and (min-width: 1600px) {
.secPickup__slider {
grid-gap: 40px;
}
.secPickup__slider_arrow {
width: 30px;
height: 65px;
}
}
.secPickup__slideList .listItem {
width: 100%;
margin: 0;
}
.secPickup__slideList .listItem__link {
display: block;
}
.secPickup__slideList .listItem__img {
width: 100%;
}
.secPickup__moreBtn {
display: flex;
align-items: center;
justify-content: center;
}
/* Column --------------------------------------------*/
.secColumn {
padding: 0 0 100px;
margin: -1px 0 0;
background: url(../img/common/bg-sand.jpg) center/100% repeat;
}
.secColumn::before {
content: "";
width: calc(100% - 40px);
height: calc(100% - 80px);
border: 1px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 992px) {
.secColumn {
padding-bottom: 160px;
background-size: 50%;
}
.secColumn::before {
max-width: 1660px;
height: calc(100% - 120px);
}
}
@media screen and (min-width: 1200px) {
.secColumn {
padding-bottom: 210px;
}
}
.secColumn__container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
@media screen and (min-width: 1580px) {
.secColumn__container {
grid-gap: 0;
}
}
.secColumn__ttlWrap {
margin: -30px -10px 40px auto;
writing-mode: vertical-rl;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
grid-gap: 10px;
position: relative;
z-index: 2;
}
.secColumn__ttlWrap_ttl {
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 5px;
}
.secColumn__ttlWrap_ttl .secTtl::before {
width: 1px;
height: 30px;
}
.secColumn__ttlWrap_ttl .jp {
font-size: 200%;
text-shadow: 0 0 5px #FFF;
}
.secColumn__ttlWrap_txt {
line-height: 1.5;
text-shadow: 0 0 3px #FFF;
}
@media screen and (min-width: 768px) {
.secColumn__ttlWrap {
margin: -30px 0 0 auto;
}
}
@media screen and (min-width: 992px) {
.secColumn__ttlWrap {
margin-top: -105px;
grid-gap: 15px;
}
.secColumn__ttlWrap_ttl {
grid-gap: 5px;
}
.secColumn__ttlWrap_ttl .jp {
font-size: 312.5%;
}
}
@media screen and (min-width: 1580px) {
.secColumn__ttlWrap_txt br {
display: none;
}
}
.secColumn__columnBlk {
width: 100%;
padding: 0 10px;
margin-bottom: 80px;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 50px;
}
.secColumn__columnBlk_list {
width: 100%;
display: grid;
grid-gap: 30px;
}
.secColumn__columnBlk_list .listItem {
margin: 0;
}
.secColumn__columnBlk_list .listItem__link {
text-decoration: none;
display: block;
}
.secColumn__columnBlk_list .listItem__link:hover .listItem__txtWrap::after {
transform: translate(5px, 50%);
}
.secColumn__columnBlk_list .listItem__img {
width: calc(100% - 20px);
padding-top: calc((100% - 20px) * 0.750442);
transform: translateX(20px);
}
.secColumn__columnBlk_list .listItem__txtWrap {
width: calc(100% - 20px);
padding: 20px 20px;
margin: -20px 0 0 0;
background-color: #E1E3D9;
border: 1px solid #333;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 8px;
position: relative;
z-index: 1;
}
.secColumn__columnBlk_list .listItem__txtWrap_cat {
display: flex;
flex-wrap: nowrap;
grid-gap: 10px;
}
.secColumn__columnBlk_list .listItem__txtWrap_cat span {
padding: 4px 5px;
background-color: #fff;
font-size: 87.5%;
line-height: 1;
display: inline-block;
}
.secColumn__columnBlk_list .listItem__txtWrap_ttl {
margin-top: 0;
font-size: 112.5%;
}
.secColumn__columnBlk_list .listItem__txtWrap_date {
color: #888;
font-size: 87.5%;
}
.secColumn__columnBlk_list .listItem__txtWrap::after {
content: "→";
width: 30px;
height: 30px;
background: #333 url('data:image/svg+xml;charset=utf8,') center/contain no-repeat;
border-radius: 50%;
color: transparent;
display: block;
position: absolute;
bottom: 0;
right: -20px;
transform: translateY(50%);
transition: 0.5s;
z-index: 1;
}
@media screen and (min-width: 768px) {
.secColumn__columnBlk_list {
grid-template-columns: repeat(2, 1fr);
grid-gap: 40px 30px;
}
}
@media screen and (min-width: 992px) {
.secColumn__columnBlk {
padding: 0 20px;
margin-bottom: 150px;
grid-gap: 110px;
}
.secColumn__columnBlk_list {
grid-gap: 60px 30px;
}
.secColumn__columnBlk_list .listItem__txtWrap {
padding: 25px 30px;
margin: -25px 0 0 0;
}
.secColumn__columnBlk_list .listItem__txtWrap_ttl {
font-size: 125%;
}
}
@media screen and (min-width: 1280px) {
.secColumn__columnBlk {
padding: 0;
}
}
@media screen and (min-width: 1580px) {
.secColumn__columnBlk {
margin-top: -230px;
}
}
.secColumn__snsBlk {
width: 100%;
}
.secColumn__snsBlk_container {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 10px;
}
.secColumn__snsBlk_txtWrap {
width: 100%;
padding: 40px 0 55px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
grid-gap: 28px;
}
.secColumn__snsBlk_txtWrap_ttl {
font-size: 187.5%;
line-height: 1;
}
.secColumn__snsBlk_txtWrap_txt {
font-weight: 600;
line-height: 2;
}
.secColumn__snsBlk_txtWrap_moreBtn {
margin-top: 45px;
}
.secColumn__snsBlk_snsList {
width: 100%;
}
.secColumn__snsBlk_snsList #sb_instagram {
padding: 0 !important;
}
.secColumn__snsBlk_snsList #sb_instagram #sbi_images {
padding: 0 !important;
}
@media screen and (max-width: 767px) {
.secColumn__snsBlk_snsList #sbi_images .sbi_item:nth-child(4) {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.secColumn__snsBlk_container {
flex-direction: row;
align-items: stretch;
}
.secColumn__snsBlk_txtWrap {
width: 50%;
padding: 20px 0;
flex-shrink: 0;
grid-gap: 20px;
}
.secColumn__snsBlk_txtWrap_ttl {
margin-bottom: 10px;
}
.secColumn__snsBlk_txtWrap_moreBtn {
margin-top: 0;
}
}
@media screen and (min-width: 992px) {
.secColumn__snsBlk_txtWrap {
width: 40%;
}
}
@media screen and (min-width: 1440px) {
.secColumn__snsBlk_txtWrap {
width: 25%;
}
.secColumn__snsBlk_txtWrap_txt {
font-size: 14px;
}
.secColumn__snsBlk_snsList #sbi_images {
grid-template-columns: repeat(3, 1fr) !important;
}
.secColumn__snsBlk_snsList #sbi_images .sbi_item:nth-child(4) {
display: none !important;
}
}
@media screen and (min-width: 1580px) {
.secColumn__snsBlk_txtWrap {
padding-bottom: 15px;
}
.secColumn__snsBlk_txtWrap_txt {
font-size: 16px;
}
}
/* Staff ---------------------------------------------*/
.secStaff {
padding: 80px 0 60px;
}
@media screen and (min-width: 992px) {
.secStaff {
padding: 200px 0 105px;
}
}
.secStaff__mv {
width: 100%;
position: relative;
}
.secStaff__mv img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 576px) {
.secStaff__mv {
height: 200px;
}
.secStaff__mv img {
position: absolute;
top: 0;
left: 0;
}
}
@media screen and (min-width: 768px) {
.secStaff__mv {
height: 300px;
}
}
@media screen and (min-width: 992px) {
.secStaff__mv {
height: auto;
padding-top: min(66.6323%, 500px);
}
.secStaff__mv img {
max-width: 100%;
}
}
.secStaff__container {
padding: 40px 0 20px;
margin-top: -50px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 20px;
}
@media screen and (min-width: 992px) {
.secStaff__container {
padding: 52px 40px;
margin-top: -60px;
grid-gap: 28px;
}
}
@media screen and (min-width: 1440px) {
.secStaff__container {
margin-top: -100px;
}
}
.secStaff__ttl {
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 40px;
}
.secStaff__ttl_jp {
font-size: 200%;
line-height: 1.6;
}
@media screen and (min-width: 992px) {
.secStaff__ttl {
grid-gap: 70px;
}
.secStaff__ttl_jp {
font-size: 312.5%;
}
}
.secStaff__txt {
line-height: 2;
text-align: center;
}
.secStaff__moreBtn {
margin-top: 20px;
}
@media screen and (min-width: 992px) {
.secStaff__moreBtn {
margin-top: 42px;
}
}
@media screen and (min-width: 1440px) {
.secStaff__moreBtn {
margin-top: 65px;
}
}
.secStaff__img {
position: relative;
z-index: 1;
}
.secStaff__img--01 {
width: 100px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-135%, -50%);
}
.secStaff__img--02 {
width: 200px;
margin: 0 -20px 0 auto;
}
.secStaff__img--03 {
width: 160px;
margin: 20px auto 20px -20px;
}
@media screen and (min-width: 768px) {
.secStaff__img {
position: absolute;
}
.secStaff__img--01 {
width: 120px;
}
.secStaff__img--02 {
width: 230px;
margin: 0;
top: 20px;
right: -20px;
}
.secStaff__img--03 {
width: 160px;
margin: 0;
bottom: 52px;
left: -20px;
}
}
@media screen and (min-width: 992px) {
.secStaff__img--01 {
width: 150px;
}
.secStaff__img--02 {
width: 320px;
margin: 0;
top: 20px;
right: -20px;
}
.secStaff__img--03 {
width: 250px;
}
}
@media screen and (min-width: 1200px) {
.secStaff__img--01 {
width: 200px;
}
.secStaff__img--02 {
width: 350px;
}
.secStaff__img--03 {
width: 300px;
}
}
@media screen and (min-width: 1440px) {
.secStaff__img--01 {
width: 200px;
top: 0;
left: 0;
transform: translate(100%, -50%);
}
.secStaff__img--02 {
width: clamp(370px, 28vw, 400px);
margin: 0;
top: 50px;
right: 0;
transform: translateX(20%);
}
.secStaff__img--03 {
width: 300px;
bottom: 44px;
left: -100px;
}
}
@media screen and (min-width: 1600px) {
.secStaff__img--02 {
width: 500px;
margin: 0;
top: 20px;
right: 0;
transform: translateX(35%);
}
}
@media screen and (min-width: 1700px) {
.secStaff__img--01 {
width: 260px;
transform: translate(40%, -50%);
}
.secStaff__img--02 {
transform: translateX(45%);
}
.secStaff__img--03 {
left: 0;
transform: translateX(-52%);
}
}
/* Contact -------------------------------------------*/
.secContact {
padding: 60px 0 80px;
background-color: #35453F;
color: #fff;
}
@media screen and (min-width: 992px) {
.secContact {
padding: 95px 0 100px;
}
}
.secContact__header {
margin-bottom: 50px;
}
@media screen and (min-width: 992px) {
.secContact__header {
margin-bottom: 85px;
}
}
.secContact__ttl {
margin-bottom: 40px;
}
@media screen and (min-width: 992px) {
.secContact__ttl {
margin-bottom: 70px;
}
}
.secContact__txtBlk {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 30px;
}
.secContact__txtBlk_ttl {
font-size: 200%;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.secContact__txtBlk {
flex-direction: row;
align-items: center;
}
}
@media screen and (min-width: 992px) {
.secContact__txtBlk {
grid-gap: 45px;
}
.secContact__txtBlk_ttl {
font-size: 312.5%;
}
}
.secContact__contactList {
width: 100%;
max-width: 1920px;
margin-bottom: 60px;
display: grid;
grid-gap: 30px;
}
.secContact__contactList .listItem {
margin: 0;
}
.secContact__contactList .listItem__link {
width: 100%;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
grid-gap: 15px;
position: relative;
}
.secContact__contactList .listItem__ttl {
padding: 0.5em 0.3333em;
background-color: #FFF;
color: #333;
font-size: 125%;
writing-mode: vertical-rl;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 20px;
z-index: 1;
}
.secContact__contactList .listItem__ttl > small {
padding: 0.7143em 0.3571em;
background-color: #35453F;
color: #FFF;
font-size: 60%;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
display: inline-block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
}
.secContact__contactList .listItem__img {
width: 100%;
padding-top: 62.6959%;
}
.secContact__contactList .listItem__txtWrap {
width: 100%;
text-align: center;
}
@media screen and (min-width: 768px) {
.secContact__contactList {
grid-template-columns: repeat(3, 1fr);
grid-gap: 3px;
}
.secContact__contactList .listItem {
grid-gap: 18px;
}
.secContact__contactList .listItem__ttl {
font-size: 112.5%;
}
.secContact__contactList .listItem__ttl > small {
font-size: 66.67%;
}
.secContact__contactList .listItem__img {
padding-top: max(62.6959%, 250px);
}
}
@media screen and (min-width: 992px) {
.secContact__contactList {
margin-bottom: 90px;
}
.secContact__contactList .listItem {
grid-gap: 18px;
}
.secContact__contactList .listItem__ttl {
font-size: 125%;
}
.secContact__contactList .listItem__ttl > small {
font-size: 70%;
}
.secContact__contactList .listItem__txtWrap {
font-size: 112.5%;
}
}
@media screen and (min-width: 1440px) {
.secContact__contactList .listItem__ttl {
font-size: 187.5%;
right: 23px;
}
.secContact__contactList .listItem__ttl > small {
font-size: 46.67%;
}
.secContact__contactList .listItem__txtWrap {
font-size: 125%;
}
}
.secContact__contactBox {
width: 100%;
padding: 25px 0 20px;
background-color: #fff;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.secContact__contactBox_telLink {
font-size: 250%;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1;
white-space: nowrap;
}
.secContact__contactBox_telLink a {
margin-top: 0.3333em;
letter-spacing: 0.05em;
line-height: 1;
text-decoration: none;
display: block;
}
.secContact__contactBox_time {
font-size: 112.5%;
font-weight: 400;
}
@media screen and (min-width: 992px) {
.secContact__contactBox_ttl {
font-size: 112.5%;
}
.secContact__contactBox_telLink {
font-size: 375%;
}
.secContact__contactBox_time {
font-size: 125%;
}
}
/* Area ----------------------------------------------*/
.secArea {
padding: 50px 0 0;
}
@media screen and (min-width: 768px) {
.secArea {
padding: 50px 0 30px;
}
}
@media screen and (min-width: 992px) {
.secArea {
padding: 80px 0 0;
}
}
.secArea__container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media screen and (min-width: 768px) {
.secArea__container {
flex-direction: row;
justify-content: space-between;
grid-gap: 20px;
}
}
.secArea__txtBlk {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 30px;
}
.secArea__txtBlk_header {
display: contents;
}
.secArea__txtBlk_ttl {
writing-mode: vertical-rl;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 5px;
}
.secArea__txtBlk_ttl .secTtl::before {
width: 1px;
height: 30px;
}
.secArea__txtBlk_ttl_jp {
font-size: 175%;
}
.secArea__txtBlk_img {
width: 80%;
max-width: 487px;
order: 1;
}
.secArea__txtBlk_areas {
color: #334139;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-gap: 5px;
}
.secArea__txtBlk_areas dt {
margin-bottom: 0;
font-size: 125%;
font-weight: 500;
line-height: 1.3333em;
}
.secArea__txtBlk_areas dd {
letter-spacing: 0.05em;
line-height: 2;
}
.secArea__txtBlk_areas dd:not(:last-child) {
margin-bottom: 0.9375em;
}
@media screen and (min-width: 768px) {
.secArea__txtBlk_header {
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.secArea__txtBlk_ttl {
padding-bottom: 20px;
}
.secArea__txtBlk_img {
width: 60%;
}
}
@media screen and (min-width: 992px) {
.secArea__txtBlk {
grid-gap: 50px;
}
.secArea__txtBlk_ttl {
grid-gap: 5px;
}
.secArea__txtBlk_ttl_jp {
font-size: 312.5%;
}
.secArea__txtBlk_img {
margin-right: -52px;
}
.secArea__txtBlk_areas {
grid-gap: 10px;
}
.secArea__txtBlk_areas dt {
font-size: 150%;
}
}
.secArea__img {
width: 60%;
max-width: 410px;
margin: -50px 0 -30px auto;
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.secArea__img {
width: 35%;
margin: -80px 0 -50px auto;
flex-shrink: 0;
}
}
@media screen and (min-width: 992px) {
.secArea__img {
margin: -120px 0 -100px auto;
}
}