@charset "utf-8";
/* -------------
common 
---------------- */
.fs-l-main {
    margin: 0 auto;
}
/* -------------
fv 
---------------- */
#fv {
    position: relative;
    min-width: 1520px;
}
.fv__slide {
    width: 100%;
}
.fv__slide img {
    width: 100%;
    height: auto;
}
.fv__scroll {
    position: absolute;
    left: 20px;
    bottom: -40px;
}
.fv__scroll a {
    display: block;
}
#fv__slider_pc {
    display: block;
}
#fv__slider_sp {
    display: none;
}
/* -------------
category 
---------------- */
#category {
    position: relative;
    padding: 100px 0;
}
#category .en-jp-title {
    margin-bottom: 80px;
}
.category__list article > a {
    display: flex;
    justify-content: space-between;
}
.category__list article + article {
    margin-top: 156px;
}
.category__list article .imgbox {
    width: 700px;
}
.category__list article:nth-of-type(even) .imgbox {
    order: 2;
}
.category__list article .textbox {
    display: flex;
    flex-direction: column;
    width: calc(100% - 700px);
    padding-left: 76px;
    box-sizing: border-box;
}
.category__list article:nth-of-type(even) .textbox {
    order: 1;
    padding-left: 0;
    padding-right: 76px;
}
.category__list article .textbox h3 {
    border-left: solid 2px #878787;
    margin-bottom: 40px;
    padding-left: 24px;
    font-size: 42px;
    font-weight: 200;
    letter-spacing: 16px;
}
.category__list article .textbox h3 span {
    display: table;
    margin-top: 24px;
    font-size: 25px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3px;
}
.category__list article .textbox .genre {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 200;
    color: #878787;
    line-height: 1.5;
    letter-spacing: 2px;
}
.category__list article .textbox .description {
    font-size: 14px;
    font-weight: 200;
    line-height: 1.8;
}
.category__list article .textbox .see-more-btn {
    margin-top: auto;
}

.registration {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    cursor: pointer;
}

.registration::before {
	content: '';
	width: 30px;
	height: 30px;
	background: url(../images/index/close.png) no-repeat center center;
	background-size: 100% auto;
	right: -10px;
	top: -10px;
	display: block;
	position: absolute;
	z-index: 2;
}

.registration .links {
    display: flex;
    align-items: center;
    width: 260px;
    height: 87px;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 6px 6px 5px 2px rgba(125, 125, 125, 0.1);
}

.registration .imgbox {
    display: grid;
    width: 111px;
    overflow: hidden;
    place-items: center;
}

.registration .imgbox img {
    width: 44px;
}

.registration .textbox {
    box-sizing: border-box;
}

.registration .textbox h2 {
    font-size: 17px;
}

.registration .textbox ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.registration .textbox ul li + li {
    margin-top: 4px;
}

.registration .textbox ul li .icnbox {
    margin-right: 10px;
}

.registration .textbox ul li span {
    font-size: 14px;
    font-weight: 200;
}

/* -------------
product 
---------------- */
#product {
    padding: 100px 0;
}
#product .en-jp-title {
    margin-bottom: 140px;
}
.product__intro {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 108px;
}
.product__intro .imgbox {
    width: 650px;
    order: 2;
}
.product__intro .imgbox a {
    display: block;
}
#product .imgbox.symbol-new a,
#product .imgbox.symbol-new-small a {
    position: relative;
}
#product .imgbox.symbol-new a::before,
#product .imgbox.symbol-new-small a::before {
    position: absolute;
    content: "";
    z-index: 1;
    background-image: url(../images/common/symbol/new.svg);
    background-position: center center;
    background-repeat: no-repeat;
}
#product .imgbox.symbol-new a::before {
    left: -65px;
    top: -65px;
    width: 130px;
    height: 130px;
    background-size: 130px auto;
}
#product .imgbox.symbol-new-small a::before {
    left: -40px;
    top: -40px;
    width: 80px;
    height: 80px;
    background-size: 80px auto;
}
#product .imgbox a figure img {
    width: 100%;
    height: auto;
}
#product .imgbox a figcaption span {
    display: table;
    margin-left: auto;
}
#product .imgbox a figcaption .en {
    margin-top: 12px;
    font-size: 20px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 1.3;
}
#product .imgbox a figcaption .jp {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
}
.product__intro .textbox {
    width: calc(100% - 650px);
    padding-right: 40px;
    order: 1;
}
.product__intro .textbox h3 {
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: 200;
    line-height: 1.7;
    letter-spacing: 6px;
}
.product__intro .textbox p {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.8;
    letter-spacing: 2px;
}
.product__box {
    display: flex;
    justify-content: space-between;
}
.product__box + .product__box {
    margin-top: 72px;
}
.product__box .left {
    width: 487px;
}
#product .product__box .left .product__item .imgbox.symbol-new a::before {
    left: 0;
}
#product .product__box .imgbox a figcaption span {
    margin-left: inherit;
    margin-right: auto;
}
.product__box .right {
    width: calc(100% - 487px);
    padding-left: 60px;
    box-sizing: border-box;
}
.product__list {
    display: flex;
    justify-content: flex-start;
    margin-left: -50px;
    margin-top: 50px;
}
.product__list .product__item {
    width: calc((100% - 50px * 2) / 2);
    margin-left: 50px;
}
#product .product__list .imgbox a figcaption .jp {
    font-size: 14px;
}

