@charset'UTF-8';

/*fadein*/
.fadein { transform:translate(0,120px)!important; transition:all 1s!important; }
.fadein.scrollin { transform:translate(0,0)!important; }



/*==============================
	common
==============================*/
#pdt-foryou {
	font-family:'游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;
	margin:3px auto 4em;
 padding-top:0!important;
	font-size:1.16em;
	font-weight:400;
	color:#595656;
	fill:#595656;
}
body.android #pdt-foryou {
	font-family:'Roboto','游ゴシック体','Yu Gothic','YuGothic','ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

/*section*/
#pdt-foryou > section:not(#main-visual) { margin-top:6em; }

/*p*/
#pdt-foryou p,
#pdt-foryou dd,
#pdt-foryou li { line-height:2em; color:#333; }
#pdt-foryou p + p { margin-top:.6em!important; }

/*h3*/
#pdt-foryou h3 {	margin-bottom:2em;	padding:1em .2em;	text-align:center;	font-size:1.46em;	line-height:1.6em;	background:#c8e4df; }


@media screen and (max-width:768px) {
#pdt-foryou { font-size:1.08em; }
#pdt-foryou h3 { padding:.8em .2em; }
}

@media screen and (max-width:425px) {
#pdt-foryou { font-size:.96em; }
#pdt-foryou h3 { font-size:1.26em; }
}



/*==============================
	svg
==============================*/
#pdt-foryou svg { fill:#595656; stroke:none; }

/*color*/
#pdt-foryou svg .bg { fill:#f3f3f3; }
#pdt-foryou svg .white { fill:#fff; }
#pdt-foryou svg .gray { fill:#b5b6b6; }
#pdt-foryou svg .line { stroke:#595656; stroke-width:1px; }

/*flow2*/
#flow .svg2-1 { stroke:#b5b6b6; stroke-width:1.6px; }
/*flow4*/
#flow .svg4-1 { fill:#fff; stroke:#595656; stroke-width:1.06px; }



/*==============================
	slide
==============================*/
[class^='slide-'] { width:calc(100% - 2em)!important; }

/*button*/
[class^='slide-'] .swiper-button-prev,
[class^='slide-'] .swiper-button-next { top:-4em; border-radius:.1em; background:rgba(0,0,0,.6); z-index:15; }
[class^='slide-'] .swiper-button-prev:before,
[class^='slide-'] .swiper-button-next:before { border-color:#fff; }

/*pagination*/
[class^='slide-'] .swiper-pagination-bullet { background:#f3f3f3!important; }


@media screen and (min-width:1025px) {
[class^='slide-'] ul.layout3 li { min-width:300px; }
}

@media screen and (min-width:769px) {
[class^='slide-'] ul { display:flex; justify-content:center; }
[class^='slide-'] ul.layout3 li { min-width:250px; padding:2em .2em; }
[class^='slide-'] .swiper-button-prev,
[class^='slide-'] .swiper-button-next,
[class^='slide-'] .swiper-pagination { display:none; }
}

@media screen and (min-width:769px) and (max-width:1200px) {
[class^='slide-'] { font-size:.9em; }
}

@media screen and (max-width:768px) {
[class^='slide-'] .swiper-button-prev,
[class^='slide-'] .swiper-button-next { width:3em; height:3em; }
}



/*==============================
	diag
==============================*/
#pdt-foryou .diag-area { margin-top:4em!important; }

/*h5*/
#pdt-foryou [class^='diag-'] h5 {	margin-bottom:.6em;	text-align:center;	font-size:1.2em;	line-height:1.8em;	text-shadow:0 0 #fff, 1px 1px #e3e1eb; }

/*ul*/
#pdt-foryou .diag-btn { width:calc(100% - 2em); max-width:800px; margin:auto; }

/*li*/
#pdt-foryou .diag-btn li {	position:relative;	width:calc(100%/2 - .5em);	max-width:300px;	text-align:center; }
#pdt-foryou .diag-btn li:nth-of-type(n+2) { margin-left:1em; }
#pdt-foryou .diag-btn li:before,
#pdt-foryou .diag-btn li:after { z-index:10; transition:all .3s ease; }
#pdt-foryou .diag-btn li:before {	content:'';	position:absolute;	top:calc(50% + .8em - 2px);	right:1.6em;	width:2px;	height:16px;	background:#fff;	transform:rotate(90deg); }
#pdt-foryou .diag-btn li:after {
	content:'';
	position:absolute;
	top:calc(50% + .8em);
	right:1.2em;
	width:12px;
	height:12px;
	border-left:2px solid #fff;
	border-bottom:2px solid #fff;
	transform:rotate(-135deg);
	text-shadow:0 0 #fff, 1px 1px rgba(200,245,245,.9);
}
#pdt-foryou .diag-btn li:hover:before { width:1px; background:#595656; }
#pdt-foryou .diag-btn li:hover:after { border-width:1px; border-color:#595656; }

/*p*/
#pdt-foryou .diag-btn li p { letter-spacing:1px; margin-bottom:.6em; }

/*div*/
#pdt-foryou .diag-btn > h5 { width:100%; }
#pdt-foryou .diag-btn.pc-device > h5 { margin-bottom:0!important; }
#pdt-foryou .diag-btn > a { width:12em; margin:0 auto 1.6em; text-align:center; }
#pdt-foryou .diag-btn > picture { display:block; width:120px; margin:0 auto 1em; }
#pdt-foryou .diag-btn > picture img { display:block; width:100%; }
#pdt-foryou .diag-btn > p { margin-top:.2em; font-size:.9em; }
#pdt-foryou .diag-btn.sp-device > p:first-of-type,
#pdt-foryou .diag-btn.sp-device > img { display:none; }
#pdt-foryou .diag-btn > p > a { margin:0 .2em; color:blue; border-bottom:1px solid; }
#pdt-foryou .diag-btn > p > a[target='_blank'] { position:relative; padding-right:1em; }
#pdt-foryou .diag-btn > p > a[target='_blank']:after {
	position:absolute;
	top:calc(50% - .4em);
	right:.1em;
	content:'';
	display:block;
	width:.7em;
	height:.7em;
 background:url(/svg/i-link-ext_blue.svg) 100% / contain no-repeat;
}

