@charset "utf-8";
body{
	line-height: 1.8;
}
.brands {
	padding: 40px 0;
	background: #ecf0fa;
}
.brands .inner1,
.inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}
ul.list{
	list-style: none;
	display:flex;
}
.list li {
	margin: 0 0 30px 30px;
}
.list li:nth-child(3n+1) {
	margin-left: 0;
}
.list li a {
	display: block;
	transition: opacity .3s;
}
.list li img{
width: 313px;
}
.list li a:hover {
	opacity: .7;
}
.col2 {
	display: flex;
	gap: 20px;
	justify-content: center;
	list-style: none;
}
.col2 li{
	width: 49%;
}
.col2 li img{
	max-width: 100%;
}

.bg{
	background: #ecf0fa;
}
.text-main-color{
	color: #142474;
}
.text-center{
	text-align: center;
}
.mt-30{
	margin-top: 30px;
}
.article{
	padding: 50px 0;
}
.article_inner{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0px 20px;
	box-sizing: border-box;
	overflow: hidden;
}

@media screen and (min-width: 768px){
	.article_inner{
		padding: 0px 0px;
	}
}

.article h3{
	font-size: 200%;
	margin: 20px 0 40px 0;
}
.newsBox{
	background: #FFF;
	padding: 30px;
	border-radius: 10px;
}
table.newsTbl {
	width: 100%;
}
table.newsTbl th,
table.newsTbl td{
	padding: 10px 16px;
	border-bottom: solid 1px #CCC;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 768px) {
table.newsTbl th,
	table.newsTbl td{
		display: table-cell;
		width: auto;
	}
	table.newsTbl th{
		width: 32%;
	}
}


.text{
	line-height: 1.8;
}
.normalBtn,
a.normalBtn{
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	border-radius: 30px;
	background: #142474;
	color: #FFF;
	padding: 10px 16px;
	text-decoration: none;
	line-height: 2;
	min-width: 260px;
}
.normalBtn:visited,
.normalBtn:focus,
.normalBtn:hover{
	color: #FFF;
	text-decoration: none;
}
.normalBtn:hover{
	opacity: 0.8;
}



.topItemList {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.topItemCard {
    width: calc((100% / 3) - 14px);
}
.cartTitle{
	text-align: center;
	font-size: 1em;
}
.itemBoxBottom{
	text-align: center;
}
.cardPrice{
	font-size: 20px;
	font-weight: bold;
}


.topItemCardInner{
	position: relative;
}
.topItemCardInner .souldout{
	position: absolute;
	top: 0;
	left: 0;
}


/*--------------------------
* サプリメントの説明ページ
--------------------------*/
#explain ul li {
    margin-bottom: 20px;
    list-style: none;
}
#explain ul li dt {
    padding: 10px 0 10px 20px;
}

#explain ul li dt span.num {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    color: #fff;
    font-size: 26px;
    margin-right: 7px;
}
#explain ul li dt span.jp {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    margin-top: 3px;
    color: #5c5c5c;
    background: #fff;
    margin-left: 12px;
    padding: 4px 10px;
    padding: 8px 12px;
    border-radius: 4px;
}

#explain ul li dd {
    padding: 20px 40px 10px;
}

.supplement-box {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    margin: 12px auto;
    padding: 10px 20px;
}
.supplement-img {
    max-width: 300px;
}
.supplement-img img {
    border-radius: 10px;
}
.supplement-name {
    text-align: center;
    margin: 10px 0;
}


#explain ul li:nth-child(1) .list dl {
    background: #fbead4;
}
#explain ul li:nth-child(1) dt {
    background: #FF9000;
}

#explain ul li:nth-child(2) .list dl {
    background: #fffbe7;
}
#explain ul li:nth-child(2) dt {
    background: #FFD300;
}

#explain ul li:nth-child(3) .list dl {
    background: #f1f4e4;
}
#explain ul li:nth-child(3) dt {
    background: #99C000;
}


#explain ul li:nth-child(4) .list dl {
    background: #f2f9fc;
}
#explain ul li:nth-child(4) dt {
    background: #33B0DD;
}

#explain ul li:nth-child(5) .list dl {
    background: #f2f2fd;
}
#explain ul li:nth-child(5) dt {
    background: #AA70FF;
}

#explain ul li:nth-child(6) .list dl {
    background: #fcf3f5;
}
#explain ul li:nth-child(6) dt {
    background: #FF7799;
}


/*--------------------------
* サプリメントの飲み方ページ
--------------------------*/
#drink ul li dt {
    background: #507abf;
    padding: 10px 0 10px 20px;
}


.envelopeTitle{
	background: #507abf;
    padding: 10px 0 10px 20px;
}
.envelopeTitle .num{
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	color: #fff;
	font-size: 26px;
}
.envelopeTitle .jp {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    color: #5c5c5c;
    background: #fff;
    padding: 8px 12px;
    border-radius: 4px;
	margin-left: 10px;
}
.envelopeContents{
	background: #f2f7ff;
	padding: 20px 40px 10px;
}
.envelopeImageBox{
	width: 100%;
    display: flex;
	gap: 20px;
    justify-content: space-evenly;
	box-sizing: border-box;
}
.envelopeImage {
    max-width: 300px;
	width: 100%;
}
.envelopeImage a{
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}
.envelopeImage img{
	width: auto;
}

