@charset "UTF-8";

/*==============
2018.10 
株式会社システムクエスト
==============*/

/*[共通]---------*/

    #contents .SQ20018_post .page_h1{
      margin-bottom: 20px;
    }
    
    
    .SQ20018_post{
      margin: 0 auto;
      max-width: 980px;
      width: 100%;
    }
    
    .SQ2018_flex-box{
      display: -webkit-flex;
      display: flex;
      -webkit-align-content: flex-start;
      align-content: flex-start;
      -webkit-justify-content: space-between;
      justify-content: space-between;
    }
    
    .SQ2018_col-2 > div{
      width: 50%;
    }
    
    @media screen and (max-width: 768px) {
      .SQ2018_flex-box{
       flex-wrap: wrap;
      }
      
      .SQ2018_col-2 > .flow_img{
        width: 90%;
      }
    }
    
    
     .SQ20018_small{
       font-size: 85%;
     }
      
    .SQ20018_post dl{
      background: #efefef;
      border-radius: 5px;
      margin: 0 auto 1rem;
      padding: 1rem;
      max-width: 500px;
      width: 100%;
    }
    
    @media screen and (max-width: 768px) {
      
    .SQ20018_post dl{
      padding: 6%;
      width: 80%;
    }
    }
    
    .SQ20018_post dt{
      font-weight: bold;
    }
    
    .SQ20018_post dd{
      margin-bottom: 20px;
    }
    
    .SQ20018_post dd:last-child{
      margin-bottom: 0;
    }



/*[見出し周り]---------*/
    
    .SQ20018_post .title h2{
       background: #fbf9de;
       border-left: 10px solid #64cae2;
       box-shadow: 1px 1px 2px 1px rgba(200,200,200,.3);
       padding: 1rem 1rem;
       margin: 2rem 0 1rem;
     }
     
     .SQ20018_post .step h2{
       background: #def5fb;
       border-left: 0;
       box-shadow: none;
       font-size: 22px;
       font-weight: bold;
       margin: 3rem 0 1rem;
       padding: .5rem .5rem .5rem 80px;
       position: relative;
     }
     
    .SQ20018_post .step h2 span{
       background: #009fd3;
       color: #fff;
       display: block;
       font-size: 16px;
       font-weight: normal;
       height: 100%;
       left: 0;
       line-height: 290%;
       margin-right: 10px;
       padding: 0 8px;
       position: absolute;
       top: 0;
     }
     
    .SQ20018_post .title h3{
       border-bottom: 2px dotted #64cae2;
       padding: .5rem 1rem;
       margin:2rem auto 1rem;
     }
    
    .SQ2018_flow h4{
      padding:  5px 30px 5px 35px;
      position: relative;
    }
    
    .SQ2018_flow h4 span{
       background: #009fd3;
      border-radius: 20px;
      color: #fff;
      display: block;
      font-size: 14px;
      font-weight: normal;
      height: 25px;
      line-height: 25px;
      left: 0;
      margin: 0 0;
      position: absolute;
      text-align: center;
      top: 5px;
      width: 25px;
      vertical-align: middle;
      z-index: 5;
    }
    

/*[注意書き]-----*/
    
    .SQ2018_attention{
      background: #f7f7f7;
      font-size: 12px;
      margin: 1rem auto 2rem;
      padding: 2%;
      max-width: 900px;
      width: 90%;
    }
    
    .SQ2018_attention strong{
      color: #A00002;
      display: block;
      position: relative;
      font-size: 14px;
    }
    
    .SQ2018_attention strong::before{
      content: '';
      display: inline-block;
      background: #A00002;
      border-radius: 10px;
      margin: 0 5px 0 0;
      height: 20px;
      width: 20px;
      vertical-align: top;
    }
    .SQ2018_attention strong::after{
      content: '!';
      display: block;
      color:#fff;
      font-weight: bold;
      position: absolute;
      left: 7px;
      top:0;
    }
    

/*[CVR周り]-----*/

    .SQ2018_CVR_tx {
      background: #fcf5f7;
      border: 1px solid #ff679a;
      font-size: 16px;
      padding: 2rem;
      text-align: center;
      margin: 1rem auto 3rem;
      max-width: 700px;
      width: 100%;
    }
    
    .SQ2018_CVR_tx a{
      background: #ff679a;
      border-radius: 5px;
      color: #fff !important;
      display: inline-block;
      font-size: 22px;
      font-weight: bold;
      position: relative;
      padding: 20px 35px 20px 25px;
      line-height: 140%;
      text-decoration: none;
    }
    
    
    .SQ2018_CVR_tx a::before{
      content:'';
      height:8px;
      width:8px;
      display:block;
      border:2px solid #fff;
      border-left-width:0;
      border-top-width:0;
      transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      position:absolute;
      top:50%;
      margin-top: -6px;
      right:15px;
      }


    .SQ2018_CVR_tx a:hover{
      text-decoration: none !important;
      background: #fd4180;
    }
    
    @media screen and (max-width: 768px) {
    .SQ2018_CVR_tx {
      padding: 2rem 2% !important;
      width: 78%;
    }
    
    .SQ2018_CVR_tx a{
      font-size: 18px;
      color: #fff;
      text-decoration: none;
    }
    }


 /*[ flow設定]-----*/


    .SQ2018_flow{
      margin: 0 auto;
      width: 98%;
    }
    
    @media screen and (max-width: 768px) {
      .SQ2018_flow{
        width: 100%;
      }
    }
    
    .flow_img{
      margin: 1rem auto;
      max-width: 750px;
      width: 90%;
    }

    .SQ2018_flow img{
      display: block;
      margin: 0 auto;
      height: auto;
      max-width: 100%;
      width: 100%;
    }


/*[ページ内リンク]-----*/

    .pageLink{
      margin: 1rem auto;
      width: 98%;
    }
    
    .pageLink p{
      margin-bottom: 0;
    }
    .pageLink p.SQ20018_small{
      margin-top: .5rem;
      text-align: right;
    }
    .pageLink a{
      display: block;
      border-bottom: 1px dotted #ccc;
      text-decoration: none;
      padding: 1rem 1.5rem;
      position: relative;
    }
    .pageLink a::before{
      content:'';
      height:0;
      width:0;
      display:block;
      border:8px transparent solid;
      border-bottom-width:0;
      border-top-color:#009fd3;
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      left:0px; 
    }
    
    .pageLink a:hover{
      background: #f6f6f6;
      border-bottom: 1px dotted #ccc !important;
      text-decoration: none !important;
    }