@charset "UTF-8";
/* ==========================================================================
*	BEAUTY JOURNAL CSS
* ========================================================================== */
.kv {
position: relative;
background: url(/images/beautyjournal/beautyjournal-top_bg@sp.jpg) no-repeat left center;
background-size: cover;
}
@media (min-width: 641px) {
.kv {
background: url(/images/beautyjournal/beautyjournal-top_bg.jpg) no-repeat right center;
background-size: cover;
/*
img
{
max-height: 380px;
height: (380/1440)*100vw;
} 
*/
}
}
.kv .page-ttl {
max-width: 1440px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
letter-spacing: .05em;
font-size: 3.5rem;
padding-left: 20px;
line-height: 1.28571;
}
@media (min-width: 641px) {
.kv .page-ttl {
width: 80%;
padding-left: 40px;
font-size: 3.952rem;
}
}
@media (min-width: 641px) and (max-width: 1440px) {
.kv .page-ttl {
font-size: 2.74444vw;
}
}

.main-content {
padding-top: 40px;
}
@media (max-width: 640px) {
.main-content {
padding-bottom: 38px;
}
}
.main-content .main-ttl {
margin-bottom: 15px;
}
@media (min-width: 641px) {
.main-content {
padding-top: 111px;
}
.main-content .main-ttl {
margin-bottom: 30px;
}
}
.main-content .section__ttl {
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
letter-spacing: -.025em;
text-align: center;
font-size: 2.2rem;
margin-bottom: 40px;
/*
b
{
font-weight: bold;
}
*/
}
@media (min-width: 641px) {
.main-content .section__ttl {
font-size: 4rem;
margin-bottom: 78px;
}
}
.main-content .article-list .article__pic {
margin-bottom: 1em;
}
.main-content .article-list .article {
font-size: 1.4rem;
line-height: 1.5;
}
@media (max-width: 640px) {
.main-content .article-list .article {
margin-bottom: 40px;
}
}
@media (min-width: 641px) {
.main-content .article-list {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main-content .article-list .article {
font-size: 1.6rem;
margin-bottom: 67px;
width: calc(50% - 30px);
}
}

.main-content.full {
width: 100%;
max-width: 100%;
}
.main-content.full .section {
width: calc(100% - 40px);
margin: auto;
}
@media (min-width: 641px) {
.main-content.full .section {
max-width: 1440px;
width: 80%;
}
}


/*-----------------------------------------
Column
-------------------------------------------*/
.section__ttl__wrap {
text-align: center;
margin-bottom: 40px;
}
@media (min-width: 641px) {
.section__ttl__wrap {
margin-bottom: 78px;
}
}
@media (max-width: 640px) {
.section__ttl__wrap p {
line-height: 1.33333;
}
}
.section__ttl__wrap .section__ttl {
margin-bottom: 20px;
}
@media (min-width: 641px) {
.section__ttl__wrap .section__ttl {
margin-bottom: 35px;
}
}
.section__ttl__wrap p {
font-size: 1.5rem;
}
@media (min-width: 641px) {
.section__ttl__wrap p {
font-size: 1.8rem;
}
}

.article-list.article-list--style .article {
margin-bottom: 20px;
}
@media (min-width: 641px) {
.article-list.article-list--style .article {
width: calc(50% - 22px);
margin-bottom: 60px;
}
}

/* .other-products-section {
padding-top: 45px;
}
@media (max-width: 640px) {
.other-products-section {
padding-bottom: 70px;
}
}
@media (min-width: 641px) {
.other-products-section {
padding-top: 60px;
max-width: 1440px;
width: 80%;
margin: auto;
}
}

.other-products {
width: 100%;
}
.other-products img, .other-products picture, .other-products a {
display: block;
}
@media (min-width: 641px) {
.other-products {
margin-bottom: 70px;
}
}
.other-products li {
height: 60px;
}
.other-products li a {
background: url(/images/products/line-up-arrow.png) no-repeat right 40px center;
background-size: 24px;
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.other-products li a {
height: 100%;
display: flex;
display: -webkit-flex;
align-items: center;
line-height: 1;
font-size: 1.9rem;
padding-left: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.other-products li small {
font-size: 1.2rem;
display: inline-block;
margin-top: 8px;
}
@media (min-width: 641px) {
.other-products li {
width: 50%;
height: 120px;
border: solid 1px #727272;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.other-products li a {
width: 100%;
font-size: 3rem;
padding-left: 30px;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.other-products li a {
font-size: 2.92969vw;
}
}
@media (min-width: 641px) {
.other-products li a small {
font-size: 1.6rem;
margin-top: 10px;
}
}
@media (max-width: 640px) {
.other-products li {
border-top: solid 1px #727272;
border-bottom: solid 1px #727272;
margin-top: -1px;
}
.other-products li a {
background: url(/images/products/line-up-arrow.png) no-repeat right 12px center;
background-size: 12px;
}
.other-products li img {
height: 16px;
width: auto;
}
}
.other-products li:first-child {
border-right: none;
}

.other-products__ttl {
font-size: 2.2rem;
text-align: center;
margin-bottom: 3rem;
line-height: 1;
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
@media (min-width: 641px) {
.other-products__ttl {
font-size: 4rem;
margin-bottom: 6rem;
}
} */



.prev-next {
display: flex;
display: -webkit-flex;
justify-content: space-between;
border-bottom: solid 1px #727272;
background: white;
position: relative;
z-index: 1;
margin-bottom: 60px !important;
}
@media (max-width: 640px) {
.prev-next {
padding: 20px;
}
}
@media (min-width: 641px) {
.prev-next {
max-width: 1440px;
width: 80%;
margin: auto;
padding: 20px 0;
margin-bottom: 80px !important;
}
}
.prev-next a {
display: flex;
display: -webkit-flex;
align-items: center;
font-size: 1.4rem;
}
@media (min-width: 641px) {
.prev-next a {
font-size: 2rem;
}
}
.prev-next .prev:before {
content: "";
background: url(/images/beautyjournal/icon-prev.svg) no-repeat;
background-size: 100%;
display: inline-block;
width: 6px;
height: 8px;
margin-right: 7px;
}
@media (min-width: 641px) {
.prev-next .prev:before {
width: 10px;
height: 12px;
margin-right: 7px;
}
}
.prev-next .next:after {
content: "";
background: url(/images/beautyjournal/icon-next.svg) no-repeat;
background-size: 100%;
display: inline-block;
width: 6px;
height: 8px;
margin-left: 7px;
}
@media (min-width: 641px) {
.prev-next .next:after {
width: 10px;
height: 12px;
margin-left: 7px;
}
}
.prev-next .next-only {
margin-left: auto;
}















/*  NEW DESIGN TEMPLATE af.2020.08.19  */
/* INDEX */
.base_beauty-journal .container {
padding: 4rem 0;
}
.base_beauty-journal .container.thin {
padding: 3rem 0;
}
.base_beauty-journal .container + .container {
padding-top: 0;
}
.base_beauty-journal .bg-gray {
background: #EEF3F3;
}
.base_beauty-journal .container + .container.bg-gray,
.base_beauty-journal .container.bg-gray + .container {
padding-top: 4rem;
}

.base_beauty-journal .section_title {
margin-bottom: 3rem;
justify-content: center;
font-family: 'Montserrat', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-weight: 600;
font-size: 160%;
}
.wrap_index_list a {
margin-bottom: 3rem;
font-size: 86.6%;
}
.wrap_index_list a:last-child {
margin-bottom: 1rem;
}
.open_trigger {
display: inline-block;
position: relative;
padding: 1.5rem 6rem 1.5rem 5rem;
margin: 2rem auto;
font-size: var(--17px);
text-align: center;
line-height: 1;
letter-spacing: normal;
border:1px solid #231815;
cursor: pointer;
}
.open_trigger:after {
position: absolute;
right:20px;
top:40%;
content: "";
display: block;
width: 12px;
height: 12px;
border-right: 1px solid #231815;
border-bottom: 1px solid #231815;
transform: translateY(-40%) rotate(45deg);
}
.open_trigger.close:after {
top:58%;
transform: translateY(-58%) rotate(-135deg);
}
.open_contents {
display: none;
padding-top: 3rem;
}
.open_contents > .flex {
flex-wrap: wrap;
justify-content: flex-start;
}


/* DETAIL */
a.btn_pink,a.btn_pink:visited {
display: inline-block;
padding: 1rem 2rem;
text-align: center;
background: #f781a4;
font-weight: 600;
color: #FFF;
}
a.btn_pink.big {
padding: 1rem;
}
a.btn_pink_s,a.btn_pink_s:visited {
display: inline-block;
padding: .3rem 1rem;
text-align: center;
background: #f781a4;
font-weight: 600;
color: #FFF;
font-size: 90%;
}



.title_big_32 {
margin-bottom: 3rem;
width: 100%;
text-align: center;
font-size: var(--20px);
}
.title_big_18 {
font-size: 106%;
font-weight: 600;
}
.marker {
background:linear-gradient(transparent 60%, #FDE6ED 0%);
}



/* Main Title / Profile */
.base_beauty-journal .head_title {
justify-content: center;
font-size: var(--18px);
width: 100%;
text-align: center;
}
.base_beauty-journal .head_title:before,
.base_beauty-journal .head_title:after {
content: "";
display: inline-flex;
margin: 5px 10px 0;
width: 9%;
height: 15px;
background:url(/images/beautyjournal/talk/vol9/head_title_line.svg) no-repeat right center;
background-size: auto 100%;
}
.head_title:after {
background-position: left center;
}
.base_beauty-journal .main_title .inner {
position: relative;
top:-30px;
margin-bottom: -30px;
padding: 0 25px 4rem;
}
.base_beauty-journal .main_title h1 {
margin: 1rem 0 2rem;
font-size: var(--16px);
}
.base_beauty-journal .main_title h1 strong {
display: block;
margin-top: 1.2rem;
font-size: 154%;
}
.base_beauty-journal .main_title figure {
/* padding: 3rem 0 0; */
padding:0;
}
#vol11-brightclean .base_beauty-journal .main_title figure,
#vol12-prestige .base_beauty-journal .main_title figure {
padding: 0 0 3rem;
}

.base_beauty-journal .profile {
background:#eef3f3 url(/images/beautyjournal/talk/vol9/profile_professionals.svg) no-repeat left 15px top 4rem;
background-size: 10px;
padding: 4rem 50px;
margin: 0 auto 2rem;
box-sizing: border-box;
}

#vol12-prestige .base_beauty-journal .profile {
margin-bottom: 0;
}
.base_beauty-journal .profile dl + dl {
margin-top: 4rem;
}
.base_beauty-journal .profile dt img,
.base_beauty-journal .profile dt span {
display: inline-block;
vertical-align: middle;
}
.base_beauty-journal .profile dt span {
font-size: var(--11px);
}

