@charset "UTF-8";
:root {
  /* 白系 */
  --white01 : #ffffffff;
  --white02 : #ffffffe6; /* 透過率90% */
  --white03 : #ffffff00; /* 透過率0% */

  /* 黒系 */
  --black01 : #4d4d4dff;
  --black02 : #999999ff;
  --black03 : #4d4d4d80; /* 透過率50% */

  /* 緑系 */
  --green01 : #255D40ff;
  --green02 : #053826ff;
  --green03 : #DFE5E2ff;
  --green04 : #EAEDE8ff;
  --green05 : #05382680; /* 透過率50% */
  --green06 : #255d4033; /* 透過率20% */
  --green07 : #B9B96CFF;
  --green08 : #D8D88DFF;
  --green09 : #F4FCDAFF;
  --green10 : #E9EAC4FF;
  --green11 : #255d40cc; /* 透過率80% */

  /* 青系 */
  --blue01 : #008DB5ff;
  --blue02 : #F0F4F5ff;
  --blue03 : #2665CFff;

  /* グレー系 */
  --gray01 : #D4D6DEff;
  --gray02 : #A7A7A7ff;

  /* 赤系 */
  --red01 : #ff0000ff;

  /* 黄色系 */
  --yellow01 : #EBDF80ff;
  --yellow02 : #FAF8E2ff;
  --yellow03 : #F5F5E5FF;

  /* 茶色系 */
  --brown01 : #8f6800ff;
  --brown02 : #5D480Dff;
  --brown03 : #8f680080; /* 透過率50% */

  /* Basic FONT List */
  --mincho : "BIZ UDPMincho", serif;
  --gothic : "BIZ UDPGothic", serif;
  --dance : "Dancing Script", serif;
  --icon : "Material Icons";
}

