@charset 'utf-8';

/* ++++++++++++++++++++++++++++++++++++++++

	Reset and Clearfix

++++++++++++++++++++++++++++++++++++++++ */

html, body,
div, p,
table, tr, th, td,
ul, ol, li,
dl, dt, dd,
h1, h2, h3, h4, h5, h6,
img, a, address, figure, blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

li {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}



/* ++++++++++++++++++++++++++++++++++++++++

	Common Settings

++++++++++++++++++++++++++++++++++++++++ */

body {
	color: #777;
	font-size: 16px;
	line-height: 2;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

a,
input[type=submit],
input[type=image] {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: .2s;
}
a {
	text-decoration: underline;
	color: inherit;
	cursor: pointer;
}
a:hover,
input[type=submit]:hover,
input[type=image]:hover {
	opacity: .7;
}

#container {
	overflow: hidden;
	position: relative;
	z-index: 1;
	padding-top: 103px;
}

.scrLock #container {
	position: fixed;
	left: 0;
	right: 0;
}


/* ----------------------------------------
	Layout
---------------------------------------- */

[data-flex] {
	-webkit-flex-wrap: wrap;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	justify-content: space-between;
}


/* ----------------------------------------
	header
---------------------------------------- */

header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	border-top: solid 3px #b20c1f;
	background: #fff;
	line-height: 1;
}
header>div {
	position: relative;
	height: 100px;
}

h1,
nav,
header .sns {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
h1 {
	left: 30px;
}

nav {
	right: 90px;
}
nav [data-flex] {
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
nav li {
	line-height: 34px;
}
nav a {
	display: block;
	text-decoration: none;
	letter-spacing: .04em;
	color: #a38a77;
}

header .sns {
	right: 25px;
}


/* ----------------------------------------
	contents
---------------------------------------- */

#contents {
	position: relative;
	z-index: 1;
}

h2 {
	position: relative;
	height: 120px;
	margin-bottom: 50px;
	background: url(../img/title_bg_pc.png) 50% no-repeat #f2edeb;
}
h2 img {
	display: block;
}

#title {
	margin-bottom: 50px;
	background: #f2edeb;
	text-align: center;
	color: #9b775c;
}
#title h2 {
	height: auto;
	background: none;
}
#title h2 img {
	margin: auto;
}
#title p {
	font-size: 18px;
}

section+section {
	margin-top: 80px;
}

article p+p {
	margin-top: 1em;
}

article sup {
	font-size: 80%;
}

article small {
	display: inline-block;
	font-size: 12px;
}


/* ----------------------------------------
	footer
---------------------------------------- */

footer {
	position: relative;
	z-index: 1;
	margin-top: 100px;
	padding-bottom: 20px;
	border-bottom: solid 10px #b20c1f;
	text-align: center;
	font-size: 14px;
	line-height: 1;
}

footer .nav {
	-webkit-justify-content: center;
	justify-content: center;
}
footer .nav li+li {
	margin-left: 40px;
}
footer .nav li a {
	text-decoration: none;
	color: #a38a77;
}

#copyright {
	margin-top: 30px;
}
#copyright small {
	display: block;
	letter-spacing: .04em;
	color: #a38a77;
}



/* ++++++++++++++++++++++++++++++++++++++++

	PC

++++++++++++++++++++++++++++++++++++++++ */

@media (min-width: 768px) {
	.sp,
	img[src$='_sp.jpg'],
	img[src$='_sp.png'] {
		display: none !important;
	}

	#container,
	header {
		min-width: 1100px;
	}


	/* ----------------------------------------
		Layout
	---------------------------------------- */

	[data-flex='true'],
	[data-flex='pc'] {
		display: -webkit-flex;
		display: flex;
	}


	/* ----------------------------------------
		header
	---------------------------------------- */
     nav li {
		font-size:14px;
	}
    
    nav li+li {
		margin-left: 25px;
	}

	nav .onlineshop a {
		padding-left: 40px;
		background: url(../img/nav_icon_onlineshop.png) 0 50% no-repeat;
	}


	/* ----------------------------------------
		contents
	---------------------------------------- */

	#contents>div,
	article>div {
		width: 900px;
		margin: auto;
	}

	h2 span {
		position: absolute;
		right: 50%;
		top: 50%;
		-webkit-transform: translate3d(450px,-50%,0);
		transform: translate3d(450px,-50%,0);
	}

	contents>#title,
	article>#title {
		-webkit-justify-content: flex-end;
		-webkit-align-items: center;
		justify-content: flex-end;
		align-items: center;
		position: relative;
		width: 100%;
		max-width: 1400px;
		min-width: 1100px;
		height: 612px;
	}
	#title>img {
		position: absolute;
		right: 550px;
		top: 0;
	}
	#title>div {
		width: 550px;
	}


	/* ----------------------------------------
		footer
	---------------------------------------- */

	#footerLogo {
		margin-top: 40px;
	}
}



/* ++++++++++++++++++++++++++++++++++++++++

	SP

++++++++++++++++++++++++++++++++++++++++ */

