@charset "utf-8";
/* CSS Document */

/* INDEX ----------------------------------
  01 Base setting
  02 Header
  03 Demerit
  04 Intro
  05 Merit
  06 Function
  07 How to Use
  08 Purchase
  09 Company
  10 Contact
  11 Footer
-----------------------------------------*/

/* 古いセクション専用スタイル */
.legacy-section {

/* 01 Base setting
-----------------------------------------*/
body {
	font-family: Roboto,"Noto Sans JP","游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
h1, h2, h3, h4, p, ul, li, a {
	letter-spacing: 0.1em;
	color: #4f4a47;
}
p {
	line-height: 1.4;
}
	
/* 02 Header
-----------------------------------------*/
header {
	background: url("../images/main_kvbg.jpg") no-repeat 0 50%;
	background-size: cover;
}
#main_container_pc {
	width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
#main_container_pc img,
#main_container_sp img {
	max-width: 100%;
	height: auto;
}

/* left area */
#main_container_pc .main_leftarea,
#main_container_pc .main_rightarea {
	justify-content: space-between;
}
#main_container_pc .main_leftarea {
	width: 36.5%;
}
#main_container_pc .main_leftarea p {
	margin: 50px 0 0 30px;
}


/* right area */
#main_container_pc .main_rightarea {
	width: 63.5%;
}
#main_container_pc .main_rightarea h1 {
	margin: 86px 0 30px 0;
	line-height: 1.4;
	font-size: 44px;
	font-weight: bold;
	text-shadow: 0 0 6px rgb(255, 255, 255, 1);
}
#main_container_pc .main_rightarea h1 span {
	background-image: linear-gradient(
	rgba(0 0 0 / 0) 80%,
	#b5b5b5 80%
	);
}
#main_container_pc .main_rightarea div {
	display: flex;
}
#main_container_pc .main_rightarea div img {
	margin: 18px 18px 18px 0;
	box-shadow: 0 0 13px #c5c5c5;
}
#main_container_pc .main_rightarea div ul {
	display: flex;
}
#main_container_pc .main_rightarea .main_subtext {
	padding-right: 90px;
	text-align: right;
	font-size: 80%;
	text-shadow: 0 0 3px #fff;
}

/* Navi area */
nav#mainmenu {
	background: #fff;
}
nav#mainmenu ul {
	list-style-type: none;
	display: flex;
	flex-flow: wrap;
	width: 1200px;
	margin: 0 auto;
	padding: 30px 0;
}
nav#mainmenu li {
	margin: 0;
	padding: 0;
	width: 240px;
	overflow: hidden;
}
nav#mainmenu li a {
	display: block;
	width: 240px;
	height: 174px;
	overflow: hidden;
	position: relative;
}
nav#mainmenu li a.img_container{
	width: 240px;
	height: 174px;
	position: relative;
	overflow: hidden;
}
nav#mainmenu ul li a img:nth-child(2){
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
	.img_container:hover img:nth-child(2){
	opacity: 0;
	transition: opacity .3s;
}

@media screen and (max-width: 1000px) {

	/* left area */
	#main_container_pc {
		width: 100%;
	}
	#main_container_pc .main_leftarea p {
		margin-left: 15px;
	}
	#main_container_pc .main_rightarea {
		padding-right: 10px;
	}
	#main_container_pc .main_rightarea h1 {
		margin-top: 50px;
		font-size: 34px;
	}
	#main_container_pc .main_rightarea div p,
	#main_container_pc .main_rightarea div ul li {
		padding-right: 10px;
	}
	#main_container_pc .main_rightarea div img {
		margin: 0 13px 13px 0;
	}
	#main_container_pc .main_rightarea .main_subtext {
		padding-right: 10px;
	}
	nav#mainmenu ul {
		width: 100%;
	}
	nav#mainmenu ul li {
		width: 20%;
	}
	nav#mainmenu ul li img,
	nav#mainmenu ul li a.img_container{
		max-width: 100%;
		height: auto;
	}
}


@media screen and (max-width: 820px) {
	#main_container_pc .main_rightarea h1 {
		margin: 40px 0 20px 8px;
		font-size: 32px;
	}
}

@media screen and (max-width: 768px) {
	#main_container_pc .main_rightarea h1 {
		font-size: 28px;
	}
	#main_container_pc .main_rightarea .main_subtext {
		padding-right: 10px;
		font-size: 10px;
	}
}

@media screen and (max-width: 680px) {
	#main_container_pc .main_rightarea h1 {
		margin: 35px 0 20px 8px;
		font-size: 25px;
	}
	#main_container_pc .main_rightarea .main_subtext {
		padding-right: 10px;
		font-size: 10px;
	}
}

