@charset "UTF-8";

/*********

DEFAULT RESET

**********/
html, body {
height: -webkit-fill-available;
}
html {
-webkit-text-size-adjust: 100%;
width: 100%;
font-size: 62.5%;
margin-top: 0 !important;
}
body {
width: 100%;
padding: 0;
margin: 0 auto;
font-family: 'Hanken Grotesk', 'Noto Sans JP', ' ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'MS Pゴシック ', 'MS PGothic', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.64;
letter-spacing: 0.1em;
color: #312f30;
background: #fff;
position: relative;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
a:hover,
a:active,
a:focus {
outline: none;
}
div, ol, ul,dl, dt, dd,
h1, h2, h3, h4, h5, h6,
header, footer, nav, section, article, aside, hgroup, menu,
form,
img, figure, picture {
display: block;
margin: 0 auto;
padding: 0;
margin-inline-start: 0;
margin-inline-end: 0;
border: none;
-ms-interpolation-mode: bicubic;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.36;
}
figure img {
width: 100%;
height: auto;
}
dl, ol, ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
table {
width: 100%;
margin: 0;
padding: 0;
word-break: break-all;
word-wrap: break-word;
border-collapse: collapse;
border-spacing: 0;
}
*:before, *:after {
box-sizing: inherit;
}
@media screen and (min-width: 768px) {
body {
font-size: 15px;
font-size: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
body {
font-size: clamp(1.6rem, 5vw, 1.8rem);
}
}


/*********

FONT

**********/
.hg {
display: inline-block;
font-family: "Hanken Grotesk", sans-serif;
font-weight: 900;
transform: scaleY(0.8);
transform-origin: center;
letter-spacing: 0;
}

/*********

IMAGECOLOR

**********/
.bg_sand {
background-color: #e8ece2;
color: #312f30;
}
.bg_forest {
background-color: #606c5c;
color: #fff;
}
.bg_ocean {
background-color: #4d7985;
color: #fff;
}
.bg_midnight {
background-color: #312f30;
color: #fff;
}
.bg_forest_pail {
background-color: #d3e3d1;
color: #fff;
}

/*********

LAYOUT

**********/
.contentswrapper {
overflow: hidden;
}
.secin_row {
width: 100%;
max-width: 1280px;
margin: auto;
padding: 36px 24px;
text-align: center;
}
.flex,
.row_flex {
display: flex;
}
.row_flex {
flex-direction: column;
}
@media screen and (min-width: 768px) {
.row_flex.ms {
flex-direction: row;
}
}
@media screen and (min-width: 1024px) {
.secin_row {
padding: 50px 24px;
}
.row_flex.ls {
flex-direction: row;
}
}
@media screen and (min-width: 1240px) {
.secin_row {
padding: 80px 50px;
}
}



/*********

HEADER

**********/
#header .hdr_rogo,
#header .hdr_rogo_ms {
width: 100%;
padding: 20px 0;
position: fixed;
top: -58px;
opacity: 0;
z-index: 99;
transition: 0.5s;
}
#header.show .hdr_rogo,
#header .hdr_rogo.show,
#header .hdr_rogo_ms.show {
background-color: #606c5c;
opacity: 1;
top: 0;
}
#header .hdr_rogo img,
#header .hdr_rogo_ms img {
width: auto;
height: 28px;
margin: auto 20px;
}
.hamburger-morph {
position: fixed;
top: 13px;
right: 20px;
z-index: 1000;
width: 48px;
height: 48px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
z-index: 9999;
}
.hamburger-morph__icon {
width: 100%;
height: 100%;
}
.hamburger-morph__line {
fill: none;
stroke: #fff;
stroke-width: 6;
transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger-morph__line:nth-child(1) {
stroke-dasharray: 60 207;
}
.hamburger-morph__line:nth-child(2) {
stroke-dasharray: 60 60;
}
.hamburger-morph__line:nth-child(3) {
stroke-dasharray: 60 207;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(1) {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(2) {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
}
.hamburger-morph.active .hamburger-morph__line:nth-child(3) {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}
.nav-morph {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100dvh;
background: rgba(96, 108, 92, 1);
clip-path: circle(0% at calc(100% - 44px) 44px);
transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 900;
}
.nav-morph.active {
clip-path: circle(150% at calc(100% - 44px) 44px);
}
.nav-morph__wrapper,
.modalmenu {
display: flex;
align-items: center;
flex-direction: column;
}
.nav-morph__wrapper {
width: 100%;
height: 100%;
margin-top: 60px;
}
.modalmenu {
justify-content: center;
gap: 24px;
}
.nav__list > li {
margin: 2rem;
}
.nav__list a {
font-size: 3.16rem;
line-height: 1;
color: #fff;
}
.nav__list a,
.nav__list a > span {
display: block;
}
.nav__list a > span._jp {
font-size: 1.3rem;
}
.nav__list .model_child > a {
pointer-events: none;
}
.nav__list .model_child__menu {
margin: 1em 1em 0 0;
}
.nav__list .model_child__menu a {
display: flex;
align-items: center;
gap: 0.5em;
font-size: 1.6rem;
padding: 0.5em;
}
.nav__list .model_child__menu a::before {
content: '- ';
}
.color_palette {
width: 100%;
height: 5px;
display: flex;
}
.color_palette > span {
display: block;
flex: 1;
}
header .callme,
header .callme a {
color: #fff;
font-weight: 700;
text-align: center;
}
header .callme a {
display: block;
font-size: 2.1rem;
font-weight: 400;
}
header .imgs {
width: 100vw;
height: 25dvh;
position: absolute;
left: 0;
bottom: 0;
z-index: 1000;
}
header .imgs img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 900ms;
transition-timing-function: cubic-bezier(0.455, 0.3, 0.515, 0.955);
position: absolute;
top: 0;
left: 0;
}
header .imgs img.show {
opacity: 1;
}
@media screen and (min-width: 768px) {
.nav-morph__wrapper {
width: 66.6666vw;
margin-left: 33.3333vw;
}
.hdr_rogo_ms {
left: 33.3333vw;
}
.nav-morph__wrapper,
.modalmenu {
align-items: flex-start;
}
.modalmenu {
margin-top: 30px;
padding: 0 30px;
gap: 30px;
}
header .callme {
align-items: center;
gap: 1em;
}
header .imgs {
width: 33.3333vw;
height: 100%;
top: 0;
}
}
@media screen and (min-width: 1024px) {
#header,
.nav__list {
display: flex;
width: 100%;
align-items: center;
gap: 1.6em;
background: #606c5c;
position: fixed;
top: -65px;
opacity: 0;
z-index: 99;
transition: 0.5s;
}
#header.show {
top: 0;
opacity: 1;
}
#header .hdr_rogo,
.nav-morph,
.nav__list {
position: static;
top: auto;
left: auto;
}
#header .hdr_rogo {
width: auto;
}
.nav-morph {
width: auto;
height: auto;
background: none;
clip-path: none;
transition: none;
}
.nav-morph__wrapper {
width: 100%;
margin: 0;
flex-direction: row;
}
.nav-morph__hover {
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(0%);
}
.modalmenu {
display: block;
width: auto;
margin-top: 0;
padding: 0 50px;
gap: 0;
}
.nav__list {
opacity: 1;
}
.nav__list > li {
margin: 0;
}
.nav__list a {
font-size: 2.2rem;
opacity: 1;
}
.hamburger-morph,
.nav__list a > span._jp,
header .hdr_rogo_ms,
header .sns_flex,
header .callme,
header .color_palette,
header .imgs {
display: none;
}
.nav__list .model_child > a {
position: relative;
}
.nav__list .model_child__menu {
margin: 0;
position: absolute;
top: 100%;
transform: scaleY(0);
transform-origin: center top;
transition: transform .3s;
width: max-content;
z-index: 1;
}
.model_child:hover .model_child__menu {
transform: scaleY(1);
}
.model_child:hover .model_child__menu li {
background-color: #606c5c;
transition: opacity .3s;
}
.model_child:hover .model_child__menu li > a {
padding: 1em;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.model_child:hover .model_child__menu li:last-child > a {
border-bottom: none;
}
}

/*********

FOOTER

**********/
footer .rogomark {
width: 50%;
margin: auto;
}
footer .sns_flex {
margin: 50px auto;
}
.ft_menu {
display: flex;
flex-wrap: wrap;
gap: 2em 1em;
margin: 50px auto;
transform: translateX(1em);
}
.ft_menu dl {
width: calc(50% - 1em);
text-align: left;
letter-spacing: 0;
}
.ft_menu dt {
font-size: 1.4em;
margin-bottom: 0.64em;
line-height: 1.24;
}
.footer_cpright {
font-size: 1.2rem;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.ft_menu {
max-width: calc(100% - 24px);
margin: 0 auto 50px;
}
.ft_menu dl {
width: calc(33.333% - 1em);
}
}
@media screen and (min-width: 1024px) {
footer .ftCont {
justify-content: space-between;
}
footer .ls_left {
width: 25%;
}
footer .ls_right {
width: 75%;
}
footer .rogomark {
margin-left: 1.12em;
}
footer .sns_flex {
justify-content: flex-start;
}
.ft_menu {
gap: 2em;
}
.ft_menu dl {
width: auto;
white-space: nowrap;
}
.ft_menu dt {
font-size: 1.248761em;
}
.ft_menu dd {
font-size: 0.9148em;
}
}

/*********

COMMON_SETTING

**********/
.sns_flex {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
.sns_flex li a {
display: block;
border: 1px solid #fff;
border-radius: 50%;
padding: 9px;
}
.sns_flex img {
width: 20px;
height: auto;
}
.contentswrapper .secin_row > h2 {
font-weight: 900;
margin-bottom: 1.4em;	
}
.contentswrapper .secin_row > h3 {
font-weight: 700;
margin-bottom: 1.2em;	
}
.contentswrapper .secin_row > h4 {
font-weight: 500;
}
#toppage .topiclist a,
#action a,
footer .ft_menu a {
color: #fff;
}










#loading {
width: 100%;
height: 100%;
background: #312f30;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1;
}
#loading.loaded {
opacity: 0;
visibility: hidden;
transition: opacity 1.4s ease, visibility 1.4s ease;
}





