@charset "UTF-8";

@font-face {
  font-family: '_YuMin';
  src: local('Yu Mincho Regular');
}

@font-face {
  font-family: '_YuMin';
  src: local('Yu Mincho Light'),
       local('YuMincho-Light');
  font-weight: 200;
}

@font-face {
  font-family: '_YuMin';
  src: local('Yu Mincho Demibold'),
       local('YuMincho-Demibold');
  font-weight: 700;
}

@font-face {
  font-family: '_YuGo';
  src: local('Yu Gothic Medium');
}

@font-face {
  font-family: '_YuGo';
  src: local('Yu Gothic Light');
  font-weight: 100;
}

@font-face {
  font-family: '_YuGo';
  src: local('Yu Gothic Regular'),
       local('YuGothic-Regular');
  font-weight: 200;
}

@font-face {
  font-family: '_YuGo';
  src: local('Yu Gothic Bold');
  font-weight: 700;
}

@font-face {
  font-family: '_HiraMin';
  src: local('HiraMinProN-W3'),
       local('HiraMinPro-W3');
}

@font-face {
  font-family: '_HiraMin';
  src: local('HiraMinProN-W6'),
       local('HiraMinPro-W6');
  font-weight: bold;
}

@font-face {
  font-family: '_HiraKaku';
  src: local('HiraKakuProN-W3'),
       local('HiraKakuPro-W3');
}

@font-face {
  font-family: '_HiraKaku';
  src: local('HiraKakuProN-W6'),
       local('HiraKakuPro-W6');
  font-weight: bold;
}

html, body,
figure,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd,
form, fieldset, legend, input, button, select, textarea {
  margin: 0;
  padding: 0;
}

header, footer, main,
article, section, nav, aside {
  display: block;
}

html {
  font-size: 100%;
}

ul, ol {
  list-style: none;
}

hr {
  color: inherit;
  height: auto;
}

pre {
  font-family: monospace, sans-serif;
}

h1, h2, h3, h4, h5, h6,
strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

img,
svg {
  border: 0;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
}

input, button, select, option, optgroup, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

html {
  height: 100%;
  background-color: transparent;
  background-image: none;
}

body {
  position: relative;
  margin: 0 auto;
  color: #000;
  background: #fff;
  font: 100%/2rem '_YuGo', 'YuGothic', 'Yu Gothic', '_HiraKaku', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Meiryo', 'メイリオ', 'Arial', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  -webkit-text-size-adjust: 100%;
}

.serif {
  font-family: '_YuMin', 'YuMincho', 'Yu Mincho', '_HiraMin', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN W3', 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro W3', 'Times', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}

a {
  position: relative;
  z-index: 1;
  color: #ed1c24;
  background: linear-gradient(to bottom, currentColor, currentColor) 0 bottom / 0 1px no-repeat;
  background-position: top 0 bottom -1px;
  text-decoration: underline;
  transition: .2s;
}

a:hover,
a:active,
a:focus {
  color: #f00;
  background-size: 100% 1px;
}

.image a {
  background: transparent;
}

hr {
  display: none;
}

.offscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
}

.nowrap {
  display: inline-block;
  white-space: nowrap;
}

.image img {
  width: 100%;
}

.images .image img {
  display: block;
  max-width: 240px;
  margin: 0 auto;
}

.caption {
  display: flex;
  justify-content: center;
  font-size: .875rem;
}

.negative-circled-number {
  counter-reset: negative-circled-number-count;
}

.negative-circled-number li {
  display: flex;
  margin-left: 0;
}

.negative-circled-number li::before {
  counter-increment: negative-circled-number-count;
  content: counter(negative-circled-number-count) '.';
  display: block;
  margin-right: .5em;
}

.negative-circled-number li:nth-child(1)::before {
  content: '❶';
}

.negative-circled-number li:nth-child(2)::before {
  content: '❷';
}

.negative-circled-number li:nth-child(3)::before {
  content: '❸';
}

.negative-circled-number li:nth-child(4)::before {
  content: '❹';
}