@media screen and (max-width: 560px) {
	#main_container_pc .main_rightarea h1 {
		margin: 30px 0 15px 8px;
		font-size: 20px;
	}
	#main_container_pc .main_rightarea .main_subtext {
		padding-right: 10px;
		font-size: 8px;
	}
}

@media screen and (max-width: 452px) {
	header {
		padding: 25px 0 0;
		background-size: cover;
		background-position: center top;
	}
	#main_container_sp {
		padding: 0 10px;
	}
	#main_container_sp h1 {
		margin: 0 0 20px;
		line-height: 1.4;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		text-shadow: 0 0 6px rgb(255, 255, 255, 1);
	}
	#main_container_sp h1 span {
		background-image: linear-gradient(
		rgba(0 0 0 / 0) 80%,
		#b5b5b5 80%
		);
	}
	#main_container_sp .main_sp_01 {
		display: flex;
		flex-flow: row nowrap;
	}
	#main_container_sp .main_sp_01 div {
		justify-content: space-between;
		width: 50%;
	}
	#main_container_sp .main_subtext {
		margin-bottom: 5px;
		padding-top: 6px;
		font-size: 8px;
		line-height: 1.5;
		text-align: right;
	}
	#main_container_sp .main_sp_02 ul {
		display: flex;
		flex-flow: row nowrap;
		margin-bottom: 15px;
	}
	#main_container_sp .main_sp_02 ul li {
		justify-content: space-between;
		width: 50%;
	}
	#main_container_sp .main_sp_02 ul li:first-child {
		padding-right: 4px;
	}
	#main_container_sp .main_sp_02 ul li:last-child {
		padding-left: 4px;
	}
	nav#mainmenu ul {
		padding: 26px 30px;
	}
	nav#mainmenu ul li,
	nav#mainmenu li a.img_container {
		width: 100%;
	}
	nav#mainmenu ul li {
		padding-bottom: 10px;
	}
	nav#mainmenu ul li a {
		padding: 0.4em 0.2em 0.1em 1.6em;
		font-size: 13px;
		text-decoration: none;
		background: url("../images/anchorkink_brown.jpg") no-repeat 0 50%;
	}
}




/* 03 Demerit
-----------------------------------------*/
#demerit_container {
	padding: 60px 0 0;
}
#demerit_container img {
	max-width: 100%;
	height: auto;
}
#demerit_container ul {
	width: 1200px;
	margin: 0 auto 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}
#demerit_container p {
	text-align: center;
	margin-bottom: -22px;
}

@media screen and (max-width: 1000px) {
	#demerit_container ul {
		width: auto;
		margin: 0 20px;
	}
	#demerit_container ul li {
		padding: 0 10px;
	}
}

@media screen and (max-width: 820px) {
	#demerit_container p {
		padding: 0 50px;
	}
}

@media screen and (max-width: 768px) {
	#demerit_container {
		padding: 30px 0 0;
	}
}
@media screen and (max-width: 680px) {
	#demerit_container p {
		margin-bottom: -15px;
	}
}
@media screen and (max-width: 560px) {
	#demerit_container p {
		margin-bottom: -12px;
	}
}
@media screen and (max-width: 425px) {
	#demerit_container p {
		padding: 0 20px;
		margin-bottom: -10px;
	}
}

/* 04 Intro
-----------------------------------------*/
#intro_container {
	padding: 80px 0;
}
#intro_container .intro_title {
	margin: 0 auto;
	text-align: center;
}
#intro_container .intro_title p {
	margin-bottom: 30px;
	font-size: 26px;
}
#intro_container .intro_title h2 {
	margin-bottom: 20px;
	font-size: 54px;
	font-weight: bold;
}
#intro_container .intro_title p span {
	font-size: 36px;
	background-image: linear-gradient(
	rgba(0 0 0 / 0) 80%,
	#ddd6d2 80%
	);
}
#intro_container .intro_title p.product_name {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 30px;
}
#intro_container .intro_title p.product_name::before,
#intro_container .intro_title p.product_name::after {
	content: '';
	width: 50px;
	height: 1px;
	background-color: #4f4a47;
}
#intro_container .intro_title p.product_name::before {
	margin-right: 0.8em;
}
#intro_container .intro_title p.product_name::after {
	margin-left: 0.8em;
}
#intro_container ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 1000px;
	margin: 0 auto;
}
#intro_container ul li {
	width: 33%;
	text-align: center;
}
#intro_container ul li img:first-child {
	margin-bottom: 30px;
}

