/**  Mixins */
/*------------------------------------*\
    breakpoint vars
\*------------------------------------*/
/*------------------------------------*\
    breakpoint mixin
\*------------------------------------*/
/** Break desktop first**/
/** Global **/
*,
*::before,
*::after {
  box-sizing: border-box; }

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left; }

[tabindex="-1"]:focus {
  outline: 0 !important; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none; }

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

b,
strong {
  font-weight: bolder; }

small {
  font-size: 80%; }

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sub {
  bottom: -.25em; }

sup {
  top: -.5em; }

a {
  color: #6096C4;
  text-decoration: none; }
  a:hover {
    opacity: .8; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus {
  outline: 0; }

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em; }

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto; }

figure {
  margin: 0;
  padding: 0; }

img {
  vertical-align: middle;
  border-style: none; }

svg {
  overflow: hidden;
  vertical-align: middle; }

table {
  border-collapse: collapse; }

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom; }

th {
  text-align: inherit; }

label {
  display: inline-block;
  margin-bottom: 0.5rem; }

button {
  border-radius: 0; }

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color; }

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

select {
  word-wrap: normal; }

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; }

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer; }

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none; }

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0; }

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox; }

textarea {
  overflow: auto;
  resize: vertical; }

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0; }

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal; }

progress {
  vertical-align: baseline; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none; }

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button; }

output {
  display: inline-block; }

summary {
  display: list-item;
  cursor: pointer; }

template {
  display: none; }

[hidden] {
  display: none !important; }

:root {
  --white: #ffffff;
  --black: #000000;
  --smoke: #F4F5EF;
  --gray: #E5E5E5;
  --primary: #2F505E;
  --second: #993300;
  --text-body: #603813;
  --radius: 5px; }

/* Base Setting
---------------------------------------- */
html {
  scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family: "Noto Serif JP", serif;
  overflow-wrap: break-word;
  font-weight: 400;
  color: var(--text-body);
  overflow-x: hidden;
  line-height: 1.5;
  position: relative;
  width: 100%;
  background: var(--white); }

a {
  transition: all 0.3s;
  color: var(--primary);
  outline: none !important; }
  a:hover {
    opacity: 1;
    color: var(--second); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  color: var(--primary); }

h1 {
  font-size: 2.25rem;
  line-height: 1.3; }
  @media (min-width: 48em) {
    h1 {
      font-size: 2.875rem; } }

h2 {
  font-size: 2.5rem;
  line-height: 1.15; }
  @media (min-width: 48em) {
    h2 {
      font-size: 3.5rem; } }

h3 {
  font-size: 2.125rem;
  line-height: 1.16; }
  @media (min-width: 48em) {
    h3 {
      font-size: 2.5rem; } }

h4 {
  font-size: 1.75rem;
  line-height: 1.16; }
  @media (min-width: 48em) {
    h4 {
      font-size: 2.25rem; } }

h5 {
  font-size: 1.25rem;
  line-height: 1.2; }
  @media (min-width: 48em) {
    h5 {
      font-size: 1.5rem; } }

h6 {
  font-size: 1.125rem;
  line-height: 1.3; }
  @media (min-width: 48em) {
    h6 {
      font-size: 1.25rem; } }

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

.container, .container-fluid {
  width: 100%;
  max-width: 937px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative; }

.customers {
  margin: 0;
  padding: 0;
  list-style: none; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="phone"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--gray);
  border-radius: var(--radius);
  padding: 15px 24px;
  outline: none !important; }

.btn,
button,
input[type="button"],
input[type="submit"] {
  transition: all 0.3s;
  color: var(--white);
  padding: 16px 25px;
  min-width: 230px;
  text-align: center;
  font-weight: 700;
  display: inline-block;
  outline: none !important;
  border-radius: var(--radius);
  background: var(--primary);
  text-transform: uppercase;
  border: 0; }
  .btn:hover,
  button:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover {
    opacity: 0.9;
    color: var(--white); }
  .btn svg,
  button svg,
  input[type="button"] svg,
  input[type="submit"] svg {
    margin-right: 15px;
    max-height: 20px; }
  .btn.btn-white,
  button.btn-white,
  input[type="button"].btn-white,
  input[type="submit"].btn-white {
    color: var(--primary);
    background: var(--white); }

