@charset "utf-8";
.products img{
	max-width: 100%;
}

#sun_products{
	padding: 15px;
	margin: 0 auto;
	justify-content: center;
	display: grid;
  	grid-template-rows: repeat(2, auto);
  	grid-template-columns: repeat(2, auto);
  	grid-gap: 0px;
}

.sunp_title{
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	grid-row: 1;
	grid-column: 1/3;
	border-bottom: solid 1px black;
	border-top: solid 1px black;
	padding: 5px;
	
}

.sunp_cushion{
	text-align: center;
	line-height: 1.5em;
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	padding: 10px;
	grid-row: 2;
	grid-column: 1;
	
}

.sunp_sunscreen{
	text-align: center;
	line-height: 1.5em;
	padding: 10px;
	border-bottom: solid 1px black;
	grid-row: 2;
	grid-column: 2;

}


.recommend_flex{
	display: flex;
	flex-wrap: nowrap;
}

.rfi{
	padding: 15px;
}

.puff{

	text-align: center;
}

.puff img{
	max-width: 100%;
}

#puff-grid{
	display: grid;
	grid-template-rows: 350px 350px;
    grid-template-columns: 350px 350px;
	grid-gap: 15px;
	justify-content: center;
	align-items: center;
}

.pf-1{
	text-align: center;
	line-height: 1.5em;
	grid-row: 1;
	grid-column: 1;
}

.pf-2{
	text-align: center;
	line-height: 1.5em;
	grid-row: 1;
	grid-column: 2;
	
}

.pf-3{
	text-align: center;
	line-height: 1.5em;
	grid-row: 2;
	grid-column: 1;
}

.pf-4{
	text-align: center;
	line-height: 1.5em;
	grid-row: 2;
	grid-column: 2;
}


.test{
	text-align: center;
}

.test img{
	max-width: 100%;
}



.senseofuse{
	text-align: center;
}

.senseofuse img{
	max-width: 100%;
}

.texture-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tf-1{
	text-align: center;
	display: flex;
	align-items: center;
	padding: 15px;
	font-size: 1.2em;
	line-height: 1.5em;
}

.sc-flex-1{
	justify-content: center;
	display: flex;
	flex-wrap: nowrap;
	
}

.sc-flex-2{
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}

.sc-flex-3{
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
}
.scf-item{
	text-align: center;
	padding: 15px;
	line-height: 1.5em;
}

.scf-item2{
	text-align: center;
	padding: 15px;
	width: 300px;
	line-height: 1.5em;
}

.watercool{
	background: gold;
	color: #FFFFFF;
	font-size: 1.5em;
	padding: 5px;
	line-height: 1.5em;

}

