@charset "utf-8";
/* ============================================================================
CSS information
 style info :  ホームページ（トップページ）
/* ============================================================================



/* ============================================================================
目次
 top / メインビジュアル
 about / IT機器導入支援サービスとは
 problem / 悩み
 field / 3つのビジネスフィールド
 flow / 納品までの流れ
 solution / ソリューション事例
 voice / お客様の声
 message / はじめまして
 profile / 会社概要
 faq / よくある質問
 contact / お問い合わせ



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

 top / メインビジュアル

=============================================================================== */
#main_visual{
  position: relative;
  overflow:hidden;
  width: 100%;
  height: 65vh;
  min-height: 530px;
  background: url("../images/main_img_pc.jpg") center top no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#main_visual .main_visual_logo{
  position: absolute;
  top: 20px;
  left:20px;
}

h1{
  display: inline-block;
  padding: 1.2em 20px ;
  line-height: 1.2;
  background: #fff;
  text-align: center;
}
h1 #catch{
  font-size: 2.4rem;
  font-weight: 900;
}
h1 #sub{
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: .2em;
  line-height: 1.4;
}
h1 #name span{
  font-size: 1.4rem;
  letter-spacing: .01em;
  display: block;
}

hr{
  width: 100%;
  height: 10px;
  border: none;
  background: var(--III_B);
}


/*スクロールを促すアニメーション*/
.chevron_wrap {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: 200px;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: #fff;
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.text {
  background: var(--III_B);
  border-radius: 200px;
  display: inline-block;
  margin-top: 70px;
  margin-left: -22px;
  padding: 1.5em 0.5em;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color:  #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}


/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #main_visual{
    position: relative;
    overflow:hidden;
    width: 100%;
    height: 100vh;
    background: url("../images/main_img_sp.jpg") center top no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  #main_visual {
    width: 100%;
    height: 90vh;
    min-height: 700px;
    background-size: cover;
  }
  #main_visual img{
    right: 80px;
    top: 80px;
    width: 163px;
  }
  #main_visual span.cap {
    color: #fff;
    left: 70px;
  }
  h1{
    line-height: 1.5;
    padding: .8em 20px 1.2em 20px;
  }
  h1 #catch{
    font-size: 4.5rem;
  }
  h1 #sub{
    font-size: 2rem;
    font-weight: 400;
    margin-top: 0;
  }
  .chevron_wrap{display:none;}
}




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

 about / IT機器導入支援サービスとは

=============================================================================== */
#about{
  margin-top: 0;
}



/* ---------------------------
PC */
@media only screen and (min-width: 901px){
  /*セクション内エリア間を横並び*/
  #about .inner {
    display: flex;
    align-items: flex-start;
    gap: 3%;
  }
}



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

 problem / 悩み

=============================================================================== */
#problem{
margin-top: 0;
background: #eee;
position: relative;
}
#problem .inner{
  padding-bottom: 1em;
  width: 100%;
}
#problem .txt_box{
  display: flex;
  flex-direction: column;
}
#problem .catch{
  background: #fff;
  text-align: center;
  font-size: 120%;
  font-weight: 900;
  line-height: 1.5;
  color: var(--III_B);
  padding: 1em;
  padding-top: 2em;
}


/* 選ばれる理由　4つのコラム */
#problem .col2 .col2_box{
  background: rgba(255, 255, 255, 0.8);
  padding: 3em;
  position: absolute;
  width: 100%;
  min-height: 220px;
  bottom: 0;
}
#problem .col2{
  gap: 0;
}
#problem .col2 li{
  background-size: cover;
  background-position: center center;
  min-height: 480px;
  position: relative;
}
#problem .col2 li h3{
  font-weight: 700;
  font-size: 200%;
  line-height: 1.2;
  text-align: center;
}
#problem .col2 li p{
  margin-top: 2em;
}
#problem .col2 li p span{
  font-size: 250%;
}
#problem .col2 li:nth-child(1){
  background-image: url("../images/problem_img_01.jpg");
}
#problem .col2 li:nth-child(2){
  background-image: url("../images/problem_img_02.jpg");
}
#problem .col2 li:nth-child(3){
  background-image: url("../images/problem_img_03.jpg");
}
#problem .col2 li:nth-child(4){
  background-image: url("../images/problem_img_04.jpg");
}