.negative-circled-number li:nth-child(5)::before {
  content: '❺';
}

.negative-circled-number li:nth-child(6)::before {
  content: '❻';
}

.negative-circled-number li:nth-child(7)::before {
  content: '❼';
}

.negative-circled-number li:nth-child(8)::before {
  content: '❽';
}

.negative-circled-number li:nth-child(9)::before {
  content: '❾';
}

.negative-circled-number li:nth-child(10)::before {
  content: '❿';
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.logo {
  position: relative;
  fill: #6a3c1f;
}

.logo>.svg-wrapper {
  display: block;
  height: 0;
  padding-top: 60.15625%;
}

.logo>.svg-wrapper>svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
  box-sizing: border-box;
}

.section-header {
  padding: 1rem 0 1.5rem;
  color: #fff;
  background: #6a3c1f;
  text-align: center;
}

.section-header .section-heading {
  margin: 0;
}

.section-header .section-heading .text,
.section-header .section-heading .logo {
  display: block;
  margin: 0 auto;
}

.section-header .section-heading .text {
  font-size: 1.25rem;
}

.section-header .section-heading .logo {
  width: 199.480519481px;
  margin-top: .5rem;
}

.section h2 {
  margin-top: 1rem;
  font-size: 1.5rem;
}

.subsection {
  max-width: 960px;
  margin: 0 auto;
}

.notes--small {
  font-size: .75rem;
  line-height: 1rem;
}

.notes>li {
  display: flex;
}

.notes>li::before {
  content: '※';
  display: block;
}

.notes>.asterisk::before {
  content: '*';
}

.notes>.bullseye::before {
  content: '\25ce';
}

.text--red {
  color: #ed1c24;
}

.text--weight-400 {
  font-weight: normal;
}

.text--size-inherit {
  font-size: inherit;
  line-height: inherit;
}

.bullet {
  display: flex;
}

.bullet::before {
  flex: 0 0 auto;
  white-space: nowrap;
}

.bullet--bullseye::before {
  content: '\25ce';
}

.bodytext h3,
.bodytext p,
.bodytext ol,
.bodytext ul {
  margin-top: 1rem;
}

.bodytext dl.compact {
  display: table;
}

.bodytext dl.compact>div {
  display: table-row;
}

.bodytext dl.compact>div>dt,
.bodytext dl.compact>div>dd {
  display: table-cell;
}

.bodytext dl.compact>div>dt {
  text-align: right;
  white-space: nowrap;
}

.bodytext em {
  font-style: normal;
  font-weight: bold;
}

.bodytext .box--strong {
  padding: .75rem 16px;
  border-radius: 8px;
  color: #fff;
  background: #ed1c24;
  font-weight: bold;
}

.buttons {
  margin-top: 2rem;
  text-align: center;
}

.button {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: .5rem 24px;
  border-radius: .5rem;
  color: #fff;
  background: #6a3c1f;
  font-weight: bold;
  text-decoration: none;
}

.button:hover,
.button:active,
.button:focus {
  color: #fff;
}

.button--brown {
  background: #6a3c1f;
}

.button .arrow {
  width: .75rem;
  height: .75rem;
  margin-right: -.875rem;
  padding: .375rem;
  transform: rotate(-45deg);
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  background: #fff;
  transition: opacity .2s;
}

.button:hover::before,
.button:active::before,
.button:focus::before {
  opacity: .3;
}

.recipes .button {
  background: #f7931e;
}

.events .button:not(.button--brown) {
  background: #ed1c24;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  overflow: hidden;
}

.gallery>img {
  flex: 0 0 auto;
  width: 25%;
  height: auto;
}

.remodal {
  padding: 0;
  width: auto;
  max-width: 640px;
}

.remodal-close {
  right: 0;
  left: auto;
  width: 48px;
  height: 48px;
  color: #6a3c1f;
}

.remodal-close::before {
  width: 100%;
  font-size: 48px;
  line-height: 48px;
}

.remodal-overlay {
  background: rgba(25, 24, 25, .8);
}

