/* TABLE OF CONTENTS:
 * 
 * 01 どのサイズでも共通で適用されるスタイル
 *    - 新着情報
 *    - イントロ
 *    - 鍵の出張サービス
 *    - 金庫の種類
 *    - 金庫が開かない原因
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - 新着情報
 *    - 金庫の種類
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 */

/* --------------------------------------------------------------------------------------------------------
   01
 *
 * どのサイズでも共通で適用されるスタイル
 */


/* 汎用 */

/* ビルボード */
  #mainImg > div {
    background: url(/wp-content/themes/twentyseventeench/img/contents/unlock-bil-bg.png) left center no-repeat;
    background-size: contain;
    padding: 20px 0 20px 35.4vw;
  }

/* 目次 */
div#toc_container,
div#toc_container.contracted {
    max-width: 1000px;
    width: 100% !important;
}

#toc_container p.toc_title + ul.toc_list {
    display: block !important;
}
#toc_container .toc_list > li {
    font-size: 0.875em;
    vertical-align: top;
}
/* サービスの特徴（feature） */
    .feature .point,
    #pro-approach .point {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    }
    .feature .point div[class*="feature-"] p {
    margin: 0;
    }
    .feature .point div[class*="feature-"] {
    text-align: center;
    background-color: #cc3333;
    border-radius: 10px;
    padding: 0.8rem;
    margin-bottom: 1em;
    display: block;
    }
    #pro-approach .point div[class*="feature-"] {
    text-align: center;
    background-color: #385e7f;
    border-radius: 10px;
    padding: 0.8rem;
    padding-top: 0;
    margin-bottom: 1em;
    display: block;
    }
    #pro-approach .point div[class*="feature-"] .sp{
    display: flex;
    height: 90px;
    }
    #pro-approach .point div[class*="feature-"] .i-img {
    width: 50%;
    }
    #pro-approach .point div[class*="feature-"] svg[class*="i-"] {
    margin: 0.5em
    }
    #pro-approach .point div[class*="feature-"] .txt {
    margin-top: 2em;
    font-size: 20px;
    }
    
    .feature .point div[class*="feature-"] .sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    }
    .feature .point div[class*="feature-"] .i-img {
    width: 25%;
    height: 95px;
    padding-top: 15px;
    }
    .feature .point div[class*="feature-"] .i-img svg[class*="i-"] {
    fill: #FEFB42;
    height: 75px;
    width: 100%;
    display: inline-block;
    }
    #pro-approach .point div[class*="feature-"] .i-img svg[class*="i-"] {
    fill: #ffffff;
    height: 75px;
    width: 100%;
    display: inline-block;
    }
    .feature .point div[class*="feature-"] .txt {
    width: 100%;
    }
    .feature .point div[class*="feature-"]:last-child {
    margin-right: 0;
    }
    .feature .point div[class*="feature-"] .txt p.txt01{
    margin-top: 1.5rem;
    }
    .feature .point div[class*="feature-"] .txt p {
    color: #fefb42;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.1em;
    }
    #pro-approach .point div[class*="feature-"] .txt p {
    color: #fefb42;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.1em;
    }
    .feature .point div[class*="feature-"] .txt span {
    display: block;
    }
    .feature .point div[class*="feature-"] .txt p .txt02 {
    font-size: 1.8rem;
    }
    .feature .catch2{
    font-size: 17px;
    color: #fff;
    }


/* サービス料金（price）*/
    .price .price-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 2em;
   }
    .price .price-list > div {
    width:100%;
    padding: 1em 5px;
    margin: 0.5em;
    border: 5px solid #2082d7;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #content .price .price-list div[class*="li-case"] {
    border: 5px solid #ffc33b;
    background-image: url(/wp-content/themes/twentyseventeench/img/contents/sample2.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 95% 95%;
  }
    .price .price-list > div .sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
/*
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
*/
    width: 100%;
  }
    .price .price-list > div .icon2{
    width: 35%;
    margin-right: 1em;
    margin-left: 5px;
    text-align: center;
  }
    .price .price-list > div .list-box{
    flex-basis: 100%;
    margin-left: 1em;
    margin-top: 0.5rem;
  }
    .price .price-list > div ul {
    width: 100%;
    margin-bottom: 0;
  }
    .price .price-list > div ul li {
    list-style: none;
    float: left;
    padding: 0 0.5rem;
    background-color: #efefef;
    margin-right: 12px;
    text-align: center;
    border-radius: 50px;
    margin-bottom: 5px;
  }
    .price .price-list > div ul li span {
    font-size: 15px;
    font-weight: normal;
    border-radius: 50px;
    margin-right: 0;
  }
    .price .price-list > div svg[class*="i-"] {
    fill: #2082d7;
    height: 60px;
    width: 100%;
    display: inline-block;
  }
    .price .price-list > div .p-txt {
    align-self: center;
    font-size: 18px;
    font-size: 1.2em;
    width: 65%;
  }
  .price .price-list > div .p-txt p {
    margin-bottom: 0;
  }
  .price .price-list > div .p-txt p.tax1 {
    color: #C00;
    font-weight: bold;
    font-size: 1.6em;
  }
    .price .price-list > div .p-txt p.tax1 span.tax2 {
    display: inline;
    font-size: 16px;
  }
  .price .price-list > div .p-txt p span {
    display: block;
    font-size: 20px;
  }
   br.max30 { display: none;  }

