@charset "utf-8";
/* CSS Document */

#top #conWrap {
	padding-top: 0;
}

#top #g_navi_wrap {
    transform: translateY(-100%);
}
#top #g_navi_wrap.is_show {
    transform: translateY(0);
    /*animation : g_navi 0.6s;*/
}

#top.drawer--left header .drawer-hamburger {
    display: none;
}
#top.is_show.drawer--left header .drawer-hamburger {
    display: block;
}
#top.drawer-open.drawer--left header .drawer-hamburger {
    display: block;
}

#top.drawer--left #topmain .drawer-hamburger {
    position: relative;
    top: auto;
    right: auto;
}
#top.is_show.drawer--left #topmain .drawer-hamburger {
    display: none;
}
#top.drawer-open.drawer--left #topmain .drawer-hamburger {
    /*display: none;*/
}

@media only screen and (max-width: 768px) {
#top #conWrap {
	padding-top: 8rem;
}
#top #g_navi_wrap {
    transform: translateY(0);
}
#top.drawer--left header .drawer-hamburger {
    display: block;
}
}


/* #topmain
----------------------------------------- */
#topmain {
    width: 100%;
	/*height: calc(100vh - 4rem);*/
    /*height: 100vh;*/
    z-index: 2;
    padding: 2.5rem 0 4.5rem;
}

#topmain .inner {
    width: 100%;
	height: 100%;
}

#topmain .topmain_layout {
    width : 100%;
	height: 100%;
    display: flex;
    justify-content: space-between;
	position: relative;
}

#topmain .topmain_layout > .logo_wrap {
    width : calc(390 / 1366 * 100%);
    height: calc(100vh - 2.5rem);
}
#topmain .topmain_layout > .logo_wrap .con {
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
}
#topmain .topmain_layout > .slider_wrap {
    width : calc(976 / 1366 * 100%);
    /*max-width: 100%;*/
    /*height: 100%;
    aspect-ratio: 880 / 1180;*/
    margin-left: 9.5rem;
}

#topmain .swiper-container,
#topmain .swiper-wrapper,
#topmain .swiper-slide {
	width: 100%;
    height: 100%;
}

#topmain .swiper-slide {
    width: 100% !important;
	display: flex;
    align-items: center;
    justify-content: center;
}
#topmain .slide_wrap {
    /*max-width: 100%;
    height: 100%;
    aspect-ratio: 880 / 1180;
    margin: auto;*/
    width: 100%;
    height: 100%;
}

#topmain .slide_wrap img {
	width: 100%;
    height: 100%;
    object-fit: contain;
}

#topmain .top_slider .swiper-pagination {
    position: absolute;
    left: 7rem;
    /*top: 50%;*/
    top: 50vh;
    bottom: auto;
    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#topmain .top_slider .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    background: #adaeaf;
    opacity: 1;
}
#topmain .top_slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #595757;
}


@media only screen and (max-width: 768px) {
#topmain {
	height : calc(100vh - 8rem);
    height : calc(calc(var(--vh, 1vh) * 100) - 8rem);
    padding: 0;
}
#topmain .inner {
}

#topmain .topmain_layout {
    width : 100%;
	height: 100%;
    display: flex;
    justify-content: space-between;
	position: relative;
}

#topmain .topmain_layout > .logo_wrap {
    display: none;
}
#topmain .topmain_layout > .slider_wrap {
    /*width : calc(976 / 1366 * 100%);*/
    width: auto;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 350 / 585;
    margin-left: 0;
    margin-right: auto;
}

#topmain .top_slider .swiper-pagination {
    position: absolute;
    left: 1rem;
    top: auto;
    bottom: 1.5rem;
    transform: translateY(0);

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#topmain .top_slider .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    background: #adaeaf;
    opacity: 1;
}
#topmain .top_slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #595757;
}

}


/* #concept
----------------------------------------- */
#concept {
}
#concept .inner {
    padding-top: 20rem;
}
#concept .layout {
    width: 100%;
    position: relative;
    z-index: 1;
}
#concept .layout .txt_con {
    position: absolute;
    bottom: 7rem;
    right: 11rem;
    z-index: 2;
    
    font-size: 1.5rem;
    line-height: calc(28/15);
}
#concept .layout .txt_con .sub {
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.065em;
    line-height: 1;
}
#concept .layout .txt_con .ttl_wrap {
    margin-top: 1rem;
}
#concept .layout .txt_con .ttl_wrap h2 {
    font-size: 5rem;
    font-weight: 200;
    letter-spacing: 0.065em;
    line-height: 1.2;
}
#concept .layout .txt_con .arrow {
    display: block;
    margin-top: 1rem;
}
#concept .layout .txt_con .arrow::after {
    content: '';
    display: block;
    width: 5.2rem;
    height: 0.8rem;
    background: url(../images/arrow.svg) no-repeat bottom right / auto;
    transition: all .6s;
}
#concept .layout .txt_con a:hover .arrow::after  {
    transform: translateX(0.5rem);
}

