@charset "utf-8";
/* CSS Document */
/********************共通************************/
#content .nutrition-header {
max-width: 980px;
padding: 100px 10px;
width: 100%;
background: url("../images/h1_nutrition-title.png") no-repeat center top / contain;
display: flex;
align-content: center;
justify-content: center;

}
.nutrition-header .nutrition-title{
text-align: center;
color: #3B5998;
font-size: 30px;
}
#nutrition-content .h2_notst{
    margin-bottom: 0em;
    padding-bottom: 0em;
    letter-spacing: initial;
    border-bottom: none;
		color: rgb(38, 38, 38);
}
#nutrition-content .h3_notst{
    margin-bottom: 0;
    padding:0;
    border:none;
}
#nutrition-content .h4_notst{
background: none;
margin-bottom: 0em;
padding: 0em;
}
#nutrition-content .h2_st01{
background: #F9FBFF;
font-size: 24px;
padding: 15px;
width: calc(100% - 5px);
position: relative;
border: solid 1px #1B5192;
margin-bottom: 45px;
color: rgb(59, 89, 152);
}
#nutrition-content .h2_st01:after{
content: "";
background: #1B5192;
width: 100%;
display: block;
height: 100%;
position: absolute;
top: 5px;
left: 5px;
right: 0px;
z-index: -1;
}
#nutrition-content .sec_st02{
  width: 100vw;
  margin: 0 calc(50% - 50vw) 4.42857em;
}
#nutrition-content .sec_st02.st_blue{
background: linear-gradient(180deg, rgba(196, 242, 252, 0.43) 0%, #89B1ED 100%);
}
#nutrition-content .sec_st02.st_green{
background: linear-gradient(180deg, rgba(226, 255, 208, 0.43) 0%, #6DE39C 100%);
}
#nutrition-content .sec_st02.st_orange{
background: linear-gradient(180deg, rgba(252, 223, 196, 0.43) 0%, #EDB989 100%);
}
#nutrition-content .sec_st02.st_pink{
background: linear-gradient(180deg, rgba(252, 196, 213, 0.43) 0%, #ED89A1 100%);
}
#nutrition-content .sec_st02.st_yellow{}
#nutrition-content .sec_st02.st_red{}
#nutrition-content .sec_st02.st_violet{}
#nutrition-content .sec_st02 h2{
font-size: 35px;
text-align: center;
margin-bottom: 45px;
border: none;
}
#nutrition-content .sec_st02.st_blue h2{
color: #1B5192;
}
#nutrition-content .sec_st02.st_green h2{
color: #1B9259;
}
#nutrition-content .sec_st02.st_orange h2{
color: #925B1B;
}
#nutrition-content .sec_st02.st_pink h2{
color: #D1407D;
}
#nutrition-content .sec_st02 .div_con{
max-width: 1000px;
width: 100%;
margin: auto;
}