/* -------------
column 
---------------- */
#column {
    padding: 100px 0;
}
#column iframe {
	width: 100%;
	border: none
}
#column .btn {
    text-align: center;
}

/* -------------
news 
---------------- */
#news {
    padding: 100px 0;
}
#news .news__box {
    display: flex;
    justify-content: space-between;
}
#news .news__title {
    width: 400px;
    padding-right: 100px;
    box-sizing: border-box;
}
#news .news__title h2 {
    position: relative;
    display: flex;
    justify-content: space-between;
}
#news .news__title h2::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    z-index: -1;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    margin: 0 auto;
    background-color: #535353;
}
#news .news__title h2 span {
    background-color: #fff;
    font-size: 16px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
}
#news .news__title h2 .left {
    padding-right: 20px;
}
#news .news__title h2 .right {
    padding-left: 20px;
}
#news .news__title h2 .right a {
    font-size: 16px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
}
#news .news__list {
    width: calc(100% - 400px);
}
#news .news__list article + article {
    margin-top: 28px;
}
#news .news__list article a {
    display: block;
}
#news .news__list article a .flex-wrap {
    display: flex;
    justify-content: flex-start;
}
#news .news__list article a .flex-wrap p {
    width: 140px;
    padding-right: 40px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 300;
}
#news .news__list article a .flex-wrap h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: 14px;
    overflow: hidden;
    width: calc(100% - 140px);
    font-size: 14px;
    font-weight: 200;
}
#news .news__list article a .flex-wrap .link {
    background: url(../images/common/link.svg) no-repeat left center;
    padding-left: 22px;
}

