body {
  scroll-behavior: smooth;
  overflow-y: scroll;
  text-align: justify;
}

a {
  font-weight: bold;
  color: #e73962;
  text-decoration: underline;
}
a:hover,
a:active {
  text-decoration: none;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

nav ul a,
nav .brand-logo {
  color: #444;
}

nav ul a {
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
}
nav ul a::before {
  content:"";
  display: inline-block;
  width: 35px;
  height: 20px;
  background-image: url(../img/ico_forward.png);
  background-size: contain;
  background-repeat:no-repeat;
  vertical-align: middle;
}

p {
  line-height: 2rem;
}

h3 {
    font-size: 1.0em;
    line-height: 160%;
}

h5 {
    font-size: 1.1em;
    font-weight: bold;
}

img {
  max-width: 100%;
}

.button-collapse {
  color: #26a69a;
}

.parallax-container {
  min-height: 380px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}

.parallax-container .section {
  width: 100%;
}

.clearfix::after{
   content: "";
   clear: both;
   display: block;
}

@media only screen and (max-width : 992px) {
  .parallax-container .section {
    position: absolute;
    top: 40%;
  }
  #index-banner .section {
    top: 10%;
  }
}

@media only screen and (max-width : 600px) {
  #index-banner .section {
    top: 0;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 86%;
  }
}

@media only screen and (min-width : 600px) {
  .container {
    width: 86%;
  }
}

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
  font-size: inherit;
}


/* animation */
.displayed{
   animation: fadeUp 1s forwards;
}
@keyframes fadeUp{
    0%{opacity:0; transform: translateY(0);}
  100%{opacity:1; transform: translateY(-100px);}
}

/* Custom color */
.pink-text.text-lighten-1 {
  color: #e73962!important;
}
.pink.lighten-1 {
  background-color: #e73962!important;
}

/* Custom */
.parts-pc {
  display: block;
}
.parts-sp {
  display: none;
}
.bold-text {
  font-weight: bold;
}
.wrapper {
  position: absolute;
  top: 0;
  left:0;
  right: 0;
  background: white;
  width: 400px;
  max-width: 100%;
	margin: 0 auto;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  z-index: 1003;
}
.wrapper::-webkit-scrollbar {
  display: none;
}
.wrapper .row,
.wrapper .col {
  margin: 0;
  padding: 0;
}

.wrapper .container {
  width: 100%;
  height: auto;
}
.wrapper h2.col,
.wrapper h3.col,
.wrapper h4.col,
.wrapper h5.col,
.wrapper p.col {
  padding-left: 20px;
  padding-right: 20px;
}
.wrapper .pad.container {
  width: 86%;
  clear: both;
}
.wrapper .pad.container .col {
  margin: 0;
  padding: .4rem;
}

.fixarea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg.jpg);
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: auto calc(100vh / 3);
}
#index-banner{
  position: relative;
  width: 450px;
  height: calc(calc(2 / 3) * 100vh);
}
.fixarea-cont {
  width: 450px;
  height: calc(calc(2 / 3) * 100vh);
}
.fixarea-cont-br{
  width: 400px;
}
nav {
  box-shadow: none;
  background-color: transparent;
}
nav .brand-logo {
  display: none;
}

nav .brand-logo {
  position: relative;
  top: 90px;
  left: 0;
}
nav ul#nav-pc {
  width: 240px;
  position:relative;
  top: 40px;
  right: -30px;
  padding: 1em 0.2em;
  display: block;
  border: 2px solid #e73962;
  line-height: 2.0;
  z-index: 3;
  box-shadow: 4px 4px #8f8a88;
}

nav ul#nav-pc li {
  float: none;
  margin-bottom: 0;
}
nav ul li a:hover {
  background-color: transparent;
  color: #e73962;
}

nav ul li:hover a::before {
  background-position-x: 5px;
  transition : all 0.3s ease;
}

.large-text {
  font-size: 1.2em;
}
.medium-text {
  font-size: 1.1em;
}

.index-intro {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.index-intro .container {
  width: 100%;
}

#parts-lead-area {
  position: relative;
  top: 15em;
  left: 2em;
}
#parts-lead-area .container {
  width: 100%;
}
#parts-lead-area h3 {
  font-weight: bold;
  font-size: 1.05em;
  line-height: 1.8;
}