#problem hr:after{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left:0;
  right: 0;
  margin: auto;
  border-style: solid;
  border-width: 40px 40px 0 40px;
  border-color: var(--III_B) transparent transparent transparent;
}

/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #problem .col2{
    border-top: #fff 1px solid;
  }
  #problem .col2 li{
    border-bottom: #fff 1px solid;
  }
  #problem .col2 li h3{
    font-size: 120%;
  }
  #problem .col2 .col2_box{
    padding: 2.5em 1em;
    min-height: auto;
  }
  .heightLine{height: auto!important;}

}

/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  #problem .catch{
    font-size: 300%;
    line-height: 1.5;
    padding-top: 1em;
    }
  #problem .col2{
    flex-wrap: wrap;
  }
  #problem .col2 li{
    width: 50%;
  }
}




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

 field / 3つのビジネスフィールド

=============================================================================== */
#field{margin: 0;}
#field .inner{padding-bottom: 2em;}

#field .col3{
  gap: 0;
  color: #000;
}
#field .col3 .col3_box{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em;
  padding-top: 6em;
}
#field .col3 li:nth-child(1){
  background: #BAB490;
}
#field .col3 li:nth-child(2){
  background: #8BB9B0;
}
#field .col3 li:nth-child(3){
  background: #A57991;
}
#field .col3 h3{
  text-align: center;
  font-size: 150%;
  font-weight: 900;
}
#field .col3 h3 span{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family:Arial Black,Arial; 
  font-size: 700%;
  line-height: 1;
  letter-spacing: -.05em;
}
#field .col3 h3 span:after{
  display: block;
  content: "";
  width: 40px;
  height: 5px;
  background: #000;
  margin: 5px;
}
#field .col3 p{
  line-height: 1.5;
}
#field .col3 .field-icon{
  margin: 2em;
}


/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  #field .col3 li{
    width: 33.3%;
  }
}



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

 flow / 納品までの流れ

=============================================================================== */
#flow{
  margin-top: 0;
  background: url("../images/flow_bg.jpg") no-repeat top center;
  background-size: cover;
  background-position: top right 41%;
}
#flow .inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}
#flow h2{
  color: #000;
}

#flow p {
  margin: 1em auto 2em auto;
  text-shadow: 0 0 5px #fff,0 0 5px #eee;
}

/* ---------------------------
PC */
@media only screen and (min-width: 769px){
  #flow .inner{
    padding-bottom: 100px;
  }
  #flow {
    background-position: top center;
  }
}


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

 solution / ソリューション事例

=============================================================================== */
#solution{
  margin-top: 0;
  margin-bottom: 150px;
}
#solution .inner{
  padding-bottom: 2em;
}
#solution #column_wrap{
  max-width: 1280px;
  margin: auto;
}
#solution .column {
  display: flex;
  margin-top:0;
}
#solution .column .txt_wrap {
  padding: 3em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#solution h3{
  color:var(--III_B);
  font-size: 200%;
  font-weight: 700;
  line-height: 1.2;
}
#solution h3 span{
  position: relative;
  font-family:Arial Black,Arial; 
  line-height: 1;
  letter-spacing: -.05em;
  font-size: 300%;
  margin-bottom: -8px;
  margin-right: 30px;
}
#solution h3 span:before{
  content: "case";
  font-family:Arial Black,Arial; 
  line-height: 1;
  letter-spacing: -.05em;
  font-size: 2.5rem;
  display: block;
  margin-bottom: -0.3em;
  margin-left: 0.2em;
}
#solution h3 span:after{
  position: absolute;
  bottom: 6px;
  content: "";
  display: inline-block;
  height: 30px;
  width: 5px;
  background: #999;
  margin: 0 15px;
}
#solution dl{
  margin-top:2em;
  display: flex;
  flex-wrap: wrap;
}
#solution dt{
  width: 5em;
  margin-bottom: 1em;
}
#solution dd{
  width: calc(100% - 4em);
  margin-bottom: 1em;
  font-size: 150%;
  margin-bottom: 2em;
  line-height: 1.5;
}

