@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Noto Sans JP';
  src: url('../fonts/NotoSansJP-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'GenJyuu Gothic';
  src: url('../fonts/GenJyuuGothic-Monospace-Regular.ttf') format('truetype');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* border: 1px solid #ff1414; */
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
  }

:root {
  --semi-fontsize: 2.8vw;
  --middle-fontsize: 3.8vw;
  --big-fontsize: 4.7vw;
}
@media screen and (min-width: 600px) {
  :root {
    --semi-fontsize: 0.75rem;
    --middle-fontsize: 1.1rem;
    --big-fontsize: 1.5rem;
  }
}
@media screen and (min-width: 990px) {
  :root {
    --semi-fontsize: 0.8rem;
    --normal-fontsize: 1rem;
    --middle-fontsize: 1.2rem;
    --big-fontsize: 1.6rem;
  }
}
@media screen and (min-width: 1366px) {
  :root {
    --semi-fontsize: 0.85rem;
    --middle-fontsize: 1.4rem;
    --big-fontsize: 1.9rem;
  }
}
@media screen and (min-width: 1680px) {
  :root {
    --semi-fontsize: 0.85rem;
    --middle-fontsize: 1.5rem;
    --big-fontsize: 2.2rem;
  }
}

body {
  font-family: 'Zen maru Gothic';
  font-size: 2.8vw;
  font-weight: 500;
  font-style: normal;
  color: #231815;
  line-height: 1.35;
  letter-spacing: 0.01em;
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

@media screen and (min-width: 600px) {
  body,p {
    font-size: 0.85rem;
    line-height: 1.45;
  }
}
@media screen and (min-width: 990px) {
  body,p {
    font-size: 0.9rem;
    line-height: 1.45;
  }
}
@media screen and (min-width: 1366px) {
  body,p {
    font-size: 1rem;
  }
}

p {
  word-break: break-word;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
}
table {
  border-collapse: collapse;
}
ol, ul {
    list-style: none;
}

a:link, a:visited, a:active, a:hover {
    overflow: hidden;
    outline: none;
}
.pc-only {
  display: block;
}
.tb-only{
  display: none;
}
.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .tb-only {
    display: block;
  }
}
@media screen and (max-width: 599px) {
  .sp-only {
    display: block;
  }
}

/*-- ここからHEADER --*/
.logo_group{
  display: flex;
  align-items: center;
}
header {
  /* box-shadow: 0px 3px 15px rgba(0,0,0,0.2); */
  z-index: 99;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.85);
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  line-height: 1.5;
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.5em 0.5em;
}
.header p{
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.logo_group{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.h_logo{
    width: 50px;
    padding: 0.2em;
    line-height: 0;
}
.h_logo img {
  line-height: 0;
}
.hows_logo{
  max-width: 380px;
  margin: 0;
  font-size: 20px;
  padding: 5px 5px 0 5px;
  text-align: left;
}
.hows_logo img {
  width: 220px;
}
.hows_logo p {
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #000;
  font-size: 11px;
  padding-left: 1.5px;
  padding-bottom: 1px;
  letter-spacing: 0.05em;
}
.header nav {
  margin: 0 0 0 auto;
}
.header ul {
  list-style: none;
  margin: 0;
  display: flex;
}
.header li {
  margin: 0 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.header a{
  color: #333;
}
.header_left{
  display: flex;
  align-items: center;
}
.unei_logo{
  padding: 5px 0 0 40px;
}
.pc-nav li{
  text-align: center;
}
.pc-nav img{
  width: 25px;
}
.sp-nav {
  display: none;
}
.gnavi__lists {
  display: flex;
}
.gnavi__list {
  width: 20%;
  width: 400px;
  /* height: 60px; */
  position: relative;
  transition: all .3s;
}

.gnavi__list a {
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #1b4059;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  transition: all .3s;
}
.gnavi__list ul{
  display: block;
  padding: 1em 0;
}
.dropdown__lists {
visibility: hidden;
  opacity: 0;
  transition: all .3s;
  width: 100%;
  position: absolute;
  top: 57px;
  right: 0;
  width: 400px;
  background: #FFF;
}
.gnavi__list:hover .dropdown__lists {
visibility: visible;
  opacity: 1;
}
.dropdown__ttl {
  height: 40px;
  position: relative;
  padding: 1em 1em 0;
  font-size: 1.6rem;
  color: #f30a72;
}
.dropdown__list {
  height: 40px;
  transition: all .3s;
  position: relative;
  padding: 0 1em;
}
.dropdown__list:not(:first-child)::before{
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
}
.dropdown__list:hover {
  background: #b8d0d0;
  color: #FFF;
}
.dropdown__list a {
  display: flex;
  align-items: center;
  color: #1b4059;
  text-decoration: none;
  position: relative;
}
.dropdown__ttl {
  display: flex;
  align-items: center;
  color: #f30a72;
  text-decoration: none;
  position: relative;
}
.dd_l_red p{
  color: #f60000;
}
.swing {
  max-width: 80px;
}
.swing p {
    font-size: 11px;
    padding: 0.3em 0 0;
}
.swingnew {
  position: absolute;
  font-size: 0.6rem;
  color: #f60000;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) {
.pc-nav {
display: none;
}
.sp-nav {
z-index: 1;
position: fixed;
top: 0;
left: 0;
max-width: 100%;
height: 100vh;
display: block;
width: 100%;
background: rgba(0, 0, 0, .8);
opacity: 0;
transform: translateY(-100%);
transition: all .2s ease-in-out;
}
.sp-nav a{
color: #FFF;
}
.unei_logo{
  display: none;
}
#hamburger {
  position: relative;
  display: block;
  width: 30px;
  height: 25px;
  margin: 0 0 0 auto;
}
#hamburger span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: translateY(-50%);
}
#hamburger::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}
#hamburger::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 70%;
  height: 2px;
  background-color: #333;
}
/*スマホメニュー*/
.sp-nav ul {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.sp-nav li {
  margin: 0;
  padding: 0;
}
.sp-nav li span {
  font-size: 15px;
  color: #FFF;
}
.sp-nav li a, .sp-nav li span {
  display: block;
  padding: 20px 0;
}
/*-閉じるアイコンー*/
.sp-nav .close {
  position: relative;
  padding-left: 20px;
}
.sp-nav .close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  transform: rotate( 45deg );
}

.sp-nav .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 16px;
  height: 1px;
  background: #fff;
  transform: rotate( -45deg );
}
.toggle {
  transform: translateY( 0 );
  opacity: 1;
}
}
@media screen and (max-width: 399px) {
  .hows_logo {
    width: 100%;
}
  .hows_logo p {
    font-size: 0.6rem;
}
}
/*-- ここまでHEADER --*/

/* ここから MAIN VISUAL */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero .video video {
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  z-index:-1;
}

.kv__title__wrap {
  position:absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: flex-end; 
  padding: 0 4% 10%;
}

