@charset "UTF-8";
/*
Theme Name:  西日本がん研究機構(WJOG) Webサイト
Description: 
Version: 1.0
Author: KARTEPOST
Author URI: https://www.kartepost.com/
*/
@font-face {
  font-family: "fontEn";
  src: url(libs/img/Marcellus-Regular.ttf) format("truetype");
}
/* 読み込みfont
Heebo
font-family: heebo, sans-serif;
font-weight:100 //Thin
font-weight:400 //Regular
font-weght:700 //Bold
*/
/*** Main ***/
html {
  margin: 0;
  padding: 0;
}

body {
  color: #3C3C3C;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 2;
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
}
body.noscroll {
  overflow: hidden;
}
body.search, body.data {
  background-color: #fff;
}

_:lang(x)::-ms-backdrop, .selector {
  font-family: "Segoe UI", Meiryo, sans-serif;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
}

.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
@media screen and (max-width: 959px) {
  .contents {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
}

@media screen and (min-width: 960px), print {
  .pc {
    display: block;
  }
}
@media screen and (max-width: 959px) {
  .pc {
    display: none;
  }
}
@media screen and (max-width: 559px), print {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 960px), print {
  .tablet {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .tablet {
    display: block;
  }
}
@media screen and (max-width: 559px), print {
  .tablet {
    display: block;
  }
}

@media screen and (min-width: 960px), print {
  .sm {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .sm {
    display: none;
  }
}
@media screen and (max-width: 559px), print {
  .sm {
    display: block;
  }
}

@media screen and (min-width: 960px), print {
  .pc-tab {
    display: block;
  }
}
@media screen and (max-width: 959px) {
  .pc-tab {
    display: block;
  }
}
@media screen and (max-width: 559px), print {
  .pc-tab {
    display: none;
  }
}

@media screen and (min-width: 960px), print {
  .sm-tab {
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .sm-tab {
    display: block;
  }
}
@media screen and (max-width: 559px), print {
  .sm-tab {
    display: block;
  }
}

/*** 汎用 ***/
main {
  padding-top: 120px;
}
@media screen and (max-width: 1085px) {
  main {
    padding-top: 60px;
  }
}

.marginTop {
  margin-top: 50px;
}
.marginTop.more {
  margin-top: 80px;
}

.btnMore {
  margin: 1rem auto;
  width: auto;
  display: inline-block;
}
.btnMore a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 340px;
  height: 72px;
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
  color: #003996;
  background-color: #fff;
  border-radius: 50px;
  line-height: 1;
  box-sizing: border-box;
  outline: none;
  position: relative;
  transition: ease-out all 0.5s;
}
.btnMore a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  left: inherit;
  transform: translateY(-50%);
  background-image: url(libs/img/icon_arrow_b.svg);
  background-repeat: no-repeat;
  width: 15px;
  height: 14px;
  transition: ease-out all 0.3s;
  z-index: 2;
}
.btnMore a:hover {
  opacity: 1;
  background-color: #003996;
  color: #fff;
  transition: all 0.5s;
}
.btnMore a:hover:after {
  background-image: url(libs/img/icon_arrow_w.svg);
  right: 1rem;
}
@media screen and (max-width: 959px) {
  .btnMore a {
    min-width: 200px;
  }
}

.flexBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.flexBox .txt {
  width: calc(100% - 340px);
  margin: 0;
}
.flexBox .img {
  width: 300px;
  margin-right: 40px;
}
.flexBox .img img {
  width: 100%;
}
.flexBox .img.left {
  margin-left: 0;
  margin-right: 40px;
}
@media screen and (max-width: 959px) {
  .flexBox {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .flexBox .txt {
    width: 100%;
  }
  .flexBox .img {
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }
}

.dotList {
  margin: 10px 0 30px;
}
.dotList a:hover {
  opacity: 0.5;
  transition: opacity 0.5s;
}
.dotList li {
  position: relative;
  padding-left: 1em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  margin-bottom: 10px;
}
.dotList li:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: #3C3C3C;
  border-radius: 50%;
}

/*** Header ***/
header {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
}
header .headerInner {
  display: block;
  position: fixed;
  z-index: 6;
  top: 0;
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 20px;
  background-color: #fff;
  transition: 0.5s;
  padding-left: 40px;
  padding-right: 40px;
}
header .headerInner .headerRight {
  white-space: nowrap;
}
header .headerInner .headerRight .member {
  display: none;
}
header .headerInner .logo {
  position: relative;
  max-width: 280px;
}
header .headerInner a {
  text-decoration: none;
}
header .headerInner a:hover {
  opacity: 1;
  color: #B10800;
}
header .mainNaven {
  box-sizing: border-box;
}
header .mainNaven ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 30px;
  font-size: clamp(0.875rem, 0.5264962594rem + 0.9975062344vw, 1.125rem);
}
header .mainNaven ul li {
  padding-left: 2rem;
  position: relative;
}
header .mainNaven ul li::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #003996;
}
header .mainNaven ul li:hover {
  cursor: pointer;
}
header .mainNaven ul li:hover:after {
  border-top: 6px solid #003996;
}
header .mainNaven ul li:hover a:hover {
  color: #003996;
}
header .slideMenu {
  position: fixed;
  z-index: 5;
  top: 0px;
  left: 0;
  color: #fff;
  background: rgb(237, 237, 237);
  background-color: #fff;
  width: 100%;
  display: none;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}