.btn-outline {
  transition: all 0.3s;
  color: var(--primary);
  padding: 15px 25px;
  min-width: 230px;
  text-align: center;
  font-weight: 700;
  display: inline-block;
  outline: none !important;
  border-radius: var(--radius);
  background: none;
  text-transform: uppercase;
  border: 1px solid var(--primary); }
  .btn-outline:hover {
    opacity: 0.9;
    color: var(--white); }
  .btn-outline svg {
    margin-right: 15px;
    max-height: 20px; }
  .btn-outline.btn-white {
    border-color: var(--white);
    color: var(--white); }

.container-fluid {
  max-width: 1920px; }
  @media (min-width: 48em) {
    .container-fluid {
      padding: 0 64px; } }

.hamburger {
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 1;
  cursor: pointer;
  display: block;
  right: 0;
  z-index: 99;
  align-self: flex-end;
  border: 2px solid var(--white);
  opacity: 1; }
  .hamburger__line {
    width: 29px;
    height: 3px;
    background: var(--black);
    backface-visibility: hidden;
    position: absolute;
    display: block;
    margin: auto;
    transition: 0.3s all ease;
    transform: rotate(0deg);
    border-radius: 5px;
    top: calc(50% - 1.5px);
    left: calc(50% - 14.5px); }
    .hamburger__line::before, .hamburger__line::after {
      content: '';
      transform-origin: center center;
      width: 29px;
      height: 3px;
      background: var(--black);
      backface-visibility: hidden;
      position: absolute;
      left: 0;
      top: 10px;
      transition: 0.3s all ease;
      border-radius: 5px;
      opacity: 1; }
    .hamburger__line::after {
      top: -10px; }
  .hamburger.active .hamburger__line {
    transform: rotate(225deg); }
    .hamburger.active .hamburger__line::before {
      transform: rotate(-90deg);
      top: 0; }
    .hamburger.active .hamburger__line::after {
      opacity: 0; }

