@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    サイト共通 細かい要素の装飾定義               */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   images                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
img{
  max-width: 100%;
}
    /* googlemap 内の画像は適用外 */
    #GoogleMap img{
      max-width: none;
    }

/* 画像表示 汎用（試作物）version 2017013001
--------------------------------------------------- */


    /* デフォルト */
    .Image img{
      width: 100%;
      height: auto;
    }
    /* 表示枠を埋める */
    .Image.Cover{
      overflow: hidden;
    }
    .Image.Cover img{
      max-width: none;
    }
    .Image.Cover img.Landscape{
      width: auto;
      height: 100%;
    }
    .Image.Cover img.Portrait{
      width: 100%;
      height: auto;
    }
    /* 全体を見せる */
    .Image.Contain{
    }
    .Image.Contain img.Landscape{
      width: 100%;
      height: auto;
    }
    .Image.Contain img.Portrait{
      width: auto;
      height: 100%;
    }
    /* フィット */
    .Image.Fit{
    
    }
    .Image.Fit img{
      width: 100%;
      height: 100%;
    }


    /* ボーダー装飾 */
    .Image.Border{
      border: 3px solid #ffcb18;
    }
    .Image.BorderTop{
      padding-top: 0;
      border-top: 6px solid #ffcb18;
    }
    
    /* ボーダー装飾 */
    .Image.Rounded{
      
      display: block;
      overflow: hidden;
      border-radius: 100%;
    }




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Text and Heading                               */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */


/* 見出し common
--------------------------------------------------- */
.Heading{
  line-height: 2;
  margin: 2em 0;
}
.Heading:first-child,
.Heading[class*="Type"]:first-child{
  margin-top: 0;
}
/*
.Heading:last-child,
.Heading[class*="Type"]:last-child{
  margin-bottom: 0;
}
*/


/* 見出しバリエーション
--------------------------------------------------- */

/* Type1 :::::::::::::::::::::::::  */
.Heading.Type1{
  font-weight: 600;
  position: relative;
  text-align: center;
  padding-bottom:  2em;
  margin: 3em 0 1.5em;
  background: url(../img/common/decoration/ruler_type2.png) no-repeat 50% 100%;
}
.Heading.Type1 > .Main{
  font-size: 187.5%;
  vertical-align: middle;
  display: block;
  text-align: center;
  letter-spacing: 0.1em;
}
.Heading.Type1 > .Sub{
  font-size: 87.5%;
  margin: 0.5em 0;
  letter-spacing: 0.1em;
  display: block;
  text-align: center;
  /*opacity: 0.75;*/
}
            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .Heading.Type1{
                  background-size: 68px 10px;
                  padding-bottom: 2em;
                  margin:  2em 0 1.5em;
                }
                    body.rsbp-under-bp2 .Heading.Type1 .Main{
                      font-size: 162.5%;
                      letter-spacing: 0.05em;
                    }
                    body.rsbp-under-bp2 .Heading.Type1 .Main,
                    body.rsbp-under-bp2 .Heading.Type1 .Sub{
                    }


            /* 外国語サイト用 - - - - */
            html[lang="en"] .Heading.Type1{
              font-weight: 600;
              line-height: 1.75;
            }
            html[lang="en"] .Heading.Type1 > .Main{
              font-size: 137.5%;
              letter-spacing: 0em;
            }
            html[lang="en"] .Heading.Type1 > .Main,
            html[lang="en"] .Heading.Type1 > .Sub {
              letter-spacing: 0em;
            }
                /* bp2より狭いディスプレイ用 */
                    html[lang="en"] body.rsbp-under-bp2 .Heading.Type1 .Main{
                      font-size: 125%;
                    }
                    html[lang="en"] body.rsbp-under-bp2 .Heading.Type1 .Sub{
                      font-weight: 400;
                    }

            html[lang^="zh"] .Heading.Type1{
              font-weight: 600;
              line-height: 1.75;
            }
            html[lang^="zh"] .Heading.Type1 > .Main{
              letter-spacing: 0.125em;
            }
            html[lang^="zh"] .Heading.Type1 > .Sub {
              letter-spacing: 0em;
            }
                /* bp2より狭いディスプレイ用 */
                    html[lang^="zh"] body.rsbp-under-bp2 .Heading.Type1 .Main{
                      font-size: 137.5%;
                      letter-spacing: 0em;
                    }




/* Type2 :::::::::::::::::::::::::  */
.Heading.Type2{
  margin: 2.5em 0 1em;
  background: #332726;
  border-radius: 0.5em;
  overflow: hidden;
}
.Heading.Type2,
.Heading.Type2 *{
  line-height: 1.75;
}
.Heading.Type2 > .Main{
  font-size: 112.5%;
  display: inline-block;
  /*min-width: 12.5em;*/
  letter-spacing: 0.1em;
  font-weight: 600;
  padding: 0.5em 0.75em;
  color: #fff;
  text-align: center;
}
.Heading.Type2 > .Sub{
  font-size: 87.5%;
  color: #fff;
  padding: 0 1em;
  font-weight: 400;
}
            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .Heading.Type2 > .Main,
                body.rsbp-under-bp2 .Heading.Type2 > .Sub{
                  display: block;
                  text-align: center;
                }
                body.rsbp-under-bp2 .Heading.Type2 > .Sub{
                  background: #555;
                }





/* Type3 :::::::::::::::::::::::::  */
.Heading.Type3{
  position: relative;
  margin: 2.5em 0 1em;
}
.Heading.Type3::after{
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 2;
  content: '';
  width: 100%;
  height: 1px;
  background-color: rgba(92,55,38,0.1);
}
.Heading.Type3 > .Main{
  letter-spacing: 0.0625em;
  font-size: 150%;
  position: relative;
  display: inline-block;
  padding-bottom: .5em;
  font-weight: 600;
}
.Heading.Type3 > .Main::after{
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 2;
  content: '';
  width: 100%;
  height: 1px;
  background-color: rgb(92,55,38);
}
.Heading.Type3 > .Sub{
  font-weight: normal;
  font-size: 87.5%;
  font-size: 75%;
  letter-spacing: 0.25em;
  margin-left: 1.5em;
}

.Heading.Type3 > .Sub::before,
.Heading.Type3 > .Sub::after{
  content: "─";
  color: rgba(0,0,0,0.75);
}
            /* + + + + + レスポンシブ + + + + +  */
                
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .Heading.Type3 > .Main{
                  font-size: 125%;
                  line-height: 1.5;
                }
                body.rsbp-under-bp2 .Heading.Type3 > .Sub{
                  font-size: 62.5%;
                }


            /* 外国語サイト用 - - - - */
            html[lang="en"] .Heading.Type3 > .Main,{
              font-weight: 400;
            }
            html[lang="en"] .Heading.Type3 > .Main,
            html[lang="en"] .Heading.Type3 > .Sub {
              letter-spacing: 0em;
            }


/* Type4 :::::::::::::::::::::::::  */
.Heading.Type4 {
  margin: 2.25em 0 0.875em;
  background: #f2f2f2;
  padding: 0.25em 0.5em;
  padding-left: 1em;
  letter-spacing: 0.1em;
  font-weight: 400;
  position: relative;
}
.Heading.Type4 > .Main{
  display: inline-block;
  padding: 0;
  padding-right: 0.5em;
  font-weight: 600;
  font-size: 100%;
}
.Heading.Type4 > .Main::before{
  font-family: 'メイリオ';
  content: "●";
  color: #36a;
  position: absolute;
  top: 50%;
  left: 0%;
  line-height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
}
.Heading.Type4 > .Sub{
  padding: 0;
  font-size: smaller;
  font-weight: 400;
  letter-spacing: 0.1em;
}


            /* 外国語サイト用 - - - - */
            html[lang="en"] .Heading.Type4{
              border-left: 4px solid #36a;
            }
            html[lang="en"] .Heading.Type4 > .Main::before{
              content: "";
            }
            html[lang="en"] .Heading.Type4 > .Main{
              font-weight: 400;
              line-height: 1.5;
            }
            html[lang="en"] .Heading.Type4 > .Main,
            html[lang="en"] .Heading.Type4 > .Sub {
              letter-spacing: 0em;
            }



/* Type5 :::::::::::::::::::::::::  */
.Heading.Type5 {
  margin: 1.5em 0 1.5em;
  font-size: 125%;
  font-weight: 400;
  color: #111;
}
.Heading.Type5 > .Main{
  
}
            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .Heading.Type5{
                  font-size: 112.5%;
                  font-weight: 600;
                }



/* Type6 :::::::::::::::::::::::::  */
.Heading.Type6 {
  margin: 1.5em 0 0.5em;
}







