@charset "euc-jp";

/*----------------------------cmn-----------------------------------*/
/* 
HTML 5 Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Editor:Ricochets
*/

/* Material iconsを利用する */
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* 推奨サイズ */
	display: inline-flex;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	/* WebKitブラウザサポート */
	-webkit-font-smoothing: antialiased;
	/* Chrome、Safariサポート */
	text-rendering: optimizeLegibility;
	/* Firefoxサポート */
	-moz-osx-font-smoothing: grayscale;
	/* IEサポート */
	font-feature-settings: 'liga';
}

/*--------------base--------------*/

* {
	margin: 0;
	padding: 0;
	list-style:none;
	outline:0;
	vertical-align: baseline;
	background:transparent;
	text-decoration: none;
	box-sizing: border-box;
}
i{
	font-style: normal;
}
img,
a img {
	border: 0;
	vertical-align: top;
}

article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section {
	display:block;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
iframe{
	display: block;
}

/*--------------user--------------*/

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

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

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

/*--------------cmn--------------*/
ul,
ol {
  margin: 0 0 0px 0px;
  padding: 0;
}
html{
	font-size: 62.5%;
}
body {
	margin: 0;
	padding: 0;
	color: #282222;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.02rem;
	-webkit-text-size-adjust: 100%;
	/*従来*/
	font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;
	/*明朝*/
	font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	/*ゴシック*/
	font-family: "Noto Sans JP","Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
/*chrome, opera, Edge(Blink) 游明朝使用時は有効に*/
/*
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
   body{
        font-weight: 400;
    }
}
*/

@media screen and (max-width: 850px){
	html{
		font-size: 55%;
	}
	body{
		letter-spacing: 0;
	}
}

img{
	max-width: 100%;
}


/*----------------------------base-----------------------------------*/

img[height]{
	height: auto;
}


/*----------------------------link etc--------------------------------*/

a,
input,
button{
	outline: 0;
}
input::-moz-focus-inner,
button::-moz-focus-inner{
	border: 0;
}

a:link, a:visited{
	text-decoration: none;
	color: #282222;
	transition: 0.3s ease-in-out;
}
main a:link, main a:visited{
	text-decoration: none;
	color: #666;
	transition: 0.3s ease-in-out;
}

a:hover,
main a:hover{
	color: #ff9800;

}

dt,dd {
    line-height: inherit
}
dd{
	margin-left: 0px;
}
/*----------------------------header-----------------------------------*/

header{
	position: relative;
	z-index: 5;
	margin: 0 auto;
	border-bottom:1px solid #cccccc;
}

header .wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 20px;
}
header h1{
	width: 290px;
}
header h1 a,
header h1 img{
	display: block;
}
header .inner{
	width: calc(100% - 300px);
}
header .hn{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	text-align: right;
}
header .hn li a{
	font-size:1.4rem;
	margin-left:30px;
}
header .material-icons{
	margin-right:5px;
}
header nav{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}
header .inner nav{
	position: fixed;
	top: 0;
	right: -300px;
	width: 290px;
	height: 100vh;
	z-index: 9;
	transition: 0.3s ease-in-out;
	opacity: 0;
	background: rgba(255,255,255,0.9);
	padding: 30px 10px 10px;
	display: block;
}
header nav ul{
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	width: 95%;
}
#bm{
	display: flex;
	position: fixed;
	top: 20px;
	right: 10px;
	height: 44px;
	width: 44px;
	z-index: 10;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}
#bm i{
	display: block;
	width: 30px;
	height: 2px;
	background: #ff9800;
	position: relative;
	transition: 0.3s ease-in-out;
}
#bm i:before,
#bm i:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #ff9800;
	position: absolute;
	top: -10px;
	left: 0;
	transition: 0.3s ease-in-out;
}
#bm i:after{
	top: 10px;
}
.open #bm i{
	background: rgba(154,27,26,0);
}
.open #bm i:before,
.open #bm i:after{
	top: 0;
	transform: rotate(225deg);
}
.open #bm i:after{
	transform: rotate(-225deg);
}
.scrolled #bm{
	top: 10px;
}

.open 	header .inner nav{
	right: 0;
	opacity: 1;
}
header .inner nav ul{
	padding: 0;
	display: block;
	border: none;
	max-width: 220px;
	margin: 0 auto;
}
header .inner nav ul li{
	display: block;
}

