@charset "UTF-8";

/******************************************************************************
*
* [共通]ヘッダー
*
******************************************************************************/

/*トップバー*/

.topbar {
  background: #fff;
  padding: 15px 0;
}

.topbar .tb {
  width: 95%;
  max-width: 550px;
  margin: auto;
}

/*メイン*/

.hero_area {
  width: 100%;
  height: auto;
  position: relative;
}

header.hero_area:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 18px solid #161320;
  border-top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.hero_area::before {
  content: "";
  display: block;
  padding-top: 670px;
}

.hero_area .hero_area_inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/main/fv.jpg);
  background-size: cover;
  background-position: center;
}

.hero_area .hero_area_inner .wrap {
  height: 100%;
  position: relative;
}

/*ボタン*/

.hero_area .hero_area_inner .wrap .btn {
  width: 70%;
  position: absolute;
  bottom: 5.5%;
  left: 0;
}

/*実績*/

#achi {
  background-image: url(../images/bg1.jpg);
  background-size: cover;
  background-position: center top;
  padding: 30px 0 20px;
}

#achi .lead {
  width: 82%;
  max-width: 500px;
  margin: 0 auto 50px;
}

#achi .list {
  width: 85%;
  margin: auto;
}

/******************************************************************************
*
* [共通]プロフィール
*
******************************************************************************/

#prof1 {
  background-image: url(../images/prof/ava.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  padding-top: 130px;
}

#prof1 .lead {
  position: absolute;
  top: -70px;
  left: -10px;
  width: 100%;
  width: 700px;
}

#prof1 .wrap,
#prof1 .middle_wrap {
  position: relative;
}

#prof1 .name {
  width: 220px;
  position: relative;
}

#prof1 p {
  width: 50%;
  margin-top: 50px;
}

/*---------------------
* 実績
---------------------*/

#prof2 {
  background: linear-gradient(90deg, rgba(17, 21, 35, 1) 0%, rgba(28, 37, 62, 1) 100%);
}

#prof2 .lead {
  width: 360px;
  margin: 0 auto 50px;
}

/*1*/

#prof2 .box1 .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#prof2 .box1 .list li {
  width: 31%;
}

#prof2 .box1 .list li:nth-child(n + 4) {
  margin-top: 30px;
}

/*2*/

#prof2 .box2 {
  margin-top: 50px;
}

/******************************************************************************
*
* [共通]CTA
*
******************************************************************************/

article.cta {
  background-image: url(../images/bg2.jpg);
  background-size: cover;
  background-position: center;
  padding-bottom: 30px;
}

article.cta .btn {
  width: 80%;
  max-width: 600px;
  margin: auto;
}

/*---------------------
* CTA1
---------------------*/

#cta1 .main {
  width: 90%;
  margin: 0 auto -20px;
}

/*---------------------
* CTA2
---------------------*/

#cta2 .main {
  max-width: 1100px;
  margin: auto;
  margin-bottom: 30px;
}

/*---------------------
* カウントダウン
---------------------*/

.cd_area {
  background: #134f5c;
  padding: 20px 0;
  position: relative;
}

.cd_area:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 18px solid #134f5c;
  border-top: 0;
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  margin: auto;
}

.cd_area .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cd_area .limit {
  width: 190px;
  margin-right: 20px;
}

.cd_area .cd_main {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  position: relative;
  top: 5px;
}

.cd_area .cd_main span {
  display: inline-block;
  height: 70px;
  line-height: 62px;
}

.cd_area .cd_main span.s {
  font-size: 50px;
  width: 80px;
  color: #134f5c;
  margin: 0 10px;
  border-radius: 5px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(227, 227, 227, 1) 24.82%, rgba(204, 204, 204, 1) 50%, rgba(230, 230, 230, 1) 50%, rgba(255, 255, 255, 1) 100%);
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

/******************************************************************************
*
* [共通]テキスト1
*
******************************************************************************/

#text1,
#text6 {
  background-image: url(../images/bg3.jpg);
  background-size: 100%;
  background-position: center top;
}

#text1 .ava {
  width: 90%;
  margin: auto;
}

#text1 .ava aside {
  font-size: 14px;
  color: #666;
  margin-top: -10px;
  position: relative;
  left: 50px;
}

#text1 .txt {
  width: 75%;
  max-width: 460px;
  margin: 50px 0 0;
  position: relative;
  left: 100px;
}

/*テキスト文字サイズ*/

.box p {
  font-size: 22px;
}

/******************************************************************************
*
* [共通]テキスト2・テキスト8
*
******************************************************************************/

article.common_txt .wrap {
  position: relative;
}

/*見出し*/

