@charset "UTF-8";
/*!
Theme Name: uobone
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: uobone
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

uobone is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* ---------------------------------------------------------
Mixin
--------------------------------------------------------- */
/* =========================================================
flex - flex関連の指定
========================================================= */
@import url("https://fonts.googleapis.com/css?family=Lato:400,700,900,900i");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400");
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css");
/* =========================================================
shadow - シャドウ
デフォルトでは色が濃い目なので使う際に調整してください。
========================================================= */
/* =========================================================
other - その他
========================================================= */
/* ---------------------------------------------------------
variable
--------------------------------------------------------- */
/* =========================================================
color - 色の設定
========================================================= */
/* =========================================================
font - font-familyの設定など
========================================================= */
@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); }
/* =========================================================
media-query - レスポンシブの設定
========================================================= */
/* =========================================================
typography - テキスト関連の設定
========================================================= */
html { font-size: 100%; line-height: 1.5em; }

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* =========================================================
base - 基本設定
========================================================= */
body { overflow-x: hidden !important; font-size: 16px; font-size: 1rem; line-height: 24px; color: #333333; font-family: "Shippori Mincho", Georgia, "Noto Serif JP", 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif; -webkit-font-feature-settings: "pkna"; font-feature-settings: "pkna"; letter-spacing: 0.1em; }

a { cursor: pointer; }
a:hover { color: inherit; }

p { color: #555555; }

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

/*PCとSPの表示切替*/
.pc-show { display: none; }
@media screen and (min-width: 992px) { .pc-show { display: block; } }

@media screen and (min-width: 992px) { .sp-show { display: none; } }

/*inline*/
.pc-show-inline { display: none; }
@media screen and (min-width: 992px) { .pc-show-inline { display: inline-block; } }

/* =========================================================
section - コンテンツの大枠
========================================================= */
.l-container { width: 100%; padding-right: 15px; padding-left: 15px; margin: 0 auto; }
@media screen and (min-width: 576px) { .l-container { max-width: 606px; } }
@media screen and (min-width: 768px) { .l-container { max-width: 798px; } }
@media screen and (min-width: 992px) { .l-container { max-width: 1022px; } }
@media screen and (min-width: 1200px) { .l-container { max-width: 1400px; } }
.l-container--fluid { max-width: 100% !important; }

/* =========================================================
bootstrap4のグリッドシステム
========================================================= */
/*!
 * Bootstrap Grid v4.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport { width: device-width; }
html { box-sizing: border-box; -ms-overflow-style: scrollbar; }

.l-row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }

.l-row--no-gutters { margin-right: 0; margin-left: 0; }

.l-row--no-gutters > .l-row__col, .l-row--no-gutters > [class*="l-row__col--"] { padding-right: 0; padding-left: 0; }

.l-row__col--1, .l-row__col--2, .l-row__col--3, .l-row__col--4, .l-row__col--5, .l-row__col--6, .l-row__col--7, .l-row__col--8, .l-row__col--9, .l-row__col--10, .l-row__col--11, .l-row__col--12, .l-row__col, .l-row__col--auto, .l-row__col--sm-1, .l-row__col--sm-2, .l-row__col--sm-3, .l-row__col--sm-4, .l-row__col--sm-5, .l-row__col--sm-6, .l-row__col--sm-7, .l-row__col--sm-8, .l-row__col--sm-9, .l-row__col--sm-10, .l-row__col--sm-11, .l-row__col--sm-12, .l-row__col--sm, .l-row__col--sm-auto, .l-row__col--md-1, .l-row__col--md-2, .l-row__col--md-3, .l-row__col--md-4, .l-row__col--md-5, .l-row__col--md-6, .l-row__col--md-7, .l-row__col--md-8, .l-row__col--md-9, .l-row__col--md-10, .l-row__col--md-11, .l-row__col--md-12, .l-row__col--md, .l-row__col--md-auto, .l-row__col--lg-1, .l-row__col--lg-2, .l-row__col--lg-3, .l-row__col--lg-4, .l-row__col--lg-5, .l-row__col--lg-6, .l-row__col--lg-7, .l-row__col--lg-8, .l-row__col--lg-9, .l-row__col--lg-10, .l-row__col--lg-11, .l-row__col--lg-12, .l-row__col--lg, .l-row__col--lg-auto, .l-row__col--xl-1, .l-row__col--xl-2, .l-row__col--xl-3, .l-row__col--xl-4, .l-row__col--xl-5, .l-row__col--xl-6, .l-row__col--xl-7, .l-row__col--xl-8, .l-row__col--xl-9, .l-row__col--xl-10, .l-row__col--xl-11, .l-row__col--xl-12, .l-row__col--xl, .l-row__col--xl-auto { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }

.l-row__col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; word-break: break-all; }

.l-row__col--auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }

.l-row__col--1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }

.l-row__col--2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }

.l-row__col--3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }

.l-row__col--4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }

.l-row__col--5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }

.l-row__col--6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }

.l-row__col--7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }

.l-row__col--8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }

.l-row__col--9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }

.l-row__col--10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }

.l-row__col--11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }

.l-row__col--12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

.l-row__col--order-first { -ms-flex-order: -1; order: -1; }

.l-row__col--order-last { -ms-flex-order: 13; order: 13; }

.l-row__col--order-0 { -ms-flex-order: 0; order: 0; }

.l-row__col--order-1 { -ms-flex-order: 1; order: 1; }

.l-row__col--order-2 { -ms-flex-order: 2; order: 2; }

.l-row__col--order-3 { -ms-flex-order: 3; order: 3; }

.l-row__col--order-4 { -ms-flex-order: 4; order: 4; }

.l-row__col--order-5 { -ms-flex-order: 5; order: 5; }

.l-row__col--order-6 { -ms-flex-order: 6; order: 6; }

.l-row__col--order-7 { -ms-flex-order: 7; order: 7; }

.l-row__col--order-8 { -ms-flex-order: 8; order: 8; }

.l-row__col--order-9 { -ms-flex-order: 9; order: 9; }

.l-row__col--order-10 { -ms-flex-order: 10; order: 10; }

.l-row__col--order-11 { -ms-flex-order: 11; order: 11; }

.l-row__col--order-12 { -ms-flex-order: 12; order: 12; }

.l-row__col--offset-1 { margin-left: 8.333333%; }

.l-row__col--offset-2 { margin-left: 16.666667%; }

.l-row__col--offset-3 { margin-left: 25%; }

.l-row__col--offset-4 { margin-left: 33.333333%; }

.l-row__col--offset-5 { margin-left: 41.666667%; }

.l-row__col--offset-6 { margin-left: 50%; }

.l-row__col--offset-7 { margin-left: 58.333333%; }

.l-row__col--offset-8 { margin-left: 66.666667%; }

.l-row__col--offset-9 { margin-left: 75%; }

.l-row__col--offset-10 { margin-left: 83.333333%; }

.l-row__col--offset-11 { margin-left: 91.666667%; }

@media screen and (min-width: 576px) { .l-row__col--sm { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .l-row__col--sm-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
  .l-row__col--sm-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .l-row__col--sm-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .l-row__col--sm-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .l-row__col--sm-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .l-row__col--sm-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .l-row__col--sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .l-row__col--sm-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .l-row__col--sm-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .l-row__col--sm-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .l-row__col--sm-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .l-row__col--sm-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .l-row__col--sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .l-row__col--order-sm-first { -ms-flex-order: -1; order: -1; }
  .l-row__col--order-sm-last { -ms-flex-order: 13; order: 13; }
  .l-row__col--order-sm-0 { -ms-flex-order: 0; order: 0; }
  .l-row__col--order-sm-1 { -ms-flex-order: 1; order: 1; }
  .l-row__col--order-sm-2 { -ms-flex-order: 2; order: 2; }
  .l-row__col--order-sm-3 { -ms-flex-order: 3; order: 3; }
  .l-row__col--order-sm-4 { -ms-flex-order: 4; order: 4; }
  .l-row__col--order-sm-5 { -ms-flex-order: 5; order: 5; }
  .l-row__col--order-sm-6 { -ms-flex-order: 6; order: 6; }
  .l-row__col--order-sm-7 { -ms-flex-order: 7; order: 7; }
  .l-row__col--order-sm-8 { -ms-flex-order: 8; order: 8; }
  .l-row__col--order-sm-9 { -ms-flex-order: 9; order: 9; }
  .l-row__col--order-sm-10 { -ms-flex-order: 10; order: 10; }
  .l-row__col--order-sm-11 { -ms-flex-order: 11; order: 11; }
  .l-row__col--order-sm-12 { -ms-flex-order: 12; order: 12; }
  .l-row__col--offset-sm-0 { margin-left: 0; }
  .l-row__col--offset-sm-1 { margin-left: 8.333333%; }
  .l-row__col--offset-sm-2 { margin-left: 16.666667%; }
  .l-row__col--offset-sm-3 { margin-left: 25%; }
  .l-row__col--offset-sm-4 { margin-left: 33.333333%; }
  .l-row__col--offset-sm-5 { margin-left: 41.666667%; }
  .l-row__col--offset-sm-6 { margin-left: 50%; }
  .l-row__col--offset-sm-7 { margin-left: 58.333333%; }
  .l-row__col--offset-sm-8 { margin-left: 66.666667%; }
  .l-row__col--offset-sm-9 { margin-left: 75%; }
  .l-row__col--offset-sm-10 { margin-left: 83.333333%; }
  .l-row__col--offset-sm-11 { margin-left: 91.666667%; } }
@media screen and (min-width: 768px) { .l-row__col--md { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .l-row__col--md-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
  .l-row__col--md-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .l-row__col--md-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .l-row__col--md-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .l-row__col--md-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .l-row__col--md-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .l-row__col--md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .l-row__col--md-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .l-row__col--md-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .l-row__col--md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .l-row__col--md-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .l-row__col--md-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .l-row__col--md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .l-row__col--order-md-first { -ms-flex-order: -1; order: -1; }
  .l-row__col--order-md-last { -ms-flex-order: 13; order: 13; }
  .l-row__col--order-md-0 { -ms-flex-order: 0; order: 0; }
  .l-row__col--order-md-1 { -ms-flex-order: 1; order: 1; }
  .l-row__col--order-md-2 { -ms-flex-order: 2; order: 2; }
  .l-row__col--order-md-3 { -ms-flex-order: 3; order: 3; }
  .l-row__col--order-md-4 { -ms-flex-order: 4; order: 4; }
  .l-row__col--order-md-5 { -ms-flex-order: 5; order: 5; }
  .l-row__col--order-md-6 { -ms-flex-order: 6; order: 6; }
  .l-row__col--order-md-7 { -ms-flex-order: 7; order: 7; }
  .l-row__col--order-md-8 { -ms-flex-order: 8; order: 8; }
  .l-row__col--order-md-9 { -ms-flex-order: 9; order: 9; }
  .l-row__col--order-md-10 { -ms-flex-order: 10; order: 10; }
  .l-row__col--order-md-11 { -ms-flex-order: 11; order: 11; }
  .l-row__col--order-md-12 { -ms-flex-order: 12; order: 12; }
  .l-row__col--offset-md-0 { margin-left: 0; }
  .l-row__col--offset-md-1 { margin-left: 8.333333%; }
  .l-row__col--offset-md-2 { margin-left: 16.666667%; }
  .l-row__col--offset-md-3 { margin-left: 25%; }
  .l-row__col--offset-md-4 { margin-left: 33.333333%; }
  .l-row__col--offset-md-5 { margin-left: 41.666667%; }
  .l-row__col--offset-md-6 { margin-left: 50%; }
  .l-row__col--offset-md-7 { margin-left: 58.333333%; }
  .l-row__col--offset-md-8 { margin-left: 66.666667%; }
  .l-row__col--offset-md-9 { margin-left: 75%; }
  .l-row__col--offset-md-10 { margin-left: 83.333333%; }
  .l-row__col--offset-md-11 { margin-left: 91.666667%; } }
@media screen and (min-width: 992px) { .l-row__col--lg { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .l-row__col--lg-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
  .l-row__col--lg-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .l-row__col--lg-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .l-row__col--lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .l-row__col--lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .l-row__col--lg-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .l-row__col--lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .l-row__col--lg-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .l-row__col--lg-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .l-row__col--lg-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .l-row__col--lg-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .l-row__col--lg-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .l-row__col--lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .l-row__col--order-lg-first { -ms-flex-order: -1; order: -1; }
  .l-row__col--order-lg-last { -ms-flex-order: 13; order: 13; }
  .l-row__col--order-lg-0 { -ms-flex-order: 0; order: 0; }
  .l-row__col--order-lg-1 { -ms-flex-order: 1; order: 1; }
  .l-row__col--order-lg-2 { -ms-flex-order: 2; order: 2; }
  .l-row__col--order-lg-3 { -ms-flex-order: 3; order: 3; }
  .l-row__col--order-lg-4 { -ms-flex-order: 4; order: 4; }
  .l-row__col--order-lg-5 { -ms-flex-order: 5; order: 5; }
  .l-row__col--order-lg-6 { -ms-flex-order: 6; order: 6; }
  .l-row__col--order-lg-7 { -ms-flex-order: 7; order: 7; }
  .l-row__col--order-lg-8 { -ms-flex-order: 8; order: 8; }
  .l-row__col--order-lg-9 { -ms-flex-order: 9; order: 9; }
  .l-row__col--order-lg-10 { -ms-flex-order: 10; order: 10; }
  .l-row__col--order-lg-11 { -ms-flex-order: 11; order: 11; }
  .l-row__col--order-lg-12 { -ms-flex-order: 12; order: 12; }
  .l-row__col--offset-lg-0 { margin-left: 0; }
  .l-row__col--offset-lg-1 { margin-left: 8.333333%; }
  .l-row__col--offset-lg-2 { margin-left: 16.666667%; }
  .l-row__col--offset-lg-3 { margin-left: 25%; }
  .l-row__col--offset-lg-4 { margin-left: 33.333333%; }
  .l-row__col--offset-lg-5 { margin-left: 41.666667%; }
  .l-row__col--offset-lg-6 { margin-left: 50%; }
  .l-row__col--offset-lg-7 { margin-left: 58.333333%; }
  .l-row__col--offset-lg-8 { margin-left: 66.666667%; }
  .l-row__col--offset-lg-9 { margin-left: 75%; }
  .l-row__col--offset-lg-10 { margin-left: 83.333333%; }
  .l-row__col--offset-lg-11 { margin-left: 91.666667%; } }
@media screen and (min-width: 1200px) { .l-row__col--xl { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
  .l-row__col--xl-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: none; }
  .l-row__col--xl-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
  .l-row__col--xl-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
  .l-row__col--xl-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .l-row__col--xl-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
  .l-row__col--xl-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
  .l-row__col--xl-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .l-row__col--xl-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
  .l-row__col--xl-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
  .l-row__col--xl-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
  .l-row__col--xl-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
  .l-row__col--xl-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
  .l-row__col--xl-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
  .l-row__col--order-xl-first { -ms-flex-order: -1; order: -1; }
  .l-row__col--order-xl-last { -ms-flex-order: 13; order: 13; }
  .l-row__col--order-xl-0 { -ms-flex-order: 0; order: 0; }
  .l-row__col--order-xl-1 { -ms-flex-order: 1; order: 1; }
  .l-row__col--order-xl-2 { -ms-flex-order: 2; order: 2; }
  .l-row__col--order-xl-3 { -ms-flex-order: 3; order: 3; }
  .l-row__col--order-xl-4 { -ms-flex-order: 4; order: 4; }
  .l-row__col--order-xl-5 { -ms-flex-order: 5; order: 5; }
  .l-row__col--order-xl-6 { -ms-flex-order: 6; order: 6; }
  .l-row__col--order-xl-7 { -ms-flex-order: 7; order: 7; }
  .l-row__col--order-xl-8 { -ms-flex-order: 8; order: 8; }
  .l-row__col--order-xl-9 { -ms-flex-order: 9; order: 9; }
  .l-row__col--order-xl-10 { -ms-flex-order: 10; order: 10; }
  .l-row__col--order-xl-11 { -ms-flex-order: 11; order: 11; }
  .l-row__col--order-xl-12 { -ms-flex-order: 12; order: 12; }
  .l-row__col--offset-xl-0 { margin-left: 0; }
  .l-row__col--offset-xl-1 { margin-left: 8.333333%; }
  .l-row__col--offset-xl-2 { margin-left: 16.666667%; }
  .l-row__col--offset-xl-3 { margin-left: 25%; }
  .l-row__col--offset-xl-4 { margin-left: 33.333333%; }
  .l-row__col--offset-xl-5 { margin-left: 41.666667%; }
  .l-row__col--offset-xl-6 { margin-left: 50%; }
  .l-row__col--offset-xl-7 { margin-left: 58.333333%; }
  .l-row__col--offset-xl-8 { margin-left: 66.666667%; }
  .l-row__col--offset-xl-9 { margin-left: 75%; }
  .l-row__col--offset-xl-10 { margin-left: 83.333333%; }
  .l-row__col--offset-xl-11 { margin-left: 91.666667%; } }
.l-row__col--column-between-center { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }
.l-row__col--column-around-center { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; -webkit-justify-content: space-around; -moz-justify-content: space-around; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; }

/* =========================================================
header - ヘッダー
========================================================= */
.l-header.is-fixed { position: fixed; top: 0; left: 0; z-index: 5; width: 100%; }

/* =========================================================
main - メイン
========================================================= */
/* =========================================================
sidebar - サイドバー
========================================================= */
/* =========================================================
footer - フッターのレイアウト
========================================================= */
/* ---------------------------------------------------------
Component
ページをまたいで使われる各種パーツを定義するクラス
そのパーツ内で常に同様の振る舞いをするものに関してのみスタイルを定義
接頭辞としてc-をつける
--------------------------------------------------------- */
/* =========================================================
title - 共通のタイトルやテキストなど
========================================================= */
.c-basic-ttl { font-weight: 700; color: #333333; }
.c-basic-ttl--xs { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; }
@media screen and (min-width: 992px) { .c-basic-ttl--xs { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 16px; font-size: 1rem; line-height: 24px; line-height: 1.5rem; } }
.c-basic-ttl--sm { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 16px; font-size: 1rem; line-height: 24px; line-height: 1.5rem; }
@media screen and (min-width: 992px) { .c-basic-ttl--sm { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 18px; font-size: 1.125rem; line-height: 24px; line-height: 1.5rem; } }
.c-basic-ttl--md { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 20px; font-size: 1.25rem; line-height: 48px; line-height: 3rem; }
@media screen and (min-width: 992px) { .c-basic-ttl--md { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 22px; font-size: 1.375rem; line-height: 48px; line-height: 3rem; } }
.c-basic-ttl--lg { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 34px; font-size: 2.125rem; line-height: 48px; line-height: 3rem; }
@media screen and (min-width: 992px) { .c-basic-ttl--lg { margin-top: 0px; margin-top: 0rem; margin-bottom: 48px; margin-bottom: 3rem; font-size: 38px; font-size: 2.375rem; line-height: 48px; line-height: 3rem; } }
.c-basic-ttl--xl { margin-top: 0px; margin-top: 0rem; margin-bottom: 24px; margin-bottom: 1.5rem; font-size: 40px; font-size: 2.5rem; line-height: 72px; line-height: 4.5rem; }
@media screen and (min-width: 992px) { .c-basic-ttl--xl { margin-top: 0px; margin-top: 0rem; margin-bottom: 48px; margin-bottom: 3rem; font-size: 45px; font-size: 2.8125rem; line-height: 72px; line-height: 4.5rem; } }

/* =========================================================
text - 共通のテキストなど
========================================================= */
.c-basic-txt, .c-error-message { color: #555555; margin-top: 0px; margin-top: 0rem; margin-bottom: 6px; margin-bottom: 0.375rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; }
@media screen and (min-width: 992px) { .c-basic-txt, .c-error-message { margin-top: 0px; margin-top: 0rem; margin-bottom: 12px; margin-bottom: 0.75rem; font-size: 16px; font-size: 1rem; line-height: 24px; line-height: 1.5rem; } }
.c-basic-txt:last-of-type, .c-error-message:last-of-type { margin-bottom: 0; }

.c-small-txt { margin-top: 0px; margin-top: 0rem; margin-bottom: 3px; margin-bottom: 0.18rem; font-size: 12px; font-size: 0.75rem; line-height: 24px; line-height: 1.5rem; }
@media screen and (min-width: 992px) { .c-small-txt { margin-top: 0px; margin-top: 0rem; margin-bottom: 6px; margin-bottom: 0.375rem; font-size: 14px; font-size: 0.875rem; line-height: 24px; line-height: 1.5rem; } }
.c-small-txt:last-of-type { margin-bottom: 0; }

.c-error-message { display: inline-block; color: #e74c3c; margin-top: .5rem; }

/* =========================================================
button - ボタン関係のコンポーネント
========================================================= */
.c-basic-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flexbox; display: inline-flex; min-width: 200px; padding: 1em 1.5rem; background-color: #ffffff; font-size: 14px; font-size: 0.875rem; color: #555555; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; text-decoration: none; border: 1px solid #dddddd; border-radius: 4px; cursor: pointer; outline: none; transition: .3s; }
.c-basic-btn__icon { margin-right: .5rem; }
.c-basic-btn:hover { background-color: #f0e0a7; color: #ffffff; }
.c-basic-btn--main-color { background-color: #f0e0a7; color: #ffffff; }
.c-basic-btn--main-color:hover { background-color: #ffffff; color: #555555; }
.c-basic-btn--gray { border-color: #dddddd; color: #999999; }
.c-basic-btn--gray:hover { background-color: #dddddd; color: #ffffff; }
.c-basic-btn--xs { min-width: 120px; padding: .5em; font-size: 10px; font-size: 0.625rem; }
.c-basic-btn--sm { min-width: 150px; padding: .75em; font-size: 12px; font-size: 0.75rem; }
.c-basic-btn--round { border-radius: 50px; }

.c-pagetop-btn { position: fixed; bottom: 20px; right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; border-radius: 100%; background-color: #cccccc; text-decoration: none; transition: .3s; z-index: 5; }
.c-pagetop-btn:hover { opacity: .7; }
.c-pagetop-btn__icon { color: #ffffff; font-size: 18px; font-size: 1.125rem; margin-bottom: 3px; margin-left: 1px; }
.c-pagetop-btn__icon:hover { color: #ffffff; }

/* =========================================================
txtarea - テキストエリア
========================================================= */
.c-txtarea { resize: none; width: 100%; height: 10rem; padding: .5rem; border: 0; border: 1px solid #dddddd; border-radius: 4px; background-color: #fafafa; font-size: 16px; font-size: 1rem; color: #555555; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
.c-txtarea::placeholder { color: #cccccc; }
.c-txtarea.is-entered { background-color: #ffffff; }

/* =========================================================
drawer - ドロワーのスタイルを当てる
========================================================= */
.c-drawer { position: relative; z-index: 99; }
.c-drawer-nav_list { padding: 0 10px; }
.c-drawer-nav_detail { border-bottom: 1px solid #eee; margin: 10px auto 0; text-align: center; }
.c-drawer-nav_detail:first-of-type { border-top: 1px solid #eee; }
.c-drawer-nav_detail a { color: #000; display: block; padding: 10px 0; text-decoration: none; }
.c-drawer-nav_detail a span { display: block; font-size: .7rem; }
.c-drawer-sns_list { display: flex; align-items: center; justify-content: space-between; max-width: 110px; margin: 24px auto 0; }

.drawer-nav { width: 15.25rem; }

.drawer--right .drawer-nav { right: -15.25rem; }

.drawer--right.drawer-open .drawer-hamburger { right: 15.25rem; }

/* =========================================================
trigger - トリガー
========================================================= */
.invisible { opacity: 0.0; transition: opacity 0.5s ease; }

.c-trigger_delay_2 { animation-delay: .2s; }
.c-trigger_delay_4 { animation-delay: .4s; }
.c-trigger_delay_6 { animation-delay: .6s; }
.c-trigger_delay_8 { animation-delay: .8s; }
.c-trigger_delay_10 { animation-delay: 1s; }
.c-trigger_delay_12 { animation-delay: 1.2s; }
.c-trigger_delay_14 { animation-delay: 1.4s; }
.c-trigger_delay_16 { animation-delay: 1.6s; }
.c-trigger_delay_24 { animation-delay: 2.4s; }
.c-trigger_duration_1 { --animate-duration: 1.5s; }
.c-trigger_duration_2 { --animate-duration: 2s; }
.c-trigger_duration_3 { --animate-duration: 3s; }
.c-trigger_duration_4 { --animate-duration: 4s; }

/* ---------------------------------------------------------
Project
プロジェクト固有のスタイルを定義するクラス
プロジェクトで使い回すスタイルのほとんどはProjectレイヤーに追加することになる
接頭辞としてp-をつける
--------------------------------------------------------- */
/* =========================================================
header - ヘッダー内のクラス
========================================================= */
.p-header { height: 100px; width: 100%; position: absolute; top: 0; left: 0; z-index: 99; }
@media screen and (min-width: 992px) { .p-header { display: none; } }

/* =========================================================
footer - フッター内のクラス
========================================================= */
.p-footer { background-color: #fff; position: relative; }
.p-footer-sns { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px 0 0; }
@media screen and (min-width: 992px) { .p-footer-sns { flex-direction: row; padding: 0; } }
.p-footer-sns--ttl { background-color: #8b7d70; padding: 6px 18px; width: 100%; text-align: center; }
@media screen and (min-width: 992px) { .p-footer-sns--ttl { width: auto; } }
.p-footer-sns--link { background-color: #fafafa; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-grow: 1; padding: 13px 20px; width: 100%; }
@media screen and (min-width: 992px) { .p-footer-sns--link { flex-direction: row; width: auto; } }
.p-footer-sns--link li { margin: 5px auto; }
@media screen and (min-width: 992px) { .p-footer-sns--link li { margin: 0 20px 0 0; } }
.p-footer-sns--link a { color: #000; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.p-footer-sns--link a:hover { text-decoration: underline; }
.p-footer-sns--link a img { margin: 3px 5px 0 0; }
.p-footer_shopname { color: #b18247; margin: 100px auto 0; position: relative; text-align: center; }
.p-footer_shopname::before { background-image: url(../images/img_footer_shopname.png); content: ''; display: block; height: 35px; width: 38px; position: absolute; margin: auto; left: 0; right: 0; top: -40px; }
.p-footer_address { font-size: .8rem; margin: 10px auto 0; text-align: center; }
.p-footer small { color: #999; display: block; font-size: .5rem; margin: 30px auto 0; text-align: center; }

/* =========================================================
top - topページレイアウト
========================================================= */
.p-top-mainvisual { height: 100vh; position: relative; }
@media screen and (min-width: 992px) { .p-top-mainvisual { height: 120vh; } }
.p-top-mainvisual_logo { position: absolute; left: 0; top: 0; z-index: 10; }
.p-top-mainvisual_logo--inner { display: flex; align-items: center; justify-content: center; height: 100vh; width: 100vw; }
.p-top-mainvisual_h1 { max-width: 450px; width: 50%; }
.p-top-mainvisual_h1 img { max-width: 470px; }
.p-top-mainvisual_slider { position: fixed; overflow-x: hidden; }
.p-top-mainvisual_slider ul { max-width: 100vw; margin: 0 auto; }
.p-top-mainvisual_slider ul .slick-list { overflow: visible; }
.p-top-mainvisual_slider ul img { object-fit: cover; width: 100%; height: 100vh; }
@media screen and (min-width: 992px) { .p-top-mainvisual_slider ul img { height: auto; } }
.p-top-about { background-color: rgba(0, 0, 0, 0.6); position: relative; z-index: 1; }
.p-top-about--inner { display: flex; align-items: center; justify-content: center; height: auto; }
@media screen and (min-width: 992px) { .p-top-about--inner { height: 120vh; } }
.p-top-about_recital { background-repeat: no-repeat; background-size: cover; margin: auto; max-width: 800px; position: relative; }
.p-top-about_recital::before, .p-top-about_recital::after { content: ''; display: none; width: 70px; height: 70px; position: absolute; }
@media screen and (min-width: 992px) { .p-top-about_recital::before, .p-top-about_recital::after { display: block; } }
.p-top-about_recital::before { border-left: solid 3px #fff; border-top: solid 3px #fff; top: 0; left: 0; }
.p-top-about_recital::after { border-right: solid 3px #fff; border-bottom: solid 3px #fff; bottom: 0; right: 0; }
.p-top-about_recital--inner { position: relative; padding: 200px 0 160px; }
@media screen and (min-width: 992px) { .p-top-about_recital--inner { padding: 160px 0; } }
.p-top-about_recital--inner::before, .p-top-about_recital--inner::after { content: ''; display: none; width: 70px; height: 70px; position: absolute; }
@media screen and (min-width: 992px) { .p-top-about_recital--inner::before, .p-top-about_recital--inner::after { display: block; } }
.p-top-about_recital--inner::before { border-right: solid 3px #fff; border-top: solid 3px #fff; top: 0; right: 0; }
.p-top-about_recital--inner::after { border-left: solid 3px #fff; border-bottom: solid 3px #fff; bottom: 0; left: 0; }
.p-top-about_h2 { color: #fff; font-size: 1.4rem; line-height: 1.4; text-align: center; position: relative; }
@media screen and (min-width: 992px) { .p-top-about_h2 { font-size: 1.8rem; line-height: 1.8; } }
.p-top-about_h2::before { background-image: url(../images/img_about_ttl.png); background-size: contain; background-repeat: no-repeat; display: block; content: ''; width: 180px; height: 104px; margin: auto; position: absolute; top: -125px; left: 0; right: 0; }
@media screen and (min-width: 992px) { .p-top-about_h2::before { width: 306px; height: 176px; top: -306px; } }
.p-top-about_h2 .em { color: #f0e0a7; }
.p-top-about_text { color: #fff; font-size: .9rem; line-height: 1.7; margin: 40px auto 0; text-align: center; }
@media screen and (min-width: 992px) { .p-top-about_text { line-height: 2.2; font-size: 1rem; } }
.p-top-nutrient { background-color: #fff; position: relative; z-index: 0; }
.p-top-nutrient--inner { display: flex; align-items: center; justify-content: center; height: auto; padding: 70px 0; }
@media screen and (min-width: 992px) { .p-top-nutrient--inner { height: 140vh; padding: 0; } }
.p-top-nutrient_h2 { display: block; font-size: 1.4rem; line-height: 1.2; margin: auto; text-align: center; }
@media screen and (min-width: 992px) { .p-top-nutrient_h2 { font-size: 2.4rem; line-height: 1; } }
.p-top-nutrient_h2 .em { color: #b18247; font-size: 1.8rem; }
@media screen and (min-width: 992px) { .p-top-nutrient_h2 .em { font-size: 3.6rem; } }
.p-top-nutrient_h2 .dec { display: inline-block; position: relative; }
.p-top-nutrient_h2 .dec::before { background-image: url(../images/dec_nutrient_ttl.png); background-size: contain; background-repeat: no-repeat; display: block; content: ''; height: 62px; width: 54px; position: absolute; left: -36px; top: -27px; }
@media screen and (min-width: 992px) { .p-top-nutrient_h2 .dec::before { height: 107px; width: 94px; left: -62px; top: -52px; } }
.p-top-nutrient_h3 { display: block; font-size: 1.6rem; line-height: 1.4; }
.p-top-nutrient_h3 .em { color: #b18247; font-size: 2rem; }
.p-top-nutrient_h3 .dec { display: inline-block; padding: 0; position: relative; }
@media screen and (min-width: 992px) { .p-top-nutrient_h3 .dec { padding: 0 0 0 70px; } }
.p-top-nutrient_h3 .dec::before { background-image: url(../images/dec_nutrient_att.png); background-size: contain; background-repeat: no-repeat; display: none; content: ''; height: 60px; width: 60px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; }
@media screen and (min-width: 992px) { .p-top-nutrient_h3 .dec::before { display: block; } }
.p-top-nutrient_text { font-size: .9rem; line-height: 1.7; margin: 30px auto 0; }
@media screen and (min-width: 992px) { .p-top-nutrient_text { font-size: 1rem; } }
.p-top-nutrient_text .em { color: #b18247; }
.p-top-nutrient_content { border-radius: 10px; margin: 30px auto 0; padding: 0; }
@media screen and (min-width: 992px) { .p-top-nutrient_content { background-color: #f4f2f0; margin: 50px auto 0; padding: 50px 50px 35px 50px; } }
.p-top-nutrient_content--wrap { display: flex; align-items: center; justify-content: space-between; flex-direction: column; }
@media screen and (min-width: 992px) { .p-top-nutrient_content--wrap { flex-direction: row; } }
.p-top-nutrient_content--wrap li { background-color: #f4f2f0; border-radius: 10px; margin: 0 auto 25px; padding: 20px; }
@media screen and (min-width: 992px) { .p-top-nutrient_content--wrap li { background-color: inherit; margin: auto; padding: 0; } }
.p-top-nutrient_content--att { color: #666; font-size: .75rem; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.6; margin: 30px auto 0; max-width: 390px; }
@media screen and (min-width: 992px) { .p-top-nutrient_content--att { font-size: .8rem; margin: 25px auto 0; max-width: 1200px; } }
.p-top-nutrient_content--att li { margin: 8px auto 0; padding: 0; }
@media screen and (min-width: 992px) { .p-top-nutrient_content--att li { margin: 2px auto; } }
.p-top-nutrient_recital { margin: 40px auto 0; }
@media screen and (min-width: 992px) { .p-top-nutrient_recital { margin: 60px auto 0; } }
.p-top-nutrient_recital--inner { display: flex; align-items: center; justify-content: center; flex-direction: column; }
@media screen and (min-width: 992px) { .p-top-nutrient_recital--inner { flex-direction: row; } }
.p-top-nutrient_recital--inner > img { margin: 20px 2% 0; }
@media screen and (min-width: 992px) { .p-top-nutrient_recital--inner > img { margin: 0 2%; } }
.p-top-product { background-color: #fff; background-repeat: no-repeat; background-position: top; background-attachment: fixed; background-size: 100%; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; height: 180vh; position: relative; z-index: 0; }
@media screen and (min-width: 992px) { .p-top-product { flex-direction: row; justify-content: center; height: 150vh; } }
.p-top-product--img { position: sticky; position: -webkit-sticky; top: 0; }
.p-top-product--img img { object-fit: cover; height: 100vh; }
.p-top-product .l-container { z-index: 0; }
@media screen and (min-width: 992px) { .p-top-product.cereals-walnut { background-image: url(../images/bg_product01.jpg); } }
@media screen and (min-width: 992px) { .p-top-product.ichigo-pistachio { background-image: url(../images/bg_product02.jpg); } }
.p-top-product.ichigo-pistachio .l-container { display: flex; justify-content: flex-end; }
.p-top-product--inner { background-repeat: no-repeat; background-size: contain; display: flex; justify-content: center; align-items: center; flex-direction: column; height: auto; padding: 30px 15px; max-width: 610px; width: 100%; }
@media screen and (min-width: 992px) { .p-top-product--inner { height: 661px; padding: 0; } }
.p-top-product.cereals-walnut .p-top-product--inner { background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; }
@media screen and (min-width: 992px) { .p-top-product.cereals-walnut .p-top-product--inner { background-color: inherit; background-image: url(../images/bg_product01_text.png); } }
.p-top-product.ichigo-pistachio .p-top-product--inner { background-color: rgba(255, 255, 255, 0.95); border-radius: 10px; }
@media screen and (min-width: 992px) { .p-top-product.ichigo-pistachio .p-top-product--inner { background-color: inherit; background-image: url(../images/bg_product02_text.png); border-radius: 0; } }
.p-top-product_h3 { font-size: 2rem; letter-spacing: 0; line-height: 1; margin: 5px auto 0; padding: 20px 0; }
@media screen and (min-width: 992px) { .p-top-product_h3 { font-size: 2.6rem; letter-spacing: .2rem; } }
.p-top-product_h3--att { color: #b18247; font-size: .8rem; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 20px 10px; position: relative; }
@media screen and (min-width: 992px) { .p-top-product_h3--att { font-size: 1rem; padding: 20px 50px; } }
.p-top-product_h3--att .em { font-size: 1rem; font-weight: bold; }
@media screen and (min-width: 992px) { .p-top-product_h3--att .em { font-size: 1.2rem; } }
.p-top-product.cereals-walnut .p-top-product_h3--att::before { background-color: #f2b770; content: ''; display: block; height: 4px; width: 100%; position: absolute; top: 0; left: 0; }
.p-top-product.cereals-walnut .p-top-product_h3--att::after { background-color: #c9bdb1; content: ''; display: block; height: 4px; width: 100%; position: absolute; top: 4px; left: 0; }
.p-top-product.ichigo-pistachio .p-top-product_h3--att::before { background-color: #c0d696; content: ''; display: block; height: 4px; width: 100%; position: absolute; top: 0; left: 0; }
.p-top-product.ichigo-pistachio .p-top-product_h3--att::after { background-color: #f6bec8; content: ''; display: block; height: 4px; width: 100%; position: absolute; top: 4px; left: 0; }
.p-top-product_component { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 5px 0 0; max-width: 470px; }
.p-top-product_component--inner { border: 1px solid #ccc; border-radius: 30px; margin: 10px auto 0; padding: 4px 0; display: flex; align-items: center; justify-content: center; width: 49%; }
@media screen and (min-width: 992px) { .p-top-product_component--inner { padding: 8px 0; } }
.p-top-product_component--inner dt { font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bolder; font-size: .8rem; margin: 0 5px 0 0; padding: 3px 0 0 0; }
@media screen and (min-width: 992px) { .p-top-product_component--inner dt { font-size: .9rem; } }
.p-top-product_component--inner dd { font-size: 1.4rem; line-height: 1; }
@media screen and (min-width: 992px) { .p-top-product_component--inner dd { font-size: 1.8rem; } }
.p-top-product_component--inner dd .unit { font-size: .7rem; }
@media screen and (min-width: 992px) { .p-top-product_component--inner dd .unit { font-size: 1rem; } }
.p-top-product_ingredient--btn { margin: 15px 0 0; }
.p-top-product_ingredient--btn a { color: #b18247; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: .9rem; text-decoration: none; position: relative; display: inline-block; padding: 0 0 0 16px; vertical-align: middle; }
.p-top-product_ingredient--btn a:hover { text-decoration: underline; }
.p-top-product_ingredient--btn a::before, .p-top-product_ingredient--btn a::after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
.p-top-product_ingredient--btn a::before { left: 3px; width: 4px; height: 4px; border-top: 2px solid #b18247; border-right: 2px solid #b18247; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.p-top-product_ingredient--ttl { color: #b18247; font-size: 1.5rem; line-height: 1.4; text-align: center; margin: 25px auto 0; }
.p-top-product_ingredient--text { font-size: .9rem; margin: auto; max-width: 570px; }
.p-top-product_ingredient--wrap { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 20px auto 0; }
@media screen and (min-width: 992px) { .p-top-product_ingredient--wrap { flex-direction: row; } }
.p-top-product_ingredient--list { margin: 0 15px 10px; width: 100%; }
@media screen and (min-width: 992px) { .p-top-product_ingredient--list { width: auto; } }
.p-top-product_ingredient--item { border-top: 1px solid #eee; display: flex; padding: 5px 10px; }
.p-top-product_ingredient--item:last-of-type { border-bottom: 1px solid #eee; }
.p-top-product_ingredient--item:nth-of-type(2n+1) { background-color: #fff9f2; }
.p-top-product_ingredient--item dt { color: #666; font-size: .8rem; font-family: Lato, "Noto Sans JP", "Noto Sans Japanese", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; min-width: 190px; }
.p-top-product_ingredient--item dd { color: #666; flex-grow: 1; text-align: center; }
.p-top-product_ingredient--allergen { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 15px auto 20px; max-width: 570px; text-align: center; padding: 8px 10px; }
.p-top-product.cereals-walnut .p-top-product_component--inner:nth-of-type(2) { border: 1px solid #f2b770; }
.p-top-product.cereals-walnut .p-top-product_component--inner:nth-of-type(3) { border: 1px solid #f2b770; }
.p-top-product.ichigo-pistachio .p-top-product_component--inner:nth-of-type(1) { border: 1px solid #c0d696; }
.p-top-product.ichigo-pistachio .p-top-product_component--inner:nth-of-type(2) { border: 1px solid #f6bec8; }
.p-top-product.ichigo-pistachio .p-top-product_component--inner:nth-of-type(3) { border: 1px solid #f6bec8; }
.p-top-product.ichigo-pistachio .p-top-product_component--inner:nth-of-type(4) { border: 1px solid #c0d696; }
.p-top-point { background-color: #f8f6f4; position: relative; z-index: 1; }
.p-top-point::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 10vh 50vw 0 50vw; border-color: #f8f6f4 transparent transparent transparent; position: absolute; bottom: -10vh; z-index: 1; }
@media screen and (min-width: 992px) { .p-top-point::after { border-width: 15vh 50vw 0 50vw; bottom: -15vh; } }
.p-top-point--inner { display: flex; align-items: center; justify-content: center; height: auto; padding: 20px 0; }
@media screen and (min-width: 992px) { .p-top-point--inner { height: 80vh; padding: 0; } }
.p-top-point_h2 { font-size: 2.5rem; font-weight: 700; line-height: 1.4; padding: 75px 0; position: relative; text-align: center; }
@media screen and (min-width: 992px) { .p-top-point_h2 { line-height: 1; } }
.p-top-point_h2::before { background-image: url(../images/dec_ttl.png); background-size: cover; background-repeat: no-repeat; content: ''; display: block; height: 192px; width: 192px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: -1; }
.p-top-point_h3 { color: #b18247; font-size: 1.5rem; font-weight: 700; line-height: 1.4; margin: 0 auto 20px; text-align: center; }
@media screen and (min-width: 992px) { .p-top-point_h3 { font-size: 1.8rem; } }
.p-top-point_text { font-size: .9rem; line-height: 1.7; margin: 0 auto 20px; }
@media screen and (min-width: 992px) { .p-top-point_text { font-size: 1rem; } }
.p-top-point_text.em { font-size: 1.1rem; font-weight: 700; text-align: center; }
@media screen and (min-width: 992px) { .p-top-point_text.em { font-size: 1.4rem; } }
.p-top-point_list { display: flex; align-items: center; justify-content: space-between; flex-direction: column; margin: 15px auto 0; }
@media screen and (min-width: 992px) { .p-top-point_list { flex-direction: row; margin: 25px auto 0; } }
.p-top-point_detail { background-color: #fff; background-size: 40%; border-radius: 10px; margin: 0 auto 30px; padding: 30px; width: 98%; }
@media screen and (min-width: 992px) { .p-top-point_detail { background-size: auto; margin: 0; } }
@media screen and (min-width: 992px) { .p-top-point_detail { width: 48%; padding: 70px; } }
.p-top-point_detail:first-of-type { background-image: url(../images/bg_point01.png); background-repeat: no-repeat; background-position: left top; }
.p-top-point_detail:nth-of-type(2) { background-image: url(../images/bg_point02.png); background-repeat: no-repeat; background-position: right bottom; }
.p-top-offer { background-color: #fff; padding: 13vh 0 0; position: relative; z-index: 0; }
@media screen and (min-width: 992px) { .p-top-offer { padding: 15vh 0 0; } }
.p-top-offer--inner { display: flex; align-items: center; justify-content: center; height: auto; }
@media screen and (min-width: 992px) { .p-top-offer--inner { height: 130vh; } }
.p-top-offer_h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; padding: 40px 0; position: relative; text-align: center; }
@media screen and (min-width: 992px) { .p-top-offer_h2 { font-size: 2.5rem; line-height: 1; padding: 75px 0; } }
.p-top-offer_h2::before { background-image: url(../images/dec_ttl.png); background-size: cover; background-repeat: no-repeat; content: ''; display: block; height: 192px; width: 192px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: -1; }
.p-top-offer_h2 .em { color: #b18247; display: inline-block; font-size: 2.6rem; margin: 0 auto 7px; }
@media screen and (min-width: 992px) { .p-top-offer_h2 .em { font-size: 3rem; margin: 0; } }
.p-top-offer_h2 .att { display: block; font-size: 1rem; margin: 25px auto 0; text-align: center; }
.p-top-offer_text--dec { background-color: #a28469; border-radius: 50px; color: #fff; line-height: 1; font-size: 1rem; margin: auto; max-width: 600px; padding: 8px 10px; width: 90%; text-align: center; }
@media screen and (min-width: 992px) { .p-top-offer_text--dec { font-size: 1.2rem; } }
.p-top-offer_item { display: flex; align-items: center; justify-content: space-between; flex-direction: column; margin: 40px auto 0; }
@media screen and (min-width: 992px) { .p-top-offer_item { flex-direction: row; margin: 60px auto 0; } }
.p-top-offer_item--inner { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto 50px; padding: 40px 15px; width: 98%; }
@media screen and (min-width: 992px) { .p-top-offer_item--inner { padding: 40px; } }
@media screen and (min-width: 992px) { .p-top-offer_item--inner { margin: 0; width: 49%; } }
.p-top-offer_item--inner.pieces6 { background-color: #fdfcf5; }
.p-top-offer_item--inner.pieces10 { background-color: #fcfafb; }
.p-top-offer_item--inner dt { border-top: 1px solid #b18247; border-bottom: 1px solid #b18247; color: #b18247; font-size: 1.5rem; padding: 6px 15px; text-align: center; width: 100%; }
.p-top-offer_item--inner dd { margin: 50px auto 0; }
.p-top-offer_item--price { font-size: 2.3rem; font-weight: 700; margin: 30px auto 0; text-align: center; }
.p-top-offer_item--price .tax { font-size: 1rem; }
.p-top-offer_item--substance { background-color: #fff; margin: 15px auto 0; padding: 20px; }
.p-top-offer_item--substance li { margin: 0 auto 5px; }
.p-top-offer_item--cart a { background-color: #e05a36; border-radius: 50px; color: #fff; display: block; font-size: 1.4rem; line-height: 1; margin: 25px auto 0; max-width: 320px; padding: 13px; text-decoration: none; text-align: center; }
@media screen and (min-width: 992px) { .p-top-offer_item--cart a { background-color: #d7824f; } }
.p-top-offer_item--cart a:hover { opacity: .8; }
.p-top-offer_item--cart a span { margin: 0 0 0 40px; position: relative; }
.p-top-offer_item--cart a span::before { background-image: url(../images/dec_offer_cart.png); content: ''; display: block; height: 23px; width: 23px; position: absolute; left: -35px; }

/* ---------------------------------------------------------
Utility
調整用のクラス
margin、padding、font-size、colorなどを付与するのに使用
他種類のパーツ間の空き調整や、パーツとして認められないような、
自由な振る舞いをする要素に対してはこちらのクラスを使用
接頭辞としてu-をつける
--------------------------------------------------------- */
/* =========================================================
display - ブレイクポイントごとに表示切替
========================================================= */
.u-none { display: none !important; }

.u-inline { display: inline !important; }

.u-inline-block { display: inline-block !important; }

.u-block { display: block !important; }

.u-table { display: table !important; }

.u-table-row { display: table-row !important; }

.u-table-cell { display: table-cell !important; }

.u-flex { display: -ms-flexbox !important; display: flex !important; }

.u-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; }

@media screen and (min-width: 576px) { .u-sm-none { display: none !important; }
  .u-sm-inline { display: inline !important; }
  .u-sm-inline-block { display: inline-block !important; }
  .u-sm-block { display: block !important; }
  .u-sm-table { display: table !important; }
  .u-sm-table-row { display: table-row !important; }
  .u-sm-table-cell { display: table-cell !important; }
  .u-sm-flex { display: -ms-flexbox !important; display: flex !important; }
  .u-sm-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }
@media screen and (min-width: 768px) { .u-mu-none { display: none !important; }
  .u-mu-inline { display: inline !important; }
  .u-mu-inline-block { display: inline-block !important; }
  .u-mu-block { display: block !important; }
  .u-mu-table { display: table !important; }
  .u-mu-table-row { display: table-row !important; }
  .u-mu-table-cell { display: table-cell !important; }
  .u-mu-flex { display: -ms-flexbox !important; display: flex !important; }
  .u-mu-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }
@media screen and (min-width: 992px) { .u-lg-none { display: none !important; }
  .u-lg-inline { display: inline !important; }
  .u-lg-inline-block { display: inline-block !important; }
  .u-lg-block { display: block !important; }
  .u-lg-table { display: table !important; }
  .u-lg-table-row { display: table-row !important; }
  .u-lg-table-cell { display: table-cell !important; }
  .u-lg-flex { display: -ms-flexbox !important; display: flex !important; }
  .u-lg-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }
@media screen and (min-width: 1200px) { .u-xl-none { display: none !important; }
  .u-xl-inline { display: inline !important; }
  .u-xl-inline-block { display: inline-block !important; }
  .u-xl-block { display: block !important; }
  .u-xl-table { display: table !important; }
  .u-xl-table-row { display: table-row !important; }
  .u-xl-table-cell { display: table-cell !important; }
  .u-xl-flex { display: -ms-flexbox !important; display: flex !important; }
  .u-xl-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }
@media print { .u-print-none { display: none !important; }
  .u-print-inline { display: inline !important; }
  .u-print-inline-block { display: inline-block !important; }
  .u-print-block { display: block !important; }
  .u-print-table { display: table !important; }
  .u-print-table-row { display: table-row !important; }
  .u-print-table-cell { display: table-cell !important; }
  .u-print-flex { display: -ms-flexbox !important; display: flex !important; }
  .u-print-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } }