@charset "utf-8";

/*====================================================================================================

　header / ヘッダー

====================================================================================================*/

#header{ position: fixed; width: 100%; margin: 0px auto; padding: 15px 0px; background: #fff; z-index: 9999; }
#header .in{ position: relative; display: flex; justify-content: center; align-items: center; width: 1100px; margin: 0px auto; padding: 0px; }
#header h1 img{ width: 180px; height: auto; }
#header p{ margin: 0px 0px 0px 5px; color: #271415; font-size: 1.5rem; font-weight: bold; line-height: 1.5; text-align: left; }

#header .mail{ margin: 0px 15px 0px auto; }
#header .mail a{ display: block; width: 220px; height: 70px; text-align: center; color: #3f3f3f; text-decoration: none; border: 2px #107901 solid; border-radius: 3px; background: #f9f9f9; }
#header .mail a:hover{ color: #fff; background: #107901; }
#header .mail a dl dt{ margin: 10px 0px 0px; font-size: 1.4rem; font-weight: bold; }
#header .mail a dl dd{ color: #107901; font-size: 2.0rem; font-weight: bold; line-height: 1.2; }
#header .mail a:hover dl dd{ color: #fff; }
#header .mail a dl dd::before{ display: inline-block; margin: 0px 3px 0px 0px; font-family: "Font Awesome 6 Free"; color: #107901; content: '\f0e0'; font-size: 2.0rem; font-weight: 900; }
#header .mail a:hover dl dd::before{ color: #fff; }

#header .tel a{ display: block; color: #3f3f3f; text-decoration: none !important; }
#header .tel a dl{ display: flex; width: 250px; height: 70px; flex-direction: column; align-items: center; justify-content: center; padding: 0px; border: 2px #e60012 solid; border-radius: 3px; background: #f9f9f9; }
#header .tel a dl dt{ margin: 8px 0px 0px; font-size: 1.3rem; font-weight: 700; text-align: center; }
#header .tel a dl dt span{ padding: 0px; color: #6f6f6f; }
#header .tel a dl dd{ margin: -8px 0px 0px 0px; color: #e60012;font-size: 2.6rem; font-family: "Montserrat", sans-serif; }
#header .tel a dl dd::before{ display: inline-block; margin: 0px 4px 0px 0px; font-family: "Font Awesome 6 Free"; color: #e60012; content: '\f098'; font-size: 2.4rem; font-weight: 900; }

nav{ display: block; margin: 0px auto; padding: 108px 0px 25px; line-height: 1.65; border-bottom: 1px #dfdfdf solid; }
nav ul{ display: flex; justify-content: space-between; width: 1100px; margin: 0px auto; }
nav ul li{ width: 19.5%; }
nav ul li a{ display: block; margin: 0px; padding: 6px 0px; color: #3f3f3f; font-size: 1.3rem; font-weight: bold; text-decoration: none; border: 1px #dfdfdf solid; border-radius: 5px; background: #fff; }
nav ul li a:hover{ color: #e60012; text-decoration: underline; background: #efefef; }

#confirm #header{ position: static; padding: 15px 0px 20px; border-bottom: 1px #efefef solid !important; }
#confirm #header p{ font-size: 1.4rem; }
#confirm #header .tel{ display: none; }
#confirm #header .mail{ display: none; }
#confirm #header nav{ display: none; }

@media only screen and ( max-width: 1119px ){
  #header{ position: static; padding: 15px 0px 0px; }
  #header .in{ width: auto; margin: 0px 15px; }
  #header .tel{ display: none; }
  nav{ display: none; }
}

@media only screen and ( max-width: 640px ){
  #header .in{ width: auto; margin: 0px 10px; }
  #header p{ width: calc( 100% - 180px ); }
  #header p br{ display: none; }
  #header .mail{ display: none; }

  #confirm #header{ padding: 10px 0px 15px; }
  #confirm #header .in{ flex-direction: column; }
  #confirm #header h1{ margin: 0px; }
  #confirm #header h1 img{ width: 150px; }
  #confirm #header p{ width: auto; margin: 5px 0px; font-size: 1.3rem; }
  #confirm #header p br{ display: block; }
}


/*====================================================================================================

  Main / メイン

====================================================================================================*/

/*
  共通
---------------------------------------------------------------------------------------------------- */

section > .in{ width: 1100px; margin: 0px auto; }
section .ttl{ margin-bottom: 40px; font-size: 3rem; font-weight: bold; text-align: center; line-height: 1.6; }
section .ttl span{ position: relative; display: block; margin-bottom: 5px; color: #e60012; font-size: 3rem; }
section .ttl span::before{ display: inline-block; content: ""; width: 50px; margin: 0px 25px 7.5px 0px; height: 2px; background: #e60012; }
section .ttl span::after{ display: inline-block; content: ""; width: 50px; margin: 0px 0px 7.5px 25px; height: 2px; background: #e60012; }

@media only screen and ( max-width: 1119px ){
  section .in{ width: auto; margin: 0px; }
  section .ttl{ margin-bottom: 20px; font-size: 2.4rem; line-height: 1.5; }
  section .ttl span{ margin-bottom: 12px; font-size: 2.4rem; }
  section .ttl span::after{ width: 70px; }
}

@media only screen and (max-width: 640px){
  section .ttl{ margin-bottom: 15px; font-size: 2.0rem; }
  section .ttl br{ display: none; }
  section .ttl span{ margin-bottom: 8px; font-size: 2.0rem; }
  section .ttl span::after{ width: 50px; }
}

.regist{ width: 100%; margin: 0px; padding: 1px 0px; background: #e60012; }
.regist > p{ width: 800px; margin: -40px auto 20px; padding: 10px 0px 0px; color: #fff; font-size: 2.4rem; font-weight: bold; border-radius: 3px 3px 0px 0px; background: #e60012; }
.regist .in{ display: flex; justify-content: center; align-items: center; width: 1100px; margin: 0px auto; padding: 0px 0px 20px; }
.regist figure img{ width: auto; height: 100px; }
.regist .mail{ width: 400px; height: 100px; margin-left: 20px; border: 2px #fff solid; border-radius: 3px; background: #fff; }
.regist .tel{ width: 400px; height: 100px; margin-left: 20px; border: 2px #fff solid; border-radius: 3px; background: #fff; }
.regist dl{ width: 400px; }
.regist a{ color: #3f3f3f; text-decoration: none; }
.regist dl dt{  margin: 10px 0px 5px; padding: 0px; color: #333; font-size: 1.5rem; font-weight: bold; }
.regist a dl dd{ margin: 0px 20px; padding: 7.5px 0px; font-size: 2.0rem; color: #fff; font-weight: bold; border-radius: 3px; background: #ff6633; transition: all .3s; }
.regist .tel dl dd{ background: #e60012; }
.regist a:hover dl dd{ background: #006600; }
.regist-img{ width: 100%; margin: 0px auto; background: #a18959 url(../img/regist-bg.png) left top repeat-x; }

@media only screen and ( max-width: 1119px ){
  .regist > p{ width: auto; max-width: 700px; margin: -30px auto 20px; font-size: 2.0rem; font-weight: bold; }
  .regist .in{ width: auto; margin: 0px; }
  .regist figure img{ height: 80px; }
  .regist .mail{ width: 60%; height: 80px; margin-left: 20px; }
  .regist .tel{ display: none; }
  .regist dl{ width: 100%; }
  .regist dl dt{ margin: 7px 0px 3px; }
  .regist a dl dd{ margin: 0px 20px; padding: 5px 0px; font-size: 1.8rem; }
  .regist .tel dl dd{ background: #e60012; }
  .regist a:hover dl dd{ background: #006600; }
}

@media only screen and ( max-width: 640px ){
  .regist{ display: none; }
}


/*
  catch - メインビジュアル
---------------------------------------------------------------------------------------------------- */

.catch{ width: 100%; margin: 0px auto; background: #f6f6f6; }
.catch img{ border-radius: 5px; margin-top: -15px; }

@media only screen and ( max-width: 1119px ){
  .catch{ width: auto; margin: 15px 0px 0px; }
  .catch img{ border-radius: 0px; margin: 0px; }
}


/*
  fv-movie - 動画CM
---------------------------------------------------------------------------------------------------- */

.fv-movie{ margin: -25px 0px 0px; padding: 100px 0px 80px; background-color: #e60012; }
.fv-movie .movie-box{ width: 1100px; margin: 0px auto; padding: 0px 25px 25px; border: 3px #c7a76c solid; border-radius: 5px; background: #fff; }
.fv-movie .movie-box h2{ width: 80%; margin: -30px 10% 0px; padding: 5px 0px; color: #fff; font-size: 2.6rem; font-weight: bold; border: 2px #c7a76c solid; border-radius: 5px; background: #c7a76c; text-shadow: 2px 2px 2px #333; }
.fv-movie .movie-box h2 br{ display: none; }
.fv-movie iframe{ width: 95%; height: 100%; margin: 30px 2.5% 0px; aspect-ratio: 16 / 9; box-shadow: 0px 0px 7px 3px #cfcfcf; border-radius: 3px; }

.fv-movie .movie-box p.button{ margin: 0px; font-size: 1.8rem; line-height: 1.7; }
.fv-movie .movie-box p.button a{ display: block; width: 600px; height: 60px; margin: 20px auto 0px; color: #fff; font-weight: bold; text-decoration: none; line-height: 57px; border: 2px #107901 solid; border-radius: 5px; background-image: linear-gradient(to right, rgba(16,121,1,1) 50%, rgba(230,0,18,1) 50%); background-position: 0 0; background-size: 200% auto; }
.fv-movie .movie-box p.button a:after{ padding-left: 10px; font-family: "Font Awesome 6 Free"; content: '\f101'; color: #fff; font-weight: 900; }
.fv-movie .movie-box p.button a:hover{ color: #fff; background-position: -100% 0; border: 2px #e60012 solid; }

@media only screen and ( max-width: 1119px ){
  .fv-movie{ padding: 80px 0px; }
  .fv-movie .movie-box{ width: auto; margin: 0px 15px; padding: 0px 20px 20px; }
  .fv-movie .movie-box h2{ width: 98%; margin: -25px 1% 0px; font-size: 2.0rem; }
  .fv-movie iframe{ width: 100%; margin: 30px 0px 0px; }
  .fv-movie .movie-box p.button a{ width: 100%; height: 55px; margin: 15px 0px 0px; line-height: 53px; }
}

@media only screen and ( max-width: 640px ) {
  .fv-movie{ padding: 80px 0px 30px; }
  .fv-movie .movie-box{ margin: 0px 10px; padding: 0px 10px 15px; }
  .fv-movie .movie-box h2{ width: 100%; margin: -35px 0px 0px; padding: 5px 0px; font-size: 1.7rem; line-height: 1.3; }
  .fv-movie .movie-box h2 br{ display: block; }
  .fv-movie iframe{ width: 100%; margin: 15px 0px 0px; }
  .fv-movie .movie-box p.button a{ height: 40px; margin: 10px 0px 0px; font-size: 1.5rem; line-height: 38px; }
}


/*
  point - 選ばれるポイント
---------------------------------------------------------------------------------------------------- */

.point{ margin: -15px auto 0px; }
.point h2{ margin: -30px auto 0px; }
.point ul{ display: flex; justify-content: space-between; margin: 50px 0px 0px; }
.point ul li{ width: 340px; }

@media only screen and (max-width: 1119px){
  .point{ margin: 0px; padding: 0px 15px; }
  .point ul{ margin: 30px 0px 0px; }
  .point ul li{ width: 32.5%; }
}

@media only screen and (max-width: 640px){
  .point{ padding: 0px 10px; }
  .point h2{ margin: -15px auto 0px; }
  .point ul{ margin: 20px 0px 0px; }
}


/*
  nayami - こんなお悩みありませんか
---------------------------------------------------------------------------------------------------- */

.nayami{ margin: 120px auto 0px; padding: 1px 0px 0px; background: #f6f6f6; }
.nayami h2{ margin-top: -50px; }

@media only screen and (max-width: 1119px){
  .nayami{ margin: 50px 0px 0px; padding: 0px; }
  .nayami h2{ margin-top: 0px; }
}

@media only screen and (max-width: 640px){
  .nayami{ margin: 30px 0px 0px; }
}



/*
  about - 私たちについて
---------------------------------------------------------------------------------------------------- */

.about{ margin: 0px auto; padding: 100px 0px 0px; background: #f6f6f6; }
.about-text{ margin: 0px; text-align: center; }
.about-text p{ margin: 25px 0px 0px; color: #1f1f1f; font-size: 1.7rem; line-height: 1.7; }
.about-point{ display: flex; justify-content: space-between; margin: 30px 0px 0px; }
.about-point dl{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 16%; padding: 10px 0px; border: 2px #f0f0f0 solid; border-radius: 5px; background: #fff; }
.about-point dl dt{ margin: 5px 0px 0px; text-align: center; }
.about-point dl dt img{ width: auto; height: 80px; }
.about-point dl dd{ margin: 10px 0px 0px; color: #6f6f6f; font-size: 1.4rem; font-weight: bold; }

.about p.last{ margin: 50px 0px 0px; }
.about p.last img{ margin-bottom: -50px; }


@media only screen and (max-width: 1119px){
  .about{ margin: 0px; padding: 100px 15px 0px; }
  .about-text p{ font-size: 1.6rem; line-height: 1.6; }
  .about-point{ flex-wrap: wrap; margin: 30px 0px 0px; }
  .about-point dl{ width: 33%; margin: 0.6% 0px 0px; }
  .about p.last{ margin: 40px 0px 0px; }
  .about p.last img{ margin-bottom: -4%; }
}

@media only screen and (max-width: 640px){
  .about{ padding: 70px 10px 0px; }
  .about-text p{ margin: 20px 0px 0px; font-size: 1.5rem; text-align: left; }
  .about-text p br{ display: none; }
  .about-point{ margin: 20px 0px 0px; }
  .about-point dl{ flex-direction: row; justify-content: start; width: 100%; margin: 2.5px 0px 0px; padding: 7.5px 15px; }
  .about-point dl dt{ margin: 0px; }
  .about-point dl dt img{ width: auto; height: 40px; }
  .about-point dl dd{ margin: 0px 0px 0px 10px; color: #3f3f3f; }
  .about p.last{ margin: 25px 0px 0px; }
  .about p.last img{ margin-bottom: -4.5%; }
}



/*
  regulation - 規程について
---------------------------------------------------------------------------------------------------- */

.regulation{ padding: 70px 0px 0px; }
.regulation h2{ margin-bottom: 50px; }
.regulation-list{ margin: 80px 0px 0px; padding: 25px 0px 50px; background: #c7a76c; }
.regulation-list ul li{ margin: 50px 0px 0px; }
.regulation-list p{ margin: 40px 0px 0px; }

@media only screen and (max-width: 1119px){
  .regulation{ padding: 60px 0px 0px; }
  .regulation h2{ margin-bottom: 30px; }
  .regulation-list{ margin: 50px 0px 0px; padding: 5px 0px 40px; }
  .regulation-list ul li{ margin: 40px 0px 0px; }
}

@media only screen and (max-width: 640px){
  .regulation{ padding: 30px 0px 0px; }
  .regulation h2{ margin-bottom: 20px; }
  .regulation-list{ margin: 30px 0px 0px; padding: 5px 0px 20px; }
  .regulation-list ul li{ margin: 25px 0px 0px; }
  .regulation-list p{ margin: 20px 0px 0px; }
}


/*
  case - 事例紹介
---------------------------------------------------------------------------------------------------- */

.case{ padding: 80px 0px; }
.case-movie{ width: 1100px; margin: 100px auto 0px; border: 1px #b99e69 solid; border-radius: 5px; }
.case-movie h3{ width: 30%; margin: -25px 35% 0px; padding: 5px 0px; color: #fff; font-size: 2.4rem; font-weight: bold; border-radius: 5px; background-color: #b99e69; }
.case-movie iframe{ width: 95%; height: 100%; margin: 30px 2.5%; aspect-ratio: 16 / 9; box-shadow: 0px 0px 7px 3px #cfcfcf; border-radius: 3px; }
.case ul li{ margin: 50px 0px 0px; }

@media only screen and (max-width: 1119px){
  .case{ padding: 50px 0px; }
  .case h2{ width: 70%; margin: 0px auto; }
  .case-movie{ width: auto; margin: 70px 10px 0px; }
  .case-movie h3{ width: 50%; margin: -22px 25% 0px; font-size: 2.0rem; }
  .case ul li{ margin: 50px 10px 0px; }
}

@media only screen and (max-width: 640px){
  .case{ padding: 40px 0px; }
  .case-movie{ margin: 50px 5px 0px; border-radius: 3px; }
  .case-movie h3{ width: 40%; margin: -15px 30% 0px; padding: 3px; font-size: 1.6rem; }
  .case-movie iframe{ width: 95%; margin: 20px 2.5% 10px; }
  .case ul li{ margin: 30px 5px 0px; }
}



/*
  temptation - 決算時期の誘惑について
---------------------------------------------------------------------------------------------------- */

.temptation{ margin: 80px auto 0px; padding: 1px 0px 50px; background: #f6f6f6; }
.temptation h2{ margin: -50px 0px 20px; }
.temptation p:last-of-type{ margin-top: 50px; }

@media only screen and (max-width: 1119px){
  .temptation{ margin: 40px 0px 0px; padding: 0px 0px 40px; }
  .temptation h2{ margin: 0px 0px 20px; }
}

@media only screen and (max-width: 640px){
  .temptation{ margin: 10px 0px 0px; padding: 0px 0px 30px; }
  .temptation h2{ margin: 0px 0px 10px; }
  .temptation p:last-of-type{ margin-top: 30px; }
}



/*
  merit - メリット
---------------------------------------------------------------------------------------------------- */

.merit{ padding: 100px 0px; }
.merit-text{ margin: 30px 0px 0px; }
.merit-text p{ color: #1f1f1f; font-size: 1.8rem; line-height: 1.6; text-align: center; }
.merit-wrap{ display: flex; flex-wrap: wrap; align-items: center; margin: 30px -15px 0px; padding: 30px 15px 0px; border-top: 1px #efefef solid; text-align: left; }
.merit-wrap:nth-of-type(2){ padding: 10px 15px 0px; border: 0; }
.merit-wrap figure{ width: 350px; }
.merit-wrap figure img{ width: 100%; height: auto; border: 1px #dfdfdf solid; border-radius: 3px; }
.merit-box{ width: calc( 100% - 375px ); margin: 0px 0px 0px 25px; }
.merit-box h3{ margin: 0px; font-size: 2.8rem; font-weight: bold; }
.merit-box h3 span{ display: block; margin: 0px 0px 2.5px; color: #9f9f9f; font-size: 2.4rem; font-weight: bold; line-height: 1; }
.merit-box h3 span span{ display: inline-block; margin-left: 3px; color: #e60012; font-size: 4.5rem; }
.merit-box p{ margin: 5px 0px 0px; color: #4f4f4f; font-size: 1.7rem; line-height: 1.7; }

@media only screen and (max-width: 1119px){
  .merit{ padding: 70px 15px; }
  .merit-text p{ font-size: 1.6rem; line-height: 1.6; }
  .merit-wrap{ margin: 30px -5px 0px; padding: 30px 5px 0px; }
  .merit-wrap:nth-of-type(2){ padding: 10px 5px 0px; }
  .merit-wrap figure{ width: 35%; }
  .merit-box{ width: calc( 65% - 20px ); margin: 0px 0px 0px 20px; }
  .merit-box h3{ font-size: 2.0rem; }
  .merit-box h3 span{ font-size: 2.0rem; }
  .merit-box h3 span span{ font-size: 4.0rem; }
  .merit-box p{ font-size: 1.6rem; line-height: 1.6; }
}

@media only screen and (max-width: 640px){
  .merit{ padding: 50px 10px; }
  .merit-text p{ font-size: 1.5rem; }
  .merit-wrap{ flex-direction: column; }
  .merit-wrap figure{ width: 100%; }
  .merit-box{ width: 100%; margin: 0px; }
  .merit-box h3{ margin: 10px 0px 0px; font-size: 1.8rem; }
  .merit-box h3 span{ font-size: 1.8rem; }
  .merit-box h3 span span{ font-size: 3.0rem; }
  .merit-box p{ font-size: 1.5rem; }
  .merit-box p br{ display: none; }
}



/*
  support - サポートスタッフ
---------------------------------------------------------------------------------------------------- */

.support{ padding: 100px 0px; border-top: 1px #efefef solid; background: #f9f9f9; }
.message{ display: flex; flex-direction: row-reverse; flex-wrap: wrap; margin: 60px 0px 0px; text-align: left; }
.message .profile{ display: flex; }
.message .profile figure{ width: 500px; }
.message .profile figure img{ border: 2px #fff solid; border-radius: 5px; box-shadow: 0px 0px 7px 5px #efefef; }
.message .profile .profile-box{ display: flex; flex-direction: column; justify-content: center; width: 575px; margin-left: 25px; }
.message .profile .profile-box h3 img{ width: 240px; height: auto; }
.message .profile .profile-box p.name{ color: #1f1f1f; font-size: 1.6rem; }
.message .profile .profile-box p.name span{ display: block; margin: 5px 0px 0px; font-size: 2.4rem; font-weight: bold; }
.message .profile .profile-box p{ margin: 10px 0px 0px; color: #3f3f3f; font-size: 1.6rem; line-height: 1.5; }
.message .message-box{ margin: 25px 0px 0px; padding: 25px; border: 1px #efefef solid; border-radius: 5px; background: #fff; box-shadow: 12px 12px 0px -5px #dfdfdf; }
.message .message-box h3{ position: relative; margin: 0px 0px 15px; color: #e60012; font-size: 3.0rem; font-weight: bold; }
.message .message-box h3::after{ display: inline-block; content: ""; width: 100px; margin: 0px 0px 7.5px 15px; height: 2px; background: #e60012; }
.message .message-box p{ margin: 0px 0px 0px 12px; padding: 10px 25px;  color: #3f3f3f; font-size: 1.6rem; border-left: 5px #efefef solid; }
.message .message-box p:first-of-type{ padding: 20px 25px 10px 25px; }
.message .message-box p:last-of-type{ padding: 10px 25px 20px 25px; }

.genre{ margin: 70px auto 0px; }
.genre ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 50px 0px; }
.genre ul li{ width: 20%; margin: 20px 0px 0px; }
.genre ul li img{ width: 170px; height: auto; }

@media only screen and ( max-width: 1119px) {
  .support{ padding: 60px 15px; }
  .message{ margin: 50px 0px 0px; }
  .message .profile figure{ width: 45%; }
  .message .profile .profile-box{ width: calc( 55% - 20px ); margin-left: 20px; }
  .message .profile .profile-box p.name{ font-size: 1.5rem; }
  .message .profile .profile-box p.name span{ font-size: 2.0rem; }
  .message .profile .profile-box p.name br{ display: block; }
  .message .profile .profile-box p{ margin: 8px 0px 0px; font-size: 1.5rem; }
  .message .profile .profile-box p br{ display: none; }

  .message .message-box{ margin: 20px 0px 0px; padding: 20px; }
  .message .message-box h3{ margin: 0px 0px 10px; font-size: 2.6rem; }
  .message .message-box p{ margin: 0px 0px 0px 10px; padding: 8px 20px; font-size: 1.5rem; line-height: 1.5; border-left: 4px #efefef solid; }
  .message .message-box p:first-of-type{ padding: 15px 20px 8px; }
  .message .message-box p:last-of-type{ padding: 8px 20px 15px; }

  .genre{ margin: 50px 0px 0px; }
  .genre ul{ margin: 10px 0px 0px; }
  .genre ul li{ width: 18%; margin: 20px 0px 0px; }
  .genre ul li img{ width: auto; height: auto; }
}

@media only screen and ( max-width: 640px) {
  .support{ padding: 50px 10px; }
  .message{ margin: 40px 0px 0px; }
  .message .profile{ flex-wrap: wrap; }
  .message .profile figure{ width: 100%; }
  .message .profile .profile-box{ width: calc( 100% - 10px ); margin: 15px 5px 0px; }
  .message .profile .profile-box h3 img{ width: 200px; }

  .message .message-box{ padding: 10px 12px 20px; box-shadow: 10px 10px 0px -5px #dfdfdf; }
  .message .message-box h3{ margin: 0px 0px 10px; font-size: 2.4rem; }
  .message .message-box p{ margin: 0px 0px 0px 8px; padding: 8px 12px; border-left: 2px #efefef solid; }
  .message .message-box p:first-of-type{ padding: 12px 12px 8px; }
  .message .message-box p:last-of-type{ padding: 8px 12px 12px; }

  .genre{ margin: 40px 0px 0px; }
  .genre ul{ margin: 10px 15px 0px; }
  .genre ul li{ width: 28%; margin: 20px 0px 0px; }
  .genre ul li:last-of-type{ display: none; }
}


/*
  example - 導入事例
---------------------------------------------------------------------------------------------------- */

.example{ padding: 100px 0px 150px; border-top: 1px #efefef solid; }
.example-wrap{ display: flex; justify-content: space-between; }
.example-box{ width: 32%; margin: 0px 0.666%; padding: 20px; text-align: left; border: 4px #e60012 solid; border-radius: 15px; }
.example-job{ display: flex; align-items: center; }
.example-job p img{ width: 100px; height: 100px; padding: 0px; border: 2px #dfdfdf solid; border-radius: 100px; }
.example-job dl{ margin-left: 15px; text-align: center; }
.example-job dl dt{ margin: 0px; font-size: 2rem; font-weight: bold; line-height: 1.5; }
.example-job dl dd{ margin: 0px; font-size: 2rem; font-weight: bold; line-height: 1.5; }
.example-info{ margin: 15px 0px 0px; padding: 0px 15px 20px; border-bottom: 3px #e60012 solid; }
.example-info ul li{ font-size: 1.7rem; font-weight: bold; }
.example-detail{ margin: 25px 0px 0px; }
.example-detail dl{ display: flex; align-items: start; margin: 20px 0px 0px; }
.example-detail dl dt{ width: 70px; margin: 2px 0px 0px; padding: 1px 0px 0px; color: #fff; font-size: 1.4rem; line-height: 1.6; font-weight: bold; text-align: center; border-radius: 100px; background: #444; }
.example-detail dl dd{ width: calc( 100% - 80px ); margin-left: 10px; font-size: 1.4rem; line-height: 1.5; }
.example-detail dl.example-result{ flex-wrap: wrap; }
.example-detail dl.example-result dt{ position: relative; width: 70px; background: #2169ca; }
.example-detail dl.example-result dt::after{ position: absolute; top: 10px; left: 80px; display: block; content: ""; width: 220px; height: 2px; background: #2169ca; }
.example-detail dl.example-result dd{ width: 100%; margin: 15px 10px 0px; font-size: 1.6rem; }
.example-detail dl.example-result dd span{ color: #e60012; font-weight: bold; }

.example-wrap{ opacity: 0 !important; transition: opacity .3s linear !important; }
.example-wrap.slick-initialized{ opacity: 1 !important; }

.example-wrap .slick-track{ display: flex; }
.example-wrap .slick-slide{ height: auto !important; }



@media only screen and ( max-width: 1119px ){
  .example{ padding: 80px 0px 120px; }
  .example-box{ width: calc( 100% - 20px ) !important; margin: 15px 10px 0px; }
  .example-job dl{ text-align: left; }

  .example-wrap .slick-slide:not(.slick-active){ -webkit-filter: opacity(40%); -moz-filter: opacity(40%); -o-filter: opacity(40%); filter: opacity(40%); transition: 0.3s linear; }
  .example-wrap .slick-slide:not(.slick-active).example-box{ border: 3px #9f9f9f solid; }
  .example-wrap .slick-slide:not(.slick-active).example-box .example-info{ border-bottom: 3px #9f9f9f solid; }

  .example-wrap .slick-prev,
  .example-wrap .slick-next{ position: absolute; display: block; padding: 0; font-size: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 100; }
  .example-wrap .slick-next{ right: 25px; top: 41%; }
  .example-wrap .slick-prev{ left: 25px; top: 41%; }
  .example-wrap .slick-prev:before,
  .example-wrap .slick-next:before{ font-size: 3.6rem; font-family: "Font Awesome 6 free"; content: '\f104'; color: #e60012; font-weight: 900; transition: 0.2s linear; }
  .example-wrap .slick-next:before{ content: "\f105"; }
  .example-wrap .slick-prev:hover:before,
  .example-wrap .slick-next:hover:before{ color: #ff0000; }

  .example-wrap .slick-dots{ display: block; width: 100%; margin: 15px 0px 0px; text-align: center; }
  .example-wrap .slick-dots li{ position: relative; display: inline-block; width: 50px; height: 8px; margin: 0px 7.5px; cursor: pointer; }
  .example-wrap .slick-dots li button{ display: block; width: 50px; height: 8px; color: transparent; font-size: 0; line-height: 0; border: 0; outline: none; background: transparent; cursor: pointer; }
  .example-wrap .slick-dots li button:hover::before,
  .example-wrap .slick-dots li button:focus::before{ background: #e60012; opacity: 1; transition: all 0.3s; }
  .example-wrap .slick-dots li button::before{ position: absolute; top: 0; left: 0; width: 50px; height: 8px; content: ''; border-radius: 3px; background: #dfdfdf; transition: all 0.3s; }
  .example-wrap .slick-dots li.slick-active button::before{ opacity: 1; background: #e60012; }
}

@media only screen and ( max-width: 640px ){
  .example{ padding: 50px 0px 70px; }
  .example-box{ width: calc( 100% - 10px ) !important; margin: 15px 5px 0px; border: 3px #e60012 solid; }

  .example-job dl dt{ font-size: 1.6rem; }
  .example-job dl dd{ font-size: 1.6rem; }

  .example-wrap .slick-next{ right: 2px; }
  .example-wrap .slick-prev{ left: 2px; }
}



/*
  flow - 導入までの流れ
---------------------------------------------------------------------------------------------------- */

.flow{ padding: 100px 0px; }
.flow h3{ margin: 0px 0px 30px; padding: 10px 0px; color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; border-radius: 3px; background: #e60012; }
.flow-box{ position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 1100px; min-height: 140px; margin: 0px auto; }
.flow-box::after{ position: absolute; left: 150px; bottom: -10px; font-family: "Font Awesome 6 Free"; content: '\f103'; color: #e60012; font-size: 2.0rem; font-weight: 900; }
.flow-box:last-child::after{ display: none; }
.flow-step{ display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; width: 28.5%; margin: 20px 1.5% 20px 0px; border: 1px #e60012 solid; }
.flow-step h4{ margin: 0px; padding: 12.5px 0px; color: #1f1f1f; font-size: 1.8rem; font-weight: bold; }
.flow-step p{ display: block; width: 80%; margin: -15px auto 0px; color: #e60012; font-size: 1.8rem; font-weight: bold; text-align: center; line-height: 1; background: #fff; }
.flow-step p span{ margin-left: 3px; font-size: 2.4rem; }
.flow-text{ width: 70%; margin: 15px 0px; padding: 20px 25px; text-align: left; border: 1px #efefef solid; border-radius: 3px; background: #fff; }

@media only screen and ( max-width: 1119px ){
  .flow{ padding: 80px 15px; }
  .flow-box{ width: auto; margin: 0px; }
  .flow-box::after{ left: 16%; }
  .flow-step{ width: 34%; margin: 20px 2% 20px 0px; }
  .flow-step p span{ margin-left: 3px; font-size: 2.2rem; }
  .flow-step h4{ font-size: 1.7rem; }
  .flow-step p{ font-size: 1.7rem; }
  .flow-step p span{ font-size: 2.0rem; }
  .flow-text{ width: 64%; padding: 15px 20px; }
  .flow-text p{ font-size: 1.6rem; }
  .flow-text p br{ display: none; }
}

@media only screen and ( max-width: 640px ){
  .flow{ padding: 50px 10px 60px; border-top: 1px #efefef solid; border-bottom: 1px #efefef solid; background: #f6f6f6; }
  .flow h3{ margin: 0px; padding: 7.5px 0px; font-size: 1.6rem; }
  .flow-box{ flex-direction: column; min-height: auto; margin: 80px 0px 0px; border: 1px #e60012 solid; }
  .flow-box:first-of-type{ margin: 45px 0px 0px; }
  .flow-box::after{ left: 48%; bottom: -50px; font-size: 1.8rem; }
  .flow-step{ width: 100%; margin: 0px; border: none; }
  .flow-step h4{ padding: 3px 10px 0px; }
  .flow-step p{ background: #f6f6f6; }
  .flow-text{ width: 93%; margin: 10px 3.5% 15px; padding: 5px 15px; }
  .flow-text p{ margin: 12.5px 0px; font-size: 1.5rem; line-height: 1.6; }
}



/*
  fee - 料金・手数料
---------------------------------------------------------------------------------------------------- */

.fee{ padding: 100px 0px; }
.fee p.desc{ font-size: 2.0rem; font-weight: bold; text-align: center; }
.fee-box{ display: flex; flex-wrap: wrap; align-items: center; margin: 50px 5px 20px; padding: 30px 15px 15px; border: 1px #e9e9e9 solid; border-radius: 3px; background: #f6f6f6; }
.fee-box p{ width: 35%; margin: 0px; color: #1f1f1f; font-size: 1.7rem; font-weight: bold; text-align: center; line-height: 1.5; }
.fee-box dl{ width: 31.5%; margin: 0px 0.5%; }
.fee-box dl dt{ padding: 7.5px; color: #3f3f3f; font-size: 1.6rem; font-weight: bold; text-align: center; border-radius: 3px 3px 0px 0px; background: #e9e9e9; }
.fee-box dl dd{ min-height: 50px; margin: 0px; padding: 10px; color: #e60012; font-size: 1.8rem; font-weight: bold; text-align: center; border: 1px #e9e9e9 solid; border-top: 0; border-radius: 0px 0px 3px 3px; background: #f9f9f9; }
.fee-ex{ width: 100%; margin: 30px 0px 0px; }
.fee-ex h3{ width: 100%; margin: 0px 5px; padding: 7.5px 0px; color: #fff; font-size: 1.8rem; font-weight: bold; text-align: center; border-radius: 3px; background: #e60012; }
.fee-ex table{ width: 100%; margin: 10px 0px 0px; text-align: center; border-collapse: separate; border-spacing: 5px; }
.fee-ex table th{ width: 40%; padding: 20px 15px; color: #3f3f3f; font-size: 1.6rem; font-weight: bold; line-height: 1.5; border-radius: 3px; background: #e9e9e9; }
.fee-ex table th span.info{ display: block; font-size: 1.4rem; color: #5f5f5f; }
.fee-ex table th br{ display: none; }
.fee-ex table td{ width: 60%; padding: 20px 15px; font-size: 1.6rem; border: 1px #e9e9e9 solid; border-radius: 3px; background: #f9f9f9; }

@media only screen and ( max-width: 1119px ){
  .fee{ padding: 70px 15px; }
  .fee p.desc{ margin: 25px 0px 0px; font-size: 1.8rem; }
  .fee-box{ justify-content: space-between; margin: 30px 0px 20px; padding: 20px 15px 15px; }
  .fee-box p{ width: 100%; }
  .fee-box dl{ width: 49%; margin: 15px 0.5% 0px; }
  .fee-box dl dt{ font-size: 1.5rem; }
  .fee-ex{ margin: 20px 0px 0px; }
  .fee-ex h3{ margin: 0px; font-size: 1.7rem; }
  .fee-ex table th{ padding: 12.5px; font-size: 1.5rem; line-height: 1.6; }
  .fee-ex table td{ padding: 12.5px; font-size: 1.5rem; line-height: 1.6; }
}

@media only screen and ( max-width: 640px ){
  .fee{ padding: 50px 10px; }
  .fee p.desc{ margin: 20px 0px 0px; font-size: 1.6rem; }
  .fee-box{ margin: 20px 0px; padding: 20px 10px; }
  .fee-box p{ width: 100%; font-size: 1.5rem; line-height: 1.5; }
  .fee-box dl{ display: flex; flex-direction: column; align-items: center; width: 100%; margin: 10px 0px 0px; }
  .fee-box dl dt{ width: 100%; font-size: 1.4rem; border: 1px #e9e9e9 solid; border-radius: 3px 0px 0px 3px; }
  .fee-box dl dd{ width: 100%; min-height: auto; margin: 0px; padding: 7.5px; font-size: 1.5rem; border: 1px #e9e9e9 solid; border-radius: 0px 3px 3px 0px; }
  .fee-ex{ margin: 15px 0px 0px; }
  .fee-ex h3{ font-size: 1.6rem; }
  .fee-ex table{ border-spacing: 2px; }
  .fee-ex table th{ width: 50%; padding: 10px 5px; font-size: 1.4rem; line-height: 1.5; }
  .fee-ex table th span.none{ display: none; }
  .fee-ex table th br{ display: block; }
  .fee-ex table td{ width: 50%; padding: 10px 5px; font-size: 1.4rem; line-height: 1.5; }
  .fee-ex table td span{ display: block; color: #6f6f6f; font-size: 1.3rem; }
}



/*
  fee - 料金・手数料
---------------------------------------------------------------------------------------------------- */

.faq{ padding: 100px 0px; background: #f6f6f6; }
.faq-text{ margin: 30px 0px; }
.faq-box{ margin: 10px auto 0px; padding: 0px; border: 1px #dfdfdf solid; border-radius: 3px; text-align: left; }
.faq-box h3{ position: relative; margin: 0px; padding: 10px 35px 8px 15px; color: #303030; font-size: 1.8rem; font-weight: bold; border-radius: 3px 3px 0px 0px; background: #fff; transition: all 0.3s; }
.faq-box h3::after{ position: absolute; top: 10px; right: 20px; font-size: 2.0rem; font-family: "Font Awesome 6 Free"; content: '\f067'; color: #e60012; font-weight: 900; }
.faq-box h3 span{ display: inline-block; width: 55px; padding-right: 5px; color: #101010; font-size: 2.0rem; font-weight: bold; text-align: center; }
.faq-box h3 span::after{ content: "."; }
.faq-box h3:hover{ text-decoration: underline; }
.faq-box h3.active{ color: #fff; background: #e60012; }
.faq-box h3.active span{ color: #fff; }
.faq-box h3.active::after{ color: #ffff00; content: "\f068"; }
.faq-box h3.active:hover::after{ content: "\f068"; }
.faq-box .answer{ position: relative; padding: 10px 30px; border-top: 1px #dfdfdf solid; background: #fff; }
.faq-box .answer p{ margin: 20px 0px; font-size: 1.6rem; line-height: 1.6; }


@media only screen and ( max-width: 1119px ){
  .faq{ padding: 80px 15px; }
  .faq-text p{ font-size: 1.6rem; }
  .faq-box{ margin: 10px 0px 0px; }
  .faq-box h3{ font-size: 1.7rem; }
  .faq-box h3::after{ right: 15px; }
  .faq-box .answer{ padding: 5px 25px; }
}

@media only screen and ( max-width: 640px ){
  .faq{ padding: 50px 10px; border-top: 1px #efefef solid; }
  .faq-text{ margin: 25px 0px; }
  .faq-text p{ font-size: 1.5rem; }
  .faq-box h3{ padding: 7.5px 25px 7.5px 12px; font-size: 1.5rem; line-height: 1.3; }
  .faq-box h3::after{ right: 5px; font-size: 1.5rem; }
  .faq-box h3 span{ width: auto; font-size: 1.7rem; }
  .faq-box .answer{ padding: 5px 15px; }
  .faq-box .answer p{ margin: 15px 0px; font-size: 1.5rem; }
}




.contact{ padding: 100px 0px; border-top: 1px #efefef solid; }
.contact .in{ width: 900px; }

.confirm{ padding: 50px 0px; }
.confirm .in{ width: 800px; margin: 0px auto; }
.confirm form dl dt{ color: #6f6f6f; font-weight: 700; }
.confirm form dl dd{ padding: 12.5px; font-weight: bold; }

.thanks h3{ margin: 50px 0px 0px; font-size: 2.2rem; font-weight: bold; }
.thanks p{ margin: 25px 0px 0px; }
.thanks ul{ width: 80%; margin: 25px auto 0px; padding: 25px 25px 25px 50px; border-top: 2px #dfdfdf solid; border-bottom: 2px #dfdfdf solid; text-align: left; }
.thanks ul li{ margin: 5px 0px 0px 5px; color: #3f3f3f; font-weight: bold; list-style: circle none outside; }

@media only screen and ( max-width: 1119px ){
  .contact{ padding: 80px 15px; }
  .contact .in{ width: auto; }

  .confirm{ padding: 30px 15px 50px; }
  .confirm .in{ width: auto; margin: 0px; }
  .thanks ul{ width: 80%; max-width: 600px; }
}

@media only screen and ( max-width: 640px ){
  .contact{ padding: 50px 10px; }

  .confirm{ padding: 30px 10px 50px; }
  .confirm .in p{ font-size: 1.5rem; text-align: left; }
  .confirm .in p br{ display: none; }

  .thanks h3{ margin: 40px 0px 0px; font-size: 1.8rem; }
  .thanks p{ margin: 20px 0px 0px; }
  .thanks ul{ width: 100%; margin: 20px 0px 0px; padding: 15px; }
  .thanks ul li{ margin: 5px 0px 0px 5px; color: #3f3f3f; font-size: 1.5rem; font-weight: bold; list-style: circle none outside; }

}


form dl{ margin: 40px auto 0px; text-align: left; }
form dl dt{ margin: 20px 0px 0px; padding: 10px; font-size: 1.6rem; font-weight: bold; border-radius: 5px; line-height: 1.4; background: #efefef; }
form dl dt span{ display: inline-block; margin: 0px 7.5px 0px 0px; padding: 2.5px 7.5px; color: #fff; font-size: 1.2rem; vertical-align: top; border-radius: 3px; background-color: #ce3b2a; }
form dl dt span.nini{ background-color: #a0a0a0; }
form dl dd{ position: relative; margin: 10px 0px 0px; }
form dl dd span{ color: #808080; font-size: 1.4rem; }
form input[type="text"],
form input[type="email"]{ width: 100%; padding: 7.5px 12.5px; font-size: 1.7rem; border: 2px #dfdfdf solid; border-radius: 3px; outline: 0; }
form select{ padding: 7.5px; font-size: 1.6rem; border: 2px #dfdfdf solid; border-radius: 3px; outline: 0; }
form textarea{ width: 100%; height: 300px; margin: 0px; padding: 7.5px 12.5px; font-size: 1.8rem; border: 2px #dfdfdf solid; border-radius: 3px; outline: 0; }
form input[type="text"]:hover,
form input[type="email"]:hover,
form select:hover,
form textarea:hover{ border: 2px #e60012 solid; background-color: #f6f6f6; }
form input[type="text"]:focus,
form input[type="email"]:focus,
form select:focus,
form textarea:focus{ border: 2px #00aa00 solid; background-color: #ffffcc; }
::placeholder{ color: #9f9f9f; font-size: 1.7rem; font-weight: normal; }
form input[type="text"]:focus::placeholder,
form input[type="email"]:focus::placeholder,
form textarea:focus::placeholder{ opacity: 0; }

form ul{ margin: 15px 0px 0px 0px; }
form ul li{ margin: 5px 0px 0px; }

form label{ font-size: 1.7rem; cursor: pointer; }
form label:hover{ color: #e60012; text-decoration: underline; }

form input[type=radio],
form input[type=checkbox]{ display: inline-block; width: 18px; height: 18px; margin: 0px 0px 0px 10px; vertical-align: top; cursor: pointer; opacity: 0; }

form input + label::before{ display: inline-block; margin-left: -12px; margin-bottom: 4px; padding-right: 7px; content: "\f0c8"; color: #afafaf; font-size: 2.0rem; font-weight: 400; font-family: "Font Awesome 6 Free";  line-height: 1; vertical-align: middle; }
form input[type="radio"] + label::before{ content: "\f111"; }

form input:checked + label::before{ content: "\f14a";  color: #e60012; font-weight: 900; }
form input[type="radio"]:checked + label::before{ content: "\f058"; }

form input[type="radio"]:hover + label,
form input[type="radio"]:focus + label,
form input[type="checkbox"]:hover + label,
form input[type="checkbox"]:focus + label{ color: #e60012; font-weight: bold; text-decoration: underline; }

form input[type="radio"]:hover + label::before,
form input[type="radio"]:focus + label::before,
form input[type="checkbox"]:hover + label::before,
form input[type="checkbox"]:focus + label::before{ color: #e60012; }

form input[type="radio"]:disabled{ cursor: auto; }
form input[type="radio"]:disabled + label{ color: #9f9f9f; text-decoration: line-through; cursor: auto; }
form input[type="radio"]:disabled:hover + label{ color: #9f9f9f; font-weight: normal; }
form input[type="radio"]:disabled + label:before{ content: "\f111"; color: #dfdfdf; font-weight: 900; }

form button[type=submit]{ display: block; width: 500px; margin: 50px auto 0px; padding: 15px 0px 12px; color: #fff; font-size: 1.8rem; font-weight: 700; text-align: center; border: 2px #e60012 solid; border-radius: 3px; background: #e60012; cursor: pointer; transition: all 0.3s; }
form button[type=submit]:after{ display: inline-block; padding-left: 10px; font-family: "Font Awesome 6 Free"; content: '\f101'; color: #fff; font-size: 1.8rem; font-weight: 900; }
form button[type=submit]:hover{ color: #e60012; background: #fff; }
form button[type=submit]:hover::after{ color: #e60012; }

form input.typeother{ width: calc( 100% - 15px ); margin: 5px 0px 0px 15px; }

form input.mini{ width: 150px; margin-right: 10px; }

form span.attention{ display: inline; }
.confirm form button[type="submit"]{ margin-top: 0px; }

@media only screen and ( max-width: 1119px ){
  form input[type=radio],
  form input[type=checkbox]{ width: 16px; height: 16px; }
  form button[type=submit]{ width: 100%; margin: 50px 0px 0px; font-size: 1.7rem; }
  form span.attention{ display: block; margin: 2.5px 0px 0px 35px; }
  .confirm form dl dt{ color: #6f6f6f; }
}


@media only screen and (max-width: 640px){
  form dl{ margin: 30px 0px 0px; }
  form dl dt{ font-size: 1.5rem; }
  form dl dd{ font-size: 1.5rem; }
  form dl dt span{ font-size: 1.2rem; }
  form input[type="text"]{ font-size: 1.5rem; }
  form textarea{ height: 200px; font-size: 1.5rem; }
  form label{ font-size: 1.5rem; }
  form input[type=radio], form input[type=checkbox]{ margin: 0px 0px 0px 7.5px; }
  form button[type=submit]{ margin: 30px 0px 0px; padding: 10px 0px; font-size: 1.5rem; }
  ::placeholder{ font-size: 1.5rem; }
  .confirm form dl{ margin: 30px 0px 0px; }
  .confirm form dl dd{ margin: 0px; padding: 15px 10px 0px; font-size: font-weight: bold; }
}


/* Z-INDEX */
.formError { z-index: 990; }
.formError .formErrorContent { z-index: 991; }
.formError .formErrorArrow { z-index: 996; }
.ui-dialog .formError { z-index: 5000; }
.ui-dialog .formError .formErrorContent { z-index: 5001; }
.ui-dialog .formError .formErrorArrow { z-index: 5006; }
.inputContainer { position: relative; float: left; }
.formError { position: absolute; top: 300px; left: 300px; display: block; cursor: pointer; text-align: left; }
.formError.inline { position: relative; top: 0; left: 0; display: inline-block; }
.ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none; }
.formError .formErrorContent { width: 100%; background: #ee0101; position:relative; color: #fff; min-width: 100px; font-size: 11px; border: 2px solid #ddd; box-shadow: 0 0 6px #000;
  -moz-box-shadow: 0 0 6px #000;  -webkit-box-shadow: 0 0 6px #000; -o-box-shadow: 0 0 6px #000;padding: 4px 10px 4px 10px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; }
.formError.inline .formErrorContent { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; border: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; }
.greenPopup .formErrorContent { background: #33be40; }
.blackPopup .formErrorContent { background: #393939; color: #FFF; }
.formError .formErrorArrow { width: 15px; margin: -2px 0 0 20px; position:relative; }
body[dir='rtl'] .formError .formErrorArrow, body.rtl .formError .formErrorArrow { margin: -2px 13px 0 0; }
.formError .formErrorArrowBottom { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; margin: 0px 0 0 12px; top:2px; }
.formError .formErrorArrow div { border-left: 2px solid #ddd; border-right: 2px solid #ddd; box-shadow: 0 2px 3px #444; -moz-box-shadow: 0 2px 3px #444; -webkit-box-shadow: 0 2px 3px #444; -o-box-shadow: 0 2px 3px #444; font-size: 0px; height: 1px; background: #ee0101; margin: 0 auto; line-height: 0; font-size: 0; display: block; }
.formError .formErrorArrowBottom div { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; }
.greenPopup .formErrorArrow div { background: #33be40; }
.blackPopup .formErrorArrow div { background: #393939; color: #FFF; }
.formError .formErrorArrow .line10 { width: 13px; border: none; }
.formError .formErrorArrow .line9 { width: 11px; border: none; }
.formError .formErrorArrow .line8 { width: 11px; }
.formError .formErrorArrow .line7 { width: 9px; }
.formError .formErrorArrow .line6 { width: 7px; }
.formError .formErrorArrow .line5 { width: 5px; }
.formError .formErrorArrow .line4 { width: 3px; }
.formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; }
.formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; }
.formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; }
form .formError + input, form .formError + select, form .formError + textarea{ border-color: #c8151e; background-color: #fff4f4; }
form .formError + input::placeholder, form .formError + textarea::placeholder{ color: #c8151e; }




/*----------------------------------------------------------------------------------------------------

  Footer / フッター

----------------------------------------------------------------------------------------------------　*/

#footer{ width: 100%; margin: 20px 0px 0px; padding: 50px 0px 0px; border-top: 1px #dfdfdf solid; background: #f6f6f6; }

#footer .info{ width: 800px; margin: 0px auto; }
#footer .info dl{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
#footer .info dl dt img{ width: auto; height: 70px; }
#footer .info dl dd{ margin-left: 10px; color: #1f1f1f; font-size: 1.6rem; font-weight: bold; text-align: left; }
#footer .info p:last-of-type{ width: 100%; margin: 15px 0px 0px; padding: 15px; color: #6f6f6f; font-size: 1.5rem; line-height: 1.6; border: #f0f0f0 solid; border-radius: 3px; background: #fff; }

#footer .copyright{ margin: 30px 0px 0px; background: #e60012; }
#footer .copyright-in{ display: flex; align-items: center; justify-content: space-between; width: 1000px; margin: 0px auto; padding: 10px 0px; }
#footer .copyright ul{ display: flex; justify-content: center; margin: 0px; }
#footer .copyright ul li a{ margin: 0px 10px; color: #fff; font-size: 1.4rem; text-decoration: none; }
#footer .copyright ul li:not(:last-of-type)::after{ content: "｜"; color: #dfdfdf; }
#footer .copyright ul li a:hover{ color: #ffff99; text-decoration: underline; }
#footer .copyright p{ margin: 0px; color: #fff; font-size: 1.4rem; font-weight: 500; }

#confirm #footer{ margin: 0px; padding: 0px; }
#confirm #footer .info{ display: none; }
#confirm #footer .copyright{ margin: 0px; background: none transparent; }
#confirm #footer .copyright-in{ justify-content: center; width: auto; margin: 0px auto; padding: 10px 0px; }
#confirm #footer .copyright ul{ display: none; }
#confirm #footer .copyright p{ color: #6f6f6f; font-size: 1.4rem; text-align: center; }

@media only screen and ( max-width: 1119px ){
  #footer{ margin: 50px 0px 0px; padding: 30px 0px 0px; }
  #footer .info{ width: auto; max-width: 800px; }
  #footer .info dl dd{ font-size: 1.5rem; line-height: 1.5; }
  #footer .info p:last-of-type{ width: calc( 100% - 30px ); margin: 15px 15px 0px; line-height: 1.5; }

  #footer .copyright-in{ width: auto; margin: 0px 10px; }
  #footer .copyright ul li a{ margin: 0px 2.5px; font-size: 1.3rem; }
  #footer .copyright p{ font-size: 1.3rem; }
}

@media only screen and ( max-width: 640px ){
  #footer{ margin: 30px 0px 0px; padding: 30px 0px 50px; }
  #footer .info dl{ flex-direction: column; }
  #footer .info p{ margin: 0px; }
  #footer .info dl dd{ margin: 8px 0px 0px; color: #6f6f6f; font-size: 1.3rem; }
  #footer .info p:last-of-type{ width: calc( 100% - 20px ); margin: 10px 10px 0px; font-size: 1.4rem; text-align: left; }
  #footer .info p:last-of-type br{ display: none; }

  #footer .copyright{ margin: 10px 0px 0px; background: transparent; }
  #footer .copyright-in{ display: block; margin: 0px; padding: 0px; }
  #footer .copyright ul{ width: 100%; }
  #footer .copyright ul li a{ color: #6f6f6f; text-decoration: underline; }
  #footer .copyright ul li a:hover{ color: #e60012; }
  #footer .copyright p{ margin: 15px 0px 0px; padding: 7.5px 0px; background: #9f9f9f; }

  #confirm #footer .copyright p{ margin: 0px; padding: 0px; background: transparent; }

}

.sp-bar{ display: none; }

@media only screen and ( max-width: 640px ){
  .sp-bar{ position: fixed; display: block; bottom: 0px; width: 100%; height: 50px; margin: 0px; padding: 0px; overflow: hidden; z-index: 9999; }
  .sp-bar ul{ display: flex; }
  .sp-bar ul li{ width: 50%; }
  .sp-bar ul li a{ display: block; padding: 7px 0px 20px; color: #fff; font-size: 1.3rem; font-weight: bold; text-decoration: none; line-height: 1.3; text-align: center; border-right: 1px #fff dotted; cursor: pointer; background-color: #e60012; }
  .sp-bar ul li:last-of-type a{ background-color: #00cc00; }
  .sp-bar ul li a::before{ display: block; margin: 0px; content: '\f0e0'; color: #fff; font-size: 1.6rem; font-weight: 500; font-family: "Font Awesome 5 Free"; }
  .sp-bar ul li:last-of-type a::before{ content: "\f3cd"; font-weight: 900; }

  #confirm .sp-bar{ display: none; }
  #thanks .sp-bar{ display: none; }
}

/*----------------------------------------------------------------------------------------------------

  Pagetop / ページトップに戻る

----------------------------------------------------------------------------------------------------　*/

#pagetop{ position: fixed; bottom: 40px; right: 20px; font-size: 1.4rem; font-weight: bold; line-height: 1.4; text-align: center; cursor: pointer; }
#pagetop a{ display: block; width: 40px; height: 40px; line-height: 36px; color: #fff; font-weight: bold; text-decoration: none; border: 2px #e60012 solid; border-radius: 3px; background: #e60012; }
#pagetop a::before{ font-family: "Font Awesome 6 Free"; content: '\f106'; color: #fff; font-size: 2.5rem; font-weight: 900; }
#pagetop a:hover{ background-color: #fff; }
#pagetop a:hover::before{ color: #e60012; }

#confirm #pagetop{ display: none; }
#confirm #pagetop a{ display: none; }

@media only screen and ( max-width: 1119px ){
  #pagetop,
  #pagetop a{ display: none; }
}