.base_beauty-journal .profile dt img {
width: 60px;
margin-right: 1rem;
}
.base_beauty-journal .profile dt strong {
display: block;
font-size: 200%;
}
.base_beauty-journal .profile dt strong small {
font-size: 50%;
}
.base_beauty-journal .profile dd {
margin-top: 2.5rem;
padding-top: 3rem;
border-top: 1px dotted #f781a4;
font-size: var(--15px);
}
















/* talk_section */
.q_title {
margin-bottom: 1.5rem;
}
.wrap_talk p {
line-height: 1.9;
}
.wrap_talk p + p {
margin-top: 2rem;
}
.wrap_talk .name {
display: inline-block;
padding: 0 6px 2px 6px;
margin-right: 1rem;
background: #ffcf66;
line-height: 1.2;
font-weight: 600;
}
.wrap_talk .yellow .name {background: #ffcf66;}
.wrap_talk .blue .name {background: #c0e2ff;}
.wrap_talk .blue_2 .name {background: #C4E2FF;}
.wrap_talk .pink .name {background: #FFD6E2;}

.wrapper.talk_section {
position: relative;
top:-15px;
margin-bottom: -15px;
width: 100%;
max-width: 100%;
}
.wrap_img_right,
.wrap_img_left {
overflow: hidden;
}
.wrap_img_right figure.col4,
.wrap_img_left figure.col4 {
display: block;
width: 160px;
transform: translateY(30px);
}
.wrap_img_right figure.col4 {
float: right;
padding: 0 0 20px 30px;
}
.wrap_img_left figure.col4 {
float: left;
padding: 0 30px 20px 0;
}
.wrap_img_right .wrap_talk.col8,
.wrap_img_left .wrap_talk.col8 {
display: inline;
}
.wrap_img_right .wrap_talk.col8 > p,
.wrap_img_left .wrap_talk.col8 > p {
padding: 0 6.851%;
box-sizing: border-box;
}


/* summary */
.base_beauty-journal .wrap_summary {
padding: 4rem 0;
background:#fef2f6;
}
.wrap_summary .head {
width: 100%;
text-align: center;
}
.wrap_summary .head .name {
display: inline-block;
padding: 0 8px;
margin: 1.5rem 0;
background: #f781a4;
color: #FFF;
font-weight: 600;
font-size: var(--14px);
}
.wrap_summary .head h2 {
font-size: var(--20px);
}
.wrap_summary ul {
width: 100%;
}
.wrap_summary li {
padding: 1rem 0 1rem 2.5rem;
font-size: var(--16px);
border-top:2px dotted #f781a4;
background: url(/images/beautyjournal/talk/vol9/icon_check_pink.svg) no-repeat left top 1.2rem;
background-size: 18px;
}
.wrap_summary li:last-child {
border-bottom:2px dotted #f781a4;
}


/* product */
.base_beauty-journal .product .title_wrap {
background: #eef3f3;
align-items: center;
}
.base_beauty-journal .product .title_wrap > div {
padding: 30px;
}
.product .title_wrap h2 {
margin: 1rem 0;
}
.product .title_wrap h2 strong {
display: block;
font-size: var(--32px);
}
.product .title_wrap p {
font-size: var(--14px);
}
.product .title_wrap p .btn_pink {
font-size: 120%;
}


/* step */
.base_beauty-journal .container.step {
padding-top: 3rem;
}
.step .step_flow {
flex-direction: column;
margin:4rem 0;
}
.step .step_flow dl {
position: relative;
display: flex;
justify-content: space-between;
}
.step .step_flow dl:after {
position: absolute;
bottom:-25px;
left:50%;
content: "";
display: block;
width: 18px;
height: 18px;
border-right:1px solid #f781a4;
border-bottom:1px solid #f781a4;
transform: translateX(-50%) rotate(45deg);
}
.step .step_flow dl:last-child:after {
display: none;
}
.step .step_flow dl + dl {
margin-top: 4rem;
}
.step .step_flow dt,
.step .step_flow dd {
display: inline-flex;
flex-basis: 180px;
align-items: center;
}
.step .step_flow dd {
flex-basis: calc(100% - 190px);
font-size: var(--15px);
}


/* step usage */
.wrapper.wrap_usage {
width: 100%;
}
.step .usage {
justify-content: space-between;
}
.step .usage figure {
flex-basis: 170px;
transform: translateX(-4.54%);
}
.step .usage > div {
padding-right: 10px;
flex-basis: calc(100% - 180px);
box-sizing: border-box;
}
.step .usage h3 {
position: relative;
margin-bottom: 1rem;
padding: .5rem 0 .5rem ;
border-top: 1px dotted #f781a4;
border-bottom: 1px dotted #f781a4;
}
.step .usage p {
font-size: var(--15px);
}


/* vol11 Bright Clean */
.wrapper.image_title {
margin-bottom: 4rem;
}
.wrapper.image_title {
flex-wrap: wrap-reverse;
}

.wrapper.image_title .col4 {
padding: 35px;
box-sizing: border-box;
}
.wrapper.image_title .col8 {
padding: 0;
}
.image_title .copy {
flex-wrap: wrap;
background: url(/images/beautyjournal/talk/vol11/bg_head_title.png);
background-size: 73px;
z-index: 1;
justify-content: center;
}
.image_title .copy:before {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
content: "";
display: block;
width: calc(100% - 50px);
height: calc(100% - 50px);
background: #FFF;
z-index: -1;
}
.image_title .copy .inner {
text-align: center;
}

.top_border {
display: block;
margin: 4rem auto;
width: 50%;
max-width: 460px;
height:0px;
border:none;
border-top: 1px dotted #F781A4;
}
.top_border + h2.col12{
padding: 0 0 2em;
}
.wrap_talk p .line{
background:linear-gradient(transparent 70%, #ffe6eb 0%);
font-weight:600;
}




/* vol12 Prestige */
h2.img_sectiontitle {
padding-right: 0!important;
padding-left: 0!important;
}
.wrap_bg_line {
position: relative;
padding: 25px;
background: url(/images/beautyjournal/talk/vol11/bg_head_title.png);
background-size: 73px;
box-sizing: border-box;
}
.wrap_bg_line:before {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
content: "";
display: block;
width: calc(100% - 50px);
height: calc(100% - 50px);
background: #FFF;
}
.wrap_bg_line .wrapper {
padding: 2rem 0 3rem;
}
.series .col4 {
flex-wrap: wrap;
justify-content: space-between;
}
.series .col4 + .col4 {
margin-top: 3rem;
}
.series .col4 .headcopy {
margin-bottom: 2rem;
font-size: 88%;
width: 100%;
}
.series .col4 > div {
width: calc(100% - 100px);
}
.series .col4 > div a {
display: block;
}
.series .col4 > figure {
width: 80px;
}
.title_top_border {
position: relative;
padding: 2rem 0;
font-size: var(--20px);
font-weight: 600;
}
.title_top_border:before {
position: absolute;
top:0;
left:0;
content: "";
width: 100%;
height: 1px;
background:#F781A4;
}

.wrap_float {
display: block!important;
overflow: hidden;
}
.wrap_option .headcopy {
font-size: var(--16px);
text-align: center;
}

.wrap_option a {
align-items: flex-start;
}
.wrap_option a > figure,
.wrap_option a > div {
box-sizing: border-box;
}
.wrap_option a > figure {
width: 45%;
padding-right: 30px;
}
.wrap_option a > div {
width: 55%;
font-size: var(--15px);
}
.border_header:after{
content: "";
width:5em;
display: block;
border-bottom: #f781a4 dotted 2px;
margin: 20px 0;
}


























@media screen and (min-width:768px) {
/* INDEX */
.base_beauty-journal .container {
padding: 90px 0;
}
.base_beauty-journal .container.thin {
padding: 60px 0;
}
.base_beauty-journal .container.thin + .container.thin {
padding-top: 0;
}
.base_beauty-journal .container + .container.bg-gray,
.base_beauty-journal .container.bg-gray + .container {
padding-top: 90px;
}
.base_beauty-journal .section_title {
margin-bottom: 4rem;
font-size: 226%;
}
.wrap_index_list a {
font-size: 100%;
}
.wrap_index_list a > .col {
width: 50%;
}
.wrap_index_list a > figure.col {
max-width: calc(270px + 4.54%);
}
.wrap_index_list a > div.col {
padding-right:8.3%;
}
.open_trigger {
font-size: var(--22px);
margin: 6rem auto 2rem;
padding: 2rem 10rem 2rem 9rem;
}
.open_trigger:after {
right:30px;
width: 15px;
height: 15px;
}



/* DETAIL */
a.btn_pink.big {
font-size: var(--26px);
padding: 2rem;
}
.title_big_32 {
margin-bottom: 5rem;
font-size: var(--32px);
}


/* Main Title / Profile */
.base_beauty-journal .head_title {
padding-top: 10px;
}
.base_beauty-journal .head_title:before,
.base_beauty-journal .head_title:after {
width: 16%;
}

.base_beauty-journal .main_title > .col4 {
position: absolute;
left:calc(66.666% - 40px);
top:50%;
transform: translateY(-50%);
padding: 0;
}
.base_beauty-journal .main_title .inner {
position: static;
padding: 0;
top:0;
margin-bottom: 0;
}
.base_beauty-journal .main_title figure {
/* padding: 4rem 0 8rem; */
padding: 0 0 12rem;
}
#vol11-brightclean .base_beauty-journal .main_title figure,
#vol12-prestige .base_beauty-journal .main_title figure {
padding: 0 0 12rem;
}

.base_beauty-journal .profile {
margin-bottom: 4rem;
padding: 4rem 0;
background-size: 11px;
background-position: left 25px top 30px;
}
.base_beauty-journal .profile dl {
width: 40%;
}
.base_beauty-journal .profile dl + dl {
margin-top: 0;
}
.base_beauty-journal .profile dt img {
width: 76px;
}
.base_beauty-journal .profile dt span {
font-size: var(--14px);
}
.base_beauty-journal .profile dt span strong {
font-size: 180%;
}
.base_beauty-journal .profile dd {
font-size: var(--16px);
line-height: 1.9;
}


/* talk_section */
.q_title {
margin-bottom: 5rem;
}
.wrapper.talk_section {
top:0;
margin-bottom: 0;
}
.wrap_img_right {
display: flex;
flex-direction: row-reverse;
}
.wrap_img_left {
display: flex;
}
.wrap_img_right figure.col4,
.wrap_img_left figure.col4 {
float: none;
width: 33.3333%;
display: inline-flex;
padding:30px;
transform: translateY(0);
}
.wrap_img_right .wrap_talk.col8,
.wrap_img_left .wrap_talk.col8 {
display: inline-flex;
}
.wrap_img_right .wrap_talk.col8 > p,
.wrap_img_left .wrap_talk.col8 > p {
padding: 0;
}

/* summary */
.base_beauty-journal .wrap_summary {
margin: 30px 0 60px;
padding: 50px 0;
}
.wrap_summary .head h2 {
font-size: var(--30px);
}
.wrap_summary li {
padding: 1.8rem 0 1.8rem 4rem;
font-size: var(--21px);
background-size: 24px;
background-position: left top 2.2rem;
}

/* product */
.product figure img {
display: block;
height: 450px;
object-fit: cover;
object-position:80% 50%;
}

/* step */
.base_beauty-journal .step h2 + p {
font-size: var(--18px);
text-align: center;
}
.step .step_flow {
flex-direction: row;
justify-content: space-between;
padding-left: 0!important;
padding-right: 0!important;
}
.step .step_flow dl {
width: 30%;
flex-direction: column;
}
.step .step_flow dl + dl {
margin-top: 0;
}
.step .step_flow dl:after {
bottom:auto;
left:auto;
top:90px;
right:-20px;
transform: rotate(-45deg);
}
.step .step_flow dd {
margin-top: 1rem;
font-size: var(--16px);
}

/* step usage */
.wrapper.wrap_usage {
width: 90%;
}
.step .usage h3 {
font-size: var(--20px);
padding: 1rem;
margin-bottom: 2rem;
}
.step .usage h3 img {
margin-right: 1rem;
}
.step .usage p {
font-size: var(--16px);
}
.step .usage figure {
flex-basis: calc(50% - 10px);
transform: translateX(0);
}
.step .usage > div {
padding-right: 0;
flex-basis: calc(50% - 10px);
}


/* vol11 Bright Clean */
.wrapper.image_title {
margin-bottom: 7rem;
flex-wrap: wrap;
}
.image_title .copy {
min-height: 600px;
}
.image_title .copy:before {
width: calc(100% - 40px);
height: calc(100% - 40px);
}
.wrapper.image_title .col4 {
width: 45%;
}
.wrapper.image_title .col8 {
width: 55%;
}
.image_title .copy .inner {
width: calc(100% - 40px);
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.wrapper.image_title .col8 img {
object-fit: cover;
height: 600px;
}
.top_border {
margin: 90px auto;
}


/* vol12 Prestige */
.container.bg_fixed {
padding: 0!important;
/*margin-bottom: 90px;*/
height: 300px;
background: url(/images/beautyjournal/talk/vol12/fixed-image_pc.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}


.bg_fixed img {
display: none;
}
.wrap_bg_line {
padding: 60px 35px;
}
.wrap_bg_line:before {
width: calc(100% - 70px);
height: calc(100% - 70px);
}
.wrap_bg_line .wrapper {
align-items: center;
width: 100%;
padding: 1rem 0;
}
.series .col4 + .col4 {
margin-top: 0;
}
.series .col4 > div {
width: calc(100% - 60px);
}
.series .col4 > figure {
width: 60px;
transform: translateY(-20px);
}
.series .wrap_bg_line .col4 > figure {
transform: translateY(0);
}
.series .col4 .headcopy {
font-size: 100%;
margin-bottom: 3rem;
}
.title_top_border.photoplus {
padding: 3.5rem 0;
}
.wrap_float figure.col5 {
display: block;
width: 41.6%;
}

.wrap_option a {
align-items: center;
}
.wrap_option a > figure {
width: 46%;
}
.wrap_option a > div {
width: 54%;
font-size: var(--17px);
}
.wrap_option .headcopy {
font-size: var(--20px);
}

}/* min-width:768px */










@media screen and (min-width:960px) {


/* DETAIL */
/* Main Title / Profile */
.base_beauty-journal .main_title h1 {
font-size: var(--22px);
}
.base_beauty-journal .main_title .inner p {
font-size: var(--18px);
line-height: 2.0;
}

/* product */
.product .title_wrap h2 strong {
font-size: var(--36px);
}
.product .title_wrap p {
font-size: var(--16px);
}

/* step usage */
.step .usage figure {
flex-basis: calc(50% - 30px);
transform: translateX(0);
}
.step .usage > div {
padding-right: 0;
flex-basis: calc(50% - 30px);
}

}/*min-width:960px*/



@media screen and (min-width:1020px) {
.image_title .copy {
min-height: 650px;
}
.wrapper.image_title .col8 img {
height: 650px;
}
}/*min-width:1020px*/



@media screen and (min-width:1080px) {

/* vol12 Prestige */
.container.bg_fixed {
height: 540px;
}
.series .col4 > div {
width: calc(100% - 140px);
}
.series .col4 > figure {
width: 100px;
}


}/*min-width:1080px*/


@media screen and (min-width:1200px) {
/* peoduct */
.product figure img {
height: auto;
object-fit: fill;
}
.base_beauty-journal .product .title_wrap > div {
padding: 10px 60px;
}

/* step */
.step .step_flow dl:after {
top:120px;
right:-30px;
width: 25px;
height: 25px;
border-width: 2px;
}
#vol11-brightclean .base_beauty-journal .main_title figure {
padding: 0 0 8rem;
}


}/*min-width:1200px*/



@media screen and (min-width:1320px) {
/* DETAIL */
/* Main Title / Profile */
.base_beauty-journal .head_title:before,
.base_beauty-journal .head_title:after {
width: 242px;
}
.base_beauty-journal .head_title:before {
margin-right: 30px;
}
.base_beauty-journal .head_title:after {
margin-left: 25px;
}
.base_beauty-journal .main_title > .col4 {
left:780px;
width: calc(33.333% + 80px);
}
#vol11-brightclean .base_beauty-journal .main_title > .col4 {
left:800px;
}

.base_beauty-journal .main_title h1 {
margin-bottom: 3rem;
}
.base_beauty-journal .profile {
max-width: 1260px!important;
}
#vol12-prestige .base_beauty-journal .profile {
max-width: 100%!important;
}
.base_beauty-journal .profile dl {
width: 35.25%;
}
.wrapper.talk_section {
max-width: 1320px;
}
.product .title_wrap h3.big {
font-size: var(--24px);
}
.product .title_wrap h2 {
margin: 2rem 0;
}
.product .col7 {
max-width: 710px;
}
.step .step_flow {
padding-left: 30px!important;
padding-right: 30px!important;
}
.step .step_flow dl {
width: 280px;
}
.wrapper.wrap_usage {
width: 1320px!important;
max-width: 1320px!important;
}
.step .step_flow dd,
.step .usage p {
font-size: var(--17px);
}
.image_title .copy {
min-height: auto;
padding: 60px 35px;
}
.image_title .copy:before {
width: calc(100% - 70px);
height: calc(100% - 70px);
}
.wrapper.image_title .col4 {
width: 35%;
}
.wrapper.image_title .col8 {
width: 65%;
}
.image_title .copy .inner {
width: calc(100% - 70px);
}
.wrapper.image_title .col8 img {
object-fit: fill;
height: auto;
}


/* vol12 Prestige */
.series .wrapper {
justify-content: space-between;
}
.series .wrapper .col4 {
width: calc(33.3% - 40px);
}
.series .wrapper .wrap_bg_line .col4 {
justify-content: flex-start;
align-items: center;
width: var(--col4);
}
.series .col4 > div {
width: calc(100% - 140px);
margin-right: 0;
}
.series .wrap_bg_line .col4 > div {
width: calc(100% - 180px);
margin-right: 40px;
}
.series .col4 > figure {
width: 120px;
}
}/*min-width:1320px*/










/* vol19 Hair Care */
#vol19-haircare .base_beauty-journal .profile {
margin-bottom: 0;
}
#vol19-haircare .series .wrapper {
justify-content: center;
}
#vol19-haircare .wrap_bg_line .title_top_border {
border-top: none;
padding: 0 0 .5rem;
line-height: 1.4;
}
#vol19-haircare .wrap_bg_line .title_top_border:before {
display: none;
}
#vol19-haircare .series .title_top_border,
#vol19-haircare .series p.big {
font-size: 106%;
}
#vol19-haircare .series .col4 > div {
width: 49%;
}
#vol19-haircare .series .col4 > figure {
width: 49%;
text-align: center;
}
#vol19-haircare .series .col4.thin > figure img {
width: 100%;
max-width: 85px;
}