article.common_txt .lead {
  width: 100%;
}

/*---------------------
* テキスト
---------------------*/

article.common_txt .box {
  background-image: url(../images/bg7.jpg);
  padding: 80px;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

article.common_txt .box::before {
  content: "";
  display: block;
  width: 95%;
  width: -webkit-calc(100% - 60px);
  width: calc(100% - 60px);
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  border-left: solid 2px #d7c194;
  border-right: solid 2px #d7c194;
  pointer-events: none;
}

/*---------------------
* 内部画像
---------------------*/

.t2_1 {
  width: 350px;
  float: right;
}

.t2_2 {
  width: 300px;
  float: right;
}

.t2_3,
.t2_4 {
  width: 100%;
  max-width: 600px;
}

.t2_5 {
  width: 75%;
  margin: 50px auto;
}

.t2_6 {
  width: 80%;
  max-width: 420px;
  margin: 30px 0;
}

#text8 .dream {
  width: 360px;
  margin-top: 40px;
}

#text8 .name {
  width: 180px;
  margin-left: auto;
  margin-top: 50px;
}

/******************************************************************************
*
* [共通]テキスト3
*
******************************************************************************/

#text3 {
  background-color: #fff;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
}

#text3 .lead {
  width: 100%;
  max-width: 650px;
  margin: 0 auto 60px;
}

#text3 .box {
  width: 80%;
  margin: auto;
}

#text3 .arrow {
  width: 300px;
  margin: 40px auto 0;
}

/*---------------------
* 内部画像
---------------------*/

.t3_1 {
  width: 85%;
  margin: 100px auto;
}

.t3_2 {
  width: 85%;
}

.t3_3 {
  width: 80%;
  margin: 10px 0;
}

/******************************************************************************
*
* [共通]テキスト4
*
******************************************************************************/

#text4 {
  background-color: #0c4f5b;
  background-image: url(../images/bg5.jpg);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

#text4 .lead {
  width: 90%;
  max-width: 700px;
  margin: 0 auto 80px;
}

/*---------------------
* ボックス
---------------------*/

#text4 .box {
  padding: 80px;
  background: #fff;
  position: relative;
}

#text4 .box::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 18px solid #fff;
  border-top: 0;
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  margin: auto;
}

/*---------------------
* 内部画像
---------------------*/

.t4_1 {
  width: 330px;
  float: right;
}

/******************************************************************************
*
* [共通]テキスト5
*
******************************************************************************/

#text5 {
  background-color: #ed5a2f;
  background-image: url(../images/bg6.jpg);
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

/*---------------------
* ボックス
---------------------*/

#text5 .box {
  padding: 0 80px;
  background-image: url(../images/bg9b.png);
  background-size: 100%;
}

/*---------------------
* 内部画像
---------------------*/

.t5_1 {
  margin-bottom: -5px;
}

.t5_3 {
  width: 80%;
  margin: 60px auto;
}

.t5_4 {
  width: 65%;
  margin: 50px 0;
}

/******************************************************************************
*
* [共通]テキスト6
*
******************************************************************************/

#text6 .box dl.inner {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
}

#text6 .box dl.inner dd {
  padding: 50px 80px 80px;
  background: #fff;
}

#text6 .box dl.inner:last-child {
  margin-top: 80px;
}

/*---------------------
* 内部画像
---------------------*/

.t6_1 {
  width: 80%;
  margin: 0 auto 50px;
}

.t6_3 {
  width: 300px;
  float: right;
}

.t6_4 {
  width: 70%;
  margin: 100px auto;
}

.t6_6 {
  width: 420px;
  margin: 40px 0;
}

.t6_9 {
  width: 80%;
  max-width: 420px;
  margin: 50px 0;
}

/******************************************************************************
*
* [共通]テキスト7
*
******************************************************************************/

#t7_lead {
  background-image: url(../images/bg10.jpg);
  background-size: cover;
  background-position: center;
  padding: 50px 0;
}

#t7_lead h2 {
  width: 90%;
  max-width: 660px;
  margin: auto;
}

/*メイン*/

#text7 {
  background: #fff;
}

#text7 .lead {
  width: 90%;
  max-width: 650px;
  margin: 0 auto 60px;
}

#text7 .box {
  width: 80%;
  margin: auto;
}

/*---------------------
* 内部画像
---------------------*/

.t7_1 {
  margin-bottom: 50px;
}

/******************************************************************************
*
* [共通]声
*
******************************************************************************/

#voice {
  background-image: url(../images/bg1.jpg);
  background-size: cover;
}

#voice .lead {
  width: 80%;
  max-width: 400px;
  margin: 0 auto 60px;
}