@media screen and (max-width: 1000px) {
	#intro_container ul {
		width: 100%;
		padding: 0 10px;
	}
	#intro_container ul li {
		padding: 0 8px;
	}
	#intro_container ul li img {
		max-width: 100%;
		height: auto;
	}
	#intro_container .intro_title p {
		margin-bottom: 30px;
		font-size: 24px;
	}
	#intro_container .intro_title h2 {
		margin-bottom: 18px;
		font-size: 38px;
	}
	#intro_container .intro_title p span {
		font-size: 28px;
	}
}

@media screen and (max-width: 768px) {
	#intro_container .intro_title p {
		margin-bottom: 24px;
		font-size: 20px;
	}
	#intro_container .intro_title h2 {
		margin-bottom: 18px;
		font-size: 34px;
	}
	#intro_container .intro_title p span {
		font-size: 24px;
	}
}

@media screen and (max-width: 580px) {
	#intro_container {
		padding: 50px 0;
	}
	#intro_container .intro_title p {
		margin-bottom: 15px;
		font-size: 16px;
	}
	#intro_container .intro_title h2 {
		margin-bottom: 15px;
		font-size: 32px;
	}
	#intro_container .intro_title p span {
		font-size: 18px;
	}
}

@media screen and (max-width: 425px) {
	#intro_container .intro_title p {
		margin-bottom: 15px;
		font-size: 12px;
	}
	#intro_container .intro_title h2 {
		margin-bottom: 10px;
		font-size: 26px;
	}
	#intro_container .intro_title p span {
		font-size: 14px;
	}
	#intro_container ul {
		display: block;
	}
	#intro_container ul li {
		width: 100%;
	}
	#intro_container ul li span {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}
	#intro_container ul li:nth-child(2) span {
		flex-direction: row-reverse;
	}
	#intro_container ul li img {
		display: block;
		width: 50%;
		height: 50%;
	}
	#intro_container ul li img:first-child {
		margin-bottom: 5px;
	}
}



/* 05 Merit
-----------------------------------------*/
#merit_container {
	padding: 80px 20px;
}
#merit_container .intro_title {
	margin: 0 auto;
	text-align: center;
}
#merit_container .intro_title h2 {
	margin-bottom: 30px;
	font-size: 38px;
	line-height: 1.6;
}
#merit_container .intro_title h2 span {
	font-size: 44px;
	background-image: linear-gradient(
	rgba(0 0 0 / 0) 80%,
	#c9c3c0 80%
	);
}
#merit_container .merit_inner {
	width: 1100px;
	margin: 0 auto 50px;
	padding: 80px 0 50px;
	box-shadow: 0 0 13px #dedddc;
}
#merit_container .merit_inner h3 {
	margin-bottom: 40px;
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	line-height: 1.6;
}
#merit_container .merit_inner h3 span {
	display: block;
	padding-bottom: 45px;
	margin-bottom: 20px;
	background: url("../images/merit_subtitle_line.jpg") no-repeat center bottom;
	font-size: 28px;
	color: #7d716b;
}
#merit_container .merit_inner01bg {
	margin-bottom: 70px;
	padding: 0 50px;
	background: url("../images/merit01_bg.jpg") no-repeat top left;
}
#merit_container .merit_explaining {
	margin-bottom: 50px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}
#merit_container .merit_explaining img {
	max-width: 100%;
	height: auto;
}
#merit_container .merit_explaining p {
	width: 44%;
	line-height: 2;
}
#merit_container .merit_inner01bg .merit_explaining div {
	width: 55%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}
#merit_container .merit_explaining div p {
	width: 100%;
}
#merit_container .merit_explaining div p:first-child {
	margin-right: 10px;
}
#merit_container .txtC {
	line-height: 1.6;
}
#merit_container .merit_inner01bg ul {
	padding: 50px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}
#merit_container .merit_inner01bg ul li {
	text-align: center;
}
#merit_container .merit_inner01bg ul li img {
	max-width: 100%;
	height: auto;
}
#merit_container .merit_inner01bg p.sp {
	padding: 20px 0;
}
#merit_container .good_design {
	position: relative;
	padding: 40px 30px 34px;
	background-color: #efedec;
}
#merit_container .good_design .frame_top {
	position: absolute;
	width: 59px;
	height: 57px;
	top: -9px;
	left: -8px;
	background: url("../images/frame_top.png") no-repeat top left;
}
#merit_container .good_design .frame_bottom {
	position: absolute;
	width: 58px;
	height: 57px;
	bottom: -9px;
	right: -8px;
	background: url("../images/frame_bottom.png") no-repeat bottom left;
}
#merit_container .good_design h2 {
	position: relative;
	width: 500px;
	padding: 12px 20px 20px;
	margin: 0 auto 30px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	background-color: #ddd6d2;
}
#merit_container .good_design h2::before {
	content: '';
	position: absolute;
	top: -6px;
	left: -6px;
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	background-color: rgba(0 0 0 / 0);
	border: solid 2px #b0a6a1;
}
#merit_container .good_design .good_inner div {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;
}
#merit_container .good_design p.text {
	padding: 0 20px 20px;
	line-height: 2;
}
#merit_container .good_design .for_pc {
	display: block;
}
#merit_container .good_design .for_tablet {
	display: none;
}
#merit_container .good_design .for_sp {
	display: none;
}


