@charset "Shift_JIS"; /**/
/* BASE */
.body_sph .contents_main{margin: 0;}
:root{
--fs-base:clamp(16px, 2.5vw, 18px);
--fs-attention:clamp(12px, 2.0vw, 13px);
--fs-point:clamp(18px, 2.0vw, 20px);
--color-bg-cta_green:#e3efeb;
--color-bg-cta_yellow:#fcf8e7;
--color-txt-muted:#666;
--color-txt-cp:#eb602b;
--color-txt-green:#1d3f3c;
--font-ryumin:a-otf-ryumin-pr6n, serif;
--font-century:century-gothic, sans-serif;
--font-noto:noto-sans-cjk-jp, sans-serif;
--font-avenir:avenir-next-lt-pro, sans-serif;
}
.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0); /* 古いブラウザ用 */
    clip-path: inset(50%); /* 新しいブラウザ用 */
    border: 0;
    white-space: nowrap; /* 複数行でも崩れ防止 */
}

/* Top Page */
#retino_a_essence {
    text-align: center;
    background-color: #FFFFFF;
    font-family: "icomoon", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: var(--fs-base);
    overflow: hidden;
}
#retino_a_essence section.fv{
    position: relative;
    background-color: var(--color-bg-cta_green);
}
#retino_a_essence section.fv .cta_link {
    position: absolute;
    height: 300px;
    width: 400px;
    top: 28%;
    left: 23%;
}
#retino_a_essence section.fv .cta_link02 {
    position: absolute;
    height: 150px;
    width: 190px;
    top: 62%;
    right: 13%;
}
#retino_a_essence .attention{
    text-align: right;
    padding: 0% 3% 3% 7%;
    margin-bottom: 0;
    font-size: var(--fs-attention);
    color: var(--color-txt-muted);
}
#retino_a_essence p.attention span {
    display: inline-block;
    padding-left: 1em;
}
/* 顔図 */
#retino_a_essence .facial {
    padding: 10% 0;
}
#retino_a_essence .facial img {
    margin-bottom: 5%;
}
/* 3つのポイント */
#retino_a_essence .point .point_title_txt {
    width: 90%;
    padding-bottom: 3%;
}
#retino_a_essence section.point [class^="point0"] {
    position: relative;
    font-family: var(--font-avenir);
    font-size: var(--fs-point);
    color: var(--color-txt-green);
    font-weight: 200;
    line-height: 1.2;
}
#retino_a_essence section.point p.point_icon {
    width: 120px;
    margin: 0 auto 7%;
    padding-top: 7%;
}
#retino_a_essence section.point p.point_icon span {
    font-size: 60px;
    display: block;
    border-bottom: 1px solid var(--color-txt-green);
}
#retino_a_essence section.point [class^="point0"] h3{
    font-family: var(--font-ryumin);
    font-size: clamp(25px, 5vw, 45px);
    font-weight: normal;
    font-feature-settings: "palt";
}
#retino_a_essence section.point [class^="point0"] h3 span.big{
    font-size: 120%;
    vertical-align: bottom;
    margin-left: 0;
}
#retino_a_essence section.point [class^="point0"] p.txt{
    font-family: var(--font-noto);
    font-size: clamp(16px, 2vw, 20px);
    text-align: left;
    margin: 0 auto 3%;
    width: 90%;
    line-height: 1.5;
    font-feature-settings: "palt";
}
#retino_a_essence section.point .point01{
    background: url(image/pont_01_img@2x.jpg) no-repeat;
    background-size: cover;
    min-height: clamp(320px, 120vw, 881px);
    position: relative;
}
#retino_a_essence section.point .point01 .cta_link{
    position: absolute;
    height: 420px;
    width: 170px;
    bottom: 6%;
    left: 10%;
}
#retino_a_essence section.point .point01 p.attention{
    position: absolute;
    bottom: 0;
    right: 0;
}
#retino_a_essence section.point .point02 img{
    width: 90%;
    margin: 5% 0;
    border: 1px solid var(--color-txt-green);
}
#retino_a_essence section.point .point03 img{
    width: 90%;
    padding: 5%;
}
#retino_a_essence section.point .point03{
    /* 方眼紙模様に必須のスタイル */
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #e4f5ef calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #e4f5ef calc(100% - 1px));
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    background-color: #e8fff7;
    /* 以下任意のスタイル */
    padding: 20px;
}
/* HOWTO */
#retino_a_essence .howto{
    position: relative;
    text-align: left;
    background-image: -webkit-linear-gradient(bottom, #E3EFEA, #E3EFEA 96%, #fff 96%);
    background-image: -o-linear-gradient(bottom, #E3EFEA, #E3EFEA 96%, #fff 96%);
    background-image: linear-gradient(to top, #E3EFEA, #E3EFEA 96%, #fff 96%);
    margin-top: 7%;
    margin-left: 3%;
    padding-bottom: 8%;
}
#retino_a_essence .howto .pkg{
    position: absolute;
    top: 0;
    right: 16%;
    width: 17%;
}
#retino_a_essence .howto .pkg.txture{
    top: 18%;
    right: 7%;
    width: 15%;
}
#retino_a_essence .howto h3 {
    font-family: var(--font-century);
    font-weight: normal;
    font-size: clamp(35px, 10vw, 65px);
    color: #4eaa8a;
    line-height: 1.2;
    font-feature-settings: "palt";
}
#retino_a_essence .howto h4 {
font-family: var(--font-ryumin);
    font-weight: normal;
    font-size: clamp(35px, 5vw, 50px);
    color: #FFF;
    margin-bottom: 0.2em;
    margin-right: 10%;
    margin-left: -4%;
    line-height: 1;
    text-align: left;
    font-feature-settings: "palt";
}
#retino_a_essence .howto h4 span {
    background-color: #4eaa8a;
    display: inline-block;
    padding: 3% 7%;
    margin-bottom: 2%;
}
#retino_a_essence .howto .copy {
    text-align: right;
    width: 65%;
}
#retino_a_essence .howto .copy p {
    font-size: clamp(12px, 5vw, 24px);
    font-family: var(--font-noto);
}
#retino_a_essence .howto dl {
    display: flex;
    background-color: #FFF;
    border: 1px solid #b6c1bd;
    border-left: transparent;
    margin: 0 7% 2% 0;
}
#retino_a_essence .howto dl div{
    padding: 4% 3% 3%;
}
#retino_a_essence .howto dl picture{
    flex: 2;
}
#retino_a_essence .howto dl div{
    flex: 4;
}
#retino_a_essence .howto dl div dt{
    font-family: var(--font-ryumin);
    font-size: clamp(24px, 1vw, 27px);
    background-color: #4eaa8a;
    color: #fff;
    display: inline-block;
    padding: 2% 3%;
    margin-bottom: 3%;
}
#retino_a_essence .howto dl div dd{
    font-family: var(--font-noto);
}
/* 口コミ */
#retino_a_essence .users_voice{
    background: url(image/usersvoice_bg@2x.jpg) no-repeat;
    background-size: contain;
    margin-top: 8%;
    padding-top: 7%;
}
#retino_a_essence .users_voice h2{
    display: inline-block;
    color: var(--color-txt-green);
    font-family: var(--font-century);
    border-bottom: 1px solid var(--color-txt-green);
    font-weight: normal;
    font-size: clamp(15px, 3vw, 30px);
    margin-bottom: 3%;
}
#retino_a_essence .users_voice h3{
    font-family: var(--font-ryumin);
    font-size: clamp(20px, 5vw, 48px);
    color: var(--color-txt-green);
    font-feature-settings: "palt";
    font-weight: normal;
    line-height: 1.3;
}
#retino_a_essence .users_voice h3 span{
    font-family: var(--font-ryumin);
    font-size: clamp(24px, 3vw, 35px);
    color: var(--color-txt-green);
    display: block;
    margin-left: 0;
}
#retino_a_essence .users_voice .voice_image {
    display: block;
    margin: 5% 8%;
}
#retino_a_essence .users_voice .voice_image img.fade-in-element.is-visible {
    width: 70%;
    display: block;
    padding-bottom: 2%;
}
#retino_a_essence .users_voice .voice_image img.fade-in-element.is-visible:nth-of-type(odd) {
    margin-right: auto;
}
#retino_a_essence .users_voice .voice_image img.fade-in-element.is-visible:nth-of-type(even) {
    margin-left: auto;
}
/*========= 商品インクルード ===============*/
#retino_a_essence .cart {
    background-color: var(--color-bg-cta_green);
    padding: 0% 3% 7%;
}
#retino_a_essence .cart.cart--yellow {
    background-color: var(--color-bg-cta_yellow);
    padding-top: 7%;
}
#retino_a_essence .cta{
    position: relative;
}
.cart .goods_set{
    display: flex;
    margin: 5% 0% 2% 0%;
    background-color: #FFF;
    padding: 6% 5%;
    border-radius: 15px;
}
.cart .img_box{
    flex: 0.8;
    padding-right: 3%;
}
.cart .name {
    font-weight: 500;
    font-size: 1.0em;
}
.cart .copy {
    display: none;
}
.cart .name_box {
    margin-bottom: 0.5em;
}
.cart .price2{
color: var(--color-txt-cp);
}
.cart .cp_discount{
background-color: var(--color-txt-cp);
}
.cart .cp_limit {
    font-size: 0.8em;
}
.cart .price_box {
    font-size: 1.5em;
    margin-bottom: 1em;
}
.cart .icon_box {
    font-size: 0.9em;
}
.cart .txt_box {
    font-size: 1.1em;
    flex: 2;
    text-align: left;
}

