@charset "UTF-8";
@import url("grid.css?1");
@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

img {max-width:100%;height: auto;}
*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}
html {scroll-padding-top: 300px;scroll-behavior: smooth;}

h2.work {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #000;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #000;/*左線*/
  font-size: 3.0rem;
  font-weight: 600;
  margin: 40px 0;
}

h2.title {
  color: #364e96;/*文字色*/
  padding: 0.4em 0;/*上下の余白*/
  margin: 70px auto 40px auto;
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
  font-size: 3.0rem;
  width: 70%;
  text-align: center;
}

/**********     ファーストビュー     **********/
.main_img {max-width: 1200px;margin: 0 auto;}
img.pc_img {max-width: 1200px;}
.toi_box {
    width: 50%;
    margin: 50px auto;
}

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

.nayami {
    width: 90%;
    margin: 0 0 0 10%;
}
.text-nayami {
    font-size: 2.4rem;
    font-weight: 600;
    padding: 0 0 0.3em 0;
}

.indent {
    font-size: 1.9rem;
    text-indent: -0.5em;
    padding: 0 0 0 1.5em;
}

.ar {width: 100%;display: flex;margin: 50px auto 20px;}
.ar_ {width: 50%;text-align: center;}
.ar_ img {width: 100px;}

.bansou {
    width: 100%;
    text-align: center;
    font-size: 3.5rem;
}

.bo {
    color:#ED7D31;
    font-weight: 600;
    font-size: 180%;
}

.pc_sp {
    width: 80%;
    margin: 30px auto 70px;
}

/********************* 画像の下　**********************/

.sub_title {
    border: 18px solid #000; /* 外側の線 */
    outline: 14px solid #fff; /* 内側の線 */
    outline-offset: -20px; /* 隙間の幅（border幅+outline幅+白抜き幅）*/
    margin: 60px 10% 30px;
    padding: 15px; /* コンテンツと内側の線の間の余白 */
    background-color: #000; /* 白抜き部分の背景色を白に指定 */
    text-align: center;
    width: 500px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
}

.prob {
    font-size: 2.2rem;
    padding: 15px 15% 15px;
}

.ans_flex {
    width: 80%;
    display: flex;
    margin: 20px 0 50px 20%;
}

.ar_l {
    width: 15%;
    display: flex;
    align-items: center;
}

.ar_l img {width: 100px;}

.ar_r {
    width: 80%;
    display: flex;
    align-items: center;
}

.ar_r ul li {
    font-size: 2.2rem;
    color: #ED7D31;
    font-weight: 600;
    list-style-type: square;
}

/************************ プロフィール　****************/
.prof_flex {
    width: 100%;
    margin: 5px auto;
    display: flex;
}

.prof_img {
    width: 30%;
    align-items: center;
    text-align: center;
    font-size: 2.0rem;
}

.prof_img img {
    width: 200px;
    padding: 50px 0 0 0;
}

.prof_text {
    width: 70%;
    display: flex;
    align-items: center;
    font-size: 2.0rem;
}

/***********************　導入事例　****************/

.case_flex {
    width: 90%;
    display: flex;
    margin: 30px auto 0;
}

.case_title {
    width: 80%;
    font-size: 2.9rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

.line_img {width: 20%;}
.line_img img {max-width: 200px;}

table.case_table {
    width: 90%;
    margin: 0 auto 80px;
}

th.case_th {
    width: 20%;
    text-align: center;
    font-size: 2.5rem;
    border: solid 2px #000;
    vertical-align:middle;
}

th.case_th span {font-weight: 700;}

td.case_td {
    width: 78%;
    font-size: 2.0rem;
    border: solid 2px #000;
    vertical-align:middle;
    padding: 20px 1%;
}

td.case_td span{
    color: #0070C0;
    font-weight: 600;
}

.case_text {
    width: 85%;
    margin: 50px auto;
    font-size: 2.5rem;
}
.case_text  span {font-weight:700;}
.aicon_flex {
    width: 50%;
    margin: 30px auto;
    display: flex;
}

.aicon {
    width: 20%;
}

.aicon_right {
    width: 80%;
    font-size: 2.7rem;
    color:#ED7D31;
    display: flex;
    align-items: center;
}


/*問い合わせ-------------------------------------*/

.note {
    max-width: 1000px;
    margin: 20px auto 0;
    font-size: 1.7rem;
    line-height: 2.1;
}

@media screen and (min-width:768px){
    .ss {display: none;}
    .spimg {display:none}
}

@media screen and (max-width:768px){
    h2.title    {font-size: 2.2rem;}
    h2.work     {font-size: 1.9rem;}
    .main_img   {margin: 20px 0 0 0;}
    .note       {font-size: 1.5rem;line-height:1.8;}
    .toi_box    {width: 90%;margin: 20px auto;}
    .nayami     {width: 98%;margin: 0 auto;}
    .text-nayami{font-size: 2.0rem;margin: 30px 0 0 0;}
    .indent     {font-size: 1.7rem;}
    .bansou     {font-size: 1.7rem;}
    img.spimg   {width: 80%;margin: 0 10%;}
    .prob       {font-size: 1.9rem;padding: 15px 5%;}
    .ans_flex   {width:98%;margin: 0 auto;display: block;}
    .ar_l img   {max-width: 80px;margin: 0 auto;transform: rotate(90deg)}
    .ar_l,.ar_r {width: 90%;margin: 10px auto;}
    .ar_r ul li {font-size: 1.6rem;}
    .prof_flex  {display: block;width: 96%;}
    .prof_img   {width:90%;font-size: 1.9rem;margin: 0 auto 20px;}
    .prof_text  {width:96%;font-size: 1.6rem;}
    .case_flex  {display: block;margin: 0 auto;}
    .case_title {width: 90%;font-size: 1.9rem;}
    .line_img   {margin: 0 0 0 70%;}
    table.case_table {width: 100%;}
    th.case_th  {font-size: 1.7rem;}
    td.case_td  {font-size: 1.4rem;}
    .case_text  {font-size: 2.0rem;}
    .aicon_flex {width: 100%;}
    .aicon_right{font-size: 1.9rem;}
    .pcimg {display:none;}


    .sub_title {
    border: 10px solid #000;
    outline: 12px solid #fff;
    outline-offset: -15px;
    margin: 60px 15% 10px 0;
    padding: 13px;
    width: 85%;
    font-size: 1.8rem;
    }
}