@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;800&display=swap");
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
/*===================================================
 css reset
====================================================*/
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, img, a,
ol, ul, li,
form, label,
table, tbody, tfoot, thead, tr, th, td,
article,footer, header, menu, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	list-style: none;
	text-decoration: none;
	vertical-align: baseline;
}
/*====== Web Font =================================================
font-family: 'Inter', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Rubik', sans-serif;
font-family: 'Sawarabi Mincho', serif;
==================================================================*/

*,
*::before,
*::after {box-sizing: inherit}
*{box-sizing:content-box;}
html{
	font-family:"Noto Sans Japanese", "Hiragino kaku Gothic Pron","ヒイラギ各ゴ proN w3","Arial","メイリオ",Vardana,sans-serif;
}
body{
	overflow-x: hidden;
}
/*===================================================
 共通CSS
====================================================*/
/*-- web google font -----------------
font-family: 'Inter', 'Noto Serif JP';

----------------------------------*/
.f25{
	font-size:2.5rem;
	font-family: "Lato", "Noto Sans JP", sans-serif;
}



h2{font-size:45px;}
h3 {font-size: 30px;}
/************* タブレット用 ipad Air 横 **************/
@media screen and (max-width: 1190px) {
	h3 {
		font-size: 28px;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 914px) {
	h3 {
		font-size: 26px;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 851px) {
	h3 {
		font-size: 24px;
	}
}
@media screen and (max-width: 786px) {
	h3{
		font-size:22px;
	}
}
/************* スマホ用 ***************/
@media screen and (max-width: 660px) {
	h3 {
		font-size: 23px;
	}
}
/************* スマホ用 ***************/
@media screen and (max-width: 406px) {
	h3 {
		font-size: 21px;
	}
}
h4 {font-size: 20px;}

/************* スマホ用 ***************/
@media screen and (max-width: 660px) {
	h4 {
		font-size: 14px;
	}
}

/**----- フォントサイズ ----------*/
.f12{font-size:1.2rem}
.f20{font-size:2rem}

/**----- フォント太さ ----------*/
.b5{font-weight:500}
.b7{font-weight:700}

/**----- パディング ----------*/
.pu15{padding:15px 0 0}

.bgblue{background:#ebdee5;}
/*--- main コンテンツ幅 80% 共通 ----*/
.container {
	width: 80%;
	margin: 0 auto;
	padding: 0 15px;
}
/************* タブレット用 **************/
@media screen and (max-width: 1024px) {
	.container {
		width: 90%;
	}
}
.container02 {
	width: 80%;
	margin: 100px auto 0;
	padding: 0 15px; 
}
/*--- main コンテンツ幅 60% 共通 ----*/
.container03 {
	width: 60%;
	margin: 100px auto 0;
	padding: 0 15px; 
}
/************* タブレット用 **************/
@media screen and (max-width: 768px) {
	.container03 {
		width: 90%;
	}
}
/************* スマホ用 **************/
@media screen and (max-width: 660px) {
/*--- main コンテンツタイトル幅 共通 ----*/
	.container03{
		width:94%;
		/*margin:0 auto;
		padding:0;*/
	}
}
.wrapper_wide {
	width:100%;
	padding:30px 0 80px;
	margin:100px 0;
}
@media screen and (max-width: 1368px) {
	/************* Surface Pro 7 横 *************/
	.wrapper_wide{
		margin:50px 0;
	}
}
.wrapper {
	width: 80%;
	padding: 80px 0 30px;
	margin: 0 auto;
}
/************* スマホ用 **************/
@media screen and (max-width: 660px) {
	.wrapper {
		width: 90%;
	}
	.wrapper_wide {
		width:100%;
		padding:30px 0 80px;
		margin:10px 0;
	}
}
.wrapper-title {
	text-align: center;
	margin:30px;
	position:relative;
	z-index:10;
}
.wrapper-title2 {
	text-align: center;
	margin:50px 0;
	padding:10px 0;
	position:relative;
	z-index:10;
	background:#fff;
	border-radius:50px;
}
/************* スマホ用 **************/
@media screen and (max-width: 660px) {
	.wrapper-title2{
		padding:15px 0;
	}
}
.last-wrapper {
	margin-bottom: 80px;
}
/*------ form 共通タグ ----------------------*/
form {
	width: 80%;
	margin: 0 auto;
}
.btn-submit {
	background-color: #4c586f;
	color: #fff;
}
.btn {
	padding: 10px 20px;
	font-size: 15px;
	border-radius: 5px;
	border: none;
	margin-top: 20px;
}
a:hover,
.btn:hover {
	opacity: 0.6;
	cursor: pointer;
}

/*===================================================
 Header CSS
====================================================*/
.header {
	/*position: sticky;*/
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	/*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);*/
	z-index:888;
	height:80px;
	line-height:80px;
}
.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width:90%;
	margin:0 auto;
}

#logo{
	width:80px;
	vertical-align:middle;
}
ul.pc_menu{
	width:80%;
	display:block;
	display:flex;
	justify-content: space-around;
}
ul.pc_menu li a{
	font-family: 'Lato', sans-serif;
	font-size:0.7rem;
	color:#000;
	letter-spacing:0.15rem;
}
ul.pc_menu li a:hover{
	text-decoration: underline;
	text-decoration-color: #cbb4ac;
	text-decoration-thickness: 8px;
	text-underline-offset: 0.5em;
}
.line-icon{
	width:17%;
	vertical-align:middle;
	margin-left:2%;
}

ul.pc_menu li.rev{
	width:20%;
	text-align:center;
}
ul.pc_menu li.rev a{
	color:#fff;
	/*font-weigth:bold;*/
	background-image: linear-gradient(180deg, rgba(155, 119, 133, 1) 30%, rgba(233, 233, 233, 1));
	padding:10px 20px;
	border-radius:40px;
}
ul.pc_menu li.rev a:hover{
	text-decoration: none;
}
.drawer__button,
.drawer__nav {
	display:none;
}
@media screen and (max-width: 1180px) {
/* ハンバーガーボタンのデザイン */
	ul.pc_menu li a{
		font-size:0.7rem;
		letter-spacing:0.1rem;
	}
	
}
@media screen and (max-width: 1024px) {
/* ハンバーガーボタンのデザイン */
	ul.pc_menu{
		display:none;
	}
	
	.drawer__button {
		display:block;
		position: relative;
		width: 3rem;
		height: 3rem;
		background-color: transparent;
		border: none;
		cursor: pointer;
		z-index: 999; /* メニューを開いている時もクリックできるよう設定 */
	}
	/* ハンバーガーボタン内の線 */
	.drawer__button > span {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2rem;
		height: 3px;
		background-color: black;
		transform: translateX(-50%);
	}
	.drawer__button > span:first-child {
		transform: translate(-50%, calc(-50% - 0.5rem));
		transition: transform 0.3s ease;
	}
	.drawer__button > span:nth-child(2) {
		transform: translate(-50%, -50%);
		transition: opacity 0.3s ease;
	}
	.drawer__button > span:last-child {
		transform: translate(-50%, calc(-50% + 0.5rem));
		transition: transform 0.3s ease;
	}
	/* 展開時のデザイン */
	.drawer__button.active > span:first-child {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.drawer__button.active > span:nth-child(2) {
		opacity: 0;
	}
	.drawer__button.active > span:last-child {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	/* メニューのデザイン */
	.drawer__nav {
		display:block;
		position: fixed; /* 追従ヘッダーなどでも表示できるよう設定しておく */
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		transition: opacity 0.3s ease;
		opacity: 0;
		visibility: hidden;
	}
	.drawer__nav.active {
		opacity: 1;
		visibility: visible;
	}
	.drawer__nav__inner {
		position: relative;
		width: 60%;
		height: 100%;
		background-color: white;
		padding: 3rem 1.5rem 1rem;
		margin: 0 0 0 auto;
		overflow: scroll;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}
	.drawer__nav.active .drawer__nav__inner {
		transform: translateX(0);
	}
	.drawer__nav__menu {
		list-style: none;
		padding-left: 0;
	}
	.drawer__nav__link {
		display: block;
		color: black;
		text-decoration: none;
		padding: 0.1rem 0.4rem;
		border-bottom: solid 1px lightgray;
	}
	.drawer__nav__link img {
		width:10%;
	}
}

/* ハンバーガーメニュー展開時、背景を固定 */
body.active {
	height: 100%;
	overflow: hidden;
}

.shiro{
	background:#fff;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
/*===================================================
 Top-img CSS
====================================================*/
.top-img{
	height:900px;
	width:100%;
	background-image:url("img/bg.jpg");
	background-size:cover;
	background-position:center;
	position:relative;
	z-index:-1;
}
.top-img::after{
	content:"";
	position:absolute;
	background:#000;
	width:100%;
	height:900px;
	top:0;
	left:0;
	opacity:0.2;
}
.top-text{
	position:absolute;
	bottom:10%;
	left:8%;
	width:92%;
	color:#fff;
	z-index:10;
}
.sp_top-text{
	display:none;
}
@media screen and (max-width: 1368px) {
/* トップイメージ関連 */
	.top-text{
		left:4%;
		width:92%;
	}
	h2{font-size:40px;}
}
@media screen and (max-width: 1280px) {
/* トップイメージ関連 */
	.top-img{
		height:800px;
	}
	.top-img::after{
		height:800px;
	}
	.top-text{
		width:94%;
		line-height:1.5;
	}
	h2{font-size:38px;}

}
@media screen and (max-width: 1180px) {
/* トップイメージ関連 */
	
	h2{font-size:35px;}
	
}
@media screen and (max-width: 1024px) {
/* トップイメージ関連 */
	.top-img{
		height:700px;
	}
	.top-img::after{
		height:700px;
	}
	h2{font-size:34px;}
}
@media screen and (max-width: 896px) {
/* トップイメージ関連 */
	h2{font-size:32px;}
}
@media screen and (max-width: 851px) {
/* トップイメージ関連 */
	.top-img,
	.top-img::after{
		height:600px;
	}
	h2{font-size:30px;}
}
@media screen and (max-width: 768px) {
/* トップイメージ関連 */
	h2{font-size:28px;}
}
@media screen and (max-width: 740px) {
/* トップイメージ関連 */
	h2{font-size:26px;}
}
@media screen and (max-width: 667px) {
/* トップイメージ関連 */
	.top-text{
		display:none;
	}
	.sp_top-text{
		display:block;
		position:absolute;
		bottom:10%;
		left:7%;
		width:92%;
		color:#fff;
		z-index:10;
	}
	.sp_top-text p{
		font-size:1.8rem;
		font-weight:bold;
		font-family: 'Lato', sans-serif;
		line-height:1.5;
	}
}
@media screen and (max-width: 530px) {
/* トップイメージ関連 */
	.sp_top-text p{
		font-size:1.6rem;
	}

}
@media screen and (max-width: 420px) {
/* トップイメージ関連 */
	.sp_top-text p{
		font-size:1.3rem;
	}

}
/*===================================================
 Main CSS	New Shop
====================================================*/
.bgimg1{
	background:url(img/bg_sec1.webp);
	background-size: cover;
	background-position: center;
}
.wrapper-title {
	text-align: center;
	margin:30px;
	position:relative;
	z-index:10;
}
.boxs {
	display: flex;
	width:100%;
}
.box {
	width: 50%;
	margin: 20px 10px;
	text-align: center;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(51, 51, 51, 0.1);
	border-radius:20px;
	background:#fff;
}
.box img {
	width: 100%;
}
.service-title{
	padding:10px 0;
}
.underbox{
	width:96%;
	margin:0 auto;
	padding:20px 0 10px;
	border-top:2px solid #cbb4ac;
}
.underbox p{
	font-weight:bold;
}
.p_link {
	padding:10px 0;
	margin-top:20px;
	background:#eddee5;
	border-radius:0 0 20px 20px;
}
.p_link a{
	color: #3e3e3b;
}
.p_link a:hover{
color:#ff0000;
}
@media screen and (max-width: 915px) {
/* New Shop関連 */
	.underbox{
		font-size:0.8rem;
	}
	
	.wrapper_wide{
		margin:30px 0;
	}
	
}
@media screen and (max-width: 741px) {
/* New Shop関連 */
	.underbox{
		font-size:0.7rem;
	}
}
@media screen and (max-width: 665px) {
/* New Shop関連 */
	.boxs{
		display:block;
	}
	.box{
		width:90%;
		margin:0 auto 40px;
	}
	.service-title{
		font-size:1.5rem;
	}
	.underbox{
		font-size:1.3rem;
	}
	.p_link a{
		font-size:1.5rem;
	}
	.underbox p{
		font-size:120%;
	}
}
@media screen and (max-width: 470px) {
/* New Shop関連 */
	.underbox{
		font-size:1.1rem;
	}
}
@media screen and (max-width: 398px) {
/* New Shop関連 */
	.underbox{
		font-size:1rem;
	}
}
/*===================================================
 Main CSS	Service (新しい働き方）
====================================================*/
ul.flex_box{
	width:100%;
	margin:0 auto;
	padding:20px 0 0;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	z-index:5;
}
ul.flex_box li{
	width:23%;
	height:230px;
	font-size:1.2rem;
	background: #fffff4;
	border-radius:20px;
	padding:20px 20px 0;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(51, 51, 51, 0.1);
	line-height:2rem;
	margin:10px 15px 20px;
	z-index:10;
	text-align:left;
}
ul.flex_box li span{
	display:block;
	margin:0 auto 20px;
	text-align:center;
	padding:10px 0;
	width:90%;
	border-bottom:3px solid #cbb4ac;	/*ffcc00*/
}
@media screen and (max-width: 921px) {
/* New Shop関連 */
	ul.flex_box li{
		width:21%;
		font-size:1.05rem;
		margin:10px 10px 20px;
	}
}
@media screen and (max-width: 783px) {
/* New Shop関連 */
	ul.flex_box li{
		width:21%;
		font-size:1rem;
		line-height:1.65rem;
	}
}
@media screen and (max-width: 693px) {
/* New Shop関連 */
	ul.flex_box{
		width:100%;
		margin:0 auto;
		padding:20px 0 0;
		display:block;
	}
	ul.flex_box li{
		width:84%;
		font-size:1.4rem;
		padding:20px 20px 0;
		line-height:2.2rem;
		margin:10px auto 25px;
	}

}
@media screen and (max-width: 412px) {
/* New Shop関連 */
	ul.flex_box li{
		height:245px;
	}

}
/*===================================================
 Main CSS	報酬プラン
====================================================*/
.bg_crip1{
	position:relative;
	width:100%;
	height:500px;
	/*background:#ccc;*/
}
.bg_crip1::before{
	content:"";
	position:absolute;
	top:70px;
	right:0;
	width:40%;
	height:600px;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	background:#ebdee5;
}
.bg_crip1::after{
	content:"";
	position:absolute;
	top:180px;
	left:0;
	width:40%;
	height:490px;
	clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
	background:#debec9;
}
h3.work {
	font-size:27px;
	text-align:left;
	width:70%;
	font-family: arial, serif;
}
.flx02{
	width:100%;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	padding:30px 0;
}
.flx02 .b01{
	width:30%;
	height:320px;
	max-height:320px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(51, 51, 51, 0.1);
	text-align:center;
	font-weight:700;
	font-size:2rem;
	border-radius:20px;
	padding:50px 0 10px;
	background:#fff;
	z-index:10;
}

.flx02 .b01 img{
	width:30%;
}
.flx02 .b01 span{
	display:block;
	width:100%;
	text-align:center;
	padding:30px 0 40px;
}
@media screen and (max-width: 1368px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:26px;
	}
}
@media screen and (max-width: 1024px) {
/* 報酬プラン関連 */
	.flx02 .b01{
		width:31%;
		height:260px;
		max-height:320px;
		font-size:1.7rem;
		padding:40px 0 10px;
	}
}
@media screen and (max-width: 912px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:25px;
	}
	.flx02 .b01{
		width:31%;
		height:250px;
		max-height:320px;
		font-size:1.5rem;
		padding:40px 0 10px;
	}
}
@media screen and (max-width: 880px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:23px;
	}
}
@media screen and (max-width: 816px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:21px;
	}
	.flx02 .b01{
		width:31%;
		height:230px;
		max-height:320px;
		font-size:1.4rem;
		padding:30px 0 10px;
	}
	.bg_crip1::after{
		top:190px;
		height:430px;
	}
	.bg_crip1::before{
		top:70px;
		height:550px;
	}
}
@media screen and (max-width: 750px) {
/* 報酬プラン関連 */
	.flx02 .b01{
		width:31%;
		height:200px;
		max-height:320px;
		font-size:1.2rem;
		padding:30px 0 10px;
	}
}

