@charset 'UTF-8';

/* 全体
   ========================================================================== */

html {
  font-size: 62.5%;
}

body {
  color: #333;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

img {
  vertical-align: text-bottom;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  opacity: .5;
  transition: all .3s;
}

/* 改行 */
span.wbr {
  display: inline-block;
}



/* コンテナ
   ========================================================================== */

#contents {
  background: url("../img/bg.jpg") no-repeat center / 100% fixed;
  min-height: 100vh;
  position: fixed;
  width: 100%;
}



/* コンテンツ
   ========================================================================== */

#sp-2 {
  display: none;
}



#base {
  width: 100%;
  min-height: 100vh;
}


#top,
#p1,
#p2,
#p3,
#contact {
  width: 100%;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}


.top-logo {
}

.top-logo-img {
  width: 400px;
}

.top-001 {
  position: absolute;
  bottom: calc( 50% - 350px);
  left: 0;
  z-index: 1000;
  transform-style: preserve-3d;
  perspective:500px;
}

.top-001-img {
  height: auto;
  width: 400px;
  transform: skew(5deg) rotateX(-10deg) rotateY(30deg) rotateZ(-5deg);
}

.top-002 {
  position: absolute;
  top: calc( 50% - 350px);
  left: 0;
  z-index: 1000;
  perspective:500px;
  transform-style: preserve-3d;
}

.top-002-img {
  height: auto;
  width: 350px;
  transform: skew(-5deg) rotateX(-20deg) rotateY(-5deg) rotateZ(5deg);
}

.top-003 {
  position: absolute;
  top: calc( 50% - 350px);
  right: 0;
  z-index: 1000;
  perspective:500px;
  transform-style: preserve-3d;
}

.top-003-img {
  height: auto;
  width: 350px;
  transform: skew(15deg) rotateX(-10deg) rotateY(-20deg) rotateZ(-15deg);
}

.top-004 {
  position: absolute;
  bottom: calc( 50% - 350px);
  right: 0;
  z-index: 1000;
  perspective:500px;
  transform-style: preserve-3d;
}

.top-004-img {
  height: auto;
  width: 400px;
  transform: skew(-15deg) rotateY(-35deg);
}



.p1-001 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  top: 0;
  z-index: 2010;
}

.p1-001-img {
  height: auto;
  width: 450px;
  transform: rotateX(-30deg);
}

.p1-002 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  left: -17px;
  z-index: 2020;
}

.p1-002-img {
  height: 180px;
  width: auto;
  transform: rotateY(50deg);
}

.p1-003 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  right: -17px;
  z-index: 2030;
}

.p1-003-img {
  height: 180px;
  width: 380px;
  transform: rotateY(-50deg);
}


.p1-004 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  bottom: 0;
  z-index: 2040;
}

.p1-004-img {
  height: auto;
  width: 300px;
}

.p1-text-1 {
  position: absolute;
  top: 230px;
  z-index: 2015;
}

.p1-text-2 {
  position: absolute;
  bottom: calc( 50% - 150px);
  left: 110px;
  z-index: 2025;
}

.p1-text-3 {
  position: absolute;
  bottom: calc( 50% - 150px);
  right: 110px;
  z-index: 2035;
}

.p1-text {
  font-size: 2.6rem;
  font-weight: bold;
}



.p2-001 {
  position: absolute;
  z-index: 3040;
}

.p2-001-img {
  height: auto;
  width: 90vw;
}

.p2-002 {
  position: absolute;
  z-index: 3030;
}

.p2-002-img {
  height: 200px;
  width: auto;
}

.p2-003 {
  position: absolute;
  top: calc( 50% - 350px);
  z-index: 3020;
}

.p2-003-img {
  height: auto;
  width: auto;
}

.p2-004 {
  position: absolute;
  bottom: calc( 50% - 350px);
  z-index: 3010;
}

.p2-004-img {
  height: auto;
  width: 850px;
}


.p3-001 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  top: calc( 50% - 300px);
  left: 200px;
  z-index: 1010;
}

.p3-001-img {
  height: auto;
  width: 300px;
  transform: skew(5deg) rotateX(-10deg) rotateY(30deg) rotateZ(-5deg);
}


.p3-002 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  left: -30px;
  z-index: 1020;
}

.p3-002-img {
  height: auto;
  width: 250px;
  transform: rotateY(50deg);
}

.p3-003 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  bottom: calc( 50% - 300px);
  left: 200px;
  z-index: 1030;
}