/* PageTitle
--------------------------------------------------- */
.PageTitle .Heading{
  font-weight: 600;
  position: relative;
  text-align: center;
  padding-bottom:  2em;
  margin: 1em 0;
  background: url(../img/common/decoration/ruler_type2.png) no-repeat 50% 100%;
}
    .PageTitle .Heading .Main,
    .PageTitle .Heading .Sub{
      text-align: center!important;
      display: block;
    }
    .PageTitle .Heading .Main{
      font-size: 187.5%;
      vertical-align: middle;
      letter-spacing: 0.125em;
    }
    .PageTitle .Heading .Sub{
      font-size: 87.5%;
      margin: 0.5em 0;
      letter-spacing: 0.125em;
    }
            /* 外国語サイト用 - - - - */
            html[lang='en'] .PageTitle .Heading > .Main{
              letter-spacing: 0em;
            }


            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .PageTitle .Heading{
                  background-size: 68px 10px;
                  margin: 0.5em 0;
                  line-height: 1.5;
                  padding-bottom: 1em;
                }
                    body.rsbp-under-bp2 .PageTitle .Heading .Main{
                      font-size: 162.5%;
                      letter-spacing: 0.05em;
                    }
                    body.rsbp-under-bp2 .PageTitle .Heading .Main,
                    body.rsbp-under-bp2 .PageTitle .Heading .Sub{
                    }







/* DefaultText
--------------------------------------------------- */
.DefaultText{
}
.Decorated.DefaultText:first-letter{
  font-size: 400%;
  line-height: 2rem;
  float: left;
  vertical-align: top;
  font-weight: 100;
}
.ContentsDivision .DefaultText{
  line-height: 2em;
}

                    /* 外国語サイト用 - - - - */
                    html[lang="en"] .ContentsDivision .DefaultText{
                      line-height: 1.75em;
                      /*text-align: justify;*/
                    }


    .DefaultText em{
    }
    .DefaultText .Sub{
      font-size: 75%;
    }




p.DefaultText{
  margin: 0 0 2em;
}
p.DefaultText:last-child{
  margin-bottom: 0;
}
ul.DefaultText,
ol.DefaultText,
dl.DefaultText{
  line-height: 1.5;
  margin: 0.5em 0 0.5em 1.5em;
}
ul:not([class]),
ol:not([class]),
dl:not([class]){
  margin: 0.5em 0 0.5em 1.5em;
}

        /* リスト系 */
        ul.DefaultText,
        ol.DefaultText{
          line-height: 1.5;
          margin: 1em 0 1.75em 1.5em;
        }
        ul.DefaultText:first-child,
        ol.DefaultText:first-child{
          margin-top: 0;
        }
        ul.DefaultText:last-child,
        ol.DefaultText:last-child{
          margin-bottom: 0;
        }
        ul.DefaultText li,
        ol.DefaultText li{
          margin: 0 0 0.75em;
        }
        ul.DefaultText li:last-child,
        ol.DefaultText li:last-child{
          margin-bottom: 0;
        }
            /* リストスタイル */
            ul.ListStyleKatakana,
            ol.ListStyleKatakana{
              list-style-type: katakana;
            }
            /* ネスト */
            .DefaultText ul,
            .DefaultText ol,
            .DefaultText ul,
            .DefaultText ol{
              font-size: smaller;
              margin-top:  0.5em;
              margin-left: 4em;
            }
                .DefaultText ul li,
                .DefaultText ol li,
                .DefaultText ul li,
                .DefaultText ol li{
                  margin: 0 0 0.25em;
                }


        dl{
          line-height: 1.5;
          margin: 1.5em 0;
        }
        dl dt{
          font-weight: bold;
          margin-bottom: 0.25em;
        }
        dl dd{
          margin-left: 3em;
          margin-bottom: 1.5em;
          line-height: 1.5;
        }
        /*
        ul:not([class]),
        ol:not([class]),
        dl:not([class]){
          margin: 1em 0 1em 1.5em;
        }
        */


        /* 強調 */
        .DefaultText em{
          background: #def;
          padding: 0 0.25em;
        }
        




/* RuleText 規約等
--------------------------------------------------- */
.RuleText{
  line-height: 2em;
  margin: 0 auto 2em;
  max-width: 800px;
  font-size: 87.5%;
}
    ul.RuleText,
    ol.RuleText{
    }
    ul.RuleText li,
    ol.RuleText li{
      margin: 2em 0;
    }






/* AttentionText
--------------------------------------------------- */
.AttentionText{
}


/* PriceText
--------------------------------------------------- */
.PriceText{
}
    .PriceText .Main{
      font-size: 125%;
      background: none;
    }


/* CaptionText
--------------------------------------------------- */
.Caption,
.CaptionText{
  display: block;
  font-size: 75%;
  line-height: 1.5;
  display: block;
  margin: 1em 0;
  text-align: center;
}

/* tel link
--------------------------------------------------- */
.TelLink{
}
.TelLink:hover{
}


/* sup
--------------------------------------------------- */
sup{
  font-size: x-small;
  line-height: 1.1;
}


/* 丸付き文字
--------------------------------------------------- */
.Circled{
  color: #282832;
  border: 1px solid #282832;
  background: #fff;
  border-radius: 3em;
  display: inline-block;
  width: 1.5em;
  width: calc(1.5em + 2px);
  line-height: 1.5em;
  text-align: center;
  vertical-align: middle;
}




/* 引用 blockquote
--------------------------------------------------- */
blockquote {
  position: relative;
  padding: 35px 25px;
  box-sizing: border-box;
  font-style: italic;
  background: #f5f5fa;
  color: #555;
  border-left: 4px solid #9dd4ff;
  margin: 1em auto;
  width: 95%;
}

    blockquote::before{
      display: inline-block;
      position: absolute;
      top: 5px;
      left: 3px;
      content: "“";
      font-family: sans-serif;
      color: #9dd4ff;
      font-size: 30px;
      line-height: 1;
    }
    
    blockquote .Heading {
    }
    
    blockquote p {
      padding: 0;
      margin: 0.5em 0;
      font-size: 87.5%;
    }
    
    blockquote cite {
      display: block;
      text-align: right;
      font-size: 75%;
      margin-top: 2em;
    }
    
    blockquote cite .Icon{
      color: #328cff;
    }
    
        blockquote cite a{
          background: rgba(50,140,255,0.05);
          padding: 0.5em 1em;
          border-radius: 1.5em;
        }
        blockquote cite a:hover{
          background: rgba(50,140,255,0.15);
        }



/* リスト（汎用）
--------------------------------------------------- */

/* ※印付きリスト :  */
.AsteriskList{
  list-style: none;
  padding-left: 1em;
  line-height: 1.5;
}
    .AsteriskList > li{
      position: relative;
      margin: 1em 0;
    }

    .AsteriskList > li::before{
      content: "※";
      position: absolute;
      left: -1.25em;
      top: 0;
    }





/* 補助スタイル （ボーダー）
--------------------------------------------------- */
.BorderTop{
  margin-top:  0.75em;
  border-top:  1px solid rgba(0,0,0,0.5);
  padding-top: 0.75em;
}


/* tooltip
--------------------------------------------------- */
.Tooltip {
  border-bottom: 1px dashed;
  cursor: pointer;
  margin: 0 0.25em;
  color: #2098d1;
}
.Tooltip::before{
  margin-right: 0.25em;
}
.Tooltip:hover,
.Tooltip:focus {
  border-bottom: none;
}
    .ui-tooltip {
      box-shadow: none;
      color: #2098d1;
      background: white;
      border: 2px solid;
      width: 20em;
      max-width: 50%;
      padding: 20px;
      z-index: 100;
      text-align: left;
    }
    .ui-tooltip * {
    }

/* font
--------------------------------------------------- */

