@charset "utf-8";

#top {
  position: relative;
  overflow: hidden;
}
.fv {
  height: 100vh;
  margin-bottom: 18rem;
}

.slogan {
  width: 42%;
  position: relative;
}

.slogan_item {
  width: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
.catchcopy {
  font-size: 1.6vw;
}
.appli_sub_name {
  font-size: 1vw;
  margin-bottom: 1.6rem;
  font-weight: 400;
}
.appli_name {
  font-size: 2vw;
  margin: 0 auto;
  border: 2px var(--main-color) solid;
  padding: 0 2rem;
  display: inline-block;
  padding: 0 2.1rem;
}

.slogan_item P {
  color: var(--main-color);
}
.slogan_item P:not(:first-of-type) {
  font-weight: 500;
}

.mv_img {
  width: 58%;
}

.mv_img img {
  object-fit: cover;
  height: 100vh;
  object-position: 35% 0;
}

.text{
  font-size: 3rem;
  line-height: 2;
  text-align: center;
  font-weight: 500;
  color: var(--main-color);
}

.slogan_item .text {
  font-size: 1.5vw;
  margin: 7rem 0 10rem 0;
}

.button_slogan a {
  margin: 0 auto;
  padding: 1em 3.2em;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  background-color:#444444;
  transition: 0.5s;
  border-radius: 6px;
  line-height: 1.5em;
  text-align: center;
  display: inline-block;
  font-size: 0.83vw;
}


h2 {
  color: var(--main-color);
  font-size: 3.6rem;
  position: relative;
  padding-top: 15rem;
  text-align: center;
  font-weight: 500;
}

h2:before {
  position: absolute;
  bottom: -25px;
  left: calc(50% - 36px);
  width: 70px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #E5E5E5;
}

h2::after {
  color: var(--main-color);
	content: attr(data-ja);
  display: block;
  font-size: var(--subtitle);
  letter-spacing: 0.3em;
  margin-top: 0.5rem;
  margin-bottom: 10rem;
}

h3 {
  color: #707070;
  text-align: center;
  font-size: var(--subtitle);
  font-weight: 500;
}




/* こんなお悩み、お持ちではありませんか？ */
#introduction {
  max-width: 70rem;
  margin: 0 auto;
}

.check {
  margin-top: 6rem;
  font-size: var(--subtitle);
}

.check p {
  width: calc(100% - 3rem);
}

#introduction li {
  color: #707070;
  max-width: 53rem;
  margin: 0 auto;
	line-height:2.0em;
	border-bottom: 1px solid #ccc;
	list-style-position: outside;
  padding: 1.1rem 0;
  font-weight: 500;
}

.check_icon {
  width: 2rem;
  margin-right: 1rem;
}

.check_icon img {
  width: auto;
  display: inline-block;
}


/* 三角 */
/*基本の吹き出し*/
#introduction {
  position: relative;
  background: #fff;
  padding-bottom: 18rem;
}
#introduction:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 60px 40px 0 40px;
}


/* その悩み、オンライントレーニングアプリ「リンクパートナー」で解決！ */
#support {
  background-color: #F7F8F8;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 12rem 0;
}

.support-text .text {
  width: 75%;
  margin: 0 auto;
  padding-bottom: 1rem;
  border-bottom: 1px solid #928F7A;
}

.support-text-p {
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 2em;
  margin: 5.5rem 0 9rem 0;
  text-align: center;
}


/* リンクパートナーとは？ */

.about_p {
  font-size: 2rem;
  line-height: 2;
  text-align: center;
  font-weight: 400;
  margin-bottom: 10rem;
}
.wrap {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5rem;
}

.group .flex:nth-of-type(2) {
  flex-direction: row-reverse;
}

.wrap img {
  display: block;
  width: 49%;
}
.wrap .box {
  padding: 0 2.2rem;
  width: 49%;
  align-items: center;
}
.wrap .box h3 {
  padding-bottom: 3rem;
}
.wrap .box p {
  color: #707070;
  font-weight: 400;
}
.col {
  margin-bottom: 10rem;
}

.about-title {
  font-size: 18px;
}