/*a*/
#pdt-foryou .diag-btn { margin-top:2em!important; }
#pdt-foryou .diag-btn > a {	position:relative;	display:block;	padding:1em .2em;	font-weight:600;	background:#e3e1eb;	border-radius:10em; }
#pdt-foryou .diag-btn.pc-device > a { display:none; }
#pdt-foryou .diag-btn > a:before {	position:absolute;	top:-.3em;	left:-.3em;	content:'';	width:100%;	height:100%;	transition:all .3s ease;	border:1px solid;	border-radius:10em; }
#pdt-foryou .diag-btn > a:hover:before { top:0; left:0; }


@media screen and (min-width:769px) {
#pdt-foryou .diag-btn > p { width:33em; margin:auto; }
#pdt-foryou .diag-btn > p:nth-of-type(2) br { display:none; }
}

@media screen and (max-width:768px) {
#pdt-foryou .diag-btn li { width:100%; margin:auto; }
#pdt-foryou .diag-btn li:nth-of-type(n+2) { margin-top:.8em; margin-left:auto; }
#pdt-foryou .diag-btn li:before,
#pdt-foryou .diag-btn li:after { display:none; }
#pdt-foryou .diag-btn > a { font-size:1.1em; }
}

@media screen and (max-width:425px) {
#pdt-foryou .diag-btn > picture { width:100px; }
}



/*==============================
	Main
==============================*/
/*bg-area*/
#pdt-foryou #main-visual .bg-area {
	position:relative;
	padding:5em 0 2em;
	background:url(img/main_bg.jpg) center bottom / cover no-repeat;
}
#pdt-foryou #main-visual .bg-area:after {
	position:absolute;
	bottom:0;
	content:'';
	display:block;
	width:100%;
	height:1em;
	background:linear-gradient(rgba(255,255,255,0), #fff);
}

/*h1*/
#pdt-foryou #main-visual h1 {
	font-family:'Alata',sans-serif;
	margin:0 auto 2em;
	text-align:center;
	font-weight:500;
	line-height:1.4em;
}
#pdt-foryou #main-visual h1 span { font-size:1.2em; letter-spacing:1px; }
#pdt-foryou #main-visual h1 svg { display:block; width:23em; margin:1.2em auto 0; }

/*img*/
#pdt-foryou #main-visual .bg-area img {
	display:block;
	width:100%;
	max-width:900px;
	margin:auto;
}

/*h2*/
#pdt-foryou #main-visual h2 {
	margin:2em auto;
	text-align:center;
	font-size:1.4em;
	font-weight:600;
	line-height:1.8em;
	letter-spacing:.16em;
}

/*p*/
#pdt-foryou #main-visual > p { margin:auto; padding:0 1em; text-align:center; }
#pdt-foryou #main-visual > p:nth-of-type(1) { width:28em; }
#pdt-foryou #main-visual > p:nth-of-type(2) { width:33em; }