/* basic */
.fontDefault{
  font-family: "Meiryo", "Arial", "Century Gothic", sans-serif;
}
.fontSansSerif{
  /*font-family: "Verdana", "Hiragino Kaku Gothic ProN", "Meiryo", "Arial", "Century Gothic", sans-serif;*/
  font-family:    "Meiryo", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
}
.fontSerif{
  font-family: "YuMincho", "游明朝", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "MS PMincho", "ＭＳＰ明朝", "MS Mincho", "ＭＳ明朝", serif;
  font-feature-settings: "palt";
}
.fontMonospace{
  font-family: "Osaka-mono", "MS Gothic", monospace;
}
.fontNumber{
  font-family: "Open Sans", "Arial", "Century Gothic", "游ゴシック", sans-serif;
}
.fontEnglish {
  font-family: "Open Sans", "Arial", "Century Gothic", "游ゴシック", sans-serif;
}


        /* 外国語サイト用 - - - - */
        html[lang="en"] .DefaultText,
        html[lang="en"] .Button .Label{
          font-family: "Times", serif;
          font-weight: 400;
        }
        html[lang="en"] .PageList,
        html[lang="en"] .Heading.Type1,
        html[lang="en"] .PageTitle,
        html[lang="en"] .Button .Label,
        html[lang="en"] .ExhibitionBlock.List .NewsList li a::after{
          font-family: "Spectral SC", serif;
        }


        html[lang='zh-cmn-Hans'] .fontSerif{
          font-family: "Noto Serif SC", "SimSun", "Microsoft YaHei",     sans-serif;
        }
        html[lang='zh-cmn-Hant'] .fontSerif{
          font-family: "Noto Serif TC", "SimSun","Microsoft JhengHei", 'PMingLiU', sans-serif;
        }
        /*
        html[lang^='zh'] .fontSerif{
          font-family: 'SimSun', serif;
        }
        */


/* FontSize
--------------------------------------------------- */
.FontSizeXXLarge,
.DefaultText.FontSizeXXLarge{
  font-size: 175%;
}
.FontSizeXLarge,
.DefaultText.FontSizeXLarge{
  font-size: 150%;
}
.FontSizeLarge,
.DefaultText.FontSizeLarge{
  font-size: 125%;
}
.FontSizeLarger,
.DefaultText.FontSizeLarger{
  font-size: 112.5%;
}
.FontSizeNormal,
.DefaultText.FontSizeNormal{
  font-size: 100%;
}
.FontSizeSmaller,
.DefaultText.FontSizeSmaller{
  font-size: 87.5%;
}
.FontSizeSmall,
.DefaultText.FontSizeSmall{
  font-size: 75%;
}
.FontSizeXSmall,
.DefaultText.FontSizeXSmall{
  font-size: 62.5%;
}



/* FontWeight
--------------------------------------------------- */
.FontWeightThin{
  font-weight: 100;
}
.FontWeightThinner{
  font-weight: 200;
}
.FontWeightNormal{
  font-weight: 400;
}
.FontWeightBolder{
  font-weight: 600;
}
.FontWeightBold{
  font-weight: 800;
}




/* TextAlign
--------------------------------------------------- */
.TextAlignCenter{
  text-align: center;
}
.TextAlignLeft{
  text-align: left;
}
.TextAlignRight{
  text-align: right;
}
.TextAlignJustify{
  text-align: justify;
}


/* VerticalAlign
--------------------------------------------------- */
.VerticalAlignTop,
.VerticalAlignTop *{
  vertical-align: top;
}
.VerticalAlignMiddle,
.VerticalAlignMiddle *{
  vertical-align: middle;
}
.VerticalAlignBottom,
.VerticalAlignBottom *{
  vertical-align: bottom;
}




/* Float
--------------------------------------------------- */
.FloatLeft{
  float: left;
}
.FloatRight{
  float: right;
}
.FloatNone{
  float: none;
}

/* Padding
--------------------------------------------------- */
.PaddingBottom{
  padding-bottom: 1em;
}
.PaddingTop{
  padding-top:    1em;
}
.PaddingHorizontal{
  padding-left:   1em;
  padding-right:  1em;
}
.PaddingHorizontal{
  padding-left:   1em;
  padding-right:  1em;
}
.PaddingNone{
  padding: 0;
}




