@charset "UTF-8";

#wrapper {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}
html {
  font-size: 100%;
}
body {
  font-family: "Noto Serif JP", "Hiragino Mincho Pro", "Meiryo",serif;
  color: #333631;
  letter-spacing: 0.2em;
  margin-top: 100px;
}
img {
  max-width: 100%;
  vertical-align: bottom;
  object-fit: cover;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333631;
}
.main_width {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.section_title h2 {
  text-align: center;
  font-size: 30px;
  padding-bottom: 40px;
  letter-spacing: 0.4em;
}
.home_section {
  padding-top: 100px;
  padding-bottom: 100px;
}
.narrow_width {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 1100px) {
  .main_width {
    margin-left: 50px;
    margin-right: 50px;  
  }
}
@media only screen and (max-width: 768px) {
  .main_width {
    margin-left: 30px;
    margin-right: 30px;
  }
  .section_title h2 {
    font-size: 26px;
    padding-bottom: 30px;
    letter-spacing: 0.2em;
  }  
  .home_section {
    padding-top: 60px;
    padding-bottom: 60px;
  }  
}


header {
  height: 100px;
  width: 100%;
  position: fixed;
  background-color: #C2D4DE;
  z-index: 99;
  top: 0;
  left: 0;
}
header #header_logo {
  padding: 0 60px;
  height: 100%;
  display: flex;
  align-items: center;
}
header h1 img {
  width: 110px;
  height: 75px;
}
@media only screen and (min-width: 769px) {
  header h1 a:hover {
    display: block;
    box-shadow: 1px 1px 15px 20px #abd3e9;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
}
@media only screen and (max-width: 768px) {
  header #header_logo {
    padding: 0 5px;
  }
}


header #header_menu_btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: auto;
  height: 100%;
}
header #header_menu_btn img {
  width: 60px;
  height: 60px;
}
@media only screen and (min-width: 769px) {
  header #header_menu_btn img:hover {
    box-shadow: 1px 1px 15px 20px #abd3e9;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
}


#first{
  position: relative;
}
.first_view_img img {
  width: 1920px;
  height: 650px;
  object-fit: cover;
}
.first_view_massage {
  writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.first_view_vertical {
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.first_view_vertical + .first_view_vertical {
  margin-right: 10px;
}
@media only screen and (max-width: 768px) {
  .first_view_vertical {
    font-size: 18px;
  }
  .first_view_vertical + .first_view_vertical {
    margin-right: 5px;
  }  
}
@media only screen and (max-width: 375px) {
  .first_view_img img {
    height: 600px;
  } 
}


.bg_blue {
  background-image: url("../img/top/bg_repeat.jpg");
  background-repeat: repeat;
}
.warning_note .text {
  font-size: 18px;
  text-align: center;
  padding: 20px 0;
  letter-spacing: 0.5em;
}
@media only screen and (max-width: 768px) {
  .warning_note .text {
    font-size: 16px;
    padding: 20px 10px;
  }
}


.about_section {
  padding-top: 30px;
}
.main_height_about {
  min-height: 700px;
}
#about .view_text {
  display: flex;
  gap: 24px;
}
#about .about_view img {
  width: 520px;
  height: 560px;
  object-fit: cover;
}
#about .about_text {
  font-size: 20px;
  font-weight: bold;
  line-height: 2.5;
}
#about .about_link_btn {
  text-align: center;
  margin-top: 160px;
}
#about .about_link_btn a {
  font-size: 20px;
  font-weight: bold;
  border: 2px solid #333631;
  padding: 10px 40px;
}
@media only screen and (min-width: 769px) {
  #about .about_link_btn a:hover {
    background-color: #89663E;
    box-shadow: 1px 1px 3px 3px #89663E;
    border: 2px solid #89663E;
    color: #fff;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
  #about .about_text {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 768px) {
  .about_section {
    padding-top: 20px;
  }
  .main_height_about {
    min-height: 1080px;
  }  
  #about .view_text {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #about .about_text {
    font-size: 18px;
    line-height: 1.8;
  }
  #about .about_link_btn {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 375px) {
  .main_height_about {
    min-height: 850px;
  }  
  #about .about_view img {
    height: 420px;
  }
  #about .about_text {
    font-weight: normal;
    margin-top: 20px;
    line-height: 1.6;
    letter-spacing: 0.0611em;
  }
  #about .about_text br {
    display: none;
  }
}