/*********

TOPINDEX

**********/
#firstview {
width: 100vw;
height: 100dvh;
position: relative;
}
.mov_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.mov_background video {
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
.catch_content {
color: #fff;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main_rogo {
width: 100%;
padding: 0 15vw;
position: relative;
z-index: +1;
}
#firstview strong {
display: block;
font-size: 1.14em;
margin-top: 1.6em;
}
.scrollDown {
color: #fff;
font-size: 0.7em;
display: flex;
flex-direction: column;
align-items: center;  
letter-spacing: 2px;
opacity: 0.8;
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}
.scrollDown span {
display: block;
width: 24px;
height: 24px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0) rotate(45deg); }
50% { transform: translateY(10px) rotate(45deg); }
}
@media screen and (min-width: 768px) {
.main_rogo {
padding: 0 26.5vw;
}
#firstview strong {
font-size: 1.32em;
margin-top: 1.82em;
}
}
@media screen and (min-width: 1280px) {
.main_rogo {
max-width: 575px;
padding: 0;
margin: 0 auto;
}
#firstview strong {
font-size: 1.4em;
margin-top: 2.4em;
}
}

/**/
.lineup_copy {
font-size: 4rem;
}
.lc_subs {
display: block;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 2px;	
}
.product_em {
display: block;
font-size: 1.72rem;
margin: 1.24em auto;
}
.product_lead {
margin: 0;
}
.item_intro {
width: 100%;
height: 90dvh;
overflow: hidden;
position: relative;
}
.item_style img {
width: 100%;
height: auto;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
}
.item_txt {
width: 100%;
padding: 0 24px;
position: absolute;
top: 5.5dvh;
left: 0;
z-index: +1;
}
.model_catch {
letter-spacing: 0.2em;
}
.item_tilte {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 1.6em;
}
.brandmark {
width: 40px;
height: auto;
aspect-ratio: 1 / 1;
}
.item_tilte .model_name {
font-size: 3.48rem;
}
.product_txt {
font-size: 0.9em;
text-align: left;
margin-bottom: 1em;
}
.act_btn > a,
.goSpec > a,
.gotoListTop > a {
font-weight: 600;
display: inline-block;
color: #fff;
background: #4d7985;
border-radius: 0.3em;
padding: 0.7em 1.4em;
margin-top: 1em;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.item_intro {
height: 800px;
}
.item_style img {
width: auto;
height: 800px;
left: 50%;
transform: translateX(-50%) 
}
.item_txt {
top: 0;
padding-top: 30px;
}
}
@media screen and (min-width: 1024px) {
.lineup_copy {
font-size: clamp(3.8rem, 5vw, 7.4rem);
}
.lc_subs {
font-size: clamp(1.6rem, 3vw, 1.8rem);
}
#product strong {
font-size: clamp(1.8rem, 4vw, 2.4rem);
}
.brandmark {
width: clamp(40px, 5vw, 80px);
}
.item_tilte .model_name {
font-size: clamp(3.8rem, 5vw, 7.4rem);
}
.item_txt {
padding: 50px 50px;
}
.product_txt {
font-size: clamp(1.6rem, 3.6vw, 1.8rem);
}
#product .item_intro:nth-child(2) {
background-color: #808080;
}
#product .item_intro:nth-child(3) {
background-color: #4e5454;
}
.item_intro  {
min-height: 980px;
}
.item_style img {
height: 980px;
}
.item_txt {
max-width: 1280px;
left: 50%;
transform: translateX(-50%) 
}
}


