@charset "utf-8";
/*=====================================================
 * Style URL: style.css
 * Version: 1.0
 * Last Up Date: 2019/03/08
=====================================================*/
/**----- contents -------
	1: html & body & other
	2: header
	3: menu
	4: inulin01
	5: inulin02
	6: inulin03
	7: inulin04
	8: inulin05
----------------------*/

/*=== 1: html & body & other =====================================*/
img {
 width: 100%;
}
.content-inner {
 width: 1000px;
 margin: auto;
}
.content-inner p{
 font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", sans-serif; 
}
.txt-r{
 text-align: right;
}
.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 10;
}
.fade-off {
 opacity: 0;
 transition: all 1s;
}
.fade-on {
 opacity: 1;
}
.isSP{
 display:none !important;
}
.page-top{
 position: fixed;
 width: 65px;
 right: 0;
 bottom: 10px;
 cursor: pointer;
}
.overf{
 overflow:hidden
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 .l-footer{
   min-width: 1000px;
 }
 #footer {
  min-width: 1000px;
 }
}
@media screen and (max-width: 640px) {
 .content-inner {
  width: 100%;
  margin: auto;
  padding: 0 2.6%;
  box-sizing: border-box;
 }
 .isSP{
  display:block!important;
 }
 .isPC{
  display:none !important;
 } 
 .page-top{
  width: 13.33%;
  right: 0;
  z-index: 90;
 }
}
/*================================================================*/
/*=== 2: header ==================================================*/
header.inulin{
 position: relative;
 z-index: 0;
 background-image:  url("/dairies/inulin/images/header-line.png"), url("/dairies/inulin/images/header-bg.jpg");
 background-position: left top, center bottom;
 background-repeat: repeat-x, no-repeat;
 background-size: auto, cover;
}
header.inulin::after{
 content: '';
 position: absolute;
 z-index: -1;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: inherit;
 animation-name: bg-fadeIn;
 animation-duration: 5s;
}
@keyframes bg-fadeIn {
  0% {
  filter: grayscale(100%);
 }
  100% {
  filter: grayscale(0%);
 }
}
header.inulin .content-inner{
 padding: 10px 0 100px 0;
}
header.inulin p.logo{
 width: 73px;
 margin: 0 0 90px auto;
}
header.inulin h1{
 width: 322px;
 padding-left: 40px;
 margin:10px auto 0;
 animation-name: h1-fadeIn;
 animation-duration: 3s;
}
@keyframes h1-fadeIn {
  0% {
  opacity:0;
 }
  100% {
  opacity:1;
 }
}
/*--#toggle--*/
#header-toggle{
 display: none;
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 header.inulin{
  min-width: 1000px;
 }
 header.inulin .sp-header{
  width: 95%;
 }
}
@media screen and (max-width: 640px) {
 header.inulin{
  background-image:url("/dairies/inulin/images/header-bg-sp.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 999;
 }
 header.inulin .content-inner{
  padding: 60px 0 35px 0;
  box-sizing: border-box;
 }
 header.inulin .sp-header{
  position: fixed;
  z-index: 99;
  top:0;
  /*top:60px;*/
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  padding: 12px 2.66% 12px 5.33%;
  background-image:url("/dairies/inulin/images/header-line-sp.png");
  background-position: bottom left;
  background-size: contain;
  background-repeat: repeat-x;
  box-sizing: border-box;
 }
 div.sp-header:after {
    display: none;
}
 header.inulin p.logo{
  width: 13.13%;
  margin: 0 0 0 auto;
 }
 header.inulin h1{
  width: 62.13%;
  padding-left: 20px;
  margin: 25px auto 0;
 }
 /*--#toggle close--*/
 #header-toggle{
  position: relative;
  z-index: 100;
  display: block;
  width: 25px;
  height: 23px;
  top: 0px;
  }
 #header-toggle div {
  position: relative;
 }
 #header-toggle span{
  display: block;
  height: 3px;
  background: #000;
  position:absolute;
  width: 100%;
  left: 0;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;	
  border-radius: 3px;
 }
 #header-toggle span:nth-child(1){
  top:0px;
 }
 #header-toggle span:nth-child(2){
  top:8px;
 }
 #header-toggle span:nth-child(3){
  top:16px;
 }
 /*--#header-toggle open--*/
 .open #header-toggle span:nth-child(1) {
  top: 12px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
 }
 .open #header-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
 }
 .open #header-toggle span:nth-child(3) {
  top: 12px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
 }
}

