@charset "utf-8";




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    サイト固有のデザイン定義                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */


/* color
--------------------------------------------------- */
body{
  color: #222;
}

/* set main Color */

    /* front */
    .frcolorDefault{
      color:        #333333!important;
      border-color: #333333!important;
    }
    .frcolorMain{
      color:        #204c97!important;
      border-color: #204c97!important;
    }
    .frcolorWhite{
      color:        #fff!important;
      border-color: #fff!important;
    }

    /* bgcolor */
    .bgcolorMain{
      color:         #fff;
      border-color:  #fff;
      background-color: #204c97;
    }
    .bgcolorDark{
      color:         #fff;
      border-color:  #fff;
      background-color: #333333!important;
    }


/* set genre Color */

    /* front */
        .frcolorNew{
      color: #f03636!important;
    }
    .frcolorNew svg{
      fill: #f03636;
    }
        .frcolorShop{
      color: #f49824!important;
    }
    .frcolorShop svg{
      fill: #f49824;
    }
        .frcolorSchool{
      color: #4a9c4c!important;
    }
    .frcolorSchool svg{
      fill: #4a9c4c;
    }
        .frcolorBuilding{
      color: #217f87!important;
    }
    .frcolorBuilding svg{
      fill: #217f87;
    }
        .frcolorExterior{
      color: #e45523!important;
    }
    .frcolorExterior svg{
      fill: #e45523;
    }
        .frcolorLineup{
      color: #2c2c2c!important;
    }
    .frcolorLineup svg{
      fill: #2c2c2c;
    }
        .frcolorExample{
      color: #1a6c9d!important;
    }
    .frcolorExample svg{
      fill: #1a6c9d;
    }
        .frcolorScene{
      color: #ffffff!important;
    }
    .frcolorScene svg{
      fill: #ffffff;
    }
        .frcolorExterior{
      color: #204c97!important;
    }
    .frcolorExterior svg{
      fill: #204c97;
    }
        .frcolorExterior{
      color: #204c97!important;
    }
    .frcolorExterior svg{
      fill: #204c97;
    }
        
    
    /* bgcolor main */
        .bgcolorNew {
      color:              #ffffff!important;
      border-color:       #f03636!important;
      background-color:   #f03636!important;
    }
    .bgcolorNew svg{
      fill:               #ffffff;
    }
        .bgcolorShop {
      color:              #ffffff!important;
      border-color:       #f49824!important;
      background-color:   #f49824!important;
    }
    .bgcolorShop svg{
      fill:               #ffffff;
    }
        .bgcolorSchool {
      color:              #ffffff!important;
      border-color:       #4a9c4c!important;
      background-color:   #4a9c4c!important;
    }
    .bgcolorSchool svg{
      fill:               #ffffff;
    }
        .bgcolorBuilding {
      color:              #ffffff!important;
      border-color:       #217f87!important;
      background-color:   #217f87!important;
    }
    .bgcolorBuilding svg{
      fill:               #ffffff;
    }
        .bgcolorExterior {
      color:              #ffffff!important;
      border-color:       #e45523!important;
      background-color:   #e45523!important;
    }
    .bgcolorExterior svg{
      fill:               #ffffff;
    }
        .bgcolorLineup {
      color:              #ffffff!important;
      border-color:       #2c2c2c!important;
      background-color:   #2c2c2c!important;
    }
    .bgcolorLineup svg{
      fill:               #ffffff;
    }
        .bgcolorExample {
      color:              #ffffff!important;
      border-color:       #1a6c9d!important;
      background-color:   #1a6c9d!important;
    }
    .bgcolorExample svg{
      fill:               #ffffff;
    }
        .bgcolorScene {
      color:              #222222!important;
      border-color:       #ffffff!important;
      background-color:   #ffffff!important;
    }
    .bgcolorScene svg{
      fill:               #222222;
    }
        .bgcolorExterior {
      color:              #ffffff!important;
      border-color:       #204c97!important;
      background-color:   #204c97!important;
    }
    .bgcolorExterior svg{
      fill:               #ffffff;
    }
        .bgcolorExterior {
      color:              #ffffff!important;
      border-color:       #204c97!important;
      background-color:   #204c97!important;
    }
    .bgcolorExterior svg{
      fill:               #ffffff;
    }
        
    /* bgcolor deep */
        .bgcolor-deepNew {
      color:              #ffffff;
      border-color:       #b71616;
      background-color:   #b71616;
    }
    .bgcolor-deepNew svg{
      fill:               #ffffff;
    }
        .bgcolor-deepShop {
      color:              #ffffff;
      border-color:       #bc6c07;
      background-color:   #bc6c07;
    }
    .bgcolor-deepShop svg{
      fill:               #ffffff;
    }
        .bgcolor-deepSchool {
      color:              #ffffff;
      border-color:       #2d752e;
      background-color:   #2d752e;
    }
    .bgcolor-deepSchool svg{
      fill:               #ffffff;
    }
        .bgcolor-deepBuilding {
      color:              #ffffff;
      border-color:       #0e5f67;
      background-color:   #0e5f67;
    }
    .bgcolor-deepBuilding svg{
      fill:               #ffffff;
    }
        .bgcolor-deepExterior {
      color:              #ffffff;
      border-color:       #7b4a38;
      background-color:   #7b4a38;
    }
    .bgcolor-deepExterior svg{
      fill:               #ffffff;
    }
        .bgcolor-deepLineup {
      color:              #ffffff;
      border-color:       #1f1f1f;
      background-color:   #1f1f1f;
    }
    .bgcolor-deepLineup svg{
      fill:               #ffffff;
    }
        .bgcolor-deepExample {
      color:              #ffffff;
      border-color:       #074f79;
      background-color:   #074f79;
    }
    .bgcolor-deepExample svg{
      fill:               #ffffff;
    }
        .bgcolor-deepScene {
      color:              #222222;
      border-color:       #b3b3b3;
      background-color:   #b3b3b3;
    }
    .bgcolor-deepScene svg{
      fill:               #222222;
    }
        .bgcolor-deepExterior {
      color:              #ffffff;
      border-color:       #7b4a38;
      background-color:   #7b4a38;
    }
    .bgcolor-deepExterior svg{
      fill:               #ffffff;
    }
        .bgcolor-deepExterior {
      color:              #ffffff;
      border-color:       #7b4a38;
      background-color:   #7b4a38;
    }
    .bgcolor-deepExterior svg{
      fill:               #ffffff;
    }
        
    /* bgcolor pale */
        .bgcolor-paleNew {
      color:              #f03636;
      border-color:       #fde0e0;
      background-color:   #fde0e0;
    }
    .bgcolor-paleNew *{
      color:              #f03636;
      border-color:       #fde0e0;
    }
    .bgcolor-paleNew svg{
      fill:               #f03636;
    }
        .bgcolor-paleShop {
      color:              #f49824;
      border-color:       #f4e8d8;
      background-color:   #f4e8d8;
    }
    .bgcolor-paleShop *{
      color:              #f49824;
      border-color:       #f4e8d8;
    }
    .bgcolor-paleShop svg{
      fill:               #f49824;
    }
        .bgcolor-paleSchool {
      color:              #4a9c4c;
      border-color:       #e3f0e4;
      background-color:   #e3f0e4;
    }
    .bgcolor-paleSchool *{
      color:              #4a9c4c;
      border-color:       #e3f0e4;
    }
    .bgcolor-paleSchool svg{
      fill:               #4a9c4c;
    }
        .bgcolor-paleBuilding {
      color:              #217f87;
      border-color:       #ddebed;
      background-color:   #ddebed;
    }
    .bgcolor-paleBuilding *{
      color:              #217f87;
      border-color:       #ddebed;
    }
    .bgcolor-paleBuilding svg{
      fill:               #217f87;
    }
        .bgcolor-paleExterior {
      color:              #e45523;
      border-color:       #eceae4;
      background-color:   #eceae4;
    }
    .bgcolor-paleExterior *{
      color:              #e45523;
      border-color:       #eceae4;
    }
    .bgcolor-paleExterior svg{
      fill:               #e45523;
    }
        .bgcolor-paleLineup {
      color:              #2c2c2c;
      border-color:       #d3dbea;
      background-color:   #d3dbea;
    }
    .bgcolor-paleLineup *{
      color:              #2c2c2c;
      border-color:       #d3dbea;
    }
    .bgcolor-paleLineup svg{
      fill:               #2c2c2c;
    }
        .bgcolor-paleExample {
      color:              #1a6c9d;
      border-color:       #dce9f0;
      background-color:   #dce9f0;
    }
    .bgcolor-paleExample *{
      color:              #1a6c9d;
      border-color:       #dce9f0;
    }
    .bgcolor-paleExample svg{
      fill:               #1a6c9d;
    }
        .bgcolor-paleScene {
      color:              #ffffff;
      border-color:       #e5e5e5;
      background-color:   #e5e5e5;
    }
    .bgcolor-paleScene *{
      color:              #ffffff;
      border-color:       #e5e5e5;
    }
    .bgcolor-paleScene svg{
      fill:               #ffffff;
    }
        .bgcolor-paleExterior {
      color:              #204c97;
      border-color:       #eceae4;
      background-color:   #eceae4;
    }
    .bgcolor-paleExterior *{
      color:              #204c97;
      border-color:       #eceae4;
    }
    .bgcolor-paleExterior svg{
      fill:               #204c97;
    }
        .bgcolor-paleExterior {
      color:              #204c97;
      border-color:       #eceae4;
      background-color:   #eceae4;
    }
    .bgcolor-paleExterior *{
      color:              #204c97;
      border-color:       #eceae4;
    }
    .bgcolor-paleExterior svg{
      fill:               #204c97;
    }
        /* bgcolor bright */
        .bgcolor-brightNew {
      color:              #ffffff;
      border-color:       #ff8686;
      background-color:   #ff8686;
    }
    .bgcolor-brightNew *{
      color:              #ffffff;
      border-color:       #ff8686;
    }
    .bgcolor-brightNew svg{
      fill:               #ffffff;
    }
        .bgcolor-brightShop {
      color:              #ffffff;
      border-color:       #ffc67e;
      background-color:   #ffc67e;
    }
    .bgcolor-brightShop *{
      color:              #ffffff;
      border-color:       #ffc67e;
    }
    .bgcolor-brightShop svg{
      fill:               #ffffff;
    }
        .bgcolor-brightSchool {
      color:              #ffffff;
      border-color:       #8dd48f;
      background-color:   #8dd48f;
    }
    .bgcolor-brightSchool *{
      color:              #ffffff;
      border-color:       #8dd48f;
    }
    .bgcolor-brightSchool svg{
      fill:               #ffffff;
    }
        .bgcolor-brightBuilding {
      color:              #ffffff;
      border-color:       #72c3cb;
      background-color:   #72c3cb;
    }
    .bgcolor-brightBuilding *{
      color:              #ffffff;
      border-color:       #72c3cb;
    }
    .bgcolor-brightBuilding svg{
      fill:               #ffffff;
    }
        .bgcolor-brightExterior {
      color:              #ffffff;
      border-color:       #e3c5a2;
      background-color:   #e3c5a2;
    }
    .bgcolor-brightExterior *{
      color:              #ffffff;
      border-color:       #e3c5a2;
    }
    .bgcolor-brightExterior svg{
      fill:               #ffffff;
    }
        .bgcolor-brightLineup {
      color:              #ffffff;
      border-color:       #888888;
      background-color:   #888888;
    }
    .bgcolor-brightLineup *{
      color:              #ffffff;
      border-color:       #888888;
    }
    .bgcolor-brightLineup svg{
      fill:               #ffffff;
    }
        .bgcolor-brightExample {
      color:              #ffffff;
      border-color:       #6ab0dc;
      background-color:   #6ab0dc;
    }
    .bgcolor-brightExample *{
      color:              #ffffff;
      border-color:       #6ab0dc;
    }
    .bgcolor-brightExample svg{
      fill:               #ffffff;
    }
        .bgcolor-brightScene {
      color:              #222222;
      border-color:       #3b8bbd;
      background-color:   #3b8bbd;
    }
    .bgcolor-brightScene *{
      color:              #222222;
      border-color:       #3b8bbd;
    }
    .bgcolor-brightScene svg{
      fill:               #222222;
    }
        .bgcolor-brightExterior {
      color:              #ffffff;
      border-color:       #e3c5a2;
      background-color:   #e3c5a2;
    }
    .bgcolor-brightExterior *{
      color:              #ffffff;
      border-color:       #e3c5a2;
    }
    .bgcolor-brightExterior svg{
      fill:               #ffffff;
    }
        .bgcolor-brightExterior {
      color:              #ffffff;
      border-color:       #e3c5a2;
      background-color:   #e3c5a2;
    }
    .bgcolor-brightExterior *{
      color:              #ffffff;
      border-color:       #e3c5a2;
    }
    .bgcolor-brightExterior svg{
      fill:               #ffffff;
    }
    
    
    
    /* bgcolor cross-stripe-gray */
    .bgcolor-cross-stripe-gray{
      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);
      background-size: 500px 500px;
    }
    /* bgcolor cross-stripe-gray */
    .bgcolor-cross-stripe-blue{
      background: rgba(32,76,151,0.75);
      background-image: -webkit-repeating-linear-gradient( 45deg, rgba(32,76,151,.125), rgba(32,76,151,.125) 2px, rgba(32,76,151,0) 2px, rgba(32,76,151,0) 6px),
                        -webkit-repeating-linear-gradient(-45deg, rgba(32,76,151,.125), rgba(32,76,151,.125) 2px, rgba(32,76,151,0) 2px, rgba(32,76,151,0) 6px);
      background-image:         repeating-linear-gradient( 45deg, rgba(32,76,151,.125), rgba(32,76,151,.125) 2px, rgba(32,76,151,0) 2px, rgba(32,76,151,0) 6px),
                                repeating-linear-gradient(-45deg, rgba(32,76,151,.125), rgba(32,76,151,.125) 2px, rgba(32,76,151,0) 2px, rgba(32,76,151,0) 6px);
      background-size: 500px 500px;
    }

