@charset "UTF-8";
/*!
Theme Name: choppydays
Theme URI: http://underscores.me/
Author: choppydays
Author URI: https://choppydays.com
Description: choppydays original theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: choppydays
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

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

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

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*
$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
  Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
// stylelint-enable value-keyword-case
*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! 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;
  -webkit-text-size-adjust: 100%;
}

/* 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;
  height: 0;
  overflow: visible;
}

/**
 * 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;
  font-size: 1em;
}

/* 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;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * 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;
  font-size: 1em;
}

/**
 * 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;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

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

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  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;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * 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;
  padding: 0;
}

/**
 * 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;
  outline-offset: -2px;
}

/**
 * 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;
  font: inherit;
}

/* 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;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", YuGothic, "Yu Gothic Medium", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

.text-shadow-black {
  text-shadow: 0 0 2px #00000030, 0 0 4px #00000030, 0 0 6px #00000030, 0 0 8px #00000030;
}

.text-shadow-white {
  text-shadow: 0 0 2px #ffffff25, 0 0 4px #ffffff25, 0 0 6px #ffffff25, 0 0 8px #ffffff25;
}

.text-shadow-pink {
  font-size: 6rem;
  font-weight: 800;
  color: #eb6b8c;
  text-shadow: white 4px 0px 0px, white 3.87565px 0.98962px 0px, white 3.51033px 1.9177px 0px, white 2.92676px 2.72656px 0px, white 2.16121px 3.36588px 0px, white 1.26129px 3.79594px 0px, white 0.28295px 3.98998px 0px, white -0.71298px 3.93594px 0px, white -1.66459px 3.63719px 0px, white -2.51269px 3.11229px 0px, white -3.20457px 2.39389px 0px, white -3.69721px 1.52664px 0px, white -3.95997px 0.56448px 0px, white -3.97652px -0.43278px 0px, white -3.74583px -1.40313px 0px, white -3.28224px -2.28625px 0px, white -2.61457px -3.02721px 0px, white -1.78435px -3.57996px 0px, white -0.84318px -3.91012px 0px, white 0.15041px -3.99717px 0px, white 1.13465px -3.8357px 0px, white 2.04834px -3.43574px 0px, white 2.83468px -2.82216px 0px, white 3.44477px -2.03312px 0px, white 3.84068px -1.11766px 0px, white 3.9978px -0.13272px 0px, black 0px 4px 4px;
  letter-spacing: 0.1em;
  line-height: 1;
}

.text-shadow-green {
  font-size: 6rem;
  font-weight: 800;
  color: #00ff4c;
  text-shadow: white 4px 0px 0px, white 3.87565px 0.98962px 0px, white 3.51033px 1.9177px 0px, white 2.92676px 2.72656px 0px, white 2.16121px 3.36588px 0px, white 1.26129px 3.79594px 0px, white 0.28295px 3.98998px 0px, white -0.71298px 3.93594px 0px, white -1.66459px 3.63719px 0px, white -2.51269px 3.11229px 0px, white -3.20457px 2.39389px 0px, white -3.69721px 1.52664px 0px, white -3.95997px 0.56448px 0px, white -3.97652px -0.43278px 0px, white -3.74583px -1.40313px 0px, white -3.28224px -2.28625px 0px, white -2.61457px -3.02721px 0px, white -1.78435px -3.57996px 0px, white -0.84318px -3.91012px 0px, white 0.15041px -3.99717px 0px, white 1.13465px -3.8357px 0px, white 2.04834px -3.43574px 0px, white 2.83468px -2.82216px 0px, white 3.44477px -2.03312px 0px, white 3.84068px -1.11766px 0px, white 3.9978px -0.13272px 0px, black 0px 4px 4px;
  letter-spacing: 0.1em;
  line-height: 1;
}

.label-red {
  /*  display: inline-block; */
  padding: 0 0.6em;
  margin-left: 0.4em;
  background: #ff4b3e;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #fff;
  vertical-align: middle;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

hr.line {
  border: 1px;
  width: 80%;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

ul,
ol {
  margin: 0 0 1.5em 0.5em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

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

ul.list-arrow li {
  position: relative;
  padding: 0 0 0 .9em;
  margin: 0;
}

ul.list-arrow li::before {
  position: absolute;
  left: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0da';
}

ul.guide-list {
  margin: 0;
  width: 90%;
  padding: 0;
}

@media (min-width: 768px) {
  ul.guide-list {
    width: 80%;
  }
}

ul.guide-list li {
  list-style: none;
}

ul.guide-list li:not(:last-child) {
  margin: 0 0 1rem;
  display: block;
}

ul.guide-list a {
  background: rgba(255, 255, 255, 0.1) url(../svg/arrows1.svg) no-repeat right 2rem center/auto 1rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  color: #fff !important;
  display: block;
  padding: 0.4rem 3rem 0.2rem 1.5rem;
  font-size: 1.4rem;
}

ul.guide-list a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

ul.guide-list-dark {
  margin: 0;
  width: 90%;
}

@media (min-width: 768px) {
  ul.guide-list-dark {
    width: 68%;
  }
}

ul.guide-list-dark li {
  list-style: none;
}

ul.guide-list-dark li:not(:last-child) {
  margin: 0 0 1rem;
  display: block;
}

ul.guide-list-dark a {
  background: rgba(255, 255, 255, 0.1) url(../svg/arrows2.svg) no-repeat right 2rem center/auto 1rem;
  border: 2px solid #404040;
  border-radius: 1px;
  color: #404040 !important;
  display: block;
  padding: 0.4rem 3rem 0.2rem 1.5rem;
  font-size: 1.0rem;
}

@media (min-width: 768px) {
  ul.guide-list-dark a {
    font-size: 1.4rem;
  }
}

ul.guide-list-dark a:hover {
  background-color: #404040;
  border: 2px solid #404040;
  opacity: 0.9;
  transition: all .3s;
  color: #fff !important;
  background: #404040 url(../svg/arrows1.svg) no-repeat right 2rem center/auto 1rem;
}

/* FAQ */
ol.faq {
  margin: 0;
  padding: 0;
}

ol.faq li:first-child {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0.2em;
}

ol.faq li:first-child::before {
  content: "Q";
  display: inline-grid;
  margin-right: 0.5em;
  width: 50px;
  background: #24b500;
  border-radius: 50px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  align-content: center;
  min-width: 50px;
}

ol.faq li:nth-child(2) {
  display: flex;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 800;
}

ol.faq li:nth-child(2)::before {
  content: "A";
  display: inline-grid;
  margin-right: 0.5em;
  width: 50px;
  background: #105200;
  border-radius: 50px;
  height: 50px;
  vertical-align: middle;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  align-content: center;
  min-width: 50px;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

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

figure {
  margin: 1em 0;
}

.shadow-frame-2px {
  filter: drop-shadow(2px 2px 2px #aaa);
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

.table-border table {
  border: 1px solid #ddd;
  font-size: 18px;
}

.table-border table th {
  border: 1px solid #ddd;
}

.table-border table td {
  padding: 10px;
  border: 1px solid #ddd;
}

.table-resp table {
  border: 1px solid #ddd;
  font-size: 18px;
}

.table-resp table th {
  border: 1px solid #ddd;
  width: 100%;
  display: block;
}

@media (min-width: 768px) {
  .table-resp table th {
    padding: 0;
    width: auto;
    display: table-cell;
    padding: 10px;
  }
}

.table-resp table td {
  padding: 10px;
  border: 1px solid #ddd;
  width: 100%;
  display: block;
}

@media (min-width: 768px) {
  .table-resp table td {
    padding: 0;
    width: auto;
    display: table-cell;
    padding: 10px;
  }
}

.table-links table {
  max-width: 1000px;
  margin: 0 auto;
}

.table-links table td a {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 0.8rem 2.4rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0px;
  padding: 10px 5px;
}

.table-dark table {
  background-color: #343a40;
  color: #fff;
  margin: 0;
}

.table-dark table td {
  word-break: break-word;
  border: none;
  padding: 8px 10px;
  border-bottom: 2px solid #2b3035;
  font-size: 14px;
}

.table-dark table td:first-child {
  font-weight: bold;
}

.table-dark table tr:hover {
  background-color: rgba(255, 255, 255, 0.075);
}

/* タイムライン表 */
.timeline-table table,
.timeline-table table th,
.timeline-table table td {
  border: none !important;
}

.timeline-table table {
  border-collapse: collapse;
  width: 100%;
  position: relative;
}

.timeline-table table img {
  max-width: 150px;
}

@media (min-width: 768px) {
  .timeline-table table img {
    max-width: 400px;
  }
}

.timeline-table table td {
  vertical-align: top;
  padding: 10px;
}

/* 年の列 */
.timeline-table table td:nth-child(1) {
  font-weight: bold;
  color: #ff7ab2;
  width: 80px;
  white-space: nowrap;
}

/* 点線＋縦線部分 */
.timeline-table table td:nth-child(2) {
  width: 20px;
  position: relative;
}

.timeline-table table td:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: -14px;
  left: 48%;
  width: 2px;
  background: #ff7ab2;
}

.timeline-table table td:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 54%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #ff7ab2;
  border-radius: 50%;
}

/* 内容列 */
.timeline-table table td:nth-child(3) {
  padding-left: 5px;
}

/* pink table */
.table-pink {
  /* 角丸をヘッダーとフッターに適用 */
}

.table-pink table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fffdf9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.25);
  color: #444;
  border-bottom: 4px solid #6d2350;
}

.table-pink table th,
.table-pink table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f8e8ef;
}

.table-pink table th {
  background: linear-gradient(135deg, #ffe6f2, #fff0f7);
  color: #a64d79;
  font-weight: bold;
}

.table-pink table tr:nth-child(even) td {
  background: #fffafc;
}

.table-pink table tr:nth-child(odd) td {
  background: #fff;
}

.table-pink table tr:hover td {
  background: #fff0f7;
  transition: background 0.3s ease;
}

.table-pink table th:first-child {
  border-top-left-radius: 16px;
}

.table-pink table th:last-child {
  border-top-right-radius: 16px;
}

.table-pink table tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.table-pink table tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

/* green table */
.table-green {
  /* 角丸をヘッダーとフッターに適用 */
}

.table-green table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fcfefb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(144, 238, 144, 0.25);
  color: #355e3b;
  border-bottom: 4px solid #355e3b;
}

.table-green table th,
.table-green table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e3f3e0;
}

.table-green table th {
  background: linear-gradient(135deg, #d8f3dc, #f0fff4);
  color: #2d6a4f;
  font-weight: bold;
}

.table-green table tr:nth-child(even) td {
  background: #f8fff8;
}

.table-green table tr:nth-child(odd) td {
  background: #ffffff;
}

.table-green table tr:hover td {
  background: #e6f7e6;
  transition: background 0.3s ease;
}

.table-green table th:first-child {
  border-top-left-radius: 16px;
}

.table-green table th:last-child {
  border-top-right-radius: 16px;
}

.table-green table tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.table-green table tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

/* blue table */
.table-blue {
  /* 角丸をヘッダーとフッターに適用 */
}

.table-blue table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #f9fcff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(135, 206, 250, 0.25);
  color: #2a4d6e;
  border-bottom: 4px solid #2a4d6e;
}

.table-blue table th,
.table-blue table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0f0fa;
}