#image .main_height_image {
  min-height: 900px;
}
#image .item_parent {
  display: flex;
  justify-content: space-between;
}
#image .img_fp img {
  width: 450px;
  height: 550px;
}
#image .item_text {
  padding-top: 36px;
}
#image .item_text .item_text_fp{
  font-size: 18px;
  letter-spacing: 0.4em;
  line-height: 1.8;
}
#image .image_link_btn {
  text-align: center;
  margin-top: 40px;
}
#image .image_link_btn a {
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #333631;
  padding: 10px 40px;
}
@media only screen and (min-width: 769px) {
  #image .image_link_btn a:hover {
    background-color: #89663E;
    box-shadow: 1px 1px 3px 3px #89663E;
    border: 2px solid #89663E;
    color: #fff;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
  #image .item_text {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 768px) {
  #image .main_height_image {
    min-height: 1600px;
  }
  #image .item_parent {
    display: block;
  }
  #image .img_fp {
    margin-top: -60px;
  }
  #image .item_parent .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #image .item_text .item_text_fp {
    letter-spacing: 0.3em;
    line-height: 1.8;
  }
  #image .image_link_btn a {
    position: relative;
    z-index: 60;
  }
}
@media only screen and (max-width: 375px) {
  #image .main_height_image {
    min-height: 1200px;
  }
  #image .img_fp img {
    height: 400px;
  }
  #image .item_text {
    padding-top: 30px;
  }
  #image .item_text .item_text_fp {
    letter-spacing: 0.0611em;
  }
  #image .item_text .item_text_fp br {
    display: none;
  }
}


#watering .main_height_watering {
  min-height: 800px;
}
.para_bg {
  background-image: url("../img/top/para_bg.jpg");
  background-attachment: fixed;
  background-size: cover;
}
#watering .description_box_fp_01,
#watering .description_box_fp_02 {
  background-color: #fff;
  border-radius: 60px;
  opacity: 0.9;
}
#watering h3 {
  font-size: 22px;
  text-align: center;
  padding: 30px 30px;
}
#watering .description {
  display: flex;
  justify-content: center;
  align-items: center;
}
#watering .description_box_text {
  font-size: 20px;
  text-align: left;
  letter-spacing: 0.2em;
  line-height: 1.8;
  padding-bottom: 80px;
}
#watering .description_box_fp_02 {
  margin-top: 80px;
}
@media only screen and (max-width: 768px) {
  #watering .description_box_fp_01,
  #watering .description_box_fp_02 {
  border-radius: 20px;
  }
#watering .description_box_text {
  font-size: 18px;
  text-align: left;
  letter-spacing: -0.015em;
  line-height: 1.8;
  padding: 0px 20px 40px 20px;
  }
#watering .description_box_fp_02 {
  margin-top: 40px;
  }
}
@media only screen and (max-width: 375px) {
  #watering .main_height_watering {
    min-height: 1050px;
  }
  #watering .description_box_text {
    font-size: 16px;
    letter-spacing: 0em;
    line-height: 1.9;
    padding: 0px 50px 80px 50px;
  }  
  #watering .description_box_fp_01,
  #watering .description_box_fp_02 {
  border-radius: 50%;
  }
}


#access .main_height_access {
  min-height: 500px;
}
#access .width_access {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
#access .map_box_text {
  padding-bottom: 20px;
}
#access .map_box_text_01 {
  font-size: 18px;
  font-weight: bold;
}
#access .map_box_img img {
  width: 1920px;
  height: 400px;
  object-position: bottom;
}
@media only screen and (max-width: 768px) {
  #access .map_box_text {
    padding-bottom: 18px;
    text-align: center;
  }  
}
@media only screen and (max-width: 375px) {
  #access .map_box_text_01 {
    font-size: 16px;
    font-weight: normal;
  }
}