.about-text {
  font-size: 16px;
}



/* 投稿ページ */
.lower-title {
  font-size: 2rem;
  text-align: start;
  background: none;
  color: var(--main-color);
  margin: 2rem 0 4rem;
}
.page_title {
  background-color: transparent;
}

.page_h3 {
  text-align: start;
}
.pagination {
  display: flex;
  justify-content: center;
  padding-top: 10rem;
}
.pagination span,
.pagination a {
  padding: 1rem 2rem;
  color: var(--main-color);
}
.pagination a.inactive {
  color: var(--main-color);
  border: 1px solid var(--main-color);

}
.pagination .current {
  color: #fff;
  background-color: var(--main-color);
}
.pagination a.inactive,
.pagination .current {
  margin: 0 1rem;
}




/* お客様の声 */
#voice .voice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#voice .voice_item {
  background-color: var(--color-gray);
  padding: 5rem;
  width: calc(( 100% / 2) - 1rem );
  margin-bottom: 2rem;
}



/* お客様の声(Coming Soon) */
.voice_text {
  height: 25rem;
  overflow: auto;
  overflow-x: hidden;
  padding-right: 1rem;
  margin-top: 2rem;
  color: #A2A2A2;
  text-align: center;
  line-height: 25rem;
  font-size: 3.6rem;
  font-weight: 400;
}


/* スクロールの幅の設定 */
.voice_text::-webkit-scrollbar {
  width: 10px;
  height: 10px;
 }
/* スクロールの背景の設定 */
.voice_text::-webkit-scrollbar-track {
  border-radius: 5px;
  background: rgba(110, 108, 108, 0.2);
}
/* ドラッグできるスクロール部の設定 */
.voice_text::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #fff;
}
.voice_image {
  width: 11.3rem;
}
.voice_image img {
  border-radius: 50%;
}
.voice_desc {
  padding-left: 1.8rem;
  width: 67%;
  font-size: var(--subtitle);
  font-weight: 400;
  color: #444444;
}
.voice_name {
  display: block;
  text-align: end;
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  padding-bottom: 1.6rem;
}


/* よくある質問 */
#faq {
  position: relative;
    z-index: 1;

}
#faq::before {
  content: "";
  display: block;
  width: 100vw;
  height: calc(100% + 20rem);
  margin-left: calc(50% - 50vw);
  position: absolute;
  top: -7rem;
  left: 0;
  z-index: -1;
}
.accordion_area li {
  border-top: 1px solid #707070;
  background: #fff;
}
.accordion_area li:last-child {
  border-bottom: 1px solid #707070;
}


details {
  background-color: var(--color-gray);
}
details.faq {
  background-color: #fff;
}
summary {
  cursor: pointer;
  display: block;
  position: relative;
  padding: 4.8rem 8.5rem;
  font-size: var(--subtitle);
}
summary.que {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--subtitle);
  font-weight: 300;
  position: relative;
  padding: 4rem 8rem;
}
summary.que::before {
  content: "Q";
  color: var(--main-color);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  top: 3.8rem;
  left: 3.5rem;
}
.ans {
  font-size: var(--subtitle);
  font-weight: 300;
  position: relative;
}
.ans::before {
  content: "A";
  color: #444444;
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 3.8rem;
}
/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}

/* 疑似要素でアイコンを表示 */
summary::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5rem;
  width: 10px;
  height: 10px;
  border-right: 2px var(--main-color) solid;
  border-bottom: 2px var(--main-color) solid;
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: .1s;
}
summary.que::after {
  top: 0;
}
summary:hover {
  opacity: 0.5;
}
summary.qua:hover {
  opacity: 1;
}
.details_content {
  padding: 0 8rem 4rem;

}
/* オープン時 */
details[open] summary::after {
  transform: rotate(226deg);
  right: 5rem;
  top: 5px;
}
details[open] summary.que::after {
  top: 0;
}
/* オープン時のアニメーション設定 */
details[open] .details_content {
  animation: fadeIn 0.5s ease;
}




