@charset "UTF-8";
/* ※このCSSファイルはSassから生成されています */
html {
  font-size: 62.5%; }

body {
  font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  line-height: 1.6;
  color: #454545;
  background: #fff;
  margin: 0;
  padding: 0;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-feature-settings: "palt"; }

small {
  font-size: 10px;
  font-size: 1rem; }

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal; }

img {
  max-width: 100%;
  display: block;
  border-style: none;
  vertical-align: bottom;
  height: auto; }

p, dl, dt, dd, ul, ul > li, h1, h2, h3, h4, h5, h6, iframe, figure {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent; }

ul {
  list-style: none; }

ul > li {
  list-style-type: none; }

caption, th {
  text-align: left; }

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

abbr, acronym {
  border: 0; }

*,
*::before,
*::after {
  box-sizing: border-box; }

main {
  display: block; }

.cf::before, .cf::after {
  content: "";
  display: table; }
.cf::after {
  clear: both; }

@media only screen and (min-width: 768px) {
  body {
    min-height: 600px; } }

.img-circle {
  border-radius: 50%; }

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

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

.flex-cw {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center; }

.flex-ch {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center; }

/*
p,li,dt,dd,th,td {
	    font-size: 3.8vw;
        line-height: 2;
        
    @include media(pc) {
		@include fz(15);
        }
    }
*/
.just {
  text-align: justify;
  text-justify: inter-ideograph; }

.txt {
  font-size: 3.8vw;
  line-height: 1.9; }
  @media only screen and (min-width: 768px) {
    .txt {
      font-size: 15px;
      font-size: 1.5rem; } }
  @media only screen and (min-width: 768px) {
    .txt--s {
      font-size: 14px;
      font-size: 1.4rem; } }

em {
  color: #ff0000; }

hr {
  border-top: 1px dotted #bbb;
  border-bottom: none; }

img[src$=".svg"] {
  width: 100%; }

.sp-hide {
  display: none !important; }
  @media only screen and (min-width: 768px) {
    .sp-hide {
      display: inline-block !important; } }

@media only screen and (min-width: 768px) {
  .pc-hide {
    display: none !important; } }

.note {
  font-size: 2.5vw;
  display: block;
  color: 666; }
  @media only screen and (min-width: 768px) {
    .note {
      font-size: 12px;
      font-size: 1.2rem; } }

a {
  color: #22ac38; }
  a:visited, a:hover {
    color: #22ac38; }
  @media only screen and (min-width: 768px) {
    a:hover img {
      opacity: 0.8; } }

/*
ul li + li,
ol li + li  {margin-top: 0.5em;}

ol {padding-left: 3em;}

ol li > ul {padding-left: 1.5em;}
ol li > ul li {list-style-type: disc;}
*/
.en {
  font-family: 'Urbanist', sans-serif; }
  .en--r {
    font-weight: 400; }
  .en--m {
    font-weight: 500; }
  .en--sb {
    font-weight: 600; }
  .en--b {
    font-weight: 700; }
  .en--eb {
    font-weight: 800; }

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans JP Regular"), url("../fonts/NotoSansJP-Regular.woff2") format("woff2"), url("../fonts/NotoSansJP-Regular.woff") format("woff"), url("../fonts/NotoSansJP-Regular.ttf") format("ttf"), url("../fonts/NotoSansJP-Regular.eot") format("embedded-opentype");
  font-display: swap; }
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans JP Medium"), url("../fonts/NotoSansJP-Medium.woff2") format("woff2"), url("../fonts/NotoSansJP-Medium.woff") format("woff"), url("../fonts/NotoSansJP-Medium.ttf") format("ttf"), url("../fonts/NotoSansJP-Medium.eot") format("embedded-opentype");
  font-display: swap; }
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans JP Bold"), url("../fonts/NotoSansJP-Bold.woff2") format("woff2"), url("../fonts/NotoSansJP-Bold.woff") format("woff"), url("../fonts/NotoSansJP-Bold.ttf") format("ttf"), url("../fonts/NotoSansJP-Bold.eot") format("embedded-opentype");
  font-display: swap; }
