@charset "UTF-8";
img {
	width: 100%;
	height: auto; }

/*header
-----------------------------------*/
#tpl-header {
	position: fixed;
	top: 0;
	z-index: 100; }

#tpl-header .header-inner {
	padding: 5px;
	position: relative;
	z-index: 50; }

#tpl-header .tpl-inner-wrap .logo {
	float: left;
	width: 15%;
	margin-top: 3%; }

#tpl-header .tpl-inner-wrap .logo img {
	width: 60px;
	height: auto; }

#header-back {
	background-color: white;
	box-shadow: 0px 0px 8px 1px #e6e6e6;
	-moz-box-shadow: 0px 0px 8px 1px #e6e6e6;
	-webkit-box-shadow: 0px 0px 8px 1px #e6e6e6;
	width: 100%;
	height: 58px;
	position: absolute;
	top: 0;
	display: none; }

#gnav {
	float: right;
	padding-top: 8px;
	width: 80%;
	text-align: right; }

#gnav li {
	display: inline-block;
	margin-right: 8px; }
	#gnav li.gnav_sns {
		width: 24px;
		position: relative;
		top: 4px; }
		#gnav li.gnav_sns a img {
			width: 100%;
			height: auto; }

#gnav li a {
	display: block; }

#gnav li img {
	height: 12px;
	width: auto; }

#gnav .gnav-tweet img, #gnav .gnav-facebook img {
	vertical-align: -8px; }

#gnav .gnav-tweet img {
	height: 15px; }

#gnav .gnav-facebook img {
	height: 15px; }

/*mv
-----------------------------------*/
.mv {
	position: relative;
	width: 100%;
	background: #f2cdd3;
	background-size: cover;
	overflow: hidden; }

.mv:before {
	content: "";
	display: block;
	padding-top: 160%;
	/* 高さを幅の75%に固定 */ }

.mv .mv-loading {
	position: absolute;
	top: 50%;
	margin-top: -50%;
	width: 100%; }

.mv .mv-loading img {
	width: 100%;
	height: auto; }

.mv .mv-inner {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0; }

.mv ul {
	/*  width: 100%;
    position: relative; */ }

.mv li {
	position: absolute; }

.mv .item1 {
	bottom: 0;
	right: 0;
	z-index: 2;
	width: 55%; }

.mv .item2 {
	width: 96%;
	top: 14.5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1; }

.mv .item3 {
	top: 11%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: calc((850/1080) * 100%); }

.mv .item4 {
	top: 12.5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: calc((550/1080) * 100%); }

.mv .item5 {
	top: 9.5%;
	left: 53%;
	transform: translateX(-50%);
	z-index: 1;
	width: calc((750/1080) * 100%); }

.mv .mv-back {
	width: 100%; }

.mv .item6 {
	top: 21.5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	width: calc((640/1080) * 100%); }

.mv .item7 {
	top: 30%;
	right: 2%;
	z-index: 6;
	width: 15%; }

.mv .item8 {
	bottom: 11%;
	right: 0px;
	z-index: 0; }

.mv .item9_1 {
	top: 33%;
	left: 6%;
	z-index: 1;
	width: 35%; }

.mv .item9_2 {
	top: 67%;
	left: 18.5%;
	z-index: 7;
	width: calc((140/920) * 100%); }

.mv .item9_3 {
	top: 51%;
	left: 3%;
	z-index: 8;
	width: calc((140/920) * 100%); }

.mv .item9_4 {
	top: 56%;
	left: 35%;
	z-index: 9;
	width: calc((140/920) * 100%); }

.mv .item9_5 {
	top: 43%;
	left: 22%;
	z-index: 9;
	width: calc((140/920) * 100%); }

.mv .item10 {
	bottom: 10px;
	left: 50%;
	margin-left: -5%;
	z-index: 8;
	width: 10%; }

.mv .item11 {
	bottom: 10px;
	left: 10px;
	z-index: 20;
	width: 55%; }

.mv-back img {
	width: 100%;
	height: auto; }