#merit_container .merit_inner02bg {
	padding: 0 50px;
	background: url("../images/merit02_bg.jpg") no-repeat top right;
}
#merit_container .merit_inner02bg .merit_explaining p {
	width: 68%;
	margin-right: 2%;
}
#merit_container .merit_inner02bg .merit_explaining div {
	width: 30%;
}
#merit_container .merit_inner02bg .merit_explaining div p {
	width: 100%;
}
.merit02_share_pc {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
.merit02_share_sp {
	display: none;
}
.merit02_share_pc .txtC {
	width: 40%;
	margin: 30px 0;
	text-align: left;
}
.merit02_share_pc .txtC img {
	width: 90%;
}
.merit02_share_pc .merit02_detail {
	width: 60%;
	margin: 30px 0 50px;
}
.merit02_detail p,
.merit02_share_lead p {
	line-height: 1.6;
}
.merit02_share_pc .merit02_application {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	background: #605450;
}
.merit02_share_pc .merit02_application h4 {
	width: 25%;
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	background: #605450;
}
.merit02_share_pc .merit02_application div {
	width: 75%;
	padding: 20px 20px 20px 25px;
	border: solid 1px #c8c0bb;
	border-left: none;
	background: url("../images/rightarrow_brown.jpg") no-repeat 0 50% #fff;
}
.merit02_share_pc .merit02_application p {
	text-align: center;
}
.merit02_share_pc .merit02_application div p {
	font-size: 90%;
	margin-bottom: 10px;
}
.merit02_share_pc .merit02_application ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-around;
}
.merit02_share_pc .merit02_application ul li {
	padding: 0 5px;
}
.video_info {
	width: 1100px;
	margin: 0 auto 20px;
}

@media screen and (max-width: 1000px) {
	#merit_container img {
		max-width: 100%;
		height: auto;
	}
	#merit_container .merit_inner {
		width: 100%;
	}
	#merit_container .intro_title h2 {
		font-size: 26px;
	}
	#merit_container .intro_title h2 span {
		font-size: 35px;
	}
	#merit_container .merit_inner01bg,
	#merit_container .merit_inner02bg {
		background-size: 50%;
	}
	#merit_container .merit_inner01bg ul {
		padding: 30px 0;
	}
	#merit_container .merit_inner02bg .merit_explaining div {
		width: auto;
	}
	.video_info {
		width: 100%;
	}
	#merit_container .merit_inner02bg .merit_explaining p {
		width: 72%;
	}
	#merit_container .merit_inner02bg .merit_explaining div {
		width: 24%;
	}
}

@media screen and (max-width: 880px) {
	.merit02_share_pc {
		display: none;
	}
	.merit02_share_sp {
		display: block;
		padding: 0 0 30px;
	}
	.merit02_share_lead {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.merit02_share_lead p {
		width: 48%;
	}
	.merit02_share_sp .merit02_application {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		background: #605450;
	}
	.merit02_share_sp .merit02_application h4 {
		width: 25%;
		padding: 10px;
		color: #fff;
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
		background: #605450;
	}
	.merit02_share_sp .merit02_application div {
		width: 75%;
		padding: 30px 30px 30px 35px;
		text-align: center;
		border: solid 1px #c8c0bb;
		border-left: none;
		background: url("../images/rightarrow_brown.jpg") no-repeat 0 50% #fff;
	}
	.merit02_share_sp .merit02_application ul {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-around;
	}
}
@media screen and (max-width: 768px) {
	#merit_container {
		padding: 50px 30px;
	}
	#merit_container .merit_inner {
		padding-top: 50px;
	}
	#merit_container img {
		max-width: 100%;
		height: auto;
	}
	#merit_container .merit_inner01bg,
	#merit_container .merit_inner02bg {
		padding: 0 20px;
		background-size: 80%;
	}
	#merit_container .intro_title h2 {
		margin-bottom: 30px;
		font-size: 24px;
	}
	#merit_container .intro_title h2 span {
		font-size: 32px;
	}
	#merit_container .merit_inner h3 {
		font-size: 22px;
	}
	#merit_container .merit_inner h3 span {
		padding-bottom: 40px;
		margin-bottom: 20px;
		background: url("../images/merit_subtitle_line.jpg") no-repeat center bottom;
		font-size: 16px;
		color: #7d716b;
	}
	#merit_container .merit_explaining p {
		margin-right: 10px;
	}
	#merit_container .good_design .good_inner div {
		display: block;
	}
	#merit_container .good_design p.text {
		padding: 10px 0 0 0;		
	}
	#merit_container .good_design .for_pc {
		display: none;
	}
	#merit_container .good_design .for_sp {
		display: block;
		text-align: center;
	}
	#merit_container .good_design .for_sp img {
		margin: 0 20px 20px;
		width: 30%;
	}
	#merit_container .good_design h2 {
		width: 70%;
	}
	.merit02_share_sp .merit02_application h4 {
		font-size: 70%;
	}
	.merit02_share_sp .merit02_application div {
		padding: 30px 15px 15px 20px;
	}
	.merit02_share_sp .merit02_application div p {
		font-size: 80%;
		text-align: center;
	}
	.merit02_share_sp .merit02_application ul li {
		padding: 0 5px;
	}
}

