@charset "UTF-8";
/*
Theme Name: fandb
Description: 花とレンガのテーマ
*/

@import url(https://8bd4fc.claudeassets.com/20250815002759cs_/http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*Thin 100, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900*/
@import url('https://fbb20a.claudeassets.com/20250815002759cs_/https://fonts.googleapis.com/css?family=Oswald');
@import url('https://0a66a7.claudeassets.com/20250815002759cs_/https://fonts.googleapis.com/css?family=Alegreya+SC');
@import url('https://6821ec.claudeassets.com/20250815002759cs_/https://fonts.googleapis.com/css?family=Imprima');

@-webkit-keyframes zoomIn {
  from {opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3)}
  50% {opacity: 1}
}
@keyframes zoomIn {
  from { opacity: 0;-webkit-transform: scale3d(0.3, 0.3, 0.3);transform: scale3d(0.3, 0.3, 0.3)}
  50% {opacity: 1}
}
@-webkit-keyframes zoomOut {
  from {opacity: 1}
  65% {opacity: 0;-webkit-transform: scale3d(0.6, 0.6, 0.6)}
  to {opacity: 0}
}
@keyframes zoomOut {
  from {opacity: 1}
  65% {opacity: 0;-webkit-transform: scale3d(0.6, 0.6, 0.6);transform: scale3d(0.6, 0.6, 0.6)}
  to {opacity: 0}
}
@-webkit-keyframes fadeIn {
  0% {display: none;opacity: 0}
  1% {display: block;opacity: 0}
  100% {display: block;opacity: 1}
}
@keyframes fadeIn {
  0% {display: none;opacity: 0}
  1% {display: block;opacity: 0}
  100% {display: block;opacity: 1}
}
@-webkit-keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translateY(40px)}
  100% {opacity: 1;-webkit-transform: translateY(0)}
}
@keyframes fadeInUp {
  0% {opacity: 0;-webkit-transform: translateY(40px);transform: translateY(40px)}
  100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0)}
}
@-webkit-keyframes right-to-center {
  0% {opacity: 0;-webkit-transform: translateX(30px);transform: translateX(30px)}
  100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
}
@keyframes right-to-center {
  0% {opacity: 0;-webkit-transform: translateX(30px);transform: translateX(30px)}
  100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
}
@-webkit-keyframes left-to-center {
  0% {opacity: 0;-webkit-transform: translateX(-30px);transform: translateX(-30px)}
  100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
}
@keyframes left-to-center {
  0% {opacity: 0;-webkit-transform: translateX(-30px);transform: translateX(-30px)}
  100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
}
@-webkit-keyframes center-to-left {
  0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
  100% {opacity: 0;-webkit-transform: translateX(-30px);transform: translateX(-30px)}
}
@keyframes center-to-left {
  0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
  100% {opacity: 0;-webkit-transform: translateX(-30px);transform: translateX(-30px)}
}
@-webkit-keyframes center-to-right {
  0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
  100% {opacity: 0;-webkit-transform: translateX(30px);transform: translateX(30px)}
}
@keyframes center-to-right {
  0% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0)}
  100% {opacity: 0;-webkit-transform: translateX(30px);transform: translateX(30px)}
}
@-webkit-keyframes bounce {
  0% {-webkit-transform: scale(1);transform: scale(1)}
  30% {-webkit-transform: scale(1.4);transform: scale(1.4)}
  60% {-webkit-transform: scale(1.2);transform: scale(1.2)}
  100% {-webkit-transform: scale(1.3);transform: scale(1.3)}
}
@keyframes bounce {
  0% {-webkit-transform: scale(1);transform: scale(1)}
  30% {-webkit-transform: scale(1.4);transform: scale(1.4)}
  60% {-webkit-transform: scale(1.2);transform: scale(1.2)}
  100% {-webkit-transform: scale(1.3);transform: scale(1.3)}
}
html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, p, blockquote, fieldset, input, abbr, article, aside, figure, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, em, strong, th {
  font-size: 1em;
  font-weight: normal;
  font-style: normal
}
img {
  vertical-align: bottom;
  border-style: none
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
  display: block
}
a {
  background-color: transparent;
  border-style: none
}
a:active, a:hover {
  outline: 0
}
.cf {
  zoom:1;
}
.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
br.pc{display:block;height:0;line-height:0;}
br.smp{display:none;}
@media (max-width: 640px) {
img{max-width:100% !important;height:auto !important;}
br.pc{display:none;}
br.smp{display:block;height:0;line-height:0;}
}/* @media (max-width:640px) end ----- */
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px !important;}
.mt40{margin-top:40px !important;}
.mt50{margin-top:50px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.fadeInUp {
  opacity: 0
}
.fadeInUp.loaded {
  opacity: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}
body {
  /*font-family: 'Open Sans', 'YuGothic_Family', 'YuGothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif*/
  font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif;
  letter-spacing: 0.03rem;
}
html, body {
  color: #302a20;
}
a {
  color: #222;
  text-decoration: underline
}
a:hover {
  text-decoration: underline
}
.grid {
  width: 100%
}
.grid:after {
  content: "";
  display: table;
  clear: both
}
.grid>.col {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}
.grid>.col.s12 {
  width: 100%
}
.grid>.col.s11 {
  width: 91.6666666667%
}
.grid>.col.s10 {
  width: 83.3333333333%
}
.grid>.col.s9 {
  width: 75%
}
.grid>.col.s8 {
  width: 66.6666666667%
}
.grid>.col.s7 {
  width: 58.3333333333%
}
.grid>.col.s6 {
  width: 50%
}
.grid>.col.s5 {
  width: 41.6666666667%
}
.grid>.col.s4 {
  width: 33.3333333333%
}
.grid>.col.s3 {
  width: 25%
}
.grid>.col.s2 {
  width: 16.6666666667%
}
.grid>.col.s1 {
  width: 8.3333333333%
}
.grid>.col:first-child {
  margin-left: 0
}
.grid.grid--spaces>.col {
  margin-left: 1%
}
.grid.grid--spaces>.col.s12 {
  width: 100%
}
.grid.grid--spaces>.col.s11 {
  width: 91.5833333333%
}
.grid.grid--spaces>.col.s10 {
  width: 83.1666666667%
}
.grid.grid--spaces>.col.s9 {
  width: 74.75%
}
.grid.grid--spaces>.col.s8 {
  width: 66.3333333333%
}
.grid.grid--spaces>.col.s7 {
  width: 57.9166666667%
}
.grid.grid--spaces>.col.s6 {
  width: 49.5%
}
.grid.grid--spaces>.col.s5 {
  width: 41.0833333333%
}
.grid.grid--spaces>.col.s4 {
  width: 32.6666666667%
}
.grid.grid--spaces>.col.s3 {
  width: 24.25%
}
.grid.grid--spaces>.col.s2 {
  width: 15.8333333333%
}
.grid.grid--spaces>.col.s1 {
  width: 7.4166666667%
}
.grid.grid--spaces>.col:first-child {
  margin-left: 0
}
input, button, textarea, select {
  background: none;
  border: none;
  border-radius: 0;
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}
.fieldset {
  margin-bottom: 1rem
}
.input {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 2rem;
  overflow: hidden;
  text-align: left
}
.input.--narrow {
  margin-bottom: 1rem
}
.input>input[type=email], .input input[type=number], .input input[type=password], .input input[type=search], .input input[type=tel], .input input[type=text], .input input[type=url] {
  display: block;
  width: 100%;
  height: 2.7rem;
  margin-top: .9rem;
  border-bottom: 1px solid #999;
  font-size: 1.2rem;
  line-height: 2.7rem
}
.input>input[type=email]::-webkit-input-placeholder, .input input[type=number]::-webkit-input-placeholder, .input input[type=password]::-webkit-input-placeholder, .input input[type=search]::-webkit-input-placeholder, .input input[type=tel]::-webkit-input-placeholder, .input input[type=text]::-webkit-input-placeholder, .input input[type=url]::-webkit-input-placeholder {
  color: #ccc
}
.input>input[type=email]:-moz-placeholder, .input input[type=number]:-moz-placeholder, .input input[type=password]:-moz-placeholder, .input input[type=search]:-moz-placeholder, .input input[type=tel]:-moz-placeholder, .input input[type=text]:-moz-placeholder, .input input[type=url]:-moz-placeholder {
  color: #ccc
}
.input>input[type=email]::-moz-placeholder, .input input[type=number]::-moz-placeholder, .input input[type=password]::-moz-placeholder, .input input[type=search]::-moz-placeholder, .input input[type=tel]::-moz-placeholder, .input input[type=text]::-moz-placeholder, .input input[type=url]::-moz-placeholder {
  color: #ccc
}
.input>input[type=email]:-webkit-autofill, .input input[type=number]:-webkit-autofill, .input input[type=password]:-webkit-autofill, .input input[type=search]:-webkit-autofill, .input input[type=tel]:-webkit-autofill, .input input[type=text]:-webkit-autofill, .input input[type=url]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #4ba53a
}
.input>input[type=email]~label, .input input[type=number]~label, .input input[type=password]~label, .input input[type=search]~label, .input input[type=tel]~label, .input input[type=text]~label, .input input[type=url]~label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: .8rem;
  line-height: .8rem;
  color: #000;
  pointer-events: none
}
.input>input[type=email]:focus~label, .input input[type=number]:focus~label, .input input[type=password]:focus~label, .input input[type=search]:focus~label, .input input[type=tel]:focus~label, .input input[type=text]:focus~label, .input input[type=url]:focus~label {
  color: #4ba53a
}
.input>input[type=email]:focus, .input input[type=number]:focus, .input input[type=password]:focus, .input input[type=search]:focus, .input input[type=tel]:focus, .input input[type=text]:focus, .input input[type=url]:focus {
  border-bottom-color: #4ba53a;
  color: #4ba53a
}
.input>input[type=email].invalid, .input input[type=number].invalid, .input input[type=password].invalid, .input input[type=search].invalid, .input input[type=tel].invalid, .input input[type=text].invalid, .input input[type=url].invalid {
  color: #fb4B60;
  border-bottom-color: #fb4B60
}
.input>input[type=email].invalid:-webkit-autofill, .input input[type=number].invalid:-webkit-autofill, .input input[type=password].invalid:-webkit-autofill, .input input[type=search].invalid:-webkit-autofill, .input input[type=tel].invalid:-webkit-autofill, .input input[type=text].invalid:-webkit-autofill, .input input[type=url].invalid:-webkit-autofill {
  -webkit-text-fill-color: #fb4B60
}
.input>input[type=email].invalid~label, .input input[type=number].invalid~label, .input input[type=password].invalid~label, .input input[type=search].invalid~label, .input input[type=tel].invalid~label, .input input[type=text].invalid~label, .input input[type=url].invalid~label {
  color: #fb4B60
}
.select:after {
  z-index: 1;
  position: absolute;
  top: 50%;
  right: .7rem;
  margin-top: -.4rem;
  font-family: 'icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e001";
  font-size: 1rem;
  color: #4ba53a
}
.select>select {
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  height: 2.7rem;
  margin-top: .9rem;
  padding: 0 1rem;
  background: transparent;
  border: 1px solid #9e9e9e;
  border-radius: 2px;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  text-transform: none;
  font: inherit;
  outline: 0
}
.select>select~label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: .8rem;
  line-height: .8rem;
  color: #000;
  pointer-events: none
}
.select>select:focus~label {
  color: #4ba53a
}
.select>select:focus {
  border-color: #4ba53a;
  color: #4ba53a
}
.select>select:focus~label {
  color: #4ba53a
}
.select>select.invalid {
  color: #fb4B60;
  border-color: #fb4B60
}
.select>select.invalid~label {
  color: #fb4B60
}
.select select::-ms-expand {
  display: none
}
.select select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #4ba53a
}
.radio_set>span {
  color: #666
}
.radio_set_horizontal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}
.radio_set_horizontal .radio:not(:first-child) {
  margin-left: 2rem
}
@media (max-width: 320px) {
  .radio_set span {
    display: none
  }
  .radio_set_horizontal .radio:nth-child(2) {
    margin-left: 0
  }
}/* @media (max-width:320px) end ----- */
@media (max-width: 640px) {
  .radio_set_horizontal .radio:not(:first-child) {
    margin-left: 1rem
  }
}/* @media (max-width:640px) end ----- */
.radio>input[type=radio] {
  position: absolute;
  left: -9999px;
  visibility: hidden
}
.radio>input[type=radio]+label {
  display: inline-block;
  position: relative;
  height: 1.5rem;
  padding-left: 2rem;
  line-height: 1.3rem;
  cursor: pointer
}
.radio>input[type=radio]+label:after, .radio>input[type=radio]+label:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  -webkit-transition: .28s ease;
  transition: .28s ease;
  content: '';
  z-index: 0
}
.radio>input[type=radio]:not(:checked)+label:before {
  border-radius: 50%;
  border: 2px solid #5a5a5a
}
.radio>input[type=radio]:not(:checked)+label:after {
  border-radius: 50%;
  border: 2px solid #5a5a5a;
  -webkit-transform: scale(0);
  transform: scale(0);
  z-index: -1
}
.radio>input[type=radio]:checked+label:before {
  border-radius: 50%;
  border: 2px solid transparent
}
.radio>input[type=radio]:checked+label:after {
  border-radius: 50%;
  border: 2px solid #4ba53a;
  background-color: #4ba53a;
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  z-index: 0
}
.radio>input[type=radio].invalid+label:before {
  border: 2px solid #fb4B60
}
.checkbox {
  margin-bottom: .5rem
}
.checkbox>input[type=checkbox] {
  position: absolute;
  left: -9999px
}
.checkbox>input[type=checkbox]+label {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}
.checkbox>input[type=checkbox]+label:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 2px;
  border: 2px solid #5a5a5a;
  border-radius: 1px;
  -webkit-transition: .2s;
  transition: .2s;
  content: '';
  z-index: 0
}
.checkbox>input[type=checkbox]+label:after {
  border-radius: 2px
}
.checkbox>input[type=checkbox]+label:after, .checkbox>input[type=checkbox]+label:before {
  position: absolute;
  left: 0;
  -webkit-transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
  transition: border .25s, background-color .25s, width .2s .1s, height .2s .1s, top .2s .1s, left .2s .1s;
  content: '';
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.checkbox>input[type=checkbox]:checked+label:before {
  top: 2px;
  left: 0;
  width: 5px;
  height: 12px;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotateZ(36deg);
  transform: rotateZ(36deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}
.checkbox>input[type=checkbox]:checked+label:after {
  top: 3px;
  width: 18px;
  height: 18px;
  border: 2px solid #4ba53a;
  background-color: #4ba53a;
  z-index: 0
}
.checkbox>input[type=checkbox]:not(:checked)+label:before {
  top: 12px;
  left: 6px;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  -webkit-transform: rotateZ(36deg);
  transform: rotateZ(36deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}
.checkbox>input[type=checkbox]:not(:checked)+label:after {
  top: 3px;
  width: 18px;
  height: 18px;
  background-color: transparent;
  border: 2px solid #5a5a5a;
  z-index: 0
}
input[type=checkbox]:disabled+label {
  cursor: default
}
input[type=checkbox]:disabled:not(:checked)+label {
  color: #bdbdbd
}
input[type=checkbox]:disabled:not(:checked)+label:before {
  background-color: transparent;
  border: 2px solid transparent
}
input[type=checkbox]:disabled:not(:checked)+label:after {
  border-color: #bdbdbd;
  background-color: transparent
}
input[type=checkbox]:disabled:checked+label {
  color: #bdbdbd
}
input[type=checkbox]:disabled:checked+label:before {
  background-color: transparent;
  top: 2px;
  left: 0;
  width: 5px;
  height: 12px;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-right: 3px solid #bdbdbd;
  border-bottom: 3px solid #bdbdbd;
  -webkit-transform: rotateZ(36deg);
  transform: rotateZ(36deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%
}
input[type=checkbox]:disabled:checked+label:after {
  border-color: #bdbdbd;
  background-color: transparent
}
.toggle_set {
  width: 100%;
  overflow: hidden
}
.toggle_set input[type=checkbox] {
  position: absolute;
  left: -9999px
}
.toggle_set label {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: #666;
  -webkit-tap-highlight-color: transparent
}
@media (max-width: 640px) {
  .toggle_set label {
    padding: 15px 4% 15px 0
  }
}/* @media (max-width:640px) end ----- */
@media (min-width: 641px) {
  .toggle_set label {
    padding: 15px 4% 17px 0
  }
}/* @media (min-width:641px) end ----- */
.toggle_set label:last-child {
  border-bottom: 1px solid #efefef
}
.toggle_set label>i {
  display: inline-block;
  -webkit-box-sizing: initial;
  box-sizing: initial;
  float: right;
  padding: 2px;
  border-radius: 12px;
  vertical-align: middle;
  -webkit-transition: .25s .09s;
  transition: .25s .09s;
  position: relative;
  background: #d8d9db
}
@media (max-width: 640px) {
  .toggle_set label>i {
    margin-top: 2px;
    width: 52px;
    height: 26px;
    border-radius: 15px
  }
}/* @media (max-width:640px) end ----- */
@media (min-width: 641px) {
  .toggle_set label>i {
    margin-top: 4px;
    width: 40px;
    height: 20px;
    border-radius: 12px
  }
}/* @media (min-width:641px) end ----- */
.toggle_set label>i:after {
  content: " ";
  display: block;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 2px;
  -webkit-transition: .25s;
  transition: .25s;
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
@media (max-width: 640px) {
  .toggle_set label>i:after {
    width: 26px;
    height: 26px
  }
}/* @media (max-width:640px) end ----- */
@media (min-width: 641px) {
  .toggle_set label>i:after {
    width: 20px;
    height: 20px
  }
}/* @media (min-width:641px) end ----- */
.toggle_set label>input:checked+i {
  background: #4ba53a
}
@media (max-width: 640px) {
  .toggle_set label>input:checked+i:after {
    -webkit-transform: translateX(26px);
    transform: translateX(26px)
  }
}/* @media (max-width:640px) end ----- */
@media (min-width: 641px) {
  .toggle_set label>input:checked+i:after {
    -webkit-transform: translateX(20px);
    transform: translateX(20px)
  }
}/* @media (min-width:641px) end ----- */
.toggle_set label :hover {
  cursor: pointer
}
.dropdown__overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  z-index: 1
}
.dropdown--open .dropdown__overlay {
  display: block
}
.dropdown {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  margin-top: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid #9e9e9e;
  border-radius: 2px;
  text-align: left;
  cursor: pointer
}
.dropdown .dropdown__value {
  padding: 0 1rem
}
.dropdown .dropdown__item--value {
  line-height: 2.6rem
}
.dropdown .dropdown__item--subtext {
  position: absolute;
  bottom: .6rem;
  display: block;
  font-size: .8rem;
  line-height: .8rem;
  color: #999
}
.dropdown:after {
  position: absolute;
  display: block;
  top: .9rem;
  right: 1rem;
  height: 1rem;
  font-family: 'icon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e001";
  font-size: 1rem;
  color: #4ba53a
}
.dropdown>select {
  display: none
}
.dropdown>select~label {
  position: absolute;
  left: 0;
  top: -1.5rem;
  color: #999;
  font-size: .8rem;
  pointer-events: none
}
.dropdown>.dropdown__contents {
  position: absolute;
  top: 0;
  width: 100%;
  height: 3.5rem;
  overflow: hidden !important;
  opacity: 0;
  background: #fff;
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 10
}
.dropdown>.dropdown__contents>ul {
  display: none;
  list-style: none
}
.dropdown>.dropdown__contents>ul>:not(:first-child) {
  border-top: 1px solid #ccc
}
.dropdown>.dropdown__contents>ul>.dropdown__item {
  position: relative;
  width: 100%;
  height: 3.5rem;
  padding: 0 1rem;
  overflow: hidden;
  -webkit-transition: .1s ease-out;
  transition: .1s ease-out
}
.dropdown>.dropdown__contents>ul>.dropdown__item :before {
  position: absolute;
  content: '';
  display: block;
  top: -1.3rem;
  left: -3.8rem;
  width: 2rem;
  height: 2rem;
  background-color: #4ba53a;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg)
}
@media (min-width: 641px) {
  .dropdown>.dropdown__contents>ul>.dropdown__item :before {
    position: absolute;
    content: '';
    display: block;
    top: -1.3rem;
    left: -3.8rem;
    width: 2rem;
    height: 2rem;
    background-color: #4ba53a;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg)
  }
  .dropdown>.dropdown__contents>ul>.dropdown__item:hover {
    padding-left: 2rem;
    color: #4ba53a
  }
  .dropdown>.dropdown__contents>ul>.dropdown__item:hover :befor {
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    font-family: 'icon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e001";
    font-size: 1rem;
    color: #4ba53a
  }
}/* @media (min-width:641px) end ----- */
.dropdown.open {
  border-color: #fff
}
.dropdown.open>.dropdown__contents {
  opacity: 1
}
.dropdown.open>.dropdown__contents>ul {
  display: block
}
.drop__label.drop__label--qty {
  padding-right: .5rem;
  font-size: .9rem;
  color: #999;
  line-height: 30px;
  vertical-align: top
}
.drop {
  position: relative;
  width: 120px;
  height: 3rem;
  line-height: 3rem;
  background: #4ba53a;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent
}
.drop span {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.drop li {
  display: block;
  color: #666
}
@media (min-width: 641px) {
  .drop li:hover {
    background-color: #4ba53a;
    border-color: #4ba53a;
    color: #fff
  }
}/* @media (min-width:641px) end ----- */
.drop.drop--paragraph {
  display: inline-block;
  width: 100%;
  height: 4rem;
  padding: .6rem 3rem .5rem 1.5rem;
  background-color: transparent;
  border: 1px solid #999;
  text-align: left;
  font-size: .9rem;
  line-height: 1.5;
  color: #666
}
.drop.drop--paragraph:after {
  position: absolute;
  top: 50%;
  right: 1rem;
  margin-top: -.7rem;
  font-family: icon;
  font-size: 1rem;
  content: "\e001";
  color: #4ba53a
}
.drop.drop--paragraph span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.drop.drop--paragraph span>em {
  display: block
}
.drop.drop--paragraph li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 5rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.5
}
.drop.drop--paragraph li>em {
  display: block;
  padding: 0 1rem
}
.drop.drop--paragraph>label {
  display: inline-block;
  color: #999
}
.drop.drop--qty {
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: transparent;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: .9rem;
  line-height: 28px;
  color: #666
}
.drop.drop--qty li {
  height: 52px;
  line-height: 50px
}
.drop.drop--qty>label {
  display: inline-block;
  color: #999
}
.drop>select {
  display: none
}
.drop>.drop__content {
  display: none;
  position: absolute;
  z-index: -999;
  left: -10px;
  overflow: scroll;
  background: #fff;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-overflow-scrolling: touch
}
.drop.open>.drop__content {
  -webkit-animation: Drop-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation: Drop-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
  z-index: 999;
  display: block
}
.drop.close>.drop__content {
  -webkit-animation: Drop-out 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation: Drop-out 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both
}
.drop_overlay {
  display: none
}
.drop-on .drop_overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 120%;
  opacity: 1;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
  z-index: 900
}
@media (max-width: 640px) {
  .drop-on .drop_overlay {
    cursor: pointer
  }
}/* @media (max-width:640px) end ----- */
@-webkit-keyframes Drop-in {
  0% {-webkit-transform: scale(0);transform: scale(0)}
  100% {-webkit-transform: scale(1);transform: scale(1)}
}
@keyframes Drop-in {
  0% {-webkit-transform: scale(0);transform: scale(0)}
  100% {-webkit-transform: scale(1);transform: scale(1)}
}
@-webkit-keyframes Drop-out {
  0% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)}
  100% {opacity: 0;-webkit-transform: scale(0);transform: scale(0)}
}
@keyframes Drop-out {
  0% {opacity: 1;-webkit-transform: scale(1);transform: scale(1)}
  100% {opacity: 0;-webkit-transform: scale(0);transform: scale(0)}
}
.modal__overlay {
  display: none
}
.modal--on .modal__overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 120%;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
  -webkit-tap-highlight-color: transparent;
  z-index: 900
}
.modal {
  display: none;
  z-index: -9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  -webkit-tap-highlight-color: transparent
}
.modal.modal--active {
  display: block;
  z-index: 9999;
  overflow-y: auto;
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1)
}
.modal.modal--close--animation {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut
}
.modal .modal__content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.modal .modal__close {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 50px;
  line-height: 50px;
  cursor: pointer;
  z-index: 9999
}
.modal .modal__close:hover {
  color: rgba(0, 0, 0, 0.5)
}
.header {
  width: 100%;
  height: 50px;
  background:linear-gradient(45deg, rgba(122,188,76, 1.0) 0%,rgba(81,180,82, 1.0) 10%, rgba(244,212,32, 1.0), rgba(234,85,20, 1.0));
  background:-webkit-linear-gradient(45deg, rgba(122,188,76, 1.0) 0%,rgba(81,180,82, 1.0) 10%, rgba(244,212,32, 1.0), rgba(234,85,20, 1.0));
  /*background:rgba(16, 127, 0,0.8);
  mix-blend-mode:darken;*/
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
@media (max-width:640px) {
.header {
  position: fixed;
  z-index: 888;
  top: 0;
  width: 100%;
  color: #fff;
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: height .2s linear, -webkit-transform .3s;
  transition: height .2s linear, -webkit-transform .3s;
  transition: transform .3s, height .2s linear;
  transition: transform .3s, height .2s linear, -webkit-transform .3s
}
.header.header--sleep {
  -webkit-transform: translate3d(0, -112px, 0);
  transform: translate3d(0, -112px, 0)
}
}/* @media (max-width:640px) end ----- */

.logo_w {
  position: relative
}
.logo_w>.logo {
  position: absolute;
  cursor: pointer;
  top: 9px;
  right:20px;
  /*left: 50%;
  transform: translateX(-50%);*/
  border: none;
  outline: none;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.1rem;
  /*color:rgba(48, 42, 32,0.75);*/
  color:rgba(255,255,255,0.6);
  letter-spacing: 0.02em;
}
.logo_w>.logo>.s {
  font-size: 0.8em;
  padding:0 2px 0 4px;
}
.logo_w>.logo>img {
  vertical-align: top
}
.logo_w .drawer-toggle,
.drawer-nav{
  display: none;
  z-index: 888;
}
@media (max-width:640px) {
.logo_w {
  width: 100%;
  height: 56px;
  overflow: hidden;
  text-align: center
}
.logo_w .logo>img {
  width: 113px;
  height: 16px;
  margin: 20px auto 0
}
.logo_w a {
  color: #fff;
  text-decoration: none
}
.drawer-nav{
   display: block;
}
.logo_w .drawer-toggle {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
  padding: 7px 0.75rem;
  color:#388522;
}
.drawer-hamburger-icon, .drawer-hamburger-icon::after, .drawer-hamburger-icon::before {
  background-color: #388522 !important;
}
.drawer-open .drawer-hamburger-icon{
  background-color: transparent !important;
}
}/* @media (max-width:640px) end ----- */
.navigation {
  position: relative;
  z-index: 890;
  background: rgba(255,255,255,0.4);
  box-shadow: 0 10px 10px rgba(48, 42, 32,0.1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
.navigation>.navigation__content {
  max-width: 980px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  line-height: 52px;
  list-style: none
}
.navigation>.navigation__content>.navigation__item {
  float: left;
  width: calc(100% / 6);
  height: 45px;
  position: relative
}
.navigation>.navigation__content>.navigation__item>a {
  display: block;
  width: 100%;
  height: 50px;
  color: #302a20;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.navigation>.navigation__content>.navigation__item>a:hover {
  color: rgba(48, 42, 32,0.7);
  border-bottom:solid 2px rgba(255,255,255,0.7);
  box-sizing: border-box;
}
@media (max-width:640px) {
.navigation {
  display: none;
}
.drawer-nav {
  position: fixed;
  z-index: 999 !important;
  top: 0;
  left: -70%;
  overflow: hidden;
  width: 70%;
  height: 100%;
  background-color: rgba(255,255,255,0.9) !important;
  color: #302a20;
  -webkit-transition: left 300ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: left 300ms cubic-bezier(0.19, 1, 0.22, 1)
}
.drawer-open .drawer-nav {
  left: 0;
  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.navigation__item {
  position: relative;
  border-bottom: 1px solid #efefef
}
.navigation__item a {
  position: relative;
  display: block;
  padding-left: 30px;
  height: 55px;
  line-height: 55px;
  font-size: .9rem;
  text-decoration: none;
  text-transform: uppercase;
  color: #302a20;
  border-left:solid 7px transparent;
}
.navigation__item a:hover {
  color: #388522;
  border-left:solid 7px #5cb650;
}
.drawer-overlay {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
  -webkit-tap-highlight-color: transparent
}
.drawer-open .drawer-overlay {
  display: block;
  opacity: 1;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}
/*!
 * Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content
 */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}
/*!
 * Use in conjunction with .sr-only to only display content when it's focused.
 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 * Credit: HTML5 Boilerplate
 */
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0
}
}/* @media (max-width:640px) end ----- */
.footer {
  position: relative;
  padding-top: 20px;
  background: #302a20;
  font-size: 12px;
  line-height: 1.7
}
.footer .voice{
  position: relative;
  height: 32px;
  margin-bottom:10px;
}
.footer input#check {
  display: none;
}
.footer label.check {
  cursor: pointer;
  display: inline-block;
  padding: 0 20px;
  border-radius: 3px;
  background: #51b452;
  line-height: 32px;
  color: #FFF;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.footer label.check:hover {
  background: #fff;
  color: #51b452;
}
.footer .panel {
  -webkit-transition: .3s ease;
  transition: .3s ease;
  height: 0;
  overflow: hidden;
  background: rgba(81, 180, 82,0.9);
  border-radius: 3px;
  top:-50px;
  position: relative;
  color:rgba(255,255,255,0.7);
}
.footer input:checked + .panel {
  height: 260px;
  top:-300px;
  padding: 5px 15px;
  box-sizing: border-box;
}
.footer .form input,
.footer .form textarea{
  background:rgba(255,255,255,0.9);
  width: 100%;
  font-size: 11px;
  padding: 7px 10px;
  box-sizing: border-box;
  font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif !important;
}
.footer .form textarea{
  height: 75px;
}
.footer .form input[type="submit"]{
  margin-top:10px;
}
.footer .form input[type="submit"]:hover{
  background: #302a20;
  color:#fff;
}
div.wpcf7-mail-sent-ok {
  background: rgba(27, 149, 224, 0.9) !important;
}
div.wpcf7-mail-sent-ng{
  background: rgba(207, 17, 38,0.9) !important;
}
div.wpcf7-spam-blocked {
  background: rgba(239, 145, 26,0.9) !important;
}
div.wpcf7-validation-errors {
	background: rgba(244, 212, 32,0.9) !important;
}
div.wpcf7-response-output{
  color:#fff !important;
  position: absolute;
  z-index: 100;
  top:auto;
  bottom:260px;
  left:0;
  right:0;
  border: none !important;
  text-align: left;
  padding:0.4em 1em !important;
}
.wpcf7-form-control-wrap{
  position: relative;
}
.wpcf7-not-valid-tip{
  background: #ea5514 !important;
  color:#fff !important;
  font-family: 'Open Sans', 'Noto Sans Japanese', sans-serif !important;
  position: absolute;
  bottom:-10px;
  left:0;
  text-align: left;
}
@media (max-width: 980px) {
.footer .viewport {
  max-width: 90% !important;
}
.footer .voice {
  margin-top:-80px;
}
}/* @media (max-width:980px) end ----- */
@media (max-width: 640px) {
.footer .voice {
  margin-top:0;
  text-align: right;
}
}/* @media (max-width:640px) end ----- */
.widget {
  clear: both;
  position: relative;
  padding-top: 20px;
  color: rgba(200,200,200,0.5);
  text-align: right
}
.widget .social {
  position: absolute;
  bottom: 0
}
.widget .social a {
  margin: 0 5px;
  font-size: 34px;
  line-height: 50px;
  color: #ccc;
  text-decoration: none
}
.widget .social a:hover {
  color: #fff
}
.widget .widget__item.address{
  float: right;
  width: 30%;
  margin-top:30px;
}
.widget .widget__item.address ul{
  padding-bottom:10px;
}
.widget .widget__item li{
  margin-bottom:25px;
  text-align: left;
  font-size: 0.9rem;
  list-style: none;
}
.widget .copyright{
  padding-bottom: 5px;
  font-size: 11px;
  line-height: 14px
}
.widget .copyright__text {
  margin-bottom: 14.4px;
  margin-bottom: .8rem
}
.widget #gmap{
  width: 65%;
  height: 300px;
  float: left;
  margin-bottom:30px;
}
@media (max-width:980px) {
.widget #gmap{
  width: 100%;
  float: none;
  margin: 0 auto 30px;
}
.widget .widget__item.address{
  float: none;
  width: 100%;
}
}
@media (max-width:640px) {
.widget {
  text-align: center
}
.widget .social {
  padding: 23px 0 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.widget .social a {
  margin: 0 12px;
  font-size: 36px;
  line-height: 50px;
  color: #fff;
  text-decoration: none
}
.widget .copyright{
  text-align: right;
}
.widget #gmap iframe{
  width:100%;
}
}/* @media (max-width:640px) end ----- */