/*================================================================*/
/*=== 3: menu ====================================================*/
#menu{
 background-color: #fff;
}
#menu ul{
 width: 100%;
 text-align: center;
 margin: auto;
}
#menu ul li{
 display: inline-block;
 font-size: 14px;
 margin-right: 52px;
}
#menu ul li:last-child{
 margin-right: 0;
}
#menu ul li a{
 display: block;
 color: #000;
 padding: 34px 0 30px 0;
}
#menu ul li a:hover{
 color: #333;
}
@media screen and (min-width: 641px){
#menu{
 display: block !important;
}
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #menu {
  min-width: 1000px;
 }
 #menu ul li{
  margin-right: 30px;
 }
}
@media screen and (max-width: 640px) {
 #menu{
  position: fixed;
  z-index: 9999;
  display: none;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
 }
 #menu ul{
  width: 100%;
  text-align: center;
  margin: auto;
 }
 #menu ul li{
  display: block;
  font-size: 12px;
  padding: 0 30px;
  margin-right: 0;
 }
 #menu ul li a{
  display: block;
  color: #000;
  padding: 50px 0 15px;
  background-image:url("/dairies/inulin/images/icon-menu-sp.png");
  background-position: top 20px center;
  background-repeat: no-repeat;
  background-size: 4.21%;
  border-bottom: #333 1px dotted;
 }
 #menu ul li:last-child a{
  border-bottom: none;
 }
}
@media (orientation: landscape) and (max-width: 640px) { /*スマホ横向き*/
  #menu ul{
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  margin: auto;
 }
 #menu ul li{
  display: block;
  width: 50%;
  font-size: 12px;
  padding: 0 30px;
  margin-right: 0;
  box-sizing: border-box;
 }
 #menu ul li:nth-child(odd){
  border-right: #333 1px dotted;
 }
 #menu ul li:nth-last-child(-n+2){
  margin: 10px 0;
 }
 #menu ul li:nth-last-child(-n+2) a{
  border-bottom: none;
 }
}

/*================================================================*/
/*=== 4: inulin01 ================================================*/
#inulin01{
 padding: 30px 0 20px;
 background: #f3f3f3;
}
#inulin01 h2{
 width: 202px;
 margin: auto;
}
#inulin01 p{
 font-size: 16px;
 font-weight: 500;
 text-align: center;
 margin-top: 27px;
}
#inulin01 ul{
 position: relative;
 width: 850px;
 height: 332px;
 margin: 60px auto 20px;
}
#inulin01 ul li{
 position: absolute;
 display: block;
 width: 256px;
 z-index: 0;
}
#inulin01 ul li:nth-child(odd){
 top:0;
}
#inulin01 ul li:nth-child(even){
 bottom:0;
}
#inulin01 ul li:nth-child(2){
 left: 198px;
}
#inulin01 ul li:nth-child(3){
 right: 198px;
}
#inulin01 ul li:nth-child(4){
 right: 0;
}
#inulin01 .txt-r{
 font-size: 10px;
 font-weight: 500;
 text-align: left; 
 text-indent: -4em;
 padding-left: 45em;
 box-sizing: border-box;
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #inulin01 {
  min-width: 1000px;
 }
}
@media screen and (max-width: 640px) {
 #inulin01{
  padding: 15px 0 20px;  
 }
 #inulin01 h2{
  width: 33.86%;
  margin: auto;
 }
 #inulin01 p{
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 13px;
 }
 #inulin01 ul{
  width: 82.66%;
  height: auto;
  padding-top: 100%;
  margin: 30px auto 30px;
 }
 #inulin01 ul li{
  width: 56.45%;
 }
 #inulin01 ul li:nth-child(odd){
  left:0;
 }
 #inulin01 ul li:nth-child(2){
  top:21%;
  left:43.66%;
 }
 #inulin01 ul li:nth-child(3){
  top:42%;
  right: 0;
 }
 #inulin01 ul li:nth-child(4){
  top:63%;
  left:43.66%;
 } 
 #inulin01 .txt-r{
  padding-left: 5em;
 }
}