@media screen and (max-width: 680px) {
	#merit_container .merit_explaining {
		display: block;
		padding: 20px;
	}
	#merit_container .merit_inner h3 {
		margin-bottom: 20px;
	}
	#merit_container .merit_explaining div {
		width: 100%;
	}
	#merit_container .merit_explaining p,
	#merit_container .merit_explaining div p {
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
		font-size: 97%;
		text-align: center;
		line-height: 1.6;
		letter-spacing: 0;
	}
	#merit_container .merit_explaining div p:first-child {
		margin-bottom: 10px;
	}
	#merit_container .merit_inner02bg .merit_explaining p {
		width: 100%;
		margin-right: 0;
	}
	#merit_container .merit_inner01bg .merit_explaining div {
		width: 100%;
	}
	#merit_container .good_design p.text{
		line-height: 1.6;
		font-size: 90%;
	}
	#merit_container .merit_inner02bg .merit_explaining div {
		width: 100%;
	}
}
@media screen and (max-width: 580px) {
	#merit_container {
		padding: 50px 20px;
	}
	#merit_container .merit_inner {
		padding: 50px 0 20px;
	}
	.merit_inner01bg {
		background-size: 60%;
	}
	#merit_container .intro_title h2 {
		margin-bottom: 30px;
		font-size: 20px;
	}
	#merit_container .intro_title h2 span {
		font-size: 26px;
	}
	#merit_container .merit_explaining {
		margin: 0 0 36px;
		padding: 0;
		display: block;
	}
	#merit_container .good_design h2 {
		width: 95%;
		margin-bottom: 20px;
		font-size: 95%;
	}
	.merit02_share_sp .merit02_application {
		display: block;
	}
	.merit02_share_lead p {
		font-size: 90%;
	}
	.merit02_share_sp .merit02_application h4,
	.merit02_share_sp .merit02_application div {
		width: 100%;
	}
	.merit02_share_sp .merit02_application div {
		border-left: solid 1px #c8c0bb;
		border-top: none;
		background: url(../images/bottomarrow_brown.png) no-repeat 50% 0 #fff;
	}
	#merit_container .merit_inner02bg .merit_explaining div {
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 425px) {
	#merit_container .good_design p:nth-child(2){
		padding: 0;
	}
	#merit_container .merit_inner01bg, #merit_container .merit_inner02bg {
		padding: 0 20px;
	}
	.merit02_share_sp .merit02_application div {
		padding: 20px 10px 10px;
	}
}

/* 06 Function
-----------------------------------------*/
#function_container {
	width: 1100px;
	margin:  0 auto;
	padding: 40px 0 30px;
}
#function_container p {
	margin-bottom: 50px;
	text-align: center;
}
#function_container p img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 1000px) {
	#function_container {
		width: 100%;
		padding: 30px;
	}
}
@media screen and (max-width: 580px) {
	#function_container {
		padding: 20px;
	}
}


/* 07 How to Use
-----------------------------------------*/
#howtouse_container {
	margin: 0 auto;
	padding: 30px 0 50px;
}
#howtouse_container .txtC {
	margin-bottom: 30px;
	text-align: center;
}
#howtouse_container .howtouse_video {
	width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
#howtouse_container .howtouse_video .video_left,
#howtouse_container .howtouse_video .video_right {
	width: 48%;
}
#howtouse_container ul {
	width: 1100px;
	margin: 20px auto 60px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