header .slideMenu.active {
  display: block;
  opacity: 100;
}
header .btnen {
  display: none;
}
@media screen and (max-width: 1085px) {
  header {
    position: relative;
    height: 60px;
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 20;
  }
  header .btnen {
    display: block;
  }
  header .headerInner {
    height: 60px;
    padding: 0;
  }
  header .headerInner .headerRight {
    height: 60px;
    padding: 0;
  }
  header .headerInner .logo {
    margin-left: 1rem;
    max-width: 160px;
    height: auto;
  }
  header .mainNaven {
    display: none;
  }
  header .slideMenu {
    width: 100%;
    height: 100vh;
    margin-top: 60px;
    padding-bottom: 100px;
    border-top: 1px solid #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  header .slideMenu ul.slideMain {
    padding: 1rem 1rem;
  }
  header .slideMenu ul.slideMain li {
    cursor: pointer;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #D9D9D9;
  }
  header .slideMenu ul.slideMain li:first-child {
    border-top: 1px solid #D9D9D9;
  }
  header .slideMenu ul.slideMain li a {
    text-decoration: none;
    color: #3C3C3C;
    width: 100%;
    display: block;
    position: relative;
    padding: 1rem;
  }
  header .slideMenu ul.slideMain li a::after {
    content: "";
    display: inline-block;
    position: relative;
    margin-left: 1rem;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #003996;
  }
  header .btnen,
  header .btnen span {
    transition: all 0.4s;
    box-sizing: border-box;
  }
  header .btnen {
    position: fixed;
    top: 10px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 6;
    background-color: #003996;
    border-radius: 50%;
  }
  header .btnen span {
    position: absolute;
    right: 8px;
    margin: auto;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background-color: #fff;
    z-index: 10;
  }
  header .btnen span:nth-of-type(1) {
    top: 35%;
  }
  header .btnen span:nth-of-type(2) {
    top: 60%;
  }
  header .btnen.on span:nth-of-type(1) {
    top: 50%;
    transform: rotate(45deg);
  }
  header .btnen.on span:nth-of-type(2) {
    top: 50%;
    transform: rotate(-45deg);
  }
}

/*** Footer ***/
footer {
  background-color: #003996;
  padding-top: 50px;
  padding-bottom: 50px;
  box-sizing: border-box;
  color: #fff;
}
footer .enBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
footer .enBox .logo {
  margin-bottom: 30px;
}
@media screen and (max-width: 559px), print {
  footer .enBox .logo {
    max-width: 60%;
  }
}

/*** Front-page ***/
.index h2 {
  font-size: clamp(2rem, 0.6059850374rem + 3.9900249377vw, 3rem);
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 3rem;
}
.index h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  background: linear-gradient(to right, #B10800 50%, #003996 50%);
}

