@charset "UTF-8";

/*------------------------------------------------------------
common
------------------------------------------------------------ */
#suntory_contents .mineral_contents .indent {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
#suntory_contents .mineral_contents img {
	width: 100%;
	vertical-align: bottom;
}

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
@media screen and (max-width:767px){

/*------------------------------------------------------------
[SP] common
------------------------------------------------------------ */
#suntory_contents .mineral_contents {
	padding: 18.4vw 0 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3", sans-serif;
font-weight: normal;
font-feature-settings: "palt";
letter-spacing: 0.02em;
}
#suntory_contents .mineral_contents .inner {
	margin: 0 4vw;
}
/*------------------------------------------------------------
[SP] main_area
------------------------------------------------------------ */
#suntory_contents #main_area {
	background: url(../img/mineral/bg_mainarea.png) repeat-x center bottom / auto 44vw;
	padding: 0 0 6.4vw;
}
#suntory_contents #main_area .grid {
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
#suntory_contents #main_area .withflag {
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
#suntory_contents #main_area figure {
	width: 26.66666667vw;
	position: relative;
}
#suntory_contents #main_area figure img {
	width: 26.66666667vw;
}
#suntory_contents #main_area figcaption {
	position: absolute;
	width: 48vw;
	height: 10.48vw;
	top:-13.6vw;
	left: 0;
	color: #005BAB;
	font-weight: bold;
	text-align: center;
	line-height: 10.48vw;
	background: url(../img/mineral/img_flag_sp.svg) no-repeat center top / contain;
}
#suntory_contents #main_area .product {
	width: 60.8vw;
	margin-top: 4vw;
}
#suntory_contents #main_area .product h1 {
	width: 60.8vw;
	height: 38.2516554vw;
background: url(../img/mineral/img_logo.svg) no-repeat left top / contain;
}
#suntory_contents #main_area .product .note {
	color: #FFF;
	font-size: 2.66666667vw;
	margin-top: 4vw;
}
#suntory_contents #main_area h2{
	margin: 4vw 0 0;
	font-size: 5.33333333vw;
	font-weight: bold;
	line-height: 1.5;
	color: #FFF;
	text-align: center;
}

/*------------------------------------------------------------
[SP] goodpoint
------------------------------------------------------------ */
#suntory_contents #goodpoint {
	padding: 8vw 0 0;
	background: #3382c6;
}
#suntory_contents #goodpoint .inner.grid {
}
#suntory_contents #goodpoint ul {
width: 80vw;
margin: 0 auto;
}
#suntory_contents #goodpoint li {
	margin: 0 0 5.6vw;
	font-size: 5.33333333vw;
	color: #FFF;
	font-weight: bold;
	padding-left: 8vw;
	position: relative;
	line-height: 6.4vw;
}
#suntory_contents #goodpoint li::before {
	content: "";
	display: block;
	position: absolute;
	width: 6.4vw;
	height: 6.4vw;
	left:0;
	top:0;
	background: url(../img/mineral/img_mark.svg) no-repeat left top / 6.4vw;
}
#suntory_contents #goodpoint li .txt_s{
	display: block;
	font-size: 3.73333333vw;
	margin-top: 5px;
	line-height: 1;
}
#suntory_contents #goodpoint li .txt_note{
	display: block;
	font-size: 3.2vw;
	line-height: 1.5;
	margin-top: 0.8vw;
}
#suntory_contents #goodpoint img {
	width: 100%;
}

