@charset "utf-8";
/* CSS Document */

/* ===============================
	header
 =============================== */
#header {
  position: sticky;
  top: 0;
  margin: auto;
  z-index: 999;
}
#header::before {
  content: '';
  width: 100%;
    height: 120px;
  background: #FFF;
  background: linear-gradient(0deg,rgba(255, 255, 255, 0) 4%, rgba(52, 107, 137, .49) 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
@media screen and (max-width: 750px) {
  #header::before {
    height: 15vw;
  }
}

/* header_top */
#header_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px 16px 15px;
}
#header_top .header_logo img {
  height: auto;
}
#header_top .header_contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  gap: 8px;  
}
#header_top .header_contact p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;  
  font-size: 14px;
  font-weight: 700;  
  line-height: 1.4;
  color: var(--C-white);
  width: 16ch;  
  margin-right: 4px;
}
#header_top .header_contact a {
  border-radius: 100px;
  width: 188px;
  height: 44px;  
  display: flex;
  flex-direction: row;
  justify-content: center;
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .1));
}
#header_top .header_contact a.tel {
  background: var(--C-tel);
}
#header_top .header_contact a.line {
  background: var(--C-line);
}
#header_top .header_contact a.mail {
  background: var(--C-mail);
}
#header_top .header_contact a span {
  font-family: "Zen Kaku Gothic Antique", sans-serif;  
  color: var(--C-white);
  font-size: 14px;
  font-weight: 700;  
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;  
  padding-bottom: 2px;  
}
#header_top .header_contact a span::before {
  content: '';
  width: 22px;
  height: 22px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}
#header_top .header_contact a.tel span {
  font-family: 'Noto Sans JP', sans-serif;
}
#header_top .header_contact a.tel span::before {
  background-image: url(../img/common/header_icon_tel.svg);
}
#header_top .header_contact a.line span::before {
  background-image: url(../img/common/header_icon_line.svg);
}
#header_top .header_contact a.mail span::before {
  background-image: url(../img/common/header_icon_mail.svg);
}

/* header_bottom */
#header_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header-nav {
  background: var(--C-white);
  border-image-source: linear-gradient(90deg, var(--C-white) 96%, rgba(255, 255, 255, 0) 97%);
  border-image-slice: 0 fill;
  border-image-outset: 0 0 0 100vw;    
  border-width: 0;  
  border-radius: 0 100px 100px 0;
  position: relative;
  transition: .4s;  
  -webkit-transition: .4s;  
}
.header-nav .nav_toggle {
  display: none;
}
.header-nav .nav_menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44px;  
}
.header-nav .nav_menu li {
  width: 172px;
  max-width: calc(100% / 5);
  height: 100%;
  position: relative;
}
.header-nav .nav_menu .nav_list:first-child {
  display: none;
}
.header-nav .nav_menu li:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 60%;
  background: var(--C-green);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.header-nav .nav_list button,
