@charset "UTF-8";
/*
Theme Name: 三代目池田屋｜沖縄の島豆腐・有限会社池田食品
Theme URI: https://ikedasyokuhin.com/
Description: 沖縄県で島豆富・大豆製品の製造＆移動販売を行う三代目池田屋（有限会社 池田食品）です。新鮮な豆富の美味しさを手渡しでお届けします。昭和五八年創業以来、こだわり続けた製法と美味しさをぜひご賞味ください。
Version: 1.1
Author: natsumi
*/
/* ************************************************************************************************
   共通
   ************************************************************************************************ */
html, body {
  width: 100%;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 2.3;
  font-family: dnp-shuei-mgothic-std, YuGothic,'Yu Gothic', sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  background: #fff; }

h1 {
  font-size: 10px; }

h2 {
  font-size: 40px; }

h3 {
  font-size: 27px; }

h4 {
  font-size: 18px; }

p {
  font-size: 15px; }

a {
  font-size: 15px;
  text-decoration: none; }

li, th, td {
  font-size: 15px; }

img {
  max-width: 100%; }

.only-sp {
  display: none; }

.en {
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em; }

/* マウスドラッグした時の文字色 */
::selection {
  background: #333;
  color: #f8f4ed; }

/* 改行 */
.br_sp {
  display: none; }

.br_pc {
  display: block; }

/* ページ全体の余白など */
#page {
  overflow: hidden;
  width: 100%; }

.wrap {
  width: 1400px;
  padding: 0 30px;
  margin: 0 auto; }

.wrap2 {
  width: 1180px;
  padding: 0 30px;
  margin: 0 auto; }

.wrap3 {
  width: 100%;
  padding: 0 50px; }

/* ボタン */
.btn01 {
  font-size: 20px;
  color: #88b4bc;
  display: inline-block;
  text-align: center;
  width: 160px;
  height: 55px;
  line-height: 55px;
  border: 2px solid #88b4bc;
  background-color: #fff;
  position: relative;
  z-index: 2;
  font-family: brandon-grotesque, sans-serif; }

.btn01:hover {
  background-color: #88b4bc;
  border-color: #88b4bc;
  color: #fff; }

.btn01::before,
.btn01::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #fff; }

.btn01::before {
  right: 0; }

.btn01::after {
  left: 0; }

.btn01,
.btn01::before,
.btn01::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s; }

.btn01:hover::before, .btn01:hover::after {
  width: 0;
  background-color: #fff; }

.btn02 {
  font-size: 20px;
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 160px;
  height: 55px;
  line-height: 55px;
  background-color: #88b4bc;
  position: relative;
  z-index: 2;
  font-family: brandon-grotesque, sans-serif; }

.btn02:hover {
  background-color: #fff;
  color: #88b4bc; }

.btn02::before,
.btn02::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #88b4bc; }

.btn02::before {
  right: 0; }

.btn02::after {
  left: 0; }

.btn02,
.btn02::before,
.btn02::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s; }

.btn02:hover::before, .btn02:hover::after {
  width: 0;
  background-color: #88b4bc; }

.btn03 {
  color: #374b6b;
  font-family: brandon-grotesque, sans-serif;
  font-size: 18px;
  padding-bottom: 5px;
  background: linear-gradient(currentcolor, currentcolor) left bottom/100% 1px no-repeat;
  transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); }

.btn03:hover {
  background-position: right bottom;
  background-size: 0 1px; }

/* スクロールバー */
::-webkit-scrollbar {
  width: 8px; }

::-webkit-scrollbar-track {
  background: #f8f4ed; }

::-webkit-scrollbar-thumb {
  background: #374b6b;
  border-radius: 5px; }

/*flex*/
.flex {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  align-items: flex-start; }

/***** 見出し *****/
.sub__h3 {
  color: #374b6b;
  line-height: 1; }

.sub__h3 p {
  font-size: 45px;
  margin-bottom: 15px; }

.sub__h3 h3 {
  font-size: 18px; }

/***** 下層ページヘッダー *****/
.sub-header {
  background-color: #374b6b;
  padding: 30px;
  color: #f8f4ed; }

.sub-header__logo a {
  transition: all .4s; }

.sub-header__logo a:hover {
  opacity: .6;
  transition: all .4s; }

.sub-header__ttl {
  color: #f8f4ed;
  margin: 130px 0 200px 7.4vw;
  line-height: 1; }

.sub-header__ttl p {
  font-size: 70px;
  margin-bottom: 30px; }

.sub-header__ttl h2 {
  font-size: 23px; }

/***** フッター *****/
footer {
  width: 100%;
  background-color: #374b6b;
  padding: 60px 0 30px; }

.footer__logo {
  margin-right: 40px;
  transition: all .4s; }

.footer__logo:hover {
  opacity: .6;
  transition: all .4s; }

.footer__address {
  color: #f8f4ed;
  font-size: 14px;
  line-height: 2; }

.footer__menu {
  margin: 45px 0 35px; }

.footer__menu li {
  display: inline-block;
  margin-right: 20px; }

.footer__menu a {
  color: #f8f4ed;
  font-size: 13px;
  transition: all .4s; }

.footer__menu a:hover {
  color: #88b4bc;
  transition: all .3s; }

.footer__sns img {
  width: 30px;
  vertical-align: middle; }

small {
  font-size: 11px;
  display: block;
  text-align: right;
  color: #f8f4ed; }

.footer__note {
  font-size: 10px;
  text-align: right;
  color: #ccc;
  margin-top: 7px; }
  .footer__note a {
    font-size: 10px;
    text-decoration: underline; }

/*contactボタン*/
.footer__btn {
  padding-bottom: 100px; }

.footer__btn a {
  border: 1px solid #374b6b;
  width: 100%;
  padding: 40px 0;
  text-align: center;
  display: block;
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: #374b6b; }

.footer__btn a::before,
.footer__btn a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: ''; }

.footer__btn a,
.footer__btn a::before,
.footer__btn a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s; }

.footer__btn a:hover {
  color: #fff;
  border: 1px solid #374b6b; }

.footer__btn a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5); }

.footer__btn a:hover::after {
  background: #374b6b;
  -webkit-transform: scale(1);
  transform: scale(1); }

.footer__btn p:first-of-type {
  font-size: 30px; }

/* ************************************************************************************************
   アニメーション
   ************************************************************************************************ */
/***** ヘッダー *****/
#gnav {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #374b6b;
  display: none; }

#gnav h1 {
  text-align: right; }

.gnav__wrap {
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100vh; }

.gnav__container {
  text-align: center; }

.gnav__menu {
  color: #f8f4ed;
  line-height: 3.5;
  margin-bottom: 30px; }

.gnav__menu a {
  transition: all .4s; }

.gnav__menu a:hover {
  color: #88b4bc;
  transition: all .3s; }

.gnav__sns {
  transition: all .4s;
  margin: 0 3px;
 }

.gnav__sns:hover {
  opacity: .6;
  transition: all .3s; }

.gnav__sns img {
  width: 35px;
  height: auto;
}

.gnav__container02 {
  flex-direction: column;
  align-items: flex-end; }

.gnav__logo {
  margin: 40px 0 30px; }

.gnav__info {
  text-align: right;
  font-size: 14px;
  line-height: 2;
  color: #f8f4ed; }

/* ハンバーガーメニュー */
#h-menu {
  height: 20px;
  width: 30px;
  position: fixed;
  right: 30px;
  top: 30px;
  z-index: 101;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

#h-menu p {
  color: #374b6b;
  font-size: 12px;
  position: absolute;
  bottom: -30px;
  left: -3px; }

#h-menu p.active {
  display: none; }