#vol19-haircare .series .wrap_bg_line .col4 > div {
transform: translateX(25px);
}
#vol19-haircare .series .wrap_bg_line .award {
display: block;
width: 60px;
margin-bottom: .7rem;
}

#vol19-haircare .series.bg-gray .col4 > div {
transform: translateX(20px);
}
#vol19-haircare .series.bg-gray .col4 > figure.shinepro {
transform: translateY(-55px);
margin-bottom: -55px;
}
#vol19-haircare .series.bg-gray .col4 > figure.liftdryer {
transform: translateY(-5px);
margin-bottom: -5px;
}
#vol19-haircare .series.bg-gray .col4 > figure.shinepro img {
max-width: 98px;
}
#vol19-haircare .series.bg-gray .headcopy {
font-weight:600;
padding-left: 20px;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border {
padding-bottom: 1rem;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border:before {
width: 62%;
}
#vol19-haircare .series.bg-gray .col4 p.w100 {
padding: 1.5rem 10px 0 20px;
}

#vol19-haircare .wrap_image {
display: flex;
flex-wrap: wrap;
}
#vol19-haircare .wrap_image > figure {
margin-top: 2rem;
}

#vol19-haircare .container.bg_fixed {
background-image: url(/images/beautyjournal/talk/vol19/fixed-image.jpg);
background-position: center center;
}



