html { font-size: 62.5%; } /* font-sizeは16pxの62.5%の10px */
body { font-size: 1.6rem; 
    line-height: 2;
    }
h1 { font-size: 5.6rem; } /* font-size: 56px と同等 */
h2 { font-size: 2.8rem; } /* font-size: 28px と同等 */

/* リセット */
body, h1, h2, h3, h4, h5, h6, ul, li, p {
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: #000;
}
ul {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}
.pb0{
  padding-bottom:0;
}
/* a:hover {
  opacity: 0.6;
} */

/* 全体のフォント関係 */
body {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

.mincho {
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/* メニュー関係 */
#menuList {
  /* height: 60px; */
  /* margin: 25px 0 30px 2%; */
  /* display: inline-block; */
  /* vertical-align: top; */
}

#menuList > li {
  /* height: 30px; */
  /* line-height: 30px; */
  display: inline-block;
  /* font-size: 16px; */
  color: #fff;
  padding-left: 2rem;
}

#menuList > li > a {
  color: #fff;
}
#menuList > li > a:hover{
opacity:0.6;
}

#menuBarContainer {
  width: 50px;
  height: 50px;
  padding-top: 13px;
  padding-bottom: 13px;
  box-sizing: border-box;
  float: right;
  position: relative;
  z-index: 3;
  display: none;
}

#menuBarContainer > span {
  width: 28px;
  height: 3px;
  margin: 7.5px auto 0 auto;
  background: #fff;
  border-radius: 3px;
  display: block;
}

#menuBarContainer > span:first-of-type {
  margin-top: 0;
}

#menuBarContainer.open > span:first-of-type {
  animation: open1 1s both;
}
#menuBarContainer.open > span:nth-of-type(2) {
  animation: open2 1s both;
}
#menuBarContainer.open > span:last-of-type {
  animation: open3 1s both;
}

#menuBarContainer.close > span:first-of-type {
  animation: close1 1s both;
}
#menuBarContainer.close > span:nth-of-type(2) {
  animation: close2 1s both;
}
#menuBarContainer.close > span:last-of-type {
  animation: close3 1s both;
}

@keyframes open1 {
  0% {transform: translateY(0px) rotate(0deg);}
  50% {transform: translateY(10.5px) rotate(0deg);}
  100% {transform: translateY(10.5px) rotate(45deg);}
}
@keyframes open2 {
  0% {opacity: 1;}
  50% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes open3 {
  0% {transform: translateY(0px) rotate(0deg);}
  50% {transform: translateY(-10.5px) rotate(0deg);}
  100% {transform: translateY(-10.5px) rotate(-45deg);}
}

@keyframes close1 {
  0% {transform: translateY(10px) rotate(45deg);}
  50% {transform: translateY(10px) rotate(0deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}
@keyframes close2 {
  0% {opacity: 0;}
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes close3 {
  0% {transform: translateY(-10px) rotate(-45deg);}
  50% {transform: translateY(-10px) rotate(0deg);}
  100% {transform: translateY(0px) rotate(0deg);}
}

#menuSp {
  top: 0;
  position: fixed;
  z-index: 2;
  visibility: hidden;
}

#menuSp.open {
  visibility: visible;
}

#mask {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  transition: 1s;
}
#menuSp.open > #mask {
  opacity: 0.5;
}

#menuSp > ul {
  padding-top: 40px;
  list-style: none;
  text-align: center;
  background: #D0121B;
  opacity: 0;
  transition: 1s;
}

#menuSp.open > ul {
  opacity: 1;
}

#menuSp > ul li {
  height: 70px;
  line-height: 70px;
  font-size: 18px;
  color: #fff;
  transform: translateX(20px);
  opacity: 0;
  transition: 1s 0.1s;
}
#menuSp > ul > li:last-of-type {
  padding-bottom: 30px;
}

#menuSp.open > ul li {
  transform: translateX(0);
  opacity: 1;
}





/* トップメニュー */
header {
  width: 100%;
}

#topMenuContainer {
  width: 100%;
  box-shadow: 0px 3px 10px 0px rgba(200, 200, 200, 0.5);
  z-index: 2;
  background: #2E3488;
  color: #fff;
}

#topMenubox{
  max-width:1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: auto;
}

h1 {
  display: inline-block;
}

h1 > a {
  display: block;
}

h1 > a > img {
  /* height: 55px; */
  /* margin: 27.5px 0; */
  /* vertical-align: bottom; */
}

#link {
  height: 110px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0;
}

#link > li {
  width: 104px;
  height: 110px;
  font-size: 13px;
  font-weight: bold;
  line-height: 110px;
  display: inline-block;
  text-align: center;
  transition: 0.3s;
}
#link > li:first-of-type {
  background: #000;
}
#link > li:first-of-type:hover {
  background: #fff;
}
#link > li:first-of-type:hover > a {
  color: #000;
}
#link > li:nth-of-type(2) {
  background: #008F59;
}
#link > li:last-of-type {
  background: #A7D8A9;
}
#link > li:nth-of-type(2):hover, #link > li:last-of-type:hover {
  background: #fff;
}
#link > li:nth-of-type(2):hover > a, #link > li:last-of-type:hover > a {
  color: #000;
}