#contact .main_height_contact {
  min-height: 350px;
}
.para_02_bg {
  background-image: url("../img/top/para_02.jpg");
  background-attachment: fixed;
  background-size: cover;
}
#contact .tel_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
#contact .tel_box_text {
  text-align: center;
  background-color: #fff;
  opacity: 0.9;
  border-radius: 30px;
}
#contact .text_tel {
  font-size: 28px;
  font-weight: bold;
  margin: 70px 80px 0px 80px;
}
#contact .text_phone {
  font-size: 20px;
  font-weight: bold;
  margin: 0px 80px 70px 80px;
}
@media only screen and (max-width: 768px) {
  #contact .main_height_contact {
    min-height: 300px;
  }  
  #contact .text_tel {
    font-size: 22px;
    margin: 50px 60px 0px 60px;
  }
  #contact .text_phone {
    font-size: 18px;
    margin: 0px 60px 50px 60px;
  }  
}
@media only screen and (max-width: 375px) {
  #contact .main_height_contact {
    min-height: 250px;
  }  
  #contact .text_tel {
    font-size: 18px;
    white-space: nowrap;
    margin: 30px 10px 0px 10px;
  }
  #contact .text_phone {
    font-size: 16px;
    white-space: nowrap;
    margin: 0px 10px 30px 10px;
  }
}


footer {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #464810;
  position: relative;
}
.narrow_height_footer {
  min-height: 220px;
}
footer .store_information {
  margin-top: 50px;
}
footer p {
  color: #fff;
  font-size: 18px;
}
footer .footer_tel {
  margin-top: 15px;
}
footer .footer_time {
  margin-top: 5px;
}
footer .logo_copy {
  margin-top: 10px;
}
footer .logo_copy .cp_small {
  font-size: 16px;
}
footer .logo_copy img {
  width: 88px;
  height: 60px;
}
footer .content_navi {
  position: absolute;
  bottom: 100px;
  right: 250px;
}
footer .headline {
  padding-top: 10px;
}
footer .headline a {
  color: #fff;
  font-size: 18px;
}
@media only screen and (min-width: 769px) {
  footer .content_navi a:hover {
    text-shadow: 6px 6px 10px #abd3e9;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
}
@media only screen and (max-width: 768px) {
  footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  footer .store_information {
    margin-top: 10px;
    text-align: center;
  }
  footer p {
    color: #fff;
    font-size: 16px;
  }  
  footer .footer_tel {
    margin-top: 10px;
  }
  footer .logo_copy .cp_small {
    font-size: 14px;
  }  
  footer .logo_copy {
    margin: 15px 0px 15px 0px;
    text-align: center;
  }
  footer .content_navi {
    display: none;
  }
}


#header_menu {
  position: fixed;
  top: 100px;
  right: -100%;
  overflow-x: hidden;
  background-color: #464810;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  z-index: 999;
  transition: all 1.5s;
}
#header_menu.header_menu_open {
  right: 0;
  transition: all 1s;
}
#header_menu .main_width {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#header_menu a {
  color: #fff;
}
#header_menu .headline {
  padding: 20px 0px;
}
#header_menu .headline a {
  font-size: 22px;
  font-weight: bold;
}
#header_menu .subtitle a {
  font-size: 20px;
}
@media only screen and (min-width: 769px) {
  #header_menu .headline a:hover {
    text-shadow: 4px 4px 10px #abd3e9;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
  }
  #header_menu .subtitle a:hover {
    text-shadow: 2px 2px 10px #dbe2e6;
  }  
}
@media only screen and (max-width: 768px) {
  #header_menu .headline a {
    font-size: 18px;
  }
  #header_menu .subtitle a {
    font-size: 18px;
  }  
}