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

html			{ height: 100%; background: #fff; }
body			{ margin:0; padding:0 0 1px 0; border:0; color:#4c4c4c; text-align:left; font-size:90%; font-family: 'Noto Sans JP', 'Noto Sans', sans-serif; font-weight:normal; font-style:normal;  -webkit-text-size-adjust: 100%; }
div				{ vertical-align:bottom; line-height:1em; }
form			{ margin:0; padding:0; }
img				{ margin:0; padding:0; font-size:0; line-height:0; border:0; }
ul,ol,li		{ margin:0px; padding:0px; list-style-type:none; line-height:1em;/*IE・FF*/ vertical-align:top;/*IE*/ }
h1,h2,h3,h4,h5,h6,p,address { font-size:90%; font-family: 'Noto Sans JP', sans-serif; font-weight:normal; font-style:normal; margin-left:0; margin-right:0; margin-top:0; }
a				{ color:#3faf68; cursor: pointer; text-decoration: none;}

header {
    width: 100%;
    padding-top: 6px;
    height: 114px;
    position: fixed;
    z-index: 100;
    background: #fff;
    border-top: 5px solid #d1dd79;
}

header:after{
  content: "";
  border: solid 2.5px #60ab6f;
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
}

.second-hd {
    border-bottom: 1.2px solid #f5f5ef;
}

.header-navi {
    margin: 0 auto;
    width:  1300px;
    position: fixed;
    position: relative;
}

.header-navi .nav-menu {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
}
.header-navi li {
    padding: 0 30px;
    font-size: 18px;
    color: #3faf68;
    line-height: 1em;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    position: relative;
}

.header-navi li::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 0;
    width: 1px;
    height: calc(100% - 20px);
    background-color: #3faf68;
}

.header-navi li:last-child::after {
    display: none; /* 最後のliは線なし */
}


.header-navi li:hover a {
    color: #c0d1c6;
    text-decoration: underline;
    transition: 0.3s ease;
}
.header-navi li span {
    padding-bottom: 10px;
    font-size: 10px;
    color: #6fc08c;
    line-height: 1em;
    display: block;
}

.header-logo {
    width: 625px;
    position: fixed;
    transition: 0.5s ease-out;
    overflow: hidden;
}

.header-logo h1 {
  opacity: 0;
  width: 625px;
  transform: translateY(-20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
    padding-top: 15px;
}

/* 表示アニメーション後の状態 */
.header-logo.show {
  height: 240px;
}

.header-logo.show h1 {
  opacity: 1;
  width: 580px;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* スクロール後の縮小状態 */
.header-logo.shrink {
    height: 162px !important;
    position: absolute;
    top: -10px;
    left: 0;
}


.header-logo-second {
    position: absolute;
    top: 5px;
    left: 0;
    width: 580px;
}

.header-logo-second h1 {
  width: 580px;
}


@media only screen and (max-width: 768px) {
header {
    width: 100%;
    padding-top: 6px;
    height: 60px;
    position: fixed;
    z-index: 100;
    background: #fff;
    border-top: none;
    border-bottom: none;
}

header:after{
  content: "";
  border: none;
}

.header-navi {
    margin: 0 auto;
    width:  100%;
    position: fixed;
    position: relative;
}

.header-navi .nav-menu {
    display: none;
}




.header-logo {
    width: 100%;
    position: fixed;
    transition: 0.5s ease-out;
    overflow: hidden;
}

.header-logo h1 {
  opacity: 0;
  width: 91%;
  transform: translateY(-20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
    padding-top: 5px;
    padding-left: 8px;
}

/* 表示アニメーション後の状態 */
.header-logo.show {
  height: auto;
}

.header-logo.show h1 {
  opacity: 1;
  width: 91%;
  transform: translateY(0);
  transition-delay: 0.4s;
    padding-top: 5px;
    padding-left: 8px;
}

/* スクロール後の縮小状態 */
.header-logo.shrink {
    height: auto;
    width: 100%;
    position: absolute;
    top: -10px;
    left: -6px;
}
.header-logo.shrink img {
    width: 92%;
}



.header-logo-second {
  width: 100%;
}

.header-logo-second h1 {
  position: absolute;
  top: -10px;
  left: 2px;
  width: 83.7%;
}
}


.nav-menu-sp   {
    display: none;
    }

@media only screen and (max-width: 768px) {
.nav-menu-sp   {
    display: block;
    }
    
#menu-sp-area   {
    width: 45px;
    height: 45px;
    background: #3faf68;
    border-radius: 14px;
    position: absolute;
    top: 12px;
    right: 7px;
    }


/* ハンバーガーメニュー */
.menu-btn {
    position: absolute;
    top: 13px;
    right: 11px;
    padding: 0 0 0 0;
    z-index: 30;
    }

.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 20px;
  cursor: pointer;
    margin: 0 auto;
}

.menu span {
  display: block;
  height: 2.5px;
  background-color: #fff;
  transition: 0.3s ease;
}

/* メニュー表示 */
#nav {
  display: none;
  position: absolute;
  top: -20px;
  right: 0;
  background-color: rgba(37, 146, 77, 0.92);
  max-height: 100dvh;
  width: 99%;
  padding: 0 0 20px 0;
    z-index: 20;
    overflow-y: auto;
}

#nav.active {
  display: block;
}

#nav ul {
  margin: 50px auto 30px auto;
    width: 85%;
}

#nav ul li {
    list-style: none;
    color: #fff;
    border-bottom: 1px solid #3faf68;
    padding: 12px 0 12px 5px;
    font-size: 14px;
    font-weight: 600;
}