html {
  background-color: #383838;
  overflow-x: auto
}
body {
  width: 100%;
  overflow: hidden;
  background:#fff url(https://158fa4.claudeassets.com/20250815002759im_/https://www.hanatorenga.com/wp-content/themes/fandb/img/main.jpg) center top no-repeat fixed;
  background-size: 115%;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 400
}
.__hidden, .__is_mobile, .pagemap--mobile, .toast {
  display: none
}
.viewport {
  position: relative;
  max-width: 980px;
  height: 100%;
  margin: 0 auto
}
.main {
  position: relative
}
@media (max-width:1350px) {
body {
  background-size: cover;
}
}/* @media (max-width:1350px) end ----- */
@media (max-width:640px) {
html {
  background-color: #222
}
body {
  width: 100%;
  /*background:#fff url(https://158fa4.claudeassets.com/20250815002759im_/https://www.hanatorenga.com/wp-content/themes/fandb/img/main.jpg) center top no-repeat fixed;*/
  background:none;
  background-size: 300% auto;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400
}
body::before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:#fff url(https://158fa4.claudeassets.com/20250815002759im_/https://www.hanatorenga.com/wp-content/themes/fandb/img/main.jpg) center top no-repeat; /*fixedをトル！*/
  background-size: 300% auto;
  -webkit-background-size:cover;/*Android4*/
  }