@media screen and (max-width: 30em) {
  .price .price-list > div .p-txt p.tax1 {
    font-size: 1em;
  }
    .price .price-list > div .p-txt p.tax1 span.tax2 {
    font-size: 14px;
  }
  br.max30 { display: block;  }
}

/* クリックして文字表示 */
    .hidden_box {
     margin: 0.5rem 0;
     padding: 0;
    }

    /*ボタン装飾*/
    .hidden_box label {
     padding: 5px;
     font-weight: bold;
     border: solid 1px black;
     cursor: pointer;
     background-color: #efefef;
     margin: 0 4em;
     border-radius: 5px;
    }

    /*ボタンホバー時*/
    .hidden_box label:hover {
        background: #fefb42;
    }

    /*チェックは見えなくする*/
    .hidden_box input {
        display: none;
    }

    /*中身を非表示にしておく*/
    .hidden_box .hidden_show {
        height: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.8s;
    }

    /*クリックで中身表示*/
    .hidden_box input:checked ~ .hidden_show {
        padding: 2em 0 1em 0;
        height: auto;
        opacity: 1;
    }
        .hidden_box .hidden_txt {
        background-color: #fff;
        padding: 15px 1em;
        border-radius: 5px;
        font-size: 15px;
        text-align: left;
    }



/* 金庫の種類 */
ul.safetybox-type li {
  list-style: none;
  margin-top: 4em;
}
ul.safetybox-type li h3 {
  border-bottom: 1px #2082d7 solid;
  color: #2082d7;
  padding-bottom: 0.5em;
}
ul.safetybox-type li .thumb {
  text-align: center;
}



/* 金庫が開かない原因 */
section[id$="-cause"] table th,
section[id$="-cause"] table td {
  border: 1px solid #ccc;
  padding:10px 15px;
}
section[id$="-cause"] table thead th {
  text-align: center;
}
section[id$="-cause"] table tr th:first-child {
  max-width: 260px;
}
section[id$="-cause"] table th {
  background-color: #efefef;
}
section[id$="-cause"] table td {
  background: #fff;
}



/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 以上
 */
@media screen and (min-width: 30em) {

    /* ここにスタイル */

}/* End 620px Mobile Large */



/* --------------------------------------------------------------------------------------------------------
   03
 *
 * 幅 768px 以上
 */
@media screen and (min-width: 48em) {
    h1 + p {
        max-width: 750px;
        margin-right: auto;
        margin-left: auto;
    }

    .price .price-list > div > div {
      margin-left: 0;
  }



  /* 金庫の種類 */
  ul.safetybox-type li {
    display: flex;
  }
  ul.safetybox-type li .thumb {
    flex-shrink: 0;
    margin-right: 2em;
    width: min( 25%, 224px );
  }
  ul.safetybox-type li .txt {
    flex: 1;
  }

    
}/* End 740px Tablet Small */



/* --------------------------------------------------------------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media screen and (min-width: 55em) {

/* サービスの特徴（feature） */  
    .feature .check{
    margin-bottom: 0;
    padding-top: 1.1rem;
    }
    .feature .point div[class*="feature-"] .txt p{
    /* font-size: 2.5em; */
    }
    .hidden_box .hidden_txt {
    background-color: #fff;
    padding: 5px 1em;
    border-radius: 5px;
    font-size: 15px;
    min-height: 260px;
    }
    .feature .point div[class*="feature-"], 
    #pro-approach .point div[class*="feature-"]  {
    margin-right: 1em;
    width: 31%;
    }
    .feature .point div[class*="feature-"] .i-img {
    width: 100%;
    height: 95px;
    padding-top: 15px;
    }
    .feature .point div[class*="feature-"] .sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
    
    /* サービス料金（price）*/
    .price .price-list > div {
    width: 48%;
    padding: 0.7rem 0.3rem;
    border: 5px solid #2082d7;
    }
    #content .price .price-list div[class*="li-case"] {
    border: 5px solid #ffc33b;
    }
    .price .price-list > div .p-txt {
    align-self: center;
    font-size: 26px;
  }
}/* End 880px Tablet Large */



/* --------------------------------------------------------------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media screen and (min-width: 67em) {

    /* ここにスタイル */
    .price .price-list > div .sp {
        -ms-flex-wrap: initial;
        flex-wrap: initial;
    }


}/* End 955px Desktop Small */



/* --------------------------------------------------------------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media screen and (min-width: 79em) {

    /* ここにスタイル */


}/* End 1100px Desktop Medium */