#parts-lead-cal {
  width: 410px;
  position: fixed;
  bottom: 0;
}
#parts-lead-cal h3 {
  font-weight: bold;
  font-size: 1.0em;
  padding-left: 1.6em;
  margin-bottom: 0;
  line-height: 1.4;
}
#parts-lead-cal h3::before {
  position: relative;
  top: 2px;
  display: inline-block;
  content: "";
  background-image: url(../img/ico_forward_cal.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.4em;
  height: 1.0em;
  margin-left: -1.7em;
  margin-right: 0.2em;
}
#parts-lead-cal dt {
  display: inline-block;
  padding: 0.1em 0.4em;
  margin-bottom: 0.4em;
  margin-right: 0.2em;
}
#parts-lead-cal dt span {
  font-size: 0.8em;
}
#parts-lead-cal dt.letter2 {
  letter-spacing: 1em;
  padding-left: 1.3em;
}
#parts-lead-cal dt.letter3 {
  padding-left: 1.3em;
  padding-right: 1.3em;
}
#parts-lead-btn {
  position: fixed;
  bottom: 0;
  right: 5em;
  vertical-align: middle;
}
#parts-lead-btn img {
  width: 100px;
}

#parts-lead-btn ul {
  display: flex;
}
#parts-lead-btn ul li {
  list-style-type: none;
  margin: 0 10px;
  border: 2px solid #e73962;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 8px 8px 0px -5px #8f8a88;
  transition: all 0.3s;
}
#parts-lead-btn ul li:hover,
#parts-lead-btn ul li:active {
  background-color: #f7afc0;
}
.parts-pc #parts-lead-btn ul li:hover,
.parts-pc #parts-lead-btn ul li:active {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px -5px #8f8a88;
}
#parts-lead-btn ul li a {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  color: #e73962!important;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 1.2;
  transition: all 0.3s;
}
#parts-lead-btn ul li a:hover,
#parts-lead-btn ul li a:active {
  background-color: #e73962!important;
  color: white!important;
}
.parts-pc #parts-lead-btn ul li a:hover,
.parts-pc #parts-lead-btn ul li a:active {
  background-color: white!important;
}

#index-banner h1 {
  position: absolute;
  top: calc(100% / 6);
  left: 0;
  right: 0;
}
#index-banner h2 {
  position: absolute;
  top: calc(100% / 2);
  left: 0;
}
#index-banner h2 img {
  width: 90%;
}

#index-banner h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 0.4em;
}
#index-banner h3 img {
  width: 170px;
}
.pulse::before {
  -webkit-transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
  transition: opacity .3s, transform .3s, -webkit-transform .3s;
  -webkit-animation: pulse-animation 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  animation: pulse-animation 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.modal {
  width: 380px;
  max-height: 80vh;
}
.modal .modal-content {
  padding: 24px;
}
.modal .modal-footer {
  width: 100%;
  position: sticky;
  top: 0;
  right: 0;
}
.modal .modal-footer img {
  width: 2em;
  margin: 10px;
}
.modal-overlay {
    background: transparent;
}

#page_top {
    position: fixed;
    left: calc(50vw + 120px);
    bottom: 3em;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: rgba(255, 51, 102, 0.5) no-repeat;
    z-index: 9999;
}

#page_top a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    color: #fff;
    text-align: center;
}

.contact-text {
  margin-top: 0;
  line-height: 1.6;
}