/** Pages */
.header::after {
  background: #855d00;
  background: linear-gradient(90deg, #855d00 0%, #e9cd70 60%); }

body {background: url("../images/bg-pattent.png") #cdbba3 repeat; }
body.page-template-template-landing {background: url("../images/bg-pattent.png") #cdbba3 repeat; }

.header {
  background: url("../images/bg.png") #603a16;
  height: 104px;
  padding-bottom: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }
  .header::after {
    content: "";
    width: 100%;
    height: 4px;
    position: absolute;
    left: 0;
    bottom: 0; }
  .header h1 {
    color: var(--white);
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
    text-align: center; }

.landing-content {
  margin-bottom: 55px; }
  .landing-content .container .landing-box-content {
    width: 100%;
    background: url(../images/bg-top.png) no-repeat center;
    background-size: cover;
    padding: 20px;
    position: relative;
    margin-top: 30px;
    overflow: hidden; }
    @media (min-width: 48em) {
      .landing-content .container .landing-box-content {
        margin-top: 40px;
        padding: 35px 0 46px 115px; } }
    .landing-content .container .landing-box-content::after {
      content: "";
      width: 678px;
      height: 532px;
      background: url(../images/hm-bg.png) no-repeat right center;
      position: absolute;
      right: 0;
      bottom: 280px; }
  .landing-content .container p {
    line-height: 2;
    font-weight: bold;
    letter-spacing: .01em;
    margin-top: 20px; }
    @media (min-width: 48em) {
      .landing-content .container p {
        line-height: 2.4;
        letter-spacing: .2em;
        margin-top: 50px; } }
  .landing-content .container figure {
    bottom: 46px; }
    @media (min-width: 48em) {
      .landing-content .container figure {
        position: absolute;
        right: 0; } }

.box-content {
  background: url(../images/box-bg.png) no-repeat center;
  background-size: cover;
  margin-bottom: 55px; }
  .box-content .box-title {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background: rgba(204, 153, 102, 0.6);
    height: 52px; }
    @media (min-width: 48em) {
      .box-content .box-title::before, .box-content .box-title::after {
        content: "";
        position: absolute; } }
    .box-content .box-title::before {
      width: 91px;
      height: 108px;
      background: url(../images/before-title.png) no-repeat center;
      left: 37px;
      top: -21px; }
    .box-content .box-title::after {
      width: 156px;
      height: 115px;
      right: 33px;
      top: -21px;
      background: url(../images/after-title.png) no-repeat center; }
    .box-content .box-title h2 {
      font-size: 22px;
      color: var(--white);
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
      margin: 0; }
      @media (min-width: 48em) {
        .box-content .box-title h2 {
          font-size: 28px; } }

.customers {
  display: flex;
  flex-direction: column;
  padding: 20px; }
  @media (min-width: 48em) {
    .customers {
      padding: 40px 77px; } }
  .customers--item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
    max-width: 100%; }
  .customers--info {
    display: flex;
    align-items: center;
    position: relative;
    width: 592px;
    min-height: 142px;
    border: 12px solid transparent;
    padding: 5px 0px;
    border-image: url("../images/border-image.png") 12 round;
    -webkit-border-image: url("../images/border-image.png") 12 round;
    -moz-border-image: url("../images/border-image.png") 12 round;
    border-radius: 15px;
    background: #fff; }
    @media (min-width: 48em) {
      .customers--info {
        padding: 5px 0px 5px 15px; } }
    .customers--info figure {
      display: block; }
  .customers--text {
    max-width: calc(100% - 90px);
    padding-left: 10px; }
    @media (min-width: 48em) {
      .customers--text {
        max-width: calc(100% - 118px);
        padding-left: 20px; } }
    .customers--text h3 {
      color: var(--second);
      font-size: 19px;
      margin-bottom: 5px; }
    .customers--text p {
      font-size: 14px;
      margin-bottom: 0;
      line-height: 1.3;
      font-weight: bold; }
  .customers--background {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%); }
  .customers--item {
    display: flex; }
    .customers--item:nth-child(even) {
      align-self: flex-end; }

.menu .box-text {
  padding: 20px; }
  @media (min-width: 48em) {
    .menu .box-text {
      padding: 60px 70px; } }

.menu .box-item {
  margin-bottom: 40px; }
  .menu .box-item--title {
    background: #a88e44;
    position: relative;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; }
    .menu .box-item--title h2 {
      font-size: 18px;
      color: var(--white);
      text-align: center;
      margin-bottom: 0; }
      @media (min-width: 48em) {
        .menu .box-item--title h2 {
          font-size: 22px; } }
    .menu .box-item--title::after {
      position: absolute;
      right: 30px;
      top: 0;
      width: 150px;
      height: 40px;
      background: url(../images/box-title-pattent.png) no-repeat center; }
      @media (min-width: 48em) {
        .menu .box-item--title::after {
          content: ""; } }
  .menu .box-item--container {
    background: var(--white);
    border: 2px solid #a88e44;
    padding: 10px; }
    @media (min-width: 48em) {
      .menu .box-item--container {
        padding: 30px; } }
  .menu .box-item--info {
    display: flex;
    font-weight: bold; }
    @media only screen and (max-width: 767px) {
      .menu .box-item--info {
        flex-direction: column; } }
    .menu .box-item--info span,
    .menu .box-item--info small {
      color: var(--second); }
    .menu .box-item--info figure {
      width: 100%;
      height: auto; }
      @media (min-width: 48em) {
        .menu .box-item--info figure {
          width: 172px;
          height: 145px;
          position: relative;
          right: -30px; } }
      .menu .box-item--info figure img {
        width: 100%;
        height: auto;
        object-fit: cover; }
  .menu .box-item--text {
    text-align: center;
    width: 100%; }
    @media (min-width: 48em) {
      .menu .box-item--text {
        max-width: calc(100% - 172px); } }
    .menu .box-item--text p {
      margin-bottom: 20px;
      font-weight: bold; }
  .menu .box-item--content {
    background: #f9eed0;
    text-align: center;
    position: relative;
    padding: 20px;
    font-weight: bold; }
    .menu .box-item--content img {
      position: absolute;
      bottom: -25px;
      right: -25px; }

.author .box-content {
  background-position: bottom center; }

.author-content {
  text-align: center;
  padding: 20px; }
  .author-content p {
    line-height: 2.2;
    font-weight: bold; }

.author-avatar {
  margin-top: 60px;
  margin-bottom: 80px; }

.author .box-text {
  padding: 20px; }
  @media (min-width: 48em) {
    .author .box-text {
      padding: 85px 70px; } }