#solution btn{margin: auto;}

/* ---------------------------
SP */
@media only screen and (max-width: 1105px){
  #solution .column {
    flex-direction: column-reverse;
    margin: 20px;
  }
  #solution .column .txt_wrap {
    padding: 20px 0;
}
  #solution h3 {
    font-size: 150%;
    margin-bottom: 1em;
}
  #solution h3 span{
    display: block;
    margin-bottom: 0;
  }
  #solution h3 span:after{
    content: "";
    display: none;
  }
  #solution dd{
    font-size: 120%;
  }
}

/* ---------------------------
PC */
@media only screen and (min-width: 1106px){
  #solution .column {
    align-items: flex-start;
    margin-top:0;
  }
  #solution .column:nth-child(n+2):nth-child(even)  {
    flex-direction: row-reverse;
  }
  #solution .column .txt_wrap{
    width: 50%;
  }
  #solution h3 {
    display: flex;
    align-items: flex-end;
}
  #solution .solution_img{max-width: 50%;}

}



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

 voice / お客様の声

=============================================================================== */
#voice{
  margin-top: 0;
  background: #eee;
}

#voice ul{
  display: flex;
  flex-direction: column;
  gap: 3em;
  max-width: 800px;
  margin: auto;
  margin-top: 50px;
}

#voice li{
  display: flex;
  align-items: center;
}
#voice li .txt_box{
  margin-left: 2em;
}
#voice li .txt_box h3{
  font-size: 200%;
  font-weight: 700;
  color:var(--III_B);
  margin-bottom:10px;
}

/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #voice li  img{
    width: 70px;
  }
  #voice li .txt_box{
    margin-left: 1em;
  }
  #voice li .txt_box h3{
    font-size: 130%;
    margin-bottom:5px;
  }
  #voice li .txt_box p{
    line-height: 1.5;
  }
}




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

 message / はじめまして

=============================================================================== */
#message{
  text-align: center;
  margin-top: 0;
}
#message p{
  line-height: 3;
}
#message .name{
  display: inline-block;
  margin-top: 5em;
}




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

 profile / 会社概要

=============================================================================== */
#profile{
  margin-top: 0;
  background: #BCCEEB;
}
#profile dl{
  border-top: #fff 3px solid;
  border-bottom: #fff 3px solid;
}
#profile dl{
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
}
#profile dt{
  width: 7em;
  font-weight: 700;
  color:var(--III_B);

}
#profile dd{
  width: calc(100% - 7em);
}

#profile dt,
#profile dd{
  border-bottom: #fff 1px solid;
  padding: 2em;
  margin: 1em 0 0 0;
  padding-bottom: 3em;
}

#profile dt:last-of-type,
#profile dt:last-of-type + dd {
  border: 0;
}


/* ---------------------------
SP */
@media only screen and (max-width: 768px){
  #profile dt{
    width: 5em;
  }
  #profile dd{
    width: calc(100% - 5em);
  }
  #profile dt,
  #profile dd{
    padding: 2em 0;
    padding-bottom: 3em;
  }
}


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

 faq / よくある質問

=============================================================================== */
#faq{
  margin-top: 0;
}
#faq .title.btn{
  font-size: 100%;
  font-weight: 400;
}



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

 contact / お問い合わせ

=============================================================================== */
#contact{
  margin-top: 0;
  background: #eee;
}