#concept .layout .bg {
    width: 100%;
    aspect-ratio: 1316 / 670;
}
#concept .layout .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 768px) {
#concept {
}
#concept .inner {
    width: 100%;
    padding-top: 13rem;
}
#concept .layout {
    display: flex;
    flex-flow: column-reverse;
}
#concept .layout .txt_con {
    position: relative;
    bottom: auto;
    right: auto;
    z-index: 2;
    
    font-size: 1.5rem;
    line-height: calc(28/15);
    padding-left: 3.5rem;
    margin-top: -15rem;
}
#concept .layout .txt_con .sub {
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: 0.065em;
    line-height: 1;
}
#concept .layout .txt_con .ttl_wrap {
    margin-top: 3rem;
}
#concept .layout .txt_con .ttl_wrap h2 {
    font-size: 4rem;
}
#concept .layout .txt_con .ttl_wrap .lead {
    margin-top: 1rem;
}
#concept .layout .txt_con .arrow {
    display: block;
    margin-top: 1rem;
}
#concept .layout .txt_con .arrow::after {
    content: '';
    display: block;
    width: 5.2rem;
    height: 0.8rem;
    background: url(../images/arrow.svg) no-repeat bottom right / auto;
    transition: all .6s;
}
#concept .layout .txt_con a:hover .arrow::after  {
    transform: translateX(0.5rem);
}

#concept .layout .bg {
    width: 30rem;
    margin-left: auto;
    aspect-ratio: auto;
}
#concept .layout .bg img {
    width: 100%;
    aspect-ratio: 300 / 500;
    object-fit: cover;
}
}


/* #post_list_wrap.news
----------------------------------------- */
#post_list_wrap.news .inner {
    padding: 0;
    padding-top: 14rem;
}

#post_list_wrap.news .ttl_wrap {
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
}
#post_list_wrap.news .ttl_wrap .ttl a {
    display: flex;
    flex-flow: row;
    align-items: baseline;
    gap: 1rem;
    
    font-size: 2.2rem;
    letter-spacing: 0.065em;
    font-weight: 200;
    line-height: 1;
}

#post_list_wrap.news .ttl_wrap .ttl a::after {
    content: '';
    display: block;
    width: 5.2rem;
    height: 0.8rem;
    background: url("../images/arrow.svg") no-repeat bottom right / auto;
    transition: all .6s;
}
#post_list_wrap.news .ttl_wrap .ttl a:hover::after {
    transform: translateX(0.5rem);
}

@media screen and (max-width: 768px) {
#post_list_wrap.news .inner {
    width: 31.5rem;
    padding-top: 10rem;
}

#post_list_wrap.news .ttl_wrap {
    padding: 0 0.5rem;
}
#post_list_wrap.news .ttl_wrap .ttl a {
    gap: 1rem;
    
    font-size: 1.9rem;
}

#post_list_wrap.news .ttl_wrap .ttl a::after {
    width: 3rem;
    height: 0.7rem;
}

}


/* #product_list_wrap
----------------------------------------- */
#product_list_wrap .inner {
    padding-top: 16rem;
}

@media screen and (max-width: 768px) {
#product_list_wrap .inner {
    padding-top: 20rem;
}
}


/* #series
----------------------------------------- */
#series {
    position: relative;
    margin-top: 35.5rem;
}
#series .inner {
    width: 100%;
}
#series .layout {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#series .layout > .img_wrap {
    width: calc(756 / 1366 *100%);
    overflow: hidden;
}
#series .layout > .txt_wrap {
    width: calc(610 / 1366 *100%);
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 7rem 0;
    padding-left: calc(180 / 1366 *100%);
}

#series .swiper-container,
#series .swiper-wrapper,
#series .swiper-slide {
	/*width: 100%;
    height: 100%;*/
}