p.jihee-text{
 font-size: 10px;
 line-height: 1.6;
 margin: 0;
}
.page-footer a {
  color: #fff;
  text-decoration: none;
  font-weight: normal;
}
.page-footer img {
  width: 100px;
}
.page-footer .pad.container .col.valign-wrapper {
  margin-bottom: 20px;
}
.page-footer .footer-copyright,
.page-footer .footer-copyright p {
  font-size: 10px;
  margin: 0;
  padding: 0;
  min-height: 30px;
  width: 100%;
}
/*sec00*/
#sec00 .row {
  margin-top: 1em;
  margin-bottom: -1.45em;
}
/*sec01*/
#sec01 h2 {
  width: 100%;
  margin: 20px auto 0;
}
#sec01 .sec01-1 {
  position: relative;
  height: 0;
  padding-top: 320px;
}
#sec01 .sec01-1 img{
  position: absolute;
  top: 0;
  left: 0;
  width:300px;
  height: auto;
}
#sec01 .sec01-1 .left-align {
  position: absolute;
  top: 140px;
  right: 10px;
  width:320px;
  height: auto;
  background-color: rgba(255, 255, 205, 0.7);
  padding: 1em;
}
#sec01 .sec01-2 {
  position: relative;
  height: 545px;
}
#sec01 .sec01-2 h4 {
  position: absolute;
  top: 0;
  z-index: 2;
}
#sec01 .sec01-2 .left-align {
  background: #f0f0f0;
  padding: calc(100% - 53%) 1em 95px 1em;
  width: 90%;
  position: absolute;
  top: 55px;
}
#sec01 .sec01-2 .photo {
  position: absolute;
  bottom: 20px;
  left: 15px;
}
#sec01 .sec01-2 .photo img {
  width: 117px;
  margin-right: 6px;
}
#sec01 .sec01-3 {
  height: 480px;
  margin-bottom: 40px;
}
#sec01 .sec01-3 .left-align {
  padding: calc(100% - 55.5%) 1em 95px 1em;
}
#sec01 .sec01-3 .photo {
  bottom: -5px;
}
/*sec02*/
#sec02 {
  position: relative;
}
#sec02 .cont {
  background: #ffffcd;
  width: 90%;
}
#sec02 .cont h3 {
  font-size: 1.4em;
  font-weight: bold;
  padding-left: 20px;
}
#sec02 .cont h3 {
  width: 95%;
  background: url(../img/tit03_1.png) bottom center repeat-x;
  background-size: 95%;
}
#sec02 .cont p {
  margin: 8px;
  padding: 0 15px;
}
#sec02 .cont p.name {
  line-height: 1.4;
  margin-bottom: 0;
}
#sec02 .cont p.name span {
  font-size: 0.75em;
}
#sec02 .cont a.btn {
  margin: 0 0 15px 0;
  padding-bottom: 15px;
}
#sec02 .cont .btn {
  box-shadow: none;
  padding: 0.2em 0.8em 0.2em 0.5em;
  line-height: unset;
  background-color: #e73962;
  transition: .5s;
}
#sec02 .cont .btn:hover,
#sec02 .cont .btn:active {
  background-color: #f7afc0;
}

