/* @group ClearFix */
.clearfix:after {
  content:" ";
  display:block;
  clear:both;
}

html {
/* overflow-yプロパティは、ボックスの範囲内に内容が収まらない場合に、はみ出た要素の上下の表示方法を指定する際に使用 */
overflow-y: scroll;
/* iPhoneやAndroidのブラウザーは、縦向き(Portrate mode)と横向き (Landscape mode)の文字サイズを自動調整する機能 */
-webkit-text-size-adjust: 100%;
font-size: 62.5%;
}

body {
  margin: 0 auto;
  font-family:"Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 1.6rem;
  background-color: #FFF;
  color: #222127;
  overflow: hidden;
}

main {
  min-height: calc(100vh - 12.6rem);
}

h2 {
  font-size: 2.2rem;
  letter-spacing: 0.2rem;
  font-weight: bold;
}

h3 {
  font-size: 2.3rem;
  letter-spacing: 0.15rem;
}

.br-sp, .br-sp_sv {
  display: inline-block;
}

.br-miniSP {
  display: none;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  background-color: #222127;
  color: #fff;
  border: 1px solid #222127;
  border-radius: 50%;
  cursor: pointer;
}

.circle:hover {
  color: #222127;
}

.icon_arrow::before {
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  font-size: 2.5rem;
  content: '\f062';
}

#scroll_btn:hover {
  background-color: #FFF489;
}

.A_line {
  display: none;
}

.B_line,.C_line {
  display: block;
  width: 100%;
  border-bottom: solid 1px #C9CEE6;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.D_line {
  display: block;
  width: 7rem;
  border-bottom: solid 8px #C9CEE6;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.C_line {
  margin-top: 3rem;
}

.none-sp {
  display: none;
}

.space {
  margin-top: 10rem;
}

/* ヘッダ、サイドメニューここから */

header {
  margin: 0 auto;
}

.top_block {
  position: relative;
}

.top_block_inner {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #F5F9FC;
}

.top_block h1 {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
}

.top_block_inner.toi h1 {
  color: #222127;
}

.top_block h2 {
  margin-top: -3rem;
  margin-left: 2rem;
  color: #000;
  text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
}

.syain_section h2 {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
}

.main_block {
  margin: 2rem 2rem 0 2rem;
}

.main_block.sub {
  margin: 4.6rem 2rem 0 2rem;
}

.top_text {
  margin-bottom: 8rem;
  line-height: 1.6;
}

.side_contents {
  position: fixed;
  width: 100%;
  z-index: 10000;
}

.logo_block {
  display: flex;
  align-items: center;
  width: 100%;
  height: 5.1rem;
  background-color: #222127;
}

.logoImg_SP {
  display: block;
  width: 24rem;
  margin-left: 2.2rem;
}

.logoImg_PC {
  display: none;
}

.nav-menu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
}

.nav-menu ul li {
  text-align: center;
}

.nav-menu li a {
  display: block;
  padding: 1.49rem 0.88rem;
  border: solid 1px #222127;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.06rem;
}

.manu_now a {
  background-color: #222127;
  color: #F5F9FC;
}

.menu_toi_SP {
  display: block;
}

.circle.mail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  background-color: #fff;
}

.circle.mail.now {
  background-color: #222127;
}

.circle.mail.now.icon_mail::before {
  color: #FFF489;
}

.circle.mail a {
  border: none;
}

.icon_mail::before {
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  font-size: 2.5rem;
  content: '\f0e0';
  color: #222127;
}

.icon_mail_now::before {
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  font-size: 2.5rem;
  content: '\f0e0';
  color: #F5F9FC;
}

.menu_toi_PC {
  display: none;
}

/* メインコンテンツ　共通部ここから */

.main_contents {
  padding-top: 12.6rem;
  z-index: 1;
}

.top_pic_PC, .sub_pic_PC, .top_pic_big {
  display: none;
}

.top_pic_SP, .sub_pic_SP {
  display: block;
  width: 100%;
}

.banner_pic {
  width: 100%;
  box-shadow: 1rem 1.5rem 5px rgb(0 0 0 / 16%);
}

.banner_pic.SP {
  display: block;
}

.banner_pic.PC {
  display: none;
}

.sub_banner {
  position: relative;
  margin-bottom: 8rem;
}

.sub_banner:hover {
  opacity: 0.7;
}