/*------------------------------------------------------------
[SP] recipe
------------------------------------------------------------ */
#suntory_contents #recipe {
	padding: 12vw 0 8vw 0;
	background: #3382c6;
}
#suntory_contents #recipe h3 {
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 14px 0 0;
	color: #005BAB;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	text-align: center;
	background: #d6e6f4;
	border-radius: 10px 10px 0 0;
}
#suntory_contents #recipe .box {
	box-sizing: border-box;
	width: 100%;
	margin-top: -4vw;
	border: 1.6vw solid #d6e6f4;
	border-radius: 4vw;
	background: #FFF;
	padding: 4vw;
}
#suntory_contents #recipe .box ol.grid {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-end;
}
#suntory_contents #recipe li.no1 {
		margin-bottom: 8vw;
}
#suntory_contents #recipe li.no2 {
	position: relative;
	margin-bottom: 8vw;
}
#suntory_contents #recipe li.no1 img,
#suntory_contents #recipe li.no2 img,
#suntory_contents #recipe li.no3 img {
	width: auto;
	height: 35.2vw;
}
#suntory_contents #recipe li.no2::after {
	content: "";
	display: block;
	position: absolute;
	width: 8vw;
	height: 8vw;
	left:-8vw;
	bottom:-8vw;
	transform: rotate( -270deg );
	background: url(../img/mineral/arrow_red.svg) no-repeat right center / 4.8vw;
}
#suntory_contents #recipe li.no3 {
	width: auto;
	height: 35.2vw;
}
#suntory_contents #recipe li.memo {
	width: 36vw;
	font-size: 2.93333333vw;
	color: #333;
	line-height: 1.5;
	text-indent: -1em;
	margin-left: 1em;
}
	
#suntory_contents #recipe #recipe_caution {
    padding: 10px 20px;
    background-color: #fff;
    margin: 3.2vw 4vw 0 4vw;
    font-size: 3.5vw;		
}
	
	
	
/*------------------------------------------------------------
[SP] series
------------------------------------------------------------ */
#suntory_contents #series {
	padding: 8vw 0 12vw;
	background: #5c9bd1;
}
#suntory_contents #series h4 {
	font-size: 4.8vw;
	color: #FFF;
	line-height: 1;
	text-align: center;
}
#suntory_contents #series .box {
	margin: 5.6vw 4vw 0;
	background: #FFF;
	border-radius: 5px;
	padding: 5.6vw 0;
}
#suntory_contents #series li {
	width: 64vw;
	margin: 0 auto;
}
#suntory_contents #series li + li{
	margin-top: 4vw;
}
#suntory_contents #series li a {
	display: block;
}
#suntory_contents #series li a:hover {
	opacity: .75;
}

/*------------------------------------------------------------
[SP] pagetop
------------------------------------------------------------ */
#suntory_contents .pagetop {
	padding: 4vw 0;
	background: #005BAB;
}
#suntory_contents .pagetop a {
	display: block;
	margin: 0 auto;
	width: 12.8vw;
	height: 12.8vw;
	background: url(../img/mineral/btn_pagetop.svg) no-repeat center center / 12.8vw;
}
#suntory_contents .pagetop a:hover {
	opacity: .9;
}



}
/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print, screen and (min-width:768px) {

/*------------------------------------------------------------
[PC] common
------------------------------------------------------------ */
#suntory_contents .mineral_contents .grid {
	display:flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
}
#suntory_contents .mineral_contents {
	width: 100%;
	margin: 60px auto 0;
}
#suntory_contents .mineral_contents .inner {
	width: 920px;
	margin: 0 auto;
}
#suntory_contents .sp_item {
	display: none;
}

/*------------------------------------------------------------
[PC] main_area
------------------------------------------------------------ */
#suntory_contents #main_area {
	background: url(../img/mineral/bg_mainarea.png) repeat-x center bottom / auto 210px;
	padding: 0 0 50px;
}
#suntory_contents #main_area .grid {
	display:flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
}
#suntory_contents #main_area .withflag {
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
#suntory_contents #main_area figure {
	width: 275px;
	margin-right: 30px;
}
#suntory_contents #main_area figure img {
	width: 194px;
}
#suntory_contents #main_area figcaption {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width: 50px;
	height: 230px;
	background: url(../img/mineral/img_flag.svg) no-repeat center top / contain;
}
#suntory_contents #main_area .product {
	width: 453px;
	margin-top: 50px;
}
#suntory_contents #main_area .product h1 {
	width: 453px;
	height: 285px;
	background: url(../img/mineral/img_logo.svg) no-repeat left top / contain;
}
#suntory_contents #main_area .product .note {
	color: #FFF;
	font-size: 12px;
	margin-top: 10px;
}
#suntory_contents #main_area h2{
	margin: 30px 0 0;
	font-size: 28px;
	font-weight: bold;
	line-height: 1.4;
	color: #FFF;
	text-align: center;
}