.material-icons {
  display: inline-flex;
  vertical-align: middle;
}
#sec02 .cont .pimg {
  position: absolute;
  bottom: 25px;
  right: -60px;
  width: 240px;
}
#sec02 .cont .capimg {
  position: absolute;
  bottom: 10px;
  right: -60px;
  width: 240px;
  font-size: 0.7em;
}
/*sec03*/
#sec03 h3 img{
  height: 5em;
}
#sec03 li {
  position: relative;
  margin-bottom: 14px;
}
#sec03 li a img{
 transition:.3s all;
}
#sec03 li a img:hover,
#sec03 li a img:active {
  transform:scale(1.03,1.03);
  transition:.31s all;
}
#sec03 li a p {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  padding-top: 0.4em;
  font-size: 1.2em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 2px 2px #000;
}
#sec03 li a p span {
  font-size: 0.8em;
}
#sec03 li a p.right-align {
  left: unset;
  right: 20px;
}
#sec03 li a p.line-1 {
  padding-top: 0.8em;
}
#sec03 li a p.line-3 {
  padding-top: 0;
  margin-top: 0.6em;
}
#sec03 li a img.right-align {
  margin-right: -60px;
}
#sec03 h4 {
  display: block;
  background-image: url(../img/tit04_6.png) ;
  background-size: cover;
  width: 100%;
  height: 215px;
  font-size: 1.2em;
  line-height: 1.4;
  padding-top: 4.1em;
}
#sec03 h4 span {
  color: #fff57f;
}
/*sec04*/
#sec04 .container {
  background: #ffffcd;
}
#sec04 h3 {
  width: 90%;
  margin: 3em auto 2em;
}
#sec04 .cont.left {
  position: relative;
  width: 100%;
  height: 17em;
}
#sec04 .cont.left h4 {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 1;
}
#sec04 .cont.left p {
  line-height: 1.6;
}
#sec04 .cont.left p span {
  display: block;
  font-size: 0.9em;
  line-height: 1.4;
}
#sec04 .cont.left h4 img {
  height: 1.5em;
}
#sec04 .cont.left .left-align {
  position: absolute;
  top: 1.5em;
  right: 0;
  width: 75%;
  padding: 3em 1.6em 1em 7em;
}
#sec04 .cont.left .photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 186px;
}
#sec04 .cont.right {
  position: relative;
  width: 100%;
  height: 26em;
}
#sec04 .cont.right h4 {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 1;
}
#sec04 .cont.right p {
  line-height: 1.6;
}
#sec04 .cont.right p span {
  display: block;
  font-size: 0.9em;
  line-height: 1.4;
}
#sec04 .cont.right h4 img {
  height: 1.5em;
}
#sec04 .cont.right .left-align {
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 75%;
  padding: 3em 7em 1em 1.6em;
}
#sec04 .cont.right .photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 186px;
}
#sec04 .cont.left.cont3 {
  height: 36em;
}
#sec04 .lesson h4 img{
  width: 80%;
}
#sec04 .btn {
  width: 18em;
  height: 3.5em;
  border-radius: 2em;
  padding: 1em 1em;
  line-height: 1.2;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  margin: 1em auto 2em;
  background-color: #e73962;
  box-shadow: 8px 8px 0px -5px #8f8a88;
  transition: all 0.3s;
  vertical-align: middle;
}
#sec04 .btn:hover,
#sec04 .btn:active {
  color: #e73962;
  background-color: #fce4ec;
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px -5px #8f8a88;
}
#sec04 .btn img {
  height: 1.4em;
  vertical-align: middle;
}
/*sec05*/
#sec05 img {
  height: 2em;
}
/*sec06*/
#sec06 .s7 {
    width: 52.3333333333%;
}
#sec06 .s5 {
    width: 47.3333333333%;
}
#sec06 .lead-l {
  position: relative;
  padding: 1.7em 10px 0 20px;
}
#sec06 .lead-r {
  padding: 0.55em 20px 0 0;
}
#sec06 h3 {
  font-weight: bold;
  font-size: 1.6em;
  margin: 0;
}
#sec06 .lead-l h3.tit {
  position: absolute;
  top: 0.9em;
  left: 20px;
  width: 250px;
}
#sec06 .lead-l h3.name {
  line-height: 1.2;
  padding-top: 1.85em;
}
#sec06 h3 span {
  font-size: 0.7em;
}
#sec06 .lead-r p{
  line-height: 0;
}
#sec06 h4 {
  font-size: 1.0em;
  line-height: 1.6;
  margin-top: 0.3em;
}
#sec06 ul {
  margin-top: 0;
  margin-bottom: 2em;
}
#sec06 li {
  margin-bottom: 0.8em;
  overflow:hidden;
  transition: .3s, transform 0.2s ease;
}
#sec06 li a img{
 transition:.3s all;
}
#sec06 li a img:hover,
#sec06 li a img:active {
  transform:scale(1.03,1.03);
  transition:.31s all;
}
#sec07 h3 {
  font-size: 1.8em;
  font-weight: bold;
  margin: 1.46rem 0 0.4rem 0;
}
#sec07 h3 span {
  font-size: 0.8em;
}
#sec07 h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 .912rem 0;
}
#sec07 ul {
  margin-bottom: 0;
}
#sec07 ul li {
  display: inline-block;
  width: 120px;
  height: 120px;
  border:2px solid #e73962;
  border-radius: 50%;
  margin: 1em 1em 0;
}
#sec07 p {
  font-size: 1.4em;
  margin-top: 0.4em;
}
#sec07 dl {
  width: 90%;
  margin: 1em auto 0;
}
#sec07 dd {
  display: inline-block;
  padding: 0.2em 2em;
  margin: 0 0.5em 0.6em;
  border: 1px solid #444;
  border-radius: 4px;
}
#sec07 .btn {
  width: 18em;
  height: 3.5em;
  border-radius: 2em;
  line-height: 1.2;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  margin: 1em auto 2em;
  background-color: #e73962;
  box-shadow: 8px 8px 0px -5px #8f8a88;
  transition: all 0.3s;
}
#sec07 .btn:hover,
#sec07 .btn:active {
  color: #e73962;
  background-color: #fce4ec;
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px -5px #8f8a88;
}
#sec07 a {
  padding-top: 0.5em;
}
/*sec08*/
#sec08 h3 {
  font-size: 1.6em;
  font-weight: bold;
}
#sec08 h4 {
  width: 22em;
  display: block;
  margin: 1em auto 0.8em;
  padding: 0.2em 0.5em;
  font-size: 1.1em;
  text-align: left;
}
#sec08 .row .col.s6 {
  line-height: 0;
}
#sec08 dl {
  display: flex;
  flex-wrap: wrap;
  width: 24em;
  margin: 2em auto 0;
}
#sec08 dt {
  display: inline-flex;
  width: 4em;
  margin-bottom: 10px;
}
#sec08 dd {
  width: 20em;
  margin: 0 0 10px 0;
}
#sec08 ul {
  width: 24em;
  margin: 0 auto;
}
#sec08 ul li {
  padding-left: 1.2em;
  line-height: 1.6;
  margin-bottom: 0.5em;
}
#sec08 ul li::before{
  content: "■ " ;
  color: #ffff8d;
  margin-left: -1.3em;
}
#sec08 ul li ul {
  margin-top: 0.5em;
  margin-left: -1.2em;
}
#sec08 ul li ul li::before{
  content: "● ";
  color: #fff;
  margin-left: -1.3em;
}
#sec08 ul.inline li {
  display: inline-block;
  margin-right: 1em;
}
#sec08 .btn {
  width: 18em;
  height: 3.5em;
  border-radius: 2em;
  line-height: 1.2;
  font-size: 1.3em;
  font-weight: bold;
  color: #e73962;
  margin: 1em auto 2em;
  background-color: #fff;
  box-shadow: 8px 8px 0px -5px #8f8a88;
  transition: all 0.3s;
}
#sec08 .btn:hover,
#sec08 .btn:active {
  background-color: #fce4ec;
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px -5px #8f8a88;
}
#sec08 a {
  padding-top: 0.5em;
}
/*sec09*/
#sec09 {
  padding-bottom: 0.5rem;
}
#sec09 .container {
  margin-top: -3em;
  padding-top: 3em;
  padding-bottom: 3em;
}
#sec09 h3 img {
  height: 5em;
  margin-bottom: 1em;
}
#sec09 .cont {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  width: 87%;
  margin: 0 auto 1em;
}
#sec09 .cont img {
  height: 2em;
}
#sec09 .cont .col {
  width: 12%;
  flex-shrink: 0;
}
#sec09 .cont .col p {
  margin-top: 0;
  margin-bottom: 0;
}
#sec09 .cont .col:nth-of-type(even) {
  width: 88%;
  flex-shrink: 1;
  padding-top: 0.4em;
}
#sec10 a img {
  transition: all 0.3s;
}
#sec10 a img:hover,
#sec10 a img:active {
  transform: translate(2px, 2px);
  opacity: 0.7;
}

