@charset "UTF-8";


* {
    box-sizing: border-box;
}


body {
    font-family: 'Kosugi Maru', sans-serif !important;
}


a {color:limegreen;}

p.color-bk {color:#000 !important;}


h2, h3, h4, h5, h6 {line-height:1.4;}


/* マージン関連 */
.mb-xxsmall {
    margin-bottom:5px !important;
}

.mb-xsmall {
    margin-bottom:10px !important;
}

.mb-small {
    margin-bottom:15px !important;
}

.mb-medium {
    margin-bottom:30px !important;
}

.mb-large {
    margin-bottom:50px !important;
}

.mb-xlarge {
    margin-bottom:70px !important;
}

.mb-xxlarge {
    margin-bottom:100px !important;
}


@media all and (max-width:750px) {
.mb-medium {
    margin-bottom:20px !important;
}

.mb-large {
    margin-bottom:30px !important;
}

.mb-xlarge {
    margin-bottom:50px !important;
}

.mb-xxlarge {
    margin-bottom:70px !important;
}
}



/***********************************************************************/
/*************************     メニュー設定　 　************************/
/***********************************************************************/
.button_container {
	position:fixed;
	top:1.5%;
	right:15px;
	width:70px;
	height:70px;
	padding:45px 0 0;
	background:#FFF;
	border-radius: 3px;
	cursor: pointer;
	z-index:10000;
	transition:all .25s ease;
	text-align:center;
	font-size:10px;
	font-weight:bold;
}

.button_container:hover {
	opacity: .8;
}


.button_container::after {
	content:"MENU";
}


.button_container.active .top {
	transform: translateY(6px) translateX(0) rotate(45deg);
	background:#000;
}


.button_container.active .middle {
	opacity:0;
	background:#000;
}


.button_container.active .bottom {
	transform: translateY(-6px) translateX(0) rotate(-45deg);
	background:#000;
}


.button_container.active::after {
	content:"CLOSE";
}


.button_container span {
	display:block;
	background:#000;
	border: none;
	height: 2px;
	width: 40%;
	position: absolute;
	top: 18px;
	left: 30%;
	transition:  all .35s ease;
	cursor: pointer;
}


.button_container span:nth-child(2) {
	top:24px;
}


.button_container span:nth-child(3) {
	top:30px;
}


.overlay {
	position: fixed;
	background:#009c77;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: all .35s ease;
	overflow: hidden;
	z-index:9999;
}


.overlay.open {
	opacity: .9;
    visibility: visible;
    height: 100%;
}


nav {
    position: relative;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0;
    overflow: scroll;
}


nav ul {
	list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    position: relative;
	/*border:2px solid #FFF;
	border-radius: 5px;*/
    line-height:1.1;
}


nav ul li {
	padding:.6em 1em;
	text-align: center;
	border-bottom:1px dotted #FFF;
	animation: fadeInRight .5s ease forwards;
    color:#fffcd0;
    font-weight:bold;
}


nav ul li.s_cate {
	padding:.5em 1em;
	text-align: center;
	border-bottom:1px dotted #FFF;
	animation: fadeInRight .5s ease forwards;
    font-size:13px;
    font-weight:300;
    color:#FFF;
}


nav ul li.s_cate::before {
    content:"> ";
    color:#FFF;
}


nav ul li a {
	color:#fffcd0;
	text-decoration: none;
	font-weight:bold;
}


nav ul li.s_cate a {
	color:#FFF;
	text-decoration: none;
	font-weight:normal;
}


nav ul li span {
    display:block;
    padding:5px 0 0;
    }


header {
    width:100%;
    height:80px;
    position:relative;
}


header.index {
    width:100%;
    height:80px;
    position:relative;
    background:#fcf9eb;
}


h1.logo {
    width:120px;
    position:absolute;
    top:0;
    left:10px;
}


h1.logo img {
    width:100%;
}


#container {
    background:#fcf9eb;
    padding:50px 0;
}


#container.index {
    background:#fcf9eb;
    padding:0 0 50px;
}



footer {
    width:100%;
    text-align:center;
    padding:50px 0 0;
}


.footer_logo {
    width:400px;
    margin:0 auto 30px;
}


.footer_logo img {
    width:100%;
}

.side_logo {
    width:100px;
    margin:0 auto 30px;
}

.side_logo img {
    width:100%;
}


.copyright {
    font-size:11px;
    padding:0 0 10px;
}



.copyright span {
    display:inline;
    padding:0;
}



@media all and (max-width:768px) {
.button_container {
	position:fixed;
	top:1.5%;
	right:10px;
	width:70px;
	height:70px;
	padding:45px 0 0;
	background:#FFF;
	border-radius: 3px;
	cursor: pointer;
	z-index:10000;
	transition:all .25s ease;
	text-align:center;
	font-size:10px;
	font-weight:bold;
}
    
    
header {
    width:100%;
    height:90px;
    position:relative;
}


header.index {
    width:100%;
    height:90px;
    position:relative;
    background:#fcf9eb;
}


h1.logo {
    width:100px;
    position:absolute;
    top:15px;
    left:10px;
}
    
    
footer {
    width:100%;
    text-align:center;
    padding:30px 0 0;
}


.footer_logo {
    width:300px;
    margin:0 auto 20px;
}
    
    
.copyright span {
    display:block;
    padding:10px 0 0;
}
    
    
#container {
    background:#fcf9eb;
    padding:30px 0;
}    
}