/*--------------------------
* サプリメントの説明ページ
--------------------------*/
.envelopeBlock.type1 .envelopeContents{
	background: #fbead4;
}
.envelopeBlock.type1 .envelopeTitle{
	background: #FF9000;
}

.envelopeBlock.type2 .envelopeContents{
	background: #fffbe7;
}
.envelopeBlock.type2 .envelopeTitle{
	background: #FFD300;
}

.envelopeBlock.type3 .envelopeContents{
	background: #f1f4e4;
}
.envelopeBlock.type3 .envelopeTitle{
	background: #99C000;
}

.envelopeBlock.type4 .envelopeContents{
	background: #f2f9fc;
}
.envelopeBlock.type4 .envelopeTitle{
	background: #33B0DD;
}

.envelopeBlock.type5 .envelopeContents{
	background: #f2f2fd;
}
.envelopeBlock.type5 .envelopeTitle{
	background: #AA70FF;
}

.envelopeBlock.type6 .envelopeContents{
	background: #fcf3f5;
}
.envelopeBlock.type6 .envelopeTitle{
	background: #FF7799;
}
/*--------------------------
* aboutページ
--------------------------*/
section {
	margin-bottom: 100px;
}

.hero.hero-about {
	background: url(../img/about_bk.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 0px;
	height: 250px;
}
.hero.hero-supplement {
	background: url(../img/supplement_explain_bk.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 0px;
	height: 300px;
}

.hero .content {
	width: 100%;
	max-width: 1150px;
	margin: 0 auto;
	padding: 0;
	height: 250px;
	position: relative;
}

.hero hgroup {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(0, -50%);
}

.hero hgroup h1 {
	margin: 20px 0;
	color: #525263;
	font-size: 24px;
}
.hero-supplement hgroup h1{
	color: #FFF;
}

.hero hgroup h3 {
	color: #525263;
	font-size: 20px;
}
.hero-supplement hgroup h3{
	color: #FFF;
}

.about p {
	width: 100%;
	font-size: 0.95em;
	text-align: center;
}
.about h3.titleH3{
	font-size: 24px;
}
img {
	max-width: 100%;
}

.about .logo {
	text-align: center;
}

.about .logo img {
	max-width: 300px;
}

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

#kodawari header h1 {
	font-size: 24px;
	color: #11049f;
	margin-bottom: 10px;
}

#kodawari header h2 {
	font-size: 1.3rem;
}

#kodawari header {
	text-align: center;
	margin-bottom: 80px;
}

#kodawari ul li {
	margin-bottom: 60px;
	list-style: none;
}

#kodawari ul li .list {
	display: flex;
	flex-wrap: wrap;
}

#kodawari ul li .list .left {
	width: 100%;
}

#kodawari ul li .list .left img {
	width: 100%;
}

#kodawari ul li .list .right {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	margin-top: 20px;
}

#kodawari ul li dt {
	margin-bottom: 18px;
    width: 100%;
	height: auto;
	padding: 0;
	float: unset;
    text-align: left;
}

#kodawari ul li dt span.num {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	color: #11049f;
	font-size: 26px;
	margin-right: 7px;
}

#kodawari ul li dt span.jp {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-size: 22px;
	font-weight: bold;
	margin-top: 3px;
}


#kodawari ul li dd{
	text-align: left;
	width: 100%;
	height: auto;
	padding: 0;
}

.btn_link {
	display: block;
	max-width: 325px;
	width: 100%;
	text-align: center;
	margin: 30px auto;
	padding: 15px;
	color: #000;
	background: #fff;
	font-size: 18px;
	font-weight: bold;
	border: 1px solid #7d7d7d;
	transition: 0.5s all;
}

a.btn_link:hover {
	text-decoration: none;
}

#aisatsu h1 {
	text-align: center;

}

@media screen and (min-width: 768px){
	#kodawari ul li .list .left{
		width: 30%;
	}
	#kodawari ul li .list .right{
		width: calc(70% - 5%);
		padding-left: 5%;
		margin-top: 0;
	}
}
/*--------------------------
* テーブル
--------------------------*/
table.table{
	width: 100%;
	border-collapse: collapse;
}
table.table th,
table.table td{
	display: block;
	border-bottom: solid 1px #ccc;
	padding: 10px 20px;
	width: 100%;
}
table.table th{
	background: #f3f3f3;
}
@media screen and (min-width: 768px){
	table.table th,
	table.table td{
		display: table-cell;
		width: auto;
	}
}
/*--------------------------
* フッター
--------------------------*/
.footer_logo {
    text-align: center;
}
.footer_logo img {
    max-width: 300px;
}
.font-weight-bold {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.7;
}
.footList li.footMenu a{
	color: #333;
}
.footListUl{
	list-style: none;
	display: block;
}

.footListUl li:first-child {
    border-bottom: 1px solid #333;
    margin: 20px 0;
	color: #333;
}
.footListSection{
	padding: 0 20px;
}
@media screen and (min-width: 768px){
	.footListSection{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
        gap: 20px;
	}
	.footListUl{
		width: 30%;
		font-size: 14px;
		line-height: 1.8;
	}
}
/*--------------------------
* 
--------------------------*/

/*--------------------------
* 
--------------------------*/