@charset "UTF-8";

main {
  margin-bottom: 60px;
}
main > section {
  padding: 4rem 0 0;
}
@media (min-width: 768px) {
  main > section {
    padding: 8rem 0 0;
  }
}

#home .secTit {
  margin-bottom: 6rem;
}
@media only screen and (max-width:767px) {
  #home .secTit {
    margin-bottom: 4rem;
  }
}
p.scroll {
  position: relative;
  padding-top: 100px;
}
.mainVisual {
  height: 80vh;
  max-height: 500px;
  width: 100%;
  position: relative;
  z-index: 1
}
.box01 {
  position: relative;
}
@media (max-width: 575px) {
  .mainVisual {
    height: 380px;
  }
}
.open .mainVisual {
  z-index: -1;
}
.mainVisual .mvTxt {
  position: absolute;
  top: 35%;
  width: 100%;
  z-index: 90;
}
.mainVisual::after {
  background-image: url("../images/home/img_main01.png");
  background-repeat: no-repeat;
  background-position: bottom 0 right 0;
  background-size: contain;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  width: 1200px;
  max-width: 100%;
  height: 75%;
  margin: 0 auto;
  content: '';
}
.mainVisual .mvTxt .box01::after {
  content: '';
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  height: 100%;
  width: 600px;
  position: absolute;
  top: 0;
  left: -20px;
  z-index: -1;
}
.box01 {
  width: 70%;
  padding: 20px 0;
}
@media (max-width: 991px) {
  .mainVisual .mvTxt::after {
    width: 100vw;
  }
  .box01 {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
  }
}

.mainVisual .mvTxt .ttl-01 {
  font-size: 5rem;
  letter-spacing: .4em;
  font-family: 'M PLUS 1p', sans-serif;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #FF4B2D;
}
.ttl-01 span {
  font-size: .3em;
  letter-spacing: .15em;
  display: block;
  font-weight: 300;
}
@media (min-width: 768px) {
  .mainVisual .mvTxt .ttl-01 {
    font-size: 6rem;
  }
}
@media (min-width: 1024px) {
  .mainVisual .mvTxt .ttl-01 {
    font-size: 6.6rem;
  }
}
.mainVisual .mvTxt .ttl-01,
.mainVisual .mvTxt p {
  text-shadow:
       1px  1px 2px #fff,
      -1px  1px 2px #fff,
       1px -1px 2px #fff,
      -1px -1px 2px #fff,
       1px  0px 2px #fff,
       0px  1px 2px #fff,
      -1px  0px 2px #fff,
       0px -1px 2px #fff;
}
@media (min-width: 576px) {
  .mainVisual .mvTxt .ttl-01 {
    }
}
.mainVisual .mvTxt p {
  margin-bottom: 30px;
  font-weight: bold;
  font-size: 1.6rem;

}
@media (min-width: 768px) {
  .mainVisual .mvTxt .ttl-01 {
    font-size: 5.5rem;
    margin-bottom: 40px;
  }
  .mainVisual .mvTxt p {
    width: 30em;
  }
  .mainVisual .mvTxt .btn02 {
    width: 14em;
    display: block;
  }
}
@media (min-width: 1024px) {
  .mainVisual .mvTxt .ttl-01 {
    font-size: 7.5rem;
  }
}
.mainVisual .mvTxt h1 img {
  width: 50%;
  height: auto;
}
.mainVisual .mv_img_box.box01 > p > img {
  width: 90%;
}
.img_listBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
  overflow: hidden;
}
.img_listBox > div {
  z-index: 10;
  width: 100%;
  height: 100%;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}
.img_listBox > .img01 {
  background-image: url("../images/home/img_mv01_pc.png");
}
@media only screen and (max-width:575px) {
  .img_listBox > .img01 {
    background-image: url("../images/home/img_mv01_sp.png");
  }
}
@media (max-width: 575px) {
  span.img_obj01 {
    width: 45px;
    height: 130px;
  }
}



#menu .listBox {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#menu .listBox > a {
  width: 31%;
  display: block;
  opacity: 0;
  overflow: hidden;
}
#menu .listBox div[class*="item"] {
  height: auto;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition-duration: 0.5s;
}