/*================================================================*/
/*=== 5: inulin02 ================================================*/
#inulin02{
 padding: 30px 0 40px;
}
#inulin02 h2{
 width: 289px;
 padding-bottom: 30px;
 margin: auto;
}
#inulin02 sup{
 font-size: 12px;
}
#inulin02 .function01{
 padding: 75px 0;
 background: url("/dairies/inulin/images/inulin02-bg01.jpg") center center no-repeat;
 background-size: cover;
}
#inulin02 .function02{
 padding: 75px 0;
 background: url("/dairies/inulin/images/inulin02-bg02.jpg") center center no-repeat;
 background-size: cover;
}
#inulin02 .function03{
 padding: 75px 0;
 background: url("/dairies/inulin/images/inulin02-bg03.jpg") center center no-repeat;
 background-size: cover;
}
#inulin02 .txt-r{
 font-size: 10px;
 font-weight: 500;
 margin-top: 5px;
}
#inulin02 .function-inner{
 width: 540px;
 height: 250px;
 padding: 50px 20px 0 30px;
 background: rgba(252,252,252,0.8);
 box-sizing: border-box;
}
#inulin02 .function-inner h3{
 font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", sans-serif; 
 color: #0091ab;
 font-size: 29px;
 font-weight: 500;
 letter-spacing: 0.14em;
 padding-left: 50px;
}
#inulin02 .function-inner h3 span{
 display: none;
}
#inulin02 .function-inner h4{
 font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", sans-serif; 
 color: #ff8e01;
 font-size: 22px;
 font-weight: 500;
 line-height: 2.5em;
}
#inulin02 .function-inner p{
 font-size: 16px;
 font-weight: 500;
}
#inulin02 .function02 .function-inner{
 margin:  0 0 0 auto;
}
#inulin02 .function01 .function-inner h3{
 background: url("/dairies/inulin/images/inulin02-fun01.png") left center no-repeat;
}
#inulin02 .function02 .function-inner h3{
 background: url("/dairies/inulin/images/inulin02-fun02.png") left center no-repeat;
}
#inulin02 .function03 .function-inner h3{
 letter-spacing: 0.10em;
 background: url("/dairies/inulin/images/inulin02-fun03.png") left center no-repeat;
}
@media all and (-ms-high-contrast:none) { /* ie11 */
 	*::-ms-backdrop, #inulin02 .function-inner h3 {
   padding-top: 5px;
 }
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #inulin02 {
  min-width: 1000px;
 }
 #inulin02 .content-inner{
  width: 95%;
 }
}
@media screen and (max-width: 640px) {
 #inulin02{
 padding: 15px 0 20px;
 }
 #inulin02 h2{
  width: 48.26%;
  padding-bottom: 20px;
 }
#inulin02 .function01{
 padding: 2.67% 0;
 background: url("/dairies/inulin/images/inulin02-bg01-sp.jpg") left 50% center no-repeat;
 background-size: cover;
}
#inulin02 .function02{
 padding: 2.67% 0;
 background: url("/dairies/inulin/images/inulin02-bg02-sp.jpg") center center no-repeat;
 background-size: cover;
}
#inulin02 .function03{
 padding: 2.67% 0;
 background: url("/dairies/inulin/images/inulin02-bg03-sp.jpg") center center no-repeat;
 background-size: cover;
}
#inulin02 .function-inner{
 width: 100%;
 height: 100%;
 padding: 25px 10px 10px 15px;
 box-sizing: border-box;
}
#inulin02 .function-inner h3{
 font-size: 20px;
 letter-spacing: 0em;
 padding:10px 0 10px 50px
}
#inulin02 .function-inner h4{
 font-size: 16px;
 line-height: 1.2em;
 margin-bottom: 10px;
}
#inulin02 .function-inner p{
 font-size: 12px;
}
#inulin02 .function01 .function-inner h3{
 background: url("/dairies/inulin/images/inulin02-fun01.png") left center no-repeat;
}
#inulin02 .function02 .function-inner h3{
 background: url("/dairies/inulin/images/inulin02-fun02.png") left center no-repeat;
}
#inulin02 .function03 .function-inner h3{
 letter-spacing: 0em;
 background: url("/dairies/inulin/images/inulin02-fun03.png") left center no-repeat;
}
 
}

