@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

html, body {
 margin:0;
 padding: 0;
}
html {
  height: 100%;
  scroll-padding-top: 140px;
  scroll-behavior: smooth;
}
body {
  padding-top: 70px;
}
body * {
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6, h7 {
  color: #478CD0;
  font-family: 'Noto Sans JP', sans-serif;
}
h1 {
}
h2 {
  font-size: 45px;
  line-height: 1.6em;
}
h2 span {
  font-size: 30px;
}
h3 {
  font-size: 33px;
  line-height: 1.6em;
}
h4 {
  font-size: 22px;
  line-height: 1.6em;
}
p {
  font-size: 17px;
  color: #1E1E1E;
  line-height: 34px;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 0;
  text-align: justify;
  text-justify: inter-character;
}
b, strong {
  font-weight: bold;
}
b.name, strong.name {
  font-weight: bold;
  font-size: 20px;
}
a {
  color: #478CD0;
  text-decoration: none;
  line-height: 1.5;
}
a:hover {
  color: #478CD0;
  opacity: 0.6;
  text-decoration: none;
}
a img {
  border: none;
}
li {
  font-family: 'Noto Sans JP', sans-serif;
}
.onlyPC {
  display: block;
}
.onlyPC img {
  width: 100%;
  height: auto;
}
.onlyMobile {
  display: none;
}

/*-------------------- HEADER --------------------*/
header {
  width: 100%;
  height: 140px;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 999;
}
header #headerWrapper {
  background-color: #ffffff;
  height: 70px;
}
header #headerInner {
  width: 1100px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
header #logo,
header #link {
  height: 70px;
  position: relative;
}
header #logo a {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  display: block;
}
header #logo img {
  height: 26px;
  width: auto;
}
header #link {
  display: flex;
  justify-content: flex-end;
}
header #link #language,
header #link #corporate {
  display: flex;
  align-items: center;
  margin-right: 30px;
}
header #link #language a,
header #link #corporate a {
  font-weight: bold;
}
header #link #share img {
  height: 35px;
  width: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Safari用 */
  transform: translateY(-50%);
  margin: 0 5px;
}

header #headerOuter {
  width: 100%;
  min-width: 1100px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.8);
}
header #headerOuter ul {
  width: 1100px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
}
header #headerOuter ul li {
  list-style: none;
  color: #ffffff;
  margin: 0 10px 0 0;
  padding: 0 10px 0 20px;
}
header #headerOuter ul li:nth-of-type(n+2) {
  border-left: 1px solid #ffffff;
}
header #headerOuter ul li a{
  color: #ffffff;
}
#hamburger-menu {
  display: none;
}


header #topicPath {
  width: 100%;
  min-width: 1100px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  background-color: rgba(0,0,0,0.8);
}
header #topicPath ul {
  width: 1100px;
  height: 40px;
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 0 auto;
  padding: 0 50px;
}
header #topicPath ul li {
  list-style: none;
  color: #ffffff;
  margin: 0 5px 0 0;
  padding: 0 5px 0 0;
  font-size: 14px;
}
header #topicPath ul li:nth-of-type(n+2):before {
  content: "≫";
  margin-right: 10px;
}
header #topicPath ul li a{
  color: #ffffff;
}
/*-------------------- HEADER --------------------*/