@media screen and (min-width:768px) {
#vol19-haircare .base_beauty-journal .profile {
max-width: 100%!important;
}
#vol19-haircare .container.bg_fixed {
height: 460px;
}
#vol19-haircare .series .title_top_border,
#vol19-haircare .series p.big {
font-size: 112%;
}
#vol19-haircare .series .wrap_bg_line .col4,
#vol19-haircare .series.bg-gray .col4 {
width: 80%;
}
#vol19-haircare .series .wrap_bg_line .col4 > div {
transform: translateX(15px);
}
#vol19-haircare .series.bg-gray .col4 > div {
transform: none;
}
#vol19-haircare .series.bg-gray .col4 > figure.shinepro,
#vol19-haircare .series.bg-gray .col4 > figure.liftdryer {
transform:translateY(-25px);
margin-bottom:0;
}
#vol19-haircare .series .wrap_bg_line .col4 > figure img,
#vol19-haircare .series.bg-gray .col4 > figure img {
width: 100%;
max-width: 210px;
}
#vol19-haircare .series .wrap_bg_line .col4.thin > figure img,
#vol19-haircare .series.bg-gray .col4.thin > figure img {
max-width: 120px;
}
#vol19-haircare  .series .wrap_bg_line .award {
width: 80px;
}
#vol19-haircare .series.bg-gray .headcopy {
padding-left: 0;
}
#vol19-haircare .series.bg-gray .col4 p.w100 {
padding: 0;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border:before {
width: 65%;
}
#vol19-haircare .wrap_image > figure {
margin-top: 0;
text-align: left;
letter-spacing: normal;
width: 100%;
}
#vol19-haircare .wrap_image > figure img {
width: 60%;
max-width: 490px;
}
#vol19-haircare .wrap_image figure:nth-child(2) {
transform: translateY(-40%);
text-align: right;
margin-bottom: -15%;
}
#vol19-haircare .wrap_image.reverse figure {
text-align: right;
}
#vol19-haircare .wrap_image.reverse figure:nth-child(2) {
text-align: left;
}



}/*min-width:768px*/



