html {
  width: 100%;
}
body {
  width: 100%;
  margin: 0;
  font-family: 'Kosugi Maru', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
/* header */
header{
  width: 100%;
  /* height: 56px; */
  background-color: white;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 10;
  opacity: 0.9;
}
.navbar-brand.text-color {
  font-size: 35px;
}
.vertical-center{
  vertical-align: middle;
}
.text-color {
  color: #3E63A8 !important;
}
.text-black {
  color: #000 !important;
}
.text-white {
  color: #FFF !important;
}
.navbar-toggler {
  border: none;
}
.header_btn,
.address a {
  position: relative;
  display: inline-block;
  color: #3E63A8;
  text-decoration: none;
}
.header_btn:hover,
.address a:hover {
  cursor: pointer;
  text-decoration: none;
}
.header_btn::after,
.address a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #3E63A8;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.header_btn:hover::after,
.address a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.simulator_btn {
  color: #FFF;
  border-radius: 5px;
  background-color: #3E63A8;
}

/* main */
.main {
 width: 100%;
}
.main_visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.main_visual h1 {
  font-size: 30px;
  font-weight: normal;
  margin: 0;
}
.main_visual p {
  font-size: 20px;
}
.main_visual .title-box {
  position: absolute;
  top: 10%;
}
nav img {
  height: 30px;
}
.second-visual img {
  width: 100%;
}
.main_visual img {
  min-width: 100% !important;
}

.visual2{
  margin: 50px 0px;
  text-align: center;
  width: 100%;
}
.visual2 img {
  width: 50%;
}
.sp {
  display: none;
}
.title-box {
  color: #fff;
  text-align : center;
}
/* main アニメーション */
.main_visual.visual {
  max-width  : 100%;
  margin-top: 78px;
  overflow   : hidden;
  display: flex;
  height: 690px;
}
.main_visual.visual .bgImg {
  position   : absolute;
  top        : 0px;
  left       : 0px;
  bottom     : 0px;
  right      : 0px;
  opacity    : 0;
  animation  : bgAnime 6s;
  animation-fill-mode: forwards;
}
@keyframes bgAnime {
  0% { opacity: 0; transform: scale(1.1, 1.1); filter: blur(20px); }
  6% { opacity: 1; }
 50% { opacity: 1;filter: blur(0px); }
 100% { opacity: 1; transform: scale(1.0, 1.0);  }
}
.explanation {
  text-align: center;
  font-size: 20px;
  margin: 80px 0;
}
.explanation2 {
  width: 65%;
  margin: 80px auto 0 auto;
  font-size: 20px;
}

.w_65 {
  width: 65%;
  margin: 0 auto 0 auto;
}

.business-box {
  margin-bottom: 80px;
}
.personal-information {
  width: 65%;
  margin: 150px auto 0 auto;
}
.personal-information h1 {
  font-size: 30px;
  padding-left: 20px;
  border-left: 5px solid #000;
}
.shadow {
  text-shadow: 0px 0px 10px rgba(62,99,168,0.9);
}

.shadow2 {
  padding: 10px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}
.shadow2 p{
  margin: 0px;
}

.title {
  text-align: center;
}
.title h2{
  font-size: 25px;
}
.personal-information p {
  font-size: 15px;
}
.personal-information h3 {
  font-size: 18px;
  font-weight: bold;
}
ol.list_parentheses{
  font-size: 15px;
  line-height: 2rem;
  padding: 0;
  margin: 0;
}
ol.list_parentheses > li{
  list-style-type: none;
  list-style-position: outside;
  counter-increment: cnt;
}
ol.list_parentheses > li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}
ol.lang {
  list-style-type: katakana;
}
ol.number {
  padding: 0;
}
ol.number > li {
  list-style-type: none;
}
.deal {
  margin-bottom: 100px;
}
/* second */
.second-visual {
  position: relative;
}
.second-visual h1 {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  margin: 0;
}
.second-visual p {
  font-size: 18px;
  color: #fff;
}
.second-visual .text-content {
  position: absolute;
  top: 50%;
}
.text-content {
  text-align: center;
  font-size: 20px;
  align-self: center;
}
.business-content-box {
  margin-top: 70px;
}
.business-content-box > .business-content > section > h3 {
  text-align: center;
}
.business-content-box > .business-content > section > p {
  text-align: left;
}
.business-content {
  display: flex;
  justify-content: center;
}
.matter {
  background: #EEE;
  color: #000;
  margin: 20px;
  padding: 20px;
}
.one_third_box {
  width: 20%;
  background: #3E63A8;
  font-size: 18px;
  margin: 0 20px;
  padding: 20px;
  opacity: 0.9;
  color: #fff;
}
.one_third_box h1 {
  margin-top: 0;
  margin-bottom: 10px;
}
.one_third_box p {
  color: #fff;
}

