@charset "UTF-8";



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 共通 */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.red_txt{
	color: #f15a24;
	font-weight: 600;
}
.txt_center{
	text-align: center;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* SVGのチェックアイコンつきリスト */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.svg_i_check {
	width: 1.7em;
    height: 1.3em;
	margin-top: 0.4em;
}
.svg_i_check.--orange {
	color: #f79525;
}
.svg_i_check.--blue {
	color: #27add9;
}
.svg_i_check.--l_green {
	color: #50c769;
}
.svg_i_check.--purple {
	color: #875ebd;
}
.svg_i_check.--navy {
	color: #637ab8;
}
.svg_i_check.--yellow {
	color: #baa52f;
}
.svg_i_check.--red {
	color: #e35959;
}
.svg_i_check.--red2 {
	color: #f75b43;
}
.svg_i_check.--green {
	color: #30ab73;
}
.svg_i_check.--l_blue {
	color: #50bdc7;
}
.svg_i_check.--brown {
	color: #969292;
}
.svg_i_check.--brown2 {
	color: #c78238;
}
.check_list_item{
	display: flex;
	gap:.6em;
	font-size: 118%;
	font-weight: 600;
	line-height: 2;
}
.check_list_item .check_txt{
	width: 85%;
}
@media only screen and (max-width: 767px) {
	.check_list_item{
		font-size: 100%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 太め青テキスト*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.blue_m_txt,
.blue_l_txt{
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .1em;
    text-align: center;
    color: #0068ad;
}
.blue_m_txt {
	font-size: 156%;
}
.blue_l_txt{
	font-size: 187%;
}
@media only screen and (max-width: 767px) {
	.blue_m_txt {
		font-size: 120%;
	}
	.blue_l_txt{
		font-size: 130%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* メインイメージ */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.m_img_area {
	background-image: url("../images/nmn/m_img.jpg");
}
@media only screen and (max-width: 767px) {
	.m_img_area {
		background-position: right center;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* リード文（lead）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.com_lead .blue_m_txt{
	margin-top: 24px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* サーチュイン遺伝子（長寿遺伝子）とは（cont1）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cont1 .sirtuin{
	text-align: center;
}
.cont1 .sirtuin_list{
	display: flex;
	justify-content: center;
	gap:2%;
	width: 940px;
    max-width: 86%;
    margin: 0 auto;
	margin-bottom: 70px;
}
.cont1 .sirtuin_list_item img{
	width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.cont1{
		padding-bottom: 6%;
	}
}

@media only screen and (max-width: 767px) {
	.cont1{
		padding-bottom: 8%;
	}
	.cont1 .sirtuin_list{
		flex-wrap: wrap;
		gap:1em;
		margin-bottom: 8%;
		max-width: 95%;
	}
	.cont1 .sirtuin_list_item{
		width: calc(100% / 2 - 1em);
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* こんな変化が起こります（cont2）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cont2{
	padding-top: 180px;
	position: relative;
	z-index: 0;
}
.cont2::before{
	content:"";
	display: inline-block;
	width: 100%;
	height: 693px;
	background-image: linear-gradient(0deg, #ffffff, #3374a6cc);
	position: absolute;
	top:0;
	left:0;
	z-index: -2;
}
.cont2::after{
	content:"";
	display: inline-block;
	width: 100%;
	height: 100px;
	background-color:#fff;
	position: absolute;
	top:-1px;
	left:0;
	z-index: -1;
	clip-path: polygon(50% 98%, 0 0, 100% 0);
}

/* 減るとどうなる？ */
.cont2 .minus{
	text-align: center;
}
.cont2 .minus_ttl{
	position: relative;
	width: fit-content;
	padding:0 6%;
	margin:0 auto;
}
.cont2 .minus_ttl::before{
	content:"";
	display: inline-block;
	width: 3px;
	height: 80px;
	background-color: #fff;
	position: absolute;
	bottom:0;
	left: 0;
	transform: rotate(160deg);
}
.cont2 .minus_ttl::after{
	content:"";
	display: inline-block;
	width: 3px;
	height: 80px;
	background-color: #fff;
	position: absolute;
	bottom:0;
	right: 0;
	transform: rotate(20deg);
}
.cont2 .minus_list{
	display: flex;
	justify-content: center;
	gap:2%;
	width: 961px;
    max-width: 90%;
    margin: 0 auto;
	margin-top: 56px;
}
.cont2 .minus_list_item img{
	width: 100%;
}
.cont2 .minus .com_index2{
	font-size: 150%;
	margin-top: 100px;
}

/* 増えるとどうなる？ */
.cont2 .plus{
	text-align: center;
}
.cont2 .plus_ttl{
	margin-top: 40px;
}
.cont2 .plus_list{
	display: flex;
	justify-content: center;
	gap:3%;
	width: 942px;
	max-width: 85%;
	margin:0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}
.cont2 .plus_list_item{
	font-weight: 600;
	line-height: 1.5;
	width: calc(100% / 3 - 3%);
	aspect-ratio: 300 / 258;
	border-radius: 20px;
	display: grid;
    place-content: center;
}
.cont2 .plus_list_item:first-of-type{
	border:1px solid #f79525;
	color:#f79525;
}
.cont2 .plus_list_item:nth-of-type(2){
	border:1px solid #c7bf20;
	color:#c7bf20;
}
.cont2 .plus_list_item:nth-of-type(3){
	border:1px solid #27add9;
	color:#27add9;
}
.cont2 .plus_list_item .l_txt{
	font-size: min(2.5vw, 32px);
}
.cont2 .plus_list_item .s_txt{
	font-size: min(2vw, 26px);
}
.cont2 .plus .blue_l_txt{
	margin-top: 32px;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.cont2 .minus .com_index2{
		font-size: 130%;
	}
}

@media only screen and (max-width: 767px) {
	.cont2{
		padding-top: 24%;
	}
	.cont2::after{
		height: auto;
		aspect-ratio: 8 / 1;
	}
	.cont2 .minus_ttl{
		width: 75%;
		padding: 0 8%;
	}
	.cont2 .minus_ttl::after{
		width: 2px;
		height: 60px;
	}
	.cont2 .minus_ttl::before{
		width: 2px;
		height: 60px;
	}
	.cont2 .minus_list{
		flex-wrap: wrap;
		gap:.8em;
		margin-top: 10%;
	}
	.cont2 .minus_list_item{
		width: calc(100% / 2 - .8em);
	}
	.cont2 .minus .com_index2{
		font-size: 130%;
		margin-top: 14%;
	}
	.cont2 .plus_ttl{
		width: 90%;
        margin: 0 auto;
		margin-top: 14%;
	}
	.cont2 .plus_list{
		flex-wrap: wrap;
		gap:.8em;
		margin-top: 8%;
		margin-bottom: 8%;
		max-width: 95%;
	}
	.cont2 .plus_list_item{
		width: calc(100% / 2 - 3%);
	}
	.cont2 .plus_list_item .l_txt{
		font-size: 100%;
	}
	.cont2 .plus_list_item .s_txt{
		font-size: 90%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* β-NMNがサポートする主なポイント（cont3）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cont3 .support{
	display: flex;
	justify-content: center;
	gap:3%;
}
.cont3 .support_item{
	width: calc(100% / 2 - 3%);
	padding:4%;
}
.cont3 .support_item.--orange{
	background-color: #F5EEE2;
}
.cont3 .support_item.--blue{
	background-color: #E2EDF5;
}
.cont3 .support_item .ttl{
	text-align: center;
	font-size: 162%;
	font-weight: 600;
	padding-bottom: .8em;
	margin-bottom: .8em;
}
.cont3 .support_item.--orange .ttl{
	color:#f79525;
	border-bottom: 1px solid #f79525;
}
.cont3 .support_item.--blue .ttl{
	color:#27add9;
	border-bottom: 1px solid #27add9;
}
.cont3 .check_list{
	width:fit-content;
	margin:0 auto;
}

@media only screen and (max-width: 767px) {
	.cont3 .support{
		flex-direction: column;
		gap:1em;
	}
	.cont3 .support_item{
		width: 100%;
		box-sizing: border-box;
		padding: 6% 4%;
	}
	.cont3 .support_item .ttl{
		font-size: 120%;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 歯ぐきにも良い理由（cont4）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cont4 .cont4_txt:last-of-type{
	margin-top: 40px;
}
.cont4 .cont4_figure{
	margin-top: 40px;
	text-align: center;
}
.cont4 .blue_m_txt{
	margin-top: 40px;
}
.cont4 .cont4_bnr{
	text-align: center;
	margin-top: 40px;
	transition: .3s;
}
@media (hover: hover) and (pointer: fine) {
    .cont4 .cont4_bnr:hover {
		opacity:.8;
    }
}

@media only screen and (max-width: 767px) {
	.cont4 .cont4_txt:last-of-type{
		margin-top: 8%;
	}
	.cont4 .cont4_figure{
		margin-top: 8%;
	}
	.cont4 .cont4_figure .sp_scroll{
		overflow-x: auto;
		width: 100%;
	}
	.cont4 .cont4_figure .swipe_cap{
		font-size: 90%;
		text-align: left;
		position: relative;
		width: fit-content;
        padding-right: 1.4em;
		margin-top: 4%;
	}
	.cont4 .cont4_figure .swipe_cap::before{
		position: absolute;
        font-family: "fontello";
        content: '\e804';
        right: 0;
        top: 0.01em;
        font-size: 0.9em;
	}
	.cont4 .cont4_figure img{
		min-width: 767px;
	}
	.cont4 .blue_m_txt{
		margin-top: 8%;
	}
	.cont4 .cont4_bnr{
		margin-top: 8%;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* β-NMNの11の健康効果（cont5）*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cont5 .cont5_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:1.8em;
	margin-top: 60px;
}
.cont5 .cont5_list_item {
	box-sizing: border-box;
    padding: 3% 3% 5% 3%;
	width: calc((100% - 1.8em * 2) / 3);
	position: relative;
}
.cont5 .cont5_list_item .num{
	position: absolute;
    left: 50%;
	top: -12px;
    transform: translateX(-50%);
}
.cont5 .cont5_list_item .ttl{
	display: block;
	font-size: 158%;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0;
	margin-top: 24px;
}
.cont5 .cont5_list_item .check_list{
	margin-top: 32px;
}
.cont5 .cont5_list_item .txt{
	margin-top: 24px;
}
.cont5 .blue_m_txt{
    margin-top: 60px;
}
/*ライトグリーン*/
.cont5 .cont5_list_item.--l_green{
	background-color: rgba(152,245,1,.1);
}
.cont5 .cont5_list_item.--l_green .num,
.cont5 .cont5_list_item.--l_green .ttl{
	color: #50c769;
}
/*オレンジ*/
.cont5 .cont5_list_item.--orange{
	background-color: rgba(247,184,57,.1);
}
.cont5 .cont5_list_item.--orange .num,
.cont5 .cont5_list_item.--orange .ttl{
	color: #f79525;
}
/*紫*/
.cont5 .cont5_list_item.--purple{
	background-color: rgba(157,121,176,.1);
}
.cont5 .cont5_list_item.--purple .num,
.cont5 .cont5_list_item.--purple .ttl{
	color: #875ebd;
}
/*ネイビー*/
.cont5 .cont5_list_item.--navy{
	background-color: rgba(128,207,247,.1);
}
.cont5 .cont5_list_item.--navy .num,
.cont5 .cont5_list_item.--navy .ttl{
	color: #637ab8;
}
/*黄色*/
.cont5 .cont5_list_item.--yellow{
	background-color: rgba(213,201,94,.1);
}
.cont5 .cont5_list_item.--yellow .num,
.cont5 .cont5_list_item.--yellow .ttl{
	color: #baa52f;
}
/*赤*/
.cont5 .cont5_list_item.--red{
	background-color: rgba(247,169,182,.1);
}
.cont5 .cont5_list_item.--red .num,
.cont5 .cont5_list_item.--red .ttl{
	color: #e35959;
}
/*赤2*/
.cont5 .cont5_list_item.--red2{
	background-color: rgba(247,133,57,.1);
}
.cont5 .cont5_list_item.--red2 .num,
.cont5 .cont5_list_item.--red2 .ttl{
	color: #f75b43;
}
/*緑*/
.cont5 .cont5_list_item.--green{
	background-color: rgba(109,173,121,.1);
}
.cont5 .cont5_list_item.--green .num,
.cont5 .cont5_list_item.--green .ttl{
	color: #30ab73;
}
/*ライトブルー*/
.cont5 .cont5_list_item.--l_blue{
	background-color: rgba(110,207,205,.1);
}
.cont5 .cont5_list_item.--l_blue .num,
.cont5 .cont5_list_item.--l_blue .ttl{
	color: #50bdc7;
}
/*ブラウン1*/
.cont5 .cont5_list_item.--brown{
	background-color: rgba(163,159,145,.1);
}
.cont5 .cont5_list_item.--brown .num,
.cont5 .cont5_list_item.--brown .ttl{
	color: #969292;
}
/*ブラウン2*/
.cont5 .cont5_list_item.--brown2{
	background-color: rgba(217,139,71,.1);
}
.cont5 .cont5_list_item.--brown2 .num,
.cont5 .cont5_list_item.--brown2 .ttl{
	color: #c78238;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.cont5 .cont5_list_item{
		width: calc((100% - 1.8em * 2) / 2);
	}
}

@media only screen and (max-width: 767px) {
	.cont5 .cont5_list{
		margin-top: 10%;
	}
	.cont5 .cont5_list_item{
		width: 100%;
		padding: 6% 5%;
	}
	.cont5 .cont5_list_item .num{
		width: 12%;
	}
	.cont5 .cont5_list_item .num img{
		width: 100%;
	}
	.cont5 .cont5_list_item .ttl{
		font-size: 120%;
	}
	.cont5 .cont5_list_item .txt{
		margin-top: 4%;
	}
	.cont5 .cont5_list_item .check_list{
		width: fit-content;
		margin: 0 auto;
		margin-top: 4%;
	}
	.check_list_item .check_txt{
		width: 100%;
	}
}




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

}
@media only screen and (max-width: 767px) {

}