@charset "utf-8";


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● template.css                                        */
/*                                                        */
/*    ・テンプレート                                      */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* SknTpl common ：共通の定義
--------------------------------------------------- */
.SknTpl{
  margin: 1em auto;
  clear: both;
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}





/* ImageParagraph Template ：画像（大）、画像（左右）とテキスト
--------------------------------------------------- */
.SknTplImageParagraph{

    /* TextItem */
    .TextItem{
      width: 60%;
      p{
        //margin: 0;
      }
    
    }
            /* 画像おおきめ */
            &.LargeImage .TextItem{
              width: 45%;
            }
            /* 画像小さめ */
            &.SmallImage .TextItem{
              width: 70%;
            }
            /* 画像floatなし */
            &.FloatNone  .TextItem{
              float: none;
              width: auto;
            }
    /* ImageItem */
    .ImageItem{
      width: 35%;
      position: relative;
    }
            /* 画像おおきめ */
            &.LargeImage .ImageItem{
              width: 50%;
            }
            /* 画像小さめ */
            &.SmallImage .ImageItem{
              width: 25%;
              @include media-query(under-bp-m) {
                max-width: 75vw;
              }

            }
            /* 画像floatなし */
            &.FloatNone  .ImageItem{
              margin: 1em 0;
            }
    .ImageItem {
      .Image{
        margin: 0;
        margin-bottom: 0!important;
        display: block;
        text-align: center;
        img{
          @include media-query(over-bp-m) {
            width: 100%;
          }
          height: auto!important;
        }
      }
      .Caption{
        padding: 1em 0 0;
      }
    }


    /* - - FullImage - - */
    &.FullImage{
      .ImageItem{
        width: auto;
      }
      .TextItem{
        width: auto;
        margin-top: 0.75em;
      }
    }



    /* - - LeftImage - - */
    &.LeftImage{
      .ImageItem{
        float: left;
        margin-right: 10px;
      }
      .TextItem{
        float: right;
      }
    }



    /* - - RightImage - - */
    &.RightImage{
      .ImageItem{
        float: right;
        margin-left: 10px;
      }
      .TextItem{
        float: left;
      }
    }

        /* + + + + + レスポンシブ + + + + +  */
        @include media-query(under-bp-m) {
            &.RightImage,
            &.LeftImage{
              .ImageItem{
                float: none;
                width: auto;
                margin: 0 auto 1em;
                padding: 0;
                text-align: center;
                .Image{
                  margin: 0 auto;
                }
              }
              .TextItem{
                float: none;
                width: auto;
              }
            }
        }
        /* + + + + + /レスポンシブ + + + + +  */

}









/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
.SknTplDecoratedBox.Type1 {

    > .DecoratedBox{
      margin:  0 auto;
      position: relative;
      > .inner{
        padding: 40px;
        @include media-query(under-bp-m) {
          padding: 20px;
        }
        background: rgba($base-color, 1);
        position: relative;
        overflow: hidden;
        @extend .clearfix;
        > *:first-child{
          margin-top: 0;
        }
        > *:last-child{
          margin-bottom: 0;
        }
        &::before{
          @extend %_pseudo_element;
          background-image: url(../img/common/logo/site_logo.svg);
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background-size: 20rem;
          opacity: 0.1;
          background-position: 4rem 4rem;
          background-repeat: no-repeat;
          pointer-events: none;
        }
      }
    }
}









/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
.SknTplDecoratedBox.Type2 {
  > .DecoratedBox{
    margin:  0 auto;
    position: relative;
    > .inner{
      padding: 40px;
      @include media-query(under-bp-m) {
        padding: 20px;
      }
      // background: rgba($base-color, 1);
      background: repeating-linear-gradient(-45deg, $base-color, $base-color 10px, transparent 0, transparent 20px);
      position: relative;
      @extend .clearfix;
      > *:first-child{
        margin-top: 0;
      }
      > *:last-child{
        margin-bottom: 0;
      }
      
    }
  }
    
}




/* DecoratedBox Template ：装飾付きボックス
--------------------------------------------------- */
// .SknTplDecoratedBox.Type3 {
//   > .DecoratedBox{
//     margin: 1.25em 0;
//     padding: 4rem;
//     background-color: #e4f2f8;
    
//     > .inner{
//       @extend .clearfix;
      
//       > *:first-child{
//         margin-top: 0;
//       }
//       > *:last-child{
//         margin-bottom: 0;
//       }
      
//     }
//   }
  
// }









/* SknTplThumbnailList ：画像付きリスト
--------------------------------------------------- */
.SknTplThumbnailList{
    ul{
      list-style: none;
    }
    

}