/* Background decoration
--------------------------------------------------- */


/* body */
body.PcView {
  background-color: #fff;
  background-repeat: no-repeat;
  /* background-image: url(../img/common/decoration/sky.jpg); */
  background-size: 2000px 1000px;
  background-position: 50% 0%;
  background-attachment: fixed;
}
body.PcView.Products {
  /* background-image: url(../img/common/decoration/ester03.jpg); */
}
body.PcView.Example {
  /* background-image: url(../img/common/decoration/ester04.jpg); */
}
body.PcView.Download {
  /* background-image: url(../img/common/decoration/ester02.jpg); */
}
body.PcView.Employ {
  /* background-image: url(../img/common/decoration/entrance.jpg); */
}
body.PcView.Estar {
  /* background-image: url(../img/common/decoration/estar.jpg); */
}
body.PcView.Plain {
  background-color: #fff;
  background-image: none;
}
#ContentsDivision{
  position: relative;
}

#World{
  background-image:        -webkit-gradient(linear, left top, right bottom, from( rgba(255,255,255,1) ),  color-stop(0.3, rgba(255,255,255,0)),  to( rgba(255,255,255,0) ) );
  background-image:         linear-gradient(150deg, rgba(255,255,255,1), rgba(255,255,255,1) 300px, rgba(255,255,255,0) 1000px, rgba(255,255,255,0) 100%);
  background-attachment: fixed;
}
    
    
    /* SpView */
    body.SpView,
    body.SpView #World{
      background-attachment: scroll;
    }
    body.SpView #World{
      background-size: 100% 100%;
    }





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

