@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● トップページ専用CSS                                  */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#HeaderDivision{
  margin-bottom: 80px;
}
    /* SiteHeaderArea */
    .SiteHeaderArea{
    }
        .SiteHeaderArea .CatchBlock{
          background: url(../img/decoration/bg_site-header.png) repeat-x top center;
          margin-bottom: 10px;
        }
            .SiteHeaderArea .CatchBlock p{
              text-align: center;
              font-size: 95%;
              font-weight: bold;
              padding: 2em;
            }

    /* HeaderMenuArea */
    .HeaderMenuArea{
      position: relative;
    }
        /* SiteTitleBlock */
        .SiteTitleBlock{
          width: 750px;
          background-color: #fff;
          padding: 75px 0 0;
          height: 400px;
          position: relative;
          z-index: 10;
          opacity: 0;
          transition: 2s ease 0s;
        }
            .SiteTitleBlock h1{
              width: 28em;
              margin: 0 auto;
            }
                .SiteTitleBlock h1 span{
                  display: block;
                }
                .SiteTitleBlock h1 span.fontEnGothic{
                  font-size: 310%;
                  letter-spacing: 0.33em;
                  margin-right  : -0.33em;
                }
                .SiteTitleBlock h1 span.fontEnCursive{
                  font-size: 350%;
                  letter-spacing: 0.27em;
                  margin        : 0.2em -0.27em 0.4em 0;
                }
                .SiteTitleBlock h1 span.fontSansSerif{
                  padding: 0.75em 0;
                  font-size: 150%;
                  letter-spacing: 0.25em;
                  margin-top: 50px;
                }
            /* MainMenuBlock */
            .MainMenuBlock{
              background: url(../img/decoration/bg_menu_grd.gif) no-repeat center top;
              margin-top: 10px;
            }
            .MainMenuBlock .inner{
              background: url(../img/decoration/bg_menu.gif) no-repeat center top;
              border-width: 10px 0;
              border-style: double;
              border-color: #ffe400;
            }
                .MainMenuBlock ul{
                  width: 100%;
                }
                    .MainMenuBlock ul li{
                      width: 33.3%;
                      background: url(../img/decoration/menu_slash.gif) no-repeat 3px -6px;
                      padding-left: 20px;
                      transition: 0.3s ease 0s;
                    }
                    .MainMenuBlock ul li:hover{
                      background-position: 0px -1px;
                    }
                        .MainMenuBlock ul li h2{
                        }
                             .MainMenuBlock ul li a{
                               padding-left: 20px;
                             }
                                 .MainMenuBlock ul li a span{
                                 }
                                 .MainMenuBlock ul li a span.fontEnGothic{
                                   font-size: 165%;
                                 }
            /* MainImageRollslider */
            #MainImageRollslider{
              position: absolute;
              z-index: 5;
              top: 0;
            }

    
    
    
/* --------------------------------------------------- */
/* InformationArea                                     */
/* --------------------------------------------------- */
.InformationArea{
  height: 19em;
}
    .InformationArea .Block{
      position: relative;
    }
        .InformationArea .Block > div {
          position: absolute;
        }
        .InformationArea .Block .BlockLeft{
          background: #daedf3 url(../img/decoration/bg_information-title.png) no-repeat right top;
          background-size: cover;
          width: 80%;
          left: 0;
          top : 0;
          z-index: 10;
          padding: 3em;
        }
            .InformationArea .Block .BlockLeft .Heading{
              color: #fff;
              margin: 0em;
              font-size: 130%;
              font-weight: 900;
              position: relative;
              margin: 0 62% 0 auto;
              display: block;
              width: 7em;
              text-shadow: 0 0 5px rgb(3,145,180);
            }
            .InformationArea .Block .BlockLeft .Heading:before{
              font-family: fontello;
              content: '\f0f3';
              position: absolute;
              left: -1.75em;
              top : 0.75em;
            }
        .InformationArea .Block .BlockRight{
          background-color: rgba(3,145,180,0.8);
          width: 65%;
          right: 0;
          top : 2em;
          z-index: 20;
          padding: 2em;
        }
            .InformationArea .Block .BlockRight ul{
              list-style: none;
            }
                .InformationArea .Block .BlockRight ul li{
                  padding: 5px 0;
                  transition: 0.3s ease 0s;
                  color: #fff;
                }
                .InformationArea .Block .BlockRight ul li:not(.NoData):hover{
                  padding-left: 5px;
                }
                     .InformationArea .Block .BlockRight ul li a{
                       display: block;
                       padding: 0.5em 0.5em 0.5em 1.75em;
                       position: relative;
                     }
                     .InformationArea .Block .BlockRight ul li a:before{
                       font-family: fontello;
                       content: '\f138';
                       position: absolute;
                       left: 0em;
                       top: 0.75em;
                     }
                         .InformationArea .Block .BlockRight ul li a span{
                           display: inline-block;
                           vertical-align: middle;
                         }
                         .InformationArea .Block .BlockRight ul li a span.Category{
                           color: #444;
                           font-size: 80%;
                           padding: 0.15em 0.75em;
                           margin-right: 1em;
                         }
                         .InformationArea .Block .BlockRight ul li a span.Category.CategoryNo1{
                           background: #a6ece4;
                         }
                         .InformationArea .Block .BlockRight ul li a span.Category.CategoryNo2{
                           background: #ece844;
                         }
                         .InformationArea .Block .BlockRight ul li a span.Category.CategoryNo3{
                           background: #f9c4cf;
                         }
                         .InformationArea .Block .BlockRight ul li a span.Title{
                           width: 600px;
                           white-space: nowrap;
                           overflow: hidden;
                           text-overflow: ellipsis;
                         }
                .InformationArea .Block .BlockRight .DefaultButton{
                  position: absolute;
                  right: 0;
                  bottom : 0;
                }
                    .InformationArea .Block .BlockRight .DefaultButton a{
                      letter-spacing: 0.25em;
                    }
            .InformationArea .Block .BlockRight .SnsBlock{
              position: absolute;
              right: 5px;
              bottom : 110%;
            }