#purchase-data, .purchase-product, .purchase-information {
  display: none
}
.__hidden, .__is_desktop {
  display: none
}
.viewport {
  width: 90%;
  margin: 0 auto
}
.main {
  position: relative;
  width: 100%;
  padding-top: 56px;
  overflow: hidden
}
}/* @media (max-width:640px) end ----- */


.img__wrapper {
  width: 100%;
}
.img__wrapper img {
  max-width: 100%;
  height: auto
}
.img__wrapper .l_area{
  float: left;
  max-width:60%;
}
.img__wrapper .r_area{
  float: right;
  padding-top:195px;
  overflow: hidden;
}
.img__wrapper h1{
  position: relative;
  z-index: 2;
}
.img__wrapper .times{
  width: 140px;
  height: 127px;
  padding-bottom:8px;
  border-radius: 70px;
  background:rgba(236,75,162,1.0);
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 1.6em;
  color:#fff;
  letter-spacing: -0.1rem;
  box-sizing: content-box;
  transform: translate(-60px,45px);
  font-family:'Oswald','Noto Sans Japanese', sans-serif;
}
.img__wrapper .times span{
  font-size: 2.6em;
  vertical-align: -6px;
}
.img__wrapper .year{
  font-family:'Oswald','Noto Sans Japanese', sans-serif;
  font-size: 1.2em;
  line-height: 1.3;
  margin-bottom:-45px;
}
.img__wrapper .day{
  font-family:'Oswald','Noto Sans Japanese', sans-serif;
  font-size: 1.8em;
  line-height: 1.2;
}
.img__wrapper .day span.l{
  font-size: 2.1em;
}
.img__wrapper .day span.s{
  font-size: 11px;
  padding:2px 0 4px;
  background:#5CB650;
  display: inline-block;
  margin-left:10px;
  color:#fff;
  transform:translateY(-8px);
  letter-spacing: 0.15em;
  font-weight: 150 !important;
  width: 200px;
  text-align: center;
}
.img__wrapper .place{
padding-top:3px;
margin-top: 7px;
  font-size:0.98rem;
  text-align: center;
  border-top:solid 1px #302a20
}
.img__wrapper .txt{
  margin-left:22px;
  line-height: 1.45;
}
.img__wrapper .osirase{
  /*margin:12px 0 0 12px;*/ /* コロナ対応 */
  margin:32px 0 0 12px;
  padding:10px 20px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 4px;
  /*background:rgba(255,255,255,0.85);
  background:rgba(237, 121, 23,0.9);
  background: rgba(236,75,162,0.9);*/
  background: rgba(237, 126, 24,0.9);
  color:#fff;
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}
.img__wrapper .osirase_w{
  overflow: hidden;
  position: relative;
}
.img__wrapper .osirase p {
  font-weight: 100;
  font-size: 140%;
  margin:10px 20px 0;
  display: inline-block;
  /*margin:0 20px;
  white-space: nowrap;
  padding-left: 100%;
  -webkit-animation-name: marquee;
  -moz-animation-name: marquee;
  animation-name: marquee;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 32s;
  -moz-animation-duration: 32s;
  animation-duration: 32s;*/ /* コロナ対応 */
}
/*@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}*/
@media (max-width:980px) {
.img__wrapper .l_area{
  padding-bottom:60px;
  text-align: center;
  float: none;
  max-width:100%;
}
.img__wrapper .r_area{
  padding-top:35px !important;
  text-align: center;
  float: none;
  padding-top:195px;
  overflow: hidden;
  background: rgba(221,240,218,0.9);
}
.img__wrapper .times{
  transform: none;
  margin:0 auto;
  display: inline-block;
  margin-bottom:-30px;
}
.img__wrapper .year{
  transform:translateX(-160px);
}
.img__wrapper .txt{
  margin-left:0;
  margin-top: 0 !important;
  padding:20px 10%;
  background: rgba(221,240,218,0.9);
}
.img__wrapper .osirase{
  margin:12px 0 0 0;
  -webkit-transform:none;/* コロナ対応 */
  transform:none;
}
}/* @media (max-width:980px) end ----- */
@media (max-width:640px) {
.img__wrapper .l_area{
  padding-top:20px;
}
.img__wrapper .year{
  transform:translateX(-132px);
  margin-bottom:-30px;
}
.img__wrapper .place{
  margin: 7px 5% 0;
}
.img__wrapper .day span.l {
    font-size: 1.8em;
}
}/* @media (max-width:640px) end ----- */