@media screen and (min-width:1080px) {


#vol19-haircare .container.bg_fixed {
height: 650px;
background-position: center bottom;
}
#vol19-haircare .series .wrap_bg_line .col4.thin {
width: 30%;
max-width: 350px;
}
#vol19-haircare .series .wrap_bg_line .col4 {
width:40%;
max-width: 460px;
padding-right: 10px;
padding-left: 10px;
}
#vol19-haircare .series.bg-gray .col4,
#vol19-haircare .series.bg-gray .col4.thin {
width: var(--col4);
}
#vol19-haircare .series.bg-gray .col4.thin > figure img {
max-width: 90px;
}


}/*min-width:1080px*/





@media screen and (min-width:1320px) {

#vol19-haircare .series .wrap_bg_line .wrapper {
justify-content: center;
align-items: flex-end;
}
#vol19-haircare .series .wrap_bg_line .col4 {
padding-right: 30px;
padding-left: 30px;
}
#vol19-haircare .series .wrap_bg_line .col4 > div {
max-width: 162px;
margin-right: 0;
}
#vol19-haircare .series .wrap_bg_line .col4 > figure {
width: calc(100% - 162px);
}
#vol19-haircare .series .wrap_bg_line .col4.thin > div {
width: 55%;
}
#vol19-haircare .series .wrap_bg_line .col4.thin > figure {
width: 45%;
}
#vol19-haircare .series .wrap_bg_line .title_top_border {
min-height: 90px;
box-sizing: border-box;
}
#vol19-haircare .series .wrap_bg_line .title_top_border.row1 {
padding-top: 3rem;
}
#vol19-haircare .series.bg-gray .wrapper {
justify-content: center;
align-items: flex-end;
}
#vol19-haircare .series.bg-gray .col4 > div {
width: 40%;
}
#vol19-haircare .series.bg-gray .col4 > figure {
width: 60%;
}
#vol19-haircare .series.bg-gray .col4.thin > figure img {
max-width: 120px;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border {
min-height: 120px;
padding-bottom: 1rem;
box-sizing: border-box;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border.row1 {
padding-top: 5rem;
}
#vol19-haircare .series.bg-gray .col4 .title_top_border.row2 {
padding-top: 3rem;
}
#vol19-haircare .series.bg-gray .col4 p.w100 {
margin-top: 0;
}


}/*min-width:1320px*/