/* basic */
.fontSansSerif{
  /*font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
  /*font-family: "Verdana", "Hiragino Kaku Gothic ProN",  "YuGothic", "游ゴシック",  "Meiryo", "Arial", "Century Gothic", sans-serif;*/
  font-family: "Verdana", "Hiragino Kaku Gothic ProN", "Meiryo", "Arial", "Century Gothic", sans-serif;
}
.fontSerif{
  font-family: "Times New Roman", "Hiragino Mincho ProN", "HiraMinProN-W3", "MS PMincho", serif;
}
.fontMonospace{
  font-family: Osaka-mono, "MS Gothic", monospace;
}
/* webfont */
.fontEnglishLabel{
  font-family: "Oswald", "Arial", "Century Gothic", sans-serif;
}

/* effect
--------------------------------------------------- */

#Container a{
  -webkit-transition: all .2s;
          transition: all .2s;
}

a:hover{
}

    [class^="hvr-"] *,
    [class*=" hvr-"] * {
      color: inherit;
    }
    #ContentsDivision .hvr-bubble-bottom:before {
      border-top-color: inherit;
      left: 50%;
      margin-left: -10px;
    }
    [class*="hvr-underline-"]{
      background: none;
      overflow: visible;
    }
    [class*="hvr-underline-"]:before{
      height: 8px;
    }
    #HeaderDivision [class*="hvr-underline-"]:before,
    #FooterDivision [class*="hvr-underline-"]:before{
      height: 2px;
      bottom: -5px;
    }

    /* brightness */
    .hvr-brightness-up{
    }
    .hvr-brightness-up:hover{
      -webkit-filter: brightness(1.1);
              filter: brightness(1.1);
    }
    .hvr-brightness-down{
    }
    .hvr-brightness-down:hover{
      -webkit-filter: brightness(0.9);
              filter: brightness(0.9);
    }
    
    /* outline */
    .hvr-outline{
      outline: 0px solid #204c97;
    }
    .hvr-outline:hover{
      outline: 1px solid #204c97;
      z-index: 15;
    }
    
    
    
    /* zoom */
    .hvr-zoom{
      z-index: 10;
    }
    .hvr-zoom:hover{
      position: relative;
      z-index: 15;
      -webkit-transform: scale(1.05,1.05);
              transform: scale(1.05,1.05);
      
    }
    /* more */
    .hvr-more{
      position: relative;
    }
    .hvr-more:before{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      -webkit-transition: all .5s;
      transition: all .5s;
      content: attr(title);
      white-space: nowrap;
      display: block;
      width: 100%;
      font-size: 75%;
      line-height: 1.125em;
      padding: 0.5em 1em;
      background: #000;
      color: #fff;
      position: absolute;
      top: 80%;
      z-index: 20;
      opacity: 0;
    }
    .hvr-more:hover:before{
      opacity: 1;
      top: 95%;
    }
    
    