#howtouse_container ul li img {
	max-width: 100%;
	height: auto;
}


@media only screen and (max-width: 1000px) {
	#howtouse_container {
		width: auto;
		padding: 30px 30px 50px;
	}
	#howtouse_container .howtouse_video {
		width: 100%;
	}
	#howtouse_container .howtouse_video .video_left,
	#howtouse_container .howtouse_video .video_right {
		width: 48%;
	}
	#howtouse_container .iframe-wrap-full {
		width: 100%;
	}
	#howtouse_container ul {
		width: 100%;
	}
	.howtouse_video .linkArw {
		font-size: 90%;
	}
}
@media only screen and (max-width: 580px) {
	#howtouse_container .howtouse_video {
		display: block;
	}
	#howtouse_container .howtouse_video .video_left,
	#howtouse_container .howtouse_video .video_right {
		width: 100%;
	}
}

/* 08 Purchase
-----------------------------------------*/
#buy_container {
	padding-top: 30px;
	margin-bottom: 50px;
}
#buy_container .buy_detail_wrapper {
	width: 1100px;
	padding: 6px;
	margin: 0 auto 80px;
	background: #ecebea;
}
#buy_container .buy_detail_wrapper .buy_inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
	padding: 30px;
	border: solid 1px #fff;
}
#buy_container .buy_detail_wrapper .buy_inner img  {
	max-width: 100%;
	height: auto;
}
.buy_product_image {
	width: 47%;
}
#buy_container .buy_title p,
#buy_container .buy_title h3 {
	text-align: center;
}
#buy_container .buy_title p span {
	background-image: linear-gradient(
	rgba(0 0 0 / 0) 70%,
	#c9c3c0 70%
	);
}
#buy_container .buy_title p.buy_lead {
	margin-bottom: 15px;
	font-size: 18px;
}
#buy_container .buy_title h3 {
	margin-bottom: 5px;
	font-size: 28px;
	font-weight: bold;
}
#buy_container .buy_title p.product_name {
	margin-bottom: 15px;
	font-size: 24px;
}
#buy_container .buy_title p.linkBtn {
	font-size: 24px;
	background: url("../images/btn_bg.png") no-repeat 40% 50%;
}
#buy_container .buy_title p.linkBtn a {
	display: block;
	padding: 20px 45px 20px 15px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	background: url("../images/icon_cart.jpg") no-repeat 95% 50%;
}
#buy_container .buy_title p.linkBtn:hover {
	opacity: .9;
	transition: .2s;
}

@media only screen and (max-width: 1000px) {
	#buy_container .buy_detail_wrapper {
		width: auto;
		margin: 0 30px;
	}
	#buy_container .buy_title {
		margin-left: 20px;
	}
}
@media only screen and (max-width: 880px) {
	#buy_container .buy_detail_wrapper {
		margin: 0 20px 50px;
	}
	#buy_container .buy_detail_wrapper .buy_inner {
		display: block;
	}
	.buy_product_image {
		width: 100%;
		margin-bottom: 30px;
		text-align: center;
	}
	#buy_container .buy_title {
		margin-left: 0;
	}
}
@media only screen and (max-width: 680px) {
	#buy_container {
		padding-top: 20px;
	}
	#buy_container .buy_title p.linkBtn a {
		font-size: 16px;
	}
}
@media only screen and (max-width: 580px) {
	#buy_container .buy_detail_wrapper {
		margin: 0 20px;
	}
	#buy_container .buy_detail_wrapper .buy_inner {
		padding: 20px 20px 26px;
	}
	#buy_container .buy_title p.buy_lead {
		font-size: 16px;
		line-height: 1.6;
	}
	#buy_container .buy_title p.linkBtn a {
		font-size: 14px;
		background: url("../images/icon_cart.jpg") no-repeat 92% 50%;
		background-size: 10%;
	}
	#buy_container .buy_title h3 {
		font-size: 24px;
	}
}

/* 09 Company
-----------------------------------------*/
#company_container {
	width: 1100px;
	margin: 0 auto 60px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
.company_person {
	width: 27%;
	margin-bottom: 30px;
}
.company_detail {
	width: 73%;
	padding: 30px 0;
	background: url("../img/top/slashline_gray.png") repeat-x 0 0;
}
.company_detail div {
	margin-bottom: 30px;
	padding-bottom: 24px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	background: url("../img/top/slashline_gray.png") repeat-x 0 100%;
}
.company_detail div p:nth-child(2) {
	margin-left: 20px;
	line-height: 1.6;
}
.company_lead {
	margin-bottom: 30px;
	padding: 0 30px;
	line-height: 1.6;
}
.company_detail ul {
	margin-bottom: 30px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
.company_detail ul li {
	text-align: center;
}
#company_container p img,
#company_container ul img {
	max-width: 100%;
	height: auto;
}
.company_3point_sp {
	display: none;
}
	