#contents-body {
    background:#FFF;
    padding:3em;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0,0,0,.1);
    -webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    margin:0 auto 10px;
}


#mv {
    background:#FFF;
    border-radius: 10px;
    overflow:hidden;
    box-shadow: 0px 3px 5px rgba(0,0,0,.1);
    -webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    margin:0 auto 30px;
    width:100%;
    max-width: 1000px;
}


#mv img {
    width:100%;
    vertical-align: bottom;
}


@media all and (min-width:421px) and (max-width:768px) {
#contents-body {
    background:#FFF;
    padding:2em;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0,0,0,.1);
    -webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    margin:0 auto 10px;
}   
}


@media all and (max-width:420px) {
#contents-body {
    background:#FFF;
    padding:1em;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0,0,0,.1);
    -webkit-filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    filter:drop-shadow(0px 3px 5px rgba(0,0,0,.1));
    margin:0 auto 10px;
}   
}


/* chapter 1 タイトル */
.chapter1 .block_h2 {
    width:1000px;
    margin:0 auto;
    padding:60px 0;
    text-align:center;
}



.chapter1 .block_h2 h2 {
    display:inline-block;
    font-size:24px;
    position:relative;
    padding:0 150px;
}


.chapter1 .block_h2 h2::before {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_01.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}


.chapter1 .block_h2 h2::after {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_02.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}



.chapter1 .block_h2 h2 span {
    display:block;
    font-size:21px;
    color:#80c269;
    padding:0 0 20px;
}


/* chapter 2 タイトル */
.chapter2 .block_h2 {
    width:1000px;
    margin:0 auto;
    padding:60px 0;
    text-align:center;
}



.chapter2 .block_h2 h2 {
    display:inline-block;
    font-size:24px;
    position:relative;
    padding:0 150px;
}


.chapter2 .block_h2 h2::before {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_03.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}


.chapter2 .block_h2 h2::after {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_04.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}



.chapter2 .block_h2 h2 span {
    display:block;
    font-size:21px;
    color:#1c75c4;
    padding:0 0 20px;
}



/* chapter 3 タイトル */
.chapter3 .block_h2 {
    width:1000px;
    margin:0 auto;
    padding:60px 0;
    text-align:center;
}



.chapter3 .block_h2 h2 {
    display:inline-block;
    font-size:24px;
    position:relative;
    padding:0 150px;
}


.chapter3 .block_h2 h2::before {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_05.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}


.chapter3 .block_h2 h2::after {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_06.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}



.chapter3 .block_h2 h2 span {
    display:block;
    font-size:21px;
    color:#d05261;
    padding:0 0 20px;
}

/* chapter 4 タイトル */
.chapter4 .block_h2 {
    width:1000px;
    margin:0 auto;
    padding:60px 0;
    text-align:center;
}



.chapter4 .block_h2 h2 {
    display:inline-block;
    font-size:24px;
    position:relative;
    padding:0 150px;
}


.chapter4 .block_h2 h2::before {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_07.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
}