.caption.indent {
position: relative;
display:block;
width:calc(100% - 5.5rem);
padding-top:.5rem;
padding-left:5.5rem;
}
.caption.indent > em {
display: block;
position:absolute;
top:.5rem;
left:0;
}




.bj_date{
font-size:80%;
}
.bj_date .col12{
padding: 10px 20px;
}
@media(min-width:640px){
.bj_date{
width: 80%;
max-width: 1280px;
}
.bj_date .col12{
padding:1rem 0 0;
}
}




/* IE11 */
@media all and (-ms-high-contrast: none){
.f_inner_ie {
max-width: 100%;
width: 100%;
}
.wrap_index_list a > figure.col img {
flex-shrink: 0;
}
.wrap_index_list a > div.col > h3,
.wrap_index_list a > div.col > p {
max-width: 100%;
width: 100%;
}
.base_beauty-journal .head_title span,
.base_beauty-journal .head_title::before,
.base_beauty-journal .head_title::after {
display: inline-block;
}
.wrap_talk p {
max-width: 100%;
width: 100%;
}
.product figure img {
width: 100%;
height: auto;
}
.title_big_32 {
font-size: 180%;
}
.step .step_flow dl {
display: inline-block;
}
.step .step_flow dt,
.step .step_flow dd {
display: block;
}

#vol19-haircare .series.bg-gray .col4,
#vol19-haircare .series.bg-gray .col4.thin {
width: 33.3%;
}





}/* -ms-high-contrast: none */