.column_title {
  /*margin-bottom: 18px;
  margin-bottom: 1rem;*/
  font-size: 45px;
  font-size: 2.5rem;
  text-align: center;
  letter-spacing: 0.1rem;
  font-family: 'Alegreya SC',"Noto Sans Japanese",sans-serif;
  font-weight: 900;
  color:#302a20;
  line-height: 1.0;
}
.column_title span{
  letter-spacing: 0;
  font-size: 18px;
  font-size: 0.86rem;
  font-weight: 400 !important;
  display: inline-block;
  transform: translateY(-15px);
}
a.__button {
  display: inline-block;
  margin: 0 auto;
  padding:0 20px;
  height: 32px;
  border: 1px solid #999;
  border-radius: 16px;
  line-height: 33px;
  font-size: 16.2px;
  font-size: .9rem;
  text-align: center;
  text-decoration: none;
  color: #999;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s
}
a.__button:hover {
  padding:0 40px;
  border-color: #333;
  color: #333
}
.__image a:hover img {
  opacity: .8;
}
.__image a {
  display: block;
  background:rgba(255,255,255,1.0);
}
@media (max-width:640px) {
.column_title {
  font-size: 2rem;
  text-align: center
}
}/* @media (max-width:640px) end ----- */

.populars_wrapper {
  padding: 48px 0 72px;
  padding: 3rem 0 4rem
}
.populars_wrapper .viewport {
  padding:59px 0 64px;
  padding:3.7rem 0 4rem;
  text-align: center;
  max-width: 1180px;
  background:rgba(255,255,255,0.6);
  border-top:solid 3px rgba(255,255,255,0.15);
  border-bottom:solid 2px rgba(255,255,255,0.15);
}
.populars_wrapper .hash{
  position: relative;
}
.populars_wrapper .column_title{
  width:83%;
  float: left;
}
.populars_wrapper .hash p{
  position: absolute;
  right:22%;
  font-size: 45px;
  font-size: 2.5rem;
  text-align: center;
  letter-spacing: 0.1rem;
  font-family: 'Alegreya SC',"Noto Sans Japanese",sans-serif;
  font-weight: 900;
  color:#302a20;
  line-height: 1.0;
}
.populars_wrapper .populars {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding:0 20px 35px;
}
.populars_wrapper .populars .popular {
  /*width: 48%;
  max-width: 330px;*/
  text-decoration: none;
  line-height: 1.5;
  margin:10px 15px;
  box-sizing: border-box;
  display: block;
}
.populars_wrapper .populars .popular.l_area {
  width:calc(40% - 30px);
  background:rgba(27, 149, 224,0.8);
  padding:5px 15px 10px;
  border-radius: 3px;
}
.populars_wrapper .populars .popular.r_area {
  width:calc(60% - 30px);
  /*background:linear-gradient(-135deg,rgba(20, 0, 200,0.6),rgba(185, 0, 180,0.6),rgba(245, 0, 0,0.6));
  background:-webkit-linear-gradient(-135deg,rgba(20, 0, 200,0.6),rgba(185, 0, 180,0.6),rgba(245, 0, 0,0.6));*/
  padding:0 15px 10px;
  border-radius: 3px;
}
.populars_wrapper .populars .popular .__title {
  padding-top:10px;
  font-size: 24px;
  font-size: 1.3rem;
  letter-spacing: 0.07rem;
  font-weight: 500;
  color:rgba(255,255,255,0.9);
}
.populars_wrapper .populars .popular .__title i{
  padding-right:0.7rem;
  vertical-align: -2px;
}
.populars_wrapper .populars .popular .__title:after {
  display: block;
  content: "";
  width: 40px;
  margin: 9px auto;
  margin: .5rem auto;
  height: 1px;
  border-bottom: 1px solid rgba(255,255,255,0.8);
}
.populars_wrapper .populars .popular .__image {
  padding-top: 90%;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  opacity: 0
}
.populars_wrapper .populars .popular .__image:hover {
  opacity: .6
}
.populars_wrapper .populars .popular.__new:after {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  content: "New";
  position: absolute;
  top: 53%;
  left: 0%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e59703;
  text-align: center;
  line-height: 50px;
  white-space: nowrap;
  color: #fff
}
.populars_wrapper .photocon{
  font-size:23px;
}
.populars_wrapper .photocon span{
  font-family: "Oswald","Noto Sans Japanese",sans-serif;
  font-size: 32px;
  padding:0 6px;
  vertical-align: -2px;
}
.populars_wrapper .oubo{
  padding:17px 35px 15px 50px;
  border-radius: 10px;
  background:rgba(255,255,255,0.6);
  display: inline-block;
  text-align: left;
  margin:0 auto;
  font-size: 15px;
  color:#666;
  line-height: 1.8;
}
.populars_wrapper .oubo p.end{
  text-decoration: line-through;
}
.populars_wrapper .oubo p.end02{
  color:#EC4BA2;
  font-weight: 600;
  padding-left:15px;
  font-size: 90%;
}
.populars_wrapper .oubo span{
  border:solid 1px #888;
  font-size: 10.5px;
  padding:1px 10px 2px 15px;
  display: inline-block;
  margin-right:10px;
  line-height: 1.1;
  letter-spacing: 0.2em;
  vertical-align: 1px;
  font-weight: 300;
}
.populars_wrapper .oubo strong{
  font-weight: 500;
  color:#302a20;
}
.populars_wrapper #instafeed li{
  width: 32%;
  max-width: 320px;
  margin-top:1.5rem;
  text-decoration: none;
  line-height: 1.5;
  list-style: none;
}
.populars_wrapper #instafeed li img{
  max-width: 100%;
  height: auto;
}
@media (max-width:980px) {
.populars_wrapper .column_title{
  width:100%;
  text-align: center;
}
.populars_wrapper .hash p{
  position: static;
  width:100%;
  text-align: center;
}
}/* @media (max-width:980px) end ----- */
@media (max-width:640px) {
.populars_wrapper {
  padding: 3rem 0
}
.populars_wrapper .viewport {
  width: 100%
}
.populars_wrapper .inner {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}
.populars_wrapper .populars {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 0 0 2rem;
  text-align: center
}
.populars_wrapper .populars .popular {
  position: relative;
  width: 23%;
  text-decoration: none;
  line-height: 1.5
}
.populars_wrapper .populars .popular .__image {
  padding-top: 71.7391%;
  background-repeat: no-repeat;
  background-size: cover
}
.populars_wrapper .populars .popular.__new:after {
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
  content: "New";
  position: absolute;
  top: 49%;
  left: 0%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e59703;
  text-align: center;
  line-height: 50px;
  white-space: nowrap;
  color: #fff
}
.populars_wrapper .populars .popular.l_area {
  width:100%;
  float: none;
}
.populars_wrapper .populars .popular.l_area iframe{
  width:100%;
}
.populars_wrapper .populars .popular.r_area {
  width:100%;
  float: none;
}
.populars_wrapper .photocon{
  text-align: center;
  line-height: 1.3;
}
.populars_wrapper .oubo{
  margin:0 5% 0;
  padding: 17px 5% 15px;
}
.populars_wrapper .sasayaka{
  text-align: center;
  max-width: 90%;
  margin:0 auto;
}
}/* @media (max-width:640px) end ----- */