/* パートナー */
/*==================================
スライダー
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
  margin:0 auto;
}
.slider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
   margin:0 10px;
}


/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 30%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  height: 56px;
  width: 56px;
  background: url(../img/icon/prev.png);
  background-size: contain;
  z-index: 1;
  opacity: 0.8;
}
.slick-prev {/*戻る矢印の位置と形状*/
  left: -7.5%;
}
.slick-next {/*次へ矢印の位置と形状*/
  right: -7.5%;
  background: url(../img/icon/next.png);
  background-size: contain;
}
/*ドットナビゲーションの設定*/
.slick-dots {
  text-align:center;
  margin:20px 0 0 0;
}
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;/*ドットボタンのサイズ*/
   height:8px;/*ドットボタンのサイズ*/
   display:block;
   border-radius:50%;
   background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
   background:#333;/*ドットボタンの現在地表示の色*/
}

#partner .flex {
  width: 80%;
  margin: 0 auto;
}
.partner li {
  width: calc(100% / 2);
  padding: 1rem;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
}

.partner li::after {
  content: "";
  display: block;
  background-image: url(../img/icon/target.png);
  width :16px;
  height: 16px;
  margin-left: 1rem
}

.partner li a {
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-thickness: 1px;
}




/*=============== 下層ページ =================*/

/* お問い合わせcontact */

.contactform {
  width: 700px;
  margin: 0 auto;
  position: relative;
}
.contact_contents {
  text-align: center;
  margin-bottom: 10rem;
  font-size: var(--subtitle);
}

/* 以下記述でinputとtextareaがフォントファミリーとフォントサイズを継承しない問題を解決 */
input,textarea {
  font-size: 100%;
  font-family: inherit;
}

.form-item input,
.form-item textarea {
  width: 100%;
  padding: 1.8rem 1rem;
  color: #707070 ;
}


.form-item textarea {
  height: 20rem;
  /* テキストエリアの謎の下余白を消す */
  display: block;
}


.contactform p:nth-child(odd) {
  font-weight: 500;
}
.contactform p:nth-child(even) {
  margin-top: 2rem;
  margin-bottom: 6rem;
  line-height: 1.5;
}
.contactform p:nth-child(8) {
  margin-top: 2rem;
  margin-bottom: 0;
}
/* テキストエリアの可変を無くす */
textarea {
	resize: none;
}

.contactform p {
  font-size: 1.6rem;
  font-weight: 300;
}

.contact_btn {
  text-align: center;
  margin-top: 10rem;
}
#mw_wp_form_mw-wp-form-25 .submit-button,.backbutton {
  width: 29rem;
  height: 5.6rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  background-color:#444444;
  transition: 0.5s;
  border-radius: 6px;
  border: none;
}
.backbutton {
  margin-right: 2rem;
}



/* 電話 */
#mw_wp_form_mw-wp-form-25 .mwform-tel-field input[type="text"] {
  width: 100px;
}


/* 必須 */
.mandatory {
  position: absolute;
  right: 73%;
  background: #444444;
  color: #ffffff;
  padding: 0.2rem 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  border-radius: 3px;
}


/* 送信ボタン */
.mw_wp_form [type=submit]:hover {
  cursor: pointer;
  opacity: 0.5;
}


.thanks_text {
  font-weight: 300;
}





/*=============== メディアクエリ =================*/

@media screen and (max-width: 1440px) {

  .slogan_item .text {
    font-size: 1.6vw;
    margin: 6rem 0 8rem 0;
  }
  .appli_name {
    font-size: 2.4vw;
  }
  .appli_sub_name {
    font-size: 1.3vw;
  }

}


@media screen and (max-width: 1200px) {


  .slogan_item .text {
    margin: 5rem 0 7rem 0;
  }
  .appli_name {
    font-size: 2.7vw;
  }
  .appli_sub_name {
    font-size: 1.4vw;
  }

}