/* CROSSTALK */
#cross #sec00 {
  padding: 1.6em 0 0.1em;
}
#cross #sec00 h3 {
  font-size: 1.2em;
}
#cross #sec01 .container {
  padding: 0 15px;
}
#cross #sec01 p {
  margin: 0;
  padding: 1em 0 0;
}
#cross #sec02 {
  padding: 0;
}
#cross #sec02 .cont {
  background: #fff;
  width: 100%;
}
#cross #sec02 .cont h3 {
  width: 100%;
  background: #f0f0f0;
  margin: 0;
  padding: 15px;
  font-size: 1.2em;
}
#cross #sec02 .cont h4 {
  font-size: 1.1em;
  line-height: 1.6;
  padding: 0 15px;
}
#cross #sec02 p {
  margin: 0;
}
#cross #sec02 p.right-img{
  display: block;
  width: 44%;
  margin: 6px 0 0 15px; 
  padding: 0 15px 0 0;
  line-height: 1.0;
}
#cross #sec02 p.left-img{
  display: block;
  width: 44%;
  margin: 6px 15px 0 0; 
  padding: 0 0 0 15px;
  line-height: 1.0;
}
#cross #sec02 div {
  margin-bottom: 1em;
}
#cross .text{
  text-align: justify;
  width: 100%;
}
#cross #sec02 .btn {
    width: calc(100% - 30px);
    height: 3.5em;
    border: 2px solid #e73962;
    border-radius: 2em;
    line-height: 1.2;
    font-size: 1.0em;
    font-weight: bold;
    color: #e73962;
    margin: 1em auto 0;
    background-color: #fff;
    box-shadow: 8px 8px 0px -5px #8f8a88;
    transition: all 0.3s;
}
#cross #sec02 a.btn {
    padding: 1em;
}
#cross #sec02 .btn:hover,
#cross #sec02 .btn:active {
  background-color: #fce4ec;
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px -5px #8f8a88;
}
#cross #sec02 .profile {
  padding: 1em 15px;
}
#cross #sec02 .profile h3 {
  margin-bottom: 2em;
}
#cross #sec02 .profile h3 img{
  height: 2em;
}
#cross #sec02 .profile h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.8em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid #e73962;
}
#cross #sec02 .profile h4 .right-align {
  font-size: 0.8em;
  font-weight: normal;
  color: #000;
}
#cross #sec02 .profile .row p {
  font-size: 12px;
  line-height: 1.6;
  padding-right: 1em;
}
/* pager */
ul.pager {
  width: 100%;
  margin: 0 auto;
  padding: 1em 0;
}
ul.pager li {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin: 0.2em;
  background: #CDCDCD;
  border-radius: 50%;
  line-height: 2.4;
  transition: all 0.3s;
}
ul.pager li a {
  color: #000;
  display: block;
  width: 36px;
  height: 36px;
  background: #F0F0F0;
  border-radius: 50%;
}
ul.pager li a:hover,
ul.pager li a:active {
  color: #fff;
  background: #e73962;
  transition: all 0.3s;
}