.one_box {
  width: 70%;
  background: rgb(245, 245, 245);
  font-size: 18px;
  margin: 0 20px;
  padding: 20px;
  text-align: center;
}
.one_box h1 {
  margin-top: 0;
  margin-bottom: 10px;
}
.business-content-box > button {
  margin-top: 50px;
}
.btn {
  text-align: center;
  margin-top: 25px;
}
.success-content {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}
.success-case img {
  width: 350px;
}
.card {
  width: 352px;
  height: 500px;
  background:rgb(245, 245, 245);
  margin: 0 20px;
}
.card h1 {
  margin: 0;
  padding: 10px 20px 0 20px;
  font-size: 25px;
}
.card p {
  margin: 0;
  padding: 10px 20px 0 20px;
}
/* third */
.third-visual {
  position: relative;
}
.third-visual h1 {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  margin: 0;
}
.third-visual p {
  font-size: 18px;
  color: #fff;
}
.third-visual .text-content {
  position: absolute;
  top: 55%;
}
.feature > section > h1 {
  color: #000;
  font-size: 25px;
  margin-bottom: 10px;
}
.feature > section > p {
  color: #000;
  text-align: left;
}
.feature-cotainer {
  height: 1000px;
}
.feature {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.feature-box {
  width: 350px;
  height: 270px;
  background: rgb(245, 245, 245);
  font-size: 18px;
  padding: 30px;
}
.third-visual > .text-content > button {
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 60px;
}
.third-visual > .text-content > button:hover {
  color: #3E63A8;
  background: #fff;
  opacity: 1;
}
.contribution-box {
  margin-bottom: 100px;
}
/* society */
.contribution {
  position: relative;
}
.contribution h1 {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  margin: 0;
}
.contribution p {
  font-size: 18px;
  color: #fff;
}
.contribution .text-content {
  position: absolute;
}
.contribution > .text-content > button {
  border: 1px solid #fff;
  color: #fff;
  padding: 6px 60px;
}
.contribution > .text-content > button:hover {
  color: #3E63A8;
  background: #fff;
  opacity: 1;
}
.contribution img {
  width: 65%;
}
.address-box img {
  width: 100%;
}
.address-box {
  position: relative;
}
.address-box h1 {
  font-size: 30px;
  font-weight: normal;
  color: #fff;
  margin: 0;
}
.address-box p {
  font-size: 18px;
  color: #fff;
}
.address-box .address {
  position: absolute;
  top: 85px;
}
.address {
  width: 30%;
  height: 350px;
  padding: 40px 0 40px 100px;
  background: rgb(245, 245, 245, 0.9);
}
.address h1,
.address p {
  color: #000;
}
/* footer */
footer {
  background: #3E63A8;
  height: 150px;
  margin-top: 0px;
}

footer > nav > ul {
  display: flex;
  list-style: none;
  margin-bottom: 0;
  height: 100px;
}
footer > nav > ul > li {
  margin: 0 30px;
  align-self: center;
  display: inline-block;
}
footer > nav > ul > li > a,
footer p {
  color: white;
}
footer p {
  margin: 0 0 0 auto;
}
.copylight {
  margin-right: 200px;
  text-align: end;
}
.detail_btn {
  padding: 6px 30px;
  color: #3E63A8;
  border: 1px solid #3E63A8;
  transition: 0.5s;
  font-size: 18px;
  line-height: 1em;
  background: rgba(0, 0, 0, 0);

}
.detail_btn:hover {
  color: white;
  background: #3E63A8;
  opacity: 1;
}
.footer_btn {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.footer_btn:hover {
  cursor: pointer;
  text-decoration: none;
}
.footer_btn::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
.footer_btn:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

@media screen and (max-width: 575px) {
  .w_65 {
    width: 100%;
    margin: 0;
  }
  .explanation2 {
    width: 100%;
    padding: 0 20px;
    margin: 50px 0;
  }
  .explanation2 h3 {
    font-size: 0.8em;
    text-align: left;
  }
  .explanation2 p {
    font-size: 0.8em;
    text-align: left;
  }
  /* .nav  {
  height: 80px;
  }  */
  nav img {
    height: 20px;
  }
  .text-color {
   font-size: 20px;
  }
  .navbar-toggler {
    border: none !important;
  }
  .navbar-toggler-icon {
    font-size: 25px;
  }
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .main_visual h1 {
    font-size: 30px;
    font-weight: normal;
    margin: 0;
  }
  .main_visual p {
    font-size: 16px;
  }
  .main_visual .title-box {
    position: absolute;
    top: 70%;
  }
  .main_visual.visual {
    position   : relative;
    max-width  : 100%;
    margin-top: 78px;
    overflow   : hidden;
    display: flex;
    height: 550px;
  }
  .visual2 img {
    width: 100%;
  }
  .explanation {
    padding: 0 20px;
    margin: 50px 0;
  }
  .explanation p {
    font-size: 0.8em;
    text-align: left;
  }
  .second-visual h1 {
    font-size: 25px;
    font-weight: normal;
    color: #fff;
    margin: 0;
  }
  .text-content > p {
    display: none;
  }
  .second-visual .text-content {
    position: absolute;
    top: 60%;
  }
  .business-content {
    display: block;
  }
  .text-content {
    width: 100%;
    text-align: center;
    font-size: 20px;
    align-self: center;
  }
  .one_third_box {
    width: 100%;
    margin: 20px 0px;
    padding: 20px;
  }
  .one_third_box h1 {
    margin-bottom: 20px;
  }
  .success-case {
    margin-top: 120px;
  }
  .explanation h1 {
    font-size: 25px;
    margin-bottom: 20px;
  }
  .success-content {
    display: block;
    margin-bottom: 60px;
  }
  .success-content > .card {
    margin: 10px auto;
  }
  .text-content > h1 {
    font-size: 25px;
  }
  .visual.feature-cotainer {
    margin-bottom: 80px;
  }
  .feature {
    display: block;
  }
  .feature > .feature-box {
    margin: 10px auto;
  }
  .contribution-box img {
    width: 100%;
  }
  .contribution .text-content {
    position: absolute;
    top: 60%;
  }
  .address-box .address {
    position: absolute;
    top: 85px;
  }
  .address {
    width: 70%;
    height: 350px;
    padding: 20px;
    background: rgb(245, 245, 245);
  }
  .address h1,
  .address p {
    color: #000;
  }
  .address h1 {
    font-size: 20px;
  }
  .address p {
    font-size: 18px;
  }
  footer {
    margin-top: 300px;
  }
  footer > nav > ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    /* margin-bottom: 0; */
    padding: 10px;
    height: 150px;
  }
  footer > nav > ul > li {
    margin: 0 30px;
    align-self: center;
    display: inline-block;
  }
  footer > nav > ul > li > a,
  footer p {
    color: white;
  }
  .copylight {
    width: 100%;
    text-align: center;
    background-color: #3E63A8;
    padding: 10px 20px;
  }
}