/* Font 読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Work+Sans:wght@400;500;600&display=swap');

/*================ Variables ================*/
:root {
    --color-text-head: #1F366A;
    --color-text-body: #1F366A;
    --color-text-overlay: #FFFFFF;
    --color-text-link: #1F366A;
    --color-btn-bg: #1F366A;
    --color-btn-text: #FFFFFF;
    --color-input-text: #1F366A;
    --color-input-border: #1F366A;
    --color-page-bg: #FFFFFF;
    --color-page-border: #1F366A;
    --color-page-accent: #071A45;

    --font-size-text-head: 40px;
    --font-size-text-subhead: 25px;
    --font-size-text-body: 14px;
    --font-size-text-link: 14px;

    --main-color: #1F366A;
    --sub-color: #071A45;
    --sub-font: 'Work Sans', sans-serif;
    --main-font: 'Noto Sans JP', sans-serif;
}

.c-steps_to_order--theme {
    --theme-color: var(--color-btn-bg) ;
    --text-color: var(--color-btn-text) ;
}

.p-movie--theme {
    --theme-color: var(--color-btn-bg);
}


.u-text--head {
    color: var(--main-color) ;
    font-size: 40px ;
    font-family: var(--sub-font);
    font-weight: 600;
    line-height: 1.3;
}

.u-text--subhead {
    color: var(--main-color) ;
    font-size: 25px ;
    font-weight: 500;
    line-height: 1.5;
}

.u-text--head--ja {
    color: var(--main-color) ;
    font-size: 30px ;
    font-weight: 500;
}

.u-color--head {
    color: var(--main-color) ;
}

.u-white--head {
    color: #FFF ;
}

.u-text--body {
    color: var(--sub-color) ;
    font-size: 14px ;
    font-family: var(--main-font);
}

.u-color--body {
    color: var(--main-color) ;
}

.u-text--strong {
    color: #071A45 ;

}

.u-text--link {
    color: #071A45 ;

}

.u-text--head--overlay {
    color: #FFFFFF ;
    font-size: 40px ;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

.u-text--subhead--overlay {
    color: #FFFFFF ;
    font-size: 25px ;
    font-weight: 500;
    line-height: 1.5;
}

.u-text--body--overlay {
    color: #FFFFFF ;
}

.u-text--color--overlay {
    color: #FFFFFF ;
}

.u-color__btn--bg {
    background: var(--main-color) ;
}

.u-color__btn--bg--overlay {
    background: #FFFFFF ;
}

.u-color__btn--bg--reverse {
    background: #FFFFFF ;
}

.u-color__btn--bg--overlay--reverse {
    background: #FFFFFF ;
}

.u-color__btn {
    color: #FFFFFF ;
}

.u-text--btn {
    color: #ffffff ;

}

.u-text--btn--overlay {
    color: #FFFFFF ;

}

.u-text--btn--reverse {
    color: #FFFFFF ;
    border: 1px solid #BDC1C2 ;
}

.u-text--btn--overlay--reverse {
    color: #FFFFFF ;
    border: 1px solid #BDC1C2 ;
}

.u-color__btn--text {
    color: #FFFFFF ;
}

.u-color__btn--text--bg {
    background: #FFFFFF ;
}

.u-text--input {
    color: var(--main-color) ;

}

.u-color--input {
    color: var(--main-color) ;
}

.u-color__input--bg {
    background: #FFFFFF ;
}

.u-color__border--input {
    border-color: #BDC1C2 ;
}

.u-color__bg--base {
    background: #FFFFFF ;
}

.u-color__bg--main {
    background: #FFFFFF ;
}

.u-color__border--border {
    border-color: #D8DDDF ;
}

.u-color__border--main {
    border-color: #D8DDDF ;
}

.u-font--head {
    font-size: 24px ;

}

.u-font--subhead {
    font-size: 17px ;

}

.u-font--body {
    font-size: 13px ;

}

.u-font--bold {
    font-weight: bold;
}

.c-product_info__details__icon::before,
.c-product_info__details__icon::after {
    background: #494949 ;
}

.c-product_item__actions .c-product_item__form--favorite {
    display: inline-block;
}


.c-product_item__actions .c-product_item__form--cart {
    display: inline-block;
}



/*================ Fonts ================*/

/*================ Headings ================*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--head-font);
}


/*================ Contents ================*/
body {
    line-height: 1.5;
}

p {
    line-height: 2.57;
}

/*================ Common Layout ================*/
.l-section {}

.l-section__inner {
    max-width: 1022px;
    margin: auto;
}

/*================ Common Component ================*/
.c-btn {
    width: 235px;
    display: inline-flex;
    text-align: center;
    height: 45px;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

/*================ Utility ================*/
.u-text--center {
    text-align: center;
}

/*================ TOP Page ================*/

/*================ Product List ================*/
.p-product_list {
    padding: 0;
}

/*================ Product Card ================*/
.c-product_item{
    background-origin: #fff;
}
.c-product_item__inner__eyecatch__img {
    padding-top: 100%;
}
.c-product_item__inner__content {
    padding: 18px 20px;
    margin-top: 0;
}
.c-product_item__inner__title {
    font-size: 16px;
    overflow: hidden;
    max-height: 3em;
    line-height: 1.5;
}
.c-product_item__inner__title span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5;
}
.c-product_item__inner__category {
    font-size: 14px;
}
.c-product_item__inner__category__tip {
    padding: 4px 15px;
    background-color: #9BB1C4;
    color: #fff;
    border-radius: 16px;
    font-weight: 500;
}
.c-product_item__inner__price__num {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--sub-font);
}
.c-product_item__inner__price__unit {
    font-size: 11px;
    font-weight: 500;
}
.product_description p {
    line-height: 1.5
}