@media only screen and (max-width: 1000px) {
	#company_container {
		width: auto;
		margin: 0 30px;
		display: flex;
		flex-flow: row nowrap;
	}
}
@media only screen and (max-width: 880px) {
	#company_container {
		margin: 0 20px;
	}
}
@media only screen and (max-width: 768px) {
	.company_detail div p:nth-child(2) {
		font-size: 90%;
	}
	.company_detail div {
		display: block;
	}
	.company_detail div p:nth-child(1) {
		margin: 0 0 15px;
		text-align: center;
	}
	.company_detail div p:nth-child(2) {
		margin: 0;
		text-align: center;
	}
}

@media only screen and (max-width: 580px) {
	#company_container {
		width: auto;
		margin: 0 20px;
	}
	.company_detail {
		padding-top: 17px;
	}
	.company_detail div {
		padding-bottom: 17px;
		margin-bottom: 10px;
	}
	.company_lead {
		padding: 0;
		font-size: 72%;
	}
	.company_detail ul {
		display: block;
	}
	.company_detail ul li {
		margin-bottom: 20px;
	}
}
@media only screen and (max-width: 580px) {
	.company_3point_pc {
		display: none;
	}
	.company_3point_sp {
		display: block;
		margin: 0 20px;
	}
	.company_3point_sp img {
		max-width: 100%;
		height: auto;
	}
}


/* 10 Contact
-----------------------------------------*/
#contact_container {
	padding: 50px 0;
	background: #ecebea;
}
#contact_container h4 {
	margin-bottom: 20px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
}
#contact_container p {
	margin-bottom: 20px;
	padding: 0 20px;
	text-align: center;
	line-height: 1.6;
}
#contact_container p.LinkBtn {
	width: 40%;
	margin: 0 auto;
	text-align: center;
}
#contact_container p.LinkBtn a {
	display: block;
	padding: 26px 20px 26px 10px;
	color: #4f4a47;
	font-size: 18px;
	background: url("../img/common/icon_blank.webp") no-repeat 94% 50%;
	border: solid 1px #4f4a47;
}
#contact_container p.LinkBtn a:hover {
	background: url("../img/common/icon_blank.webp") no-repeat 94% 50% #f6f6f6;
}

@media only screen and (max-width: 880px) {
	#contact_container p.LinkBtn {
		width: 70%;
	}
	#contact_container p.LinkBtn a {
		font-size: 16px;
	}
}

@media only screen and (max-width: 580px) {
	#contact_container {
		padding: 34px 0;
	}
	#contact_container h4 {
		margin-bottom: 15px;
		font-size: 18px;
	}
	#contact_container p {
		font-size: 12px;
	}
	#contact_container p.LinkBtn {
		width: auto;
		margin: 0 30px;
	}
	.company_lead {
		margin-bottom: 20px;
	}
}


/* 10 Footer
-----------------------------------------*/
footer {
	padding: 20px 0 0;
	background: #605450;
}
footer nav {
	width: 1200px;
	margin: 0 auto;
}
footer nav ul {
	margin-bottom: 20px;
	padding-bottom: 20px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	border-bottom: solid 1px #9a9391;

}
footer nav ul li {
	padding: 0 15px;
	border-right: solid 1px #b5b0af;
}
footer nav ul li:last-child {
	border-right: 0;
}
footer nav ul li a {
	color: #e1e1e1;
	font-size: 12px;
	text-decoration: none;
}
footer nav ul li a:hover {
	text-decoration: none;
}
footer div {
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 20px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
}
footer div p {
	color: #fff;
	font-size: 11px;
	text-align: right;
}