header .inner nav a{
	display: block;
	width: 100%;
	text-align: left;
	font-size: 1.6rem;
	padding: 8px 0 !important;
	margin: 0 auto;
}
header .inner nav .button,
header .inner nav .button2{
	margin-top:10px;
}
header li.sns-insta,
header li.sns-youtube{
  position:relative;
  padding-left:30px;
}
header li.sns-insta:before{
	height:24px;
	width:24px;
	content:"";
	background:url(https://file003.shop-pro.jp/PA01452/891/images/icon-insta2.png);
	background-repeat: no-repeat;
	position:absolute;
	left:0;
	top:calc(50% - 12px);
	background-size: cover;
}
header li.sns-youtube:before{
	height:24px;
	width:24px;
	content:"";
	background:url(https://file003.shop-pro.jp/PA01452/891/images/icon-youtube2.png);
	background-repeat: no-repeat;
	position:absolute;
	left:0;
	top:calc(50% - 12px);
	background-size: cover;
}
#shade{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 4;
	pointer-events: none;
	transition: 0.3s ease-in-out;
	display: none;
}
.open #shade{
	opacity: 1;
	pointer-events: auto;
	display: block;
}


@media screen and (max-width: 900px){
	header .wrapper{
		padding:10px 10px 10px 10px;
	}
	header h1{
		width: 200px;
	}
	header .inner{
		width: calc(100% - 210px);
	}
	header .hn{
		margin-bottom: 0;
	}
}
@media screen and (max-width: 700px){
	header h1{
		width: 60%;
	}
	header .hn{
		display: none;
	}
}

@media screen and (max-width: 500px){
	#bm{
		top: 3vw;
	}
}


/*----------------------------pan--------------------------------*/
#pan{
	background:#faf9f7;
	font-size:1.2rem;
}

#pan ul li{
	padding:5px 0;
	display: inline-flex;
	vertical-align: middle;
}
#pan ul li a{
	padding:0 5px;
}
/*----------------------------main--------------------------------*/

.al,
.al *{
	text-align: left;
}
.ac,
.ac *{
	text-align: center;
}
.ar,
.ar *{
	text-align: right;
}

.button,
.button2,
.button3{
	text-align: center;
	margin-top:30px;
}
.button a,
.button span{
	display: inline-block;
	text-align: center!important;
	color: #fff !important;
	background: #ff9800;
	border-radius: 4px;
	padding: 15px 40px;
	width:auto;
	max-width:500px;
	min-width: 230px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	font-size: 1.8rem;
}
.button a:hover,
.button span:hover{
	background: #ed1c23;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.button2 a{
	display: inline-block;
	text-align: center!important;
	color: #fff !important;
	background: #282222;
	border-radius: 4px;
	padding: 15px 40px;
	width:auto;
	max-width:500px;
	min-width: 230px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	font-size: 1.8rem;
}
.button3 a{
	display: inline-block;
	text-align: center!important;
	color: #fff !important;
	background: #282222;
	border-radius: 4px;
	padding: 15px 40px;
	width:auto;
	max-width:500px;
	min-width: 230px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	font-size: 1.4rem;
}
.button a:hover,
.button2 a:hover,
.button3 a:hover{
	background: #ed1c23;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

hr{
	border: none;
	border-bottom: 1px dashed #c4b6a1;
	margin: 0;
	display: block;
}

/*-------*/
main p{
	font-size:1.8rem;
}

@media screen and (max-width: 700px){
	main p{
	font-size: 3.0vw;
	}

}
@media screen and (max-width: 500px){
	main p{
	font-size: 4.0vw;
	}

}

/*----------------------------footer--------------------------------*/
#pagetop{
	background:#faf9f7;
}
#pagetop a {
  display: block;
  padding: 10px;
  text-align: center;
  color: #999!important;
}
/*----------------------------footer--------------------------------*/
footer{
	position:static;
	background:#282222;
	color:#fff;
	padding:5vh 0;
}
footer a{
	color: #fff !important;
}
footer a:hover{
	opacity: 0.5;
}
footer .wrapper{
	display:flex;
	justify-content: space-between;
}
footer nav{
	width:auto;
}
footer nav ul{
	display:flex;
	flex-wrap:wrap;
	font-size:1.5rem;
}
footer  li{
	width:25%;
	padding:8px 0;
}
footer li.sns-insta,
footer li.sns-youtube{
  position:relative;
  padding-left:20px;
}
footer li.sns-insta:before{
	height:15px;
	width:15px;
	content:"";
	background:url(https://file003.shop-pro.jp/PA01452/891/images/icon-insta.png);
	background-repeat: no-repeat;
	position:absolute;
	left:0;
	top:calc(50% - 7.5px);
	background-size: cover;
}
footer li.sns-youtube:before{
	height:15px;
	width:15px;
	content:"";
	background:url(https://file003.shop-pro.jp/PA01452/891/images/icon-youtube.png);
	background-repeat: no-repeat;
	position:absolute;
	left:0;
	top:calc(50% - 7.5px);
	background-size: cover;
}
footer #cp{
	font-size: 1.1rem;
	text-align: right;
	width:200px;
	white-space: nowrap;
}
footer #cp img{
	display:block;
	padding-bottom:5px;
	margin-left:auto;
}
@media screen and (max-width: 700px){
	footer .wrapper{
	flex-direction: column;
	}
	footer nav{
	width:100%;
	}
	footer nav ul{
	font-size:3.0vw;
	}	
	footer  li{
	width:48%;
	}
	footer #cp{
	font-size: 3.0vw;
	text-align: center;
	width:100%;
	white-space: nowrap;
	}
	footer #cp img{
	margin-left:auto;
	margin-right:auto;
	max-width:100px;
	}
}