/*---------------------
* リスト
---------------------*/

#voice .list {
  width: 80%;
  margin: auto;
}

#voice .list dl {
  background-color: #fff;
  background-image: url(../images/bg8.jpg);
  background-size: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 50px;
  position: relative;
}

#voice .list dl::before {
  content: "";
  display: block;
  width: 95%;
  width: -webkit-calc(100% - 30px);
  width: calc(100% - 30px);
  height: 95%;
  height: -webkit-calc(100% - 30px);
  height: calc(100% - 30px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  border: solid 2px #d7c194;
  pointer-events: none;
}

#voice .list dl:nth-child(n + 2) {
  margin-top: 80px;
}

#voice .list dl dd {
  font-size: 18px;
  margin-top: 30px;
}

/******************************************************************************
*
* [共通]レスポンシブ対応
*
******************************************************************************/

/*960px以下*/

@media only screen and (max-width: 960px) {
  /*---------------------
    * [共通]ヘッダー
    ---------------------*/

  .hero_area::before {
    padding-top: 130%;
  }

  .hero_area .hero_area_inner {
    background-image: url(../images/main/fv_sp.jpg);
  }

  .hero_area .hero_area_inner .wrap .btn {
    width: 90%;
    bottom: 4.5%;
    right: 0;
    margin: auto;
  }

  /*---------------------
    * [共通]テキスト
    ---------------------*/

  #text1 .txt {
    left: 0;
  }
}

/*644px以下*/