.kv__maintitle {
  width: clamp(100%, 85vw, 1400px);
  height: auto;
  opacity: 1;
  transform: translateY(0);
}

.kv__satoimo {
  position: relative;
  width: 30%;
  transform-origin: center;
  opacity: 1;
  animation: nutsPopMove 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes nutsPopMove {
  0%, 100% {
    transform: translateY(0) scale(0.6) rotate(0deg);
  }
  20% {
    transform: translateY(-14px) scale(0.63) rotate(-6deg);
  }
  50% {
    transform: translateY(0) scale(0.6) rotate(0deg);
  }
  70% {
    transform: translateY(-12px) scale(0.63) rotate(6deg);
  }
}

@media screen and (min-width: 600px) {
  .kv__satoimo {
    width: 25%;
  }
}

@media screen and (min-width: 1024px) {
  .kv__title__wrap {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    padding: 0 6% 0 2%;
  }

  .kv__satoimo {
    width: 28%;
    bottom: auto;
    left: auto;
  }
}

@media screen and (min-width: 1440px) {
  .kv__title__wrap {
    padding: 0 8% 0 2%;
  }
}

/* scroll */
.scroll_down{
  display: none;
}

@media screen and (min-width: 1280px) {
.scroll_down{
  display: block;
  position: absolute;
  top: 100vh;
  left: 97%;
  z-index: 99;
}
.scroll_down.hidden {
  display: none;
}
.scroll_down a{
  position: absolute;
  left: 10px;
  bottom: 90px;
  color: #FFF;
  font-size: 12px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:#FFFE00;
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove{
  0%{bottom:160px;}
  100%{bottom:0px;}
}

@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width: 3px;
  height: 160px;
  background:#FFF;
}
}
/* scroll */

/* ここまで MAIN VISUAL */

.bg_w{
  background: #FFF;
}
.pb_2{
  padding-bottom: 2vw!important;
}
.l-inner{
  box-sizing: content-box;
  padding: 6vw;
  margin: 0 auto;
}
.l-inner_wide{
  box-sizing: content-box;
  padding: 6vw;
  margin: 0 auto;
}

@media screen and (min-width: 600px) {
.l-inner{
  max-width: 900px;
}
}
@media screen and (min-width: 1366px) {
  .l-inner{
    padding: 4vw;
  }
  .l-inner_wide{
    padding: 4vw;
  }
}

/* ここから YOUTUBE */
.youtube_contents{
  text-align: center;
  background: #fefff1;
}
.youtube_ttl{
  font-size: var(--middle-fontsize);
  color: #ff0066;
  padding: 2vw 0 0;
}
.youtube_caution{
  font-size: var(--semi-fontsize);
  font-weight: var(--sub-fontweight);
  padding: 0.5em 1em;
  text-align: center;
}
#yt-wrap {
  max-width: 680px;
  margin: auto;
  padding: 0 4vw;
}
#yt-block {
  margin: 1vw 2vw 2vw;
  position: relative;
}
#play {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 70px;
  height: 70px;
  border: 5px solid #ff0066;
  border-radius: 50%;
  cursor: pointer;
  opacity: .95;
}
#play:before {
  content: "";
  position: absolute;
  top: 52%;
  left: 32%;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-left: 25px solid #ff0066;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) {
  #play {
    width: 120px;
    height: 120px;
  }
  #play:before {
    border: 30px solid transparent;
    border-left: 50px solid #ff0066;
  }
}

@media screen and (min-width: 1536px) {
  .youtube_ttl {
    padding: 0;
  }
  #yt-block {
    margin: 1vw 0 0;
  }
}
/* ここまで YOUTUBE */

