@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Noto+Serif+JP:wght@400;700;900&display=swap');
.icon18 { font-size: 12px; padding-top: 4px; }
.icon17 { font-size: 17px; float: right; margin: 18px 16px 0 0; }
.icon14 { font-size: 17px; float: right; margin: 13px 9px 0 0; }
.icon12 { font-size: 12px; margin-right: 5px; }

.pc { display: block; }
.sp { display: none; }

.fadeRight { animation-name:fadeRightAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0; }
@keyframes fadeRightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }

body { font-size: 105%; background-color: #ffffff; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; color: #333; }

a { text-decoration: underline; color: #00926b; }
a:hover { text-decoration: none; color: #00926b; }
a:visited { color: #00926b; }


div.questionnaire { width: 50%; float: left; }

div.questionnaire-100 { width: 100%; float: none; }
div.questionnaire-100 img { width: 50%; }


.dots {
text-emphasis: dot #00926b;
 -webkit-text-emphasis: dot #00926b;
}

.menu-div1 { position: absolute; top: -50px; right: 439px; }
.menu-div3 { position: absolute; top: -50px; right: 212px; }
.menu-div2 { position: absolute; top: -50px; right: 717px; }

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 100px;
  max-width: 100%;
  color: #fff;
  font-size: 11px;
  background: #444;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 80%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 15px solid #444;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}


#sponsors ul { margin-top: 60px; }
#sponsors ul li { width: 48%; margin: 0 1%; float: left; }

#main-image { background-color: #00926b; margin: 20px 0; padding: 60px; }
#main-image img { width: 100%; }
#main-image div.sec { padding: 20px; background-color: #fff; border-radius: 20px; margin: 0px auto 0; width: 90%; }
#main-image div.text-top { text-align: center; font-size:140%; font-weight: 700; }
#main-image div.text-top span { color: #05502B; font-weight: 900; }

#main-image-old { background-color: #00926b; margin: -60px 0 20px; padding: 60px; }
#main-image-old img { width: 100%; }
#main-image-old div.sec { padding: 20px; background-color: #fff; border-radius: 20px; margin: 0px auto 0; width: 90%; }
#main-image-old div.text-top { text-align: center; font-size:140%; font-weight: 700; }
#main-image-old div.text-top span { color: #05502B; font-weight: 900; }

#sub-image { background-color: #97CFAC; margin: 20px 0 60px; padding: 60px; color: #fff; font-family: 'Noto Serif JP', serif; font-size: 150%; text-shadow: 0 0 5px #333; letter-spacing: 5px; }

#sub-image.about { background: url("../img/background-about1.jpg")no-repeat left bottom; background-size: cover; }
#sub-image.effect { background: url("../img/background-effect1.jpg")no-repeat left bottom; background-size: cover; }
#sub-image.sponsors { background: url("../img/background-sponsors1.jpg")no-repeat left bottom; background-size: cover; }
#sub-image.questionnaire { background: url("../img/background-questionnaire1.jpg")no-repeat left bottom; background-size: cover; }
#sub-image.results { background: url("../img/background-results.jpg")no-repeat left bottom; background-size: cover; }
#sub-image.related { background: url("../img/background-related.jpg")no-repeat left bottom; background-size: cover; }

.leadsentence { font-size: 149%; font-weight: 700; margin-bottom: 20px; }
.leadsentence span { color: #00926b; font-weight: 900; }

.button { margin: 40px auto; text-align: center; width: 300px; color: #ff0000; border-radius: 32px; display: block; text-decoration: none; font-size: 100%; z-index: 0; position: relative; line-height:50px; white-space: nowrap; padding-left: 22px; border: solid 1px #ff0000; }
.button:visited { color: #ff0000; }
.button:hover { color: #ffffff; }
.button:before{ border-radius: 32px; content:""; width:100%; height:100%; position:absolute; z-index:-1; left:0; transition:0.5s; background:-webkit-linear-gradient(0deg, #fff, #fff); }
.button:after{ border-radius: 32px; content:""; width:100%; height:100%; position:absolute; z-index:-2; left:0; background:-webkit-linear-gradient(0deg, #9c0000, #ff0000); }
.button:hover:before{ opacity:0; }

.q-end2 { color: #ccc; border: solid 1px #ccc; }
.q-end2:visited { color: #ccc; }
.q-end2:hover { color: #ccc; }
.q-end2:before{ border-radius: 32px; content:""; width:100%; height:100%; position:absolute; z-index:-1; left:0; transition:0.5s; background:-webkit-linear-gradient(0deg, #fff, #fff); }
.q-end2:after{ border-radius: 32px; content:""; width:100%; height:100%; position:absolute; z-index:-2; left:0; background:-webkit-linear-gradient(0deg, #ccc, #ccc); }
.q-end2:hover:before{ opacity:0; }

header { width: 100%; padding: 30px 50px 85px 50px; }
#top-logo { float: left; position: absolute; padding-top: 5px; }
#top-logo img { width: 250px; }
#navigation { float: right; position: relative; z-index: 10; margin-top: 57px; white-space: nowrap; }
#navigation ul li { display: inline-block; letter-spacing: 0px; font-size: 95%; margin-top: 5px; margin-right: 35px; vertical-align: top; }
#navigation ul li:last-child { margin-right: 0; }
#navigation ul li a { color: #333333; text-decoration: none; position: relative; display: inline-block; line-height: 180%; }
#navigation ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: #00926b; transform: scaleX(0); transition: transform 0.3s; }
#navigation ul li a:hover::after { transform: scaleX(1); }
#navigation ul li a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: #00926b; transform: scaleX(1); }

.content { margin: 0 auto 60px; width: 90%; max-width: 1000px; clear: both; overflow: hidden; }

.title { margin-bottom: 50px; text-align: center; overflow: hidden; clear: both; }
.title .text-jp { font-size: 180%; font-weight: 400; letter-spacing: 5px; color: #000000; z-index: 10; display: block; padding: 0 0 0 0; font-family: 'Noto Serif JP', serif; }
.title .text-en { font-size: 65%; font-weight: 400; color: #ff0000; z-index: 10; display: block; padding: 0 0 0 0; }
.title hr { border-bottom: solid 1px #ff0000; padding-top: 40px; width: 100%; max-width: 180px; display: block; margin: 0 auto; }

.box div.title span { color: #b2b200; font-weight: 900; }

.maximg { max-width: 100%; }

.box { font-size: 85%; line-height: 250%; margin-bottom: 100px; overflow: hidden; text-align: center; }
.box b { display: block; color: #ff0000; font-size: 180%; font-weight: 700; letter-spacing: 1px; padding: 40px 0; }
.box strong { font-size: 180%; font-weight: 400; }

.box div.title { margin: 80px 0 30px; text-align: center; overflow: hidden; clear: both; font-size: 140%; font-weight: 700; }

.box div.title {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  top:0;
}

.box div.title:before, .box div.title:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
.box div.title:before {
  border-left: solid 1px #999;
  border-top: solid 1px #999;
  border-bottom: solid 1px #999;
  left: 0;
}
.box div.title:after {
  content: '';
  border-top: solid 1px #999;
  border-right: solid 1px #999;
  border-bottom: solid 1px #999;
  right: 0;
}

.wrap-20 { width: 20%; }
.wrap-25 { width: 25%; }
.wrap-30 { width: 30%; }
.wrap-35 { width: 35%; }
.wrap-40 { width: 40%; }
.wrap-45 { width: 45%; }
.wrap-50 { width: 50%; }
.box img { width: 90%; max-width:750px; display: block; margin: 0 auto; }
.box div.img-60 img { width: 90%; max-width:600px; display: block; margin: 0 auto; }
.box div.img-100 img { width: 90%; max-width:1000px; display: block; margin: 0 auto; }
.imgLeft { float: left; padding: 0 60px 40px 0; }
.imgLeft img { display: block; width: 100%; }
.imgRight { float: right; padding: 0 0 60px 40px; }
.imgRight img { display: block; width: 100%; }

.box ul { overflow: hidden; font-size: 120%; font-size: 110%; line-height: 400%; }
.box li.item { float: left; clear: both; width: 20%; border-bottom: solid 1px #eeeeee; padding-left: 20px; }
.box li { float: right; width: 80%; border-bottom: solid 1px #eeeeee; }

#footer-top { width: 100%; background-color: #97CFAC; background: url("../img/footer-02.png")no-repeat bottom center #97CFAC; background-size: contain; font-size: 85%; color: #ffffff; overflow: hidden; padding: 0; margin-top: 100px; }
#footer-top-wrapper { margin: 0 auto; width: 80%; max-width: 1200px; overflow: hidden; text-align: center; padding: 40px; }
#footer-top-wrapper img { width: 100%; display: block; }

#footer { width: 100%; background-color: #326e80; font-size: 85%; color: #ffffff; overflow: hidden; padding: 0; margin-top: 0; }
#footer-wrapper { margin: 0 auto; width: 100%; /*max-width: 1000px;*/ overflow: hidden; text-align: center; }
#footer-wrapper b { font-size: 130%; font-weight: 600; display: block; letter-spacing: 5px; }
#footer-wrapper div.iso { float: left; display: block; background-color: #ffffff; color: #333333; border-radius: 14px; margin: 0 0 0 20px; padding: 4px 20px 4px 20px; letter-spacing: 2px; }
.footer-content-link { float: none; padding: 20px; width: 100%; clear: both; margin-bottom: 20px; }
.footer-content { float: right; padding: 20px; width: 30%; }
.footer-content-link ul { width: 100%; overflow: hidden; }
.footer-content-link ul li { display: inline-block; letter-spacing: 0; font-size: 95%; margin-top: 5px; vertical-align: top; width: 10%; text-align: center; }
.footer-content-link ul li:last-child { margin-right: 0; }
.footer-content-link ul li span { display: block; border-left: solid 1px #595959; font-size: 85%; padding: 0 0 0 10px; margin-top: 20px; }
.footer-content-link ul li a { display: block; margin-bottom: 10px; color: #ffffff; text-decoration: none; }
.footer-content-link ul li a:hover { text-decoration: underline; }
.footer-sub-link { text-align: center; margin-top: 40px; }
.footer-sub-link a { color: #ffffff; text-decoration: none; }
.footer-sub-link a:hover { text-decoration: underline; }

small { width: 100%; padding: 20px; text-align: center; display: block; color: #ffffff; font-weight: 400; font-size: 70%; letter-spacing: 1px; }

#image-bar { height: 150px; color: #ffffff; font-size: 140%; font-weight: 400; padding: 50px 0 0 100px; margin: 20px 0 20px 0; letter-spacing: 5px; text-shadow: 0px 0px 3px #000; }
#image-bar span { font-size: 50%; display: block; letter-spacing: 0; margin-top: 5px; }
#breadcrumb { text-align: right; font-size: 75%; font-weight: 700; padding-right: 40px; color: #666666; }
#breadcrumb a { color: #ff0000; text-decoration: underline; }
#breadcrumb a:hover { text-decoration: none; }

#image-bar.about { background: url("../img/common-background-about.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.product { background: url("../img/common-background-product.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.development { background: url("../img/common-background-development.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.news { background: url("../img/common-background-news.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.topics { background: url("../img/common-background-topics.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.environmental { background: url("../img/common-background-environmental.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.privacy { background: url("../img/common-background-privacy.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.recruit { background: url("../img/common-background-recruit.jpg")no-repeat left bottom; background-size: cover; }
#image-bar.contact { background: url("../img/common-background-contact.jpg")no-repeat left bottom; background-size: cover; }

.menu {position: fixed; font-size: 65%; font-weight: 700; color: #00926b; z-index: 9999; top: 46px; right: 4px; cursor: pointer; width: 50px; height: 50px; }
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative; width: 50px; height:50px; cursor: pointer; }
	
/*ボタン内側*/
.openbtn span{ display: inline-block; transition: all .4s; position: absolute; right: 13px; height: 2px; background-color: #00926b; }
.openbtn span:nth-of-type(1) { top:22px; width: 50%; }
.openbtn span:nth-of-type(2) { top:29px; width:30%; }

/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) { top: 20px; left: 16px; transform: translateY(6px) rotate(-45deg); width: 35%; }
.openbtn.active span:nth-of-type(2) { top: 32px; left: 16px; transform: translateY(-6px) rotate(45deg); width: 35%; }

/*========= ナビゲーションのためのCSS ===============*/
#g-nav{ position:fixed; z-index: -1; opacity: 0; top:0; left: 0; width:100%; height: 100vh; background:#999; transition: all 0.3s; }

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive { opacity: 1; z-index:999; }

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list { position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; }

/*ナビゲーション*/
#g-nav ul { display: none; position: absolute; z-index: 999; top:50%; left:50%; transform: translate(-50%,-50%); width: 100%; max-max-width: none; padding: 5%; }
#g-nav.panelactive ul { display: block; }

/*リストのレイアウト設定*/
#g-nav li { list-style: none; text-align: center; }
#g-nav li a { color: #333; text-decoration: none; padding:10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; }

/*========= ボタンのためのCSS ===============*/
.openbtn { position:fixed; z-index: 9999; top:10px; right: 10px; cursor: pointer; width: 50px; height:50px; }

/*========= ボックスのためのCSS ===============*/
#g-nav-list ul li { display: block; letter-spacing: 2px; font-size: 100%; margin-bottom: 20px; vertical-align: top; text-align: center; }
#g-nav-list ul li a { color: #ffffff; text-decoration: none; }
#g-nav-list ul li a:hover { text-decoration: underline; }



#top-news { background-color: #FFFFFF; width: 100%; margin: 60px 0; padding: 60px; }
#top-news div.title { text-align: left; width: 20%; float: left; }
#top-news div.top-news-content { width: 80%; float: right; }
#top-news ul { display: block; border-top: solid 1px #d7d7d7; clear: both; letter-spacing: 2px; color: #333333; font-size: 95%; padding: 20px 0 40px 0; }
#top-news ul li { float: left; width: 20%; padding-bottom: 20px; }

#top-news ul li:last-child { width:70%; }

.questionnaire .q-end { color: #ccc; border: solid 1px #ccc; }
.q-end b { color: #ccc; }

.title-box { color: #ff0000; border: solid 1px #ff0000; margin: 20px; padding: 20px 10px 10px 10px; }
.title-box b { padding: 0; }

.box-2 img { width: 48%; margin: 0 1%; display: block; float: left; }
.box-2 { clear: both; overflow: hidden; }


.text-overlay {
  margin: 0; /* 見出しのマージンを消しておく */
  position: absolute; /* 絶対配置で画像の中央に配置 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #420b0b;
  font-weight: 800;
  font-size: 180%;
  
}

.title2 { border-top: 4px solid #cce9e1; border-bottom: 1px solid #cce9e1; text-align: center; padding: 20px 0 20px 20px; font-size: 150%; margin: 100px 0 40px; font-weight: bold; color: #00926b; }

p.text-b { color:#ff0000; font-weight: 700; font-size: 150%; text-align: right; margin-top: 20px; }

.title3 { border-bottom: 1px solid #cce9e1; text-align: left; padding: 20px 0 20px 20px; font-size: 130%; margin: 40px auto 40px; color: #00926b; font-weight: bold; width: 90%; }

.sponsors-right { display: block; text-align: right; font-weight: bold; font-size:115%; }

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#youtube {
  background-color: #FFFFFF;
  width: 100%;
  margin: 60px 0;
  padding: 60px;
}

#youtube .title2 { font-size: 120%; margin: 0px 0 40px; }

.effect-box-right { width: 90%; max-width:750px; display: block; margin: 0 auto; text-align: right; line-height: 180%; }

span.text-box-1 { font-size: 60%; font-weight: normal; color: #333; line-height: 180%; display: block; }

a.results-a { display: block; margin: 0 auto 60px; width: 80%; color: #fff; font-weight: bold; background-color: #058b00; text-decoration: none; border-radius: 15px; padding: 10px; }
a.results-a:hover { background-color: #2DC328; transition: 0.6s; }

a img { transition: opacity .5s; opacity: 1; }
a:hover img { transition: opacity .5s; opacity: 0.6; }

.results_btn { max-width: 50%; margin: 40px 20px 30px; float: left; position: relative; }
.results_btn2 { max-width: 50%; margin: 40px 20px 30px; float: right; position: relative; }
.results_btn img { width: 100%; }
.results_btn2 img { width: 100%; }




.joining-text { font-size: 100%; margin-bottom: 40px; }
.joining-link { text-align: right; margin-bottom: 40px; }


p.title4 { text-align: left; padding: 0 0 20px 20px; font-size: 100%; margin: 0 auto; width: 90%; }



#main-image-old2 { background-color: #fff; margin: 0 0 0; padding: 0; }
#main-image-old2 img { width: 100%; }
#main-image-old2 div.sec { padding: 20px; background-color: #fff; border-radius: 20px; margin: 0px auto 0; width: 90%; }
#main-image-old2 div.text-top { text-align: center; font-size:140%; font-weight: 700; }
#main-image-old2 div.text-top span { color: #05502B; font-weight: 900; }

.title5:first-child { margin-top: 30px; }
.title5 { border-top: 4px solid #cce9e1; border-bottom: 1px solid #cce9e1; text-align: center; padding: 20px 0 20px 20px; font-size: 180%; margin: 100px 0 40px; font-weight: bold; color: #00926b; }
.title5 span { display: block; font-size: 70%; font-weight: normal; }
p.related-text { text-align: left; color: #000; margin-top: 10px; }
p.related-text a { display: block; color: #00926b; text-align: right; }

p.toppage-text { text-align: center; color: #fff; font-size: 200%; font-weight: bold; }
p.toppage-text a { color: #FFEE33; }
p.toppage-text a:hover { color: #FFEE33; text-decoration: none; }
p.toppage-text a:visited { color: #FFEE33; }