/*------ 報酬プラン -------------*/
.bg_crip2{
	width:100%;
	position:relative;
}
.bg_crip2::before{
	position:absolute;
	content:"";
	width:90%;
	height:500px;
	top:25%;
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 25% 100%, 25% 50%, 25% 0%);
	background:#cbb4ac;
}
.flx01{
	width:100%;
	margin:0 auto;
	display:flex;
	justify-content:center;
	padding:30px 0;
	position:relative;
}
.flx01 .b22{
	width:46%;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(51, 51, 51, 0.1);
	margin:0 2%;
	padding:30px 0;
	border-radius:20px;
	background:#fff;
}
.flx01 .b_inner{
	width:86%;
	margin:0 auto;
	text-align:center;
}
.flx01 .b_inner .tl1{
	padding:5px;
	font-size:1.5rem;
	border-bottom:3px solid #cbb4ac;
}
h4.tuki{
	padding:20px 0 5px;
}
.flx01 .b_inner .pay{
	font-size:1.5rem;
	font-weight:bold;
}
@media screen and (max-width: 755px) {
/* 報酬プラン関連 */
	.flx01 .b_inner .pay{
		font-size:1.5rem;
		font-weight:bold;
	}
}
@media screen and (max-width: 660px) {
/* 報酬プラン関連 */
	.bg_crip1{
		height:1350px;
	}
	.bg_crip1::before{
		width:35%;
		height:1400px;
	}
	.bg_crip1::after{
		top:200px;
		width:35%;
		height:1270px;
	}
	h3.work {
		font-size:21px;
		width:80%;
	}
	.flx02{
		width:100%;
		margin:0 auto;
		display:block;
		padding:30px 0;
	}
	.flx02 .b01{
		width:80%;
		height:320px;
		max-height:320px;
		font-size:2.3rem;
		position:relative;
		margin:0 auto 40px;
	}
	.flx01{
		display:block;
		width:100%;
		margin:0 auto;
	}
	.flx01 .b22{
		width:100%;
		margin-bottom:40px;
	}
	.flx01 .b_inner .pay{
		font-size:1.5rem;
		font-weight:bold;
	}
	.bg_crip2::before{
		height:900px;
		top:190px;
	}
}