.p3-003-img {
  height: auto;
  width: 250px;
  transform: skew(-15deg) rotateX(20deg) rotateY(30deg) rotateZ(-10deg);
}


.p3-004 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  top: calc( 50% - 370px);
  right: 50px;
  z-index: 1040;
}

.p3-004-img {
  height: auto;
  width: 300px;
  transform: skew(10deg) rotateY(-30deg) rotateZ(-5deg);
}

.p3-005 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  right: -70px;
  z-index: 1040;
}

.p3-005-img {
  height: auto;
  width: 350px;
  transform: rotateY(-35deg);
}

.p3-006 {
  transform-style: preserve-3d;
  perspective:500px;
  position: absolute;
  bottom: calc( 50% - 370px);
  right: 10px;
  z-index: 1040;
}

.p3-006-img {
  height: auto;
  width: 300px;
  transform: skew(-5deg) rotateY(-15deg) rotateZ(15deg);
}

.p3-007 {
  position: absolute;
  right: calc( 50% - 300px);
  z-index: 1040;
}

.p3-007-img {
  height: auto;
  width: 200px;
}

.p3-008 {
  position: absolute;
  left: calc( 50% - 320px);
  z-index: 3040;
}

.p3-008-img {
  width: 350px;
}













.scroll {
  visibility: hidden;
  z-index: -1;
}







#contents-ii {
  display: flex;
  flex-direction:row-reverse;
  justify-content:center;
  width: 1000px;
  margin: 30px auto 0;
}

.main-ii {
  width: 700px;
}

.side {
  width: 300px;
}

.side-title p {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2em;
}

.side-title-name {
  font-size: 2rem;
  font-weight: normal;
}











.about,
.overview,
.history {
  margin-bottom: 45px;
}

.awards {
  margin-bottom: 70px;
}


.about-title,
.overview-title,
.history-title,
.awards-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.about-text {
  line-height: 1.4em;
  padding-left: 2em;
}

.awards-text p {
  padding: 0 0 1em 2em;
}

.about-text ul {
  margin-top: 15px;
  list-style-type: disc;
  padding-left: 2em;
  padding-right: 2em;
}

.about-text li {
/*  font-size: 1.6rem; */
  line-height: 1.4em;
  margin-bottom: 0.5em;
}



.overview-text td,
.history-text td {
  padding: 5px 2em;
  line-height: 1.6em;
}



.other {
  margin-bottom: 100px;
}

.program-title {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5em;
  margin-bottom: 15px;
  margin-top: 2em;
  padding-left: 1em;
}

.program-text {
  line-height: 1.4em;
  padding-left: 2em;
}

.program-text img {
  margin-bottom: 0.5em;
  width: 450px;
}







.mail-form-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mail-form-box p {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}



.tb-cell {
  display: table;
  width: 400px;
  margin: 20px auto 40px auto;
  text-align: left;
}
.tb-cell .row {
  display: table-row;
}
.tb-cell .row .cell {
  background-color: #eee;
  display: table-cell;
  border: 5px solid #fff;
  padding: 10px;
  vertical-align: middle;
}
.cell-label {
  padding: 10px;
  width: 140px;
  text-align: right;
}
.mail-form .row .cell {
  padding: 5px;
}
input[type="text"],
input[type="email"] {
  height: 30px;
  font-size: 16px;
}
textarea {
  height: 100px;
  font-size: 16px;
}

.mail-form-button {
  text-align: right;
}

button {
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
}
button[type="button"] {
  margin-left: 10px;
}
button[type="submit"] {
  background: #ff5e5e;
  margin-top: 20px;
}
button[type="reset"] {
  background: #ccc;
  margin: 20px 60px 0 40px;
}
button[type="button"] {
  background: #ccc;
  margin: 20px 0 0 40px;
}
button[type="submit"]:hover {
  background: #ffbaba;
}
button[type="button"]:hover,
button[type="reset"]:hover {
  background: #eee;
}


.kakunin {
  margin-top: 40px;
}

.mail-form-message {
  margin: 20px 0 -20px 0;
  text-align: center;
  color: #455bff;
}

.mail-form-button-ii {
  text-align: center;
}

.msg-box {
  text-align: center;
  margin: 60px 0 0 -40px;
}

.msg {
  margin-left: 40px;
}






#scroll-mark {
  font-size: 2rem;
  padding: 0;
  display: flex;
  bottom: 50px;
  color: #67b8ff;
  position: fixed;
  width: 100%;
}

.scroll-mark-icn {
  animation: Flash1 2s infinite;
  text-align: center;
  width: 100%;
}