@media screen and (max-width: 1024px) {


  header {
    height: 70px;
  }

  h2 {
    padding-top: 12rem;
  }

  /* メインビジュアル */
  .fv {
    margin-bottom: 15rem;
  }

  #introduction {
    padding-bottom: 15rem;
  }

  .slogan_item .text {
    margin: 4rem 0 6rem 0;
  }


  .appli_name {
    font-size: 3vw;
  }
  .appli_sub_name {
    font-size: 1.5vw;
  }


  /* お客様の声 */
  #voice .voice {
    flex-flow: column;
  }
  #voice .voice_item {
    padding: 3rem;
    width: 100%;
  }


  /* お客様の声(Coming Soon) */
  .voice_text {
    height: 14rem;
    line-height: 14rem;
  }

  .voice_desc {
    width: calc(100% - 11.3rem);
  }
  .support-text .text {
    width: 100%;
  }
  #partner .flex {
    display: block;
  }
  #partner li {
    width: 100%;
    justify-content: center;
  }


  /* 疑似要素でアイコンを表示 */
  summary::after {
    right: 4.5rem;
  }

  details[open] summary::after {
    right: 4.5rem;
  }


  footer .inner {
    max-width: 70%;
  }


  /*=============== 下層ページ =================*/

  /* 投稿ページ */
  .pagination {
    padding-top: 8rem;
  }


  /* お問い合わせcontact */
  .contact_btn {
    margin-top: 8rem;
  }

}


@media screen and (max-width: 920px) {

  h2 {
    font-size: 2.8rem;
    padding-top: 8rem;
  }

  /* メインビジュアル */
  .fv {
    margin-bottom: 10rem;
  }

  #introduction {
    padding-bottom: 10rem;
  }

  .slogan {
    width: 100%;
    height: 55vh;
    padding-top: 70px;
    position: relative;

  }

  .mv_img {
    width: 100%;
    height: 45vh;
  }

  .slogan_item {
    width: 100%;
    top: 55%;

  }

  .slogan_item .text {
    font-size: 3vw;
    margin: 3rem 0 4rem 0;
  }

  .mv_img img {
    height: 100%;
    object-position: 30% 40%;
  }

  .appli_name {
    font-size: 3.6vw;
  }
  .appli_sub_name {
    font-size: 1.9vw;
  }


  /* こんなお悩み、お持ちではありませんか？ */
  .text {
    font-size: 2.4rem;
  }
  #support {
    padding: 8rem 0;
  }
  .support-text-p {
    font-size: 2rem;
    margin: 3.5rem 0 7rem 0;
  }


  /* リンクパートナーとは？ */

  .wrap {
    flex-direction: column;
  }

  .wrap img {
    width: 100%;
  }

  .wrap .box {
    width: 100%;
    margin-top: 3rem;
  }

  .about_p {
    font-size: 1.7rem;
    margin-bottom: 6rem;
  }


  /* よくある質問 */
  h2::after {
    font-size: var(--normal-font-size);
  }


  summary {
    padding: 2.5rem 5rem;
  }
  summary.que {
    font-size: var(--normal-font-size);
    padding: 3rem 5rem;
  }
  summary.que::before {
    font-size: 2.8rem;
    top: 2.8rem;
    left: 1.5rem;
  }


  /* 疑似要素でアイコンを表示 */
  summary::after {
    right: 2rem;
    width: 8px;
    height: 8px;
  }

  .details_content {
    padding: 0 5rem 3rem;
  }
  .ans {
    font-size: var(--normal-font-size);
  }
  .ans::before {
    font-size: 2.8rem;
    left: 1.8rem;
  }


  /* オープン時 */
  details[open] summary::after {
    right: 2rem;
  }

  footer .inner {
    max-width: 80%;
  }


  /*=============== 下層ページ =================*/

  /* お問い合わせcontact */
  .contactform {
    width: 610px;
  }
  /* 必須 */
  .mandatory {
    right: 68%;
  }

}



@media screen and (max-width: 768px) {

  .appli_name {
    font-size: 4.2vw;
  }
  .appli_sub_name {
    font-size: 2.1vw;
  }


  /* お客様の声(Coming Soon) */
  .voice_text {
    font-size: 2.8rem;
  }


  /*=============== 下層ページ =================*/

  /* お問い合わせcontact */
  .contactform {
    width: 500px;
  }
  /* 必須 */
  .mandatory {
    right: 62%;
  }

  .backbutton {
    margin-bottom: 6rem;
    margin-right: 0;
  }


}