@media screen and (max-width: 535px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:20px;
		width:80%;
	}
	.bg_crip1::after{
		top:215px;
		width:35%;
		height:1255px;
	}
	.flx02 .b01{
		font-size:2rem;
	}
	.flx01 .b_inner .pay{
		font-size:1.5rem;
		font-weight:bold;
	}
}
@media screen and (max-width: 420px) {
/* 報酬プラン関連 */
	h3.work {
		font-size:18px;
		width:85%;
	}
	.flx02 .b01{
		font-size:1.7rem;
		height:280px;
	}
	.flx01 .b_inner .pay{
		font-size:1.5rem;
		font-weight:bold;
	}
}

/*===================================================
 Main CSS	収益シミュレーション
====================================================*/
.bgcrip3{
	background:#ebdee5;
	width:100%;
}
.form_box{
	padding:20px 0;
	border-radius:10px;
	overflow:hidden;
	background:#fff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.inner_box{
	margin-bottom:20px;
	display:flex;
	flex-wrap:wrap;
}
.inner_box label{
	width:98%;
	left:2%;
	display:block;
	text-align:left;
	padding:5px 0 0px 30px;
	font-size:1.2rem;
	position:relative;
	line-height:30px;
}
.inner_box label::before{
	content:"";
	position:absolute;
	top:7px;
	left:0;
	width:20px;
	height:20px;
	background-image:url(img/icon/sym.png);
	background-size:cover;
}
.inner_box input[type="text"]{
	padding:10px 10px 10px 20px;
	font-size:1.2rem;
	border:1px solid #ccc;
	border-radius:10px;
}
.inner_box .c-form-text{
	width:78%;
}
.inner_box span{
	display:block;
	width:15%;
	font-weight:bold;
	font-size:1.2rem;
	padding:10px 0;
	text-align:center;
}
.push{
	padding:40px 0 20px;
	width:90%;
	text-align:center;
}
.formbottom{
	clear:both;
	width:100%;
	display:flex;
	justify-content:center;
	
}
.formbottom .btns{
	height:50px;
	border:1px solid #cbb4ac;
	font-size:1rem;
	font-weight:bold;
	border-radius:10px;
	color:#675153;
}
.formbottom .submit,
.formbottom .submit_sp{
	width:50%;
	margin-right:5%;
}
.formbottom .reset{
	width:30%;
}
.formbottom .submit_ch{
	display:block;
	width:50%;
	margin-right:5%;
}
.formbottom .submit_sp{
	display:none;
}
@media screen and (max-width: 872px) {
/* 報酬プラン関連 */
	.formbottom .submit_ch{
		display:none;
	}
	.formbottom .submit_sp{
		display:block;
		width:50%;
		margin-right:5%;
	}
}
@media screen and (max-width: 720px) {
/* 報酬プラン関連 */
	.inner_box .c-form-text{
		width:68%;
	}
	.inner_box span{
		width:20%;
		font-size:1.2rem;
	}
}
@media screen and (max-width: 560px) {
/* 報酬プラン関連 */
	.inner_box label{
		font-size:0.9rem;
	}
	.inner_box span{
		width:20%;
		font-size:1rem;
	}
	.formbottom .btns{
		font-size:0.9rem;
	}
	.formbottom .submit{
		width:55%;
		margin-right:5%;
	}
}
@media screen and (max-width: 420px) {
/* 報酬プラン関連 */
	.wrapper-title p{
		font-size:80%;
	}
	.inner_box label{
		font-size:0.8rem;
	}
	.inner_box .c-form-text{
		width:58%;
	}
	.inner_box span{
		width:25%;
		font-size:0.8rem;
	}
	.formbottom .btns{
		font-size:0.8rem;
	}
	.formbottom .submit{
		width:55%;
		margin-right:5%;
	}
}