@media screen and (max-width:1000px) {
#pdt-foryou #main-visual .bg-area { padding-top:4em; }
}

@media screen and (max-width:750px) {
#pdt-foryou #main-visual .bg-area img { width:calc(100% - 4em); max-width:500px; }
}

@media screen and (max-width:630px) {
#pdt-foryou #main-visual > p:nth-of-type(2) { width:100%; }
}

@media screen and (max-width:600px) {
#pdt-foryou #main-visual .bg-area { padding-top:3em; }
#pdt-foryou #main-visual h1 span { font-size:1em; letter-spacing:0; }
#pdt-foryou #main-visual h1 svg { width:20em; margin-top:.8em; }
#pdt-foryou #main-visual h2 { margin:1.6em auto; font-size:1.2em; line-height:2em; letter-spacing:1px; }
}

@media screen and (max-width:500px) {
#pdt-foryou #main-visual h1 svg { width:calc(100% - 10em); min-width:220px; }
#pdt-foryou #main-visual > p { width:100%!important; text-align:left; }
}



/*==============================
	Features
==============================*/
/*dl*/
#pdt-foryou #features ul { width:100%; max-width:1100px; margin:auto; }
#pdt-foryou #features li { position:relative; }
#pdt-foryou #features li:nth-of-type(n+2) { margin-top:3em; }
#pdt-foryou #features h4 {
	width:100%;
	margin-bottom:1.6em;
	text-align:center;
	font-size:1.2em;
	line-height:1.6em;
}
#pdt-foryou #features li p {
	position:absolute;
	top:10em;
	left:0;
	padding:1.4em 2em;
	z-index:10;
	background:rgba(255,255,255,.9);
	border:1px solid;
	box-shadow:5px 5px 5px 0 rgba(0,0,0,.2);
	text-shadow:#fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}
#pdt-foryou #features li img { display:block; width:100%; max-width:800px; margin-left:auto; }


@media screen and (min-width:801px) and (max-width:1120px) {
#pdt-foryou #features li p { left:1em; padding:1em; }
}

@media screen and (max-width:800px) {
#pdt-foryou #features li p {
	top:5em;
	width:calc(100% - 4em);
	margin:0 2em;
	padding:1em .2em;
	text-align:center;
}
#pdt-foryou #features li img { width:100%; max-width:none; margin-top:6em; }
}

@media screen and (max-width:500px) {
#pdt-foryou #features h4 { margin-bottom:1em; }
#pdt-foryou #features li p {
	position:relative;
	top:2.6em;
	width:calc(100% - 2em);
	margin:-2.6em auto 0;
	font-size:.96em;
}
#pdt-foryou #features li img { margin-top:0; }
}

@media screen and (max-width:400px) {
#pdt-foryou #features h4 { font-size:1.1em; }
}

@media screen and (max-width:370px) {
#pdt-foryou #features li p {
	top:3.6em;
	margin-top:-3.6em;
	padding:0;
	text-align:left;
	font-size:1em;
	box-shadow:none;
	background:none;
	border:none;
}
#pdt-foryou #features li p br { display:none; }
}



/*==============================
	Step
==============================*/
#pdt-foryou #step > p { text-align:center; }

/*diag*/
#pdt-foryou #step .diag-btn { margin-top:2em; }


@media screen and (max-width:370px) {
#pdt-foryou #step > p { padding:0 1em; text-align:left; }
}



/*==============================
	Flow
==============================*/
/*ul*/
#pdt-foryou #flow li { padding:2em; background:#f3f3f3; }
#pdt-foryou #flow li svg { display:block; width:auto; height:6em; margin:1.6em auto; }
#pdt-foryou #flow li:last-of-type svg { padding:1em; }
#pdt-foryou #flow li h4 {
	text-align:center;
	padding-bottom:.2em;
	font-size:1.1em;
	border-bottom:1px solid;
}

/*card*/
#pdt-foryou #flow .aroma-card { margin-top:4em; }
#pdt-foryou #flow .aroma-card p { margin-bottom:1em; text-align:center; }
#pdt-foryou #flow .aroma-card img { display:block; width:100%; max-width:600px; margin:auto; }


@media screen and (min-width:801px) and (max-width:1000px) {
#pdt-foryou #flow li { padding:2em 1em; }
}

@media screen and (min-width:501px) {
#pdt-foryou #flow .aroma-card p br:last-of-type { display:none; }
}

@media screen and (max-width:370px) {
#pdt-foryou #flow .aroma-card p { padding:0 1em; text-align:left; }
#pdt-foryou #flow .aroma-card p br:nth-of-type(n+2) { display:none; }
}



