@charset "UTF-8";
/* ====================================================
　CSS 3@ Document 2019.05
==================================================== */
@media print, screen and (min-width: 768px) {
  html { font-size: clamp(7px, 0.52vw, 10px); }
  body { font-size: 1.6rem;}
}
@media screen and (max-width: 767px) {
  html { font-size: 2.66vw; }
  body { font-size: 1.4rem; }
}

body {
  color: #333333;
  font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 400;
}

input, button, textarea, *:before, *:after { font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }

p { margin: 0 0 1em; line-height: 2.1875;}
p:last-of-type { margin-bottom: 0; }

a { color: #313d70; }

.serif { font-family: "游明朝 Medium", "YuMincho Medium", "游明朝", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", serif; }

.sans { font-family: "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }

/* Gotham */
@font-face {
  font-family: "gotham";
  src: url("../fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

.gotham{
  font-family: "gotham", sans-serif;
  font-weight: 700;
}

/* Metropolis */
@font-face {
  font-family: "metropolis";
  src: url("../fonts/Metropolis-Medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "metropolis";
  src: url("../fonts/Metropolis-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

.metropolis{
  font-family: "metropolis", sans-serif;
  font-weight: 400;
}
.metropolis-bold{
  font-family: "metropolis", sans-serif;
  font-weight: 700;
}


.alignL { text-align: left !important; }

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

.alignR { text-align: right !important; }

li{list-style: none;}

img.alignright { float: right; margin: 0.5em 0 0.5em 1em; }

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

img.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }

img{max-width: 100%; height: auto; vertical-align: bottom;}

@media print, screen and (min-width: 768px) { a[href^="tel:"] { pointer-events: none !important;text-decoration: none; } }

/* =======================================================
　フレーム
========================================================== */
.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1614px;
}
.contents + .contents{
  margin-top: 6em;
}

@media print, screen and (min-width: 768px) {
  .contentsBase{padding-top: 13em;}
  .contents {
    padding-left: 15px;
    padding-right: 15px;
  }
  .contents.narrow{
    max-width: 1122px;
    width: 80%;
  }
  .contents.narrowWide{
    max-width: 1145px;
  }
}
@media screen and (max-width: 767px) {
  .contentsBase{padding-top: 3.5em;}
  .contents {
    padding-left: 30px;
    padding-right: 30px;
  }
  .contents + .contents{
    margin-top: 4em;
  }
  .contents.title{
    padding-left: 0!important;
    padding-right: 0!important;
  }
}


/* ====================================================
　コンテンツスクロール停止
==================================================== */
html.menu_open,body.menu_open {
  overflow:hidden;
  overscroll-behavior:none;
   touch-action: none;
  -webkit-overflow-scrolling: none;
}




/* ######################################################################################

　ヘッダ

###################################################################################### */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index:1001;
}

.header,
.header a,
.header span{color: #000000; font-weight: 700;}

.header .contents{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header.open .logo,
.header.open .gnav{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .header{padding: 0.5em 0;}
  .header .logo{width: 18%;}
  .header .nav{display: flex; width: 80%; justify-content: flex-end;}

}
@media screen and (max-width: 767px) {
  .header{padding-top: 0.75em; padding-bottom: 1.5em; background: #353131;}
  .header.open{background: transparent;}
  .header .logo{width: 46%; margin-left: auto; margin-right: auto;}
  .header .logo img{width: 100%; filter: brightness(0) saturate(100%) invert(100%) sepia(42%) saturate(2%) hue-rotate(179deg) brightness(111%) contrast(100%);}
  .header .nav{position: absolute; top: 0; right: 0;}
}


@media print {
  .header{position: absolute;}
}



/* ##############################################################################

gnav  グローバルメニュー

############################################################################## */
/* =======================================================
　gnav
========================================================== */
@media print, screen and (min-width: 768px) {
  .header .gnav{margin-right: 3.5em; width: 85%;}
  .header .gnav > ul{
      margin-right: auto;
      margin-left: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 100%;
  }
  .header .gnav > ul > li{position: relative; height: 100%;}
  .header .gnav > ul > li > a,
  .header .gnav > ul > li > span{
    position: relative;
    padding: 0.5em 0;
    text-decoration: none;
    font-weight: 500;
    overflow: visible;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 961px) {
  .header .gnav > ul > li > a,
  .header .gnav > ul > li > span{
    font-size: 1.9rem;
  }
}
@media screen and (max-width: 767px) {
  .header .gnav{display: none;}
}


/*  ドロップダウンメニュー
-------------------------------------*/
.gnav .child{
  position:absolute;
  /* top: 0; */
  text-align:left;
  padding:0;
  background-size: cover;
  background-position: center bottom;
  z-index:1;
  -webkit-transition: height .25s ease;
  transition: height .25s ease;
  overflow: hidden;
  width: auto;
  max-height:0;
  height: auto;
  transition:max-height 0.75s;
  /* margin-top: 1em; */
  padding-top: 1em;
}
.gnav .parent.contact .child{
  right: 0em;
}
.gnav .child:before{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 1em);
  background-color: #000000;
  opacity: 0.4;
  z-index: 1;
}
.gnav .child.open{
  max-height: 400px;
}
.gnav .child > *{
  position: relative;
  z-index: 2;
}
.gnav .child ul{
  min-width: 14em;
  margin:0 auto;
  padding: 1.25em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
    
}
.gnav .parent.wide .child ul{
  min-width: 16em;
}

.gnav .child ul li{
  -webkit-transition: all .3s cubic-bezier(.12,.66,.25,1) .1s;
  transition: all .3s cubic-bezier(.12,.66,.25,1) .1s;
  line-height: 1;
  
}
.gnav .child ul li + li{
  margin-top: 0.25em;
}
.gnav .child ul li a{
  display: block;
  padding: 0.65em 0;
  font-size: 1.6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 400;
}


/* contact */
.gnav .parent.contact .child li{padding: 2em 0.25em 1.5em; width: 160px;}
.gnav .parent.contact .child li:first-child{padding-left: 2em; width: calc(1.5em + 160px);}
.gnav .parent.contact .child li:last-child{padding-right: 2em; width: calc(1.5em + 160px);}
.gnav .parent.contact .child{display: flex;}
.gnav .parent.contact .child a{text-decoration: none;}
.gnav .parent.contact .child li + li{margin-left: 0.5em;}
.gnav .parent.contact .child .icon{margin-bottom: 1em; text-align: center;}
.gnav .parent.contact .child .icon img{height: 3.75em; width: auto;}
.gnav .parent.contact .child .icon.mail img{height: 2.75em;}
.gnav .parent.contact .child .icon.mail{
    height: 3.75em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gnav .parent.contact .child .detail{width: 14em;}
.gnav .parent.contact .child .detail__title{
  position: relative;
  padding: 0.15em 0 0.35em;
  margin-bottom: 0.25em;
  background: transparent;
  border-radius: 2em;
  color: #ffffff;
  border: 1px solid #ffffff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  font-weight: 600;
}
.gnav .parent.contact .child .detail__title:after{
  content: "";
  position: absolute;
  top: calc(50% - 0.35em);
  right: 1em;
  width: 0.75em;
  height: 0.75em;
  transform: rotate(45deg);
  border-right: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
  background-size: contain !important;
}

.gnav .parent.contact .child .detail__text{
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
}


/* ######################################################################################

　hbgMenu：ハンバーガーメニュー

###################################################################################### */
.hbgMenu__overlay {
    content:"";
    display:block;
    position:fixed;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.35);
    z-index: 1002;
}


.hbgMenuContentsBase {
  background: #fff;
}
.hbgMenu {
  position:fixed;
  top:0;
  right:0;
  width: 100%;
  height:100%;
  z-index:1003;
  /* background:#fff; */
}
.hbgMenuContent {
  background: rgba(244, 245, 245, 0.95);
  height:100%;
  overflow-y:scroll;
}


@media print, screen and (min-width: 768px) {
  .hbgMenu {
    width: 50%;
  }
  .hbgMenuContent {
    padding: 0 0 100px;
  }
}
@media screen and (max-width: 767px) {
  .hbgMenu {
    width: 100%;
  }
  .hbgMenuContent {
    padding: 0 0 100px;
  }
}

/* ====================================================
　hbgMenuHead
==================================================== */
.hbgMenuHead{position: relative;}
.hbgMenuHead{
  background: #324380;
  color: #fff;
  font-weight: bold;
}
.hbgMenuHead .hbgMenuToggle{
  position: absolute;
  right: 0;
  top: 0;
}
.hbgMenuHead .hbgMenuToggle__bar{
  background: #fff;
}



@media print, screen and (min-width: 768px) {
  .hbgMenuHead{padding: 3em 30px; margin-bottom: 4em;}
  .hbgMenuHead .hbgMenuToggle{right: -1em;}
  .hbgMenuHead__inner{
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .hbgMenuHead__title{font-size: 2.7rem;letter-spacing: 0.35em;}
}
@media screen and (max-width: 767px) {
  .hbgMenuHead{padding: 0.75em 1.5em; margin-bottom: 3em;}
  .hbgMenuHead__title{font-size: 2.0rem;letter-spacing: 0.25em;}
}


/* ====================================================
　≡メニュー
==================================================== */
.hbgMenuAcm {}
.hbgMenuAcm > li {position:relative;margin-bottom: 2em;}

.hbgMenuAcm > li > span,
.hbgMenuAcm > li > a{
  display:block;
  position:relative;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.hbgMenu .hbgMenuAcm > li:not(.hbgMenuAcm__hasChild) a:after{
content: "";
position: absolute;
top: calc(50% - 4px);
right: 5px;
transform: rotate(45deg);
width: 8px;
height: 8px;
}

.hbgMenuAcm > li > ul{display: flex; justify-content: space-between; flex-wrap: wrap;} 
.hbgMenuAcm > li > ul > li{width: 100%;}
.hbgMenuAcm > li > ul > li > span,
.hbgMenuAcm > li > ul > li > a{
  position: relative;
  display: block;
  text-decoration: none;
  color: #000;
}

.hbgMenuAcm > li > ul > li:not(.fb) > a[target="_blank"]:after{
  content: "";
  position: relative;
  top: 0.1em;
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.5em;
  background-image: url(../img/header/ivo_blank.svg);
}

.hbgMenuAcm > li > span a{text-decoration: none; color: #000}


@media print, screen and (min-width: 768px) {
  .hbgMenuAcm {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
  .hbgMenuAcm > li {
    margin-bottom: 3em;
  }
  .hbgMenuAcm > li > span,
  .hbgMenuAcm > li > a{
    padding: 0.25em 0 0.5em;
    font-size: 2.6rem;
  }
  .hbgMenuAcm > li > ul > li.col2{width: 50%;}
  .hbgMenuAcm > li > ul > li > span,
  .hbgMenuAcm > li > ul > li > a{
    padding: 0.35em 0;
    font-size: 2.0rem;
  }
}
@media screen and (max-width: 767px) {
  .hbgMenuAcm{
    padding: 0 20px;
  }
  .hbgMenuAcm > li {
    margin-bottom: 3em;
  }
  .hbgMenuAcm > li > span,
  .hbgMenuAcm > li > a{
    padding: 0.25em 0;
    font-size: 2.2rem;
  }
  .hbgMenuAcm > li > ul > li > span,
  .hbgMenuAcm > li > ul > li > a{
    padding: 0.35em 0;
    font-size: 1.9rem;
  }
}



/* ====================================================
　≡ボタン
==================================================== */
.hbgMenuToggle {
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-direction: column;
  cursor:pointer;
  z-index:1001;
}
.hbgMenuToggle span {
  display:block;
  height: 2px;
  position:relative;
}
.hbgMenuToggle.open span {
  background: #fff;
}

@media print, screen and (min-width: 768px) {
  .hbgMenuToggle {
      width: 42px;
      height: 42px;
      padding: 0.4em;
  }
  .hbgMenuToggle span {
      width: 100%;
      background:#000;
  }
}
@media screen and (max-width: 767px) {
  .hbgMenuToggle {
      padding: 4vw 0;
      width: 13vw;
      height: 13vw;
      top: 0;
      right: 0;
  }
  .hbgMenuToggle span {
      width: 36%;
      background: #fff;
  }
}
/* @media print {
  .hbgMenuToggle {position:absolute;}
} */




/* ====================================================
　子メニュー展開ボタン
==================================================== */
.hbgMenu__childToggle {
  position:absolute;
  right: -20px;
  width: 13vw;
  height: 13vw;
  cursor:pointer;
  border: none;
  background: none;
}
.hbgMenu__childToggle:before,
.hbgMenu__childToggle:after {
  content:"";
  display:block;
  position:absolute;
  background:#333;
  margin:auto;
}
.hbgMenu__childToggle:before {top:calc(50% - 1px);left: calc(50% - 20%);width: 40%;height:2px;}
.hbgMenu__childToggle:after  {top: calc(50% - 20%);left:calc(50% - 1px);width:2px;height: 40%;}

.hbgMenu__childToggle.open:after{display: none;}



@media print, screen and (min-width: 768px) {
  .hbgMenu__childToggle {
      width: 4em;
      height: 4em;
      top: -0.75em;
      right: -1.25em;
  }
  .hbgMenu__childToggle span {
      width: 100%;
      background:#000;
  }
}
@media screen and (max-width: 767px) {
  .hbgMenu__childToggle {
      padding: 4vw 0;
      width: 13vw;
      height: 13vw;
      top: -0.25em;
      right: 0;
  }
  .hbgMenu__childToggle span {
      width: 36%;
      background: #fff;
  }
}
/* @media print {
  .hbgMenuToggle {position:absolute;}
} */



/* ====================================================
　≡メニュー開閉
==================================================== */

/* ≡メニュー開閉 */
.hbgMenu {
  transform:translateX(100%);
  transition:transform 0.3s ease-in-out;
}
.hbgMenu.open {
  transform:translateX(0);
  height:100vh;
  overflow-y:hidden;
}

/* 子メニュー開閉ボタン */
.hbgMenuToggle:after {transition:opacity 0.4s ease-in-out, transform 0.4s ease-in-out;}
.hbgMenuToggle.open:after {opacity:0; transform:rotate(90deg);}

.hbgMenuToggle span {
  transition: all 0.3s ease-in-out;
}
.hbgMenuToggle.open span:nth-of-type(1) {transform:rotate(-45deg);}
.hbgMenuToggle.open span:nth-of-type(2) {display: none;}
.hbgMenuToggle.open span:nth-of-type(3) {transform:rotate(45deg);}

.hbgMenuToggle.open span:nth-of-type(1) {top: 24%;}
.hbgMenuToggle.open span:nth-of-type(3) {top:-28%;}


/* 子メニュー */
.hbgMenuAcmChild {
  max-height:0;
  transition:max-height 0.6s ease-in-out;
  overflow:hidden;
}
.hbgMenuAcmChild.open {max-height: 1200px;}

.hbgMenuAcmChild__top{
margin-bottom: 20px;
}
* + .hbgMenuAcmChild__title{
margin-top: 20px;
}
.hbgMenuAcmChild__title{
margin-bottom: 0.75em;
font-size: 1.3rem;
color: #757575;
}

.hbgMenuAcmChild .fb a:before{
  content: "";
  position: relative;
  top: 0.1em;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: url(../img/header/ico_fb.svg);
  background-repeat: no-repeat;
  background-size: contain;
}




/* ====================================================
　スクロール
==================================================== */
.fixed-header{
  opacity: 0;
  transform: translateY(-100%);
}
body.fixed .fixed-header{
  opacity: 1;
  transform: translateY(0%);
}

.fixed-spNav{
  opacity: 0;
  transform: translateY(+100%);
}
body.fixed .fixed-spNav{
  opacity: 1;
  transform: translateY(0%);
}

@media print, screen and (min-width: 768px) {
  .fixed-header,
  body.fixed .fixed-header,
  .fixed-spNav,
  body.fixed .fixed-spNav,
  .fixToggle {
    transition: opacity 0.35s cubic-bezier(0.42, 0.04, 0.65, 1), transform 0.35s cubic-bezier(0.42, 0.04, 0.65, 1);
  }
}
@media screen and (max-width: 767px) {
  .fixed-header,
  body.fixed .fixed-header,
  .fixed-spNav,
  body.fixed .fixed-spNav,
  .fixToggle {transition: opacity 0.4s cubic-bezier(0.42, 0.04, 0.65, 1), transform 0.4s cubic-bezier(0.42, 0.04, 0.65, 1);}
}


/* メニュー開閉時 */
.fixed-header{
  background-color: #333;
}
.fixed-header.open{
  /* background-color: transparent; */
  /* transition: background-color 0.15s cubic-bezier(0.42, 0.04, 0.65, 1); */
}
.fixed-header .h-logo,
.fixed-header .snav,
.fixed-header .fixed-spNav{
  opacity: 1;
  pointer-events: all;
  visibility: visible;

}
/* .fixed-header.open .h-logo, */
.fixed-header.open .snav,
.fixed-header.open .fixed-spNav{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s cubic-bezier(0.42, 0.04, 0.65, 1), visibility 0.15s cubic-bezier(0.42, 0.04, 0.65, 1);
}










/* ######################################################################################

　header色

###################################################################################### */
@media print, screen and (min-width: 768px) {
  .pageIndex .contentsBase,
  .pageAbout.philosophy.index .contentsBase,
  .pageAbout.important .contentsBase,
  .pageAbout.quality .contentsBase,
  .pageAbout.health .contentsBase,
  .pageVoice .contentsBase{padding-top: 0;}
  .pageIndex .header,
  .pageIndex .header a,
  .pageIndex .header span,
  .pageAbout.philosophy.index .header,
  .pageAbout.philosophy.index .header a,
  .pageAbout.philosophy.index .header span,
  .pageAbout.important .header,
  .pageAbout.important .header a,
  .pageAbout.important .header span,
  .pageAbout.quality .header,
  .pageAbout.quality .header a,
  .pageAbout.quality .header span,
  .pageVoice .header,
  .pageVoice .header a,
  .pageVoice .header span{color: #fff;}
  .pageIndex .hbgMenuToggle span,
  .pageAbout.philosophy.index .hbgMenuToggle span,
  .pageAbout.important .hbgMenuToggle span,
  .pageAbout.quality .hbgMenuToggle span,
  .pageVoice .hbgMenuToggle span{background: #fff;}
  .pageIndex .header .logo img,
  .pageAbout.philosophy.index .header .logo img,
  .pageAbout.important .header .logo img,
  .pageAbout.quality .header .logo img,
  .pageVoice .header .logo img{filter: brightness(0) saturate(100%) invert(100%) sepia(42%) saturate(2%) hue-rotate(179deg) brightness(111%) contrast(100%);}
}


/* ====================================================
　header　scrollで反転
==================================================== */
@media print, screen and (min-width: 768px) {
  .header {transition:background-color linear 0.5s;}
  .header a,
  .header span{transition:color linear 0.5s;}
  .hbgMenuToggle span{transition:background-color linear 0.5s;}
  body.scroll .header .logo img{transition:filter linear 0.5s;}
      
  body.scroll .header {background-color:rgba(255,255,255,1);}
  body.scroll .header .gnav > ul > li > a,
  body.scroll .header .gnav > ul > li > span{color: #000000!important;}
  body.scroll .hbgMenuToggle span{background-color: #000!important;}
  body.scroll .hbgMenuHead .hbgMenuToggle span{background-color: #fff!important;}
  body.scroll .header .logo img{filter: none!important;}

  body.scroll .header.open{background-color: transparent;}
  body.scroll .header.open .hbgMenuToggle span{background-color: #fff;}
}



/* ######################################################################################

    フッター

###################################################################################### */
.footer{
  position: relative;
  z-index: 3;
}

.finfo .contents,
.fnav .contents {
  max-width: 1760px;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}


/* ====================================================
　fnav
==================================================== */
.fnav {
    background: #e0e4e7;
}
.fnav .contents > ul > li > a,
.fnav .contents > ul > li > span{
  display: block;
  padding-bottom: 0.5em;
  margin-bottom: 0.75em;
  border-bottom: 1px solid #b7bbbb;
  font-size: 1.9rem;
  font-weight: 600;
}

.fnav li + li{margin-top: 0.65em;}
.fnav a{
    color: #000;
    text-decoration: none;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.7;
}
.fnav a[target="_blank"]:after{
    content: "";
    position: relative;
    top: 0.1em;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: 0.5em;
    background-image: url(../img/header/ivo_blank.svg);
}
.fnav .fb a:after{
    content: "";
    position: relative;
    top: 0.25em;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-left: 0.25em;
    background-image: url(../img/header/ico_fb.svg);
}

.fnav li ul {margin-top: 0.75em;}
.fnav li ul li + li{margin-top: 0.5em;}


.pageIndex .fnav{background: #fff;}


@media print, screen and (min-width: 768px) {
  .fnav {
    padding-top: 5em;
    padding-bottom: 6em;
  }
  .fnav .contents{
    display: flex;
    justify-content: space-between;
  }
  .fnav .contents > ul {
    width: 15%;
  }
}
@media screen and (max-width: 767px) {
  .fnav {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  .fnav .contents > ul  + ul{
    margin-top: 3em;
  }
}




/* ====================================================
　finfo
==================================================== */
.finfo{
    background: #394680;
    color: #fff;
}
.finfo__logo{display: flex; margin-bottom: 0.5em;}
.finfo__logo .instagram{margin-left: 1.5em; width: 25px;}
.finfo__address{font-weight: 300; line-height: 2;}

.finfo__nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.finfo__nav .snav ul a{
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}
.finfo__nav .copyright{font-weight: normal; font-weight: 500;}


@media print, screen and (min-width: 768px) {
    .finfo{
        padding-top: 4.5em;
        padding-bottom: 3.5em;
    }
    .finfo__logo .logo{width: 328px;}
    .finfo__nav{margin-top: 6em;}
    .finfo__nav .snav ul{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .finfo__nav .snav ul li + li{margin-left: 2em;}
    .finfo__nav .snav ul a{font-size: 1.8rem;}
    .finfo__nav .copyright{font-size: 1.9rem;}
    .finfo__address{font-size: 1.9rem;}
}
@media screen and (max-width: 767px) {
    .finfo{
        padding-top: 3em;
        padding-bottom: 3em;
    }
    .finfo .contents{
        position: relative;
        display: flex;
        flex-direction: column;
        padding-bottom: 3em;
    }
    .finfo__logo{order: 2;}
    .finfo__address{order: 3;}
    .finfo__nav{order: 1;}

    .finfo__logo .logo{width: 60%;}
    .finfo__nav{margin-top: 0; margin-bottom: 6em;}
    .finfo__nav .snav ul li + li{margin-top: 0.5em;}
    .finfo__nav .snav ul a{font-size: 1.8rem;}
    .finfo__address{font-size: 1.3rem;}
    .finfo__nav .copyright{
        position: absolute;
        bottom: 0;
        font-size: 1.0rem;
    }
}






/* ######################################################################################

　下層ページタイトル

###################################################################################### */
/* ====================================================
　pageTitle
==================================================== */

@media print, screen and (min-width: 768px) {
    .pageTitle{
      margin-top: 4em;
      margin-left: 9.375%;
      margin-bottom: 9em;
      width: 90.625%;
      height: 33.6vw;
      background: #ddd;
      position: relative;
      border-radius: 2.1em 0 0 2.1em;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
    .pageTitle__inner{
      position: absolute;
      bottom: -1px;
      left: 6%;
      width: 44%;
      height: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      padding: 0.75em 3em 0.25em;
      border-radius: 1.9em 1.9em 0 0;
    }
    .pageTitle__logo{margin-bottom: 0.15em;}
    .pageTitle__logo img{height: 0.7em;}
    .pageTitle__title{margin-bottom: 0;font-size: 4.8rem;letter-spacing: 0.15em; font-weight: 700;}


    .pageTitle{background-image: url(../img/contents/_base/pageTitle.jpg);}
    .pageAbout.satisfaction .pageTitle{background-image: url(../img/contents/about/important/satisfaction/pageTitle.jpg);}
    .pageAbout.staff .pageTitle{background-image: url(../img/contents/about/important/staff/pageTitle.jpg);}
    .pageAbout.partner .pageTitle{background-image: url(../img/contents/about/important/partner/pageTitle.jpg);}
    .pageAbout.local .pageTitle{background-image: url(../img/contents/about/important/local/pageTitle.jpg);}
    .pageAbout.value .pageTitle{background-image: url(../img/contents/about/important/value/pageTitle.jpg);}
    .pageAbout.environment .pageTitle{background-image: url(../img/contents/about/important/environment/pageTitle.jpg);}
    .pageAbout.eat .pageTitle{background-image: url(../img/contents/about/health/eat/pageTitle.jpg);}
    .pageAbout.organic-food .pageTitle{background-image: url(../img/contents/about/health/organic-food/pageTitle.jpg);}
    .pageAbout.child .pageTitle{background-image: url(../img/contents/about/health/child/pageTitle.jpg);}
}
@media screen and (max-width: 767px) {
    .pageTitle{
      width: 100%;
      height: 85vw;
      background: #FFFFFF;
      background-repeat: no-repeat;
      background-position: top center;
      background-size: contain;
      position: relative;
    }
    .pageTitle__inner{
        position: absolute;
        width:100%;
        top:61vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .pageTitle__logo{margin-bottom: 0.5em; text-align: center;}
    .pageTitle__logo img{height: 0.7em;}
    .pageTitle__title{margin-bottom: 0;font-size: 3.2rem;letter-spacing: 0.15em; font-weight: 700; text-align: center;}


    .pageTitle{background-image: url(../img/contents/_base/pageTitle.jpg);}
    .pageAbout.satisfaction .pageTitle{background-image: url(../img/contents/about/important/satisfaction/pageTitle_sp.jpg);}
    .pageAbout.staff .pageTitle{background-image: url(../img/contents/about/important/staff/pageTitle_sp.jpg);}
    .pageAbout.partner .pageTitle{background-image: url(../img/contents/about/important/partner/pageTitle_sp.jpg);}
    .pageAbout.local .pageTitle{background-image: url(../img/contents/about/important/local/pageTitle_sp.jpg);}
    .pageAbout.value .pageTitle{background-image: url(../img/contents/about/important/value/pageTitle_sp.jpg);}
    .pageAbout.environment .pageTitle{background-image: url(../img/contents/about/important/environment/pageTitle_sp.jpg);}
    .pageAbout.eat .pageTitle{background-image: url(../img/contents/about/health/eat/pageTitle_sp.jpg);}
    .pageAbout.organic-food .pageTitle{background-image: url(../img/contents/about/health/organic-food/pageTitle_sp.jpg);}
    .pageAbout.child .pageTitle{background-image: url(../img/contents/about/health/child/pageTitle_sp.jpg);}
    
}


/*  scroll
-------------------------------------*/
.pageTitle .scroll{
    position: absolute;
    right: 4%;
    top: 100%;
    height: 47%;
    text-align: right;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0.4em;
    color: #818181;
}
.pageTitle .scroll:before{
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    top: 0%;
    left: calc(50% - 2px);
    background: #818181;
}
.pageTitle .scroll:after{
  content: "";
  position: absolute;
  width: 1px;
  height: 60%;
  top: -60%;
  left: calc(50% - 2px);
  background: #fff;
}
.pageTitle .scroll span{
    display: inline-block;
    background: #fff;
    padding: 1em 0 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
    .pageTitle .scroll{
        position: absolute;
        right: 4%;
        top: 62%;
        height: 43%;
        text-align: right;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        letter-spacing: 0.4em;
        color: #818181;
    }
    .pageTitle .scroll:before{
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0%;
        left: calc(50% - 2px);
        background: #818181;
    }
    .pageTitle .scroll:after{
      content: "";
      position: absolute;
      width: 1px;
      height: 50%;
      top: -50%;
      left: calc(50% - 2px);
      background: #fff;
    }
    .pageTitle .scroll span{
        display: inline-block;
        background: #fff;
        padding: 1em 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1rem;
    }
}



.topicsTitle__lead__text{font-weight: bold;}

@media print, screen and (min-width: 768px) {
    .topicsTitle{
        margin: 0 0;
        padding: 9em 0 0 0;
        background: url("../img/contents/about/philosophy/topics/topics_bg.png") repeat-x top;
        background-size: 100%;
        width: 100%;
    }

    .topicsTitle__inner{max-width: 1268px; width: 80%; margin: 0 auto;}
    .topicsTitle__logo{width: 36.5%;  margin: 0 auto;}
    .topicsTitle__lead {
        margin-top: 8.5%;
        border-radius: 20px;
        background: #FFFFFF;
        display: flex;
        justify-content: space-between;
        box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
    }
    .topicsTitle__lead__image{width: 50%;border-radius: 20px 0 0 20px;}
    .topicsTitle__lead__image .picture {border-radius: 20px 0 0 20px;width: 100%; height: 100%;}
    .topicsTitle__lead__image .ikanago{background: url("../img/contents/about/philosophy/topics/ikanago/img_01.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__image .ehoumaki{background: url("../img/contents/about/philosophy/topics/ehoumaki/img_01.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__image .milk{background: url("../img/contents/about/philosophy/topics/milk/img_01.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__title{
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 6em 0;
    }
    .topicsTitle__lead__number{margin-bottom: 2em;}
    .topicsTitle__lead__number img{width:auto; height: 60px;}
    .topicsTitle__lead__text{text-align:  center; color: #324380; font-size: 4.7rem; letter-spacing: 0.1em;line-height: 1.2;}
    }

@media screen and (max-width: 767px) {
    .topicsTitle{
        margin: 0 0;
        padding: 5.8em 0 0 0;
        background: url("../img/contents/about/philosophy/topics/topics_bg_sp.png") repeat-x top;
        width: 100%;
        background-size: contain;
    }

    .topicsTitle__inner{/* padding: 0 30px;*/}
    .topicsTitle__logo{width: 80%; margin: 0 auto; padding: 0 30px;}
    .topicsTitle__lead {
        margin-top: 2.3em;
        
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
    }
    .topicsTitle__lead__image{background: #324380; padding: 0 30px;}
    .topicsTitle__lead__image .picture{height: 57vw; border-radius: 20px 20px 0 0;}
    .topicsTitle__lead__image .picture.ikanago{background: url("../img/contents/about/philosophy/topics/ikanago/img_01_sp.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__image .picture.ehoumaki{background: url("../img/contents/about/philosophy/topics/ehoumaki/img_01_sp.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__image .picture.milk{background: url("../img/contents/about/philosophy/topics/milk/img_01_sp.jpg") no-repeat right top; background-size: cover;}
    .topicsTitle__lead__title{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 30px;
        box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.2);
        border-radius: 0 0 20px 20px;
        padding-bottom: 3.2em;
    }
    .topicsTitle__lead__number{margin-bottom: 1.7em; width: 14%; padding-top: 3.2em;}
    .topicsTitle__lead__text{text-align:  center; color: #324380; font-size: 2.6rem; letter-spacing: 0em;line-height: 1.2;}
}

/* ######################################################################################

　下層ページ：2カラム

###################################################################################### */
/* ====================================================
	baseColumn
==================================================== */

.baseColumn__main{
  padding-bottom: 13em;
  width: 78.8%;
}
.baseColumn__main .contents{
  max-width: calc(75.8% + 30px);
}

.baseColumn__sub{
  padding-bottom: 13em;
  width: 17.6%;
  border-right: 1px solid #e0e4e7;
}

@media print, screen and (min-width: 768px) {
    .baseColumn__inner{
      display: flex;
      justify-content: flex-start;
      flex-direction: row-reverse;
    }
    .baseColumn__main{
      padding-bottom: 13em;
      width: 78.8%;
    }
    .baseColumn__main .contents{
      max-width: calc(75.8% + 30px);
    }

    .baseColumn__sub{
      padding-bottom: 13em;
      width: 17.6%;
      border-right: 1px solid #e0e4e7;
    }
}
@media screen and (max-width: 767px) {
    
    .baseColumn__sub{
        display: none;
    }
    .baseColumn__main{width: 100%; padding-bottom: 7.5em;}
    .baseColumn__main .contents{max-width: 100%;}
}


/* ====================================================
	baseColumn2
==================================================== */
.baseColumn2{
  position: relative;
}
.baseColumn2__main.contents.narrow{
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  max-width: none;
}

.baseColumn2__sub{
  position: absolute;
  top: 6em;
  left: 5%;
  width: 15%;
  height: calc(100% - 6em);
  border-left: 1px solid #e0e4e7;
  min-width: 195px;
}


/* ====================================================
	pageNav
==================================================== */
.pageNav{
  padding-left: 20%;
}
.pageNav a{
  display: block;
  color: #394680;
  text-decoration: none;
}
.pageNav__title:last-of-type{
  margin-bottom: 0;
}
.pageNav__title span,
.pageNav__title a{
  display: block;
  padding: 1.7em 0.5em 1.7em 0;
  font-size: 2.1rem;
  font-weight: 800;
  color: #394680;
}
.pageNav__list li{
  border-top: 1px solid #e0e4e7;
}
.pageNav__list a{
  position: relative;
  margin: -1px 0 -1px -3em;
  padding: 1.8em 3em 1.8em 3em;
  font-size: 2rem;
  font-weight: 300;
  border-radius: 3em 0 0 3em;
  transition: background-color 0.15s ease;
}
.pageNav__list a:after{
  content: "";
  position: absolute;
  top: calc(50% - 0.35em);
  right: 2em;
  width: 0.6em;
  height: 0.6em;
  transform: rotate(45deg) skew(-10deg, -10deg);
  border-right: 2px solid #394680;
  border-top: 2px solid #394680;
  background-size: contain !important;
}

.pageNav__list li.active a{
  background-color: #394680;
  color: #fff;
}
.pageNav__list li:not(.active):not(.instagram) a:hover{
  background-color: #edf3fa;
}
.pageNav__list li.active a:after{
  border-right-color: #fff;
  border-top-color: #fff;
}

.pageNav__list .instagram{
  padding-top: 1em;
}
.pageNav__list .instagram a{
  font-size: 1.9rem;
  font-weight: bold;
  letter-spacing: 0.36em;
}
.pageNav__list .instagram a:after{
  width: 1.8em;
  height: 1.8em;
  background-size: contain;
  background-position: center center;
  transform: translateY(-50%);
  top: 50%;
  right: 1.25em;
  border: none;
  background: url(../img/contents/ico_instagram.svg);
  background-repeat: no-repeat;
  background-position: center center;
}





/* ====================================================
	pageNav2
==================================================== */
.pageNav2{
  padding-top: 8em;
  width: 80%;
}
.pageNav2 a{
  display: block;
  color: #333333;
  text-decoration: none;
}
.pageNav2 .active a{
  color: #394684;
}
.pageNav2__title:last-of-type{
  padding-left: 12%;
  padding-bottom: 0.75em;
  margin-bottom: 0.5em;
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-bottom: 1px solid #e0e4e7;
}
.pageNav2__list{
  padding-left: 12%;
}
.pageNav2__list li{
}
.pageNav2__list a{
  position: relative;
  padding: 0.75em 0;
  font-size: 2.1rem;
  font-weight: 300;
}

.pageNav2__list li.active a{
  color: #394684;
}