#series .layout .series_txt_slider {
    overflow: hidden;
}
#series .layout .series_txt_slider a {
    display: flex;
    flex-flow: column;
}
#series .layout .series_txt_slider a::after {
    content: '';
    display: block;
    width: 5.2rem;
    height: 0.8rem;
    background: url(../images/arrow.svg) no-repeat bottom right / auto;
    transition: all .6s;
    margin-top: 2rem;
}
#series .layout .series_txt_slider a:hover::after  {
    transform: translateX(0.5rem);
}
#series .layout .series_txt_slider .swiper-slide {
  opacity: 0 !important;
  transition: opacity .6s ease;
    /*visibility: hidden;*/
}
#series .layout .series_txt_slider .swiper-slide.swiper-slide-active {
  opacity: 1 !important;
    /*visibility: visible;*/
}

#series .layout .txt_wrap .series {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.065em;
    line-height: 1;
}
#series .layout .txt_wrap .logo {
    margin-top: 3rem;
}
#series .layout .txt_wrap .logo img {
    width: auto;
    height: 2.5rem;
}
#series .layout .txt_wrap .txt {
    font-size: 1.3rem;
    letter-spacing: 0;
    line-height: calc(21 / 13);
    margin-top: 2rem;
}
#series .layout .txt_wrap .txt p:not(:first-child) {
    margin-top: 0.5em;
}
#series .layout .txt_wrap .txt h3 {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: calc(36 /15);
    margin-bottom: 0.5em;
}

#series .layout .txt_wrap .navi_list {
    display: flex;
    flex-flow: column;
    gap: 1.5rem 0;
}
#series .layout .txt_wrap .navi_list .navi_series {
    display: flex;
}
#series .layout .txt_wrap .navi_list .navi_series img {
    width: auto;
    height: 1rem;
}

#series .layout .series_img_slider .swiper-slide {
    width: 80%;
    margin-right: 3rem;
}
#series .layout .series_img_slider .swiper-slide:last-child {
    width: 100%;
    padding-right: 20%;
    margin-right: 0;
}
#series .layout .series_img_slider .swiper-slide .slide_wrap img {
    width: 100%;
}

#series .layout .series_img_slider .swiper-slide {
    filter: grayscale(100%);
    transition: all .6s ease;
}
#series .layout .series_img_slider .swiper-slide.swiper-slide-active {
    filter: none;
}

@media screen and (max-width: 768px) {
#series {
    margin-top: 20rem;
}
#series .inner {
    width: 100%;
}
#series .layout {
    flex-flow: column-reverse;
    justify-content: center;
    padding-left: 4rem;
    gap: 3rem 0;
}
#series .layout > .img_wrap {
    width: 100%;
}
#series .layout > .txt_wrap {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 4rem 0;
    padding-left: 0;
}

#series .layout .series_txt_slider a::after {
    width: 5.2rem;
    height: 0.8rem;
    margin-top: 1.5rem;
}
#series .layout .series_txt_slider a:hover::after  {
    transform: translateX(0.5rem);
}
#series .layout .series_txt_slider .swiper-slide {
    background-color: #FFFFFF;
}

#series .layout .txt_wrap .series {
    font-size: 1.3rem;
}
#series .layout .txt_wrap .logo {
    margin-top: 1.5rem;
}
#series .layout .txt_wrap .logo img {
    width: auto;
    height: 2.1rem;
}
#series .layout .txt_wrap .txt {
    font-size: 1.2rem;
    margin-top: 2rem;
}

#series .layout .txt_wrap .txt h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
}

#series .layout .txt_wrap .navi_list {
    gap: 1.5rem 0;
    
    display: none;
}
#series .layout .txt_wrap .navi_list .navi_series {
    display: flex;
}
#series .layout .txt_wrap .navi_list .navi_series img {
    width: auto;
    height: 1rem;
}

#series .layout .series_img_slider .swiper-slide {
    width: 80%;
    margin-right: 1.5rem;
}
#series .layout .series_img_slider .swiper-slide:last-child {
    width: 100%;
    padding-right: 20%;
    margin-right: 0;
}
}



/* #gallery
----------------------------------------- */
#gallery {
}
#gallery .inner {
    padding-top: 37rem;
}
#gallery .layout {
    width: calc(1090 / 1366 * 100% );
    margin: auto;
    display: flex;
    justify-content: space-between;
}
#gallery .layout .img_wrap {
    width: calc(650 / 1090 * 100% );
}
#gallery .layout .ttl_wrap {
    width: calc(370 / 1090 * 100% );
    display: flex;
    flex-flow: column;
}
#gallery .layout .ttl_wrap h2.ttl {
    margin: auto;
    padding-top: 7rem;
}
#gallery .layout .ttl_wrap h2.ttl a {
    font-size: 4.5rem;
    font-weight: 200;
    letter-spacing: 0.045em;
    line-height: 1;
    
    display: flex;
    flex-flow: column;
    grid-row-gap: 3rem;
}
#gallery .layout .ttl_wrap h2.ttl a::after {
    content: '';
    display: block;
    width: 9.8rem;
    height: 0.8rem;
    background: url(../images/arrow.svg) no-repeat bottom right / auto;
    transition: all .6s;
}
#gallery .layout .ttl_wrap h2.ttl a:hover::after  {
    transform: translateX(0.5rem);
}