/*------------------------------------------------------------
[PC] goodpoint
------------------------------------------------------------ */
#suntory_contents #goodpoint {
	padding: 40px 0 0;
	background: #3382c6;
}
#suntory_contents #goodpoint .inner.grid {
	justify-content: space-between;
}
#suntory_contents #goodpoint ul {
	width: 370px;
	margin-top: 25px;
}
#suntory_contents #goodpoint li {
	margin: 0 0 25px;
	font-size: 24px;
	color: #FFF;
	font-weight: bold;
	padding-left: 35px;
	position: relative;
	line-height: 25px;
}
#suntory_contents #goodpoint li::before {
	content: "";
	display: block;
	position: absolute;
	width: 25px;
	height: 25px;
	left:0;
	top:0;
	background: url(../img/mineral/img_mark.svg) no-repeat left top / 25px;
}
#suntory_contents #goodpoint li .txt_s{
	display: block;
	font-size: 16px;
	margin-top: 5px;
	line-height: 1;
}
#suntory_contents #goodpoint li .txt_note{
	display: block;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 3px;
}
#suntory_contents #goodpoint img {
	width: 540px;
}

/*------------------------------------------------------------
[PC] recipe
------------------------------------------------------------ */
#suntory_contents #recipe {
	padding: 40px 0 40px;
	background: #3382c6;
}
#suntory_contents #recipe h3 {
	box-sizing: border-box;
	width: 200px;
	height: 60px;
	padding: 14px 0 0;
	color: #005BAB;
	font-weight: bold;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	background: #d6e6f4;
	border-radius: 10px 10px 0 0;
}
#suntory_contents #recipe .box {
	box-sizing: border-box;
	width: 920px;
	margin-top: -20px;
	border: 10px solid #d6e6f4;
	border-radius: 20px;
	background: #FFF;
	padding: 20px 0;
}
#suntory_contents #recipe .box ol.grid {
	align-items: flex-end;
}
#suntory_contents #recipe li.no1 {
	width: 210px;
	height: 178px;
	margin: 0 40px 0 0;
}
#suntory_contents #recipe li.no2 {
	width: 226px;
	height: 178px;
	position: relative;
}
#suntory_contents #recipe li.no2 img {
	width: 186px;
	height: 178px;
}
#suntory_contents #recipe li.no2::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 40px;
	height: 178px;
	right:0;
	top:0;
	background: url(../img/mineral/arrow_red.svg) no-repeat center center / 17px;
}
#suntory_contents #recipe li.no3 {
	width: 178px;
}
#suntory_contents #recipe li.memo {
	width: 140px;
	margin-left: 20px;
	font-size: 11px;
	color: #333;
	line-height: 1.5;
	text-indent: -1em;
	margin-left: calc(20px + 1em);
}

#suntory_contents #recipe #recipe_caution  {
	width: 880px;
    margin: 20px auto 0 auto;
    padding: 10px 20px;
    background-color: #fff;		
}
	
	
	
/*------------------------------------------------------------
[PC] series
------------------------------------------------------------ */
#suntory_contents #series {
	padding: 40px 0;
	background: #5c9bd1;
}
#suntory_contents #series h4 {
	font-size: 20px;
	color: #FFF;
	line-height: 1;
	text-align: center;
}
#suntory_contents #series .box {
	margin-top: 20px;
	background: #FFF;
	border-radius: 5px;
	padding: 25px 0;
}
#suntory_contents #series li {
	width: 258px;
}
#suntory_contents #series li + li{
	margin-left: 40px;
}
#suntory_contents #series li a {
	display: block;
}
#suntory_contents #series li a:hover {
	opacity: .75;
}
/*------------------------------------------------------------
[PC] pagetop
------------------------------------------------------------ */
#suntory_contents .pagetop {
	padding: 40px 0;
	background: #005BAB;
}
#suntory_contents .pagetop a {
	display: block;
	margin: 0 auto;
	width: 60px;
	height: 60px;
	background: url(../img/mineral/btn_pagetop.svg) no-repeat center center / 60px;
}
#suntory_contents .pagetop a:hover {
	opacity: .9;
}



}