#nutrition-content .div_imgcon .ul_datelist{
margin-left: 0;
}
#nutrition-content .div_imgcon .ul_datelist li{
list-style: none;
}
#nutrition-content  .div_imgcon .ul_datelist h3{
    margin-bottom: 15px;
    padding:10px 10px;
    color:#fff;
    font-size: 20px;
    letter-spacing: normal;
				background: #1B5192;
}
#nutrition-content  .div_imgcon .ul_datelist li .div_date{
background: #EFEFEF;
}
#nutrition-content .div_pickupcon{
position: relative;
border: solid 2px #1B5192;
border-radius: 10px;
padding: 60px 15px 15px 15px;
margin-bottom: 30px;
}
#nutrition-content .div_pickupcon h2{
border-radius: 20px;
padding: 5px 15px;
color: #fff;
position: absolute;
top: -23px;
left: 50%;
font-size: 24px;
max-width: 450px;
text-align: center;
width: 95%;
display: inline-block;
transform:translateX(-50%);
border: none;
}
#nutrition-content .div_pickupcon.st_blue h2{
background: #3B5998;
}
#nutrition-content .div_dsssupplecon{
background: #fff;
width: 95%;
margin: auto;
padding: 30px 15px;
}
#nutrition-content .div_dsssupplecon h3{
text-align: center;
font-weight: bold;
color: rgb(38, 38, 38);
font-size: 25px;
margin-bottom: 30px;
}
#nutrition-content .div_dsssupplecon .img_con{
max-width: 350px;
margin: 0 auto 15px;
}
#nutrition-content .ul_ingredient{
max-width: 480px;
margin: auto;
}
#nutrition-content .ul_ingredient li{
color: #fff;
border-radius: 50%;
padding: 15px;
font-size: 18px;
width: 130px;
height: 130px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#nutrition-content .ul_ingredient li.brown01{
background: #CB8D45;
}
#nutrition-content .ul_ingredient li.green01{
background: #45CB9B;
}
#nutrition-content .ul_ingredient li.yellow01{
background: #C8CB45;
}
#nutrition-content .ul_ingredient li.li_main{
width: 180px;
height: 180px;
}
#nutrition-content .ul_ingredient li.li_main > span{
font-size: 24px;
}
#nutrition-content .div_dsssupplecon .link_buy{
max-width: 350px;
margin: 15px auto 0;
}
#nutrition-content #sec_indexnav{
border-top: 1px solid #000000;
padding-top: 30px;
}
#nutrition-content #sec_indexnav h4{
text-align: center;
font-weight: 400;
font-size: 25px;
margin-bottom: 30px;
}
#nutrition-content #sec_indexnav .nav_supplement a{
border: 1px solid #9E9E9E;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
background: #fff;
text-decoration: none;
color: #000;
padding: 15px;
}
#nutrition-content #sec_indexnav .nav_supplement a:hover{
filter:none;
}
#nutrition-content #sec_indexnav .nav_supplement a .img_con{
width: 150px;
height: 150px;
overflow: hidden;
}
#nutrition-content #sec_indexnav .nav_supplement a .img_con img{
object-fit: cover;
}
#nutrition-content #sec_indexnav .nav_supplement a .div_con{
width: calc(100% - 160px);
margin-left: 10px;
}
#nutrition-content #sec_indexnav .nav_supplement a .div_con p:not(.link_buy-min){
margin-bottom: 5px;
font-weight: bold;
}
#nutrition-content #sec_indexnav .nav_supplement a .link_buy-min{
margin-bottom: 0;
}
#nutrition-content #sec_postnav  a{
background: #fff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;padding: 15px;
border: 1px solid #AFAFAF;
 transition:1s all;
}
#nutrition-content #sec_postnav  a:hover{
text-decoration: none;
box-shadow: none;
}
#nutrition-content #sec_postnav  a:not(:last-of-type){
margin-bottom: 15px
}

#nutrition-content #sec_postnav .img_con img{
 object-fit: cover;
width: 100%;
height: 100%;
 transition:1s all;
}
#nutrition-content #sec_postnav a:hover .img_con img{
  transform:scale(1.2,1.2);
}

#nutrition-content #sec_postnav  a h2{
font-size: 23px;
margin-bottom: 15px;
}
#nutrition-content #sec_postnav  a .link_buy-min{
max-width:250px;
margin: 0;
}
/********************共通************************/
/********************葉酸************************/
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity .img_con{
position:relative;
z-index: -1;
max-width: 350px;
margin: auto;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity .div_date{
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
margin-top: -50px;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity h3{
display: inline-block;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li .text_date{
text-align: center;
width: 100%;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li .text_date .plus{
display: block;
font-size: 30px;
font-weight: bold;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li .text_date .date{
color: #CB8D45;
font-size: 20px;
display: block;
font-weight: bold;
}
#nutrition-content .div_pickupcon .div_food .img_con{
max-width: 200px;
width: 100%;
margin: 0 auto 15px ;
}
#nutrition-content .div_pickupcon .div_food h3{
width: 100%;
font-size: 20px;
text-align: center;
}
#nutrition-content .div_pickupcon .div_food .dl02{
width: 100%;
justify-content: center;
}
#nutrition-content .div_pickupcon .div_food .dl02 dd{
text-align: center;
width: 100%;
}
/********************葉酸************************/
@media(max-width: 619px) {
/********************共通************************/
#content .nutrition-header {
margin:-1.4286em 0  45px;
}
#nutrition-content .sec_st02{
		padding: 30px  5%;
}
#nutrition-content .sec_st02 h2{
font-size: 25px;
text-align: left;
}
#nutrition-content .div_dsssupplecon h3{
font-size: 20px;
}
#content .nutrition-header {
padding: 50px 10px;
}
#nutrition-content #sec_indexnav h4{
font-size: 20px;
text-align: left;
}
#sec_indexnav .nav_supplement a:not(:last-of-type){
margin-bottom: 15px;
}

#nutrition-content #sec_postnav a{
display: block;
}
#nutrition-content #sec_postnav .img_con{
max-width: 450px;
width: 100%;
max-height:200px;
overflow: hidden;
}

/********************共通************************/
/********************葉酸************************/
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li{
width: 100%;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li:not(:last-of-type){
margin-bottom: 30px;
}
#nutrition-content .div_pickupcon .div_food{
margin-bottom:30px;
}
#nutrition-content .ul_ingredient{
max-width: 280px;
width: 100%;
justify-content: center;
align-content: center;
}
#nutrition-content .ul_ingredient li.li_main{
order: 1;
}
#nutrition-content .ul_ingredient li:nth-of-type(1){
order: 2;
margin-right: 20px;
}
#nutrition-content .ul_ingredient li:nth-of-type(3){
order: 3;
}
/********************葉酸************************/
}
@media(min-width: 620px) {
/********************共通************************/
#content .nutrition-header {
padding: 100px 10px;
margin:-2.857143em 0  60px;
}
#nutrition-content .sec_st02{
		padding: 45px  60px;
}
#nutrition-content .sec_first p{
font-size: 18px;
line-height: 2em !important;
}