/*-------------------- SECTION --------------------*/
section {
  min-width: 1100px;
  padding-top: 60px;
  padding-bottom: 60px;
}
section:nth-child(odd) {
  background-color: #F9FAF7;
}
section.white:nth-child(odd) {
  background-color: #ffffff;
}
section > div {
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 50px;
}
section.main {
  margin: 0;
  padding: 0;
  background-image: url(../images/mv_top_bg.jpg);
  background-size: cover;
  background-position: bottom;
  max-height: 689px
}
section.main.index {
  height: 540px
}
section.main > div {
  padding: 160px 0 130px;
  margin: 0 auto;
  line-height: 0;
  width: 600px;
}
section.main > div img {
  width: 100%;
  height: auto;
}
section.main.role {
  margin: 0;
  padding: 0;
  background-image: url(../images/mv_role_bg.jpg);
  background-size: cover;
  background-position: bottom;
  height: 300px
}
section.main.role.xgt {
  background-image: url(../images/mv_role_xgt_bg.jpg);
  background-position: left;
}
section.main.role.cell {
  background-image: url(../images/mv_role_cell_bg.jpg);
}
section.main.role.raman {
  background-image: url(../images/mv_role_raman_bg.jpg);
}
section.main.role > div {
  padding: 140px 0 0 0;
  margin: 0 auto;
  line-height: 0;
  width: 1000px;
}
section.main.role > div img {
  width: auto;
  max-width: 100%;
  height: auto;
}
section.main.interview {
  background: none;
  max-height: none;
  position: relative;
}
section.main.interview > div {
  padding: 0;
  margin: 0;
  line-height: 0;
  width: 100%;
}
section.main.interview > div img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
section.main.interview > div.interviewTitle {
  background-color: rgba(0,0,0,0.8);
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-45%);
  transform: translateY(-45%);
  right: 0;
  padding: 20px 0;
  width: 45%;
  height: auto;
}
section.main.interview > div.interviewTitle h2 {
  width: auto;
  margin: 0 0 0 20px;
  color: #ffffff;
  font-size: 28px;
}
section.main.interview > div.interviewTitle p {
  width: auto;
  margin: 0 0 0 20px;
  color: #ffffff;
  font-size: 14px;
}
section.leadTxt > div {
  width: 660px;
  padding-right: 0;
  padding-left: 0;
}
section.leadTxt > div p{
  font-size: 17px;
}
section.Q_and_A > div {
  border-bottom: 1px solid #E2E2E2;
  width: 1000px;
  padding: 50px 0px;
}
section.Q_and_A > div:nth-child(2) {
  padding-top: 0px;
}
section.Q_and_A > div:nth-child(1),
section.Q_and_A > div:last-child {
  border-bottom: none;
}
section.Q_and_A > div:nth-child(1) {
  padding-top: 1rem;
}
section.Q_and_A h3 {
  color: #1e1e1e;
  font-size: 26px;
}
section.Q_and_A h3 span {
  color: #162673;
  font-size: 30px;
}
section.Q_and_A h4 img {
  vertical-align: text-bottom;
}
section.history > div {
  border-left: 1px solid #cccccc;
}
section.main.spaceMv {
  margin: 0;
  padding: 0;
  background-image: url(../images/mv_space_bg.jpg);
  background-size: cover;
  background-position: bottom;
  height: 300px
}
section.main.spaceMv > div {
  padding: 140px 0 0 0;
  margin: 0 auto;
  line-height: 0;
  width: 1000px;
  text-align: right;
}
section.main.spaceMv > div img {
  width: auto;
  max-width: 100%;
  height: auto;
}
/*-------------------- SECTION --------------------*/

/*-------------------- OTHER --------------------*/
.reverse .boxText {
  order: 2;
}
.reverse .boxPhoto {
  order: 1;
}
#pageNate {
  padding-top: 0;
  padding-bottom: 0;
}
#pageNate ul {
  width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
}
#pageNate ul li {
  color: #bbbbbb;
  list-style: none;
  margin: 0 10px 0 0;
  padding: 0 10px 0 20px;
}
#pageNate ul li:nth-of-type(n+2) {
  border-left: 1px solid #666666;
}
#pageNate ul li b {
  color: #666666;
  font-weight: bold;
}
/*
.rightFloat img {
  margin: 0 0 20px 20px;
  float: right;
}
*/
.rightFloat .boxInner {
  display: block;
}
.rightFloat .boxInner .boxText {
  width: 100%;
}
.rightFloat .boxInner .boxPhoto {
  margin-left: 20px;
  width: 371px;
  float: right;
}
/*-------------------- OTHER --------------------*/

