@charset "utf-8";

@font-face {
  font-family: 'Optima';
  font-style: normal;
  font-weight: normal;
  src: local('Optima'), url('/font/Optima Medium.ttf') format('truetype');
}
.opt { font-family: 'Optima';}

body { color: #621a14;}
#hd .menu { background: #fcceb9;}
.menu-trig div span { background: #621a14;}
.menu-cart a svg { fill: #621a14;}


@keyframes fadeOut {
	100% { opacity: 0;}
}
@keyframes moving {
	100% { transform: translateX(0%);}
}
@keyframes moving-to-L {
	100% { transform: translateX(-220%);}
}
@keyframes moving-to-R {
	100% { transform: translateX(150%);}
}
@keyframes showIn {
	0% { opacity: 0; transform: translate(-50%,-50%) scale(0.8);}
	90% { opacity: 1; transform: translate(-50%,-50%) scale(1);}
	100% { opacity: 0.85; transform: translate(-50%,-50%) scale(1)}
}
@keyframes masked {
	0% {
		 transform: translate(-50%,-50%);
		-webkit-clip-path: circle(5% at 50% 50%);
		clip-path: circle(5% at 50% 50%);
		 opacity: 0;
	}
	40% {
		-webkit-clip-path: circle(20% at 50% 50%);
		clip-path: circle(20% at 50% 50%);
		opacity: 1;
	}
	50% {
		-webkit-clip-path: circle(22% at 50% 50%);
		clip-path: circle(22% at 50% 50%);
	}
	100% {
		 transform: translate(-50%,-50%);
		-webkit-clip-path: circle(100% at 50% 50%);
		clip-path: circle(100% at 50% 50%);
		opacity: 1;
	}
}
#loading { position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: linear-gradient(-40deg,#ef8a62,#ec6f52); z-index: 120;}
#loading .inner{ position: relative; width: 100%; min-height: 90vh; min-height: calc(var(--vh, 1vh) * 100); overflow: hidden; opacity: 1;
 background: linear-gradient(-40deg,#ef8a62,#ec6f52);
}
#loading .txt { position: absolute; left: 0%; width: 100%;}
#loading .txt-1 { top: 0; z-index: 1; transform: translateX(100%);}
#loading .txt-2 { bottom: 0; z-index: 2; transform: translateX(-100%);}
#loading .txt p { color: #f6ad94; font-size: 16vw; line-height: 1; text-align: center;}
#loading .logo { width: 200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 10; opacity: 0;}
#loading .logo svg { width: 100%; fill: #fff;}
#loading .mask { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; z-index: 9; opacity: 0;
	-webkit-clip-path: circle(5% at 50% 50%);
	clip-path: circle(5% at 50% 50%);
}

#loading.show { animation: 0.6s linear fadeOut forwards; animation-delay: 2.8s;}
#loading.show .txt-1 { animation: 2.0s cubic-bezier(0.22, 1, 0.36, 1) moving forwards;}
#loading.show .txt-2 { animation: 2.0s cubic-bezier(0.22, 1, 0.36, 1) moving forwards;}
#loading.show .logo { animation: 0.75s ease showIn forwards; animation-delay: 1.5s;}
#loading.show .mask { animation: 1.0s ease-in-out masked forwards; animation-delay: 1.5s;}
#loading.fadeOut { opacity: 0;}
@media (max-width: 1401px) {
	#loading .mask { width: auto;}
}
@media (max-width: 801px) {
	#loading { height: 100vh; min-height: -webkit-fill-available;}
	#loading .txt-1 { top: 5%;}
	#loading .txt-2 { top: 75%; bottom: auto;}
}
@media (max-width: 641px) {
	#loading .txt p { position: absolute; font-size: 30vw; white-space: nowrap;}
	#loading .txt-1 { transform: translateX(100%);}
	#loading .txt-2 { transform: translateX(-150%);}
	#loading.show .txt-1 { animation: 6.8s cubic-bezier(0.22, 1, 0.36, 1) moving-to-L forwards; animation-delay: 0.6s;}
	#loading.show .txt-2 { animation: 5.4s cubic-bezier(0.22, 1, 0.36, 1) moving-to-R forwards; animation-delay: 0.8s;}
}



@keyframes waves{
   0% { background-position: 0% 100%;}
 100% { background-position: -1280px 100%;}
}
@keyframes wavesSp{
   0% { background-position-x: 0%;}
 100% { background-position-x: -800px;}
}

@keyframes openNews {
   0% { width: 8px;}
 100% { width: calc( 100% - 80px);}
}
@keyframes openNewsSp {
   0% { width: 6px;}
 100% { width: calc( 100% - 20px);}
}
@keyframes hideSp {
   0% { width: 6px;}
  100%{ width: 0px; margin-right: 0;}
}


body { color: #621a14;}
.wrap { position: relative; width: 100%; max-width: 1280px; margin: 0 auto;}

.btn { margin: 0 auto;}
.btn a { position: relative; display: block; width: 100%; padding: 2px; background: #ec6f51; border-radius: 50px; line-height: 1; text-decoration: none;}
.btn a:after{ content: ''; display: block; width: 10px; height: 10px; border-top: solid 3px #fff; border-right: solid 3px #fff;
 position: absolute; right: 15%; top: 50%; transform: translate(0,-50%) rotate(45deg);
}
.btn a span { position: relative; display: block; padding: 16px 0; background: url('/img/creamy/icn-logo.png') no-repeat 10% 50% / auto 72%;
 border: solid 2px #fff; border-radius: 50px;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center;
}
.btn a:hover { opacity: 0.8;}
@media (max-width: 481px) {
	.btn a span { padding: 12px 0; font-size: 16px;}
}

.load { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000;
 background: linear-gradient(-40deg,#ef8a62,#ec6f52);
}




#kv { position: relative; z-index: 10; margin-bottom: -100px;}
#kv:before { content: ''; display: block; width: 100%; max-width: 1280px; height: 80px; position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
 background: url('/img/creamy/wave-hd.png') repeat-x 50% 100% / 100% 100%; opacity: 0.8; animation: 10s waves linear infinite; z-index: 3;
}
#kv .ctn { position: absolute; width: 100%; z-index: 10;}
#kv .ctn div { width: 100%; margin: 0 auto; padding-top: 180px;}
#kv .ctn div { width: 48%; max-width: 600px; margin: 0 0 0 auto; padding-top: 100px;}
#kv .ctn div:after { content: ''; display: block; width: 110px; height: 160px;
 background: url('/img/awards/badge-no1.png') no-repeat 50% 50% / 100% auto;
 position: absolute; right: 8%; top: 100px;
}
#kv .ctn h1 { margin-bottom: 20px;}
#kv .ctn h1 img { width: 30%; max-width: 180px;}
#kv .ctn p {}
#kv .ctn p img { width: 90%; max-width: 460px;}


#kv .news { position: absolute; left: 0; bottom: 140px; width: 100%; z-index: 2;}
#kv .news .outer { width: 48%; max-width: 600px; margin: 0 0 0 auto;}
#kv .news .inner { width: 94%; max-width: 490px; height: 100px; overflow: hidden;}
#kv .news .inner div { position: relative; width: 4px; height: 100%; float: left; margin-right: 6px; background: #621a14; overflow: hidden;
 opacity: 0; transition: 0.4s ease-out; transform: translateX(500px);
}
#kv .news .inner div:nth-child(1) { transition-delay: 0.0s;}
#kv .news .inner div:nth-child(2) { transition-delay: 0.16s;}
#kv .news .inner div:nth-child(3) { transition-delay: 0.32s;}
#kv .news .inner div:nth-child(4) { transition-delay: 0.48s;}
#kv .news .inner div:nth-child(5) { transition-delay: 0.64s;}
#kv .news .inner div:nth-child(6) { transition-delay: 0.80s;}
#kv .news .inner div:nth-child(7) { transition-delay: 0.98s;}

#kv .news .inner div:last-child { margin-right: 0px;}
#kv .news ul li { display: none;}
#kv .news ul li:first-child { display: block;}
#kv .news ul li a { position: absolute; left: 0; display: block; width: 390px; height: 100px;
 /* color: #882f08; */ color: #fff; text-decoration: none; opacity: 0; transition: 0.2s linear 1.8s;
}
#kv .news ul li a dl { position: relative; width: 100%; padding-left: 110px;}
#kv .news ul li a dl dt { position: absolute; left: 0; top: 0; width: 100px;}
#kv .news ul li a dl dt img { width: 100%;}
#kv .news ul li a dl dd { padding-left: 10px; padding-top: 1.2em; font-size: 12px; line-height: 1.4;}
#kv .news ul li a dl dd span.tit { display: block; font-weight: 700;}
#kv .news ul li a dl dd span.update{ display: block; font-size: 12px;}
#kv .news ul li a:hover dl { opacity: 0.8;}
#kv.show .news .inner div { opacity: 1; transform: translateX(0px);}
#kv.show .news .inner div.box { animation: 0.2s openNews ease 1.8s forwards;}
#kv.show .news ul li a { opacity: 1;}

#kv .note { position: absolute; left: 0; bottom: 90px; width: 100%; z-index: 2;}
#kv .note ul { max-width: 640px; margin: 0 0 0 auto; padding: 0 40px;}
#kv .note ul li { position: relative; padding-left: 1.2em; color: #636363; line-height: 1.4;}
#kv .note ul li:before { content: '※'; position: absolute; left: 0;}
#kv .note ul li span { display: block;}

#kv .bg-kv { width: 100%; position: relative; z-index: 1;}
#kv .bg-kv img { width: 100%;}
#kv .bg-kv img.sp { display: none;}
@media (max-width: 1281px) {
	#kv .ctn div { padding-top: 8vw;}
	#kv .ctn div:after { right: 6%; top: 8vw;}
	#kv .news { bottom: 10vw;}
	#kv .note { bottom: 6vw;}
}
@media (max-width: 801px) {
	#kv { margin-bottom: -110px;}
	#kv:before { height: 60px; top: -10px; background: url('/img/creamy/wave-hd-sp.png') repeat-x 50% 100% / 800px 100%; animation: 12s wavesSp linear infinite;}
	#kv .inner-kv { position: relative; padding-bottom: 180px; background: url('/img/creamy/top/kv-sp-bottom.png') no-repeat 50% 100% / 100% 260px;}
	#kv .ctn div { width: 90%; max-width: 90%; margin: 0 auto; padding-top: 10vw;}
	#kv .ctn div:after { width: 100px; height: 142px; right: 6%; top: auto; bottom: 0px;}
	#kv .ctn p img { width: calc(100% - 120px);}

	#kv .bg-kv { margin-bottom: -20px;}
	#kv .bg-kv img.pc { display: none;}
	#kv .bg-kv img.sp { display: block;}
	
	#kv .news { position: relative; left: auto; bottom: auto;}
	#kv .news .outer { width: 100%; max-width: 100%; margin: 0 auto;}
	#kv .news .inner { width: 100%; margin: 0 auto;}
	#kv .note { bottom: 120px;}
	#kv .note ul { margin: 0 auto; padding: 0 20px;}
}
@media (max-width: 481px) {
	#kv { margin-bottom: -80px;}
	#kv .inner-kv { padding-bottom: 140px; background-size: 100% 200px;}
	#kv .ctn div:after { width: 60px; height: 90px; right: 5%;}
	#kv .ctn p img { width: calc(100% - 70px);}
	#kv .ctn h1 { margin-bottom: 10px;}
	#kv .news { height: 80px;}
	#kv .news .inner { height: 80px;}
	#kv .news div { width: 6px; margin-right: 4px;}
	#kv .news div:nth-child(2),
	#kv .news div:nth-child(3),
	#kv .news div:nth-child(4),
	#kv .news div:nth-child(6) { display: none;}
	#kv .news div:nth-child(1) { transition-delay: 0.0s;}
	#kv .news div:nth-child(5) { transition-delay: 0.08s;}
	#kv .news div:nth-child(7) { transition-delay: 0.16s;}
	#kv .news ul li a { height: 80px;}
	#kv .news ul li a dl { padding-left: 80px;}
	#kv .news ul li a dl dt{ width: 80px;}
	#kv .news ul li a dl dd { padding-left: 12px; font-size: 10px;}
	#kv.show .news .inner div.box { animation: 0.2s openNewsSp ease 2.1s forwards;}
	#kv .note { bottom: 100px;}
	#kv .note ul { padding: 0 12px;}
	#kv .note ul li span { display: inline;}
}





#about { position: relative; z-index: 9; background: url('/img/creamy/top/bg-about.jpg') no-repeat 50% 50% / cover;}
#about:before,
#about:after { content: ''; display: block; width: 100%; max-width: 1280px; height: 120px; position: absolute; left: 50%; top: 0px; transform: translateX(-50%);}
#about:before{ background: url('/img/creamy/wave-1.png') repeat-x 50% 100% / 100% 100%; animation: 12s waves linear 0.4s infinite;}
#about:after { background: url('/img/creamy/wave-2.png') repeat-x 50% 100% / 100% 100%; animation: 6s waves linear infinite;}

#about .inner { width: 92%; max-width: 720px; margin: 0 auto; padding: 160px 0 80px;}
#about h2 { margin-bottom: 20px; text-align: center;}
#about h2 img { width: 100%; max-width: 680px;}
#about h2 img.sp { display: none;}
#about .ctn-flex { display: flex; align-items: center;}
#about .ctn-flex .txt { width: 50%; padding-left: 40px;}
#about .ctn-flex .pht { width: 50%;}
#about .ctn-flex .txt p { font-size: 24px; font-weight: 700; letter-spacing: 0.05rem; line-height: 2; text-shadow: 0 0 8px #fff, 0 0 10px #fff, 0 0 12px #fff;}
#about .ctn-flex .txt p span { display: block; text-indent: -12px;}
#about .ctn-flex .pht img { width: 100%;}
@media (max-width: 801px) {
	#about:before,
	#about:after {}
	#about:before{ height: 90px; background: url('/img/creamy/wave-1-sp.png') repeat-x 50% 100% / 800px auto; animation: 14s wavesSp linear 0.4s infinite;}
	#about:after { height: 60px; background: url('/img/creamy/wave-2-sp.png') repeat-x 50% 100% / 800px auto; animation: 8s wavesSp linear infinite;}

	#about .ctn-flex .txt { padding-left: 20px;}
	#about .ctn-flex .txt p { font-size: 21px;}
}
@media (max-width: 481px) {
	#about .inner { padding: 140px 0 40px;}
	#about h2 { margin-bottom: 10px;}
	#about h2 img.pc { display: none;}
	#about h2 img.sp { display: block;}
	#about .ctn-flex .txt { width: 55%; padding-left: 10px;}
	#about .ctn-flex .pht { width: 45%;}
	#about .ctn-flex .txt p { font-size: 14px;}
}



#award { background: #fff; border-bottom: solid 2px #fff;}
#award .award-tit { position: relative; padding: 15px 0; background: url('/img/creamy/top/bg-ttl.jpg') no-repeat 50% 0% / cover; cursor: pointer;}
#award .award-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #621a14; border-right: solid 4px #621a14;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#award .award-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#award .award-tit h2 { padding: 16px 0;
 color: #621a14; font-size: 32px; font-weight: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;
}
#award .award-tit h2:before,
#award .award-tit h2:after { content: ''; display: inline-block; width: 50px; height: 40px; vertical-align: middle;
 background: url('/img/creamy/top/icn-award.png') no-repeat 50% 50% / 100% auto;
}
#award .award-tit h2 span { display: inline-block; margin: 0 20px; vertical-align: middle;}
#award .ctn { display: none;}
@media (max-width: 801px) {
	#award .award-tit:after { margin: 0px; left: auto; right: 5%;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#award { border-width: 1px;}
	#award .award-tit { padding: 4px 0;}
	#award .award-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#award .award-tit h2 { padding: 8px 0; font-size: 20px; letter-spacing: 0rem;}
	#award .award-tit h2:before,
	#award .award-tit h2:after { width: 30px; height: 24px;}
	#award .award-tit h2 span { margin: 0 12px;}
}