/*================================================================*/
/*=== 6: inulin03 ================================================*/
#inulin03{
 padding: 30px 0 60px;
 background-image:  url("/dairies/inulin/images/inulin03-bg-left.png"), url("/dairies/inulin/images/inulin03-bg-right.png");
 background-position: left -42px top, right -42px top;
 background-repeat: repeat-y, repeat-y;
}
#inulin03 h2{
 width: 357px;
 padding-bottom: 57px;
 margin: auto;
}
#inulin03 h3{
 padding-top: 56px;
 margin: 65px 103px 45px;
 border-top: dotted 2px #8b8b8b;
}
#inulin03 h3 img{
 width: 566px;
 display: block;
 margin: auto;
}
#inulin03 p.txt{
 font-size: 16px;
 font-weight: 500;
 text-align: center;
}
#inulin03 ul {
 text-align: center;
 padding: 0 30px;
 margin-bottom: 40px;
 box-sizing: border-box;
}
#inulin03 ul li{
 display: inline-block;
}
/*#inulin03 ul li:first-child{
 margin-right: 59px;
 box-sizing: border-box;
}*/
#inulin03 .graf{
 width: 710px;
 margin: 65px auto 0;
}
#inulin03 .notes_b{
 display: block;
 font-size: 16px;
 font-weight: 700;
 text-align: center;
 margin-bottom: 30px;
}
#inulin03 .notes{
 display: block;
 font-size: 10px;
 font-weight: 500;
 margin-left: 100px;
}
#inulin03 .txt .notes{
 margin:10px 150px 0 0;
}
#inulin03 .graf .notes{
 margin-top: 16px;
 margin-left: 0;
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #inulin03 {
  min-width: 1000px;
 }
}
@media screen and (max-width: 640px) {
 #inulin03{
  padding: 15px 0 30px;
  background-image: none;
 }
 #inulin03 h2{
  width: 59.86%;
  padding-bottom: 27px;
  margin: auto;
 }
#inulin03 h3{
 padding-top: 28px;
 margin: 32px 8.67% 23px;
 border-top: dotted 2px #8b8b8b;
}
#inulin03 h3 img{
 width: 88.26%;
 display: block;
 margin: auto;
}
 #inulin03 p.txt{
  font-size: 12px;
  text-align: left;
 }
 #inulin03 ul {
  text-align: center;
  padding: 0 8.67%;
  margin-bottom: 20px;
  box-sizing: border-box;
 }
 #inulin03 ul li{
  display: block;
 }
 #inulin03 ul li:first-child{
  margin-right: 0;
  padding-bottom: 40px;
  box-sizing: border-box;
 }
#inulin03 .graf{
 width: 82.66%;
 margin: 32px auto 0;
 }
 #inulin03 .notes_b{
  font-size: 12px;
  text-align: left;
  margin-bottom: 15px;
 }
 #inulin03 .notes{
  font-size: 10px;
  margin-left: 0;
 }
#inulin03 .txt .notes{
 margin:10px 0 0 0;
 }
 #inulin03 .graf .notes{
  margin-top: 12px;
 }
 #inulin03 p span.g{
  font-family: 'ＭＳ Ｐ明朝', 'MS PMincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'serif';
  font-weight: 700;
 }
}

/*================================================================*/
/*=== 7: inulin04 ================================================*/
#inulin04{
 padding: 52px 0 95px;
 background: #f3f3f3;
}
#inulin04 h2{
 width: 521px;
 margin: auto;
}
#inulin04 p{
 width: 742px;
 margin: auto;
}
#inulin04 ul {
 text-align: center;
 padding: 0 75px;
 margin: 40px 0 72px;
 box-sizing: border-box;
}
#inulin04 ul li{
 width: 400px;
 display: inline-block;
}
#inulin04 ul li:first-child{
 margin-right: 40px;
 box-sizing: border-box;
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #inulin04 {
  min-width: 1000px;
 }
}
@media screen and (max-width: 640px) {
 #inulin04{
  padding: 26px 0 47px;
 }
 #inulin04 h2{
  width: 81.97%;
 }
 #inulin04 p{
  width: 82.8%;
 }
 #inulin04 ul {
  text-align: center;
  padding: 0;
  margin: 20px auto 36px;
  box-sizing: border-box;
 }
 #inulin04 ul li{
  width: 71.05%;
  display: block;
  margin: auto;
 }
 #inulin04 ul li:first-child{
  margin:0 auto 40px;
  box-sizing: border-box;
 } 
}