@media screen and (max-width: 500px){
	footer{
		padding:3vh 0 2vh 0;
	}
	footer nav ul:first-child{
		display:none;
	}
	footer nav ul{
	font-size:3.0vw;
	 display: flex;
	}
	footer #cp{
	margin-top:10px;
	}
	footer #cp img{
	max-width:70px;
	}
}



/*----------------------------layout parts--------------------------------*/
.wrapper{
	width:100%;
	max-width:1400px;
	margin:auto;
	padding:0 20px;
}

.section{
	padding:7vh 0;
}

.flex1{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 50px;
}
.flex1 .c1{
	width: 42%;
}
.flex1 .c2{
	width: 55%;
}
.flex1:nth-of-type(2n-1) .c1{
	order: 2;
}
.flex1:nth-of-type(2n-1) .c2{
	order: 1;
}
.flex1:last-child{
	margin-bottom: 0;
}


.flex1 > figure{
	width: 55%;
	
}
.flex1 > div{
	width: 42%;
}
.flex1:nth-of-type(2n-1) > figure{
	order: 2;
}
.flex1:nth-of-type(2n-1) > div{
	order: 1;
	margin-bottom: 20px;
}
.flex1:last-child{
	margin-bottom: 0;
}
.flex1 > figure{
	position: relative;
}
.flex1 > figure:before{
	content:"";
    display: block;
	overflow: hidden;
	padding-top: 62%; /* 比率 */
}
.flex1 > figure img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
}
.flex{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	width: 100%;
}

@media screen and (max-width: 1200px){
	
}
@media screen and (max-width: 700px){
	.flex1 .c1{
		order: 1 !important;
		width: 100%!important;
		margin-bottom: 20px;
	}
	.flex1 .c2{
		order: 2 !important;
		width: 100%!important;
	}
		.flex1  > figure{
		order: 1 !important;
		width: 100%!important;
		margin-bottom: 20px;
	}
	.flex1 > div{
		order: 2 !important;
		width: 100%!important;
	}
	.flex  > *{
		width: 100%!important;
		margin:0;
	}
	.flex > figure img{
		margin:auto;
		display:block;
	}
}
/*----------#temp----------*/
#temp{
	padding-top:40px;
	padding-bottom:40px;
}
#temp p{
	font-size:1.8rem;
}
#temp h2{
	text-align: left;
	font-size: 2.6rem;
	line-height: 1.2;
	padding-bottom:20px;
	position: relative;
	margin-bottom:30px
}

#temp h2:after{
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	background: #ff9800;
	position: absolute;
	bottom: 0;
	left: 0;
}
#temp h3{
	text-align: left;
	font-size: 2.0rem;
	line-height: 1.2;
	position: relative;
	margin-bottom:10px;
	margin-top:10px;
}
#temp h4{
	text-align: left;
	font-size:1.8rem;
	line-height: 1.2;
	margin-bottom:5px;
	margin-top:10px;
}
#temp dt,
#temp dd{
	margin-left: 0px!important;
}
#temp>section{
	padding-bottom:40px;
	border-bottom:1px solid #eaeaea;
	margin-bottom:40px;
}
ul.ul{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap:wrap;
}
ul.ul li{
	max-width:25%;
}
ul.ul li a{
	font-size:1.8rem;
	text-align: center;
	display: inline-block;
	text-align: center!important;
	color: #fff !important;
	background: #ff9800;
	border-radius: 4px;
	padding: 15px 40px;
	width:auto;
	max-width:400px;
	letter-spacing: 0.1rem;
	transition: 0.2s;
	font-size: 1.8rem;
	margin:10px;
}