/* blur */
.Blur{
  -webkit-filter: blur(5px);
          filter: blur(5px);
}


/* anchor
--------------------------------------------------- */
a{
  color: inherit;
  text-decoration: none;
}
a:link {
}
a:visited {
}
a:active{
}
a:hover {
  /*text-decoration: underline;*/
}

/* tel link
--------------------------------------------------- */
a.TelLink{
  color: #116cc1!important;
  text-decoration: none!important;
}
a.TelLink:hover{
  text-decoration: none!important;
}

/* image link
--------------------------------------------------- */
a img{

}





/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Header, Contents, Footer                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

html{
  background: #fff;
}
body{
  text-align: center;
  overflow-wrap: break-word;
  word-wrap: break-word;
  margin: 0 auto;
  background-color: #fff;
}
#World{
  position: relative;
  left: 0px;
  overflow: hidden;
  text-align: left;
}
.PageWidthSetter {
  margin: 0 auto;
  text-align: left;
}
/* set PageWidth for PcView */
body.PcView{
  min-width: 1200px;
}
body.PcView .PageWidthSetter {
  width: 1200px;
  padding: 0 20px;
}



/* HeaderDivision
--------------------------------------------------- */
#HeaderDivision{
  /* position: absolute; */
}
#HeaderDivision.PositionFixed{
  width: 100%;
  top: 0px;
  left: 0%;
  position: fixed;
  z-index: 10000;
}
    /* 印刷時は pos: fixed 無効 */
    @media print{
        #World{
          padding-top: 0!important;
        }
        #HeaderDivision.PositionFixed{
          position: static!important;
        }
    }