.modal--amazake {
  padding: 1rem 16px;
  background: url(../images/amazake/bg_wood-grain.jpg) center 0 / 100%;
}

.modal--amazake .image {
  max-width: 160px;
  margin: 0 auto;
}

.modal--amazake .image+.buttons {
  margin-top: 0;
}

/* ================================================================
   header
   ================================================================ */

.header {
  position: relative;
  color: #fff;
  background: url(../images/logo_kome.png) center 320px / auto 272px no-repeat, linear-gradient(to bottom, transparent 97.0588235%, #6a3c1f 97.0588235%, #6a3c1f) 0 320px no-repeat;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  background: linear-gradient(to bottom, #fff, #fff) center 584px / 1200px 1px no-repeat, linear-gradient(to bottom, #6a3c1f, #6a3c1f) center 584px no-repeat;
}

.header .tagline {
  display: flex;
  align-items: center;
  width: 128px;
  height: 320px;
  margin: 0 auto 272px;
}

.header .title {
  font-size: 1.5rem;
  text-align: center;
}

.header .logo {
  width: 256px;
  margin: 1rem auto 0;
}

.header--banner {
  padding-top: 64px;
  background-origin: content-box;
}

.header--banner::before {
  padding-top: inherit;
  background-origin: inherit;
}

.header-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 210px;
  background: #fff;
}

.header-banner a {
  display: block;
  border: 2px solid #6a3c1f;
  transition: opacity .2s;
}

.header-banner a:hover,
.header-banner a:active,
.header-banner a:focus {
  opacity: .7;
}

.header-banner img {
  width: 100%;
}

/* nav */

.nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}

.nav-button {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0 0 6px;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 0 4px rgba(255, 255, 255, 1);
  color: #fff;
  background: #6a3c1f;
  font-weight: bold;
  font-size: .75rem;
  line-height: 1;
  text-transform: uppercase;
  transition: .2s;
  cursor: pointer;
}

.nav-button:hover,
.nav-button:active,
.nav-button:focus {
  box-shadow: 0 0 8px rgba(106, 60, 31, 1), 0 0 16px rgba(255, 255, 255, 1);
  background: #581c08;
}

.nav-button-icon,
.nav-button-text {
  display: block;
  flex: 0 0 auto;
}

.nav-button-icon {
  width: 100%;
  height: 32px;
  pointer-events: none;
}

.nav-container {
  position: fixed;
  top: 0;
  right: 0;
  max-height: 100vh;
  overflow: auto;
  background: #fff;
  transform: translate(100%, 0);
  transition: .2s;
}

.nav-content {
  padding: 16px 0;
}

.nav-list a {
  display: flex;
  align-items: center;
  z-index: auto;
  padding: .25rem 16px;
  border: 0;
  color: #000;
  font-weight: bold;
  font-size: .875rem;
  text-decoration: none;
  transition: .2s;
}

.nav-list .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #6a3c1f;
  vertical-align: middle;
  transition: inherit;
}

.nav-list .icon.arrow {
  width: 12px;
  height: 12px;
  padding: 2px;
  transform: translate(-2px, 0) rotate(-45deg);
}

.nav-list .back .icon.arrow {
  transform: translate(2px, 0) rotate(135deg);
}

.nav-list a:hover {
  color: #fff;
  background: #6a3c1f;
}

.nav-list a:hover .icon {
  color: #fff;
}

.nav .banner {
  width: 200px;
  padding: 0 16px;
}

.nav .banner li {
  margin-top: 16px;
}

.nav .banner .border {
  border: 1px solid #6a3c1f;
}

/* open */

.nav-open .nav-button-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
}

.nav-open .nav-button::after {
  content: 'Close';
  display: block;
}

.nav-open .nav-container {
  box-shadow: 0 0 0 1px #6a3c1f, 0 0 16px rgba(0, 0, 0, .1), 0 0 8px rgba(0, 0, 0, .3), 0 0 4px rgba(0, 0, 0, .5);
  transform: none;
}

/* --------------------------------
   story
   -------------------------------- */

