@charset "utf-8";
/* Topページと中ページ共通CSS Reset */
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0px}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100vw; display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
ul,ol{list-style: none; margin:0px; padding:0px;}
section{margin:0px; }
*{box-sizing: border-box;} *::before,*::after{box-sizing:border-box;}
html { scroll-behavior: smooth; }

/*Base Color */
:root{--lightgreen:#e6fde0;--green:#51a126;--midgreen:#c3d94e;--darkgreen:#407d1e;--lightyellow:#fbfce0;--orange:#f15a24;--bg:#fafafa;}

/* CSS Document */
body{margin:0px; padding:0px; font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; position: relative; font-size: 17px;}

/* ヘッダー **********/
header{width:auto; height: auto; min-height:37px; margin: 0px; padding: 7px 40px 7px 40px; position: relative; margin-bottom: 0px; display: flex; align-items: center; justify-content:space-between;  flex-wrap: wrap; border-bottom: 1px solid #407d1e; background-color: var(--green); box-sizing: border-box; }
.header_img{ margin: 0px auto; padding: 0px; width: 840px; height: 37px; display: none;}
header aside.textform{height: 100%; display: flex; align-items: center; justify-content: flex-start; z-index: 10; position: relative;}
#logo{width: 282px; height:auto; display: block;}
header form{margin: 0px; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; height: 22px;}
header input{margin: 0px; padding: 0; height: 22px;}
header form .search{margin: 0px; height: 22px; margin-left:5px;}

/* 文字サイズ切替ボタン */
#fontswitch{color:#fff; padding: 0; font-size: 12px; width:auto; height: 28px; background-color: #407d1e; border-bottom: 1px solid var(--lightgreen); border-right: 1px solid var(--lightgreen);  border-top: 1px solid rgba(255,255,255,0.4); border-left: 1px solid rgba(255,255,255,0.4); margin-right: 10px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;}
#fontswitch span{display: flex; align-items: center; justify-content: center; margin: 0 5px; white-space: nowrap;  }
#fontswitch span:nth-child(1){margin:0 5px 0 10px;}
#fontswitch img{cursor: pointer; width: 23px; height: 18px; display: inline-block; margin: 0 0 0 2px;}

/* ハンバーガーメニュー */
.open {overflow:hidden;}
#nav-toggle{cursor: pointer; width: 60px; height: 60px; margin:0; padding: 15px 10px; border-radius: 5px; z-index: 10; display: block; background-color: #407d1e; border-top: 1px solid rgba(255,255,255,0.4); border-left: 1px solid rgba(255,255,255,0.4); border-right: 1px solid rgba(0,0,0,0.4); border-bottom: 1px solid rgba(0,0,0,0.4); position:fixed; top:52px; right: 40px; caret-color: transparent;}
.hb-menu {width: 100%; height: 31px; margin:0; position: relative; right: 0; top: 0; border-radius: 10px; display: block; }
.line {height: 2px; width: 100%; position: absolute; transition: all 0.3s; background-color: #fff;}
.line:nth-of-type(1) {top: 0;}
.line:nth-of-type(2) {top: 50%; transform: translateY(-50%);}
.line:nth-of-type(3) {bottom: 0;}
.hb-menu.active > .line{height: 3px; }
.hb-menu.active > .line:nth-of-type(1) { top: 50%; transform: translateY(-50%) translateX(0px) rotate(45deg);}
.hb-menu.active > .line:nth-of-type(2) { display: none;}
.hb-menu.active > .line:nth-of-type(3) { top: 50%; transform: translateY(-50%) translateX(0px) rotate(-45deg);}

/* グローバルメニュー */
.open #gloval-nav {visibility: visible; opacity: 1; position: relative;}
body #gloval-nav{display: none;}
body.open #gloval-nav{background-color: rgba(230,253,224,0.80); position: absolute; top: 0; left: 0; width: 100%; min-height: 100dvh; z-index: 5; }
body.open{overflow: scroll; }
#gloval-nav ul{margin: 130px 50px 50px calc(100% - 890px); position: relative; width: 840px; display:flex; justify-content:space-around; align-items:flex-start; flex-wrap: wrap; }
#gloval-nav ul li{height: 120px; width: 33%; position: relative;  }
#gloval-nav ul li:nth-child(13),#gloval-nav ul li:nth-child(14),#gloval-nav ul li:nth-child(15){text-align: center;}
#gloval-nav ul li:nth-child(13) img,#gloval-nav ul li:nth-child(14) img,#gloval-nav ul li:nth-child(15) img{width: 200px; height: 75px; border-radius: 0; border: none;}
#gloval-nav ul li a{display: inline-block;}
#gloval-nav ul li img{height:94px; width: 94px; border-radius: 50%; filter: drop-shadow(2px 2px 3px #666); border: solid 2px #fff; z-index: 2; position: relative; margin-top: 5px;}
#gloval-nav ul li span.menu{color: #51a126; position: absolute; top:12px; left:60px; font-size: 1em; text-align: center; border-radius: 15px; background-color: #fff; font-weight:bold; padding: 10px 5px 10px 30px; line-height: 1.3em; height: 80px; width:calc(100% - 70px); z-index: 1; border: 2px solid #51a126; filter: drop-shadow(2px 2px 3px #666); display:flex; justify-content:center; align-items:center;}
#gloval-nav ul li span.menu small{color: #000;}
#gloval-nav ul li a:hover span.menu{background-color: var(--lightyellow);}
#gloval-nav ul li:nth-child(1){padding: 0 20px;}
#gloval-nav ul li:nth-child(2){padding: 0 40px 0 0; position: relative;}
#gloval-nav ul li:nth-child(2)::before{content: ""; margin: 0; position: absolute; right: 10px; bottom: 0; width:50px; height:94px; background-image: url("../images/glovalnavi/top.webp"); background-size: contain; background-repeat: no-repeat; background-position: right bottom; z-index: 2;}
#gloval-nav ul li a.topbtn{color: #fff; font-size: 1em; text-align: center; border-radius: 15px; background-color: #51a126; font-weight:bold; height: 80px; width:100%; z-index: 1; border: 2px solid #fff; filter: drop-shadow(2px 2px 3px #666); display:flex; justify-content:center; align-items:center; text-decoration: none; margin-top:12px;}
#gloval-nav ul li a:hover.topbtn{background-color: var(--darkgreen);}


@media screen and (max-width:1170px)  {
#gloval-nav ul{margin: 130px auto 50px auto; width: 96%; justify-content: space-between; }
#gloval-nav ul li{width: 49%; height: 90px; }
#gloval-nav ul li:nth-child(1),#gloval-nav ul li:nth-child(2){margin-bottom: 20px; font-size: 0.9em; padding: 0 30px;}
#gloval-nav ul li:nth-child(2)::before{ right: 50px; }    
#gloval-nav ul li img{height:70px; width: 70px; margin-top: 0;}
#gloval-nav ul li span.menu{top:5px; left:30px; font-size: 0.9em; border-radius: 10px; padding: 8px 5px 8px 34px; width:calc(100% - 40px); height: auto; min-height: 60px;}
#gloval-nav ul li:nth-child(13),#gloval-nav ul li:nth-child(14),#gloval-nav ul li:nth-child(15){width:33%;}
#gloval-nav ul li:nth-child(13) img,#gloval-nav ul li:nth-child(14) img,#gloval-nav ul li:nth-child(15) img{width: 200px; height: auto; max-width: 96%;}
}



/***********************************/
/* タブレット縦 **********************/
@media screen and (max-width:840px) {
header{padding: 7px 100px 7px 20px; }
body header aside.textform{display:none;}
body.open header aside.textform{display: flex; flex-wrap: wrap; gap:10px;}
body.open header{padding: 7px 100px 7px 20px;}
#nav-toggle{width: 50px; height: 50px; padding:12px 10px; right: 10px; top: 46px;}
.hb-menu {height: 26px;}

.logo{width: 100%; height: 18vw; background-size: 86% auto; background-position: top -1px center; align-items:flex-start; padding-top: 1vw; margin:0; max-width: 100vw; max-height: auto;}

h1 img{margin-bottom: 0; width:46vw; margin-top: 0.5em; }
#clouds_loop01{ height: 50%; }
#clouds_loop01 img.cloud_a {width: 25vw; margin-top:20px;}
#clouds_loop01 img.cloud_b {width: 20vw; margin-top:30px;}
#clouds_loop01 img.cloud_c {width: 22vw; margin-top:20px;}
#clouds_loop01 img.cloud_d {width: 19vw; margin-top:10px;}

#gloval-nav ul li:nth-child(2) a{padding-right: 30px; padding-right: 10px;}
#gloval-nav ul li:nth-child(2)::before{right: -5px; bottom: 0;}
#gloval-nav ul{margin: 100px auto 50px auto;}
}

/***********************************/
/* スマホ縦 **********************/
@media screen and (max-width:440px) and (orientation: portrait) {
#logo{width: 240px; height:auto; }
.logo{background-size:auto 100%; width: 100%; height: 32vw; margin: 0; gap:0; max-width: 100%; max-height: 32vw; position: relative; padding: 0 0 6% 0; flex-wrap: wrap; justify-content:flex-start; align-items:flex-start;}
	
#gloval-nav ul li{width: 90%; height: 80px; margin: 0 5%; }
#gloval-nav ul li:nth-child(1),#gloval-nav ul li:nth-child(2){margin-top: 0; height: 2em;}
#gloval-nav ul li:nth-child(1) a,#gloval-nav ul li:nth-child(2) a{padding: 0; height: 2em;}
#gloval-nav ul li:nth-child(2){margin-bottom: 40px;}
#gloval-nav ul li:nth-child(13),#gloval-nav ul li:nth-child(14),#gloval-nav ul li:nth-child(15){width:30%;  margin: 0; text-align: center;}
#gloval-nav ul li:nth-child(13) img,#gloval-nav ul li:nth-child(14) img,#gloval-nav ul li:nth-child(15) img{width: 100%; height: auto; max-width:134px; }
#gloval-nav ul li:nth-child(2) a{padding-right: 0; padding-right: 0;}
#gloval-nav ul li:nth-child(2)::before{right: 5px; bottom: -30px; width:40px ; height: 60px;}
}