@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 {
  position: relative;
  display: inline-block;
  padding: 0 55px;
  font-size: 3.0rem;
  font-weight: 600;
  margin: 30px 0;
}
h2.work:before,h2.work:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 3px;
}
h2.work:before {left:0;}
h2.work:after {right: 0;}

.tb {color:#2958a7;}
.tb:before {background-color: #2958a7}
.tb:after {background-color: #2958a7}

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;
}

.desc {width: 90%;margin: 10px auto;}
.cen {text-align: center;}
.mt {font-size: 2.4rem;}
.blue {color:#2958A7; font-weight: 600;}
.indent {padding-left: 1em;}

.ore {color: #ED7E33;font-weight: 600;}
.red {color: #C51A18;font-weight: 600;}
.red_border {border-bottom: solid 10px #C51A18;}

/**********     ファーストビュー     **********/
.head_flex {
    width: 100%;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
}
.head_logo {width: 32%;}
.head_r {width: 68%;margin: 50px 0;}
.head_tit {
    text-align: center;
    font-size: 3.2rem;
    font-weight: 600;
    color: #777;
}

.head_txt {
    margin: 20px 0 0 0;
    text-align: center;
    font-size: 2.6rem;
}

@media screen and (min-width:769px){
    .head_tit_sp {display: none;}
}

@media screen and (max-width:1200px){
    .head_tit {font-size: 3.0rem;}
}@media screen and (max-width:1000px){
    .head_tit {font-size: 2.2rem;}
    .head_txt {font-size: 2.2rem;}
}

/**********          お悩み          **********/
.nayami_flex {
    width: 90%;
    margin: 20px 2% 20px 8%;
    display: flex;
    flex-wrap: wrap;
}

.nayami_box {
    width: 28%;
    margin: 10px 1%;
    padding: 5px 1% 20px;
    border-radius: 10%;
    border: solid 7px #83C0ED;
    text-align: center;
    font-size: 2.0rem;
    color: #83c0ed;
}

.n_img {
    width: 50%;
    margin: 10px 25%;
}

.han {
    width: 90%;
    margin: 20px auto;
    font-size: 3.0rem;
    color: #2958a7;
    font-weight: 600;
}

.com {
    width: 40%;
    max-width: 350px;
    vertical-align: middle;
}

.yubi {
    width: 70px;
    vertical-align: middle;
}

/**********          サービス          **********/
.service_flex {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
}

.naiyou_flex {
    width: 46%;
    margin: 0 1%;
    padding: 0 1%;
    display: flex;
    flex-wrap: wrap;
    background-color:#83C0ED ;
    color: #fff;
    border-radius: 7%;
}

.nai_img {width: 40%;margin: 20px 5%;}
.nai_txt {width: 50%;}
p.nai_tit {
    font-size: 3.2rem;
    font-weight: 700;
    text-align: center;
    margin: 50px 0 0 0;
}

p.nai_desc{
    font-size: 2.1rem;
    text-align: center;
}
/**********     プラン内容     **********/
.plan_div {
    width: 75%;
    margin: 35px auto;
    display: flex;
    flex-wrap: wrap;
}

table.plan_t {
    width: 100%;
    margin: 0 auto 25px;
}

th.th_l {
    width: 30%;
    padding: 15px 0;
    text-align: center;
    font-size: 2.8rem;
    border: solid 1px #777;
    background-color:#44546a;
    color: #fff;
}

th.th_r {
    width: 70%;
    padding: 15px 0;
    text-align: center;
    font-size: 2.5rem;
    border-top: solid 1px #777;
    border-right: solid 1px #777;
    border-bottom: solid 1px #777;
    background-color:#44546a;
    color: #fff;
}

td.plan_n {
    width: 30%;
    padding: 10px 0;
    text-align: center;
    font-size: 2.8rem;
    font-weight: 600;
    border-left: solid 1px #777;
    border-right: solid 1px #777;
    border-bottom: solid 1px #777;
    vertical-align: middle;
    color: #fff;
}

td.plan_y {
    width: 60%;
    padding: 10px 5%;
    font-size: 2.1rem;
    border-right: solid 1px #777;
    border-bottom: solid 1px #777;
}

td.plan_y ul {padding: 0 0 0 20px;}
td.plan_y ul li {list-style-type: disc;}

.n1 {background-color: #a7dbf3;}
.n2 {background-color: #70c6ec;}
.n3 {background-color: #35ade3;}
.n4 {background-color: #f09252;}
.n5 {background-color: #a9d18e;}
.n6 {background-color: #be8bed;}

/**********     反響が最大化     **********/
.point_box {
    width: 90%;
    margin: 20px auto;
}

.poi_no {
    width: 25%;
    margin: 0 15% 0 60%;
}

.poi_tit {
    text-align: center;
    font-size: 3.1rem;
    font-weight: 600;
    margin: 0 0 30px 0;
}

.poi_flex {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap-reverse;
}

.poi_l {
    width: 60%;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

.poi_r {
    width: 40%;
    display: grid;
    place-items: center;
}
/**********     反響が最大化     **********/
.gr_flex {
    width: 90%;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
}

.gr_img {
    width: 48%;
    margin: 0 1%;
    display: grid;
    place-items: center;
}

.last {
    width: 80%;
    margin: 30px auto;
    text-align: center;
    font-size: 2.8rem;
}

img.last_com{
    width: 280px;
    vertical-align: middle;
}
/**********     CTA     **********/

.hexagon4 {
    margin: 20px 20%;
    font-size: 2.8rem;
    line-height: 72px;
    position: relative;
    display: inline-block;
    width: 60%;
    //height: 52px;
    transition: all .1s ease-in-out;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: #2958A7;
}
.hexagon4:before,
.hexagon4:after {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    content: '';
    border: 36px solid transparent;
    border-right: 22px solid transparent;
    border-left: 22px solid transparent;
}
.hexagon4:before {
    right: 100%;
    border-right-color: #2958A7;
}
.hexagon4:after {
    left: 100%;
    border-left-color: #2958A7;
}
.he4:hover{
    opacity: 0.7;
    cursor: pointer;
    color: #000;
}

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

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

@media screen and (max-width:768px){
    h2.title    {font-size: 2.2rem;}
    h2.work     {font-size: 2.1rem;}
    h4          {font-size: 2.2rem;}
    .desc       {width: 98%;}
    .mt         {font-size: 1.7rem;}
    .note       {font-size: 1.5rem;line-height:1.8;}
    .indent     {padding-left: 0.85em;}
    .head_flex  {margin: 20px 0 0 0}
    .head_logo  {width: 30%;}
    .head_r     {margin: 0;width: 70%;}
    .head_tit   {display: none;}
    .head_tit_sp{font-size: 1.3rem;font-weight: 600;color: #777;}
    p.rt        {text-align: right;font-weight: 600;}
    .head_txt   {font-size: 1.1rem;margin: 0;}

    .nayami_box {width: 80%;margin:20px auto;font-size: 1.5rem;}
    .han {width: 98%;font-size: 2.0rem;}
    img.com {width: 180px;}
    img.yubi{width: 40px;} 
    .service_flex {width: 98%;}
    .naiyou_flex {width: 100%;margin: 15px auto;padding: 10px;}
    .nai_img {margin: 0 1%;}
    .nai_txt {width: 58%;}
    p.nai_tit {font-size: 2.3rem;margin: 15px 0 0 0;}
    p.nai_desc{font-size: 1.7rem;}
    .plan_div {width: 98%;}
    th.th_l,th.th_r {font-size: 1.7rem;padding: 5px 0;}
    td.plan_n {font-size: 1.8rem;}
    td.plan_y {font-size: 1.5rem;width: 64%;padding: 8px 3%;}
    td.plan_y ul {padding: 0 0 0 18px;}
    td.plan_y ul li {text-indent: -2px;}
    .point_box {width: 98%;}
    .poi_no {width:40%;margin:0 0 0 50%;}
    .poi_tit{font-size: 1.8rem;}
    .poi_flex {width: 100%;}
    .poi_l {width: 98%;margin: 10px auto;}
    .poi_r {width: 90%;margin: 10px auto;}
    .gr_flex {width: 98%;}
    .gr_img {width: 100%;}
    .last {width: 98%;font-size: 2.0rem;}
    img.last_com {width: 190px;}


    .hexagon4 {
        font-size: 1.4rem;
        width: 86%;
        margin:20px 7%;
        line-height: 60px;
    }
    .hexagon4:before,.hexagon4:after {
        border: 30px solid transparent;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
    }
    .hexagon4:before {right: 100%;border-right-color: #2958A7;}
    .hexagon4:after  { left: 100%;border-left-color: #2958A7;}
}