.mv .item13 {
	bottom: 0;
	right: -21%;
	z-index: 18;
	width: 83%; }

.hs-1 {
	margin: 0 auto;
	width: 80%; }

.hs-1 img {
	width: 100%;
	height: auto; }

.section {
	padding-top: 30px; }

.block-img {
	display: block; }

/*content about
-----------------------------------*/
#about {
	background: url(../img/about_back.jpg) no-repeat top;
	background-size: 100% 53%; }
	#about .hs-1 {
		width: calc((540/920) * 100%);
		margin-left: auto;
		margin-right: auto; }

#about .intro {
	margin: 30px auto 0;
	padding: 0 25px; }

#about .intro .product-img1, #about .intro .product-img2 {
	width: 80%;
	margin: 0 auto; }

#about .intro .s-txt {
	width: calc((780/920) * 100%);
	margin: 20px auto 30px;
	font-size: 10px;
	white-space: nowrap; }

#about .intro .s-txt p {
	font-size: 10px;
	line-height: 1.5; }

#about .intro .s-txt p:nth-child(2), #about .intro .s-txt p:nth-child(3) {
	text-indent: 1em; }

#about .intro .overview h3 {
	margin-bottom: 50px;
	width: calc((775/920) * 100%);
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px; }

#about .intro .overview .txt {
	position: relative;
	font-size: 12px; }
	#about .intro .overview .txt .txt-annotion {
		font-size: 10px;
		text-indent: -10px;
		padding-left: 10px;
		width: calc((645/920) * 100%);
		margin-top: 15px; }

#about .intro .overview .txt img {
	position: absolute;
	top: 15px;
	right: -10px;
	width: 30%;
	height: auto; }

#about .intro .overview p {
	line-height: 2;
	letter-spacing: -0.5px; }

#about .organic {
	background: url("../img/about_back_abura.png") no-repeat center top;
	background-size: 800px;
	padding: 100px 0 30px; }

#about .organic h3 {
	text-align: center; }

#about .organic h3 + p {
	font-size: 12.2px;
	text-align: center;
	margin-top: 15px;
	line-height: 1.8; }

#about .inner-organic {
	padding: 0 20px; }
	#about .inner-organic .organic-image {
		margin-top: 40px; }

#about .inner-organic .oil5list {
	margin: 30px -9px 0; }

#about .inner-organic .oil5list li {
	overflow: hidden;
	font-size: 11px; }

#about .inner-organic .oil5list li + li {
	margin-top: 20px; }

#about .inner-organic .oil5list figure {
	float: left;
	width: 22%; }

#about .inner-organic .oil5list .inner-right {
	float: right;
	width: 76%;
	padding-top: 10px; }

#about .inner-organic .oil5list h4 {
	width: 80px;
	margin-bottom: 5px; }

/*content lineup
-----------------------------------*/
#lineup {
	background: url("../img/lineup_back.jpg") no-repeat center top;
	background-size: cover;
	padding-bottom: 25px;
	position: relative;
	z-index: 10; }

#lineup .inner-lineup {
	padding: 0 20px; }

.lineup-list {
	margin-top: 40px; }