ul.ul li a:hover{
	background: #ed1c23;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}


@media screen and (max-width: 1000px){
	ul.ul li{
	max-width:33%;
	}
	ul.ul li a{
	padding: 15px 20px;
	}
}
@media screen and (max-width: 700px){
	#temp{
	padding-top:20px;
	padding-bottom:20px;
	}
	#temp h2{
	font-size: 5vw;
	margin-bottom:15px;
	}
	#temp h3{
	font-size: 4.0vw;
	margin-bottom: 5px;
	margin-top: 5px;
	}
	#temp h4{
	font-size: 4.0vw;
	font-size:1.8rem;
	line-height: 1.2;
	margin-bottom:5px;
	margin-top:5px;
}
	#temp p{
	font-size: 4.0vw;
	}
	#temp>section{
	padding-bottom:15px;
	border-bottom:1px solid #eaeaea;
	margin-bottom:15px;
	}
	ul.ul li{
	max-width:50%;
	}
	ul.ul li a{
	padding: 10px 10px;
	margin:5px;
	font-size: 3.5vw;
	}
}
@media screen and (max-width: 440px){
	ul.ul{
	flex-direction: column;
	justify-content:flex-start;
	flex-wrap:wrap;
}
	ul.ul li{
	max-width:none;
	width:100%;
	}
	ul.ul li a{
	padding: 10px 10px;
	width:100%;
	margin:5px 0;
	font-size: 3.5vw;
	}
}


/*---------商品共通---------*/
#product >div.wrapper{
	padding-top:40px;
	padding-bottom:40px;
}

#product .sort{
	text-align: right;
	margin-bottom:15px;
}
#product h2{
	text-align: left;
	font-size: 2.6rem;
	line-height: 1.4;
	padding-bottom:20px;
	position: relative;
	margin-bottom:30px
}

#product h2:after{
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	background: #ff9800;
	position: absolute;
	bottom: 0;
	left: 0;
}

@media screen and (max-width: 700px){
	#product >div.wrapper{
	padding-top:20px;
	padding-bottom:20px;
	}	
	#product h2{
	font-size: 5vw;
	margin-bottom:15px;
	}
}

/*簡易説明*/
.s_expl{
	font-size:1.6rem;
}

/*商品一覧*/
.itemlist h2{
	font-size:2.6rem;
	text-align: center;
	position:relative;
	font-weight: 700;
	line-height: 1.6;
	padding-bottom:10px;
	margin-bottom:20px;
}
.itemlist h2 span{
	color:#ff9800;
	font-size:1.8rem;
	display:block;
}
.itemlist h2:after{
	width:40px;
	height:3px;
	background:#ff9800;
	content:"";
	bottom:0;
	left:calc(50% - 20px);
	position:absolute;
}
.itemlist .flex{
	align-items: stretch;
	justify-content:flex-start;
}
.itemlist article{
	width:30%;
	border:1px solid #cccccc;
	background:#fff;
	margin-right:5%;
		margin-bottom:40px;
}
.itemlist article:nth-of-type(3n){
	width:30%;
	margin-right:0%;
}
.itemlist figure{
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding-top: 55%; /* 比率 */
}
.itemlist figure img{
	position: absolute;
	display: block;
	max-width: none;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
	transition: 0.5s;
	height: 100%;
}
.itemlist  a:hover figure img{
	opacity: 0.5;
}