.sub_banner_inner {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #F5F9FC;
}

.sub_banner_inner .title {
  margin-left: 2.8rem;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
}

.kuwashiku {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.8rem;
  border: solid 0.7px #F5F9FC;

  width: 13.8rem;
  height: 4.9rem;
}

.sub_banner_inner.shiro {
  display: block;
  text-align: center;
} 

.sub_banner_inner .title.toi {
  margin-left: 0;
  font-size: 1.8rem;
  color: #222127;
  letter-spacing: 0.06rem;
  line-height: 1.6;
}

.banner_pic.toi {
  height: 19.2rem;
  box-shadow: none;
  border: solid 1px #222127;
}

.kuwashiku.toi {
  margin: auto;
  color: #222127;
  font-weight: bold;
  border: solid 1px #222127;
  margin-top: 3rem;
}

/* サービス　ここから */

.service_section {
  margin-top: 7rem;
}

.service_section p {
  text-align: justify;
  line-height: 3rem;
}

.service_img {
  width: 100%;
}

.service_img.SP {
  display: block;
  margin-bottom: 3rem;
}

.service_img.PC {
  display: none;
}

.service_section h2 {
  font-size: 2.2rem;
  letter-spacing: normal;
  line-height: normal;
}

.service_label li a {
  display: block;
  margin-bottom: 2.5rem;
  padding: 1.49rem 0.88rem;
  border: solid 1px #222127;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.06rem;
  box-shadow: 1rem 1.5rem 5px rgb(0 0 0 / 16%);
}

.service_label li a:hover {
  background-color: #FFF489;
}