.h-menu__line, .close__line {
  display: block;
  height: 2px;
  position: absolute;
  transition: transform .3s;
  width: 100%; }

.h-menu__line {
  background-color: #374b6b; }

.h-menu__line.active {
  display: none; }

.h-menu__line--center {
  top: 9px;
  background-color: #374b6b; }

.h-menu__line--bottom {
  bottom: 0; }

.h-menu--close {
  display: none; }

.h-menu--close.active {
  display: block; }

.close__line--top {
  top: 8px;
  transform: rotate(45deg);
  background-color: #f8f4ed; }

.close__line--bottom {
  bottom: 10px;
  transform: rotate(135deg);
  background-color: #f8f4ed; }

/***** ローディングアニメーション *****/
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #374b6b;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.loaded {
  opacity: 0;
  visibility: hidden; }

.spinner {
  margin: auto;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0; }

.cube1, .cube2 {
  background-color: #f8f4ed;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out; }

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s; }

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
  100% {
    -webkit-transform: rotate(-360deg); } }
@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg); } }
/***** ページトップに戻るボタン *****/
#page_top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 50; }

#page_top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  color: #f8f4ed;
  background: #88b4bc;
  border: 2px solid #88b4bc;
  border-radius: 50%;
  text-align: center;
  opacity: .8;
  transition: all .4s; }