.story {
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.story .inner {
  max-width: 50em;
}

/* --------------------------------
   information
   -------------------------------- */

.information {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0 auto;
}

.information .button {
  display: block;
  padding: .5rem 0;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  text-decoration: none;
  text-align: center;
}

.information .button>.arrow {
  display: block;
  width: .75rem;
  height: .75rem;
  margin: 0 auto;
  padding: .375rem;
  transform: rotate(45deg);
}

/* ================================================================
   content
   ================================================================ */

.section-tagline {
  text-align: center;
}

/* --------------------------------
   about section
   -------------------------------- */

.about {
  margin-bottom: 0;
  padding: 3rem 0;
  overflow: hidden;
  color: #6a3c1f;
}

.about h2 {
  margin-top: 0;
  font-weight: normal;
  line-height: 2.5rem;
  font-feature-settings: 'halt';
  text-align: center;
}

.about .bodytext {
  margin-top: 2rem;
  font-size: .875rem;
  line-height: 2rem;
}

.about .bodytext h2 {
  margin-top: 2rem;
}

/* ################################
   intro
   ################################ */

#intro {
  min-height: 480px;
  color: #fff;
  background: #000;
}

#intro .section-tagline {
  margin-right: 50%;
}

#intro .section-image {
  position: absolute;
  top: 0;
  right: 5%;
  z-index: -1;
  width: 288px;
}

/* ################################
   about
   ################################ */

#about {
  z-index: 2;
  background: #f0ede8;
}

#about .section-tagline {
  min-height: 400px;
  margin-left: 50%;
}

#about .section-image {
  position: absolute;
  top: 0;
  right: 50%;
  z-index: -1;
  width: 420px;
  transform: translate(30%, 0);
}

#about .image.rice {
  width: 192px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
  overflow: hidden;
}

/* ################################
   features
   ################################ */

#features {
  background: #f0ede8;
}

#features .section-tagline {
  min-height: calc(512px - 3rem);
}

#features .section-image {
  position: absolute;
  top: -32px;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: -1;
  width: 320px;
}

/* ################################
   recipes
   ################################ */

#recipes .section-header {
  background: #f7931e;
}

#recipes .logo {
  fill: #f7931e;
}

#recipes .supervision {
  display: block;
  font-size: 1rem;
}

.recipe-group-number {
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  color: #fff;
  background: #fbb03b;
  font-weight: bold;
  font-size: 1.25rem;
  text-decoration: none;
  text-align: center;
  transition: .2s;
}

.recipe-group-number:hover {
  color: #fff;
}

.recipe-group-number::before {
  content: counter(recipe-group-count);
  display: block;
  flex: 0 0 auto;
  font-size: 3rem;
  line-height: 1.333333;
  transform: none;
}

.recipe-group-number .icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 75%;
  height: 75%;
  margin: auto;
  opacity: .2;
}

.recipe-group-number .text {
  flex: 0 0 auto;
  display: block;
}

.recipe-list {
  counter-reset: recipe-group-count;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 0 -32px;
}

.recipe-list-item {
  counter-increment: recipe-group-count;
  flex: 0 0 auto;
  margin: 1rem 0 0 32px;
}

.recipe-list-button:hover,
.recipe-list-button:active,
.recipe-list-button:focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, .2);
  background: #f7931e;
}

/* ################################
   events
   ################################ */

#events .section-header {
  background: #ed1c24;
}

#events .logo {
  fill: #ed1c24;
}

#events .inner {
  max-width: 640px;
}

.event-section {
  margin: 2rem auto;
}

.event-section+.event-section {
  margin-top: -1px;
  padding-top: 1rem;
  border-top: 1px solid #ed1c24;
}

.event-heading {
  color: #ed1c24;
  fotn-size:
}

.event-section .meta {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.5rem;
}

.event-section .end {
  margin-top: .5rem;
  color: #003e92;
  font-weight: bold;
}

.event-section .bodytext h2 {
  font-size: inherit;
}

.ecent-section .bodytext h3 {
  font-size: inherit;
}

.event-section .bodytext .shop {
  font-size: .875rem;
  line-height: 1.5rem;
}