@media only screen and (max-width: 644px) {
  /*---------------------
    * [共通]FV
    ---------------------*/

  .topbar {
    padding: 10px 0;
  }

  header.hero_area:after {
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom: 12px solid #161320;
  }

  /*実績*/

  #achi {
    padding: 20px 0 10px;
    background-position: center;
  }

  #achi .lead {
    margin: 0 auto 30px;
  }

  #achi .list {
    width: 100%;
  }

  /*---------------------
    * [共通]プロフィール
    ---------------------*/

  #prof1 {
    background: #fff;
    padding-top: 0;
  }

  #prof1 .name {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }

  #prof1 p {
    width: 95%;
    margin: auto;
    margin-top: 20px;
  }

  /*実績*/

  #prof2 .lead {
    width: 200px;
    margin: 0 auto 30px;
  }

  #prof2 .box1 .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #prof2 .box1 .list li {
    width: 48.5%;
  }

  #prof2 .box1 .list li:nth-child(n + 3) {
    margin-top: 15px;
  }

  #prof2 .box2 {
    margin-top: 15px;
  }

  /*---------------------
    * [共通]CTA
    ---------------------*/

  article.cta .btn {
    width: 90%;
  }

  #cta1 .main {
    width: 100%;
    margin: 0 auto -10px;
  }

  #cta2 .main {
    margin-bottom: 20px;
  }

  /*カウントダウン*/

  .cd_area {
    padding: 12px 0;
  }

  .cd_area:after {
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    border-bottom: 12px solid #134f5c;
    top: -11px;
  }

  .cd_area .limit {
    width: 100px;
    margin-right: 7px;
  }

  .cd_area .cd_main {
    font-size: 16px;
    top: 3px;
  }

  .cd_area .cd_main span {
    height: 35px;
    line-height: 33px;
  }

  .cd_area .cd_main span.s {
    font-size: 24px;
    width: 35px;
    margin: 0 4px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  }

  /*---------------------
    * [共通]テキスト1
    ---------------------*/

  #text1,
  #text6 {
    background-size: 200%;
  }

  #text1 .ava {
    width: 100%;
    margin: auto;
  }

  #text1 .ava aside {
    font-size: 11px;
    margin-top: -2px;
    left: 21px;
  }

  #text1 .txt {
    margin: 30px 0 0;
    left: 20px;
  }

  /*テキスト文字サイズ*/

  .box p {
    font-size: 16px;
  }

  /*---------------------
    * [共通]テキスト2・テキスト8
    ---------------------*/

  article.common_txt::before {
    height: 350px;
  }

  /*テキスト*/

  article.common_txt .box {
    background-image: url(../images/bg7.jpg);
    padding: 30px 18px;
    position: relative;
  }

  article.common_txt .box::before {
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
    border-left-width: 1px;
    border-right-width: 1px;
  }

  /*内部画像*/

  .t2_1 {
    width: 100px;
    position: relative;
    top: -25px;
  }

  .t2_2 {
    width: 95px;
    margin-right: 0;
    position: relative;
    top: -5px;
  }

  .t2_5 {
    width: 85%;
    margin: 40px auto;
  }

  .t2_6 {
    margin: 18px 0;
  }

  #text8 .dream {
    width: 180px;
    margin-top: 25px;
  }

  #text8 .name {
    width: 100px;
    margin-top: 20px;
  }

  /*---------------------
    * [共通]テキスト3
    ---------------------*/

  #text3 {
    background-size: 20px 20px;
  }

  #text3 .lead {
    margin: 0 auto 40px;
  }

  #text3 .box {
    width: 95%;
  }

  #text3 .arrow {
    width: 200px;
    margin: 20px auto 0;
  }

  .t3_1 {
    width: 95%;
    margin: 50px auto;
  }

  .t3_2 {
    width: 100%;
  }

  .t3_3 {
    width: 100%;
  }

  /*---------------------
    * [共通]テキスト4
    ---------------------*/

  #text4 {
    background-size: 150%;
    background-position: left top;
  }

  #text4 .lead {
    margin: 0 auto 40px;
  }

  #text4 .box {
    padding: 30px 15px;
  }

  #text4 .box::before {
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 15px solid #fff;
    top: -14px;
  }

  .t4_1 {
    width: 100px;
    margin-right: -5px;
  }

  /*---------------------
    * [共通]テキスト5
    ---------------------*/

  #text5 {
    background-size: 200%;
  }

  #text5 .box {
    padding: 0 20px;
  }

  .t5_1 {
    margin-bottom: -2px;
  }

  .t5_3 {
    width: 90%;
    margin: 40px auto;
  }

  .t5_4 {
    width: 100%;
    margin: 30px 0;
  }

  /*---------------------
    * [共通]テキスト6
    ---------------------*/

  #text6 .box dl.inner {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }

  #text6 .box dl.inner:last-child {
    margin-top: 50px;
  }

  #text6 .box dl.inner dd {
    padding: 30px 15px;
  }

  .t6_1 {
    width: 100%;
    margin: 0 auto 30px;
  }

  .t6_3 {
    width: 100px;
  }

  .t6_4 {
    width: 80%;
    margin: 50px auto;
  }

  .t6_6 {
    width: 90%;
    margin: 30px 0;
  }

  .t6_9 {
    width: 87%;
    margin: 30px 0;
  }

  /*---------------------
    * [共通]テキスト7
    ---------------------*/

  #t7_lead {
    padding: 40px 0;
  }

  #text7 .lead {
    margin: 0 auto 40px;
  }

  #text7 .box {
    width: 95%;
  }

  .t7_1 {
    margin-bottom: 30px;
  }

  /*---------------------
    * [共通]声
    ---------------------*/

  #voice {
    background-image: url(../images/bg1.jpg);
    background-size: cover;
  }

  #voice .lead {
    width: 240px;
    margin: 0 auto 40px;
  }

  /*リスト*/

  #voice .list {
    width: 100%;
  }

  #voice .list dl {
    background-size: 150%;
    padding: 22px;
  }

  #voice .list dl::before {
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
    height: -webkit-calc(100% - 15px);
    height: calc(100% - 15px);
    border-width: 1px;
  }

  #voice .list dl:nth-child(n + 2) {
    margin-top: 30px;
  }

  #voice .list dl dd {
    font-size: 14px;
    margin-top: 20px;
  }
}

/*375px以下*/

@media only screen and (max-width: 375px) {
}

/*360px以下*/

@media only screen and (max-width: 360px) {
}

/*330px以下*/

@media only screen and (max-width: 330px) {
}

/* メールフォーム追加 */

.area1 {
  width: 60%;
  position: absolute;
  left: 0;
  bottom: 5%;
}
.area1 li,
.area2 li,
.area3 li {
  margin: 20px 0 0;
}

.area2 {
  width: 80%;
  margin: 20px auto 0;
}
.area3 {
  width: 60%;
  margin: 20px auto 0;
}

input[type="email"] {
  width: 100%;
  padding: 15px;
  border: solid 1px #ccc;
  font-size: 170%;
  text-align: center;
}
::-webkit-input-placeholder {
  color: #333;
}
::-moz-placeholder {
  color: #333;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #333;
}

/* スマホ用のスタイル */
@media screen and (max-width: 960px) {
  .area1 {
    width: 100%;
    bottom: 2%;
  }
  .area2,
  .area3 {
    width: 100%;
    margin: 30px 0 0;
  }
  .area2 li {
    margin: 10px 0 0;
  }
  .area3 li {
    margin: 25px 0 0;
  }
  input[type="email"] {
    font-size: 140%;
  }
}

@media only screen and (max-width: 644px) {
  input[type="email"] {
    font-size: 100%;
  }
}