.header-nav .nav_list a,
.header-nav .nav_list p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;  
  font-size: 14px;
  font-weight: 700;  
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
}
.header-nav .nav_list button {
  width: 268px;
}
.header-nav .nav_list p {
  cursor: pointer;
}
.header-nav .nav_menu .nav_list:last-child a {
  border-radius: 0 100px 100px 0;
}
.header-nav .nav_list a:hover,
.header-nav .nav_list p:has(+ ul.open),
.header-nav .nav_list p:hover {
  color: var(--C-white);
  background: var(--C-green);
  opacity: 1;
}
.header-nav .nav_menu .nav_list p + ul {
  width: 100%;
  position: absolute;
}
.header-nav .nav_menu .nav_list p + ul.close {
  display: none
}
.header-nav .nav_menu .nav_list p + ul.open {
  display: block;
}
.header-nav .nav_menu .nav_list p + ul li {
  width: 100%;
  max-width: inherit;
  height: 44px;
  position: relative;
}
.header-nav .nav_menu .nav_list p + ul li:not(:last-child)::after {
  content: '';
  width: 87.5%;
  height: 1px;
  background: var(--C-green);
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.header-nav .nav_menu .nav_list p + ul li a {
  background: var(--C-white);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header-nav .nav_menu .nav_list p + ul li a:hover {
  color: var(--C-green);
  opacity: 1;
}
.header-nav .nav_menu_sp {
  display: none;
}

.header_company {
  background: var(--C-green);
  border-image-source: linear-gradient(-90deg, var(--C-green) 96%, rgba(125, 190, 100, 0) 97%);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw 0 0;   
  border-width: 0;     
  border-radius: 100px 0 0 100px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44px;  
}
.header_company a {
  font-size: 14px;
  font-weight: 600;  
  color: var(--C-white);
  text-align: center;
  width: 160px;
  max-width: calc(100% / 2);
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;  
}
.header_company a:not(:last-child)::after {
  content: '';
  width: 1px;
  height: 60%;
  background: var(--C-white);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/* アコーディオンメニュー */
#header.acco_menu #header_top .header_logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;  
}
#header.acco_menu #header_top .header_logo::after {
  content: '良いご庭案があります';
  font-family: "Zen Kaku Gothic Antique", sans-serif;        
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--C-white);
  margin-top: 6px;  
}
#header.acco_menu .header-nav:hover {
  transform: translateX(20px);
}
#header.acco_menu .header-nav .nav_menu > li:first-child {
  display: block;
  width: 268px;
  max-width: inherit;
}
#header.acco_menu .header-nav .nav_menu button {
  justify-content: flex-end;
  margin-left: auto;  
  padding-right: 24px;
}
#header.acco_menu .header-nav .nav_menu button:hover {
  color: var(--C-gray);
  background: none;
}
#header.acco_menu .header-nav .nav_menu button::after {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url(../img/common/header_acco_navicon.svg);
  background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  margin-left: 4px;
}
#header.acco_menu .header-nav .nav_menu button span::before {
  content: 'MENU';
}
#header.acco_menu .header-nav .nav_menu li:not(:last-child)::after {
  content: none;
}
#header.acco_menu .header-nav .nav_menu li {
  display: none;
}