#page_top a:hover {
  color: #88b4bc;
  background: #f8f4ed;
  border: 2px solid #88b4bc;
  transition: all .3s; }

#page_top .material-icons {
  position: absolute;
  font-size: 25px;
  width: 25px;
  height: 25px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0; }

/***** スクロールアニメーション *****/
.scroll.fadeIn {
  opacity: 0;
  transition: all 1800ms; }

.scroll.fadeIn2 {
  opacity: 0;
  transition: all 3000ms; }

.scroll.fadeInUp {
  opacity: 0;
  transform: translate(0, 70px);
  transition: all 1800ms; }

.scroll.fadeInLeft {
  opacity: 0;
  transform: translateX(-70px);
  transition: all 1800ms; }

.scroll.fadeInRight {
  opacity: 0;
  transform: translateX(70px);
  transition: all 1800ms; }

.scroll.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

.scroll.delay {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms; }

.scroll.delay2 {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms; }

.scroll.delay3 {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  -ms-transition-delay: 600ms; }

.scroll.delay4 {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms; }

.scroll.delay5 {
  -moz-transition-delay: 1000ms;
  -webkit-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms; }

/*個別設定*/
.items__box:nth-of-type(2n) {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  -ms-transition-delay: 200ms; }

@media screen and (max-width: 559px) {
  .scroll.delay, .scroll.delay2, .scroll.delay3, .scroll.delay4, .scroll.delay5,
  .items__box:nth-of-type(2n) {
    -moz-transition-delay: unset;
    -webkit-transition-delay: unset;
    -o-transition-delay: unset;
    -ms-transition-delay: unset; } }
/* ************************************************************************************************
   微調整
   ************************************************************************************************ */
@media screen and (max-width: 1400px) {
  .wrap {
    width: 100%;
    padding: 0 50px; } }
@media screen and (max-width: 1180px) {
  .wrap2 {
    width: 100%;
    padding: 0 50px; } }
@media screen and (max-height: 768px) {
  .gnav__wrap {
    justify-content: center; }

  .gnav__container {
    margin-right: 100px; }

  .gnav__img {
    width: auto;
    height: 50vh; }

  .gnav__logo {
    width: auto;
    height: 7.5vh;
    margin: 5.5vh 0 4.5vh; }

  .gnav__menu {
    margin-bottom: 3vh; } }
@media screen and (max-height: 710px) {
  .gnav__menu {
    line-height: 3; } }
/***** Edge,IE調整 *****/
/* ************************************************************************************************

   1025px

   ************************************************************************************************ */
@media screen and (max-width: 1025px) {
  h2 {
    font-size: 36px; }

  h3 {
    font-size: 22px; }

  p {
    font-size: 14px; }

  a, li, th, td {
    font-size: 14px; }

  .gnav__menu {
    line-height: 3.5; }

  .sub-header__ttl {
    margin: 110px 0 180px 7.4vw; }

  .sub-header__ttl p {
    font-size: 65px; }

  .sub-header__ttl h2 {
    font-size: 20px; } }
/* ************************************************************************************************

   960px

   ************************************************************************************************ */