#footer,
#footer-ii {
  font-weight: bold;
  background: #67b8ff;
  border-top: 2px solid #0089ff;
  padding: 10px 0;
  display: flex;
  bottom: 0;
  color: #fff;
  position: fixed;
  width: 100%;
}

.footer-name {
  padding-left: 30px;
  width: 50%;
}

.footer-name a {
  color: #fff;
}

.footer-link {
  padding-right: 30px;
  text-align: right;
  width: 50%;
}

.footer-link a {
  color: #fff;
}



.section {
  max-height: 100vh;
}

.box1,
.box2,
.box3,
.box4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

  .box5 {
    display: block;
  width: 400px;
  max-width: 70%;
  padding-top: 15px;
  margin: 0 auto;
  }
  

.image-sp {
  max-width: 1200px;
}


.mail-form-title-sp {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
}



#scroll-mark-sp {
  font-size: 2rem;
  padding: 0;
  display: flex;
  bottom: 50px;
  color: #67b8ff;
  position: fixed;
  width: 100%;
}

.scroll-mark-icn-sp {
  animation: Flash1 2s infinite;
  text-align: center;
  width: 100%;
}


#footer-sp {
  font-size: 1.6rem;
  font-weight: bold;
  background: #67b8ff;
  border-top: 2px solid #0089ff;
  padding: 10px 0;
  display: flex;
  bottom: 0;
  color: #fff;
  position: fixed;
  width: 100%;
}

.footer-name-sp {
  color: #fff;
  padding-left: 30px;
  width: 50%;
}

.footer-link-sp {
  line-height: 1.5em;
  padding-right: 30px;
  text-align: right;
  width: 50%;
}

.footer-name-sp a {
  color: #fff;
}

.footer-link-sp a {
  color: #fff;
}



/* ######     767px 以下     ######
   ========================================================================== */

@media (max-width: 767px) {
  
  #pc-2 {
  display: none;
}

#sp-2 {
  display: block;
}


  
  
  
  
  
  #contents {
  background: none;
  min-height: auto;
  position: relative;
}

  
  
  .image-sp {
    max-width: 100%;
  }
  
  
  
  .box5 {
    display: block;
  width: 400px;
  max-width: 70%;
  padding-top: 15px;
  margin: 0;
  }
  
  
.tb-cell {
  display: table;
  max-width: 70%;
  margin: 20px auto 40px 10px;
  text-align: left;
}
.tb-cell .row {
  display: table-row;
}
.tb-cell .row .cell {
  background-color: #eee;
  display: table-cell;
  border: 5px solid #fff;
  padding: 10px;
  vertical-align: middle;
}
.cell-label {
  font-size: 1.2rem;
  padding: 10px 10px 10px 0;
  width: 110px;
  text-align: right;
}
.mail-form .row .cell {
  padding: 5px;
}

.cell {
  max-width: 230px;
}

input,
textarea {
  max-width: 230px;
}

input[type="text"],
input[type="email"] {
  height: 30px;
  font-size: 16px;
}
textarea {
  height: 80px;
  font-size: 16px;
}

.mail-form-button {
  text-align: right;
}

button {
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
}
button[type="button"] {
  margin-left: 10px;
}
button[type="submit"] {
  background: #ff5e5e;
  margin-top: 20px;
}
button[type="reset"] {
  background: #ccc;
  margin: 20px 30px 0 20px;
}
button[type="button"] {
  background: #ccc;
  margin: 20px 0 0 20px;
}
button[type="submit"]:hover {
  background: #ffbaba;
}
button[type="button"]:hover,
button[type="reset"]:hover {
  background: #eee;
}
  
  
  
  
#contents-ii {
  display: flex;
  flex-direction:column-reverse;
  justify-content:center;
  width: 100%;
  margin: 30px auto 0;
}

.main-ii {
  width: 100%;
  padding: 0 10px;
}

.side {
  width: 100%;
  margin-bottom: 30px;
}

.side-title p {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2em;
}

.side-title-name {
  font-size: 2rem;
  font-weight: normal;
}

  
.overview-text td,
.history-text td {
  padding: 5px 1em;
  line-height: 1.6em;
}

.history-yyyymm {
  white-space: nowrap;
}
  
  
  
.program-text img {
  margin-bottom: 0.5em;
  width: 300px;
}

  
  
  
  
  #scroll-mark-sp,
  #footer-sp {
    font-size: 1.4rem;
  }
  
}




/* アニメーション */
@keyframes Flash1{
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}