/* ここから howsweb link */
.howsweb{
  padding: 4vw 0;
  background: #ffe7c7;
  background-image: url(../images/bg_beige_bubble.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.appliedgroup{
  text-align: center;
}
.appliedgroup h2{
  font-size: 4.2vw;
}
.appliedgroup_logo{
  padding: 0.5em 4em;
}
.hows_link{
  padding : 1em 2em;
}
.hows_link_title{
  font-size: 3vw;
  text-align: center;
  padding: 0 0 0.4em;
}

@media screen and (min-width: 600px) {
.howsweb {
  padding: 0 0 4vw;
}
.appliedgroup {
  padding: 4vw 6vw;
}
.appliedgroup_logo {
  padding: 1.5em 4em;
}
.hows_link {
  padding: 1em 8vw;
}
.appliedgroup h2 {
  font-size: 3vw;
}
.hows_link_title {
  font-size: 1.2rem;
}
}

@media screen and (min-width: 1024px) {
.appliedgroup {
  padding: 2em 0 0;
}
.appliedgroup h2 {
  font-size: 1.6rem;
}
.appliedgroup_logo {
  width: 800px;
  margin: 0 auto;
  padding: 1.5em 0;
}
.hows_link_title {
  font-weight: bold;
  padding: 0 0 1em;
}
}

@media screen and (min-width: 1366px) {
.hows_link {
  padding: 1em 4vw;
}
}

@media screen and (min-width: 1920px) {
.howsweb {
  padding: 0 0 1vw;
}
}
/* ここまで howsweb link */

/* ここから SECTION information */
.info_group{
  background: #bacfb2;
}
.information_area{
  display: block;
  margin: 0 auto;
  max-width: 960px;
}
.new_area{
  width: 100%;
}
.information_header{
  font-size: var(--middle-fontsize);
  position: relative;
  padding: 2vw 0 4vw;
  text-align: center;
}
.information_header span {
  font-size: var(--semi-fontsize);
  display: block;
}
.info_contents{
  background: #fff;
  margin: 0 auto 2vw;
  height: 24vh;
}
.simplebar-track.simplebar-horizontal {
  height: 10px;
  background: #dddddd;
  border-radius: 5px;
  margin: 0 auto;
}
.simplebar-scrollbar {
  height: 10px;
  background: #dddddd;
  border-radius: 5px;
}
.simplebar-scrollbar::before{
  background: #a6a6a6;
}
.pagelink {
  font-size: 0.7rem;
  padding-left: 0.3em;
  color:#ff0066;
}
.simplebar-content {
  padding: 3vw !important;
}
ul.newsList {
  display: flex;
  flex-flow: row wrap;
  border-bottom: 1px dotted #999;
  flex-basis: 100%;
  margin-bottom: 10px;
}
ul.newsList li {
  display: block;
  margin: 0 10px 5px;
  color:#000;
  font-size: 0.8rem;
}
ul.newsList li span{
  color:#FFF;
  background:#ff0066;
  font-size: 0.62rem;
  padding: 0.1em 0.4em 0.2em;
  margin-right: 0.3em;
}
ul.newsList li:nth-child(1) {
  flex-basis: 10px;
}
ul.newsList li:nth-child(2) {
  flex-basis: auto;
  font-size: var(--semi-fontsize);
}

@media(min-width: 600px) {
  .information_header {
    padding: 2vw 0;
  }
  .information_header span {
    font-size: 0.8rem;
  }
  ul.newsList li:nth-child(1),
  ul.newsList li:nth-child(2) {
    font-size: var(--semi-fontsize);
  }
}

@media(min-width: 1366px) {
  .information_header {
    padding: 0 0 2vw;
  }
  .information_header span {
    font-size: 0.9rem;
    padding: 0.3vw 0 0;
  }
  ul.newsList {
    margin-bottom: 15px;
  }
  .simplebar-content {
    padding: 2vw !important;
  }
}
/* ここまで SECTION information */

/* ここから SECTION INTRODUCTION */
.introduction_contents{
  padding: 0 0 8vw;
  /* background: repeating-linear-gradient(#e5d0cf, #e5d0cf 20px, #eadddc 20px, #eadddc 40px); */
  background-color: #edebe8;
  background-image: url("../images/bg_bubble.jpg");
  background-size: contain;
  background-repeat: repeat;
  background-position: top center;
}
.introduction_wrap{
  padding: 4vw 6vw 0;
}
.introduction_headerimage{
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  line-height: 0;
  padding: 0 0 4VW;
}
.introduction_ttl{
  font-size: var(--big-fontsize);
  font-weight: bold;
  text-align: center;
  padding: 0 0 3.5vw;
}
.introduction_ttl span{
  color: #FF0066;
}
.introduction_ttltext{
  padding: 2vw 0 1vw;
}
.introduction_image{
  padding: 4vw 6vw;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.introduction_bottom{
  padding: 2vw 6vw 0;
  max-width: 640px;
  margin: 0 auto;
}
.introduction_farmtext{
  font-size: var(--semi-fontsize);
  text-align: center;
  padding: 0.5em 0 0;
}
.oyasai_headerwrap{
  padding: 0;
}
.oyasai_ttl{
  font-size: var(--big-fontsize);
  font-weight: bold;
  text-align: center;
  padding: 0 0 3.5vw;
}
.oyasai_ttl span{
  color: #FF0066;
}
.oyasai_mainimage{
  padding: 0 6vw;
}
.oyasai_headerttl {
  padding: 3.5vw 0 4vw;
}
.hinshu_headerwrap{
  padding: 3.5vw 0;
}
.hinshu_mainimage{
  padding: 0 6vw;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.hinshu_explain{
  padding: 2vw 0 4vw;
}
.hinshu_mainttl{
  font-size: var(--middle-fontsize);
  text-align: center;
  padding: 0 0 1vw;
}
.hinshu_mainttl span{
  color: #FF0066;
  font-size: var(--big-fontsize);
  font-weight: bold;
}
.hinshu_headerttl{
  padding: 4vw 0 2vw;
}
.hinshu_text{
  font-size: var(--semi-fontsize);
  text-align: center;
  padding: 0.5em 0 0;
}
.hinshu_bottom{
  padding: 2vw 6vw 0;
  max-width: 750px;
  margin: 0 auto;
}

@media(min-width: 600px) {
.oyasai_ttl {
  padding: 0 0 2vw;
}
.oyasai_headerttl {
  padding: 2vw 0;
}
.hinshu_mainttl {
  padding: 0;
}
}

@media(min-width: 990px) {
.introduction_wrap {
  padding: 6em 4em 0;
}
.introduction_contents {
  padding: 0 0 8vw;
}
.introduction_headerimage {
  padding: 0 0 2em;
}
.introduction_ttl{
  padding: 0 0 0.7em;
}
.introduction_headerttl{
  font-size: var(--middle-fontsize);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.introduction_ttltext{
  text-align: center;
  padding: 2em 0 0;
}
.introduction_image {
  padding: 2em 0;
}
.introduction_bottom {
  padding: 2em 0 0;
}
.oyasai_headerwrap{
  padding: 1em 0 0;
}
.oyasai_ttl{
  padding: 0 0 0.7em;
}
.oyasai_headerttl {
  padding: 1em 0;
  width: 600px;
  margin: 0 auto;
}
.hinshu_mainimage{
  padding: 0;
}
.hinshu_headerwrap {
  padding: 2em 0 0;
}
.hinshu_headerttl {
  padding: 1.5em 0 3em;
  width: 600px;
  margin: 0 auto;
}
.hinshu_mainttl {
  padding: 1em 0 0;
}
.hinshu_explain{
  padding: 1em 0 3em;
  width: 600px;
  margin: 0 auto;
}
.oyasai_mainimage {
  padding: 0;
  width: 640px;
  margin: 0 auto;
}
.hinshu_bottom {
  padding: 1em 0 0.7em;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
}

@media(min-width: 1281px) {
.introduction_bottom {
  padding: 0;
}
.oyasai_headerttl,
.hinshu_headerttl,
.hinshu_explain{
  width: 640px;
}
}
/* ここまで SECTION INTRODUCTION */

/* ここから SECTION SHUKAKUSAI CATALOGUE */
.shukakusai_catalog_contents{
  padding: 2vw 0;
  background-color: #E7C7B2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23F5E2D2'/%3E%3Cstop offset='1' stop-color='%23E7C7B2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23BF6E47' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23BF6E47' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.43'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}
.shukakusai_catalog_image img{
  border: 3px solid #8F0000;
}
.shukakusai_catalog_ttlgroup{
  padding: 4vw;
  background: #8F0000;
  border-radius: 5px;
  margin: 4vw 0 0;
  color: #FFF;
}
.shukakusai_catalog_title{
  font-size: 3.8vw;
  text-align: center;
  color: #f8e510;
}
.shukakusai_catalog_caution{
  font-size: var(--semi-fontsize);
}
.shukakusai_catalog_caution{
  padding: 2vw 3vw;
}

@media(min-width: 480px) {
  .shukakusai_catalog_ttlgroup{
    padding: 2em 4%;
    margin: 2em 0 0;
  }
  .shukakusai_catalog_title{
    font-size: 1.2rem;
  }
  .shukakusai_catalog_caution {
    padding: 1em 4% 0;
}
}

@media(min-width: 990px) {
.shukakusai_catalog_contents {
  padding: 2em 0;
}
.shukakusai_catalog_ttlgroup {
  padding: 2em 3em;
  border-radius: 10px;
}
.shukakusai_catalog_title{
  font-size: 1.4rem;
  font-weight: bold;
}
.shukakusai_catalog_caution {
  padding: 0.8em 0 0.4em;
  text-align: center;
}
}
/* ここまで SECTION SHUKAKUSAI CATALOGUE */

/* ここから SECTION SHUKAKUSAI DETAIL */
.event_contents{
  background-color: #E9CBB7;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='600' y1='25' x2='600' y2='777'%3E%3Cstop offset='0' stop-color='%23E9CBB7'/%3E%3Cstop offset='1' stop-color='%23EDCCC2'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='650' y1='25' x2='650' y2='777'%3E%3Cstop offset='0' stop-color='%23e9cbb8'/%3E%3Cstop offset='1' stop-color='%23e8bfb4'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='700' y1='25' x2='700' y2='777'%3E%3Cstop offset='0' stop-color='%23eacbb9'/%3E%3Cstop offset='1' stop-color='%23e3b1a6'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' gradientUnits='userSpaceOnUse' x1='750' y1='25' x2='750' y2='777'%3E%3Cstop offset='0' stop-color='%23eacbba'/%3E%3Cstop offset='1' stop-color='%23dea398'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='800' y1='25' x2='800' y2='777'%3E%3Cstop offset='0' stop-color='%23eacbbb'/%3E%3Cstop offset='1' stop-color='%23d8958a'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='850' y1='25' x2='850' y2='777'%3E%3Cstop offset='0' stop-color='%23ebcbbc'/%3E%3Cstop offset='1' stop-color='%23d2877d'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='900' y1='25' x2='900' y2='777'%3E%3Cstop offset='0' stop-color='%23ebcbbd'/%3E%3Cstop offset='1' stop-color='%23cd796f'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='950' y1='25' x2='950' y2='777'%3E%3Cstop offset='0' stop-color='%23eccbbe'/%3E%3Cstop offset='1' stop-color='%23c66a62'/%3E%3C/linearGradient%3E%3ClinearGradient id='i' gradientUnits='userSpaceOnUse' x1='1000' y1='25' x2='1000' y2='777'%3E%3Cstop offset='0' stop-color='%23eccbbf'/%3E%3Cstop offset='1' stop-color='%23c05b55'/%3E%3C/linearGradient%3E%3ClinearGradient id='j' gradientUnits='userSpaceOnUse' x1='1050' y1='25' x2='1050' y2='777'%3E%3Cstop offset='0' stop-color='%23ecccc0'/%3E%3Cstop offset='1' stop-color='%23ba4d49'/%3E%3C/linearGradient%3E%3ClinearGradient id='k' gradientUnits='userSpaceOnUse' x1='1100' y1='25' x2='1100' y2='777'%3E%3Cstop offset='0' stop-color='%23edccc1'/%3E%3Cstop offset='1' stop-color='%23ac4443'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' gradientUnits='userSpaceOnUse' x1='1150' y1='25' x2='1150' y2='777'%3E%3Cstop offset='0' stop-color='%23EDCCC2'/%3E%3Cstop offset='1' stop-color='%239D3F40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg %3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' x='100' width='1100' height='800'/%3E%3Crect fill='url(%23c)' x='200' width='1000' height='800'/%3E%3Crect fill='url(%23d)' x='300' width='900' height='800'/%3E%3Crect fill='url(%23e)' x='400' width='800' height='800'/%3E%3Crect fill='url(%23f)' x='500' width='700' height='800'/%3E%3Crect fill='url(%23g)' x='600' width='600' height='800'/%3E%3Crect fill='url(%23h)' x='700' width='500' height='800'/%3E%3Crect fill='url(%23i)' x='800' width='400' height='800'/%3E%3Crect fill='url(%23j)' x='900' width='300' height='800'/%3E%3Crect fill='url(%23k)' x='1000' width='200' height='800'/%3E%3Crect fill='url(%23l)' x='1100' width='100' height='800'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
  position: relative;
  z-index: 1;
}
.event_asirai_upper{
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
  position: absolute;
  top: 0;
}
.event_asirai_bottom{
  box-sizing: border-box;
  overflow: hidden;
  z-index: 99;
  position: absolute;
  bottom: 0;
}
.event_wrap{
  padding: 6vw;
  position: relative;
  z-index: 3;
}
.event_headerimage{
  padding: 0 0 4vw;
}
.event_headertitle{
  text-align: center;
  font-size: var(--middle-fontsize);
  padding: 2vw 0;
}
.event_headertitle span{
  background: #f2dbdb;
  color: #8F0000;
  padding: 1.5vw 3vw;
}
.event_detailwrap{
  text-align: center;
}
.event_detail_image{
  padding: 0 6vw 4vw;
}
.event_detaillist{
  padding: 2vw 0;
  line-height: 1.6;
}
.event_detaillist_sm{
  font-size: var(--semi-fontsize);
}
.event_detaillist_bold{
  font-size: var(--semi-fontsize);
  color: #FF0066;
}
.event_detaillist span{
  color: #FF0066;
}
.arrow{
	position: relative;
	display: inline-block;
  padding: 0 0 4px 16px;
	color: #232323;
	vertical-align: middle;
	text-decoration: none;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.mapbtn::before{
	width: 12px;
	height: 12px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #232323;
}
.mapbtn::after{
	left: 5px;
	box-sizing: border-box;
	width: 3px;
	height: 3px;
	border: 3px solid transparent;
	border-left: 3px solid #fff;
}
.event_farmcaution{
  font-size: var(--semi-fontsize);
  letter-spacing: 0;
  padding: 2vw 4vw 0;
}
.event_farmcaution li:before{
  content:"・"
}
.insta_info {
  padding: 4vw;
}
.insta_img{
  padding: 0 0 2vw;
  max-width: 120px;
  margin: 0 auto;
}
.schedule_wrap{
  text-align: center;
  padding: 2vw 0 4vw;
}
.schedule_ttl{
  color: #ff0066;
  font-size: var(--middle-fontsize);
  padding: 0 0 0.2em;
}
.schedule_sttl{
  font-size: var(--semi-fontsize);
}
.schedule_table{
  margin: 2vw auto;
  width: 75%;
}
.schedule_table th {
  background: #513503;
  border-bottom: solid 1px #FFF;
  color: #fff;
  padding: 1em 1.5em;
  border-bottom: none;
  display: block;
  width: 100%;
  padding: 0.6em;
}
.schedule_table td {
  border: solid 1px #383232;
  padding: 1em 1.5em;
  background: #FFF;
  border-bottom: none;
  display: block;
  width: 100%;
  padding: 0.6em;
}
.schedule_table .last th{
  border-bottom: solid 1px #513503;
}
.last td:last-child {
  border-bottom: solid 1px #a29f9f;
  width: 100%;
}
.sankajyouken{
  padding: 2vw 0 4vw;
}
.taiken_reserve{
  text-align: center;
  padding: 4vw 0 0;
}
.taiken_reserve_caution span{
  font-size: var(--middle-fontsize);
  font-weight: bold;
  background-color: #FF0;
  color: #ff0066;
  letter-spacing: 0.1em;
  padding: 1vw 4vw;
}
.taiken_reserve_top{
  padding: 4vw 0 0;
}
.taiken_reserve_middle{
  font-size: var(--semi-fontsize);
}
.taiken_reserve_wrap{
  padding: 2vw 0 0;
}
.taiken_reserve_way{
  border: 1px solid #a29f9f;
  border-radius: 1rem;
  padding: 2vw;
  margin: 2vw 4vw 4vw;
  line-height: 1.6;
}
.taiken_reserve_from{
  font-size: var(--middle-fontsize);
  color: #ff0066;
}
.taiken_reserve_from_w{
  font-size: var(--middle-fontsize);
  color: #ff0066;
  padding: 0 0 0.4vw;
}
.taiken_reserve_wayto{
  margin: 1vw 0 2vw;
}
.taiken_reserve_hows{
  font-size: var(--semi-fontsize);
}
.taiken_form_caution{
  line-height: 1.3;
  text-align: left;
}

@media(min-width: 600px) {
.event_detaillist{
  padding: 1em 0 0.5em;
}
.event_farmcaution {
  font-size: var(--semi-fontsize);
  letter-spacing: 0;
  padding: 1em;
  width: 390px;
  margin: 0 auto;
}
.insta_info {
  padding: 2em 0;
  text-align: center;
}
.insta_img {
  padding: 0 0 0.7em;
  max-width: 140px;
}
.schedule_table {
  width: 360px;
}
.schedule_wrap {
  padding: 1em 0 2em;
}
.taiken_reserve_wrap {
  padding: 1.5em 0 0;
}
.taiken_reserve {
  padding: 2vw 0 0;
}
.taiken_reserve_way {
  max-width: 360px;
  margin: 2vw auto 4vw;
}
.taiken_reserve_text {
  font-size: var(--middle-fontsize);
  padding-bottom: 0.2vw;
}
.taiken_reserve_wayto {
  font-size: var(--middle-fontsize);
}
}

@media(min-width: 990px) {
.event_farmcaution {
  text-align: center;
  padding: 1em 0 0.7em;
  line-height: 1.6;
  width: 100%;
}
.event_detail_image {
  padding: 0 0 2em;
  max-width: 750px;
  margin: 0 auto;
}
.event_headerimage {
  padding: 0 0 3.5em;
}
.event_headertitle span {
  padding: 1em 3em;
}
.taiken_reserve_way {
  max-width: 480px;
  margin: 0 auto 2vw;
}
.taiken_reserve_wayto {
  margin: 1vw 0 0;
}
.event_detaillist {
  line-height: 1.5;
  font-size: var(--middle-fontsize);
}
.event_detaillist_sm {
  font-size: var(--normal-fontsize);
  padding: 1vw 0 0;
}
.event_detaillist_bold {
  font-size: var(--normal-fontsize);
}
.schedule_table{
  width: 100%;
  margin: 1.5vw auto 0;
}
.schedule_table tbody{
  display: flex;
  justify-content: center;
}
.schedule_table td{
  padding: 1.5vw 2vw;
}
.schedule_table th {
  border-right: solid 1px #FFF;
}
.schedule_table tr:first-child {
  border-left: solid 1px #383232;
}
.schedule_table td,
.last td:last-child {
  border: none;
  border-right: solid 1px #383232;
  border-bottom: solid 1px #383232;
}
.schedule_table .last th {
  border-bottom: none;
  border-right: solid 1px #513503;
}
.taiken_reserve_top {
  padding: 2.5vw 0 0;
}
.taiken_reserve_from_w{
  padding: 0 0 0.5em;
}
.insta_img {
  max-width: 220px;
}
.sankajyouken {
  padding: 2vw 0;
}
}
/* ここまで SECTION SHUKAKUSAI DETAIL */

/* ここから SECTION about hows */
.abouthows_contents{
  position: relative;
  background: #ffe7c7;
  background-image: url(../images/bg_hows_xmas.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  overflow: hidden;
  z-index: 0;
}

.abouthows_contents::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.9);
  z-index: -1;
  border-radius: inherit;
}


.ito_wrap{
  padding: 2vw 0 0;
}
.ito_wrap_header{
  padding: 4vw 0;
  text-align: center;
}
.ito_wrap_header span{
  color: #FF0066;
}
.ito_drive{
  text-align: center;
}
.ito_drive_image{
  max-width: 160px;
  margin: 0 auto;
}
.ito_drive_text{
  color: #5d3016;
  padding: 1em;
  background: #FFF;
  border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
  border: 2px solid #232323;
  margin: 4vw auto;
  max-width: 260px;
}
.ito_drive_text span{
  font-size: var(--big-fontsize);
}
.ito_map{
  padding: 4vw 4vw 0;
}
.abouthows_titlewrap{
  padding: 6vw 0 0;
}
.abouthows_ttl{
  font-size: var(--middle-fontsize);
  color: #ff0066;
  text-align: center;
}
.abouthows_text{
  padding: 4vw;
}
.hows_box{
  padding: 4vw;
  text-align: center;
}
.hows_boxtext{
  padding: 2vw 4vw;
  font-size: var(--semi-fontsize);
}
.aboutito_contents{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aboutito_wrap{
  width: calc(100% / 2 - 4vw);
}
.aboutito_wrap{
  padding: 0 0 6vw;
}
.aboutito_textbox{
  font-size: var(--semi-fontsize);
}
.aboutito_text{
  padding: 1vw 0 3vw;
  line-height: 1.2;
  font-size: var(--semi-fontsize);
}
.btn_arrow {
  display: table;
  position: relative;
  padding: 0.4em 2em;
  min-width: 10em;
  border: 1px solid currentColor;
  color: #FFF;
  background-color: #705241;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: 0.5s;
  margin: 0 auto;
}
.btn_arrow::after {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
}
.btn_arrow:hover {
  border: 1px solid #5d3016;
  background-color: #FFF;
  color: #5d3016;
}

@media(min-width: 600px) {
.abouthows_ttl {
  font-size: var(--big-fontsize);
}
.abouthows_text {
  padding: 2vw 4vw;
}
.ito_drive {
  width: 540px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ito_drive_image{
  max-width: 220px;
}
.ito_drive_text {
  padding: 2vw 4vw;
  max-width: 400px;
  margin: 0 auto;
}
.ito_wrap_header p,
.ito_wrap_header span{
  font-size: var(--big-fontsize);
}
.ito_map {
  padding: 6vw 6vw 0;
}
.aboutito_wrap {
  width: calc(100% / 2 - 2vw);
}
}

@media(min-width: 990px) {
.abouthows_contents {
  padding: 2em 0;
}
.hows_headimage{
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}
.abouthows_titlewrap {
  padding: 4em 0 0;
}
.abouthows_text {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em 0;
}
.ito_wrap {
  padding: 0;
}
.ito_wrap_header {
  padding: 4em 0;
}
.ito_drive {
  width: 570px;
}
.ito_drive_text {
  padding: 1.5em 2em;
}
.ito_map{
  padding: 4.7em 0 1em;
  text-align: center;
}
.hows_box {
  padding: 0;
}
.hows_banner{
  max-width: 800px;
  margin: 0 auto;
}
.hows_boxtext {
  padding: 0.7em 0 2em;
}
.aboutito_contents {
  padding: 1em 4vw;
}
.aboutito_wrap {
  width: calc(100% / 3 - 2em);
  padding: 2em 0;
}
.aboutito_text {
  padding: 1em 0 1.5em;
}
}
/* ここまで SECTION about hows */

/* ここから SECTION WORKSHOP */
.hows_school_contents{
  background: #ce2600;
  background-image: url(../images/bg_xmas_red.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.ito_reserve_wrap{
  padding: 6vw 4vw 2vw;
  background: #FFF;
  /* border: 2px solid #CE2600; */
  border-radius: 10px;
}
.ito_reserve_ttl{
  padding: 4vw 0 1vw;
  text-align: center;
}
.ito_reserve_image{
  max-width: 220px;
  margin: 0 auto;
  padding: 0.8vw 0 1vw;
}
.ito_reseve_catch_text{
  padding: 4vw;
}
.ito_detail_free{
  background: #fceedd;
  padding: 3vw;
  text-align: center;
  max-width: 240px;
  margin: 0 auto;
}
.ito_reserve_top{
  text-align: center;
  font-size: var(--middle-fontsize);
  color: #ff0066;
  padding: 0 0 0.5em;
}
.ito_reserve_bottom{
  font-size: 0.7rem;
}
.ito_reserve_middle{
  padding: 2vw 0 4vw;
  line-height: 1.6;
  text-align: center;
}
.ito_school{
  padding: 4vw 0;
}
.ito_school_title{
  text-align: center;
}
.ito_school_sttl{
  text-align: center;
  font-size: var(--semi-fontsize);
}
.ito_school_wrap{
  padding: 2vw 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ito_school_wrap li{
  width: calc(100% / 4);
  padding: 0 1vw 1vw;
}

@media(min-width: 600px) {
.ito_reserve_image {
  max-width: 400px;
}
.ito_reseve_catch_text{
  text-align: center;
  padding: 4vw 7vw;
}
.ito_school {
  padding: 2vw 0;
}
.ito_school {
  padding: 2em 0;
}
.ito_detail_free {
  max-width: 440px;
}
.ito_reserve_bottom {
  font-size: 0.85rem;
}
.ito_detail_free span{
  font-size: var(--middle-fontsize);
}
.ito_school_title {
  font-size: var(--middle-fontsize);
}
}

@media(min-width: 990px) {
.hows_school_contents {
  padding: 4vw 0;
}
.ito_reserve_wrap {
  padding: 4em 3em 1em;
}
.ito_family{
  padding: 0 0 3rem;
}
.ito_detail_free {
  padding: 1.5em;
}
.ito_reserve_middle{
  font-size: var(--middle-fontsize);
  padding: 1.5em 0;
}
.ito_reserve_ttl {
  padding: 1em 0 0;
}
.ito_reserve_image {
  padding: 1em 0 0;
}
.ito_reseve_catch_text {
  padding: 2em 0;
  width: 680px;
  margin: 0 auto;
  text-align: center;
}
.hows_school_contents .taiken_reserve_way {
  margin: 1em auto 2em;
  padding: 2em 0;
}
.hows_school_contents .taiken_reserve_wayto {
  padding: 0;
  margin: 0;
}
}

@media(min-width: 1536px) {
.hows_school_contents{
  background: #ce2600;
  background-image: url(../images/bg_xmas_red_w.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.ito_reserve_middle {
  padding: 1em 0;
}
.ito_school_wrap {
  padding: 1vw 0;
}
.ito_school_wrap li {
  padding: 0 0.5vw 0.5vw;
}
}
/* ここまで SECTION WORKSHOP */

/* ここから SECTION hows present campaign */
.campaign_contents {
  background-color: #f7f3ec;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 1px, transparent 1px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 8px);
  background-blend-mode: multiply;
  padding: 0 0 3rem;
}
.campaign_titlewrap{
  padding: 0 6vw;
}
.campaign_box{
  padding: 4vw 0 2vw;
  text-align: center;
}
.campaign_banner{
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 0 0;
}
.campaign_banner_sub{
  max-width: 900px;
  margin: 0 auto;
  padding: 4vw 0 2vw;
}
.campaign_ttl{
  font-size: var(--middle-fontsize);
  color: #D3350E;
  text-align: center;
  padding: 2vw 0 0;
}
.campaign_text{
  padding: 2vw 4vw;
}
.campaign_boxtext{
  padding: 0 4vw 2vw;
  font-size: var(--semi-fontsize);
}
.campaignito_contents{
  display: flex;
  flex-wrap: wrap;
  gap: 6vw 4vw;
}
.campaignito_wrap{
  width: calc(100% / 2 - 2vw);
}
.campaignito_textbox{
  font-size: var(--semi-fontsize);
}
.campaignito_text {
  padding: 1vw 0 2vw;
  font-size: var(--semi-fontsize);
}
.campaign_contents .btn_arrow {
  display: table;
  position: relative;
  padding: 0.4em 2em;
  min-width: 10em;
  border: 1px solid currentColor;
  color: #FFF;
  background-color: #D3350E;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: 0.5s;
  margin: 0 auto;
}
.campaign_contents .btn_arrow::after {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
}
.campaign_contents .btn_arrow:hover {
  border: 1px solid #e36647;
  background-color: #FFF;
  color: #e36647;
}
.mt-join{
  margin-top: 4vw;
}

@media(min-width: 600px) {
  .campaign_ttl {
    font-size: var(--big-fontsize);
    padding: 3vw 0 0;
  }
  .campaign_text {
    padding: 2vw 4vw 0;
  }
  .campaign_boxtext {
    padding: 1em 0;
  }
  .campaign_banner {
    padding: 2rem 0 0;
  }
}

@media(min-width: 990px) {
.campaign_contents {
  padding: 3rem 0 6rem;
}
.campaignito_contents {
  padding: 0 8vw;
  gap: 4vw 3vw;
}
.hows_headimage{
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}
.campaign_banner {
  padding: 4rem 0 0;
}
.campaign_box {
  padding: 2.5em 0 1em;
}
.campaign_titlewrap {
  padding: 0;
}
.campaign_ttl {
  padding: 0;
}
.campaignito_wrap {
  width: calc(100% / 3 - 2vw);
}
.campaign_text {
  max-width: 720px;
  margin: 0 auto;
  padding: 1em 0 0;
}
.campaignito_text {
  padding: 1em 0 1.5em;
}
.campaign_contents .btn_arrow {
  padding: 0.8em 3em;
}
}

@media(min-width: 1440px) {
.campaign_contents {
  padding: 3rem 0 8rem;
}
.campaign_banner {
  padding: 4rem 0;
}
.campaign_banner_sub {
  padding: 3em 0 2em;
}
}
/* ここまで SECTION hows present campaign */

/* ここから ひーな農園ご案内 */
.hiina_info_contents{
  padding: 4vw 0;
  text-align: center;
  background-image:
  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}
.hiina_info_image{
  padding: 0 0 2vw;
}
.hiina_info_image:last-child{
  padding: 0;
}
.hiina_info_button{
  padding: 2vw 0 10vw;
}
/* ここまで ひーな農園ご案内 */

/* ここから ひーな農園MAP */
.hiina_map{
  background-image:
  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}
.hiina_map_title {
  position: relative;
  padding: 10vw 0 8vw;
  background:
      radial-gradient(#31c976 30%, transparent 30%),
      linear-gradient(#00b050 0 100%);
  background-repeat: repeat, no-repeat;
  background-size: 10px 10px, 100% 100%;
  font-size: var(--big-fontsize);
  font-weight: bold;
  text-align: center;
  color: #FFF;
  letter-spacing: 0.01em;
  box-sizing: border-box;
}
.hiina_map_sttl{
  margin: 0 0 1em;
}
.hiina_map_sttl span{
  background: #FF0;
  padding: 1vw 8vw;
  color: #000;
}
.hiina_map_title:before,
.hiina_map_title:after {
  position: absolute;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
}
.hiina_map_title:before {
  top: 100%;
  border: 15px solid;
  border-color: transparent;
  margin-left: -15px;
}
.hiina_map_title:after {
  top: 99%;
  border: 14px solid;
  border-color: transparent;
  border-top-color: #00b050;
  margin-left: -14px;
}
.hiina_map_head{
  padding: 4vw 0;
  text-align: center;
}
.hiina_mapimg{
  padding: 4vw 0;
  text-align: center;
}
.hiina_map_head_adress{
  text-align: center;
  padding: 0 1vw 2vw;
  font-size: var(--semi-fontsize);
}
.hiina_map_head__wrap{
  padding: 1vw 0;
}
.hiina_map_car{
  padding: 2vw 0;
}
.hiina_map_car span{
  color: #00b050;
}
.hiina_map_bus{
  padding: 0 0 4vw;
}
.hiina_map_bus span{
  color: #00b050;
}

@media(min-width: 600px) {
.hiina_map_sttl {
  font-size: var(--middle-fontsize);
}
.hiina_map_title {
  padding: 8vw 0 6vw;
}
}

@media(min-width: 990px) {
.hiina_map_title {
  padding: 2.6em 0 2em;
}
.hiina_map_sttl span {
  padding: 0.4em 2em;
}
.hiina_map_head {
  width: 800px;
  margin: 0 auto;
  padding: 2vw 0;
}
.hiina_map_head_adress {
  width: 700px;
  margin: 0 auto;
  padding: 0 2vw;
}
.hiina_map_head__ad{
  font-size: 1.1rem;
}
.hiina_map_head__wrap {
  padding: 1em 0 0;
}
}
/* ここから ひーな農園MAP */

/* ここから ハウズ伊都店MAP */
.ito_map_title {
  position: relative;
  padding: 10vw 0 8vw;
  background:
      radial-gradient(#f78d36 30%, transparent 30%),
      linear-gradient(#e55628 0 100%);
  background-repeat: repeat, no-repeat;
  background-size: 10px 10px, 100% 100%;
  font-size: var(--big-fontsize);
  font-weight: bold;
  text-align: center;
  color: #FFF;
  box-sizing: border-box;
}
.ito_map_sttl{
  margin: 0 0 1em;
}
.ito_map_sttl span{
  background: #FF0;
  padding: 1vw 8vw;
  color: #000;
}
.ito_map_title:before,
.ito_map_title:after {
  position: absolute;
  left: 50%;
  content: "";
  height: 0;
  width: 0;
}
.ito_map_title:before {
  top: 100%;
  border: 15px solid;
  border-color: transparent;
  margin-left: -15px;
}
.ito_map_title:after {
  top: 99%;
  border: 15px solid;
  border-color: transparent;
  border-top-color: #e55628;
  margin-left: -15px;
}
.ito_group{
  padding: 4vw 0;
  background-color: #fff;
  background-image:
    radial-gradient(#e9e2af 10%, transparent 10%);
  background-size: 20px 20px;
}
.ito_image{
  padding: 0 6vw 2vw;
}
.ito_item{
  padding: 0 6vw 4vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ito_item_ct{
  background: #644136;
  border-radius: 20px;
  width: calc(100% / 2 - 2vw);
  padding: 1vw;
  margin: 1vw;
  color: #FFF;
  font-size: var(--semi-fontsize);
  text-align: center;
}
.ito_explain{
  padding: 0 6vw 4vw;
}
.hows_web_info{
  font-size: var(--middle-fontsize);
  text-align: center;
  padding: 0 0 4vw;
}
.ito_map_wrap{
  padding: 4vw 6vw;
}
.ito_logo{
  max-width: 400px;
  margin: 0 auto;
  padding: 2vw 4vw;
}
.ito_info{
  text-align: center;
  padding: 4vw 0;
  line-height: 1.6;
}
.ito_mapimage{
  padding: 2vw 0 0;
}
.promotion{
  font-size: var(--middle-fontsize);
  text-align: center;
  padding: 1em 0;
}
.sns {
  display: flex;
  justify-content: center;
  padding: 1vw 0;
}
.sns img{
  padding: 2vw;
  height: auto;
}

@media(min-width: 600px) {
.ito_map_sttl {
  font-size: var(--middle-fontsize);
}
.ito_map_title {
  padding: 8vw 0 6vw;
}
.ito_item {
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 6vw 2vw;
}
.hows_web_info{
  font-size: var(--big-fontsize);
  padding: 2vw 0 4vw;
}
.ito_map_wrap {
  padding: 2vw 6vw;
}
.ito_info {
  padding: 1vw 0 4vw;
}
.sns {
  padding: 1vw 2vw;
}
.sns img {
  padding: 1vw;
}
}

@media(min-width: 990px) {
.ito_map_title {
  padding: 2.6em 0 2em;
}
.ito_map_sttl span {
  padding: 0.4em 2em;
}
.ito_image {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 2vw;
}
.hiina_map_car {
  padding: 2vw 0 1vw;
}
.hiina_map_bus {
  padding: 0 0 2vw;
}
.ito_item_ct {
  width: calc(100% / 4 - 1vw);
  padding: 0.5vw;
  margin: 0.5vw;
}
.ito_explain {
  padding: 0 4vw 1vw;
}
.hows_web_info {
  padding: 2vw 0 0;
}
.ito_logo {
  padding: 2vw 0 1vw;
}
.ito_mapimage {
  padding: 0 0 2em;
  width: 700px;
  margin: 0 auto;
}
.ito_group {
  padding: 4em 0 0;
}
.promotion {
  padding: 0 0 4em;
}
}
/* ここまで ハウズ伊都店MAP */



.album_contents {
  padding: 0 1em 2em;
  background-color: #ffffff;
}


/* ここから フッター */
#footer {
  position: relative;
  /* margin-top: 40px; */
  color: #fff;
  font-size: 0.9rem;
  font-weight: normal;
  font-family: fot-tsukuardgothic-std, sans-serif;
}
#footer a {
  text-decoration: none;
  color: #fff;
}
#footer a:hover {
  list-style: none;
}
#footer .primary {
  padding: 40px 20px;
  background: #644136;
}
#footer .primary .flex {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}
#footer .primary .flex .right {
  display: flex;
  width: 60%;
  justify-content: flex-end;
}
#footer .primary .flex .left{
  width: 40%;
}
#footer .secondary {
  display: flex;
  padding: 20px;
  background: #461f13;
}
#footer .logo_sub{
  padding: 0.4vh 0.1vw;
  font-size: 16px;
}
#footer .logo {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 2.2rem;
  line-height: 1.0;
}
.left img{
  width: 15%;
  height: 15%;
}
.logo_hiina{
  display: flex;
}
.logo_hiina_1{
  padding: 0 0 0.5em 0.5em;
}
.address {
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.9rem;
}
.navi-section {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin-left: 50px;
}
#footer .parent {
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 1.1rem;
}
#footer .navi {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .navi li {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
}
#footer .navi li:first-child {
  margin: 0;
}
#footer .sitenavi {
  width: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .sitenavi li {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0;
}
#footer .sitenavi li:first-child {
  margin-left: 0;
}
.pd-0{
  padding:0;
}
.pd-01{
  padding: 0 1vw;
}
.pd-02{
  padding: 0 0.2vw;
}
#footer .copyright {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  color: #f2f2f2;
  font-size: 0.8rem;
}
@media screen and (max-width: 1024px) {
.logo_hiina {
display: flex;
align-items: center;
}
ul.navi {
font-size: 0.9em;
letter-spacing: 0.05em;
}
.address {
font-size: 0.8rem;
}
.navi-section {
margin-left: 30px;
}
#footer .logo {
font-size: 2rem;
line-height: 1.0;
}
#footer .logo_sub {
font-size: 1em;
padding: 0 0.3em;
}
#footer .primary .flex {
max-width: 940px;
}
}
@media screen and (max-width: 768px) {
#footer .primary {
padding: 20px 20px;
background: #644136;
}
#footer .primary .flex {
display: block;
padding: 1em;
}
#footer .primary .flex .left{
width: 100%;
}
#footer .primary .flex .right{
width: 100%;
}
#footer .secondary {
display: block;
padding: 20px 20px;
}
#footer .logo {
font-size: 28px;
}
#footer .logo_sub{
font-size: 12px;
}
.logo_hiina {
align-items: center;
}
.left img {
width: 60px;
height: auto;
}
.address {
font-size: 12px;
padding-left: 0.5em;
}
.navi-section {
display: block;
width: 100%;
margin: 40px 0 0;
}
#footer .parent {
font-size: 12px;
margin: 0 0 10px;
}
#footer .navi {
font-size: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #644136;
}
#footer .navi li {
border-top: 1px solid #644136;
padding-top: 10px;
margin-top: 10px;
font-size: 12px;
}
#footer .sitenavi {
width: 100%;
text-align: center;
font-size: 12px;
}
#footer .copyright {
width: 100%;
text-align: center;
font-size: 12px;
}
}
@media screen and (max-width: 599px) {
#footer .primary .flex .right {
  /* display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 2em 0 0; */
  display: none;
}
.navi-section {
  margin: 20px 0 0;
}
}
@media screen and (max-width: 440px) {
  #footer .primary .flex .right,
  .address{
    display: none;
  }
}
@media screen and (max-width: 399px) {
#footer .navi li {
  font-size: 11px;
}
  #footer .copyright {
  margin: 0;
}
}

