@charset "utf-8";
/* 共通要素 */
body{
    font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP', sans-serif;
    /* font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; */
    color: #333333;    
    letter-spacing: 0.5px;
    line-height: 1.5;

    animation: loading-fade 1.5s 0.5s forwards;
    opacity: 0;
}
@keyframes loading-fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
body,p,h1,h2,h3,h4,h5,a,img,div,span{
    margin: 0;
}
a{
    color: #1d5d6c;
    text-decoration: none;
    transition: opacity 0.35s;
}
a:hover{
    text-decoration: none;
    opacity: 0.75;
    cursor: pointer;
    transition: opacity 0.35s;
}
img{
    width: 100%;
    max-width: 100%;
    height: auto;
}
.flex{
    display: flex;
}
.flex.row-center{
    align-items: center;
}
.mg-auto{
    margin: auto;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
h2{
    font-size: 28px;
    letter-spacing: 1.5px;
}
h3{
    font-size: 24px;
    letter-spacing: 1.5px;
}
h5{
    font-size: 18px;
}
.bold{
    font-weight: bold;
}
.sp{
    display: none;
}
.center{text-align:center;}
.mgb-df{
    margin-bottom: 30px;
}
.link{
    color: #4492a4;
}
.link.hvbd{
    position: relative;
}
.link-arrow{
    color: #4492a4;
    position: relative;
    padding-left: 20px;
}
.link-arrow::before,
.link-arrow::after,
.link.hvbd::before{
    content: "";
    position: absolute;
}
.link-arrow::before{
    width: 7px;
    height: 10px;
    background: url(../img/triangle_emerald.png)no-repeat 50% 50%;
    background-size: contain;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.link-arrow::after,
.link.hvbd::before{
    bottom: -5px;
    width: 0;
    left: 0;
    height: 1px;
    background: #4492a4;
    transition: all 0.35s;
}
.link-arrow:hover::after,
.link.hvbd:hover::before{
    width: 100%;
    transition: all 0.35s;
}
.blank{position:relative;padding-right:20px;}
a.blank::after,
.news-link .blank::after{
    content: "";
    position: absolute;
    background: url(../img/blank_icon_b.png)no-repeat 50% 50%;
    background-size: contain;
    width: 13px;
    height: 13px;
    right: 0;
    top: 2px;

}
li ul,li ol{
    margin-top: 20px;
}
.n-list{
    counter-reset: item;
    margin-bottom: 30px;
}
ul.n-list li,
ol.n-list li{
    margin-bottom: 20px;
    line-height: 1.1;
    padding-left: 20px;
    position: relative;
}
ul.n-list li::before,
li ul.n-list li::before{
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background: #ccc;
    top: 5px;
    left: 0;
}
ol.n-list li::before{    
    position: absolute;
    counter-increment: item;
    content: counter(item)'.';
    color: #ccc;
    left: 0;
    top: 0;
    background: none;
}
/* 共通要素ここまで */

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 汎用クラス（全ページ流用可） */
.inner{
    width: 80%;
    max-width: 1000px;
    margin: auto;
}
.rel{
    position: relative;
}
.sec{
    padding: 50px 0;
}
.sec.s-first{
    padding: 120px 0 20px;
}
.serif{
    font-family: 'Noto Serif JP', serif;
    /* font-weight
    300 : Light
    400 : Regular
    500 : Medium
    600 : semi-bold (only Noto serif)
    700 : bold
    900 : Black */
}
.courier{
    font-family: 'Courier Prime', monospace;
}
.ttl-h2{
    margin-bottom: 50px;
}
.ttl-h2.serif{
    font-weight: 400;
}
.gr-ttl-h2{
    margin-bottom: 70px;    
    font-weight: 400;
}
.gr-ttl-h2 span{
    /* グラデの下線テキスト運用ルール：テキストをspanで囲うこと */
    position: relative;
}
.gr-ttl-h2 span::before{
    content: "";
    position: absolute;
    bottom: -20px;
    width: 90px;
    left: 50%;
    transform: translateX(-50%);
    height: 5px;
    background: linear-gradient(to right, #4492a4, #506a8e);
}
.gr-ttl-h3{
    color: #4492a4;
    padding: 20px 0;
    border-bottom: 2px solid #4492a4;
    margin-bottom: 40px;
}

.ttl-kv{
    padding: 190px 0 90px;
}
.gradient-ttl{
    font-size: 40px;
    letter-spacing: 15px;
    font-weight: 400;    
}
.gradient-ttl span{
    display: inline-block;
    color: #4492a4;
    background-image: linear-gradient(to right, #79afbc 0%, #4f698d 91.5%);    
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media all and (-ms-high-contrast: none) { /* IE10,11用 */
    .gradient-ttl span{
        background: none;
        color: #4492a4;
    }
}
.marker-pink{
    background:linear-gradient(transparent 60%, #f5d7f0 60%);
}

.emerald-btn{
    border: 1px solid #4492a4;
    color: #4492a4;
    background: #fff;    
    padding: 22.5px 28px;
    padding-right: 50px;
    display: inline-block;
    position: relative;
    transition: all 0.5s;
}
.emerald-btn:hover{
    opacity: 1;
    color: #fff;
    background: rgba(0,0,0,0);    
    transition: all 0.5s;
}
.emerald-btn::before{
    content: "";
    position: absolute;
    z-index: -1;
    background-image:linear-gradient(to right, #4492a4, #506a8e);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.emerald-btn::after{
    content: "";
    position: absolute;
    background: url(../img/emerald_arrow.png)no-repeat 50% 50%;
    background-size: contain;
    width: 19px;
    height: 18px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all 0.5s;
}
.emerald-btn:hover::after{
    background: url(../img/emerald_white_arrow.png)no-repeat 50% 50%;
    background-size: contain;
    right: 15px;
    transition: all 0.5s;
}
.emerald-btn.normal-size{
    width: calc(100% - 80px);
    max-width: 268px;
    text-align: left;
}

.bd-btm{
    border-bottom: 1px solid #ccc;
}
.middle-pdd{
    padding: 65px 0;
}
.one-block{
    width: 80%;
    margin: auto;
}
.double-block{
    display: flex;
}
.double-block .lefts{
    margin-right: auto;
}
.double-block .rights{
    order: 2;
}
.double-block .lrg-side{
    width: 60%;
}
.double-block .sml-side{
    width: 30%;
}
.ordinary-table tr,
.ordinary-table .od-tr{
    border-bottom: 1px solid #ccc;
}
.ordinary-table .od-tr{
    display: flex;
}
.ordinary-table th,
.ordinary-table .od-th{
    width: 36%;    
    text-align: left;
    padding: 20px 0;
    padding-right: 13%;
}
.ordinary-table .od-th{    
    width: calc(36% - 13%);
}
.ordinary-table td,
.ordinary-table .od-td{
    width:64%;
    padding: 20px 0;
}

/* フェードイン */
.fadein{
    opacity: 0;
    transition: all 1.5s;
}
.fadein.scrollin{
    opacity: 1;
    transition: all 1.5s;
}
.fadein.slidein{
    transform: translateY(50px);
}
.fadein.slidein.scrollin{
    transform: translateY(0);
}

/* 特殊演出 */
.pj-card.fadein.scrollin:nth-of-type(1),
.recom-conts.fadein.scrollin:nth-of-type(1){
    transition-delay: 0.25s
}
.pj-card.fadein.scrollin:nth-of-type(2),
.recom-conts.fadein.scrollin:nth-of-type(2){
    transition-delay: 0.5s
}
.pj-card.fadein.scrollin:nth-of-type(3),
.recom-conts.fadein.scrollin:nth-of-type(3){
    transition-delay: 0.75s
}
.pj-card.fadein.scrollin:nth-of-type(4){
    transition-delay: 0.9s
}




/* ヘッダー */
.par-body{
    position: relative;
    padding-top: 120px;
}
.general-header{
    display: flex;
    padding: 12.5px 30px;
    align-items: center;
    width: calc(100% - 60px);
}
.general-header.fixed{
    position: fixed;
    top: 0;
    z-index: 5;
}
.general-header .logo-link a{
    display: flex;
    align-items: center;
}
.general-header .r-side{
    margin-left: auto;
}
.general-header .r-side .h-link{
    padding: 0 25px;
    font-size: 18px;
}
.general-header .r-side .h-link a{
    color: #1d5d6c;
}

.general-header.on-shadow{
    box-shadow: 0px 0px 20px 0px rgba(58, 34, 39, 0.2);
    background: #fff;
}
.general-header.cgaction{
    transition: all 0.35s;
}
.general-header.cgaction.shadow-change{
    box-shadow: 0px 0px 20px 0px rgba(58, 34, 39, 0.2);
    background: #fff;
    transition: all 0.35s;
}
.general-header.bgw-on{
    background:#fff;
    transition: all 0.35s;
}

.sp-burger{
    display: none;
}
.menus{
    display: flex;
    align-items: center;
}

/* フッター */
.general-footer{
    padding: 40px 0;
    background: #869598;    
    color: #fff;
}
.general-footer a{
    color: #fff;
}
.general-footer a:hover{
    opacity: 1;
}
.general-footer .foot-linkers{
    margin-bottom: 60px;
}
.general-footer .copy-right{
    text-align: right;
    color: #cccccc;
    letter-spacing: 0;
    font-size: 12px;
}
.general-footer .foot-logo{
    display: block;
}
.general-footer .foot-logo img{
    max-width: 202px;
    margin-top: 10px
}
.general-footer .l-side{
    letter-spacing: 0;
    font-size: 12px;
}
.general-footer .r-side{
    margin-left: auto;
    display: flex;
    flex-flow: wrap;
}
.general-footer .f-block{
    margin: 0;
    margin-left: 50px;
    margin-bottom: 30px;
    list-style: none;
    padding-left: 0;
}
.general-footer .f-block .blank{
    position: relative;
    padding-right: 19px;
}
.general-footer .f-block .blank::after{
    content: "";
    position: absolute;
    background: url(../img/blank_icon.png)no-repeat 50% 50%;
    background-size: contain;
    width: 11px;
    height: 11px;
    right: 0;
    top: 1px;

}
.general-footer .f-block li{
    font-size: 14px;
    margin-bottom: 1em;
}
.general-footer .f-block li.lg-ttl{
    font-size: 18px;
}
.general-footer .f-block a{
    position: relative;
}
.general-footer .f-block a::before{
    content: "";
    position: absolute;
    bottom: -5px;
    width: 0;
    left: 0;
    height: 1px;
    background: #fff;
    transition: all 0.35s;
}
.general-footer .f-block a:hover::before{
    width: 100%;
    transition: all 0.35s;
}
.sns{text-align:right;margin:20px 0;}
.sns img{width:50px;margin:0 0 0 20px;}



/* sp用 */
@media screen and (max-width:768px){
    p{
        font-size: 14px;
    }
    .pc{
        display: none;
    }
    .sp{
        display: block;
    }
    .flex.sp-row{
        flex-flow: row wrap;
    }
    .inner{
        width: 90%;
    }
    .flex{
        flex-flow:row wrap; 
    }
    .mgb-df{
        margin-bottom: 20px;
    }
    .link-arrow{
        padding-left: 15px;
    }
    .link-arrow::before {
        width: 5px;
        height: 8px;
    }
    ul.n-list li, ol.n-list li{
        margin-bottom: 10px;
    }
    li ul,li ol{
        margin-top: 10px;
    }
    .n-list{
        margin-bottom: 20px;
    }
    ul.n-list li::before, li ul.n-list li::before {
        width: 5px;
        height: 5px;
        top: 6px;
        left: 2px;
    }
    /* ヘッダー */
    .general-header{
        padding: 12.5px 15px;
        width: calc(100% - 30px);
    }
    .general-header .logo-link{
        width: 80px;
    }
    .sp-burger{
        display: block;
        position: relative;
        width: 35px;
    height: 25px;
    margin-right: 5px;
    }
    .sp-burger::before,
    .sp-burger .middle,
    .sp-burger::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 3px;
        background: #ccc;
    }
    .sp-burger::before{
        top: 0;
        transition: all 0.55s;
    }
    .sp-burger .middle{        
        top: calc(50% - 1.5px);
        transition: all 0.55s;
        opacity: 1;
    }
    .sp-burger::after{
        bottom: 0;
        transition: all 0.55s;
    }
    .sp-burger.view-on::before{
        transition: all 0.55s;
        transform: rotate(45deg);
        top: calc(50% - 1.5px);
    }
    .sp-burger.view-on .middle{
        transition: all 0.55s;
        opacity: 0;
    }
    .sp-burger.view-on::after{
        transition: all 0.55s;
        transform: rotate(135deg);
        bottom: calc(50% - 1.5px);
    }
    .menus{
        display: block;
        z-index: 2;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 69px;
        /* overflow-y: scroll; */
        width: 100%;
        left: 0;
        transition: all 0.55s;
    }
    .menus.view-on{
        visibility: visible;
        opacity: 1;
        transition: all 0.55s;
    }
    .menus .back{
        position: absolute;
        width: 100%;
        height: calc(100vh - 69px);
        background: rgba(0,0,0,0.6);
        z-index: -1;
    }
    .general-header .r-side .h-link{
        padding: 0;
        font-size: 16px;
    }
    .general-header .r-side .h-link a{
        display: block;
        padding: 25px;
        background: #1d5d6c;
        color: #fff;
        border-bottom: 1px solid #fff;
    }
    .general-header .r-side .h-link:last-of-type a{
        border: none;
    }

    /* フッター */
    .general-footer .l-side{
        margin-bottom: 50px;
    }
    .general-footer .foot-linkers{
        flex-flow: row wrap;
        margin-bottom: 50px;
    }
    .general-footer .f-block{
        margin-left: 0;
        width: 100%;
        margin-bottom: 0px;
    }
    .general-footer .f-block li.on-pc{
        display: none;
    }
    .general-footer .f-block li,
    .general-footer .f-block li.lg-ttl{
        font-size: 16px;
    }
    .general-footer .r-side{
        width: 100%;
    }

    h2{
        font-size: 22px;
    }
    h3{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    .gr-ttl-h3{
        margin-bottom: 20px;
        padding: 10px 0;
    }

    .gradient-ttl{
        font-size: 34px;
    }
    .ttl-kv{
        padding: 150px 0 80px;
    }
    .general-footer .foot-logo{
        text-align: left;
    }
    .general-footer .l-side p{
        font-size: 10px;
    }
    .general-footer .foot-logo img{
        max-width: 135px;
    }

    .middle-pdd{
        padding: 35px 0;
    }
    .one-block{
        width: 100%;
    }
    .double-block{
        display: block;
    }
    .double-block .lrg-side,
    .double-block .sml-side{
        width: 100%;
        margin: 10px 0;
    }
    table.ordinary-table{
        font-size: 14px;
    }
    .ordinary-table .od-tr{
        flex-flow: row wrap;
    }
    .ordinary-table .od-tr:first-of-type{
        border-top: 1px solid #ccc;
    }
    .ordinary-table .od-th{
        width: calc(100% - 20px);
        padding: 10px;
        background: #efefef;
        text-align: center;
    }
    .ordinary-table .od-td{
        padding: 10px 0 20px;
        width: 100%;
    }

    /* 特殊演出 */
    .pj-card.fadein.scrollin:nth-of-type(1),
    .recom-conts.fadein.scrollin:nth-of-type(1),
    .pj-card.fadein.scrollin:nth-of-type(2),
    .recom-conts.fadein.scrollin:nth-of-type(2),
    .pj-card.fadein.scrollin:nth-of-type(3),
    .recom-conts.fadein.scrollin:nth-of-type(3),
    .pj-card.fadein.scrollin:nth-of-type(4){
        transition-delay: 0;
    }
}





/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> TOPページ専用 */
.mv-par{
    position: relative;
    height: 63.26vw;
}
.mv-head{
    position: absolute;
    top: 0;
    z-index: 3;
}
.top-mv{
    display: block;
    padding: 100px 0 0;
    height: calc(63.26vw - 100px);

    position: absolute;
    width: 100%;
    top: 0;
}
.top-mv .bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}
.top-mv.mv01{
    opacity: 1;
    animation: mv-change01 21s 2s infinite;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.top-mv.mv01 .bg{
    background: url(../img/top/mv_back01.jpg)no-repeat 50% 50%;
    background-size: cover;
    transform: scale(1.01);
    animation: bg-mv01 21s linear 2s infinite;
}
.top-mv.mv02{
    opacity: 0;
    animation: mv-change02 21s 2s infinite;
    overflow: hidden;
    visibility: hidden;
}
.top-mv.mv02 .bg{
    background: url(../img/top/mv_back02.jpg)no-repeat 50% 50%;
    background-size: cover;
    transform: scale(1.01);
    animation: bg-mv02 21s linear 2s infinite;   
}
.top-mv.mv03{
    opacity: 0;
    animation: mv-change03 21s 2s infinite;
    overflow: hidden;
    visibility: hidden;
}
.top-mv.mv03 .bg{
    background: url(../img/top/mv_back03.jpg)no-repeat 50% 50%;
    background-size: cover;
    animation: bg-mv03 21s linear 2s infinite;   
}
.top-mv:hover{
    opacity: 1;
}

/* mv01 */
.top-mv .mv01-inner{
    margin: auto;
    padding-top: 4%;
    width: 84%;
}
.top-mv .mv01-inner .mv-txt{
    margin-left: 25px;
    margin-bottom: -60px;
    width: 52%;
    opacity: 0;
    animation: txt-change01 21s 2s infinite;
}
.top-mv .mv01-inner .mv-txt img{
    width: 100%;
}
.top-mv .mv01-inner .servive-logo{
    text-align: right;
    margin-left: auto;
    width: 32%;

    opacity: 0;
    animation: fig-change01 21s 2s infinite;
}

/* mv02 */
.top-mv .mv02-inner{
    width: 72.5%;
    margin: auto;
    display: flex;
    padding-top: 3.5%;
}
.top-mv .mv02-inner .mv-txt{
    width: 39.75%;
    opacity: 0;
    animation: fig-change02 21s 2s infinite;
}
.top-mv .mv02-inner .mv-txt img{
    width: 100%;
}
.top-mv .mv02-inner .servive-logo{
    width: 59%;
    margin-left: auto;
    margin-bottom: 1.2%;
    order: 2;
    display: flex;
    align-items: flex-end;

    opacity: 0;
    animation: txt-change02 21s 2s infinite;
}

/* mv03 */
.top-mv .mv03-inner{
    width: 70.5%;
    margin: auto;
    display: flex;
    padding-top: 0;
    padding-left: 20.5%;
}
.top-mv .mv03-inner .mv-txt{
    width: 100%;
    margin-top:30%;
    opacity: 0;
    animation: fig-change03 21s 2s infinite;
}
.top-mv .mv03-inner .mv-txt img{
    width: 100%;
}
.top-mv .mv03-inner .servive-logo{
    width: 60%;
    margin-left: auto;
    margin-top:10%;
    order: 2;
    display: flex;
    align-items: flex-end;

    opacity: 0;
    animation: txt-change03 21s 2s infinite;
}

/* mv-animation - - 4sずつ切り替わる */
/* 全体 */
@keyframes mv-change01{    
    0%{opacity: 1;}
    33%{opacity: 1;}
    66%{opacity: 0;}
    99%{opacity: 0;}
    100%{opacity: 1;}

}
@keyframes mv-change02{
    0%{opacity: 0;visibility: hidden;}
    33%{opacity: 0;visibility: hidden;}
    66%{opacity: 1;visibility: visible;}
    99%{opacity: 0;visibility: hidden;}
    100%{opacity: 0;visibility: hidden;}
}
@keyframes mv-change03{
    0%{opacity: 0;visibility: hidden;}
    33%{opacity: 0;visibility: hidden;}
    66%{opacity: 0;visibility: hidden;}
    99%{opacity: 1;visibility: visible;}
    100%{opacity: 0;visibility: visible;}
}
/* 背景 */
@keyframes bg-mv01{    
    0%{transform: scale(1.01);}
    33%{transform: scale(1.06);}
    66%{transform: scale(1.03);}
    99%{transform: scale(1);}
    100%{transform: scale(1.01);}
}
@keyframes bg-mv02{
    0%{transform: scale(1.01);}
    33%{transform: scale(1.06);}
    66%{transform: scale(1.03);}
    99%{transform: scale(1);}
    100%{transform: scale(1.01);}
}
@keyframes bg-mv03{
    0%{transform: scale(1.01);}
    33%{transform: scale(1.06);}
    66%{transform: scale(1.03);}
    99%{transform: scale(1);}
    100%{transform: scale(1.01);}
}
/* コンテンツ */
@keyframes txt-change01{    
    0%{opacity: 0;}
    5%{opacity: 0;transform:translateY(25px);}
    /* 25%{opacity: 1;transform:translateY(0);} */
    10%{opacity: 1;transform:translateY(0);}
    80%{opacity: 1;}
    90%{opacity: 0;transform:translateY(0);}
    100%{opacity: 0;transform:translateY(25px);}
}
@keyframes txt-change02{
    0%{opacity: 1;transform:translateY(0);}
    40%{opacity: 0;transform:translateY(25px);}
    55%{opacity: 0;transform:translateY(25px);}
    /* 75%{opacity: 1;transform:translateY(0);} */
    60%{opacity: 1;transform:translateY(0);}
    90%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes txt-change03{
    0%{opacity: 1;transform:translateY(0);}
    70%{opacity: 0;transform:translateY(25px);}
    85%{opacity: 0;transform:translateY(25px);}
    /* 75%{opacity: 1;transform:translateY(0);} */
    90%{opacity: 1;transform:translateY(0);}
    95%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes fig-change01{    
    0%{opacity: 0;}
    5%{opacity: 1;}
    80%{opacity: 1;}
    90%{opacity: 0;}
    100%{opacity: 0;}
}
@keyframes fig-change02{
    0%{opacity: 1;}
    40%{opacity: 0;}
    50%{opacity: 0;}
    55%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes fig-change03{
    0%{opacity: 1;}
    70%{opacity: 0;}
    80%{opacity: 0;}
    90%{opacity: 1;}
    95%{opacity: 1;}
    100%{opacity: 1;}
}



.sec-conts{
    width: 100%;
    margin-bottom: 100px;
}
.sec-conts.half-conts{
    width: calc(50% - 80px);
    padding: 0 40px;
}
.sec-conts.half-conts.news-custom{
    width: calc(50% - 40px);
    padding: 0;
    padding-left: 40px;
}
.product-card{
    border: 1px solid #e0e0e0;
    display: block;
    transition: 0.35s;
}
.product-card:hover{
    opacity: 1;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
    transition: 0.35s;
}
.product-card .fig-box{
    padding: 80px 20px; 
    width: calc(100% - 40px);
    border-bottom: 1px solid #e0e0e0;
}
.product-card .explain-box{
    padding: 25px;
    width: calc(100% - 50px);
}
.product-card .explain-box .prdc-name{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 5px;
}

.news-sec .news-link{
    border-bottom: 1px solid #e0e0e0;
    display: block;
    padding: 15px 0;
}
.news-sec .news-link .date{
    color: #888888;
    font-size: 12px;
    margin-right: 50px;
}
.news-sec a{color:#4492a4;}


@media screen and (max-width:768px){
    .mv-par{
        height: calc(120vw + 70px)  ;
    }
    .top-mv{
        padding: 70px 0 0;    
        height: 120vw;    
    }
    .top-mv.mv02{
        display: flex;
    }
    .top-mv.mv03{
        display: flex;
    }
    .top-mv.mv01 .bg{        
        background-position: 66% 50%;
        background-size: auto 100%;
    }
    .top-mv.mv02 .bg{
        background-position: 69% 50%;
        background-size: auto 100%;
    }
    .top-mv.mv03 .bg{
        background-position: 30% 50%;
        background-size: auto 100%;
    }
    .top-mv .mv01-inner {
        margin: auto;
        margin-bottom: 30px;
        padding-top: 4%;
        width: 90%;
    }
    .top-mv .mv02-inner{
        width: 90%;
        margin: auto;
        margin-bottom: 15%;
    }
    .top-mv .mv03-inner{
        width: 95%;
        margin: auto;
        margin-bottom: 15%;
    }
    .top-mv .mv01-inner .mv-txt {
        margin-left: 0;
        margin-bottom: -60px;
        width: 65%;
    }
    .top-mv .mv01-inner .servive-logo {
        width: 40%;
    }
    .top-mv .mv02-inner .servive-logo{
        margin-bottom: 20px;
        width: 65%;
        margin-right: -6%;
    }
    .top-mv .mv02-inner .mv-txt{
        transform:translateX(0);
    }
    .top-mv .mv03-inner .servive-logo{
        margin-bottom: 20px;
        width: 55%;
        margin-right: 3%;
    }
    .top-mv .mv03-inner .mv-txt{
        transform:translateX(0);
        margin-left: -20%;
    }

    .sec.s-first{
        padding: 60px  0 20px;
    }
    .sec-conts.half-conts,
    .sec-conts.half-conts.news-custom{
        width: 100%;
        padding:0;
    }
    .product-card .fig-box{
        padding: 40px 20px;
    }
    .news-sec .news-link .date{
        margin-right: 25px;
    }
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 会社案内用 */
.guide-sec{
    position: relative;
    padding-top: 85px;
    margin-bottom: 70px;
}
.guide-sec::before{
    position: absolute;
    content: "";
    height: 88%;
    width: 33%;
    background: #4492a4;
    top: 0;
    left: 0;
}
.guide-sec .l-fig{
    width: 37%;
}
.guide-sec .r-txt{
    width: 54%;
    margin-left: auto;
    padding: 50px 0 100px;
}
.guide-more{
    text-align: right;
    margin-top: 70px;
}
.guide-more .emerald-btn{
    min-width: 268px;
    text-align: left;
}
.project-box{
    position: relative;
    padding-bottom: 185px;
    margin-bottom: 130px;
}
.project-box::before{
    content: "";
    position: absolute;
    background: url(../img/company/project_img.jpg)no-repeat 10% 100%;
    background-size: contain;
    max-width: 1130px;
    width: 88.5%;
    left: 50%;
    top: 60px;
    height: calc(100% - 60px);
    transform: translateX(-50%);
}
.pj-card{
    width:calc(20% - 48px); 
    color: #fff;
    text-align: center;
    margin: auto;
    box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15); 
    letter-spacing: 0;
    padding: 15px;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    min-height: 170px;
}
.pj-card .ttl-h4{
    font-size: 18px;
    font-weight: bold;
}
.pj-card .pj-exp{
    margin-top: auto;
}
.pj-card:nth-of-type(1){
    background-image: -moz-linear-gradient( 20deg, rgb(96,142,152) 0%, rgb(121,192,181) 100%);
    background-image: -webkit-linear-gradient( 20deg, rgb(96,142,152) 0%, rgb(121,192,181) 100%);
    background-image: -ms-linear-gradient( 20deg, rgb(96,142,152) 0%, rgb(121,192,181) 100%);    
}
.pj-card:nth-of-type(2){
    background-image: -moz-linear-gradient( 20deg, rgb(124,182,170) 0%, rgb(82,165,104) 97%);
    background-image: -webkit-linear-gradient( 20deg, rgb(124,182,170) 0%, rgb(82,165,104) 97%);
    background-image: -ms-linear-gradient( 20deg, rgb(124,182,170) 0%, rgb(82,165,104) 97%);
}
.pj-card:nth-of-type(3){
    background-image: -moz-linear-gradient( 20deg, rgb(109,161,110) 0%, rgb(155,186,122) 99%);
    background-image: -webkit-linear-gradient( 20deg, rgb(109,161,110) 0%, rgb(155,186,122) 99%);
    background-image: -ms-linear-gradient( 20deg, rgb(109,161,110) 0%, rgb(155,186,122) 99%);
}
.pj-card:nth-of-type(4){
    background-image: -moz-linear-gradient( 20deg, rgb(168,190,103) 0%, rgb(217,210,100) 100%);
    background-image: -webkit-linear-gradient( 20deg, rgb(168,190,103) 0%, rgb(217,210,100) 100%);
    background-image: -ms-linear-gradient( 20deg, rgb(168,190,103) 0%, rgb(217,210,100) 100%);
}
.pj-card:nth-of-type(5){
    background-image: -moz-linear-gradient( 20deg, rgb(209,204,99) 0%, rgb(245,223,110) 100%);
    background-image: -webkit-linear-gradient( 20deg, rgb(209,204,99) 0%, rgb(245,223,110) 100%);
    background-image: -ms-linear-gradient( 20deg, rgb(209,204,v) 0%, rgb(245,223,110) 100%);
}
  
.pj-btns{
    margin-bottom: 80px;
}
.pj-btns .l-side,
.pj-btns .r-side{
    width: 50%;
}
.pj-btns .r-side{
    text-align: right;
}
.bnt-db{
    width: 50%;
    margin-bottom: 40px;
}
.pj-btns .emerald-btn,
.emerald-btn.sz-lrg{
    width: calc(100% - 100px);
    padding:50px 40px;
    padding-right:50px;
    font-size: 24px;
}
.pj-btns .emerald-btn::after,
.emerald-btn.sz-lrg::after{
    width: 23px;
    height: 22px;
    right: 30px;
}
.pj-btns .emerald-btn:hover::after,
.emerald-btn.sz-lrg:hover::after{
    right: 20px;
}
.pj-btns .r-side .emerald-btn,
.emerald-btn.sz-lrg.btnr{
    margin-left: auto;
    text-align: left;
}
.greeting-sec{
    padding: 65px 0 85px;
    background: linear-gradient(to right, rgb(71,146,164) 0%, rgb(155,208,213) 69%, rgb(219,223,150) 100%);
}
.gt-inner{
    width: 80%;
    margin: auto;
    color: #fff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.8;
}
.gt-inner .intr-txt{
    margin-bottom: 30px;
}
.gt-inner .sign{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-end;
}
.gt-inner .sign span{
    padding-right: 30px;
}
.gt-inner .sign img{
    max-width: 161px;
}
.philosophy-sec{
    padding: 105px 0;
}
.philosophy-sec .gr-ttl-h2{
    margin-bottom: 30px;
}
.phil-conts{
    padding-bottom: 30px;
}
.phil-card{
    display: flex;
    padding:60px 0;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.8;
    border-bottom: 1px solid #ccc;
}
.phil-card .l-conts{
    width: calc(25.5% - 34px);
    padding-right: 30px;
    padding-left: 4px;
}
.phil-card .theme{
    color: #ccc;
    font-size: 50px;
    line-height: 0.7;
    padding-bottom: 10px;
    letter-spacing: 4px;
}
.phil-card .r-conts{
    width: calc(74.5% - 40px);
    padding-left: 40px;    
}

@media screen and (max-width:768px){
    .gt-inner{
        width: 100%;
    }   
    .guide-sec{
        padding-top: 55px;
    }
    .guide-sec::before{
        width: 72vw;
        height: calc(72vw * 1.34)
    }
    .guide-sec .l-fig{
        width: 100%;
        text-align: center;
    }
    .guide-sec .l-fig img{
        width: 80%;
    }
    .guide-sec .r-txt{
        width: 100%;
        padding: 50px 0 50px;
    }
    .guide-more{
        text-align: left;
    }
    .guide-more .emerald-btn{
        min-width: 0;
        width: calc(100% - 80px);
        max-width: 300px;
    }
    .project-box{
        padding-top: 60px;
        padding-bottom: 30px;
    }
    .project-box::before{
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        opacity: 0.5;
    }
    .pj-card{
        width: calc(100% - 48px);
        min-height: 0;
        margin-bottom: 40px;
    }
    .pj-card .ttl-h4{
        margin-bottom: 20px;
        width: 100%;
    }
    .pj-btns .l-side, .pj-btns .r-side,.bnt-db{
        width: 100%;
        margin-bottom:30px;
    }
    .pj-btns{
        margin-bottom: 50px;
    }
    .pj-btns .emerald-btn,
    .emerald-btn.sz-lrg{
        width: calc(100% - 90px);
        padding: 30px 40px;
        padding-right: 50px;
    }
    .gt-inner .sign span{
        padding-right: 0;
        padding-bottom: 5px;
    }
    .phil-card{
        flex-flow: row wrap;
        padding: 40px 0;
    }
    .phil-card .l-conts{
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
        display: flex;
        align-items: flex-end;
    }
    .phil-card .theme{
        font-size: 40px;
        padding-right: 15px;
    }
    .phil-card .r-conts{
        width: 100%;
        padding: 0;
    }
}







/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> product(lalala Placenta)用 */
.font-navy{
    color: #1e304f;
}
.placenta-header{
    background: #fff;
    padding: 11px;
    width: calc(100% - 22px);    
}
.placenta-header.fixed{
    position: fixed;
    top: 0;
    z-index: 5;
}
.placenta-header .h-inner{
    max-width: 1000px;
    margin: auto;
    display: flex;
    align-items: center;
}
.placenta-header .pr-logo{
    margin-right: auto;
}
.placenta-header .lalala-logo img{
    max-width:183px;
}
.placenta-header .h-link{
    padding: 0 20px;
    font-size: 18px;
}
.placenta-header .h-link:last-of-type{
    padding-right: 0;
}
.placenta-header .h-link a{
    color: #1e304f;
}
.placenta-header .h-link a.btn-darkblue{
    color: #fff;
    padding: 6px 45px;
}
.placenta-header .h-link a:hover{
    opacity: 1;
}
.placenta-footer{
    background: #555555;
    color: #fff;
    padding: 12.5px;
    font-size: 12px;
    color: #fff;
    letter-spacing: 0;  
}
.placenta-footer a{
    color: #fff;
}
.placenta-footer .copy-right{    
    display: flex;
    align-items: center;
}
.placenta-footer .copy-right img.logo{
    width: 55px;
    height: auto;
    margin-right: 15px;
}
.placenta-footer .l-side{
    order: 1;
}
.placenta-footer .r-side{
    order: 2;
    margin-left: auto;
    list-style: none;
    padding-left: 0;
    display: flex;
}
.placenta-footer .r-side li{
    padding-left: 23px;
}
.placenta-footer .r-side li a{
    padding-left: 12px;
    position: relative;
}
.placenta-footer .r-side li a::before{
    content: "";
    position: absolute;
    background: url(../img/triangle_white.png)no-repeat;
    background-size: contain;
    width: 5px;
    height: 7px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.placenta-footer .r-side li a::after{
    content: "";
    position: absolute;
    bottom: -5px;
    width: 0;
    left: 0;
    height: 1px;
    background: #fff;
    transition: all 0.35s;
}
.placenta-footer .r-side li a:hover::after{
    width: 100%;
    transition: all 0.35s;
}
.placenta-footer .r-side li a:hover{
    opacity: 1;
}
.placenta_mv{
    background: url(../img/lalalaplacenta/mv_main_neo.jpg)no-repeat 50% 50%;
    background-size: cover;
    min-height: 600px;
    margin-top: 100px;
    position: relative;
}
/*.placenta_mv::before{
    content: "";
    position: absolute;
    width: 60px;
    height: 61px;
    background: url(../img/lalalaplacenta/pink-arrow_sp.png)no-repeat;
    background-size: contain;
    bottom: -30.5px;
    left: calc(50% - 30px);
    opacity: 0;
    animation: mv-arrow-pink 3s 4.5s infinite,loading-fade 1.5s 3s forwards;
}*/

@keyframes mv-arrow-pink{
    0%{
        bottom: -30.5px;
    }
    50%{
        bottom: -91.5px;
    }
    100%{
        bottom: -30.5px;
    }
}

.placenta_mv .la_mvinner{
    position: relative;
    padding-top: 60px;
}
.placenta_mv .la_mvinner .txt-exp{
    position: absolute;
    right: -5px;
}
.placenta_mv .la_mvinner .half{
    width: 50%;
}
.placenta_mv .la_mvinner .fig-prdc{
    width: 322px;
    margin: auto;
    opacity: 0;
    animation: lalala-mv-anime 1.5s 2s forwards;
}
.placenta_mv .la_mvinner .fig-prdc img{
    width: 100%;
    max-width: 322px;
}

@keyframes lalala-mv-anime{
    0%{
        opacity: 0;
        transform: translateY(50px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.pct-fir-sec{
    padding: 100px 0 45px;
    position: relative;
}
.pct-fir-sec .ttl-h2,
.recom-sec .ttl-h2,
.secret-sec .ttl-h2,
.potential-sec .ttl-h2,
.cv-plac-sec .ttl-h2,
.component-sec .ttl-h2,
.environment-sec .ttl-h2,
.howto-sec .ttl-h2,
.subsc-sec .ttl-h2,
.mv-prct .ttl-h1{
    font-size: 30px;
    margin-bottom: 35px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0;
}
.pct-fir-sec .exp{
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
}
.pct-fir-sec::after{
    content: "";
    position: absolute;
    background: url(../img/lalalaplacenta/placenta_pinc_logo.png)no-repeat 50% 50%;
    background-size: contain;
    width: 311px;
    height: 194px;
    bottom: 25px;
    right: calc(50% - 445px);
    z-index: -1;
}
.recom-sec{
    position: relative;
    margin-bottom: 75px;
    padding: 70px 0 40px;
}
.recom-sec::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/recom_back.png)no-repeat 50% 50%;
    background-size: cover;
    height: 100%;
    width: 90%;
    max-width: calc(50% + 500px);
    right: 0;
    top: 0;
}
.recom-flex{
    justify-content: center;
    flex-flow: row wrap;
}
.recom-conts{
    margin: 18px;
    width: 25.6%;
    min-width: 200px;
}

.secret-sec{
    margin-bottom: 75px;
}
.secret-inner{
    position: relative;
    padding: 30px 0 20px;
}
.secret-inner::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/secret_back.jpg)no-repeat 50% 50%;
    background-size: cover;
    height: 100%;
    width: 72%;    
    right: 0;
    top: 0;
}
.secret-sec .ttl-h2{
    text-align: left;
    margin-bottom: 20px;
}
.secret-inner .txt-conts{
    width: 43%;
    letter-spacing:0;
}
.secret-inner .txt-conts .exp{
    margin-bottom: 40px;
}
.secret-inner .txt-conts .btn{
    max-width: 340px;
}
.secret-inner .txt-conts .btn .pinc-link{
    display: block;
    font-size: 18px;
    color: #e14061;
    position: relative;
    padding-bottom: 5px;
}
.secret-inner .txt-conts .btn .pinc-link::before{
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #e14061;
}
.secret-inner .note{
    position: absolute;
    font-size: 10px;
    color: #fff;
    opacity: 0.8;
    letter-spacing: 0;
    bottom: 10px;
    right: 5px;
}

.potential-sec{
    margin-bottom: 55px;
}
.potential-sec .pot-inner{
    position: relative;

}
.potential-sec .pot-inner::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/poten_back.jpg)no-repeat 0% 50%;
    background-size: cover;
    height: calc(100% - 30px);
    width: 72%;    
    left: 0;
    top: 10px;
}
.potential-sec .ttl-h2{
    text-align: left;
    margin-bottom: 20px;
}
.potential-sec .txt-conts{
    position: relative;
    letter-spacing: 0;
    width: calc(67.5% - 80px);
    margin-left: auto;
    padding: 45px 0 70px;
    padding-left: 80px;
}
.potential-sec .txt-conts::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/poten_txt_back.png)no-repeat 50% 50%;
    background-size: contain;
    height: 100%;
    width: 100%;    
    left: -5%;
    top: 10px;
}

.cv-plac-sec{
    padding: 35px 0;
    position: relative;
}
.cv-plac-sec::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/cvplacenta_back.png)no-repeat 50% 50%;
    background-size: cover;
    height: 100%;
    width: 100%;    
    left: 0;
    top: 0;
}
.fcvplac-flex{    
    display: flex;
}
.cv-plac-sec .l-conts{
    padding: 35px 65px;
    letter-spacing: 0;
    width: calc(50% - 130px);    
}
.cv-plac-sec .ttl-h2{
    text-align: left;
}
.cv-plac-sec .l-conts .btn-w-txt{
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 30px;
}
.cv-plac-sec .l-conts .btn-w-txt .intr-txt{
    margin-bottom: 5px;    
}
.cv-plac-sec .l-conts .btn-w-txt .intr-txt.fk-mg{
    padding-right: 25px;
}
.cv-plac-sec .l-conts .btn-w-txt .intr-txt .large{
    font-size: 24px;
    font-weight: bold;
}
.cv-plac-sec .l-conts .btn-w-txt.mgb-more{
    margin-bottom: 45px;
}
.btn-clear,.btn-darkblue{
    padding: 12.5px 35px;
    text-align: center;
    display: block;
    color: #1e304f;
    letter-spacing: 0.5px;
    position: relative;
    max-width: 270px;
}
.btn-clear{    
    border: 1px solid #1e304f;    
}
.btn-clear::after,
.btn-darkblue::after{
    content: "";
    position: absolute;
    width: 8px;
    height: 11px;
    right: 13.5px;
    top: 50%;
    transform: translateY(-50%);
}
.btn-clear::after{
    background: url(../img/lalalaplacenta/trriangle_db.png)no-repeat 50% 50%;
    background-size: contain;
}
.btn-darkblue::after{
    background: url(../img/lalalaplacenta/trriangle_wt.png)no-repeat 50% 50%;
    background-size: contain;
}
.btn-darkblue{
    color: #fff;
    background: #1e304f;
}
.itsudemo::before{
    position: absolute;
    content: "";
    background: url(../img/lalalaplacenta/itudemo_fukidashi.png)no-repeat 50% 50%;
    width:116px;
    height:56px;
    background-size: contain;
    top: -5px;
    right: 0;
    transform: translate(80%, -80%);
}
.cv-plac-sec .r-conts{
    padding-left: 35px;
    width: calc(50% - 35px);
}
.cv-plac-sec .r-conts img{
    width: 100%;
    max-width: 467px;
}

.mv-prct{
    background: #f3f3f3;
    padding-top: 130px;
}
.cv-plac-sec.dtl-prct{
    z-index: 1;
    padding: 40px 0 20px;
}
.cv-plac-sec.dtl-prct::before{
    background: url(../img/lalalaplacenta/mv_cvplacenta_back.png)no-repeat 50% 50%;
    background-size: cover;
}
.cv-plac-sec.dtl-prct .l-conts{
    padding: 15px 65px 5px;
}
.cv-plac-sec.dtl-prct .r-conts{
    padding-right: 65px;
    width: calc(50% - 110px);
    padding-left: 45px;
}
.cv-plac-sec.dtl-prct .r-conts.mv-anm{
    opacity: 0;
    animation: lalala-mv-anime 1.5s 2s forwards;
}

.component-sec{
    background: #f3f3f3;
    padding: 60px 0 35px;
}
.expr-inr .fig{
    width: 33.5%;
    margin-right: auto;
}
.expr-inr{
    margin-bottom: 55px;
}
.expr-inr .sentence{
    width: 60%;
}
.component-sec .ttl-h5{
    margin-bottom: 30px;
    font-weight: bold;
}
.expr-inr .sentence .exp{
    letter-spacing: 0;
    margin-bottom: 25px;
}
.expr-inr .sentence .topic-box{
    background: #1e304f;
    color: #fff;
    padding: 25px 30px;
}
.expr-inr .sentence .topic-box .ttl{
    font-size: 21px;
    margin-bottom: 15px;
    position: relative;
}
.expr-inr .sentence .topic-box .ttl::after{
    content: "";
    position: absolute;
    background: url(../img/lalalaplacenta/topic_action.png)no-repeat 50% 50%;
    background-size: contain;
    width: 18px;
    height: 20px;
    top: -3px;
    left: 70px;
}
.expr-inr .sentence .topic-box .stc{
    letter-spacing: 0;
}
.ingredients{
    flex-flow: row wrap;
}
.ingredients .igrd-card{
    width: 31%;
    position: relative;
    margin-bottom: 40px;
    margin-left: auto;
}
.ingredients .igrd-card:first-of-type{
    margin-left: 0;
}
.ingredients .igrd-card:last-of-type{
    margin-left: 45px;
    margin-right: auto;
}
.ingredients .igrd-card .img-fig{
    width: 200px;
}
.ingredients .igrd-card .img-fig img{
    width: 100%;
}
.ingredients .igrd-card .c-exp{
    width: 195px;
    position: relative;
    margin-left: auto;
    margin-top: -120px;
    background: rgba(255,255,255,0.5);
    letter-spacing: 0;
    padding: 10px;
    min-height: 240px;
}
.ingredients .igrd-card .c-exp .ttl{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.environment-sec{
    padding: 55px 0 65px;
}
.env-inner{
    min-height: 320px;
    display: flex;
    align-items: center;
}
.env-inner::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/environment_back.jpg)no-repeat 50% 50%;
    background-size: cover;
    height: 100%;
    width: 72%;    
    right: 0;
    top: 0;
}
.env-inner .ttl-h2{
    text-align: left;
    margin-bottom: 20px;
}
.env-inner .txt-conts{
    width: 41.5%;
    letter-spacing:0;
}
.env-inner .txt-conts .exp{
    margin-bottom: 40px;
}


.howto-sec{
    padding: 55px 0 105px;
}
.howto-sec .howto-inner{
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
}
.howto-sec .howto-inner::before{
    position: absolute;
    content: "";
    z-index: -1;
    background: url(../img/lalalaplacenta/howto_back.jpg)no-repeat 0% 50%;
    background-size: cover;
    height: calc(100% - 30px);
    width: 72%;    
    left: 0;
    top: 10px;
}
.howto-sec .ttl-h2{
    margin-bottom: 20px;
}
.howto-sec .txt-conts{
    letter-spacing: 0;
    width: 35.5%;
    margin-left: auto;
}
.howto-sec .txt-conts .ttl-h2{
    text-align: left;
    font-size: 29px;
}


.subsc-sec{
    background: #f3f3f3;
    padding: 60px 0;
}
.subsc-sec .ttl-h2,
.mv-prct .ttl-h1{
    position: relative;
}
.subsc-sec .ttl-h2::after,
.mv-prct .ttl-h1::after{
    content: "";
    position: absolute;
    background: url(../img/lalalaplacenta/topic_action_gray.png)no-repeat 50% 50%;
    background-size: contain;
    width: 30px;
    height: 32px;
    top: -3px;
    margin-left: 10px;
}
.subsc-list{
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    display: inline-block;
    text-align: left;
}
.subsc-list li{
    text-indent: -45px;
    padding-left: 45px;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: bold;
}
.subsc-list li:before {
    counter-increment: item;
    content: counter(item);
    padding: 4px 6.35px;
    font-weight: normal;
    font-size: 18px;
    color: #fff;
    background: #1e304f;
    border-radius: 50px;
    margin-right: 22px;
}

@media screen and (min-width:768px){
    .placenta-header .r-side{
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s;
    }
    .placenta-header.scr-on .r-side{
        visibility: visible;
        opacity: 1;
        transition: all 0.5s;
    }
    .placenta-header .pr-logo{
        transition: all 0.5s;
        position: relative;
        left: 50%;
        transform: translateX(-50%);        
    }
    .placenta-header.scr-on .pr-logo{
        transition: all 0.5s;        
        left: 0;
        transform: translateX(0);
    }
}
@media screen and (max-width:768px){
    .pct-fir-sec{
        padding: 50px 0 22.5px;
    }
    .recom-sec{
        padding: 35px 0 20px;
    }
    .placenta-header{
        padding: 7px;
        width: calc(100% - 14px);
    }
    .placenta-header .lalala-logo{    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .placenta-header .lalala-logo img{
        max-width: 91.5px;
    }
    .placenta-header .pr-logo{
        margin-left: auto;
    }
    .placenta-header .r-side{
        margin-left: -40px;
    }
    .placenta-header .menus .back{
        height: calc(100vh - 49px);
    }
    .placenta-header .menus{
        top: 49px;
    }
    .placenta-header .h-link{
        padding: 0;
        font-size: 16px;
    }
    .placenta-header .h-link a{
        display: block;
        padding: 25px;
        background: #fff;
        color: #1e304f;
        border-top: 1px solid #1e304f;
    }
    .placenta-header .h-link:last-of-type a{
        border: none;
    }
    .placenta-header .h-link a.btn-darkblue{
        background: #1e304f;
        color: #fff;
        padding: 25px;
        width: calc(100% - 50px);
        max-width: unset;
        text-align: left;
    }

    .placenta_mv{
        background: url(../img/lalalaplacenta/mv_main_sp.jpg)no-repeat 50% 50%;
        background-size: cover;
        min-height: 0;
        margin-top: 50px;
    }
    .placenta_mv::before{
        width: 30px;
        height: 30.5px;
        left: calc(50% - 15px);
        bottom: -15.25px;
        opacity: 0;
        animation: mv-arrow-pink-sp 3s 4.5s infinite,loading-fade 1.5s 3s forwards;
    }
    .placenta_mv .la_mvinner{
        padding-top: 50px;
        padding-bottom: 25px;
    }
    .placenta_mv .la_mvinner .half{
        width: 48%;
        margin-top: 30px;
        margin-left: -5px;
    }
    .placenta_mv .la_mvinner .txt-exp{
        position: relative;
        right: 0;
        width: calc(50% + 5px);
    }
    .placenta_mv .la_mvinner .fig-prdc{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .placenta-footer{
        padding: 12.5px 0;
    }
    .placenta-footer .flex{
        display: block;
    }
    .placenta-footer .r-side{
        width: 100%;
        flex-flow: row wrap;
        margin-bottom: 27.5px;
    }
    .placenta-footer .r-side li{
        padding-left: 0;
        padding-right: 18px;
        font-size: 8px;
    }
    .placenta-footer .r-side li:last-of-type{
        padding-right: 0;
    }
    .placenta-footer .r-side li a::before{
        width: 2px;
        height: 3px;
    }
    .placenta-footer .r-side li a{
        padding-left: 6px;
    }
    .placenta-footer .l-side{
        width: 100%;
    }
    .placenta-footer .copy-right .copys{
        font-size: 12px;
        transform: scale(0.5);
        transform-origin: left bottom;
    }    
    .recom-sec .ttl-h2,
    .secret-sec .ttl-h2,
    .potential-sec .ttl-h2,
    .cv-plac-sec .ttl-h2,
    .component-sec .ttl-h2,
    .environment-sec .ttl-h2,
    .howto-sec .ttl-h2,
    .subsc-sec .ttl-h2,
    .mv-prct .ttl-h1{
        font-size: 26px;
    }
    .pct-fir-sec .ttl-h2{
        font-size: 25px;
    }
    .pct-fir-sec .exp{
        font-size: 16px;
    }
    .pct-fir-sec::after{
        width: 150px;
        height: 95px;
        bottom: 40px;
        right: 0;
    }
    .recom-sec::before{
        background: url(../img/lalalaplacenta/recom_back_sp.png)no-repeat 50% 50%;
        background-size: cover;        
        width: 100%;
    }
    .recom-conts{
        margin: 9px;
    }    
    .secret-sec{
        margin-bottom: 35px;
    }
    .secret-inner::before{
        display: none;
    }
    .secret-inner .txt-conts{
        width: 100%;
    }
    .secret-inner .txt-conts .exp{
        margin-bottom: 20px;
    }
    .secret-inner .txt-conts .btn{
        width: 50%;
        margin-bottom: 35px;        
    }
    .secret-inner .txt-conts .btn .pinc-link{
        font-size: 16px;
        padding-bottom: 2.5px;
    }
    .secret-inner .img-fig{
        position: relative;
    }
    .secret-inner .img-fig img{
        max-width: 100%;
    }
    .secret-inner .note{
        bottom: 2.5px;
        right: 2.5px;
        font-size: 9px;
    }

    .potential-sec .pot-inner::before,
    .potential-sec .txt-conts::before{
        display: none;
    }
    .potential-sec .txt-conts{
        width: 100%;
        padding: 20px 0 35px;

    }
    .potential-sec .txt-conts .sp-fig{
        margin-top:42.5px
    }
    .cv-plac-sec::before{
        background: url(../img/lalalaplacenta/cvplacenta_back_sp.png)no-repeat 50% 50%;
        background-size: cover;
    }
    .fcvplac-flex{
        flex-flow: row wrap;
    }
    .cv-plac-sec .l-conts{
        margin: auto;
        width: 90%;
        padding: 0;
    }
    .cv-plac-sec .r-conts{
        display: none;
    }
    .prc-top-sp{
        display: flex;
        margin-bottom: 25px;
    }
    .prc-top-sp .l-prctop{
        width: 52%;
    }
    .prc-top-sp .r-prctop{
        width: 48%;
    }
    .cv-plac-sec .ttl-h2{
        margin-bottom: 17.5px;
        font-size: 18px;
    }
    .cv-plac-sec .l-conts .btn-w-txt.mgb-more .intr-txt{
        font-size: 12px;
        margin-bottom: 14px;
    }
    .cv-plac-sec .l-conts .btn-w-txt.mgb-more .btn-clear{
        font-size: 9px;
        padding: 6px 17.5px;
        width: calc(85% - 35px);
    }
    .cv-plac-sec .l-conts .btn-w-txt.mgb-more .btn-clear::after{
        width: 5px;
        height: 7px;
        right: 7.5px;
    }
    .cv-plac-sec .l-conts .btn-w-txt.mgb-more{
        margin-bottom: 75px;
    }
    .cv-plac-sec .l-conts .btn-w-txt .intr-txt{
        font-size: 18px;
    }
    .cv-plac-sec .l-conts .btn-w-txt .intr-txt.fk-mg{
        padding-right: 0;
    }
    .itsudemo::before{
        transform: none;
        top: -100px;
        right: calc(100% - 116px);
    }
    .btn-darkblue{
        width: calc(100% - 70px);
    }
    .expr-inr .fig{
        width: 60%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 30px;
    }
    .expr-inr .sentence{
        width: 100%;
    }
    .expr-inr .sentence .topic-box{
        padding: 15px;
    }
    .expr-inr .sentence .topic-box .ttl{
        font-size: 19px;
        margin-bottom: 10px;
    }
    .expr-inr .sentence .topic-box .ttl::after{
        width: 15px;
        height: 17px;
        top: -3px;
        left: 65px;
    }
    .ingredients .igrd-card{
        width: 100%;
    }
    .ingredients .igrd-card .c-exp{
        padding: 20px;
        min-height: 0;
        width: calc(100% - 130px);
    }
    .ingredients .igrd-card:last-of-type{
        margin-left: auto;
    }

    .env-inner{
        flex-flow: row wrap;
    }
    .env-inner::before{
        display: none;
    }
    .env-inner .txt-conts{
        width: 100%;
    }
    .env-inner .txt-conts .exp{
        margin-bottom: 20px;
    }
    .env-inner .img-fig{
        position: relative;
    }
    .env-inner .img-fig img{
        max-width: 100%;
    }
    .howto-sec .txt-conts .ttl-h2{
        font-size: 26px;
    }
    .howto-sec .howto-inner::before{
        display: none;
    }
    .howto-sec .txt-conts{
        width: 100%;
        padding: 20px 0 35px;
    }
    .howto-sec .txt-conts .sp-fig{
        margin-top: 20px;
    }
    .subsc-sec .ttl-h2::after,
    .mv-prct .ttl-h1::after{
        width: 25px;
        height: 27px;
        top: -2px;
        margin-left: 8px;
    }
    .subsc-list li{
        font-size: 20px;
        text-indent: -42px;
        padding-left: 42px;
    }
    .subsc-list li:before{
        font-size: 16px;
        padding: 4px 6.5px;
        margin-right: 17px;
    }
    .mv-prct{
        padding-top: 80px;
    }
    .cv-plac-sec.dtl-prct .l-conts{
        padding: 0;
    }
}

@keyframes mv-arrow-pink-sp{
    0%{
        bottom: -15.25px;
    }
    50%{
        bottom: -45.75px;
    }
    100%{
        bottom: -15.25px;
    }
}


/*オリジナルパンくず作成*/
.breadcrumb {
    
    padding: 0px 0px 30px;
    color:#aaa;
    font-size:80%;
}
.breadcrumb a{
    color:#888;
}
.breadcrumb ul {
    display: inline;
    list-style: none;
    padding: 0 20px;
}

.breadcrumb li {
    display: inline;
}
.breadcrumb li:after {
    content: '>';
    color: #ddd;
    padding-left: 2px;
}

.breadcrumb li:last-child:after {
    content: '';
}