@media (max-width: 767px) {
	body {
		font-size: 14px;
		line-height: 1.75;
	}

	img {
		width: 100%;
	}

	.pc,
	img[src$='_pc.jpg'],
	img[src$='_pc.png'] {
		display: none !important;
	}

	#container,
	header>div {
		padding-top: 18.75%;
	}
	#container {
		margin-top: 2px;
	}


	/* ----------------------------------------
		Layout
	---------------------------------------- */

	[data-flex='true'],
	[data-flex='sp'] {
		display: -webkit-flex;
		display: flex;
	}


	/* ----------------------------------------
		header
	---------------------------------------- */

	header {
		border-top-width: 2px;
	}
	header>div {
		height: 0;
	}

	h1 {
		left: 4.6875%;
		z-index: 2;
		width: 29.84375%;
	}

	#navBtn,
	#navBtn:before,
	#navBtn:after,
	#navBtn span {
		position: absolute;
	}
	#navBtn {
		opacity: 1;
		right: 4.6875%;
		top: 50%;
		z-index: 3;
		width: 5.625%;
		padding-top: 4.375%;
		margin-top: -2.1875%;
	}
	#navBtn:before,
	#navBtn:after,
	#navBtn span {
		left: 0;
		width: 100%;
		height: 2px;
		background: #666;
		transition: .3s;
	}
	#navBtn:before,
	#navBtn:after {
		content: '';
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}
	#navBtn:before {
		top: 0;
	}
	#navBtn:after {
		bottom: 0;
	}
	#navBtn span {
		overflow: hidden;
		top: 50%;
		text-indent: 100%;
		margin-top: -1px;
	}

	.navOpen #navBtn:before,
	.navOpen #navBtn:after {
		background: #fff;
	}
	.navOpen #navBtn:before {
		top: 50%;
		margin-top: -1px;
		-webkit-transform: rotateZ(-135deg);
		transform: rotateZ(-135deg);
	}
	.navOpen #navBtn:after {
		bottom: 50%;
		margin-bottom: -1px;
		-webkit-transform: rotateZ(135deg);
		transform: rotateZ(135deg);
	}
	.navOpen #navBtn span {
		background: transparent;
		transition: 0s;
	}

	nav {
		visibility: hidden;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 2;
		box-sizing: border-box;
		width: 100%;
		padding: 14.0625% 0 9.375%;
		background: #a38a77;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		transition: .3s;
	}

	.navOpen nav {
		visibility: visible;
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	nav ul {
		overflow-x: hidden;
		max-height: 100%;
	}
	nav li {
		margin: 0 7.8125%;
	}
	nav li a {
		border-bottom: dotted 1px;
		color: #fff;
		font-size: 18px;
		line-height: 33px;
	}
	nav li a span {
		display: inline-block;
		margin-left: 15px;
		vertical-align: middle;
		font-size: 12px;
	}

	header .sns {
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		right: 13.4375%;
		z-index: 1;
		width: 100%;
	}
	header .sns li {
		width: 6.25%;
	}


	/* ----------------------------------------
		contents
	---------------------------------------- */

	#contents>div,
	article>div {
		margin: 0 6.25%;
	}

	h2 {
		margin-bottom: 6.25%;
		height: auto;
		background-image: url(../img/title_bg_sp.png);
		background-size: 100%;
	}
	h2 span {
		display: block;
		position: relative;
		margin-left: 40.625%;
		padding-top: 30.46875%;
	}
	h2 span img {
		position: absolute;
		left: 50%;
		top: 50%;
		width: auto;
		height: 20%;
		-webkit-transform: translate3d(-50%,-50%,0);
		transform: translate3d(-50%,-50%,0);
	}

	contents>#title,
	article>#title {
		margin: 0 0 6.25%;
	}
	#title>div {
		padding: 7.8125% 0 6.25%;
	}
	#title h2 {
		margin-bottom: 4.6875%;
	}
	#title p {
		font-size: 12px;
	}

	section+section {
		margin-top: 10.71%;
	}
	article>section+section {
		margin-top: 9.375%;
	}


	/* ----------------------------------------
		footer
	---------------------------------------- */

	footer {
		margin-top: 15.625%;
		border-bottom-width: 5px;
	}

	#footerLogo img {
		width: 49.21875%;
	}
	#copyright {
		margin-top: 4.6875%;
	}
	#copyright small {
		font-size: 6px;
	}
}
	/* ----------------------------------------
		IMAGE FADE IN & PAGETOP  PCのみ
	---------------------------------------- */

@media (min-width: 768px) {

/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 30px);
	transition : all 750ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/*_________ページトップ ________*/


/* ページTOPに戻る */
#page-top{
    display: none;
    position: fixed;
    right: 15px;
    bottom: 20px;
}
#page-top a{
    display: block;
}
}

	/* ----------------------------------------
		PAGETOP  SPのみ
	---------------------------------------- */

@media (max-width: 767px) {

#page-top a{
    display:block;
    text-align:center;
    margin:0px auto 30px;
}
#page-top img {
	width: auto;
}

}
	/* ----------------------------------------
		OPEN CLOSEボタン
	---------------------------------------- */
.ig_box{
          margin-top:15px;
            
}

.ocbutton{
            display: none;
            cursor: pointer;
            
}
.ocbutton + label{
            cursor: pointer;
    
}
.ocbutton + label:hover{ /* マウスがボタンの上にある時 */
            border-bottom:1px dotted #888 ;
}
.ocbutton + label:before{ /* 非表示時の文字 ※３*/
            content:"配合成分を表示";
            background: #f2edeb;
            
            padding:12px;
            color: #9b775c;
        
}
.ocbutton:checked + label:before{  /* 表示時の文字 ※３ */
            content:"配合成分を非表示";
            
}
#OPEN_content{
            display: none;
}
#OPEN:checked ~ #OPEN_content{
            display:block;
}

#OPEN_content2{
            display: none;
}
#OPEN2:checked ~ #OPEN_content2{
            display:block;
}

#OPEN_content3{
            display: none;
}
#OPEN3:checked ~ #OPEN_content3{
            display:block;
}


	/* ----------------------------------------
		OPEN CLOSEボタン  SP
	---------------------------------------- */

@media (max-width: 767px) {

.ocbutton  input{
            display:none;
    
    
}

}