@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0; }

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none; }

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */ }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible; }

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em; }

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */ }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto; }

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */ }

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */ }

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block; }

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item; }

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none; }

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none; }

/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use colo variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name:
Author:

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3; }

.txt-left, .text-left {
  text-align: left; }

.txt-right, .text-right {
  text-align: right; }

.txt-center, .text-center {
  text-align: center; }

.midashi-font {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }

.title-font {
  font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }

.nav-font {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }

/******************************************************************
Site Name:
Author:

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/******************************************************************
Site Name:
Author:

Stylesheet: Alert Styles

If you want to use these alerts in your design, you can. If not,
you can just remove this stylesheet.

******************************************************************/
.alert-help, .alert-info, .alert-error, .alert-success {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid; }

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f; }

.alert-info {
  border-color: #bfe4f4;
  background: #d5edf8; }

.alert-error {
  border-color: #f8cdce;
  background: #fbe3e4; }

.alert-success {
  border-color: #deeaae;
  background: #e6efc2; }

/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

Buttons are a pretty important part of your site's style, so it's
important to have a consistent baseline for them. Use this stylesheet
to create all kinds of buttons.

Helpful Links:
http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

******************************************************************/
/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
.base-btn, .base-btn-small, .circle-btn, .base-btn-icn {
  display: inline-block;
  position: relative;
  z-index: 3;
  background: #868B90;
  color: #fff;
  border-radius: 4px;
  border: 0;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out; }
  .base-btn:hover, .base-btn-small:hover, .circle-btn:hover, .base-btn-icn:hover, .base-btn:focus, .base-btn-small:focus, .circle-btn:focus, .base-btn-icn:focus {
    text-decoration: none;
    outline: none; }
  .base-btn:active, .base-btn-small:active, .circle-btn:active, .base-btn-icn:active {
    top: 1px; }

.base-btn {
  width: 100%;
  max-width: 240px;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  margin: 10px auto 0;
  display: block;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none !important; }
  .base-btn.bg-red {
    background: #EF3340;
    color: #fff;
    max-width: 320px; }
  .base-btn .fab, .base-btn .fas {
    padding-left: 10px;
    font-weight: bold; }
    .base-btn .fab.icn-right, .base-btn .fas.icn-right {
      position: absolute;
      right: 10px; }
  .base-btn:hover, .base-btn:focus {
    opacity: .8; }

.base-btn-small {
  background: #595C5F;
  font-size: 14px;
  width: 145px;
  height: 40px;
  line-height: 40px; }
  .base-btn-small.bg-red {
    background: #EF3340;
    color: #fff; }
  .base-btn-small.bg-yellow {
    background: #FAF4ED;
    color: #fff; }
  .base-btn-small img {
    margin-left: 15px;
    height: 15px; }
  .base-btn-small .fab, .base-btn-small .fas {
    padding-left: 10px;
    font-weight: bold; }
    .base-btn-small .fab.icn-right, .base-btn-small .fas.icn-right {
      position: absolute;
      right: 10px; }
  .base-btn-small:hover, .base-btn-small:focus {
    opacity: .8; }

.circle-btn {
  width: 100%;
  max-width: 310px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  border-radius: 60px;
  background: #595C5F; }
  .circle-btn.bg-red {
    background: #EF3340;
    color: #fff;
    max-width: 320px; }
  .circle-btn.xs {
    max-width: 130px; }
    .circle-btn.xs img {
      margin-left: 0px; }
  .circle-btn .fab, .circle-btn .fas {
    padding-left: 10px;
    font-weight: bold; }
    .circle-btn .fab.icn-right, .circle-btn .fas.icn-right {
      position: absolute;
      right: 10px; }
  .circle-btn img {
    margin-left: 15px; }
  .circle-btn:hover, .circle-btn:focus {
    opacity: .8; }

.base-btn-icn {
  font-size: 18px;
  text-align: center;
  color: #FAF4ED;
  font-weight: 700;
  line-height: 1;
  border-radius: 100px;
  padding: 0 40px 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: auto; }
  .base-btn-icn a {
    display: block; }
  .base-btn-icn .fab, .base-btn-icn .fas {
    padding-left: 0px;
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    right: 30px;
    top: 20px; }
  .base-btn-icn:hover, .base-btn-icn:focus {
    opacity: .85;
    color: #FAF4ED; }
  .base-btn-icn.disabled {
    pointer-events: none; }
    .base-btn-icn.disabled:hover, .base-btn-icn.disabled:focus {
      opacity: 1;
      color: #FAF4ED; }

/*********************
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*********************/
/*********************
GENERAL STYLES
*********************/
* {
  box-sizing: border-box; }

body {
  font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
  font-size: 100%;
  line-height: 1.75;
  color: #222222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
  overflow-wrap: break-word; }

/*********************
LAYOUT & GRID STYLES
*********************/
.wrap {
  width: min(90%, 1200px);
  margin: auto; }

.w800 {
  width: min(100%, 800px);
  margin: auto; }

.wrap-full {
  width: 100%;
  margin: 0 auto;
  padding: 0; }

/*********************
BASIC STYLES
*********************/
a {
  color: #222222;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus {
    opacity: .8;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out; }
  a:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out; }

img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
  width: auto;
  display: inline-block; }

.serif {
  font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }

.sans-serif {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }

/******************************************************************
H1, H2, H3, H4, H5 STYLES
******************************************************************/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  line-height: 1.5;
  letter-spacing: .015em; }
  h1.serif, .h1.serif, h2.serif, .h2.serif, h3.serif, .h3.serif, h4.serif, .h4.serif, h5.serif, .h5.serif {
    font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }

h1, .h1 {
  font-size: clamp(32px, 3.5vw, 42px);
  line-height: 1.25; }

h1 small, h1 .small, .h1 small, .h1 .small {
  font-size: clamp(18px, 2vw, 24px);
  display: block;
  letter-spacing: normal;
  margin: 10px auto;
  font-weight: 400; }

h2, .h2 {
  font-size: clamp(28px, 3.333333vw, 40px);
  line-height: 1.25; }

h2 small, h2 .small, .h2 small, .h2 .small {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: normal; }

h3, .h3 {
  font-size: clamp(24px, 2.3333333vw, 28px); }

h3 small, h3 .small, .h3 small, .h3 .small {
  font-size: clamp(16px, 1.5vw, 18px);
  display: block;
  margin-bottom: 5px;
  font-weight: 400;
  letter-spacing: normal; }

h4, .h4 {
  font-size: clamp(16px, 1.5vw, 18px); }

h5, .h5 {
  font-size: clamp(14px, 1.33333vw, 16px);
  letter-spacing: normal;
  font-weight: 400; }

/*p*/
p {
  margin: 0 auto 1em; }

/*display*/
.sp {
  display: block; }

.pc {
  display: none; }

.header {
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 11;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: #897655 solid 12px; }
  .header .howto {
    background: #595C5F;
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    line-height: 1.25;
    margin-top: 12px;
    border-top: 1px solid #fff; }

.fixed {
  position: fixed;
  top: 0px; }

.nav-area {
  position: relative;
  z-index: 20;
  width: min(90%, 1200px);
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*logoarea*/
  /*sponcer*/ }
  .nav-area .logoarea {
    padding: 0px 0px 0px 40px;
    display: flex;
    flex-direction: column;
    width: 75%; }
    .nav-area .logoarea h1, .nav-area .logoarea .h1 {
      line-height: 0;
      font-size: 0;
      text-align: left; }
      .nav-area .logoarea h1 img, .nav-area .logoarea .h1 img {
        width: 100%;
        max-width: 245px; }
    .nav-area .logoarea .caption {
      font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
      font-size: 11px;
      margin-bottom: .25em;
      font-feature-settings: "palt";
      color: #897655;
      text-align: left;
      line-height: 1.25; }
  .nav-area .sponcer {
    width: 25%;
    padding-left: 15px;
    padding-top: 5px;
    font-size: 9px; }
    .nav-area .sponcer img {
      width: 100%;
      max-width: 55px;
      height: auto;
      margin-top: .75em; }

/*nav-area*/
.menu-toggle-container {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
  .menu-toggle-container ul {
    list-style: none;
    margin: 0 auto; }

.nav-area-nav {
  display: none; }
  .nav-area-nav ul {
    list-style: none;
    margin: 0 auto; }

.toggle-nav {
  display: none;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 15;
  margin: 0;
  padding: 70px 0px 0px;
  background: #897655;
  /*footer*/ }
  .toggle-nav ul {
    list-style: none;
    width: 85%;
    margin: 0 auto;
    padding: 0; }
    .toggle-nav ul li {
      padding: 0px 0;
      border-bottom: 1px #fff solid;
      text-align: center; }
      .toggle-nav ul li.langage {
        border-bottom: 0px #fff solid; }
      .toggle-nav ul li.langage a {
        color: #fff;
        font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
        font-size: 14px;
        background: #868B90;
        padding: 2px 8px;
        border-radius: 20px;
        margin: 20px auto 0;
        width: 100px;
        display: inline-block;
        position: relative;
        text-decoration: none; }
        .toggle-nav ul li.langage a:hover {
          cursor: pointer;
          background: #fefefe; }
      .toggle-nav ul li.declick {
        border-bottom: 0px #fff solid; }
        .toggle-nav ul li.declick a {
          pointer-events: none;
          color: #fefefe; }
      .toggle-nav ul li a {
        display: block;
        width: 100%;
        color: #fff;
        text-decoration: none;
        font-weight: 400;
        padding: 10px 0; }
        .toggle-nav ul li a:hover, .toggle-nav ul li a:focus {
          opacity: .85; }
  .toggle-nav .footer {
    clear: both;
    padding: 0px 0 20px;
    margin-top: 0px;
    width: 100%;
    background: none;
    /*sns-nav*/ }
    .toggle-nav .footer .sns-nav {
      list-style: none;
      margin: 0;
      margin: 20px auto;
      display: flex;
      justify-content: center; }
      .toggle-nav .footer .sns-nav li {
        padding: 0 15px;
        text-align: center;
        border-bottom: 0; }
        .toggle-nav .footer .sns-nav li a {
          display: block;
          color: #fff;
          padding: 0px;
          margin: 0px;
          font-size: 30px;
          font-weight: bold; }
  .toggle-nav .footer-logo {
    text-align: center;
    position: absolute;
    bottom: 20px;
    width: 100%; }
    .toggle-nav .footer-logo img {
      width: 100%;
      max-width: 80px; }

/*toggle-nav*/
.toggle {
  position: fixed;
  left: 15px;
  top: 10px;
  color: #868B90;
  z-index: 16;
  width: 40px;
  /*menu-trigger*/ }
  .toggle .menu-trigger {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: relative;
    width: 30px;
    height: 20px;
    margin-top: 15px; }
    .toggle .menu-trigger span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #868B90;
      border-radius: 0px; }
      .toggle .menu-trigger span:nth-of-type(1) {
        top: 0; }
      .toggle .menu-trigger span:nth-of-type(2) {
        top: 9px; }
      .toggle .menu-trigger span:nth-of-type(3) {
        bottom: 0px; }
      .toggle .menu-trigger span:nth-of-type(2)::after {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 1px;
        border-radius: 0px;
        transition: all .4s; }
    .toggle .menu-trigger.active span:nth-of-type(1) {
      transform: translateY(20px) scale(0); }
    .toggle .menu-trigger.active span:nth-of-type(2) {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      background-color: #fff; }
      .toggle .menu-trigger.active span:nth-of-type(2)::after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        background-color: #fff; }
    .toggle .menu-trigger.active span:nth-of-type(3) {
      transform: translateY(-20px) scale(0); }
    .toggle .menu-trigger.border-white span {
      background-color: #fff; }

#global-fix-nav.btn-on {
  display: block;
  transition: 1s ease-in-out; }

.fix-nav-area {
  position: fixed;
  right: 10px;
  top: 60px;
  color: #868B90;
  z-index: 12;
  width: 40px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .fix-nav-area.border-white {
    color: #fff; }
    .fix-nav-area.border-white .sns-nav li {
      text-align: center; }
    .fix-nav-area.border-white .sns-nav a {
      color: #fff; }
  .fix-nav-area .text-followus {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 2.8;
    writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    color: #F2F2F2; }
  .fix-nav-area .sns-nav {
    list-style: none;
    margin: 20px auto;
    padding: 0; }
    .fix-nav-area .sns-nav li {
      text-align: center; }
    .fix-nav-area .sns-nav a {
      font-size: 16px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 20px;
      display: block;
      color: #868B90; }
      .fix-nav-area .sns-nav a:hover {
        opacity: .75; }

/*fix-nav-area*/
#sp-top-area {
  display: block; }

#pc-top-area {
  display: none; }

.top-area {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-top: 133px;
  /*new-words-title*/ }
  .top-area .new-words-title {
    padding: 1em 0;
    display: flex;
    justify-content: space-between;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
    .top-area .new-words-title.pc {
      display: none; }
    .top-area .new-words-title.sp {
      display: flex; }
    .top-area .new-words-title .title {
      font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }
      .top-area .new-words-title .title label {
        background: #897655;
        padding: 1px 6px 2px;
        margin-left: 10px;
        border-radius: 2px;
        color: #fff;
        font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
        font-size: 14px; }
    .top-area .new-words-title .date {
      font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }

/*top-area*/
.photoby {
  text-align: right;
  font-size: 12px;
  color: #868B90; }

dl.interview {
  padding: 0;
  margin: 0;
  /*name*/
  /*text*/ }
  dl.interview dt {
    position: relative; }
    dl.interview dt .photo {
      position: relative;
      background-color: #000;
      width: 100%;
      height: 0;
      padding-bottom: 66.66%;
      background-size: cover;
      background-position: center center; }
    dl.interview dt a:hover .photo {
      opacity: .85;
      transition: 0.3s ease-in-out; }
    dl.interview dt .name-en {
      position: absolute;
      color: #fff;
      bottom: 20px;
      left: 20px;
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
      line-height: 1.25;
      font-size: clamp(20px, 3.3333333vw, 40px); }
  dl.interview dd {
    margin: 1em 0; }
    dl.interview dd .left-box img.size-full, dl.interview dd .left-box img.alginone {
      margin-top: 1em; }
    dl.interview dd .right-box #howto {
      display: block;
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
      dl.interview dd .right-box #howto header h3 {
        font-size: 20px;
        margin-top: .25em;
        margin-bottom: .25em;
        line-height: 1.75em;
        text-align: center; }
    dl.interview dd .right-box #short-profile {
      display: block; }
      dl.interview dd .right-box #short-profile header h3 {
        font-size: 20px;
        margin-top: .25em;
        margin-bottom: .25em;
        line-height: 1.75em;
        text-align: center; }
      dl.interview dd .right-box #short-profile dl.profile {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
        dl.interview dd .right-box #short-profile dl.profile dt {
          color: #897655;
          font-size: 13px;
          width: 30%;
          padding: 0; }
        dl.interview dd .right-box #short-profile dl.profile dd {
          font-size: 13px;
          width: 70%;
          padding: 0 0 0 10px;
          margin: 0; }
          dl.interview dd .right-box #short-profile dl.profile dd.full {
            width: 100%;
            padding: 0 0 0 0px;
            text-align: justify; }
    dl.interview dd .right-box #category {
      display: none; }
    dl.interview dd .right-box ul.category {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      dl.interview dd .right-box ul.category li {
        width: 48%;
        position: relative;
        background: #000;
        margin-bottom: .75em; }
        dl.interview dd .right-box ul.category li:nth-child(3n+1) {
          background: #897655; }
        dl.interview dd .right-box ul.category li a {
          text-decoration: none;
          color: #fff;
          position: relative; }
          dl.interview dd .right-box ul.category li a.dis {
            pointer-events: none; }
            dl.interview dd .right-box ul.category li a.dis:hover {
              opacity: 1; }
          dl.interview dd .right-box ul.category li a img {
            position: relative;
            height: 100%;
            width: auto;
            object-fit: cover; }
          dl.interview dd .right-box ul.category li a .catname {
            position: absolute;
            top: -220%;
            left: 10px;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
            font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
            dl.interview dd .right-box ul.category li a .catname small {
              font-size: 12px;
              display: block;
              padding-left: 1em;
              color: #F2F2F2; }
    dl.interview dd .right-box #inpressive-pc {
      display: none; }
    dl.interview dd .right-box .area .aboutus {
      background: #EAE5DF;
      padding: 1em 1em;
      font-size: 12px;
      font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif; }
    dl.interview dd .right-box .area .howto {
      background: #595C5F;
      color: #fff;
      padding: 1em 1em;
      font-size: 14px;
      text-align: justify; }
  dl.interview h2 {
    font-size: clamp(24px, 4.6875vw, 36px);
    color: #897655;
    font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
    margin-bottom: .5em;
    line-height: 1.25;
    font-feature-settings: "palt"; }
  dl.interview .name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #F2F2F2;
    padding-bottom: .75em;
    margin-bottom: 1em; }
    dl.interview .name .entry-title {
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
      font-size: clamp(24px, 3.33333333vw, 40px);
      line-height: 1.15;
      color: #000;
      margin: 0 5px 0 0;
      letter-spacing: .15em;
      width: 85%; }
      dl.interview .name .entry-title small {
        display: inline-block;
        font-size: clamp(12px, 1.40625vw, 18px);
        letter-spacing: normal;
        vertical-align: middle; }
    dl.interview .name .cat {
      border: 1px solid #897655;
      padding: 4px 6px 3px;
      line-height: 1;
      font-size: 14px; }
      dl.interview .name .cat a, dl.interview .name .cat a:link {
        color: #897655;
        text-decoration: none; }
  dl.interview dd {
    font-size: clamp(16px, 1.5625vw, 20px); }
    dl.interview dd section {
      margin: 1em auto; }
    dl.interview dd h3, dl.interview dd .h3 {
      color: #897655;
      font-size: clamp(14px, 1.25vw, 16px);
      margin-bottom: .75em;
      margin-top: 2em;
      line-height: 1.75em; }
    dl.interview dd .highlight {
      font-weight: 700;
      padding: 0 10px;
      text-align: justify;
      font-size: clamp(15px, 1.40625vw, 18px); }

/*dl*/
/**************
header
***************/
article {
  position: relative; }

header {
  text-align: center;
  position: relative;
  z-index: 1; }

/*****
btn
*****/
.btn-more {
  margin: 1.5em 0;
  text-align: center; }
  .btn-more a {
    display: block;
    padding: 25px 10px;
    background: #000;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    text-decoration: none;
    box-shadow: 0 2px 2px #868B90; }
  .btn-more img {
    height: 18px;
    width: auto;
    display: inline-block;
    vertical-align: middle; }
  .btn-more.xs {
    margin: .25em 0;
    text-align: right; }
    .btn-more.xs a {
      padding: 2px 10px 4px;
      background: #000;
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      line-height: 1;
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
      text-decoration: none; }

#content.top-padding {
  padding-top: 143px; }
#content.top-padding-single {
  padding-top: 149px; }
#content.top-padding-page {
  padding-top: 200px; }

/********
area
********/
.area {
  padding: 30px 0 30px; }
  .area .btn-area {
    margin: 50px auto -20px;
    text-align: center; }
  .area header h3 {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: .25em;
    line-height: 1.25; }
    .area header h3 span {
      width: 100px;
      height: 5px;
      background: #897655;
      display: block;
      margin: .5em auto 1em;
      letter-spacing: .05em; }
    .area header h3 img {
      width: 200px;
      margin: 0 auto; }
  .area header p {
    margin-bottom: 1em; }
  .area.bg-brown {
    background: #EAE5DF; }
  .area.bg-light-gray {
    background: #F2F2F2; }
  .area .aboutus {
    background: #EAE5DF;
    padding: 1.5em 1em; }
  .area ul.pickup {
    list-style: none;
    margin: 0 auto;
    padding: 0; }
    .area ul.pickup li {
      position: relative;
      margin-bottom: 1em; }
      .area ul.pickup li:last-child {
        margin-bottom: 0; }
      .area ul.pickup li .photo {
        position: relative;
        background-color: #ccc;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        background-size: cover;
        background-position: center; }
      .area ul.pickup li .name-en {
        font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
        line-height: 1.25;
        font-size: 20px;
        font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
        color: #897655;
        margin-top: .5em; }
      .area ul.pickup li a {
        text-decoration: none; }
        .area ul.pickup li a .name-en {
          font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
          line-height: 1.25;
          font-size: 20px;
          font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
          color: #897655;
          margin-top: .5em; }
      .area ul.pickup li a:hover .photo {
        opacity: .85;
        transition: 0.3s ease-in-out; }
  .area .comingsoon {
    background: #F2F2F2;
    color: #868B90;
    height: 20vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
  .area .SorryNoResults {
    background: #F2F2F2;
    color: #868B90;
    height: 20vw;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
  .area ul.latest {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*dl*/ }
    .area ul.latest li {
      margin-bottom: 1em;
      width: 48%; }
    .area ul.latest a {
      text-decoration: none; }
    .area ul.latest a:hover .photo {
      opacity: .85;
      transition: 0.3s ease-in-out; }
    .area ul.latest dl {
      padding: 0;
      margin: 0;
      /*dd*/ }
      .area ul.latest dl dt {
        position: relative; }
        .area ul.latest dl dt .photo {
          position: relative;
          background-color: #ccc;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          background-size: cover;
          background-position: center; }
      .area ul.latest dl dd {
        margin: .75em 0 0;
        /*name*/ }
        .area ul.latest dl dd h2 {
          font-size: clamp(16px, 1.833333vw, 22px);
          color: #897655;
          font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
          margin-bottom: .5em;
          line-height: 1.5;
          font-feature-settings: "palt"; }
        .area ul.latest dl dd .name {
          margin-bottom: .5em; }
          .area ul.latest dl dd .name .entry-title {
            font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
            line-height: 1.15;
            font-size: clamp(16px, 1.5vw, 18px);
            letter-spacing: .15em; }
            .area ul.latest dl dd .name .entry-title small {
              display: inline-block;
              font-size: clamp(12px, 1.09375vw, 14px);
              letter-spacing: normal;
              vertical-align: middle; }
    .area ul.latest.search-loop {
      justify-content: space-between;
      /*dl*/ }
      .area ul.latest.search-loop li {
        margin-bottom: 1em;
        width: 48%; }
      .area ul.latest.search-loop a {
        text-decoration: none; }
      .area ul.latest.search-loop a:hover .photo {
        opacity: .85;
        transition: 0.3s ease-in-out; }
      .area ul.latest.search-loop dl {
        padding: 0;
        margin: 0;
        /*dd*/ }
        .area ul.latest.search-loop dl dt {
          position: relative;
          width: clamp(100%, 2.929vw, 30%);
          margin-bottom: 10px; }
          .area ul.latest.search-loop dl dt .photo {
            position: relative;
            background-color: #ccc;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            background-size: cover;
            background-position: center; }
        .area ul.latest.search-loop dl dd {
          margin: 0;
          width: clamp(100%, 6.835vw, 70%);
          /*name*/ }
          .area ul.latest.search-loop dl dd h2 {
            font-size: clamp(18px, 1.833333vw, 22px);
            color: #897655;
            font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
            margin-bottom: .5em;
            line-height: 1.5;
            font-feature-settings: "palt";
            text-align: justify; }
          .area ul.latest.search-loop dl dd p {
            font-size: clamp(14px, 1.3333vw, 16px); }
          .area ul.latest.search-loop dl dd .name {
            margin-bottom: .5em; }
            .area ul.latest.search-loop dl dd .name .entry-title {
              font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
              line-height: 1.15;
              font-size: clamp(16px, 1.5vw, 18px);
              letter-spacing: .15em; }
              .area ul.latest.search-loop dl dd .name .entry-title small {
                display: inline-block;
                font-size: clamp(12px, 1.09375vw, 14px);
                letter-spacing: normal;
                vertical-align: middle; }
          .area ul.latest.search-loop dl dd .entry-content {
            font-family: san-serif;
            line-height: 1.75;
            padding-bottom: 10px;
            text-align: justify; }
          .area ul.latest.search-loop dl dd .article-footer {
            font-family: san-serif;
            font-size: 14px;
            color: #868B90; }
  .area#inpressive-sp {
    display: block; }
  .area section {
    padding-bottom: 30px;
    clear: both; }
    .area section.last {
      padding-bottom: 0; }

/*area*/
.archive-title, .page-title {
  margin-bottom: 1.5em; }

/********
blockquote
********/
blockquote {
  position: relative;
  padding: 10px 15px 10px 60px;
  box-sizing: border-box;
  font-style: italic;
  background: #efefef;
  color: #555;
  margin: 20px auto 40px;
  width: 80%; }

blockquote:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 15px;
  content: "\f10d";
  font-family: "Font Awesome 5 Free";
  color: #cfcfcf;
  font-size: 30px;
  line-height: 1;
  font-weight: 900; }

blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7; }

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em; }

/***entry-content***/
.entry-content {
  padding: 0;
  line-height: 2; }
  .entry-content h2, .entry-content .h2 {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 5px solid #868B90; }
  .entry-content h3 {
    margin-bottom: 25px; }
    .entry-content h3 span {
      font-weight: normal;
      font-size: 1rem; }
  .entry-content section {
    margin-bottom: 25px; }
    .entry-content section:last-child {
      margin-bottom: 0; }
  .entry-content p {
    margin-top: 0;
    margin-bottom: 25px; }
    .entry-content p:last-child {
      margin-bottom: 0; }
  .entry-content .green {
    color: #000101; }
  .entry-content .harf {
    display: flex;
    flex-flow: column;
    margin-bottom: 25px; }
    .entry-content .harf > div {
      flex: 1; }
  .entry-content img {
    max-width: 100%;
    height: auto;
    margin: auto;
    margin-bottom: 25px; }
  .entry-content a {
    text-decoration: underline; }
  .entry-content ul, .entry-content ol, .entry-content table, .entry-content dl {
    margin: 1rem auto;
    line-height: 1.75; }
  .entry-content table ul {
    margin: 0 auto; }
  .entry-content dt {
    font-weight: 700; }
  .entry-content dd {
    margin-bottom: 10px; }
  .entry-content ul {
    position: relative;
    margin: 0 0 15px 20px;
    padding: 0; }
    .entry-content ul li {
      list-style-type: disc;
      margin-bottom: 15px;
      padding-left: .25em; }
  .entry-content ol {
    position: relative;
    margin: 0 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ol_li; }
    .entry-content ol li {
      padding-left: 1rem;
      text-indent: -1rem;
      margin-bottom: 10px; }
      .entry-content ol li:before {
        counter-increment: ol_li;
        /* ol_li カウンタの値に1加える */
        content: counter(ol_li) " )";
        /* before擬似要素のcontentで出力 */
        color: #868B90;
        /* 色を変更 */ }
    .entry-content ol.maru {
      position: relative;
      margin: 0;
      padding: 0; }
      .entry-content ol.maru li {
        list-style: none;
        list-style-position: outside;
        margin-bottom: 15px;
        padding-left: 1.25em; }
        .entry-content ol.maru li span {
          position: absolute;
          left: 0;
          margin: 0; }
  .entry-content .gallery {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-end; }
    .entry-content .gallery dt {
      font-weight: 700; }
    .entry-content .gallery dd {
      margin-bottom: 10px; }
  .entry-content .gallery-caption {
    color: #222;
    font-size: 14px;
    margin: 0 0 10px;
    text-align: center; }
  .entry-content .alignleft, .entry-content img.alignleft {
    float: left; }
  .entry-content .alignright, .entry-content img.alignright {
    float: right; }
  .entry-content .aligncenter, .entry-content img.aligncenter {
    display: block;
    border-radius: 10px;
    margin: auto; }
  .entry-content .size-auto, .entry-content .size-full, .entry-content .size-large, .entry-content .size-medium, .entry-content .size-thumbnail {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: #000;
    color: #ccc;
    font-size: 0.9em;
    padding: 1.5em;
    margin: 0 0 1.5em;
    border-radius: 3px; }

/***slick****/
/*==================================================
スライダーのためのcss
===================================*/
.slider, .slider02 {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: #fff;
  border: solid 1px #897655; }
  .slider li, .slider02 li {
    margin: 0 15px;
    /*dl*/ }
    .slider li a, .slider li a:link, .slider02 li a, .slider02 li a:link {
      text-decoration: none;
      color: #897655; }
    .slider li dl, .slider02 li dl {
      margin: 0 auto;
      position: relative;
      align-self: center;
      padding: 30px 20px;
      height: 250px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center; }
      .slider li dl dt h2, .slider02 li dl dt h2 {
        font-size: 20px;
        color: #897655;
        font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
        margin-bottom: 1em;
        line-height: 1.25; }
      .slider li dl dd, .slider02 li dl dd {
        padding: 0;
        margin: 0;
        /*name*/ }
        .slider li dl dd .name, .slider02 li dl dd .name {
          border-bottom: 0;
          margin: 0;
          white-space: nowrap; }
          .slider li dl dd .name .entry-title, .slider02 li dl dd .name .entry-title {
            font-size: 16px;
            font-weight: bold;
            font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
            line-height: 1.15;
            color: #897655; }
            .slider li dl dd .name .entry-title small, .slider02 li dl dd .name .entry-title small {
              display: block;
              margin-top: .25em;
              font-size: 14px; }
  .slider .slick-slide, .slider02 .slick-slide {
    height: auto; }

/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  /*絶対配置にする*/
  z-index: 50;
  top: 42%;
  cursor: pointer;
  /*マウスカーソルを指マークに*/
  outline: none;
  /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666;
  /*矢印の色*/
  border-right: 2px solid #666;
  /*矢印の色*/
  height: 15px;
  width: 15px; }

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 5%;
  transform: rotate(-135deg); }

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 5%;
  transform: rotate(45deg); }

/*ドットナビゲーションの設定*/
.dots, .dots02 {
  position: relative;
  text-align: center;
  margin: .5em auto; }
  .dots ul, .dots02 ul {
    margin: 0 auto;
    padding: 0;
    list-style: none; }
  .dots .slick-dots li, .dots02 .slick-dots li {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 8px;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    background: #868B90; }
  .dots .slick-dots li button, .dots02 .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 40px;
    height: 5x;
    padding: 0px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent; }
  .dots .slick-dots li.slick-active, .dots02 .slick-dots li.slick-active {
    background: #000; }

/***slick****/
.movie {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }
  .movie iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*google form*/
.send-voice-area {
  background: #EAE5DF;
  border: 1px solid #897655;
  padding: 1em 1em;
  font-size: 14px;
  text-align: justify;
  width: 100%;
  max-width: 500px;
  line-height: 1.5;
  margin: 1em auto 1.5em; }

.remodal {
  padding: 20px 10px !important; }

/**accordion**/
.accordion {
  margin: 3em auto; }

.toggle-ac {
  display: none; }

.option {
  position: relative;
  margin-bottom: 1em; }

.tt-voice,
.inner {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s; }

.tt-voice {
  border: solid 1px #ccc;
  padding: 1em;
  display: block;
  color: #333;
  font-weight: bold;
  font-size: clamp(16px, 1.33333vw, 18px); }

.tt-voice::after,
.tt-voice::before {
  content: "";
  position: absolute;
  right: 1.25em;
  top: 1.25em;
  width: 2px;
  height: 0.75em;
  background-color: #999;
  transition: all 0.3s; }

.tt-voice::after {
  transform: rotate(90deg); }

.inner {
  max-height: 0;
  overflow: hidden; }

.inner p {
  margin: 0;
  padding: 0em 1.25em 2em 1em;
  font-size: clamp(14px, 1.33333vw, 16px);
  line-height: 1.75;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; }
  .inner p strong {
    margin-bottom: .75em;
    font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
    font-size: clamp(16px, 1.33333vw, 18px); }

.toggle-ac:checked + .tt-voice + .inner {
  max-height: 500px;
  overflow-y: scroll;
  transition: all 1.5s; }

.toggle-ac:checked + .title::before {
  transform: rotate(90deg) !important; }

/*********
prev-next
**********/
.wp-prev-next {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
  margin: 40px auto 40px;
  padding: 20px 0px 20px;
  text-align: center;
  clear: both; }

.pagination {
  margin: 40px 0 0;
  font-size: 12px; }
  .pagination a {
    text-decoration: none; }

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center; }

.pagination .page-numbers {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 15px;
  color: #868B90;
  border-radius: 3px;
  box-shadow: 0 1px 1px #868B90;
  background: #fff; }

.pagination .current {
  padding: 10px 15px;
  background: #EAE5DF;
  color: #897655; }

.pagination .prev,
.pagination .next {
  background: transparent;
  box-shadow: none;
  color: #69a4db; }

.pagination .dots {
  background: transparent;
  box-shadow: none; }

.wp-prev-next {
  display: flex;
  justify-content: center;
  align-items: center; }
  .wp-prev-next div {
    width: 33.3333%;
    font-size: 20px;
    color: #868B90; }
  .wp-prev-next .left {
    text-align: left;
    padding-left: 0; }
  .wp-prev-next .center {
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    color: #000; }
  .wp-prev-next .right {
    text-align: right;
    padding-right: 0; }
  .wp-prev-next a {
    padding: 4px 10px;
    text-decoration: none;
    font-weight: 400; }
    .wp-prev-next a:hover, .wp-prev-next a:focus {
      color: #de2a49;
      text-decoration: none; }
    .wp-prev-next a:active {
      text-decoration: none; }

/***
SEARCH
***/
#searchform {
  position: relative; }
  #searchform #s-box {
    height: 62px;
    width: calc(100% - 60px);
    padding: 0 10px;
    left: 0;
    top: 0;
    border: solid 2px #eaeaea;
    outline: 0; }
  #searchform #s-btn-area {
    height: 60px;
    position: absolute;
    right: 0;
    top: 0;
    background: none;
    color: #666;
    border: none;
    font-size: 20px;
    outline: 0; }
  #searchform #s-btn {
    background-color: black;
    width: 60px;
    height: 60px;
    position: relative;
    right: 0px;
    bottom: 0px;
    font-size: 24px;
    color: #fff;
    line-height: 60px; }
    #searchform #s-btn:hover {
      cursor: pointer; }

/*searchForm*/
.search-tag {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 1.5em 0;
  padding: 0; }
  .search-tag li {
    background: #595C5F;
    margin: 0 1em 1em 0; }
    .search-tag li a {
      text-decoration: none;
      color: #fff;
      display: block;
      padding: .5em 1em; }
      .search-tag li a::before {
        content: '#';
        padding-right: 5px; }
      .search-tag li a:hover {
        background: #868B90; }
      .search-tag li a:active {
        top: 1px; }

/*********************
pagetop STYLES
*********************/
.topBtn {
  position: fixed;
  bottom: 0px;
  right: 10px;
  z-index: 13;
  width: 40px;
  font-size: 40px;
  text-align: center;
  line-height: 1.25;
  color: #F2F2F2; }
  .topBtn img {
    width: 20px; }
  .topBtn:hover {
    opacity: .85;
    cursor: pointer; }

/*********************
FOOTER STYLES
*********************/
.footer {
  clear: both;
  padding: 0px 0 40px;
  margin: 0px;
  background: #fff;
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  /*ul*/ }
  .footer ul {
    list-style: none;
    margin: 0 auto 40px;
    display: flex;
    justify-content: flex-end; }
    .footer ul.footer-nav {
      display: block;
      padding: 0; }
      .footer ul.footer-nav li a {
        display: block;
        color: #000;
        font-size: 14px;
        text-decoration: underline;
        text-align: center;
        padding: 10px; }
        .footer ul.footer-nav li a:hover {
          text-decoration: none; }
    .footer ul li a {
      display: block;
      color: #fff;
      font-size: 24px;
      padding: 5px 0 5px 20px;
      text-decoration: none; }
      .footer ul li a:hover {
        text-decoration: underline; }

.footer-nav {
  display: flex;
  flex-direction: column;
  text-align: center; }

.footer-logo {
  text-align: center;
  line-height: 1;
  margin: 0 auto 1.5em; }
  .footer-logo img {
    width: 100%;
    max-width: 100px;
    margin: 0 auto 1em; }

.copyright {
  line-height: 1.5;
  font-size: 14px;
  text-align: center; }

/*共通*/
.bg-red {
  background: #EF3340; }

.bg-blue {
  background: #1C75BC; }

.bg-gray {
  background: #868B90; }

.bg-meta-gray {
  background: #B3B8BD; }

.bg-light-gray {
  background: #F2F2F2; }

.bg-white {
  background: #fff; }

.bg-yellow {
  background: #FAF4ED; }

.bg-purple {
  background: #4C5B94; }

.bg-orange {
  background: #F9A638; }

.bg-gold {
  background: #897655; }

.bg-light-blue {
  background: #ddedfa; }

.txt-orange {
  color: #F9A638; }

.txt-red {
  color: #EF3340; }

.txt-blue {
  color: #1C75BC; }

.txt-black {
  color: #000; }

.txt-gray {
  color: #868B90; }

.txt-pink {
  color: #FF93A0; }

.txt-purple {
  color: #4C5B94; }

.txt-gold {
  color: #897655; }

.bg-white-half {
  background: rgba(255, 255, 255, 0.75); }

.w-n {
  font-weight: normal; }

.l-125 {
  line-height: 1.25; }

.l-14 {
  line-height: 1.4; }

.l-15 {
  line-height: 1.5; }

.l-175 {
  line-height: 1.75; }

.l-215 {
  line-height: 2.15; }

.ls-15 {
  letter-spacing: .15rem; }

.ls-25 {
  letter-spacing: .25rem; }

.p-0 {
  padding: 0 !important; }

.pt-0 {
  padding-top: 0 !important; }

.pb-0 {
  padding-bottom: 0 !important; }

.pr-0 {
  padding-right: 0 !important; }

.pl-0 {
  padding-left: 0 !important; }

.m-auto {
  margin: auto; }

.m-0 {
  margin: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mb-0 {
  margin-bottom: 0 !important; }

.mr-0 {
  margin-right: 0 !important; }

.ml-0 {
  margin-left: 0 !important; }

.p-05 {
  padding: 5px !important; }

.pt-05 {
  padding-top: 5px !important; }

.pb-05 {
  padding-bottom: 5px !important; }

.pr-05 {
  padding-right: 5px !important; }

.pl-05 {
  padding-left: 5px !important; }

.m-05 {
  margin: 5px !important; }

.mt-05 {
  margin-top: 5px !important; }

.mb-05 {
  margin-bottom: 5px !important; }

.mr-05 {
  margin-right: 5px !important; }

.ml-05 {
  margin-left: 5px !important; }

.p-1 {
  padding: 10px; }

.pt-1 {
  padding-top: 10px; }

.pb-1 {
  padding-bottom: 10px; }

.pr-1 {
  padding-right: 10px; }

.pl-1 {
  padding-left: 10px; }

.m-1 {
  margin: 10px; }

.mt-1 {
  margin-top: 10px; }

.mb-1 {
  margin-bottom: 10px; }

.mr-1 {
  margin-right: 10px; }

.ml-1 {
  margin-left: 10px; }

.p-15 {
  padding: 15px; }

.pt-15 {
  padding-top: 15px; }

.pb-15 {
  padding-bottom: 15px; }

.pr-15 {
  padding-right: 15px; }

.pl-15 {
  padding-left: 15px; }

.m-15 {
  margin: 15px; }

.mt-15 {
  margin-top: 15px; }

.mb-15 {
  margin-bottom: 15px; }

.mr-15 {
  margin-right: 15px; }

.ml-15 {
  margin-left: 15px; }

.p-2 {
  padding: 20px; }

.pt-2 {
  padding-top: 20px; }

.pb-2 {
  padding-bottom: 20px; }

.pr-2 {
  padding-right: 20px; }

.pl-2 {
  padding-left: 20px; }

.m-2 {
  margin: 20px; }

.mt-2 {
  margin-top: 20px; }

.mb-2 {
  margin-bottom: 20px; }

.mr-2 {
  margin-right: 20px; }

.ml-2 {
  margin-left: 20px; }

.p-3 {
  padding: 30px; }

.mb-3 {
  margin-bottom: 30px; }

.p-4 {
  padding: 40px; }

.mt-4 {
  margin-top: 40px !important; }

.mb-4 {
  margin-bottom: 40px; }

.mt-8 {
  margin-top: 80px; }

.mb-8 {
  margin-bottom: 80px; }

.mt-12 {
  margin-top: 120px; }

.mb-12 {
  margin-bottom: 120px; }

.w-600 {
  max-width: 600px;
  margin: auto; }

small, .small {
  font-size: .875rem; }

large, .large {
  font-size: .9rem; }

.inView, .inViewright, .inViewleft, .inViewfade {
  opacity: 0; }

.add-class {
  display: none; }

.aname {
  padding-top: 100px !important;
  margin-top: -100px !important; }

/*共通end*/
/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*********************/
/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media print, screen and (min-width: 768px) {
  /*******
  display
  *******/
  .sp {
    display: block; }

  .pc {
    display: none; }

  /*********************
  NAVIGATION STYLES
  *********************/
  .toggle-nav {
    width: 50%; }

  /********
  area
  ********/
  .area {
    padding: 40px 0 40px; }
    .area.bg-brown {
      background: #EAE5DF; }
    .area.bg-light-gray {
      background: #F2F2F2; }
    .area .aboutus {
      background: #EAE5DF;
      padding: 1.5em 1em; }
    .area ul.latest {
      justify-content: center; }
      .area ul.latest li {
        margin-bottom: 1em;
        width: 30%;
        padding: 0 1.666666665%; }
      .area ul.latest.search-loop {
        justify-content: space-between; }
        .area ul.latest.search-loop li {
          width: 30%;
          padding: 0 1.666666665%; }
    .area section {
      padding-bottom: 40px;
      clear: both; }
      .area section.last {
        padding-bottom: 0; }

  /*area*/
  .profile-flex {
    display: flex;
    justify-content: space-between; }
    .profile-flex header {
      flex: .5;
      margin-right: 1em; }
    .profile-flex div {
      flex: 2.5; } }
/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1024px) {
  .fix-nav-area {
    right: 20px;
    top: 120px; }

  .topBtn {
    right: 20px; }

  .sp {
    display: none; }

  .pc {
    display: block; }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 11;
    border-bottom: 0; }
    .header .howto {
      height: 30px;
      background: #595C5F;
      color: #fff;
      font-size: 13px;
      line-height: 20px;
      border-top: 1px solid #fff;
      margin-top: 0; }

  .nav-area {
    position: relative;
    z-index: 20;
    height: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .nav-area .logoarea {
      padding: 0px 0px 0px 0px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-end;
      width: 80%; }
      .nav-area .logoarea h1, .nav-area .logoarea .h1 {
        line-height: 0;
        font-size: 0;
        width: 80%; }
        .nav-area .logoarea h1 img, .nav-area .logoarea .h1 img {
          width: 100%;
          max-width: 330px; }
      .nav-area .logoarea .caption {
        font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
        font-size: 16px;
        padding-top: 5px;
        margin-left: 20px;
        width: 100%;
        color: #897655; }
    .nav-area .sponcer {
      width: 20%;
      padding-left: 20px;
      padding-top: 5px;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      font-size: 10px; }
      .nav-area .sponcer div {
        width: 100%; }
      .nav-area .sponcer img {
        width: 100%;
        max-width: 60px;
        height: auto;
        margin: 0; }

  /*nav-area*/
  .nav-area-nav {
    display: block;
    background: #897655; }

  .menu-toggle-container {
    width: min(90%, 1200px);
    display: block;
    margin: auto; }
    .menu-toggle-container ul {
      display: flex;
      justify-content: center;
      margin: 0 auto;
      padding: 0; }
      .menu-toggle-container ul li {
        margin: 0 20px; }
        .menu-toggle-container ul li.current-menu-item a::after {
          position: absolute;
          content: '';
          bottom: 0;
          left: 0;
          width: 0;
          height: 4px;
          background: #fff;
          width: 100%; }
        .menu-toggle-container ul li a {
          font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
          font-size: 15px;
          color: #fff;
          font-weight: 600;
          padding: 5px 0;
          display: inline-block;
          position: relative;
          text-decoration: none; }
          .menu-toggle-container ul li a::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 0;
            height: 4px;
            background: #fff;
            transition: all 0.3s ease 0s; }
          .menu-toggle-container ul li a:hover::after {
            width: 100%; }
        .menu-toggle-container ul li.langage a {
          color: #fff;
          font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
          font-size: 14px;
          background: #EAE5DF;
          padding: 2px 8px;
          border-radius: 20px;
          margin: auto;
          width: auto;
          display: inline-block;
          position: relative;
          text-decoration: none; }
          .menu-toggle-container ul li.langage a::after {
            position: absolute;
            content: '';
            bottom: 0;
            left: 0;
            width: 0;
            height: 0px;
            background: none; }
          .menu-toggle-container ul li.langage a:hover {
            cursor: pointer;
            background: #fefefe; }
        .menu-toggle-container ul li.declick {
          border-bottom: 0px #fff solid; }
          .menu-toggle-container ul li.declick a {
            color: #fefefe;
            pointer-events: none;
            font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
            font-size: 12px;
            padding-top: 10px; }
            .menu-toggle-container ul li.declick a:hover {
              pointer-events: none; }
              .menu-toggle-container ul li.declick a:hover::after {
                width: 0; }
        .menu-toggle-container ul li:last-child {
          margin-left: 20px; }

  .toggle {
    display: none; }

  #sp-top-area {
    display: none; }

  #pc-top-area {
    display: flex;
    align-items: center; }

  .top-area {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 128px;
    /*new-words-title*/ }
    .top-area .new-words-title {
      padding: 1em 0 0;
      display: flex;
      justify-content: space-between;
      font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
      /*ul*/ }
      .top-area .new-words-title.sp {
        display: none; }
      .top-area .new-words-title.pc {
        display: flex; }
      .top-area .new-words-title .left {
        width: 50%;
        display: flex;
        align-items: center; }
      .top-area .new-words-title .right {
        width: 50%; }
      .top-area .new-words-title .title {
        font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
        padding-right: 20px; }
        .top-area .new-words-title .title label {
          background: #897655;
          color: #fff;
          font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
          font-size: 14px; }
      .top-area .new-words-title ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-end; }
        .top-area .new-words-title ul li a {
          display: block;
          color: #868B90;
          font-size: 24px;
          padding: 5px 0 5px 20px;
          text-decoration: none; }
          .top-area .new-words-title ul li a:hover {
            text-decoration: underline; }

  /*top-area*/
  dl.interview {
    padding: 0;
    margin: 0;
    /*name*/
    /*text*/ }
    dl.interview dt {
      position: relative; }
      dl.interview dt .photo {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        background-size: cover;
        background-position: center center; }
      dl.interview dt .name-en {
        position: absolute;
        color: #fff;
        bottom: 40px;
        left: 40px;
        font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
        line-height: 1.25;
        font-size: clamp(20px, 3.3333333vw, 40px); }
    dl.interview dd {
      margin: 1em 0; }
      dl.interview dd.top-flex {
        display: flex; }
      dl.interview dd .left-box {
        width: 65%; }
      dl.interview dd .right-box {
        width: 35%;
        max-width: 400px;
        /*area*/ }
        dl.interview dd .right-box .wrap {
          margin-right: 0; }
        dl.interview dd .right-box #howto {
          display: block; }
          dl.interview dd .right-box #howto header h3 {
            text-align: left; }
        dl.interview dd .right-box #short-profile {
          display: block; }
          dl.interview dd .right-box #short-profile header h3 {
            text-align: left; }
        dl.interview dd .right-box #category {
          display: block; }
        dl.interview dd .right-box #inpressive-pc {
          display: block; }
        dl.interview dd .right-box .area {
          padding: 0px 0 30px; }
          dl.interview dd .right-box .area header h3 {
            font-size: 20px;
            margin-top: .25em;
            margin-bottom: .25em;
            line-height: 1.25;
            text-align: left; }
            dl.interview dd .right-box .area header h3 span {
              width: 100px;
              height: 5px;
              background: #000;
              display: block;
              margin: .5em auto 1em;
              letter-spacing: .05em; }
          dl.interview dd .right-box .area section {
            padding-bottom: 0px;
            clear: both; }
            dl.interview dd .right-box .area section.last {
              padding-bottom: 0; }
    dl.interview h2 {
      color: #897655;
      font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
      margin-bottom: .75em;
      line-height: 1.5; }
    dl.interview .name {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid #F2F2F2;
      padding-bottom: .75em;
      margin-bottom: 1em; }
    dl.interview dd h3 {
      margin-bottom: .75em;
      margin-top: 2em; }

  /*dl*/
  #content.top-padding {
    padding-top: 130px; }
  #content.top-padding-single {
    padding-top: 160px; }

  /********
  area
  ********/
  .area {
    padding: 60px 0 60px; }
    .area .btn-area {
      margin: 50px auto -20px;
      text-align: center; }
    .area header h3 {
      font-size: clamp(24px, 3vw, 36px);
      margin-bottom: .25em;
      line-height: 1.25; }
      .area header h3 span {
        width: 100px;
        height: 5px;
        background: #897655;
        display: block;
        margin: .5em auto 1em;
        letter-spacing: .05em; }
    .area header p {
      margin-bottom: 1em; }
    .area.bg-brown {
      background: #EAE5DF; }
    .area.bg-light-gray {
      background: #F2F2F2; }
    .area ul.pickup {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      display: flex;
      justify-content: center; }
      .area ul.pickup li {
        position: relative;
        margin-bottom: 0em;
        width: 25%;
        padding: 0 .5%; }
        .area ul.pickup li:last-child {
          margin-bottom: 0; }
        .area ul.pickup li .photo {
          position: relative;
          background-color: #ccc;
          width: 100%;
          height: 0;
          padding-bottom: 56.25%;
          background-size: cover;
          background-position: center; }
    .area ul.latest {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      /*dl*/ }
      .area ul.latest li {
        margin-bottom: 1em;
        width: 33.33333333%;
        padding: 0.66666666665%; }
      .area ul.latest dl {
        padding: 0;
        margin: 0;
        /*dd*/ }
        .area ul.latest dl dt {
          position: relative; }
          .area ul.latest dl dt .photo {
            position: relative;
            background-color: #ccc;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
            background-size: cover;
            background-position: center; }
          .area ul.latest dl dt .name-en {
            position: absolute;
            color: #fff;
            bottom: 10px;
            left: 10px;
            font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
            line-height: 1.05;
            font-size: clamp(20px, 3.3333333vw, 40px); }
        .area ul.latest dl dd {
          margin: 1em 0 1em;
          /*name*/ }
          .area ul.latest dl dd h2 {
            font-size: clamp(16px, 1.833333vw, 22px);
            color: #897655;
            font-family: "Prata", "YuMincho", "Yu Mincho", "Times New Roman", "Hiragino Mincho ProN", "MS PMincho", serif;
            margin-bottom: .5em; }
          .area ul.latest dl dd .name {
            margin-bottom: .5em; }
            .area ul.latest dl dd .name .entry-title {
              font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
              line-height: 1.15;
              font-size: clamp(16px, 1.5vw, 18px); }
              .area ul.latest dl dd .name .entry-title small {
                display: inline-block;
                font-size: clamp(14px, 1.33333vw, 16px); }
    .area section {
      padding-bottom: 30px;
      clear: both; }
      .area section.last {
        padding-bottom: 0; }
    .area#inpressive-sp {
      display: none; }

  /*area*/ }
/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1280px) {
  /*******
  display
  *******/
  /*********************
  NAVIGATION STYLES
  *********************/
  /******top****/ }
/****animate****/
/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
/*scrollDown*/
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0; }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0; }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%; }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%; } }
@keyframes zoom {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.5); } }
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand; }

.fuwayura {
  animation: wobbling_x 0.7s ease-in-out infinite alternate, wobbling_y 1.2s ease-in-out infinite alternate; }

.fuwayura2 {
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

@keyframes wobbling_x {
  0% {
    margin-left: 8px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: 8px; } }
@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    visibility: visible; }
  50% {
    opacity: .7;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); } }
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@keyframes slideInLeftS {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.animate__slideInLeftS {
  -webkit-animation-name: slideInLeftS;
  animation-name: slideInLeftS; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.fadeIn {
  -webkit-animation: fadeIn;
  animation: fadeIn; }

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); } }
@keyframes fadeInUpUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 25%, 0);
    transform: translate3d(0, 25%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.fadeInUpUp {
  -webkit-animation-name: fadeInUpUp;
  animation-name: fadeInUpUp; }

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -80%, 0);
    transform: translate3d(0, -80%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

.fadeInUp {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s; }

section, .card {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s; }

.kazari-photo, .illust {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s;
  animation-delay: .8s; }

.rotateIn {
  animation: rotateIn linear infinite; }

@keyframes rotateIn {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }
@keyframes zoomIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.zoomInRotate {
  animation: zoomIn ease-in forwards; }

@keyframes zoomInL {
  0% {
    opacity: 0;
    transform: scale(0); }
  100% {
    opacity: 1;
    transform: scale(1); } }
.zoomInRotateL {
  animation: zoomInL ease-in forwards; }

.animated {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.delay-05s {
  -webkit-animation-delay: .5s;
  animation-delay: .5s; }

.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

.delay-15s {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s; }

.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s; }

.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s; }

.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s; }

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s; }

.fast {
  -webkit-animation-duration: .4s;
  animation-duration: .4s; }

.faster {
  -webkit-animation-duration: .2s;
  animation-duration: .2s; }

.slow {
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

.slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out; }

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important; } }
/*********************
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*********************/
@media print {
  /******************************************************************
  Site Name:
  Author:
  
  Stylesheet: Print Stylesheet
  
  This is the print stylesheet. There's probably not a lot
  of reasons to edit this stylesheet. If you want to
  though, go for it.
  
  ******************************************************************/
  @page {
    margin: 0.5cm; }
  .movie {
    display: none; }

  .recipe-flex .box.mv {
    display: none; }

  .recipe-flex .box.ph {
    width: 100%; }

  .inner-recipe {
    padding-top: 0; }

  .recipe-area {
    padding-top: 0px !important;
    padding-bottom: 30px !important; }

  .print {
    display: none; } }