@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;
}

/* -------------
feature 
---------------- */
#feature {padding: 100px 0 0;}
#feature .column__list article { width: calc((100% - 48px * 5) / 5);}
#feature .column__list article:not(:last-child){margin-right: 60px;}
#feature .column__list article .imgbox { width: 100%; margin-bottom: 24px;}
#feature .column__list article .textbox p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 71.4px; margin-bottom: 20px; font-size: 14px; font-weight: 200; line-height: 1.7;}
#feature .column__list .textbox h3{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 60px; margin-bottom: 12px; font-size: 20px; font-weight: 200; line-height: 1.5;}

/* -------------
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;
}

.insta .ecbn-selection-wrapper{text-align: center;}
.insta .ecbn-selection-widget{padding: 0 50px;}
.insta .ecbn-selection-wrapper .ecbn-selection-title{padding: 0 0 0 58px; display: inline-block; width: auto; position: relative;margin: 0px 0 30px;}
.insta .ecbn-selection-wrapper .ecbn-selection-title span{ letter-spacing: 0.05em; font-size: 42px; font-family: futura-pt, sans-serif; font-style: normal; font-weight: 700; line-height: 163%; position: relative; }
.insta .ecbn-selection-wrapper .ecbn-selection-title:before{content: ""; display: inline-block; width: 42px; height: 42px; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); background: url( https://d2w53g1q050m78.cloudfront.net/andmedicalcom/uploads/assets/images/special/instr_1.svg ) no-repeat center center; background-size: 100%;}

.ecbn-selection-preview-new div.noProductsMsg,
.ecbn-selection-preview-content .ecbn-selection-preview-slide-wrapper .ecbn-selection-slider-controls,
.insta .ecbn-selection-wrapper .ecbn-selection-description,
.insta .ecbn-selection-wrapper .ecbn-selection-title img,

.insta .ecbn-selection-wrapper .ecbn-selection-footer2{display: none !important; }

.ecbn-selection-preview-slide-wrapper .ecbn-selection-right-item-list{text-align: left !important;}
.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item{width: calc(100% / 2 - 10px); height: auto; padding: 0; margin: 0;}
.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-img img{width: 100%; height: auto;}
.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-productprice,
.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-name,
.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-productprice .ecbn-selection-item-normalprice{text-align: left !important; width: 100% !important;}
.insta .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a{height: 211px; width: 211px;}


.ecbn-selection-preview-slide-wrapper .ecbn-selection-right-item-list{width: 100% !important; transform: none !important; display: flex !important; flex-wrap: wrap; gap: 20px 20px; height: auto !important;}

.ecbn-selection-preview .ecbn-selection-preview-personal {margin: 10px auto 0px; width: 496px;}
.ecbn-selection-preview .ecbn-selection-preview-personal > span{margin: 0 5px 0 0;}
.ecbn-selection-preview .ecbn-selection-preview-personal .ecbn-selection-preview-media--icon a::before{ width: 24px; height: 24px; background: url( https://d2w53g1q050m78.cloudfront.net/andmedicalcom/uploads/assets/images/special/instr_1.svg ) no-repeat center center !important; background-size: 100% !important;}


/* ------------------------------ 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;
    }

	#feature {padding: 50px 0 0;}
	#feature .column__list article {  width: calc((100% - 2.5% * 2) / 2);margin-bottom: 40px;}
	#feature .column__list article:not(:last-child){margin-left: 5%;}
	#feature .column__list article:nth-child(2n){margin-left: 0%;}
	#feature .column__list article .imgbox { width: 100%; margin-bottom: 12px;}
	#feature .column__list article .textbox p { display: none;}
	#feature .column__list .textbox h3{max-height: 42px; margin-bottom: 8px; font-size: 14px; letter-spacing: 2px; 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;
    }
    
	/* ------------------------------------------------------------ .insta */
	.insta .ecbn-selection-widget-new div.ecbn-selection-wrapper{margin: 0 auto; }
	.insta .ecbn-selection-widget-new .ecbn-selection-wrapper{margin: 0 auto !important; width: 90%;}
	.insta .ecbn-selection-widget{padding: 0px;}
	.insta .ecbn-selection-wrapper .ecbn-selection-title{padding: 0 0 0 34px; margin: 0px 0 20px;}
	.insta .ecbn-selection-wrapper .ecbn-selection-title span{ font-size: 28px; }
	.insta .ecbn-selection-wrapper .ecbn-selection-title:before{width: 28px; height: 28px;}
	.insta .vsm-slider .ecbn-selection-wrapper li.ecbn-selection-item > div > a{height: auto; width: 100%;}
	.insta .ecbn-selection-wrapper li.ecbn-selection-item {width: calc(33.33333vw - 13px); }
	.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-content,
	.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item-img{width: 100% !important; height: auto;}
	.ecbn-selection-preview .ecbn-selection-right div.ecbn-selection-right-item-list .ecbn-selection-item{width: calc(100% / 2 - 7px); }

	.ecbn-selection-preview .ecbn-selection-preview-personal {margin: 10px auto 0px; width: 90%;}
	.ecbn-selection-preview-slide-wrapper .ecbn-selection-right-item-list{width: 100% !important; gap: 14px; height: auto !important; }
}