@charset "UTF-8";

:root {
  --thispage-color1: #DFA847;
  --thispage-color2: #D57272;
  --thispage-color3: #3B4CCC;
  --thispage-color4: #57C1BD;
}

/* ----------------------------------
 おすすめのスキンケア
---------------------------------- */
body .wrapper { overflow-x: visible;}

/* VISUAL */
#page_contents_howto #sec_visual { margin: 0 0 80px; display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center;}
#page_contents_howto #sec_visual .visual-desc { width: 50%; text-align: left; display: flex; justify-content: center; align-items: center;}
#page_contents_howto #sec_visual .visual-desc .eng {
	margin: 0 0 10px;
  font-family: var(--font-family-stix);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  text-align: left;
  letter-spacing: 0.05em;
}
#page_contents_howto #sec_visual .visual-desc .jp {
  font-family: var(--font-family-ship);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.05em;
	line-height: var(--line-height-high);
}
#page_contents_howto #sec_visual .visual-image { width: 50%;}
#page_contents_howto #sec_visual .visual-image img { width: 100%;}

/* GALLERY */
#page_contents_howto #sec_gallery { margin: 0 0 80px;}
#page_contents_howto #sec_gallery #gallery_slider_warp { overflow: hidden; white-space: nowrap;}
#page_contents_howto #sec_gallery #gallery_slider { display: inline-flex; animation: marquee linear infinite;}
#page_contents_howto #sec_gallery #gallery_slider .gallery-item { width: auto; height: 300px; margin: 0; flex: 0 0 auto;}
#page_contents_howto #sec_gallery #gallery_slider .gallery-item img { height: 100% !important; display: block;}

@keyframes marquee {
  0%   { transform: translateX(0);}
  100% { transform: translateX(-50%);}
}
@media screen and (max-width: 1000px) {
	#page_contents_howto #sec_gallery { margin: 0 0 126px;}
	#page_contents_howto #sec_gallery #gallery_slider .gallery-item { width: auto; height: 200px;}
}

/* STEP */
#page_contents_howto #sec_care_step { 
	width: auto;
	max-width: calc(var(--layout1-max-width) + (var(--layout1-base-padding) * 2));
	padding: 0 var(--layout1-base-padding);
	margin: 0 auto 80px;
}
#page_contents_howto .care-frame {
  padding: 70px 0 0;
  margin: 0 0 90px;
  border-top: var(--color-base) 1px solid;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