.table-blue table th {
  background: linear-gradient(135deg, #d4f1ff, #f0fbff);
  color: #1e6091;
  font-weight: bold;
}

.table-blue table tr:nth-child(even) td {
  background: #f6fbff;
}

.table-blue table tr:nth-child(odd) td {
  background: #ffffff;
}

.table-blue table tr:hover td {
  background: #e6f6ff;
  transition: background 0.3s ease;
}

.table-blue table th:first-child {
  border-top-left-radius: 16px;
}

.table-blue table th:last-child {
  border-top-right-radius: 16px;
}

.table-blue table tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.table-blue table tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.table-overflow {
  overflow-x: auto;
  /* 横スクロール許可 */
  -webkit-overflow-scrolling: touch;
  /* iOSでスムーズスクロール */
}

.table-overflow table {
  min-width: 1000px;
  /* スクロールが必要になる基準幅 */
  border-collapse: collapse;
  width: 100%;
  /* 親幅に合わせる */
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}

a:visited {
  /* color: $color__link-visited;*/
  color: inherit;
}

a:hover, a:focus, a:active {
  color: #191970;
  color: inherit;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

a.wp-block-button__link:visited, a.wp-block-button__link:focus, a.wp-block-button__link:hover, a.wp-block-button__link:active {
  color: #fff;
}

a.wp-block-button__link:hover {
  opacity: 0.8;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

/* sonar effect button ripple */
.blurb-ripple-out {
  display: inline-block;
  font-size: 0px;
  cursor: pointer;
  margin: 15px 30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #fff;
  background: #b2dd4c;
  -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
  -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
  transition: transform ease-out 0.1s, background 0.2s;
}

.blurb-ripple-out-wrap {
  text-align: center;
  margin: 0 auto;
  padding: 2em 0 3em;
}

.blurb-ripple-out:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 2px #b2dd4c;
  opacity: 0;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.blurb-ripple-out:before {
  speak: none;
  font-size: 48px;
  line-height: 90px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}

.blurb-ripple-out:hover {
  background: #b2dd4c;
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.blurb-ripple-out:hover:after {
  -webkit-animation: sonarEffect 1.3s ease-out 75ms;
  -moz-animation: sonarEffect 1.3s ease-out 75ms;
  animation: sonarEffect 1.3s ease-out 75ms;
}

@keyframes sonarEffect {
  0% {
    opacity: 0.5;
  }
  40% {
    opacity: 0.7;
    box-shadow: 0 0 0 2px #b2dd4c, 0 0 10px 10px #b2dd4c, 0 0 0 10px #b2dd4c;
  }
  100% {
    box-shadow: 0 0 0 2px #b2dd4c, 0 0 10px 10px #b2dd4c, 0 0 0 10px #b2dd4c;
    transform: scale(1.5);
    opacity: 0;
  }
}

.wp-block-button__link:hover {
  opacity: 0.7;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.no-sidebar .site {
  /*		display: grid; 
		grid-template-columns: auto;
		grid-template-areas:
			"header"
			"main"
			"footer";*/
}

body {
  font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", YuGothic, "Yu Gothic Medium", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  /*
	font-family: "Amiri",
		"FOT-筑紫明朝 Pr6N L",
		"游明朝",
		YuMincho,
		"ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN",
		"HG明朝E",
		"ＭＳ Ｐ明朝",
		"ＭＳ 明朝",
		serif;
*/
  /*	font-family: 'Noto Serif JP', serif; */
  /*font-family: 'Kosugi Maru',
		-apple-system,
		BlinkMacSystemFont, 
		'Helvetica Neue',
		'Segoe UI',
		YuGothic,
		'Yu Gothic Medium',
		'Hiragino Sans',
		'Hiragino Kaku Gothic ProN',
		Meiryo,
		sans-serif;
*/
}

body .pc {
  display: none;
}

@media (min-width: 576px) {
  body .pc {
    display: none;
  }
}

@media (min-width: 768px) {
  body .pc {
    display: block;
  }
}

body .sp {
  display: block;
}

@media (min-width: 768px) {
  body .sp {
    display: none;
  }
}

body.home {
  background: #f0f2f2;
}

body.page {
  background: #f0f2f2;
}

body.single {
  background: #f0f2f2;
}

body.archive {
  background: #f0f2f2;
}

.site-footer {
  background: #e2f7d8;
  padding: 2px;
  clear: left;
  height: auto;
}

.site-footer h2 {
  border-bottom: 2px solid #2b9856;
}

.footer-img {
  background: url(../images/common/footer_background.png) no-repeat center top;
  height: 150px;
  background-size: auto 100%;
}

@media (min-width: 768px) {
  .footer-img {
    height: 280px;
    background-size: auto 100%;
  }
}

footer aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 50px;
}

footer aside ul {
  margin: 0;
  width: 100%;
}

@media (min-width: 768px) {
  footer aside ul {
    min-width: 24%;
    width: 24%;
  }
}

footer aside ul ul {
  width: 100%;
}

footer h2 {
  font-weight: 800 !important;
  font-size: 18px !important;
  margin: 8px 0px;
}

footer section.widget {
  width: 90%;
}

footer section.widget ul {
  padding: 0;
}

footer section.widget ul li {
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

footer section.widget ul li a {
  color: #2c140d;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.site-header {
  height: 62px;
  /*
	position: fixed;
  */
  z-index: 99999;
  background: transparent;
  width: 100%;
  display: block;
  top: 0;
  -webkit-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  background: #fff;
  /*
	box-shadow: 0px 6px 4px -9px #000;
	border-bottom: 1px solid #d7d7d7;
*/
}

.site-header .custom-logo-link-small {
  display: none;
}

@media (min-width: 768px) {
  .site-header .custom-logo-link-small {
    padding-top: 1px;
  }
}

@media (min-width: 576px) {
  .site-header {
    height: 110px;
    display: flex;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
  }
}

.site-header .site-branding {
  height: 100%;
}

.site-header .site-branding img {
  max-width: 350px;
  transition: all 0.3s;
  width: 160px;
  padding-top: 10px;
  /* width: 100%;*/
}

@media (min-width: 992px) {
  .site-header .site-branding img {
    width: 220px;
  }
}

@media (min-width: 1200px) {
  .site-header .site-branding img {
    width: 220px;
  }
}

@media (min-width: 1400px) {
  .site-header .site-branding img {
    width: 240px;
  }
}

@media (min-width: 992px) {
  .site-header .site-branding {
    width: 220px;
  }
}

@media (min-width: 1200px) {
  .site-header .site-branding {
    width: 220px;
  }
}

@media (min-width: 1400px) {
  .site-header .site-branding {
    width: 240px;
  }
}

.site-header .site-branding a {
  height: 100%;
}

.site-header .site-branding .custom-logo-link {
  text-align: center;
  display: block;
  width: 230px;
  padding: 0px;
}

@media (min-width: 768px) {
  .site-header .site-branding .custom-logo-link {
    width: 100%;
    margin: 0px;
  }
}

@media (min-width: 576px) {
  .site-header .site-branding {
    padding: 2px 5px 2px 5px;
  }
}

@media (min-width: 768px) {
  .site-header .site-branding {
    padding: 2px 5px 2px 5px;
    position: relative;
    grid-area: header;
    flex-shrink: 0;
    /*			
			border-bottom: 1px solid #000;
			*/
    display: flex;
  }
}

@media (min-width: 992px) {
  .site-header .site-branding {
    padding: 0px;
  }
}

.site-header .site-description {
  position: absolute;
  top: -5px;
  font-size: 6px;
  font-weight: bold;
  left: 20px;
  display: none;
}

@media (min-width: 768px) {
  .site-header .site-description {
    font-size: 11px;
    display: block;
  }
}

.small-header {
  background: #fff;
  position: fixed;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

@media (min-width: 768px) {
  .small-header {
    height: 100px;
  }
}

.small-header .custom-logo-link {
  display: none !important;
}

.small-header .custom-logo-link-small {
  display: block;
}

.small-header .custom-logo-link-small img {
  width: 150px;
}

@media (min-width: 768px) {
  .small-header .custom-logo-link-small img {
    width: 200px;
  }
}

@media (min-width: 992px) {
  .small-header .custom-logo-link-small img {
    width: 200px;
    margin: 0px;
  }
}

@media (min-width: 1200px) {
  .small-header .custom-logo-link-small img {
    width: 230px;
  }
}

.small-header {
  /* mobile hamberger menu */
}

.small-header .main-navigation {
  /* right buttons */
}

.small-header .main-navigation .nav-right .button-phone {
  height: 100px;
  color: #603813;
}

.small-header .main-navigation .nav-right .button-contact {
  height: 62px;
}

@media (min-width: 768px) {
  .small-header .main-navigation .nav-right .button-contact {
    height: 100px;
  }
}

.small-header .toggle span,
.small-header .toggle span::before,
.small-header .toggle span::after {
  background-color: #1c313d;
}

.main-navigation {
  display: flex;
  z-index: 999;
}

.main-navigation .lang_switcher {
  font-weight: bold;
  font-size: 8px;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  right: 0;
  position: absolute;
}

@media (min-width: 992px) {
  .main-navigation .lang_switcher {
    position: relative;
    font-size: 14px;
  }
}

.main-navigation .lang_switcher img {
  vertical-align: middle;
}

.main-navigation .lang_switcher .youtube {
  font-weight: bold;
  font-size: 8px;
  background: #fff;
  padding: 5px;
  border-radius: 5px;
  right: 0;
  position: absolute;
}

@media (min-width: 992px) {
  .main-navigation .lang_switcher .youtube {
    position: relative;
    font-size: 14px;
  }
}

.main-navigation .lang_switcher .youtube i {
  color: red;
}

@media (min-width: 576px) {
  .main-navigation {
    width: 85%;
  }
}

@media (min-width: 768px) {
  .main-navigation {
    width: 88%;
    justify-content: start;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .main-navigation {
    width: 99%;
  }
}

@media (min-width: 1400px) {
  .main-navigation {
    /*justify-content: center;*/
  }
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  /* second ul (popup menu etc.) */
}

@media (min-width: 768px) {
  .main-navigation ul {
    display: flex;
    margin: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: center;
  }
}

.main-navigation ul li {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  border: 5px solid transparent;
  margin: 0px 2px 0px 2px;
  /* add new */
  border: none;
  color: #603813;
  float: left;
  transition: 0.2s;
  margin-bottom: 0px;
  height: 60px;
  font-size: 16px;
  /* border-right: 2px dashed #24b500; */
  font-weight: bold;
  padding: 0px 2px;
}

.main-navigation ul li:hover {
  background: #4caf507a;
  border-radius: 10px;
}

@media (min-width: 1400px) {
  .main-navigation ul li {
    margin: 0px 5px 0px 5px;
  }
}

@media (min-width: 1500px) {
  .main-navigation ul li {
    margin: 0px 5px 0px 5px;
    font-size: 16px;
    /*
				&:last-child {
					background: #f5606e;

					&:hover {
						background: #2a4758;
						transition: all .3s;
					}

					a {
						color: #fff !important;

						&:after {
							display: none;
						}
					}
				} */
  }
}

.main-navigation ul li a {
  font-weight: 600;
  font-size: 12px;
  display: flex;
  /* 横並びにする */
  align-items: center;
  /* 縦方向の位置を揃える（center で中央揃え、flex-start なら上揃え） */
  text-decoration: none;
  /* 下線を消す場合 */
  /* underline animation */
  /*
        &:hover::after {
          transform-origin: left top;
          transform: scale(1, 1);
        }
          */
}

.main-navigation ul li a .sub-menu-title {
  font-size: 10px;
}

@media (min-width: 576px) {
  .main-navigation ul li a {
    font-size: 10px;
  }
}

@media (min-width: 768px) {
  .main-navigation ul li a {
    font-size: 10px;
    width: 105px;
  }
}

@media (min-width: 992px) {
  .main-navigation ul li a {
    font-size: 10px;
    width: 110px;
  }
}

@media (min-width: 1200px) {
  .main-navigation ul li a {
    font-size: 12px;
    width: 120px;
  }
}

@media (min-width: 1400px) {
  .main-navigation ul li a {
    font-size: 14px;
    width: 130px;
  }
}

.main-navigation ul li a img {
  padding: 5px 0px;
  float: left;
  vertical-align: middle;
  width: 60px;
  flex-shrink: 0;
  /* 画像が縮まないようにする */
  width: 40px;
  /* アイコンサイズを固定（必要に応じて調整） */
  height: auto;
}

@media (min-width: 768px) {
  .main-navigation ul li a img {
    width: 40px;
  }
}

@media (min-width: 1200px) {
  .main-navigation ul li a img {
    width: 60px;
  }
}

.main-navigation ul li a div {
  vertical-align: middle;
  text-align: left;
  flex: 1;
  /* テキスト部分を残りの幅いっぱいに広げる */
  line-height: 1.4;
  /* 行間を少し広めに */
}

.main-navigation ul ul {
  left: -999em;
  top: 0;
  box-shadow: none;
  position: initial;
  padding: 0px 10px 0px 10px;
}

@media (min-width: 576px) {
  .main-navigation ul ul {
    float: left;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 100%;
    left: -999em;
    z-index: 99999;
  }
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
  /* show submenu under menu */
  /* left: 0; */
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
  margin-left: -50px;
  margin-top: 0px;
}

@media (min-width: 576px) {
  .main-navigation ul li:hover > ul,
  .main-navigation ul li.focus > ul {
    /*	left: 0; */
  }
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.main-navigation .sub-menu {
  width: 250px;
  height: auto;
  text-align: left;
  padding: 10px 0px;
  transition: 0.4s;
  border-radius: 10px;
}

@media (min-width: 768px) {
  .main-navigation .sub-menu {
    background: #fff;
    box-sizing: border-box;
    padding: 15px 10px 15px 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 6px 0 #ddd;
    border-radius: 10px;
  }
}

.main-navigation .sub-menu li {
  display: list-item;
  width: 100%;
  padding: 0;
  border: none;
  display: flex;
  justify-content: center;
  border-radius: 10px;
}

@media (min-width: 576px) {
  .main-navigation .sub-menu li {
    padding: 4px 4px 0px 4px;
    margin: 2px;
  }
}

.main-navigation .sub-menu li a {
  width: 100%;
  font-size: 18px;
  font-weight: normal;
}

.main-navigation .sub-menu li a:after {
  transform-origin: none;
  transform: none;
  position: relative;
}

.main-navigation .sub-menu li:last-child {
  background: none;
}

.main-navigation .sub-menu li:hover {
  background: #4caf507a;
}

.main-navigation .sub-menu .sub-menu {
  position: relative;
  display: contents;
}

.main-navigation .nav-right {
  width: 80px;
  height: 62px;
  position: absolute;
  top: 0;
  right: 50px;
}

@media (min-width: 768px) {
  .main-navigation .nav-right {
    width: 200px;
    height: 110px;
    right: 0;
    display: inline-flex;
  }
}

@media (min-width: 992px) {
  .main-navigation .nav-right {
    width: 365px;
  }
}

.main-navigation .nav-right .button-youtube {
  display: table;
  text-align: center;
  display: none;
}

@media (min-width: 1200px) {
  .main-navigation .nav-right .button-youtube {
    display: table;
  }
}

.main-navigation .nav-right .button-youtube a {
  color: #333 !important;
  display: table-cell;
  vertical-align: middle;
  line-height: 18px;
  font-size: 14px;
  font-weight: bold;
}

.main-navigation .nav-right .button-youtube a i {
  color: red;
}

@media (min-width: 768px) {
  .main-navigation .nav-right .button-youtube a {
    line-height: 26px;
    font-size: 17px;
  }
}

.main-navigation .nav-right .button-phone {
  display: table;
  text-align: center;
  display: none;
  color: #603813;
}

@media (min-width: 1400px) {
  .main-navigation .nav-right .button-phone {
    display: table;
  }
}

.main-navigation .nav-right .button-phone a {
  display: table-cell;
  vertical-align: middle;
  line-height: 18px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .main-navigation .nav-right .button-phone a {
    line-height: 26px;
    font-size: 20px;
  }
}

.main-navigation .nav-right .button-phone .address {
  font-weight: bold;
  font-size: 15px;
  padding: 0;
  margin: 0;
}

.main-navigation .nav-right .button-phone .address i {
  color: #24b500;
}

.main-navigation .nav-right .button-phone .phone-number {
  font-weight: bold;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.main-navigation .nav-right .button-phone .phone-number i {
  color: #24b500;
}

.main-navigation .nav-right .button-phone .business-time {
  font-size: 11px;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.main-navigation .nav-right .button-contact {
  border-bottom: 4px solid #603813;
  border-left: 4px solid #603813;
  border-right: 4px solid #603813;
  border-radius: 0px 0px 20px 20px;
  background: #ffe7d2;
  color: #603813;
  display: table;
  text-align: center;
  height: 100%;
  width: 110px;
  position: absolute;
  right: 0;
  transition: all 300ms ease-out;
  background: #f9c5d1;
  /* パステルピンク */
  color: #5a3e2b;
  /* ダークブラウン文字 */
  font-size: 16px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .main-navigation .nav-right .button-contact {
    width: 160px;
  }
}

.main-navigation .nav-right .button-contact a {
  display: table-cell;
  vertical-align: middle;
  line-height: 18px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .main-navigation .nav-right .button-contact a {
    line-height: 26px;
    font-size: 20px;
  }
}

.main-navigation .nav-right .button-contact:hover {
  background: #cb9965;
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  /* 影をつけるとより浮いて見える */
}

.main-navigation .instagram {
  position: absolute;
  right: 47px;
  top: 10px;
}

@media (min-width: 768px) {
  .main-navigation .instagram {
    display: none;
  }
}

.right-navigation {
  /*	background: #fff;*/
  justify-content: center;
  align-items: center;
  display: none;
}

@media (min-width: 576px) {
  .right-navigation {
    width: 25%;
    display: flex;
  }
}

.right-navigation .menu {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.right-navigation .menu li {
  padding: 0px 10px 0px 10px;
}

.right-navigation .menu li a {
  color: #fff !important;
}

.right-navigation .menu li i {
  font-size: 2.2em;
}

@media (min-width: 576px) {
  .right-navigation .menu li i {
    font-size: 2.2em;
  }
}

.right-navigation .menu .instagram i {
  background: #f00075;
  padding: 8px 11px;
  border-radius: 50px;
}

/* Small menu. */
.menu-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  z-index: 99999;
}

.menu-toggle::before {
  content: "\f0c9";
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
  font-size: 30px;
  color: #204877;
}

.menu-open {
  position: fixed;
}

/* mobile hamburger menu */
#menu .menu-main-container,
#menu .menu-mobile-container {
  /* 
	width: 100%;
	position: fixed;
	height: 100%;
	z-index: 9999;
	top: 0;
	left: 0;
	background: #fff;
	display: none;
*/
}

@media (min-width: 576px) {
  #menu .menu-main-container,
  #menu .menu-mobile-container {
    height: 100%;
    display: block;
  }
}

#menu .menu-main-container .sub-menu,
#menu .menu-mobile-container .sub-menu {
  padding-left: 20px;
}

#menu .menu-main-container .menu .menu-item,
#menu .menu-mobile-container .menu .menu-item {
  position: relative;
}

#menu .menu-main-container .menu .menu-item a,
#menu .menu-mobile-container .menu .menu-item a {
  display: flex;
  align-items: center;
}

#menu .menu-main-container .menu .menu-item img,
#menu .menu-mobile-container .menu .menu-item img {
  width: 60px;
}

#menu .menu-main-container .menu .menu-item.has-submenu > a::after,
#menu .menu-mobile-container .menu .menu-item.has-submenu > a::after {
  content: "";
  float: right;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 15px;
  height: 15px;
  border-top: solid 4px #24b500;
  border-right: solid 4px #24b500;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#menu .menu-main-container .menu .menu-item.has-submenu > a.open::after,
#menu .menu-mobile-container .menu .menu-item.has-submenu > a.open::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.toggled .menu-toggle::before {
  content: "\f00d";
  font-weight: 900;
  font-family: "Font Awesome 6 Free";
  font-size: 30px;
  color: #204877;
}

.toggled .menu-menu-main-container {
  display: block;
  top: 80px;
}

.toggled .menu-menu-main-container #primary-menu {
  padding-top: 30px;
}

.menu-toggle ul,
.main-navigation.toggled ul {
  display: block;
}

.wp-block-tag-cloud {
  padding: 5px 5px 10px 30px;
}

/* drawer menu */
body header .checkbox {
  display: none;
}

.toggle {
  position: fixed;
  top: 5px;
  right: 6px;
  z-index: 40;
  display: block;
  width: 24px;
  height: 18px;
  cursor: pointer;
  padding: 20px;
}

.toggle span,
.toggle span::before,
.toggle span::after {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 0px;
  display: block;
  margin: auto;
  width: 24px;
  height: 3px;
  background-color: #1c313d;
  transition: all 0.4s;
}

.toggle span::before,
.toggle span::after {
  content: "";
}

.toggle span::before {
  top: 16px;
}

.toggle span::after {
  top: -16px;
}

.checkbox:checked ~ .toggle span,
.checkbox:checked ~ .toggle span::before,
.checkbox:checked ~ .toggle span::after {
  background-color: #111;
}

.checkbox:checked ~ .toggle span {
  background: transparent;
}

.checkbox:checked ~ .toggle span::before {
  top: 0;
  transform: rotate(-45deg);
}

.checkbox:checked ~ .toggle span::after {
  top: 0;
  transform: rotate(45deg);
}

.menu-toggle2 {
  width: 30px;
  height: 25px;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 10px;
  background: none;
  border: none;
  z-index: 99999;
}

.bar {
  width: 100%;
  height: 4px;
  border-radius: 50px;
  background-color: #000;
  margin: 4px 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューが開いた状態のスタイル */
.checkbox:checked ~ .menu-toggle2 .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.checkbox:checked ~ .menu-toggle2 .bar:nth-child(2) {
  opacity: 0;
}

.checkbox:checked ~ .menu-toggle2 .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background: #00000070;
  opacity: 0;
  transition: all 0.4s;
  pointer-events: none;
}

.checkbox:checked ~ .overlay {
  opacity: 0.6;
  pointer-events: auto;
}

.global_navi {
  position: fixed;
  top: 0;
  right: -340px;
  z-index: 30;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 320px;
  height: 100vh;
  background-color: #fff;
  transition: all 0.4s;
}

.global_navi ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.global_navi li a {
  padding: 25px 20px;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0px 1px 0px #fffefe;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;
}

.global_navi_lang a {
  padding: 25px 20px;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0px 1px 0px #fffefe;
  text-decoration: none;
  display: block;
  height: 100%;
  width: 100%;
}

.checkbox:checked ~ .global_navi {
  right: 0;
}

.navi_title {
  margin: 75px 24px 19px;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
}

.page_navi li {
  text-transform: uppercase;
  font-size: 14px;
}

.page_navi li a {
  display: block;
  padding: 21px 24px;
}

.page_navi li a:link, .page_navi li a:visited {
  color: #fff;
}

.page_navi li a:hover, .page_navi li a:active {
  background-color: #fff;
  color: #000;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
  /*
	.menu-menu-main-container {
		width: 100%;
		position: fixed;
		height: 100%;
		z-index: 9999;
		top: 0;
		left: 0;
		background: #fff;
	}
	*/
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

.section-tileforgood {
  padding: 10px;
}

/*******************************/
/* PC Nav *
/*******************************/
:root {
  --color-primary: #ffdada;
  --color-secondary: #75757c;
  --color-dark: #1d2c17;
  --color-light: #f5f5f5;
  --font-family-primary: "Roboto Mono", monospace;
  --font-family-secondary: "Rubik Mono One", sans-serif;
  --td: 150ms;
  --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  margin: 0 auto;
  max-width: 45rem;
  padding: 1rem;
}

.page-container > * + * {
  margin-top: 1.5rem;
}

.nav-main {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: -100%;
  position: fixed;
  transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2);
  width: 100%;
  z-index: 99;
}

.nav-main::before, .nav-main::after {
  content: "";
  background-color: var(--color-primary);
  height: 50%;
  left: 0;
  position: absolute;
  transform: translateX(-110%);
  transform-origin: 0 50%;
  transition: transform calc(var(--td) * 2) var(--td) var(--te);
  width: 100%;
  z-index: -100;
}

.nav-main::before {
  top: 0;
}

.nav-main::after {
  bottom: 0;
}

.nav-main .menu__item {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity var(--td) var(--te), transform var(--td) var(--te);
}

[id="main-navigation-toggle"] {
  opacity: 0;
  position: fixed;
  top: -100%;
}

[id="main-navigation-toggle"] ~ label {
  display: none;
  cursor: pointer;
  position: fixed;
  /*		right: 1rem; 
		top: 1rem;*/
  top: 50%;
  left: 20px;
  z-index: 100;
}

@media (min-width: 768px) {
  [id="main-navigation-toggle"] ~ label {
    display: block;
  }
}

[id="main-navigation-toggle"] ~ label span {
  display: block;
  height: 2rem;
  padding: 1.5rem;
  position: relative;
  transition: transform calc(var(--td) * 3) var(--te);
  width: 4rem;
}

[id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after {
  background-color: var(--color-dark);
  bottom: 0;
  content: "";
  height: 6px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  transition: transform calc(var(--td) * 3) var(--te);
  top: 0;
  width: calc(100% - 1rem);
}

[id="main-navigation-toggle"] ~ label span::before {
  transform: rotate(0) translateY(-100%);
}

[id="main-navigation-toggle"] ~ label span::after {
  transform: rotate(0) translateY(100%);
}

#main-navigation {
  display: none;
}

@media (min-width: 576px) {
  #main-navigation {
    display: block;
  }
}

[id="main-navigation-toggle"]:checked ~ label span {
  transform: rotate(1turn);
}

[id="main-navigation-toggle"]:checked ~ label span::before {
  transform: rotate(45deg);
}

[id="main-navigation-toggle"]:checked ~ label span::after {
  transform: rotate(-45deg);
}

[id="main-navigation-toggle"]:checked ~ .nav-main {
  left: 0;
  transition: transform 0s;
}

[id="main-navigation-toggle"]:checked ~ .nav-main::before, [id="main-navigation-toggle"]:checked ~ .nav-main::after {
  transform: translateX(0);
  transition-delay: 0s;
}

[id="main-navigation-toggle"]:checked ~ .nav-main::after {
  transition-delay: calc(var(--td) / 2);
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(1) {
  transition-delay: calc(var(--td) * 2 * (1 * 0.25));
  z-index: -1;
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(2) {
  transition-delay: calc(var(--td) * 2 * (2 * 0.25));
  z-index: -2;
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(3) {
  transition-delay: calc(var(--td) * 2 * (3 * 0.25));
  z-index: -3;
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(4) {
  transition-delay: calc(var(--td) * 2 * (4 * 0.25));
  z-index: -4;
}

[id="main-navigation-toggle"]:checked ~ .nav-main .menu__item:nth-child(5) {
  transition-delay: calc(var(--td) * 2 * (5 * 0.25));
  z-index: -5;
}

.menu {
  position: relative;
  /* text-align: center; */
  z-index: 1;
}

.menu > .menu__item {
  font-family: var(--font-family-secondary);
  font-size: 10vmin;
}

.submenu {
  left: 0;
  opacity: 0;
  position: absolute;
  transform: translateY(-10%);
  top: 100%;
  width: 100%;
  visibility: hidden;
  z-index: 2;
}

.submenu .menu__item {
  font-family: var(--font-family-primary);
  font-size: 3.5vmin;
  width: 100%;
}

.submenu .menu__link {
  color: var(--color-secondary);
  text-shadow: 1px 1px 0 var(--color-primary), 2px 2px 0 var(--color-primary);
}

.submenu .menu__link::before, .submenu .menu__link::after {
  display: none;
}

.menu__item {
  display: block;
  position: relative;
}

.menu__item:hover .menu__link::before, .menu__item:hover .menu__link::after {
  animation: blink 1s var(--td) steps(1, end) forwards infinite;
  transform: translateX(calc(100% - 0.5rem));
  transition-duration: calc(var(--td) * 3);
}

.menu__item:hover .menu__link::after {
  transition-delay: calc(var(--td) / 2);
}

.menu__item:hover .submenu {
  opacity: 1;
  transform: translateY(0);
  transition: transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te), visibility 0s calc(var(--td) * 3);
  visibility: visible;
}

.menu__link {
  color: var(--color-dark);
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  padding: 0.5rem 1rem 0.125rem;
  position: relative;
  text-decoration: none;
  transition: color var(--td) var(--te), opacity var(--td) var(--te), transform var(--td) var(--te);
  z-index: 1;
}

.menu__link::before, .menu__link::after {
  content: "";
  background-color: var(--color-light);
  height: 50%;
  left: 0;
  position: absolute;
  transform: translateX(-110%);
  transform-origin: 0 50%;
  transition: transform 0s var(--te);
  width: 100%;
  z-index: -1;
}

.menu__link::before {
  top: 0;
}

.menu__link::after {
  bottom: 0;
}

.menu:not(:focus-within):not(:hover) .menu__item .menu__link {
  opacity: 1;
  transform: translate(0, 0);
}

.menu__item {
  --pull: 30%;
}

.menu__item .menu__link {
  opacity: 0.25;
  transition-duration: calc(var(--td) * 3);
  transform: translate(0, calc(var(--pull) * -1));
}

.menu__item .submenu .menu__link {
  opacity: 1;
}

.menu__item:hover > .menu__link {
  color: var(--color-secondary);
  opacity: 1;
  transform: translate(0, 0);
}

.menu__item:hover > .menu__link:hover {
  color: var(--color-light);
  transition-delay: 0s;
}

.menu__item:hover ~ .menu__item > .menu__link {
  transition-duration: calc(var(--td) * 3);
  transform: translate(0, var(--pull));
}

@keyframes blink {
  50%,
  100% {
    opacity: 0;
  }
}

.menu_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.menu_left {
  left: 0;
}

.menu_left,
.menu_right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.menu_left_inner,
.menu_right_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.menu_logo {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 35%;
  left: 0;
  margin: -65px 0 0 0;
  font-size: 0;
  line-height: 0;
}

.menu_logo a {
  display: inline-block;
  width: auto;
  font-size: 0;
  line-height: 0;
}

.menu_logo a img {
  display: inline-block;
  width: auto;
  height: 170px;
  margin: 30px 0 0 0;
}

.menu_right {
  left: 50%;
}

.menu_left,
.menu_right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
}

.menu_left_inner,
.menu_right_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.menu_main {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  margin: -208px 0 0 0;
}

.menu_sns {
  position: absolute;
  bottom: 60px;
  right: 230px;
  text-align: right;
  font-size: 0;
  line-height: 0;
}

.menu_sns div {
  display: inline-block;
  width: 16px;
  margin: 0 0 0 20px;
}

/* Posts and pages
--------------------------------------------- */
a {
  text-decoration: none;
  color: #545454;
  color: inherit;
}

.post,
.page,
#page {
  margin: 0;
}

.post a img:hover,
.page a img:hover,
#page a img:hover {
  opacity: 0.8;
}

.post h2,
.page h2,
#page h2 {
  font-size: 24px;
}