#HeaderDivision a{
  color: inherit;
}
    /* - - Area - - */
    #SiteHeaderArea{
    }
    #HeaderInfoArea{
      color: #fff;
      background: #204c97;
      padding: 0.25em 0;
      line-height: 1.25;
      height: 50px;
    }
        /* for PcView */
        body.PcView #SiteHeaderArea{
          background: #fff;
        }
    
    
    /* - - SiteHeaderBlock - - */
    .SiteHeaderBlock{
    }
        /* for PcView */
        body.PcView .SiteHeaderBlock{
          position: relative;
        }
        body.PcView .SiteHeaderBlock .BlockHeader{
          float: left;
          padding: 0.6em 0;
          height: 5.5em;
          overflow:hidden;
        }
        body.PcView .SiteHeaderBlock .BlockContents{
          float: left;
          padding: 1.5em 0 0;
          position: relative;
          overflow:hidden;
          height: 5.5em;
        }
        body.PcView .SiteHeaderBlock .BlockFooter{
          float: right;
          padding: 2em 0 0;
        }
        /* for SpView */
        body.SpView .SiteHeaderBlock{
        
        }
        body.SpView .SiteHeaderBlock .BlockHeader{
          padding: 1em;
          background: #fff;
          background: rgba(255,255,255,0.95);
        }
        body.SpView .SiteHeaderBlock .BlockContents{
        }
        body.SpView .SiteHeaderBlock .BlockFooter{
        }
        /* SiteLogo */
        /*    width, height をemで定義しておく（旧ブラウザ対策）   */
        .SiteHeaderBlock .SiteLogo{
        }
        .SiteHeaderBlock .SiteLogo a{
          display: block;
          /* padding: 30px 20px 30px 10px;
          margin-top: -30px;
          margin-bottom: -30px; */
          line-height: 3;
        }
        .SiteHeaderBlock .SiteLogo img{
          /* width: 12em;
          height: 2.4em; */
          width: 400px;
          /* height: 65px; */
        }
        /* SNS YouTube */
        .SiteHeaderBlock .BlockFooter .Sns {
          font-size: 62.5%;
          line-height: 25px;
          display: inline-block;
        }
        .SiteHeaderBlock .BlockFooter .Sns *{
          line-height: 25px;
        }
        .SiteHeaderBlock .BlockFooter .Sns a{
          display: inline-block;
          padding: 5px;
        }
        .SiteHeaderBlock .BlockFooter .Sns .Logo{
        }
        .SiteHeaderBlock .BlockFooter .Sns .Logo img{
          height: 25px;
        }
        .SiteHeaderBlock .BlockFooter .Sns.Facebook .Logo img{
        }
    /* hover */
    body.PcView .SiteHeaderBlock a,
    .SiteHeaderBlock a *{
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    body.PcView .SiteHeaderBlock a:hover{
      background: #eef;
    }
    body.PcView .SiteHeaderBlock a:hover .Main{
      color: #231916;
    }
    body.PcView .SiteHeaderBlock a:hover .Sub{
      opacity: 1.0!important;
      /*letter-spacing: 0.075em!important;*/
    }
    
        /* - - SiteMenu for PcView - - */
        #SiteMenu{
          list-style: none;
          line-height: 1.125;
        }
            /* for PcView */
            body.PcView #SiteMenu li{
              float: left;
              padding: 0;
              border-left: 1px solid #eee;
            }
            body.PcView #SiteMenu li a{
              display: inline-block;
              padding: 50px 10px;
              margin-top: -50px;
              margin-bottom: -50px;
            }
            body.PcView #SiteMenu li a .Main,
            body.PcView #SiteMenu li a .Sub{
              display: block;
              text-align: center;
              white-space: nowrap;
            }
            body.PcView #SiteMenu li a .Main{
              color: #222;
              font-size: 100%;
              font-size: 93.75%;
              letter-spacing: 0.025em;
              letter-spacing: 0;
              min-width: 5.5em;
              min-width: 5.0em;
              font-weight:bold;
            }
            body.PcView #SiteMenu li a .Sub{
              color: #204c97;
              font-size: 62.5%;
              font-size: 75%;
              letter-spacing: 0.05em;
              margin-bottom: 0.75em;
              opacity: 0.3;
            }
                body.PcView #SiteMenu li.Active a{
                  background: #222;
                }
                body.PcView #SiteMenu li.Active a .Main{
                  color: #fff!important;
                }
                body.PcView #SiteMenu li.Active a .Sub{
                  color: #f90!important;
                  opacity: .9;
                }
            /* for SpView */
            body.SpView #SiteMenu{
              background: #204c97;
              padding: 15px;
              display: none;
            }
            body.SpView #SiteMenu li{
              float: left;
              padding: 0 0;
              width: 50%;
            }
            body.SpView #SiteMenu li > .inner{
              margin: 0.25em;
            }
            body.SpView #SiteMenu li a{
              display: block;
              padding: 1.25em 0;
              background: rgba(0,0,0,0.2);
              border-radius: 0.25em;
            }
            body.SpView #SiteMenu li a .Main,
            body.SpView #SiteMenu li a .Sub{
              display: block;
              text-align: center;
              white-space: nowrap;
            }
            body.SpView #SiteMenu li a .Main{
              color: #333;
              font-size: 112.5%;
              letter-spacing: 0.025em;
              font-weight:bold;
              color: #fff;
            }
            body.SpView #SiteMenu li a .Sub{
              color: #204c97;
              font-size: 75%;
              letter-spacing: 0.05em;
              margin-bottom: 0.5em;
              opacity: 0.3;
              color: #fff;
            }
        /* menu-trigger for SpView  */
        #SiteMenuTrigger{
          position: absolute;
          top:   .75em;
          right: 1em;
        }
            .menu-trigger,
            .menu-trigger span {
              display: inline-block;
              transition: all .4s;
            }
            .menu-trigger {
              padding: 1.125em 1.25em;
              font-size: 62.5%;
              background-color: #ddd;
              position: relative;
            }
            .menu-trigger .Icon {
              position: relative;
              width:  3.25em;
              height: 3em;
            }
            .menu-trigger .Icon span.Shape {
              position: absolute;
              left: 0;
              width: 100%;
              height: 4px;
              background-color: #222;
              border-radius: 4px;
            }
            .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;
            }
            .menu-trigger span.Label {
              position: absolute;
              font-weight: bold;
              color: #777;
              width: 100%;
              letter-spacing: 0.25em;
              font-size: 85%;
              bottom: -1.75em;
              left: 0px;
              dislay: block;
              text-align: center;
            }
            /* Active */
            .menu-trigger.Active{
              background-color: #2098d1;
              -webkit-transform: scale(0.75);
                      transform: scale(0.75);
            }
            .menu-trigger.Active .Label{
              opacity: 0;
            }
            .menu-trigger.Active .Icon span.Shape{
              background-color: #ffffff;
            }
            .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);
            }
        
    
    
/* ContentsDivision
--------------------------------------------------- */
#ContentsDivision {
}

    /* - - Container - - */
    body:not(.Top).PcView #ContentsDivision #Container{
      /* padding: 50px 0 100px; */
      /* 上部余白が大きい為、50px->25pxに変更する */
      padding: 25px 0 100px;
    }

    