.itemlist article div{
	padding:10px 15px;

	position:relative;
}
.itemlist .product_name{
	font-weight: 700;
	text-align: center;
	font-size:1.8rem;
    line-height: 1.6;
}
a .product_name{
	color:#282222;
}
.itemlist .model{
	text-align: center;
	font-size:1.4rem;
    margin-top:5px;
}
.itemlist .product_price{
	font-weight: 700;
	text-align: center;
	font-size:1.6rem;
    line-height: 1.6;
}
.itemlist .simple_explain{
	font-size:1.4rem;
}
.itemlist .favorite{
	position: absolute;
	right:15px;
	bottom:0;
}
@media screen and (max-width: 1000px){

}
@media screen and (max-width: 700px){
	.itemlist article{

	margin-right:0;
	}
	.itemlist article:last-child{
	margin-bottom:0px;
	}
	.itemlist h2{
	font-size:4.5vw;
	}
	.itemlist h2 span{
	font-size:4.0vw;
	}
	.itemlist h2:after{
	width:30px;
	left:calc(50% - 15px);
	position:absolute;
}
}




/*pager*/
	.c-pager {
	margin-top:30px;
	text-align: center;
	font-size:1.6rem;
}

.c-pager__total {
  margin-bottom: 20px;
}

.c-pager__total span {
  font-size: 2.2rem;
  margin: 0 8px;
}

.c-pager__list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.c-pager__list-item {
  display: inline-block;
  margin: 0 5px;
  margin-bottom: 10px;
  text-align: center;
}
@media screen and (max-width: 700px){
	.c-pager {
	font-size:4.0vw;
	}
	.c-pager__total span {
	font-size: 5.0vw;
	margin: 0 8px;
}
}
/*お気に入り*/
button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}
button.favorite-button {
    padding: 0;
    cursor: pointer;
    transition: .2s;
    color: #999;
    border: 0;
    outline: none;
    background: transparent;
}
button.favorite-button.fav-items {
  color: #ff7373;
}


/*---------フリーページ---------*/
/*concept*/
#concept{
	text-align: center;
	position:relative;
	background:url(https://file003.shop-pro.jp/PA01452/891/images/concept_bg01.png),
	url(https://file003.shop-pro.jp/PA01452/891/images/concept_bg02.png),#faf9f7;
	background-repeat: no-repeat;
	background-position: left bottom,right bottom,0 0;
	border-bottom:1px solid #faf9f7;
}
#concept h3{
	font-size:4.2rem;
	line-height: 1.6;
	margin-bottom:20px;
	font-weight: 900;
	position:relative;
	display: inline-block;
}
#concept h3 span{
	color:#ff9800;
	display: block;
	font-size:2.4rem;
}
#concept h3:before{
	content:"";
	position: absolute;
	width:66px;
	height:96px;
	background:url(https://file003.shop-pro.jp/PA01452/891/images/concept_title01.png) no-repeat;
	background-size:cover;
	left:-70px;
	top:calc(50% - 48px);
}
#concept h3:after{
	content:"";
	position: absolute;
	width:45px;
	height:116px;
	background:url(https://file003.shop-pro.jp/PA01452/891/images/concept_title02.png) no-repeat;
	background-size:cover;
	right:-50px;
	top:calc(50% - 58px);
}
#concept h4{
	font-size:2.8rem;
	margin:5px 0 10px;
}
#concept .flex{
	margin:auto;
	max-width:1000px;
}
#concept dl{
	max-width:31%;
}
#concept dd{
	color:#ff9800;
	font-size:2.0rem;
	font-weight:700;
	padding:10px;
	line-height: 2.6rem;
	}
#concept dd span{
	color:#333;
	font-size:1.8rem;
	font-weight:700;
	display: block;
	}	
@media screen and (max-width: 700px){
	#concept{
	background-size:30%,30%,100%;
	}	
	#concept h3{
	font-size: 4.0vw;
	}
	#concept h3 span{
	font-size: 3.0vw;
	}
	#concept h4{
	font-size:3.5vw;
	margin-top:0;
	}
	#concept h3:before{
	width:44px;
	height:61px;
	left:-50px;
	top:calc(50% - 30px);
	}
	#concept h3:after{
	width:30px;
	height:77px;
	right:-40px;
	top:calc(50% - 38px);
	}
	#concept dl{
	max-width:none;
	margin-bottom:10px;
}
	#concept .flex img{
	max-width:50%;
	margin:auto;
	}
	#concept p.txt{
		text-align: left;
	}
}
@media screen and (max-width: 500px){
	#concept h3{
	font-size: 5.0vw;
	}

}
/*faq*/
.faq dl{
	border-radius: 6px;
	border:1px solid #e2e2e2;
	margin:20px 0;
}
.faq dl dt{
	padding:15px;
	font-weight: normal;
	cursor: pointer;
}