#link > li > a {
  display: block;
  color: #fff;
  transition: 0.3s;
}


#voiceAco, #recAco {
  width: 100%;
  height: 170px;
  background: #008F59;
  position: absolute;
  top: -170px;
  overflow: hidden;
  transition: 0.3s;
  z-index: 1;
  opacity: 0.97;
}
/* #voiceAco {
  top: 110px;
} */
/* #recAco {
  top: 110px;
} */

#voiceAco > div, #recAco > div {
  width: 640px;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

#voiceAco > div > img, #recAco > div > img {
  width: 590px;
  position: absolute;
  top: -10px;
  left: 5px;
}

#voiceAco > ul, #recAco > ul {
  display: inline-block;
  vertical-align: top;
  margin-top: 15px;
}

#voiceAco > ul > li, #recAco > ul > li {
  line-height: 32px;
}

#voiceAco > ul > li > a, #recAco > ul > li > a {
  font-size: 14px;
  color: #fff;
}


#headerMain {
  width: 90%;
  max-width: 1200px;
  /* height: 1090px; */
  margin: -110px auto 110px;
  position: relative;
}

#headerMain > img {
  width: 90%;
  margin-left: 10%;
}

#headerMain > p {
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translateY(-50%);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 13px;
  color: #008F59;
  letter-spacing: 2px;
}

#headerMain > h2 {
  position: absolute;
  top: 22%;
  left: 20%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 77px;
}







/* 進もう */
#move {
  width: 100%;
  /* height: 530px; */
  position: relative;
  overflow: hidden;
}

#move > img {
  width: 100%;
  position: relative;
  /* position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  z-index: -1;
  vertical-align: bottom;
}

#move > h2 {
  position: absolute;
  top: 25%;
  left: 8%;
  font-size: 3vw;
  letter-spacing: 0.03em;
  /* display: inline-block;
  vertical-align: top; */
  /* margin: 8% 0 0 7%; */
}

#move > h2 span {
  border-bottom: 4px solid #008F59;
}

#move > p {
  position: absolute;
  top: 20%;
  right: 10%;
  font-size: 1vw;
  line-height: 2.2em;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}





/* ニュース */
#blueContainer {
  width: 100%;
  background: #F0F0F5;
  overflow: hidden;
  position: relative;
  padding-bottom: 110px;
}

#newsWorks {
  width: calc(100% - 80px);
  margin-left: 80px;
  float: right;
  background: #fff;
  padding-bottom: 100px;
}

#news {
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 110px;
}

.clearfix::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  display: block;
}

#newsTitle {
  display: inline-block;
  vertical-align: top;
}

#newsTitle > h2 {
  font-size: 50px;
  color: #008F59;
}

#newsTitle > p {
  font-size: 20px;
}

#newsContents {
  width: calc(95% - 150px);
  margin-left: 5%;
  margin-bottom: 30px;
  display: inline-block;
  vertical-align: top;
}

#newsContents > div {
  margin-top: 12px;
  margin-bottom: 20px;
}

#newsContents > div > p:first-of-type {
  width: 100px;
  padding: 1px;
  /* margin-top: 3px; */
  display: inline-block;
  vertical-align: top;
  text-align: center;
  color: #008F59;
  border: 1px solid #008F59;
}

#newsContents > div > p:last-of-type {
  width: calc(95% - 105px);
  margin-left: 5%;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
}

.more {
  width: 280px;
  height: 60px;
  line-height: 60px;
  border: 2px solid #008F59;
  box-sizing: border-box;
  text-align: center;
  background: #008F59;
  position: relative;
  overflow: hidden;
}
.more::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  background: #fff;
  transition: 0.3s;
}
.more:hover::before {
  left: 0;
}
#news > .more {
  float: right;
}

.more > a {
  display: block;
  color: #fff;
  padding-left: 30px;
  font-size: 20px;
  letter-spacing: 5px;
  position: relative;
  z-index: 1;
}
.more:hover > a {
  color: #008F59;
}

.arrow {
  margin-left: 15px;
  font-size: 18px;
  vertical-align: top;
}



/* たましんの取り組み */
#ini {
  width: 90%;
  max-width: 1200px;
  margin: 150px auto 0 auto;
  clear: both;
}

#iniImg {
  width: 69%;
  height: 500px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
}
#iniImg > img {
  width: 816px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* object-fit: cover; */
}

#iniTitleContainer {
  width: 31%;
  height: 500px;
  display: inline-block;
  position: relative;
}

#iniTitle {
  margin-left: 30%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#iniTitle > h2 {
  font-size: 30px;
  letter-spacing: 3px;
  position: relative;
  margin-left: 30px;
  display: inline-block;
}
#iniTitle > h2::before {
  content: "";
  display: block;
  width: 5px;
  height: 100%;
  background: #008F59;
  position: absolute;
  top: 0;
  left: -2px;
}

#iniTitle > p {
  margin-top: 30px;
  line-height: 40px;
}