.chapter4 .block_h2 h2::after {
    width:120px;
    height:120px;
    content:"";
    display:block;
    background:url("../images/bg_h2_08.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}



.chapter4 .block_h2 h2 span {
    display:block;
    font-size:21px;
    color:#d8a007;
    padding:0 0 20px;
}



@media all and (max-width:999px) {
.chapter1 .block_h2,
.chapter2 .block_h2,
.chapter3 .block_h2,
.chapter4 .block_h2 {
    width:100%;
    margin:0 auto;
    padding:60px 0;
    text-align:center;
}
}


@media all and (max-width:420px) {
.chapter1 .block_h2,
.chapter2 .block_h2,
.chapter3 .block_h2,
.chapter4 .block_h2 {
    width:100%;
    margin:0 auto;
    padding:10px 0 30px;
    text-align:center;
}
    
    
.chapter1 .block_h2 h2,
.chapter2 .block_h2 h2,
.chapter3 .block_h2 h2,
.chapter4 .block_h2 h2 {
    display:inline-block;
    font-size:24px;
    position:relative;
    padding:0 80px;
}

.chapter1 .block_h2 h2::before,
.chapter2 .block_h2 h2::before, 
.chapter3 .block_h2 h2::before, 
.chapter4 .block_h2 h2::before {
    width:80px;
    height:80px;
}


.chapter1 .block_h2 h2::after,
.chapter2 .block_h2 h2::after, 
.chapter3 .block_h2 h2::after, 
.chapter4 .block_h2 h2::after {
    width:80px;
    height:80px;
}
}




h3.title-h3-01 {
    font-size:24px;
    font-weight:bold;
    padding:.8em 0;
    margin:0 0 30px;
    border-bottom:3px solid #DDD;
    position:relative;
}


h3.title-h3-01::before {
    content:"";
    display:block;
    width:2em;
    height:3px;
    background:#80c269;
    position:absolute;
    bottom:-3px;
    left:0;
}



h3.title-h3-02 {
    font-size:26px;
    font-weight:bold;
    padding:20px 0 30px;
    margin:0 0 50px;
    position:relative;
    text-align:center;
}


h3.title-h3-02::before {
    content:"";
    width:100px;
    height:7px;
    border-radius: 7px;
    background:#32b16c;
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}


@media all and (max-width:768px) {
h3.title-h3-01 {
    font-size:21px;
    font-weight:bold;
    padding:.8em 0;
    margin:0 0 30px;
    border-bottom:3px solid #DDD;
    position:relative;
}
    
h3.title-h3-02 {
    font-size:23px;
    font-weight:bold;
    padding:20px 0 30px;
    margin:0 0 30px;
    position:relative;
    text-align:center;
}  
}


h4.title_h4-01 {
    font-size:21px;
    padding:42px 0 12px;
    position:relative;
}


h4.title_h4-01::before {
    content:attr(data-chapter);
    display:block;
    font-size:16px;
    padding:7px;
    background:#8fc31f;
    color:#FFF;
    border-radius: 5px;
    position:absolute;
    top:0;
    left:0;
}


h4.title_h4-02 {
    font-size:21px;
    padding:4px 0 4px 35px;
    position:relative;
    margin:0 0 10px;
    font-family: 'Kosugi Maru', sans-serif;
}


h4.title_h4-02::before {
    content:"";
    display:block;
    width:18px;
    height:18px;
    border:5px solid #80c269;
    border-radius: 100%;
    position:absolute;
    top:2px;
    left:0;
}


@media all and (max-width:768px) {
h4.title_h4-01 {
    font-size:19px;
    padding:42px 0 12px;
    position:relative;
}
    
h4.title_h4-02 {
    font-size:18px;
    padding:4px 0 4px 35px;
    position:relative;
    margin:0 0 10px;
    font-family: 'Kosugi Maru', sans-serif;
}


h4.title_h4-02::before {
    content:"";
    display:block;
    width:15px;
    height:15px;
    border:5px solid #80c269;
    border-radius: 100%;
    position:absolute;
    top:2px;
    left:0;
}
}


h5.title_h5 {
    font-size:14px;
    padding:3px 0 3px 25px;
    position:relative;
    margin:0 0 10px;
}


h5.title_h5::before {
    content:"";
    display:block;
    width:19px;
    height:19px;
    border-radius: 100%;
    background:#32b16c;
    position:absolute;
    top:2px;
    left:0;
}


h5.title_h5::after {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:2px solid #FFF;
    border-right:2px solid #FFF;
    transform:rotate(45deg);
    position:absolute;
    top:7px;
    left:4px;
}


h6.title_h6 {
    font-size:14px;
    color:#F90;
    margin:0 0 10px;
}


/* マーカーのような線 */
/* 黄色いマーカー */
span.marker_y {
	background: linear-gradient(transparent 70%, yellow 70%);
	font-weight:bold;
}



/* 新着情報 */
ul.list_news {
    margin:0 auto 70px;
    border-top:1px dotted #DDD;
}


ul.list_news li {
    padding:.8em;
    border-bottom:1px dotted #DDD;
}


ul.list_news li a {
    display:block;
    color:#80c269;
    padding:10px 0 0;
}



ul.list_contents {
    width:100%;
    margin:0 auto;
    overflow:hidden;
    list-style:none;
    font-size:16px;
}


ul.list_contents li {
    width:48%;
    float:left;
    margin:0 4% 30px 0;
    border:1px solid #DDD;
    border-radius: 5px;
    overflow:hidden;
}


ul.list_contents li:nth-child(even) {
    width:48%;
    float:left;
    margin:0 0 30px;
    border:1px solid #DDD;
    border-radius: 5px;
    overflow:hidden;
}


ul.list_contents li a {
    display:block;
    width:100%;
    padding:1.5em;
    cursor: pointer;
    background:#FFF;
}


ul.list_contents li a:hover {
    display:block;
    width:100%;
    padding:1.5em;
    cursor: pointer;
    background:#F1F2F2;
}


ul.list_contents li .area_img {
    width:100%;
    overflow:hidden;
    border-radius: 10px;
    margin:0 auto 5px;
}


ul.list_contents li .area_img img {
    width:100%;
}



@media all and (max-width:750px) {
ul.list_contents li {
    width:100%;
    float:none;
    margin:0 0 20px;
    border:1px solid #DDD;
    border-radius: 5px;
    overflow:hidden;
}


ul.list_contents li:nth-child(even) {
    width:100%;
    float:none;
    margin:0 0 20px;
    border:1px solid #DDD;
    border-radius: 5px;
    overflow:hidden;
}


ul.list_contents li a {
    display:block;
    width:100%;
    padding:1em;
    cursor: pointer;
    background:#FFF;
}


ul.list_contents li a:hover {
    display:block;
    width:100%;
    padding:1em;
    cursor: pointer;
    background:#F1F2F2;
}   
}


.moreDetail {
    font-size:14px;
    color:#666;
    padding:0 0 0 20px;
    position:relative;
}


ul.list_contents li a .moreDetail::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:1px solid #666;
    border-right:1px solid #666;
    transform:rotate(45deg);
    position:absolute;
    top:8px;
    left:0;
    transition:all .3s ease;
}


ul.list_contents li a:hover .moreDetail::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:1px solid #666;
    border-right:1px solid #666;
    transform:rotate(45deg);
    position:absolute;
    top:8px;
    left:3px;
}