/* FooterDivision
--------------------------------------------------- */
#FooterDivision {
  background: #fff;
  position: relative;
}
#FooterDivision a{
  color: inherit;
}
    /* GoPageTop */
    .GoPageTop{
      position: absolute;
      left: 50%;
      border-radius: 75% 75% 0 0 / 100% 100% 0 0;
      background: #fff;
      width: 10em;
      margin-left: -5em;
    }
    .GoPageTop .Label{
      text-align: center;
      display: block;
      color: #888;
      position: relative;
      font-weight: normal;
      font-size: 87.5%;
    }
    .GoPageTop .Label:before{
      font-size: 400%;
      color: #888;
      width: 100%;
      display: block;
      text-align: center;
      position: relative;
      top: 5px;
      -webkit-transition: all .3s;
      transition: all .3s;
    }
    .GoPageTop .Label:hover:before{
      top: -5px;
    }
            /* for PcView */
            body.PcView .GoPageTop{
              top: -3em;
            }
            /* for SpView */
            body.SpView .GoPageTop{
              font-size: 75%;
              bottom: 0px;
              padding-bottom: 1em;
              border-radius: 100% 100% 0 0 / 100% 100% 0 0;
            }
    /* - - Area - - */
    #FooterBannerArea{
      padding: 0.5em 0;
      background: #204c97;
    }
    #FooterMenuArea{
      padding: 5em 0 7em;
      background: #f0f0f0;
    }
    #SiteFooterArea{
      position: relative;
      padding: 4em 0 1.5em;
    }
            /* for SpView */
            body.SpView #SiteFooterArea{
              position: relative;
              padding: 5em 0;
            }
            
    /* - - FooterMenuBlock - - */
    .FooterBannerBlock{
    }
    .FooterBannerBlock ul{
      list-style: none;
    }
    .FooterBannerBlock ul li{
      padding: 5px;
    }
    .FooterBannerBlock ul li *{
      vertical-align: middle;
      line-height: 4rem;
    }
    .FooterBannerBlock ul li a{
      background: #fff;
      display: block;
      padding: 10px;
      border: none;
      text-align: left;
      -webkit-transition: all .2s;
              transition: all .2s;
    }
    .FooterBannerBlock ul li a:hover{
      background: #ace2ff;
    }
    .FooterBannerBlock ul li a .Main{
      padding-left: 4.25em;
    }
    .FooterBannerBlock ul li a .Sub{
      font-size: 50%;
      color: #777;
    }
    
        .FooterBannerBlock ul li a .Main:before {
          font-size: 4em;
          position: absolute;
          color: #6db3f0;
          left: 0px;
        }
    .FooterBannerBlock ul li a .Main.Mini:before {
      font-size: 3em;
      top: -12px;
      left: 5px;
    }
    /* - - FooterMenuBlock - - */
    .FooterMenuBlock{
    }
        .FooterMenuBlock .BlockFooter{
          margin-top:  2.5em;
          border-top:  1px solid #ddd;
          padding-top: 2.5em;
        }
        
        /* PageList */
        .FooterMenuBlock ul.PageList{
        }
            .FooterMenuBlock ul.PageList li.li-level-1 > .Heading .Label{
              color: #204c97;
              font-size: 125%;
            }
            .FooterMenuBlock ul.PageList li.li-level-2{
              font-size: 75%;
            }
        /* BannerList */
        .FooterMenuBlock ul.BannerList{
          list-style: none;
        }
    
    /* - - AuthorBlock - - */
    .AuthorBlock{
    }
    .AuthorBlock .BlockHeader{
      text-align: center;
    }
        /*    width, height をemで定義しておく（旧ブラウザ対策）   */
        .AuthorBlock .SiteLogo{
          margin-bottom: 1.5em;
        }
        .AuthorBlock .SiteLogo a{
          display: inline-block;
          height: 5.2em;
        }
        .AuthorBlock .SiteLogo a img{
          width: 5em;
          height: 5.2em;
        }
    
    /* - - SiteFooterBlock - - */
    .SiteFooterBlock{
      color: #888;
      text-align: center;
    }
        .SiteFooterBlock .BlockContents{
          
        }
        .SiteFooterBlock .BlockContents ul{
          list-style: none;
        }
        .SiteFooterBlock .BlockContents ul li{
          border-left: 1px solid;
          font-size: 75%;
          display: inline-block;
        }
        .SiteFooterBlock .BlockContents ul li:first-child{
          border: none;
        }
        .SiteFooterBlock .BlockContents ul li a{
          padding: 0 1em;
          display: inline-block;
          -webkit-transition: all .2s;
                  transition: all .2s;
        }
        .SiteFooterBlock .BlockContents ul li a:hover{
          color: #204c97!important;
        }
        .SiteFooterBlock .BlockFooter{
        }
        .SiteFooterBlock .BlockFooter .CopyrightText{
          font-family: "Arial";
          font-size: 62.5%;
          letter-spacing: 0.1;
          padding: 3.5em 0;
        }
        




    


/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  Area setting                                    */
/*  （トップ以外では使用無し 2016.08）              */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* 商品メニュー用
--------------------------------------------------- */
.ProductMenuArea{
  background: rgba(32,76,150,0.25);
  background-image: -webkit-repeating-linear-gradient(90deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px),
                    -webkit-repeating-linear-gradient( 0deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px);
  background-image:         repeating-linear-gradient(90deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px),
                            repeating-linear-gradient( 0deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px);
  background-size: 0.5em 0.5em;
  padding: 1.5em 0;
}

/* 商品情報表示エリア
--------------------------------------------------- */
.ProductArea{
  padding: 3em 0;
  display: none;
  background-image: -webkit-linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.5) 200px, rgba(255,255,255,0) 500px, rgba(255,255,255,0) 100%);
  background-image:         linear-gradient(150deg, rgba(255,255,255,.75), rgba(255,255,255,.5) 200px, rgba(255,255,255,0) 500px, rgba(255,255,255,0) 100%);
  background-attachment: fixed;
  
  
  padding: 1.5em 0;
}

/* ニュース表示エリア
--------------------------------------------------- */
.NewsArea{
  padding: 4em 0;
  background: rgba(240,240,240,0.75);
}