/* TextButton Template ：テキストボタン
--------------------------------------------------- */
.SknTplTextButton{
  position: relative;

    /* - - ul - - */
    ul{
      list-style: none;
      text-align: center;
      margin: 1em 0!important;
      letter-spacing: -0.5em;
      // font-size: $font-size-s;
      li{
        margin: 2.5px!important;
        display: inline-block;
        letter-spacing: 0em;
        a {
          @extend %DefaultButton;
        }
      }
    }
    /* - - p - - */
    p{
      font-size: 100%;
      text-align: center;
      margin: 0;
    }
}











/* DecoratedTable Template ：表組み（テーブル）
--------------------------------------------------- */
.SknTplDecoratedTable{
    table{
      width: 100%;
      border-collapse: collapse;
      margin: 0 auto;
      @extend %DefaultTable;
    }
    table.AutoWidth{
      @include media-query(over-bp-m) {
        width: auto;
        width: max-content;
        min-width: 60%;
        margin-left: 0;
      }
    }
    
            /* + + + + + レスポンシブ + + + + +  */
            @include media-query(under-bp-m) {
                /* notScrollable */
                table:not(.LargeTable) {
                  thead{
                    display: none;
                  }
                  tr,
                  th,
                  td{
                    display: block;
                    width: auto!important;
                    border-left: none;
                    border-right: none;
                  }
                  tr{
                    margin-bottom: 0;
                  }
                  th{
                    padding: 0.5em 10px;
                    width: auto;
                    text-align: left;
                  }
                  td{
                    border-top: none;
                  }
                }
                
                /* Scrollable */
                table.LargeTable{
                  thead{
                    display: table-header-group;
                    th{
                      display: table-cell;
                    }
                  }
                  tr{
                    display: table-row;
                    th,
                    td{
                      display: table-cell;
                    }
                  }
                }
            }
    
    
    /* - - テーブル内部のリスト - - */
    ul,
    ol{
      margin: 0 0 0 2em;
    }
    li ul ,
    li ol{
      margin: 0.25em 0 0.5em 1em;
    }
}