.border{
	border-bottom: solid 1px;
	border-top: solid 1px;
	width: 40em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

.balloon {
position: relative;
background-color: #fff;
padding: 0 10px;
border: 2px solid #878787;
color: #333;
	width: 700px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
}

.balloon::before,
.balloon::after {
content: '';
position: absolute;
border: 12px solid transparent;
top: 100%;
left: 50%;
	margin-left: -12px;
}

.balloon::before {
border-top: 12px solid #878787;
}

.balloon::after {
margin-top: -4px;
border-top: 12px solid #fff;
}

.balloon p1{
	position:absolute;
  	top:50%;
  	left:50%;
  	transform:translate(-50%,-50%);
  	width:100%;
}

.v_line_fix {
  margin-left: 50%;
  width: 2px;
  height: 35px;
  background-color: black;
}

.features img{
	max-width: 100%;
}

.f-area{
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
	border:solid 1px #fcd000;
	border-image:linear-gradient(to right, #fcd000 0%, #76daff 100%);
  	border-image-slice: 1; 
	width: 700px;
}

.type-flex{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin-bottom: 15px;
}

.type{
	border: solid 1px ;
	width: 100px;
	padding: 5px;
	margin: 2px;
}

#howto_grid{
	display: grid;
	grid-template-rows:repeat(3,auto);
    grid-template-columns:repeat(2,60px 500px;);
	grid-gap: 15px;
	justify-content: center;
	align-items: center;
    margin-bottom: 10px;
}


.hf-1{
	font-size: 2em;
	color: lightseagreen;
	width: 60px;
	height: auto;
	grid-column: 1;
	grid-row: 1;
}

.hf-2{
	text-align: left;
	grid-column: 2;
	grid-row: 1;
}

.hf-3{
	font-size: 2em;
	color: lightseagreen;
	width: 60px;
	height: auto;
	grid-column: 1;
	grid-row: 2;
}

.hf-4{
	text-align: left;
	grid-column: 2;
	grid-row: 2;
}

.hf-5{
	font-size: 2em;
	color: lightseagreen;
	width: 60px;
	height: auto;
	grid-column: 1;
	grid-row: 3;
}

.hf-6{
	text-align: left;
	grid-column: 2;
	grid-row: 3;
}

.howto_koukan{
	border: solid 1px black;
	margin: 10px;
	padding: 10px;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.howto_flex2{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

.howto{
	text-align: center;
}

.howto img{
	max-width: 100%;
}


.textureandcolor{
	text-align: center;
}

.textureandcolor img{
	max-width: 100%;
	height: auto;
	
}

/*.hero_area.essence_sun_cushion .hero_area_bg {

    background-image: url("../images/products/cool_moist_essence_sun_cushion_pc.jpg");

}*/





.heroimg {

	width: 335px;

	margin: 35px auto 20px;	

}

.heroimg img {

	width: 100%;

	height: auto;	

}



@media (max-width: 960px) {

/*.hero_area.essence_sun_cushion .hero_area_bg {

    background-image: url("../images/products/cool_moist_essence_sun_cushion_sp.jpg");

	background-size: cover;

}*/

.heroimg {

	width: 43%;

	margin-top: 5px;

	margin-bottom: 5px;	

}

}

.peptide-flex{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}


.feature_flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.ff-01 img{
	max-width: 100%;
}

.ff-02{
	width: 350px;
	text-align: center;
}

.ff-02 p1,
.feature_1_caption p1,
.feature_2_caption p1,
.indegredients_inner p1,
.howto p1,
.features p1,
.senseofuse p1,
.puff p1{
	font-size: 1.2em;
	line-height: 1.5em;
}

.ff-02 p2,
.feature_2_caption p2,
.indegredients_inner p2,
.howto p2,
.features p2,
.senseofuse p2,
.puff p2{
	font-size: 1.2em;
	line-height: 1.5em;
	color:lightseagreen;
}

.ff-02 p3,
.feature_1_caption p3,
.indegredients_inner p3,
.howto p3,
.features p3,
.senseofuse p3,
.puff p3{
	font-size: 1.5em;
	line-height: 1.7em;
	color:lightseagreen;
	font-weight: 400;
}

.feature_2_caption p4,
.indegredients_inner p4,
.howto p4,
.features p4,
.senseofuse p4,
.puff p4{
	font-size: 1.5em;
	line-height: 1.7em;
}


.feature_flex-2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: top;
}

.ff-2-1{
	background: #FFFFFF;
	text-align: center;
	margin: 10px;
	padding: 10px;
}

.ff-2-2{
	background: #FFFFFF;
	text-align: center;
	margin: 10px;
	padding: 10px;

}

.feature_flex-3{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: top;
	
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	max-width: 100%;
}

.ff-3-1{
	text-align: center;
	margin: 15px;
	font-size: 1em;
	line-height: 1.5em;
}



#feature_3_grid{
	padding: 15px;
	margin: 0 auto;
	align-content: start;
	justify-content: center;
	display: grid;
  	grid-template-rows: repeat(15, auto);
  	grid-template-columns: repeat(2, auto);
  	grid-gap: 10px;
}

.f3-title{
	height: 140px;
	grid-column: 1/3;
  	grid-row: 1;
	font-size: 1.7em;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.7em;
}

.f3g-1{
	grid-column: 1;
  	grid-row: 2/4;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-2{
	grid-column: 2;
  	grid-row: 2;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-3{
	grid-column: 2;
  	grid-row: 3;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;

}

.f3g-4{
	grid-column: 1;
  	grid-row: 4/6;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-5{
	grid-column: 2;
  	grid-row: 4;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-6{
	grid-column: 2;
  	grid-row: 5;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;

}

.f3g-7{
	grid-column: 1;
  	grid-row: 6/8;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-8{
	grid-column: 2;
  	grid-row: 6;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-9{
	grid-column: 2;
  	grid-row: 7;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;
}

.f3g-10{
	grid-column: 1;
  	grid-row: 8/10;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-11{
	grid-column: 2;
  	grid-row: 8;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-12{
	grid-column: 2;
  	grid-row: 9;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;
}

.f3g-13{
	grid-column: 1;
  	grid-row: 10/12;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-14{
	grid-column: 2;
  	grid-row: 10;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-15{
	grid-column: 2;
  	grid-row: 11;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;
}

.f3g-16{
	grid-column: 1;
  	grid-row: 12/14;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-17{
	grid-column: 2;
  	grid-row: 12;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-18{
	grid-column: 2;
  	grid-row: 13;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;
}

.f3g-19{
	grid-column: 1;
  	grid-row: 14/16;
	font-size: 2.5em;
	font-weight: 200;
	width: 50px;
	color: lightseagreen;
}

.f3g-20{
	grid-column: 2;
  	grid-row: 14;
	font-size: 1.2em;
	font-weight: 400;

	text-align: left;
	line-height: 1.2em;
}

.f3g-21{
	grid-column: 2;
  	grid-row: 15;
	font-size: 1em;
	text-align: left;
	line-height: 1.5em;
}


section.features {
	text-align: center;

	max-width: 1200px;

	margin-bottom: 0;

	margin-top: 150px;

}



.feature_ttl p {

	color: #ff8aa3;

}

.feature_ttl {

	margin: 0 0 45px;

	display: flex;

	justify-content: center;

	text-align: center;	

}

.feature_ttl p {

    font-family: 'Lato', sans-serif;

    font-size: 30px;

    font-weight: 400;

    margin: 0;

    line-height: 1.0;

	margin: 0 0 10px;

	letter-spacing: 1px;

}

.feature_ttl h3 {

    font-size: 20px;

    font-weight: 300;

    margin: 0;

    line-height: 1.0;

	padding: 0 0px 15px;

}

.feature_ttl div {

	padding: 0 50px;

	border-bottom: 1px solid #ff8aa3;

}



.feature_grade {
	text-align: center;

	background: rgb(255,255,255);

	background: linear-gradient(0deg, rgba(255,255,255,1) 70%, rgba(250,250,210,1) 100%);

	min-height: 500px;

	padding-top: 45px;

}

.feature_grade img,

.mochi_section img {

	max-width: 100%;

	height: auto;	

}

.feature_1 p1{
	font-size: 2em;
	font-weight: 600;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	
}

.feature_1 {

	max-width: 400px;

	margin: 0 auto 30px;

	padding: 0 20px;	

}



.feature_1_caption {

	text-align: center;

	margin: 0 0 50px ;	

}

.feature_1_caption img{
	max-width: 100%;
}

.feature_2_caption {

	text-align: center;

	margin: 0 0 25px;	

}

.feature_2_caption strong {

	color: #ff8aa3;

}



.feature_2 {

	max-width: 550px;

	margin: 0 auto 75px;

	padding: 0 20px;

}

.feature_2_title {
	color: #FFFFFF;
	
	padding: 5px;
	
	background: orange;

	text-align: center;

    font-family: 'Lato', sans-serif;

    font-size: 24px;

    font-weight: 300;

}

.point{
	margin-top:5px; 
	margin-left: auto;
	margin-right: auto;
	border: solid 1px black;
	width: 350px;
	padding: 5px;
	font-size: 1.2em;
}

.feature_3 {
	margin: 0 auto 25px;

	padding: 0 20px;

	

}

.feature_3_tag {

	max-width: 540px;

	margin: 0 auto 15px;

	font-size: 120%;

	display: flex;

	justify-content: space-between;

	padding: 0 50px;

}

.amino-title {
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
	padding: 5px;
	background:#F1A793;
	text-align: center;
	width: 300px;
    font-size: 20px;
    font-weight: 300;

}

.amino-title2 {
	margin-left: auto;
	margin-right: auto;
	color: #FFFFFF;
	padding: 5px;
	background:#000000;
	text-align: center;
	width: 200px;
    font-size: 15px;
    font-weight: 300;

}


@media(max-width: 767px) {

.feature_1_caption {

	margin: 0 0 25px;	

}

.feature_2 {

	margin-bottom: 30px;

}

.feature_3_tag {

	font-size: 15px;

	padding: 0 20px;

}



}



.feature_4_title {

	text-align: center;

	color: #ff8aa3;

	font-size: 30px;

	font-weight: 400;

	margin: 0 0 50px;

}

.feature_4_caption {

	text-align: center;

	margin: 0 0 40px;

	padding: 0 20px;

}

.feature_4 {

	max-width: 900px;

	margin: 0 auto 25px;

	padding: 0 20px;

}

.feature_5_caption {

	text-align: center;

	margin: 0 0 60px;

	padding: 0 20px;

}



@media(max-width: 767px) {

.feature_4_title {

	font-size: 20px;

	margin: 0 0 25px;

}



}



.mochi_section {

	background: #fff0f3;

	padding: 50px 0;

	margin: 0 0 40px;

}

.mochi_title {

	text-align: center;

	color: #ff8aa3;

	font-weight: 400;

	font-size: 30px;

	line-height: 1.2;

	margin: 0 0 40px;

}

.mochi_img1 {

	max-width: 700px;

	margin: 0 auto 40px;

}

.mochi_caption {

	text-align: center;	

}

.mochi_caption span {

	font-size: 120%;	

}

@media(max-width: 767px) {

.mochi_section {

	padding: 25px 20px;

}

.mochi_title {

	font-size: 20px;

	margin: 0 0 20px;

}

.mochi_img1 {

	max-width: 700px;

	margin: 0 auto 20px;

}

.mochi_caption span {

	font-size: 120%;	

}

}







.solution_flex {

	max-width: 600px;

	margin: 0 auto 90px;

	border: 1px solid #ff8aa3;

	display: flex;

	justify-content: center;

	padding: 45px 0;

}

.solution_flex ul li:last-child {

	margin-bottom: 0;	

}





.sectiontitle {

    margin: 0 auto 60px;

}

.sectiontitle h4 {

    font-size: 24px;

    font-weight: 400;

	margin: 0;

    text-align: center;

}

.sectiontitle h4 span {

    border-bottom: 1px solid #ea9819;

	padding: 0 0 5px;

}

.indegredients{
	text-align: center;
}

.indegredients img{
	max-width: 100%;
}

#container{
	text-align: left;
	font-size: 0.9em;
	display: grid;
  	grid-template-rows: repeat(3, 1fr);
  	grid-template-columns: repeat(6, 1fr);
  	grid-gap: 5px;
	justify-content: center;
	align-items: center;
}


.indegredients_col .sectiontitle {

	margin: 0 0 25px;

}

.solution_flex ul {

	margin-left: 35px;

}



.solution_flex li {

	font-size: 18px;

	font-weight: 300;

	margin: 0 0 30px;

	position: relative;

	list-style: none;

}

.second_check li::after,

.solution_flex li::after,

.solution_check_flex_caption dl::after {

	content: '';

	display: block;

	width: 20px;

	height:  20px;

	background: url(../../images/products/recommend_check_collagen_boosting_facemask.png) no-repeat 0 0;

	 background-size: 100%;

	 position: absolute;

	 top: 0px;

	 left: -35px;

}



.solution_title {

	text-align: center;

	font-size: 24px;

	font-weight: 400;

	margin: 0 0 60px;

	line-height: 1.5;

	padding: 0 20px;

}

.solution_title span {

	border-bottom: 1px solid #ff8aa3;

	padding-bottom: 3px;

}



.solution_check_flex {

	max-width: 1000px;

	margin: 0 auto 160px;

	display: flex;

	justify-content: space-between;

	padding: 0 20px;

}

.solution_check_figure {

	width: 375px;	

}

.solution_check_figure img {

	width: 100%;

	height: auto;	

}



.solution_check_flex_caption dl {

	margin: 0 0 40px 40px;

	position: relative;

}

.solution_check_flex_caption dt {

	font-size: 110%;

	margin: 0 0 15px;

	font-weight: 500;

}

.solution_check_flex_caption dd {

	line-height: 1.5;	

}



.he {

	max-width: 840px;

	margin: 0 auto 60px;

	padding: 0 20px;

}

.he img {

	width: 100%;

	height: auto;	

}



@media(max-width: 767px) {

.solution_flex {

	margin: 0 20px 40px;

	padding: 20px 0;

}

.solution_flex li {

	font-size: 15px;	

}

.solution_title.sp {

	font-size: 14px;

	margin: 0 20px 30px;

	border-bottom: 1px solid #ff8aa3;

	padding-bottom: 5px;

}

.solution_check_flex {

	display: flex;

	flex-direction: column-reverse;

	margin-bottom: 50px;

	

}

.solution_check_figure {

	width: 53vw;

	margin: 0 auto 30px; 

}

.solution_check_flex_caption dl {

	margin-bottom: 20px;	

}

.solution_check_flex_caption dt {

	margin: 0 0 10px;	

}



.solution_title {

	font-size: 16px;

	margin: 0 0 30px;

}



.he {

	margin: 0 auto 60px;

}

}







.thumb img {

	width: 100%;

	height: auto;

}

.thumb_flex {

	display: flex;

	justify-content: space-between;

}

.thumb_flex .caption {

	width: 260px;

}

.thumb_flex .thumb {

	width: 190px;

}

.hero_area_caption {

	left: -9.6vh;

}

.features_flex {

    margin: 0 auto 0px;

    padding: 0 30px;

    box-sizing: border-box;

}



.itary_catch {

	text-align: center;

	margin: 0 0 35px;

	font-size: 22px;

	line-height: 1.5;

	font-weight: 400;

	padding: 0 20px;	

}

.itary_catch span {

	font-size: 120%;

}



.itary_catch_flex {

	margin: 0 0 30px;

	display: flex;

	justify-content: center;

 }

.itary_catch_flex div {

	border: 1px solid #ccc;

	text-align: center;

	padding: 10px 50px;

}

.itary_logo {

	max-width: 670px;

	margin: 0 auto 20px;

	padding: 0 20px;

}

.itary_logo img {

	width: 100%;

	height: auto;	

}



.itary_logo_caption {

	text-align: center;

	font-size: 120%;

	margin: 0 0 60px;

	padding: 0 20px;

	line-height: 1.5;

}



.ingredient_col {

	text-align: center;

	padding: 0 20px;

	font-size: 11px;

}

.ingredient_col p.ingredient_caption {

	font-size: 11px;

}



.ingredient_col p.ingredient_caption span {

	font-size: 13px;

}

.ingredient_col.first {

	margin: 0 0 45px;

}



.indegredients_col h3 {

	font-size: 24px;

	font-weight: 500;

	margin: 0 0 30px;

	line-height: 1;

}

.indegredients_col .figure {

	margin: 50px 0;

}



.subtitle {

	margin: 60px 0 30px;

}



.subtitle h5 {

	font-size: 20px;

	font-weight: 500;

	text-align: center;

	background: #f5f5f5;

	width: auto;

	max-width: 500px;

	margin: 0 auto;

	padding: 3px 0;

}



@media(max-width: 767px) {


.itary_catch {

	font-size: 16px;

}	

.itary_logo_caption {

	font-size: 15px;

	margin: 0 0 30px;

}	

	

}





.recommend {



}


.recommend img{
	max-width: 100%;
}

.recommend_inner li:before {

	background: url("../images/products/recommend_check_sun_cushion.png")no-repeat 0 0;

	background-size: 20px;

}





.ingredient_col_flex_center {

	margin: 0 0 30px;

	display: flex;

	justify-content: center;

}



.ingredient_col_flex_center .ingredient_col {

	width: auto;

	margin: 0 15px

}

.ingredient_thumb img {

	width: 120px;

	height: auto;

}

.ingredient_col_flex {

	max-width: 610px;

	margin: 0 auto 120px;

	display: flex;

	padding: 0 20px;

}

.ingredient_col_flex .ingredient_thumb {

	margin-right: 20px;

}



h4.single {

	text-align: center;

	font-size: 22px;

	font-weight: 400;

	margin: 0 0 -30px;

}



@media(max-width: 767px) {

.ingredient_col_flex {

	margin: 0 auto 60px;

	display: flex;

}

.ingredient_col_flex .ingredient_thumb {

	width: 19vw;

	margin-right: 10px;	

}



.ingredient_col_flex .ingredient_thumb  img {

	width: 100%;

	height: auto;	

}

.ingredient_col_flex_caption {

	flex: 1;	

}

.ingredient_col_flex_caption_title + p {

	font-size: 13px;	

}

}







.howto_inner {

	max-width: 600px;

	margin: 0 auto;	

}

.howto_inner h5 {

    font-family: 'Lato', sans-serif;

    font-size: 20px;

	line-height: 1;

    font-weight: 300;

	background: #F2F2F2;

	letter-spacing: 1px;

	margin: 0 0 30px;

	padding: 12px 0 10px;

	text-align: center;

}



.f-red {

	color: #DB1C24;

}

.howto_flex {

	margin-bottom: 70px;	

}

.howto_notes {

	text-align: center;

	clear: both;

	padding: 0 20px;

}

.howto_notes h5 {

	font-weight: 300;

	font-size: 18px;

	margin: 0 0 25px;	

}

.howto_notes h5 span {

	background: #f5f5f5;

	padding: 10px 40px;

}





section.features {

	padding-left: 0;

	padding-right: 0;

}



@media(max-width: 960px) {

	

.feature_4,

.solution_check_flex {

	padding-left: 20px;

	padding-right: 20px;

}
.hero_area_caption h1, .hero_area_caption p.lead, p.product_name {

	color: #3C3C3C;

}

.hero_area_caption h1 {

	color: #888C98;

}

}

@media(max-width: 767px) {

br.spbr {

	display: block!important;	

}

.hero_area_caption h1 {

	font-size: 6vw;

	letter-spacing: 1px;

}

.feature_ttl {

	margin: 0 0 20px;	

}

.feature_ttl div {

	padding: 0 5px;	

}

.feature_ttl p {

	font-size: 21px;

	line-height: 1.5;

}



.feature_ttl h3 {

	font-size: 14px;	

}

















.second_section {

	padding: 50px 20px;	

}

.second_first_figure {

	margin: 0 0 50px;	

}





.howto_flex.bet .howto_flex_col {

	width: 32%;	

}

.howto_flex.bet .howto_flex_col img {

	width: 100%;

	height: auto;	

}





.sectiontitle h4,

.indegredients_col h3,

h4.single {

	font-size: 17px;	

}



.indegredients_col.second p {

	font-size: 13px;	

}

.indegredients_col.second p.ingredient_caption {

	font-size: 10px;

}

p.product_name {

	font-size: 11px;

}



.subtitle h5 {

	font-size: 16px;

	width: 80%;

	padding: 2px 20px; 

}

.sectiontitle {

	margin-bottom: 30px;

}

h4.single {

	margin-bottom: -20px;	

}



section.features {

	margin: 50px 0 0px;

}





section.indegredients {

    padding: 0 0 50px;

}



.subtitle {

	margin: 30px 0 15px;

}

.indegredients_col .figure {

	margin: 25px 0;

	padding: 0 30px;	

}

.indegredients_col .figure img {

	width: 100%;

	height: auto;	

}



.ingredient_col_flex_center .ingredient_col {

	margin: 0 2vw;

}

.ingredient_col_flex_center .ingredient_thumb {

	width: 19vw;

	margin-left: auto;

	margin-right: auto;

}

.ingredient_col_flex_center .ingredient_thumb img {

	width: 100%;

	height: auto;

}



@media(max-width: 767px) {

.ingredient_col p.ingredient_caption span {

    font-size: 12px;	

}

}



.recommend_inner li:before {

	background-size: 16px;	

}

.howto_inner {

	padding: 0 20px;	

}



.howto_inner h5 {

	font-size: 18px;

	padding: 8px 0 10px;

	margin: 0 0 20px;	

}

.howto_flex {

	margin: 0 0 20px;	

}

.howto_caption {

	margin: 0 0 40px;	

}

.howto_inner .howto_caption:last-child {

	margin: 0;	

}



.howto_flex.center .howto_flex_col {

	width: 32%;	

}

.howto_flex.center .howto_flex_col img {

	width: 100%;	

}

.howto_flex.center .howto_flex_col.extra {

	width: 64%;	

}







@media(max-width: 767px) {
	
#sun_products{
	padding: 15px;
	margin: 0 auto;
	justify-content: center;
	display: grid;
  	grid-template-rows: repeat(3, auto);
  	grid-template-columns: repeat(1, auto);
  	grid-gap: 0px;
}

.sunp_title{
	text-align: center;
	font-size: 1.2em;
	font-weight: 600;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	grid-row: 1;
	grid-column: 1;
	border-bottom: solid 1px black;
	border-top: solid 1px black;
	padding: 5px;
	
}

.sunp_cushion{
	text-align: center;
	line-height: 1.5em;
	border-right: solid 0px black;
	border-bottom: solid 1px black;
	padding: 10px;
	grid-row: 2;
	grid-column: 1;
	
}

.sunp_sunscreen{
	text-align: center;
	line-height: 1.5em;
	padding: 10px;
	border-bottom: solid 1px black;
	grid-row: 3;
	grid-column: 1;

}


.recommend_flex{
	display: flex;
	flex-wrap: wrap;
}

.rfi{
	margin: 0 auto;
}

.howto_koukan{
	border: solid 1px black;
	margin: 10px;
	padding: 10px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}


#puff-grid{
	display: grid;
	grid-template-rows:repeat(4,auto);
    grid-template-columns: 350px;
	grid-gap: 15px;
	justify-content: center;
	align-items: center;
}

.pf-1{
	text-align: center;
	line-height: 1.5em;
	grid-row: 1;
	grid-column: 1;
}

.pf-2{
	text-align: center;
	line-height: 1.5em;
	grid-row: 2;
	grid-column: 1;
	
}

.pf-3{
	text-align: center;
	line-height: 1.5em;
	grid-row: 4;
	grid-column: 1;
}

.pf-4{
	text-align: center;
	line-height: 1.5em;
	grid-row: 3;
	grid-column: 1;
}


.feature_3 {
	margin: 0 auto 25px;

	padding: 0 20px;

	

}


.border{
	border-bottom: solid 1px;
	border-top: solid 1px;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}


.balloon {
position: relative;
background-color: #fff;
padding: 10px ;
border: 2px solid #878787;
color: #333;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
}

.balloon::before,
.balloon::after {
content: '';
position: absolute;
border: 12px solid transparent;
top: 100%;
left: 50%;
		margin-left: -12px;
}

.balloon::before {
border-top: 12px solid #878787;
}

.balloon::after {
margin-top: -4px;
border-top: 12px solid #fff;
}

.balloon p1{
	position:absolute;
  	top:50%;
  	left:50%;
  	transform:translate(-50%,-50%);
  	width:100%;
}

	
.f-area{
	padding: 15px;
	margin-left: auto;
	margin-right: auto;
	border:solid 1px #fcd000;
	border-image:linear-gradient(to right, #fcd000 0%, #76daff 100%);
  	border-image-slice: 1; 
	width: 85%;
}

.howto_notes h5 {

	font-size: 16px;	

}

.howto_notes h5 span {

	padding: 10px;

}

	#container{
	
	font-size: 0.9em;
	display: grid;
  	grid-template-rows: repeat(9, 1fr);
  	grid-template-columns: repeat(2, 150px);
  	grid-gap: 10px;
}	



}


@media(max-width: 500px) {
    .hero_area_caption.sp {
        margin-top: 10%;
    }
	#puff-grid{
    grid-template-columns: 280px;
}

}
		
	

@media(max-width: 320px) {

.feature_2_title {

	font-size: 22px;

}

.feature_3_tag {

	font-size: 13px;	

}

.solution_title.sp {

	font-size: 12px;	

}

.itary_logo_caption {

	font-size: 14px;	

}

.howto_notes h5 {

	font-size: 15px;	

}

}