/*===================================================
 Main CSS	ご利用の流れ
====================================================*/
.flow_box{
	width:80%;
	margin:0 auto;
	padding:20px 0 50px;
	background:#fff;
	text-align:center;
	border-radius:20px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.f_title4{
	padding:10px 0;
}
.link_slalon{
	width:60%;
	margin:20px auto 0;
	padding:40px 0;
	background:#333;
	border-radius:50px;
	box-shadow: 0px 0px 10px 2px #777;
}
.link_slalon a{
	font-size:1.5rem;
	font-weight:700;
	color:#fff;
}
.ya4{
	padding:20px 0;
	font-weight:bold;
	font-size:2rem;
	font-family: 'Noto Serif JP', serif;
}
.spp{
	display:none;
}
@media screen and (max-width: 1024px) {
/* ご利用の流れ関連 */
	.flow_box{
		width:100%;
	}
	.link_slalon{
		margin:25px auto 0;
		padding:25px 0;
	}
	
}
@media screen and (max-width: 914px) {
/* ご利用の流れ関連 */
	.flow_box{
		width:95%;
	}
}
@media screen and (max-width: 820px) {
/* ご利用の流れ関連 */
	.link_slalon a{
		font-size:1.3rem;
	}
	.flow_box p{
		font-size:100%;
	}
	.spp{
		display:block;
	}
}
@media screen and (max-width: 660px) {
	.link_slalon{
		width:80%;
		padding:20px 0;
		border-radius:20px;
	}
	.link_slalon a{
		font-size:1.3rem;
	}
}


@media screen and (max-width: 635px) {
/* ご利用の流れ関連 */
	.flow_box p{
		font-size:90%;
	}
}
@media screen and (max-width: 570px) {
/* ご利用の流れ関連 */
	.container{
		width:90%;
	}
	.flow_box p{
		font-size:88%;
	}
}
@media screen and (max-width: 470px) {
/* ご利用の流れ関連 */
	.flow_box p{
		font-size:78%;
	}
}
@media screen and (max-width: 420px) {
/* ご利用の流れ関連 */
	.container{
		width:90%;
	}
	.flow_box p{
		font-size:72%;
	}
}
/*===================================================
 Main CSS	Q&A
====================================================*/
.section-content{
	width:100%;
	padding:30px 0;
}
.flx03{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
}
.qa_box{
	width:30%;
	margin-bottom:45px;
	background:#fff;
	text-align:center;
	padding:15px 10px;
	border-radius:15px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(51, 51, 51, 0.1);
	
}
.qa_box a{
	color:#333;
	font-weight:700;
	font-size:1.2rem;
}
.qa_box img{
	display:inline-block;
	padding:0 0 0 10px;
	vertical-align:middle;
}
@media screen and (max-width: 1024px) {
/* Q&A */
	.qa_box a{
		color:#333;
		font-weight:700;
		font-size:1rem;
	}
}
@media screen and (max-width: 912px) {
/* Q&A */
	.qa_box{
		width:45%;
	}
}
@media screen and (max-width: 650px) {
	.flx03{
		display:block;
	}
	.qa_box{
		width:90%;
		margin:0 auto 45px;
		
	}
}
/*===================================================
 Result CSS
====================================================*/
.keka_box{
	width:100%;
	display:flex;
	justify-content:center;
	letter-spacing:0.08rem;
}
.infoBOX{
	width:48%;
	padding:40px 20px;
	/*background:#ccc;*/
	margin:0 1%;
	text-align:center;
	border-radius:15px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.infoBOX h4{
	padding:10px 0 20px;
}
p.plan{
	font-size:1.2rem;
	padding:10px 0;
	font-weight:bold;
	border-top:3px solid #cbb4ac;
	border-bottom:3px solid #cbb4ac;
}
.malist{
	padding:10px;
	margin:15px 0;
	background:#9b7785;
	color:#fff;
	font-weight:bold;
	font-size:1.1rem;
}
/************* タブレット用 **************/
@media screen and (max-width: 1024px) {
	.malist{
		font-size:1rem;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 914px) {
	.malist{
		font-size:0.9rem;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 851px) {
	.malist{
		font-size:0.82rem;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 768px) {
	.malist{
		font-size:0.72rem;
	}
}
.en span{
	font-size:1.4rem;
	padding:0 0 0 3px;
}
.line_hiyo{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:20px 0;
	width:80%;
	margin:0 auto;
}
.line_hiyo2{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:20px 0;
	width:100%;
	margin:0 auto;
}
.line_hiyo .r1,
.line_hiyo .r2{
	width:50%;
	border-bottom:1px dashed #725255;
	font-weight:bold;
	margin:5px 0;
}
.line_hiyo2 .r11,
.line_hiyo2 .r22,
.line_hiyo2 .r33{
	font-weight:bold;
	font-size:1.4rem;
	padding:10px 0;
}
.line_hiyo .r1{
	text-align:left;
	font-size:1.3rem;
}
.line_hiyo2 .r11{
	width:40%;
	text-align:left;
}
.line_hiyo2 .r11 span,
.line_hiyo2 .r22 span,
.line_hiyo2 .r33 span{
	font-size:1rem;
}
.line_hiyo .r2{
	text-align:right;
	font-size:1.3rem;
}
.line_hiyo2 .r22{
	width:40%;
}
.line_hiyo2 .r33{
	color:#725255;
}
.line_hiyo2 .r33{
	width:20%;
}
.line_hiyo .r1 span{
	font-size:1rem;
}
.line_hiyo .r2 span{
	font-size:1rem;
}
/************* タブレット用 **************/
@media screen and (max-width: 914px) {
	.line_hiyo2 .r11 span,
	.line_hiyo2 .r22 span,
	.line_hiyo2 .r33 span{
		font-size:0.8rem;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 768px) {
	.line_hiyo .r1{
		width:39%;
	}
	.line_hiyo .r2{
		width:60%;
	}
	.line_hiyo2 .r11 span,
	.line_hiyo2 .r22 span,
	.line_hiyo2 .r33 span{
		font-size:0.65rem;
	}
	.line_hiyo2 .r22,
	.line_hiyo2 .r33{
		font-size:1.2rem;
	}
}

table.tbl{
	width:100%;
	margin:0 auto;
}
table.tbl th,
table.tbl td{
	vertical-align:middle;
	padding:0;
}
table.tbl th.TL1{
	font-size:0.8rem;
	width:40%;
	text-align:center;
	padding:25px 0 0;
}
table.tbl th.TL2{
	width:20%;
	font-size:1.6rem;
	font-weight:bold;
}
table.tbl td.EN1{
	font-size:1.5rem;
	font-weight:bold;
	border-bottom:1px dashed #000;
}
table.tbl td.EN1 span{
	font-size:0.9rem;
}
.arrow1{
	padding:20px 0 0;
}
.arrow1 img{
	width:10%;
}
p.work{
	font-weight:bold;
	color:#725225;
}
p.work span{
	font-size:2rem;
	padding:0 10px;
	border-bottom:thick double #725225;
}
/************* タブレット用 **************/
@media screen and (max-width: 960px) {
	table.tbl td.EN1{
		font-size:1.2rem;
	}
}
@media screen and (max-width: 851px) {
/************* Pixel 5 横 **************/
	table.tbl td.EN1{
		font-size:1.1rem;
	}
}
/************* タブレット用 **************/
@media screen and (max-width: 768px) {
	.infoBOX p{
		font-size:0.8rem;
	}
	table.tbl td.EN1{
		font-size:0.95rem;
	}
}

/************* スマホ用 ***************/
@media screen and (max-width: 660px) {
	.keka_box{
		width:100%;
		display:block;
		margin:0;
		padding:10px 0;
		overflow:hidden;
	}
	.infoBOX{
		display:block;
		width:98%;
		margin:0 auto 30px;
		padding:20px 0;
	}
	table.tbl{
		width:100%;
		padding:0;
		margin:0;
	}
	table.tbl th.TL1{
		font-size:0.7rem;
		width:42%;
		padding:25px 0 0;
	}
	table.tbl th.TL2{
		width:15%;
		font-size:1.2rem;
	}
	table.tbl td.EN1{
		font-size:1.5rem;
		padding:5px 0;
	}
	table.tbl td.EN1 span{
		font-size:1rem;
	}
}
/************* スマホ用 ***************/
@media screen and (max-width: 497px) {
	table.tbl td.EN1{
		font-size:1.3rem;
		padding:5px 0;
	}
}
/************* スマホ用 ***************/
@media screen and (max-width: 430px) {
	table.tbl td.EN1{
		font-size:1.1rem;
		padding:5px 0;
	}
	table.tbl td.EN1 span{
		font-size:0.8rem;
	}
}
/************* スマホ用 ***************/
@media screen and (max-width: 387px) {
	table.tbl td.EN1{
		font-size:1rem;
		padding:5px 0;
	}
	table.tbl td.EN1 span{
		font-size:0.7rem;
	}
}


/*===================================================
 Main CSS	お問合せ
====================================================*/
.bg_wide{
	width:100%;
	background:#cbb4ac;
}
.toi_form  {
	text-align: center;
	margin:0 auto;
	padding:30px;
	background:#fff;
	width:80%;
	border-radius:20px;
}
.form-group {
	margin-bottom: 20px;
	text-align: left;
	padding:10px 0;
}
.form-group p{
	font-size:1.2rem;
	padding:5px 0;
}
input,
textarea {
	width: 100%;
	border: 1px solid #ebeced;
	font-size:1rem;
}
input {
	height: 30px;
	padding:5px;
}
textarea {
	height: 200px;
	padding:5px 10px;
}
.error {
	font-size: 12px;
	color: #d84950;
}
/*===================================================
 Main CSS	News
====================================================*/
.news-list {
	width: 80%;
	margin: 0 auto;
}

.news-list li {
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid;
}
.news-list a {
	color: #3e3e3b;
}
/*============================================
	footer css
=============================================*/
footer{
	width:100%;
	display:block;
	background:#000;
	padding:20px 0;
}
.foot_box{
	width:90%;
	height:80px;
	color:#fff;
	display:flex;
	margin:0 auto;
	line-height:80px;
}
.f_left{
	width:35%;
}
.f_left h4 span{
	display:inline-block;
	width:40%;
	margin-left:30px;
}
.f_left h4 span img{
	width:15%;
	vertical-align:middle;
}
.f_right{
	width:65%;
}
.f_right .fl05{
	display:flex;
	justify-content:flex-end;
}
.f_right .fl05 li{
	margin-right:5%;
}
.f_right .fl05 li a{
	color:#fff;
}

/*------- モバイルフッターインフォ 消す -------------*/
.foot_info{
	display:none;
}
@media screen and (max-width: 844px) {
/* フッターCSS */
	footer{
		width:100%;
		height:220px;
		display:block;
		background:#000;
		padding:0;
	}
	.foot_box{
		padding:0;
		height:auto;
		line-height:1.5;
	}
	.f_left{
		margin-top:20px;
	}
	.f_right{
		text-align:right;
		padding:10px 0;
	}
	.f_right .fl05{
		display:block;
		padding:0;
		margin:0;
	}
	.f_right .fl05 li{
		padding:0px 10px 10px 0;
		margin:0;
	}
	.f_right .fl05 li a{
		font-size:82%;
	}
}
@media screen and (max-width: 660px) {
/* フッターCSS */
	#logo{
		width:60px;
	}
	.f_left h4 span img{
		width:20%;
	}
}
@media screen and (max-width: 582px) {
/* フッターCSS */
	.f_left{
		width:45%;
	}
	.f_left h4 span img{
		width:20%;
	}
	.f_right{
		width:55%;
	}
}
/****************************************
	bunner fixed
*****************************************/
.bottom-fixed{
	position:fixed;
	bottom:50px;
	left:50%;
	transform:translateX(-50%);
	-webkit-transform:translateX(-50%);
	-ms-transform:translateX(-50%);
	z-index:999;
	width:400px;
	height:150px;
	transition: .3s;
	cursor: pointer;
}
.bottom-fixed.hidden{
	opacity: 0;
	visibility: hidden;
}
#info{
	display:block;
	position:relative;
	background-image: linear-gradient(360deg, rgba(155, 119, 133, 1) 30%, rgba(233, 233, 233, 1));
	top:0;
	width:100%;
	height:170px;
	padding:10px 0;
	border-radius:0 0 20px 20px;
}
.mes100{
	font-weight:500;
	position:absolute;
	top:10px;
	left:3%;
	font-size:1.15rem;
	font-family: 'Sawarabi Mincho', serif;
}
.fl-100{
	display:flex;
	justify-content:space-between;
	position:relative;
	width:100%;
	height:150px;
	top:0;
}
.bun-left{
	width:70%;
	position:absolute;
	left:5%;
	top:40px;
	background:#fff;
	padding:10px 0;
}
.bun-left p{
	font-weight:500;
	padding:0px 0 0 10px;
	font-family: 'Sawarabi Mincho', serif;
	font-size:1.4rem;
}
.bun-right{
	width:30%;
	position:absolute;
	bottom:20px;
	right:0;
}
.bun-right img{
	width:95%;
}
.toi2{
	display:block;
	position:absolute;
	top:150px;
	background-image: linear-gradient(180deg, rgba(203, 180, 172, 1) 30%, rgba(233, 233, 233, 1));
	font-size:1.3rem;
	font-weight:500;
	font-family: 'Sawarabi Mincho', serif;
	padding:8px 0;
	width:100%;
	text-align:center;
	border-radius:50px;
}
.toi2 a{
	color:#fff;
}

.batsu {
	display: block;
	position: absolute;
	width: 25px;
	height: 25px;
	right:0;
	bottom:220px;
	background:#fff;
	border-radius:30px;
	padding:0px;
	border:1px solid #ccc;
}
/***---------- バツ印で閉じる ---------------------------**/
.batsu::before, .batsu::after { /* 共通設定 */
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px; /* 棒の幅（太さ） */
	height: 15px; /* 棒の高さ */  background: #000;
}
.batsu::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
.batsu::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width: 844px) {
/* bunner fixed関連 */
	.bottom-fixed{
		display:none;
	}
	.foot_info{
		position:fixed;
		display:block;
		width:100%;
		height:100px;
		bottom:0;
		margin:0 auto;
		z-index:999;
		background:#cfccc3;
	}
	#sp_info{
		display:block;
		width:80%;
		margin:0 auto;
		position:relative;
		padding:10px 0 0;
	}
	.tt-con{
		display:flex;
		justify-content:center;
		align-items:center;
		position:absolute;
		bottom:-85px;
		width:100%;
		left:0;
	}
	.cont-1{
		position:relative;
		width:20%;
		height:70px;
		background-image: linear-gradient(180deg, rgba(203, 180, 172, 1) 30%, rgba(233, 233, 233, 1));
	}
	
	.cont-1 img{
		position:absolute;
		width:95%;
		left:5%;
		/*
		transform:translateX(-50%);
		-webkit-transform:translateX(-50%);
		-ms-transform:translateX(-50%);
		*/
		bottom:0px;
	}
	.cont-2{
		width:80%;
		height:70px;
		margin-left:0%;
		background-image: linear-gradient(360deg, rgba(155, 119, 133, 1) 30%, rgba(233, 233, 233, 1));
		padding:5px 0;
	}
	.cont-2 a{
		font-family: 'Sawarabi Mincho', serif;
		font-size:1.2rem;
	}
	.cont-2 .ue_t{
		width:90%;
		margin:0 auto;
		height:31px;
		padding:2px 0px 2px 10px;
		font-weight:700;
	}
	.cont-2 .sita_t{
		width:90%;
		margin:0 auto;
		height:31px;
		padding:2px 0px 2px 10px;
		background:#fff;
	}
}
@media screen and (max-width: 667px) {
/* bunner fixed関連 */
	#sp_info{
		display:block;
		width:100%;
		position:relative;
		padding:10px 0 0;
	}
}
@media screen and (max-width: 478px) {
/* bunner fixed関連 */
	.cont-2 a{
		font-family: 'Sawarabi Mincho', serif;
		font-size:1.05rem;
	}
}
@media screen and (max-width: 418px) {
/* bunner fixed関連 */
	.cont-2 a{
		font-family: 'Sawarabi Mincho', serif;
		font-size:0.98rem;
	}
	.cont-2 .sita_t{
		height:28px;
		padding:5px 0px 2px 10px;
	}
}
@media screen and (max-width: 390px) {
/* bunner fixed関連 */
	.cont-2 a{
		font-family: 'Sawarabi Mincho', serif;
		font-size:0.9rem;
	}
	.cont-2 .sita_t{
		height:26px;
		padding:7px 0px 2px 10px;
	}
}

/****************************************
	Page css
*****************************************/
#hed_page {
	background:#fff;
}
.page-title {
	border-bottom: 1px solid #ddd;
	padding: 20px 0 10px;
}
	
