@charset "utf-8";


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   code                                           */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
code{
  display: block;
  padding: 50px;
  margin: 50px auto;
  width: 75%;
  background: #fff;
  font-size: 0.875rem!important;
}

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

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


/* Heading common
--------------------------------------------------- */
.Heading{
  line-height: 1.75;
}

.PdfLink {
  text-decoration: underline;
  color: blue;
}
.PdfLink:visited {
  text-decoration: underline;
  color: blueviolet;
}

/* PageTitle
--------------------------------------------------- */

/* for PcView */
body.PcView .PageTitle{
  /* margin: 0 0 30px; */
  /* ページタイトルの下部余白が大きい為、30px->15pxに変更 */
  margin: 0 0 15px;
  position: relative;
}
    body.PcView .PageTitle .Heading{
      border: none!important;
      margin: 0 0 0em!important;
      line-height: 1.5;
      font-weight: normal;
      border-bottom: 2px solid;
      padding-bottom: 0.75em;
      margin: 2em 0;
      text-align: center;
    }
    
    body.PcView .PageTitle .Heading .Sub::before{
      content: "/";
      margin-right: 0.5em;
    }
    body.PcView .PageTitle .Heading .Main{
      font-size: 250%;
      font-weight: bold;
      color: #444;
    }
    body.PcView .PageTitle .Heading .Sub{
      font-size: 100%;
      margin-left: 0.5em;
      color: #444;
    }

    body.PcView .PageTitle .Heading .Comment{
      font-size: 140%;
      margin-left: 0.5em;
      color: #444;
    }

    /* ProductGenreList */
    body.PcView .PageTitle .ProductGenreList.Small {
      text-align: center;
      position: absolute;
      right: 30px;
      top:   -15px;
    }

/* for SpView */
body.SpView .PageTitle{
}
    body.SpView .PageTitle .Heading{
      color: #fff;
      background: #15438d;
      height: 4rem;
      line-height: 4rem;
      overflow: hidden;
    }
    body.SpView .PageTitle .Heading *{
      vertical-align: bottom;
    }
    body.SpView .PageTitle .Heading .Main{
    background: #000;
      font-size: 125%;
      letter-spacing: 0.05em;
      padding: 0 1.25em;
      font-weight: bold;
      display: inline-block;
    }
    body.SpView .PageTitle .Heading .Sub{
      font-size: 75%;
      padding: 0 1.25em;
      letter-spacing: 0.25em;
      display: inline-block;
    }


/* バリエーション
--------------------------------------------------- */

.BlockHeader > .Heading[class*="Type"]{
  margin-top: 0;
  margin-bottom: 0;
}
body.SpView .BlockHeader > .Heading,
body.SpView .TabHeader > .Heading{
  font-size: 75%;
}

/* Type1 */
.Heading.Type1{
  font-weight: normal;
  border-bottom: 2px solid;
  padding-bottom: 0.75em;
  margin: 2em 0;
}
    .Heading.Type1 .Main{
      font-size: 300%;
      letter-spacing: 0.025em;
    }
    .Heading.Type1 .Sub{
      font-size: 100%;
      letter-spacing: 0.1em;
      margin-left: 0.5em;
    }
    /* for SpView */
    body.SpView .Heading.Type1{
    }
    
/* Type2 */
.Heading.Type2{
  font-weight: normal;
  background: rgba(50,50,50,0.1);
  padding: 0.75em 25px;
  margin: 2em 0;
  
  background: rgba(50,60,100,0.1);
  outline: 0.5em solid rgba(40,50,90,0.05);
}
    .Heading.Type2 .Main{
      font-size: 135%;
      letter-spacing: 0.125em;
    }
    /* for SpView */
    body.SpView .Heading.Type2{
    }
    
/* Type3 */
.Heading.Type3 {
/*
  transform: rotate(-1deg);
*/
  display: inline-block;
  font-weight: normal;
  border-left: 10px solid #204c97;
  border-bottom: 1px solid #ccc;
  position: relative;
  height: 5em;
  line-height: 5em;
  letter-spacing: 0.0625em;
  padding: 0 50px;
  background-color: #f0f0f0;
  background-image: -webkit-linear-gradient(135deg, color-stop(rgba(255,255,255,1)), to(rgba(255,255,255,0)) );
  background-image:         linear-gradient(135deg,            rgba(255,255,255,1),     rgba(255,255,255,0) 100%);
  left: -25px;
  top: 30px;
}
.Heading.Type3::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 100%;
  left: -9px;
  border-width: 0 24px 15px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: #ccc;
}
    .Heading.Type3 *{
      white-space: nowrap;
    }

    .Heading.Type3 .Main{
      font-size: 150%;
      margin-right: 0.5em;
    }
    /* for SpView */
    body.SpView .Heading.Type3{
      padding: 0 25px;
    }
    
    
