@charset "utf-8";

*{margin:0;padding:0;}

body{
font: 16px/1.6 "メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
color:#302822;
background: #fff;
}

@media screen and (max-width: 900px) {
	.fontMi {
		font-family: 'Shippori Mincho B1', serif;
	}
}

@media print, screen and (min-width: 901px) {
	.fontMi {
		font-family: 'Shippori Mincho B1', serif;
	}
}


a{color:#302822;text-decoration:none;}
a:hover{color:#666;}
a:active, a:focus {outline: 0;}
img{border:0;vertical-align:top;}

/* opCity */
a:hover img{
filter:alpha(opacity=75); /*IE*/
-moz-opacity:0.75; /*FF*/
opacity:0.75;
}

/* clearfix */
.sec:before{
content:"";
display: table;
}
.sec:after{
content:"";
display: table;
clear:both;
}
.sec{
*zoom:1;
}

/*--- All ---*/
/* .sec */
.sec{
width:940px;
margin:0 auto;	
}

/*--- #header_contents ---*/
#header_contents .sec{
position:relative;
height:75px;
}
#header_contents h1,#header_contents h2,#header_contents p{
position:absolute;
}
#header_contents h1{
top:15px;
left:15px;
}
#header_contents h2{
top:30px;
right:2px;
}
#header_contents p{
top:33px;
right:0;
}

/*--- #footer_contents ---*/
#footer_contents{
clear:both;	
}
#footer_contents .upper{
	clear:both;
	text-align:center;
	padding:90px 0 20px;
}
#footer_contents .upper p{
	margin-bottom:20px;
	font-size:11px;	
}
#footer_contents .upper p.txt{
	margin-bottom:40px;	
}
#footer_contents .upper a{
	margin-bottom:5px;	
}
#footer_contents .lower{
clear:both;
background:url('../images/bubblepack/ft_bg.png');
padding:25px 0 100px;
text-align:center;
}
#footer_contents .lower a{
font-size:14px;	
}
#footer_contents .lower p{
font-size:12px;
line-height:1.4;
padding:20px 0 5px;
}


/*
 炭酸パックマスク
-------------------------------------------------------------------*/

