@charset "utf-8";

/* ─────────────────────────────────────
	common style
───────────────────────────────────── */
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6rem;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	line-height: 1.8;
}
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}
.wrap{
	max-width: 1120px;
	margin: 2rem auto 4rem;
	display: flex;
	justify-content: space-between;
}
.topicpath{
	max-width: 1120px;
	font-size: 90%;
	margin: 2rem auto;
}


/* ─────────────────────────────────────
	テキストリンク
───────────────────────────────────── */
a{text-decoration: none; color: #069;}
a:hover{text-decoration: underline;}


/* ─────────────────────────────────────
	テキスト配置
───────────────────────────────────── */
.tac{text-align: center !important;}
.tar{text-align: right !important;}
.tal{text-align: left !important;}


/* ─────────────────────────────────────
	フォント関連
───────────────────────────────────── */
em{font-style: normal;}
.fwb{font-weight: bold !important;}
.red{font-weight: bold; color: #c00;}
.yellow{background: linear-gradient(transparent 0%, #ffff7f 0%);}
.blue{background: linear-gradient(transparent 50%, #7fffff 50%);}
.pink{background: linear-gradient(transparent 50%, #ffccff 50%);}
.pink2{background: linear-gradient(transparent 60%, #ff99ff 60%);}


/* ─────────────────────────────────────
	フォントサイズ
───────────────────────────────────── */
.fs80{font-size: 80% !important;}
.fs90{font-size: 90% !important;}
.fs100{font-size: 100% !important;}
.fs120{font-size: 120% !important;}
.fs140{font-size: 140% !important;}
.fs160{font-size: 160% !important;}
.fs180{font-size: 180% !important;}
.fs200{font-size: 200% !important;}
.fs220{font-size: 220% !important;}
.fs240{font-size: 240% !important;}


/* ─────────────────────────────────────
	リスト
───────────────────────────────────── */
.list-check li{
	list-style: none;
	background: url(../images/icon-check.png) no-repeat left center;
	background-size: auto 14px;
	padding-left: 24px;
}


/* ─────────────────────────────────────
	マージン
───────────────────────────────────── */
.ma{margin: auto !important;}
.m0{margin: 0 !important;}

.ml0{margin-left: 0 !important;}
.ml05{margin-left: 0.5rem !important;}
.ml1{margin-left: 1rem !important;}
.ml2{margin-left: 2rem !important;}
.ml3{margin-left: 3rem !important;}
.ml4{margin-left: 4rem !important;}
.ml5{margin-left: 5rem !important;}

.mr0{margin-right: 0 !important;}
.mr05{margin-right: 0.5rem !important;}
.mr1{margin-right: 1rem !important;}
.mr2{margin-right: 2rem !important;}
.mr3{margin-right: 3rem !important;}
.mr4{margin-right: 4rem !important;}
.mr5{margin-right: 5rem !important;}

.mt0{margin-top: 0 !important;}
.mt05{margin-top: 0.5rem !important;}
.mt1{margin-top: 1rem !important;}
.mt2{margin-top: 2rem !important;}
.mt3{margin-top: 3rem !important;}
.mt4{margin-top: 4rem !important;}
.mt5{margin-top: 5rem !important;}

.mb0{margin-bottom: 0 !important;}
.mb05{margin-bottom: 0.5rem !important;}
.mb1{margin-bottom: 1rem !important;}
.mb2{margin-bottom: 2rem !important;}
.mb3{margin-bottom: 3rem !important;}
.mb4{margin-bottom: 4rem !important;}
.mb5{margin-bottom: 5rem !important;}


/* ─────────────────────────────────────
	幅
───────────────────────────────────── */
.wa{width: auto !important;}
.w30p{width: 30% !important;}
.w40p{width: 40% !important;}
.w50p{width: 50% !important;}
.w80p{width: 80% !important;}
.w100p{width: 100% !important;}


/* ─────────────────────────────────────
	2カラム
───────────────────────────────────── */
.c2{
	display: flex;
	justify-content: space-between;
}
.c2 div{
	width: 48%;
}


/* ─────────────────────────────────────
	シャドウ
───────────────────────────────────── */
.shadow{box-shadow:0px 0px 6px 3px rgba(0,0,0,0.05);}


/* ─────────────────────────────────────
	ふきだし
───────────────────────────────────── */
/* ─── 口コミ ─── */
.fb{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
}
.fb p:first-child{
	width: 80px;
	padding-top: 70px;
	text-align: center;
	font-size: 90%;
}
.fb-p p:first-child{
	background: url(../images/icon-p.png) no-repeat center top;
	background-size: 60px auto;
}
.fb-n p:first-child{
	background: url(../images/icon-n.png) no-repeat center top;
	background-size: 60px auto;
}
.fb p:first-child span{
	display: block;
	padding: 0.1rem;
	text-align: center;
	font-weight: bold;
	border-radius: 3px;
}
.fb .man{
	background: #daf2f2;
}
.fb .woman{
	background: #ffd6ea;
}
.fb .comment{
	width: calc(100% - 120px);
	border: solid 2px;
	border-radius: 10px;
	padding: 2rem;
	position: relative;
}
.comment::before,
.comment::after{
	content: "";
	position: absolute;
	top: 25px;
	left: -20px;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.comment::before{
	border: solid 20px transparent;
	border-right: solid 20px;
}
.comment::after{
	border: solid 20px transparent;
	border-right: solid 20px #fff;
	margin-left: 3px;
}
.fb-p .comment{
	border-color: #f90;
}
.fb-p .comment::before{
	border-right-color: #f90;
}
.fb-n .comment{
	border-color: #069;
}
.fb-n .comment::before{
	border-right-color: #069;
}

/* ─── 会話 ─── */
.c-user{
	background: url(../images/icon-user.png) no-repeat 0 15px;
	background-size: 60px auto;
	margin-bottom: 3rem;
}
.c-user p{
	border-radius: 10px;
	padding: 2rem;
	background: #f5eeab;
	position: relative;
	margin-left: 100px;
}
.c-user p::before{
	position: absolute;
	top: 25px;
	left: -40px;
	content: "";
	border: solid 20px transparent;
	border-right-color: #f5eeab;
}
.c-trainer-m{
	background: url(../images/icon-trainer-m.png) no-repeat right 10px;
	background-size: 70px auto;
	margin-bottom: 3rem;
}
.c-trainer-w{
	background: url(../images/icon-trainer-w.png) no-repeat right 10px;
	background-size: 70px auto;
	margin-bottom: 3rem;
}
.c-trainer-m p,
.c-trainer-w p{
	border-radius: 10px;
	padding: 2rem;
	position: relative;
	margin-right: 100px;
}
.c-trainer-m p::before,
.c-trainer-w p::before{
	position: absolute;
	top: 25px;
	right: -40px;
	content: "";
	border: solid 20px transparent;
}
.c-trainer-m p{background: #d8f0d8;}
.c-trainer-m p::before{border-left-color: #d8f0d8;}
.c-trainer-w p{background: #ffd6ff;}
.c-trainer-w p::before{border-left-color: #ffd6ff;}

/* ─── 指差しのキャラ ─── */
.trainer-m{
	background: url(../images/img-trainer-m01.png) no-repeat right top;
	background-size: auto 180px;
	min-height: 180px;
}
.trainer-w{
	background: url(../images/img-trainer-w01.png) no-repeat right top;
	background-size: auto 180px;
	min-height: 180px;
}
.trainer-m p,
.trainer-w p{
	border-radius: 10px;
	padding: 2rem;
	background: #ebebeb;
	position: relative;
	margin-right: 140px;
}
.trainer-m p::before,
.trainer-w p::before{
	position: absolute;
	top: 25px;
	right: -40px;
	content: "";
	border: solid 20px transparent;
	border-left-color: #ebebeb;
}

/* ─── トレーニング中のキャラ ─── */
.trainer-m02{
	background: url(../images/img-trainer-m02.png) no-repeat;
	background-size: auto 180px;
	min-height: 180px;
}
.trainer-w02{
	background: url(../images/img-trainer-w02.png) no-repeat;
	background-size: auto 180px;
	min-height: 180px;
}
.trainer-m02 p,
.trainer-w02 p{
	border-radius: 10px;
	padding: 2rem;
	background: #ebebeb;
	position: relative;
	margin-left: 140px;
}
.trainer-m02 p::before,
.trainer-w02 p::before{
	position: absolute;
	top: 25px;
	left: -40px;
	content: "";
	border: solid 20px transparent;
	border-right-color: #ebebeb;
}

/* ─── ここがポイント ─── */
.point-m{
	background: url(../images/img-trainer-m01-l.png) no-repeat;
	background-size: auto 180px;
	min-height: 180px;
}
.point-w{
	background: url(../images/img-trainer-w01-l.png) no-repeat;
	background-size: auto 180px;
	min-height: 180px;
}
.point-m p,
.point-w p{
	border-radius: 10px;
	padding: 2rem;
	padding-left: 120px;
	position: relative;
	margin-left: 140px;
	min-height: 150px;
}
.point-m p{
	background: #ebebeb;
}
.point-w p{
	background: #ffe5ff;
}
.point-m p::before,
.point-w p::before{
	position: absolute;
	top: 25px;
	left: -40px;
	content: "";
	border: solid 20px transparent;
}
.point-m p::before{
	border-right-color: #ebebeb;
}
.point-w p::before{
	border-right-color: #ffe5ff;
}
.point-m p::after,
.point-w p::after{
	position: absolute;
	width: 150px;
	height: 150px;
	top: -10px;
	left: -10px;
	content: "";
	background: url(../images/img-point.png) no-repeat;
	background-size: 150px 150px;
}


/* ─────────────────────────────────────
	よくある質問
───────────────────────────────────── */
.faq dt,
.faq dd{
	display: block;
	padding: 1.5rem;
	padding-left: 7rem;
}
.faq dt{
	background: #f5f3ee url(../images/icon-q.png) no-repeat 1.5rem center;
	background-size: auto 36px;
	font-weight: bold;
}
.faq dd{
	background: url(../images/icon-a.png) no-repeat 1.5rem 1.5rem;
	background-size: auto 36px;
	margin-bottom: 1rem;
}


/* ─────────────────────────────────────
	ボタン
───────────────────────────────────── */
.btn-up{
	position: fixed;
	bottom: 3rem;
	right: 1rem;
	z-index:100;
	line-height: 1;
	width: 60px;
	height: 60px;
}

.btn{
	width: 420px;
	height: 62px;
	color: #fff;
	font-weight: bold;
	font-size: 120%;
	text-shadow:1px 1px 1px rgba(0,0,0,0.8);
	padding: 1rem;
	padding-right: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	font-feature-settings : "palt";
	letter-spacing: 0.05rem;
}
.btn::before{
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../images/arrow-right02.png) no-repeat;
	background-size: 2rem 2rem;
	position: absolute;
	top: 50%;
	right: 2rem;
	margin-top: -1rem;
}
.shiny .btn {
  animation: bounce 4s infinite;
  -moz-animation: bounce 4s infinite;
  -webkit-animation: bounce 4s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes bounce {
  0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
  5% {-webkit-transform: translateY(-6px);}
  12% {-webkit-transform: translateY(-4px);}
}
@keyframes bounce {
  20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
  32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}
/* アニメーションを遅延させる */
.btn + .btn {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.btn-green{
	background: url(../images/btn-green.png) no-repeat;
	background-size: 420px 100%;
}

.btn-blue{
	background: url(../images/btn-blue.png) no-repeat;
	background-size: 420px 100%;
}
.btn-gold{
	width: 360px;
	height: 60px;
	padding-right: 1rem;
	background: url(../images/btn-gold.png) no-repeat;
	background-size: 360px 100%;
}
.btn-gold::before{
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../images/icon-crown.png) no-repeat;
	background-size: 2rem 2rem;
	position: absolute;
	top: 50%;
	left: 2rem;
	margin-top: -1.1rem;
}
.btn-gold::after{
	transform: rotate(-90deg)
}
.btn:hover{
	text-decoration: none;
	opacity: 0.8;
}

.btn-s{
	width: 200px;
	height: 40px;
	color: #fff;
	font-weight: bold;
	text-shadow:1px 1px 1px rgba(0,0,0,0.8);
	padding: 1rem;
	padding-right: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	font-feature-settings : "palt";
	letter-spacing: 0.05rem;
}
.btn-s::before{
	content: "";
	display: block;
	width: 9px;
	height: 12px;
	background: url(../images/arrow-right03.png) no-repeat;
	background-size: 9px 12px;
	position: absolute;
	top: 50%;
	right: 2rem;
	margin-top: -5px;
}
.btn-green-s{
	background: url(../images/btn-green.png) no-repeat;
	background-size: 200px 100%;
}
.btn-s:hover{
	text-decoration: none;
	opacity: 0.8;
}

.btn-blue{
	width: 420px;
	color: #fff;
	font-size: 120%;
	padding: 1rem;
	padding-right: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	background: #069;
	border-radius: 6px;
	box-shadow:2px 3px 0 0 rgba(0,0,0,0.2);
}
.btn-blue::after{
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../images/arrow-right04.png) no-repeat;
	background-size: 12px 20px;
	position: absolute;
	top: 50%;
	right: 2rem;
	margin-top: -10px;
}
.btn-blue:hover{
	text-decoration: none;
	opacity: 0.8;
}

.btn-blue-s{
	width: 200px;
	color: #fff;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	background: #069;
	border-radius: 6px;
	box-shadow:2px 3px 0 0 rgba(0,0,0,0.2);
}
.woman .btn-blue,
.woman .btn-blue-s{
	background: #cc337f;
}
.btn-blue-s:hover{
	text-decoration: none;
	opacity: 0.8;
}
.gray{background: #666;}

.btn-pink{
	width: 420px;
	color: #fff;
	font-size: 120%;
	padding: 1rem;
	padding-right: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	background: #cc337f;
	border-radius: 6px;
	box-shadow:2px 3px 0 0 rgba(0,0,0,0.2);
}
.btn-pink::after{
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	background: url(../images/arrow-right04.png) no-repeat;
	background-size: 12px 20px;
	position: absolute;
	top: 50%;
	right: 2rem;
	margin-top: -10px;
}
.btn-pink:hover{
	text-decoration: none;
	opacity: 0.8;
}

.btn-pink-s{
	width: 200px;
	color: #fff;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	background: #cc337f;
	border-radius: 6px;
	box-shadow:2px 3px 0 0 rgba(0,0,0,0.2);
}
.btn-pink-s:hover{
	text-decoration: none;
	opacity: 0.8;
}


/* ─────────────────────────────────────
	光るボタン
───────────────────────────────────── */
.shiny{
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	padding-top: 10px;
}
.shiny a {
  overflow: hidden;
}
.shiny a:after {
  -moz-animation: reflection 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: reflection 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: reflection 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: reflection 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーションを遅延させる */
.shiny + .shiny a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.xreflection{
	display: block;
	height: 100%;
	width: 30px;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 2s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflection 2s ease-in-out infinite;
	-moz-transform: rotate(45deg);
	-moz-animation: reflection 2s ease-in-out infinite;
	-ms-transform: rotate(45deg);
	-ms-animation: reflection 2s ease-in-out infinite;
	-o-transform: rotate(45deg);
	-o-animation: reflection 2s ease-in-out infinite;
}
.shiny-s .xreflection{
	width: 15px;
}
@keyframes reflection {
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { transform: scale(4) rotate(45deg); opacity: 1; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
	0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
	0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
	0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
	0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
	80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
	81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
	100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 光るボタン2、IEでは動かず 使うときは<span class="reflection"></span>を削除
.shiny{
	display: block;
}
.shiny a{
	z-index: 2;
	overflow: hidden;
}
.shiny a::before {
	display: block;
	position: absolute;
	z-index: -1;
	left: -30%;
	top: -50%;
	content: "";
	width: 30px;
	height: 100px;
	transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 	background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
	background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
	animation: shiny 2s infinite linear;
	-webkit-animation: shiny 2s infinite linear;
	-moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
	0% {
		left: -30%;
	}
	20% {
		left: 120%;
	}
	100% {
		left: 120%;
	}
}
@-webkit-keyframes shiny {
	0% {
		left: -30%;
	}
	20% {
		left: 120%;
	}
	100% {
		left: 120%;
	}
}
@-moz-keyframes shiny {
	0% {
		left: -30%;
	}
	20% {
		left: 120%;
	}
	100% {
		left: 120%;
	}
}
*/


/* ─────────────────────────────────────
	メインコンテンツ下のボタン
───────────────────────────────────── */
.btns{
	display: flex;
	justify-content: center;
}
.btns a{
	color: #fff;
	text-shadow:1px 1px 1px rgba(0,0,0,0.8);
	padding: 1.5rem 4rem;
	display: block;
	text-align: center;
	line-height: 1.4;
	border-radius: 10px;
}
.btns a:hover{
	text-decoration: none;
	opacity: 0.8;
}
.btns a span{
	display: block;
}
.btns a span:first-child{
	font-size: 125%;
}
.btns a span:last-child{
	font-size: 150%;
	font-weight: bold;
}
.btns a span:last-child::after{
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(../images/arrow-right02.png) no-repeat 0;
	background-size: 24px 24px;
	margin-left: 5px;
	position: relative;
	top: 3px;
}
.btns .btn-man{
	background: #006699;
	background: -moz-linear-gradient(left, #006699 0%, #00bfbf 100%);
	background: -webkit-linear-gradient(left, #006699 0%,#00bfbf 100%);
	background: linear-gradient(to right, #006699 0%,#00bfbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#00bfbf',GradientType=1 );
	border: solid 4px #c4e4f2;
	margin-right: 2rem;
}
.btns .btn-woman{
	background: #cc3399;
	background: -moz-linear-gradient(left, #cc3399 0%, #ff6699 100%);
	background: -webkit-linear-gradient(left, #cc3399 0%,#ff6699 100%);
	background: linear-gradient(to right, #cc3399 0%,#ff6699 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc3399', endColorstr='#00bfbf',GradientType=1 );
	border: solid 4px #f2c4e1;
}



/* ─────────────────────────────────────
	見出し
───────────────────────────────────── */
.hdrA{
	font-size: 150%;
	color: #997500;
	background: #f5f5f5;
	background: -moz-linear-gradient(left, #f5f5f5 0%, #fff 100%);
	background: -webkit-linear-gradient(left, #f5f5f5 0%,#fff 100%);
	background: linear-gradient(to right, #f5f5f5 0%,#fff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#fff',GradientType=1 );
	padding: 2rem;
	padding-left: 0;
	border-bottom: solid 1px #997500;
	display: flex;
	align-items: center;
	margin-bottom: 4rem;
	line-height: 1.5;
}
.hdrA::before{
	content: "";
	display: inline-block;
	width: 40px;
	height: 4px;
	background-color: #997500;
	margin-right: 1.5rem;
}
.hdrB{
	color: #997500;
	background: #f5f3ee;
	border: solid 1px #ccc4ad;
	padding: 1rem 2rem;
	font-weight: bold;
	font-size: 125%;
	margin-bottom: 2rem;
	line-height: 1.5;
}
.hdrC{
	color: #997500;
	border-bottom: solid 1px #997500;
	padding: 1rem;
	padding-top: 0;
	font-weight: bold;
	font-size: 110%;
	margin-bottom: 2rem;
	line-height: 1.5;
}


/* ─────────────────────────────────────
	写真
───────────────────────────────────── */
.photo{
	border: solid 4px #e5e5e5;
	padding: 3rem;
}
.photo span{
	display: inline-block;
	background: #e5e5e5;
	font-weight: bold;
	text-align: center;
	padding: 0.1rem 1.5rem;
	margin-right: 1rem;
}


/* ─────────────────────────────────────
	table
───────────────────────────────────── */
.table-info th{
	white-space: nowrap;
	background: #f2eee3;
	font-weight: bold;
}
.table-info th,
.table-info td{
	padding: 1rem 2rem;
	border-bottom: solid 1px #ccc4ad;
}
.table-info td{
	word-wrap: break-word;
}
.table-info tr:first-child th,
.table-info tr:first-child td{
	border-top: solid 1px #ccc4ad;
}
.table-info input,
.table-info textarea{
	width: 100%;
	border: solid 1px #ccc;
	padding: 0.2rem;
	margin: 1rem 0;
}
.table-info textarea{
	height: 200px;
}

.table-green{
	border-collapse: collapse;
	font-size: 90%;
}
.table-green caption{
	text-align: right;
}
.table-green th,
.table-green td{
	padding:1rem;
	vertical-align: middle;
	border: solid 1px #ccc;
}
.table-green th{
	background: #f7f7f7;
	width: 160px;
}
.table-green tr:first-child th{
	background: #d8f0d8;
	text-align: center;
	width: auto;
}
.woman .table-green tr:first-child th{
	background: #ffd8b2;
}
.table-green td{
	text-align: right;
}


.table-yellow{
	border-collapse: collapse;
	font-size: 90%;
}
.table-yellow caption{
	text-align: right;
}
.table-yellow th,
.table-yellow td{
	padding:1rem;
	vertical-align: middle;
	border: solid 1px #ccc;
}
.table-yellow th{
	background: #f7f7f7;
	width: 160px;
}
.table-yellow tr td:first-of-type{
	width: 109px;
}
.table-yellow tr:first-child th{
	background: #fff599;
	text-align: center;
	width: auto;
}
.table-yellow img{
	display: block;
	width: 90px;
	height: auto;
}


/* ─────────────────────────────────────
	おすすめHMB早見表
───────────────────────────────────── */
.table-hmb{
	border-collapse: collapse;
	table-layout: fixed;
	line-height: 1.4;
	font-size: 90%;
}
.table-hmb th,
.table-hmb td{
	padding: 1rem;
	border: solid 1px #999;
}
.table-hmb th{
	background: #ffffd9;
	font-weight: bold;
}
.table-hmb tr:first-child th{
	background: #bfe574;
}
.table-hmb th p{
	display: flex;
	align-items: center;
}
.table-hmb tr:first-child p{
	justify-content: center;
}
.table-hmb tr:first-child th img{
	width: 40px;
	height: auto;
	margin-right: 1rem;
}
.table-hmb tr th:first-child{
	width: 35%;
	padding: 1rem 2rem;
}
.table-hmb .product{
	width: 60px;
	height: 60px;
	margin-right: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.table-hmb th:first-child img{
	max-height: 60px;
	max-width: 60px;
	width: auto;
}
.table-hmb td{
	text-align: center;
}
.table-hmb td img{
	width: 109px;
	height: auto;
}


/* ─────────────────────────────────────
	header
───────────────────────────────────── */
header{
	background: #000;
}
header .inner{
	background: url(../images/h-bg.jpg) no-repeat right center;
	background-size: auto 280px;
	max-width: 1200px;
	height: 150px;
	padding: 1rem 0;
	padding-left: 2rem;
	position: relative;
	margin: auto;
}
header h1{
	color: #fff;
	margin-bottom: 1rem;
	position: absolute;
}
header .inner div{
	display: flex;
	align-items: center;
}
header .inner div p:first-child{
	margin-right: 1rem;
}
header .inner-inner{
	margin-top: 4rem;
}

.top header .inner{
	background: url(../images/h-bg.jpg) no-repeat right 20px center;
	background-size: auto 460px;
	height: 460px;
	width: 100%;
	max-width: 1280px;
	position: relative;
}
.top.woman header .inner{
	background: url(../images/h-bg-w.jpg) no-repeat right 80px center;
	background-size: auto 460px;
}
.top header .btns{
	width: auto;
	position: absolute;
	right: 2rem;
	bottom: 20px;
}


/* ─────────────────────────────────────
	main
───────────────────────────────────── */
main{
	width: calc(100% - 240px);
	margin-right: 5rem;
	margin-bottom: 5rem;
}
main section{
	margin-bottom: 6rem;
}
main section .inner{
	margin: 0 2rem;
}


/* ─────────────────────────────────────
	side
───────────────────────────────────── */
.side{
	width: 240px;
	font-size: 90%;
}
.woman .side{
	display: flex;
	flex-flow: column nowrap;
}
.woman .side-woman{
	order: -1;
}
.side div{
	margin-bottom: 2rem;
}

/* ─── 人気HMBサプリ ─── */
.lp aside{
	display: block;
}
.side-menu01 h5{
	width: 240px;
	color: #fff;
	font-weight: bold;
	font-size: 120%;
	text-shadow:1px 1px 1px rgba(0,0,0,0.8);
	padding: 1rem;
	padding-left: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.side-man h5{
	background: #006699;
	background: -moz-linear-gradient(left, #006699 0%, #00bfbf 100%);
	background: -webkit-linear-gradient(left, #006699 0%,#00bfbf 100%);
	background: linear-gradient(to right, #006699 0%,#00bfbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#00bfbf',GradientType=1 );
}
.side-woman h5{
	background: #cc3399;
	background: -moz-linear-gradient(left, #cc3399 0%, #ff6699 100%);
	background: -webkit-linear-gradient(left, #cc3399 0%,#ff6699 100%);
	background: linear-gradient(to right, #cc3399 0%,#ff6699 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc3399', endColorstr='#00bfbf',GradientType=1 );
}
.side-menu01 h5::before{
	display: inline-block;
	content: "";
	width: 24px;
	height: 24px;
	background-image: url(../images/icon-crown.png);
	background-size: 24px 24px;
	margin-right: 0.5rem;
	position: relative;
	top: -3px;
}
.side-menu01 li{
	list-style: none;
	display: flex;
	align-items: center;
	line-height: 1.4;
	padding: 1rem;
	padding-left: 5rem;
	width: 240px;
	border: solid 1px;
	border-bottom: 0;
}
.side-menu01 li a{
	color: #000;
	font-weight: bold;
}
.side-menu01 li span{
	display: block;
	width: 35px;
	height: auto;
	margin-right: 1rem;
}
.side-menu01 li:nth-child(1){
	background: url(../images/icon-01.png) no-repeat 1.5rem center;
	background-size: 24px auto;
}
.side-menu01 li:nth-child(2){
	background: url(../images/icon-02.png) no-repeat 1.5rem center;
	background-size: 24px auto;
}
.side-menu01 li:nth-child(3){
	background: url(../images/icon-03.png) no-repeat 1.5rem center;
	background-size: 24px auto;
	border-bottom: solid 1px;
}
.side-man li{
	border-color: #069 !important;
}
.side-woman li{
	border-color: #c39 !important;
}

/* ─── 成分解説・トレーニング・コラム ─── */
.side-menu02 h5{
	width: 240px;
	height: 80px;
	display: flex;
	align-items: center;
	padding-left: 1.5rem;
	color: #fff;
	font-weight: bold;
	font-size: 120%;
	text-shadow:1px 1px 1px #000;
}
.seibun h5{
	background: url(../images/side-bnr-seibun.jpg) no-repeat;
	background-size: 240px 80px;
}
.training h5{
	background: url(../images/side-bnr-training.jpg) no-repeat;
	background-size: 240px 80px;
}
.column h5{
	background: url(../images/side-bnr-column.jpg) no-repeat;
	background-size: 240px 80px;
}
.side-menu02 li{
	width: 240px;
	list-style: none;
	border: solid 1px #b2b2b2;
	border-bottom: 0;
	padding: 1rem;
	padding-left: 3.5rem;
	background: url(../images/arrow-right.png) no-repeat 1.5rem center;
	background-size: 9px auto;
}
.side-menu02 li:last-child{
	border-bottom: solid 1px #b2b2b2;
}
.side-menu02 li a{
	color: #000;
}


/* ─────────────────────────────────────
	footer
───────────────────────────────────── */
footer{
	background: #4c4c4c;
	color: #fff;
	padding: 3rem 0;
	line-height: 1.2;
}
footer .inner{
	max-width: 1200px;
	margin: auto;
	display: flex;
	justify-content: space-between;
}
footer ul{
	display: flex;
}
footer li{
	font-size: 90%;
	list-style: none;
}
footer li:first-child{
	border-right: solid 1px #fff;
	margin-right: 1rem;
	padding-right: 1rem;
}
footer li a{
	color: #fff;
}


/* ─────────────────────────────────────
	ランキング
───────────────────────────────────── */
/* ─── 導入 ─── */
.intro{
	background: #d9d9d9;
	background: -moz-linear-gradient(-45deg, #d9d9d9 0%, #fcfcfc 24%, #d9d9d9 50%, #fcfcfc 79%, #d9d9d9 100%);
	background: -webkit-linear-gradient(-45deg, #d9d9d9 0%,#fcfcfc 24%,#d9d9d9 50%,#fcfcfc 79%,#d9d9d9 100%);
	background: linear-gradient(135deg, #d9d9d9 0%,#fcfcfc 24%,#d9d9d9 50%,#fcfcfc 79%,#d9d9d9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9d9d9', endColorstr='#d9d9d9',GradientType=1 );
	padding: 5px;
}
.woman .intro{
	background: #ffd6ff;
	background: -moz-linear-gradient(-45deg, #ffd6ff 0%, #fff0ff 24%, #ffd6ff 50%, #fff0ff 79%, #ffd6ff 100%);
	background: -webkit-linear-gradient(-45deg, #ffd6ff 0%,#fff0ff 24%,#ffd6ff 50%,#fff0ff 79%,#ffd6ff 100%);
	background: linear-gradient(135deg, #ffd6ff 0%,#fff0ff 24%,#ffd6ff 50%,#fff0ff 79%,#ffd6ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd6ff', endColorstr='#ffd6ff',GradientType=1 );
	padding: 5px;
}
.intro .inner{
	background: #fff url(../images/bg-intro.jpg) no-repeat right center;
	background-size: auto 100%;
	width: 100%;
	margin: 0;
	padding: 2rem;
}
.intro .inner.inner2{
	background: #fff url(../images/bg-intro-y.jpg) no-repeat right center;
	background-size: auto 100%;
	width: 100%;
	margin: 0;
	padding: 2rem;
}
.woman .intro .inner{
	background: #fff url(../images/bg-intro-w.jpg) no-repeat right center;
	background-size: auto 100%;
}
.intro h2{
	background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	color: #fff;
	font-size: 120%;
	padding: 1rem;
	margin-left: -2rem;
	margin-bottom: 2rem;
}
.woman .intro h2{
	background: -moz-linear-gradient(left, rgba(204,51,153,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(204,51,153,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(204,51,153,1) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c39', endColorstr='#00000000',GradientType=1 );
}

/* ─── 並び替えボタン ─── */
.sort{
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	font-size: 90%;
	margin-bottom: 2rem;
}
.sort li{
	list-style: none;
	border: solid 1px #000;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 18%;
	border-left: 0;
	padding: 0.5rem 0;
	font-feature-settings : "palt";
}
.woman .sort li{
	border-color: #990033;
}
.sort li:first-child{
	background: #000;
	color: #fff;
	border-radius: 5px 0 0 5px;
	width: 10%;
}
.woman .sort li:first-child{
	background: #990033;
}
.sort li:last-child{
	border-radius: 0 5px 5px 0;
}
.sort span{
	display: inline-block;
	background: #808080;
	border-radius: 5px;
	width: 2.4rem;
	height: 2.4rem;
	margin-left: 5px;
	position: relative;
}
.sort span:hover{
	cursor: pointer;
	opacity: 0.8;
}
.sort .des::after{
	content: "";
	display: block;
	margin: auto;
	margin-top: 0.8rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 5px 0 5px;
	border-color: #ffffff transparent transparent transparent;
}
.sort .as::after{
	content: "";
	display: block;
	margin: auto;
	margin-top: 0.8rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 5px 8px 5px;
	border-color: transparent transparent #ffffff transparent;
}

.rank{
	padding-bottom: 4rem;
	border-bottom: solid 2px #ccc;
	margin-bottom: 4rem;
}

/* ─── 見出し ─── */
.rank h2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 75px;
	flex-wrap: wrap;
	padding: 1rem;
	padding-left: 3rem;
	margin-bottom: 2rem;
	position: relative;
}
/*.lp .rank h2{
	padding-left: 1rem;
	margin-left: 0;
}*/
.rank h2::before,
.rank h2::after{
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	position: absolute;
	left: 0;
}
.rank h2::before{
	top: 0;
}
.rank h2::after{
	bottom: 0;
}
.rank .p-name{
	line-height: 1.4;
	width: calc(100% - 220px);
}
.rank .p-name p:first-child{
	font-size: 150%;
	margin-bottom: 0.5rem;
}
.rank .rate{
	text-align: center;
	margin-bottom: 0.5rem;
	width: 200px;
}
.rank .rate p{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 120%;
}
.rank .rate img{
	width: 109px;
	height: 20px;
	margin-right: 0.5rem;
}

/* ─── 各ランクのメダル・色設定 ─── */
.rank01 .h2-wrap{background: url(../images/medal01.png) no-repeat left center;background-size: auto 90px;}
.rank02 .h2-wrap{background: url(../images/medal02.png) no-repeat left center;background-size: auto 90px;}
.rank03 .h2-wrap{background: url(../images/medal03.png) no-repeat left center;background-size: auto 90px;}
.rank04 .h2-wrap{background: url(../images/medal04.png) no-repeat left center;background-size: auto 90px;}
.rank05 .h2-wrap{background: url(../images/medal05.png) no-repeat left center;background-size: auto 90px;}
.rank06 .h2-wrap{background: url(../images/medal06.png) no-repeat left center;background-size: auto 90px;}
.rank07 .h2-wrap{background: url(../images/medal07.png) no-repeat left center;background-size: auto 90px;}
.rank08 .h2-wrap{background: url(../images/medal08.png) no-repeat left center;background-size: auto 90px;}
.rank09 .h2-wrap{background: url(../images/medal09.png) no-repeat left center;background-size: auto 90px;}
.rank10 .h2-wrap{background: url(../images/medal10.png) no-repeat left center;background-size: auto 90px;}
.rank11 .h2-wrap{background: url(../images/medal11.png) no-repeat left center;background-size: auto 90px;}
.rank12 .h2-wrap{background: url(../images/medal12.png) no-repeat left center;background-size: auto 90px;}
.rank13 .h2-wrap{background: url(../images/medal13.png) no-repeat left center;background-size: auto 90px;}
.rank14 .h2-wrap{background: url(../images/medal14.png) no-repeat left center;background-size: auto 90px;}
.rank15 .h2-wrap{background: url(../images/medal15.png) no-repeat left center;background-size: auto 90px;}

.woman .rank04 .h2-wrap{background: url(../images/medal04-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank05 .h2-wrap{background: url(../images/medal05-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank06 .h2-wrap{background: url(../images/medal06-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank07 .h2-wrap{background: url(../images/medal07-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank08 .h2-wrap{background: url(../images/medal08-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank09 .h2-wrap{background: url(../images/medal09-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank10 .h2-wrap{background: url(../images/medal10-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank11 .h2-wrap{background: url(../images/medal11-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank12 .h2-wrap{background: url(../images/medal12-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank13 .h2-wrap{background: url(../images/medal13-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank14 .h2-wrap{background: url(../images/medal14-w.png) no-repeat left center;background-size: auto 90px;}
.woman .rank15 .h2-wrap{background: url(../images/medal15-w.png) no-repeat left center;background-size: auto 90px;}

/*.lp .h2-wrap{background: 0;}*/

.rank01 h2::before,
.rank01 h2::after{
	background: rgb(191,153,0);
	background: -moz-linear-gradient(left, rgba(191,153,0,1) 0%, rgba(240,214,89,1) 50%, rgba(191,153,0,1) 100%);
	background: -webkit-linear-gradient(left, rgba(191,153,0,1) 0%,rgba(240,214,89,1) 50%,rgba(191,153,0,1) 100%);
	background: linear-gradient(to right, rgba(191,153,0,1) 0%,rgba(240,214,89,1) 50%,rgba(191,153,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9900', endColorstr='#bf9900',GradientType=1 );
}
.rank01 .p-photo{
	background: rgb(191,153,0);
	background: -moz-linear-gradient(-45deg, rgba(191,153,0,1) 0%, rgba(245,220,98,1) 25%, rgba(191,153,0,1) 50%, rgba(245,220,98,1) 75%, rgba(191,153,0,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(191,153,0,1) 0%,rgba(245,220,98,1) 25%,rgba(191,153,0,1) 50%,rgba(245,220,98,1) 75%,rgba(191,153,0,1) 100%);
	background: linear-gradient(135deg, rgba(191,153,0,1) 0%,rgba(245,220,98,1) 25%,rgba(191,153,0,1) 50%,rgba(245,220,98,1) 75%,rgba(191,153,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9900', endColorstr='#bf9900',GradientType=1 );
}

.rank02 h2::before,
.rank02 h2::after{
	background: rgb(153,153,153);
	background: -moz-linear-gradient(left, rgba(153,153,153,1) 0%, rgba(217,217,217,1) 50%, rgba(153,153,153,1) 100%);
	background: -webkit-linear-gradient(left, rgba(153,153,153,1) 0%,rgba(217,217,217,1) 50%,rgba(153,153,153,1) 100%);
	background: linear-gradient(to right, rgba(153,153,153,1) 0%,rgba(217,217,217,1) 50%,rgba(153,153,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#999',GradientType=1 );
}
.rank02 .p-photo{
	background: rgb(153,153,153);
	background: -moz-linear-gradient(-45deg, rgba(153,153,153,1) 0%, rgba(217,217,217,1) 25%, rgba(153,153,153,1) 50%, rgba(217,217,217,1) 75%, rgba(153,153,153,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(153,153,153,1) 0%,rgba(217,217,217,1) 25%,rgba(153,153,153,1) 50%,rgba(217,217,217,1) 75%,rgba(153,153,153,1) 100%);
	background: linear-gradient(135deg, rgba(153,153,153,1) 0%,rgba(217,217,217,1) 25%,rgba(153,153,153,1) 50%,rgba(217,217,217,1) 75%,rgba(153,153,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#999',GradientType=1 );
}

.rank03 h2::before,
.rank03 h2::after{
	background: rgb(153,153,153);
	background: -moz-linear-gradient(left, rgba(153,114,76,1) 0%, rgba(229,183,137,1) 50%, rgba(153,114,76,1) 100%);
	background: -webkit-linear-gradient(left, rgba(153,114,76,1) 0%,rgba(229,183,137,1) 50%,rgba(153,114,76,1) 100%);
	background: linear-gradient(to right, rgba(153,114,76,1) 0%,rgba(229,183,137,1) 50%,rgba(153,114,76,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99724c', endColorstr='#99724c',GradientType=1 );
}
.rank03 .p-photo{
	background: rgb(153,114,76);
	background: -moz-linear-gradient(-45deg, rgba(153,114,76,1) 0%, rgba(229,183,137,1) 25%, rgba(153,114,76,1) 50%, rgba(229,183,137,1) 75%, rgba(153,114,76,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(153,114,76,1) 0%,rgba(229,183,137,1) 25%,rgba(153,114,76,1) 50%,rgba(229,183,137,1) 75%,rgba(153,114,76,1) 100%);
	background: linear-gradient(135deg, rgba(153,114,76,1) 0%,rgba(229,183,137,1) 25%,rgba(153,114,76,1) 50%,rgba(229,183,137,1) 75%,rgba(153,114,76,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99724c', endColorstr='#99724c',GradientType=1 );
}

.rank04 h2::before, .rank05 h2::before,
.rank04 h2::after, .rank05 h2::after{
	background: rgb(0,102,153);
	background: -moz-linear-gradient(left, rgba(0,102,153,1) 0%, rgba(0,191,191,1) 50%, rgba(0,102,153,1) 100%);
	background: -webkit-linear-gradient(left, rgba(0,102,153,1) 0%,rgba(0,191,191,1) 50%,rgba(0,102,153,1) 100%);
	background: linear-gradient(to right, rgba(0,102,153,1) 0%,rgba(0,191,191,1) 50%,rgba(0,102,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#069', endColorstr='#069',GradientType=1 );
}
.rank04 .p-photo, .rank05 .p-photo{
	background: rgb(0,102,153);
	background: -moz-linear-gradient(-45deg, rgba(0,102,153,1) 0%, rgba(0,191,191,1) 25%, rgba(0,102,153,1) 50%, rgba(0,191,191,1) 75%, rgba(0,102,153,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(0,102,153,1) 0%,rgba(0,191,191,1) 25%,rgba(0,102,153,1) 50%,rgba(0,191,191,1) 75%,rgba(0,102,153,1) 100%);
	background: linear-gradient(135deg, rgba(0,102,153,1) 0%,rgba(0,191,191,1) 25%,rgba(0,102,153,1) 50%,rgba(0,191,191,1) 75%,rgba(0,102,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#069', endColorstr='#069',GradientType=1 );
}

.woman .rank04 h2::before, .woman .rank05 h2::before,
.woman .rank04 h2::after, .woman .rank05 h2::after{
	background: rgb(204,51,153);
	background: -moz-linear-gradient(left, rgba(204,51,153,1) 0%, rgba(255,102,153,1) 50%, rgba(204,51,153,1) 100%);
	background: -webkit-linear-gradient(left, rgba(204,51,153,1) 0%,rgba(255,102,153,1) 50%,rgba(204,51,153,1) 100%);
	background: linear-gradient(to right, rgba(204,51,153,1) 0%,rgba(255,102,153,1) 50%,rgba(204,51,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#069', endColorstr='#069',GradientType=1 );
}
.woman .rank04 .p-photo, .woman .rank05 .p-photo{
	background: rgb(204,51,153);
	background: -moz-linear-gradient(-45deg, rgba(204,51,153,1) 0%, rgba(255,102,153,1) 25%, rgba(204,51,153,1) 50%, rgba(255,102,153,1) 75%, rgba(204,51,153,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(204,51,153,1) 0%,rgba(255,102,153,1) 25%,rgba(204,51,153,1) 50%,rgba(255,102,153,1) 75%,rgba(204,51,153,1) 100%);
	background: linear-gradient(135deg, rgba(204,51,153,1) 0%,rgba(255,102,153,1) 25%,rgba(204,51,153,1) 50%,rgba(255,102,153,1) 75%,rgba(204,51,153,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#069', endColorstr='#069',GradientType=1 );
}

.rank06more h2::before,
.rank06more h2::after,
.rank06more .p-photo{
	background: #739999;
}

.woman .rank06more h2::before,
.woman .rank06more h2::after,
.woman .rank06more .p-photo{
	background: #e5a0a0;
}


/* ─── 商品情報 ─── */
.p-info{
	display: flex;
	justify-content: space-between;
	margin-bottom: 3rem;
}
.p-photo{
	width: 250px;
	height: 250px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
}
.p-photo p{
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(232,232,232,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(232,232,232,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(232,232,232,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=0 );
	width: 100%;
	height: 100%;
	padding: 3rem;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.p-photo p img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.p-info div:last-child{
	width: calc(100% - 280px);
}
.list-check02{
	padding: 2rem;
	padding-bottom: 1rem;
	border: solid 3px #999;
}
.list-check02 li{
	list-style: none;
	background: url(../images/icon-check02.png) no-repeat left 5px;
	background-size: 24px auto;
	padding-left: 3rem;
	margin-bottom: 1rem;
}
.tag li{
	list-style: none;
	display: inline-block;
	background: #f2f2f2;
	border: solid 1px #ccc;
	border-radius: 3px;
	line-height: 1;
	padding: 0.6rem;
	margin-right: 0.6rem;
	margin-bottom: 0.6rem;
	color: #666;
	font-size: 90%;
}
.tag .caution{
	border-color: #c00;
	color: #c00;
	background: #ffe5e5;
}

/* ─── ランキング上位をもう一度見る ─── */
.upper{
	background: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	padding: 2rem;
}
.upper img{
	width: auto;
	height: 180px;
	margin-left: 2rem;
}
.upper p{
	background: #b7e5e5;
	font-weight: bold;
	text-align: center;
	padding: 1rem 4rem;
	border-radius: 4rem;
	position: relative;
	margin-bottom: 3rem;
}
.woman .upper p{
	background: #ffd8b2;
}
.upper p::after{
	position: absolute;
	bottom: -1.5rem;
	right: 2rem;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0px 0 30px;
	border-color: transparent;
	border-top-color: #b7e5e5;
}
.woman .upper p::after{
	border-top-color: #ffd8b2;
}

/* ─── 商品を探す ─── */
.search{
	padding: 2rem;
	padding-bottom: 3rem;
	border: solid 2px #069;
	background: #fafafa;
	margin-bottom: 0;
}
.woman .search{
	background: #fcfcee;
	border-color: #cc337f
}
.search h4{
	color: #069;
	font-size: 125%;
	border-bottom: solid 2px #069;
	margin-bottom: 1rem;
	padding: 0.5rem 1rem;
}
.woman .search h4{
	color: #cc337f;
	border-bottom-color: #cc337f
}
.search table th,
.search table td{
	text-align: left;
	padding: 1rem;
	border-bottom: solid 1px #ccc;
	vertical-align: top;
}
.search table th{
	white-space: nowrap;
}
.search table label{
	display: inline-block;
	margin-right: 2rem;
}
.search input{
	margin-right: 0.5rem;
	font-size: 120%;
}
.search label,
.search input[type='checkbox']{
	cursor: pointer;
}


/* ─────────────────────────────────────
	お問い合わせフォーム
───────────────────────────────────── */
.error_messe{
	color: #c00;
	font-weight: bold;
	margin-bottom: 3rem;
}
.contact-btns{
	display: flex;
	justify-content: center;
}
.contact-btns button{
	margin: 0 1rem;
}




/* スマホ向け指定 ここから ───────────────────────────────────── */
@media only screen and (max-width:767px){
body{font-size: 1.4rem;}
.wrap{margin: 1.5rem; display: block;}
.topicpath{margin: 1rem;}
.sp-none{display: none;}


/* ─────────────────────────────────────
	SP - header
───────────────────────────────────── */
header .inner{
	background: url(../images/sp-h-bg.jpg) no-repeat right -30px center;
	background-size: auto 120%;
	height: auto;
	padding: 0;
}
.top.woman header .inner{
	background: url(../images/sp-h-bg-w.jpg) no-repeat right -100px center !important;
	background-size: auto 100% !important;
}
header h1{
	font-size: 80%;
	padding: 0.5rem 1rem;
	margin-bottom: 0;
	background: #b70000;
	position: relative;
	line-height: 1.4;
}
header .inner-inner{
	padding: 1rem;
	margin: 0;
}

.top header{
	margin-bottom: 3rem;
}
.top header .inner{
	background: url(../images/sp-h-bg.jpg) no-repeat right -80px bottom;
	background-size: auto 100%;
	height: auto;
}
.top header .inner-inner{
	display: block;
	padding: 2rem;
}
.top header .inner-inner img{
	max-width: 400px;
	margin-bottom: 1rem;
}
.top header .inner-inner p{
	text-align: center;
}
.top header .inner div p:first-child{
	margin-right: 0;
}
.top header .btns{
	position: static;
	font-size: 80%;
	width: 100%;
}
.top header .btns a{
	padding: 1rem;
	width: 100%;
}
.btns a span:last-child::after{
	width: 20px;
	height: 20px;
	background: url(../images/arrow-right02.png) no-repeat 0;
	background-size: 20px 20px;
}


/* ─────────────────────────────────────
	SP - main
───────────────────────────────────── */
main{
	width: 100%;
	margin-right: 0;
}
main section{
	margin-bottom: 4rem;
}
main section .inner{
	margin: 0;
}
.s-mt3{
	margin-top: 3rem !important;
}


/* ─────────────────────────────────────
	SP - side
───────────────────────────────────── */
.side{
	width: 100%;
	margin: 4rem auto;
	max-width: 640px;
	font-size: 100%;
}
.side-menu01 li{
	width: auto;
}
.side-menu02 li{
	width: 100%;
}
.side-menu01 h5{
	width: 100%;
}
.side-menu02 h5{
	width: auto;
	background-position: right;
	font-size: 130%;
}
.seibun h5{
	background-color: #999;
}
.training h5{
	background-color: #4b4644;
}
.column h5{
	background-color: #3c3631;
}


/* ─────────────────────────────────────
	SP - footer
───────────────────────────────────── */
footer{
	padding: 1.5rem;
}
footer .inner{
	flex-wrap :wrap;
	flex-direction: column-reverse;
}
footer ul{
	width: 100%;
	margin-bottom: 1rem;
}
footer small{
	display: block;
	width: 100%;
}


/* ─────────────────────────────────────
	SP - 2カラム
───────────────────────────────────── */
.c2{
	display: block;
}
.c2 div{
	width: 100%;
}


/* ─────────────────────────────────────
	SP - ふきだし
───────────────────────────────────── */
/* ─── 口コミ ─── */
.fb p:first-child{
	width: auto;
	padding-top: 50px;
	margin-top: 20px;
}
.fb-p p:first-child{
	background-size: 40px auto;
}
.fb-n p:first-child{
	background-size: 40px auto;
}
.fb p:first-child span{
	padding: 0.1rem 0.5rem;
}
.fb .comment{
	width: calc(100% - 90px);
}

/* ─── 会話 ─── */
.c-user{
	background: url(../images/icon-user.png) no-repeat 0 20px;
	background-size: 50px auto;
}
.c-user p{
	margin-left: 80px;
}
.c-trainer-m{
	background-size: 50px auto;
}
.c-trainer-w{
	background-size: 50px auto;
}
.c-trainer-m p,
.c-trainer-w p{
	margin-right: 80px;
}

/* ─── 指差しのキャラ ─── */
.trainer-m{
	background: url(../images/img-trainer-m01.png) no-repeat right top;
	background-size: auto 120px;
	min-height: 120px;
}
.trainer-w{
	background: url(../images/img-trainer-w01.png) no-repeat right top;
	background-size: auto 120px;
	min-height: 120px;
}
.trainer-m p,
.trainer-w p{
	margin-right: 100px;
}

/* ─── トレーニング中のキャラ ─── */
.trainer-m02,
.trainer-w02{
	background-size: auto 120px !important;
	min-height: 120px;
}
.trainer-m02 p,
.trainer-w02 p{
	margin-left: 100px;
}

/* ─── ここがポイント ─── */
.point-m{
	background-size: auto 120px;
	background-position: left 40px;
	min-height: 160px;
}
.point-w{
	background-size: auto 120px;
	background-position: left 40px;
	min-height: 160px;
}
.point-m p,
.point-w p{
	margin-left: 90px;
	padding-left: 2rem;
	text-indent: 4rem;
}
.point-m p::before,
.point-w p::before{
	top: 100px;
	text-indent: 0;
}
.point-m p::after,
.point-w p::after{
	width: 80px;
	height: 80px;
	top: -5px;
	left: -5px;
	background-size: 80px 80px;
}


/* ─────────────────────────────────────
	SP - ボタン
───────────────────────────────────── */
.btn-up{
	bottom: 4rem;
	width: 40px;
	height: 40px;
}
.btns{
	display: block;
	max-width: 480px;
	margin: auto;
}
.btns a{
	padding: 1.5rem 1rem;
}
.btns .btn-man{
	margin-right: 0;
	margin-bottom: 1rem;
}
.btn{
	width: 100%;
	max-width: 420px;
	height: auto;
	padding-left: 2rem;
}
.btn::after{
	right: 1.5rem;
}
.btn-green{
	background-size: 100% 100%;
}
.btn-gold{
	width: 100%;
	max-width: 360px;
	height: 50px;
	background-size: 100% 100%;
	font-size: 100%;
	padding-right: 2rem;
}
.btn-gold::after{
	width: 1.8rem;
	height: 1.8rem;
	background-size: 1.8rem 1.8rem;
	right: 1rem;
	margin-top: -0.9rem;
}
.btn-gold::before{
	width: 2rem;
	height: 2rem;
	background-size: 2rem 2rem;
	left: 1rem;
	margin-top: -1.1rem;
}
.btn-blue{
	width: 100%;
	max-width: 420px;
}
.btn-blue::after{
	right: 1.5rem;
}
.btn-pink{
	width: 100%;
	max-width: 420px;
}
.btn-pink::after{
	right: 1.5rem;
}


/* ─────────────────────────────────────
	SP - 見出し
───────────────────────────────────── */
.hdrA{
	font-size: 120%;
	padding: 1rem;
	padding-left: 0;
	margin-bottom: 2rem;
}
.hdrA::before{
	width: 20px;
	height: 3px;
	margin-right: 1rem;
}


/* ─────────────────────────────────────
	SP - 写真ボックス
───────────────────────────────────── */
.photo{
	padding: 1rem;
}
.photo img{
	max-width: 100% !important;
}


/* ─────────────────────────────────────
	SP - table
───────────────────────────────────── */
.tableA th,
.tableA td{
	width: 100%;
	display: block;
	border-bottom: 0;
}
.tableA td{text-align: center;}

/* スマホで表を横スクロール */
.scroll{overflow: auto; white-space: nowrap;}
.scroll::-webkit-scrollbar{height: 5px;}
.scroll::-webkit-scrollbar-track{background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb{background: #BCBCBC;}

.table-green{
	border-collapse: collapse;
	font-size: 90%;
}
.table-green caption{
	text-align: left;
}
.table-green th,
.table-green td{
	padding:1rem;
	vertical-align: middle;
	border: solid 1px #ccc;
}
.table-green th{
	background: #f7f7f7;
	width: 160px;
}
.table-green tr:first-child th{
	background: #d8f0d8;
	text-align: center;
	width: auto;
}
.table-green td{
	text-align: right;
}

.table-yellow{
	border-bottom: solid 1px #ccc;
}
.table-yellow th,
.table-yellow td{
	display: block;
	border-bottom: 0;
}
.table-yellow th{
	width: 100%;
	background: #fff599;
}
.table-yellow tr:first-child th{
	display: none;
}
.table-yellow tr td:first-of-type{
	width: 100%;
}
.table-yellow img{
	margin: auto;
}
.table-hmb-sp{
	border-collapse: collapse;
	table-layout: fixed;
}
.table-hmb-sp th,
.table-hmb-sp td{
	border: solid 1px #ccc;
	padding: 1rem;
	line-height: 1.2;
	text-align: center;
}
.table-hmb-sp th{
	background: #ffffd9;
}
.table-hmb-sp .product{
	background: #bfe574;
	font-weight: bold;
}
.table-hmb-sp .product p{
	display: flex;
	justify-content: center;
	align-items: center;
}
.table-hmb-sp .product img{
	height: 50px;
	width: auto;
	margin-right: 1rem;
}
.table-hmb-sp td img{
	vertical-align: middle;
	max-width: 109px;
}


/* ─────────────────────────────────────
	SP - ランキング
───────────────────────────────────── */
/* ─── 導入 ─── */
.intro .inner{
	background: #fff url(../images/bg-intro.jpg) no-repeat right center;
	background-size: auto 100%;
	padding: 1.5rem;
}
.intro h2{
	font-size: 100%;
	margin-left: -1.5rem;
	margin-bottom: 1.5rem;
}

/* ─── 並び替えボタン ─── */
.sort{
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
.sort li{
	border-top: 0;
	width: 50%;
	padding: 0.5rem;
}
.sort li:first-child{
	width: 100%;
	border-radius: 5px 5px 0 0;
}
.sort li:last-child{
	width: 100%;
	border-radius: 0 0 5px 5px;
}
.sort li:nth-child(even){
	border-left: solid 1px #000;
}

/* ─── 見出し ─── */
.rank h2{
	margin-left: 50px;
	padding-left: 1rem;
}
.rank .p-name{
	width: 100%;
}
.rank .p-name p:last-child{
	line-height: 1.5;
}
.rank .rate{
	margin-top: 0.5rem;
	width: 100%;
}
.rank .rate p{
	justify-content: left;
	margin-bottom: 0.5rem;
}
.rank .rate a{
	margin-right: 0;
}
.rank .rate img{
	margin-bottom: 0.5rem;
}
.rank .h2-wrap{
	background-position: left top;
}
.h2-wrap{
	background-size: auto 50px !important;
}

/* ─── 商品情報 ─── */
.p-info{
	display: block;
	margin-bottom: 3rem;
}
.p-photo{
	margin: auto;
	margin-bottom: 2rem;
	width: 100%;
	max-width: 420px;
}
.p-info div:last-child{
	width: 100%;
}
.list-check02 li{
	background: url(../images/icon-check02.png) no-repeat left 2px;
	background-size: 20px auto;
	line-height: 1.5;
}

/* ─── ランキング上位をもう一度見る ─── */
.upper{
	display: block;
	padding: 1.5rem;
	background: #f2f2f2 url(../images/img-trainer-m01.png) no-repeat top 1.5rem right 1.5rem;
	background-size: 60px; auto;
}
.woman .upper{
	background: #f2f2f2 url(../images/img-trainer-w02.png) no-repeat top 1.5rem right 1.5rem;
	background-size: 60px; auto;
}
.upper.bg-none{
	background-image: none;
}
.upper img{
	display: none;
}
.upper p{
	padding: 2rem;
	width: calc(100% - 70px);
	margin-bottom: 2rem;
}
.upper p::after{
	bottom: 15px;
	right: -10px;
	border-width: 10px 0 10px 30px;
	border-color: transparent transparent transparent #b7e5e5;
}
.woman .upper p::after{
	bottom: 15px;
	right: -10px;
	border-width: 10px 0 10px 30px;
	border-color: transparent transparent transparent #ffd8b2;
}


/* スマホ向け指定 ここまで ───────────────────────────────────── */
}





/* ─────────────────────────────────────
	タブレット・その他指定
───────────────────────────────────── */
@media screen and (min-width:768px) and (max-width:1200px) {

.topicpath{margin: 2rem;}
.wrap{margin: 2rem 2rem 4rem;}
.btn-up{bottom: 6rem;}
main section .inner{margin: 0;}
footer{padding: 3rem 2rem;}

/* ─── header ─── */
header .inner{padding: 1rem 2rem; background-position: right -30px center;}
.top header{
	margin-bottom: 3rem;
}
.top header .inner{
	background: url(../images/h-bg.jpg) no-repeat right -40px bottom;
	background-size: auto 100%;
	height: auto;
}
.woman.top header .inner{
	background: url(../images/sp-h-bg-w.jpg) no-repeat right 0 center !important;
	background-size: auto 100% !important;
}
.top header .inner-inner{
	display: block;
}
.top header .inner-inner img{
	max-width: 400px;
	margin: 0.5rem 0 1rem;
}
.top header .btns{
	right: 2rem;
	font-size: 80%;
	line-height: 1.5;
}
}/*@media screen and (min-width:768px) and (max-width:1200px)*/



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

/* ─── 並び替えボタン ─── */
.sort{
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
.sort li{
	border-top: 0;
	width: 50%;
	padding: 0.5rem;
}
.sort li:first-child{
	width: 100%;
	border-radius: 5px 5px 0 0;
}
.sort li:last-child{
	width: 100%;
	border-radius: 0 0 5px 5px;
}
.sort li:nth-child(even){
	border-left: solid 1px #000;
}

/* ─── 見出し ─── */
.rank .rate{
	margin-top: 0.5rem;
	width: 100%;
}
.rank .rate p{
	justify-content: left;
	margin-bottom: 0.5rem;
}
.rank .rate a{
	margin-right: 0;
}
.rank .p-name{
	width: 100%;
}

/* ─── 商品情報 ─── */
.p-info{
	display: block;
	margin-bottom: 3rem;
}
.p-photo{
	margin: auto;
	margin-bottom: 2rem;
	width: 100%;
	max-width: 420px;
}
.p-info div:last-child{
	width: 100%;
}
.list-check02 li{
	background: url(../images/icon-check02.png) no-repeat left 2px;
	background-size: 20px auto;
	line-height: 1.5;
}
.upper .btn-gold{width: 280px;background-size: 280px 100%; font-size: 100%;}
.upper .btn-gold::before{left: 1rem;}
.upper .btn-gold::after{right: 1rem;}




/* ─── おすすめHMB早見表 ─── */
.table-hmb th p{
	flex-wrap: wrap;
}
.table-hmb tr:first-child th p img{
	display: block;
	width: auto;
	height: 16px;
	margin-right: 5px;
}
.table-hmb tr th:first-child{
	width: auto;
	padding: 1rem;
}
.table-hmb tr th:first-child p{
	text-align: center;
	display: block;
}
.table-hmb .product{
	display: block;
	width: auto;
	height: auto;
	margin: auto;
	margin-bottom: 0.5rem;
}
.table-hmb td img{
	width: 100%;
	max-width: 109px;
	height: auto;
}
}/*@media screen and (min-width:768px) and (max-width:1000px)*/

img.trackimg {
	width: 1px !important;
	height: 1px !important;
}

@media screen and (min-width:768px) {
	.pc-none{display: none;}
}