.topics_wrapper {
  padding: 72px 0;
  padding: 4rem 0;
  background-color: #fbfbfb;
  /*border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd*/
}
.topics_wrapper .viewport {
  text-align: center;
}
@media only screen and (max-width: 980px) {
  .topics_wrapper .viewport {
    width: 90%
  }
}/* @media (max-width:980px) end ----- */
.topics_wrapper .topics {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: left;
}
.topics_wrapper .topics .topic {
  width: 32%;
  max-width: 320px;
  /*height: 350px;*/
  text-decoration: none;
  line-height: 1.5
}
.topics_wrapper .topics .topic .__title {
  margin-bottom: 9px;
  margin-bottom: .5rem
}
.topics_wrapper .topics .topic .__description {
  font-size: 14.4px;
  font-size: .8rem;
  color: #999
}
.topics_wrapper .topics .topic .__image img{
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}
@media (max-width:640px) {
.topics_wrapper {
  padding: 3rem 0;
}
.topics_wrapper .topics{
  padding: 0 0 3rem;
}
.topics_wrapper .topics .topic {
  display: block;
  width: 91.1111%;
  height: auto;
  margin: 0 auto;
  text-decoration: none;
  line-height: 1.5;
  text-align: center;
  max-width: 100%;
}
.topics_wrapper .topics .topic .__title {
  margin-bottom: .3rem
}
.topics_wrapper .topics .topic .__description {
  width: 90%;
  margin: 0 auto;
  font-size: .8rem;
  color: #999
}
.topics_wrapper .topics .topic .__image {
  margin-top: 1rem;
  padding-top: 0;
}
}/* @media (max-width:640px) end ----- */