@media (min-width: 768px) {
  .post h2,
  .page h2,
  #page h2 {
    font-size: 28px;
  }
}

.post h2.title-l,
.page h2.title-l,
#page h2.title-l {
  font-size: 30px;
}

@media (min-width: 768px) {
  .post h2.title-l,
  .page h2.title-l,
  #page h2.title-l {
    font-size: 54px;
    margin: 0;
    line-height: 1.2;
    margin-bottom: 20px;
  }
}

.post h2.title-m,
.page h2.title-m,
#page h2.title-m {
  font-size: 26px;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .post h2.title-m,
  .page h2.title-m,
  #page h2.title-m {
    font-size: 38px;
    margin: 0;
    line-height: 1.2;
  }
}

.post h3.title-l,
.page h3.title-l,
#page h3.title-l {
  font-size: 24px;
}

@media (min-width: 768px) {
  .post h3.title-l,
  .page h3.title-l,
  #page h3.title-l {
    font-size: 34px;
    margin: 0;
  }
}

.post h3.title-m,
.page h3.title-m,
#page h3.title-m {
  font-size: 22px;
}

@media (min-width: 768px) {
  .post h3.title-m,
  .page h3.title-m,
  #page h3.title-m {
    font-size: 30px;
    margin: 0;
    margin-bottom: 30px;
  }
}