#nav ul li.lvl3 {
    padding-left: 1em !important;
}

#nav ul a {
  color: white;
  text-decoration: none;
}

/* スクロール防止 */
body.scroll-prevent {
  overflow: hidden;
}

/* ハンバーガーメニューがアクティブな時のアニメーション */
.menu.active {
  padding-top: 8px;
}
.menu.active span:nth-child(1) {
  transform: rotate(45deg);
  position: relative;
  top: 1px;
}

.menu.active span:nth-child(2) {
  opacity: 0;
}

.menu.active span:nth-child(3) {
  transform: rotate(-42deg);
  position: relative;
  top: -17px;
}

}




h4.title-en {
    font-size: 60px;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: 0.07em;
    margin: 0 0 15px 0;
}
h4.title-en .gree1 {
    color: #74b638;
}
h4.title-en .gree2 {
    color: #3faf68;
}
h4.title-en .whit {
    color: #fff;
}

h5.title-jp {
    font-size: 24px;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 0 0;
}

@media only screen and (max-width: 768px) {
h4.title-en {
    font-size: 45px;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0 0 5px 0;
}
h4.title-en .gree1 {
    color: #74b638;
}
h4.title-en .gree2 {
    color: #3faf68;
}
h4.title-en .whit {
    color: #fff;
}

h5.title-jp {
    font-size: 19px;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 0 0 0;
}
}



.btn-detail {
    border-radius: 40px;
    text-align: center;
    color: #3faf68;
    line-height: 1em;
    font-weight: 500;
    letter-spacing: 0.03em;
    background-color: #fff;
}
.btn-detail:hover {
    border-radius: 40px;
    text-align: center;
    color: #fff;
    line-height: 1em;
    font-weight: 500;
    letter-spacing: 0.03em;
    background-color: #3faf68;
    transition: 0.3s ease;
}

@media only screen and (max-width: 768px) {
.btn-detail {
    border-radius: 40px;
    text-align: center;
    color: #3faf68;
    line-height: 1em;
    font-weight: 600;
    letter-spacing: 0.03em;
    background-color: #fff;
}
.btn-detail:hover {
    border-radius: 40px;
    text-align: center;
    color: #fff;
    line-height: 1em;
    font-weight: 600;
    letter-spacing: 0.03em;
    background-color: #3faf68;
    transition: 0.3s ease;
}
}



