*,*:before,*:after { -webkit-box-sizing: inherit; box-sizing: inherit;}
html { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 62.5%;}
body{
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-size: clamp(13px, 1.3vw, 16px); line-height:1.6em; letter-spacing: 0.1em;
background-color:#FFFCF5; color:#212529; animation: bugfix infinite 1s; -webkit-animation: bugfix infinite 1s;}

p { width:96%; margin-left:2%; margin-top:15px; margin-bottom:15px; text-align: justify; text-indent:1em;}

.TMGgr{color:#849B2B;}
.TMGrd{color:#ED8678;}
.TMGbl{color:#94D7B4;}
.TMGor{color:#EA8629;}

/*
backgound color
#E9E5DE
#F3F4F2
*/

iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}

/*
********************************************************************************************************************************
global navigation
********************************************************************************************************************************
*/
#menupc{display:block; position:fixed; top:0; width:100%; z-index:500; background-color: #FFF9D9; opacity:0.8;}

.gnavi{ display: flex; list-style: none; margin-top:10px;　margin-bottom:40px;}
.gnavi li a{ display: block;text-decoration: none; color: #333;}
@media (min-width: 576px) {.gnavi li a{padding:0 2px; font-size:0.75em;}}
@media (min-width: 768px) {.gnavi li a{padding:0 4px; font-size:0.8em;}}
@media (min-width: 992px) {.gnavi li a{padding:0 6px; font-size:0.8em;}}
@media (min-width: 1200px) {.gnavi li a{padding:0 10px; font-size:0.9em;}}

.gnavi li{ position: relative; margin:0 8px; }
.gnavi li.current{ text-decoration: none; }

.gnavi li.current a,.gnavi li a:hover{	color:#333;}
.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute; bottom: 0; left: 10%;
    /*線の形状*/
    width: 80%; height: 2px; background:#32AE71;
    /*アニメーションの指定*/
    transition: all .3s; transform: scale(0, 1);/*X方向0、Y方向1*/ transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,.gnavi li a:hover::after { transform: scale(1, 1);/*X方向にスケール拡大*/}
.lead{	padding: 50px 20px;}

/*
********************************************************************************************************************************
mobile menu CSS only
********************************************************************************************************************************
*/
#menumb{display:block; position:fixed; top:0; width:100%; height:90px; background-color: #fff; z-index:10;}
@keyframes bugfix {
  from {padding: 0; }
  to {padding: 0; }
}
@-webkit-keyframes bugfix {
  from {padding: 0;}
  to {padding: 0;}
}
.mblogo{position: absolute; width:45%; top:-14px; padding: 26px 11px;cursor: pointer;user-select: none; z-index:10; margin-top:15px;}
#overlay-button {position: absolute;right: 1em;top: 1em;padding: 26px 11px;cursor: pointer;user-select: none; z-index:10; margin-top:15px;}
#overlay-button span {height: 4px;width: 35px;border-radius: 2px;background-color: #32AE71;position: relative;display: block;transition: all .2s ease-in-out;}
#overlay-button span:before {top: -10px;visibility: visible;}
#overlay-button span:after {top: 10px;}
#overlay-button span:before, #overlay-button span:after {height: 4px;width: 35px;border-radius: 2px;background-color: #32AE71;position: absolute;content: "";transition: all .2s ease-in-out;}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {background: #32AE71;}

input[type=checkbox] {display: none;}
input[type=checkbox]:checked ~ #overlay { visibility: visible; transform: translateX(0%);}/**/
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {background: transparent;}
input[type=checkbox]:checked ~ #overlay-button span:before {transform: rotate(45deg) translate(7px, 7px);}
input[type=checkbox]:checked ~ #overlay-button span:after {transform: rotate(-45deg) translate(7px, -7px);}

#overlay {height: 100vh; width: 100vw; background: #E9E5DE; z-index: 2; visibility: hidden; position: fixed;transition: all 250ms ease-out;transform: translateX(100%);}/**/

#overlay.active { }
#overlay ul {display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 100vh;padding-left: 0; list-style-type: none;}
#overlay ul li {padding: 1em; width:80%; border-bottom:1px #000 solid;}
#overlay ul li a {display:block; color: #333; text-decoration: none; font-size: 1.5em; padding:5px;}
#overlay ul li a:hover {color: #000!important; background-color:#ccc;}

/*
********************************************************************************************************************************
catch
********************************************************************************************************************************
*/
.catch-img { width: 100%; height: 70vh; background-size: cover; background-position: center;background-repeat: no-repeat;}

.catch-img01 { background-image: url(../WebP/catch01.webp);}
.catch-img02 { background-image: url(../WebP/catch02.webp);}
.catch-img03 { background-image: url(../WebP/catch03.webp);}
.catch-img04 { background-image: url(../WebP/catch04.webp);}
.catch-img05 { background-image: url(../WebP/catch05.webp);}
.catch-img06 { background-image: url(../WebP/catch06.webp);}
.catch-img07 { background-image: url(../WebP/catch07.webp);}
.catch-img08 { background-image: url(../WebP/catch01.webp);}

.catch-imgmb { width: 100%; height: 70vh; background-size: contain; background-position: center;background-repeat: no-repeat;}
.catch-img01mb { background-image: url(../WebP/catchmb01.webp);}
.catch-img02mb { background-image: url(../WebP/catchmb02.webp);}
.catch-img03mb { background-image: url(../WebP/catchmb03.webp);}
.catch-img04mb { background-image: url(../WebP/catchmb04.webp);}
.catch-img05mb { background-image: url(../WebP/catchmb05.webp);}
.catch-img06mb { background-image: url(../WebP/catchmb06.webp);}
.catch-img07mb { background-image: url(../WebP/catchmb07.webp);}
.catch-img08mb { background-image: url(../WebP/catchmb01.webp);}

/*
********************************************************************************************************************************
bootstrap
********************************************************************************************************************************
*/

h1,.h1{font-weight: 400; color:#849B2B;}
h2,h3,.h2,.h3{font-weight: 300; color:#849B2B; margin-bottom:15px;}
h4,h5,h6,.h4,.h5,.h6{font-weight: 200; color:#111; margin-bottom:15px;}

/* H1 - H6 */
h1, .h1 {line-height:1.5em;} 
h2, .h2 {position: relative; color:#849B2B;} 


/* H1 - H6 */
@media (min-width: 576px) {
h1, .h1 { font-size: 3rem; line-height:1.5em;} 
h2, .h2 { font-size: 3rem; line-height:2.5em; position: relative; color:#849B2B;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 4rem;} 
h5, .h5 { font-size: 4rem;} 
h6, .h6 { font-size: 4rem;}


h2::before{
content:url('../SVG/tmg-gr.svg');
width: 6px;height: 6px;margin-right: 3rem;
text-align: center;vertical-align: text-top;
}
h2::after{content:'';}
h2.TMGor::before{
content:url('../SVG/tmg-or.svg');
width: 6px;height: 6px;margin-right: 3rem;
text-align: center;vertical-align: text-top;
}
h2.TMGor::after{content:'';}
}

@media (min-width: 768px) {
h1, .h1 { font-size: 3rem; line-height:1.5em;} 
h2, .h2 { font-size: 3rem; line-height:2.5em; position: relative; color:#849B2B;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}


h2::before{
content:url('../SVG/tmg-gr.svg');
width: 6px; height: 6px; margin-right: 3rem;
text-align: center; vertical-align: text-top;
}
h2::after{content:'';}
h2.TMGor::before{
content:url('../SVG/tmg-or.svg');
width: 6px; height: 6px; margin-right: 3rem;
text-align: center; vertical-align: text-top;
}
h2.TMGor::after{ content:'';}
}

@media (min-width: 992px) {
h1, .h1 { font-size: 3rem; line-height:1.5em;} 
h2, .h2 { font-size: 3rem; position: relative; color:#849B2B;} 
h3, .h3 { font-size: 3rem;} 
h4, .h4 { font-size: 2.5rem;} 
h5, .h5 { font-size: 2.5rem;} 
h6, .h6 { font-size: 2.5rem;}

h2::before{
content:url('../SVG/tmg-gr.svg');
width: 15px;height: 15px; margin-right: 8rem;
text-align: center; vertical-align: text-top;
}

h2::after{
content:url('../SVG/tmg-gr.svg');
width: 15px;height: 15px; margin-left: 8rem;
text-align: center; vertical-align: text-top;
}

h2.TMGor::before{
content:url('../SVG/tmg-or.svg');
width: 15px;height: 15px; margin-right: 8rem;
text-align: center; vertical-align: text-top;
}
h2.TMGor::after{
content:url('../SVG/tmg-or.svg');
width: 15px;height: 15px; margin-left: 8rem;
text-align: center; vertical-align: text-top;
}
}

@media (min-width: 1200px) {
h1, .h1 { font-size: 4rem; line-height:1.5em;} 
h2, .h2 { font-size: 4rem; position: relative; color:#849B2B;} 
h3, .h3 { font-size: 4rem;} 
h4, .h4 { font-size: 3rem;} 
h5, .h5 { font-size: 3rem;} 
h6, .h6 { font-size: 3rem;}
}

/****************************************************/

/* display */
.display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2;}
.display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2;}
.display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2;}
.display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2;}
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.2;}
.display-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.2;}
/****************************************************/

.m-6 { margin: 2rem !important;}
.mt-6,.my-6 { margin-top: 2rem !important;}
.me-6,.mx-6 { margin-right: 2rem !important;}
.mb-6,.my-6 { margin-bottom: 2rem !important;}
.ms-6,.mx-6 { margin-left: 2rem !important;}

/* margin */
@media (min-width: 576px) {
.m-6 { margin: 2rem !important;}
.mt-6,.my-6 { margin-top: 1rem !important;}
.me-6,.mx-6 { margin-right: 1rem !important;}
.mb-6,.my-6 { margin-bottom: 1rem !important;}
.ms-6,.mx-6 { margin-left: 1rem !important;}
}
@media (min-width:768px){
.m-6 { margin: 3rem !important;}
.mt-6,.my-6 { margin-top: 3rem !important;}
.me-6,.mx-6 { margin-right: 3rem !important;}
.mb-6,.my-6 { margin-bottom: 3rem !important;}
.ms-6,.mx-6 { margin-left: 3rem !important;}
}
@media (min-width:992px){
.m-6 { margin: 6rem !important;}
.mt-6,.my-6 { margin-top: 6rem !important;}
.me-6,.mx-6 { margin-right: 6rem !important;}
.mb-6,.my-6 { margin-bottom: 6rem !important;}
.ms-6,.mx-6 { margin-left: 6rem !important;}
}
/****************************************************/

.p-6 { padding: 2rem !important;}
.pt-6,.py-6 { padding-top: 2rem !important;}
.pe-6,.px-6 { padding-right: 2rem !important;}
.pb-6,.py-6 { padding-bottom: 2rem !important;}
.ps-6,.px-6 { padding-left: 2rem !important;}

/* padding */
@media (min-width:576px){
.p-6 { padding: 1rem !important;}
.pt-6,.py-6 { padding-top: 1rem !important;}
.pe-6,.px-6 { padding-right: 1rem !important;}
.pb-6,.py-6 { padding-bottom: 1rem !important;}
.ps-6,.px-6 { padding-left: 1rem !important;}
}
@media (min-width:768px){
.p-6 { padding: 3rem !important;}
.pt-6,.py-6 { padding-top: 3rem !important;}
.pe-6,.px-6 { padding-right: 3rem !important;}
.pb-6,.py-6 { padding-bottom: 3rem !important;}
.ps-6,.px-6 { padding-left: 3rem !important;}
}
@media (min-width:992px){
.p-6 { padding: 6rem !important;}
.pt-6,.py-6 { padding-top: 6rem !important;}
.pe-6,.px-6 { padding-right: 6rem !important;}
.pb-6,.py-6 { padding-bottom: 6rem !important;}
.ps-6,.px-6 { padding-left: 6rem !important;}
}

/****************************************************/
.text-white { color: #fff !important;}
a.text-white:hover, a.text-white:focus { color: rgba(213,173,112,1.0) !important;}
/****************************************************/
/* tumugi background colors */
.bg-white { background-color: #fff !important;}
.bg-light { background-color: #fff !important;}

.bg-TMGor { background-color: #FFF7E2 !important;}
.bg-TMGbl { background-color: #EBFFFB !important;}
.bg-TMGpk { background-color: #FFECDB !important;}
.bg-TMGyl { background-color: #FDFFE6 !important;}
.bg-TMGgr { background-color: #ECF4E2 !important;}

.bg-transparent {background-color: transparent !important;}
/****************************************************/
/* border colors */
.border-light { border-color: #eff2f4 !important;}
.border-dark { border-color: #343a40 !important;}

.card{ width:94%; border:none; background-color:#fff; 
/*box-shadow: inset -8px -8px 5px -13px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);*/
}
.card-body{ width:95%; margin-left:5%; lex:1 1 auto; padding:2rem 2rem;}
.card-title{ margin-top:3rem; margin-bottom:.5rem; font-size:1.8rem;}
.card-subtitle{ margin-top:-.25rem; margin-bottom:0; font-size:0.6em;}
.card-text{ margin-top:2rem;}
.card-img,.card-img-bottom,.card-img-top{width:80%; margin-left:10%;}

.breadcrumb{ font-size:0.8em;}
/*
********************************************************************************************************************************
contents
********************************************************************************************************************************
*/
h1 .title,h2 .title,h3 .title,h4 .title,h5 .title,h6 .title{ font-size: 4rem !important;}
.tokucyo{ background-color:#fff; box-shadow: -5px -5px 10px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);}
.tokucyo img{width:90%; margin-left:5%; margin-bottom:18px;}

/****************************************************/
.butn,a.butn,button.butn { font-size: 2rem; font-weight: 700; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 4rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #37BACB;  border-radius: 0.5rem;margin:20px 0;}


a.butn-border-shadow { padding: calc(1.5rem - 12px) 3rem 1.5rem; background: #fff;}
a.butn-border-shadow:before { position: absolute; top: -6px; left: -6px; width: 100%; height: 100%; content: ""; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; border: 3px solid #37BACB; border-radius: 0.5rem;}
a.butn-border-shadow:hover { padding: calc(1.5rem - 6px) 3rem;}
a.butn-border-shadow:hover:before { top: 0; left: 0;}
a.butn-border-shadow--color2 { border-radius: 100vh;}
a.butn-border-shadow--color2:before { border-radius: 100vh; -webkit-box-shadow: 3px 3px 0 #FFF27F; box-shadow: 3px 3px 0 #FFF27F;}

a.butn--green {  color: #00662d;  background-color: #C3E1D2;}
a.butn--green:hover {  color: #00662d;  background: #94D7B4;}
a.butn--green.butn--cubic {  border-bottom: 5px solid #00662d;}
a.butn--green.butn--cubic:hover {border-bottom: 4px solid #00662d;}

a.butn--yellow {color: #000;  background-color: #FFF27F;}
a.butn--yellow:hover {  color: #000;  background: #FCE732;}
a.butn--yellow.butn--cubic {  border-bottom: 5px solid #ccc100;}
a.butn--yellow.butn--cubic:hover {border-bottom: 4px solid #ccc100;}

a.butn--blue {color: #000;  background-color: #8BDCE6;}
a.butn--blue:hover {  color: #fff;  background: #37BACB;}
a.butn--blue.butn--cubic {  border-bottom: 5px solid #216972;}
a.butn--blue.butn--cubic:hover {border-bottom: 4px solid #216972;}

a.butn-c {  font-size: 2rem;  position: relative;  padding: 1.5rem 5rem 1.5rem 5rem;  border-radius: 100vh;}
a.butn-c:before { font-size: 1.6rem;  line-height: 1;  position: absolute;  top: calc(50% - .8rem);  right: 1rem;  margin: 0;  padding: 0;  /*content: '\f054';*/}
/****************************************************/

.kubomi{
border:none;border-radius: 10px; background-color:#fff;
box-shadow: inset -8px -8px 5px -13px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

/*吹き出し*/
.fukidasi-left{ background: #E2FAFD; border: solid 3px #55BAC8;}
.fukidasi-right{ background: #FAF2E4; border: solid 3px #EEC222;}

.fukidasi-left,
.fukidasi-right { position: relative; display: inline-block; margin: 0.5em 0 0.5em 15px; padding: 10px 20px; min-width: 120px; max-width: 100%; color: #212529; font-size: 16px; box-sizing: border-box; text-align: justify;}

.fukidasi-left:before {  content: ""; position: absolute; top: 50%; left: -24px; margin-top: -12px; border: 12px solid transparent; border-right: 12px solid #E2FAFD; z-index: 2;}
.fukidasi-left:after { content: ""; position: absolute; top: 50%; left: -30px; margin-top: -14px; border: 14px solid transparent; border-right: 14px solid #55BAC8; z-index: 1;}

.fukidasi-right:before { content: ""; position: absolute; top: 50%; right: -24px; margin-top: -12px; border: 12px solid transparent; border-left: 12px solid #FAF2E4; z-index: 2;}
.fukidasi-right:after { content: ""; position: absolute; top: 50%; right: -30px; margin-top: -14px; border: 14px solid transparent; border-left: 14px solid #EEC222; z-index: 1;}

.fukidasi-left p,.fukidasi-right p { margin: 0; padding: 0;}

.att{color:#cf2143; text-indent: -1em; padding-left: 1em;}
.att::before{content:'※';}

label{font-size:0.9em;}
.form-control{font-size:1em;}

button.btn-border-on {  border: 2px solid #32AE71;  border-radius: 0;  background: #fff;}
button.btn-border-on:hover {  color: #fff;  background: #32AE71;}
button.btn-border-off {  border: 2px solid #333;  border-radius: 0;  background: #333; color:#fff;}
button.btn-border-off:hover {  color: #fff;  background: #000;}

.midashitx{font-weight:700;font-size:1.2em;}
/*
}
*/
.syoti{
	padding:2em;/*内側余白*/
	position: relative;
	z-index: 0;
	background-color:#EBFFFB;/*背景色*/
}
.syoti:before{
	position: absolute;
	border: 2px dashed #A7A297;/*破線の太さ・色*/
	content: '';
	display: block;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin:5px;
	z-index: -1;
	border-radius:10px;
	background-color:#fff;/*背景色*/
}
/*
********************************************************************************************************************************
news
********************************************************************************************************************************
*/
.newsDT{font-size:0.8em;}
.newsTI{font-size:1.4em;}
.newsCT{font-size:1.1em;}
.newsLK a {display: inline-block; padding: 0.1em 0.9em; border-radius: 15px; text-decoration: none; color: #333; background: #B1F0C1; font-size: 0.9em;}
.newsLK a:before {font-family: bootstrap-icons; content: ' \F470'; padding: 0 0.2em; vertical-align:middle; color: #555; font-size: 1.2em;}
.newsLK a:hover {  color: #fff; background: #33AE71;}
.newsPT{margin-top:10px;}

.newsbase:first-child{border-top:1px solid #029945;}
.newsbase{border-bottom:1px solid #029945; padding:10px 0;}

/*
********************************************************************************************************************************
YouTube
********************************************************************************************************************************
*/
.youtube { width: 100%;  aspect-ratio: 16 / 9; }
.youtube iframe { width: 100%;  height: 100%; }

/*
********************************************************************************************************************************
googlemap
********************************************************************************************************************************
*/
.gmapbox{width:100%; height:449px; background:transparent url(../images/bg_googlemap.jpg) top center no-repeat; background-size:contain;}
#map_canvas0{ position:relative; max-width:100%; height:75vh;}
/*
********************************************************************************************************************************
footer
********************************************************************************************************************************
*/
#FtArea {position: relative; margin-bottom:-100px;}
.footerlinks{/* border-top:1px solid #222; border-bottom:1px solid #222;*/}
#footer{
  background:#849B2B; /*ページ下の色*/
  position: relative;
  z-index: 2;
  padding:5px 20px;
		color:white;
}

/*
********************************************************************************************************************************
recruit
********************************************************************************************************************************
*/


/*
********************************************************************************************************************************
page top botton
********************************************************************************************************************************
*/
#page-top a{ display: flex; justify-content:center; align-items:center; background:#94D7B4; border-radius: 5px; width: 60px; height: 60px; color: #fff; text-align: center; text-transform: uppercase;  text-decoration: none; font-size:1.4rem; line-height:1.2em; transition:all 0.3s;}
#page-top a:hover{ background: #EA8629;}

/*リンクを右下に固定*/
#page-top { position: fixed; right: 20px; z-index: 100; opacity: 0; transform: translateY(100px); /*bottom位置はmoairy.jsで*/}

/*　上に上がる動き　*/
#page-top.UpMove{ animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}

/*　下に下がる動き　*/
#page-top.DownMove{ animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 1; transform: translateY(100px); }
}
/*
********************************************************************************************************************************
fonts
********************************************************************************************************************************
*/
.wf-noto{font-family: 'Noto Serif JP', serif;}

/*
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 100 to 900
*/

.noto-sans{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}


/*
********************************************************************************************************************************
form
********************************************************************************************************************************
*/
form input[type=checkbox] {display: block;}

/*
********************************************************************************************************************************
ダークモード
********************************************************************************************************************************
@media (prefers-color-scheme: dark) {
  body { background-color: #999; color: #fff;}
		#FtArea { color: #fff;}
		.footerlinks{ border-top:1px solid #eee; border-bottom:1px solid #eee;}
		.footerlinks a{ color: #fff;}
}

*/