.post h3.headline,
.page h3.headline,
#page h3.headline {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 17px;
  border-bottom: 2px solid #303030;
  color: #303030;
}

.post h3.headline-s,
.page h3.headline-s,
#page h3.headline-s {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 2px solid #303030;
  color: #303030;
}

.post h4.headline,
.page h4.headline,
#page h4.headline {
  color: #303030;
  position: relative;
  font-size: 20px;
  padding-bottom: 7px;
  border-bottom: 1px solid #303030;
  display: block;
  font-weight: bold;
  width: 100%;
}

@media (min-width: 768px) {
  .post h4.headline,
  .page h4.headline,
  #page h4.headline {
    width: 100%;
  }
}

.post .top-header,
.page .top-header,
#page .top-header {
  margin: 10px 0px -10px 0px;
}

.post .subpage article,
.page .subpage article,
#page .subpage article {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  margin-bottom: 50px;
  -webkit-box-shadow: 0px 0px 5px 0px #1c313d59;
  -moz-box-shadow: 0px 0px 5px 0px #1c313d59;
  box-shadow: 0px 0px 5px 0px #1c313d59;
  padding: 10px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .post .subpage article,
  .page .subpage article,
  #page .subpage article {
    padding: 60px 60px 60px;
    margin-top: 40px;
  }
}

.post .subpage article .content-section,
.page .subpage article .content-section,
#page .subpage article .content-section {
  border: 1px solid #1c313d59;
  padding: 10px;
  border-radius: 20px;
}

.post .subpage article a,
.page .subpage article a,
#page .subpage article a {
  text-decoration: none;
}

.post-wrapper .post-thumbnail {
  position: relative;
  /*
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 140px;
			background-color: rgba(0, 0, 0, 0.4);
		}
		*/
}

.post-wrapper .post-thumbnail img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.left-right-section {
  padding: 0 !important;
}

.left-right-section .left-block {
  height: 450px;
}

@media (min-width: 768px) {
  .left-right-section .left-block {
    height: 450px;
  }
}

.left-right-section .left-block img {
  object-fit: cover;
  height: 300px;
}

@media (min-width: 768px) {
  .left-right-section .left-block img {
    height: 450px;
  }
}

.left-right-section .right-block {
  height: 450px;
}

@media (min-width: 768px) {
  .left-right-section .right-block {
    height: 450px;
  }
}

.left-right-section .right-block img {
  object-fit: cover;
  height: 450px;
}

@media (min-width: 768px) {
  .left-right-section .right-block img {
    height: 450px;
  }
}