.footer-link {
    width: 100%;
    padding: 20px 0;
    font-size: 14px;
    color: #fff;
    line-height: 1em;
    text-align: center;
    letter-spacing: 0.03em;
    background: #71B538;
    background: linear-gradient(90deg,rgba(113, 181, 56, 1) 0%, rgba(70, 176, 98, 1) 100%);
}
.footer-link a {
    margin: 0 20px;
    color: #fff;
}
.footer-link a:hover {
    transition: 0.3s ease;
    text-decoration: underline;
}

@media only screen and (max-width: 768px) {
.footer-link {
    width: 100%;
    padding: 20px 0;
    font-size: 12px;
    color: #fff;
    line-height: 1em;
    text-align: center;
    letter-spacing: 0.01em;
    font-weight: 600;
    background: #71B538;
    background: linear-gradient(90deg,rgba(113, 181, 56, 1) 0%, rgba(70, 176, 98, 1) 100%);
}
.footer-link a {
    margin: 0 10px;
    color: #fff;
}
.footer-link a:hover {
    transition: 0.3s ease;
    text-decoration: underline;
}
}



footer {
    width: 100%;
    padding: 35px 0;
}
footer .inner {
    margin: 0 auto 30px;
    padding: 0;
    width: 980px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .inner li {
    margin: 0 0 0;
    padding: 0;
}
footer .inner li img.logo1 {
    width: 328px;
}
footer .inner li img.logo2 {
    width: 580px;
}


footer .copyright {
    font-size: 13px;
    color: #727171;
    line-height: 1em;
    text-align: center;
    letter-spacing: 0.05em;
}

@media only screen and (max-width: 768px) {
footer {
    width: 100%;
    padding: 38px 0 20px;
}
footer .inner {
    margin: 0 auto 30px;
    padding: 0;
    width: 90%;
    display: block;
    text-align: center;
}
footer .inner li {
    margin: 0 0 0;
    padding: 0;
}
footer .inner li img.logo1 {
    width: 70%;
    margin-bottom: 20px;
}
footer .inner li img.logo2 {
    width: 100%;
}


footer .copyright {
    font-size: 13px;
    color: #727171;
    line-height: 1em;
    text-align: center;
    letter-spacing: 0.05em;
}
}



@media screen and (min-width: 768px){	
.br-pc { display:block; }
.br-sp { display:none; }
}
@media screen and (max-width: 768px){	
.br-pc { display:none; }
.br-sp { display:block; }
}





.secondtitle {
    width: 100%;
    height: 367px;
    background: url(../img/common/secondtitle-base.gif) top center no-repeat; background-size: 1900px 242px; 
    background-position: center 125px;
    position: relative;
}
.secondtitle .title {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

@media screen and (max-width: 768px){
.secondtitle {
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 242;
    background: url(../img/sp/common/secondtitle-base.gif) center 68px no-repeat;
    background-size: 100%;
    position: relative;
    margin-bottom: 30px;
    padding-top: 76px;
}
.secondtitle .title {
    width: 100%;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
}


.crumb {
    margin: 0 auto;
    padding: 25px 0 60px 0;
    width: 1200px;
    font-size: 13px;
    color: #3faf68;
    line-height: 1em;
    font-weight: 500;
}
.crumb span {
    margin: 0;
    padding: 0 15px;
}
.crumb a:hover {
    color: #c0d1c6;
    text-decoration: underline;
    transition: 0.3s ease;
}

@media only screen and (max-width: 768px) {

.crumb {
    display: none;
}
}



.sp-img {
  display: none;
}

@media only screen and (max-width: 768px) {
.pc-img {
  display: none;
}
.sp-img {
  display: block;
}
}