@media only screen and (max-width: 1000px) {
	footer nav,
	footer div {
		width: 90%;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 680px) {
	footer nav ul {
		flex-flow: row wrap;
	}
	footer nav ul li {
		margin-bottom: 5px;
		padding: 0 8px;
		text-align: center;
	}
}
@media only screen and (max-width: 580px) {
	footer div {
		display: block;
	}
	footer div p {
		width: 100%;
		text-align: center;
	}
	footer div p:nth-child(1) img {
		width: 40%;
	}
	footer div p:nth-child(1) {
		margin-bottom: 20px;
	}
	footer div p {
		font-size: 10px;
	}
}

/* Common
-----------------------------------------*/
.bg_bage_noarrow {
	background: #ecebea;
}
.bg_bage_arrow {
	background: url("../images/downarrow_white.jpg") no-repeat 50% 0 #ecebea;
	background-size: 93px;
}
.bg_white_noarrow {
	background: #fff;
}
.bg_white_arrow {
	background: url("../images/downarrow_bage.jpg") no-repeat 50% 0 #fff;
	background-size: 93px;
}

.pc {
	display: block;
}
.sp {
	display: none !important;
}
.txtC {
	text-align: center;
}

h2.overlap_bage,
h2.overlap_white {
	position: relative;
	padding-top: 65px;
	padding-bottom: 30px;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}
h2.overlap_bage span,
h2.overlap_white span {
	position: relative;
	z-index: 2;
}
h2.overlap_bage::before,
h2.overlap_white::before {
	content: attr(data-en);
	position: absolute;
	top: 18%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 54px;
	font-family: Roboto,"Noto Sans JP","游ゴシック Medium","游ゴシック体","Yu Gothic Medium",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	z-index: 1;
}
h2.overlap_bage::before {
	color: rgba(255 255 255 / 1);
}
h2.overlap_white::before {
	color: rgba(239 238 238 / 1);
}

.title_h4 {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}
.title_h4 p {
	margin-top: -5px;
}
.title_h4 h4 {
	margin-bottom: 30px;
	padding: 0 0 10px;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	background-image: repeating-linear-gradient(
		-45deg,
		#928883 0px, #928883 2px,
		rgba(0 0 0 / 0) 0%, rgba(0 0 0 / 0) 50%
	);
	background-size: 6px 6px;
	background-repeat: repeat-x;
	background-position: center bottom;
}
.title_h4 img {
	width: 50px;
	height: auto;
	margin-right: 10px;
	margin-top: -5px;
}
.nomar img {
	margin-top: 0;
}


.linkArw a {
	display: inline-block;
	margin: 0 0 20px;
	padding: 0.2em 0 0.2em 25px;
	background: url("../images/linkicon_brown.png") no-repeat 0 50%;
	text-decoration: none;
	text-align: center;
}
.linkArw a:hover {
	text-decoration: underline;
}

/* youTube */
.iframe-wrap {
	width: 560px;
	margin: 20px auto;
}
.iframe-wrap-full {
	width: 560px;
	margin: 0 auto 10px;
}


/* Page Top */
.pagetop {
	height: 60px;
	width: 60px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: #605450;
	border-radius: 50%;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 2;
	cursor: pointer;
	border: solid 1px #ecebea;
	opacity: .8;
}
.pagetop:hover {
	color: #605450;
	background: #fff;
	border: solid 1px #ecebea;
}
.pagetop__arrow {
	display: block;
	height: 13px;
	width: 13px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: translateY(20%) rotate(-45deg);
}
.pagetop:hover .pagetop__arrow {
	border-top: 3px solid #605450;
	border-right: 3px solid #605450;
}

@media only screen and (max-width: 1100px) {
	.iframe-wrap,
	.iframe-wrap-full {
		width: 100%;
		padding-bottom: 56.25%;
		height: 0px;
		position: relative;
	}

	.iframe-wrap iframe,
	.iframe-wrap-full iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
@media only screen and (max-width: 768px) {
	h2.overlap_bage::before,
	h2.overlap_white::before {
		font-size: 50px;
	}
}

@media screen and (max-width: 680px) {
	h2.overlap_bage,
	h2.overlap_white {
		padding-top: 55px;
		padding-bottom: 30px;
		font-size: 30px;
	}
	h2.overlap_bage::before,
	h2.overlap_white::before {
		top: 26%;
		font-size: 40px;
	}
	.title_h4 {
		margin: 0 20px;
	}
	.title_h4 h4 {
		margin-bottom: 20px;
		font-size: 20px;
	}
}
@media screen and (max-width: 580px) {
	.bg_bage_arrow {
		background-size: 50px;
	}
	.bg_white_arrow {
		background-size: 50px;
	}
	.hidden_580 {
		display: none;
	}
	h2.overlap_bage::before,
	h2.overlap_white::before {
		top: 28%;
		font-size: 26px;
	}
	.title_h4 {
		margin: 0 auto;
	}
}
@media screen and (max-width: 452px) {
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
	h2.overlap_bage,
	h2.overlap_white {
		padding-top: 40px;
		padding-bottom: 20px;
		font-size: 24px;
	}
	h2.overlap_bage::before,
	h2.overlap_white::before {
		font-size: 26px;
	}
	.title_h4 h4 {
		font-size: 16px;
	}
}

}/* legacy-section */