/* Type4 */
.Heading.Type4{
  position: relative;
  border-bottom: 4px solid rgba(128,128,128,0.25);
  margin: 2em 0;
}
.Heading.Type4::after{

}
    .Heading.Type4 .Main{
      font-weight: normal;
      font-size: 150%;
      letter-spacing: 0.125em;
      position: relative;
      display: inline-block;
      padding-bottom: .75em;
    }
    .Heading.Type4 .Main::after{
      position: absolute;
      bottom: -4px;
      left: 0;
      z-index: 2;
      content: '';
      width: 100%;
      height: 4px;
      background-color: #204c97;
    
    }
    .Heading.Type4 .Sub{
      font-weight: normal;
      font-size: 125%;
      letter-spacing: 0.125em;
      margin-left: 0.5em;
    }
    /* for SpView */
    body.SpView .Heading.Type4{
    }
    
    
/* Type5 */
.Heading.Type5{
  padding: 1.25em 50px;
  background: -webkit-repeating-linear-gradient(-45deg, #204c97, #204c97 5px, #2554a5 5px, #2554a5 10px);
  background:         repeating-linear-gradient(-45deg, #204c97, #204c97 5px, #2554a5 5px, #2554a5 10px);
  background-size: 100px 100px;
  color: #fff;
  margin: 2em 0;
}
.Heading.Type5::after{

}
    .Heading.Type5 .Main{
      font-size: 150%;
      letter-spacing: 0.25em;
      position: relative;
      display: block;
    }
    .Heading.Type5 .Sub{
      font-size: 75%;
      letter-spacing: 0.25em;
      position: relative;
      font-weight: normal;
      padding-top: 0.5em;
      color: rgba(255,255,255,0.75);
      border-top: 1px solid rgba(255,255,255,0.25);
      display: block;
    }
    /* for SpView */
    body.SpView .Heading.Type5{
      padding: 1.25em 25px;
    }






.Heading:first-child{
  margin-top: 0;
}

/* ProductTitle
--------------------------------------------------- */
.ProductTitle{
  font-size: 125%;
  vertical-align:  bottom;
  margin: 0;
      background: #555;
}
    .ProductTitle > *{
      display: inline-block;
      vertical-align:  bottom;
      line-height: 1.5rem;
      vertical-align: middle;
    }
    .ProductTitle .ImageItem{
      margin: 0em 0;
    }
    .ProductTitle .ImageItem svg{
      width: 3em;
      height: 3em;
      margin-left: 0.5em;
    }
    .ProductTitle .TextItem{
      padding: 1.0em 0;
    }
    .ProductTitle .TextItem .Main,
    .ProductTitle .TextItem .Sub{
    }
    .ProductTitle .TextItem .Main{
      font-weight: bold;
    }
    .ProductTitle .TextItem .Sub{
      letter-spacing: 0.125em;
      margin-left: 0.5em;
      font-size: 75%;
    }

/* DefaultText
--------------------------------------------------- */
.DefaultText{
  text-align: left;
}
.Container .DefaultText{
  /*font-size: 112.5%;*/
  /*font-size: 100%;*/
  font-size: 87.5%;
  line-height: 2.25;
}
.DefaultText em{
  color: #ff1f25;
}
p.DefaultText{
  margin: 0 0 1em;
}
p.DefaultText:last-child{
  /*margin-bottom: 0;*/
}
ul.DefaultText,
ol.DefaultText,
dl.DefaultText{
  line-height: 1.5;
}
ul:not([class]),
ol:not([class]),
dl:not([class]){
  margin-left: 1.5em;
}
    /* for SpView */
    body.SpView .Container .DefaultText{
      font-size: 100%;
      line-height: 2;
    }


/* tooltip
--------------------------------------------------- */
.Tooltip {
  border-bottom: 1px dashed;
  cursor: pointer;
  margin: 0 0.25em;
}
.Tooltip::before{
  margin-right: 0.25em;
  color: #2098d1;
}
.Tooltip:hover {
  border-bottom: none;
}
    .ui-tooltip {
      box-shadow: none;
      border: 2px solid #2098d1;
      background: white;
      width: 40em;
      max-width: 50%;
      padding: 25px;
      z-index: 100;
    }
    .ui-tooltip * {
      line-height: 2!important;
      font-size: 100%;
    }


/* PhoneNumberText
--------------------------------------------------- */
.PhoneNumberText{
  color: inherit;
  font-size: 175%;
  /*font-weight: bold;*/
  font-family: "Arial";
  vertical-align: baseline;
  white-space: nowrap;
}
/*
.PhoneNumberText.FreeDial:before{
  content: "";
  display: inline-block;
  width: 40px;
  height: 20px;
  background: url(../img/common/icon/freedial_l.png) no-repeat 0% 0%;
  background-size: contain;
  vertical-align: baseline;
}
*/

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


/* FontSize
--------------------------------------------------- */
.FontSizeXLarge,
.DefaultText.FontSizeXLarge{
  font-size: 200%;
}
.FontSizeLarge,
.DefaultText.FontSizeLarge{
  font-size: 150%;
}
.FontSizeLarger,
.DefaultText.FontSizeLarger{
  font-size: 125%;
}
.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
--------------------------------------------------- */
.FontWeightNormal{
  font-weight: normal;
}
.FontWeightBold{
  font-weight: bold;
}
/* FontColor
--------------------------------------------------- */
.FontColorGrey{
  color: #888888;
}

/* TextAlign
--------------------------------------------------- */
.TextAlignCenter{
  text-align: center;
}
.TextAlignLeft{
  text-align: left;
}
.TextAlignRight{
  text-align: right;
}
.TextAlignJustify{
  text-align: justify;
}
/* TextOverFlowNone
--------------------------------------------------- */
.TextOverFlowNone{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MessageBox
--------------------------------------------------- */
.MessageBox{
  padding: 50px 0;
  margin: 1em auto;
  width: 75%;
  text-align: center;
  background: rgba(255,255,255,0.5);
  border: 4px solid #ddd;
  border-radius: 10px;
  position: relative;
}
    .MessageBox .Heading{
      font-size: 125%;
      margin: 0 0 1em;
    }
    .MessageBox .Heading:before{
      font-size: 400%;
      position: absolute;
      top: calc(50% - 0.25em);
      left: 0.5em;
    }
    .MessageBox .DefaultText{
      text-align: center;
      line-height: 1.3;
      margin: 0;
    }
    /* options */
    .MessageBox.Caution{
      color: #222;
      color: inherit;
      background: #f5f47a;
    }
    .MessageBox.Clear .Heading{
      color: #4584ed;
    }
    .MessageBox.Error .Heading{
      color: #dc4e1f;
    }


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

/* FormTable  
padding: 70px; → padding: 0px; // 20190326 変更
--------------------------------------------------- */
form{
  background: rgba(50,50,50,0.05);
  padding: 0px;
}
.FormTable{
  /* Tableの箇所で定義 */
}


/* FormItem
--------------------------------------------------- */
.FormItem{
  margin: 0.25em 0;
}
    /* placeholder  */
    .FormItem ::-webkit-input-placeholder {
      color: #ccc;
      color: rgba(0,0,0,0.25);
      font-weight: normal!important;
    }
    .FormItem ::-moz-placeholder {
      color: #ccc; opacity: 1;
      color: rgba(0,0,0,0.25);
      font-weight: normal!important;
    }
    .FormItem :-ms-input-placeholder {
      color: #ccc;
      color: rgba(0,0,0,0.25);
      font-weight: normal!important;
    }
    
    
    /* 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,
    .FormItem date{
      border: 1px solid #ccc;
      border-radius: 0.5em;
      font-size: 100%;
      padding: 1em 1.5em;
      vertical-align: middle;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .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%;
    }
    .FormItem .InputName1,
    .FormItem .InputName2{
      width: 40%;
    }
    .FormItem .InputZip{
      width: 30%;
    }
    .FormItem .InputPhone{
      width: 50%;
    }
    .FormItem .InputAddress{
      width: 100%;
    }
    .FormItem .InputMail{
      width: 100%;
    }

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




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   List Setting                                   */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* LinkList
--------------------------------------------------- */
.LinkList{
  margin: 0 0 4em;
  list-style: none;
}
    .LinkList li{
      
    }
    .LinkList li:first-child a{
      border-top: 1px dashed #ccc;
    }
    .LinkList li a{
      display: block;
      padding: 1em 0 1em 2.5em;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }
    .LinkList li a:before{
      position: absolute;
      top:   50%;
      top: calc(50% - 0.5em);
      left: 0em;
    }

/* PageList
--------------------------------------------------- */
.PageList{
  list-style: none;
}
    .PageList li.li-level-1{
    }
    .PageList.ul-level-2{
      margin-top: 1.5em;
      margin-left: -0.5em;
    }
    .PageList li.li-level-2{
      font-size: 87.5%;
    }
    .PageList li.li-level-2 > a,
    .PageList li.li-level-2 > .NoLink{
      padding: 0.5em 0.25em;
      margin-right: 10px;
      display: block;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .PageList li.li-level-2 > a:hover{
      background: rgba(32,152,209,0.25);
    }
    .PageList li.li-level-2 > a:hover::before{
      color: #fff;
      background: #2098d1;
      border-radius: 1em;
      
    }
/* BannerList (Type1:縦並び、 Type2:横並び)
--------------------------------------------------- */
.BannerList{
  list-style: none;
  margin: 0;
}
    .BannerList.Type1 > li{
      margin: 0 0 10px;
    }
    .BannerList.Type2{
      text-align: center;
    }
    .BannerList.Type2 > li{
      display: inline-block;
    }
    .BannerList > li a:before{
      content: "";
      display: none;
    }
    .BannerList > li a{
      display: block;
      background: #fff;
      border: 1px solid #ccc;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .BannerList > li a:hover{
      background: #ace2ff;
      border-color: #395daa;
    }
    .BannerList > li > span.NoLink{
      display: inline-block;
      border: 1px dashed #ccc;
    }
    .BannerList > li img{
      width: 100%;
    }
    
    
/* TextList
--------------------------------------------------- */
.TextList{
  margin: 1em 0;
  margin-left: 2em;
}
.TextList > li{
  padding: 0.5em 0;
  line-height: 1.5;
}
/* nest list */
.TextList .TextList{
  font-size: 90%;
}


/* IllustButtonList
--------------------------------------------------- */
.IllustButtonList{
  list-style: none;
  padding: 25px 50px;
}
    .IllustButtonList li{
      font-size: 87.5%;
      
    }
    .IllustButtonList li a{
      background: #fff;
      text-align: center;
      display: block;
      padding: 7em 0 3em;
      border: 3px solid;
      margin: 10px;
      color: #204c97;
      border-radius: 0.5em;
    }
    .IllustButtonList li a .Label::before{
      color: inherit;
    }
    .IllustButtonList li a:hover{
      color: #fff;
      background: #204c97;
      border-color: #204c97;
    }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   TabMenu Setting                                */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* TabMenu （Type1:装飾付き）
--------------------------------------------------- */
.TabMenu{
  padding: 30px;
  background: rgba(90,85,85,0.75);
  background-image: -webkit-repeating-linear-gradient( 45deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 2px, rgba(50,100,180,0) 2px, rgba(50,100,180,0) 6px),
                    -webkit-repeating-linear-gradient(-45deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 2px, rgba(50,100,180,0) 2px, rgba(50,100,180,0) 6px);
  background-image:         repeating-linear-gradient( 45deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 2px, rgba(50,100,180,0) 2px, rgba(50,100,180,0) 6px),
                            repeating-linear-gradient(-45deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 2px, rgba(50,100,180,0) 2px, rgba(50,100,180,0) 6px);
}

        /* for SpView */
        body.SpView .TabMenu{
          padding: 10px;
        }
        
    /* - - list - - */
    .TabMenu ul{
      list-style: none;
    }
    .TabMenu ul > li{
      display: block;
      float: left;
      /* width: 20%;  幅はcolumnで指定 */
    }
    .TabMenu ul > li a{
      display: block;
      padding: 1.25em 0 1em;
      background: #fff;
      text-align: center;
      border: 1px solid #e0e0e0;
    }
    .TabMenu ul > li .Label{
    }
    .TabMenu ul > li .Label .Main{
      display: block;
      font-size: 100%;
      line-height: 2;
      letter-spacing: 0.125em;
      font-weight: bold;
    }
    .TabMenu ul > li .Label .Sub{
      display: block;
      font-size: 62.5%;
      line-height: 1.5;
      color: #aaa;
      letter-spacing: 0.125em
    }
    /* hover */
    .TabMenu ul > li:not(.Active) a:hover{
      cursor: pointer;
      background: #eee;
    }
    .TabMenu ul > li:not(.Active) a:hover .Sub{
      color: #204c97;
    }
    /* Invalid */
    .TabMenu ul > li.Invalid{
      display: none!important;
    }
    .TabMenu ul > li a.Invalid{
      /*opacity: 0.1!important;*/
      /*cursor: default!important;*/
    }
    .TabMenu ul > li a.Invalid:hover{
      cursor: default!important;
      background: #fff!important;
    }
    .TabMenu ul > li a.Invalid:hover .Sub{
      color: #aaa;
    }
        /* for SpView */
        body.SpView .TabMenu {
          font-size: 87.5%;
        }
        body.SpView .TabMenu ul > li a{
          padding: 1em 0;
        }
        body.SpView .TabMenu ul > li .Label .Main{
          line-height: 1.5;
        }
        body.SpView .TabMenu ul > li .Label .Sub{
          line-height: 1.25;
        }
    
    
    /* Active */
    .TabMenu ul > li.Active{
    }
    .TabMenu ul > li.Active a{
      color: #fff;
      background: #222;
      border-color: #f90;
    }
    .TabMenu ul > li.Active .Sub{
      color: #f90;
    }
/* TabMenu（Type2:装飾付きシンプル）
--------------------------------------------------- */
.TabMenu.Type2{
  padding: 0px;
  background: none
}
    .TabMenu.Type2 ul{
      list-style: none;
    }
    .TabMenu.Type2 ul > li{
    }
    .TabMenu.Type2 ul > li a{
      padding: 1em 0;
      margin: 0 5px;
      border-radius: 0.5em;
    }
    .TabMenu.Type2 ul > li .Label{
    }
    .TabMenu.Type2 ul > li .Label .Main{
      font-size: 100%;
    }
    .TabMenu.Type2 ul > li .Label .Sub{
      font-size: 75%;
    }
    /* hover */
    .TabMenu.Type2 ul > li:not(.Active) a:hover{
      cursor: pointer;
      background: #eee;
    }
    .TabMenu.Type2 ul > li:not(.Active) a:hover .Sub{
      color: #204c97;
    }
    
    
    /* Active */
    .TabMenu.Type2 ul > li.Active{
    }
    .TabMenu.Type2 ul > li.Active a{
      color: #fff;
      background: #204c97;
      border-color: #204c97;
    }
    .TabMenu.Type2 ul > li.Active .Sub{
      color: #fff;
    }
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Pagenation, BreadCrumb Setting                 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Pagenation
--------------------------------------------------- */
.Pagenation {
  margin: 2em 0;
}
    .Pagenation ul{
      font-size: 100%;
      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.5em;
              overflow: hidden;
              position: relative;
            }
            .Pagenation ul li a{
              text-decoration: none;
              cursor: pointer;
            }
            .Pagenation ul li a:hover{
              background: #fff;
            }
            .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 [class^="icon-"]:before,
            .Pagenation ul li.Invalid [class*=" icon-"]:before,
            .Pagenation ul li.Invalid a{
              -webkit-animation-name: none!important;
                      animation-name: none!important;
              cursor: default;
            }
    /* adjust icon */
    .Pagenation li [class^="icon-"]::before,
    .Pagenation li [class*=" icon-"]::before{
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -0.5em 0 0 -0.5em;
      visibility:  visible;
    }
    .Pagenation li [class^="icon-"],
    .Pagenation li [class*=" icon-"]{
      visibility: hidden;
    }

/* BreadCrumb
--------------------------------------------------- */
.BreadCrumb {
  margin: 0 auto;
  padding: 1em 0;
  font-size: 81.25%;
}
    .BreadCrumb p{
      display: block;
      vertical-align: baseline;
    }
    .BreadCrumb p .Partition{
      vertical-align: baseline;
      display: inline-block;
      float: left;
      padding: 0 0.5em;
      color: #fff;
    }
    /* Unit */
    .BreadCrumb p .Unit{
      display: inline-block;
      float: left;
      margin: 0;
      color: #fff;
      text-align: left;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .BreadCrumb p a:hover{
      text-decoration: underline;
    }
    .BreadCrumb p .Unit:last-child{
      font-weight: bold;
      color: #fff;
    }



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

/* ColumnGroup
--------------------------------------------------- */
.ColumnGroup{

}
    /* - - column common - -  */
    .ColumnGroup > .Column{
      float: left;
    }
    
    /* 要素数をクラス名に持たせて自動配置 ※スマホは横並び２つまで */
    
    /* - - one columns - - */
    .ColumnGroup1elements > .Column {
      width: 100%;
    }
    /* - - two columns - - */
    .ColumnGroup2elements > .Column {
      width: 50%;
    }
    .ColumnGroup2elements > .Column.No2 {
    }
    
        /* for SpView */
        body.SpView .ColumnGroup2elements > .Column {
        }
    
    /* - - three columns - - */
    .ColumnGroup3elements > .Column {
      width: 33.3%;
    }
    .ColumnGroup3elements > .Column.No3{
    }
        /* for SpView */
        body.SpView .ColumnGroup3elements > .Column {
          width: 50%;
        }

    /* - - four columns - - */
    .ColumnGroup4elements > .Column {
      width: 25%;
    }
    .ColumnGroup4elements > .Column.No4{
    }
        /* for SpView */
        body.SpView .ColumnGroup4elements > .Column {
          width: 50%;
        }
    
    /* - - four columns - - */
    .ColumnGroup5elements > .Column {
      width: 20%;
    }
    .ColumnGroup5elements > .Column.No5{
    }
        /* for SpView */
        body.SpView .ColumnGroup5elements > .Column {
          width: 50%;
        }

    /* - - four columns - - */
    .ColumnGroup6elements > .Column {
      width: 16.6%;
    }
    .ColumnGroup6elements > .Column.No6{
    }
        /* for SpView */
        body.SpView .ColumnGroup6elements > .Column {
          width: 50%;
        }

    /* - - four columns - - */
    .ColumnGroup8elements > .Column {
      width: 12.5%;
    }
    .ColumnGroup8elements > .Column.No8{
    }
        /* for SpView */
        body.SpView .ColumnGroup8elements > .Column {
          width: 50%;
        }

    /* - - four columns - - */
    .ColumnGroup10elements > .Column {
      width: 10.0%;
    }
    .ColumnGroup10elements > .Column.No10{
    }
        /* for SpView */
        body.SpView .ColumnGroup10elements > .Column {
          width: 50%;
        }



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

/* DefaultTable
--------------------------------------------------- */
.DefaultTable{
  margin: 0 auto;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
    .DefaultTable > caption{
      padding: .25em 0;
    }
    .DefaultTable > thead{
    }
    .DefaultTable > thead > tr > th{
      text-align: center;
      font-weight: normal;
      background: #f2f2f2;
      border: 1px solid #ccc;
    }
    .DefaultTable > thead > tr > th:first-child{
      border-left: none;
    }
    .DefaultTable > tbody{
    }
    .DefaultTable > tbody > tr > th,
    .DefaultTable > tbody > tr > td,
    .DefaultTable > tfoot > tr > th,
    .DefaultTable > tfoot > tr > td{
      padding: 1em 20px;
      border: 1px solid #ccc;
      font-weight: normal;
      line-height: 2;
    }
    .DefaultTable > tbody > tr > th{
      color: #555;
      background: rgba(0,0,0,0.05);
      text-align: left;
      width: 25%;
    }
    .DefaultTable > tbody > tr > td{
      background: rgba(255,255,255,0.5);
    }
    .DefaultTable > tbody > tr > td dl{
      margin: 1em 0;
    }
    .DefaultTable > tbody > tr > td dl dt{
      float: left;
      min-width: 10em;
    }
    .DefaultTable > tbody > tr > td dl dd{
      float: left;
    }
    .DefaultTable > tfoot{
    }
    

    /* SpView */
    body.SpView .DefaultTable > tbody > tr,
    body.SpView .DefaultTable > tbody > tr > th,
    body.SpView .DefaultTable > tbody > tr > td{
      display: block;
      width: auto;
    }
    body.SpView .DefaultTable > tbody > tr > th{
      border-bottom: none;
      padding: 0.25em 0.5em;
      font-size: 87.5%;
    }
    body.SpView .DefaultTable > tbody > tr > td{
      border-top: none;
      padding: 1em;
    }
    /* Scrollable (LargeTable) */
    .Scrollable .DefaultTable {
      border: 1px solid #ccc;
    }
    .Scrollable .DefaultTable > tbody > tr{
      display: table-row!important;
    }
    .Scrollable .DefaultTable > tbody > tr > th,
    .Scrollable .DefaultTable > tbody > tr > td{
      padding: 0.75em 0.5em;
      display: table-cell!important;
    }
/* ContactTable (DefaultTableのoverride)
--------------------------------------------------- */
.ContactTable.DefaultTable{
  
}
    .ContactTable.DefaultTable > tbody > tr > th,
    .ContactTable.DefaultTable > tbody > tr > td{
      padding: 1em 20px;
      line-height: 1.5;
    }
    .ContactTable.DefaultTable > tbody > tr > th{
      color: #555;
      font-size: 100%;
      font-weight: bold;
      white-space: nowrap;
      width: 25%;
      text-align: center;
    }
    .ContactTable.DefaultTable > tbody > tr > td{
      font-size: 87.5%;
    }
    .ContactTable.DefaultTable > tbody > tr > td.Address{
      white-space: nowrap;
      width: 45%;
    }
    .ContactTable.DefaultTable > tbody > tr > td.Tel{
      white-space: nowrap;
      width: 30%;
      text-align: center;
    }
    /* override LinkList */
    .ContactTable.DefaultTable .Button{
      margin: 1em 0 0;
      display: inline-block;
      padding: 0.5em 1em;
      font-size: 62.5%;
      border-width: 1px;
      font-weight: normal;
    }
    .ContactTable.DefaultTable .Button:hover{
      background: #ace2ff;
    }
    .ContactTable.DefaultTable .Button .Label{
    }
    .ContactTable.DefaultTable .Button .Label::before{
    }

/* HistoryTable (DefaultTableのoverride)
--------------------------------------------------- */
.HistoryTable.DefaultTable{
  
}
    .HistoryTable.DefaultTable > tbody > tr > th.Year{
      width: 7em;
      white-space: nowrap;
    }
    .HistoryTable.DefaultTable > tbody > tr > th.Month{
      width: 5em;
      white-space: nowrap;
      text-align: right;
    }
/* FormTable
--------------------------------------------------- */
.FormTable{
  border-collapse: collapse;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 25px;
}
    .FormTable tr{
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .FormTable tr.Necessary th{
      position: relative;
    }
    .FormTable tr.Necessary th:before{
      content: "必須";
      background: #972020;
      font-size: 75%;
      letter-spacing: 0.2em;
      color: #fff;
      padding: 0.5em 1em;
      display: block;
      position: absolute;
      left: 0px;
      top: 50%;
      top: calc(50% - 1em);
    }
    .FormTable tr.Optional th{
      position: relative;
    }
    .FormTable tr.Optional th:before{
      content: "任意";
      background: #204c97;
      font-size: 75%;
      letter-spacing: 0.2em;
      color: #fff;
      padding: 0.5em 1em;
      display: block;
      position: absolute;
      left: 0px;
      top: 50%;
      top: calc(50% - 1em);
    }
    .FormTable th,
    .FormTable td{
      border: none;
      padding: 2em 1.5em;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .FormTable th{
      text-align: right;
      min-width: 25%;
      letter-spacing: 0.25em;
      color: #555;
    }

/* FormTableMini
--------------------------------------------------- */
.FormTableMini{
  border-collapse: collapse;
  width: 35%;
  max-width: 1000px;
  margin: 0 auto 25px;
}
    .FormTableMini tr{
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .FormTableMini tr.Necessary th{
      position: relative;
    }
    .FormTableMini tr.Necessary th:before{
      content: "必須";
      background: #f00;
      font-size: 75%;
      letter-spacing: 0.2em;
      color: #fff;
      padding: 0.5em 1em;
      display: block;
      position: absolute;
      left: 0px;
      top: 50%;
      top: calc(50% - 1em);
    }
    .FormTableMini th,
    .FormTableMini td{
      border: none;
      padding: 2em 1.5em;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }
    .FormTableMini th{
      text-align: right;
      min-width: 25%;
      letter-spacing: 0.25em;
      color: #555;
    }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Icon Setting                                   */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

.LinkList [class^="icon-"]::before,
.LinkList [class*=" icon-"]::before,
[class*="icon-file-"]::before {
  display: inline-block;
  width:         1.5em;
  line-height:   1.5em;
  border-radius: 1.5em;
  font-size:      75%;
  padding:       0.5em;
  margin-top:  -0.75em;
  background: #204c97;
  color: #fff;
}
.icon-file-pdf::before {
  color:      #fff!important;
  background: #bb0708!important;
}
.icon-file-image::before {
  color:      #fff!important;
  background: #222!important;
}
.icon-file-archive::before {
  color:      #fff!important;
  background: #222063!important;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   Animation Setting                              */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */



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

/* Scrollable 横スクロール
--------------------------------------------------- */

    .Scrollable {
      overflow: auto;
      position: relative;
    }
    .Scrollable > table {
      width: 660px;
      margin-bottom: 0!important;
    }
    .Scrollable th{
      white-space: nowrap;
    }
    .Scrollable::-webkit-scrollbar{
      height: 0.5em;
      margin-top: 5px;
    }
    .Scrollable::-webkit-scrollbar-track{
      background: #f1f1f1;
    }
    .Scrollable::-webkit-scrollbar-thumb {
      background: #ff85e0;
    }

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  bxslider のカスタマイズ                         */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

#ContentsDivision .bx-viewport{
}
#ContentsDivision .bx-viewport ul{
  margin: 0;
}
#ContentsDivision .bx-wrapper{
  box-shadow: none!important;
  border: none!important;
  margin: 0!important;
  background: none!important;
  max-width: none!important;
}
    #ContentsDivision .bx-wrapper .bx-prev,
    #ContentsDivision .bx-wrapper .bx-next {
      background: none;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      text-indent: 0px;
      text-align: center;
      font-size: 15px;
      line-height: 15px;
      vertical-align: bottom;
      opacity: 0.75;
      border-radius: 30px;
    }
    #ContentsDivision .bx-wrapper .bx-prev:before,
    #ContentsDivision .bx-wrapper .bx-next:before {
      background: #ddd;
      font-family: "picticon";
      font-size: 30px;
      line-height: 30px;
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: none!important;
      width: 1em;
      /*text-align: center;*/
      font-variant: normal;
      text-transform: none;
      position: absolute;
      left: 0px;
      z-index: 9999;
      margin: 0;
      border-radius: 15px;
      padding: 20px 10px;
      margin: -10px;
    }
    #ContentsDivision .bx-wrapper .bx-prev:hover,
    #ContentsDivision .bx-wrapper .bx-next:hover{
      color: #204c97;
      color: #fff;
      background: #f80;
      opacity: 0.95;
    }
    #ContentsDivision .bx-wrapper .bx-prev:hover:before,
    #ContentsDivision .bx-wrapper .bx-next:hover:before{
      background: #f80;
    }
    #ContentsDivision .bx-wrapper .bx-prev {
      left: -15px;
    }
    #ContentsDivision .bx-wrapper .bx-prev:before {
      content: "\f104";
      text-align: right;
    }
    #ContentsDivision .bx-wrapper .bx-next {
      right: -15px;
    }
    #ContentsDivision .bx-wrapper .bx-next:before {
      content: "\f105";
      text-align: left;
    }
    
    .InlineBlock {
      display: inline-block;
      width: 48%;
      vertical-align: top;
      text-align: center;
      padding: 10px;
    }