.news,
#news,
#news-school {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.news .post-item,
#news .post-item,
#news-school .post-item {
  padding-bottom: 4px;
  line-height: 1;
}

.news .post-item a:hover,
#news .post-item a:hover,
#news-school .post-item a:hover {
  opacity: 0.7;
}

.news h4,
#news h4,
#news-school h4 {
  margin: 5px 0px;
}

.news .post-item-title,
#news .post-item-title,
#news-school .post-item-title {
  margin: 0;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  padding-bottom: 4px;
  padding-top: 4px;
}

.news .post-item-title a,
#news .post-item-title a,
#news-school .post-item-title a {
  text-decoration: none;
}

.news .post-item-ex,
#news .post-item-ex,
#news-school .post-item-ex {
  display: inline-flex;
  font-size: 13px;
}

.post-list {
  display: flex;
  margin: 0 auto;
  max-width: 1100px;
}

.post-list-item {
  width: 33%;
  margin: 20px;
}

.post-list-item img {
  height: 220px;
  width: 320px;
  object-fit: cover;
}

.page-wrapper {
  margin: 0 auto;
  display: flex;
  width: 100%;
  padding-top: 70px;
}

.page-wrapper .entry-header {
  display: none;
}

@media (min-width: 768px) {
  .page-wrapper {
    width: 1100px;
    padding-top: 100px;
  }
}

.page-wrapper main {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: block;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .page-wrapper main {
    max-width: 1100px;
    width: 1100px;
    margin: 0 auto;
    display: block;
    margin-bottom: 40px;
  }
}

.page-wrapper main h1,
.page-wrapper main h2,
.page-wrapper main h3,
.page-wrapper main p {
  padding: 10px;
}

@media (min-width: 576px) {
  .page-wrapper main h1,
  .page-wrapper main h2,
  .page-wrapper main h3,
  .page-wrapper main p {
    padding: 0px;
  }
}

.post-wrapper {
  margin: 0 auto;
  display: flex;
  padding-top: 45px;
  /*
	padding: 6px;
  */
  /* post-wrapper  */
}

@media (min-width: 768px) {
  .post-wrapper {
    padding-top: 100px;
  }
}

.post-wrapper main {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: block;
}

@media (min-width: 768px) {
  .post-wrapper main {
    float: left;
    /* max-width: 700px; */
  }
}

.post-wrapper main h1,
.post-wrapper main h2,
.post-wrapper main h3,
.post-wrapper main p {
  padding: 10px;
}

@media (min-width: 576px) {
  .post-wrapper main h1,
  .post-wrapper main h2,
  .post-wrapper main h3,
  .post-wrapper main p {
    padding: 0px;
  }
}

.post-wrapper main h3.title-l {
  font-size: 28px;
}

@media (min-width: 768px) {
  .post-wrapper {
    width: 1200px;
  }
}

.post-wrapper .entry-content {
  max-width: 100%;
  float: left;
}

@media (min-width: 768px) {
  .post-wrapper .entry-content {
    max-width: 76%;
    width: 76%;
  }
}

.post-wrapper .page-title {
  font-size: 22px;
}

.post-wrapper .categories {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.post-wrapper .categories .child_categories {
  list-style: none;
  padding-left: 0px;
  margin-left: 10px;
  /*
			display: flex;
			*/
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 14px;
}

@media (min-width: 768px) {
  .post-wrapper .categories .child_categories {
    display: flex;
  }
}

.post-wrapper .categories .child_categories li {
  width: calc(95% / 4);
  height: 100%;
  /*
				border: 1px solid #567498;
				*/
  margin: 4px 2px;
  padding: 2px;
  font-size: 10px;
  display: inline-block;
}

@media (min-width: 768px) {
  .post-wrapper .categories .child_categories li {
    width: calc(98% / 3);
    font-size: 15px;
  }
}

.post-wrapper .categories .child_categories li img {
  width: 100%;
}

.post-wrapper .categories .child_categories li span {
  padding-left: 5px;
  display: block;
}

.post-wrapper .sidebar {
  float: left;
  max-width: 100%;
  padding-top: 20px;
}

@media (min-width: 768px) {
  .post-wrapper .sidebar {
    max-width: 18%;
  }
}

@media (min-width: 768px) {
  .post-wrapper .sidebar {
    padding-top: 30px;
    margin: 0px 0px 0px 40px;
  }
}

.post-wrapper .sidebar h2 {
  margin: 0;
  font-size: 24px !important;
}

.post-wrapper .sidebar .popular-posts h2 {
  padding-bottom: 20px;
}

.post-wrapper .sidebar .widget ul {
  padding-left: 10px;
}

.post-wrapper .sidebar .widget .children {
  padding-top: 10px;
  padding-left: 15px;
}

.post-wrapper .no-img {
  width: 100%;
  height: 260px;
  text-align: center;
  background: #24b500;
  display: block;
  padding: 100px 0;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.post-wrapper .pagination {
  margin: 10px 0 40px 0px;
  display: block;
  width: 90%;
  /*
		.prev,
		.next {
			background: transparent;
			box-shadow: none;
			color: #4a8eda;
		}
*/
}

.post-wrapper .pagination a {
  text-decoration: none;
}

.post-wrapper .pagination .prev,
.post-wrapper .pagination .next,
.post-wrapper .pagination .page-numbers {
  display: inline-block;
  margin-right: 20px;
  padding: 15px 25px;
  color: #333;
  border-radius: 3px;
  box-shadow: 0 3px 3px #999;
  background: #fff;
}

.post-wrapper .pagination .prev:hover,
.post-wrapper .pagination .next:hover,
.post-wrapper .pagination .page-numbers:hover {
  background: #161515;
  color: #fff !important;
}

.post-wrapper .pagination .current {
  padding: 15px 25px;
  background: #161515;
  color: #fff;
}

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

.post-wrapper .articles {
  width: 94%;
  margin-top: 0;
  margin-right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .post-wrapper .articles {
    width: 750px;
  }
}

.post-wrapper .articles article {
  width: 100%;
  border-bottom: none;
  /*			margin: 0 auto; */
  /* border-bottom: 1px solid #ccc; */
  background: #fff;
}

@media (min-width: 768px) {
  .post-wrapper .articles article {
    width: calc(93% / 2);
    /*width: 100%;*/
    margin-right: 15px;
    margin-bottom: 20px;
    padding: 0px;
  }
}

.post-wrapper .articles article .post-thumbnail img {
  max-width: 100%;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.post-wrapper .articles article .entry-title {
  width: 100%;
  height: 60px;
  margin-bottom: 25px;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-weight: bold;
}

@media (min-width: 768px) {
  .post-wrapper .articles article .entry-title {
    font-size: 18px;
    height: auto;
    margin-bottom: 0px;
  }
}

.post-wrapper .articles article .entry-title a {
  text-decoration: none;
}

.post-wrapper .articles article .entry-comment {
  font-size: 12px;
}

/*.archive-wrapper */
.archive-wrapper {
  margin: 0 auto;
  display: block;
  padding-top: 45px;
  /*
	padding: 6px;
*/
  /*.archive-wrapper */
}

@media (min-width: 768px) {
  .archive-wrapper {
    padding-top: 100px;
    display: flex;
  }
}

.archive-wrapper main {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: block;
}

@media (min-width: 768px) {
  .archive-wrapper main {
    float: left;
    max-width: 720px;
  }
}

.archive-wrapper main h1,
.archive-wrapper main h2,
.archive-wrapper main h3,
.archive-wrapper main p {
  padding: 10px;
}

@media (min-width: 576px) {
  .archive-wrapper main h1,
  .archive-wrapper main h2,
  .archive-wrapper main h3,
  .archive-wrapper main p {
    padding: 0px;
  }
}

.archive-wrapper main h3.title-l {
  font-size: 28px;
}

@media (min-width: 768px) {
  .archive-wrapper {
    width: 1100px;
  }
}

.archive-wrapper .page-title {
  font-size: 22px;
}

.archive-wrapper .categories {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.archive-wrapper .categories .child_categories {
  list-style: none;
  padding-left: 0px;
  margin-left: 10px;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  font-size: 14px;
}

.archive-wrapper .categories .child_categories li {
  height: 100%;
  margin: 4px 2px;
  padding: 2px;
  height: 100%;
  margin: 4px 2px;
  padding: 2px;
  border-left: 10px solid #24b500;
  border: 2px solid #24b500;
  background: #fff;
  border-left: 6px solid #24b500;
  transition: 0.3s ease;
}

@media (min-width: 768px) {
  .archive-wrapper .categories .child_categories li {
    font-size: 15px;
  }
}

.archive-wrapper .categories .child_categories li img {
  width: 100%;
}

.archive-wrapper .categories .child_categories li span {
  padding: 0px 5px;
  display: block;
}

.archive-wrapper .categories .child_categories li:hover {
  background: #24b500;
}

.archive-wrapper .categories .child_categories li a:hover {
  color: #fff;
}

.archive-wrapper .sidebar {
  max-width: 330px;
  padding-top: 20px;
}

@media (min-width: 768px) {
  .archive-wrapper .sidebar {
    padding-top: 30px;
    margin: 0px 0px 0px 40px;
  }
}

.archive-wrapper .sidebar h2 {
  margin: 0;
  font-size: 24px !important;
}

.archive-wrapper .sidebar .popular-posts h2 {
  padding-bottom: 20px;
}

.archive-wrapper .sidebar .widget ul {
  padding-left: 10px;
}

.archive-wrapper .sidebar .widget ul li {
  border: none;
  padding-bottom: 0;
}

.archive-wrapper .sidebar .widget .children {
  padding-top: 10px;
  padding-left: 15px;
}

.archive-wrapper .sidebar li {
  padding-right: 0;
  border: none;
}

.archive-wrapper .sidebar li a {
  display: block;
  width: 100%;
  background: #fff;
  padding: 10px;
  border: 2px solid #24b500;
  border-left: 8px solid #24b500;
  margin: 10px;
  opacity: 1;
}

.archive-wrapper .sidebar li a:hover {
  background: #24b500;
  color: #fff;
}

.archive-wrapper .sidebar li a.active {
  background: #24b500;
  color: #fff;
}

.archive-wrapper .no-img {
  width: 100%;
  height: 260px;
  text-align: center;
  background: #caffbd;
  display: block;
  padding: 40px 0;
  color: #226534;
  font-weight: bold;
  font-size: 20px;
}

.archive-wrapper .no-img img {
  width: 220px;
}

.archive-wrapper .pagination {
  margin: 10px 0 40px 0px;
  display: block;
  width: 99%;
  /*
		.prev,
		.next {
			background: transparent;
			box-shadow: none;
			color: #4a8eda;
		}
*/
}

.archive-wrapper .pagination a {
  text-decoration: none;
}

.archive-wrapper .pagination .prev,
.archive-wrapper .pagination .next,
.archive-wrapper .pagination .page-numbers {
  display: inline-block;
  margin-right: 0px;
  padding: 15px 15px;
  color: #333;
  border-radius: 3px;
  box-shadow: 0 3px 3px #999;
  background: #fff;
}

.archive-wrapper .pagination .prev:hover,
.archive-wrapper .pagination .next:hover,
.archive-wrapper .pagination .page-numbers:hover {
  background: #24b500;
  color: #fff !important;
}

.archive-wrapper .pagination .current {
  padding: 15px 15px;
  background: #24b500;
  color: #fff;
}

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

.archive-wrapper .articles {
  width: 94%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .archive-wrapper .articles {
    width: 720px;
    margin-top: 0;
    margin-right: 0;
  }
}

.archive-wrapper .articles article {
  width: 100%;
  border-bottom: none;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background: #fff;
}

@media (min-width: 768px) {
  .archive-wrapper .articles article {
    width: calc(95% / 2);
    /*width: 100%;*/
    margin-right: 15px;
    margin-bottom: 20px;
    padding: 0px;
  }
}

.archive-wrapper .articles article .post-thumbnail img {
  max-width: 100%;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.archive-wrapper .articles article .entry-title {
  width: 100%;
  height: auto;
  margin-bottom: 25px;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (min-width: 768px) {
  .archive-wrapper .articles article .entry-title {
    font-size: 18px;
    min-height: 40px;
    margin-bottom: 0px;
    font-weight: bold;
    height: auto;
  }
}

.archive-wrapper .articles article .entry-title a {
  text-decoration: none;
}

.archive-wrapper .articles article .entry-comment {
  font-size: 12px;
}

.archive-wrapper .articles article .entry-textarea {
  position: relative;
  padding: 10px;
}

.archive-wrapper .articles article .entry-textarea a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.archive-wrapper .articles article .slugs {
  display: none;
  /* 一旦非表示 */
}

.archive-wrapper .articles article .slugs .slug {
  padding: 1px 10px;
  background: #2d4d56;
  display: inline;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
  font-weight: bold;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  /*	margin: 1.5em 0 0; */
}

.entry-content p a {
  color: #4169e1;
  text-decoration: underline;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* post list */
#works .swiper-slide,
#products .swiper-slide,
#tech .swiper-slide,
#diary .swiper-slide,
#blog .swiper-slide {
  /*
		margin: 10px;
    */
}

#works .swiper-slide a,
#products .swiper-slide a,
#tech .swiper-slide a,
#diary .swiper-slide a,
#blog .swiper-slide a {
  text-decoration: none;
  color: #111;
}

#works .swiper-slide .post,
#products .swiper-slide .post,
#tech .swiper-slide .post,
#diary .swiper-slide .post,
#blog .swiper-slide .post {
  background: #fff;
  margin: 10px;
  /*
      -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      */
}

#works .swiper-slide .post h2,
#products .swiper-slide .post h2,
#tech .swiper-slide .post h2,
#diary .swiper-slide .post h2,
#blog .swiper-slide .post h2 {
  font-size: 24px;
}

@media (min-width: 768px) {
  #works .swiper-slide .post h2,
  #products .swiper-slide .post h2,
  #tech .swiper-slide .post h2,
  #diary .swiper-slide .post h2,
  #blog .swiper-slide .post h2 {
    font-size: 27px;
  }
}

#works .swiper-slide .post img,
#products .swiper-slide .post img,
#tech .swiper-slide .post img,
#diary .swiper-slide .post img,
#blog .swiper-slide .post img {
  height: 300px;
  width: 100%;
  object-fit: cover;
  padding: 0;
  border-radius: 10px;
}

@media (min-width: 768px) {
  #works .swiper-slide .post img,
  #products .swiper-slide .post img,
  #tech .swiper-slide .post img,
  #diary .swiper-slide .post img,
  #blog .swiper-slide .post img {
    height: 300px;
  }
}