/* --------------------------------------------------- */
/* OutPositionArea                                     */
/* --------------------------------------------------- */
.OutPositionArea{
  /*background: url(../img/common/decoration/bg_info_sidephoto.png) no-repeat center top;*/
  position: relative;
}
    .OutPositionArea .PageWidthSetter{
      width: 750px;
      position: relative;
      z-index: 10;
      background: #7de0ed;
      min-height: 400px;
    }
        .OutPositionArea .PageWidthSetter > div{
          width: 42%;
          position: relative;
        }
        .OutPositionArea .PageWidthSetter .Block01{
          float: left;
          margin-left: 6%;
          margin-top: 15px;
        }
        .OutPositionArea .PageWidthSetter .Block02{
          float: right;
          margin-right: 4%;
          margin-top: 50px;
        }
        .OutPositionArea .PageWidthSetter > div:before{
          font-family: "arial" , "Arial", sans-serif;
          display: block;
          position: absolute;
          z-index: 100;
          color: rgba(0, 94, 146, 0.6);
          font-size: 500%;
          top : -0.75em;
          left: 10px;
          font-weight: bold;
          letter-spacing: -0.05em;
        }
        .OutPositionArea .PageWidthSetter > div.Block01:before{
          content: "01";
        }
        .OutPositionArea .PageWidthSetter > div.Block02:before{
          content: "02";
        }
            .OutPositionArea a{
              display: block; 
              background-color: #fff;
              background-repeat: no-repeat;
              background-position: center bottom;
              background-size: contain;
              position: relative;
              padding: 1.75em 0 11em;
            }
            .OutPositionArea .Block01 a{
              background-image: url(../img/decoration/certificate.png);
            }
            .OutPositionArea .Block02 a{
              background-image: url(../img/decoration/ambassador-face.png);
            }
            .OutPositionArea a:before{
              position: absolute;
              z-index: 50;
              left: -16px;
              top: -16px;
              content: "";
              width : 100%;
              height: 100%;
              border: 7px solid rgba(0,193,219,0.75);
              box-sizing: border-box;
            }
            .OutPositionArea a:hover:before{
              left: 0;
              top: 0;
            }
                .OutPositionArea a .Heading{
                  color: rgb(3,145,180);
                  font-weight: bold;
                  font-family: "Verdana", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", "游ゴシック体", "Arial", "Century Gothic", sans-serif;
                  font-size: 150%;
                  line-height: 1.25;
                  letter-spacing: -0.05em;
                  margin-top: 0;
                  margin-left: -17px;
                  margin-bottom: 5px;
                  transition: 0.3s ease 0s;
                }
                .OutPositionArea a:hover .Heading{
                  margin-top: 5px;
                  margin-left: 0px;
                  margin-bottom: 0;
                }
                    .OutPositionArea a .Heading span{
                      display: block;
                      text-align: center;
                    }
                    .OutPositionArea .Block01 a .Heading span:nth-child(1){
                      font-size: 110%;
                    }
                    .OutPositionArea .Block02 a .Heading span:nth-child(2){
                      font-size: 110%;
                    }
    .OutPositionArea #SecondImageRollslider{
      position: absolute;
      z-index: 5;
      top: 0;
    }
    
    /* FooterMenuArea */
    .FooterMenuArea{
      margin-bottom: 20px;
    }