/*
.tab_buttons {
margin: 2.5em;
}
.tab_buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 1.4em;
}
.tab_buttons li {
font-weight: 600;
border: none;
padding: 0.6em 1.25em;
border-radius: 0.3em;
background: rgba(0,0,0,0.03);
position: relative;
cursor: pointer;
overflow: hidden;
z-index: 0;
}
.tab_buttons li > a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #4d7985;
z-index: -1;
transition: width 0.4s ease;
}
.tab_buttons li.active > a::before {
width: 100%;
}
.tab_buttons li.active > a {
font-weight: 700;
color: #fff;
}
*/
.topiclist {
display: none;
}
.topiclist.active {
display: block;
}
.topiclist li,
.topiclist time {
display: flex;
align-items: center;
gap: 0.5em;
}
.topiclist li  {
padding: 1em 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.topiclist time::before {
content: '\e037';
font-family: 'Material Icons Outlined';
}
#news .topiclist a {
color: #4d7985;
text-align: left;
}
.instaWrap {
margin-top: 1em;
}
.news_more {
margin: 1.4em 0;
text-align: right;
}
.news_more  > a {
font-weight: 600;
display: inline-block;
color: #fff;
font-size: 0.9em;
background: #4d7985;
border-radius: 0.3em;
padding: 0.7em 1.4em;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.tab_buttons li {
padding: 1em;
}
}

/**/
#action .row_flex > li {
flex: 1;
}
#action .col_inner {
padding: 15vw 6.5vw;
text-align: center;
}
.colttl {
font-size: 2em;
display: block;
}
.contact_flex {
align-items: center;
justify-content: center;
margin-top: 1.5em;
position: relative;
}
.contact_flex::after {
content: '';
display: block;
width: 1px;
height: 100%;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0;
left: calc(50% - 1px);
}
.contact_flex a {
display: block;
font-weight: 700;
padding: 0.3em 1.5em;
flex: 1;
}
@media screen and (min-width: 768px) {
#action .col_inner {
padding: 60px 6vw;
}
.contact_flex a {
padding: 0.3em 0;
}
.atphone {
pointer-events: none;
}
}
@media screen and (min-width: 1024px) {
.colttl {
font-size: clamp(3.8rem, 5vw, 7.4rem);
}
}


/*********

INSTAFEED

**********/
#sbi_load .sbi_load_btn,
#sbi_load .sbi_follow_btn a {
display: block;
width: 145px;
}