@media (min-width: 1500px) {
  #works .swiper-slide .post img,
  #products .swiper-slide .post img,
  #tech .swiper-slide .post img,
  #diary .swiper-slide .post img,
  #blog .swiper-slide .post img {
    height: 250px;
  }
}

#works .swiper-slide .post .post-text,
#products .swiper-slide .post .post-text,
#tech .swiper-slide .post .post-text,
#diary .swiper-slide .post .post-text,
#blog .swiper-slide .post .post-text {
  padding: 6px;
  min-height: 125px;
}

#works .swiper-slide .post .post-title,
#products .swiper-slide .post .post-title,
#tech .swiper-slide .post .post-title,
#diary .swiper-slide .post .post-title,
#blog .swiper-slide .post .post-title {
  font-size: 20px;
  text-align: left;
  color: #111;
  font-weight: 700;
}

#works .swiper-slide .post .post-comment,
#products .swiper-slide .post .post-comment,
#tech .swiper-slide .post .post-comment,
#diary .swiper-slide .post .post-comment,
#blog .swiper-slide .post .post-comment {
  font-size: 13px;
  text-align: left;
  color: #111;
  font-weight: 500;
}

#works .swiper-slide .post .post-date,
#products .swiper-slide .post .post-date,
#tech .swiper-slide .post .post-date,
#diary .swiper-slide .post .post-date,
#blog .swiper-slide .post .post-date {
  font-size: 10px;
  text-align: left;
  color: #111;
  font-weight: 700;
}

#works .swiper-slide .post .price,
#products .swiper-slide .post .price,
#tech .swiper-slide .post .price,
#diary .swiper-slide .post .price,
#blog .swiper-slide .post .price {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
}

#works .swiper-slide .post .category,
#products .swiper-slide .post .category,
#tech .swiper-slide .post .category,
#diary .swiper-slide .post .category,
#blog .swiper-slide .post .category {
  font-size: 12px;
  text-align: left;
}

#products .post-date {
  display: none;
}

#category .swiper-slide {
  text-align: left;
  /*		margin: 10px; */
  min-height: 530px;
  /*		background: #fff; */
}

#category .swiper-slide .category {
  margin: 10px;
  background: #fff;
}

#category a {
  text-decoration: none;
  color: #111;
}

#category .category-text {
  padding: 10px 10px 20px 10px;
}

#category .category-name {
  font-size: 18px;
  /* font-weight: 700; */
  margin-bottom: 14px;
  text-align: center;
  max-height: 30px;
  min-height: 30px;
}

#category .category-description {
  font-size: 15px;
  min-height: 60px;
}

#worksslider {
  max-width: 1100px;
  margin: 0 auto;
}

#worksslider img {
  object-fit: cover;
  width: 800px;
  height: 500px;
}

#worksslider .post-text {
  position: absolute;
  top: 452px;
  left: -100px;
  background: #fff;
  padding: 30px;
}

#worksslider .swiper-slide {
  height: 700px;
}

.grid-container {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 1.5rem;
}