.event-section .bodytext .shop li+li {
  margin-top: 1.5rem;
}

.event-section .location {
  margin-top: 1rem;
}

.event-section .location>li {
  margin-top: .5rem;
}

.event-section .location .name {
  font-weight: bold;
}

.event-section .location .notes {
  margin-top: 0;
}

.event-subsection h2 {
  font-size: 1.125rem;
}

/* ################################
   shops
   ################################ */

#shops .subsection h2 {
  color: #6a3c1f;
}

.shop-list {
  text-align: center;
}

.shop-list li {
  margin-top: 1rem;
}

.shop-list .image>a {
  transition: opacity .2s;
}

.shop-list .image>a:hover,
.shop-list .image>a:active,
.shop-list .image>a:focus {
  opacity: .7;
}

.shop-list a>img {
  width: 100%;
  max-width: 500px;
}

/* ================================================================
   footer
   ================================================================ */

.footer {
  padding-bottom: 2rem;
  color: #6a3c1f;
}

.footer .section {
  margin-bottom: 2rem;
}

.footer .section+.section {
  margin: 2rem auto 0;
}

.footer .section-content {
  margin: 2rem auto;
}

.footer .section-content h2 {
  color: #6a3c1f;
}

.copyright {
  padding: calc(2rem - 1px) 0 0;
  border-top: 1px solid #6a3c1f;
  font-size: .875rem;
  text-align: center;
}

/* ################################
   contact
   ################################ */

#contact .image {
  max-width: 288px;
  margin: 2rem auto 1rem;
}

#contact .image.map {
  max-width: 352px;
}

#contact .buttons {
  margin-top: 1rem;
}

#contact .button {
  background: #1fa433;
}

#contact .address {
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.5rem;
}

#contact .address {
  text-align: center;
}

#contact .address .fax {
  margin-left: 1em;
}

/* ################################
   sns
   ################################ */

.sns-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sns-list>li {
  width: 48px;
  height: 48px;
  margin: 0 .5rem;
}

