@charset "utf-8";
/* CSS Document */

#mainvisual .ttl { text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff; }
#mainvisual .txt { width: 60%; text-align: justify; }
#mainvisual .txt span { padding: .1em 0; background-color: rgba(255, 255, 255, .7); }

#products { background-color: #fdfcf7; }
#products #mainvisual { background: url(../img/mainvisual.jpg) no-repeat center / cover; }
#products #mainvisual .inner { flex-direction: column; justify-content: center; align-items: flex-start; }
#products #mainvisual .ttl { text-shadow: none; }
#products #mainvisual .txt { width: 100%; color: #000; }

#butter #mainvisual { background: url(../butter/img/mainvisual.jpg) no-repeat center / cover; }
#milk #mainvisual { background: url(../milk/img/mainvisual.jpg) no-repeat center / cover; }
#powder-milk #mainvisual { background: url(../powder-milk/img/mainvisual.jpg) no-repeat center / cover; }
#natural-cheese #mainvisual { background: url(../natural-cheese/img/mainvisual.jpg) no-repeat center / cover; }
#functional-powder-milk #mainvisual { background: url(../functional-powder-milk/img/mainvisual.jpg) no-repeat center / cover; }
#flavor #mainvisual { background: url(../flavor/img/mainvisual.jpg) no-repeat center / cover; }
#condence-milk #mainvisual { background: url(../condence-milk/img/mainvisual.jpg) no-repeat center / cover; }
#cream #mainvisual { background: url(../cream/img/mainvisual.jpg) no-repeat center / cover; }
#process-cheese #mainvisual { background: url(../process-cheese/img/mainvisual.jpg) no-repeat center / cover; }
#protein #mainvisual { background: url(../protein/img/mainvisual.jpg) no-repeat center / cover; }
#yogurt #mainvisual { background: url(../yogurt/img/mainvisual.jpg) no-repeat center / cover; }
#sterilizing-bacteria #mainvisual { background: url(../sterilizing-bacteria/img/mainvisual.jpg) no-repeat center / cover; }
#ice #mainvisual { background: url(../ice/img/mainvisual.jpg) no-repeat center / cover; }
#frozen-whip #mainvisual { background: url(../frozen-whip/img/mainvisual.jpg) no-repeat center / cover; }
#soft-mix #mainvisual { background: url(../soft-mix/img/mainvisual.jpg) no-repeat center / cover; }
#fungus #mainvisual { background: url(../fungus/img/mainvisual.jpg) no-repeat center / cover; }
#peptide #mainvisual { background: url(../peptide/img/mainvisual.jpg) no-repeat center / cover; }
#lactulose #mainvisual { background: url(../lactulose/img/mainvisual.jpg) no-repeat center / cover; }
#lactoferrin #mainvisual { background: url(../lactoferrin/img/mainvisual.jpg) no-repeat center / cover; }
#calcium #mainvisual { background: url(../calcium/img/mainvisual.jpg) no-repeat center / cover; }

/* products_area */
#products_area { margin-bottom: 180px; }