#page_contents_howto .care-frame .care-frame-nav { width: 160px; position: relative;}
#page_contents_howto .care-frame .care-nav-list  { height: 200px; position: sticky; top: calc(var(--layout-header-height) + 40px); left: 0;}
#page_contents_howto .care-frame .care-nav-list li a { 
  font-family: var(--font-family-stix);
  font-size: 14px;
  font-weight: 500;
  font-style: italic;
  text-align: left;
	text-decoration: none;
  letter-spacing: 0.05em;
	color: #6E6E6E;
	transition: var(--transition);
}
#page_contents_howto .care-frame .care-nav-list li a:hover { color: var(--color-base);}
#page_contents_howto .care-frame .care-nav-list li + li { margin-top: 10px;}
#page_contents_howto .care-frame .care-nav-list li.active a { text-decoration: underline; color: var(--color-base);}
#page_contents_howto .care-frame .care-frame-contents { width: calc(100% - 160px); display: flex; justify-content: space-between; align-items: stretch;}
#page_contents_howto .care-frame .care-frame-contents-title { width: 240px; padding: 0 80px 0 0;}
#page_contents_howto .care-frame .care-frame-contents-title h2 { height: 200px; margin: 0 0 30px; position: sticky; top: calc(var(--layout-header-height) + 40px); left: 0;}
#page_contents_howto .care-frame .care-frame-contents-title h2 .eng {
	margin: 0 0 15px;
  font-family: var(--font-family-stix);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  text-align: left;
  letter-spacing: 0.05em;
	display: block;
}
#page_contents_howto .care-frame .care-frame-contents-title h2 .jp {
  font-family: var(--font-family-ship);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  line-height: var(--line-height-high);
  display: block;
}
#page_contents_howto .care-frame .care-frame-contents-step { width: calc(100% - 240px);}
#page_contents_howto .step-list-item { padding: 40px; display: flex; justify-content: space-between; background: #FFF;}
#page_contents_howto .step-list-item + .step-list-item { margin: 60px 0 0; position: relative;}
#page_contents_howto .step-list-item + .step-list-item::before {
	content: '';
	width: 8px;
	height: 46px;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
	-webkit-background-size: 8px auto;
	background-size: 8px auto;
	position: absolute;
	top: -52px;
	left: calc(50% - 4px);
}
#page_contents_howto .step-list-item .image { width: 28%;}
#page_contents_howto .step-list-item .image figure { border: var(--color-base) 1px solid;}
#page_contents_howto .step-list-item .image figure img { vertical-align: top;}
#page_contents_howto .step-list-item .desc  { width: calc(72% - 40px);}
#page_contents_howto .step-list-item .desc .step {
	margin: 0 0 16px;
  font-family: var(--font-family-stix);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  text-align: left;
  letter-spacing: 0.05em;
}
#page_contents_howto .step-list-item .desc .name {
	margin: 0 0 5px;
  font-family: var(--font-family-ship);
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.05em;
}
#page_contents_howto .step-list-item .desc .item {
	margin: 0 0 20px;
  font-family: var(--font-family-ship);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.05em;
}
#page_contents_howto .step-list-item .desc .item a { text-decoration: underline; transition: var(--transition);}
#page_contents_howto .step-list-item .desc .item a:hover { text-decoration: none;}
#page_contents_howto .step-list-item .desc .text {
	padding: 20px 0 0;
	border-top: var(--color-base) 1px solid;
  font-family: var(--font-family-ship);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
	line-height: var(--line-height-middle);
}

#page_contents_howto #simple_care,
#page_contents_howto #simple_care .step-list-item .image figure,
#page_contents_howto #simple_care .step-list-item .desc .text { border-color: var(--thispage-color1);}
#page_contents_howto #simple_care .care-frame-contents-title h2 .eng,
#page_contents_howto #simple_care .step-list-item .desc .step,
#page_contents_howto #simple_care .step-list-item .desc .name,
#page_contents_howto #simple_care .step-list-item .desc .item a:hover { color: var(--thispage-color1);}
#page_contents_howto #simple_care .step-list-item + .step-list-item::before { background-image: url("/img/usr/freepage/howto/arrow_simple.png");}

#page_contents_howto #special_care,
#page_contents_howto #special_care .step-list-item .image figure,
#page_contents_howto #special_care .step-list-item .desc .text { border-color: var(--thispage-color2);}
#page_contents_howto #special_care .care-frame-contents-title h2 .eng,
#page_contents_howto #special_care .step-list-item .desc .step,
#page_contents_howto #special_care .step-list-item .desc .name,
#page_contents_howto #special_care .step-list-item .desc .item a:hover { color: var(--thispage-color2);}
#page_contents_howto #special_care .step-list-item + .step-list-item::before { background-image: url("/img/usr/freepage/howto/arrow_special.png");}

#page_contents_howto #calming_care,
#page_contents_howto #calming_care .step-list-item .image figure,
#page_contents_howto #calming_care .step-list-item .desc .text { border-color: var(--thispage-color3);}
#page_contents_howto #calming_care .care-frame-contents-title h2 .eng,
#page_contents_howto #calming_care .step-list-item .desc .step,
#page_contents_howto #calming_care .step-list-item .desc .name,
#page_contents_howto #calming_care .step-list-item .desc .item a:hover { color: var(--thispage-color3);}
#page_contents_howto #calming_care .step-list-item + .step-list-item::before { background-image: url("/img/usr/freepage/howto/arrow_calming.png");}