.cart .btn {
    width: 50%;
    margin-left: auto;
    margin-top: 1em;
}

.cart .btn {
    width: 70%;
    margin-left: auto;
    margin-top: 1em;
    background-color: #333;
    border-radius: 5px;
    position: relative;
    transition: 0.2s;
}

.cart .btn:hover {
    opacity: 0.7;
}
.cart .btn p{
    margin-bottom: 0;
    color: #fff;
    text-align: center;
    padding: 4% 20% 5% 4%;
    font-size: 1.1em;
}
.cart .btn p::after {
    content: '\e96a';/*矢印アイコン*/
    font-size: 1.5em;
    position: absolute;
    top: 10%;
    right: 5%;
    -webkit-text-stroke: 1px #333;/*背景と同じ色で線を付けて細く見せる*/
}
#retino_a_essence .cta a.cta_link{
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 540px;
    height: 100px;
    background-color: transparent;
    transition: background-color 0.2s ease;
}
#retino_a_essence .cta a.cta_link:hover{
    background-color: rgba(255, 255, 255, 0.3);
}
#retino_a_essence #fv a.cta_detail{
    position: absolute;
    bottom: 8%;
    left: 30%;
    width: 270px;
    height: 420px;
    background-color: transparent;
}
#retino_a_essence .cta a.cta_detail {
    position: absolute;
    bottom: 67%;
    left: 3%;
    width: 30%;
    height: 20%;
    background-color: transparent;
}
#retino_a_essence .cta a.cta_detail:hover{
    background-color: rgba(255, 255, 255, 0.3);
}
#retino_a_essence .cart div.cart--link23566{
    text-align: right;
}
/*================
以下スマホ用
==================*/
@media screen and (max-width:768px){
.pB3{padding-bottom: 5%;}
.pB7{padding-bottom: 5%;}
.w60{width: 60%;}
.w85{width: 85%;}
.w90{width: 90%;}

.cart .name {font-size: 0.9em;}
.cart .btn p {font-size: 1.0em;}
.cart .btn {width: 85%;}
.cart .price_box{font-size: 1.1em;}
#retino_a_essence .cta a.cta_link {
    bottom: 0%;
    width: 80%;
    height: 55px;
}
#retino_a_essence .cta a.cta_link {
    bottom: 0%;
    width: 80%;
    height: 55px;
}
#retino_a_essence section.point p.point_icon{margin: 0 auto 3%;padding-top: 5%;}
#retino_a_essence section.point p.point_icon span {font-size: 40px;}
#retino_a_essence section.point p.point_icon {width: 80px;}
#retino_a_essence section.point .point03 img{
    width: 100%;
    padding: 7% 0% 10%;
}
#retino_a_essence .howto dl {
    display: block;
    background-color: #FFF;
    border: 1px solid #b6c1bd;
    border-left: 1px solid #b6c1bd;
    margin: 4%;
}
#retino_a_essence .howto dl div{padding: 5%;}
#retino_a_essence .cart div.cart--link23566{font-size: 0.8em;}
#retino_a_essence .howto .copy {width: 75%;}
#retino_a_essence .howto{
    background-image: -webkit-linear-gradient(bottom, #E3EFEA, #E3EFEA 98%, #fff 98%);
    background-image: -o-linear-gradient(bottom, #E3EFEA, #E3EFEA 98%, #fff 98%);
    background-image: linear-gradient(to top, #E3EFEA, #E3EFEA 98%, #fff 98%);
}
#retino_a_essence .users_voice .voice_image img.fade-in-element.is-visible{width: 80%;}
#retino_a_essence .howto .pkg{
    top: 3%;
    right: 4%;
    width: 17%;
    }
#retino_a_essence .howto .pkg.txture {
    top: 5%;
    right: 26%;
    width: 18%;
}
#retino_a_essence section.fv .cta_link {
    height: 200px;
    width: 200px;
    top: 25%;
    left: 23%;
}
#retino_a_essence section.fv .cta_link02 {
    height: 90px;
    width: 100px;
    top: 58%;
    right: 23%;
}
#retino_a_essence section.point .point01 .cta_link{
    height: 220px;
    width: 80px;
}
}