.notice {
  padding: 36px 0;
  padding: 2rem 0;
  background:linear-gradient(right,#00913A 2%, #b65513 40%,#b65513 60%, #ec4ba2 80%);
  background:-webkit-linear-gradient(right,#00913A 2%, #b65513 40%,#b65513 60%, #ec4ba2 80%);
  text-align: center;
  color: #fff;
}
.notice img{
  max-width: 100%;
}
.notice .viewport {
  width: calc(100% - 60px);
  max-width: calc(100% - 60px);
}
.notice .l_area{
  width: calc((100% - 60px) / 3);
  float: left;
}
.notice .c_area{
  width: calc((100% - 60px) / 3);
  float: left;
  margin:0 30px;
}
.notice .r_area{
  width: calc((100% - 60px) / 3);
  float: right;
}
.notice h2{
  font-size:1.8rem;
  letter-spacing: 0.2rem;
  margin-bottom: 0.8rem;
}
.notice .__item {
  position: relative;
  font-size: 16.2px;
  font-size: .9rem;
  color: #fff
}
@media (max-width:640px) {
.notice {
  background:linear-gradient(bottom,#00913A 2%, #b65513 40%,#b65513 60%, #ec4ba2 80%);
  background:-webkit-linear-gradient(bottom,#00913A 2%, #b65513 40%,#b65513 60%, #ec4ba2 80%);
}
.notice .l_area{
  width: 100%;
  padding:20px 0 30px;
  float: none;
}
.notice .c_area{
  width: 100%;
  padding:20px 0 30px;
  margin:0;
  float: none;
}
.notice .r_area{
  width: 100%;
  padding:20px 0 30px;
  float: none;
}
}/* @media (max-width:640px) end ----- */

.foodbank {
  padding: 72px 0;
  padding: 4rem 0;
  text-align: center;
	position: relative;
  background: rgba(255, 241, 0,0.5);
}
.foodbank:before{
  content:"";
	display: block;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background:rgba(243, 212, 32,0.5);
	mix-blend-mode:multiply
}
.foodbank .viewport{
  max-width: 1180px;
}
.foodbank .l{
  color:#00913A;
	text-shadow: 0 0 2px #fff,0 0 5px #fff,0 0 10px #fff;
	font-weight: bold;
	font-size: 28px;
}
.foodbank .s{
  color:#fff;
  text-shadow: 0 0 20px rgba(0, 0, 0,1.0);
}
.foodbank a{
  display: inline-block;
	margin:0 auto;
	line-height: 1.0;
	position: relative;
	border-radius: 2px;
}
.foodbank a:before{
  position: absolute;
	content:"";
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	border:solid 10px rgba(255,255,255,0.2);
	box-sizing: border-box;
	border-radius: 2px;
}
.foodbank a:hover{
  opacity: 0.9 !important;
	cursor: pointer;
}
.foodbank a:hover:before{
  border:solid 10px rgba(237, 126, 24,0.8);
}
.foodbank img{
  max-width: 100%;
	mix-blend-mode:normal;
	display: block;
	margin:0 auto;
	border-radius: 2px;
}

/* =================================
　お庭の無料相談会
=================================*/
#consultation .viewport{
  max-width:1180px;
}
#consultation .bg{
  background:linear-gradient(-80deg, rgba(122,188,76, 1.0) 0%,rgba(81,180,82, 1.0) 20%, rgba(255,255,255, 1.0) 50%);
  background:-webkit-linear-gradient(-80deg, rgba(122,188,76, 1.0) 0%,rgba(81,180,82, 1.0) 20%, rgba(255,255,255, 1.0) 50%);
  padding:32px 100px 64px;
  padding:2rem 100px 4rem;
  text-align: center;
}
#consultation .title{
  padding:8px 0 0 16px;
  padding:0.5rem 0 0 1rem;
  text-align: left;
}
#consultation .l_area{
  float: left;
  width: calc(50% - 24px);
}
#consultation .l_area  img{
  max-width: 100%;
  height: auto;
  margin-top:38px;
}
#consultation .r_area{
  float: right;
  width: calc(50% - 24px);
}
#consultation .r_area img{
 max-width: 100%;
}
#consultation .r_area p{
  margin-top:16px;
  margin-top:1rem;
  text-align: left;
  font-size: 15px;
  color: #512b04;
  line-height: 1.8;
  letter-spacing: 0;
}
#consultation .r_area dl{
  margin-top:16px;
  margin-top:1rem;
  padding:8px 16px;
  padding:0.5rem 1rem;
  background:linear-gradient(-80deg, rgba(106, 57, 6, 0.9) 0%,rgba(81, 42, 4, 0.9) 100%);
  background:-webkit-linear-gradient(-80deg, rgba(106, 57, 6, 0.9) 0%,rgba(81, 42, 4, 0.9) 100%);
  color:rgba(255,255,255,0.9);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#consultation .r_area dt{
  padding-bottom:2px;
  margin-bottom:5px;
  font-size: 17px;
  font-weight: normal;
  border-bottom:solid 1px rgba(255,255,255,0.6);
}
#consultation .r_area dd strong{
  font-weight: bold;
}
#consultation .topics{
  margin-top:64px;
  margin-top:4rem;
}
#consultation .topic{
  height: auto;
}
#consultation .add{
  margin:2rem auto 0;
  padding:0.3rem 1rem;
  background:linear-gradient(-80deg, rgba(244,212,32,0.9) 0%,rgba(244,212,32,0.7) 100%);
  background:-webkit-linear-gradient(-80deg, rgba(244,212,32,0.9) 0%,rgba(244,212,32,0.7) 100%);
  color:rgba(170, 155, 66,1.0);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.07rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family:'Oswald','Noto Sans Japanese', sans-serif;
}
@media only screen and (max-width: 980px) {
#consultation .viewport {
  width: 100%
}
#consultation .bg{
  padding:32px 50px 64px;
  padding:2rem 50px 4rem;
}
}/* @media (max-width:980px) end ----- */
@media (max-width:640px) {
#consultation .bg{
  padding:32px 5% 64px;
  padding:2rem 5% 4rem;
}
#consultation .l_area{
  float: none;
  width: 100%;
}
#consultation .r_area{
  float: none;
  width: 100%;
}
}/* @media (max-width:640px) end ----- */
/*
     FILE ARCHIVED ON 18:31:28 Jun 18, 2023 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 05:34:16 Jul 15, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.574
  exclusion.robots: 0.057
  exclusion.robots.policy: 0.045
  esindex: 0.009
  cdx.remote: 6.776
  LoadShardBlock: 213.676 (3)
  PetaboxLoader3.datanode: 121.982 (5)
  load_resource: 474.523
  PetaboxLoader3.resolve: 401.242
  loaddict: 35.001
*/