#page_contents_howto #reborn_care,
#page_contents_howto #reborn_care .step-list-item .image figure,
#page_contents_howto #reborn_care .step-list-item .desc .text { border-color: var(--thispage-color4);}
#page_contents_howto #reborn_care .care-frame-contents-title h2 .eng,
#page_contents_howto #reborn_care .step-list-item .desc .step,
#page_contents_howto #reborn_care .step-list-item .desc .name,
#page_contents_howto #reborn_care .step-list-item .desc .item a:hover { color: var(--thispage-color4);}
#page_contents_howto #reborn_care .step-list-item + .step-list-item::before { background-image: url("/img/usr/freepage/howto/arrow_reborn.png");}

/* MOVIE */
#page_contents_howto #sec_care_movie {
  width: auto;
  max-width: calc(var(--layout1-max-width) + (var(--layout1-base-padding) * 2));
  padding: 0 var(--layout1-base-padding);
  margin: 0 auto 90px;
}
#page_contents_howto #sec_care_movie .movie { text-align: center;}

@media screen and (max-width: 1000px) {
	/* VISUAL */
	#page_contents_howto #sec_visual { margin: 0 0 50px; flex-direction: column;}
	#page_contents_howto #sec_visual .visual-desc { width: 100vw; height: 100vw;}
	#page_contents_howto #sec_visual .visual-desc .eng { text-align: center;}
	#page_contents_howto #sec_visual .visual-desc .jp { font-size: 12px; text-align: center;}
	#page_contents_howto #sec_visual .visual-image { width: 100vw;}

	/* GALLERY */
	#page_contents_howto #sec_gallery { margin: 0 0 50px;}
	
	/* STEP */
	#page_contents_howto #sec_care_step { padding: 0 var(--layout-base-padding); margin: 0 auto 50px;}
	#page_contents_howto .care-frame { padding: 40px 0 0; margin: 0 0 90px;}
	#page_contents_howto .care-frame .care-nav-list li a:hover { color: var(--color-base);}
	#page_contents_howto .care-frame .care-nav-list li + li { margin-top: 10px;}
	#page_contents_howto .care-frame .care-nav-list li.active a { text-decoration: underline; color: var(--color-base);}
	#page_contents_howto .care-frame .care-frame-contents { width: 100%; display: block;}
	#page_contents_howto .care-frame .care-frame-contents-title { width: 100%; padding: 0;}
	#page_contents_howto .care-frame .care-frame-contents-title h2 { height: auto; position: relative; top: auto; left: 0;}
	#page_contents_howto .care-frame .care-frame-contents-step { width: 100%;}
	#page_contents_howto .step-list-item { padding: 20px; display: block;}
	#page_contents_howto .step-list-item + .step-list-item { margin: 90px 0 0;}
	#page_contents_howto .step-list-item + .step-list-item::before { top: -67px;}
	#page_contents_howto .step-list-item .image { width: 100%; margin: 0 0 15px;}
	#page_contents_howto .step-list-item .desc  { width: 100%;}
	#page_contents_howto .step-list-item .desc .step { margin: 0 0 10px;}
	
	/* MOVIE */
	#page_contents_howto #sec_care_movie { padding: 0 var(--layout-base-padding); margin: 0 auto 50px;}
	
	html[data-browse-mode="S"] #page_contents_howto .care-frame { display: block;}
	html[data-browse-mode="S"] #page_contents_howto .care-frame .care-frame-nav { width: 100%; display: none; position: relative;}
	html[data-browse-mode="S"] #page_contents_howto #simple_care.care-frame { margin-top: 300px; position: relative;}
	html[data-browse-mode="S"] #page_contents_howto #simple_care.care-frame .care-frame-nav { width: 100%; display: block; position: absolute; top: -90px;}
	html[data-browse-mode="S"] #page_contents_howto .care-frame .care-nav-list {
		padding: 0 10%;
	  height: auto;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	  top: auto;
	}
	html[data-browse-mode="S"] #page_contents_howto .care-frame .care-nav-list li { width: 50%; margin: 0 0 10px; text-align: center;}
}