.service_section_arrow {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.service_section_arrow div:hover {
  background-color: #FFF489;
}

/* 会社概要　ここから */

.kaisya-list span {
  display: flex;
  align-items: center;
  height: 4.8rem;
  margin-top: 3.7rem;
  margin-bottom: 2.2rem;
  padding-left: 0.6rem;
  background-color: #E6EEF4;
}

.kaisya-list .first {
  margin-top: 0;
}

.kaisya-list p {
  margin-bottom: 1.2rem;
  padding-left: 0.6rem;
}

/* 社員紹介　ここから */

.syain_section.flex {
  display: flex;
  justify-content: space-between;
}

.syain_section p {
  line-height: 3rem;
}

.syain_name {
  font-size: 1.8rem;
}

.syain_furi {
  font-size: 1.8rem;
  color: #707070;
}

.syain_SPblock {
  display: block;
}

.syain_PCblock {
  display: none;
}

.syain_img {
  width: 16rem;
}

.syain_list {
  display: flex;
}

.syain_list .first {
  width: 20%;
  margin-right: 1rem;
}

.syain_list div {
  width: 80%;
}

.syain_blogLogo {
  display: grid;
}

.syain_blogLogo img:hover {
  opacity: 0.7;
}

.syain_blogLogo img {
  width: auto;
  height: 3rem;
  margin-top: 2rem;
}

.syain_blogLogo .zenn {
  height: 2.5rem;
}

.icon_window::before {
  font-family: 'Font Awesome 5 free';
  font-weight: 900;
  font-size: 1.8rem;
  content: '\f14d';
  color: #222127;
  margin-left: 1rem;
}

/* 問い合わせ　ここから */

.toiawase_section {
  line-height:1.6;
}

.toiawase_SPonly {
  display: block;
  margin-top: 1rem;
}

.toiawase_add {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.toiawase_add p {
  font-size: 1.8rem;
  letter-spacing: 0.05rem;
}

.toiawase_add .icon_mail {
  margin-right: 1.5rem;
}

.toiawase_btn {
  text-align: center;
}

.toiawase_btn button {
  width: 24rem;
  border-radius: 3rem;
  margin-top: 3rem;
  padding: 1.43rem 0;
  border: solid 1px #222127;
  letter-spacing: 0.06rem;
}

.toiawase_btn button:hover {
  background-color: #FFF489;
}

.toi_anime {
  transition: .5s ;
	transform: rotateX(0deg);
}

.toi_anime:hover {
  transform: rotateX( 360deg ) ;
}

.toiawase_btn.SP {
  display: block;
} 

.toiawase_btn.PC {
  display: none;
} 

.success-msg {
  display: none;
}

/* フッタ部ここから */

.bottom_block {
  display: flex;
  justify-content: end;
  margin-top: 22rem;
  margin-bottom: -3rem;
  margin-right: 2rem;
}

.footer_contents {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5.6rem;
  background-color: #222127;
}

.footer_contents p {
  font-size: 1.1rem;
  color: #F5F9FC;
}

.eachTextAnime span{
  opacity: 0;
}

.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* 画面サイズが340px以下のとき */
@media screen and (max-width: 340px){

  h2 {
    font-size: 2rem;
  }

  .nav-menu li a {
    font-size: 1.3rem;
    letter-spacing: 0;
  }

  .sub_banner_inner .title.toi {
    font-size: 1.6rem;
  }

  .toiawase_add p {
    font-size: 1.7rem;
  }

  .toiawase_btn.SP {
    margin-bottom: 3rem;
  }
}

/* 画面サイズが375px以下のとき */
@media screen and (max-width: 375px){

  footer {
    margin-top: 6rem;
  }

  .br-miniSP {
    display: inline-block;
  }
}

/* タブレット以上 */
@media print, screen and (min-width: 744px) {

  main {
    min-height: calc(100vh - 18.2rem);
    /* 固定ヘッダ（12.6）とフッタ（5.6）を足した数を引く */
  }

  .br-sp_sv {
    display: none;
  }

  .logoImg_SP {
    display: block;
    width: 24rem;
    margin-left: 5.2rem;
  }

  .top_block h1 {
    font-size: 2.2rem;
  }

  .top_block h2 {
    margin-top: -4rem;
    margin-left: 5rem;
  }

  .nav-menu ul {
    padding: 1rem 5rem;
  }

  .nav-menu ul li {
    width: 13.8rem;
  }

  .main_block {
    margin: 4rem 5rem 0 5rem;
  }

  .main_block.sub {
    margin: 4rem 5rem 0 5rem;
  }

  .banner_pic.SP {
    display: none;
  }

  .banner_pic.PC {
    display: block;
    height: 11.6rem;
  }

  .banner_pic.PC.sv01 {
    display: block;
  }

  .banner_pic.PC.sv02 {
    display: none;
  }

  .banner_pic.PC.toi {
    height: 19.2rem;
  }

  .syain_top_block div {
    display: flex;
    justify-content: center;
  }

  .syain_name {
    margin-right: 3rem;
    font-size: 2.2rem;
    letter-spacing: 0.25rem;
  }

  .syain_furi {
    font-size: 2rem;
    letter-spacing: 0.08rem;
  }

  .syain_blogLogo {
    display: flex;
    margin-right: 5rem;
  }

  .syain_blogLogo img {
    margin-right: 4rem;
  }

  .toiawase_btn button {
    margin: 3rem;
  }
}

/*画面サイズが1080pxから1255pxまで　サービスページの改行用*/
@media screen and (min-width:1080px) and ( max-width:1255px) {
  .br-sp_sv {
    display: inline-block;
  }
}

/* ノートPC以上 */
@media print, screen and (min-width: 1080px) {

  .wrapper {
    display: flex;
  }

  main {
    min-height: calc(100vh - 5.6rem);
    /* メニューがサイドにあるため、フッタの高さのみ引く */
  }

  .top_block h1 {
    justify-content: stretch;
    margin-left: 9rem;
  }

  .top_block h2 {
    margin-top: -6rem;
    margin-left: 9rem;
    font-size: 2.8rem;
  }

  .top_text {
    margin-top: 5rem;
    margin-bottom: 10rem;
  }

  .side_contents {
    position: fixed;
    width: 26.6rem;
  }

  .logo_block {
    justify-content: center;
    height: 19.2rem;
  }

  .logoImg_SP {
    display: none;
  }

  .logoImg_PC {
    display: block;
    width: 16rem;
    margin-bottom: 1rem;
  }

  .nav-menu ul {
    display: block;
    padding: 8.5rem 4.8rem 0;
    text-align: center;
  }

  .nav-menu ul li {
    width: 17rem;
    height: 6.2rem;
    margin-bottom: 4rem;
  }

  .nav-menu li a {
    display: block;
    padding: 1.97rem 0;
    border: solid 1px #222127;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.06rem;
  }

  .nav-menu li a:hover {
    background-color: #222127;
    color: #F5F9FC;
  }

  .menu_toi_SP.circle.mail {
    display: none;
  }
  
  .menu_toi_PC {
    display: block;
  }

  .menu_toi_PC.now a {
    background-color: #222127;
    color: #F5F9FC;
  }

  .main_contents {
    padding-top: 0;
    position: relative;
    left: 26.6rem;
    width: calc(100% - 26.6rem);
  }

  .top_pic_PC {
    display: block;
    width: 100%;
  }

  .sub_pic_PC {
    display: block;
    width: 100%;
    height: 19.2rem;
  }

  .top_pic_SP,.sub_pic_SP {
    display: none;
  }

  .main_block {
    margin: 0 9rem;
    font-size: 1.8rem;
  }

  .main_block.sub {
    margin: 8.5rem 9rem 0 9rem;
  }

  .sub_banner_inner .title {
    margin-left: 8.2rem;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }

  .sub_banner_inner.shiro {
    display: flex;
    text-align: start;
  }

  .sub_banner_inner .title.toi {
    margin-left: 8rem;
  }  

  .kuwashiku {
    margin-right: 6rem;
    width: 17rem;
    height: 6.2rem;
  }

  .kuwashiku.toi {
    margin-top: 0;
    margin-right: 6rem;
  }

  .service_section {
    margin-top: 12rem;
}

  .service_section > div {
    display: flex;
  }

  .service_img.SP {
    display: none;
  }

  .service_img.PC {
    display: block;
    width: 33.3rem;
    height: 33.3rem;
    margin-right: 3.5rem;
  }

  .service_section h2 {
    line-height: normal;
  }

  .service_label {
    margin-left: -8.9rem;
  }

  .service_label li a {
    width: 55.5rem;
    margin-bottom: 4rem;
    padding: 1.97rem 0;
    padding-left: 9rem;
    font-size: 1.8rem;
    text-align: start;
  }

  .service_section_arrow {
    justify-content: center;
    margin-top: 4rem;
  }

  .kaisya-list {
    display: flex;
    align-items: stretch;
  }

  .kaisya-list span {
    align-items: stretch;
    width: 25%;
    height: 4.8rem;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    background-color: #fff;
  }
  
  .kaisya-list .first {
    margin-top: 0;
  }
  
  .kaisya-list p {
    padding-left: 0;
  }

  .syain_section {
    width: 55%;
  }

  .syain_section h2 {
    font-size: 1.8rem;
  }

  .syain_PCblock {
    display: block;
    position: absolute;
    top: 28rem;
    right: 9rem;
  }
  
  .syain_SPblock {
    display: none;
  }

  .syain_img {
    width: 30rem;
  }

  .toiawase_section_2 {
    display: flex;
    position: absolute;
    margin-top: 7rem;
  }

  .toiawase_add {
    margin-right: 5rem;
  }

  .toiawase_add p {
    font-size: 2rem;
  }

  .toiawase_SPonly {
    display: none;
  }

  .toiawase_btn button {
    margin: 3rem 0 0 0;
  }

  .toiawase_btn.PC {
    display: block;
  } 
  
  .toiawase_btn.SP {
    display: none;
  }

  .success-msg {
    position: relative;
    top: 4.7rem;
    margin-left: 1rem;
    font-size: 1.7rem;
  }

  .A_line {
    display: block;
    width: 100%;
    border-bottom: solid 1px #C9CEE6;
    margin-bottom: 3rem;
  }

  .A_line.group {
    margin-top: 1.8rem;
  }

  .space {
    margin-top: 15rem;
  }

  .bottom_block {
    margin-top: 30rem;
    margin-right: 9rem;
  }

  .footer_contents p {
    font-size: 1.6rem;
  }

  .none-sp {
    display: inline-block;
  }
}

/* デスクトップPC想定 */
@media print, screen and (min-width: 1255px) {
  .br-sp,.br-sp_sv {
    display: none;
  }
}

/* サービスバナー対策 */
@media print, screen and (min-width: 1300px) {
  .banner_pic.PC.sv01 {
    display: none;
  }

  .banner_pic.PC.sv02 {
    display: block;
  }
}

/* 大きなデスクトップPC想定 */
@media print, screen and (min-width: 1800px) {

  .top_pic_PC {
  display: none;
  }

  .top_pic_big {
    display: block;
    width: 100%;
  }
}