/*お問い合わせフォーム*/
.mailform_table i{
  color:#ff0000;
  font-style:normal;
}					
.mailform_table{
  text-align:left;
  margin:0 auto;
  margin-top: 3rem;
  margin-bottom:3rem;
  border-collapse: separate;
  border-spacing: 1em 0;
}
.mailform_table th{
  white-space: nowrap;
  font-weight: normal;
}
.mailform_table td:last-child{
  width: 70%;
}
.mailform_table span.cap{display: inline-block;}
.mailform_table span.required,
.mailform_table span.any{
  display: inline-block;
  line-height: 1;
  font-size: 1.2rem;
  color:#fff;
  background: var(--III_B);
  white-space: nowrap;
  border-radius: 20px;
  padding: .5em 1em;
  margin-bottom: 6px;
}
.mailform_table span.any{background: #999;}
.mailform_table input::placeholder,
.mailform_table textarea::placeholder{ color:#ccc;}
.mailform_table input:focus::placeholder,
.mailform_table textarea:focus::placeholder {color: transparent;}

.mailform_table .zipcode,
.mailform_table .year,
.mailform_table .num{width:10em;}
select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="file"],
textarea{ background:#fff; border:none; padding:1.5rem; margin:1rem 0; border-radius:0; width:100%;}

input[type="checkbox"]{ margin-bottom:0; padding-bottom:0;}



.mailform_table select {
  -webkit-appearance: none;
  appearance: none; /* デフォルトのスタイルを無効 */
}
.mailform_table select::-ms-expand {
  display: none; /* デフォルトのスタイルを無効(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.select_kinds{
  position: relative;
  display:block;
}
.select_kinds::before {
  border-bottom: 6px solid var(--thk_G);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  position: absolute;
  right: 1em;
  top: 0.8em;
  width: 0;
  z-index:1;
}
.select_kinds::after {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--thk_G);
  content: "";
  position: absolute;
  right: 1em;
  top: 1.8em;
  width: 0;
}

/*ラジオボタンの色*/
input[type=radio] {
    display: none;
}
.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0px;
    position: relative;
    width: auto;
}
.mailform_table .radio01::before,
.mailform_table .radio01::after {
  display: none;
}
.mailform_table .radio01 .wpcf7-list-item {
  margin: 0!important;
}
.mailform_table .radio01 .wpcf7-list-item-label {
  box-sizing: border-box;
  cursor: pointer;
  padding: 0px 26px;
  width: auto;
}
.radio01 .wpcf7-list-item-label::before {
  background: #fff;
  border: 1px solid var(--thk_G);
  border-radius: 50%;
  content: '';
  display: block;
  height: 16px;
  left: 5px;
  margin-top: -11px;
  position: absolute;
  top: 50%;
  width: 16px;
}
.mailform_table .radio01 .wpcf7-list-item-label::after {
  background: var(--thk_G);
  border-radius: 50%;
  content: '';
  display: block;
  height: 10px;
  left: 9px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 10px;
}
.mailform_table .radio01 input[type=radio]:checked + .wpcf7-list-item-label::after {
  opacity: 1;
}

.mailform_table th{line-height: 1.2;}
.mailform_table span.cap{font-size: 1.2rem;}

/*生年月日*/
.mailform_table label {
  position: relative;
  display: inline-block;
  border: none;
}
.mailform_table input[type="date"] {
  position: relative;
  padding: 1.5rem;
  border: 0;
  background: #fff;
}

/*プライバシーポリシーのチェックボタンとの間隔*/
.wpcf7-form-control-wrap .wpcf7-list-item-label {
  margin-left: 0.3em;
}



.radio01::before {
    background: #fff;
    border: 1px solid var(--thk_G);
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -11px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.radio01::after {
    background: var(--thk_G);
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 10px;
}
input[type=radio]:checked + .radio01::after {
    opacity: 1;
}

input[type=submit].btn{
  line-height: 1;
  border: none;
}





/*エラーメッセージ*/
.screen-reader-response p,
.wpcf7-not-valid-tip,
.wpcf7-response-output {
  color: #fff;
  background: #ff0000;
  font-weight: bold;
  padding: 0 0.5em;
  margin: 1em;
}
.wpcf7-not-valid-tip {
  padding: 0.5em;
}
.screen-reader-response ul {
  display: none;
}


@media only screen and (max-width: 768px) {
  .mailform_table{ border-spacing: 1em 1em;}
  .mailform_table th,
  .mailform_table td{
    display: inline-block;
  }
  .mailform_table td:last-child{
    width: 100%;
  }
  .mailform_table span.required,
  .mailform_table span.any{
    margin-right: 1em;
  }
  .radio01 {
    padding-top:10px;
    display: block;
  }
  .radio01::before {
    margin-top: -5px;
  }
.radio01::after {
    margin-top: -1px;
  }
}