/* Hero */
.hero{padding: 120px 0 0 0; background: #255D40; margin: 0 0 80px;}

.hero-wrap{padding: 50px 0 80px; color: #fff; font-weight: bold; line-height: 1.5; font-family: "BIZ UDPMincho", serif;}
.hero-tit{font-size: min(4.4vw,4.4rem); text-align: center; letter-spacing: 0.2em; margin: 0 0 15px;}

.hero-area{text-align: center; margin: 0 0 45px;}
.hero-area span{font-size: 2rem; display: inline-block; border: 2px solid #fff; border-radius: 40px; padding: 0.15em 2em;}

.hero-cont{display: flex; justify-content: space-between; align-items: center; margin: 0 0 40px;}
.hero-txt{font-size: min(2.8vw,2.8rem);}
.hero-img{width: min(32vw,370px);}

@media screen and (max-width: 768px) {
  .hero{padding: calc(13vw + 10px) 0 0 0; margin: 0 0 60px;}
  
  .hero-wrap{padding: 50px 0 60px;}
  .hero-tit{font-size: min(8vw,3.8rem);}
  
  .hero-area{margin: 0 0 40px;}
  .hero-area span{font-size: min(4vw,1.8rem); padding: 0.2em 1.5em;}
  
  .hero-cont{display: block; margin: 0 0 40px; text-align: center;}
  .hero-txt{font-size: min(5vw,2.4rem); margin: 0 0 20px;}
  .hero-img{width: min(65vw,316px); margin: 0 auto;}
}

/* News */
.news{width: calc(100% - 20px); margin: 0 auto; background: #FFE100; height: 55px; display: flex; align-items: center; font-weight: bold;}
.news-tit{width: 190px;}
.news-tit p{background: #4D4D4D; color: #fff; text-align: center; padding: 6px 0; width: 160px; margin: 0 auto;}
.news-info{width: calc(100% - 190px); overflow: hidden; }

.news-scroll{display: flex; width: max-content; height: 100%; }
.news-scroll ul{display: flex;}
.news-scroll li{margin: 0 6em 0 0;}
.news-scroll:hover{animation-play-state: paused !important;}

.news-scroll a{color: #008DB5;}
.news-scroll a::after{font-family: 'Material Icons'; content: "\e89e"; display: inline-block; position: relative; top: 0.15em; font-weight: 400; font-size: 1.1em; line-height: 1.8; margin: 0 0.1em;}
.news-scroll a:hover{text-decoration: underline; text-underline-offset: 0.2em;}

@keyframes news-scroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}

@media screen and (max-width: 768px) {
  .news{height: 46px;}
  .news-tit{width: 145px;}
  .news-tit p{width: 135px; padding: 4px 0;}
  .news-info{width: calc(100% - 145px);}
}

/* Subnav */
.subnav{display: flex; justify-content: space-between; flex-wrap: wrap; font-weight: bold; line-height: 1.5; font-family: "BIZ UDPMincho", serif;}
.subnav a{width: 32.5%; text-align: center; background: #fff; border-radius: 10px; font-size: min(2.2vw,2rem); color: #255D40; display: flex; justify-content: center; align-items: center; height: 4.5em; box-shadow: 0 0 20px 0 rgba(37, 93, 64, 0.2); border: 2px solid #fff; transition: .6s;}
.subnav a::after{content: ""; background: url("../img/common/icon-arrow.svg") no-repeat top left/ 100% 100%; width: 1.2em; height: 1.2em; margin: 0 0 0 0.5em;}
.subnav a:hover{background: #f4fcdb; border: 2px solid #255D40; animation: subnavHover .6s;}

@keyframes subnavHover {
  0% {box-shadow: 0 0 20px 0 rgba(37, 93, 64, 0.4);}
  100% {box-shadow: 0 0 20px 0 rgba(37, 93, 64, 0.2);}
}

@media screen and (max-width: 768px) {
  .subnav{max-width: 400px; margin: 0 auto;}
  .subnav a{width: 100%; font-size: 1.8rem; margin: 0 0 10px; height: 4em; position: relative;}
  .subnav a:last-of-type{margin: 0;}
  .subnav a::after{position: absolute; top: 50%; right: 5%; transform: translateY(-50%);}
}

@media screen and (max-width: 480px) {
  .subnav{max-width: 320px;}
  .subnav a{padding: 0 1.5em 0 0;}
}

/* Info */
.info-tit{font-size: 2.8rem; line-height: 1.25; font-weight: bold; text-align: center; border-radius: 30px; background: #FFE100; font-family: "BIZ UDPMincho", serif; padding: 0.35em 0; margin: 0 0 40px;}

.info-list{overflow: auto; padding: 0 30px 0 0; height: 290px;}
.info-list::-webkit-scrollbar:horizontal{display: none; height: 0; width: 0;}
.info-list::-webkit-scrollbar{height: 0; width: 10px;}
.info-list::-webkit-scrollbar-track{background: #D4D6DE; border-radius: 10px;}
.info-list::-webkit-scrollbar-thumb{background: #A7A7A7; border-radius: 10px;}

.info-list ul{width: 100%;}
.info-list li{padding: 18px 0; border-bottom: 1px dashed #4D4D4D;}
.info-list p{padding: 0 0 0 40px; position: relative;}
.info-list p::before{content: ""; background: url("../img/common/icon-leaf.svg") no-repeat center center/100% auto; width: 20px; height: 20px; position: absolute; top: 7px; left: 0;}

.info-list a{color: #008DB5;}
.info-list a::after{font-family: 'Material Icons'; content: "\e89e"; display: inline-block; position: relative; top: 0.15em; font-weight: 400; font-size: 1.1em; line-height: 1.8; margin: 0 0.1em;}
.info-list a:hover{text-decoration: underline; text-underline-offset: 0.2em;}

@media screen and (min-width: 769px) {
  .info-list li{width: 100%; display: flex;}
  .info-list time{width: 8.5em;}
  .info-list p{width: calc(100% - 8.5em);}
}

@media screen and (max-width: 768px) {
  .info-tit{font-size: 2.4rem; margin: 0 0 25px;}
  .info-list time{display: block; margin: 0 0 3px;}
  .info-list p{padding: 0 0 0 30px;}
  .info-list p::before{width: 18px; height: 18px; top: 3px;}
}

@media screen and (max-width: 480px) {
  .info-list{height: 360px;}
}

/* Avoid Box */
.avoid-box{display: flex; flex-wrap: wrap;}
.avoid-box .item{background: #fff; border-radius: 10px; padding: 30px;}
.avoid-box .img{width: 100%; margin: 35px 0 0 0; display: block; text-align: center;}
.avoid-box .list li{position: relative; padding: 0 0 0 1.25em; margin: 0 0 10px;}
.avoid-box .list li:last-of-type{margin: 0;}
.avoid-box .list li::before{content: ""; width: 0.875em; height: 0.875em; background: #B9B96C; border-radius: 100%; position: absolute; top: 0.5em; left: 0;}

@media screen and (min-width: 769px) {
  .avoid-box{margin: 0 -15px -30px;}
  .avoid-box .item{margin: 0 15px 30px; width: 100%;}
  .avoid-box .item2{width: calc(50% - 30px);}
  .avoid-box .item3{width: calc(33.333% - 30px);}
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
  .avoid-box .item3{width: calc(50% - 30px);}
}

@media screen and (max-width: 768px) {
  .avoid-box .item{padding: 20px; width: 100%; margin: 0 0 20px;}
  .avoid-box .item:last-of-type{margin: 0;}
  
  .avoid-box .list li::before{top: 0.4em}
  .avoid-box .img{padding: 0 5%;}
}

/* Contact */
.contact{background: #FAF8E2; padding: 30px; border-radius: 10px; text-align: center;}
.contact-tit{font-size: 2.4rem; line-height: 1.5; font-weight: bold; font-family: "BIZ UDPMincho", serif; margin: 0 0 20px; border-bottom: 1px solid #D4D6DE; padding: 0 0 20px;}

.contact-tel{display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -30px 25px;}
.contact-tel .col{margin: 0 30px;}
.contact-tel th,
.contact-tel td{text-align: left;}
.contact-tel th{font-size: 1.6rem; font-weight: bold; padding: 0.5em 2em 0 0;}
.contact-tel td{font-size: 3.2rem; line-height: 1.5; font-family: "BIZ UDPMincho", serif; font-weight: bold; color: #255D40;}

.contact-tel a{position: relative; padding-left: 1.1em; display: inline-block;}
.contact-tel a::before{font-family: 'Material Icons'; content: "\e0b0"; display: inline-block; position: absolute; top: 0.2em; left: 0; font-weight: 400; font-size: 0.9em; line-height: 1.5;}
.contact-tel a.noIcon{padding-left: 0;}
.contact-tel a.noIcon::before{display: none;}
.contact-tel .extension { display: block; font-size: 50%; padding-left: 2.2em; line-height: 1.2;}

.contact-btn{display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -10px -10px;}
.contact-btn a{width: 370px; margin: 0 7px 10px; height: 3.6em; font-weight: bold; font-size: 1.8rem; line-height: 1.4; border-radius: 10px; color: #fff; background: #255D40; display: flex; justify-content: center; align-items: center; transition: .5s;}
.contact-btn a::after{font-family: 'Material Icons'; content: "\e158"; display: inline-block; font-weight: 400; font-size: 1.2em; line-height: 1.5; margin: 0 0 0 0.2em; position: relative; top: 0.05em;}
.contact-btn a:hover{background: #053826;}

@media screen and (max-width: 1120px) {
    .contact-tel th{width: 13em; padding: 0.5em 0 0 0;}
    .contact-tel td{width: 12em;}
    
    .contact-tel .tbl2 th{width: 17em;}
}

@media screen and (max-width: 768px) {
    .contact{padding: 20px;}
    .contact-tit{font-size: 2rem;}
    
    .contact-tel{margin: 0 0 10px;}
    .contact-tel table,
    .contact-tel tbody,
    .contact-tel tr,
    .contact-tel th,
    .contact-tel td{width: 100% !important; display: block;}
    
    .contact-tel th{padding: 0; font-size: 1.4rem;}
    .contact-tel td{padding: 0 0 15px; line-height: 1.2; font-size: min(7vw,3.2rem);}
    .contact-tel a::before{line-height: 1.1;}
    .contact-tel a.noIcon{padding-left: 1em;}
    
    .contact-btn a{font-size: min(3.6vw,1.8rem); height: 4em;}
    .contact-btn a::after{font-size: 1.4em; margin: 0 0 0 0.4em;}
}

/* BASIC STYLE */
.middle__title {
	font-size: min(3.6rem, 3.5vw); font-family: var(--mincho); color: var(--green01); font-weight: 400; letter-spacing: 0.2em; font-weight: 600;	
	&.leaf {
		&:before {
			content: ''; display: inline-block; width: 1.08em; height: 1em; background: url(../img/common/icon_leaf_01.svg) center center / 100% auto no-repeat; vertical-align: text-bottom; margin:0 1.6rem 0 0;
		}
	}
}
.middle__title_02 {
	font-size: 2.6rem; font-family: var(--mincho); color: var(--green01);
}
.middle__title_03 {
	font-size: 2.2rem; font-family: var(--mincho); color: var(--black01); padding: 0 0 2rem 0; border-bottom: var(--black01) solid 1px; font-weight: 600; line-height: 1.2;
}
.middle__title_04 {
	font-size: min(2.4rem, 4.8vw); font-family: var(--mincho); color: var(--black01); padding: 0.8rem 3rem; border: var(--green01) solid 2px; font-weight: 600; line-height: 1.2; background: var(--white01); align-items: center; height: auto; border-radius: calc(infinity * 1px); display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 0 3rem 0;
	
}
.middle__title_05 {
	font-size: min(3rem, 5.5vw); font-family: var(--mincho); color: var(--black01); padding: 0 0 2rem 0; border-bottom: var(--black01) solid 1px; font-weight: 600; line-height: 1.2;
}
.middle__title_06 {
	font-size: 2.0rem; font-family: var(--mincho); color: var(--black01); font-weight: 600;  padding:0 0 0 3.5rem;
}
.small__title {
	font-size: min(2.7rem, 2.5vw); font-family: var(--mincho); color: var(--black01); font-weight: 400; 
}
.small__title_02 {
	font-size: 1.8rem; font-family: var(--mincho); color: var(--black01); font-weight: 400; 
}
.small__title_03 {
	font-size: 1.4rem; font-family: var(--mincho); color: var(--black01); font-weight: 400; 
}
.small__title_04 {
	font-size: 1.6rem; font-family: var(--mincho); color: var(--black01); font-weight: 400; 
}
.icon {
	width: 2.4rem; height: 2.4rem;
	&.arrow__green {
		background: url(../img/common/icon_arrow_green.svg) center center / 100% 100% no-repeat;
	}
	&.arrow__white {
		background: url(../img/common/icon_arrow_white.svg) center center / 100% 100% no-repeat;
	}
	&.arrow__brown {
		background: url(../img/common/icon_arrow_brown.svg) center center / 100% 100% no-repeat;
	}
	&.leaf__01 {
		background: url(../img/common/icon_leaf_01.svg) center center / 100% 100% no-repeat;
	}	
	&.leaf__02 {
		background: url(../img/common/icon_leaf_02.svg) center center / 100% 100% no-repeat;
	}	
	&.leaf__03 {
		background: url(../img/common/icon_leaf_03.svg) center center / 100% 100% no-repeat;
	}
}
@media screen and ( max-width:767px) {
  .middle__title {
		font-size: 6.15vw;
	}
  .middle__title_04 {
    margin-bottom: 2rem;
  }
}

/* Article */
.article {
  font-size: 1.6rem; letter-spacing: 0.05em;
  & .middle__title_05 {
    padding: 0 0 2rem 4rem; position: relative; font-weight: 600; color: var(--black01); line-height: 1.5;
    & .icon {
      position: absolute; left:0; top:1rem; width: 3.3rem; height: 3rem;
    }
  }
  & img {
    border-radius: 10px;
  }
  & time {
    font-size: 1.6rem; margin: 0 0 1.5rem 0; font-weight: 700; color: var(--black01); display: block;
  }
  & p {
    font-size: 1.6rem; font-family: var(--gothic); margin: 0 0 3rem 0; line-height: 2; font-weight: 400;
  }
  & h1 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 3.6rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & h2 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 3.2rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & h3 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 2.8rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & h4 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 2.4rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & h5 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 2.0rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & h6 {
    margin: 0 0 4rem 0; font-weight: 600; font-size: 1.6rem; font-family: var(--mincho); line-height: 2; color: var(--green01);
  }
  & ul {
    margin: 0 0 4rem 0;
  }
  & ol {
    margin: 0 0 4rem 0;
  }
  & blockquote {
    background: var(--white01); padding: 3rem; border-radius: 10px; margin: 0 0 4rem 0;
    & * {
      margin: 0;
      & + * {
        margin: 2rem 0 0 0;
      }
    }
    & cite {
      color:var(--brown01); font-size: 2rem; margin: 4rem 0 0 0; display: block; text-align: center;
    }
  }
  & .wp-block-buttons {
    margin: 0 0 4rem 0;
  }
  & .wp-block-button__link {
    background: var(--green01);
  }
  & .wp-block-image {
    margin: 0 0 4rem 0;
  }
  & .wp-block-table {
    margin: 0 0 4rem 0;
  }
  & .wp-block-pullquote {
    padding: 0; margin: 0 0 4rem 0;
  }
  & .wp-block-gallery {
    margin: 0 0 4rem 0;
  }
  & .wp-block-cover {
    margin: 0 0 4rem 0;
    & p {
      margin: 0 0 0 0;
    }
  }
  & .wp-block-separator {
    margin: 0 0 4rem 0;
  }
}
@media screen and (max-width:767px) {
  .article {
    & .middle__title_05 {
      padding: 0 0 1.5rem 3.3rem;
      & .icon {
        top:0.5rem; width: 2.5rem; height: 2.2rem;
      }
    }
    & time {
      font-size: 1.4rem; margin: 0 0 1rem 0;
    }
    & h3 {
      font-size: 2.2rem; margin-bottom: 2rem;
    }
  }
}


/* Dialog */

dialog {
	border: none; border-radius: 10px; padding: 5rem; max-width: 1400px; width: calc( 100% - 100px); margin: auto;
	&::backdrop {
		background-color: var(--green11);
	}
}
.dialog__container{
	& .detail__box{
		& ul{
			display: flex; justify-content: space-around; list-style: none; padding: 0; flex-wrap: wrap; gap: 4rem;			
			li {
				flex-basis: calc( ( 100% - 8rem ) / 3 );
				a {
          display: block; position: relative; filter: drop-shadow( 0 3px 20px var(--green06) );
					.icon {
						position: absolute; right: 3rem; top:50%; transform: translateY(-50%); z-index: 2; right:1rem;						
					}
					&:hover{
						&:after{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0;  border: 2px solid var(--green01); border-radius: 1rem;}
					}
				}
			}
		}
		figure{
			width: 100%;
			img{
				margin: 0 auto;
			}
		}
		button{ background-color: var(--green01); border: none; cursor: pointer; border-radius: calc(infinity * 1px); color: var(--white01); padding: 1rem 2rem; display: block; margin: 4rem auto 0;
			span{
				font-size: 1.6rem; 
				&:before {
					content: ''; display: inline-block; width: 1em; height: 1em; background: url(../img/common/icon_close.svg) center center / 100% auto no-repeat; vertical-align: text-bottom; margin:0 1.2rem 0 0;
				}
			}
			&:hover{
				background-color: var(--green02);
			}
		}
	}
}
@media screen and (max-width:767px) {
  dialog {
		width: calc( 100% - 40px); padding: 3rem 2rem;	
  }
  .dialog__container{
    & .detail__box{
      & ul {
				gap:5.12vw;
        & li {
					flex-basis: 100%;
          & a {
            & .icon {
							right:2vw; width:5.12vw; height: 5.12vw;
            }
          }
        }
      }
    }
  }
}