/* TextOverFlowNone
--------------------------------------------------- */
.TextOverFlowNone{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* LetterSpacing
--------------------------------------------------- */
.LetterSpNarrowest{
  letter-spacing: -0.10em;
}
.LetterSpNarrow{
  letter-spacing: -0.05em;
}
.LetterSpNormal{
  letter-spacing:    0em;
}
.LetterSpWide{
  letter-spacing:  0.05em;
}
.LetterSpWidest{
  letter-spacing:  0.10em;
}


/* NoWrap
--------------------------------------------------- */
.NoWrap{
  white-space: nowrap;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   DropDown                                       */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ドロップダウン
--------------------------------------------------- */
.DropDownParent{
  position: relative;
}
    .DropDownChild{
      display: none;
      position: absolute;
      top:   100%;
      left:    0%;
      width: 100%;
      z-index: 50;
    }
/* ドロップダウン（多階層リスト専用）
--------------------------------------------------- */
.DropDownListParent{
  position: relative;
}
    .DropDownListParent ul{
      list-style: none;
      position: absolute;
      min-width: 100%;
      left: 0px;
      top: 100%;
      z-index: 10;
    }
    .DropDownListParent ul a {
      display: block;
    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   MessageBox                                     */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MessageBox
--------------------------------------------------- */
.MessageBox{
  padding: 0px 25px 50px;
  margin: 1em auto;
  width: 75%;
  text-align: center;
  background: rgba(255,255,255,0.5);
  border: 10px solid #eee;
  border-radius: 10px;
  position: relative;
}
    .MessageBox .Heading{
      margin: 0 0 1em;
      line-height: 1.75;
    }
    .MessageBox .Heading .Label:first-child{
      margin-top: 50px;
      display: block;
    }
    .MessageBox .Heading .Icon::before{
      font-size: 400%;
    }
    .MessageBox .DefaultText{
      text-align: center;
      line-height: 2;
      margin: 0;
      font-size: 87.5%;
    }
                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より広いディスプレイ用 */
                    body.rsbp-over-bp2 .MessageBox .Heading {
                    }

                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 .MessageBox {
                      width: 90%;
                    }
                    body.rsbp-under-bp2 .MessageBox .Heading {
                    }
                    body.rsbp-under-bp2 .MessageBox .Heading .Icon{
                      padding-top: 1.5em;
                    }
                    body.rsbp-under-bp2 .MessageBox .Heading .Label:first-child{
                      margin-top: 20px;
                    }
                    body.rsbp-under-bp2 .MessageBox .DefaultText  {
                    }
    /* options */
    .MessageBox.Caution{
      color: #222;
      color: inherit;
      background: #f5f47a;
    }
    .MessageBox.Clear .Heading{
      color: #4584ed;
    }
    .MessageBox.Error .Heading{
      color: #dc4e1f;
    }



/* ScrollMessage
--------------------------------------------------- */
.ScrollMessage{
  text-align: center;
  position: relative;
  padding: 1em 0 2em;
}
    .ScrollMessage .Label{
      font-size: 75%;
    }




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   SearchBox                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 検索ボックス
--------------------------------------------------- */
.SearchBox{
  margin: 0 1em;
}
    .SearchBox .InputText,
    .SearchBox  button,
    .SearchBox .Button.Small{
      font-size: 1rem;
      line-height: 2rem;
      border: none;
      padding: 0 0.75em;
      border-radius: 0.2em;
    }
    .SearchBox .InputText{
      font-size: smaller;
      /*color: rgba(0,0,0,0.5);*/
      background: #eeeded;
      margin-right: 0.125em;
      width: 15em;
      height: 2rem;
    }
    .SearchBox button,
    .SearchBox .Button.Small{
      font-size: smaller;
      cursor: pointer;
      color: #fff;
      background: #1677cb;
        -webkit-appearance: none; /* safari: 独自CSSを外す */
    }
    /* hover */
    .SearchBox  button:hover,
    .SearchBox .Button.Small:hover,
    .SearchBox  button:focus,
    .SearchBox .Button.Small:focus{
      background: #2687db;
    }

    /* - - フリーワード用 - - */
    .SearchBox.FreeWordSearchBox{

    }

    /* - - カテゴリ用 - - */
    .SearchBox.CategorySearchBox{
    
    }
    .SearchBox .CategoryList {
      list-style: none;
    }
        .SearchBox .CategoryList li{
          display: inline-block;
        }



/* 検索ボックス(GoogleSearchBox)
--------------------------------------------------- */
.GoogleSearchBox{
  font-size: 87.5%;
}
    .GoogleSearchBox .InputText{
      background: rgb(245,245,245) url("http://www.google.com/cse/static/images/1x/googlelogo_lightgrey_46x16dp.png") no-repeat  left center;
      text-indent: 48px;
    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Form Setting [Common]                          */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* FormTable
--------------------------------------------------- */
.FormTable{
  /* Tableの箇所で定義 */
}


/* FormItem
--------------------------------------------------- */
.FormItem{
  margin: 0.25em 0;
}
    /* placeholder  */
    .FormItem ::-webkit-input-placeholder,
    .FormItem ::-moz-placeholder,
    .FormItem :-ms-input-placeholder {
      color: #ccc;
      color: rgba(0,0,0,0.25);
      font-weight: normal!important;
      font-size: 75%;
    }
    .FormItem ::-moz-placeholder {
      opacity: .25;
    }


    /* ReadOnly */
    .FormItem .ReadOnly{
      font-weight: bold!important;
      background: rgba(0,50,255,0.05)!important;
      color: #000!important;
    }
    /* Whole form */
    .FormItem input,
    .FormItem select,
    .FormItem textarea{
      border: 1px solid #ccc;
      border-radius: 0.5em;
      font-size: 100%;
      padding: 0.5em 1em;
      vertical-align: middle;
    }
            /* focus時 */
            .FormItem input:focus,
            .FormItem select:focus,
            .FormItem textarea:focus{
              border: 1px solid #aaf!important;
              box-shadow: 0 0 1em #aaf!important;
            }
    .FormItem select{
      padding: 1em 2.5em;
      position: relative;
    }
    .FormItem select::after{
    }
    .FormItem textarea{
      width: 100%;
      height: 15em;
    }
    .FormItem .RadioButtonGroup label,
    .FormItem .CheckBoxGroup label{
      line-height: 1;
      cursor:pointer;
      margin-right: 1em;
      white-space: nowrap;
      vertical-align: middle;
      float: left;
    }
    .FormItem .RadioButton,
    .FormItem .CheckBox{
      border: none;
      margin-right: 4px;
    }

    /* Generic forms part */
    .FormItem .InputText{
      width: 100%;
      max-width: 20em;
    }
    .FormItem .InputName1,
    .FormItem .InputName2{
      width: 40%;
    }
    .FormItem .InputZip{
      width: 30%;
    }
    .FormItem .InputPhone{
      width: 50%;
    }
    .FormItem .InputAddress{
      width: 100%;
    }
    .FormItem .InputMail{
      width: 100%;
    }

    /* fieldset , label */
    fieldset{
      margin: 0;
      border: none;
    }
    
        /* jquery-ui buttonset()の装飾をoverride */
        .ui-buttonset .ui-button{
          margin: 0;
          font-size: 1em;
          font-family: inherit;
          font-weight: normal;
          color: inherit;
          display: block;
          margin: 0;
          border-radius: 0.5em;
          background: #fff;
          border-color: #fff;
          -webkit-transition: all .2s;
                  transition: all .2s;
        }
            .ui-buttonset .ui-button .Label{
              position: relative;
              padding-left: 1em;
            }
            .ui-buttonset .ui-button .Label::before{
              content: "";
              background-color: #2af;
              display: inline-block;
              width: 1em;
              position: absolute;
              top: 50%;
              left: -0.5em;
              margin-top: -1px;
              height: 2px;
              opacity: 0.25;
              border-radius: 0;
              -webkit-transition: all .2s;
                      transition: all .2s;
            }
             .ui-buttonset .ui-state-active .Label::before{
               opacity: 1;
               height: 1em;
               border-radius: 1em;
               margin-top: -0.5em;
             }
        .ui-buttonset .ui-state-default{
          opacity: 0.5;
        }
        .ui-buttonset .ui-state-hover,
        .ui-buttonset .ui-state-focus{
          opacity: 0.75;
        }
        .ui-buttonset .ui-state-active{
          color: #fff;
          background: #222;
          opacity: 1;
          border-color: #1e82c2;
        }


    /* 項目ごとのエラー文 */
    .FormTable .Caution{
      border-radius: 0.5em;
      font-size: 75%;
      color: #fff;
      background: #f00;
      padding: 0.5em;
      margin: 0.25em;

    }




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   GoPageTop                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* GoPageTop
--------------------------------------------------- */
.GoPageTop{
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
  margin-left: -3.5em;
}
.GoPageTop *{
  line-height: 1;
  vertical-align: bottom;
}
    .GoPageTop p{
      display: inline-block;
    }
    .GoPageTop p a{
      width:  7em;
      height: 7em;
      text-align: center;
      vertical-align: middle;
      display: block;
      position: relative;
      font-weight: normal;
      border-radius: 100%;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .GoPageTop p a{
      background: rgba(0,0,0,0.75);
      border: 2px solid rgba(255,255,255,0);
      background: none;
      border: 1px solid rgba(255,255,255,0.5);
      border: 1px solid  #bfbbb6;
    }
    .GoPageTop p a *{
      color: rgba(255,255,255,1);
      color: #bfbbb6;
    }
    .GoPageTop p a .Label{
      position: absolute;
      top: 60%;
      left: 0%;
      width: 100%;
      text-align: center;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .GoPageTop p a .Icon{
      width: 100%;
      display: block;
      text-align: center;
      position: absolute;
      bottom: 50%;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .GoPageTop p a .Icon::before{
      font-size: 300%;
      margin-bottom: -0.25em;
      -webkit-transition: margin .2s;
              transition: margin .2s;
    }


    /* hover */
    .GoPageTop p a:hover,
    .GoPageTop p a:focus{
      background: #634c3e;
      background: #223;
      border: 1px solid rgba(255,255,255,1);
    }
    .GoPageTop p a:hover *{
      color: #fff;
    }
    .GoPageTop p a:hover .Icon::before{
      margin-bottom: -0.125em;
    }

            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 */
                body.rsbp-over-bp2 .GoPageTop{
                  font-size: 65%;
                  position: fixed;
                  bottom: 20px;
                  right: 20px;
                  z-index: 100;
                }

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .GoPageTop{
                  font-size: 35%;
                  position: absolute;
                  bottom: 2rem;
                  right:  10px;
                  z-index: 100;
                }
                    body.rsbp-under-bp2 .GoPageTop p a .Label{
                      display: none;
                    }
                    body.rsbp-under-bp2 .GoPageTop p a .Icon::before{
                      margin-bottom: -0.5em;
                    }







/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Button 等                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ボタンのバリエーション（ベースはtemlpate）
--------------------------------------------------- */

    /* デフォルト */
    .SknTplTextButton .Button {
      color: inherit;
      background:   none;
      border-color:inherit;
    }
    .SknTplTextButton .Button:hover,
    .SknTplTextButton .Button:focus {
      color:        #fff;
      background:   #533726;
      border-color: #533726;
      background:   #333;
      border-color: #333;
    }



    /* 青 */
    .SknTplTextButton .Button.Blue {
      color:        #fff;
      background:   #0588e3;
      border: none;
    }
    .SknTplTextButton .Button.Blue:hover,
    .SknTplTextButton .Button.Blue:focus {
      color: #fff;
      background: rgb(50,140,255);
    }


    /* 赤 */
    .SknTplTextButton .Button.Red {
      color:        #fff;
      background:   rgb(255,0,0);
      border: none;
    }
    .SknTplTextButton .Button.Red:hover,
    .SknTplTextButton .Button.Red:focus {
      background:   rgb(255,50,50);
    }


    /* 白 */
    .SknTplTextButton .Button.White {
      color:        #262626;
      background:   rgba(255,255,255,0.75);
    }
    .SknTplTextButton .Button.White:hover,
    .SknTplTextButton .Button.White:focus {
      background:   rgba(245,245,245,1);
    }
    

    /* 黒 */
    .SknTplTextButton .Button.Black {
      color:        #fff;
      background:   #333;
      border: none;
    }
    .SknTplTextButton .Button.Black:hover,
    .SknTplTextButton .Button.Black:focus {
      background:   #556;
    }


    /* 無効 */
    .SknTplTextButton .Button.Invalid {
      color:        #aaa;
      background:   #555;
      cursor: default;
    }
    .SknTplTextButton .Button.Invalid:hover,
    .SknTplTextButton .Button.Invalid:focus {
      color:        #aaa;
      background:   #555;
    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   メニュー系 Setting                             */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */


/* TabMenu （共通）＜ 未使用 180530時点
--------------------------------------------------- */

    /* - - list - - */
    .TabMenu ul{
      list-style: none;
      margin: 0 auto;
      width: 75%;
    }
    .TabMenu ul > li{
      display: block;
      float: left;
      /* width: 20%;  幅はcolumnで指定 */
    }
    .TabMenu ul > li a{
      display: block;
      background: #fff;
      text-align: center;
      position: relative;
      margin: 0 5px;
    }
    .TabMenu ul > li .Label{
      padding: 0.75em 0;
    }
    .TabMenu ul > li .Label .Main{
      display: block;
      font-size: 100%;
      line-height: 1.5;
      letter-spacing: 0.05em;
      font-weight: 400;
    }
    .TabMenu ul > li .Label .Sub{
      display: block;
      font-size: 62.5%;
      line-height: 1.5;
      color: rgba(128,128,128,0.75);
      letter-spacing: 0.125em
    }
    /* hover */
    .TabMenu ul > li a::after{
      content: "";
      display: block;
      left:   0px;
      bottom: 0px;
      width: 100%;
      height: 1px;
      background: #1450b4;
      position: absolute;
          -webkit-transition: height .2s;
                  transition: height .2s;
    }
    .TabMenu ul > li:not(.Active) a:hover,
    .TabMenu ul > li:not(.Active) a:focus{
      cursor: pointer;
    }
    .TabMenu ul > li:not(.Active) a:hover::after{
      height: 6px;
    }


    /* Active */
    .TabMenu ul > li.Active{
    }
    .TabMenu ul > li.Active a{
      color: #fff;
      background: #1450b4;
    }

/* 特殊メニュー
--------------------------------------------------- */

    /* MenuList.ContactMenu */
    .MenuList.ContactMenu{
      list-style: none;
      text-align: center;
    }
    .MenuList.ContactMenu li{
      display: inline-block;
      margin: 0 1em;
    }
    .MenuList.ContactMenu .Icon{
    }
    .MenuList.ContactMenu .Icon::before{
      margin: 0;
      color: #444a59;
      background-color: #f0f0f0;
      width: 2em;
      text-align: center;
      line-height: 2;
      border-radius: 100%;
    }
    .MenuList.ContactMenu .Label{
    }
    .MenuList.ContactMenu .Label .Main{
      font-size: 137.5%;
      font-weight: 500;
    }
    .MenuList.ContactMenu .Label .Sub{
      margin-right: 0.5em;
      font-size: 100%;
    }
            /* hover */
            .MenuList.ContactMenu .DropDownParent:hover .Icon::before,
            .MenuList.ContactMenu               a:hover .Icon::before,
            .MenuList.ContactMenu .DropDownParent:focus .Icon::before,
            .MenuList.ContactMenu               a:focus .Icon::before{
              color: #fff;
              background: rgba(20,80,180,1);
            }



/* MenuList.LocalMenu （ページのローカルメニュー）
--------------------------------------------------- */

    .MenuList.LocalMenu{
      list-style: none;
      text-align: center;
      margin: 0 0 1.5em;
      font-size: 75%;
    }
        .MenuList.LocalMenu,
        .MenuList.LocalMenu *{
          vertical-align: middle;
        }

                        /* IEでの微妙な上下のズレを軽減 */
                        @media all and (-ms-high-contrast:none) {
                             /* IE10以降に適応されるCSS */
                            .MenuList.LocalMenu,
                            .MenuList.LocalMenu *{
                              vertical-align: text-bottom;
                            }
                        }

        .MenuList.LocalMenu li{
        }
        .MenuList.LocalMenu li .Icon{
          display: none;
        }
        .MenuList.LocalMenu li a{
          padding: 0.75em 1.5em;
          display: block;
          color: inherit;
          background: #eee;
          border-radius: 0;
          min-width: 8em;
          white-space: nowrap;
          -webkit-transition: all .2s;
                  transition: all .2s;
        }
        .MenuList.LocalMenu li a:hover,
        .MenuList.LocalMenu li a:focus{
          background: #ddd;
        }
        .MenuList.LocalMenu li.current a{
          color: #fff;
          background: #222!important;
        }
            /* hover */
            .MenuList.LocalMenu .DropDownParent:hover .Icon::before,
            .MenuList.LocalMenu               a:hover .Icon::before{
            }

            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 */
                body.rsbp-over-bp2 .PageFooter .MenuList.LocalMenu{
                  display: none;
                }
                body.rsbp-over-bp2 .MenuList.LocalMenu{
                  letter-spacing: -0.5em;
                }
                body.rsbp-over-bp2 .MenuList.LocalMenu li{
                  display: inline-block;
                  margin: 0 5px;
                  letter-spacing: normal;
                }


                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .PageHeader .MenuList.LocalMenu{
                /*  display: none;*/
                }
                body.rsbp-under-bp2 .MenuList.LocalMenu{
                  display: -webkit-flex;
                  display:     -ms-flex;
                  display:         flex;
                  -webkit-flex-wrap:   nowrap;
                        -ms-flex-wrap: nowrap;
                            flex-wrap: nowrap;
                  /*
                  -webkit-justify-content: center;
                      -ms-justify-content: center;
                          justify-content: center;
                  */
                }
                body.rsbp-under-bp2  .MenuList.LocalMenu li{
                  margin: 2px;
                }
                body.rsbp-under-bp2  .MenuList.LocalMenu li a{
                  font-size: 112.5%;
                  
                }


/* menu-trigger (開閉式メニュー)
--------------------------------------------------- */
.MenuTrigger{
}
.MenuTrigger *{
  line-height: 1!important;
  vertical-align: middle!important;
}
.MenuTrigger .Icon,
.MenuTrigger .Icon *{
  line-height: 1.5!important;
  font-size: 0.5rem;
}
.MenuTrigger .Label{
  line-height: 1.5 !important;
  display: inline-block;
  line-height: 1.5;
  font-size: 75%;
  color: #222;
  margin-left: 1em;
}

            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .MenuTrigger .Label{
                  text-align: center;
                  width: 150%;
                  font-size: 50%;
                  position: absolute;
                  top: 100%;
                  left: -25%;
                  margin: 0;
                }

    .menu-trigger,
    .menu-trigger p,
    .menu-trigger span {
      display: inline-block;
      transition: all .4s;
    }
    .menu-trigger {
      padding: 0.75em;
      position: relative;
      color: #eee;
      /* background-image: linear-gradient( to bottom, #333,  #333);*/
      background: #333;
      border-radius: 0.5em;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 */
                body.rsbp-over-bp2 .menu-trigger {
                  padding: 0.5em 0.75em;
                }
    .menu-trigger .Icon {
      position: relative;
      width:  3em;
      height: 3em;
    }
    .menu-trigger .Icon span.Shape {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #eee;
    }
    .menu-trigger .Icon span.Shape:nth-of-type(1) {
      top: 0.25em;
    }
    .menu-trigger .Icon span.Shape:nth-of-type(2) {
      top: 1.5em;
    }
    .menu-trigger .Icon span.Shape:nth-of-type(3) {
      top: 2.75em;
    }
    /* hover */
    .menu-trigger:hover,
    .menu-trigger:focus {
      background: #555;
    }
    .menu-trigger:hover span.Shape {
    }
    
    
    /* Active */
    .menu-trigger.Active{
      background: #eee;
    }
    .menu-trigger.Active .Label{
    /*  color: #ffffff;*/
    }
    .menu-trigger.Active .Icon span.Shape{
      background-color: #222;
    }
    .menu-trigger.Active .Icon span.Shape:nth-of-type(1) {
      -webkit-transform: translateY(1.25em) rotate(-315deg);
              transform: translateY(1.25em) rotate(-315deg);
    }
    .menu-trigger.Active .Icon span.Shape:nth-of-type(2) {
      opacity: 0;
    }
    .menu-trigger.Active .Icon span.Shape:nth-of-type(3) {
      -webkit-transform: translateY(-1.25em) rotate(315deg);
              transform: translateY(-1.25em) rotate(315deg);
    }









/* BreadCrumb（パンくず）
--------------------------------------------------- */
.BreadCrumb {
  position: absolute;
  top:  0em;
  left: 0em;
  margin: 0 auto;
  padding: 0;
  font-size: 75%;
  font-size: 0.75rem;
  z-index: 10;
  position: relative;
  opacity: 0.875;
}
    .BreadCrumb p{
      text-align: left;
    }
    .BreadCrumb p *{
    }
    .BreadCrumb p .Partition{
      padding: 0 0.125em;
      display: inline;
    }
    /* Unit */
    .BreadCrumb p .Unit{
      text-align: left;
    }
    .BreadCrumb p a{
      text-decoration: underline;
      color: inherit;
    }
    .BreadCrumb p a:hover,
    .BreadCrumb p a:focus{
      background: rgba(0,0,100,0.125);
    }
    .BreadCrumb p .Unit.Last{
      font-weight: bold;
    }

            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .BreadCrumb{
                  display: none;
                }




/* BannerList
--------------------------------------------------- */
.BannerList{
  list-style: none;
  text-align: center;
  margin: 0 0 1.5em;
  letter-spacing: -0.5em;
}
    .BannerList li{
      display: inline-block;
      margin: 0 15px;
      letter-spacing: 0;
    }
    .BannerList li,
    .BannerList li *{
      vertical-align: middle;
    }

            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2 .BannerList li{
                  display: block;
                  margin: 10px auto;
                }





/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    pagination                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* pagination
--------------------------------------------------- */
.pagination{
  text-align: center;
  padding: 0.5em 0;
  margin:  1em 0;
  font-size: 100%;
  letter-spacing: -0.5em;
}
    .pagination a{
      background-image: none;
      text-decoration: none!important;
    }
    .pagination .number a,
    .pagination .number a:hover,
    .pagination .prev   a,
    .pagination .prev   a:hover,
    .pagination .next   a,
    .pagination .next   a:hover,
    .pagination .start  a,
    .pagination .start  a:hover,
    .pagination .end    a,
    .pagination .end    a:hover,
    .pagination .disabled,
    .pagination .current{
      font-family: 'Arial';
      display: inline-block;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      line-height: 2.0em;
      width: 2.0em;
      padding: 0;
      background: #fff;
      color: #333;
      border: 2px solid #fff;
      margin: 3px;
      border-radius: 0.25em;
      letter-spacing: normal;
    }
    .pagination .number a,
    .pagination .start  a,
    .pagination .end    a,
    .pagination .current{
    }
    .pagination         a:before{
      line-height: inherit;
    }
    .pagination .number a:hover,
    .pagination .number a:focus{
      background-color: #fff;
      border-color: #333;
      text-decoration: none;
    }
    .pagination .current{
      color: #fff;
      background: #333;
      border: 2px solid #333;
    }
    .pagination .prev   a,
    .pagination .prev   a:hover,
    .pagination .next   a,
    .pagination .next   a:hover,
    .pagination .disabled{
      width: 4em;
    }
    .pagination .start  a:hover,
    .pagination .end    a:hover,
    .pagination .prev   a:hover,
    .pagination .next   a:hover,
    .pagination .start  a:focus,
    .pagination .end    a:focus,
    .pagination .prev   a:focus,
    .pagination .next   a:focus{
      background-color: #fff;
      border-color: #333;
    }
    .pagination .disabled{
      color: #aaa;
      background: #ccc;
      border-color: #ccc;
    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   effect                                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ブラー効果
--------------------------------------------------- */

    /* brightness */
    .Blur{
      -webkit-filter: blur(3px);
              filter: blur(3px);
    }

/* 背景効果
--------------------------------------------------- */

    /* 背景固定 */
    .fix-bg{
      background-attachment: fixed!important;
    }
    /* スクロールで視差効果 （jsと併用） */
    .parallax-bg{
      background-position: 50% -150px;
    }

/* 各種hover効果
--------------------------------------------------- */


    /* hoverエフェクトようにトランジションを定義 */
    .Button,
    .Icon,
    [class^="hvr-"],
    [class*=" hvr-"] {
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    
    /* default */
    .hvr-default{
    }
        .hvr-default:hover{
        }


    /* zoom */
    .hvr-zoom{
      z-index: 10;
      display: inline-block;
    }
        .hvr-zoom:hover,
        .hvr-zoom:focus{
          position: relative;
          z-index: 15;
          -webkit-transform: scale(1.25);
                  transform: scale(1.25);
        }


    
    /* 点滅 */
    .richblink{
      -webkit-animation-duration: 1s;
              animation-duration: 1s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-name: richblink;
              animation-name: richblink;
    }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   link                                           */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* anchor
--------------------------------------------------- */
a{
  text-decoration: none;
  color: inherit;
      -webkit-transition: all .2s;
              transition: all .2s;
}
a:link {

}
a:visited {
}
a:active{
}
a:hover {
}



/* リンク設置 画像
--------------------------------------------------- */
a img{
  -webkit-transition: all .1s;
          transition: all .1s;
}
a:hover img,
a:focus img{
  opacity: 0.75;
}



    /* - - 丸切り抜き + ボーダー装飾付き - - */
    a.Rounded{
      position: relative;
      display: block;
      padding: 0;
    }
        a.Rounded::before{
          content: "";
          display: block;
          border: 0.2em solid;
          position: absolute;
          left: -0.75em;
          top:  -0.75em;
          height: 100%;
          width: 100%;
          border-radius: 100%;
          -webkit-transition: all .1s;
                  transition: all .1s;
        }
        a.Rounded:hover::before{
          left: -0.2em;
          top:  -0.2em;
        }
        a.Rounded .Image{
          display:  block;
          overflow: hidden;
          border-radius: 100%;
        }



    /* 画像へのリンクなら「＋」を表示 */
    a.ImageLink{
      position: relative;
    }
        a.ImageLink::after{
          content: "＋";
          content: "拡大";
          font-size: 87.5%;
          font-size: 75%;
          line-height: 1.5em;
          width: 4em;
          background: #0e3382;
          color: #fff;
          position: absolute;
          text-align: center;
          vertical-align: middle;
          z-index: 10;
          display: inline-block;
          bottom: 5px;
          right:  -5px;
          opacity: 1;
              -webkit-transition: all .1s;
                      transition: all .1s;
        }
        a.ImageLink:hover::after,
        a.ImageLink:focus::after{
          opacity: 1;
          right:  5px;
          background: #328cff;
        }

            /* 外国語サイト用 - - - - */
            html[lang="en"] a.ImageLink::after,
            html[lang^="zh"] a.ImageLink::after{
              content: "＋";
            }



    /* - - 画像へのリンクに枠装飾 - - */
    a.ImageLink{
      position: relative;
      display: block;
      padding: 0;
    }
        a.ImageLink::before{
          content: "";
          display: block;
          border: 0.2em solid;
          position: absolute;
          left: -0.75em;
          top:  -0.75em;
          height: 100%;
          width: 100%;
          -webkit-transition: all .1s;
                  transition: all .1s;
         opacity: 0;
        }
        a.ImageLink:hover::before,
        a.ImageLink:focus::before{
          left: -0.2em;
          top:  -0.2em;
          opacity: 1;
        }
        a.ImageLink .Image{
          display:  block;
        }




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   アイコン 等                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* アイコンに下線が付くのを回避 */
.Icon,
.Icon::before{
  text-decoration: none!important;
}


/* icon position left  */
.icon-pos-left{
  position: absolute;
  left: 0.5em;
  right: auto;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
[class^="icon-"].icon-pos-left:before,
[class*=" icon-"].icon-pos-left:before {
  margin: 0;
}
/* icon position right  */
.icon-pos-right{
  position: absolute;
  left: auto;
  right: 0.5em;
  top: 50%;
  margin: 0;
  margin-top: -0.5em;
}
[class^="icon-"].icon-pos-right:before,
[class*=" icon-"].icon-pos-right:before {
  margin: 0;
}


/* icon position bottom */
.icon-pos-bottom{
  position: absolute;
  left:  50%;
  bottom: 0.25em;
  margin: 0;
  margin-left: -0.5em;
}
[class^="icon-"].icon-pos-bottom:before,
[class*=" icon-"].icon-pos-bottom:before {
}


/* icon position top */
.icon-pos-top{
  padding-top: 3em;
  display: block;
}
.icon-pos-top.FontSizeXLarge{
  font-size: 300%;
  padding-bottom: 0.125em;
  margin-bottom:  0.25em;
  border-bottom: 1px solid rgba(125,125,125,0.5);
}
[class^="icon-"].icon-pos-top:before,
[class*=" icon-"].icon-pos-top:before {
  display: block;
  text-align: center;
  margin: 0 auto 0.25em;
}

/* 特殊なアイコン用のスタイル */
.icon-file-pdf::before,
.icon-file-excel::before,
.icon-file-word::before,
.icon-file-image::before,
.icon-file-archive::before{
  width: 1em;
  line-height: 1em;
}

    .icon-file-pdf::before {
      color:      #bb0708!important;
    }
    .icon-file-excel::before {
      color:      #12824b!important;
    }
    .icon-file-word::before {
      color:      #3b67a7!important;
    }
    .icon-file-image::before {
      color:      #fff!important;
    }
    .icon-file-archive::before {
      color:      #30b4df!important;
    }

    /* アイコンの色調整 .TextList を上書き */
    .SknTplTextList ul.TextList > li .Icon.icon-file-pdf::before{
      color:      #ffffff!important;
      background: #ee0708!important;
    }
    .SknTplTextList ul.TextList > li .Icon.icon-file-excel::before{
      color:      #ffffff!important;
      background: #12824b!important;
    }
    .SknTplTextList ul.TextList > li .Icon.icon-file-word::before{
      color:      #ffffff!important;
      background: #3b67a7!important;
    }
    .SknTplTextList ul.TextList > li .Icon.icon-file-archive::before {
      color:      #ffffff!important;
      background: #30b4df!important;
    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Pagenation                                    */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Pagenation
--------------------------------------------------- */
.Pagenation {
  margin: 1em 0;
}
    .Pagenation ul{
      font-size: 87.5%;
      font-family: "Arial";
      font-weight: bold;
      line-height: 3;
      text-align: center;
    }
        .Pagenation ul li{
          display: inline-block;
          margin: 0 2px;
          text-align: center;
        }
            .Pagenation ul li a{
              display: block;
              border: none;
              float: none;
              margin:  0;
              padding: 0;
              width: 3em;
              color: #204c97;
              border: 1px solid;
              border-radius: 0.25em;
              overflow: hidden;
              position: relative;
              text-align: center;
              background: #fff;
            }
            .Pagenation ul li a{
              text-decoration: none;
              cursor: pointer;
            }
            .Pagenation ul li a:hover,
            .Pagenation ul li a:focus{
              background: rgba(20,120,255,0.125);
            }
            .Pagenation ul li.Active a,
            .Pagenation ul li.Active a:hover{
              color: #fff;
              background: #204c97;
              border-color: #204c97;
            }
            .Pagenation ul li.Invalid a,
            .Pagenation ul li.Invalid a:hover{
              color: #204c97;
              background: none;
              opacity: 0.25;
              
            }
            .Pagenation ul li.Invalid  .Icon::before,
            .Pagenation ul li.Invalid a{
              -webkit-animation-name: none!important;
                      animation-name: none!important;
              cursor: default;
            }
    /* adjust icon */
    .Pagenation li .Icon::before{
      display: inline;
      margin: 0;
    }
    .Pagenation li .Icon + .Label{
      display: none;
    }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Table Setting                                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* DefaultTable
--------------------------------------------------- */
.DefaultTable{
  margin: 1em auto;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  background: #fff;
}
    .DefaultTable caption{
      padding: .25em 0;
    }
    .DefaultTable th,
    .DefaultTable td{
      padding: 0.75em 15px;
      border: 1px solid #ddd;
      font-weight: normal;
      line-height: 1.5;
    }
    /* thead */
    .DefaultTable thead{
      font-size: smaller;
    }
    .DefaultTable thead th{
      text-align: center;
      font-weight: normal;
      background: #eef;
      border: 1px solid #ccc;
      padding: 0.5em 0;
    }
    /* tbody */
    .DefaultTable tbody{
    }
    .DefaultTable tbody th{
      color: #555;
      background: #f9f9f9;
      background: rgba(30,60,120,0.05);
      text-align: center;
      width: 25%;
    }
    .DefaultTable tbody td{
    
    }
    /* tfoot */
    .DefaultTable tfoot{
    }



/* スケジュールプラグインのカレンダー表示用テーブル 
--------------------------------------------------- */
table.scheduleCalendar{
  border-collapse: collapse;
  
}
        /* 共通 */

        /* 土曜、日曜、祝日のセル色 */
        table.scheduleCalendar th.sunday,
        table.scheduleCalendar td.sun span,
        table.scheduleCalendar td.Holiday span,
        table.holidayCalendar  td.sun,
        table.holidayCalendar  td.Holiday {
          color: #f00;
        }
        table.scheduleCalendar th.satday,
        table.scheduleCalendar td.sat span,
        table.holidayCalendar  td.sat {
            color: #00f;
        }
                /* today セル */
                table.scheduleCalendar td.today {
                  background: rgba(255,255,0,0.25);
                  opacity: 1;
                }

        /* 定休日カレンダーのみ */
        table.holidayCalendar{
          margin: 1em auto;
          width: 80%;
          min-width: 240px;
        }
        table.holidayCalendar thead th{
          font-size: 75%;
        }
        table.holidayCalendar th,
        table.holidayCalendar td{
          font-weight: 300;
          text-align: center;
          width: 14.285%;
          padding: 5px 5px;
          line-height: 1.25;
        }
        table.holidayCalendar td{
          font-size: 150%;
          font-size: 125%;
          font-family: "Open Sans", "Arial", "Century Gothic", sans-serif;
        }
        table.holidayCalendar td.closingday{
          position: relative;
          z-index: 1;
        }
        table.holidayCalendar td.closingday .Icon::before{
          position: absolute;
          top:  50%;
          left: 50%;
          margin-top:  -0.5em;
          margin-left: -0.5em;
          color: rgba(255,20,20,0.75);
          font-size: 175%;
        }
        table.holidayCalendar td.closingday .Label{
          display: none;
        }



        /* イベントカレンダーのみ */
        table.eventCalendar{
          border: none;
          width: 100%;
        }
        table.eventCalendar th,
        table.eventCalendar td{
          border-bottom: 1px solid rgba(83,55,38,0.125);
          width: 14.4%;
          text-align: center;
        }
        table.eventCalendar th{
          background-color: #eee;
        }
        table.eventCalendar td{
          font-size: 80%!important;
          letter-spacing: -0.5px;
        }
        table.eventCalendar thead{
          display: none;
        }
        table.eventCalendar td{
          display: block;
          width: 100%;
          max-width: 100%;
          text-align: left;
          padding: 0;
          position: relative;
          height: auto;
          min-height: 2.5em;
          padding: 7px 0!important;
        }
                /* 空白セル */
                table.eventCalendar td:empty{
                  display: none;
                }
                /* スケジュールが存在しないセル */
                table.eventCalendar td.scheduleEmpty{
                  /*opacity: 0.25;*/
                }
        table.eventCalendar td .DayGroup{
          font-size: 175%;
          padding-left: 5px;
          font-family: "Open Sans", "Arial", "Century Gothic", sans-serif;
          display: table-cell;
          white-space: nowrap;
          vertical-align: middle;
        }
        table.eventCalendar td .DayGroup span.Day{
          display: inline-block;
          text-align: right;
          min-width: 1em;
          letter-spacing: -1.5px;
        }
        table.eventCalendar td .DayGroup span.WeekDay:after{
          padding-left: 15px;
          font-weight: normal;
          font-size: 50%;
          letter-spacing: -0.5px;
          display: inline-block;
          width: 4em;
        }
        
        table.eventCalendar td.sun span.WeekDay:after{  content: "Sun";   }
        table.eventCalendar td.mon span.WeekDay:after{  content: "Mon";   }
        table.eventCalendar td.tue span.WeekDay:after{  content: "Tue";   }
        table.eventCalendar td.wed span.WeekDay:after{  content: "Wed";   }
        table.eventCalendar td.thu span.WeekDay:after{  content: "Thu";   }
        table.eventCalendar td.fri span.WeekDay:after{  content: "Fri";   }
        table.eventCalendar td.sat span.WeekDay:after{  content: "Sat";   }
        
        table.eventCalendar td div.scheduleLink {
          display: table-cell;
          vertical-align: middle;
        }
                /* 火曜日（定休）と年末年始（12/29-1/2）は隠す（暫定対応） */
                /*
                table.eventCalendar td.tue div.scheduleLink{
                  display: none;
                }
                .Month12 table.eventCalendar td.Day29 div.scheduleLink,
                .Month12 table.eventCalendar td.Day30 div.scheduleLink,
                .Month12 table.eventCalendar td.Day31 div.scheduleLink,
                .Month1  table.eventCalendar td.Day1  div.scheduleLink,
                .Month1  table.eventCalendar td.Day2  div.scheduleLink{
                  display: none;
                }
                */
        table.eventCalendar td div.scheduleLink a{
          display: inline-block;
          padding: 0.35em;
          padding-left: 2em;
          margin-right: 0.5em;
          /*white-space: nowrap;*/
          border-radius: 0.25em;
          background: rgba(0,0,0,0.0);
          line-height: 1.25;
          position: relative;
        }
        table.eventCalendar td div.scheduleLink a,
        table.eventCalendar td div.scheduleLink a *{
          color: #533726;
        }
        table.eventCalendar td div.scheduleLink a:hover,
        table.eventCalendar td div.scheduleLink a:focus{
          color: #fff;
          background: rgba(0,0,0,0.1);
        }
            /* アイコンを微調整 */
            table.eventCalendar td div.scheduleLink a .Icon{
              position: absolute;
              left: 0.5em;
              top:  50%;
              margin-top: -0.5em;
              display: inline-block;
            }
            table.eventCalendar td div.scheduleLink a .Icon::before{
              margin: 0;
              vertical-align: top;
            }





/* モデルコース用テーブル
--------------------------------------------------- */
table.ModelCourse{
  border-collapse: collapse;
  font-size: 87.5%;
  width: 100%;
}
    table.ModelCourse tr{
    }
    table.ModelCourse th,
    table.ModelCourse td {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 1em 10px;
      vertical-align: middle;
      background-image: linear-gradient( to bottom, rgba(50,40,40,0.125) 0em, rgba(50,40,40,0.05) 3em);
    }
    table.ModelCourse th{
      text-align: center;
      position: relative;
      white-space: nowrap;
    }
    table.ModelCourse .AttentionText{
      margin-top: 1em;
      font-size: 75%;
    }
        /* 所要時間（tr) */
        table.ModelCourse .RequiredTime,
        table.ModelCourse .RequiredTime td{
          padding-top:    0;
          padding-bottom: 0;
          vertical-align: middle;
          text-align: left;
        }
        table.ModelCourse .RequiredTime{
        }
        table.ModelCourse .RequiredTime td{
          color: #fff;
          background: #e80;
          font-size: 87.5%;
          line-height: 2;
        }

        /* コース紹介 */
        table.ModelCourse td .CourseText{
          display: table-row;
        }
            table.ModelCourse td .CourseText .Or,
            table.ModelCourse td .CourseText .Unit{
              display: table-cell;
              vertical-align: middle;
            }
            table.ModelCourse td .CourseText .Or{
              display: inline-block;
              font-size: 75%;
            }
            table.ModelCourse td .CourseText .Unit{
              display: inline-block;
              min-width: 10em;
              text-align: center;
              padding: 0.5em 1.125em;
              margin: 0.25em 0.125em;
              line-height: 1.5;
              border: 2px solid #ddf;
              background: #fff;
              border-radius: 0.5em;
            }
            table.ModelCourse td .CourseText .Unit.Large{
              min-width: 20em;
            }
            table.ModelCourse td .CourseText .Unit .Main,
            table.ModelCourse td .CourseText .Unit .Sub{
              display: block;
            }
            table.ModelCourse td .CourseText .Unit .Main{
              font-weight: 600;
            }
            table.ModelCourse td .CourseText .Unit .Sub{
              font-size: 75%;
              margin-top: 0.25em;
            }

                /* + + + + + レスポンシブ + + + + +  */

                    /* bp2より広いディスプレイ用 */
                    body.rsbp-over-bp2 table.ModelCourse{
                    }
                    /* bp2より狭いディスプレイ用 */
                    body.rsbp-under-bp2 table.ModelCourse tr{
                      border: 1px solid #ccc;
                      background-image: linear-gradient( to bottom, rgba(50,40,40,0.125) 0em, rgba(50,40,40,0.05) 3em);
                    }
                    body.rsbp-under-bp2 table.ModelCourse th,
                    body.rsbp-under-bp2 table.ModelCourse td{
                      display: block;
                      width: auto;
                      text-align: center;
                      border: none;
                      background: none;
                    }
                    body.rsbp-under-bp2 table.ModelCourse th{
                      padding-bottom: 0;
                    }
                    body.rsbp-under-bp2 table.ModelCourse .RequiredTime td{
                      background: #e80;
                      padding: 1em 0;
                    }
                    body.rsbp-under-bp2 table.ModelCourse td .CourseText,
                    body.rsbp-under-bp2 table.ModelCourse td .CourseText .Or,
                    body.rsbp-under-bp2 table.ModelCourse td .CourseText .Unit{
                      display: block;
                      width: auto;
                      text-align: center;
                    }



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Column Setting                                 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ColumnGroup
--------------------------------------------------- */
.ColumnGroup{
  text-align: center;
  letter-spacing: -0.5em; /* 余白を除去するためletter-spacing */
}
    /* - - column common - -  */
    .ColumnGroup > .Column{
      width: 100%;
      margin: 0 auto 2em;
      margin: 0 auto;
      /*max-width: 380px;*/
      display: inline-block;
      vertical-align: top;
    }
    .ColumnGroup > *{
      letter-spacing: 0; /* letter-spacing をデフォルトに戻す */
    }
    .ColumnGroup > * > .inner{
      padding: 10px;
    }
    .ColumnGroup.FixedNumber {
      white-space: nowrap;
    }
    .ColumnGroup.FixedNumber  > * > .inner{
      white-space: normal;
    }
    
    /* 要素数をクラス名に持たせて自動配置 ※ulにクラス名をつけて使用  */
    /* ColumnGroup（数字）elements が横並び数                         */
    /* FixedNumber をつけた場合は数を固定。それ以外は幅に応じて変化   */
    
    /* - - two columns - - */
    body                             .ColumnGroup4elements >             .Column:nth-child(1n),
    body                             .ColumnGroup3elements >             .Column:nth-child(1n),
    body.rsbp-over-bp3               .ColumnGroup2elements >             .Column:nth-child(1n),
    body:not([class*="rsbp"])        .ColumnGroup2elements >             .Column:nth-child(1n),
    body[class*="rsbp"]              .ColumnGroup2elements.FixedNumber > .Column:nth-child(1n) {
      width: 50%;
      margin-bottom: 0;
    }
    
    
    /* - - three columns - - */
    body                             .ColumnGroup6elements >             .Column:nth-child(1n),
    body                             .ColumnGroup5elements >             .Column:nth-child(1n),
    body.rsbp-over-bp3               .ColumnGroup4elements >             .Column:nth-child(1n),
    body.rsbp-over-bp2               .ColumnGroup3elements >             .Column:nth-child(1n),
    body:not([class*="rsbp"])        .ColumnGroup3elements >             .Column:nth-child(1n),
    body[class*="rsbp"]              .ColumnGroup3elements.FixedNumber > .Column:nth-child(1n) {
      width: 33.3%;
      margin-bottom: 0;
    }

    /* - - four columns - - */
    body.rsbp-over-bp3               .ColumnGroup6elements >             .Column:nth-child(1n),
    body.rsbp-over-bp3               .ColumnGroup5elements >             .Column:nth-child(1n),
    body.rsbp-over-bp2               .ColumnGroup4elements >             .Column:nth-child(1n),
    body:not([class*="rsbp"])        .ColumnGroup4elements >             .Column:nth-child(1n),
    body[class*="rsbp"]              .ColumnGroup4elements.FixedNumber > .Column:nth-child(1n) {
      width: 25%;
      margin-bottom: 0;
    }
    
    /* - - five columns - - */
    body.rsbp-over-bp2               .ColumnGroup6elements >             .Column:nth-child(1n),
    body.rsbp-over-bp2               .ColumnGroup5elements >             .Column:nth-child(1n),
    body:not([class*="rsbp"])        .ColumnGroup5elements >             .Column:nth-child(1n),
    body[class*="rsbp"]              .ColumnGroup5elements.FixedNumber > .Column:nth-child(1n) {
      width: 20%;
      margin-bottom: 0;
    }
    
    /* - - six columns - - */
    body.rsbp-over-bp1               .ColumnGroup6elements >             .Column:nth-child(1n),
    body:not([class*="rsbp"])        .ColumnGroup6elements >             .Column:nth-child(1n),
    body[class*="rsbp"]              .ColumnGroup6elements.FixedNumber > .Column:nth-child(1n) {
      width: 16.6%;
      margin-bottom: 0;
    }





/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   FlexParent (flex段組み)                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.FlexParent{
  display: -webkit-flex;
  display:     -ms-flex;
  display:         flex;
 -webkit-flex-wrap: nowrap;
     -ms-flex-wrap: nowrap;
         flex-wrap: nowrap;
 -webkit-justify-content: center;
     -ms-justify-content: center;
         justify-content: center;
}
.FlexParent.allowWrap{
 -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
}



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Other Setting                                  */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* GoogleMap
--------------------------------------------------- */
.GoogleMap{
  outline: 5px solid #fff;
}

/* Scrollable 横スクロール (bp2より狭いディスプレイ用)
--------------------------------------------------- */
body .Scrollable {
  overflow: auto;
  position: relative;
}
    /* Table用の特殊処理 */
    body.rsbp-under-bp2 .Scrollable > table {
      width: 660px; /* ここはスクロール対象の最大幅を入れる */
      margin-bottom: 0!important;
    }
    body.rsbp-under-bp2 .Scrollable th{
      white-space: nowrap;
    }
    /* スクロールバー装飾 */
    body.rsbp-under-bp2 .Scrollable::-webkit-scrollbar{
      height: 2px;
      margin-top: 5px;
    }
    body.rsbp-under-bp2 .Scrollable::-webkit-scrollbar-track{
      background: rgba(0,0,0,0.25);
    }
    body.rsbp-under-bp2 .Scrollable::-webkit-scrollbar-thumb {
      background: #03c;
    }




/* ウィンドウ幅で表示／非表示切替
--------------------------------------------------- */


            /* + + + + + レスポンシブ + + + + +  */
            
                /* bp2より広いディスプレイ用 */
                body.rsbp-over-bp2   .DisplayOnNarrowScreen{
                  display: none!important;
                }
                /* bp2より狭いディスプレイ用 */
                body.rsbp-under-bp2  .DisplayOnWideScreen{
                  display: none!important;
                }