/* PC */
@media print, screen and (min-width: 901px) {
	#header_contents .sec {
		width: 100%;
		width: 940px;
		overflow-x: hidden;
	}
	
	#mainImg.tansan-mask_mainImg,
	#mainImg.tansan-mask_mainImg + #container,
	#footer_contents{
		width: 100%;
		min-width: 940px;
		overflow-x: hidden;
	}

	/*--- #mainImg ---*/
	#mainImg.tansan-mask_mainImg{
		background:url('../images/bubblepack/tansan-mask_mainImg_bg02.jpg') no-repeat 50% 0;
		text-align:center;
		height:737px;	
	}
	#mainImg.tansan-mask_mainImg .inner{
		width:960px;
		height:737px;
		margin:0 auto;
		position:relative;	
	}
	#mainImg.tansan-mask_mainImg .inner img{
		position:absolute;
		top:0;
		left:-75px;	
	}

	/*--- #container ---*/

	/* .sec */
	#tansan-mask .sec{
		width:960px;
		margin:0 auto;	
	}

	/* .tansan-mask_sec01 */
	#container .tansan-mask_sec01{
		background:url('../images/bubblepack/tansan-mask_sec01_bg.jpg') no-repeat 50% 0;
		height:361px;
		text-align:center;	
	}

	/* .tansan-mask_sec02 */
	#container .tansan-mask_sec02{
		background:url('../images/bubblepack/tansan-mask_sec02_bg.jpg') no-repeat 50% 0;
		height:434px;
		text-align:center;	
	}

	/* .tansan-mask_sec03 */
	#container .tansan-mask_sec03{
		background:url('../images/bubblepack/tansan-mask_sec03_bg.jpg') no-repeat 50% 0;
		height:793px;
		text-align:center;	
	}
	#container .tansan-mask_sec03 ul{
		padding:0 20px;	
	}
	#container .tansan-mask_sec03 ul li{
		float:left;
		width:836px;
		height:316px;
		background-repeat:no-repeat;
		background-position:0 0;
		text-align:left;
		padding:60px 40px 0	;
		list-style:none;
	}
	#container .tansan-mask_sec03 ul li:nth-child(1){
		background-image:url('../images/bubblepack/tansan-mask_sec03_img00.png');	
	}
	#container .tansan-mask_sec03 ul li span{
		display:block;
		color:#db1072;
		font-size:16px;	
	}
	#container .tansan-mask_sec03 ul li strong{
		display:block;
		font-size:24px;
		font-weight:normal;
		color:#db1072;
		text-decoration:underline;
		margin-bottom:10px;	
	}
	#container .tansan-mask_sec03 ul li strong span{
		display:inline;
		font-size:18px;	
	}
	#container .tansan-mask_sec03 ul li p{
		font-size:15px;
		line-height:1.5;	
	}
	#container .tansan-mask_sec03 .txt{
		color:#97969a;
		font-size:11px;
		text-align:right;
		clear:both;
		padding:0 20px 25px;	
	}

	/* .tansan-mask_sec04 */
	#container .tansan-mask_sec04{
		background:url('../images/bubblepack/tansan-mask_sec04_bg.jpg') no-repeat 50% 0;
		text-align:center;	
	}

	/* .tansan-mask_sec05 */
	#container .tansan-mask_sec05{
		text-align:center;	
	}
	#container .tansan-mask_sec05 .sec{
		background:url('../images/bubblepack/tansan-mask_sec05_bg.jpg') no-repeat 50% 0;
		padding-bottom:35px;	
	}
	#container .tansan-mask_sec05 ul{
		letter-spacing: -.40em;	
	}
	#container .tansan-mask_sec05 ul li{
		text-align:left;
		display:inline-block;
		letter-spacing: normal;
		width:233px;
		height:190px;
		padding:145px 20px 0 25px;
		vertical-align:top;	
		background-repeat:no-repeat;
		background-position:0 0;
		margin:0 13px;
		font-size:15px;
		line-height:1.5;
	}
	#container .tansan-mask_sec05 ul li:nth-child(1){
		background-image:url('../images/bubblepack/tansan-mask_sec05_img01.png');	
	}
	#container .tansan-mask_sec05 ul li:nth-child(2){
		background-image:url('../images/bubblepack/tansan-mask_sec05_img03.png');	
	}
	#container .tansan-mask_sec05 ul li:nth-child(3){
		background-image:url('../images/bubblepack/tansan-mask_sec05_img04.png');	
	}

	/* .tansan-mask_sec06 */
	#container .tansan-mask_sec06{
		background:url('../images/bubblepack/tansan-mask_sec06_bg.jpg') no-repeat 50% 0;
		height:765px;
		text-align:center;	
	}

	/* .tansan-mask_sec07 */
	#container .tansan-mask_sec07{
		background:url('../images/bubblepack/tansan-mask_sec07_bg.jpg') no-repeat 50% 100%;
		text-align:center;
		height:1310px;
		overflow-x: hidden;
	}
	#container .tansan-mask_sec07 .conts{
		position:relative;	
	}
	#container .tansan-mask_sec07 .conts .inner{
		position:absolute;
		top:0;
		left:-75px;	
	}

	/* .tansan-mask_sec08 */
	#container .tansan-mask_sec08{
		background:url('../images/bubblepack/tansan-mask_sec08_bg.jpg') no-repeat 50% 100%;
		text-align:center;
		height:668px;	
	}
	#container .tansan-mask_sec08 .sec{
		position:relative;	
	}
	#container .tansan-mask_sec08 p{
		color:#333333;
		font-size:11px;
		text-align:right;
		text-shadow: 0 0 3px #fff;
		padding-bottom:15px;
		position:absolute;
		bottom:0;
		width:960px;
	}

	/* .tansan-mask_sec09 */
	#container .tansan-mask_sec09{
		background:url('../images/bubblepack/tansan-mask_sec09_bg.jpg') no-repeat 50% 100%;
		text-align:center;
		height:473px;	
	}

	/* .tansan-mask_sec10 */
	#container .tansan-mask_sec10 h3{
		background:url('../images/bubblepack/tansan-mask_sec10_title_bg.jpg') no-repeat 50% 0;	
		height:94px;
		text-align:center;	
	}
	#container .tansan-mask_sec10 .inner{
		background:url('../images/bubblepack/tansan-mask_sec10_bg.jpg') no-repeat 50% 0;		
	}
	#container .tansan-mask_sec10 .sec{
		position:relative;
		height:573px;	
	}
	#container .tansan-mask_sec10 .sec a{
		display:block;
		right:20px;
		bottom:140px;
		position:absolute;
		z-index:5;	
	}

	/* .tansan-mask_sec11 */
	#container .tansan-mask_sec11 h3{
		background:url('../images/bubblepack/tansan-mask_sec11_title_bg.jpg') no-repeat 50% 0;	
		height:100px;
		text-align:center;	
	}
	#container .tansan-mask_sec11 .inner{
		background:url('../images/bubblepack/tansan-mask_sec11_bg.jpg') no-repeat 50% 0;		
	}
	#container .tansan-mask_sec11 .sec{
		position:relative;
		height:573px;	
	}
	#container .tansan-mask_sec11 .sec a{
		display:block;
		right:20px;
		bottom:140px;
		position:absolute;
		z-index:5;	
	}

	/* .tansan-mask_sec12 */
	#container .tansan-mask_sec12 h3{
		background:url('../images/bubblepack/tansan-mask_sec12_title_bg.jpg') no-repeat 50% 0;
		height:100px;
		text-align:center;	
	}
	#container .tansan-mask_sec12 .inner{
		background:url('../images/bubblepack/tansan-mask_sec12_bg.jpg') no-repeat 50% 0;		
	}
	#container .tansan-mask_sec12 .sec{
		position:relative;
		height:573px;	
	}
	#container .tansan-mask_sec12 .sec a{
		display:block;
		right:20px;
		bottom:140px;
		position:absolute;
		z-index:5;	
	}

	/* .tansan-mask_sec13 */
	#container .tansan-mask_sec13 h3{
		background:url('../images/bubblepack/tansan-mask_sec13_title_bg.jpg') no-repeat 50% 0;
		height:100px;
		text-align:center;	
	}
	#container .tansan-mask_sec13 .inner{
		background:url('../images/bubblepack/tansan-mask_sec13_bg.jpg') no-repeat 50% 0;		
	}
	#container .tansan-mask_sec13 .sec{
		position:relative;
		height:573px;	
	}
	#container .tansan-mask_sec13 .sec a{
		display:block;
		right:20px;
		bottom:140px;
		position:absolute;
		z-index:5;	
	}
	
	.forSP {
		display: none !important;
	}
	
	#footer_contents .upper .contact_note {
		font-size: 23px;
		font-family: 'Shippori Mincho B1', serif;
		text-align: center;
		font-size: 23px;
	}

	#footer_contents .upper .contact_hours {
		margin-bottom: 70px;
		font-size: 15px;
		font-family: 'Shippori Mincho B1', serif;
	}

	#footer_contents .upper .contact_overview {
		font-size: 21px;
		font-family: 'Shippori Mincho B1', serif;
	}
	
	.header_list {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 75px;
	}

	.header_list li + li {
		margin-left: 8px;
	}

	.header_list li .btn_wrap a {
		max-width: 240px;
		padding-right: 30px;
		padding-left: 30px;
		font-size: 14px;
		box-sizing: border-box;
	}

	.header_list li .btn_wrap a:before {
		border-width: 3px 0 3px 6px;
	}

	.btn_sns a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		width: 37px;
		height: 37px;
		padding: 0;
		margin: 0 auto;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		background: #f09393;
	}

	.btn_sns a img {
		display: block;
		width: 20px;
		height: auto;
	}

	.btn_wrap a {
		display: block;
		width: 100%;
		max-width: 325px;
		padding: 7px 35px 8px;
		margin: 0 auto;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		border-radius: 8px;
		color: #fff;
		font-family: 'Shippori Mincho B1', serif;
		background: #f09393;
		position: relative;
		right: inherit;
		bottom: inherit;
		box-sizing: border-box;
	}

	.btn_sns a:hover,
	.btn_wrap a:hover {
		opacity: .7;
	}

	.btn_wrap a:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6.5px 0 6.5px 9px;
		border-color: transparent transparent transparent #fff;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 15px;
	}
}