.faq dl dd{
	display:none;
	border-top:1px solid #e2e2e2;
	padding:15px;
}
.faq dl dt a{
	position:relative;
	padding-left:20px;
	display:block;
	cursor: pointer;
	transition: 0.3s ease-in-out;
	color:#282222;
	pointer-events: none;
}
.faq dl dt a:before{
	position:absolute;
	display:block;
	content:"";
	bottom:0px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #ff9800;
	border-right: 2px solid #ff9800;
	top: calc(50% - 4px);
	left:0;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.3s ease-in-out;
}
.faq dl dt:hover{
	background-color:#FAF9F7;
}
.faq dl dt.active{
	background-color:#FAF9F7;
}
.faq dl dt.active >a:before{
	transform: rotate(135deg);
	transition: 0.3s ease-in-out;
			
}
/*flow*/
#flow{

}
#flow dl.flex{
	width:100%;
	padding:20px 0;
	position:relative;
}
#flow dl dt h5{
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	background-color: #282222;
	color:#fff;
	width: 140px;
	height: 140px;
	text-align: center;
	padding-top: 60px;
	display:block;
	position:relative;
	margin:0 auto 0 auto;
	font-size:1.8rem;
}
#flow dl:after{
	position:absolute;
	display:block;
	content:"";
	left:70px;
	bottom:0px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #282222;
	border-right: 2px solid #282222;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
#flow dd{
	margin-left:30px;
	padding:30px 0;
	border-bottom:1px solid #282222;
	width:calc(100% - 170px);
}
#flow dl:last-child:after{
	display:none;
}
#flow dl:last-child dd{
	border-bottom:none;
}

@media screen and (max-width: 700px){
	#flow dl.flex{
	padding:0px 0;
}
	#flow dl dt h5{
	margin:0 auto 0px auto;
}
	#flow dl:after{
	position:absolute;
	display:block;
	content:"";
	left:calc(50% - 4px);
}
	#flow dd{
	margin-left:0;
	padding:20px 0;
	width:100%;
	border-bottom:0;
	}
}


/*f3*/
.f3 #zoom section{
	padding-bottom:50px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
}
.f3 #zoom section div{
	width:70%;
	order:2;
}

.f3 #zoom section figure{
	width:25%;
	order:1;
	
}
.f3 #zoom section figure img{
	border:1px solid #ccc;
}
@media screen and (max-width: 700px){

	.f3 #zoom section{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	}
	.f3 #zoom section div{
	width:100%;
	order:1;
	}

	.f3 #zoom section figure{
	width:100%;
	order:2;
	}
}

/*----------------追記はじめての方へ----------------*/

#concept .first dd span{
	color: #333;
	font-size: 1.45rem;
	font-weight: 500;
}
#concept .first p.txt{
	font-weight: bold;
	font-size: 2.5rem;
}
#concept .first h4{
	font-size: 2.2rem;
}
#concept .first h4 br.sp{
	display: none;
}
#concept .first h4 span{
	display: block;
	color: #ff9800;
	font-size: 2.8rem;
}
#concept .first .co1{
	margin: 30px auto;
}
#concept .co1 dl{
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 25px;
}
#concept .co1 dt{
	width: 25%;
}
#concept .co2{
	display: flex;
	justify-content: center;
}
#concept .co2 dl{
	width: 31%;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	margin: 0 5px;
}
#concept .co2 dl.arrow{
	width: 54px;
	justify-content: flex-start;
	padding-top: 80px;
	margin-left: 0;
	margin-right: 12px;
}
#concept .co2 dt{
	width: 100%;
}
#concept .first dd{
	text-align: left;
	color: #282222;
	margin: auto;
	margin-top: 10px;
	font-size: 1.6rem;
	letter-spacing: 0.1rem;
	font-weight: 500;
}
@media screen and (max-width: 1200px){
	#concept .co1 dt{
		margin: 0 5px;
	}
	#concept .co2 dt{
		margin: 0;
	}
}
@media screen and (max-width: 1100px){
	#concept .co2 dl.arrow{
		padding-top: 60px;
	}
}
@media screen and (max-width: 900px){
	#concept .first dd{
		margin-top: 0;
	}
	#concept .co1 dt{
		width: 45%;
		margin: 0;
	}
	#concept .co1 dl{
		justify-content: space-around;
	}
	#concept .co2 dt{
		width: 100%;
	}
	#concept .co2 dl{
		justify-content: center;
	}
	#concept .co1 dl{
		margin-bottom: 15px;
	}
	#concept .co2{
		flex-direction: column;
	}
	#concept .co2 dl{
		width: 100%;
		margin: 0;
	}
	#concept .first dd br.sp{
		display: none;
	}
	#concept .first h4{
		font-size: 3.3vw;
	}
	#concept .first h4 span{
		font-size: 4vw;
	}
	#concept .first h4 br.sp{
		display: block;
	}
	#concept .first .co1{
		margin: 15px auto;
	}
	#concept .first .co1 dl:first-of-type dt{
		margin-bottom: 15px;
	}
	#concept .first .co1 dl:first-of-type dt:last-of-type{
		margin-bottom: 5px;
	}
	#concept .co2 dl.arrow{
		padding-top: 0;
		width: 100%;
		padding: 10px 0 20px;
	}
	#concept .co2 dl.arrow img{
		transform: rotate(90deg);
		max-width: 35px;
	}
}
@media screen and (max-width: 700px){
	#concept .first p.txt{
		font-size: 1.9rem;
		text-align: center;
	}
	#concept{
		background-image: none;
	}
}