#menu .listBox div[class*="item"]:before {
  content: "";
  display: block;
  padding-top: 70%;
  transition: .5s;
}
#menu .menu_box {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 10px 50px;
  overflow: hidden;
  flex: 0 1 30%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#menu .mico_menu {
  padding: 0 20px 20px;
}
#menu .menu_box p {
  padding-left: 1.5em;
  text-indent: -0.6em;
  font-size: 2rem;
}
#menu .menu_box p i,
#menu .menu_box p span {
  color: #FF4B2D;
  
}
@media only screen and (max-width:767px) {
  #menu .menu_box {
    margin: 0 5px 50px;
  }
  #menu .listBox a div[class*="item"] p > span {
    font-size: 2rem;
  }
}
@media only screen and (max-width:575px) {
  #menu .menu_box {
    flex: 0 1 100%;
  }
  #menu .bg_border01 {
    background-color: inherit;
    height: 0;
    margin-top: 0;
  }
  #menu .menu_box {
    margin: 0 15px 40px;
  }
  #menu {
    padding-top: 14rem;
  }
  #menu .listBox > a {
    width: 100%;
    margin-bottom: 1rem;
  }
}

#point p {
    font-size: 1.6rem;
}
@media (min-width: 576px) {
  #point p {
    font-size: 1.8rem;
  }
}

.card-title {
  line-height: 1.1;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 1.5rem;
  margin: 0;
  z-index: 0;
  background-color: #FF4B2D;
  position: relative;
  height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .card-title {
    font-size: 2.2rem;
  }
}
.card-body {
  margin: 0;
  background-color: #fff;
}
.card-title a:hover {
  color: inherit !important;
}



.introBox {
  text-align: center;
  padding: 8px;
}
.ttl02,
.ttl03 {
  font-size: 2.6rem;
  color: #464646;
  line-height: 1.3;
  letter-spacing: .2;
  padding-bottom: 1rem;
  position: relative;
}

.ttl03 {
  text-align: center;
}
@media (min-width: 768px) {
  .ttl02,
  .ttl03 {
  font-size: 3rem;
  }
}
[class*="ttl0"] {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: bold;
  margin: 0 auto 30px;
}
.ttl02 {
  text-align: center;
}
.ttl02::after {
  content: '';
  height: 2px;
  width: 2em;
  background: #FF4B2D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
[class*="ttl0"] span {
  font-size: 1.2em;
  color: #FF4B2D;
  padding: 0 5px;
}
#menu .ttl02 span {
  font-size: 1.6em;
  margin-left: -0.2em;
  font-weight: bold;
  vertical-align: baseline;
}
.ttl04 {
  color: #464646;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: .2;
  padding-bottom: 1rem;
  border-bottom: 1px solid #FF4B2D;
  display: block;
}
.ttl05 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .ttl03 {
    text-align: center;
  }
}
@media (min-width: 768px) {
  [class*="ttl0"] {
    font-size: 3rem;
    padding-bottom: 2rem;
    margin-bottom: 50px;
  }
  .ttl04 {
    font-size: 1.8em;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }
  .ttl05 {
    margin-bottom: 30px;
  }
}
@media (min-width: 1024px) {
    [class*="ttl0"] {
      font-size: 3.6rem;
  }
}

.bg_box01 {
  margin-top: 60px;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #F8F8F8;
}

.col2Box li {
  padding-bottom: 40px;
}
@media (min-width: 576px) {
  .col2Box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .col2Box li:nth-child(odd) {
    flex: 0 1 60%;
    width: 60%;
  }
  .col2Box li:nth-child(even) {
    flex: 0 1 35%;
    width: 35%;
  }
  .col2Box li:nth-child(n+3) {
    margin-top: 60px;
  }
  .col2Box li:nth-child(3) {
    order: 3;
  }
  .col2Box li:nth-child(4) {
    order: 2;
  }
  .col2Box li:nth-child(5) {
    order: 4;
  }
  .col2Box li:nth-child(6) {
    order: 5;
  }
}

#detail2 .container {
  padding-top: 30px;
  padding-bottom: 30px;
  background-image: url( "../images/home/bg_01.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #F8F8F8;
}
@media (min-width: 576px) {
  #detail2 .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.btn02.btnS {
  width: 200px;
  max-width: 100%;
}