#nutrition-content .ul_ingredient li:not(:last-of-type){
margin-right: 20px;
}
#sec_indexnav .nav_supplement a{
width: 49%;
}
#sec_indexnav .nav_supplement a:nth-of-type(odd){
margin-right: 2%;
}
#sec_indexnav .nav_supplement a:not(:last-of-type):not(:nth-last-of-type(2)){
margin-bottom: 2%;
}
#nutrition-content #sec_postnav  a{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#nutrition-content #sec_postnav .img_con{
max-width: 250px;
height:180px;
overflow: hidden;
}
#nutrition-content #sec_postnav .div_con{
width: calc(100% - 265px);
margin-left: 15px;
}
/********************共通************************/
/********************葉酸************************/
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity li{
width: calc((100% / 3) - 15px);
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity li:not(:last-of-type){
margin-right: 22px;
}
#nutrition-content  .div_imgcon .ul_datelist.ul_maternity  li .text_date .date{
font-size: 30px;
}
#nutrition-content .div_pickupcon .div_food:nth-of-type(-n + 3){
margin-bottom: 30px;
}
/********************葉酸************************/
}
@media(max-width: 1080px) {

}
@media(min-width: 1081px) {


}
/**************common*****************/
body{
overflow-x: hidden;
}
  body *, body *::before, body *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
				h1, h2, h3, h4, h5, h6, p, ul, ol, dl,a{
    font-size: 100%;
    margin: 0;
    padding: 0;
	list-style-type:none;
}
#nutrition-content h1,#nutrition-content h2,#nutrition-content h3,#nutrition-content h4,#nutrition-content h5,#nutrition-content h6,#nutrition-content p,#nutrition-content dl,#nutrition-content a,#nutrition-content ul,#nutrition-content ol,#nutrition-content span{
	line-height: 1.5em;
}
p{
	text-align: justify;
	font-size: 16px;
}
dl dt,dl dd{
margin-left: 0px;
}
a img {
    border: medium none;
    margin: 0;
    padding: 0;
	transition:all 0.3s;
}
a img:hover{
	opacity:0.6;
}
figure{
margin: 0;
}
figure img{
width: 100%;
}
.f10{
font-size: 10px !important;
}
.f12{
font-size: 12px !important;
}
.f14{
font-size: 12px !important;
}
.f16{
font-size: 16px !important;
}
.f18{
font-size: 18px !important;
}
.f20{
font-size: 20px !important;
}
.f22{
font-size: 22px !important;
}
.f24{
font-size: 24px !important;
}
.f26{
font-size: 26px !important;
}
.f28{
font-size: 28px !important;
}
.f_b{
font-weight: bold;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.flex_center{
align-items: center;
justify-content: center;
}
.flex-strech{
align-items: stretch;
}
.div_topic01{
border: solid 1px #CB8D45;
padding: 10px;
margin-bottom: 30px;
}
.div_topic01 .headline{
color: #CB8D45;
font-size: 20px;
margin-bottom: 20px;
}
.dl02 dt{
background: #45CB9B;
color: #fff;
border-radius: 8px;
padding: 5px 10px;
display: inline-block;
margin-bottom: 15px;
}
.link_buy,.link_buy-min{
background: #1B5192;
padding: 10px;
text-align: center;
color: #fff;
transition: all 0.5s ease 0s;
display: block;
font-size: 18px;
margin:0  auto;
}
.link_buy{
box-shadow: 0px 4px 0px 0px #022D62;
}
.link_buy:hover,.link_buy-min:hover,#nutrition-content #sec_indexnav .nav_supplement a:hover .link_buy-min,#nutrition-content #sec_postnav a:hover .link_buy-min{
background: #ffa500;
color: #fff;
text-decoration: none;
}
.link_buy:hover{
box-shadow: 0px 4px 0px 0px #CB8D45;
}
@media(min-width: 620px) {
.dn_pc{
display: none;
}
.div_topic01 .headline{
text-align: center;
}
.clm-3{
display: flex;
flex-wrap: wrap;
}
.clm-3 > div{
width: calc((100% / 3) - 15px);
}
.clm-3 > div:not(:nth-of-type(3n)){
margin-right: 17px;
}
}
@media(max-width: 619px) {
.dn_mob{
display: none;
}
.no-flexsp{
display: block;
}
}