/*===== CategoryList ====*/
.c-categoryList{
    display: flex;
    flex-wrap: wrap;
    margin-top: -15px;
}
.c-categoryList__item{
    width: 23.2%;
    margin-top: 15px;
}
.c-categoryList__item__box{
    display: flex;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.c-categoryList__item__image{
    width: 30%;
}
.c-categoryList__item__text{
    width: 70%;
    padding: 12px;
    display: flex;
    align-items: center;
}
.c-categoryList__item__text p{
    font-size: 18px;
    font-weight: 500;
}

/*==== Image Overlay Box ====*/
.c-imageOverlayBox__box{
    background: var(--main-color);
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 60%;
}
.c-imageOverlayBox__image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.c-imageOverlayBox__image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-imageOverlayBox__text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}
.c-imageOverlayBox__text__title{
    font-size: 24px;
    font-weight: 600;
    font-family: var(--main-font);
    line-height: 1.5;
}
.c-imageOverlayBox__text__text{
    font-size: 16px;
    font-weight: 500;
    font-family: var(--sub-font);
    line-height: 1.5;
}

/*================ TOP Page ================*/

/*====== Reccomends ======*/
.p-topRecommends .p-product_list__list__item .c-btn {
    width: 100%;
}
/*====== Search ====== */
.p-topSearch{
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: cover;
}
.p-topSearch__list02{
    display: flex;
}
.p-topSearch__list02__item{
    width: 32%;
}
/*====== Subscription ====== */
.p-topSubscription__head{
    display: flex;
    background: transparent linear-gradient(201deg, var(--unnamed-color-9bb1c4) 0%, #6894BA 100%) 0% 0% no-repeat padding-box;
    background: transparent linear-gradient(201deg, #9BB1C4 0%, #6894BA 100%) 0% 0% no-repeat padding-box;
    border-radius: 5px;
    overflow: hidden;
}
.p-topSubscription__head__image{
    width: 37%;
}
.p-topSubscription__head__content{
    width: 63%;
    padding: 50px 60px 100px;
}
.p-topSubscription__head .u-text--head--overlay{
    font-size: 30px;
}
.p-topSubscription__head .u-text--subhead--overlay{
    font-size: 21px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}
.p-topSubscription__head__text{
    line-height: 2.25;
}
.p-topSubscription__column{
    display: flex;
}
.p-topSubscription__column__item{
    width: 49%;
}
.p-topSubscription__column__item .c-imageOverlayBox__box{
    padding-top: 54%;
}
.p-topSubscription__guide .c-categoryList__item__box{
    border: solid #B6C5E0 1px;
}
/*====== About ====== */
.p-topAbout{
    position: relative;
    background: #071A45;
}
.p-topAbout::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .1;
    pointer-events: none;
}
.p-topAbout__text{
    display: flex;
}
.p-topAbout__text__le,
.p-topAbout__text__ri{
    line-height: 1.666
}
.p-topAbout__text__le{
    width: 32%;
}
.p-topAbout__text__ri{
    width: 68%;
}