/*
@font-face {
    font-family: 'Shippori Mincho B1';
    font-style: normal;
    font-weight: 600;
    src: local("Shippori Mincho B1"),
    url('../fonts/ShipporiMinchoB1-SemiBold.woff2') format('woff2'),
    url('../fonts/ShipporiMinchoB1-SemiBold.woff') format('woff'),
    url('../fonts/ShipporiMinchoB1-SemiBold.ttf') format('ttf'),		
	url('../fonts/ShipporiMinchoB1-SemiBold.eot') format('embedded-opentype');	
	font-display: swap;
}
*/
.jp {
  font-family: 'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; }
  .jp--r {
    font-weight: 400; }
  .jp--m {
    font-weight: 500; }
  .jp--sb {
    font-weight: 600; }
  .jp--b {
    font-weight: 700; }

.test {
  font-family: 'Shippori Mincho B1', serif; }

.slide-btn a {
  font-size: 5vw;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  padding: 0.6em 0;
  position: relative;
  transition: transform .3s;
  overflow: hidden;
  z-index: 1;
  background: #22ac38; }
  .slide-btn a::before {
    font-size: 1.1em;
    font-family: "Font Awesome 5 Free";
    content: "\f0a9";
    font-weight: 900;
    left: 10%;
    position: absolute;
    top: 50%;
    margin: auto;
    transition: transform .3s;
    z-index: 2;
    transform: translateY(-50%);
    font-style: normal; }
  .slide-btn a::after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 130%;
    height: 100%;
    background: #242222;
    transform-origin: right top;
    transform: skewX(-30deg) scale(0, 1);
    transition: transform .3s; }
  @media only screen and (min-width: 768px) {
    .slide-btn a {
      font-size: 18px;
      font-size: 1.8rem; }
      .slide-btn a:hover::before {
        transform: translate(10px, -50%); }
      .slide-btn a:hover::after {
        transform-origin: left top;
        transform: skewX(-30deg) scale(1, 1); } }
.slide-btn--more {
  width: 75%; }
@media only screen and (min-width: 768px) {
  .slide-btn--more {
    width: 200px; } }

a.round-btn {
  background: #fff;
  color: #454545;
  text-align: center;
  padding: 0.8em 3em;
  border-radius: 100vh;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #707070;
  position: relative;
  font-size: 4vw;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: .3s; }
  a.round-btn--full {
    width: 100%;
    padding: 0.8em 0; }
  a.round-btn::after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    color: #707070;
    position: absolute;
    right: 10%;
    top: 50%;
    transition: all 0.25s;
    transform: translateY(-50%);
    font-size: 0.95em; }
  a.round-btn--cart::after {
    content: "\f07a";
    right: 8%; }
  @media only screen and (min-width: 768px) {
    a.round-btn {
      font-size: 16px;
      font-size: 1.6rem; }
      a.round-btn:hover {
        border-color: #aaa;
        color: #707070; }
        a.round-btn:hover::after {
          transform: translate(60%, -50%);
          color: #999; }
      a.round-btn--cart:hover::after {
        transform: translate(30%, -50%); } }

.base-btn {
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: 1em 3em;
  border: 3px solid #2b2b2b;
  color: #2b2b2b;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  z-index: 1; }
  .base-btn:hover {
    color: #f7f8f8; }
  @media only screen and (min-width: 768px) {
    .base-btn {
      font-size: 24px;
      font-size: 2.4rem; } }
  .base-btn::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #2b2b2b;
    transform-origin: left bottom;
    transform: scale(1, 0);
    transition: transform .3s; }
  .base-btn:hover::after {
    transform-origin: left top;
    transform: scale(1, 1); }
  p + .base-btn, div + .base-btn, ul + .base-btn {
    margin-top: 2.5em; }

.arrow-btn {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 1em 3em 0.2em 0;
  transition: transform .3s; }
  .arrow-btn::before {
    content: "";
    background: #2b2b2b;
    height: 1px;
    position: absolute;
    bottom: -0.5em;
    width: 120px;
    transition: transform .3s; }
  .arrow-btn::after {
    content: "";
    background: #2b2b2b;
    height: 1px;
    width: 15px;
    position: absolute;
    bottom: -3px;
    left: 113px;
    transform: rotate(45deg);
    transition: transform .3s; }
  .arrow-btn:hover::before {
    transform: translateX(15px); }
  .arrow-btn:hover::after {
    transform: translateX(9px) translateY(-1px) rotate(45deg); }
  .arrow-btn__wrap {
    margin-top: 0.8em; }

.btn,
a.btn,
button.btn {
  font-size: 4.5vw;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 2rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #454545;
  border-radius: 0.5rem; }
  @media only screen and (min-width: 768px) {
    .btn,
    a.btn,
    button.btn {
      font-size: 16px;
      font-size: 1.6rem; } }

a.btn-border-shadow--radius {
  border-radius: 100vh; }

a.btn-border-shadow {
  padding: calc(2rem - 10px) 3rem 2rem;
  background: #FCDDDD; }
  a.btn-border-shadow::after {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    font-weight: 900;
    color: #707070;
    position: absolute;
    right: 10%;
    top: calc(50% - 5px);
    transition: all 0.3s;
    transform: translateY(-50%); }
  a.btn-border-shadow:hover::after {
    transform: translateY(-32%); }

a.btn-border-shadow::before {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #707070;
  border-radius: 0.5rem; }

a.btn-border-shadow--radius::before {
  border-radius: 100vh; }

a.btn-border-shadow:hover {
  padding: calc(2rem - 5px) 3rem; }

a.btn-border-shadow:hover::before {
  top: 0;
  left: 0; }

.link-a::after, .link-b::before {
  font-family: "Font Awesome 5 Free";
  color: #22ac38;
  text-decoration: none;
  line-height: 1;
  padding: 0 0.3em;
  font-size: 1.2em; }
.link-a--ex::after {
  content: "\f35d";
  font-weight: 900; }
.link-a--ex-white::after {
  color: #fff; }
.link-a--pdf::after {
  content: "\f1c1";
  font-weight: 400; }

.link-b--map::before {
  content: "\f3c5";
  font-weight: 900; }
.link-b--pdf::before {
  content: "\f1c1";
  font-weight: 400; }
.link-b--mail::before {
  content: "\f0e0";
  font-weight: 400; }
.link-b--print::before {
  content: "\f02f";
  font-weight: 900; }

.icon-a::after {
  font-family: "Font Awesome 5 Free";
  text-decoration: none;
  line-height: 1;
  margin: 0 0.1em; }
.icon-a--reg {
  position: relative;
  margin: 0 1em 0 0.1em; }
  .icon-a--reg::after {
    content: "\f25d";
    font-weight: 400;
    font-size: 0.8em;
    position: absolute;
    top: 10%; }

.sns-icon {
  width: 30px;
  height: 0 !important;
  height: 30px;
  padding-top: 30px;
  line-height: 30px;
  display: block;
  overflow: hidden;
  position: relative;
  color: #707070; }
  .sns-icon:hover {
    opacity: 0.8; }
  .sns-icon::before {
    font-family: "Font Awesome 5 Brands";
    text-decoration: none;
    line-height: 1;
    position: absolute;
    top: 0;
    font-size: 30px;
    font-size: 3rem; }
  .sns-icon--in::before {
    content: "\f16d"; }
  .sns-icon--tw::before {
    content: "\f099"; }
  .sns-icon--fb::before {
    content: "\f09a"; }

.common-table {
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #fff;
  width: 100%;
  border: 1px solid #22ac38; }
  .common-table thead th {
    padding: 0.5em;
    background: #22ac38;
    color: #fff;
    font-weight: 700; }
  .common-table th + th {
    border-left: 1px solid #fff; }
  .common-table tbody td,
  .common-table tbody th {
    padding: 0.5em;
    border: 1px solid #22ac38;
    min-width: 100px; }

.table-wrap {
  overflow: scroll;
  margin: 0 -20px; }
  div + .table-wrap, p + .table-wrap, .table-wrap table + table {
    margin-top: 40px; }
  @media only screen and (min-width: 768px) {
    .table-wrap {
      overflow: auto;
      margin: 0; } }
  .table-wrap table {
    margin: 0 20px; }
    @media only screen and (min-width: 768px) {
      .table-wrap table {
        margin: 0; } }

.variable-column {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: none; }
  .variable-column + .variable-column {
    margin-top: 5vw; }
  .variable-column th, .variable-column td {
    border: none;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 0.5em 0; }
  .variable-column tr + tr {
    margin-top: 2em; }
  .variable-column th {
    font-weight: 500;
    font-size: 4vw; }
  .variable-column tr.group-header th {
    background: #ccc;
    font-weight: 600; }
  .variable-column th em {
    font-size: 2.5vw;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-block;
    font-weight: 500;
    color: #fff;
    padding: 0.3em;
    background: #FF0004;
    line-height: 1;
    border-radius: 4px; }
  p + .variable-column {
    margin-top: 40px; }
  .variable-column th.title {
    background: #e4e4e4; }
  @media only screen and (min-width: 768px) {
    .variable-column + .variable-column {
      margin-top: 65px; }
    .variable-column tr + tr {
      margin-top: 0; }
    .variable-column th, .variable-column td {
      padding: 1em 0; }
    .variable-column th {
      font-size: 15px;
      font-size: 1.5rem;
      width: 25%;
      background: none;
      display: table-cell; }
    .variable-column td {
      display: table-cell; }
    .variable-column th em {
      font-size: 12px;
      font-size: 1.2rem;
      right: 10px; } }

.cmn {
  width: 100%;
  border: 1px #bbb solid;
  padding: 0.8em 0.5em;
  background: #fff;
  -webkit-appearance: none;
  /* */
  appearance: none;
  /* CSS3
  -webkit-transition: background 0.5s ease;
  -moz-transition: background 0.5s ease;
  transition: background 0.5s ease; */
  box-sizing: border-box;
  font-size: 16px;
  font-size: 1.6rem; }
  .cmn:hover {
    border: 1px #888 solid; }

.cmn + .select-wrap,
.select-wrap + .cmn {
  font-size: 16px;
  font-size: 1.6rem; }

.select-wrap {
  overflow: hidden;
  text-align: center;
  width: 30%;
  min-width: 200px;
  position: relative;
  border: 1px solid #bbb;
  background: #fff;
  box-sizing: border-box; }
  .select-wrap select {
    width: 100%;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0.8em 2em 0.8em 0.5em;
    font-size: 16px;
    font-size: 1.6rem; }
    .select-wrap select::-ms-expand {
      display: none; }
  .select-wrap::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #999;
    pointer-events: none;
    z-index: 2; }

input[type=checkbox] {
  display: none; }

.mwform-checkbox-field-text {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  padding: 5px 30px;
  position: relative;
  width: auto; }
  .mwform-checkbox-field-text:hover::before {
    border: 1px solid #888; }
  .mwform-checkbox-field-text::before {
    background: #fff;
    border: 1px solid #bbb;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px; }
  .mwform-checkbox-field-text::after {
    border-right: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
    content: '';
    display: block;
    height: 15px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 40%;
    transform: rotate(45deg);
    width: 10px; }
  @media only screen and (min-width: 768px) {
    .mwform-checkbox-field-text {
      display: inline-block; } }

input[type=checkbox]:checked + .mwform-checkbox-field-text::after {
  opacity: 1; }

#age {
  width: 50px; }

#datepicker {
  width: 150px; }

#postcode,
#tel {
  width: 100%;
  min-width: 200px; }
  @media only screen and (min-width: 768px) {
    #postcode,
    #tel {
      width: 30%; } }

#name,
#furigana,
#mobile {
  width: 100%; }

#email,
#email2,
#address,
#company,
#address2 {
  width: 100%; }

#comment {
  height: 100px;
  width: 100%; }

input[type="radio"] {
  margin: 0 5px 10px; }

.cmn.alert,
select.alert {
  background: #fff1f1; }

p.alert-area {
  padding-top: 20px !important; }

em.alert {
  display: block;
  color: #F00;
  font-style: normal;
  margin: 0.5em 0; }

.form-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  clear: both;
  border: none;
  padding: 1em;
  margin: 1em auto 0;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  transition: background 0.3s ease;
  border-radius: 5px;
  border-radius: 100vh;
  cursor: pointer;
  box-sizing: border-box;
  width: 60vw;
  text-align: center;
  display: block;
  line-height: 1; }
  .form-btn--submit {
    background: #ff3535;
    box-shadow: 0px 4px 0px 0px #9f0000;
    font-size: 4.5vw; }
  .form-btn--back {
    background: #999;
    box-shadow: 0px 4px 0px 0px #666;
    font-size: 4vw; }
  .form-btn + .form-btn {
    margin-top: 40px; }
  @media only screen and (min-width: 768px) {
    .form-btn {
      margin: 2em auto 0;
      width: 50%; }
      .form-btn--submit {
        font-size: 24px;
        font-size: 2.4rem; }
        .form-btn--submit:hover {
          background: #ff0000;
          box-shadow: 0px 1px 0px 0px #9f0000;
          transform: translateY(3px); }
      .form-btn--back {
        font-size: 20px;
        font-size: 2rem; }
        .form-btn--back:hover {
          background: #777;
          box-shadow: 0px 1px 0px 0px #444;
          transform: translateY(3px); } }

.sup {
  display: block;
  font-size: 12px;
  font-size: 1.2rem; }
  input + .sup, .sup + input {
    margin-top: 1em; }
  @media only screen and (min-width: 768px) {
    .sup {
      font-size: 14px;
      font-size: 1.4rem; } }

input::-webkit-input-placeholder {
  color: #aaa;
  font-weight: normal; }
input:-ms-input-placeholder {
  color: #aaa;
  font-weight: normal; }
input::-moz-placeholder {
  color: #aaa;
  font-weight: normal; }

.mw_wp_form .horizontal-item + .horizontal-item {
  margin-left: 0 !important; }
  @media only screen and (min-width: 768px) {
    .mw_wp_form .horizontal-item + .horizontal-item {
      margin-left: 10px !important; } }

.mw_wp_form_preview .select-wrap {
  border: none;
  text-align: left;
  width: auto;
  min-width: auto; }
  .mw_wp_form_preview .select-wrap::before {
    content: none; }

span.error {
  color: #FF0000 !important;
  font-weight: 500; }

.pagetop {
  position: absolute;
  right: 15px;
  bottom: 15px; }
  .pagetop--arrow a {
    display: block;
    overflow: hidden;
    width: 30px;
    height: 0 !important;
    height: 30px;
    padding-top: 30px;
    z-index: 100;
    color: #22ac38;
    line-height: 30px;
    font-size: 30px;
    font-size: 3rem;
    text-align: center; }
    .pagetop--arrow a::before {
      content: "";
      display: block;
      background: #22ac38;
      position: absolute;
      top: 0;
      height: 5px;
      width: 30px;
      border-radius: 10px;
      transition: .3s all ease; }
    .pagetop--arrow a::after {
      display: block;
      font-family: "Font Awesome 5 Free";
      content: "\f077";
      font-weight: 900;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: .3s all ease; }
  @media only screen and (min-width: 768px) {
    .pagetop--arrow {
      right: 40px;
      bottom: 40px; }
      .pagetop--arrow a:hover::before {
        transform: rotate(90deg) translateX(10px); }
      .pagetop--arrow a:hover::after {
        transform: translate(-50%, -20px); } }

.lv2-heading {
  font-size: 5vw;
  margin-bottom: 2.5em;
  font-weight: 700;
  position: relative; }
  .lv2-heading--short::after {
    position: absolute;
    content: '';
    display: inline-block;
    background: #22ac38;
    border-radius: 2px;
    height: 4px;
    left: 0;
    bottom: -0.5em;
    width: 50px; }
  @media only screen and (min-width: 768px) {
    .lv2-heading {
      font-size: 27px;
      font-size: 2.7rem; } }

.f-cat-heading {
  position: relative;
  margin-bottom: 0.8em;
  font-size: 3.5vw;
  color: #67816F;
  border-bottom: 1px solid currentColor;
  padding: 0.5em; }
  @media only screen and (min-width: 768px) {
    .f-cat-heading {
      font-size: 15px;
      font-size: 1.5rem; } }

.site-id {
  display: block;
  overflow: hidden;
  width: 100px;
  height: 0 !important;
  height: 28px;
  padding-top: 28px;
  color: #fff;
  background-repeat: no-repeat;
  background-size: 100px 28px;
  background-image: url("../img/logo_grn.svg"); }
  @media only screen and (min-width: 768px) {
    .site-id {
      width: 176px;
      height: 50px;
      padding-top: 50px;
      background-size: 176px 50px; } }

.header__site-id {
  position: absolute;
  top: 16px;
  left: 16px; }
  @media only screen and (min-width: 768px) {
    .header__site-id {
      position: static; } }

.ham-menu {
  width: 36px;
  height: 36px;
  cursor: pointer;
  position: relative; }
  .ham-menu span {
    background: #22ac38;
    display: block;
    height: 4px;
    position: absolute;
    transition: transform .3s;
    width: 28px;
    border-radius: 4px; }
    .ham-menu span:nth-child(1) {
      top: 8px;
      left: 8px; }
    .ham-menu span:nth-child(2) {
      left: 4px;
      top: 16px; }
    .ham-menu span:nth-child(3) {
      left: 0;
      bottom: 8px; }
  .ham-menu.active {
    position: fixed; }
    .ham-menu.active span {
      background: #fff; }
      .ham-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 12px); }
      .ham-menu.active span:nth-child(2) {
        opacity: 0; }
      .ham-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -2px); }

.header__ham-menu {
  z-index: 9999;
  position: absolute;
  right: 20px;
  top: 12px; }
  @media only screen and (min-width: 768px) {
    .header__ham-menu {
      right: 40px;
      top: 27px; } }

.g-nav {
  display: none; }
  .g-nav ul {
    display: flex; }
  .g-nav li {
    font-size: 18px;
    font-size: 1.8rem;
    text-align: center;
    margin-left: 50px; }
    .g-nav li:first-child {
      margin-left: 0; }
    .g-nav li .jp {
      display: block;
      font-size: 12px;
      font-size: 1.2rem; }
  .g-nav a {
    display: block; }
    .g-nav a:link, .g-nav a:visited, .g-nav a:active {
      color: #3e3e3e;
      text-decoration: none; }
    .g-nav a:hover {
      color: #5e5e5e; }
  @media only screen and (min-width: 768px) {
    .g-nav {
      display: block; } }

.header__g-nav {
  position: absolute;
  top: 30px;
  right: 116px; }

.sp-nav a {
  color: #fff;
  text-decoration: none; }
.sp-nav__scroll-area {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch; }
.sp-nav__inner {
  opacity: 0; }
  @media only screen and (min-width: 768px) {
    .sp-nav__inner {
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); } }
.sp-nav.active {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; }
  .sp-nav.active .sp-nav__scroll-area {
    display: block; }
  .sp-nav.active .sp-nav__inner {
    animation-name: spnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0; }

.circle-bg {
  position: fixed;
  z-index: 3;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #22ac38;
  transform: scale(0);
  right: -50px;
  top: -50px;
  transition: all .6s; }
  .circle-bg.active {
    transform: scale(50); }

.scroll-fixed {
  position: fixed;
  z-index: 1;
  width: 100%; }
  @media only screen and (min-width: 768px) {
    .scroll-fixed {
      position: relative; } }

.breadcrumb {
  margin: 0 25px 8vw 25px; }
  .breadcrumb li {
    font-size: 3vw;
    line-height: 1;
    display: inline-block;
    padding: 0 0 0 6.25vw;
    position: relative; }
    .breadcrumb li::before {
      content: '';
      display: inline-block;
      margin: auto;
      vertical-align: middle;
      width: 1.8vw;
      height: 1.8vw;
      border-top: 1px solid #777;
      border-right: 1px solid #777;
      transform: rotate(45deg);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1.5vw; }
    .breadcrumb li:first-child {
      padding: 0; }
      .breadcrumb li:first-child::before {
        content: none; }
    .breadcrumb li:nth-child(n + 3) {
      display: none; }
  @media only screen and (min-width: 768px) {
    .breadcrumb {
      margin: 15px 0 0 0; }
      .breadcrumb li {
        font-size: 14px;
        font-size: 1.4rem;
        padding: 0 0 0 20px; }
        .breadcrumb li::before {
          width: 6px;
          height: 6px;
          left: 5px; }
        .breadcrumb li:nth-child(n + 3) {
          display: inline-block; } }

@media only screen and (min-width: 768px) {
  .f-nav {
    display: flex;
    justify-content: space-between; }
    .f-nav__inner {
      width: 30%; } }

.f-nav + .f-basic-nav {
  margin-top: 15vw; }
.f-basic-nav a {
  color: currentColor;
  text-decoration: none;
  font-size: 3vw; }
@media only screen and (min-width: 768px) {
  .f-basic-nav ul {
    display: flex; }
  .f-basic-nav li {
    margin: 0 2em 0 0; }
  .f-nav + .f-basic-nav {
    margin-top: 80px; }
  .f-basic-nav a {
    font-size: 14px;
    font-size: 1.4rem; } }

.contact-area {
  padding-top: 105px; }
  .contact-area h2 {
    position: absolute;
    top: -0.5em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7vw; }
  .contact-area__inner {
    padding: 40px 0;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: 60%; }
    .contact-area__inner + .contact-area__inner {
      margin-top: 40px; }
    .contact-area__inner--faq {
      background-color: #EAF4F7;
      background-image: url("../img/bg_faq.jpg");
      background-position: -50% 20%; }
    .contact-area__inner--contact {
      background-color: #EFEFEF;
      background-image: url("../img/bg_contact.jpg");
      background-position: -50% 20%; }
    .contact-area__inner a.round-btn {
      font-size: 4vw;
      width: 65%;
      padding: 1em 0; }
    .contact-area__inner div {
      flex-basis: 65%; }
    .contact-area__inner div a.round-btn {
      width: 100%;
      margin: 0.5em 0; }
  .contact-area .round-btn {
    border: none; }
  @media only screen and (min-width: 768px) {
    .contact-area {
      display: flex;
      padding-top: 170px; }
      .contact-area h2 {
        font-size: 45px;
        font-size: 4.5rem; }
      .contact-area__inner {
        padding: 0;
        min-height: 250px;
        background-position: -15% top;
        background-size: 45%; }
        .contact-area__inner + .contact-area__inner {
          margin-top: 0; }
        .contact-area__inner a.round-btn {
          font-size: 16px;
          font-size: 1.6rem;
          width: 50%; }
        .contact-area__inner div {
          flex-basis: 50%; }
        .contact-area__inner--faq {
          width: 50%; }
        .contact-area__inner--contact {
          width: 50%;
          margin-top: 0; }
        .contact-area__inner--contact--l {
          width: 100%;
          background-position: -1% top;
          background-size: 25%; }
          .contact-area__inner--contact--l a.round-btn {
            width: 30%; }
          .contact-area__inner--contact--l div {
            flex-basis: 30%; } }

.sns-btn-area {
  display: flex;
  justify-content: center; }
  .sns-btn-area li {
    margin: 0 10px; }
  @media only screen and (min-width: 768px) {
    .sns-btn-area {
      justify-content: flex-start; } }

.pagination-pagenum {
  position: relative;
  display: flex;
  margin-top: 40px; }
  .pagination-pagenum a, .pagination-pagenum span {
    display: block;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    font-size: 3.5vw;
    border: 1px solid #ccc;
    border-radius: 100vh;
    width: 10vw;
    height: 10vw;
    line-height: 9.5vw;
    color: #454545; }
    .pagination-pagenum a + a, .pagination-pagenum a + span, .pagination-pagenum span + a, .pagination-pagenum span + span {
      margin-left: 5px; }
    .pagination-pagenum a:hover, .pagination-pagenum a.current, .pagination-pagenum span:hover, .pagination-pagenum span.current {
      background: #22ac38;
      border-color: #22ac38;
      color: #fff; }
  @media only screen and (min-width: 768px) {
    .pagination-pagenum {
      margin-top: 65px; }
      .pagination-pagenum a, .pagination-pagenum span {
        font-size: 14px;
        font-size: 1.4rem;
        width: 45px;
        height: 45px;
        line-height: 42px; } }

.container {
  position: relative;
  overflow: hidden; }

@media only screen and (min-width: 768px) {
  #main {
    width: 1070px;
    margin: 0 auto;
    padding: 0 15px; } }

#home .contents-area {
  padding: 0; }
.contents-area__side {
  margin-top: 40px; }
@media only screen and (min-width: 768px) {
  .contents-area {
    padding-top: 65px; }
    .contents-area--2col {
      display: flex;
      justify-content: space-between; }
    .contents-area__main {
      width: 75%; }
    .contents-area__side {
      width: 20%;
      margin-top: 0; } }

.contents-blk {
  position: relative;
  padding-left: 25px;
  padding-right: 25px; }
  .contents-blk--full {
    padding-left: 0;
    padding-right: 0; }
  .contents-blk + .contents-blk {
    padding-top: 80px; }
  .contents-blk p + p {
    margin-top: 1.5em; }
  @media only screen and (min-width: 768px) {
    .contents-blk {
      padding-left: 0;
      padding-right: 0; }
      .contents-blk + .contents-blk {
        padding-top: 145px; } }

.content {
  padding: 12vw 5vw; }
  .content__main {
    margin: 0 0 50px; }
  @media only screen and (min-width: 768px) {
    .content {
      width: 90%;
      max-width: 1100px;
      padding: 60px 15px;
      margin: 0 auto; }
      .content--has-column {
        display: flex;
        justify-content: space-between; }
      .content__main {
        flex: 1;
        margin: 0 3.9% 0 0; }
      .content__side {
        flex: 0 0 300px; } }

.header {
  z-index: 10; }
  .header__inner {
    position: relative;
    height: 60px; }
    @media only screen and (min-width: 768px) {
      .header__inner {
        padding: 25px 40px;
        height: 100px; } }

.footer {
  background: #F4F5F4;
  padding: 150px 0 50px;
  background-image: url("../img/bg_footer.svg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain; }
  .footer__inner {
    padding: 0 5vw; }
  @media only screen and (min-width: 768px) {
    .footer {
      padding: 300px 0 50px; }
      .footer__inner {
        width: 90%;
        max-width: 1100px;
        padding: 0 15px;
        margin: 0 auto; } }

.copyright {
  font-size: 3vw;
  display: block;
  line-height: 1;
  font-weight: 400; }
  address + .copyright, div + .copyright {
    margin-top: 2em; }
  .copyright span {
    margin-right: 0.2em; }
  @media only screen and (min-width: 768px) {
    .copyright {
      font-size: 14px;
      font-size: 1.4rem; } }

body,
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.footer {
  margin-top: auto; }

@keyframes vertical {
  0% {
    transform: translateY(-8px); }
  100% {
    transform: translateY(0px); } }
@keyframes vertical2 {
  0% {
    transform: translateY(-8px); }
  100% {
    transform: translateY(0px); } }
@keyframes arrow {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(200px); } }
@keyframes spnaviAnime {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.post-header {
  position: relative; }

.date {
  display: block;
  font-weight: 600;
  color: #707070;
  margin: -0.8em 0 2em;
  font-size: 3.5vw;
  letter-spacing: 0.1em; }
  @media only screen and (min-width: 768px) {
    .date {
      font-size: 16px;
      font-size: 1.6rem; } }

.post-link__wrap {
  margin: 40px 0 0;
  clear: both; }
.post-link + .post-link {
  margin-top: 10px; }
.post-link a {
  color: #454545;
  text-decoration: none;
  display: block; }
  .post-link a::after {
    content: none !important; }
  .post-link a.link-a dd::after {
    font-family: "Font Awesome 5 Free";
    color: #22ac38;
    text-decoration: none;
    line-height: 1;
    margin: 0 0.3em;
    font-size: 1.2em;
    content: "\f35d";
    font-weight: 900; }
  .post-link a dd {
    text-decoration: underline; }
.post-link dl {
  display: flex;
  align-items: center; }
.post-link dt {
  font-weight: 500;
  color: #454545;
  border: 1px solid #707070;
  background: #fff;
  padding: 0.3em 0.5em;
  border-radius: 100vh;
  font-size: 3.2vw;
  width: 25vw;
  text-align: center; }
.post-link dd {
  padding: 0 0 0 1em;
  font-size: 3.2vw;
  width: 75vw; }
@media only screen and (min-width: 768px) {
  .post-link__wrap {
    margin: 65px 0 0; }
  .post-link dt {
    padding: 0.3em 1.5em; }
  .post-link dt, .post-link dd {
    font-size: 14px;
    font-size: 1.4rem;
    width: auto; }
  .post-link a:hover {
    opacity: .8; } }

.post + p {
  margin: 65px auto 0;
  width: 75%; }
  @media only screen and (min-width: 768px) {
    .post + p {
      width: 300px; } }

.post .addtoany_share_save_container {
  padding-top: 40px; }
  @media only screen and (min-width: 768px) {
    .post .addtoany_share_save_container {
      padding-top: 65px; } }

.side-new li {
  font-size: 3.5vw;
  line-height: 1.5;
  margin-bottom: 0.8em; }
  .side-new li + li {
    padding-top: 0.8em;
    border-top: 1px solid #ddd; }
  .side-new li a {
    text-decoration: none;
    display: block;
    color: #454545; }
  .side-new li time {
    display: block;
    font-size: 3vw;
    letter-spacing: 0.1em;
    color: #707070;
    font-weight: 600; }
  .side-new li + li.widget_archive {
    margin-top: 1em;
    border-top: none; }
.side-new + a, .side-new + p, .side-new + div, .side-new + ul {
  margin-top: 4vw; }
@media only screen and (min-width: 768px) {
  .side-new li {
    font-size: 14px;
    font-size: 1.4rem; }
    .side-new li time {
      font-size: 12px;
      font-size: 1.2rem; }
    .side-new li a:hover {
      opacity: 0.8; }
    .side-new li + a, .side-new li + p, .side-new li + div, .side-new li + ul {
      margin-top: 40px; } }

.widget-title {
  font-size: 4vw;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  border-left: 2px solid #22ac38;
  padding-left: 0.5em; }
  @media only screen and (min-width: 768px) {
    .widget-title {
      font-size: 17px;
      font-size: 1.7rem; } }

#archives-dropdown-2 {
  font-size: 16px; }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop,
  .outline {
    font-weight: 500;
    text-shadow: #707070 1px 1px 0px, #707070 -1px 1px 0px, #707070 1px -1px 0px, #707070 -1px -1px 0px; }

  *::-ms-backdrop,
  .title-area h2 {
    font-weight: 500;
    color: white;
    text-shadow: #444 1px 1px 0px, #444 -1px 1px 0px, #444 1px -1px 0px, #444 -1px -1px 0px; }

  *::-ms-backdrop,
  .footer {
    background-image: url("../img/bg_footer.png"); } }