#gallery .layout .ttl_wrap .color_img {
    width: 100%;
    margin-top: auto;
    margin-bottom: 7rem;
}


@media screen and (max-width: 768px) {
#gallery {
}
#gallery .inner {
    padding-top: 15rem;
}
#gallery .layout {
    width: 100%;
    max-width: 33.5rem;
    flex-flow: column;
    gap: 5rem 0;
}
#gallery .layout .img_wrap {
    width: 30rem;
}
#gallery .layout .ttl_wrap {
    width: 100%;
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    justify-content: space-between;
}
#gallery .layout .ttl_wrap h2.ttl {
    margin: 0;
    padding-top: 0;
    padding-left: 1.5rem;
}
#gallery .layout .ttl_wrap h2.ttl a {
    font-size: 3.6rem;
    
    grid-row-gap: 2rem;
}
#gallery .layout .ttl_wrap h2.ttl a::after {
    width: 9.8rem;
    height: 0.8rem;
}

#gallery .layout .ttl_wrap .color_img {
    width: 15rem;
    margin-top: auto;
    margin-bottom: 1.5rem;
}
}



/* #fm
----------------------------------------- */
#fm {
}
#fm .inner {
    padding-top: 27rem;
    padding-bottom: 20rem;
}
#fm .layout {
    width: 100%;
}
#fm .layout .img_wrap {
    width: 100%;
    aspect-ratio: 1316 / 670;
    margin-top: 1rem;
}
#fm .layout .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#fm .layout .ttl_wrap {
    display: flex;
    justify-content: flex-start;
    padding: 0 2rem;
}
#fm .layout .ttl_wrap h2.ttl {
}
#fm .layout .ttl_wrap h2.ttl a {
    font-size: 3.3rem;
    font-weight: 200;
    letter-spacing: 0.065em;
    line-height: 1;
    
    display: flex;
    align-items: baseline;
    column-gap: 1.5rem;
}
#fm .layout .ttl_wrap h2.ttl a::after {
    content: '';
    display: block;
    width: 5.2rem;
    height: 0.8rem;
    background: url(../images/arrow.svg) no-repeat bottom right / auto;
    transition: all .6s;
}
#fm .layout .ttl_wrap h2.ttl a:hover::after  {
    transform: translateX(0.5rem);
}

@media screen and (max-width: 768px) {
#fm {
}
#fm .inner {
    padding-top: 17rem;
    padding-bottom: 6rem;
}
#fm .layout {
    width: 100%;
}
#fm .layout .img_wrap {
    width: 100%;
    aspect-ratio: 345 / 400;
    margin-top: 1rem;
}
#fm .layout .ttl_wrap {
    padding: 0;
}
#fm .layout .ttl_wrap h2.ttl {
}
#fm .layout .ttl_wrap h2.ttl a {
    font-size: 2.3rem;
    
    column-gap: 1rem;
}
#fm .layout .ttl_wrap h2.ttl a::after {
    width: 3rem;
    height: 0.7rem;
}
}


/* #instagram_wrap
----------------------------------------- */
#instagram_wrap {
}
#instagram_wrap .inner {
    max-width: none;
    padding: 0 10rem;
    padding-top: 16rem;
    padding-bottom: 20rem;
}
#instagram_wrap h1 {
    display: flex;
    align-items: baseline;
    width: 100%;
    font-size: 2.3rem;
	letter-spacing: 0.045em;
    line-height: 1;
    margin: auto;
    margin-bottom: 2rem;
}

#instagram_wrap h1 .arrow {
    display: block;
    width: 6.5rem;
    height: 1rem;
    background: url("../images/arrow.svg") no-repeat right bottom;
    background-size: auto;
    margin-left: 1rem;
}

@media screen and (max-width: 768px) {
#instagram_wrap .inner {
    padding: 0;
    padding-top: 8rem;
    padding-bottom: 6rem;
}
#instagram_wrap h1 {
    max-width: 32.5rem;
    font-size: 1.7rem;
    margin-bottom: 2rem;
}
    
#instagram_wrap .feed_wrap {
    width: 100vw;
    margin-left: -2.5rem;
}
}