@charset "UTF-8";
/* 
  css設定 @charsetが消されるsass仕様へのハック用コメントです。削除しないでください。新規作成時も必須！
 */
/*==================================================================================
 common
==================================================================================*/
html {
  font-size: .26666667vw;
}

main .caption {
  font-size: 10rem;
}
main .commonTableArea01 dl {
  flex-direction: column;
  align-items: normal;
  gap: 10rem 0;
  padding: 30rem 10rem;
}
main .commonTableArea01 dt,
main .commonTableArea01 dd {
  line-height: 1.7;
  font-size: 16rem;
}
main .commonTableArea01 dt {
  flex: 0 0 auto;
  font-weight: bold;
}
main .commonTableArea01 dd {
  flex: 0 0 auto;
}
main .commonLowerTitle01 {
  padding: 120rem 0 40rem;
  font-size: 24rem;
}

/*==================================================================================
 siteHeader
==================================================================================*/
.siteHeader {
  height: 60rem;
}
.siteHeader:after {
  display: none;
}
.siteHeader h1 {
  opacity: 0;
  font-size: 0;
}
.siteHeader .headerLogo {
  width: 80rem;
  height: 60rem;
  background: rgba(255, 255, 255, 0.65);
}
.siteHeader .headerLogo img {
  width: 50rem;
}
.siteHeader .menuButton {
  position: relative;
  width: 60rem;
  height: 60rem;
}
@media (min-width: 768px) {
  .siteHeader .menuButton {
    display: none;
  }
}
.siteHeader .menuButton span {
  display: inline-block;
  position: absolute;
  left: 10rem;
  width: 40rem;
  height: 2rem;
  background: #fff;
}
.siteHeader .menuButton span:first-of-type {
  top: 20rem;
}
.siteHeader .menuButton span:last-of-type {
  top: 40rem;
}
.siteHeader .menuButton.open span:first-of-type {
  top: 29rem;
  transform: rotate(45deg);
}
.siteHeader .menuButton.open span:last-of-type {
  top: 29rem;
  transform: rotate(-45deg);
}
.siteHeader .menuArea {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 60rem;
  right: 0;
  left: 0;
  height: calc(100vh - 60rem);
  background: #1c1c1c;
}
.siteHeader .menuArea .links {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: normal;
  gap: 22rem 0;
  padding-bottom: 40rem;
}
.siteHeader .menuArea .links li {
  flex: 0 0 auto;
  width: 200rem;
  min-width: 0;
}
.siteHeader .menuArea .links li a {
  padding: 3rem 0 12rem;
  font-size: 16rem;
}
.siteHeader .menuArea .telContact {
  margin-bottom: 20rem;
}
.siteHeader .menuArea .telContact a {
  gap: 7rem 0;
  padding: 12rem 0;
  width: 320rem;
  height: auto;
  text-align: center;
  font-size: 15rem;
}
.siteHeader .menuArea .telContact a .number {
  font-size: 26rem;
}
.siteHeader .menuArea .mailContact {
  width: 320rem;
}
.siteHeader .menuArea .mailContact a {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0 0;
  padding-top: 0;
  height: 60rem;
  line-height: 1;
  font-size: 16rem;
}
.siteHeader .menuArea .mailContact a:before {
  margin-right: 10rem;
  width: 30rem;
  height: 20rem;
}
.siteHeader .menuArea .mailContact a span {
  font-size: 100%;
}