/* lower_page common */
main .ttl .line { display: inline-block; padding-bottom: .3em; position: relative; }
main .ttl .line::after { content: ''; width: 100%; height: 10px; background-color: #b9e5fb; position: absolute; bottom: 0; left: 0; }
/* item_list */
.item_list { width: 100%; border-spacing: 2px; }
.item_list th { padding: .5em; vertical-align: middle; background-color: #061f6f; color: #fff; font-weight: normal; white-space: nowrap; }
.item_list td { padding: 2em 1.5em; vertical-align: middle; }
.item_list tr:nth-child(odd) td { background-color: #f5f5f5; }
.item_list tr:nth-child(even) td { background-color: #e6f6fe; }
.item_list .fs_italic { font-style: italic; }
/* .item_list .expiry { white-space: nowrap; } */

/* products_example */
#products_example { margin-top: 90px; }
#products_example.only { margin-bottom: 180px; }
#products_example .ttl { margin-bottom: 1.5em; font-size: 4.2rem; font-weight: normal; text-align: center; color: #061f6f; }
#products_example .title { margin-bottom: 3.5em; display: flex; align-items: center; }
#products_example .title .ttl { width: 33%; margin-bottom: 0; }
#products_example .title .txt { width: 67%; font-size: 1.8rem; color: #061f6f; padding: 0 1.5em; }
#products_example .notes { text-align: center; }
#products_example .intro { margin: 0 auto 3.5em; width: fit-content; font-size: 1.8rem; line-height: 2; }
#products_example .bnn_area { max-width: 580px; margin: 120px auto 0; }
#products_example .bnn_area a { border: 2px solid #3cb5ea; border-radius: 10px; padding: 25px; display: flex; justify-content: space-between; align-items: center; position: relative; }
#products_example .bnn_area a::after { content: ''; width: 18px; height: 15px; background: url(../../common/img/icon_window.png) no-repeat center / cover; position: absolute; bottom: 20px; right: 25px; }
#products_example .bnn_area img { width: 20%; display: block; }
#products_example .bnn_area p { width: 75%; font-size: 14px; color: #061f6f; }

/* products_material */
#products_material { margin: 90px 0 180px; }
#products_material .title { margin-bottom: 2.5em; display: flex; align-items: center; }
#products_material .ttl { width: 33%; font-size: 2.4rem; font-weight: normal; text-align: center; color: #061f6f; }
#products_material .txt { width: 67%; font-size: 1.8rem; color: #061f6f; padding: 0 1.5em; }
#products_material .ttl .line { padding-bottom: .6em; }

/* material_info */
#material_info { margin: 90px 0 180px; }
#material_info .ttl { margin-bottom: 1.5em; font-size: 2.4rem; font-weight: normal; text-align: center; color: #061f6f; }
#material_info .material_list { display: flex; flex-wrap: wrap; justify-content: space-between; }
#material_info .material_list li { width: calc(50% - 5px); padding: 10px; background-color: #f5f5f5; display: flex; align-items: center; }
#material_info .material_list .img { width: 50%; }
#material_info .material_list .img img { display: block; }
#material_info .material_list .txt_area { width: 50%; padding: 1em; }
#material_info .material_list .li_ttl { margin-bottom: 1em; font-size: 1.8rem; font-weight: normal; color: #061f6f; }
#material_info .material_list .li_txt { margin-top: .5em; padding-left: 1.3em; position: relative; }
#material_info .material_list .li_txt::after { content: ''; width: .3em; height: .3em; background-color: #061f6f; border-radius: 50%; position: absolute; top: .7em; left: .4em; }


/*---------------------------------------------------------------
PCレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px){
  #mainvisual .fs_small { font-size: 1.7rem; }

  .item_list .name { width: 16%; }
  .item_list .img { width: 20%; }
  .item_list .feature { width: 20%; }
  .item_list .standard { width: 12%; }
  .item_list .keep { width: 16%; }
  .item_list .expiry { width: 8%; }

  #frozen-whip .item_list .name { width: 20%; }
  #frozen-whip .item_list .img { width: 20%; }
  #frozen-whip .item_list .feature { width: 16%; }
  #frozen-whip .item_list .standard { width: 12%; }
  #frozen-whip .item_list .keep { width: 16%; }
  #frozen-whip .item_list .expiry { width: 8%; }

  #cream .item_list .name { width: 16%; }
  #cream .item_list .img { width: 16%; }
  #cream .item_list .feature { width: 16%; }
  #cream .item_list .standard { width: 12%; }
  #cream .item_list .component { width: 10%; }
  #cream .item_list .keep { width: 20%; }
  #cream .item_list .expiry { width: 10%; }

  #ice .item_list .name { width: 18%; }
  #ice .item_list .img { width: 20%; }
  #ice .item_list .feature { width: 20%; }
  #ice .item_list .standard { width: 12%; }
  #ice .item_list .component { width: 14%; }
  #ice .item_list .keep { width: 16%; }

  #soft-mix .item_list .name { width: 16%; }
  #soft-mix .item_list .img { width: 18%; }
  #soft-mix .item_list .feature { width: 16%; }
  #soft-mix .item_list .standard { width: 12%; }
  #soft-mix .item_list .component { width: 10%; }
  #soft-mix .item_list .keep { width: 18%; }
  #soft-mix .item_list .expiry { width: 10%; }
}

/*---------------------------------------------------------------
横幅768px～1216pxまでのレイアウト
---------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1216px){
}

/*---------------------------------------------------------------
スマホレイアウト
---------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  #mainvisual .inner { flex-direction: column; justify-content: center; align-items: center; }
  #mainvisual .txt { width: 100%; margin-top: 1.5em; }

  #products #mainvisual { background: url(../img/mainvisual_sp.jpg) no-repeat center / cover; }
  #products #mainvisual .inner { flex-direction: column-reverse; align-items: center; }
  #products #mainvisual .txt { text-align: center; }
  
  #butter #mainvisual { background: url(../butter/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #milk #mainvisual { background: url(../milk/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #powder-milk #mainvisual { background: url(../powder-milk/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #natural-cheese #mainvisual { background: url(../natural-cheese/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #functional-powder-milk #mainvisual { background: url(../functional-powder-milk/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #flavor #mainvisual { background: url(../flavor/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #condence-milk #mainvisual { background: url(../condence-milk/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #cream #mainvisual { background: url(../cream/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #process-cheese #mainvisual { background: url(../process-cheese/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #protein #mainvisual { background: url(../protein/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #yogurt #mainvisual { background: url(../yogurt/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #sterilizing-bacteria #mainvisual { background: url(../sterilizing-bacteria/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #ice #mainvisual { background: url(../ice/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #frozen-whip #mainvisual { background: url(../frozen-whip/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #soft-mix #mainvisual { background: url(../soft-mix/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #fungus #mainvisual { background: url(../fungus/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #peptide #mainvisual { background: url(../peptide/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #lactulose #mainvisual { background: url(../lactulose/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #lactoferrin #mainvisual { background: url(../lactoferrin/img/mainvisual_sp.jpg) no-repeat center / cover; }
  #calcium #mainvisual { background: url(../calcium/img/mainvisual_sp.jpg) no-repeat center / cover; }

  /* products_area */
  #products_area { margin-bottom: 100px; }

  /* lower_page common */
  main .ttl .line::after { height: 8px; }
  /* item_list */
  .item_list tr,
  .item_list th,
  .item_list td { display: block; }
  .item_list tr:nth-child(even) td { background-color: #f5f5f5; }
  .item_list tr:not(:last-child) { margin-bottom: 2em; }
  .item_list td { padding: 1em 1.5em; }
  .item_list td:not(:last-child) { border-bottom: 2px solid #fff; }
  .item_list tr td.name { background-color: #061f6f; color: #fff; text-align: center; }
  .item_list .feature { line-height: 2; }
  .item_list .standard,
  .item_list .component,
  .item_list .keep,
  .item_list .expiry { text-align: left; padding-left: 7.5em; position: relative; }
  .item_list .standard::before,
  .item_list .component::before,
  .item_list .keep::before,
  .item_list .expiry::before { position: absolute; top: 50%; left: 1.5em; transform: translateY(-50%); }
  .item_list .standard::before { content: '規格'; }
  .item_list .component::before { content: '成分'; }
  .item_list .keep::before { content: '保存方法'; }
  .item_list .expiry::before { content: '賞味期限'; }

  /* products_example */
  #products_example.only { margin-bottom: 90px; }
  #products_example .ttl { margin-bottom: 1.5em; font-size: 3rem; }
  #products_example .title { margin-bottom: 2em; display: block; }
  #products_example .title .ttl { width: 100%; margin-bottom: 1em; }
  #products_example .title .txt { width: 100%; font-size: 1.4rem; padding: 0; }
  #products_example .intro { width: 100%; font-size: 1.6rem; }
  #products_example .bnn_area { margin-top: 60px; }
  #products_example .bnn_area a { padding: 20px 15px; }
  #products_example .bnn_area a::after { width: 14px; height: 12px; bottom: 6px; right: 6px; }
  
  /* products_material */
  #products_material { margin: 90px 0; }
  #products_material .title { margin-bottom: 2em; display: block; }
  #products_material .ttl { width: 100%; margin-bottom: 1em; }
  #products_material .txt { width: 100%; font-size: 1.4rem; padding: 0; }
  #products_material .ttl .line { padding-bottom: .4em; }
  
  /* material_info */
  #material_info { margin: 90px 0; }
  #material_info .ttl { margin-bottom: 1em; }
  #material_info .ttl .line { padding-bottom: .4em; }
  #material_info .material_list { display: block; }
  #material_info .material_list li { width: 100%; display: block; padding: 20px; margin-bottom: 20px; }
  #material_info .material_list .img { width: 100%; margin-bottom: 1.5em; }
  #material_info .material_list .txt_area { width: 100%; padding: 0; }
}