.sns-list img {
  width: 100%;
}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   -359px
   mobile
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (max-width: 359px) {

  .modal--amazake {
    padding-right: 8px;
    padding-left: 8px;
  }

  .section h2 {
    font-size: 1.25rem;
  }

  #contact .address {
    text-align: left;
  }

}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   -420px
   mobile
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (max-width: 420px) {

  #intro .section-image {
    right: -32px;
  }

  #about .section-image {
    transform: translate(40%, 0);
  }

}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   -568px
   mobile
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (max-width: 568px) {

  .logo {
    max-width: 160px;
  }

  .header {
    background-position: center 240px;
    background-size: auto 160px, 0;
  }

  .header::before {
    background-position: center 395px;
  }

  .header .tagline {
    width: 96px;
    height: 240px;
    margin-bottom: 160px;
  }

  #features {
    padding-top: 0;
  }

}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   569px+
   tablet, desktop
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (min-width: 569px) {

  .gallery {
    flex-wrap: nowrap;
    justify-content: center;
  }

  .gallery>img {
    width: auto;
    height: 100px;
  }

}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   768px+
   tablet, desktop
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (min-width: 768px) {

  .images {
    display: flex;
    justify-content: center;
    margin: 0 -.5rem;
  }

  .images .image {
    flex: 0 1 auto;
    margin-right: 0;
    margin-left: 1rem;
  }

  .images .image img {
    max-width: none;
  }

  .images.layout-2-column .image {
    width: calc(50% - 1rem);
  }

  .subsection {
    margin: 3rem auto;
  }

  .subsection>h2 {
    text-align: center;
  }

  .gallery>img {
    height: 13.020833vw;
    max-height: 200px;
  }

  .modal--amazake {
    padding: 2rem 32px;
    width: 100%;
  }

  .modal--amazake .image {
    max-width: 320px;
  }

  .modal--amazake .button {
    font-size: 1.25rem;
  }

  /* ================================================================
     header
     ================================================================ */

  .header--banner {
    padding-top: 0;
  }

  .header-banner {
    top: 32px;
    left: 32px;
  }

  .nav .banner {
    width: 256px;
  }

  /* --------------------------------
     information
     -------------------------------- */

  .information .button {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .information .button>.arrow {
    width: 1rem;
    height: 1rem;
    padding: .25rem;
  }

  /* ================================================================
     content
     ================================================================ */

  .layout-2-column {
    display: flex;
  }

  .layout-reverse {
    flex-direction: row-reverse;
  }

  .layout-item--align-bottom {
    align-self: flex-end;
  }

  .layout-2-column>.layout-item {
    flex: 0 0 auto;
    width: 50%;
  }

  .layout-2-column>.layout-item--2\/5 {
    width: calc(100% / 3 - 16px);
  }

  .layout-2-column>.layout-item--3\/5 {
    width: calc(200% / 3 - 16px);
  }

  .layout--gutter {
    margin-left: -1rem;
  }

  .layout--gutter>.layout-item {
    margin-left: 1rem;
  }

  .layout-item .buttons--align-left {
    text-align: left;
  }

  .layout-item .image--no-margin {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* --------------------------------
     about section
     -------------------------------- */

  .about .bodytext {
    max-width: 22em;
    margin: 0 auto;
  }

  .about .bodytext h2:first-child {
    margin-top: 0;
  }

  /* ################################
     intro
     ################################ */

  #intro {
    height: 768px;
  }

  #intro .inner {
    height: 100%;
  }

  #intro .section-tagline {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  #intro .section-tagline>img {
    flex: 0 0 auto;
  }

  #intro .section-image {
    right: 0;
    left: 0;
    width: 480px;
    margin: 0 auto;
    transform: translate(50%, 0);
  }

  /* ################################
     about
     ################################ */

  #about .inner {
    position: relative;
    overflow: hidden;
  }

  #about .layout-2-column {
    align-items: flex-end;
  }

  #about .section-tagline {
    min-height: 720px;
    margin: 32px 0 0 calc(25% + 176px);
    text-align: left;
  }

  #about .section-image {
    width: 768px;
    top: calc(-3rem - 32px);
    right: 0;
    left: 0;
    margin: 0 auto;
    transform: translate(25%, 0);
  }

  /* ################################
     features
     ################################ */


  #features .inner {
    position: relative;
  }

  #features .layout-item:last-child::before {
    content: '';
    display: block;
    width: 144px;
    height: 156px;
    margin: 0 auto;
    opacity: .5;
    background: url(../images/separator_rice.png) 0 0 / 100% no-repeat;
  }

  #features .section-tagline {
    min-height: 1072px;
    padding-top: 156px;
    box-sizing: border-box;
  }

  #features .section-image {
    top: auto;
    right: auto;
    bottom: calc(-3rem - 64px);
    left: 50%;
    width: 960px;
    margin-left: 25%;
    transform: translate(-50%, 0);
  }

  #features .bodytext p {
    position: relative;
    z-index: 1;
  }

  #features .bodytext p::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: auto;
    border-radius: 8px;
    opacity: .9;
    background: #f0ede8;
    filter: blur(16px);
  }

  /* ie */

  _:-ms-input-placeholder,
  :root #features .bodytext p::before {
    box-shadow: 0 0 8px 8px #f0ede8;
  }

  /* ################################
     recipes
     ################################ */

  #recipes .subsection {
    margin-top: 2rem;
  }

  #recipes .supervision {
    font-size: inherit;
  }

  .recipe-list {
    margin-top: 1rem;
  }

/* ################################
   events
   ################################ */

  .event-section {
    margin: 3rem auto;
  }

  .event-section+.event-section {
    padding-top: 2rem;
  }

  .event-section .image {
    margin: 1rem auto;
    text-align: center;
  }

}

/* ################################################################
   amazake
   ############################################################### */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   -767px
   mobile
   @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

@media screen and (max-width: 767px) {
  .event-section--amazake .image {
    max-width: 200px;
    margin: 1rem auto 0;
    padding-right: 40px;
  }
}