/*==================================================================================
 siteFooter
==================================================================================*/
.siteFooter {
  padding-bottom: 30rem;
}
.siteFooter .commonContactArea {
  padding: 80rem 0 100rem;
}
.siteFooter .commonContactArea .catch {
  padding-bottom: 40rem;
  line-height: 1.5;
  font-size: 20rem;
}
.siteFooter .commonContactArea .contacts {
  flex-direction: column;
  justify-content: normal;
  gap: 40rem 0;
}
.siteFooter .commonContactArea .contacts li {
  flex: 0 0 auto;
  padding: 8rem 0;
  position: relative;
}
.siteFooter .commonContactArea .contacts li .text {
  font-size: 18rem;
}
.siteFooter .commonContactArea .contacts li.contact:before {
  top: auto;
  right: calc(50% - 4rem);
  bottom: -24.5rem;
}
.siteFooter .commonContactArea .contacts li.contact:after {
  content: '';
  display: block;
  position: absolute;
  top: auto;
  right: 0;
  bottom: -21rem;
  left: 0;
  width: auto;
  height: 1rem;
  background: linear-gradient(90deg, #727272, #727272 160rem, transparent 160rem, transparent 215rem, #727272 215rem);
}
.siteFooter .commonContactArea .contacts li.contact .text {
  padding-bottom: 10rem;
}
.siteFooter .commonContactArea .contacts li.contact .number a {
  font-size: 40rem;
}
.siteFooter .commonContactArea .contacts li.contact .number a:before {
  width: 38rem;
  height: 39rem;
}
.siteFooter .commonContactArea .contacts li.mail .text {
  padding-bottom: 15rem;
}
.siteFooter .commonContactArea .contacts li.mail .button {
  margin: auto;
  width: 90%;
}
.siteFooter .commonContactArea .contacts li.mail .button a {
  padding-bottom: 2rem;
  height: 60rem;
  border-radius: 30rem;
  font-size: 20rem;
}
.siteFooter .commonContactArea .contacts li.mail .button a:after {
  top: calc(50% - 8rem);
  right: 20rem;
  border-top-width: 8rem;
  border-bottom-width: 8rem;
  border-left-width: 14rem;
}
.siteFooter .footerNavi {
  margin-bottom: 30rem;
  padding: 30rem 0;
}
.siteFooter .footerNavi ul {
  flex-direction: column;
  justify-content: normal;
  align-items: center;
  gap: 25rem 0;
}
.siteFooter .footerNavi a {
  font-size: 16rem;
}
.siteFooter .copyright {
  font-size: 11rem;
}

/*==================================================================================
 top
==================================================================================*/
#top .mainVisual {
  height: 600rem;
  background-image: url("../img/sp/top/mv.jpg");
}
#top .mainVisual img {
  width: 260rem;
}
#top section.strengths {
  padding-top: 50rem;
  background-size: 426% auto;
  background-position-x: -418rem;
}
#top section.strengths h3 {
  padding-bottom: 40rem;
  line-height: 1.9;
  font-size: 17rem;
}
#top section.strengths section.points {
  align-items: normal;
  flex-direction: column !important;
  padding: 40rem 20rem 30rem;
  gap: 30rem 0;
}
#top section.strengths section.points:not(.point01, .point03):before {
  border-bottom-width: 350rem;
  border-left-width: 350rem;
}
#top section.strengths section.points:not(.point01, .point03):after {
  border-top-width: 350rem;
  border-right-width: 350rem;
}
#top section.strengths section.points .textArea {
  text-align: center;
}
#top section.strengths section.points .textArea h4 {
  padding-bottom: 2rem;
  font-size: 16rem;
}
#top section.strengths section.points .textArea .lead {
  padding-top: 15rem;
  text-align: left;
  font-size: 14rem;
}
#top section.strengths section.points .image {
  order: -1;
  flex: 0 0 auto;
}
#top section.strengths section.point01 {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
#top section.strengths section.point02 {
  padding-top: 40rem;
}
#top section.strengths section.point02:before {
  border-bottom-width: 350rem !important;
  border-left-width: 350rem !important;
}
#top section.strengths section.point03:before, #top section.strengths section.point03:after {
  content: '';
  display: block;
  position: absolute;
}
#top section.strengths section.point03:before {
  top: 0;
  right: 0;
  border-bottom-width: 350rem;
  border-right-width: 350rem;
}
#top section.strengths section.point03:after {
  left: 0;
  bottom: 0;
  border-top-width: 350rem;
  border-left-width: 350rem;
}
#top section.example {
  margin-bottom: 60rem;
  padding: 50rem 20rem 30rem;
  background-size: cover;
}
#top section.example h3 {
  padding-bottom: 40rem;
  font-size: 24rem;
}
#top section.example .exampleSlider {
  margin-bottom: 20rem;
}
#top section.example .exampleSlider .slider:before, #top section.example .exampleSlider .slider:after {
  padding: 3rem 0;
  width: 100rem;
  font-size: 16rem;
}
#top section.example .text {
  padding: 20rem 20rem;
  line-height: 1.7;
  font-size: 13rem;
}
#top section.menu h3 {
  padding-bottom: 70rem;
  font-size: 24rem;
}
#top section.menu h3:after {
  bottom: 35rem;
  left: calc(50% - 30rem);
  font-size: 24rem;
}
#top section.menu .menuList {
  flex-direction: column;
  text-align: center;
}
#top section.menu .menuList li {
  flex: 0 0 auto;
  height: 350rem;
  background-size: cover;
}
#top section.menu .menuList li dl {
  width: 320rem;
}
#top section.menu .menuList li dt {
  margin-bottom: 15rem;
  padding: 4rem .7em 0;
  border-bottom-width: 15rem;
  font-size: 22rem;
}
#top section.menu .menuList li dd {
  line-height: 1.7;
  font-size: 15rem;
}

/*==================================================================================
 lower common
==================================================================================*/
.lower main {
  padding-bottom: 80rem;
}

/*==================================================================================
 contact
==================================================================================*/
#contact form dl {
  flex-direction: column;
  align-items: normal;
  gap: 15rem 0;
  padding: 20rem 15rem;
}
#contact form dl.required dt:after {
  right: 0;
  font-size: 12rem;
}
#contact form dt,
#contact form dd {
  flex: 0 0 auto;
  padding: 0;
  font-size: 16rem;
}
#contact form dt {
  font-weight: bold;
}
#contact form dd {
  border-left: none;
}
#contact form .error {
  padding-top: 3rem;
  font-size: 14rem;
}
#contact select {
  height: 30rem;
  font-size: 16rem;
}
#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact textarea {
  height: 30rem;
  font-size: 16rem;
}
#contact .buttons {
  padding-top: 40rem;
}
#contact .buttons button[type="submit"],
#contact .buttons input[type="submit"],
#contact .buttons a {
  width: 150rem;
  height: 50rem;
  line-height: 50rem;
  font-size: 16rem;
}
#contact textarea {
  height: 100rem;
}
#contact.thanks section.result h3 {
  padding-bottom: 30rem;
  font-size: 18rem;
}
#contact.thanks section.result .lead {
  line-height: 1.7;
  font-size: 13rem;
}
#contact.thanks section.result .lead + .lead {
  padding-top: 20rem;
}

/*# sourceMappingURL=smartphone.css.map */