/* パンくず */
.block_breadcrumb {
    width:100%;
    max-width:1000px;
    margin:0 auto 30px;
    padding:1em 2em;
    font-size:12px;
    border-radius: 30px;
    background:#f1f2f2;
    color:#000;
}


@media all and (max-width:420px) {
.block_breadcrumb {
    line-height:1.4;
    }
}


.block_breadcrumb a {
    color:#000;
    text-decoration:none;
    trabsition:all .3s ease;
}

.block_breadcrumb a:hover {
    color:#22ac38;
}


.block_breadcrumb ul {
    list-style:none;
    margin:0;
    padding:0;
}


.block_breadcrumb ul li {
    padding:0 0 0 20px;
    display:inline-block;
    position:relative;
}


.block_breadcrumb ul li::before {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:1px solid #333;
    border-right:1px solid #333;
    transform:rotate(45deg);
    position:absolute;
    top:3px;
    left:4px;
}


.block_breadcrumb ul li:first-child {
    padding:0;
    display:inline-block;
    position:relative;
}


.block_breadcrumb ul li:first-child::before {
    display:none;
}



/* 2分割レイアウト */
.block_2col {
    width:100%;
    overflow:hidden;
    margin:0 0 100px;
}


.block_left {
    width:48%;
    float:left;
    margin:0;
}


.block_right {
    width:48%;
    float:right;
    margin:0;
}


.block_left img, .block_right img {
    width:100%;
}


@media all and (max-width:768px) {
.block_left {
    width:100%;
    float:none;
    margin:0 0 30px;
}


.block_right {
    width:100%;
    float:none;
    margin:0;
}
    
}


/* 説明文・段落 */
p.regular_p {
    font-size:14px;
}


span.sup {
    vertical-align: super;
    font-size:11px;
}


/* 画像を囲う要素 */
.image_block {
    width:80%;
    margin:0 auto;
}


@media all and (max-width:420px) {
.image_block {
    width:100%;
    margin:0 auto;
}    
}


.image_block img {
    width:100%;
}



/* ※番号あり注意書き */
p.additional {
    padding:0 0 .3em 2.5em;
    font-size:11px;
    position:relative;
    line-height: 1.2;
    word-break: break-all;
}


p.additional::before {
    content:attr(data-number);
    position:absolute;
    top:0;
    left:0;
}


/* ※番号なし注意書き */
p.additional2 {
    padding:0 0 .3em;
    font-size:11px;
    line-height: 1.2;
    word-break: break-all;
}


/* 出典 */
p.reference {
    padding:0 0 .3em 3em !important;
    font-size:11px !important;
    position:relative;
    line-height: 1.2;
    word-break: break-all;
}


p.reference::before {
    content:"出典：";
    position:absolute;
    top:0;
    left:0;
}


/* 対象商品 */
p.reference2 {
    padding:0 0 .3em 5em !important;
    font-size:11px !important;
    position:relative;
    line-height: 1.2;
    word-break: break-all;
}


p.reference2::before {
    content:"対象商品：";
    position:absolute;
    top:0;
    left:0;
}


/* たんぱく質はカラダの素 */
.block_2type {
    width:100%;
    margin:0 auto;
    overflow:hidden;
}

.type_v {
    width:49%;
    float:left;
    margin:0;
    padding:2em;
    border:3px solid #8fc31f;
    border-radius: 10px;
}


.type_a {
    width:49%;
    float:right;
    margin:0;
    padding:2em;
    border:3px solid #eb6877;
    border-radius: 10px;
}


@media all and (max-width:420px) {
.type_v {
    width:100%;
    float:none;
    margin:0 0 20px;
    padding:1em;
    border:3px solid #8fc31f;
    border-radius: 10px;
}


.type_a {
    width:100%;
    float:none;
    margin:0;
    padding:1em;
    border:3px solid #eb6877;
    border-radius: 10px;
}    
}


.block_type h5 {
    font-size:18px;
    text-align:center;
    padding:0 0 10px;
    border-bottom:3px dotted #DDD;
    margin:0 0 20px;
}


.block_type.type_v h5 {
    color:#8fc31f;
}


.block_type.type_a h5 {
    color:#eb6877;
}


.block_type img {
    width:100%;
}


.block_type h6 {
    font-size:16px;
    margin:0 0 10px;
}


.type_v ul li {
    padding:5px 0 5px 20px;
    position:relative;
}


.type_v ul li::before {
    content:"";
    display:block;
    width:14px;
    height:14px;
    border-radius: 100%;
    background:#8fc31f;
    position:absolute;
    top:2px;
    left:0;
}


.type_a ul li {
    padding:5px 0 5px 20px;
    position:relative;
}