@media screen and (max-width: 700px) {

.about_p {
  text-align: left;
}

}



@media screen and (max-width: 660px) {

  .appli_name {
    font-size: 5vw;
  }
  .appli_sub_name {
    font-size: 2.6vw;
  }
  .slogan_item .text {
    font-size: 3.8vw;
  }
  #partner .flex {
    width: 100%;
  }
  #partner .flex li {
    width: 100%;
    justify-content: flex-start;

  }
  /*=============== 下層ページ =================*/

  /* お問い合わせcontact */
  .contactform {
    width: 450px;
  }
  /* 必須 */
  .mandatory {
    right: 57%;
  }


}


@media screen and (max-width: 560px) {

  .slogan {
    height: 60vh;
  }
  .mv_img {
    height: 40vh;
  }


  .slogan_item .text {
    font-size: 3.4vw;
    margin: 2rem 0 3rem 0;
  }

  /*=============== 下層ページ =================*/

  /* お問い合わせcontact */
  .contactform {
    width: 390px;
  }
  /* 必須 */
  .mandatory {
    right: 51%;
  }

  #mw_wp_form_mw-wp-form-25 .submit-button,.backbutton {
    width: 25rem;
    height: 4.9rem;
    font-size: 1.4rem;
  }

}


@media screen and (max-width: 520px) {

  footer .inner {
    max-width: 92%;
  }

}


@media screen and (max-width: 500px) {

  .appli_name {
    font-size: 5.5vw;
  }
  .appli_sub_name {
    font-size: 2.8vw;
  }
  .slogan_item .text {
    font-size: 3.9vw;
  }

  footer .inner {
    max-width: 92%;
  }


  h2 {
    font-size: 2.4rem;
    padding-top: 6rem;
  }
  h2::after {
    font-size: 1.2rem;
    margin-bottom: 8rem;
  }


  /* メインビジュアル */
  .fv {
    margin-bottom: 5rem;
  }




  /* こんなお悩み、お持ちではありませんか？ */

  .text {
    font-size: 1.9rem;
    line-height: 4.5rem;
  }

  #introduction li {
    font-size: 1.4rem;
  }

  .check {
    width: 90%;
    margin: 0 auto;
    margin-top: 3rem;
  }


  #introduction {
    padding-bottom: 6rem;
  }

  .support-text-p {
    font-size: 1.5rem;
    margin: 2.5rem 0 4rem 0;
  }



  /* リンクパートナーとは？ */

  .about_p {
    font-size: 1.5rem;
    margin-bottom: 5rem;
  }

  .wrap .box {
    margin-top: 2rem;
  }

  .wrap .box h3 {
    padding-bottom: 2rem;
  }

  .col {
    margin-bottom: 5rem;
  }



  /* お客様の声 */
  .voice_image {
    width: 9rem;
  }
  .voice_desc {
    width: calc(100% - 9rem);
    font-size: var(--normal-font-size);
  }
  #voice .voice_item {
    padding: 2rem;
  }


  /* お客様の声(Coming Soon) */
  .voice_text {
    height: 16rem;
  }


  /*=============== 下層ページ =================*/

  /* 投稿ページ */
  .pagination {
    padding-top: 5rem;
  }


  /* お問い合わせcontact */
  .contactform {
    width: 100%;
  }

  .contact_contents {
    margin-bottom: 8rem;
  }


  /* 必須 */
  .mandatory {
    right: 0;
  }

  .backbutton {
    margin-bottom: 4rem;
  }

}



@media screen and (max-width: 428px) {

  .appli_sub_name {
    font-size: 3.7vw;
  }
  .appli_name {
    font-size: 6.5vw;
  }

  .slogan_item {
    top: 55%;
  }
  .slogan_item .text {
    font-size: 4.6vw;
    line-height: var(--normal-line-height);
  }


  /* リンクパートナーとは？ */

  .about_p {
    font-size: 1.4rem;
    margin-bottom: 5rem;
  }

}



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

  .text {
    font-size: 1.7rem;
  }

}