/* ホームページ充実プロジェクト
--------------------------------------------------- */
.TopMainMenuSection {
  /* background-color: #ffffff; */
  padding: 20px 0 30px 0;
/*  background: rgba(32,76,150,0.25);
  background-image: -webkit-repeating-linear-gradient(90deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px),
                  -webkit-repeating-linear-gradient( 0deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px);
  background-image: repeating-linear-gradient(90deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px),
                          repeating-linear-gradient( 0deg, rgba(50,100,180,.125), rgba(50,100,180,.125) 1px, rgba(50,100,180,0) 1px, rgba(50,100,180,0) 20px);
  background-size: 0.5em 0.5em;
*/
}
.TopMainMenuSection .TopButton {
  background-color: rgb(50, 107, 180)!important;
  /* background-color: #204c9780!important; */
  /* background-color: #acadcf!important; */
  border-radius: 50%;
  height: 300px!important;
  width: 300px;
}
.TopMainMenuSection .TopButton::before {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background-color: rgb(102, 132, 194);
  /* background-color: #204c9780; */
  /* background-color: #acadcf; */
}
.TopMainMenuSection .TopButton::after {
  position: absolute;
  top: calc(100% - 50px);
  left: calc(50% - 25px);
  width: 50px;
  height: 7%;
  content: '';
  background-image: url(../img/top/icon-triangle.png);
  background-size: contain;
}
.TopMainMenuSection .ImageItem .Image {
    width: 40%;
    margin: auto;
    margin-top: 60px!important;
}
.TopMainMenuSection .ColumnGroup5elements > .Column {
    width: auto!important;
}
.TopMainMenuSection .SknTplThumbnailList .ThumbnailList.Type2 .TextItem {
    padding: 0px!important;
    color: #ffffff;
}
.TopMainMenuSection .ProductBlock.List .SknTplThumbnailList .ThumbnailList.Type2 li.Heading .TextItem .Main {
    font-size: 155%;
    font-weight: normal;
    padding-bottom: 0.025em;
    letter-spacing: 0.05em;
    display: block;
    padding: 0px;
}
.TopMainMenuSection .ProductBlock.List .SknTplThumbnailList .ThumbnailList.Type2 li.Heading .TextItem .Sub {
    display: inline-block;
    font-size: 87.5%;
    letter-spacing: 0.125em;
    font-size: 112.5%;
    letter-spacing: 0.0625em;
    font-weight: normal;
}
.TopNewsSection .Heading.Type1 .Main {
    font-size: 150%;
    letter-spacing: 0.025em;
}

.yokonarabe3{
    display: flex;
    justify-content:space-between;
    padding:0;
    list-style:none;
}
.yokonarabe3 li{
    padding: 10px;
}

.EstarMenu{
    display: flex;
    justify-content:space-between;
    padding:0;
    list-style:none;
    width: 50%;
    transition: 0.7s;
    transform-origin:left top;
}
.EstarMenu li{
    padding: 0;
}

.EstarMenuTitle {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 20px;
  color: #fff;
  margin: 50px auto;;
  padding-left: 3px;
}
.EstarMenuTitle .Arrow {
  font-size: 40px;
  display: inline-block;
  line-height: 1em;           
  transform: scale(1.0, 0.5);
  margin-top: 140px;
}
.EstarMenuIcon {
  writing-mode: vertical-rl;
  background-repeat: no-repeat;
  background-image: url("../img/common/icon/new-ribbon.svg");
  position: absolute;
  width: 65px;
  height: 100px;
  margin: 3px;
}
.EstarMenuNewLabel {
  position: relative!important;
}
.EstarMenuNewLabel::after {
  content: url("../img/common/icon/recommend-icon.svg");
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: -10px;
  width: 40px;
  height: 40px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .EstarMenuNewLabel::after {
    content: url("../img/common/icon/recommend-icon.svg");
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: -10px;
    width: 40px;
    height: 40px;
  }
}

.EstarMenuA {
    //clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%);
    //background-color: rgb(76, 171, 225);
    //height: 420px;
    //width: 70%;
    //display: flex;
    //align-items: flex-start;
    //transition: 0.3s;
    margin: auto;
    border-left: 70px solid rgb(57, 93, 169);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
    position: relative;
}
.EstarMenuB {
    //clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
    //background-color: rgb(57, 93, 169);
    //height: 420px;
    //width: 70%;
    //display: flex;
    //align-items: flex-start;
    //transition: 0.3s;
    margin: auto;
    border-right: 70px solid rgb(76, 171, 225);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
    position: relative;
}
.EstarMenuA > .EstarMenuTitle {
  position: absolute;
  left: -55px;
}
.EstarMenuB > .EstarMenuTitle {
  position: absolute;
  left: 15px;
}

.EstarMenuA:hover, .EstarMenuB:hover {
  cursor: pointer;
}
//.EstarMenuA:hover,.EstarMenuB:hover {
//  transform: scale(1.2);
//}
.EstarSubMenu {
  position: absolute;
  white-space: nowrap;
  //left: calc(100% - 800px);
  height: 420px;
  width: 300px;
  background-color: #f0f0f0;
  color: #333;
  padding: 15px;
  //border-radius: 10px;
  display: none;
  transition: 0.5s;
  left: 74%;
  top: 30px;
}
.EstarSubMenu > li {
  border-left: solid 6px rgb(57, 93, 169);
  margin-bottom: 15px;
  line-height: 1.5;
  padding: 1.0em;
  list-style-type: none !important;
}
.EstarSubMenu > li a {
  text-decoration: none;
  border-bottom: 1px solid darkblue;
}
.EstarSubMenu > li a:hover {
  color: orange;
}
.EstarSubMenu > li > ul {
  margin-top: 10px;
}
.EstarSubMenu > li > ul > li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}
.ProductSubMenu {
  position: absolute;
  white-space: nowrap;
  height: 160px;
  width: 300px;
  background-color: #f0f0f0;
  color: #333;
  padding: 15px;
  display: none;
  transition: 0.5s;
  left: 32.3%;
  top: 20px;
  z-index: 2;
}
.ProductSubMenu > li {
  border-left: solid 6px rgb(57, 93, 169);
  margin-bottom: 15px;
  line-height: 1.5;
  padding: 1.0em;
  list-style-type: none !important;
}
.ProductSubMenu > li a {
  text-decoration: none;
  border-bottom: 1px solid darkblue;
}
.ProductSubMenu > li a:hover {
  color: orange;
}
.ProductSubMenu > li > ul {
  margin-top: 10px;
}
.ProductSubMenu > li > ul > li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}
.CloseSubMenu {
  line-height: 2em;
}
.CloseSubMenu:hover {
  cursor: pointer;
}
.fadeIn {
animation-name:fadeInAnime;
animation-duration:0.5s;
animation-delay: 0.1s;
animation-fill-mode:forwards;
opacity:0;
}
.fadeIn *{
  animation-delay: 0.2s;
  animation-duration:0.4s;
  animation-name:fadeInAnime;
  animation-fill-mode:forwards;
  opacity:inherit;
}
@keyframes fadeInAnime{
  from {
    opacity: 0;
    width: 0px;
  }
  to {
    opacity: 1;
    width: 300px;
  }
}
.RecommendText{
  position:relative;
}
.RecommendText::after{
  position: absolute;
  padding-left: 10px;
  content: url('../img/common/icon/recommend-icon.svg');
  display: inline-block;
  width: 40px;
  height: 40px;
  top: -5%;
}