.type_a ul li::before {
    content:"";
    display:block;
    width:14px;
    height:14px;
    border-radius: 100%;
    background:#eb6877;
    position:absolute;
    top:2px;
    left:0;
}


/* chapter 1 ランキング */
.block_ranking {
    width:100%;
    overflow: hidden;
    margin:0 auto 30px;
}

.ranking_left {
    width:49%;
    float:left;
    margin:0;
}

.ranking_right {
    width:49%;
    float:right;
    margin:0;
}


.block_ranking h6 {
    padding:.8em;
    border:1px solid #81bf25;
    color:#81bf25;
    text-align:center;
    border-radius: 10px;
    margin:0 auto 10px;
    font-size:14px;
}


.list_ranking {
    margin:0 0 10px;
}


.list_ranking li {
    font-size:14px;
    padding:20px 0 20px 50px;
    border-bottom:1px solid #DDD;
    position:relative;
}


.list_ranking li::before {
    content:attr(data-rank);
    font-weight:bold;
    padding:.5em;
    border-radius: 5px;
    background:#81bf25;
    color:#FFF;
    position:absolute;
    top:12px;
    left:5px;
}


.list_ranking li:last-child {
    background:#ebf4d3;
    font-weight:bold;
}


/* チャプター2-2 */
dl.flow {
    width:100%;
    margin:0 auto 20px;
    padding:1em;
    border:1px solid #8fc31f;
    position:relative;
    border-radius: 10px;
    font-size:16px;
}


dl.last_flow {
    width:100%;
    margin:0 auto 20px;
    padding:1em;
    border:1px solid #8fc31f;
    border-radius: 10px;
    font-size:16px;
}


dl.flow::after {
    content:"";
    display:block;
    width:0;
    height:0;
    border-top:10px solid #8fc31f;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
}


dl.flow dt, dl.last_flow dt {
    font-weight:bold;
    margin:0 0 15px;
    padding:.5em;
    background:#8bc350;
    color:#FFF;
    border-radius: 5px;
}


dl.flow dd span, dl.last_flow dd span {
    color:#e17936;
    font-weight:bold;
}


/* アミノ酸一覧 */
/* 必須アミノ酸 */
h6.amino01 {
    font-size:14px;
    text-lign:center;
    margin:0 0 10px;
    font-weight:normal;
}


h6.amino01 span {
    font-size:16px;
    font-weight:bold;
    color:#8bc350;
}

.list_amino01 {
    font-size:14px;
}


.list_amino01 dd {
    color:#666;
    padding:0 0 15px 20px;
}


.list_amino01 dt {
    font-size:16px;
    font-weight:bold;
    padding:0 0 5px 20px;
    position:relative;
}


.list_amino01 dt::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-left:7px solid #8bc350;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    position:absolute;
    top:0;
    left:3px;
    
}



/* 非必須アミノ酸 */
h6.amino02 {
    font-size:14px;
    text-lign:center;
    margin:0 0 10px;
    font-weight:normal;
}


h6.amino02 span {
    font-size:16px;
    font-weight:bold;
    color:#639433;
}


.list_amino02 li {
    font-size:16px;
    font-weight:bold;
    padding:0 0 15px 20px;
    position:relative;
}


.list_amino02 li::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-left:7px solid #639433;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    position:absolute;
    top:0;
    left:3px;
    
}


/* 表組関連 */
/* 成人女性のたんぱく質摂取目標量 */
.block_table::before {
    display:none;
}


.tbl01 {
    width:100%;
    margin:0 auto 10px;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    font-size:14px;
}


.tbl01 th, .tbl01 td {
    border-bottom:1px solid #CCC;
    border-right:1px solid #CCC;
    padding:.5em;
}


.tbl01 th {
    background:#8bc853;
    color:#FFF;
}


.tbl01 tr:nth-child(even) {
    background:#f1f2f2;
}

.center {text-align:center !important;}

.tbl01 tr.target_gen {
    background:#f9c485;
    font-weight:bold;
}


.tbl02 {
    width:100%;
    margin:0 auto 10px;
    border-top:1px solid #CCC;
    border-left:1px solid #CCC;
    font-size:14px;
    text-align:center;
}


.tbl02 th, .tbl02 td {
    border-bottom:1px solid #CCC;
    border-right:1px solid #CCC;
    padding:.5em;
}


.tbl02 th.type-v {
    color: #8fc31f;
    font-weight:bold;
}


.tbl02 th.type-a {
    color: #eb6877;
    font-weight:bold;
}


.tbl02 td.type-v {
    background:#f6fcd2;
}


.tbl02 td.type-a {
    background:#fad3d7;
}

@media all and (max-width:420px) {
.block_table {
    width:100%;
    overflow: scroll;
}
    
    .block_table::before {
        display:block;
        padding:0 0 5px;
        content:"※表全体を見る場合は横方向にスクロールしてください。"
    }    

    
.tbl01, .tbl02 {
    width:200%;
}
}


/* NEWS */
.block_news {
    width:100%;
    margin:0 auto 100px;
    border:1px solid #8fc31f;
    padding:2em;
    border-radius: 10px;
}


.block_news h4 {
    font-size:18px;
    margin:0 0 15px;
    padding:5px 0 5px 90px;
    position:relative;
}