/* ここまで フッター */

/* go to TOP */
#page-top a{
  display: flex;
  justify-content:center;
  align-items:center;
  background:#644136;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size:0.6rem;
  transition:all 0.3s;
}

#page-top a:hover{
  background: #777;
}

#page-top {
  position: fixed;
  right: 10px;
  z-index: 2;
    /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}
@media screen and (max-width: 768px) {
  #page-top a{
    opacity: 0.5;
  }
}
#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}
.pagetop:hover {
  opacity: .8;
}
/* go to TOP */

/* ご予約ボタン */
.reservation_form_btn_box {
  /*   width: 100%; */
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px 0;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    padding: 4vw 0 0;
  }

  @media screen and (min-width: 769px) {
.reservation_form_btn_box {
  padding: 2vw 0;
  gap: 30px 0;
}
  }
  .reservation_form_btn_box .imo_reserve_caution {
    width: 100%;
    margin-top: 1em;
  }
  .reservation_form_btn_box .imo_reserve_caution span {
    margin: auto;
    display: block;
      max-width: 360px;
    text-align: center;
  }
  .reservation_form_caution {
    padding: 0.5em 0 1em;
}
  @media screen and (max-width: 768px) {
    .reservation_form_btn_box .imo_reserve_caution span {
      width: 210px;
    }
  }
  .reservation_form_btn_box .about_nanohana_text {
    margin-bottom: 3.5em;
  }
  .reservation_form_btn_box button {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 260px;
    color: #FFF;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    border-radius: 50px;
    -webkit-box-shadow: 0.2rem 0.2rem 0px 0.1rem #eaeaea;
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #eaeaea;
    width: 45%;
    padding: 0;
  }
  .reservation_form_btn_box button a, .reservation_form_btn_box button p {
    color: #fff;
    font-size: 1.2rem;
    display: block;
    padding: 0.5em;
    border-bottom: none;
  }
  .reservation_form_btn_box .newline {
    width: 100%;
    height: 0;
    margin-bottom: 2em;
  }
  .reservation_form_btn_box button.is_open_form {
    border: 0.2rem solid #EF2D80;
    background: #EF2D80;
  }
  .reservation_form_btn_box button.is_open_form:hover {
    -webkit-transform: translate3d(0.2rem, 0.2rem, 0);
    transform: translate3d(0.2rem, 0.2rem, 0);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.8;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  
  .reservation_form_btn_box button.is_open_form a{
    border-bottom: none;
  }
  .reservation_form_btn_box button.closed_form {
    background-color: #c7c7c7;
    border: 0.2rem solid #c7c7c7;
  }
  .reservation_form_btn_box button.closed_form span {
    position: absolute;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000;
    font-size: 1.2em;
    left: 50%;
    top: -25px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    font-family: "Zen Maru Gothic", serif;
    font-size: 0.9em;
  }
  @media screen and (max-width: 768px) {
    .reservation_form_btn_box button.closed_form {
      margin-top: 1em;
    }
    /* .reservation_form_btn_box {
   width: 90%;
  } */
  }
  
  @media screen and (max-width: 768px) {
    .reservation_form_btn_box button {
      max-width: initial;
      width: 80%;
      margin-bottom: 1.5em;
    }
    .reservation_form_btn_box .newline {
      display: none;
    }
  }
  /*予約カウンタ*/
  .rsv_counter {
    width: 50%;
    text-align: center;
  }