#concept { border-bottom: solid 2px #fff;}
#concept .concept-tit { position: relative; display: block; padding: 24px 0; background: url('/img/creamy/top/bg-ttl.jpg') no-repeat 50% 0% / cover; cursor: pointer;}
#concept .concept-tit:after { content: ''; display: block; width: 15px; height: 15px; margin-left: 320px;
 border-bottom: solid 4px #621a14; border-right: solid 4px #621a14;
 position: absolute; left: 50%; top: 50%; transform: translateY(-70%) rotate(45deg); transition: 0.4s linear;
}
#concept .concept-tit.open:after { transform: translateY(-30%) rotate(-135deg);}
#concept .concept-tit h2 { position: relative; color: #621a14; font-size: 32px; font-size: 600; letter-spacing: 0.12rem; line-height: 1; text-align: center;}
#concept .concept-tit h2 svg { display: inline-block; width: 50px; margin-right: 20px; fill: #621a14; vertical-align: middle;}
#concept .concept-tit h2 span{ display: inline-block; vertical-align: middle;}
#concept .concept-ctn { display: none; background: url('/img/creamy/top/bg-concept.jpg') no-repeat 50% 0;}
#concept .concept-ctn .inner { width: 92%; margin: 0 auto; padding: 40px 0 80px;}
#concept .concept-ctn h3 { margin-bottom: 40px; text-align: center; opacity: 1; transition: 0.4s linear 0.2s;}
#concept .concept-ctn h3 img { width: 100%; max-width: 720px;}
#concept .concept-ctn p { text-align: center; opacity: 1; transition: 0.4s linear 0.2s;}
#concept .concept-ctn p img { width: 90%; max-width: 360px;}
#concept .concept-ctn h3 img.sp,
#concept .concept-ctn p img.sp { display: none;}
#concept .concept-ctn.show h3,
#concept .concept-ctn.show p { opacity: 1;}
@media (max-width: 801px) {
	#concept .concept-tit:after { margin: 0px; left: auto; right: 5%;}
	#concept .concept-ctn .inner { padding: 30px 0 60px;}
	#concept .concept-ctn h3 { margin-bottom: 20px;}
}
@media (max-width: 641px) {
	#concept .concept-ctn { background-size: cover;}
	#concept .concept-ctn h3 img.pc,
	#concept .concept-ctn p img.pc { display: none;}
	#concept .concept-ctn h3 img.sp{ display: inline;}
	#concept .concept-ctn p img.sp { display: inline; max-width: 85%;}
}
@media (max-width: 481px) {
	#concept { border-width: 1px;}
	#concept .concept-tit { padding: 4px 0;}
	#concept .concept-tit:after { width: 15px; height: 15px; border-width: 2px;}
	#concept .concept-tit h2 { padding: 5px 0; font-size: 20px; letter-spacing: 0rem;}
	#concept .concept-tit h2 svg { width: 28px; margin-right: 12px;}
}



