@charset "UTF-8";
 :root { --font-size-base: 16px; --color-primary: #ff6d00;
--color-secondary-lightest: #faf4ee;
--color-secondary-light: #F2EAE0;
--color-secondary: #E7D7BE;
--color-secondary-dark: #8D7F6E;
--color-secondary-darker: #7a6c5e;
--color-text: #242220;
--color-placeholder-text: #8c7c6a;
--color-white: #ffffff;
--color-danger: #d93025; --spacing-2: 2px;
--spacing-8: 8px;
--spacing-10: 10px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-38: 38px;
--spacing-44: 44px;
--spacing-48: 48px;
--spacing-78: 78px;
--spacing-4: 4px;
--spacing-12: 12px;
--spacing-20: 20px;
--spacing-40: 40px;
--spacing-80: 80px;
} *,
*::before,
*::after {
box-sizing: border-box;
}
:where(:root) {
overflow-wrap: anywhere;
line-break: strict;
}
:where(:is(h1, h2, h3, h4, h5, h6, p, caption):lang(en)) {
text-wrap: pretty;
}
*:focus {
outline: none;
}
a{
color: inherit;
transition: 0.3s all;
text-decoration: none;
}
.page-content a{
color: var(--color-primary);
}
a:hover {
opacity: 0.7;
}
small{
font-size: 1rem;
} .mt-neg40 {
margin-top: -40px !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-10 {
margin-top: var(--spacing-10);
}
.mt-20 {
margin-top: var(--spacing-20);
}
.mt-40 {
margin-top: var(--spacing-40);
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-20{
margin-bottom: var(--spacing-20);
}
.mb-40{
margin-bottom: var(--spacing-40);
}
.mr-4 {
margin-right: var(--spacing-4);
}
.mr-10 {
margin-right: var(--spacing-10);
}
.mr-20 {
margin-right: var(--spacing-20);
}
.mr-40 {
margin-right: var(--spacing-40);
}
.border-radius-5 {
border-radius: 5px;
}
.border-radius-10 {
border-radius: 10px;
}
.border-radius-20 {
border-radius: 20px;
}
.indent {
text-indent: -1em;
padding-left: 1em;
}
.v-align-top {
vertical-align: top !important;
}
.v-align-middle {
vertical-align: middle;
} .pt-0{
padding-top: 0 !important;
}
.pb-0{
padding-bottom: 0 !important;
}
.pl-0{
padding-left: 0 !important;
}
.pr-0{
padding-right: 0 !important;
} .material-symbols-rounded {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
} .icon-with-text {
display: flex;
align-items: center;
gap: var(--spacing-2);
font-size: 1rem;
line-height: 1;
}
.icon-with-text .material-symbols-rounded {
font-size: 1.25rem;
flex-shrink: 0;
}
.common-before-link-icon{
background: var(--color-primary);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-right: 6px;
border-radius: 2px;
} .global-nav {
display: flex;
align-items: center;
font-size: 1rem;
}
.global-nav a{
line-height: var(--spacing-78);
padding-left: var(--spacing-12);
padding-right: var(--spacing-16);
transition: 0.3s all;
}
.global-nav a:hover{
opacity: 1;
color: rgba(32, 33, 36, 0.7);
}
.global-nav a.nav-cta {
background: var(--color-primary);
padding-left: var(--spacing-24);
padding-right: var(--spacing-24);
color: #fff;
font-weight: 600;
}
.global-nav a.nav-cta:hover {
opacity: 0.7;
}
.global-nav a.icon-with-text .icon-arrow-down {
color: var(--color-primary) ;
transition: 0.3s all;
}
.gnav-item a.main-nav{
position: relative;
z-index: 2;
}
.gnav-item a.main-nav::after {
content: "";
position: absolute; bottom: -8px;
left: 50%;
background: #ffffff;
height: 0;
width: 16px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: translate(-8px, -12px);
transition: 0.3s all;
z-index: 1;
}
.gnav-item:hover a.main-nav::after {
height: calc(tan(60deg) * 5px);
transform: translate(-12px, 0px);
}
.gnav-item:hover a.icon-with-text .icon-arrow-down{
transform: scale(1, -1) translate(0px, 1px);
}
.gnav-list {
display: flex;
justify-content: center;
}
.gnav-item {
transition: background-color .3s;
}
.gnav-mega-menu {
background: linear-gradient(180deg, rgb(141 127 110 / 90%) 0%, rgb(141 127 110 / 50%) 100%);
backdrop-filter: blur(10px);
opacity: 0;
max-height: 0;
left: 0;
overflow: hidden;
position: absolute;
text-align: center;
transition: all .3s ease-in-out;
width: 100%;
z-index: 1;
}
.gnav-mega-menu-list {
padding-bottom: 30px;
padding-top: 30px;
}
.gnav-mega-menu-list.flex-nav{
display: flex;
justify-content: center;
gap: var(--spacing-20);
}
.gnav-mega-menu-item {
display: inline-block;
width: 208px;
}
.gnav-mega-menu-item a{
display: flex;
flex-direction: column;
line-height: inherit !important;
padding-left: 0px;
padding-right: 0px;
transition: 0.3s all;
}
.gnav-mega-menu-item a img{
object-fit: cover;
border-radius: 10px;
max-width: 100%;
}
.gnav-mega-menu-item a h2{
margin-top: var(--spacing-10);
font-size: 1rem;
font-weight: 400;
color: var(--color-white);
} .gnav-item:hover .gnav-mega-menu {
opacity: 1;
max-height: 240px;
} .pagination {
display: flex;
align-items: center;
justify-content: center;
}
.pagination .page-info {
padding: 0px 20px 0px 0px;
}
.pagination ul.page-numbers{
display: flex;
gap: var(--spacing-10);
list-style: none;
padding-left: 0;
align-items: center;
justify-content: center;
}
.pagination ul.page-numbers li a{
background: var(--color-secondary-light);
border-radius: 5px;
padding: 10px;
text-align: center;
min-width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.pagination ul.page-numbers span.dots{
padding: 6px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.pagination ul.page-numbers span.current{
padding: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
} .breadcrumb-list{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
font-size: 0.75rem;
line-height: 1;
}
.breadcrumb-list li{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.breadcrumb-list li a{
color: var(--color-primary);
display: flex;
align-items: center;
}
.breadcrumb-list li a span .material-symbols-rounded{
font-size: 1rem;
vertical-align: middle;
margin-right: 2px;
}
.breadcrumb-icon-text {
display: flex;
align-items: center;
}
.breadcrumb-list li + li::before{
content: "\e315";
font-family: 'Material Symbols Rounded';
color: var(--color-secondary-darker);
padding-left: 4px;
padding-right: 4px;
} body {
margin: 0;
font-family: "YakuHanJP", "Roboto Flex", "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-size: var(--font-size-base);
font-weight: 400;
background: var(--color-white);
color: var(--color-text);
line-height: 1.6;
}
.full-container {
width: calc(100% - 80px);
margin: 0 auto;
}
.container {
width: min(1200px, 92%);
margin: 0 auto;
position: relative;
}
.site-header {
background: var(--color-white);
position: sticky;
top: 0;
z-index: 10;
line-height: 1;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.common-content{
padding-top: var(--spacing-40);
padding-bottom: var(--spacing-40);
}
.common-content-alt{
background: var(--color-secondary-light);
padding-top: var(--spacing-40);
padding-bottom: var(--spacing-40);
}
.common-2column-container{
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.sticky-top-offset-100{
position: sticky;
top: 100px;
}
.common-sub-content{
background: var(--color-secondary-lightest);
border-radius: 20px;
}
.common-main-content{
flex: 1;
}
.common-sub-content h2{
background: var(--color-primary);
color: var(--color-white);
text-align: center;
display: flex;
align-items: center;
justify-content: flex-start;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1;
font-size: 1.25rem;
font-weight: 700;
}
.common-sub-content-inner{
width: 280px;
padding: var(--spacing-20);
}
.common-sub-content-inner ul li a{
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
padding: 20px 0px;
border-bottom: 1px solid var(--color-secondary);
}
.common-sub-content-inner ul li:last-child a{
border-bottom: none;
}
.common-header {
font-size: 2rem;
font-weight: 700;
line-height: 1.4;
}
.common-sub-header {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.4;
}
.brand {
margin-left: var(--spacing-40);
}
.brand a{
display: flex;
align-items: center;
}
.logo-circle {
width: var(--spacing-38);
height: var(--spacing-38);
}
.brand-name {
font-weight: 700;
font-size: 1.5rem;
font-weight: 600;
margin-left: var(--spacing-4);
}
.brand-sub {
font-size: 12px;
color: #999;
}
.hero {
position: relative;
padding-top: var(--spacing-80);
padding-bottom: var(--spacing-40);
background: var(--color-secondary);
overflow: hidden;
min-height: 1174px;
}
.hero-bg {
position: absolute;
inset: 0;
}
.hero-copy {
color: #fff;
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: var(--spacing-40);
}
.hero-lead {
color: #fff;
font-size: 1rem
}
.hero-inner {
position: relative;
}
.hero-visual {
position: absolute;
top: 60px;
left: calc(50% + 80px);
transform: translate(-10%, -40%);
pointer-events: none;
z-index: 1;
}
.hero-image { height: 60vw;
width: 60vw;
min-width: 860px;
min-height: 860px;
background-size: cover;
background-position: left 200px;
border-radius: 100%;
background-repeat: no-repeat;
}
.hero-circle1 {
position: absolute;
top: 0px;
left: calc(50%);
transform: translate(-115%, -65%);
height: 60vw;
width: 60vw;
min-width: 860px;
min-height: 860px;
background: #ff6f0099;
border-radius: 100%;
}
.hero-circle2 {
position: absolute;
top: 220px;
left: calc(50%);
transform: translate(-113%, -50%);
height: 60vw;
width: 60vw;
min-width: 860px;
min-height: 860px;
background: #ff6f0060;
border-radius: 100%;
}
.hero-circle3 {
position: absolute;
top: 60px;
left: calc(50% + 80px);
transform: translate(-25%, 0%);
height: 60vw;
width: 60vw;
min-width: 860px;
min-height: 860px;
background: #ff6f0030;
border-radius: 100%;
}
.hero-dots {
display: none;
} .hero-carousel {
width: 60vw;
height: 60vw;
min-width: 860px;
min-height: 860px;
}
.hero-carousel .slick-list {
width: 100%;
height: 100%;
overflow: visible;
}
.hero-carousel .slick-track {
width: 100%;
height: 100%;
}
.hero-carousel .slick-slide {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-carousel .slick-slide > div {
width: 100%;
height: 100%;
}
.hero-slide {
width: 100%;
height: 100%;
}
.hero-slide .hero-image {
height: 100%;
width: 100%;
min-width: unset;
min-height: unset;
}
.hero-image1{
background-image: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/img_hero_1.jpg);
}
.hero-image2{
background-image: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/img_hero_2.jpg);
}
.hero-image3{
background-image: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/img_hero_3.jpg);
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
}
.dot.active {
background: var(--color-primary);
}
.about {
position: relative;
z-index: 1;
margin-top: var(--spacing-80);
}
.about-inner {
background: var(--color-secondary-light);
padding: var(--spacing-40);
border-radius: 20px;
position: relative;
}
.about-primary {
display: flex;
gap: var(--spacing-40);
justify-content: space-between;
}
.about-primary h2{
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--spacing-24);
line-height: 1.4;
}
.about-sub-txt{
position: absolute;
top: 20px;
left: -142px;
line-height: 1;
font-size: 144px;
writing-mode: vertical-rl;
letter-spacing: 0.06em;
color: #ff6d00;
}
.about-img{
width: 386px;
border-radius: var(--spacing-20);
object-fit: cover;
}
.about-vertical {
writing-mode: vertical-rl;
font-size: 36px;
color: var(--color-primary);
letter-spacing: 0.2em;
}
.about-card {
background: #fff;
border-radius: 20px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 20px;
padding: 24px;
align-items: center;
}
.about-card-image {
height: 180px;
background: linear-gradient(135deg, #d6e6f7, #f0f6ff);
border-radius: 12px;
}
.about-actions {
margin-top: var(--spacing-40);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.icon-card {
position: relative;
background: #fff;
border-radius: 20px;
text-align: center;
font-weight: 700;
}
.icon-card a{
position: relative;
display: block;
padding: var(--spacing-20);
}
.icon-about-link-arrow{
position: absolute;
width: 56px;
right: 0;
bottom: 0;
border-bottom-right-radius: 20px;
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;
}
.about-icon {
margin-bottom: var(--spacing-20);
}
.about-icon img {
height: 80px;
}
.section-title {
text-align: center;
margin: 0;
font-size: 2rem;
font-weight: 700;
line-height: 1;
}
.section-sub {
text-align: center;
margin: 20px 0 40px;
color: var(--color-primary);
font-size: 0.75rem;
letter-spacing: 0.02em;
font-weight: 700;
}
.services {
padding: 40px 0;
background: var(--color-secondary-light);
}
.service-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.service-card {
background: #fff;
border-radius: 20px;
position: relative;
text-align: center;
}
.service-card a{
display: block;
}
.service-num {
position: absolute;
top: -24px;
left: -16px;
color: var(--color-primary);
font-weight: 700;
font-size: 3rem;
line-height: 1;
}
.service-txt {
padding: 20px 0px;
}
.service-txt h3{
font-size: 1.125rem;
font-weight: 700;
line-height: 1;
}
.service-txt p{
margin-top: 16px;
font-size: 0.875rem;
}
.service-img {
height: 110px;
border-radius: 20px;
background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
margin-bottom: 20px;
}
.service-image img {
width: 100%;
max-width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
object-fit: cover;
}
.facilities {
padding: 40px 0;
background: #fff;
}
.facility-slider-wrapper {
position: relative;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
}
.facility-card {
border-radius: 20px;
text-align: center;
}
.facility-card p {
margin-top: var(--spacing-20);
font-size: 1rem;
font-weight: 500;
}
.facility-image {
border-radius: 20px;
}
.facility-image img {
width: calc(100% - 20px);
border-radius: 20px;
object-fit: cover;
aspect-ratio: 1.47 / 1;
}  .facility-slider-wrapper .slick-slide.slick-center {
opacity: 1;
transform: scale(1);
} .facility-slider-wrapper .slick-prev,
.facility-slider-wrapper .slick-next {
position: absolute !important;
top: calc(50% - 16px) !important;
transform: translateY(-50%) !important;
z-index: 1 !important;
width: 64px !important;
height: 64px !important;
border: none !important;
border-radius: 50% !important;
background: var(--color-primary) !important;
color: var(--color-white) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: 0.3s background ease !important;
padding: 0 !important;
}
.facility-slider-wrapper .slick-prev::before,
.facility-slider-wrapper .slick-next::before {
content: none !important;
}
.facility-slider-wrapper .slick-prev:hover,
.facility-slider-wrapper .slick-next:hover {
opacity: 0.7 !important;
}
.facility-slider-wrapper .slick-prev {
left: calc(36% - 32px) !important;
}
.facility-slider-wrapper .slick-next {
right: calc(36% - 12px) !important;
}
.facility-slider-wrapper .slick-prev .material-symbols-rounded,
.facility-slider-wrapper .slick-next .material-symbols-rounded {
font-size: 32px !important;
}
.home-news {
padding: 40px 0;
background: var(--color-secondary-light);
}
.home-news-tab-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.home-news-tabs{
display: flex;
gap: 2px;
}
.home-news-tabs .tab{
font-size: 1.125rem;
font-weight: 700;
line-height: 1;
padding: 20px 40px;
background: var(--color-secondary);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.home-news-tabs .tab:active{
background: var(--color-white);
}
.home-news-list{
background: #fff;
padding: var(--spacing-40);
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
} .home-news-list .home-news-panel { display: none; } #tab-all:checked ~ .home-news-list .panel-all,
#tab-salon:checked ~ .home-news-list .panel-salon,
#tab-seminar:checked ~ .home-news-list .panel-seminar,
#tab-exchange:checked ~ .home-news-list .panel-exchange,
#tab-info:checked ~ .home-news-list .panel-info,
#tab-news:checked ~ .home-news-list .panel-news {
display: grid;
}
#tab-all:checked ~ .home-news-tabs label[for="tab-all"],
#tab-salon:checked ~ .home-news-tabs label[for="tab-salon"],
#tab-seminar:checked ~ .home-news-tabs label[for="tab-seminar"],
#tab-exchange:checked ~ .home-news-tabs label[for="tab-exchange"],
#tab-info:checked ~ .home-news-tabs label[for="tab-info"],
#tab-news:checked ~ .home-news-tabs label[for="tab-news"] {
background: #fff;
color: var(--color-primary);
}
.home-news-panel{
display: grid;
gap: 20px;
}
.home-news-item{
display: flex;
align-items: flex-start;
}
.home-news-item .date{
font-weight: 700;
}
.home-news-item .label{
background: var(--color-primary);
color: var(--color-white);
font-size: 0.75rem;
padding: 6px 10px;
border-radius: 2px;
line-height: 1;
margin-left: var(--spacing-20);
margin-right: var(--spacing-20);
width: 106px;
text-align: center;
}
.home-news-item .home-news-info{
display: flex;
align-items: center;
}
.home-news-item p{
flex: 1;
}
.home-news-cta{
font-size: 1.25rem;
text-align: center;
display: flex;
justify-content: center;
}
.home-news-cta .button {
background: var(--color-primary);
color: #fff;
border-radius: 128px;
font-weight: 700;
padding: 20px 80px;
margin-top: var(--spacing-40);
position: relative;
display: flex;
align-items: center;
}
.home-news-cta .button span.material-symbols-rounded {
right: var(--spacing-20);
position: absolute;
font-size: 1.75rem;
}
.social {
padding-top:40px;
padding-bottom:40px;
}
.social-inner {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
text-align: center;
font-size: 12px;
}
.social-item {
font-size: 0.75rem;
text-align: center;
display: flex;
padding: 20px 0px;
align-items: center;
flex-direction: column;
color: var(--color-primary);
}
.social-item img {
height: 48px;
margin-bottom: var(--spacing-20);
}
.newsletter {
background: #fff;
}
.newsletter-box {
background: var(--color-secondary-light);
border-radius: 20px;
padding: var(--spacing-40);
text-align: center;
}
.newsletter-form {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-top: var(--spacing-20);
}
.newsletter-form input {
padding: 0px 40px;
line-height: 64px;
border-radius: 128px;
background: #fff;
text-align: left;
font-size: 1.125rem;
flex: 1;
border-top-left-radius: 128px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 128px;
}
.newsletter-form input::placeholder {
color: var(--color-placeholder-text);
}
.newsletter-form button {
border: none;
background: var(--color-primary);
color: #fff;
padding: 0px 40px;
border-top-left-radius: 0px;
border-top-right-radius: 128px;
border-bottom-right-radius: 128px;
border-bottom-left-radius: 0px;
cursor: pointer;
font-weight: 700;
line-height: 64px;
}
.newsletter-link {
color: var(--color-primary);
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.videos {
padding: 40px 0;
position: relative;
}
.video-heading {
margin-bottom: 40px;
}
.video-slider-wrapper {
overflow: hidden;
width: 100%;
position: relative;
}
.video-slide {
padding: 0 12px;
}
.video-slide iframe {
width: 100%;
height: 315px;
border-radius: 16px;
border: none;
}  .video-slider-wrapper .slick-track {
display: flex;
} .video-slider-wrapper .slick-prev,
.video-slider-wrapper .slick-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
width: 64px !important;
height: 64px !important;
border: none !important;
border-radius: 100% !important;
background: var(--color-white) !important;
color: var(--color-primary) !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: 0.3s background ease !important;
padding: 0 !important;
}
.video-slider-wrapper .slick-prev::before,
.video-slider-wrapper .slick-next::before {
content: none !important;
}
.video-slider-wrapper .slick-prev:hover,
.video-slider-wrapper .slick-next:hover {
opacity: 0.7 !important;
}
.video-slider-wrapper .slick-prev {
left: calc(15% - 32px) !important;
}
.video-slider-wrapper .slick-next {
right: calc(15% - 32px) !important;
}
.video-slider-wrapper .slick-prev .material-symbols-rounded,
.video-slider-wrapper .slick-next .material-symbols-rounded {
font-size: 32px !important;
} .video-slider-wrapper .slick-slide .video-slide {
opacity: 1 !important;
transform: scale(1) !important;
}
.video-slider-wrapper .slick-slide .video-slide.center-active {
opacity: 1 !important;
transform: scale(1) !important;
} .footer {
background: var(--color-secondary-dark);
color: #fff;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--spacing-20);
padding-top: var(--spacing-40);
padding-bottom: var(--spacing-20);
}
.footer-col h4 {
margin: 0 0 var(--spacing-20);
font-weight: 700;
}
.footer-col a {
font-size: 0.9375rem;
display: flex;
margin-bottom: 10px;
color: var(--color-secondary-light);
align-items: center;
line-height: inherit;
}
.footer-bottom {
padding: 0;
font-size: 0.875rem;
padding-top: var(--spacing-20);
padding-bottom: var(--spacing-40);
text-align: right;
border-top: 1px solid var(--color-white);
}
.footer-corp-title {
display: flex;
align-items: center; font-size: 0.9375rem;
font-weight: 700;
line-height: 1;
}
.footer-corp-title img{
width: 22px;
height: 22px;
margin-right: var(--spacing-4);
}
.footer-corp-addr{
font-size: 0.875rem;
line-height: 1.6;
margin-top: var(--spacing-20);
}
.footer-social {
display: flex;
gap: 16px;
margin-top: var(--spacing-20);
}
.footer-social a {
width: 24px;
height: 24px;
display: grid;
}
.footer-before-link-icon {
background: rgb(242 234 224 / 50%);
color: var(--color-secondary-dark);
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
line-height: 1;
margin-right: 6px;
border-radius: 2px;
font-size: 1rem;
display: flex;
} .page-header {
background: var(--color-secondary-dark);
text-align: center;
position: relative;
overflow: hidden;
padding-top: var(--spacing-80);
padding-bottom: var(--spacing-80);
margin-bottom: var(--spacing-40);
}
.page-header .section-sub{
margin-bottom: 0;
}
.page-header .section-title{
color: var(--color-white);
}
.page-header .section-sub{
color: var(--color-white);
}
.page-content{
margin-top: var(--spacing-40);
line-height: 1.8;
}
.content-background{
background: var(--color-secondary-dark);
width: auto;
height: 600px;
position: relative;
border-radius: 20px;
}
.container .inner{
background: var(--color-white);
max-width: 1040px;
margin-left: auto;
margin-right: auto;
padding: var(--spacing-40);
border-radius: 20px;
}
.content-background + .inner{
margin-top: calc(-2.5 * var(--spacing-80));
min-height: 240px;
position: relative;
z-index: 1;
} .company-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_company.jpg);
background-size: cover;
background-position: center;
}
.company-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_company_v2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.company-profile-table {
width: 100%;
border-collapse: collapse;
margin-top: -20px;
}
.company-profile-table th,
.company-profile-table td {
padding: var(--spacing-20) var(--spacing-40);
text-align: left;
vertical-align: top;
}
.company-profile-table th{
border-bottom: 1px solid var(--color-primary);
}
.company-profile-table td{
border-bottom: 1px solid var(--color-secondary);
}
.company-profile-table th {
width: 18%;
font-weight: 700;
}
.company-profile-table td ul {
margin: 0;
padding-left: 0;
list-style-type: none;
}
.company-profile-table td ul li {
margin-bottom: var(--spacing-8);
}
.awards {
padding: 40px 0;
background: var(--color-secondary-light);
margin-top: 0 !important;
}
.content-inner {
background: var(--color-white);
width: min(1200px, 100%); max-width: 100%;
padding: var(--spacing-40);
border-radius: 20px;
margin-left: auto; margin-right: auto; box-sizing: border-box; }
.content-inner .awards-item:nth-child(odd) {
background: var(--color-secondary-lightest);
}
.awards-item{
display: flex;
align-items: center;
padding: var(--spacing-20);
border-radius: 12px;
}
.awards-item dt,
.awards-item dd {
display: flex;
align-items: center;
}
.awards-item dt{
margin-right: 4px;
color: var(--color-primary);
}
.about-nav{
margin-bottom: var(--spacing-40);
}
.about-nav-primary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.about-nav-primary .about-nav-item a {
display: flex;
align-items: center;
padding: 20px;
border-radius: 8px;
font-weight: 600;
color: var(--color-primary);
transition: 0.3s all;
text-align: center;
justify-content: center;
position: relative;
background: var(--color-secondary-light);
}
.about-nav-primary .about-nav-item a:hover {
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.about-nav-primary .about-nav-item a .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
}
.about-nav-primary .about-nav-item a.active{
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.about-nav-secondary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: var(--spacing-20);
}
.about-nav-secondary .about-nav-item a {
display: flex;
align-items: center;
padding: 10px;  border-radius: 8px;
font-weight: 600;
color: var(--color-primary);
background: var(--color-secondary-light);
transition: 0.3s all;
text-align: center;
justify-content: center;
position: relative;
}
.about-nav-secondary .about-nav-item a:hover {
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.about-nav-secondary .about-nav-item a .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
}
.about-nav-secondary .about-nav-item a.active{
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
} .message-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_company.jpg);
background-size: cover;
background-position: center;
}
.content-top-message {
font-size: 2rem;
font-weight: 700;
text-align: center;
padding: var(--spacing-40);
border-radius: 20px;
position: relative;
}
.content-top-message::before,
.content-top-message::after{
content: "";
position: absolute;
width: 64px;
height: 64px;
}
.content-top-message::before {
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/message_top_left.svg) no-repeat;
top: 0;
left: 0;
}
.content-top-message::after {
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/message_bottom_right.svg) no-repeat;
bottom: 0;
right: 0;
}
.content-message-body{
display: flex;
gap: var(--spacing-40);
justify-content: space-between;
margin-top: var(--spacing-40);
}
.message-body-txt{
flex: 1;
}
.message-body-txt h4{
font-size: 1.5rem;
font-weight: 700;
margin-top: 20px;
margin-bottom: 10px;
}
.message-body-pic{
width: 280px;
}
.message-body-pic img{
border-radius: 20px;
max-width: 100%;
}
.profile-content{
padding: 40px 0;
background: var(--color-secondary-light);
} .purpose-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_company.jpg);
background-size: cover;
background-position: center;
}
.purpose-tegaki-txt{
text-align: center;
}
.purpose-tegaki-txt img{
width: 640px;
transform: rotate(-5deg);
margin-left: auto;
margin-right: auto;
}
.purpose-vision-container {
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.purpose-vision-container-alt {
padding: 40px;
background:#F2EAE0;
border-radius:20px;
margin-top:40px;
}
.purpose-vision-txt{
flex: 1;
}
.purpose-vision-txt h5{
font-size:1.25rem;
font-weight:700;
}
.contract-chart-title{
font-size:1.125rem;
text-align: center;
font-weight: 700;
}
.contract-chart-container{
position: relative;
height: 400px;
margin-top: var(--spacing-10);
}
.contract-chart-row {
margin-top: var(--spacing-10);
display: flex;
gap: 40px;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.chart-wrapper {
flex: 0 0 480px;
height: 480px;
}
.chart-wrapper canvas {
max-width: 100%;
}
.chart-legend {
flex: 0 1 180px;
display: flex;
align-items: center;
}
.chart-legend ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.chart-legend li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-secondary-darker);
}
.chart-legend li span:first-child {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 2px;
flex-shrink: 0;
}
.purpose-vision-container img{
border-radius: 20px;
width: 240px;
max-width: 100%;
}
.purpose-common-container{
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.purpose-common-container img{
width: 280px;
max-width: 100%;
border-radius: 20px;
}
.purpose-common-txt{
flex: 1;
}
.purpose-common-txt h4 {
font-size: 1.5rem;
font-weight: 700;
margin-top: 20px;
margin-bottom: 10px;
}
.purpose-card-view{
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
align-content: flex-start;
margin-top: var(--spacing-10);
}
.purpose-card-view li{
width: calc(33.333% - 20px);
}
.purpose-card-view li h6{
margin-top: var(--spacing-10);
font-size: 1.125rem;
}
.purpose-card-view img{
border-radius: 20px;
width: 320px;
max-width: 100%;
}
.purpose-decorate-img{
width: 390px;
position: absolute;
bottom: 0px;
right: 20px;
opacity: 0.7;
} .history-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_company.jpg);
background-size: cover;
background-position: center;
}
.timeline-content-wrap{
background: var(--color-secondary-light);
padding-top: var(--spacing-40);
padding-bottom: var(--spacing-40);
} .timeline-wrapper {
position: relative;
margin: 0px auto;
} .timeline-wrapper::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-primary);
transform: translateX(-50%);
z-index: 1;
} .timeline-item {
position: relative;
display: flex;
align-items: flex-start;
clear: both;
} .timeline-item.left {
justify-content: flex-start;
}
.timeline-item.left .timeline-content {
padding-right: 80px;
position: relative;
} .timeline-item.left .timeline-content::after {
content: '';
position: absolute;
right: 0;
top: calc(40px);
width: 400px;
height: 1px;
background: var(--color-secondary);
z-index: 0;
}
.timeline-item.left .timeline-year {
left: 50%;
transform: translateX(-50%);
} .timeline-item.right {
justify-content: flex-end;
}
.timeline-item.right .timeline-content {
padding-left: 80px;
position: relative;
} .timeline-item.right .timeline-content::after {
content: '';
position: absolute;
left: 0;
top: calc(40px);
width: 84px;
height: 1px;
background: var(--color-secondary);
z-index: 0;
}
.timeline-item.right .timeline-year {
right: 50%;
transform: translateX(50%);
} .timeline-year {
width: 80px;
height: 80px;
background: var(--color-primary);
border-radius: 50%;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: bold;
z-index: 2;
line-height: 1.2;
} .timeline-content {
width: 50%;
} .timeline-text {
width: 100%;
}
.timeline-era {
display: inline-block;
width: 84px;
background: var(--color-secondary-dark);
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 48px;
color: #fff;
font-size: 0.75rem;
line-height: 1;
margin-bottom: var(--spacing-10);
margin-top: calc(40px - 10px);
z-index: 1;
position: relative;
}
.timeline-title {
font-size: 1.125rem;
font-weight: bold;
color: var(--color-primary);
line-height: 1.6;
}
.timeline-description {
font-size: 0.875rem;
line-height: 1.6;
margin-top: var(--spacing-10);
}
.timeline-content-table{
width: 100%;
border-collapse: collapse;
}
.timeline-content-table th{
width: 78px;
vertical-align: top;
font-size: 1.125rem;
line-height: 1.6;
font-weight: 600;
color: var(--color-secondary-darker);
}
.timeline-content-table td{
padding-bottom: var(--spacing-20);
}
.timeline-content-table td img{
max-width: 100%;
max-height: 240px;
height: auto;
}
.timeline-pos-offset-nmt40{
margin-top: -40px;
}
.timeline-pos-offset-nmt54{
margin-top: -54px;
}
.timeline-pos-offset-nmt74{
margin-top: -74px;
}
.timeline-pos-offset-nmt80{
margin-top: -80px;
}
.timeline-pos-offset-nmt84{
margin-top: -84px;
}
.timeline-pos-offset-nmt96{
margin-top: -96px;
}
.timeline-pos-offset-nmt110{
margin-top: -110px;
}
.timeline-pos-offset-nmt154{
margin-top: -154px;
}
.timeline-pos-offset-nmt160{
margin-top: -160px;
}
.timeline-pos-offset-nmt180{
margin-top: -180px;
}
.timeline-pos-offset-nmt164{
margin-top: -164px;
}
.timeline-pos-offset-nmt196{
margin-top: -196px;
}
.timeline-pos-offset-nmt198{
margin-top: -198px;
}
.timeline-pos-offset-nmt248{
margin-top: -248px;
}
.timeline-pos-offset-nmt254{
margin-top: -254px;
}
.timeline-pos-offset-nmt280{
margin-top: -280px;
} .service-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.service-rentaloffice-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.service-seminar-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.service-meetup-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.service-advisory-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.service-government-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_service.jpg);
background-size: cover;
background-position: center;
}
.common-img-320 {
border-radius: 20px;
width: 320px;
max-width: 100%;
}
.common-img-280 {
border-radius: 20px;
width: 280px;
max-width: 100%;
}
.service-nav{
margin-bottom: var(--spacing-40);
}
.service-nav-primary {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.service-nav-primary .service-nav-item a {
display: flex;
align-items: center;
padding: 20px;
border-radius: 8px;
font-weight: 600;
color: var(--color-primary);
transition: 0.3s all;
text-align: center;
justify-content: center;
position: relative;
background: var(--color-secondary-light);
font-size: 0.875rem;
}
.service-nav-primary .service-nav-item a:hover {
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.service-nav-primary .service-nav-item a .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
}
.service-nav-primary .service-nav-item a.active{
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.service-nav-secondary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: var(--spacing-20);
}
.service-nav-secondary .service-nav-item a {
display: flex;
align-items: center;
padding: 10px;
border-radius: 8px;
font-weight: 600;
color: var(--color-primary);
background: var(--color-secondary-light);
transition: 0.3s all;
text-align: center;
justify-content: center;
position: relative;
font-size: 0.875rem;
}
.service-nav-secondary .service-nav-item a:hover {
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.service-nav-secondary .service-nav-item a .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
}
.service-nav-secondary .service-nav-item a.active{
background: var(--color-primary);
color: var(--color-white);
opacity: 1;
}
.service-content h3{
font-size:1.5rem;
font-weight:700;
margin-bottom: var(--spacing-20);
} .common-direct-link{
margin-top: 0;
background: #fff;
color: var(--color-primary);
padding: 24px 0px;
border-radius: 128px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-primary);
font-weight: 700;
font-size: 1.25rem;
position: relative;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.common-direct-link .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
font-size: 1.75rem;
}
.common-contact .container{
border-radius: 20px;
padding: var(--spacing-40);
text-align: center;
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/common_contact_bg.jpg);
margin-top: 0 !important; background-size: cover;
background-position: center;
}
.common-contact-container{
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
justify-content: center;
}
.common-contact-title{
font-size: 2.0rem;
font-weight: 700;
color: var(--color-white);
}
.common-contact-item a{
font-size: 1.25rem;
display: inline-block;
color: var(--color-primary);
background: var(--color-white);
border-radius: 128px;
font-weight: 700;
padding: 20px 80px;
position: relative;
min-width: 320px;
}
.common-contact .section-sub{
color: var(--color-white);
}
.common-contact-item a span.material-symbols-rounded {
right: var(--spacing-20);
position: absolute;
font-size: 1.75rem;
}
.service-solve-header{
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--spacing-20);
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
border: 0;
position: relative;
}
.service-solve-header::before, 
.service-solve-header::after {
content: '';
width: 48px;
height: 2px;
background: var(--color-text);
}
.service-solve-header::before{
margin-right: 0px;
transform: rotate(48deg);
}
.service-solve-header::after{
margin-left: 0px;
transform: rotate(-48deg);
}
.service-solve-header img{
height: var(--spacing-40);
margin-right: var(--spacing-4);
}
.service-solve-content{
display: flex;
background: var(--color-secondary-light);
flex-direction: column !important;
padding-top: 0;
padding-bottom: 0;
gap: 20px;
align-items: center !important;
}
.solve-balloon-list{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.solve-balloon-list li{
position: relative;
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
line-height: 1.6;
background: #fff;
padding: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
min-width: 280px;
}
.solve-balloon-list li.sting-left::after{
content: "";
position: absolute;
height: calc(32px / 2 * tan(60deg));
width: 24px;
clip-path: polygon(0% 0, 100% 100%, 0 100%);
transform: rotate(90deg);
bottom: -16px;
left: 24px;
background: #ffffff;
}
.solve-balloon-list li.sting-right::after{
content: "";
position: absolute;
height: calc(32px / 2 * tan(60deg));
width: 24px;
clip-path: polygon(0% 0, 100% 100%, 0 100%);
transform: rotate(90deg) scale(1, -1);
bottom: -16px;
right: 24px;
background: #ffffff;
}
.solve-balloon-header{
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--color-primary);
line-height: 24px;
}
.solve-balloon-header-and-txt{
margin-left: 5px; }
.solve-img{
width: 540px;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: -40px;
}
.solve-balloon-arrow-and-txt{
display: flex;
align-items: flex-start;
flex-direction: row;
} .service-rentaloffice-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_service_rentaloffice.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-seminar-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_service_seminar.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-meetup-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_service_meetup.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-advisory-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_service_advisory.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-government-content .content-background{
background: url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_bg_service_government.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.service-features {
padding: 40px 0;
background: var(--color-secondary-light);
margin-top: 0 !important;
}
.service-features-common-container {
display: flex;
flex-direction: row;
gap: 20px;
align-items: flex-start;
}
.service-features-common-txt{
flex: 1;
}
.service-features-common-txt h3 {
font-size: 1.5rem;
font-weight: 700;
}
.features-header-num{
font-size: 1.125rem;
line-height: 1.6;
font-weight: 600;
color: var(--color-secondary-darker);
}
.features-ul-container {
display: flex;
gap: 20px;
padding: 20px;
border-radius: 10px;
background: var(--color-secondary-lightest);
}
.features-ul-item ul{
list-style: square;
color: var(--color-primary);
margin-left: var(--spacing-20);
margin-right: var(--spacing-20);
}
.features-ul-item ul li span{
color: var(--color-text);
}
.service-solve-ul-container{
display: flex;
}
.service-solve-ul-center{
border-left: 2px dotted var(--color-secondary-dark);
border-right: 2px dotted var(--color-secondary-dark);
margin-left: 20px;
margin-right: 20px;
padding-left: 20px;
padding-right: 20px;
}
.service-solve-ul-container ul{
padding-top: 20px;
}
.service-solve-ul-container ul li span.material-symbols-rounded{
color: var(--color-primary);
}
.seminar-example-container{
display: grid;
gap: 40px;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
grid-template-columns: repeat(2, 1fr);
margin-top: 30px;
margin-bottom: 40px;
}
.seminar-example-container .seminar-example:nth-child(3) {
grid-column: 1 / -1;
width: 480px;
margin-left: auto;
margin-right: auto;
background: none !important;
padding: 0;
}
.seminar-report-link{
margin-top: 0;
background: #fff;
color: var(--color-primary);
padding: 24px 0px;
border-radius: 128px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-primary);
font-weight: 700;
font-size: 1.25rem;
position: relative;
}
.seminar-report-link .material-symbols-rounded {
position: absolute;
right: var(--spacing-20);
font-size: 1.75rem;
}
.seminar-example{
background: var(--color-secondary-light) !important;
}
.seminar-example h3{
background: var(--color-secondary-dark);
padding: 20px 40px;
display: block;
border-radius: 10px;
color: var(--color-white);
line-height: 1;
position: relative;
margin-top: -70px;
z-index: 1;
font-size: 1.25rem;
text-align: center;
}
.example-ul{
list-style: square;
color: var(--color-primary);
margin-left: var(--spacing-20);
margin-right: var(--spacing-20);
}
.example-ul li span{
color: var(--color-text);
}
.expert-registration summary {
display: flex;
align-items: center;
padding: 20px 40px;
border: 1px solid var(--color-secondary);
font-weight: bold;
color: var(--color-primary);
cursor: pointer;
justify-content: space-between;
border-radius: 10px;
line-height: 1;
transition: all 0.3s;
position: relative;
background: var(--color-secondary-lightest);
}
.expert-registration summary::-webkit-details-marker {
display: none;
}
.expert-registration summary:hover {
border: 1px solid var(--color-primary);
background: var(--color-primary);
color: var(--color-white);
}
.expert-registration details summary .summary-icon-add,
.expert-registration details summary .summary-icon-remove {
position: absolute;
right: 20px;
transition: opacity 0.3s;
}
.expert-registration details summary .summary-icon-add {
opacity: 1;
}
.expert-registration details[open] summary .summary-icon-add {
opacity: 0;
}
.expert-registration details summary .summary-icon-remove {
opacity: 0;
}
.expert-registration details[open] summary .summary-icon-remove {
opacity: 1;
}
.expert-registration details[open] summary{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} .expert-registration details .summary-content {
border-left: 1px solid var(--color-secondary);
border-right: 1px solid var(--color-secondary);
border-bottom: 1px solid var(--color-secondary);
border-top: none;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s, opacity 0.3s;
}
.expert-registration details[open] .summary-content {
opacity: 1;
padding: 24px 40px;
}
.expert-registration details .summary-content-inner {
padding: 24px 40px;
}
.expert-registration details[open] .summary-content ul li{
margin-top: 10px;
}
.expert-registration details[open] .summary-content ul li:first-child{
margin-top: 0;
}
.advisory-table h4{
margin-top: var(--spacing-20);
font-size: 1.25rem;
font-weight: 700;
}
.advisory-table table {
width: 100%;
border-collapse: collapse;
margin-top: var(--spacing-10);
}
.advisory-table table th{
color: var(--color-primary);
border-bottom: 1px solid var(--color-primary);
}
.advisory-table table th,
.advisory-table table td{
padding:var(--spacing-10) var(--spacing-20);
}
.advisory-table table tbody tr:nth-child(odd) {
background: var(--color-secondary-lightest);
}
.advisory-table table th.advisory-cat,
.advisory-table table td.advisory-cat {
width: 120px;
padding-right: 0;
}
.advisory-table-wrapper{
overflow: hidden;
position: relative;
transition: all 0.3s;
}
.advisory-table-button {
display: none;
}
.advisory-table-button button {
background: var(--color-secondary-dark);
color: var(--color-white);
border: none;
border-radius: 128px;
padding: 10px 20px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
width: 180px;
justify-content: center;
}
.advisory-table-preview {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-secondary);
border-radius: 10px 10px 0 0;
}
.advisory-table-preview th,
.advisory-table-preview td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid var(--color-secondary);
}
.advisory-table-preview th {
background: var(--color-secondary-light);
font-weight: bold;
color: var(--color-primary);
}
.advisory-table-preview th.advisory-cat,
.advisory-table-preview td.advisory-cat {
width: 120px;
color: var(--color-primary);
}
.advisory-details {
border: 1px solid var(--color-secondary);
border-top: none;
border-radius: 0 0 10px 10px;
overflow: visible;
}
.advisory-details summary {
display: block;
padding: 15px 20px;
background: var(--color-secondary-light);
color: var(--color-primary);
cursor: pointer;
font-weight: bold;
text-align: center;
transition: all 0.3s ease-out;
border-radius: 0 0 10px 10px;
}
.advisory-details summary:hover {
background: var(--color-secondary);
}
.advisory-details summary::-webkit-details-marker {
display: none;
}
.advisory-details[open] summary {
border-radius: 0;
margin-bottom: 0;
}
.advisory-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
}
.advisory-details[open] .advisory-content {
opacity: 1;
}
.advisory-table-full {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-secondary);
border-top: none;
border-radius: 0 0 10px 10px;
margin-bottom: 0;
}
.advisory-table-full th,
.advisory-table-full td {
padding: 15px 20px;
text-align: left;
border-bottom: 1px solid var(--color-secondary);
}
.advisory-table-full th.advisory-cat,
.advisory-table-full td.advisory-cat {
width: 120px;
color: var(--color-primary);
}
.advisory-details[open] summary {
border-radius: 0;
}
.advisory-details[open] .advisory-table-full {
border-radius: 0 0 10px 10px;
}
.advisory-table-wrapper.expanded::after {
background: none;
}
.material-symbols-rounded.rotated {
transform: rotate(180deg);
}
.government-contract-header-h4 {
margin-top: var(--spacing-20);
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
background: var(--color-secondary-dark);
padding: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
}
.government-contract-header-h4 strong{
color: var(--color-secondary-darker);
background: var(--color-white);
font-weight: 600;
padding: 10px 10px;
font-size: 1rem;
line-height: 1;
border-radius: 5px;
margin-right: 10px;
display: inline-block;
}
.government-contract-header-content{
display: flex;
gap: 20px;
align-items: center;
padding: var(--spacing-20);
background: var(--color-secondary-lightest);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.government-contract-header-content-inner{
flex: 1;
}
.government-common-header-h4 {
font-size: 1.25rem;
font-weight: 700;
}
.government-startup-flow{
position: relative;
margin-top: var(--spacing-20);
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
}
.government-startup-flow-item{
position: relative;
width: 220px;
height: 150px;
background: var(--color-secondary-light);
border-radius: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.government-startup-flow-item::after{
font-family: 'Material Symbols Rounded';
content: "\e8e4";
position: absolute;
color: var(--color-primary);
font-size: 2rem;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
right: -36px;
}
.government-startup-flow li:last-child::after{
display: none;
}
.government-startup-flow-num{
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 48px;
width: 48px;
font-weight: 700;
color: var(--color-white);
background: var(--color-primary);
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
font-size: 1.125rem;
font-style: oblique;
letter-spacing: 0.08em;
}
.government-startup-flow-item h5{
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
}
.government-startup-flow-item h6{
position: absolute;
bottom: var(--spacing-20);
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
color: var(--color-primary);
} .media-container{
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.media-content{
flex: 1;
}
.media-list .media-item:first-child{
margin-top: 0;
}
.media-item{
margin-top: var(--spacing-20);
border-bottom: 1px solid var(--color-secondary);
margin-bottom: var(--spacing-20);
padding-bottom: var(--spacing-20);
}
.media-item a{
display: flex;
position: relative;
gap: 20px;
align-items: center;
}
.media-info{
flex: 1;
margin-top: -32px;
}
.media-info time{
font-weight: 700;
color: var(--color-secondary-darker);
}
.media-info h3{
font-size: 1.125rem;
}
.media-thumbnail img{
aspect-ratio: 1 / 0.683;
border-radius: 10px;
object-fit: cover;
width: 220px;
line-height: 1;
}
.media-category nav ul{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 20px;
border-radius: 128px;
margin-bottom: 40px;
background: var(--color-secondary-light);
}
.media-category nav ul li{
width: calc(20% - 20px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.media-category nav ul li a{
display: flex;
justify-content: center;
width: 100%;
align-items: center;
background: var(--color-secondary);
padding: 14px 0px;
line-height: 1;
border-radius: 128px;
}
.media-category nav ul li a.active{
background: var(--color-primary);
color: var(--color-white);
font-weight: 700;
}
.media-category-label{
background: var(--color-primary);
color: var(--color-white);
font-size: 0.75rem;
padding: 6px 10px;
border-radius: 2px;
line-height: 1;
width: 106px;
text-align: center;
}
.media-feature-label{
background: var(--color-secondary);
color: var(--color-text);
font-size: 0.75rem;
padding: 6px 10px;
border-radius: 2px;
line-height: 1;
text-align: center;
}
.media-meta{
display: flex;
gap: 20px;
align-items: center;
margin-bottom: var(--spacing-10);
}
.archive-content {
width: 240px;
padding: 20px;
background: var(--color-secondary-lightest);
border-radius: 20px;
}
.archive-content ul li a{
display: flex;
align-items: center;
justify-content: space-between;
line-height: 1;
padding: 20px 10px;
border-bottom: 1px solid var(--color-secondary);
} .news-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_news.jpg);
background-size: cover;
background-position: center;
}
.news-container{
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start;
}
.news-content{
flex: 1;
}
.news-list .news-item:first-child{
margin-top: 0;
}
.news-item{
margin-top: var(--spacing-20);
border-bottom: 1px solid var(--color-secondary);
margin-bottom: var(--spacing-20);
padding-bottom: var(--spacing-20);
}
.news-item a{
display: flex;
position: relative;
gap: 20px;
align-items: center;
}
.news-info{
flex: 1;
margin-top: -32px;
}
.news-info time{
font-weight: 700;
color: var(--color-secondary-darker);
}
.news-info h3{
font-size: 1.125rem;
}
.news-thumbnail img{
aspect-ratio: 1 / 0.683;
border-radius: 10px;
object-fit: cover;
width: 220px;
line-height: 1;
}
.news-category nav ul{
display: flex;
align-items: center;
flex-direction: row;
width: 100%;
justify-content: space-between;
padding: 20px;
border-radius: 128px;
margin-bottom: 40px;
background: var(--color-secondary-lightest);
}
.news-category nav ul li{
width: calc(20% - 40px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.news-category nav ul li a{
display: flex;
justify-content: center;
width: 100%;
align-items: center;
background: var(--color-secondary);
padding: 14px 0px;
line-height: 1;
border-radius: 128px;
}
.news-category nav ul li a.active{
background: var(--color-primary);
color: var(--color-white);
font-weight: 700;
}
.news-category-label{
background: var(--color-primary);
color: var(--color-white);
font-size: 0.75rem;
padding: 6px 10px;
border-radius: 2px;
line-height: 1;
width: 106px;
text-align: center;
}
.news-feature-label{
background: var(--color-secondary);
color: var(--color-text);
font-size: 0.75rem;
padding: 6px 10px;
border-radius: 2px;
line-height: 1;
text-align: center;
}
.news-meta{
display: flex;
gap: 20px;
align-items: center;
margin-bottom: var(--spacing-10);
}
.news-event-detail {
margin-bottom: 20px;
margin-bottom: 2rem
}
.news-event-detail td, .news-event-detail th {
vertical-align: top;
line-height: 1.8
}
.news-event-detail td {
padding-left: 10px;
padding-left: 1rem
} .movie-list-grid{
display: grid;
grid-template-columns: repeat(3, 280px);
gap: 20px;
justify-content: start;
border-bottom: 1px solid var(--color-secondary);
padding-bottom: 40px;
}
.movie-item a{
display: block;
position: relative;
}
.movie-thumb{
border-radius: 20px;
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.movie-thumb .play-icon {
position: absolute;
width: 84px;
filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.7));
transition: all 0.3s;
z-index: 1;
top: calc(50% - 42px);
left: calc(50% - 42px);
}
.movie-thumb .thumb-img{
width: 100%;
object-fit: cover;
display: block;
}
.movie-title{
font-size: 1rem;
font-weight: 700;
line-height: 1;
margin-top: var(--spacing-20);
margin-bottom: var(--spacing-20);
} .recruit-header {
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_recruit.jpg);
background-size: cover;
background-position: center;
}
.recruit-container{
gap: 20px;
display: flex;
flex-direction: column;
}
.recruit-item{
border: 1px solid var(--color-secondary);
padding: 20px;
border-radius: 10px;
position: relative;
}
.recruit-item a{
color: var(--color-secondary-darker) !important;
}
.recruit-item .detail-link-block{
background: var(--color-secondary-dark);
color: #fff;
font-size: 0.875rem;
text-align: center;
display: inline-block;
line-height: 1;
padding: 6px;
position: absolute;
right: 20px;
border-radius: 2px;
} .contact-header{
background: linear-gradient(rgba(96, 84, 68, 0.8), rgba(96, 84, 68, 0.8)), url(//ginzasecondlife.co.jp/cms/wp-content/themes/gsl/new-theme-assets/img/page_header_contact.jpg);
background-size: cover;
background-position: center;
}
.contact-content{
background: var(--color-secondary-light);
padding-top: var(--spacing-40);
padding-bottom: var(--spacing-40);
}
.contact-table {
width: 100%;
}
.contact-table th {
padding: var(--spacing-20);
border-bottom: 1px solid var(--color-secondary);
font-size: 1rem;
}
.contact-table td{
padding: 20px 20px;
border-bottom: 1px solid var(--color-secondary);
font-size: 1rem;
}
.contact-table .col-required {
width: 68px;
padding-right: 0;
padding-top: 32px;
vertical-align: top;
border-bottom: 1px solid var(--color-primary);
}
.contact-table .col-head {
position: relative;
vertical-align: middle;
padding-right: 0;
width: 236px;
border-bottom: 1px solid var(--color-primary);
}
.contact-table .col-head label{
line-height: 26px;
}
.contact-table .col-head span.req {
background: var(--color-primary);
color: #fff;
font-size: 0.875rem;
width: 64px;
text-align: center;
display: inline-block;
line-height: 1;
padding: 6px;
position: absolute;
right: 20px;
border-radius: 2px;
}
.contact-table .col-input{
vertical-align: middle;
}
.contact-table .col-input small{
margin-left: 4px;
}
.contact-table .col-input input {
line-height: 1;
padding-left: 10px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
}
.contact-table .col-input input[type=text],
.contact-table .col-input input[type=email],
.contact-table .col-input input[type=tel],
.contact-table .col-input input[type=url] {
height: 32px
}
.contact-table .col-input input,
.contact-table .col-input textarea,
.contact-table select {
font-size: 1rem;
border: 1px solid var(--color-secondary-dark);
border-radius: 4px;
background: #fffbf6;
}
.contact-table select {
outline: none;
margin-bottom: 10px;
line-height: 1;
padding-left: 10px;
padding-right: 10px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 10px;
width: 180px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d7f6e' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 20px;
padding-right: 32px;
}
.contact-table select::-ms-expand {
display: none;
}
.contact-table .col-input textarea {
padding: 10px;
width: 99%;
min-height: 200px;
font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.4
}
.contact-table .mail-re-input {
margin-top: 10px
}
.contact-table .mail-description {
line-height: 28px;
padding-bottom: 10px;
display: inline-block
}
.contact-table .field-addr-city, .contact-table .field-addr-street, .contact-table .mwform-zip-field input {
margin-bottom: 10px
}
.contact-table .field-xshort {
width: 140px
}
.contact-table .field-short {
width: 240px
}
.contact-table .field-long {
width: 480px
}
.contact-table .field-middle {
width: 360px
}
.accept-privacy {
text-align: center;
padding: 20px;
}
.accept-privacy p {
margin-bottom: 10px;
line-height: 1
}
.contact-btn-wrap{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.25rem;
text-align: center;
margin-top: var(--spacing-20);
}
.btn-back-wrap input, .btn-success-wrap input {
outline: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
border: 0;
text-decoration: none;
display: inline-block;
transition: all .3s;
background: var(--color-primary);
color: #fff;
border-radius: 128px;
font-weight: 700;
padding: 20px 80px;
position: relative;
display: flex;
align-items: center;
text-align: center;
}
.btn-back-wrap input {
background: var(--color-secondary);
margin-right: 40px;
color: var(--color-text)
}
.btn-success-wrap input {
font-weight: 700;
color: #fff;
background: #f76102
}
.btn-back-wrap input:active, .btn-back-wrap input:hover, .btn-success-wrap input:active, .btn-success-wrap input:hover, .mailmagazine-btn input:hover {
opacity: .7
}
.form-errors{
color: var(--color-danger);
font-size: 1rem;
background: #ffecea;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: 700;
}
.progressbar {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
.progressbar li {
position: relative;
list-style-type: none;
text-align: center;
text-transform: uppercase;
width: 33.333%;
color: var(--color-secondary-dark);
font-weight: bold;
counter-increment: steps;
}
.progressbar li:before {
display: flex;
width: 48px;
height: 48px;
margin: 0px auto 10px auto;
content: '';
font-size: 1.5rem;
text-align: center;
border-radius: 50%;
background-color: var(--color-secondary-dark);
content: counter(steps);
line-height: 1;
align-items: center;
justify-content: center;
color: var(--color-white);
z-index: 1;
position: relative;
}
.progressbar li:after {
position: absolute;
top: 22px;
left: -50%;
width: 100%;
height: 2px;
content: '';
background-color: var(--color-secondary-dark);
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active,
.progressbar li.complete{
color: var(--color-primary);
}
.progressbar li.active:before,
.progressbar li.complete:before {
background-color: var(--color-primary);
color: #FFF;
z-index: 1;
position: relative;
}
.progressbar li.active:after,
.progressbar li.complete:after {
background-color: var(--color-primary);
}
.accept-privacy input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--color-secondary-dark);
border-radius: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.2s all;
}
.accept-privacy input[type="checkbox"]:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
content: "✓";
color: #fff;
font-weight: bold;
font-size: 14px;
}
.accept-privacy .accept-checkbox-wrap{
display: flex;
align-items: center;
gap: 4px;
justify-content: center;
}
.contact-table .col-input input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--color-secondary-dark);
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.2s all;
padding: 0 !important;
}
.contact-table .col-input input[type="radio"]:checked {
background: radial-gradient(circle, var(--color-primary) 40%, transparent 40%);
border-color: var(--color-primary);
}
.radio-field{
display: inline-flex;
align-items: center;
flex-direction: row;
}
.contact-content .contact-header{
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--spacing-20);
}
.mailmagazine-sample{
height: 380px;
overflow-y: scroll;
overflow-x: hidden;
line-height: 1.6;
border: 1px solid var(--color-secondary);
padding: 20px;
margin-top: 20px;
}
.mailmagazine-sample pre{
font-family: 'YakuHanJP', 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size: 1rem;
color: var(--color-text);
white-space: pre-wrap;
} .mobile-menu-toggle {
display: none;
position: relative;
width: 32px;
height: 24px;
background: none;
border: none;
cursor: pointer;
margin-right: 20px;
z-index: 21;
padding: 0;
}
.mobile-menu-toggle span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: var(--color-text);
transition: transform .25s ease, top .25s ease, opacity .2s ease;
transform-origin: center;
}
.mobile-menu-toggle span:nth-child(1) { top: 2px; }
.mobile-menu-toggle span:nth-child(2) { top: 11px; }
.mobile-menu-toggle span:nth-child(3) { top: 20px; }
.mobile-menu-toggle.active span:nth-child(1) {
top: 11px;
transform: rotate(45deg);
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
top: 11px;
transform: rotate(-45deg);
} @media (max-width: 1280px) {
.news-category nav ul {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
gap: 8px;
background: none;
padding: 0;
border-radius: 0;
}
.news-category nav ul li {
flex: 0 0 auto;
width: auto;
min-width: 140px;
}
.news-category nav ul li a {
white-space: nowrap;
padding: 14px 20px;
}
.media-category nav ul {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
gap: 8px;
background: none;
padding: 0;
border-radius: 0;
}
.media-category nav ul li {
flex: 0 0 auto;
width: auto;
min-width: 140px;
}
.media-category nav ul li a {
white-space: nowrap;
padding: 14px 20px;
}
} @media (max-width: 1159px) {
html, body {
overflow-x: hidden;
}
:root {
--mobile-header-height: 78px; }
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 30;
}
main {
padding-top: var(--mobile-header-height);
} .global-nav {
top: var(--mobile-header-height);
height: calc(100dvh - var(--mobile-header-height));
padding: 20px;
}
.header-inner{
padding: 20px 0px;
}
.mobile-menu-toggle {
display: block;
}
.global-nav {
display: flex;
position: fixed;
top: var(--mobile-header-height);
right: 0;
width: 100vw;
height: calc(100dvh - var(--mobile-header-height));
min-width: 0;
background: var(--color-white);
flex-direction: column;
align-items: stretch;
padding: 20px;
transform: translateX(100%);
transition: transform 0.3s ease;
z-index: 20;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
line-height: 1;
}
.gnav-list,
.gnav-item,
.gnav-item > a,
.gnav-mega-menu,
.gnav-mega-menu-list,
.gnav-mega-menu-item,
.gnav-mega-menu-item a,
.global-nav a.nav-cta {
min-width: 0;
}
.global-nav .main-nav,
.global-nav .unique-nav{
font-weight: 700;
}
.gnav-item > a {
white-space: normal;
word-break: break-word;
}
.global-nav.active {
transform: translateX(0);
} .gnav-list {
display: flex;
flex-direction: column;
width: 100%;
gap: 0;
}
.gnav-item {
width: 100%;
border-bottom: 1px solid var(--color-secondary-light);
}
.gnav-item > a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
line-height: 48px !important;
padding: 0 !important;
font-size: 1rem;
}
.gnav-item a.main-nav::after {
display: none !important;
}
.gnav-item a.nav-cta {
margin-top: 16px;
border-radius: 8px;
background: var(--color-primary);
color: #fff;
justify-content: center;
padding: 0 16px !important;
} .gnav-mega-menu {
position: static !important;
opacity: 0;
max-height: 0;
overflow: hidden;
visibility: hidden;
background: none !important;
backdrop-filter: none !important;
transition: max-height .25s ease, opacity .2s ease, visibility .2s ease, padding .25s ease;
width: 100%;
padding: 0;
} .gnav-item.active .gnav-mega-menu {
opacity: 1;
max-height: 1200px;
visibility: visible;
padding: 0;
} .gnav-item:hover .gnav-mega-menu {
opacity: 0;
max-height: 0;
visibility: hidden;
padding: 0;
}
.gnav-item.active:hover .gnav-mega-menu {
opacity: 1;
max-height: 1200px;
visibility: visible;
padding: 0;
} .gnav-mega-menu-list,
.gnav-mega-menu-list.flex-nav {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
}
.gnav-mega-menu-item {
display: block !important;
width: 100% !important;
}
.gnav-mega-menu-item a {
display: flex !important;
align-items: flex-start;
padding: 12px 0px !important;
line-height: 1.4 !important;
}
.common-before-link-icon{
color: var(--color-white) !important;
} .gnav-mega-menu-item a img {
display: none !important;
}
.gnav-mega-menu-item a h2 {
color: var(--color-text) !important;
margin-top: 0 !important;
font-size: 0.95rem !important;
font-weight: 400;
line-height: 1.6;
} .content-background + .inner{
margin-left: 20px;
margin-right: 20px;
}
.home-news-tabs .tab {
padding: 20px 24px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.full-container { width: calc(100% - 40px); }
.hero {
min-height: auto;
padding-top: 56px;
padding-bottom: 32px;
}
.hero-image,
.hero-carousel,
.hero-circle1,
.hero-circle2,
.hero-circle3 {
min-width: 0;
min-height: 0;
}
.hero-visual {
top: 40px;
left: auto;
right: -6vw;
transform: translate(0, -30%);
}
.hero-carousel {
width: clamp(320px, 62vw, 720px);
height: clamp(320px, 62vw, 720px);
}
.hero-image {
width: 100%;
height: 100%;
background-position: center;
}
.hero-circle1,
.hero-circle2,
.hero-circle3 {
width: clamp(320px, 62vw, 720px);
height: clamp(320px, 62vw, 720px);
}
.about-primary { gap: 24px; }
.about-inner { padding: 28px; }
.about-sub-txt { display: none; }
.about-actions { grid-template-columns: repeat(2, 1fr); }
}  @media (max-width: 1279px) {
.brand { margin-left: 24px; }
.brand-name { font-size: 1.25rem; }
.service-grid { grid-template-columns: repeat(3, 1fr); }
.social-inner { grid-template-columns: repeat(4, 1fr); }
.footer-inner { grid-template-columns: repeat(3, 1fr); }
} @media (max-width: 1199px) {
.government-startup-flow{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.government-startup-flow-item{
width: 100%;
}
.government-startup-flow-item::after{
right: 0;
bottom: -35px;
left: calc(50% - 23px);
transform: rotate(90deg);
}
} @media (max-width: 980px) {
.facility-slider-wrapper .slick-prev {
left: calc(10% - 32px) !important;
}
.facility-slider-wrapper .slick-next {
right: calc(10% - 32px) !important;
}
.facility-slider-wrapper .slick-prev,
.facility-slider-wrapper .slick-next{
top: calc(50% - 23px) !important;
}
.facility-slider-wrapper .slick-list {
margin: 0 -10px;
}
.facility-slider-wrapper .slick-track {
display: flex !important;
align-items: stretch;
}
.facility-slider-wrapper .slick-slide {
height: auto;
padding: 0 10px;
}
.facility-slider-wrapper .slick-slide > div {
width: 100%;
display: block; }
.facility-card {
width: 100%; max-width: none;
margin: 0;
}
.facility-image img {
width: 100%;
display: block;
margin: 0;
}
.container { width: min(1200px, 94%); } .hero h1 {
font-size: 2rem;
margin-bottom: 24px;
filter: drop-shadow(4px 4px 6px rgba(36, 34, 32, 0.2));
}
.hero-lead {
font-size: 0.95rem;
}
.hero-visual {
right: -10vw;
top: 60px;
transform: translate(0, -25%);
}
.hero-carousel {
width: clamp(320px, 62vw, 720px);
height: clamp(320px, 62vw, 720px);
}
.hero-image {
width: 100%;
height: 100%;
background-position: center;
}
.hero-circle1,
.hero-circle2,
.hero-circle3 {
width: clamp(320px, 62vw, 720px);
height: clamp(320px, 62vw, 720px);
}
.about-primary {
flex-direction: column;
align-items: stretch;
}
.about-img {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.service-grid {
grid-template-columns: repeat(2, 1fr);
}
.home-news-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 2px;
padding-bottom: 0px;
}
.home-news-tabs .tab {
flex: 0 0 auto;
font-size: 1rem;
white-space: nowrap;
}
.home-news-list { padding: 24px; }
.home-news-item {
flex-direction: column;
gap: 8px;
}
.home-news-item .home-news-info {
flex-wrap: wrap;
}
.home-news-item .label {
margin-left: 12px;
margin-right: 0;
}
.social-inner {
grid-template-columns: repeat(4, 1fr);
}
.footer-inner {
grid-template-columns: repeat(2, 1fr);
}
.newsletter-form {
flex-direction: column;
gap: 12px;
}
.newsletter-form input,
.newsletter-form button {
width: 100%;
border-radius: 128px;
}
.video-slide iframe {
height: 260px;
}
.timeline-item.left .timeline-content{
padding-right: 0;
}
.timeline-item.right .timeline-content{
padding-left: 0;
}
.timeline-item{
flex-direction: column;
align-items: flex-start;
}
.timeline-pos-offset-nmt40,
.timeline-pos-offset-nmt54,
.timeline-pos-offset-nmt74,
.timeline-pos-offset-nmt80,
.timeline-pos-offset-nmt84,
.timeline-pos-offset-nmt96,
.timeline-pos-offset-nmt110,
.timeline-pos-offset-nmt154,
.timeline-pos-offset-nmt160,
.timeline-pos-offset-nmt180,
.timeline-pos-offset-nmt164,
.timeline-pos-offset-nmt196,
.timeline-pos-offset-nmt198,
.timeline-pos-offset-nmt248,
.timeline-pos-offset-nmt254,
.timeline-pos-offset-nmt280{
margin-top:0 !important;
}
.timeline-year{
order: 1;
}
.timeline-content{
order: 2;
}
.timeline-item.left .timeline-year{
transform: translateX(-68px);
}
.timeline-item.right .timeline-year{
transform: translateX(-68px);
}
.news-content{
width: 100%;
padding: 0;
background: none;
}
.archive-content{
width: 100%;
padding: 0;
background: none;
}
.archive-content ul li a{
border-bottom: none;
}
.media-content{
width: 100%;
padding: 0;
background: none;
}
.year-filter ul{
gap: 0;
}
.news-info{
margin-top: 0;
}
.media-info{
margin-top: 0;
}
.movie-sub-content{
display: none;
}
.common-2column-container {
flex-direction: column;
gap: 24px;
}
.sticky-top-offset-100 {
position: static;
top: auto;
}
.common-sub-content-inner {
width: auto;
}
.page-header .section-title {
font-size: 1.8rem;
}
.service-features-common-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.service-features-common-container img,
.common-img-320,
.common-img-280 {
width: 100%;
max-width: 560px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.features-ul-container {
display: block;
}
.features-ul-item {
width: 100%;
}
.government-startup-flow {
display: flex;
flex-direction: column;
gap: 12px;
}
.government-startup-flow-item::after {
content: none;
}
.news-container,
.media-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.year-filter ul {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 0;
margin: 0;
}
.year-filter ul li {
flex: 0 0 auto;
}
.year-filter ul li a {
white-space: nowrap;
}
.news-category nav ul,
.media-category nav ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.movie-list-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.timeline-wrapper::before {
left: 18px;
transform: none;
}
.timeline-item {
width: 100% !important;
margin-top: 0 !important;
padding-left: 48px;
}
.timeline-item.left,
.timeline-item.right {
justify-content: flex-start;
}
.timeline-year {
left: 18px;
transform: translate(-50%, 0);
}
.timeline-content {
width: 100%;
max-width: 100%;
}
.timeline-item.left .timeline-content::after,
.timeline-item.right .timeline-content::after {
content: none;
}
.government-contract-header-content{
flex-direction: column;
}
.government-contract-header-h4{
display: flex;
flex-direction: column;
}
.government-contract-header-h4 strong{
margin-right: 0;
margin-bottom: 10px;
}
.government-contract-header-h4{
line-height: 1.4;
}
.company-profile-table th,
.company-profile-table td {
padding: 12px 12px;
}
} @media (max-width: 800px) {
.home-news-list{
border-top-right-radius: 0px;
}
} @media (max-width: 768px) {
.brand { margin-left: 16px; }
.brand-name { font-size: 1.05rem; }
.hero {
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
} .hero-visual {
right: -22vw;
top: 40px;
transform: translate(0, -20%);
}
.hero-carousel {
width: clamp(260px, 78vw, 520px);
height: clamp(260px, 78vw, 520px);
}
.hero-circle1,
.hero-circle2,
.hero-circle3 {
width: clamp(260px, 78vw, 520px);
height: clamp(260px, 78vw, 520px);
}
.about-inner {
padding: 20px;
margin-bottom: 40px;
}
.about-actions { grid-template-columns: 1fr; }
.service-grid { grid-template-columns: 1fr; }
.service-num { top: -18px; left: -10px; font-size: 2.5rem; }
.social-inner { grid-template-columns: repeat(2, 1fr); }
.footer-inner { grid-template-columns: 1fr; }
.footer-bottom { text-align: left; }
.video-slide iframe { height: 220px; }
.about-txt h2 br{
display: none;
}
.about-txt p br{
display: none;
}
.about-txt{
order: 2;
}
.about-img{
order: 1;
} .hero-inner{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
} .hero-visual{
order: 1;
position: relative;
left: 50%;
right: auto;
top: auto; transform: translateX(-50%) translateY(-200px);
pointer-events: none;
z-index: 1;
width: 120vw; margin: -8px auto 8px;
margin-bottom: -64px;
} .hero-copy{
order: 2;
width: 100%;
z-index: 2;
margin-top: -368px;
} .hero-carousel{
width: 120vw;
height: 120vw;
min-width: 0;
min-height: 0;
margin: 0 auto;
} .hero-image{
background-position: center;
border-radius: 100%;
}
.hero-circle1 {
transform: translate(25%, 70%);
}
.hero-circle2{
transform: translate(-88%, 0%);
width: 740px !important;
height: 740px !important;
}
.hero-circle3{
transform: translate(-25%, 140%);
}
.about{
margin-top: var(--spacing-40);
}
.hero-lead br{
display: none;
}
.full-container { width: calc(100% - 32px); }
.container { width: min(1200px, 92%); }
.page-header .section-title { font-size: 1.6rem; }
.about-nav-primary,
.service-nav-primary {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
img { max-width: 100%; height: auto; }
.movie-list-grid {
grid-template-columns: 1fr;
}
.news-item a,
.media-item a {
display: grid;
grid-template-columns: 120px 1fr;
gap: 12px;
align-items: start;
}
.news-thumbnail img,
.media-thumbnail img {
width: 120px;
height: auto;
}
.contact-table,
.contact-table tbody,
.contact-table tr,
.contact-table th,
.contact-table td {
display: block;
width: 100%;
}
.contact-table .col-required {
display: none;
}
.tel-field,
.zip-field {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.field-num {
width: 6.5em;
}
.news-event-detail td,
.news-event-detail th {
display: block;
text-align: left;
}
.news-event-detail td {
padding-left: 0;
padding-bottom: 1rem;
}
.news-blog-thumb {
width: auto;
float: none;
margin-left: 0;
}
} @media (max-width: 640px) {
.home-news-cta .button {
padding: 16px 48px;
width: 100%;
justify-content: center;
}
.home-news-cta .button span.material-symbols-rounded {
right: 14px;
}
.hero-carousel{
margin-top: 40px;
}
.hero-copy{
margin-top: -318px;
}
.page-content .content-inner{
padding: 20px 20px;
}
.content-background{
width: 100%;
height: auto;
position: relative;
border-radius: 20px;
aspect-ratio: 4 / 3;
}
.content-background + .inner{
margin-top: calc(-2.5 * var(--spacing-40));
padding: 40px 20px;
}
.company-profile-table th,
.company-profile-table td{
display: block;
width: 100%;
box-sizing: border-box;
}
.company-profile-table th{
border-bottom: none;
padding-bottom: 0;
}
.company-profile-table td{
padding-top: 0;
}
.company-profile-table td ul li{
margin-bottom: 0;
}
.awards-item{
display: flex;
align-items: flex-start;
}
.awards-item dt{
margin-right: var(--spacing-20);
}
.content-top-message{
text-align: left;
}
.content-top-message br{
display: none;;
}
.content-message-body{
flex-direction: column;
}
.message-body-txt{
order: 2;
}
.message-body-pic{
order: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.message-body-pic img{
width: 280px;
object-fit: cover;
height: 280px;
object-position: top;
}
.purpose-decorate-img{
display: none;
}
.purpose-tegaki-txt {
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
.purpose-tegaki-txt + .inner{
padding-left: 20px;
padding-right: 20px;
}
.purpose-vision-container{
flex-direction: column;
gap: 20px;
}
.purpose-vision-container img{
width: 100% !important;
max-height: 320px;
object-fit: cover;
object-position: top;
}
.purpose-card-view{
flex-direction: column;
gap: 20px;
}
.purpose-card-view li{
width: 100% !important;
}
.contract-chart-row{
flex-direction: column;
gap: 16px;
}
.chart-wrapper{
width: 100% !important;
height: auto !important;
flex: 0;
}
.profile-content .company-profile-table{
margin-top: 0;
}
.purpose-common-container{
flex-direction: column;
gap: 16px;
}
.purpose-common-container img{
width: 100% !important;
max-height: 320px;
object-fit: cover;
object-position: bottom;
}
.purpose-common-txt{
order: 2;
}
.service-solve-header{
padding-left: 20px;
padding-right: 20px;
line-height: 1.4;
margin-bottom: 0;
}
.service-solve-header::before{
display: none;
}
.service-solve-header::after{
display: none;
}
.service-solve-header img{
display: none;
}
.service-features{
padding-bottom: 0;
}
.service-solve-content{
padding-bottom: 0 !important;
}
.service-features-common-txt{
order: 1;
}
.service-features-common-container img{
order: 2;
}
.solve-balloon-list li.sting-right::after,
.solve-balloon-list li.sting-left::after{
display: none;
}
.solve-balloon-list li{
width: 100%;
margin-top: 0 !important;
}
.common-contact-title{
line-height: 1.4;
}
.common-contact .container{
padding: 20px;
}
.common-contact-container{
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
}
.common-contact-item a{
font-size: 1rem;
padding: 20px 0px;
}
.seminar-example h3{
padding: 20px;
}
.seminar-example-container{
display: flex;
flex-direction: column;
max-width: 100%;
}
.seminar-example-container .seminar-example:nth-child(3){
width: 100%;
font-size: 1rem;
}
.service-features-advisory{
padding-bottom: 40px;
}
.service-features-government{
padding-bottom: 40px;
}
.contact-table .col-head span.req{
right: 0;
}
.contact-table th,
.contact-table td{
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding-left: 0;
padding-right: 0;
}
.contact-table th{
border-bottom: none !important;
padding-bottom: 0 !important;
}
.contact-table td{
padding-top: 0 !important;
}
.contact-table .field-long{
width: 100%;
}
.contact-table .field-xshort{
width: 100%;
}
.contact-table .field-short{
width: 100%;
}
.contact-table .field-middle{
width: 100%;
}
.tel-field, .zip-field{
gap: 4px;
}
.field-num{
width: 64px;
}
.contact-table .col-input textarea{
width: 100%;
margin-top: 10px;
}
.contact-form small{
line-height: 1.4;
}
.accept-privacy{
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.accept-privacy p{
text-align: left;
}
.accept-privacy .accept-checkbox-wrap{
gap:2px;
}
.btn-back-wrap input,
.btn-success-wrap input{
width: 100%;
}
.contact-btn-wrap{
display: flex;
flex-direction: column;
gap: 10px;
}
.btn-success-wrap{
order: 1;
}
.btn-back-wrap{
order: 2;
}
.common-direct-link{
width: 100%;
font-size: 1rem;
}
.news-item a,
.media-item a {
grid-template-columns: 1fr;
}
.news-thumbnail img,
.media-thumbnail img {
width: 100%;
}
.service-solve-content {
flex-direction: column;
gap: 16px;
}
.solve-img {
width: min(360px, 100%);
margin: 0 auto;
}
} @media (max-width: 480px) {
.newsletter-box {
padding: 20px;
}
.section-title {
font-size: 1.6rem;
}
.hero-carousel{
margin-top: 44px;
}
.hero-copy{
margin-top: -294px;
}
.hero-circle1 {
transform: translate(15%, 40%);
}
.hero-circle3 {
transform: translate(0%, 160%);
}
.page-header .section-title {
font-size: 1.4rem;
line-height: 1.4;
}
.breadcrumb-list {
justify-content: flex-start;
flex-wrap: wrap;
row-gap: 6px;
}
.recruit-item a{
flex-direction: column;
align-items: center;
display: flex;
}
.recruit-item .detail-link-block{
position: relative;
right: inherit;
}
} @media (max-width: 425px) {
.hero-visual {
transform: translateX(-50%) translateY(-160px);
}
.hero-copy{
margin-top: -248px;
}
} @media (max-width: 375px) {
.hero-circle1 {
transform: translate(15%, 50%);
}
.hero-circle3 {
transform: translate(10%, 160%);
}
.hero-carousel{
margin-top: 48px;
}
} body.drawer-open {
position: fixed;
left: 0;
right: 0;
width: 100%;
overflow: hidden;
}