.block_news h4::before {
    content:"NEWS";
    font-size:16px;
    padding:.5em 1em;
    background:#639433;
    color:#FFF;
    border-radius: 3px;
    position:absolute;
    top:-2px;
    left:0;
}


@media all and (max-width:420px) {
.block_news {
    width:100%;
    margin:0 auto 100px;
    border:1px solid #8fc31f;
    padding:1em;
    border-radius: 10px;
}
}


/* CHECK */
.block_check {
    width:100%;
    margin:0 auto 100px;
    border:1px solid #f29b76;
    padding:2em;
    border-radius: 10px;
    background:#fddcab;
}


.block_check h4 {
    font-size:18px;
    margin:0 0 15px;
    padding:5px 0 5px 140px;
    position:relative;
}


.block_check h4::before {
    content:"CHECK!";
    font-size:16px;
    padding:.5em 1em .5em 3em;
    background:#ec6941;
    color:#FFF;
    border-radius: 3px;
    position:absolute;
    top:-2px;
    left:0;
}


.block_check h4::after {
    content:"";
    display:block;
    width:50px;
    height:50px;
    background:url("../images/icon_check.png") no-repeat center center;
    background-size:cover;
    position:absolute;
    top:-20px;
    left:0;
}


@media all and (max-width:420px) {
.block_check h4 {
    font-size:18px;
    margin:0 0 15px;
    padding:40px 0 5px;
    position:relative;
}    
}


.block_check ol {
    font-size:15px;
}


.block_check ol li {
    padding:.5em 0 .5em 30px;
    position:relative;
}


.block_check ol li::before {
    content:attr(data-number);
    padding:.35em .55em;
    background:#f29b76;
    color:#FFF;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    border-radius: 100%;
}

@media all and (max-width:420px) {
.block_check {
    width:100%;
    margin:0 auto 100px;
    border:1px solid #f29b76;
    padding:1em;
    border-radius: 10px;
    background:#fddcab;
}
}


/* コラム */
.block_column {
    width:100%;
    margin:0 auto 70px;
    border-radius: 10px;
    background:#e5f0df;
    overflow:hidden;
    padding:0 0 20px;
}


.block_column h5 {
    font-size:18px;
    margin:0 0 15px;
    padding:8px 0 8px 90px;
    position:relative;
    background:#639433;
    color:#FFF;
}

.block_column h5::before {
    content:"コラム";
    font-size:16px;
    padding:.6em 1em 0;
    background:#000;
    color:#FFF;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
}


.block_dialogInColumn {
    padding:0 2em 3em;
}


.block_column h5.title_h5 {
    font-size:14px !important;
    padding:3px 0 3px 25px !important;
    position:relative;
    margin:0 0 10px !important;
    background:none;
    color:#000;
}


.block_column h5.title_h5::before {
    content:"";
    display:block;
    width:19px !important;
    height:19px !important;
    border-radius: 100% !important;
    background:#32b16c;
    position:absolute;
    top:0;
    left:0;
    padding:0;
}


.block_column p {
    padding:0 2em;
    font-size:15px;
}


.block_column img {
    width:30%;
    padding:0 2em 2em 15px;
    float:right;
    display:block;
}


.block_column .image_block {
    width:80%;
    margin:0 auto;
}


.block_column .image_block img {
    width:100% !important;
    padding:0 !important;
    float:none !important;
    display:inline !important;
}


.block_column p.additional2 {
    padding:0 3em .3em;
    font-size:11px !important;
    line-height: 1.2;
}


@media all and (max-width:420px) {
.block_column p {
    padding:0 1em;
    font-size:15px;
}
    
.block_column img {
    width:40%;
    padding:0 1em 1em 15px;
    float:right;
    display:block;
}
    
.block_dialogInColumn {
    padding:0 1em;
}
}


/* ダブルたんぱくメニュー */
.list_menu {
    width:100%;
    margin:0 auto;
    overflow:hidden;
}

.block_menu {
    width:49%;
    margin:0 2% 20px 0;
    float:left;
    padding:2em;
    border:1px solid #DDD;
    border-radius: 10px;
    text-align:center;
}

.block_menu:nth-child(even) {
    width:49%;
    margin:0 0 20px 0;
    float:left;
    padding:2em;
    border:1px solid #DDD;
    border-radius: 10px;
}



.block_menu .image_block {
    width:100%;
    overflow:hidden;
    border-radius: 10px;
    margin:0;
    padding:0;
}

.block_menu .image_block img {
    width:100%;
    margin:0;
    padding:0;
}



.block_menu p.p1 {
    font-size:18px;
    margin:0 0 10px;
}


.block_menu p.p1 span.color-v {
    color:#8fc31f;
    padding:.3em .8em;
    border:1px solid #8fc31f;
    border-radius: 5px;
}


.block_menu p.p1 span.color-a {
    color:#eb6877;
    padding:.3em .8em;
    border:1px solid #eb6877;
    border-radius: 5px;
}


.block_menu p.p2 {
    font-size:24px;
    font-weight:bold;
    margin:0 0 15px;
}


.block_menu p.p2 span.color-v {
    color:#8fc31f;
}