.lineup-item-list {
	margin-top: 75px; }
	.lineup-item-list > li {
		margin-bottom: 65px; }
		.lineup-item-list > li .lineup-item-list-image {
			width: calc((302/1080) * 100%);
			margin-left: auto;
			margin-right: auto; }
		.lineup-item-list > li .lineup-item-name {
			text-align: center;
			font-size: 16px;
			margin-top: -20px; }
		.lineup-item-list > li .lineup-item-button {
			background-color: transparent;
			border: none;
			cursor: pointer;
			outline: none;
			padding: 0;
			appearance: none;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
			background-color: #e4007f;
			border: 1px solid #e4007f;
			color: #fff;
			width: calc((570/1080) * 100%);
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
			border-radius: 8px; }
			.lineup-item-list > li .lineup-item-button span {
				padding-right: 30px;
				position: relative; }
				.lineup-item-list > li .lineup-item-button span::before {
					content: "+";
					display: block;
					width: 20px;
					height: 20px;
					background-color: #e4007f;
					border: 1px solid #fff;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					line-height: 1;
					border-radius: 50%; }
			.lineup-item-list > li .lineup-item-button.is-active {
				background-color: #fff;
				color: #e4007f; }
				.lineup-item-list > li .lineup-item-button.is-active span::before {
					content: "-";
					background-color: #fff;
					border: 1px solid #e4007f; }
		.lineup-item-list > li .lineup-item-button-buttom {
			background-color: transparent;
			border: none;
			cursor: pointer;
			outline: none;
			padding: 0;
			appearance: none;
			margin-top: 25px;
			background-color: #e4007f;
			border: 1px solid #e4007f;
			color: #fff;
			width: calc((570/1080) * 100%);
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
			border-radius: 8px;
			transition: opacity 0.2s;
			width: 190px;
			margin-left: auto;
			margin-right: auto; }
			.lineup-item-list > li .lineup-item-button-buttom span {
				padding-right: 30px;
				position: relative; }
				.lineup-item-list > li .lineup-item-button-buttom span::before {
					content: "+";
					display: block;
					width: 20px;
					height: 20px;
					background-color: #e4007f;
					border: 1px solid #fff;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					line-height: 1;
					border-radius: 50%; }
			.lineup-item-list > li .lineup-item-button-buttom:hover {
				opacity: 0.7; }
			.lineup-item-list > li .lineup-item-button-buttom.is-active {
				background-color: #fff;
				color: #e4007f; }
				.lineup-item-list > li .lineup-item-button-buttom.is-active span::before {
					content: "-";
					background-color: #fff;
					border: 1px solid #e4007f; }

/**
* .lineup-item
* 各モーダルアイテムの内容
* item-xxxでバリエーション
*/
.lineup-item {
	margin-top: 50px;
	padding: calc((40 / 1000) * 100%);
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	top: 0;
	left: 0;
	width: 100%;
	animation: appear .5s ease;
	/* .item-content 各アイテムの内容wrapper */
	/** 画像*/
	/** mklink*/
	/** テキスト*/
	/* 閉じるボタン */
	/* バリエーション */ }
	.lineup-item::after {
		content: "";
		display: block;
		width: 40px;
		height: 20px;
		background-color: rgba(255, 255, 255, 0.7);
		position: absolute;
		top: -19px;
		clip-path: polygon(0 100%, 100% 100%, 50% 0); }
	.lineup-item h3 {
		text-align: center; }
	.lineup-item .item-img {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 50px; }
		.lineup-item .item-img:first-child {
			margin-top: 95px; }
		.lineup-item .item-img img {
			margin-bottom: 0; }
	.lineup-item .mklink-wrap {
		width: calc((680 / 940) * 100%);
		padding: calc((30 / 680) * 100%) 0 calc((25 / 680) * 100%);
		margin: calc((70 / 680) * 100%) auto 0;
		background-color: #ffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center; }
		.lineup-item .mklink-wrap img {
			max-width: 100%; }
		.lineup-item .mklink-wrap .mklink-inner {
			width: calc((330 / 680) * 100%); }
		.lineup-item .mklink-wrap .ttl {
			width: 100%;
			margin-bottom: 20px; }
		.lineup-item .mklink-wrap .btn {
			display: block;
			width: 100%;
			margin-top: 0; }
		.lineup-item .mklink-wrap .btn img {
			margin: 0px; }
	.lineup-item .overview {
		font-size: 18px;
		line-height: 1.8;
		margin-top: 45px;
		text-align: left; }
	.lineup-item .tags {
		list-style-image: none !important;
		border: none !important;
		margin-top: 10px;
		display: flex; }
		.lineup-item .tags li {
			display: inline-block;
			margin: 0 2.5px;
			color: #fff;
			background-color: #ccc;
			border-radius: 99px;
			padding: 7px 10px;
			font-size: 14px;
			line-height: 1; }
	.lineup-item .smf {
		font-size: 12px;
		margin-top: 15px; }
	.lineup-item .howto {
		margin-top: 20px;
		border-radius: 10px;
		background: #fff;
		padding: 1px;
		position: relative; }
		.lineup-item .howto h4 {
			position: absolute;
			top: 10px;
			left: 0;
			width: 80px; }
		.lineup-item .howto ul {
			padding: 40px 10px 15px 10px;
			border-radius: 10px;
			font-size: 10px;
			line-height: 1.6; }
		.lineup-item .howto li {
			padding-left: 10px;
			background-size: 4px; }
		.lineup-item .howto li + li {
			margin-top: 5px; }
	.lineup-item .howto-annotion {
		margin-top: 25px;
		font-size: 12px; }
	.lineup-item .lineup-item-button-buttom {
		background-color: transparent;
		border: none;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
		margin-top: 30px;
		background-color: #e4007f;
		border: 1px solid #e4007f;
		color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
		border-radius: 8px;
		transition: opacity 0.2s;
		width: 190px;
		margin-left: auto;
		margin-right: auto; }
		.lineup-item .lineup-item-button-buttom span {
			padding-right: 30px;
			position: relative; }
			.lineup-item .lineup-item-button-buttom span::before {
				content: "+";
				display: block;
				width: 20px;
				height: 20px;
				background-color: #e4007f;
				border: 1px solid #fff;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 0;
				line-height: 1;
				border-radius: 50%; }
		.lineup-item .lineup-item-button-buttom:hover {
			opacity: 0.7; }
		.lineup-item .lineup-item-button-buttom.is-active {
			background-color: #fff;
			color: #e4007f; }
			.lineup-item .lineup-item-button-buttom.is-active span::before {
				content: "-";
				background-color: #fff;
				border: 1px solid #e4007f; }
	.lineup-item.item-spd::after {
		left: 75px; }
	.lineup-item.item-spd .tags li {
		background-color: #e4007f; }
	.lineup-item.item-spd .howto ul {
		border: dotted 1px #e92e96; }
	.lineup-item.item-spd .howto li {
		background: url("../img/listico_pink.png") no-repeat 0 4px; }
	.lineup-item.item-spd h3 img {
		width: calc((867 / 940) * 100%); }
	.lineup-item.item-spd .lineup_img_1-01 img {
		width: calc((429 / 940) * 100%); }
	.lineup-item.item-spd .lineup_img_1-02 img {
		width: calc((801 / 940) * 100%); }
	.lineup-item.item-liquid::after {
		left: 320px; }
	.lineup-item.item-liquid .tags {
		justify-content: flex-start; }
		.lineup-item.item-liquid .tags li {
			background-color: #344ea0; }
	.lineup-item.item-liquid .howto ul {
		border: dotted px #344ea0; }
	.lineup-item.item-liquid .howto li {
		background: url("../img/listico_blue.png") no-repeat 0 4px; }
	.lineup-item.item-liquid .lineup_img_4 img {
		width: calc((549 / 940) * 100%); }
	.lineup-item.item-deep::after {
		left: 575px; }
	.lineup-item.item-deep .tags li {
		background-color: #ff6d00; }
	.lineup-item.item-deep .howto ul {
		border: dotted 1px #ff6d00; }
	.lineup-item.item-deep .howto li {
		background: url("../img/listico_orange.png") no-repeat 0 4px; }
	.lineup-item.item-deep .lineup_img_3-01 img {
		width: calc((200 / 940) * 100%); }
	.lineup-item.item-deep .lineup_img_3-02 img {
		width: calc((798 / 940) * 100%); }
	.lineup-item.item-white::after {
		left: 825px; }
	.lineup-item.item-white .tags li {
		background-color: #0089ce; }
	.lineup-item.item-white .howto ul {
		border: dotted 1px #0089ce; }
	.lineup-item.item-white .howto li {
		background: url("../img/listico_green.png") no-repeat 0 4px; }
	.lineup-item.item-white .lineup_img_4-01 img {
		width: calc((432 / 940) * 100%); }
	.lineup-item.item-white .lineup_img_4-02 img {
		width: calc((331 / 940) * 100%); }

.center-sm {
	font-size: 9px;
	text-align: center;
	margin-top: 25px; }

/*content tvcm
-----------------------------------*/
#tvcm {
	background: #f9dee2 url("../img/tvcm_back.png") no-repeat center;
	padding-bottom: 100px;
	background-size: cover;
	position: relative;
	z-index: 10; }

#tvcm .inner-tvcm {
	padding: 0 20px; }

#tvcm .txt-int {
	font-size: 13px;
	line-height: 2;
	text-align: center;
	margin-top: 20px; }

#tvcm .movie {
	text-align: center;
	margin-top: 20px; }

#tvcm .comingsoon-img {
	text-align: center;
	margin-top: 30px; }

.movie {
	position: relative;
	padding-bottom: 47%;
	padding-top: 30px;
	height: 0;
	overflow: hidden; }

.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; }

/*footer
-----------------------------------*/
#tpl-pagetop-box {
	z-index: 1000;
	width: 80px;
	height: 80px;
	opacity: 0; }

#tpl-pagetop-box .tpl-inner-wrap {
	background: none; }

#tpl-pagetop-box .btn-tvcm, #tpl-pagetop-box .bth-pagetop {
	position: absolute; }

#tpl-pagetop-box .btn-tvcm {
	z-index: 5;
	bottom: -10px;
	right: -10px; }

#tpl-pagetop-box .bth-pagetop {
	display: none; }

.btn-fixed {
	position: fixed;
	bottom: 15px;
	right: 15px; }

.btn-abuso {
	position: absolute;
	top: -90px;
	right: 15px; }

/* #tpl-footer .tpl-inner-wrap {
  padding: 10px;
  font-size: 9px; }
  #tpl-footer .tpl-inner-wrap .foot-logo {
    width: 30%;
    margin: 0 auto; }
  #tpl-footer .tpl-inner-wrap .fnav {
    padding: 15px 0;
    text-align: center; }
    #tpl-footer .tpl-inner-wrap .fnav li {
      display: inline-block;
      vertical-align: middle;
      background: url("../img/footnavico.png") no-repeat left center;
      padding-left: 10px;
      margin: 0 10px; }
      #tpl-footer .tpl-inner-wrap .fnav li:first-child {
        margin-left: 0; }
      #tpl-footer .tpl-inner-wrap .fnav li:last-child {
        margin-right: 0; }
    #tpl-footer .tpl-inner-wrap .fnav a {
      color: #333; }
  #tpl-footer .tpl-inner-wrap .copyright {
    text-align: center;
    font-size: 9px; } */
.t-footer {
	text-align: center;
	position: relative; }

.t-footer_logo_softymo {
	padding: 15px 0;
	border-bottom: 1px solid #e9e7e7;
	position: relative; }

.t-footer_logo_softymo_pic {
	width: 217px; }

.t-footer_logo_softymo_arrow {
	width: 6px;
	height: 11px;
	color: #003692;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3%;
	margin: auto; }

.t-footer_inner {
	padding: 20px 3.75% 30px; }

.t-footer_logo_kose_pic {
	width: 60px;
	margin-bottom: 18px; }

.t-footer_nav_list {
	font-size: 10px;
	letter-spacing: -.4em;
	margin-bottom: 20px; }

.t-footer_nav_list a {
	color: #555; }

.t-footer_nav_item {
	display: inline-block;
	letter-spacing: normal;
	padding-right: 16px;
	margin-right: 16px;
	border-right: 1px solid #ccc; }

.t-footer_nav_item:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: none; }

.t-footer_copyright {
	font-size: 10px;
	color: #ccc; }

/*ばば追記*/
@media screen and (max-width: 340px) {
	#iphone5sBr {
		display: none; } }

.btn {
	display: block;
	width: 90%;
	margin: 30px auto 0; }

.footer-sns {
	margin-top: 80px;
	margin-bottom: 30px; }
	.footer-sns li + li {
		margin-top: 12px; }