/* スマホ */
@media screen and (max-width: 900px) {
	#header_contents h1 a{
		display: block;
		padding-top: 5px;
	}

	#header_contents h1 img{
		width: auto;
		height: 27px;
	}
	
  #mainImg.tansan-mask_mainImg {
    position: relative;
  }
  
  #mainImg.tansan-mask_mainImg img.sp-text {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: ;
    width: 100%;
  }
  
 #mainImg.tansan-mask_mainImg img,
	#container img {
		width: 100%;
		height: auto;
	}
	
	.tansan-mask_sec03 .sec {
		background: #edf6f5;
	}
	
	.tansan-mask_sec03 .sec > ul {
		padding: 10vw 6.25vw 0;
	}
	
	.tansan-mask_sec03 .sec > ul > li {
		padding: 3.75vw 2.8125vw 4.6875vw;
		box-shadow: 0px 0px 5.7px 0.3px rgba(59, 54, 64, 27%);
		background: #fcfcf5;
		position: relative;
	}
	
	.tansan-mask_sec03 .sec > ul > li:before {
		content: "";
		display: block;
		width: 27.8125vw;
		height: 27.1875vw;
		background: url('../images/bubblepack/sp/img06.png') no-repeat;
		background-size: contain;
		position: absolute;
		top: -8.125vw;
		right: 2.1875vw;
	}
	
	.tansan-mask_sec03 .sec > ul > li > span,
	.tansan-mask_sec03 .sec > ul > li > strong,
	.tansan-mask_sec03 .sec > ul > li > strong span {
		color: #db1072;
	}
	
	.tansan-mask_sec03 .sec > ul > li > span {
		font-size: 3.115625vw;
	}
	
	.tansan-mask_sec03 .sec > ul > li > strong {
		display: block;
		margin-bottom: 4.0625vw;
		font-size: 4.74275vw;
		text-decoration: underline;
	}
	
	.tansan-mask_sec03 .sec > ul > li > strong span {
		display: inline-block;
		margin-left: 0.78125vw;
		font-size: 3.078125vw;
		font-weight: 400;
	}
	
	.tansan-mask_sec03 .sec > ul > li > p {
		font-size: 3.459375vw;
	}
	
	.tansan-mask_sec03 .sec > ul + .txt {
		padding: 2.25vw 6.25vw 0;
		margin-bottom: 2.56vw;
		font-size: 3.11875vw;
		line-height: 1.30260521;
	}
	
	.tansan-mask_sec04 .sec .txt {
		padding: 1.875vw 1.40625vw 0;
		font-size: 3.00625vw;
		line-height: 1.302;
	}
	
	.tansan-mask_sec04 .sec .cotton_note {
		text-align: center;
		font-size: 3.75vw;
		line-height: 1.5;
		text-align: center;
		font-feature-settings: "palt";
		padding-top: 10.9375%;
		padding-bottom: 7.8125%;
	}
	
	.tansan-mask_sec05 .sec .sec05list {
		padding: 3.125vw 2.5vw 1.875vw;
		background: #f8f6f7;
	}
	
	.tansan-mask_sec05 .sec .sec05list > li {
		padding: 2.03125vw 3.75vw 1.875vw 25.9375vw;
		font-size: 3.890625vw;
		line-height: 1.446;
		background: #fff;
		position: relative;
	}
	
	.tansan-mask_sec05 .sec .sec05list > li + li {
		margin-top: 1.40625vw;
	}
	
	.tansan-mask_sec05 .sec .sec05list > li:before {
		content: "";
		width: 19.375vw;
		height: 19.375vw;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 1.25vw;
		margin: auto;
	}

	.tansan-mask_sec05 .sec .sec05list > li:nth-child(1):before {
		background: url('../images/bubblepack/sp/img09.png') no-repeat;
		background-size: contain;
	}	
	
	.tansan-mask_sec05 .sec .sec05list > li:nth-child(2):before {
		background: url('../images/bubblepack/sp/img10n.png') no-repeat;
		background-size: contain;
	}
	
	.tansan-mask_sec05 .sec .sec05list > li:nth-child(3):before {
		background: url('../images/bubblepack/sp/img11.png') no-repeat;
		background-size: contain;
	}
	
	.tansan-mask_sec08 .sec .txt {
		padding: 1.5625vw 2.5vw 0.625vw;
		font-size: 3.19vw;
		line-height: 1.3026;
	}
	
	.tansan-mask_sec10 .sec a {
		display: block;
		width: 81.5625vw;
		margin: 0 auto;
	}
	
	.tansan-mask_sec10 .buy-text {
		margin: 0 8.125vw;
	}
	
	.tansan-mask_sec10 .buy-text .tx01 {
		margin-top: 1.25vw;
		font-size: 3.184375vw;
		text-align: center;
	}
	
	.tansan-mask_sec10 .buy-text .tx02 {
		margin-top: 5vw;
		font-size: 3.125vw;
		line-height: 1.3;
	}
	
	.btn_wrap a {
		display: block;
		width: 100%;
		padding:  2.18vw 10.15625vw 2.18vw;
		margin: 0 auto;
		text-align: center;
		font-size: 4.09375vw;
		font-weight: bold;
		border-radius: 1.25vw;
		line-height: 1.4;
		color: #fff;
		font-family: 'Shippori Mincho B1', serif;
		background: #f09393;
		position: relative;
		right: inherit;
		bottom: inherit;
		box-sizing: border-box;
	}

	.btn_wrap a:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1.40625vw 0 1.40625vw 1.796875vw;
		border-color: transparent transparent transparent #ffffff;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 15px;
	}
	
	#container .lower .sec img {
		width: inherit;
	}
	
	#footer_contents .lower {
		background: #f6f6f6;
	}
	
	#footer_contents .upper {
		padding-top: 8vw;
	}

	#footer_contents .upper .sec {
		padding: 0 4.6875vw;
		box-sizing: border-box;
	}

	#footer_contents .sec .contact_note {
		font-family: 'Shippori Mincho B1', serif;
		font-size: 3.8328vw;
	}	

	#footer_contents .sec .contact_hours {
		font-size: 2.753125vw;
		font-family: 'Shippori Mincho B1', serif;
	}

	#footer_contents .sec .contact_overview {
		margin-top: 11vw;
		font-size: 2.753125vw;
		font-family: 'Shippori Mincho B1', serif;
	}

	#footer_contents .lower p {
		padding: 2.1875vw 9.0625vw 2.8125vw;
		font-size: 2.25625vw;
		line-height: 1.66;
		letter-spacing: -.01em;
	}

	.header_list {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 75px;
		padding-right: 3vw;
	}

	.header_list li + li {
		margin-left: 8px;
	}

	.header_list li .btn_wrap a {
		width: 27.93vw;
		padding: 0.71875vw 0;
		font-size: 2.1875vw;
		box-sizing: border-box;
	}

	.header_list li .btn_wrap a:before {
		border-width: 3px 0 3px 6px;
		right: 1.6vw;
	}

	.btn_sns a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		width: 5.78125vw;
		height: 5.78125vw;
		padding: 0;
		margin: 0 auto;
		text-align: center;
		border-radius: 50%;
		color: #fff;
		background: #f09393;
	}

	.btn_sns a img {
		display: block;
		width: 3.125vw;
		height: auto;
	}

	
	.sec{
		width:inherit;
	}

	.forPC {
		display: none !important;
	}
	
}