.block_menu p.p2 span.color-a {
    color:#eb6877;
}


/* たんぱく質の新しい摂り方　ダブルたんぱく*/
p.focus01 {
    text-align:center;
    font-weight:bold;
    font-size:1.6em;
}

p.focus02 {
    text-align:center;
    font-weight:bold;
    font-size:2em;
}


p.focus02 span.color-v {
    color:#8fc31f;
}

p.focus02 span.color-a {
    color:#eb6877;
}

p.focus02 span.color-w {
    color:lightseagreen;;
}


/* 研究リソースへのリンク */
.gotoResourse {
    text-align:right;
    width:100%;
}


.gotoResourse a {
    padding:0 0 0 1.5em;
    font-size:.9em;
    color:#8fc31f;
    text-decoration:none;
    position:relative;
}


.gotoResourse a::before {
    content:"";
    display:block;
    width:0;
    height:0;
    border-left:10px solid #8fc31f;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    position:absolute;
    top:0;
    left:3px;
}



/* 開発秘話 */
.block_story {
    width:100%;
    margin:0 auto;
    border-radius: 10px;
    border:1px solid lightseagreen;
    padding:2em;
}


.block_story h4 {
    color:lightseagreen;
    margin:0 0 15px;
}


.block_story .comment {
    padding:0 0 1em;
    border-bottom:1px solid #CCC;
    margin:0 0 20px;
    overflow:hidden;
}


.img_story {
    display:block;
    width:30%;
    float:left;
    margin:0 1em 1em 0;
}


.img_story img {
    width:100%;
}


.block_profile {
    width:100%;
    overflow:hidden;
}


.profile_txt {
    width:88%;
    float:left;
}


.profile_name {
    font-size:1.2em;
    font-weight:bold;
    text-align:right;
}


.profile_jobtitle {
    margin:0 0 5px;
    text-align:right;
}


.profile_summary {
    font-size:.8em;
}


.profile_img {
    width:10%;
    float:right;
}


.profile_img img {
    width:100%;
}


@media all and (max-width:420px) {
.block_story {
    width:100%;
    margin:0 auto;
    border-radius: 10px;
    border:1px solid lightseagreen;
    padding:1em;
}
    
    
.img_story {
    display:block;
    width:100%;
    float:none;
    margin:0 0 .5em;
}
    
.profile_txt {
    width:75%;
    float:left;
}
    
.profile_img {
    width:20%;
    float:right;
}
}



/* 下段メニュー関連 */
.chapter_pager {
    width:100%;
    max-width:1000px;
    margin:50px auto 30px;
    padding:2em;
    font-size:12px;
    border-radius: 30px;
    background:#f1f2f2;
    color:#000;
    overflow:hidden;
}


.prev_page {
    display:block;
    width:50%;
    float:left;
    padding:0 0 0 20px;
    color:#8fc31f;
    text-decoration:none;
    position:relative;
}


.prev_page::before {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:1px solid #8fc31f;
    border-left:1px solid #8fc31f;
    transform:rotate(-45deg);
    position:absolute;
    top:2px;
    left:0;
    transition:all .3s ease;
}


.prev_page:hover::before {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:1px solid #8fc31f;
    border-left:1px solid #8fc31f;
    transform:rotate(-45deg);
    position:absolute;
    top:2px;
    left:4px;
}


.next_page {
    display:block;
    width:50%;
    float:right;
    text-align:right;
    padding:0 20px 0 0;
    color:#8fc31f;
    text-decoration:none;
    position:relative;
}


.next_page::before {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:1px solid #8fc31f;
    border-right:1px solid #8fc31f;
    transform:rotate(45deg);
    position:absolute;
    top:2px;
    right:4px;
    transition:all .3s ease;
}


.next_page:hover::before {
    content:"";
    display:block;
    width:6px;
    height:6px;
    border-top:1px solid #8fc31f;
    border-right:1px solid #8fc31f;
    transform:rotate(45deg);
    position:absolute;
    top:2px;
    right:0;
}


/* チャプター間移動 */
.list_chapter {
    display:flex;
    width:100%;
    margin:0 auto 30px;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size:15px;
}


.list_chapter li {
    width:24%;
}


@media all and (min-width:421px) and (max-width:768px) {
.list_chapter li {
    width:48%;
    margin:0 0 20px;
}
}


@media all and (max-width:420px) {
.list_chapter li {
    width:100%;
    margin:0 0 20px;
}
}


.list_chapter li a, .list_chapter li span {
    display:inline-block;
    width:100%;
    text-align:center;
    background:#81bf25;
    color:#FFF;
    padding:1em;
    font-weight:bold;
    border-radius: 10px;
    transition:all .3s ease;
    line-height:1.4;
    font-size:12px;
    letter-spacing: 0;
}


.list_chapter li a.top {
    display:inline-block;
    width:100%;
    text-align:center;
    background:#81bf25;
    color:#FFF;
    padding:1.65em 1em 1.65em;
    font-weight:bold;
    border-radius: 10px;
    transition:all .3s ease;
    line-height:1.4;
    font-size:12px;
    letter-spacing: 0;
}