@media only screen and (max-width : 1300px)  {
  .wrapper,
  .fixarea-cont-br,
  .page-footer .footer-copyright,
  .page-footer .footer-copyright p {
    width: 400px;
  }
  #index-banner,
  #parts-lead-cal,
  .fixarea-cont {
    width: 390px;
  }
  #sec01 .sec01-2 {
    height: 535px;
  }
  #sec01 .sec01-3 {
    height: 470px;
  }
  #sec01 .sec01-2 .photo img {
    width: 118px;
    margin-right: 5px;
  }
}
@media only screen and (max-width : 1299px) and (min-width : 994px) {
  .fixarea {
    justify-content: space-evenly;
  }
  .wrapper,
  .fixarea-cont-br {
    width: 400px;
  }
  .index-intro {
    width: 100%;
  }
  #index-banner,
  .fixarea-cont {
    width: 280px;
    flex-grow: 1;
    padding: 1em;
  }
  .index-intro .container {
    width: 100%;
  }
  #parts-lead-cal {
    width: calc(48% - 200px);
    flex-grow: 1;
    padding: 0;
  }
  #index-banner h2 img {
    width: 100%;
  }
  nav ul#nav-pc {
    right: 0;
  }
  #parts-lead-cal {
    bottom: 0;
  }
  #parts-lead-cal h3,
  #parts-lead-cal dl {
    margin: 0;
  }
  #parts-lead-cal dl {
    font-size: 0.8em;
  }
  #parts-lead-cal dl span {
    font-size: 0.7em;
  }
  #parts-lead-area {
    font-size: 0.9em;
    top: 13em;
    left: 0;
  }
  #parts-lead-btn {
    bottom: 0;
    right: 2em;
  }
 	#parts-lead-btn img {
    width: 7vw;
  }
  #parts-lead-btn ul li a {
    width: 8vw;
    height: 8vw;
  }
  br.hide-on-med-and-down {
    display: none !important;
  }
  nav ul#nav-pc {
    top: 0;
  }
}

/* aspect-wide */
@media screen and (min-aspect-ratio: 16/9) {
	#parts-lead-btn img {
    width: 5.8vw;
  }
  #parts-lead-btn ul li a {
    width: 7vw;
    height: 7vw;
    font-size: 1.0em;
  }
  .hide-on-wide {
    display: none;
  }
  .hide-on-large-only {
    display: none;
  }
}