.topMainimg {
  width: 100%;
  height: 0;
  padding-top: 32.7%;
  position: relative;
  background: url(libs/img/top_mainimg.png) no-repeat;
  background-position: center center;
  background-size: cover;
  margin-bottom: 50px;
}
.topMainimg h1 {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-60%);
  width: 100%;
  padding: 0 1em;
  box-sizing: border-box;
  line-height: 1.8;
  color: #fff;
  font-size: clamp(1.25rem, -0.8410224439rem + 5.9850374065vw, 2.75rem);
  text-align: center;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 959px) {
  .topMainimg {
    padding-top: 44.2%;
    background: url(libs/img/top_mainimg.png) no-repeat;
    background-size: cover;
  }
  .topMainimg h1 {
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 559px), print {
  .topMainimg h1 {
    line-height: 1.5;
    text-align: left;
  }
}

.enMessage h2 {
  text-align: left;
  border-bottom: 1px solid #D9D9D9;
}
.enMessage h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  transform: inherit;
  left: 0;
  background: #003996;
  width: 160px;
  height: 1px;
}
.enMessage p {
  margin-bottom: 1.5rem;
}
.enMessage .flexBox {
  margin-top: 2rem;
}
.enMessage .flexBox .img img {
  border-radius: 20px;
  width: auto;
}
.enMessage .flexBox .txt em {
  display: block;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.125rem, 0.9507481297rem + 0.4987531172vw, 1.25rem);
}