.page-text {
	padding: 20px 0 80px;
}
/*---------- breadcrumb -------------*/
.breadcrumbs {
	padding-top: 100px;
	background-color: #ebeced;
}
.breadcrumbs ul {
	padding: 10px 0;
}
.breadcrumbs li {
	display: inline;
	font-size: 13px;
}
.breadcrumbs li a{
	color: #4c586f;
	font-size: 13px;
}
.breadcrumbs ul li::before {
	padding: 0 10px 0 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	font-size: 14px;
	color: #3e3e3b;
}
/****************************************
	Result css
*****************************************/


/****************************************
	privacy.php 
*****************************************/
.priv{
	width:100%;
	padding:10px 0;
}
.priv p{
	margin-bottom:20px;
	text-indent:1rem;
}
.priv h4{
	padding:5px 0 5px 10px;
	margin-bottom:10px;
	border-left:5px solid #0000ff;
}
ol.prcy li{
	list-style-type:none;
	counter-increment:cnt;
	font-weight:bold;
	font-size:1.1rem;
	margin-bottom:10px;
	margin-left:2rem;
}
ol.prcy li::before{
	content:"("counter(cnt)")";
}
ol.prcy p{
	margin-left:2.5rem;
}
ol.norm li{
	list-style-type:disc;
	margin-left:3rem;
	padding:5px 0;
}
ol.norm li:last-child {
	margin-bottom:5px;
}
ol.nxt_no li{
	list-style-type:circled-decimal;
	margin-left:3rem;
	padding:5px 0;
}
/****************************************
	kiyaku.php 
*****************************************/
.kiyaku{
	width:100%;
	display:block;
	padding:10px;
	font-size:110%;
}
.kiyaku h4{
	font-size:24px;
	margin-bottom:20px;
}
.kiyaku h5{
	margin:10px 0;
	padding:5px 0 5px 10px;
	border-left:5px solid #0000ff;
}
.kiyaku .txt10{
	margin:0 0 15px 0;
}
ul.list_no{
	margin:5px 0;;
}
ul.list_no li{
	list-style-type:decimal;
	margin-left:40px;
}
.last_right{
	text-align:right;
	margin-top:20px;
}
/****************************************
	company.php 
*****************************************/
.comp{
	width:100%;
	padding:50px 0;
}
ul.info_list{
	width:70%;
	margin:0 auto;
	font-size:1.3rem;
}
ul.info_list li{
	margin:15px 0;
	padding:30px 0;
	border-bottom:1px solid #222;
}
ul.info_list li span{
	display:inline-block;
	font-weight:bold;
	margin-right:50px;
}
@media screen and (max-width: 820px) {
/* 会社概要関連 */
	ul.info_list{
		width:90%;
		margin:0 auto;
		font-size:1.3rem;
	}
}
@media screen and (max-width: 565px) {
/* 会社概要関連 */
	ul.info_list{
		font-size:1.1rem;
	}
}
@media screen and (max-width: 487px) {
/* 会社概要関連 */
	ul.info_list{
		font-size:0.9rem;
	}
}
@media screen and (max-width: 430px) {
/* 会社概要関連 */
	ul.info_list{
		width:90%;
		margin:0 auto;
		font-size:1.3rem;
	}
	ul.info_list li span{
		display:block;
		width:100%;
		margin-bottom:20px;
		background:#ccc;
		padding:15px 0 15px 10px;
	}
	ul.info_list li{
		width:100%;
		font-size:1.1rem;
	}
}
/************* register.html  ********************/
.register{
	width:55%;
	margin:0 auto;
	padding:50px 0;
	border:1px solid #ebeced;
	text-align:center;
}
.checkbox{
	width: auto;
}
.conf-form{
	background-color:#ebeced;
	padding:30px;
}
/************* shop.php  ********************/
.fa-shopping-cart{
	color:#0000ff;
	margin-left:;
	font-size:1.5rem;
}
.itemlist ul:after{
	content:"";
	clear:both;
	display:block;
}
.itemlist ul li{
	display:block;
	float:left;
	width:30%;
	margin:10px 0;
}
.itemlist ul li:nth-child(3n-1){
	margin:10px 5%;
}
.itemlist img{
	width:100%;
}
.item-form{
	float:right;
	margin-top:15px;
}
.item-form input{
	width:20px;
	padding:0 5px;
	text-align:right;
}
/***********************************/
/* shop.php ニューヴァージョン 				 */
/***********************************/
.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
	background:#d2aebc;
	margin:0 2px;
	padding:10px 20px;
	font-weight: bold;
	border:solid 1px #9b7785;
	border-radius: 6px;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	background:#fff;
}
/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:50px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.wrapper-shop{
	width:100%;
	max-width: 960px;
	margin:150px auto;
    background:#fefefe;
}
.area h2{
	font-size:1.5rem;
	margin:0 0 20px 10px;
}
.area-flex{
	display:flex;
	align-items: center;
	width:100%;
	margin-bottom:20px;
	padding:10px;
	border-bottom:#000 double;
}
.area li{
	padding: 10px; 
	/*border-bottom: 1px solid #ddd;*/
}
.a-boxs{
	width:72%;
	margin-right:3%;
}
.sw-area{
	width:25%;
	padding:5px;
}
.title-box{
	display:flex;
	justify-content:space-between;
}
h2.s_tit{
	padding:0 10px;
	border-left:#725255 solid 5px;
}
.title-box h3{
	font-size:1.2rem;
}
.title-box p{
	font-size:1.2rem;
	font-weight: bold;
	margin-right:5px;
}
.riv-button{
	text-align:center;
	background:#9b7785;
	padding:20px 0;
	border-radius:25px;
}
	.riv-button a{
		color:#fff;
	}