@media screen and (max-width: 959px) {
  .gnav__wrap {
    flex-direction: column;
    justify-content: center; }

  .gnav__container {
    margin-bottom: 70px;
    margin-right: 0; }

  .gnav__container02 {
    flex-direction: row;
    align-items: center;
    justify-content: center; }

  .gnav__box {
    text-align: left;
    margin-left: 30px; }

  .gnav__img {
    width: 45%;
    height: auto; }

  .gnav__info {
    text-align: left; }

  #gnav h1 {
    text-align: left; }

  #h-menu {
    left: 30px; }

  .sub__h3 p {
    font-size: 40px;
    line-height: 1.3;
    margin-bottom: 10px; }

  .sub__h3 h3 {
    font-size: 16px;
    line-height: 1.8; }

  .sub-header__logo {
    text-align: right; }

  .sub-header__logo img {
    width: 22%; }

  .sub-header__ttl {
    margin: 90px 0 160px 7.4vw; }

  .sub-header__ttl p {
    font-size: 60px;
    margin-bottom: 25px; }

  .sub-header__ttl h2 {
    font-size: 20px; }

  .footer__menu {
    text-align: center;
    line-height: 3;
    margin: 50px 0 40px; }

  .footer__box {
    justify-content: center; }

  .footer__menu li {
    margin: 0 10px; }

  small {
    text-align: center; }

  .footer__btn a {
    padding: 30px 0; }

  .footer__note {
    text-align: center;
    margin-top: 10px; }

  .btn01, .btn02 {
    font-size: 18px;
    width: 140px;
    height: 52px;
    line-height: 52px; } }
/* ************************************************************************************************

   560px

   ************************************************************************************************ */
@media screen and (max-width: 559px) {
  h2 {
    font-size: 32px; }

  h3 {
    font-size: 20px; }

  h4 {
    font-size: 16px; }

  .only-pc {
    display: none; }

  .only-sp {
    display: block; }

  .btn01, .btn02 {
    font-size: 16px;
    width: 120px;
    height: 45px;
    line-height: 45px; }

  .btn03 {
    font-size: 15px; }

  .br_sp {
    display: block; }

  .br_pc {
    display: none; }

  .wrap, .wrap2, .wrap3 {
    padding: 0 30px; }

  #page_top {
    right: 20px;
    bottom: 20px; }

  .sub-header__logo img {
    width: 42%; }

  .sub-header__ttl {
    margin: 70px 0 80px 3vw; }

  .sub-header__ttl p {
    font-size: 42px;
    margin-bottom: 20px; }

  .sub-header__ttl h2 {
    font-size: 17px; }

  .gnav__container {
    margin: 0; }

  .gnav__menu {
    margin-bottom: 15px;
    line-height: 3; }

  .gnav__menu a {
    font-size: 13px; }

  .gnav__sns img {
    width: 30px; }

  .gnav__img {
    display: none; }

  .gnav__box {
    margin-left: 0;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center; }

  .gnav__container02 {
    display: none; }

  footer {
    padding: 50px 0 30px; }

  .footer__box {
    flex-direction: column;
    align-items: center; }

  .footer__logo {
    margin-right: 0;
    margin-bottom: 30px; }

  .footer__logo img {
    width: 160px; }

  .footer__address {
    font-size: 13px;
    text-align: center; }

  .footer__menu {
    margin: 40px 0; }

  .footer__menu a {
    font-size: 12px; }

  .footer__btn {
    padding-bottom: 70px; }

  .footer__btn p:first-of-type {
    font-size: 25px; } }
/* ************************************************************************************************

   320px

   ************************************************************************************************ */
@media screen and (max-width: 320px) {
  .wrap, .wrap2, .wrap3 {
    padding: 0 20px; }

  p, a, li, th, td {
    font-size: 13px; }

  .btn01, .btn02, .btn03 {
    font-size: 15px; }

  .gnav__menu {
    line-height: 2.7;
    margin-bottom: 10px; }

  .gnav__container {
    margin-bottom: 30px; }

  .gnav__info {
    font-size: 10px; }

  .sub-header {
    padding: 30px 20px; }

  .sub-header__ttl p {
    font-size: 40px; }

  .sub-header__ttl h2 {
    font-size: 16px; }

  .sub-header__ttl {
    margin: 60px 0 70px 2vw; }

  .sub__h3 p {
    font-size: 37px; }

  .sub__h3 h3 {
    font-size: 15px; } }

/*# sourceMappingURL=common.css.map */


#line_foot{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 15px;
  bottom: 70px;
  z-index: 40;
}
#line_foot a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
}

@media screen and (min-width:768px) {
.legal-notice th { width: 30%; }
}
@media screen and (max-width:767px) {
.legal-notice th { display: block; padding-bottom: 0px !important; }
.legal-notice td { display: block; padding-bottom: 30px; }
}