@charset "utf-8";
/* CSS Document */
.Grid4 #Branding {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 90px;
}
.Grid4 #Branding .Img2 {
  content: "";
  position: absolute;
  left: 10%;
  top: 90px;
  width: 100vw;
  height: 410px;
  /*background-attachment: fixed;*/
  background-image: url("../add_image/top/bg_branding.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  transition: transform .1s linear;
  z-index: -2;
}
.Grid4 #Branding .Text {
  width: calc(60% + 15px);
  margin-top: 50px;
}
.Grid4 #Branding .Text p {
  margin-top: 35px;
  color: #221814;
  font-size: 1.25em;
  line-height: 1.7;
}
.Grid4 #Branding .Img {
  position: relative;
  width: 40%;
  margin: 80px -30px 0 0;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.Grid4 #Branding .Img img {
  max-width: 100%;
  height: auto;
}
.Grid4 div[id^="TopSection"] {
  position: relative;
}
.Grid4 div[id^="TopSection"]:before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  width: 100vw;
  background-color: #f8f8f8;
  z-index: -1;
}
.Grid4 div[id^="TopSection"] h2.phTopStyle1 {
  position: relative;
  margin: 0 0 35px;
  padding: 0;
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 4.125em;
  font-weight: normal;
  line-height: 1.2;
  border: none;
  background: none;
}
.Grid4 div[id^="TopSection"] img {
  max-width: 100%;
  height: auto;
}
.Grid4 #TopSection1 {
  min-height: 460px;
  margin-bottom: 170px;
}
.Grid4 #TopSection1:before {
  left: 0;
  top: 120px;
  width: 75%;
  height: 340px;
}
.Grid4 #TopSection1 .Text {
  position: relative;
  width: calc(50% + 120px);
  margin-left: calc(50% - 120px);
  padding: 80px 10px 0 80px;
  box-sizing: border-box;
}
.Grid4 #TopSection1 h2.phTopStyle1 {
  margin-bottom: 20px;
}
.Grid4 #TopSection1 .ButtonStyle1 {
  margin-top: 40px;
}
.Grid4 #TopSection1 .Img {
  position: absolute;
  top: 0;
  right: 62.5%;
  width: 601px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  transition-delay: -.5s;
}
.Grid4 #TopSection1 .Img img {
  width: 100%;
  height: auto;
}
.Grid4 #TopSection2 {
  padding: 50px 0;
  margin-bottom: 145px;
}
.Grid4 #TopSection2:before {
  left: -50px;
  top: 90px;
  width: calc(56% + 50px);
  height: calc(100% - 90px);
}
.Grid4 #TopSection2 h2.phTopStyle1 {margin-bottom: 20px;}
.Grid4 #TopSection2 .Img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 625px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  transition-delay: -.5s;
}
.Grid4 #TopSection2 .Text {
  position: relative;
  width: 50%;
  padding: 0 50px 0 0;
  box-sizing: border-box;
}
.Grid4 #TopSection2 .Title {
  margin-bottom: 5px;
  font-size: 1.25rem;
  font-weight: bold;
}
.Grid4 #TopSection2 .ButtonStyle1 {
  margin-top: 35px;
}
.Grid4 #TopSection2 .ButtonStyle1 a {
  min-width: 242px;
}
.Grid4 #TopSection3 {margin-bottom: 50px;}
.Grid4 #TopSection3:before {
  top: 45px;
  right: 12%;
  height: calc(100% - 135px);
}
.Grid4 #TopSection3 h2.phTopStyle1 {
  padding-right: 12%;
  text-align: right;
}
.Grid4 #TopSectionNews,
.Grid4 #TopSectionSeminar { /* change 202110 */
  padding: 60px 0 100px;
}
.Grid4 #TopSectionNews + #TopSectionSeminar { /* add 202110 */
  margin-top: -80px;
}
.Grid4 #TopSectionNews h2.phTopStyle1,
.Grid4 #TopSectionSeminar h2.phTopStyle1 { /* change 202110 */
  margin-bottom: 10px;
  font-size: 2.125rem;
}
.Grid4 #TopSectionNews .LinkIcon,
.Grid4 #TopSectionSeminar .LinkIcon { /* change 202110 */
  position: absolute;
  right: 0;
  top: 70px;
  margin-bottom: 15px;
}
 /* add 202110 */