#iniTitleContainer > .more {
  position: absolute;
  bottom: 0;
  right: 0;
}



#intro {
  width: 96%;
  max-width: 1200px;
  margin: 100px auto 0 auto;
}

#introTitle {
  margin-left: 15%;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

#introTitle > h2 {
  font-size: 30px;
  letter-spacing: 3px;
  position: relative;
  margin-left: 30px;
  display: inline-block;
}
#introTitle > h2::before {
  content: "";
  display: block;
  width: 5px;
  height: 100%;
  background: #008F59;
  position: absolute;
  top: 0;
  left: -2px;
}

#introTitle > p {
  margin-top: 30px;
  line-height: 40px;
}

#introTitleContainer > .more {
  position: absolute;
  bottom: 0;
  left: 10%;
}

#introImg {
  width: 68%;
  height: 500px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  float: right;
}
#introImg > img {
  width: 816px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#introTitleContainer {
  width: 30%;
  height: 500px;
  display: inline-block;
  position: relative;
}



/* インタビュー */
#intvContainer {
  width: 100%;
  overflow: hidden;
}

#intvTitle {
  width: 100%;
  text-align: center;
  margin: 90px 0 50px;
}

#intvTitle > h2 {
  font-size: 50px;
  color: #008F59;
}

#intvTitle > p {
  font-size: 20px;
}

#container {
  /* margin-left: 500px; */
}

.slickContainer {
  /* margin-left: 200px; */
}

.interview {
  width: 40%;
  margin: 0 30px;
}

.interview > img {
  width: 100%;
}



#etcContainer {
  width: 90%;
  max-width: 1200px;
  margin: 150px auto 0;
  text-align: center;
}

.etc {
  width: 31%;
  display: inline-block;
  margin: 0 0.7%;
}

.etc > img {
  width: 100%;
  vertical-align: bottom;
}

.etc > .etcButton {
  width: 90%;
  max-width: 320px;
  height: 84px;
  margin: -24px auto 0;
  line-height: 84px;
  font-size: 20px;
  background: #008F59;
  border: 2px solid #008F59;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.etcButton::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  background: #fff;
  transition: 0.3s;
}
.etcButton:hover::before {
  left: 0;
}

.etcButton > a {
  color: #fff;
  display: block;
  padding-left: 20px;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}
.etcButton:hover > a {
  color: #008F59;
}





/* 採用情報 */
#recruitContainer {
  width: 90%;
  max-width: 1200px;
  margin: 120px auto 160px;
  padding: 50px 1%;
  border-top: 1px solid #DBDCDC;
  border-bottom: 1px solid #DBDCDC;
  overflow: hidden;
}

#recruitTitle {
  display: inline-block;
  vertical-align: top;
  margin-top: -6px;
}

#recruitTitle > h2 {
  font-size: 50px;
  color: #008F59;
}

#recruitTitle > p {
  font-size: 20px;
  margin-bottom: 20px;
}

#recruit {
  float: right;
}

.recruitButton {
  width: 450px;
  height: 45px;
  margin: 10px auto;
  line-height: 45px;
  border: 2px solid #008F59;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.recruitButton::before {
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  background: #008F59;
  transition: 0.3s;
}
.recruitButton:hover::before {
  left: 0;
}

.recruitButton > a {
  display: block;
  color: #008F59;
  padding-left: 30px;
  font-size: 20px;
  letter-spacing: 5px;
  position: relative;
  z-index: 1;
}
.recruitButton:hover > a {
  color: #fff;
}










/* フッター */

footer {
  width: 100%;
  /* background: #F0F0F5; */
  /* padding-top: 10rem; */
}

footer a:hover {
  opacity: 0.6;
}

#footerMenuContainer {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  /* position: relative; */
  /* padding-top: 10rem; */
  border-top: 2rem #2E3488 solid;
}

#footerLogo {
  /* float: left; */
  margin-top: 5rem;
  margin-bottom: 5rem;
}

#footerLogo > img {
  /* width: 270px; */
}

#footerMenu {
  padding: 50px 0 20px;
}

#footerMenu > ul {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  margin-right: 5%;
}

#footerMenu > ul > li {
  line-height: 20px;
  margin: 5px auto;
}

#footerMenu > ul > li > a {
  display: block;
  font-size: 14px;
  color: #008F59;
}

.linkMin > li:first-child {
  font-size: 14px;
  color: #008F59;
}

#footerMenu > .linkMin > li > a {
  font-size: 12px;
  color: #000;
}

#footerLink {
  text-align: right;
  margin-bottom: 40px;
}

#footerLink li {
  display: inline-block;
}

#footerLink a {
  font-size: 13px;
  color: #008F59;
  font-weight: bold;
  text-decoration: underline;
  margin-left: 30px;
}


#copy {
  width: 100%;
  /* height: 43px; */
  font-size: 2rem;
  text-align: center;
  background: #2E3488;
  padding-bottom: 5rem;
}

small {
  color: #fff;
  /* line-height: 43px; */
  /* font-size: 10px; */
}