/*-------------------- BOX --------------------*/
.boxInner {
  display: flex;
  justify-content: space-between;
}
.boxText {
  width: 568px;
}
.boxPhoto {
  width: 371px;
}
.boxPhoto p {
  text-align: start;
  font-size: 14px;
  line-height: 20px;
}
.boxPhoto img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
}
/*-------------------- BOX --------------------*/

/*-------------------- LEAD --------------------*/
.lead {
  padding-top: 50px;
  padding-bottom: 0;
}
.lead .photo {
  width: 490px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
.lead .photo p {
  font-size: 14px;
  text-align: left;
  line-height: 1.6em;
}
.lead .photo img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
/*-------------------- LEAD --------------------*/

/*-------------------- What’s New --------------------*/
div.whasNew h3 {
  text-align: center;
}
div.whasNew ul {
  list-style: none;
  padding: 0;
  width: 830px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
div.whasNew ul li {
  list-style: none;
  font-size: 16px;
  border-bottom: 1px solid #E2E2E2;
  font-weight: bold;
  padding: 15px 0 15px 0;
  position: relative;
}
div.whasNew ul li a {
  color: #1e1e1e;
  position: relative;
  left: 120px;
}
div.whasNew ul li span{
  color: #478CD0;
  display: inline-block;
  position: absolute;
  left: 0;
}
div.whasNew ul li {
}
/*-------------------- What’s New --------------------*/

/*-------------------- PROJET --------------------*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #E2E2E2;
}
.tab-label {
  color: #1E1E1E;
  background: #ffffff;
  margin: 0;
  padding: 33px 12px;
  order: -1;
  border-bottom: 1px solid #E2E2E2;
  width: 33.333%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.tab-content {
  width: 100%;
  display: none;
  padding: 65px 85px;
}
.tab-text {
  width: 100%;
}
.tab-text p {
  font-size: 16px;
  line-height: 32px;
}
.tab-photo {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.tab-photo div {
  display: inline-block;
  text-align: left;
  width: auto;
  font-size: 14px;
  line-height: 1.6em;
}
.tab-photo img {
  max-width: 100%;
  height: auto;
  max-height: 250px;
  margin-bottom: 5px;
}
.tab-switch:checked+.tab-label {
    color: #ffffff;
    background: linear-gradient(to bottom right, #162673, #DB7A93);
  position: relative;
}
.tab-switch:checked+.tab-label:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #B1688C transparent transparent transparent;
  border-width: 10px 10px 0 10px;
}
.tab-switch:checked+.tab-label+.tab-content {
  display: block;
  background: #F9FAF7;
}
.tab-switch {
  display: none;
}
/*-------------------- PROJET --------------------*/

/*-------------------- PART --------------------*/
.part {
}
.part h2 {
  margin-bottom: 15px;
}
.partInner {
  display: flex;
  justify-content: space-between;
}
.partBox {
  width: 32%;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}
.partBox:hover {
  opacity: 0.6;
}
.partPhoto {
  background-color: #E7F1FA;
}
.partPhoto img {
  width: 100%;
  height: auto;
}
.partText {
  padding: 20px;
}
a .partText {
  color: #1e1e1e;
}
/*-------------------- PART --------------------*/

/*-------------------- INTERVIEW --------------------*/
section.position > div {
  padding: 1px 50px 1px 50px;
}
.interviewInner {
  display: flex;
  justify-content: space-between;
}
.interviewBox {
  width: 32%;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  background-color: #fff;
}
.interviewBox.comingsoon {
  background-color: #e2e2e2;
  display:flex;
  align-items: center;
}
.interviewBox.comingsoon img {
  width: 100%;
  height: auto;
}
.interviewBox:hover {
  opacity: 0.6;
}
.interviewBox.comingsoon:hover {
  opacity: 1;
}
.interviewPhoto {
  background-color: #E2E2E2;
}
.interviewPhoto img {
  width: 100%;
  height: auto;
}
.interviewHeading {
  color: #1e1e1e;
  font-size: 18px;
  padding: 20px;
  border-bottom: 1px solid #E2E2E2;
  background-color: #FFFFFF;
  font-weight: bold;
}
.interviewHeading span {
  color: #478CD0;
  font-size: 13px;
}
.interviewText {
  color: #1e1e1e;
  padding: 20px;
  font-size: 16px;
  line-height: 28px;
  background-color: #FFFFFF;
}
.interviewText span {
  font-size: 12px;
  line-height: 18px;
  display: block;
}
.interviewText span.noEnter {
  display: inline;
}
/*-------------------- INTERVIEW --------------------*/

/*-------------------- SPACE --------------------*/
.space img {
  width: 100%;
  height: auto;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  margin: 0;
  padding: 0;
}
.space div {
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
  line-height: 0;
}
.space p {
  margin-top: 20px;
}
/*-------------------- SPACE --------------------*/


/*-------------------- TOPICS --------------------*/
.topics h3 {
  color: #1E1E1E;
  font-size: 36px;
  margin-top: 0;
}
.topics p {
  font-size: 16px;
}
.topicsBox {
  position: relative;
  background-color: #E7F1FA;
  padding: 95px 65px 65px 65px;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}
.topicsNumber {
  position: absolute;
  border-bottom: 1px solid #1E1E1E;
  top: -75px;
  left: 0;
  transform: skewY(-45deg);
  width: 150px;
  height: 150px;
}
.topicsNumber div {
  font-size: 50px;
  color: #162673;
  position: absolute;
  top: 50px;
  left: 15px;
  transform: skewY(45deg);
}
.topicsInner {
  display: flex;
  justify-content: space-between;
}
.topicsText {
  width: 490px;
}
.topicsPhoto {
  width: 320px;
}
.topicsPhoto div {
  margin-bottom: 20px;
}
.topicsPhoto div p {
  text-align: start;
  font-size: 14px;
  line-height: 20px;
}
.topicsPhoto img {
  width: 100%;
  height: auto;
  margin-bottom: 3px;
}
/*-------------------- TOPICS --------------------*/


/*-------------------- MOBILE --------------------*/
@media (max-width:768px) {

html {
  scroll-padding-top: 70px;
}
h2 {
  font-size: 25px;
  line-height: 1.6em;
}
h2 span {
  display: block;
  font-size: 15px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 18px;
}
.onlyPC {
  display: none;
}
.onlyMobile {
  display: block;
}
.onlyMobile img {
  width: 100%;
  height: auto;
}
/*-------------------- MOBILE HEADER --------------------*/
header {
  height: 70px;
}
header #headerInner {
  width: 100%;
  padding: 0 70px 0 10px;
}
header.under #headerInner {
  padding: 0 0px 0 10px;
}
header #link #language,
header #link #corporate,
header #headerOuter {
  display: none;
}
header #link #share img {
  margin-left: 0px;
}
header #topicPath ul {
  padding: 0 10px;
}
/*-------------------- MOBILE HEADER --------------------*/
/*-------------------- MOBILE SECTION --------------------*/
section {
  min-width: auto;
  padding: 30px 10px 30px 10px;
}
section > div {
  width: 100%;
  padding: 30px 10px;
}
section.main {
  margin: 0;
  padding: 0;
  background-image: url(../images/mv_top_bg.jpg);
  background-size: cover;
  background-position: bottom;
  max-height: 689px
}
section.main.index {
  height: 380px
}
section.main > div {
  padding: 90px 40px 60px 40px;
  max-width: 600px;
  width: 100%;
}
section.main.role > div {
  padding: 140px 20px 0 20px;
  width: 100%;
}
section.main.role.xgt {
  background-position: -260px top;
}
section.main.interview > div {
  padding: 0;
  margin: 0;
  line-height: 0;
  width: 100%;
  max-width: 100%;
}
section.main.interview > div img {
  width: auto;
  max-width: 100%;
  height: auto;
}
section.leadTxt > div {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
section.leadTxt > div img {
  width: 100%;
  height: auto;
}
section.history > div {
  border-left: none;
}
section.Q_and_A h3,
section.Q_and_A h4 {
  font-size: 20px;
}
section.Q_and_A > div {
  width: 100%;
  padding: 30px 10px;
}
.reverse .boxText {
  order: 1;
}
.reverse .boxPhoto {
  order: 2;
}
#pageNate ul {
  width: 100%;
}
section.main.spaceMv {
  background-position: right;
}
section.main.spaceMv > div {
  padding: 140px 20px 0 20px;
  width: 100%;
}
.rightFloat .boxInner {
}
.rightFloat .boxInner .boxText {
  display: flex;
  flex-wrap: wrap;
}
.rightFloat .boxInner .boxPhoto {
  width: 100%;
  order: 100;
}
/*-------------------- MOBILE SECTION --------------------*/
/*-------------------- MOBILE BOX --------------------*/
.boxInner {
  display: flex;
  flex-wrap: wrap;
}
.boxText,
.boxPhoto {
  width: 100%;
}
.boxPhoto img {
  max-width: 100%;
  height: auto;
}