.Grid4 #TopSectionSeminar ul.phSeminarIndex {
  margin-top: 0;
}
.Grid4 #TopSectionSeminar ul.phSeminarIndex:before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 82px;
  height: 1px;
  background-color: #186093;
}
.Grid4 #TopSectionSeminar ul.phSeminarIndex li {
  padding: 10px 0;
}
.Grid4 #TopSectionSeminar ul.phSeminarIndex li .Title {
  font-size: 1rem;
}
.Grid4 #TopSectionSeminar ul.phSeminarIndex li .Text {
  margin-bottom: 5px;
}
.Grid4 #TopSectionSeminar ul.phSeminarIndex li .Date {
  width: 150px;
  font-weight: normal;
}
.Grid4 #TopSectionColumn h2.phTopStyle1 {
  margin-bottom: 25px;
}
.Grid4 #TopSectionColumn ul.phColumnIndex {
  margin: 0 0 40px 0;
}
.Grid4 #Branding .ornament.one {
  left: -130px;
  top: 180px;
  width: 205px;
}
.Grid4 #Branding .ornament.two {
  left: -100px;
  top: 235px;
  width: 268px;
  transition-delay:1s;
}
.Grid4 #TopSection1 .ornament {
  right: -78px;
  top: 250px;
  width: 156px;
}
.Grid4 #TopSection2 .ornament {
  left: -280px;
  top: -200px;
  width: 321px;
}
.Grid4 #TopSection3 .ornament.one {
  right: -300px;
  top: auto;
  bottom: -600px;
  width: 345px;
}
.Grid4 #TopSection3 .ornament.two {
  left: 420px;
  top: -400px;
  width: 326px;
  transition-delay:1s;
}
@media screen and (max-width: 994px) {
}
@media screen and (max-width: 767px) {
  .JS .Grid4 #Branding {
    display: block;
    padding: 40px 0 0 0;
  }
  .JS .Grid4 #Branding .Img2 {
    left: 8.7%;
    top: 96px;
    width: calc(91.3% + 15px);
    height: 51.1vw;
    background-image: url("../add_image/top/bg_branding_sp.jpg");
    background-position: left top;
    background-size: 100% auto;
    transform: translateY(0);
  }
  .JS .Grid4 #Branding .Text {
    width: auto;
    margin-top: 0;
  }
  .JS .Grid4 #Branding .Text p {
    position: relative;
    width: auto;
    margin-top: 15px;
    font-size: 0.875rem;
  }
  .JS .Grid4 #Branding .Text p.ButtonStyle1 {
    margin-top: 30px;
  }
  .JS .Grid4 #Branding .Text p.ButtonStyle1 a {
    max-width: 432px;
    width: 57.6vw;
  }
  .JS .Grid4 #Branding h1 {width: 75%;}
  .JS .Grid4 #Branding .Img {
    position: relative;
    width: calc(45% + 15px);
    margin: -70px -15px 0 auto;
    z-index: -1;
  }
  .JS .Grid4 div[id^="TopSection"] .ButtonStyle1 a {
    display: inline-block;
    max-width: 486px;
    width: 64.8vw;
    padding: 16px 22px 16px 20px;
  }
  .JS .Grid4 div[id^="TopSection"] h2.phTopStyle1 {
    margin: 0 0 30px;
    font-size: 2.8125em;
  }
  .JS .Grid4 #TopSection1 {
    min-height: 0;
    margin-bottom: 80px;
    padding-bottom: 45px;
  }
  .JS .Grid4 #TopSection1:before {
    left: -15px;
    top: 0;
    width: calc(75% + 15px);
    height: 100%;
  }
  .JS .Grid4 #TopSection1 .Text {
    width: auto;
    margin-left: 0;
    padding: 30px 15px 0;
  }
  .JS .Grid4 #TopSection1 h2.phTopStyle1 {
    margin-bottom: 15px;
  }
  .JS .Grid4 #TopSection1 .ButtonStyle1 {
    margin-top: 35px;
  }
  .JS .Grid4 #TopSection1 .Img {
    position: relative;
    right: auto;
    width: auto;
    margin-left: -15px;
  }
  .JS .Grid4 #TopSection1 {
    min-height: 0;
    margin-bottom: 145px;
    padding-bottom: 45px;
  }
  .JS .Grid4 #TopSection1:before {
    right: -15px;
    top: 0;
    width: calc(75% + 15px);
    height: 100%;
  }
  .JS .Grid4 #TopSection2 {
    min-height: 0;
    margin-bottom: 80px;
    padding: 0 0 45px;
  }
  .JS .Grid4 #TopSection2:before {
    content: none;
  }
  .JS .Grid4 #TopSection2 .Text {
    width: 91.3%;
    margin: 30px 0 0 auto;
    padding: 0 15px 45px 30px;
  }
  .JS .Grid4 #TopSection2 .Text:before {
    content: "";
    position: absolute;
    display: block;
    right: -15px;
    top: 25px;
    width: calc(100% + 15px);
    height: calc(100% - 25px);
    background-color: #f8f8f8;
    z-index: -1;
  }
  .JS .Grid4 #TopSection2 h2.phTopStyle1 {
    margin-bottom: 20px;
  }
  .JS .Grid4 #TopSection2 .Img {
    position: relative;
    left: auto;
    width: auto;
    margin-right: -15px;
  }
  .JS .Grid4 #TopSection2 .ButtonStyle1 {
    margin-top: 35px;
  }
  .JS .Grid4 #TopSection2 .ButtonStyle1 {
    margin-top: 25px;
  }
  .JS .Grid4 #TopSection2 .ButtonStyle1 a {
    min-width: 0;
  }
  .JS .Grid4 #TopSection3 {
    padding-bottom: 40px;
    margin-bottom: 80px;
  }
  .JS .Grid4 #TopSection3:before {
    top: 30px;
    right: 0;
    width: calc(100% + 15px);
    height: calc(100% - 160px);
  }
  .JS .Grid4 #TopSection3 h2.phTopStyle1 {
    padding-right: 0;
  }
  .JS .Grid4 #TopSection3 .ButtonStyle1 {
    margin-top: 25px;
  }
  .JS .Grid4 #TopSectionNews,
  .JS .Grid4 #TopSectionSeminar { /* change 202110 */
    margin-bottom: 80px;
    padding: 40px 0 0;
  }
  .JS .Grid4 #TopSectionNews h2.phTopStyle1,
  .JS .Grid4 #TopSectionSeminar h2.phTopStyle1 { /* change 202110 */
    font-size: 1.75rem;
  }
  .JS .Grid4 #TopSectionNews .LinkIcon,
  .JS .Grid4 #TopSectionSeminar .LinkIcon { /* change 202110 */
    top: 50px;
  }
  .JS .Grid4 #TopSectionColumn h2.phTopStyle1 {
    margin-bottom: 15px;
  }
  .JS .Grid4 #TopSectionColumn ul.phColumnIndex {
    margin-bottom: 35px;
  }
  .JS .Grid4 #TopSectionColumn .ButtonStyle1 {
    text-align: center;
  }
  .JS .Grid4 #Branding .ornament.one {display: none;}
  .JS .Grid4 #Branding .ornament.two {
    left: -100px;
    top: auto;
    bottom: 0;
    width: 52.9vw;
  }
  .JS .Grid4 #TopSection1 .ornament {
    right: -10.8vw;
    top: auto;
    bottom: 80px;
    width: 37.6vw;
  }
  .JS .Grid4 #TopSection2 .ornament {
    left: -36vw;
    top: -240px;
    width: 73vw;
  }
  .JS .Grid4 #TopSection3 .ornament.one {
    right: 3vw;
    bottom: auto;
    top: 0;
    width: 46vw;
    z-index: -1;
  }
  .JS .Grid4 #TopSection3 .ornament.two {
    left: -10.8vw;
    top: auto;
    bottom: -80px;
    width: 57.2vw;
  }
}