/* TextList Template ：テキストリスト
--------------------------------------------------- */
.SknTplTextList{

    /* - - ul - - */
    ul.TextList{
      list-style: none;
      margin: 1.25em 0;
      line-height: 1.5;
      
        > li{
          padding: 0 0;
          // margin: 0 0 1rem;
            position: relative;
          &:hover,
          &:focus{
            z-index: 5;
          }
          &:not(:last-child){
            margin: 0 0 -1px;
          }
          .Label{
            font-size: 1.6rem;
            font-weight: 500;
            display: flex;
            align-items: start;
            flex-direction: column;
            @include media-query(under-bp-m) {
              font-size: 1.4rem;
            }
            span.Sub{
              font-size: 1.2rem;
              font-weight: 400;
              line-height: 1.5;
              opacity: 0.75;
              margin-top: 1rem;
            }
          }
          .Icon{
            font-size: 3rem;
            vertical-align: middle;
            padding: 0;
            @include media-query(under-bp-m) {
              font-size: 2rem;
            }

            &::before{
              line-height: 2;
              width: 2em;
              height: auto;
              border-radius: 100%;
              transform: scale(0.6);
            }
            &:not([class *= 'icon-file-'])::before{
              transform: scale(0.35);
              // color: $main-color;
              color: #fff;
              background: $main-color-deep;
            }
            
          }

          
          & > a,
          & > del > a{
            margin: 0;
            padding: 0.5em 1rem;
            @include media-query(under-bp-m) {
              padding: 0.25em 1rem;
            }
            padding-left: 0;
            box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
            border: 1px solid rgba(255,255,255,1);
            display: block;
            text-decoration: none;
            position: relative;
            //color: $main-color;
            display: flex;
            // align-items: start;
            align-items: center;
            transition: all .2s;
            @include media-query(under-bp-m) {
            }
            &.New .Label::after{
              content: "NEW";
              display: inline-block;
              color: #f00;
              border: 1px solid;
              padding: 0.125em 0.25em;
              line-height: 1;
              font-size: 75%;
              margin-left: 0.5em;
            }
            html.PcView &:not(.Invalid):hover,
            html.PcView &:not(.Invalid):focus{
                border-color: $main-color;
                background-color: rgba(#000, 0.1);
                text-decoration: none;
            }
            
      
            // 別ウィンドウのリンクにアイコンを付加
            &[target="_blank"]::after{
              display: none; //重複するアイコンを削除
            }
            &[target="_blank"] .Label .Sub{
              @extend %ExternalLink;
            }
            
            /* リンク無効の時 */
            &.Invalid{
              cursor: default;
              color: inherit;
              .Icon{
                display: none;
              }
            }
          }
        }
        
    }


    /* + + + + + レスポンシブ + + + + +  */
    @include media-query(over-bp-m) {
        &.FlexParent > li{
          border: none;
          border-left: 1px dotted rgba(0,0,0,0.25);
          flex-grow: 1;
        }
        &.FlexParent > li:first-child{
          border-left: none;
        }
    }

    @include media-query(under-bp-m) {
        &.FlexParent:not(.AutoDirection) > li{
          border: none;
          border-left: 1px dotted rgba(0,0,0,0.25);
          flex-grow: 1;
        }
        &.FlexParent:not(.AutoDirection) > li:first-child{
          border-left: none;
        }
    }



    td & {
      margin: 0;
      ul.TextList{
        &:first-child{
          margin-top: 0;
        }
        &:last-child{
          margin-bottom: 0;
        }
        li{
          margin: 0;
          border-bottom: 1px solid $main-color;
          &:first-child{
            border-top: none;
          }
          &:last-child{
            border-bottom: none;
          }
        }
        a{
          border: none;
          box-shadow: none;
        }

      }
    }
}






/* SknTplFaq ：Ｑ＆Ａ
--------------------------------------------------- */
// .SknTplFaq {
//     > .inner {
//       padding: 30px 0;
//       border-top: 1px solid #249;
//     }
//     /* common */
//     > .inner > .QuestionText,
//     > .inner > .AnswerText {
//       position: relative;
//       padding-left: 8rem;
//       line-height: 4rem;
//     }
//     > .inner > .QuestionText::before,
//     > .inner > .AnswerText::before {
//       position: absolute;
//       top:  0px;
//       left: 2rem;
//       font-family: 'Century Gothic';
//       font-size: 1.6rem;
//       font-weight: bold;
//       color: #fff;
//       width: 4rem;
//       line-height: 4rem;
//       text-align: center;
//       vertical-align: middle;
//     }
    
    
//     /* question */
//     > .inner > .QuestionText {
//       font-weight: bold;
//       font-size: 125%;
//       color: #233e75;
//       margin: 0 0 1.5em;
//     }
//     > .inner > .QuestionText::before {
//       content: "Q";
//       background-color: #233e75;
//     }
//     /* answer */
//     > .inner > .AnswerText {
//       font-size: 100%;
//     }
//     > .inner > .AnswerText::before {
//       content: "A";
//       background-color: #cc2262;
      
//     }
    
//     > .inner > .AnswerText img {
//       float: right;
//       width: 30%;
//       margin-top: 1rem;
//       margin-left: 5%;
//       margin-bottom: 1rem;
//     }



//             /* + + + + + レスポンシブ + + + + +  */
//             @include media-query(under-bp-m) {
//                 > .inner > .QuestionText,
//                 > .inner > .AnswerText {
//                   position: relative;
//                   padding-left: 6rem;
//                 }
//                 > .inner > .QuestionText::before,
//                 > .inner > .AnswerText::before {
//                   left: 0rem;
//                 }
//                 > .inner > .AnswerText img {
//                   width: 47.5%;
//                   margin-left: 2.5%;
//                   margin-bottom: 0.5rem;
//                 }
//             }

// }






/* GetAdobeReader 
--------------------------------------------------- */
.SknTplGetAdobeReader{
  background: rgba($base-color, 1);
  padding: 20px 30px;
  max-width: 500px;
  > .inner{

    .Banner{
      margin: 0;
      float: left;
      width: 125px;
      // 別ウィンドウのリンクアイコンを非表示
      a[target="_blank"]::after {
        display: none;
      }
    }
    .Text{
      margin: 0 0 0 135px;
      font-size: $font-size-ss;
      line-height: 1.5;
      text-align: justify;
      color: rgba($text-color, 0.75);
    }
            /* + + + + + レスポンシブ + + + + +  */
            @include media-query(under-bp-m) {
    
                .SknTplGetAdobeReader{
                  padding: 10px;
                }
                .Banner{
                  width: 75px;
                }
                .Text{
                  margin: 0;
                  margin: 0 0 0 85px;
                }
            }

  }

}











/* SknTplColumnGroup
--------------------------------------------------- */
.SknTplColumnGroup {
  /* ベースはcommon_element.cssで定義 */


}










/* SknTplEmbedVideo
--------------------------------------------------- */
.SknTplEmbedVideo {
    > .inner{
      padding: 30px;
    }
    > .inner > .code {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
    }
    > .inner > .code > iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100% !important;
      height: 100% !important;
    }
}


/* SknTplEmbedGoogleMaps
--------------------------------------------------- */
.SknTplEmbedGoogleMaps {
    > .inner {
      > .code {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        //padding-top: 75%;
        display: block;
        iframe {
          position: absolute;
          top: 0;
          right: 0;
          width: 100% !important;
          height: 100% !important;
        }
      }
    }
}