/*-------------------- MOBILE BOX --------------------*/
/*-------------------- MOBILE LEAD --------------------*/
.lead {
  padding-top: 0;
}
.lead .photo {
  width: 100%;
  height: auto;
}
/*-------------------- MOBILE LEAD --------------------*/
/*-------------------- MOBILE What’s New --------------------*/
div.whasNew ul {
  padding: 0 20px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
div.whasNew ul li span,
div.whasNew ul li a {
  display: block;
  position: relative;
  left:0 ;
}
/*-------------------- MOBILE What’s New --------------------*/
/*-------------------- MOBILE PROJET --------------------*/
.tab-label {
  order: 0;
  width: 100%;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  display: block;
  padding: 0px;
  transition-duration: 1s;
  transition-property: height;
  padding: 0 20px;
  background: #F9FAF7;
}
.tab-switch:checked+.tab-label+.tab-content {
  transition-duration: 1s;
  transition-property: height;
  height: 300px;
 overflow: auto;
  padding: 20px 20px;
}
.tab-photo {
  flex-wrap: wrap;
}
.tab-photo div {
  width: 60%;
  display: block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
.tab-photo img {
  max-height: 100%;
}
/*-------------------- MOBILE PROJET --------------------*/
/*-------------------- MOBILE PART --------------------*/
.partInner {
  flex-wrap: wrap;
}
.partBox {
  width: 100%;
  margin-bottom: 20px;
}
/*-------------------- MOBILE PART --------------------*/
/*-------------------- MOBILE INTERVIEW --------------------*/
.interviewInner {
  flex-wrap: wrap;
}
.interviewBox {
  width: 100%;
  margin-bottom: 20px;
}
/*-------------------- MOBILE INTERVIEW --------------------*/
/*-------------------- MOBILE TOPICS --------------------*/
.topics h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.topicsBox {
  padding: 65px 20px 20px 20px;
}
.topicsNumber {
  top: -35px;
  width: 75px;
  height: 75px;
}
.topicsNumber div {
  font-size: 25px;
  top: 25px;
  left: 10px;
}
.topicsInner {
  flex-wrap: wrap;
}
.topicsText,
.topicsPhoto {
  width: 100%;
}

.topicsPhoto div {
  margin-bottom: 10px;
}
/*-------------------- MOBILE TOPICS --------------------*/
/*-------------------- MOBILE HAMBURGER --------------------*/
#hamburger-menu {
  display: block;
}
.menu-btn {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    height: 70px;
    width: 70px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #478CD0;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color: #478CD0;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
  font-weight: bold;
}
.menu-content ul li.bold {
    border-bottom: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 10px;
    position: relative;
}
.menu-content ul li.black a {
    color:#478CD0;
    background-color:#ffffff;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
.menu-content ul li.black a::before {
    border-top: solid 2px #478CD0;
    border-right: solid 2px #478CD0;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #478CD0;
    transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

/*-------------------- MOBILE HAMBURGER --------------------*/
}
/*-------------------- MOBILE --------------------*/