.enAbout {
  background-color: #F2F3F5;
  margin-top: 80px;
}
.enAbout .contents {
  padding-top: 80px;
  padding-bottom: 80px;
}
.enAbout h2 {
  margin-bottom: 3rem;
}
.enAbout h3 {
  font-size: clamp(1.375rem, 0.5037406484rem + 2.493765586vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.enAbout h4 {
  font-size: clamp(1.125rem, 0.602244389rem + 1.4962593516vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.enAbout h4.sm {
  display: none;
}
.enAbout .iconlist {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 0 20px;
  flex-wrap: wrap;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.enAbout .iconlist li {
  position: relative;
  width: calc(25% - 20px);
  background-color: #fff;
  padding: 1em 2em;
  box-sizing: border-box;
  border-radius: 0 15px 0 15px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 0.6514962594rem + 0.9975062344vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}
.enAbout .iconlist li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 32px 32px 0 0;
  border-color: #003996 transparent transparent transparent;
}
.enAbout .iconlist li .img {
  margin-bottom: 1rem;
  height: 120px;
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.enAbout .iconlist li .img img {
  width: auto;
}
.enAbout .bgWhite {
  background-color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
}
.enAbout .bgWhite .innerBox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.enAbout .bgWhite .innerBox.title {
  margin-top: 3rem;
  color: #003996;
  font-size: clamp(1.25rem, 0.9014962594rem + 0.9975062344vw, 1.5rem);
}
.enAbout .bgWhite .innerBox.title:first-child {
  margin-top: 0;
}
.enAbout .bgWhite .innerBox.title li {
  white-space: nowrap;
}
.enAbout .bgWhite .innerBox li {
  width: calc(25% - 15px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.enAbout .bgWhite dl dt {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: clamp(1.125rem, 0.9507481297rem + 0.4987531172vw, 1.25rem);
  line-height: 1.3;
}
.enAbout .bgWhite dl dd {
  color: #A0A0A0;
}
.enAbout .bgWhite dl dd h4.sm {
  display: none;
  line-height: 1.3;
  color: #003996;
  font-size: clamp(1.25rem, 0.9014962594rem + 0.9975062344vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 959px) {
  .enAbout {
    margin-top: 40px;
  }
  .enAbout .contents {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .enAbout .iconlist {
    flex-wrap: wrap;
    gap: 10px 10px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .enAbout .iconlist li {
    width: calc(50% - 5px);
    height: 180px;
  }
}
@media screen and (max-width: 559px), print {
  .enAbout .contents {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .enAbout h4.sm {
    display: block;
  }
  .enAbout .iconlist {
    flex-direction: column;
    gap: 10px 0;
  }
  .enAbout .iconlist li {
    width: 100%;
    height: inherit;
    flex-direction: row;
  }
  .enAbout .iconlist li .img {
    width: 80px;
    height: inherit;
    margin-bottom: 0;
    margin-right: 1rem;
  }
  .enAbout .bgWhite .innerBox {
    gap: 10px 0;
  }
  .enAbout .bgWhite .innerBox.title {
    display: none;
  }
  .enAbout .bgWhite .innerBox li {
    width: 100%;
  }
  .enAbout .bgWhite .innerBox ~ .innerBox {
    margin-top: 1.5rem;
  }
  .enAbout .bgWhite dl {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    margin-bottom: 0;
  }
  .enAbout .bgWhite dl dd h4.sm {
    display: block;
  }
}

.enCapability {
  background-color: #F2F3F5;
  background-image: url(libs/img/top_about_bg.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  padding: 80px 0;
  color: #fff;
}
.enCapability h2 {
  text-align: left;
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 0.0074812968rem + 4.9875311721vw, 3rem);
}
.enCapability h2::after {
  left: 0;
  transform: inherit;
  background: #fff;
}
.enCapability .comment {
  padding-right: 2rem;
}
.enCapability .circle {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 2em 0;
}
.enCapability .circle li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 210px;
  height: 210px;
  padding: 1em;
  border: 1px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
  color: #fff;
  line-height: 1.3;
}
.enCapability .circle li em {
  display: block;
  font-style: normal;
  font-size: clamp(2.5rem, 1.1059850374rem + 3.9900249377vw, 3.5rem);
  font-weight: 200;
  line-height: 1;
  padding-top: 10px;
}
.enCapability .circle li em span {
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
  font-weight: 400;
}
.enCapability .circle li em.txts {
  font-size: clamp(1.25rem, -1.8865336658rem + 8.9775561097vw, 3.5rem);
}
.enCapability .circle li em.txts span {
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
  padding-right: 5px;
}
.enCapability .circle.flex li {
  display: grid;
  grid-template-rows: 40% 60%;
  justify-items: center;
}
.enCapability .circle.flex li span {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.enCapability .circle.flex li em {
  font-size: clamp(2.5rem, -0.1137780549rem + 7.4812967581vw, 4.375rem);
  align-self: start;
  padding-top: 0;
}
.enCapability .circle.flex li em.txts {
  font-size: clamp(2.1875rem, 0.3578553616rem + 5.2369077307vw, 3.5rem);
}
.enCapability .txts {
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
  text-align: right;
}
@media screen and (max-width: 650px) {
  .enCapability {
    padding: 30px 0;
    background-image: url(libs/img/top_about_bg_sm2.svg);
    background-position: top right;
    background-size: cover;
  }
  .enCapability .comment {
    padding-right: 3rem;
  }
  .enCapability .circle li {
    width: 160px;
    height: 160px;
    margin-bottom: 1rem;
  }
  .enCapability .circle li:nth-child(1) {
    margin-right: 5px;
  }
  .enCapability .circle li:nth-child(2) {
    margin-left: 5px;
  }
  .enCapability .circle.flex li {
    grid-template-rows: 50% 50%;
  }
}

.enTrials {
  margin: 80px auto;
}
.enTrials a {
  text-decoration: underline;
  color: #003996;
}
.enTrials strong {
  font-size: clamp(1rem, 0.6514962594rem + 0.9975062344vw, 1.25rem);
}
.enTrials .txtCenter {
  text-align: center;
}
.enTrials table {
  width: 1120px;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.enTrials table th, .enTrials table td {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.enTrials table th {
  background-color: #EEEFF2;
  border-bottom: 3px solid #ccc;
}
.enTrials table tr:nth-child(odd) td {
  background-color: #FAFAFB;
}
.enTrials table td:nth-child(1) {
  width: 10%;
}
.enTrials table td:nth-child(2) {
  width: 13%;
}
.enTrials table td:nth-child(3) {
  width: 10%;
}
.enTrials table td:nth-child(4) {
  text-align: left;
}
.enTrials table td:nth-child(5) {
  width: 18%;
}
@media screen and (max-width: 959px) {
  .enTrials {
    margin: 30px auto;
  }
  .enTrials p {
    width: 100%;
    margin-bottom: 1rem;
    line-height: 1.4;
  }
  .enTrials table {
    margin-top: 0;
  }
}

.enPublication {
  width: 100%;
  height: auto;
  position: relative;
  background: url(libs/img/en_publication_bg.png) no-repeat;
  background-position: center center;
  background-size: cover;
}
.enPublication .contents {
  padding-top: 80px;
  padding-bottom: 60px;
  color: #fff;
  text-align: center;
}
.enPublication h2 {
  color: #fff;
}
.enPublication h2::after {
  background: #fff;
}
.enPublication p {
  font-size: clamp(1rem, 0.6514962594rem + 0.9975062344vw, 1.25rem);
}
.enPublication .btnMore {
  margin-top: 2rem;
}
.enCollaborate {
  background-color: #EEEFF2;
}
.enCollaborate .txtCenter {
  text-align: center;
  line-height: 1.5;
}
.enCollaborate .contents {
  padding-top: 80px;
  padding-bottom: 60px;
}
.enCollaborate .contents h2 {
  margin-bottom: 1rem;
}
.enCollaborate .contents h3 {
  font-weight: 700;
  text-align: center;
  font-size: clamp(1rem, 0.6514962594rem + 0.9975062344vw, 1.25rem);
  margin-bottom: 3rem;
}
.enCollaborate .contents h4 {
  font-size: clamp(0.875rem, 0.5264962594rem + 0.9975062344vw, 1.125rem);
  margin-bottom: 1rem;
  font-weight: 500;
}
.enCollaborate .contents em {
  font-style: normal;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.enCollaborate .contents a {
  text-decoration: underline;
  color: #003996;
}
.enCollaborate .contents ol {
  display: grid;
  grid-template-columns: repeat(5, 185px);
  grid-template-rows: auto auto auto auto;
  gap: 0 40px;
  justify-content: center;
  counter-reset: step;
  list-style: none;
  margin-bottom: 3rem;
  line-height: 1.3;
}
.enCollaborate .contents ol li {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  text-align: center;
  font-size: clamp(0.875rem, 0.7007481297rem + 0.4987531172vw, 1rem);
}
.enCollaborate .contents ol li .circlebox {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 185px;
  height: 185px;
  background-color: #fff;
  border-radius: 50%;
  counter-increment: step;
}
.enCollaborate .contents ol li .circlebox img {
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
}
.enCollaborate .contents ol li .circlebox::before {
  content: "0" counter(step);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 48px;
  height: 48px;
  background-color: #003996;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: clamp(1.25rem, 0.9014962594rem + 0.9975062344vw, 1.5rem);
  font-weight: 700;
}
.enCollaborate .contents ol li + li .circlebox::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  color: #003996;
  font-size: 24px;
}
@media screen and (max-width: 1100px) {
  .enCollaborate .contents {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .enCollaborate .contents ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 40px;
  }
  .enCollaborate .contents ol li {
    flex: 1 1 185px;
    max-width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .enCollaborate .contents ol li .circlebox::before {
    left: calc((100% - 185px) / 2);
  }
  .enCollaborate .contents ol li + li .circlebox {
    position: static;
  }
  .enCollaborate .contents ol li + li .circlebox::after {
    top: 92.5px;
    left: -20px;
    transform: translateX(-50%) translateY(-50%);
  }
}
@media screen and (max-width: 1100px) and (min-width: 880px) {
  .enCollaborate .contents ol li:nth-child(5) .circlebox::after {
    content: none;
  }
}
@media screen and (max-width: 879px) and (min-width: 655px) {
  .enCollaborate .contents ol li:nth-child(4) .circlebox::after {
    content: none;
  }
}
@media screen and (max-width: 654px) and (min-width: 430px) {
  .enCollaborate .contents ol li:nth-child(2n+3) .circlebox::after {
    content: none;
  }
}
@media screen and (max-width: 429px) {
  .enCollaborate .contents ol li {
    margin-bottom: 1rem;
    max-width: inherit;
    width: 100%;
  }
  .enCollaborate .contents ol li + li .circlebox::after {
    content: "▼";
    left: 50%;
    top: -2.5rem;
    transform: translateX(-50%);
  }
  .enCollaborate .txtCenter {
    text-align: left;
  }
}

.enContact {
  width: 100%;
  height: auto;
  position: relative;
  background: url(libs/img/en_contact_bg.png) no-repeat;
  background-position: center center;
  background-size: cover;
}
.enContact .contents {
  padding-top: 80px;
  padding-bottom: 60px;
  color: #fff;
  text-align: center;
}
.enContact h2 {
  margin-bottom: 3rem;
  color: #fff;
}
.enContact h2::after {
  background: #fff;
}
.enContact .btnMore {
  margin-top: 2rem;
}
@media screen and (max-width: 959px) {
  .enContact .contents {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.enAccess {
  margin-top: 100px;
  text-align: center;
}
.enAccess p {
  display: flex;
  justify-content: center;
}
.enAccess .googlemap {
  margin-top: 2rem;
  width: 100%;
  height: 500px;
}
.enAccess .googlemap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media screen and (max-width: 559px), print {
  .enAccess .googlemap {
    height: 300px;
  }
}
@media screen and (max-width: 959px) {
  .enAccess {
    margin-top: 30px;
  }
}

.wpcf7-spinner {
  display: none;
}

.contactForm {
  background-color: #fff;
  border-radius: 15px;
  padding: 4rem;
  color: #3C3C3C;
}
.contactForm p {
  margin: 0;
}
.contactForm dl {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
  padding-bottom: 1rem;
  border-bottom: 1px solid #C1C5CC;
  color: #3C3C3C;
}
.contactForm dt {
  line-height: 1;
  width: 20%;
  text-align: left;
}
.contactForm dt .must {
  background-color: #B10800;
  font-size: clamp(0.625rem, 0.5378740648rem + 0.2493765586vw, 0.6875rem);
  line-height: 1;
  padding: 3px 5px;
  margin-left: 10px;
  color: #fff;
}
.contactForm dd {
  width: 80%;
}
.contactForm dd .text {
  background-color: #EEEFF2;
  border-bottom: 3px solid #D9D9D9;
  padding: 0.3em 0.5em;
  width: 100%;
  box-sizing: border-box;
}
.contactForm dd textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: #EEEFF2;
  border-bottom: 3px solid #D9D9D9;
  padding: 0.3em 0.5em;
}
.contactForm dd textarea[name=remarks] {
  height: 150px !important;
}
.contactForm .submitBlock {
  margin-top: 2rem;
}
.contactForm .submitBlock .contactBtn {
  margin-top: 1rem;
  position: relative;
  display: inline-block;
  min-width: 300px;
  background-color: #003996;
  border-radius: 50px;
  padding: 1em 3em 1em 1.5em;
  transition: ease-out all 0.5s;
}
.contactForm .submitBlock .contactBtn input {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: center;
}
.contactForm .submitBlock .contactBtn:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  left: inherit;
  transform: translateY(-50%);
  background-color: #003996;
  background-image: url(libs/img/icon_arrow_w.svg);
  background-repeat: no-repeat;
  width: 15px;
  height: 14px;
  transition: ease-out all 0.3s;
  z-index: 2;
}
.contactForm .submitBlock .contactBtn:hover {
  opacity: 1;
  transition: all 0.5s;
}
.contactForm .submitBlock .contactBtn:hover:after {
  right: 1rem;
}
@media screen and (max-width: 959px) {
  .contactForm {
    padding: 2rem 1rem;
  }
  .contactForm dl {
    flex-direction: column;
  }
  .contactForm dt {
    width: 100%;
    margin-bottom: 10px;
  }
  .contactForm dd {
    width: 100%;
  }
  .contactForm .submitBlock {
    margin-top: 1rem;
  }
  .contactForm .submitBlock .contactBtn {
    min-width: 200px;
  }
}