.biko{
	width:100%;
	padding:0 10px;
	border-bottom: 2px solid #9b7785;
}
.biko h4{
	width:100%;
	padding:5px 10px;
	background:#9b7785;
	color:#fff;
}
.biko p{
	padding:5px 10px;
	line-height: 1.5;
	letter-spacing: 0.1rem;
}
/*****************************************
 Nail Gallery
****************************************/
.sort-btn{
	display: flex;
	justify-content: center;
	margin:50px 0;
	list-style: none;
    text-transform: uppercase;
}

.sort-btn li{
	position: relative;
    cursor: pointer;
    margin: 0 20px;
}

.sort-btn li::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-5px;
    left: 25%;
    /*線の形状*/
    width: 50%;
    height: 2px;
    background:#a0a0a0;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.sort-btn li.active::after,
.sort-btn li:hover::after{
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*横幅が375px以下になった際の指定*/
@media only screen and (max-width: 375px) {
.sort-btn{
    flex-wrap: wrap;
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
	position: relative;/*並び替えの基準点を指定*/
  }
  
  /*各画像の横幅などの設定*/
  .item {
	display: block;
	position: absolute;
	width: 33%;/*横並びで3つ表示*/
	z-index: 1;
  }
  
  /*内側のボックスの高さが崩れないように維持*/
  .item-content {
	position: relative;
	width: 100%;
	height: 100%;
	  padding: 30px;
  }
  
  .item-content a{
	  text-decoration: none;
  }
  
  .item-content span{
	  display: block;
	  text-align: center;
	  letter-spacing: 0.05em;
	  padding: 10px 0 0 0;
  }
  
  /*画像の横幅を100%にしてレスポンシブ化*/
  .grid img{
	  width:90%;
	  height:auto;
	  vertical-align: bottom;/*画像の下にできる余白を削除*/
  }
  
  /*横幅が768px以下になった際の指定*/
  @media only screen and (max-width: 768px) {
  .item {
	width: 49.5%;/*横並びで2つ表示*/
  }
	  .item-content {
		  padding: 10px;
	  }
  }