#EstarMenu1 {
    border-left: 70px solid rgb(76, 171, 225);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}
#EstarMenu2 {
    border-right: 70px solid rgb(57, 93, 169);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}
#EstarMenu3 {
    border-left: 70px solid rgb(76, 171, 225);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}
#EstarMenu4 {
    border-right: 70px solid rgb(57, 93, 169);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}
#EstarMenu5 {
    border-left: 70px solid rgb(76, 171, 225);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}
#EstarMenu6 {
    border-right: 70px solid rgb(57, 93, 169);
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 420px;
    width: 0;
}

.TechnologySection {
  background-color: #ffffff;
}
.TechnologySection .TechnologyButton {
    background-color: #1554be!important;
    /* border: 3px solid rgb(116, 158, 228)!important; */
    height: 250px!important;
    /* width: 550px; */
    padding: 60px 0 0 0!important;
    margin: 0 10px;
}
.TechnologySection .TechnologyButton .ImageItem img {
    height: 60px;
    margin-bottom: 30px;
}
/* .TechnologySection .TechnologyButton::before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    content: '';
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 3px solid #ffffff;
    background-color: #1554be;
} */
/* .TechnologySection .TechnologyButton::after {
    position: absolute;
    top: calc(100% - 50px);
    left: calc(50% - 20px);
    width: 40px;
    height: 7%;
    content: '';
    background-image: url(../img/top/icon-triangle.png);
    background-size: contain;
} */
.TechnologySection .ImageItem .Image {
    width: 40%;
    margin: auto;
}
.TechnologySection .ColumnGroup5elements > .Column {
    width: auto!important;
}
.TechnologySection .SknTplThumbnailList .ThumbnailList.Type2 .TextItem {
    padding: 0px!important;
    color: #ffffff;
    font-size: 0.8em;
}
.TechnologySection .SknTplThumbnailList .ThumbnailList.Type2 .TextItem .Sub {
    font-weight: normal!important;
}
.TechnologySection .SknTplThumbnailList .ThumbnailList.Type2 .TextItem .Comment {
    padding: 0px!important;
    margin-top: 5px;
    color: rgb(50, 107, 180);
    font-size: 1.4em;
    width: 300px;
}

/* イスター商品一覧タブ用
--------------------------------------------------- */
.TabWrap {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/*タブのスタイル*/
.TabItem {
  width: calc(100%/3.0001); /*３分割の場合IEだとタブが2段になってしまうので、小数点以下で調整 */
  height: 200px;
  border: none;
  background-color: #eee;
  line-height: 200px;
  font-size: 24px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  line-height: 30px;
  padding-top: 70px;
  position: relative;
}
.TabItemText::after {
  position: absolute;
  top: 110px;
  left: 180px;
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  content: '';
  transition:all 0.3s ease;
}
.TabItem:hover {
  border-bottom: 5px solid #f90;
  z-index: 999;
  cursor: pointer;
  cursor: hand;
  background-color: rgb(216, 216, 216);
}
.TabItem:hover .TabItemText::after{
  /* transform:rotate(135deg); */
  top: 120px;
}

/*ラジオボタンを全て消す*/
input[name="TabItem"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.TabContent {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab0:checked ~ #tab0_content,
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.TabWrap input:checked + .TabItem {
  background-color: #fff;
  color: #4169E1;
}
.TabWrap input:checked + .TabItem .TabItemText::after {
  border-color:  transparent transparent #4169E1 #4169E1;
}
/* イスター施工事例タブ用
--------------------------------------------------- */
.ExsampleTabWrap {
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 50px auto;
  position: relative;
}

/*タブのスタイル*/
.ExsampleTabItem {
  width: calc(100%/5);
  height: 50px;
  border: none;
  background-color: #eee;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  line-height: 30px;
  padding-top: 10px;
  position: relative;
}
.ExsampleTabItem:hover {
  border-bottom: 5px solid #f90;
  z-index: 999;
  cursor: pointer;
  cursor: hand;
  background-color: rgb(216, 216, 216);
}


/*ラジオボタンを全て消す*/
input[name="ExsampleTabItem"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.ExsampleTabContent {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#exsample_tab0:checked ~ #exsample_tab0_content,
#exsample_tab1:checked ~ #exsample_tab1_content,
#exsample_tab2:checked ~ #exsample_tab2_content,
#exsample_tab3:checked ~ #exsample_tab3_content,
#exsample_tab4:checked ~ #exsample_tab4_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.ExsampleTabWrap input:checked + .ExsampleTabItem {
  background-color: #fff;
  color: #4169E1;
}
.ExsampleTabWrap input:checked + .ExsampleTabItem .ExsampleTabItemText::after {
  border-color:  transparent transparent #4169E1 #4169E1;
}



.circle_wrapper {
  background-color: #808080;
  border-radius: 50%;
  height: 180px;
  width: 180px;
  margin: -60px auto;
  text-align: center;
  padding-top: 75px;
  color: white;
}
.tabs input:checked + .tab_item > .circle_wrapper {
  background-color: #4169E1;
}

/**
 * 各種計算、カスタムデータ出力の各項目横に表示する説明画像用
 */
.ItemDescriptionImage {
  display: inline-block;
  text-align: center;
  margin-left: 1em;
}
.ItemDescriptionImageWrapper {
  float: right;
}

.is-error {
  color: red;
}

.AnswerArea {
  background: rgba(50,50,50,0.05);
  padding-top: 30px;
  text-align: center;
}