.bggray{
    background:#FAF9F7;
}

/*voice*/

#voice{
    padding-top:70px;
    padding-bottom:70px;
}
#voice h2{
	font-size:2.6rem;
	text-align: center;
	position:relative;
	font-weight: 700;
	line-height: 1.6;
	padding-bottom:10px;
	margin-bottom:20px;
}
#voice h2 span{
	color:#ff9800;
	font-size:1.8rem;
	display:block;
}
#voice h2:after{
	width:40px;
	height:3px;
	background:#ff9800;
	content:"";
	bottom:0;
	left:calc(50% - 20px);
	position:absolute;
}

#voice article{
    margin:20px auto;
    border:1px solid #cccccc;
    border-radius: 12px;
    padding:40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#voice article p.sub{
    border-bottom:1px solid #ccc;
    font-size:1.6rem;
    padding:8px 0;
}
#voice  h3{
    border-left:3px solid #ff9800;
    padding:0 8px;
    margin:15px 0;
}
#voice article>figure{
    width:120px;

}
#voice article>figure img{
	max-width:120px;
	max-height:120px;
    width:100%;
    height:100%;
	object-fit:cover;
	border-radius:50%;
    margin:auto;
    display:block;
	}
#voice article>figure figcaption{
    font-size:1.6rem;
    text-align: center;
    margin:auto;
}
#voice article>figure figcaption span{
    font-size:1.4rem;
    display:block;
}
#voice article>div{
    width:calc(100% - 150px);
}

#voice article .flex{
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}
#voice article .flex>figure{
    width:30%;
}

#voice article .flex>figure img{
    height: 210px;
	width: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
}
#voice article .flex>p{
    width:65%;
}

@media screen and (max-width: 1000px){
#voice article{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding:15px;
}
    #voice article>*{
        width:100%!important;
    }
    #voice article>figure{
    text-align: left;
}
    #voice article>figure img{
    display:inline-block;
    vertical-align: middle;
    width:70px;
    height:70px;
    }
    #voice article>figure figcaption{
    font-size:1.4rem;
    padding-left:10px;
    display:inline-block;
    }
    #voice article>figure figcaption span{
    padding-left:10px;
    display:inline-block; 
    }

}

@media screen and (max-width: 950px){
    
}
@media screen and (max-width: 700px){
    #voice{
    padding-top:40px;
    padding-bottom:40px;
}
	#voice  h2{
	font-size:4.5vw;
	}
	#voice  h2 span{
	font-size:4.0vw;
	}
	#voice  h2:after{
	width:30px;
	left:calc(50% - 15px);
	position:absolute;
}
    #voice article .flex>figure img{
    height: 55vw;
    width: 100%;
    margin-top:10px;
    }
}


/*youtube*/

.youtube-flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.youtube-wrap{
  max-width:680px;
  margin:auto;
  width:auto;
  margin-bottom:15px;
}
#youtube{
  max-width:680px;
  margin:auto;
  width:auto;
  margin-bottom:15px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


#concept #youtubeflex.flex{
    max-width:1000px;
    margin-bottom:20px;
}
#youtubeflex li{
    width:48%;
}

#voice article.is-hidden {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin:0;
    padding:0;
    }
.more2{
    cursor: pointer;
    display:block;
    }