/*================================================================*/
/*=== 8: inulin05 ================================================*/
#inulin05{
 padding: 52px 0 95px;
 background-color: #fffdf6;
 background-image:  url("/dairies/inulin/images/inulin05-bg-left.png"), url("/dairies/inulin/images/inulin05-bg-right.png");
 background-position: left -42px top, right -42px top;
 background-repeat: repeat-y, repeat-y;
}
#inulin05 h2{
 width: 430px;
 margin: auto;
 margin: 0 auto 53px;
}
#inulin05 p{
 font-size: 16px;
 font-weight: 500;
 text-align: center;
 line-height: 1.8em;
}
#inulin05 ul {
 display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content:flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
 	-webkit-align-items: flex-end;
	-ms-align-items: flex-end;
	align-items: flex-end;
 padding: 0 0 0 75px;
 margin: 65px 0 40px;
 box-sizing: border-box;
}
#inulin05 ul li{
 display: block;
}
#inulin05 ul li:first-child{
 width: 400px;
 margin-right: 40px;
 box-sizing: border-box;
}
#inulin05 ul li img{
 margin: 0 0 auto 0; 
}
#inulin05 .figure{
 width: 754px;
 padding-right: 47px;
 margin: 40px 0 80px auto; 
 box-sizing: border-box;
}
#inulin05 .figure .figure-img{
 width: 352px;
 margin: 0 0 0 auto;
}
#inulin05 .figure .figure-txt{
 position: relative;
 width: 510px;
}
#inulin05 .figure .figure-txt .figure-txt-01{
 position: absolute;
 bottom:133px;
 width: 510px;
}
#inulin05 .figure .figure-txt .figure-txt-02{
 position: absolute;
 bottom:116px;
 left: 45%;
 width: 54px;
}
#inulin05 .figure .figure-txt .figure-txt-03{
 position: absolute;
 bottom:0px;
 width: 510px;
}
#inulin05 p.result{
 width: 452px;
 display: block;
 margin: auto;
}
#inulin05 .figure-txt-01 {
 transition: all 3s;
 animation-name: fadeIn;
 animation-duration: 5s;
}
@keyframes fadeIn {
  0% {
  filter: grayscale(100%);
  }
  100% {
  filter: grayscale(0%);
  }
}
#inulin05 .figure-txt-03 {
 transition: all 5s;
 animation-name: fadeIn2;
 animation-duration: 5s;
}
@keyframes fadeIn2 {
  0% {
  filter: grayscale(100%);
  }
  70% {
  filter: grayscale(100%);
  }
  100% {
  filter: grayscale(0%);
  }
}
/*---sp-------------*/
@media screen and (min-width: 641px){
 #inulin05 {
  min-width: 1000px;
 }
}
@media screen and (max-width: 640px) { 
 #inulin05{
  padding: 26px 0 47px;
  background-color: #fffdf6;
  background-image:  none;
 }
 #inulin05 h2{
  width: 71.73%;
  margin: 0 auto 26px;
 }
 #inulin05 p{
  font-size: 12px;
  line-height: 1.8em;
 }
 #inulin05 ul{
	 display: block;
  padding: 0;
  margin: 20px 0 36px;
  box-sizing: border-box;
 }
 #inulin05 ul li{
  width: 76.44%;
  display: block;
  margin: auto;
 }
 #inulin05 ul li:first-child{
  width: 71.05%;
  margin:0 auto 40px;
  box-sizing: border-box;
 }
 #inulin05 ul li:last-child img{
  width: 100%;
  margin-left: 3.18%;
 }
 #inulin05 .figure{
  width: 100%;
  padding: 0 8.67%;
  margin: 30px auto 40px; 
  box-sizing: border-box;
 }
 #inulin05 .figure .figure-img{
  width: 78.53%;
  margin: 0 auto;
 }
 #inulin05 .figure .figure-txt{
  width: 100%;
  margin-top: 20px; 
  box-sizing: border-box;
 }
#inulin05 .figure .figure-txt .figure-txt-01{
 position: static;
 width: 100%;
 margin: 0 auto;
}
#inulin05 .figure .figure-txt .figure-txt-02{
 position: static;
 display: block;
 width: 12.79%;
 margin: 0 auto 10px;
}
#inulin05 .figure .figure-txt .figure-txt-03{
 position: static;
 width: 100%;
 margin: 0 auto;
}
 #inulin05 p.result{
  width: 72.39%;
  display: block;
  margin: auto;
 }
}
/*================================================================*/