/* ナビオープン時 */
#header.acco_menu.open .header-nav:hover {
  transform: none;
}
#header.acco_menu.open .header-nav .nav_menu button {
  display: none;
}
#header.acco_menu.open .header-nav .nav_menu li {
  display: block;
}
#header.acco_menu.open .header-nav .nav_menu > li:first-child {
  width: 0;
}
@media screen and (max-width: 1144px) {
  #header_top {
    flex-direction: column;
    gap: 10px;    
  }
  #header_top .header_contact {
    justify-content: end;
  }  
}
@media screen and (max-width: 1120px) {
  #header.acco_menu #header_top .header_logo::after {
      word-break: keep-all;
  }
  #header_top .header_contact p br {
    display: none;
  }  
  #header.acco_menu.open .header-nav .nav_menu {
    max-width: 95vw;
  }
}
@media screen and (max-width: 750px) {
  #header {
    position: fixed;
  }
  /* header_top */
  #header_top {
  padding: 2.13333333333333vw 0 0.26666666666667vw 2.93333333333333vw;
  }  
  #header.acco_menu #header_top .header_logo {
    gap: 4vw;
  }  
  #header.acco_menu #header_top .header_logo::after {
    font-size: 2.6vw;
  }
  #header.acco_menu #header_top .header_logo img {
    width: 36.26666666666667vw;
  }
  #header_top .header_contact {
    display: none;
  }
  .header-nav {
      border-image-source: linear-gradient(-90deg, var(--C-white) 96%, rgba(255, 255, 255, 0) 97%);
      border-image-outset: 0 100vw 0 0;
      border-radius: 100px 0 0 100px;
  }  
  #header.acco_menu .header-nav:hover {
    transform: none;
  }  
  #header.acco_menu .header-nav .nav_menu {
    height: 8.53333333333333vw;
    position: relative;    
    z-index: +1;    
  }  
  .header-nav .nav_menu li:not(:first-child) {
    display: none;
  }
  #header.acco_menu .header-nav .nav_menu > li:first-child {
    width: 20vw;
  }  
  #header.acco_menu .header-nav .nav_menu button {
    font-size: 2.93333333333333vw;    
    width: auto;
    padding-right: 3.2vw;
  }
  #header.acco_menu .header-nav .nav_menu button::after {
    width: 2.4vw;
    height: 2.4vw;
  }   
  #header.acco_menu .header-nav .nav_menu button span::before {
    content: 'MENU';
    font-family: "Zen Kaku Gothic Antique", sans-serif;
  }   

  /* nav_menu_sp */
  .header-nav .nav_menu_sp {
    background: var(--C-white);
    border-radius: 4.26666666666667vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.06666666666667vw 0;    
    width: 100vw;    
    max-height: 100vh;    
    overflow: scroll;    
    position: fixed;
    top: 3.46666666666667vw;  
    bottom: 3.46666666666667vw;      
    left: 100vw;   
    z-index: -1;     
    padding: 11.73333333333333vw 7.73333333333333vw;
    transition: 0.8s;    
  }
  .header-nav .nav_menu_sp li {
    width: 100%;
  } 
  #header.acco_menu.open .header-nav .nav_menu > li:first-child {
    width: 20vw;
  }
  .header-nav .nav_menu_sp li a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }   
  .header-nav .nav_menu_sp li a p {
    font-size: 4vw;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: inline-block;
  }  
  .header-nav .nav_menu_sp .main_menu {
    height: 11.2vw;
  } 
  .header-nav .nav_menu_sp .main_menu a {
    background: var(--C-green);
    border-radius: 100px 0 0 100px;    
  }  
  .header-nav .nav_menu_sp .main_menu a p {
    color: var(--C-white);
    margin-right: 4.53333333333333vw;    
  } 
  .header-nav .nav_menu_sp .main_menu.contact {  
    margin-top: 7.46666666666667vw;    
  }       
  .header-nav .nav_menu_sp .main_menu2 {
    height: 11.2vw;
  } 
  .header-nav .nav_menu_sp .main_menu2.inst a p {
    display: flex;
    align-items: center;  
  }  
  .header-nav .nav_menu_sp .main_menu2.inst a p::before {
    content: '';
    width: 4.8vw;
    height: 4.8vw;
    background-image: url(../img/common/header_icon_inst.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 2.13333333333333vw;
  }
  .header-nav .nav_menu_sp .main_menu2 a {
    border: var(--C-green) 2px solid;
    border-radius: 100px 0 0 100px;   
    background: var(--C-white);
  }  
  .header-nav .nav_menu_sp .main_menu2 a p {
    margin-right: 4.53333333333333vw;    
  }   
  .header-nav .nav_menu_sp .sub_menu {
    width: 34.13333333333333vw;
    height: 13.33333333333333vw;
    border-bottom: var(--C-green) 2px solid;
    margin-top: -1.06666666666667vw;    
  }   
  .header-nav .nav_menu_sp .sub_menu.ml {
    margin-left: 7.73333333333333vw;
    margin-right: 0;    
  }
  .header-nav .nav_menu_sp .sub_menu.bNone {
    border-bottom: none;
    margin-bottom: -1.06666666666667vw;      
  }  
  #header .header_company {
    display: none;
  }  

  /* header_bottom */
  #header_bottom {
    position: fixed;
    top: 3.46666666666667vw;
    right: 0;
  }
  #header_bottom .header_inner {
    flex-direction: row-reverse;
  }  

  /* オープン時 */
  html:has(#header.open .header-nav) {
    overflow: hidden;
  }

  #header.open .header-nav {
    background: var(--C-gray);
    border-image-source: linear-gradient(-90deg, var(--C-gray) 96%, rgba(95, 95, 91, 0) 97%);
  }  
  #header.open .header-nav .nav_menu li:not(:first-child) {
    display: none;
  }
  #header.open .header-nav .nav_menu_sp {
    left: 9.33333333333333vw;
  }
  #header.open .header-nav .nav_menu_sp * {
    font-family: "Zen Kaku Gothic Antique", sans-serif;  
  }
  #header.acco_menu.open .header-nav .nav_menu button {
    display: flex;
  }  
  #header.acco_menu.open .header-nav .nav_menu button::after {
    background-image: url(../img/common/header_close_navicon.svg);
    margin-left: 1.33333333333333vw;
  }  
  #header.acco_menu.open .header-nav .nav_menu button span::before {
    content: '閉じる';
    color: var(--C-white);
  }
}

/* ===============================
	footer
 =============================== */
.footer_inner {
  max-width: 1400px;
  position: relative;
  overflow: visible;
}

/* handling_area */
.handling_area {
  display: flex;
  flex-direction: row;
  gap: 40px 10%;
  padding-top: 68px;
}
.handling_area > div {
  width: 406px;
  max-width: 100%;
  position: relative;
}
.handling_area .maker::after {
  content: '';
  width: 2px;
  height: 100%;
  background: var(--C-gray);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 110%;
  display: block;
}
.handling_area .title {
  font-family: "Zen Kaku Gothic Antique", sans-serif; 
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 24px;
}
.handling_area p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.handling_area strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.722222222222222;
  display: block;  
  margin-top: 10px;
}
.handling_area .maker ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 10px;
  margin-bottom: 40px;
}
.handling_area .maker li {
  width: calc((100% - (10px * 3)) / 4);
}
.handling_area .maker li img {
  width: 100%;
  height: auto;
}
.handling_area .area .img {
  margin-top: 20px;
}
.handling_area .area .img img {
  height: auto;
}