/* ComparsionBlockHeader, ComparsionBlockBody */
.ComparsionBlockHeader {
  margin: 0 50px;
  width: 90%;
}
    .ComparsionBlockHeader .cp_ipselect {
      overflow: hidden;
      width: 95%;
      margin: 2em auto;
      text-align: center;
    }
    .ComparsionBlockHeader .cp_ipselect select {
      width: 100%;
      padding-right: 1em;
      cursor: pointer;
      text-indent: 0.01px;
      text-overflow: ellipsis;
      border: none;
      outline: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .ComparsionBlockHeader .cp_ipselect select::-ms-expand {
      display: none;
    }
    .ComparsionBlockHeader .cp_ipselect.cp_sl01 {
      position: relative;
      border: 1px solid #bbbbbb;
      border-radius: 2px;
      background: #ffffff;
      margin-bottom: 0px;
      font-size: 1.5em;
    }
    .ComparsionBlockHeader .cp_ipselect.cp_sl01::before {
      position: absolute;
      top: 0.6em;
      right: 0.6em;
      width: 0;
      height: 0;
      padding: 0;
      content: '';
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #666666;
      pointer-events: none;
    }
    .ComparsionBlockHeader .cp_ipselect.cp_sl01 select {
      padding: 8px 38px 8px 8px;
      color: #666666;
    }

    .ComparsionBlockHeader th, .ComparsionBlockHeader td {
      text-align: center;
      width: 25%;
      min-width: 130px;
      padding: 0 10px;
      height: 40px;
    }
    .ComparsionBlockHeader .flex-container {
      display: flex;
    }
    .ComparsionBlockHeader .ImageRecord {
      height: 240px;
    }
    .ComparsionBlockHeader .ImageWrap {
      display: inline-block;
      height: 150px;
      width: 100%;
      margin: 10px 5px;
    }
    .ComparsionBlockHeader .ImageWrap img {
      height: 100%;
      border: solid 1px #aaa;
    }

    .ComparsionBlockBody {
      margin: 0 50px 50px 50px;
      width: 90%;
      color: #333;
    }
    .ComparsionBlockBody tr {
      height: 50px;
    }
    .ComparsionBlockBody th, .ComparsionBlockBody td {
      text-align: center;
      width: calc(100%/4);
      min-width: 130px;
      padding: 10px;
      height: 30px;
    }
    .ComparsionBlockBody th {
      text-align: left;
      font-weight: normal;
      font-size: 1.5em;
    }
    .ComparsionBlockBody td {
      border-bottom: solid 1px #ddd;
      font-size: 13px;
      font-weight: bold;
      line-height: 18px;
    }

    .color-box-wrap {
      margin: 10px 5px;
    }
    .color-box-wrap img {
      height: 40px;
      width: 40px;
      margin: 0 2px;
      border: solid 1px #333;
    }

    .detailLink {
      font-weight: bold;
      color: #06c;
    }
    .productLink {
      color: #06c;
      line-height: 1.5em;
      position: relative;
      display: inline-block;
      transition: .3s;
    }
    .productLink::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      content: '';
      width: 0;
      height: 1px;
      background-color: #f90;
      transition: .3s;
      transform: translateX(-50%);
    }
    .productLink:hover::after{
      width: 100%;
    }