@media only screen and (max-width : 993px) {
  #cross .wrapper {
    margin-top: 64px;
  }
  .section {
    margin-top: -80px;
    padding-top: 80px;
  }
  .parallax-container .section {
    position: static;
  }
  #sec00 {
    padding-bottom: 0;
  }
  #sec00 .col.s6 {
    margin: 0 auto;
    line-height: 0;
  }
  #sec00 .col {
    margin: 1em auto;
  }
  .parts-pc {
    display: none;
  }
  .parts-sp {
    display: block;
    padding-top: 64px;
  }
  nav {
    position: fixed;
    top: 0;
    z-index: 9999;
    display: block;
    height: 64px;
    background-color: rgba(255, 255, 255, 0.7);
  }
  nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    font-size: 40px;
  }
  nav a.button-collapse {
    text-decoration: none;
  }
  nav .button-collapse i {
    height: 60px;
    line-height: 60px;
  }
  nav .brand-logo {
    position: static;
    display: inline-block;
    -webkit-transform: none;
    transform: none;
    padding: 0.4em;
  }
  nav .brand-logo img {
    height: 46px;
  }
  .side-nav li>a {
    padding: 0 0 0 20px;
  }
  .side-nav li:first-child {
    display: block;
    height: 64px;
    margin: 10px;
    float: right;
  }
  .side-nav li:first-child img {
    width: 40px;
  }
  .side-nav li:first-child a:hover {
    background-color: transparent;
  }
  nav ul li:first-child a::before {
    background-image: none;
  }
  .side-nav li:nth-child(2) {
    padding-top: 3.5em;
  }
  #page_top {
    left: unset;
    right: 10px;
    bottom: 80px!important;
  }
  #index-banner,
  .wrapper {
    position: static;
    width: 100%;
  }
  #parts-lead-cal,
  #parts-lead-area {
    width: 86%;
    margin: 0 auto;
  }
  #index-banner {
    height: calc(calc(3 / 5) * 100vh);
    position: relative;
    background-image: url(../img/bg.jpg);
    background-size: 10%;
    background-position: center bottom;
    background-repeat: repeat;
  }
  #index-banner img {
    max-width: 86%;
  }
  #parts-lead-cal,
  #parts-lead-btn,
  #parts-lead-area {
    position: static;
  }
  #parts-lead-area {
    text-align: center;
  }
  #index-banner h1 {
    position: absolute;
    top: 10%;
  }
  #index-banner h2 {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
  }
  #index-banner h3 {
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
  }
  #parts-lead-cal {
    width: 100vw;
    background-image: url(../img/bg.jpg);
    background-size: 10%;
    background-position: center bottom;
    background-repeat: repeat;
  }
  #parts-lead-cal .section {
    width: 90%;
    margin: 0 auto;
    padding-top: 1em;
  }
  #parts-lead-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 3;
  }
  #parts-lead-btn ul {
    display: flex;
    width: 100vw;
    margin: 0;
  }
  #parts-lead-btn ul li {
    width: 50%;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #parts-lead-btn ul li:nth-of-type(2) {
    border-left: 2px solid #e73962;
  }
  #parts-lead-btn ul li a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 60px;
    text-decoration: none;
  }

  .page-footer .footer-copyright,
  .page-footer .footer-copyright p {
    width: 100%;
    padding-bottom: 35px;
  }
  #cross #sec00 {
    padding-top: 84px;
    line-height: 0;
  }
  #cross #sec00 h3 img {
    height: 3em;
  }
  #cross #sec00 .row .col {
    margin: 0;
  }
  #cross #sec01 .container {
    padding-top: 1em;
  }
}
@media only screen and (max-width : 993px) and (min-width : 480px) {
  #index-banner {
    height: calc(calc(1 / 2) * 100vh);
  }
  #index-banner h2 img {
    width: 60%;
  }
  #sec01 h2 img {
    height: 1em;
  }
  #sec01 .sec01-1 img {
    width: 60%;
  }
  #sec01 .sec01-1 .left-align {
    width: 50%;
  }
  #sec01 .sec01-2 {
    height: 320px;
  }
  #sec01 .sec01-2 h4 img {
    width: 50%;
  }
  #sec01 .sec01-2 .left-align {
    padding: 1em 1em 9em 6.5em;
    width: 60%;
    top: 2em;
    right: 10px;
  }
  #sec01 .sec01-2 .photo {
    bottom: 10px;
    left: unset;
    right: 1.5em;
  }
  #sec01 .sec01-3 {
    height: 320px;
  }
  #sec01 .sec01-3 .left-align {
    padding: 1em 1em 11em 6.5em;
  }
  #sec02 {
    padding-bottom: 3em;
  }
  #sec02 .cont h3 {
    width: 97%;
    background: url(../img/tit03_1.png) bottom center repeat-x;
    background-size: auto 1.7em;
  }
  #sec02 .cont .pimg {
    bottom: 0;
    right: -40px;
    width: 40%;
  }
  #sec02 .cont .capimg {
    bottom: -15px;
    right: -40px;
    width: 40%;
  }
  #sec03 .container {
    margin-top: 30px;
  }
  #sec03 li a p {
    top: unset;
  }
  #sec04 .cont.left .left-align {
    padding: 3em 1.6em 1.6em 7em;
  }
  #sec03 h4 {
    background-image: url(../img/tit04_6_md.png);
    background-size: contain;
    background-position-x: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 200px;
    padding-top: 4.1em;
  }
  #sec04 h3 img {
    height: 4em;
  }
  #sec04 .cont.left .photo,
  #sec04 .cont.right .photo {
    width: 35%;
  }
  #sec04 .cont.right {
    height: 17em;
  }
  #sec04 .cont.left.cont3 {
    height: 20em;
  }
  #sec04 .lesson h4 img {
    width: unset;
    height: 2.5em;
  }
  #sec06 .row {
    width: 86%;
    margin: 0 auto;
  }
  #sec06 .s7 {
    width: 80.3333333333%;
  }
  #sec06 .s5 {
    width: 19.3333333333%;
  }
  #sec06 .lead-l {
    padding: 1.7em 10px 0 0;
  }
  #sec06 .lead-l h3.tit {
    left: 0;
  }
  #sec06 .lead-l h3.name {
    padding-top: 2.4em;
  }
  #sec06 .lead-r {
    padding: 0.55em 0 0 0;
  }
  #sec08 {
    padding-bottom: 3em;
  }
  #sec07 dl,
  #sec08 dl,
  #sec08 h4,
  #sec08 ul {
    width: 87%;
  }
  #sec08 dd {
    width: calc(100% - 4em);
  }
  #sec08 ul li ul {
    width: 100%;
  }
  #sec09 .cont .col {
    width: 6%;
    flex-shrink: 0;
  }
  #sec09 .cont .col:nth-of-type(even) {
    width: 94%;
    flex-shrink: 1;
  }
  #sec10 {
    padding-top: 90px;
  }
  #sec10 img,
  .page-footer .row {
    max-width: 356px;
    margin: 0 auto;
  }
  #cross #sec00 .row {
    margin-bottom: 0;
  }
  #cross #sec00 .row .col {
    padding-bottom: 2em;
  }
  #cross #sec00 .row .col img {
    width: 65vw;
    margin: 0 auto;
  }
  #cross #sec01 p {
    margin: 0;
    padding: 0;
  }
  #cross #sec02 {
    margin: 0;
    padding-bottom: 0;
  }
  #cross #sec02 .cont h3 {
    text-align: center;
  }
  #cross #sec02 p.right-img {
    width: 33%;
    margin: 6px 0 0 10px;
    padding: 0 15px 0 10px;
  }
  #cross #sec02 p.left-img {
    width: 33%;
    margin: 6px 10px 0 0;
    padding: 0 10px 0 15px;
  }
}
@media only screen and (max-width : 479px) {
  #parts-lead-area {
    width: 95%;
  }
  #parts-lead-cal span.small{
    font-size: 0.7em;
  }
  #sec01 .sec01-2 .photo img {
    width: 31%;
  }
  #sec01 .sec01-2 .left-align {
    padding: calc(100% - 53%) 1em 7em 1em;
  }
  #sec01 .sec01-3 .left-align {
    padding: calc(100% - 55.5%) 1em 95px 1em;
  }
  #sec01 .sec01-2 .photo {
    bottom: 3em;
  }
  #sec01 .sec01-3 .photo {
    bottom: 1em;
  }
  #sec02 .cont h3 {
    background-size: 86%;
  }
  #sec03 li a p {
    padding-top: 0.6em;
  }
  #sec03 li a p.line-1 {
    padding-top: 1.2em;
  }
  #sec03 li a p.line-3 {
    padding-top: 0;
    margin-top: 1em;
  }
  #sec03 h4 {
    padding-top: 4.8em;
  }
  #sec04 .cont.left.cont3 {
    height: 30em;
  }
  #sec04 .cont.left .left-align {
    padding: 3em 1.6em 1.6em 7em;
  }
  #sec06 .s7 {
    width: 56.3333333333%;
  }
  #sec06 .s5 {
    width: 43.3333333333%;
  }
  #sec06 .lead-l {
    position: relative;
    padding: 1.7em 10px 0 15px;
  }
  #sec06 .lead-l h3.tit {
    left: 15px;
  }
  #sec06 .lead-l h3.name {
    padding-top: 2.5em;
  }
  #sec06 h4 {
    margin-top: 0.8em;
  }
  #sec07 dl,
  #sec08 dl,
  #sec08 h4,
  #sec08 ul {
    width: 87%;
  }
  #sec08 dd {
    width: 22em;
  }
  #sec08 {
    padding-bottom: 3em;
  }
  #sec08 ul li ul {
    width: 100%;
  }
  #sec10 {
    padding-top: 90px;
  }
    #cross #sec02 {
    margin: 0;
  }
}
@media only screen and (max-width : 400px) {
  #sec01 .sec01-2 .photo {
    bottom: 2em;
  }
  #sec01 .sec01-3 .photo {
    bottom: 0.4em;
  }
  #sec03 li a p {
    padding-top: 0.4em;
  }
  #sec03 li a p.line-1 {
    padding-top: 0.8em;
  }
  #sec03 li a p.line-3 {
    margin-top: 0.6em;
  }
  #sec04 .cont.left.cont3 {
    height: 36em;
  }
  #sec08 dd {
    width: 100%;
  }
  #sec10 img, .page-footer .row {
    max-width: 100%;
  }
}