.list_chapter li a::before, .list_chapter li span::before {
    display:inline-block;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #FFF;
    border-right:1px solid #FFF;
    transform:rotate(45deg);
}



.list_chapter li .submenu {
    width:90%;
    padding:10px 0 0;
    margin:0 auto;
}


.list_chapter li .submenu li {
    width:100%;
    float:none;
}


.list_chapter li .submenu li a {
    display:block;
    width:100%;
    background:none;
    color:#81bf25;
    font-size:12px;
    font-weight:normal;
    padding:.3em 0 .3em 1.5em;
    position:relative;
    text-align:left;
    line-height:1.5;
    letter-spacing: 0;
}


.list_chapter li .submenu li a::before {
    display:inline-block;
    content:"";
    width:6px;
    height:6px;
    border-top:1px solid #81bf25;
    border-right:1px solid #81bf25;
    transform:rotate(45deg);
    position:absolute;
    top:10px;
    left:5px;
}



/* ページ上部ナビ */
.page_navi {
    width:100%;
    background:#EEE;
    border-radius: 10px;
    overflow:hidden;
    margin:0 auto 30px;
    padding:10px;
    font-size: 14px;
    line-height:1.4;
}


a.page_prev {
    display:block;
    width:45%;
    float:left;
    padding:1.5em 8em 1.5em 1em;
    background:#FFF;
    border:1px solid #ccc;
    border-radius: 10px;
    position:relative;
    text-align:right;
    color:#81bf25;
}


/*a.page_prev::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:2px solid #000;
    border-left:2px solid #000;
    transform:rotate(-45deg);
    position:absolute;
    top:50%;
    right:23%;
    margin:-5px 0 0;
}*/


a.page_prev::after {
    content:"< 前のページへ";
    position:absolute;
    top:50%;
    right:10px;
    margin:-8px 0 0;
    font-size:12px;
    color:#000;
}


a.page_next {
    display:block;
    width:45%;
    float:right;
    padding:1.5em 1em 1.5em 8em;
    background:#FFF;
    border:1px solid #ccc;
    border-radius: 10px;
    position:relative;
    color:#81bf25;
}


/*a.page_next::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    transform:rotate(45deg);
    position:absolute;
    top:50%;
    left:23%;
    margin:-5px 0 0;
}*/


a.page_next::after {
    content:"次のページへ >";
    position:absolute;
    top:50%;
    left:10px;
    margin:-9px 0 0;
    font-size:12px;
    color:#000;
}



/* チャプターへ移動 */
a.chapter_prev {
    display:block;
    width:45%;
    float:left;
    padding:1.5em 10em 1.5em 1em;
    background:#FFF;
    border:1px solid #ccc;
    border-radius: 10px;
    position:relative;
    text-align:right;
    color:#81bf25;
}


/*a.chapter_prev::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:2px solid #000;
    border-left:2px solid #000;
    transform:rotate(-45deg);
    position:absolute;
    top:50%;
    right:29%;
    margin:-5px 0 0;
}*/


a.chapter_prev::after {
    content:"< 前のチャプターへ";
    position:absolute;
    top:50%;
    right:10px;
    margin:-9px 0 0;
    font-size:12px;
    color:#000;
}


a.chapter_next {
    display:block;
    width:45%;
    float:right;
    padding:1.5em 1em 1.5em 10em;
    background:#FFF;
    border:1px solid #ccc;
    border-radius: 10px;
    position:relative;
    color:#81bf25;
}


/*a.chapter_next::before {
    content:"";
    display:block;
    width:7px;
    height:7px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    transform:rotate(45deg);
    position:absolute;
    top:50%;
    left:29%;
    margin:-5px 0 0;
}*/


a.chapter_next::after {
    content:"次のチャプターへ >";
    position:absolute;
    top:50%;
    left:10px;
    margin:-9px 0 0;
    font-size:12px;
    color:#000;
}



@media all and (max-width:640px) {
a.page_prev,
a.page_next,
a.chapter_prev,
a.chapter_next {
    width:100%;
    float:none;
}
    
a.page_prev,
a.chapter_prev {
    margin:0 0 5px;
}
}

.pickup_title{text-align: center; font-size: 28px; width:100%;}
  .pickup_box{display: flex; flex-wrap: wrap; justify-content: center; margin: 30px 0; width:55%; margin:0 auto;}
  @media all and (max-width:560px){ .pickup_box{width:90%;}}
  .pickup_box img{width:100%;}
  .pickup_box p{text-align: center; font-size: 18px;}
  .pickup{width:32%; padding:0 20px;}
  .pickup img{border-radius: 15px; box-shadow: 0 3px 5px 0 rgb(0 0 0 / 50%);}
  @media all and (max-width:560px){.pickup{width:90%; margin-bottom:30px;}}
  .pickup_box a{text-decoration: none; color:#333;}
  .pickup_box a:hover{opacity: 0.8;}
  .pickup_box a:visited{color:inherit}
  .knowledge-link{padding:50px 0;}
  .knowledge-link img{ width:30%; margin:0 auto; display: block; padding-bottom: 20px;}
  @media all and (max-width:560px){.knowledge-link img{width:90%;}}