.grid-container .grid-wrapper {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.grid-container .grid-wrapper .grid-item {
  height: 100px;
  width: 100%;
  border: 2px solid #333333;
  min-height: 100px;
  background: #fff;
  transition: 0.3s ease;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.grid-container .grid-wrapper .grid-item:hover {
  /* background: #666666; */
}

@media (min-width: 768px) {
  .grid-container .grid-wrapper .grid-item {
    width: calc(33.33333% - 2rem);
  }
}

.grid-container .grid-wrapper .grid-item a {
  text-decoration: none;
  color: #111;
  display: block;
  height: 100%;
  width: 100%;
  transition: 0.5s ease;
}

.grid-container .grid-wrapper .grid-item a:hover {
  /* color: #fff; */
  opacity: 0.7;
}

.grid-container .grid-wrapper .grid-item h5 {
  text-align: center;
  font-size: 20px;
  padding: 12px 0px 2px 0px;
  margin: 0;
  line-height: 22px;
}

@media (min-width: 992px) {
  .grid-container .grid-wrapper .grid-item h5 {
    font-size: 28px;
    line-height: 29px;
  }
}

.grid-container .grid-wrapper .grid-item .head {
  width: 15%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #333;
  color: #fff;
}

.grid-container .grid-wrapper .grid-item .copy {
  display: inline-flex;
  width: 80%;
  padding-left: 7px;
  vertical-align: middle;
}

.grid-container .grid-wrapper .grid-item ul.subcats {
  margin: 0px -2px 0px 15px;
  z-index: 999;
  display: block;
  position: relative;
  display: none;
}

.grid-container .grid-wrapper .grid-item ul.subcats li {
  display: block;
  height: 54px;
  width: 100%;
  /* border: 2px solid #333333; */
  background: #fff;
  border-bottom: 1px solid #fff;
  transition: 0.3s ease;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.grid-container .grid-wrapper .grid-item ul.subcats li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #666666;
  padding: 10px;
}

.grid-container .grid-wrapper-even {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.grid-container .grid-wrapper-even .grid-item {
  height: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .grid-container .grid-wrapper-even .grid-item {
    width: calc(23% - 2rem);
  }
}

.grid-container .grid-wrapper-even .grid-item a {
  text-decoration: none;
  color: #111;
}

.grid-container .grid-wrapper-even .grid-item a img {
  max-width: 190px;
  margin: 0 auto;
  display: block;
}

.grid-container .grid-wrapper-even .grid-item h5 {
  text-align: center;
  font-size: 19px;
  padding: 0;
  margin: 0;
}

.contacts .copy {
  min-height: 240px;
  font-size: 15px;
}

.contacts .btn-contact {
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  /* background-color: #000!important; */
  border: 1px solid #000;
  outline: none;
  text-align: center;
  padding: 8px;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.contacts .btn-contact:hover {
  background-color: #000;
}

.contacts .btn-contact:hover a {
  color: #fff !important;
}

.btn-detail {
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #000;
  outline: none;
  font-size: 12px;
  text-align: center;
  max-width: 250px;
  padding: 5px 10px;
  margin: 0 auto;
  -webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.btn-detail:hover {
  background-color: #000;
}

.btn-detail:hover a {
  color: #fff !important;
}

.section-tilebyspace,
.section-blog,
.section-tiles {
  background-color: #ebeeee;
  padding: 10px 10px 50px 10px;
}

.section-work {
  background: #ebeeee;
  padding-top: 15px;
  padding-bottom: 50px;
}

.swiper-wrapper {
  margin-bottom: -15px;
}

.site-main .entry-meta,
.site-main .entry-footer,
.site-main .nav-links {
  display: none;
}

.site-main .entry-title {
  font-size: 1.3em;
}

@media (min-width: 768px) {
  .site-main .entry-title {
    font-size: 2em;
  }
}

.site-main .service-title {
  border-bottom: 2px solid #aaa;
}

.site-main .swiper-button-next,
.site-main .swiper-button-prev {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* border: 1px solid #e6e6e696;
		background: #d4d4d475; */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 4px;
  color: #00000087;
}

@media (min-width: 576px) {
  .site-main .swiper-button-next,
  .site-main .swiper-button-prev {
    width: 60px;
    height: 60px;
  }
}

.site-main .swiper-button-next::after,
.site-main .swiper-button-prev::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 5.6em;
}

.site-main .swiper-button-next::after {
  content: "\f054";
}

.site-main .swiper-button-prev::after {
  content: "\f053";
}

/* wordpress figure image */
.is-style-default {
  position: relative;
}

.title-on-image {
  position: relative;
}

.title-on-image img {
  height: 360px;
  width: auto;
  object-fit: cover;
  padding: 0;
  margin: 0;
}

@media (min-width: 576px) {
  .title-on-image img {
    height: 100%;
    width: 100%;
  }
}

.title-on-image figcaption {
  position: absolute;
  top: 25%;
  color: #000;
  text-align: center;
  background: #ffffffbd;
  padding: 0px 20px;
  width: 80%;
  margin: 0% 10%;
  font-weight: bold;
  /* border: 3px solid #111; */
  font-size: 25px;
  /* image caption figcaptionはpタグで囲む*/
}

@media (min-width: 576px) {
  .title-on-image figcaption {
    font-size: 30px;
    top: 35%;
  }
}

.title-on-image figcaption p {
  border: 3px solid #111;
  margin: 16px 0px;
  padding: 20px 10px;
}

/* concept */
#concept .text-box {
  width: 330px;
  margin: 0 auto;
}

/* workflow */
.flex-box {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: scroll;
}

@media (min-width: 768px) {
  .flex-box {
    overflow-x: auto;
  }
}

.flex-box .flex-item {
  width: calc(100% / 5);
  padding: 10px;
  min-width: 150px;
}

.flex-box .flex-image {
  position: relative;
}

.flex-box .flex-image::after {
  content: "\f054";
  position: absolute;
  right: -18px;
  top: 40%;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1.5em;
}

.flex-box .flex-image img {
  max-width: 130px;
  margin: 0 auto;
  display: block;
}

.flex-box .flex-image-last {
  position: relative;
}

.flex-box .flex-image-last img {
  max-width: 130px;
  margin: 0 auto;
  display: block;
}

.flex-box .flex-title {
  font-weight: bold;
  border-top: 15px solid #333;
  text-align: center;
  padding-bottom: 2px;
  border-right: 2px solid #333;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  font-size: 16px;
  line-height: 20px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-box .flex-description {
  border-right: 2px solid #333;
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  padding: 5px;
  height: 290px;
}

/* before -> after */
.before-after-img {
  position: relative;
  text-align: center;
  /* mobile時に中央寄せ */
}

.before-after-img::after {
  content: "\f309";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: red;
  font-size: 40px;
}

@media (min-width: 992px) {
  .before-after-img::after {
    content: "\f30b";
    position: absolute;
    right: -45px;
    top: 32%;
    font-size: 60px;
  }
}

/* figcaption */
.wp-block-columns figcaption {
  text-align: center;
}

/*
 * home-guide
 */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.guide-section {
  min-height: 880px;
}

@media (min-width: 576px) {
  .guide-section {
    min-height: 680px;
  }
}

.guide-section .guide-box {
  width: 100%;
  padding: 20px;
  color: #fff;
}

@media (min-width: 768px) {
  .guide-section .guide-box {
    width: calc(100% / 2);
    padding: 4rem 8.5% 6rem 4.5rem;
  }
}

.guide-section .guide-box.guide1 {
  background-image: url(../images/index/guide1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 680px;
}

@media (min-width: 768px) {
  .guide-section .guide-box.guide1 {
    height: 680px;
  }
}

.guide-section .guide-box.guide1:before {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
}

.guide-section .guide-box.guide2 {
  background-image: url(../images/index/guide2.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 680px;
}

@media (min-width: 768px) {
  .guide-section .guide-box.guide2 {
    height: 680px;
  }
}

.guide-section .guide-box.guide2:before {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: " ";
}

.guide-section .guide-box .guide-content {
  position: absolute;
  width: 90%;
}

@media (min-width: 768px) {
  .guide-section .guide-box .guide-content {
    width: 80%;
  }
}

.guide-section .guide-box .guide-title-en {
  font-size: 16px;
  letter-spacing: 0.04em;
}

.guide-section .guide-box .guide-title-ja {
  font-size: 3rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 0.8rem;
  font-feature-settings: "palt" 1;
}

.guide-section .guide-box .guide-list {
  margin: 0;
  width: 96%;
}

@media (min-width: 768px) {
  .guide-section .guide-box .guide-list {
    width: 80%;
  }
}

.guide-section .guide-box .guide-list li {
  list-style: none;
}

.guide-section .guide-box .guide-list li:not(:last-child) {
  margin: 0 0 1rem;
  display: block;
}

.guide-section .guide-box .guide-list a {
  background: rgba(255, 255, 255, 0.1) url(../svg/arrows1.svg) no-repeat right 2rem center/auto 1rem;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 1px;
  color: #fff !important;
  display: block;
  padding: 0.4rem 3rem 0.2rem 1.5rem;
  font-size: 22px;
}

.guide-section .guide-box .guide-list a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.guide-section .guide-box .guide-text {
  /* min-height: 11.2rem; */
  font-size: 20px;
}

/* TODO */
.guide-list-mini {
  opacity: 0;
  transition: all 0.3s;
}

.guide-list-mini li {
  list-style: none;
  display: inline-block;
}

.guide-list-mini a {
  background: rgba(255, 255, 255, 0.1) url(../svg/arrows2.svg) no-repeat right 0px center/auto 10px;
  border: 2px solid #404040;
  border-radius: 1px;
  color: #404040 !important;
  display: block;
  padding: 5px 10px 3px 5px;
  font-size: 0.7rem;
}

.sticky-menu {
  opacity: 1;
  display: block;
  position: fixed;
  z-index: 999;
  top: 60px;
  background: #fff;
  margin: 0;
  width: 100%;
  height: 40px;
  padding: 0;
  text-align: center;
}

/*
 * Company page
 */
.greetings {
  max-width: 800px;
  margin: 0 auto;
  padding: 15px;
}

.border {
  position: relative;
  font-size: 18px;
}

.border:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: solid 40px #18401c;
  animation: border_anim 3s linear forwards;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

.max1000 {
  max-width: 1000px;
  margin: 0 auto;
}

/* reroomtec */
/* sticky container */
.sticky-container {
  max-width: 1400px;
  margin: 0 auto;
}

.sticky-container .sticky {
  padding: 10px;
}

@media (min-width: 768px) {
  .sticky-container .sticky {
    position: sticky;
    top: 150px;
    height: 100%;
    padding: 20px 0px 0 40px;
  }
}

.sticky-container .content {
  position: relative;
  padding: 10px;
}

/* feature */
.feature {
  max-width: 980px;
  margin: 0 auto;
}

.feature img {
  width: 160px;
}

/* suppliers */
.suppliers {
  max-width: 980px;
  margin: 0 auto;
}

.suppliers img {
  width: 250px;
}

/* about-top */
.about-top {
  position: relative;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.about-top .left {
  padding: 20px;
  flex-basis: 50% !important;
  box-sizing: border-box;
  z-index: 2;
  flex-grow: 0 !important;
}

.about-top .right {
  background: #fff;
  overflow: hidden;
  padding: 10px;
}

@media (min-width: 768px) {
  .about-top .right {
    width: 60%;
    margin: 0;
    position: absolute;
    top: 10px;
    right: 0;
    padding: 80px 0px 0px 200px;
    height: 97%;
  }
}

.about-top .right .background-text {
  display: none;
  position: absolute;
  left: -24px;
  bottom: -310px;
  font-size: 250px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(81, 210, 143, 0.07);
  word-break: normal;
  pointer-events: none;
  font-family: "Anton", sans-serif;
}

@media (min-width: 768px) {
  .about-top .right .background-text {
    display: block;
  }
}

/* service-section */
#service-section img {
  max-width: 100%;
  width: 600px;
}

/* contact-section */
#contact-area {
  max-width: 1000px;
  margin: 0 auto;
}

#contact-area div {
  border-radius: 10px;
  position: relative;
  padding: 10px;
  transition: all 0.2s;
}

#contact-area div.shadow {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

#contact-area div.shadow:hover {
  opacity: 0.8;
  -webkit-box-shadow: 0 0;
  box-shadow: 0 0;
}

#contact-area p {
  margin-bottom: 15px;
  margin-top: 15px;
}

#contact-area i {
  color: coral;
  font-size: 50px;
}

#contact-area a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-box {
  background: #fff;
  padding: 10px 15px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

@media (min-width: 768px) {
  .card-box {
    padding: 20px 55px;
  }
}

/* recruite */
.top-msg {
  position: relative;
}

@media (min-width: 768px) {
  .top-msg {
    padding-top: 160px;
  }
}

.top-msg .msg {
  position: relative;
  z-index: 1;
  background: #fff;
  opacity: 0.84;
  margin-top: -40px;
}

@media (min-width: 768px) {
  .top-msg .msg {
    margin: 0px 350px 0px 1px;
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .top-msg .img {
    width: 80%;
    position: absolute;
    top: 0;
    right: 0;
  }
}

/* comments-area */
.comments-area {
  display: none;
}

article:after {
  display: block;
  content: "";
  clear: both;
}

/* blockquote comment */
.comment-block {
  border-left: 4px solid #1976d2;
  /* 強調カラー */
  background: #f5f7fa;
  padding: 1.2em 1.5em;
  margin: 1.5em 0;
  font-style: italic;
  color: #333;
  position: relative;
}

.comment-block:before {
  content: "“";
  color: #1976d2;
  font-size: 2.5em;
  position: absolute;
  left: 15px;
  top: -10px;
  line-height: 1;
}

.comment-author {
  display: block;
  margin-top: 1em;
  font-weight: bold;
  color: #1976d2;
  font-style: normal;
  text-align: right;
}

.background-color-bluegray {
  background: #f5f7fa;
}

.box-section {
  background: #fffffff6;
  max-width: 1200px;
  border-radius: 20px;
  margin: 0 auto;
  padding: 10px;
}

.box-section-nobg {
  max-width: 1200px;
  border-radius: 20px;
  margin: 0 auto;
  padding: 10px 0;
}

.box-section-bg {
  background: url(../images/common/backgroud-image1.png) no-repeat top center/cover;
}

.box-section-bg-niji {
  background: url(../images/common/backgroud-image-niji.png) no-repeat top center/cover;
}

.round-head {
  padding: 1.5rem 3rem;
  font-weight: 500;
  border-radius: 30px 30px 0px 0px;
}

.round-head.pink {
  background: #ff9ab3;
  color: #ffffff;
}

.round-head.beige {
  background: #cb9b53;
  color: #ffffff;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
  font-weight: normal;
}

.widget select {
  max-width: 100%;
}

.widget .wpp-list {
  padding: 0;
  margin: 0;
}

.widget a {
  text-decoration: none;
  font-size: 14px;
  color: #111;
}

.widget a.tag-cloud-link {
  font-size: 14px !important;
  padding: 2px;
  transition: .2s;
  /*
		&::before {
			content: "#";
		}
*/
}

.widget a.tag-cloud-link:hover {
  background: #4a8eda;
  color: #fff !important;
  border-radius: 10px;
}

.widget ul,
.widget ol {
  margin: 0;
}

.widget ul li,
.widget ol li {
  list-style: none;
  position: relative;
  display: block;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  border-bottom: 1px solid #cdcdcd;
}

.widget ul li a,
.widget ol li a {
  transition: .2s;
  padding: 2px;
}

.widget ul li a:hover,
.widget ol li a:hover {
  opacity: 0.7;
}

.wp-block-social-links .wp-social-link svg {
  width: 3em;
  height: 3em;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

.wpcf7 label {
  width: 100%;
}

.wpcf7 .icon-inquiry {
  border-radius: 2px;
  background: #ff7198;
  font-size: 12px;
  padding: 1px 5px;
  color: #fff;
}

.wpcf7 textarea,
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="text"] {
  width: 100%;
  display: block;
  border: none;
  padding: 10px;
  border-radius: 5px;
  background: #f2f2f2;
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.5) inset;
}

.wpcf7 input[type="submit"] {
  background: #24b500;
  color: #fff;
  margin: 0 auto;
  display: block;
  padding: 5px 0px;
  padding: 10px 40px;
  border-radius: 0px;
  cursor: pointer;
  transition: 0.2s;
  font-size: 16px;
  height: 60px;
  min-width: 200px;
}

.wpcf7 input[type="submit"]:hover {
  background: #105200;
}

.wpcf7 input[type="submit"]:disabled {
  background: #ccc;
}

.wpcf7 form.invalid .wpcf7-response-output {
  /*
      border: 2px solid #00a0d2 !important;
      */
  border: none;
  color: #00799f;
  box-shadow: 0px 6px 4px -9px #000;
  border-bottom: 1px solid #d7d7d7;
  padding: 1.2em 1em;
}

.wpcf7 .wpcf7-response-output {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: #d4f5ff;
  padding: 10px;
  color: #00799f;
  box-shadow: 0px 6px 4px -9px #000;
  border-bottom: 1px solid #d7d7d7;
  padding: 1.2em 1em;
}

.wpcf7 .wpcf7-validation-errors {
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid #eed3d7;
}

.wpcf7 .wpcf7-mail-sent-ok {
  color: #3a87ad;
  background-color: #d9edf7;
  border: 1px solid #bce8f1;
}

.wpcf7 .annotation {
  font-size: 13px;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto;
  border: 1px solid #aaa;
  padding: 10px;
}

.contact-table {
  filter: drop-shadow(2px 2px 2px #aaa);
  padding: 10px;
  margin: 0 auto;
  max-width: 800px;
  border: 2px solid #d6dde1;
  border-radius: 4px;
  background: #fff;
}

.contact-entrybox {
  width: 100%;
  border-bottom: none;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  background: #fff;
  margin-right: 15px;
  margin-bottom: 20px;
  padding: 0px;
  position: relative;
  height: 215px;
}

.contact-entrybox.en {
  height: 255px;
}

.contact-entrybox p {
  padding: 10px !important;
}

.contact-entrybox h2 {
  text-align: center;
}

.contact-entrybox .btn-box {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.contact-entrybox .btn {
  width: 100%;
  height: 60px;
  text-decoration: none !important;
  text-align: center;
  background: #24b500;
  font-size: 18px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  border-radius: 30px;
}

.contact-entrybox .btn:hover {
  background: #105200;
}

.contact-entrybox .btn::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  position: absolute;
  right: 10px;
  font-weight: 900;
}

.agreement-box {
  /*  border: #cccccc 1px solid; */
  margin: 0;
  height: 250px;
  font-size: 12px;
  text-align: left;
}

.agreement-box iframe {
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
  height: 250px;
}

/* checkbox radio vertical*/
span.wpcf7-checkbox .wpcf7-list-item {
  margin-top: 5px;
  display: block;
}

.wpcf7-radio .wpcf7-list-item {
  margin-top: 5px;
  display: block;
}

.wpcf7-not-valid-tip {
  padding: 0.5em 1em;
  border-radius: 3px;
  background-color: #ff4b3e;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.3s;
  margin-top: 10px;
  box-shadow: 2px 2px 2px 1px #aaaaaa;
  max-width: 200px;
  position: relative;
}

.wpcf7-not-valid-tip::before {
  position: absolute;
  top: -10px;
  width: 14px;
  height: 11px;
  background-color: inherit;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: "";
}

#breadcrumbs {
  font-size: 12px;
  color: #001f42;
}

#breadcrumbs a {
  font-size: 12px;
  color: #001f42;
  text-decoration: underline;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* button */
.text-center {
  text-align: center;
}

.detail-more {
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .detail-more {
    padding: 20px 0px 0px 0px;
    text-align: left;
  }
}

.detail-more a.section-more {
  width: 310px;
  padding: 12px 15px;
  text-decoration: none !important;
  text-align: center;
}

@media (min-width: 768px) {
  .detail-more a.section-more {
    padding: 15px;
  }
}

.detail-more a.section-more:hover {
  background: #105200;
  transition: all 0.3s;
}

.detail-more a.section-more:visited {
  color: #fff;
}

.detail-more a.section-more-white {
  border: 1px solid #fff;
  color: #fff !important;
  padding: 15px 80px;
  position: relative;
}

.detail-more a.section-more-white:hover {
  background: #fff;
  color: #105200 !important;
  transition: all 0.3s;
}

/* ARROW */
.btnarrow4 {
  background: #24b500 !important;
  color: #fff !important;
}

@media (min-width: 768px) {
  .btnarrow4 {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    outline: none;
  }
  .btnarrow4::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 90%;
    width: 30%;
    height: 2px;
    background: #24b500;
    transition: all 0.3s;
  }
  .btnarrow4::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -64px;
    width: 18px;
    height: 2px;
    background: #24b500;
    transform: rotate(35deg);
    transition: all 0.3s;
  }
  .btnarrow4:hover {
    background: #105200 !important;
  }
  .btnarrow4:hover::before {
    left: 98%;
  }
  .btnarrow4:hover::after {
    right: -29%;
  }
}