/* access_area */
.access_area {
  padding-top: 82px;
}
.access_area .title {
  font-family: "Zen Kaku Gothic Antique", sans-serif;   
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  margin-bottom: 24px;
}
.access_area .access_area_map {
  width: 100%;
  height: 284px;
}
.access_area .access_area_map iframe {
  width: 100%;
  height: 100%;
}

/* footer_menu_area */
.footer_menu_area {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 90px;
}
.footer_company {
  width: 246px;
}
.footer_logo {
  height: auto;
  margin-bottom: 22px;
}
.footer_text * {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.75;
}

.footer_menu {
  width: calc(100% - 246px);
  height: 152px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-end;  
  flex-wrap: wrap;
  gap: 20px 3.78006872852234%;
  margin-bottom: 12px;
}
.footer_menu * {
  overflow-wrap: break-word;
}
.footer_menu li {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: min-content;
  min-width: 0
}
.footer_menu li.height100 {
  height: 100%;
}
.footer_menu a {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 2.2;
  white-space: nowrap;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0
}
.footer_menu a:hover {
  text-decoration: underline;
  opacity: 1;
}
.footer_menu a::before {
  content: 'ー';
}
.info_txt {
  margin-top: 30px;
}
.info_txt p {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.footer_copyright {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 54px;
  padding-bottom: 16px;
}
@media screen and (max-width: 900px) {
  .footer_menu {
    height: 262px;
  }
  .footer_menu li.height100 {
      height: auto;
  }
}
@media screen and (max-width: 750px) {
  footer {
    padding-bottom: 26vw;
  }
  /* handling_area */
  .handling_area {
    flex-direction: column;
    gap: 11.2vw 0;
    padding-top: 10.66666666666667vw;    
  }
  .handling_area > div {
    text-align: center;
    width: 100%;
  }
  .handling_area .maker::after {
    content: none;
  }
  .handling_area .title {
    font-size: 4vw;
    margin-bottom: 2.4vw;
  }
  .handling_area p {
    font-size: 3.06666666666667vw;
    line-height: 1.6;
  }
  .handling_area strong {
    font-size: 3.86666666666667vw;
    text-align: left;
    display: inline-block;    
    margin-top: 1.06666666666667vw;
  }
  .handling_area .maker ul {
    gap: 0 1.16vw;
    margin-bottom: 3.2vw;
  }
  .handling_area .maker li {
    width: calc((100% - (1.16vw * 3)) / 4);
  }
  .handling_area .maker p {
    font-size: 2.66666666666667vw;
  }
  .handling_area .area .img {
    width: 100vw;
    margin-left: -4%;
    margin-top: 2.4vw;
  }

  /* access_area */
  .access_area {
    padding-top: 2.66666666666667vw;
  }
  .access_area .title {
    font-size: 4vw;
    margin-bottom: 2.66666666666667vw;
  }
  .access_area .access_area_map {
    width: 100%;
    height: 44vw;
    margin: auto;
  }

  /* footer_menu_area */
  .footer_menu_area {
    flex-direction: column;
    margin-top: 8.53333333333333vw;
  }
  .footer_company {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
  }
  .footer_logo {
    width: 38.93333333333333vw;
    margin: auto;
    margin-bottom: 4vw;
  }
  .footer_text {
    display: inline-flex;
    flex-direction: column;
    width: min-content;
    text-align: left;
    margin: auto;
  }
  .footer_text * {
    font-size: 3.06666666666667vw;
    white-space: nowrap;
  }
  .footer_text h1 {
    display: none;
  }

  .footer_menu {
    width: 100%;
    height: 110vw;
    align-content: center;
    gap: 5.33333333333333vw 4vw;
    margin-top: 11.46666666666667vw;
    margin-bottom: 0;
  }
  .footer_menu a {
    font-size: 3.06666666666667vw;
  }
  .info_txt {
    display: flex;
    justify-content: center;    
    margin-top: 16.53333333333333vw;
  }
  .info_txt p {
    font-size: 2.93333333333333vw;
    line-height: 1.318181818181818;
    display: inline-block;    
  }

  .footer_copyright {
    font-size: 2.66666666666667vw;
    margin-top: 5.6vw;
    padding-bottom: 4.8vw;
  }
}