.care { background: url('/img/creamy/top/bg-care.jpg') repeat-y 50% 0 / 100% auto;}
.care .inner-sct { margin: 0 auto;}
.care .tit { padding: 80px 0 20px; background: url('/img/creamy/top/tit-light.png') no-repeat 50% 0 / auto 100%;}
.care .tit h2 { margin-bottom: 20px; text-align: center;}
.care .tit h2 img { width: 100%; max-width: 720px;}
.care .tit h2 img.sp { display: none;}
.care .tit p { font-size: 18px; text-align: center; text-shadow: 0 0 12px #fff, 0 0 10px #fff;}
.care .ctn-pc { position: relative; width: 100%; /* max-width: 1080px;*/ height: 420vh; margin: 0 auto;}
.care .fix-ctn{ position: relative; width: 100%; padding-top: 30px;}
.care .fix-ctn.fixed { position: fixed; left: 0; top: 0; bottom: auto;}
.care .fix-ctn.reset { position: absolute; left: 0; top: auto; bottom: 0;}
.care .ctn-flex { display: flex; justify-content: space-between; width: 100%; margin: 0 auto;}
.care .fix-ctn .ctn-flex { flex-direction: row-reverse; width: 92%; max-width: 1080px; margin: 0 auto;}
.care .fix-ctn.fixed .ctn-flex{ width: 92%;}
.care .ctn-flex .care-fig { width: 44%;}
.care .ctn-flex .care-txt { width: 52%;}
.care .ctn-flex .care-fig figure { position: relative; width: 100%;}
.care .ctn-flex .care-fig figure img { width: 100%; left: 0; top: 0; opacity: 0; transition: 0.15s linear;}
.care .ctn-flex .care-fig figure img:nth-of-type(1){ position: absolute;}
.care .ctn-flex .care-fig figure img:nth-of-type(2){ position: relative;}
.care .ctn-flex .care-fig figure img:nth-of-type(3){ position: absolute;}
.care .ctn-flex .care-fig figure img:nth-of-type(4){ position: absolute;}
.care .ctn-flex .care-fig figure img.show { opacity: 1;}
.care .ctn-flex .care-txt ul { width: 100%;}
.care .ctn-flex .care-txt ul li { margin-bottom: 48px;}
.care .ctn-flex .care-txt ul li:last-child { margin-bottom: 0px;}
.care .ctn-flex .care-txt ul li dl { position: relative; width: 100%; max-width: 510px; margin: 0 0 0 auto; border: solid 2px #e2890e; background: #fff; transition: 0.15s linear;}
.care .ctn-flex .care-txt ul li.on dl { background: #fed3b1;}
.care .ctn-flex .care-txt ul li dl dt { position: absolute; left: -45px; top: 50%; transform: translate(0,-50%); width: 90px;}
.care .ctn-flex .care-txt ul li dl dt img,
.care .ctn-flex .care-txt ul li dl dd { width: 100%;}
.care .ctn-flex .care-txt ul li dl dd img { width: 100%;}
.care .ctn-sp { display: none;}
.care .step-item-pc { background: url('/img/creamy/top/bg-step.png') no-repeat 50% 0% / cover;}
.care .step-item-pc .ctn-flex { width: 94%; max-width: 1200px; margin: 0 auto; padding: 0 0 160px;}
.care .step-item-pc .even,
.care .step-item-pc .odd { width: 50%;}
.care .step-item-pc .odd { padding-top: 230px;}
.care .step-item-pc .even .mb{ margin-bottom: 100px;}
.care .step-item-pc .odd .mb{ margin-bottom: 160px;}
.care .step-item-pc .even img{ width: 100%;}
.care .step-item-pc .odd img { width: 86%;}
.care .step-item-sp { display: none;}
@media (max-width: 801px) {
	.care .tit h2 img.pc { display: none;}
	.care .tit h2 img.sp { display: inline;}
	.care .ctn-pc,
	.care .step-item-pc { display: none;}
	.care .ctn-sp { display: block;}
	.care .ctn-sp ul { width: 92%; margin: 0 auto;}
	.care .ctn-sp ul li { margin-bottom: 30px;}
	.care .ctn-sp ul li:last-child { margin-bottom: 0px;}
	.care .ctn-sp ul li dl dt { position: relative; padding-left: 40px;}
	.care .ctn-sp ul li dl dt::after { content: ''; display: block; width: 20px; height: 20px; border-top: solid 2px #000; border-right: solid 2px #000;
	 position: absolute; right: 30px; top: 50%; transform: translate(0,-55%) rotate(135deg); transition: 0.3s linear;
	}
	.care .ctn-sp ul li dl dt img.icn { position: absolute; left: 0; top: 50%; width: auto; height: 74%; transform: translate(0,-50%);}
	.care .ctn-sp ul li dl dt span { display: block; background: #fff; border: solid 2px #e2890e;}
	.care .ctn-sp ul li dl dt.open::after { transform: translate(0,-25%) rotate(-45deg);}
	.care .ctn-sp ul li dl dt span img { width: 100%;}
	.care .ctn-sp ul li dl dd { display: none; padding-top: 20px; padding-left: 40px;}
	.care .ctn-sp ul li dl dd img { width: 100%;} 

	.care .step-item { background: url('/img/creamy/top/bg-step-sp.png') no-repeat 50% 100% / 100% auto;}
	.care .step-item-sp { display: block; padding: 30px 0 60px;}
	.care .step-item-sp ul { width: 90%; max-width: 620px; margin: 0 auto;}
	.care .step-item-sp ul li { margin-bottom: 20px;}
	.care .step-item-sp ul li:last-child { margin-bottom: 0;}
	.care .step-item-sp ul li img{ width: 100%;}
}
@media (max-width: 481px) {
	.care .tit { padding: 50px 0 15px;}
	.care .tit.mb { margin-bottom: 0px;}
	.care .tit h2 img{ width: 85%;}
	.care .tit p { width: 80%; margin: 0 auto; font-size: 13px; text-align: left;}

	.care .ctn-sp ul li { margin-bottom: 20px;}
	.care .ctn-sp ul li dl dt { padding-left: 30px;}
	.care .ctn-sp ul li dl dt::after { width: 10px; height: 10px; border-width: 1px; right: 20px;}
	.care .ctn-sp ul li dl dd { padding-top: 12px; padding-left: 30px;}

	.care .step-item-sp { padding: 0px 0px 50px;}
}


.lineup { background: url('/img/creamy/top/bg-lineup.jpg') no-repeat 50% 50% / cover;}
.lineup .inner { width: 94%; max-width: 1080px; margin: 0 auto; padding: 200px 0;}
.lineup .ctn { position: relative; width: 38%; max-width: 400px; margin: 0 0 0 auto;}
.lineup .ctn h2 { margin-bottom: 40px; text-align: center;}
.lineup .ctn h2 img { width: 100%; max-width: 380px;}
.lineup .ctn h2 span{ display: block; width: 100%; padding-top: 8px; font-size: 34px;}
.lineup .ctn .btn { width: 85%; max-width: 330px;}
@media (max-width: 801px) {
	.lineup { background: url('/img/creamy/top/bg-lineup-sp.jpg') no-repeat 50% 50% / cover;}
	.lineup .inner { padding: 50px 0 60px;}
	.lineup .ctn { width: 100%; max-width: 100%; height: 650px; margin: 0 auto; }
	.lineup .ctn .btn { position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0);}
}
@media (max-width: 481px) {
	.lineup .inner { padding: 40px 0;}
	.lineup .ctn h2 img { width: 80%;}
	.lineup .ctn h2 span{ font-size: 26px;}
	.lineup .ctn { height: 400px;}
	.lineup .ctn .btn { width: 72%;;}
}


#series { background: url('/img/creamy/top/bg-select.jpg') no-repeat 50% 50% / cover;}
#series .inner-sct { width: 94%; max-width: 1120px; margin: 0 auto; padding: 80px 0 100px;}
#series h2 { margin-bottom: 40px; text-align: center;}
#series h2 img { width: 100%; max-width: 450px;}
#series h2 img.sp { display: none;}
@media (max-width: 801px) {
	#series .inner-sct { width: 100%;}
}
@media (max-width: 641px) {
	#series h2 img.pc { display: none;}
	#series h2 img.sp { display: inline;}
}
@media (max-width: 481px) {
	#series .inner-sct { padding: 40px 0;}
	#series h2 img.sp { width: 80%;}
}


#shop { background: url('/img/creamy/top/bg-shop.jpg') no-repeat 50% 50% / cover;}
#shop .inner-sct { width: 92%; margin: 0 auto; padding: 120px 0; text-align: center;}
#shop h2 { text-align: center;}
#shop h2 img { width: 100%; max-width: 600px;}
#shop h2 img.sp { display: none;}
#shop p { margin-bottom: 30px; font-size: 15px;}
#shop .btn { width: 80%; max-width: 360px;}
@media (max-width: 641px) {
	#shop h2 { margin-bottom: 20px;}
	#shop h2 img.pc { display: none;}
	#shop h2 img.sp { display: block;}
}
@media (max-width: 481px) {
	#shop .inner-sct { padding: 60px 0;}
	#shop h2{ margin-bottom: 10px;}
	#shop p { margin-bottom: 20px; font-size: 12px;}
	#shop .btn { width: 72%;}
}