@media (min-width: 768px) {
  .btnarrow4-white::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 80%;
    width: 47%;
    height: 1px;
    background: #fff;
    transition: all 0.3s;
  }
  .btnarrow4-white::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -83px;
    width: 18px;
    height: 1px;
    background: #fff;
    transform: rotate(35deg);
    transition: all 0.3s;
  }
  .btnarrow4-white:hover::before {
    left: 90%;
  }
  .btnarrow4-white:hover::after {
    right: -38%;
  }
}

.btnarrow4-green {
  background: #1d2c17 !important;
  color: #fff !important;
}

@media (min-width: 768px) {
  .btnarrow4-green {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    outline: none;
  }
  .btnarrow4-green::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 80%;
    width: 47%;
    height: 1px;
    background: #333;
    transition: all 0.3s;
  }
  .btnarrow4-green::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -83px;
    width: 18px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all 0.3s;
  }
  .btnarrow4-green:hover {
    background: transparent !important;
    color: #1d2c17 !important;
  }
  .btnarrow4-green:hover::before {
    left: 90%;
  }
  .btnarrow4-green:hover::after {
    right: -38%;
  }
}

.btnarrow4-black {
  background: #111 !important;
  color: #fff !important;
}

@media (min-width: 768px) {
  .btnarrow4-black {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    outline: none;
  }
  .btnarrow4-black::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 80%;
    width: 47%;
    height: 1px;
    background: #333;
    transition: all 0.3s;
  }
  .btnarrow4-black::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -83px;
    width: 18px;
    height: 1px;
    background: #333;
    transform: rotate(35deg);
    transition: all 0.3s;
  }
  .btnarrow4-black:hover {
    background: transparent !important;
    color: #111 !important;
  }
  .btnarrow4-black:hover::before {
    left: 90%;
  }
  .btnarrow4-black:hover::after {
    right: -38%;
  }
}

.btnarrow4-darknavy {
  background: #1c313d !important;
  color: #fff !important;
}

@media (min-width: 768px) {
  .btnarrow4-darknavy {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    outline: none;
  }
  .btnarrow4-darknavy::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 80%;
    width: 47%;
    height: 1px;
    background: #1c313d;
    transition: all 0.3s;
  }
  .btnarrow4-darknavy::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -83px;
    width: 18px;
    height: 1px;
    background: #1c313d;
    transform: rotate(35deg);
    transition: all 0.3s;
  }
  .btnarrow4-darknavy:hover {
    background: transparent !important;
    color: #1c313d !important;
  }
  .btnarrow4-darknavy:hover::before {
    left: 90%;
  }
  .btnarrow4-darknavy:hover::after {
    right: -38%;
  }
}

.btn-green {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 25px;
  background: #24b500;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-green:hover {
  background: #156b00;
  color: #fff;
}

.btnarrow4-redborder {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #f7163c;
}

@media (min-width: 768px) {
  .btnarrow4-redborder {
    position: relative;
    display: inline-block;
    padding: 0 20px;
    text-decoration: none;
    outline: none;
  }
  .btnarrow4-redborder::before {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 80%;
    width: 47%;
    height: 2px;
    background: #f7163c;
    transition: all 0.5s;
  }
  .btnarrow4-redborder::after {
    content: "";
    position: absolute;
    bottom: 30px;
    right: -83px;
    width: 18px;
    height: 2px;
    background: #f7163c;
    transform: rotate(35deg);
    transition: all 0.5s;
  }
  .btnarrow4-redborder:hover {
    background: #f7163c !important;
    color: #fff !important;
  }
  .btnarrow4-redborder:hover::before {
    left: 90%;
  }
  .btnarrow4-redborder:hover::after {
    right: -38%;
  }
}

.fadein {
  opacity: 0.5;
  transform: translateY(5px);
  transition: all 2.2s;
}

/* slider title text animation */
.slider-title-text:first-of-type {
  /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

.slider-title-text:last-of-type {
  width: 0px;
  animation: reveal 7s infinite;
}

.slider-title-text:last-of-type span {
  margin-left: -355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 355px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 355px;
  }
}

/* popup */
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}

.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.modal__content {
  background: #fff;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  width: 90%;
  font-size: 11px;
  z-index: 999999;
}

@media (min-width: 768px) {
  .modal__content {
    font-size: 15px;
    padding: 40px;
    width: 60%;
  }
}

.modal__content .js-modal-close-button {
  width: 100%;
  text-align: center;
  background: #eee;
}

.modal__content .js-modal-close-button a {
  width: 100%;
  display: block;
  cursor: pointer;
  padding: 10px;
}

.display-none {
  display: none !important;
}

.display-pc {
  display: none;
}

@media (min-width: 768px) {
  .display-pc {
    display: block;
  }
}

.display-sp {
  display: block;
}

@media (min-width: 768px) {
  .display-sp {
    display: none;
  }
}

/* media button */
.wp-block-file__button {
  border: 1px solid #333;
}

/* 見出し下のデザイン */
/* カラーやサイズはここで調整 */
:root {
  --squiggle-color: #ff91aa;
  /* ライン色 */
  --squiggle-height: 12px;
  /* ラインの太さ/高さ */
  --squiggle-width: clamp(120px, 50%, 360px);
  /* ラインの横幅 */
  --squiggle-offset: 6px;
  /* 文字下からの余白 */
}

.squiggle {
  position: relative;
  /* display: inline-block; */
  /* 見出し幅に追従したくない場合は inline-block */
  padding-bottom: calc(var(--squiggle-offset) + var(--squiggle-height));
}

/* 方式A：mask-imageで色をCSS側で自由に変更（推奨） */
.squiggle::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--squiggle-offset);
  width: var(--squiggle-width);
  height: var(--squiggle-height);
  background-color: var(--squiggle-color);
  /* マスク（SVGの形で切り抜く） */
  -webkit-mask: center/100% 100% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'>  <path d='M3,9 C53,1 67,14 57,6 S140,13 119,6 S159,13 177,6'         fill='none' stroke='black' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask: center/100% 100% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'>  <path d='M3,9 C53,1 67,14 57,6 S140,13 119,6 S159,13 177,6'         fill='none' stroke='black' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  pointer-events: none;
  width: 100px;
}

/* 方式B：簡易（色をSVG内で固定）。Safari古め等の保険に合わせて併記したい場合 */
@supports not (-webkit-mask: url("")) {
  .squiggle::after {
    background: center/100% 100% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'>  <path d='M3,9 C23,1 39,13 59,6 S99,13 119,6 S159,13 177,6'         fill='none' stroke='%2345a3e5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }
}

/* おまけ：超簡易な代替（見出し直下に“波線下線”） */
.squiggle[data-simple-underline] {
  padding-bottom: 0.2em;
  text-decoration: underline wavy var(--squiggle-color);
  text-underline-offset: 0.25em;
}

.display-none {
  display: none;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.sticky {
  display: block;
}

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

.p10 {
  padding: 10px;
}

.pad0-mar0 {
  padding: 0;
  margin: 0;
}

.p50 {
  padding: 50px !important;
}

.m50 {
  margin: 5px;
}

@media (min-width: 768px) {
  .m50 {
    margin: 50px;
  }
}

.plr50 {
  padding: 0px 50px;
}

.p25 {
  padding: 2px;
}

@media (min-width: 768px) {
  .p25 {
    padding: 25px;
  }
}

.section-border {
  border: 1px solid #ddd;
}

.google-maps {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 75%;
}

@media (min-width: 768px) {
  .google-maps {
    padding-bottom: 45%;
  }
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: 1.5em;
  margin: 10px;
  padding: 10px;
}

.min-w350 {
  min-width: 350px;
}

/* Animation
--------------------------------------------- */
.js-fade {
  transition: all 2000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}

.js-fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
}