/* ------------------------------ mobile */
@media only screen and (max-width: 768px) {
    /* -------------
    fv 
    ---------------- */
    #fv{
	    min-width: inherit;
    }
    .fv__scroll {
        left: 5%;
        bottom: -24px;
    }
    .fv__scroll a img {
        width: 8px;
        height: auto;
    }
    #fv__slider_pc {
        display: none;
    }
    #fv__slider_sp {
        display: block;
    }
    /* -------------------
    registration 
    ---------------------- */
    .registration {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 10;
        width: 300px;
        height: 100px;
        cursor: pointer;
        top: inherit;
    }

    .registration a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        cursor: pointer;
       
    }

    .registration .imgbox {
        width: 100px;
        overflow: hidden;
    }

    .registration .imgbox img {
        transition: 0.5s;
    }

    .registration a:hover .imgbox img {
        transform: scale(1.1);
    }

    .registration .textbox {
        width: calc(100% - 100px);
        padding: 12px 20px;
        box-sizing: border-box;
    }

    .registration .textbox h2 {
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 200;
    }

    .registration .textbox ul li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .registration .textbox ul li + li {
        margin-top: 4px;
    }

    .registration .textbox ul li .icnbox {
        margin-right: 10px;
    }

    .registration .textbox ul li span {
        font-size: 14px;
        font-weight: 300;
    }

    /* -------------
    category 
    ---------------- */
    #category {
        padding: 50px 0;
    }
    #category .en-jp-title {
        margin-bottom: 28px;
    }
    .category__list article > a {
        display: block;
    }
    .category__list article + article {
        margin-top: 60px;
    }
    .category__list article .imgbox {
        width: 100%;
        margin-bottom: 20px;
    }
    .category__list article .textbox {
        display: block;
        width: 100%;
        padding-left: 0;
    }
    .category__list article:nth-of-type(even) .textbox {
        padding-left: 0;
        padding-right: 0;
    }
    .category__list article .textbox h3 {
        margin-bottom: 20px;
        padding-left: 16px;
        font-size: 28px;
        font-weight: 200;
        letter-spacing: 8px;
    }
    .category__list article .textbox h3 span {
        margin-top: 16px;
        font-size: 14px;
        letter-spacing: 3px;
    }
    .category__list article .textbox .genre {
        margin-bottom: 12px;
        font-size: 12px;
    }
    .category__list article .textbox .description {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 300;
        line-height: 1.8;
    }
    .category__list article .textbox .see-more-btn {
        margin-top: auto;
    }

    /* -------------
    product 
    ---------------- */
    #product {
        padding: 50px 0;
    }
    #product .en-jp-title {
        margin-bottom: 32px;
    }
    .product__intro {
        display: block;
        margin-bottom: 40px;
    }
    .product__intro .imgbox {
        width: 100%;
    }
    .product__intro .imgbox a {
        display: block;
    }
    #product .imgbox.symbol-new a,
    #product .imgbox.symbol-new-small a {
        display: block;
    }
    #product .imgbox.symbol-new a::before {
        left: 0;
        top: -30px;
        width: 60px;
        height: 60px;
        background-size: 60px auto;
    }
    #product .imgbox.symbol-new-small a::before {
        left: 0;
        top: -20px;
        width: 40px;
        height: 40px;
        background-size: 40px auto;
    }
    #product .imgbox a figcaption span {
        display: table;
        margin-left: inherit;
        margin-right: auto;
        margin-top: 12px;
    }
    #product .imgbox a figcaption .en {
        font-size: 18px;
    }
    #product .imgbox a figcaption .jp {
        font-size: 14px;
    }
    .product__intro .textbox {
        width: 100%;
        padding-right: 0;
        margin-bottom: 60px;
    }
    .product__intro .textbox h3 {
        margin-bottom: 12px;
        font-size: 24px;
        letter-spacing: 4px;
    }
    .product__intro .textbox p {
        font-size: 14px;
        letter-spacing: 2px;
        font-weight: 300;
    }
    .product__box {
        display: block;
    }
    .product__box + .product__box {
        margin-top: 40px;
    }
    .product__box .left {
        width: 100%;
        margin-bottom: 40px;
    }
    #product .product__box .left .product__item .imgbox.symbol-new a::before {
        left: 0;
    }
    #product .product__box .imgbox a figcaption span {
        margin-left: inherit;
        margin-right: auto;
    }
    .product__box .right {
        width: 100%;
        padding-left: 0;
        box-sizing: border-box;
    }
    .product__list {
        display: block;
        margin-left: 0;
        margin-top: 40px;
    }
    .product__list .product__item {
        width: 100%;
        margin-left: 0;
    }
    .product__list .product__item + .product__item {
        margin-top: 40px;
    }
    #product .product__list .imgbox a figcaption .en {
        margin-top: 12px;
        font-size: 18px;
    }
    #product .product__list .imgbox a figcaption .jp {
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* -------------
    column 
    ---------------- */
    #column {
        padding: 50px 0;
    }

    /* -------------
    news 
    ---------------- */
    #news {
        padding: 40px 0 80px;
    }
    #news .news__box {
        display: block;
    }
    #news .news__title {
        width: 100%;
        padding-right: 100px;
        box-sizing: border-box;
    }
    #news .news__title h2 {
        margin-bottom: 32px;
    }
    #news .news__title h2::before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        z-index: -1;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        margin: 0 auto;
        background-color: #535353;
    }
    #news .news__title h2 span {
        font-size: 16px;
    }
    #news .news__title h2 .left {
        padding-right: 12px;
    }
    #news .news__title h2 .right {
        padding-left: 12px;
    }
    #news .news__list {
        width: 100%;
    }
    #news .news__list article + article {
        margin-top: 28px;
    }
    #news .news__list article a .flex-wrap {
        display: block;
    }
    #news .news__list article a .flex-wrap p {
        width: 100%;
        margin-bottom: 8px;
        padding-right: 0;
        font-size: 12px;
    }
    #news .news__list article a .flex-wrap h3 {
        width: 100%;
        font-size: 14px;
    }
}