/*==============================
	Howto
==============================*/
/*ul*/
#pdt-foryou #howto li { padding:2em 1em; background:#f3f3f3; }
#pdt-foryou #howto li:last-of-type { margin-right:0!important; }
#pdt-foryou #howto li svg { display:block; width:auto; height:6em; margin:0 auto 1.6em; }
#pdt-foryou #howto li p { text-align:center; }


@media screen and (min-width:801px) {
#pdt-foryou #howto .swiper-container { padding-bottom:0!important; }
}



/*==============================
	Review
==============================*/
#pdt-foryou #review > p { width:19em; margin:auto; text-align:center; }

/*ul*/
#pdt-foryou #review ul { width:calc(100% - 3em); max-width:800px; margin:2em auto; }
#pdt-foryou #review li { width:calc(100% - 10em); padding:1.6em 2.4em; background:#f7eef1; border-radius:4em; }
#pdt-foryou #review li:nth-of-type(n+2) { margin-top:1.6em; }
#pdt-foryou #review li:nth-of-type(2n+1) { border-bottom-left-radius:0; }
#pdt-foryou #review li:nth-of-type(2n+2) { margin-left:auto; border-bottom-right-radius:0; }
#pdt-foryou #review li > p { line-height:1.6em; }
#pdt-foryou #review li > p b { color:#d27896; }
#pdt-foryou #review li > p + p { text-align:right; font-size:.9em; }


@media screen and (min-width:501px) and (max-width:800px) {
#pdt-foryou #review li { width:calc(100% - 6em); }
}

@media screen and (max-width:600px) {
#pdt-foryou #review ul { width:calc(100% - 2em); }
#pdt-foryou #review li { padding:1.2em; border-radius:3em; }
#pdt-foryou #review li:nth-of-type(n+2) { margin-top:1.2em; }
}

@media screen and (min-width:371px) and (max-width:500px) {
#pdt-foryou #review li { width:calc(100% - 4em); }
}

@media screen and (max-width:370px) {
#pdt-foryou #review li { width:calc(100% - 2em); }
}



/*==============================
	movie
==============================*/
.youtube,
.youtube iframe { display:block; width:80vw; max-width:750px; height:50vw; margin:auto; }

.youtube { cursor:pointer; }
.youtube:hover { background-color:transparent; }
.youtube > * { display:block; width:100%; }
.youtube > * + p { margin:.6em auto 0; text-align:right; }


@media screen and (min-width:801px) {
.youtube,
.youtube iframe { width:60vw; max-width:560px; height:40vw; max-height:340px; }
}



/*==============================
	Cv-area
==============================*/
#pdt-foryou #cv-area { padding:4em; text-align:center; background:#f5f4e2; }
#pdt-foryou #cv-area .inline-box {
	width:100%;
	max-width:800px;
	margin:auto;
	padding:2em 4em;
	background:#fff;
	box-shadow:5px 5px 5px 0 rgba(0,0,0,.2);
}

/*h4*/
#pdt-foryou #cv-area h4 { letter-spacing:1px; }
#pdt-foryou #cv-area h4 span { display:block; margin-bottom:.8em; }
#pdt-foryou #cv-area h4 svg { width:calc(100% - 4em); max-width:240px; margin:auto; }

/*img*/
#pdt-foryou #cv-area img { display:block; width:15%; max-width:60px; margin:1em auto .2em; }

/*p*/
#pdt-foryou #cv-area p.info { font-size:.7em; }
#pdt-foryou #cv-area p.price { font-size:1.2em; color:#ed6b66; }
#pdt-foryou #cv-area p.price.cost-free:before {
	position:relative;
	top:-1px;
	content:'\9001\6599\7121\6599';
	padding:.1em .3em;
	margin-right:.6em;
	font-size:.8em;
	border:1px solid;
}
#pdt-foryou #cv-area p.price span { margin-right:.4em; }
#pdt-foryou #cv-area p.price:after {
	content:'\7A0E\8FBC';
	margin-left:.2em;
	font-size:.7em;
}


@media screen and (max-width:800px) {
#pdt-foryou #cv-area { padding:3em; }
#pdt-foryou #cv-area .inline-box { padding:2em 3em; }
}

@media screen and (max-width:500px) {
#pdt-foryou #cv-area,
#pdt-foryou #cv-area .inline-box { padding:2em; }
}

@media screen and (max-width:370px) {
#pdt-foryou #cv-area,
#pdt-foryou #cv-area .inline-box { padding:2em 1em; }
}