@charset "UTF-8";
/* CSS Document */
@media all and (-ms-high-contrast: none) {
 html {
  font-family: "メイリオ", Meiryo, sans-serif;
 }
}
/****************************************************/
/*全体
/****************************************************/
html {
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 3vw;
}
.pc {
 display: none;
}
.fs-s {
 font-size: .5rem;
}
.fs-l {
 font-size: 1.5rem;
}
.fw-b {
 font-weight: bold;
}

section h2 {
 text-align: center;
 padding: 10rem 0 5rem;
 font-size: 3rem;
 font-weight: bold;
 letter-spacing: .3vw;
 line-height: 1;
}
.flex {
 display: flex;
 flex-wrap: wrap;
}

section.kyouiku-trigger h2 {
 opacity: 0;
 transform: translateY(-5vh);
 transition: .7s;
}
section.kyouiku-trigger-on h2 {
 opacity: 1;
 transform: translateY(0vh);
}
/****************************************************/
/*システム
/****************************************************/
/*埋め込みiframe*/
.iframe-wrap {
 position: relative;
 width: 100%;
 padding-top: 56.25%;
}
.iframe-wrap iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}
/*スクロール*/
.scroll {
 position: absolute;
 z-index: 10;
 width: 40px;
 height: 80px;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 cursor: pointer;
}
.scroll:after {
 content: "SCROLL";
 position: absolute;
 font-size: 10px;
 letter-spacing: 2px;
 line-height: 1;
 transform: rotateZ(90deg);
 color: #b55fe5;
 height: 50px;
 top: 0;
 right: 0;
}
.scroll span {
 display: block;
 width: 1px;
 height: 100%;
 background-color: #eee;
 margin: 0 auto;
}
.scroll span:before {
 display: block;
 content: "";
 position: absolute;
 width: 1px;
 height: 100%;
 background-color: #b55fe5;
 left: 0;
 top: 0;
 right: 0;
 margin: auto;
}
/****************************************************/
/*ヘッダー
/****************************************************/
header {
 width: 100%;
 height: 18.13vw;
 position: relative;
 z-index: 99;
}
.header-tit {
 position: absolute;
 width: 41.86vw;
 top: 0;
 left: 4.8vw;
 bottom: 1vw;
 margin: auto;
}
.header-nav-btn {
 z-index: 1000;
 position: fixed;
 top: 0;
 right: 0;
 background-color: rgba(255, 255, 255, .7);
}
.header-nav-btn-inner {
 width: 21.06vw;
 height: 18.13vw;
 position: relative;
 overflow: hidden;
}
.header-nav-btn-inner > svg {
 position: absolute;
 width: 10vw;
 transition: .5s;
}
.header-nav-shape-1 {
 left: 0;
 right: 0;
 bottom: 3.46vw;
 margin: auto;
}
.header-nav-shape-2-a, .header-nav-shape-2-b {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}
.header-nav-shape-2-b {
 opacity: 0;
}
.header-nav-shape-3 {
 top: 3.46vw;
 left: 0;
 right: 0;
 margin: auto;
}
.header-nav-btn-inner > svg line {
 stroke: #231815;
}
.header-nav-btn-open .header-nav-shape-1 {
 transform: translateX(160%);
 opacity: 0;
}
.header-nav-btn-open .header-nav-shape-3 {
 transform: translateX(-160%);
 opacity: 0;
}
.header-nav-btn-open .header-nav-shape-2-a {
 transform: rotateZ(135deg);
}
.header-nav-btn-open .header-nav-shape-2-b {
 transform: rotateZ(225deg);
 opacity: 1;
}
.nav {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
 display: block;
 background-color: rgba(0, 0, 0, .8);
 width: 100%;
 height: 100vh;
 transform: translateY(100vh);
 transition: .5s;
}
.nav-open {
 transform: translateY(0);
}
.nav-link {
 display: block;
 transform: translateY(100vh);
}
.nav-link path {
 fill: #fff;
}
.nav-link-open {
 transform: translateY(0);
}
.nav-link-top {
 transition: .7s;
}
.nav-link-news {
 transition: 1s;
}
.nav-link-swing {
 transition: 1.3s;
}
.nav-link-everyverse {
 transition: 1.6s;
}
.nav-link-note {
 transition: 1.9s;
}
.nav-link-contact {
 transition: 2.2s;
}
.nav-link-top {
 position: absolute;
 width: 24.4vmin;
 top: 15vmin;
 left: 10vw;
}
.nav-link-top .st1 {
 fill: url(#SVGID_1_);
}
.nav-link-news {
 position: absolute;
 width: 36.27vmin;
 top: calc(15vmin + 12vmin * 1);
 left: 10vw;
}
.nav-link-news .st1 {
 fill: url(#SVGID_2_);
}
.nav-link-swing {
 position: absolute;
 width: 40.93vmin;
 top: calc(15vmin + 12vmin * 2);
 left: 10vw;
}
.nav-link-swing .st1 {
 fill: url(#SVGID_3_);
}
.nav-link-everyverse {
 position: absolute;
 width: 78.67vmin;
 top: calc(15vmin + 12vmin * 3);
 left: 10vw;
}
.nav-link-everyverse .st1 {
 fill: url(#SVGID_4_);
}
.nav-link-note {
 position: absolute;
 width: 33.87vmin;
 top: calc(15vmin + 12vmin * 4);
 left: 10vw;
}
.nav-link-note .st1 {
 fill: url(#SVGID_5_);
}
.nav-link-contact {
 position: absolute;
 width: 57.73vmin;
 top: calc(15vmin + 12vmin * 5);
 left: 10vw;
}
.nav-link-contact .st1 {
 fill: url(#SVGID_6_);
}
.nav-link .hover .st1 {
 opacity: 0;
 transition: .6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.nav-link:hover .hover .st1 {
 opacity: 1;
}
.nav-link .hover .st0 {
 transform: scaleX(0);
 opacity: 0;
 transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.nav-link:hover .hover .st0 {
 opacity: 1;
 transform: scaleX(1);
}
/****************************************************/
/*fixed-area(固定エリア）
/****************************************************/
.hover-on{
 display: none;
}
*:hover > .hover-off{
 display: none;
}
*:hover > .hover-on{
 display: unset;
}

.fixed-area{
 position: fixed;
 left: 0;
 bottom: 0;
 background-color: #000;
 width: 100%;
 z-index: 5;
}
.fixed-area-flex{
 width: calc(100% - 5%);
 padding: .75rem 0;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.fixed-area-item{
}
.mail{
 width: calc(54% - .75rem);
}
.tel{
 width: 46%;
}
.video{
 width: 100%;
 margin-bottom: .75rem;
}
.fixed-area-btn{
 display: block;
 cursor: pointer;
 text-align: center;
 width: 100%;
 border-radius: 3rem;
 font-size: 1rem;
 padding: .75rem 0;
 line-height: 2rem;
 font-weight: bold;
 background-color: #e4087c;
 color: #fff;
}
.fixed-area-btn img{
 height: 2rem;
}
/*hover*/
.fixed-area-btn:hover{
 background-color: #fff;
 color: #000;
}

/*アニメーション*/
.f-trigger .fixed-area{
 transition: .5s;
 opacity: 0;
 pointer-events: none;
}
.f-trigger-on .fixed-area{
 opacity: 1;
 pointer-events: visible;
}
/****************************************************/
/*title
/****************************************************/
/*引き継ぎ*/
.ev-tit {
 height: calc(100vh - 10vh);
 position: relative;
 overflow: hidden;
 background-color: #f4f7fa;
}
/*scroll*/
.ev-tit .scroll:after {
 color: #c30569;
}
.ev-tit .scroll span {
 background-color: #eee;
}
.ev-tit .scroll span:before {
 background-color: #c30569;
}

.tit-logo{
 position: absolute;
 top: 10vh;
/* bottom: calc(101vw - 5vh);*/
 right: 8.9vw;
 width: 82.7vw;
 margin: auto;
 z-index: 3;
}
.tit-tips{
 position: absolute;
 top: 69vh;
/* bottom: -142vw;*/
 right: 0;
 left: 0;
 width: 94.1vw;
 margin: auto;
 z-index: 3;
 
 filter: drop-shadow(0 0 1vw rgba(21,121,191,.15));
}
.tit-illust{
 position: absolute;
 top: 0;
 bottom: -45vw;
 left: 0vw;
 width: 90.5vw;
 margin: auto;
 z-index: 2;
}
.tit-shape{
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 bottom:-51vw;
 width: 100%;
 height: 76.6vw;
 margin: auto;
 transform:skewY(-6.8deg);

 z-index: 0; 
 background-color: #19bed5;
}

.tit-shape-cover{
 position: absolute;
 width: 100%;
 height: 100%;
 bottom: 0;
 left: 0;
 background-color: #f4f7fa;
 z-index: 1;
}

/*アニメーション*/
.tit-shape-cover{
 animation-name: titShape;
 animation-duration: .7s;
 animation-fill-mode: both;
 animation-timing-function: ease;
 transform-origin: left bottom;
}
@keyframes titShape{
 0%{
  transform: translateX(0);
 }
 100%{
  transform: translateX(100%);
 }
}
@keyframes titShapePC{
 0%{
  transform: translateY(0);
 }
 100%{
  transform: translateY(100%);
 }
}
.tit-illust{
 animation-name: titIllust;
 animation-delay: .7s;
 animation-duration: 1s;
 animation-timing-function: ease;
 animation-fill-mode: both;
}
@keyframes titIllust{
 0%{
  opacity: 0;
  transform: translateY(5%);
 }
 100%{
  opacity: 1;
  transform: translateY(0%);
 }
}

.tit-logo{
 animation-name: titLogo;
 animation-delay: 1s;
 animation-duration: .7s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}

@keyframes titLogo{
 0%{
  opacity: 0;
  transform: scale(.5);
 }
 100%{
  opacity: 1;
  transform: scale(1);
 }
}

.tit-tips{
 animation-name: titTips;
 animation-delay: 1.5s;
 animation-duration: 1s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}

@keyframes titTips{
 0%{
  opacity: 0;
 }
 100%{
  opacity: 1;
 }
}
/****************************************************/
/*about(はじめに)
/****************************************************/
.about {
 background-color: #f4f7fa;
}
.about p {
 font-size: 1.5rem;
 text-align: center;
 line-height: 2;
 font-weight: bold;
 letter-spacing: .05rem;
}
.logos {
 padding: 2.5rem 0;
 text-align: center;
}
.logos img {
 display: inline-block;
 width: auto;
 height: 6rem;
 margin: 1rem;
}

/*アニメーション*/
.about.kyouiku-trigger p,.logos.kyouiku-trigger {
 opacity: 0;
 transition: 1s .3s;
}
.about.kyouiku-trigger-on p,.logos.kyouiku-trigger-on {
 opacity: 1;
}

/****************************************************/
/*DEMAE
/****************************************************/
.demae{
 padding: 5vh 2.5%;
 background-color: #f4f7fa;
}
.demae-about-flex{
 display: flex;
 flex-wrap: wrap;
 margin: 0 auto 5rem;
}

.demae-wrap:nth-child(2){
 padding-top: 10rem;
}

.demae-about-item:nth-child(1){
 width:100%;
 text-align: center;
}
img.demae-illust{
 width: 65%;
}
.demae-about-item:nth-child(2){
 width:100%;
 padding-left: 0;
 text-align: center;
}
p.point{
 display: inline-block;
 padding: .5rem 5rem .75rem;
 border-radius: 3rem;
 margin-top: 3rem;
 margin-bottom: 2rem;
 font-size: 1.5rem;
 font-weight: bold;
 line-height: 1;
}
.demae-about-item h3{
 font-size: 2.2rem;
 font-weight: bold;
 line-height: 1.6;
}
p.demae-txt{
 margin-top: 1rem;
 line-height: 2;
 letter-spacing: .05rem;
 font-size: 1.4rem;
 font-weight: bold;
 color: #111;
}
.demae-pic{
 margin: 0 auto;
}
.demae-pic img{
 width: 100%;
 margin-bottom: 2rem;
}
.demae-voice{
 margin: 5rem auto;
 border: solid 1px #000;
 border-radius: 2.5rem;
 text-align: center;
}
p.demae-voice-tit{
 display: inline-block;
 background-color: #f4f7fa;
 font-size: 2rem;
 font-weight: bold;
 padding: 0 1rem;
 line-height: 1;
 letter-spacing: .05rem;
 transform: translateY(-1rem);
 margin: 0 auto 2rem;
}
.demae-voice-flex{
 display: flex;
 flex-wrap: wrap;
 width: calc(100% - 3rem);
 margin: 0 auto 2rem;
}
.demae-voice-item:nth-child(1){
 width: 100%;
}
.demae-voice-item:nth-child(1) img{
 width: 40%;
}
.demae-voice-item:nth-child(2){
 width: 100%;
 padding-left: 0;
 text-align: left;
}
.demae-voice-item h4{
 font-size: 1.4rem;
 margin-top: 1rem;
 margin-bottom: .5rem;
 font-weight: bold;
 line-height: 1.8;
}
.demae-voice-txt{
 font-size: 1.3rem;
 line-height: 1.8;
}

/*アニメーション*/
.demae-about-flex.kyouiku-trigger .demae-about-item:nth-child(1){
 opacity: 0;
 transition: 1s 0s;
}
.demae-about-flex.kyouiku-trigger-on .demae-about-item:nth-child(1){
 opacity: 1;
}
.demae-about-flex.kyouiku-trigger .point{
 opacity: 0;
 transform: scale(2) translateY(-100vh);
 transition: 1s 0s;
}
.demae-about-flex.kyouiku-trigger-on .point{
 opacity: 1;
 transform: scale(1) translateY(0);
}
.demae-about-flex.kyouiku-trigger .demae-about-item h3{
 opacity: 0;
 transition: 1s .7s;
}
.demae-about-flex.kyouiku-trigger-on .demae-about-item h3{
 opacity: 1;
}
.demae-about-flex.kyouiku-trigger .demae-txt{
 opacity: 0;
 transition: 1s 1.3s;
}
.demae-about-flex.kyouiku-trigger-on .demae-txt{
 opacity: 1;
}
.demae-pic.kyouiku-trigger{
 opacity: 0;
 transition: 1s .3s;
}
.demae-pic.kyouiku-trigger-on{
 opacity: 1;
}
.demae-voice.kyouiku-trigger{
 opacity: 0;
 transform: translateY(-5vh);
 transition: 1s .3s;
}
.demae-voice.kyouiku-trigger-on{
 opacity: 1;
 transform: translateY(0);
}
/****************************************************/
/*request（お願い事項）
/****************************************************/
.request{
 padding: 0 2.5%;
 background-color: #f4f7fa;
}
.request-wrap{
 background-color: #fff;
 margin: 0 auto;
 padding: 3rem 1.5rem 1.5rem;
 border-radius: 2.5rem;
 text-align: center;
}
.request-tit{
 display: inline-block;
 margin: 0 auto 1rem;
 font-size: 1.8rem;
 color: #499760;
 font-weight: bold;
 position: relative;
 z-index: 1;
}
.request-tit:before{
 position: absolute;
 display: block;
 content: "";
 left: 0;
 bottom: 10%;
 width: 100%;
 height: 15%;
 background-color: #e4f0e7;
 z-index: -1;
}
.request ul{
 padding: 1.5rem 1rem 0;
}
.request li{
 color: #333;
 position: relative;
 text-align: left;
 font-size: 1.2rem;
 font-weight: bold;
 padding: 0 0 2.4rem 3.4rem;
 line-height: 2.4rem;
}
.request li:before{
 position: absolute;
 top: 0;
 left: 0; 
 margin: auto;
 width: 2.4rem;
 height: 2.4rem;
 display: block;
 content: "";
 background-image: url("../img/kyouiku/icon-chek.png");
 background-size: contain;
 background-position: center center;
 background-repeat: no-repeat;
}
.request-contact{
 font-size: 1.2rem;
 font-weight: bold;
 line-height: 1.8;
 color: #333;
 padding: 2rem 1.5rem;
 background-color: #e4f0e7;
 border-radius: 2rem;
}
.request-contact a{
 color: #e4087c;
}
.request-contact a:hover{
 opacity: .6;
}

/*アニメーション*/
.kyouiku-trigger.request-tit{
 opacity: 0;
 transition: 1s;
}
.kyouiku-trigger-on.request-tit{
 opacity: 1;
}
.request ul.kyouiku-trigger{
 opacity: 0;
 transition: 1.5s 0s;
}
.request ul.kyouiku-trigger-on{
 opacity: 1;
}
.kyouiku-trigger.request-contact{
 opacity: 0;
 transform: translateY(5vh);
 transition: .7s 0s;
}
.kyouiku-trigger-on.request-contact{
 opacity: 1;
 transform: translateY(0);
}
/****************************************************/
/*pv（埋め込み動画）
/****************************************************/
.pv {
 background-color: #f4f7fa;
 padding: 10rem 2.5% 3rem;
}
.pv-wrap {
 width: 100%;
}
.pv-wrap video {
 width: 100%;
}
/*アニメーション*/
.pv.kyouiku-trigger .pv-wrap{
 opacity: 0;
 transition: 1s;
}
.pv.kyouiku-trigger-on .pv-wrap{
 opacity: 1;
}

/****************************************************/
/*contact（メールフォーム）
/****************************************************/
.contact {
 position: relative;
 overflow: hidden;
}
.contact:after {
 z-index: -1;
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 25rem calc(99vw / 2) 0 calc(99vw / 2);
 border-color: #f4f7fa transparent transparent transparent;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 margin: auto;
}
.contact p {
 margin: 5rem auto;
 text-align: center;
 font-size: 2rem;
 line-height: 2;
 letter-spacing: .05rem;
 font-weight: bold;
}
.contact p img {
 margin-top: 1rem;
 display: inline-block;
 width: auto;
 height: 4rem;
}
.contact-link {
 margin-top: 6rem;
 text-align: center;
}
.contact-link a {
 padding: 0 3rem;
 margin: 0 2.5%;
 font-size: 2.3rem;
 display: inline-block;
 line-height: 3;
 font-weight: bold;
 color: #fff;
 background-color: #e4087c;
 border-radius: 2rem;
}
.contact-link a:hover {
 background-color: #000;
}

/*アニメーション*/
.contact.kyouiku-trigger p {
 opacity: 0;
 transform: translateY(-5vh);
 transition: .5s 0s;
}
.contact.kyouiku-trigger-on p {
 opacity: 1;
 transform: translateY(0);
}
.contact.kyouiku-trigger .contact-link {
 opacity: 0;
 transition: 1s .5s;
}
.contact.kyouiku-trigger-on .contact-link {
 opacity: 1;
}

/****************************************************/
/*RECOMMEND
/****************************************************/
.recommend{
 padding: 10rem 2.5%;
}
.recommend-flex{
 background-color: #e0e0ea;
 display: flex;
 flex-wrap: wrap;
 margin: 0 auto;
 padding: 3rem 1.5rem;
 border-radius: 2.5rem;
}
.recommend-item:nth-child(1){
 width: 100%;
 text-align: center;
}
.recommend-item:nth-child(1) img{
 width: 40%;
}
.recommend-item:nth-child(2){
 width: 100%;
}
.recommend-item h3{
 text-align: center;
 color: #31316f;
 font-size: 2.2rem;
 font-weight: bold;
 line-height: 1.6;
 margin-top: 1rem;
}
.recommend-txt{
 color: #111;
 font-size: 1.4rem;
 font-weight: bold;
 line-height: 1.8;
 padding-top: 1rem;
}
.recommend-txt a{
 color: #e4087c;
}
.recommend-txt a:hover{
 opacity: .6;
}

/*アニメーション*/
.recommend.kyouiku-trigger .recommend-flex{
 opacity: 0;
 transform: translateY(5vh);
 transition: 1s;
}
.recommend.kyouiku-trigger-on .recommend-flex{
 opacity: 1;
 transform: translateY(0);
}
/****************************************************/
/*modal
/****************************************************/
.modal {
 position: fixed;
 width: 100vw;
 height: 100vh;
 z-index: 5;
 top: 0;
 left: 0;
 transition: .3s;
 opacity: 0;
 pointer-events: none;
}
.modal-open {
 opacity: 1;
 pointer-events: visible;
}
.modal-bg {
 position: relative;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .7);
}
.modal-bg .pv-wrap {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

/****************************************************/
/*project（その他のプロジェクト）
/****************************************************/
.project {
}
.more-list {
 margin: 0 auto;
 width: 95%;
}
.more-list .swing-flex {
 display: flex;
 flex-wrap: wrap;
 padding-inline-start: 0;
}
.more-list .swing-item {
 width: calc(100% / 2 - 1vw);
 padding: .5vw;
 margin-bottom: 2rem;
}
.more-list .swing-item:nth-child(n + 7) {
 display: none;
}
.more-list.open-list .swing-item:nth-child(n + 7) {
 display: unset;
 animation-name: fade;
 animation-delay: .1s;
 animation-duration: 1s;
 animation-fill-mode: both;
 animation-timing-function: ease;
}
@keyframes fade {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
.more-list .swing-item:last-child {
 margin-bottom: 4rem;
}
.swing-img {
 position: relative;
 padding-top: 56.25%;
 border-radius: 1vw;
 overflow: hidden;
}
.swing-img img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
}
.swing-img iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: center center;
}
.swing-img .cate {
 position: absolute;
 left: .3rem;
 top: .3rem;
 margin: auto;
 width: 4.5rem;
 height: 4.5rem;
 line-height: 4.5rem;
 text-align: center;
 border-radius: 50%;
 color: #fff;
 font-weight: bold;
 background-color: #e4097d;
 border: solid .5rem #c30269;
 font-size: .75rem;
}
.more-list .swing-item p {
 margin-top: 1rem;
 line-height: 1.5;
}
.more-list .swing-item .tips {
 color: #111;
}
.more-list .swing-item .tit {
 color: #111;
 font-weight: bold;
}
.more-btn {
 background-color: #000;
 color: #fff;
 padding: 10px;
 margin: 5vw auto 0;
 width: 200px;
 text-align: center;
 border-radius: 3rem;
 cursor: pointer;
}
.more-btn.hide {
 display: none;
 opacity: 0;
}
.more-btn:hover {
 background-color: #e4087c;
}

.project-txt{
 text-align: center;
 font-size: 1.5rem;
 line-height: 2;
 font-weight: bold;
 margin-bottom: 5rem;
}

/*アニメーション*/
.project.kyouiku-trigger .project-txt{
 opacity: 0;
 transition: 1s .5s;
}
.project.kyouiku-trigger-on .project-txt{
 opacity: 1;
}

/*project*/
.project.kyouiku-trigger .more-list {
 opacity: 0;
 transition: .5s 1s;
}
.project.kyouiku-trigger-on .more-list {
 opacity: 1;
}
/****************************************************/
/*footer
/****************************************************/
footer {
 padding: 10.4vw 9.33vw 9.33vw;
 color: #231815;
 letter-spacing: .2em;
 margin-bottom: 10rem;
}
footer a {
 color: #231815;
}
footer li {
 margin: 0 0 4.53vw;
}
footer p {
 line-height: 2;
 font-size: .8em;
}
/*【タブレット】*/
@media screen and (min-width: 520px) {
 /****************************************************/
 /*全体
/****************************************************/
 html {
  font-size: 2vw;
 }
/****************************************************/
/*title
/****************************************************/
.tit-logo{
 position: absolute;
 top: 15vw;
 bottom: auto;
 right: 0;
 left: 0;
 width: 70vw;
 margin: auto;
 z-index: 3;
}
.tit-tips{
 position: absolute;
 top: auto;
 bottom: 4vw;
}
.tit-illust{
 position: absolute;
 top: 0;
 bottom: -45vw;
 left: 0vw;
 width: 90.5vw;
 margin: auto;
 z-index: 2;
}
.tit-shape{
 position: absolute;
 content: "";
 top: 0;
 left: 0;
 bottom:-51vw;
 width: 100%;
 height: 76.6vw;
 margin: auto;
 transform:skewY(-6.8deg);
 z-index: 0; 
 background-color: #19bed5;
}
 /****************************************************/
 /*pv
/****************************************************/
 
}
/*【PC】*/
@media (orientation: landscape) , (min-width: 960px){
 /****************************************************/
 /*全体
/****************************************************/
 html {
  font-size: 1vw;
 }
 .pc {
  display: unset;
 }
 .sp {
  display: none;
 }
 /****************************************************/
 /*全体
/****************************************************/
 h2 {
  padding: 12rem 0 7.5rem;
  font-size: 5rem;
 }
 /****************************************************/
 /*システム
/****************************************************/
 /*スクロール*/
 .ev-tit .scroll:after {
  color: #c30569;
 }
 .ev-tit .scroll span {
  background-color: #eee;
 }
 .ev-tit .scroll span:before {
  background-color: #c30569;
 }

 /****************************************************/
 /*ヘッダー
/****************************************************/
 header {
  height: 7.71vw;
 }
 .header-tit {
  width: 18.64vw;
  left: 2.71vw;
  bottom: .2vw;
 }
 .header-nav-btn {}
 .header-nav-btn-inner {
  width: 8.42vw;
  height: 7.71vw;
 }
 .header-nav-btn-inner > svg {
  width: 4vw;
 }
 .header-nav-shape-1 {
  bottom: 1.42vw;
 }
 .header-nav-shape-3 {
  top: 1.42vw;
 }
 .nav-link {
  left: 30vw;
 }
/****************************************************/
/*fixed-area(固定エリア）
/****************************************************/
 .fixed-area-flex{
  width: calc(100% - 10%);
  padding: 1.25rem 0;
 }
 .fixed-area-item{
  align-self: center;
 }
 .mail{
  width: calc(38% - .75rem);
 }
 .video{
  width: calc(32% - .75rem);
  margin-bottom: 0;
 }
 .tel{
  width: calc(25% - .75rem);
 }
 .fixed-area-btn{
  padding: .5rem 0;
  line-height: 3rem;
  font-size: 1.75rem;
 }
 .fixed-area-btn img{
  height: 3rem;
 }
 
 .tel span{
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5rem;
  letter-spacing: .1rem;
 }
 .tel span img{
  height: 1.5rem;
 }
 .tel a{
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2.5rem;
  letter-spacing: .1rem;
 }
 /****************************************************/
 /*TITLE
/****************************************************/
 .ev-tit{
  height: calc(100vh - 6rem);
 }
.tit-logo{
 top: 0;
 bottom: 19vh;
 right: 0;
 left: 43vw;
 width: auto;
 height: 40.3vmin;
}
.tit-tips{
 top: 50vh;
 bottom: 0;
 right: 0;
 left: 43.5vw;
 width: auto;
 height: 24.9vmin;
}
.tit-illust{
 top: unset;
 bottom: 0vw;
 left: 0vw;
 width: 54.5vw;
}
.tit-shape{
 top: unset;
 left: -9vw;
 bottom: 0;
 width: 50vw;
 height: 100%;
 transform: skewX(-15deg);
}
 
/*アニメーション*/
.tit-shape-cover{
 animation-name: titShapePC;
 animation-direction: 1s;
}
/****************************************************/
/*about（はじめに）
/****************************************************/
 .logos img{
  height: 8rem;
 }
/****************************************************/
/*demae（私たちの出前授業）
/****************************************************/
 .demae{
  padding: 0 5%;
 }
 .demae-about-flex{
  justify-content: space-between;
  padding-left: 7vw;
 }
 .demae-wrap:nth-child(even) .demae-about-flex{
  flex-direction: row-reverse;
 } 
 .demae-about-item:nth-child(1){
  width: 37%;
 }
 img.demae-illust{
  width: 100%;
 }
 .demae-about-item:nth-child(2){
  width: 56%;
  text-align: left;
 }
 p.point{
  margin-top: 0;
  margin-bottom: 1rem;
 }
 .demae-about-item h3{
  font-size: 3rem;
 }
 .demae-pic{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .demae-pic img{
  width: 31%;
  margin-bottom: 0;
 }
 .demae-voice{
  margin: 8rem auto 0;
 }
 .demae-voice-flex{
  width: 81.25%;
  justify-content: space-between;
  margin: 0 auto 3rem;
 }
 .demae-voice-item:nth-child(1){
  width: 9.65%;
 }
 .demae-voice-item:nth-child(1) img{
  width: 100%;
 }
 .demae-voice-item:nth-child(2){
  width: 86.48%;
 }
 .demae-voice-item h4{
  margin-top: 0;
  font-size: 1.5rem;
 }

/****************************************************/
/*request（お願い事項）
/****************************************************/
.request{
 padding: 0 5%;
 background-color: #f4f7fa;
}
 .request-wrap{
  padding: 5rem 0 5rem;
 }
 .request-tit{
  font-size: 2rem;
 }
 .request ul{
  padding: 1.5rem 0 0;
  margin: 0 8.56%;
 }
 .request-contact{
  margin: 0 7%;
 }
/****************************************************/
/*pv（埋め込み動画）
/****************************************************/
 .pv{
  padding: 10rem 5% 3rem;
 }
 /****************************************************/
/*recommend（ご活用ください）
/****************************************************/
 .recommend{
  padding: 5rem 5%;
 }
 .recommend-flex{
  padding: 3rem 9.5% 0;
 }
 .recommend-item:nth-child(1){
  width: 38%;
 }
 .recommend-item:nth-child(1) img{
  width: 70%;
 }
 .recommend-item:nth-child(2){
  width: 62%;
 }
 .recommend-item h3{
  text-align: left;
  font-size: 3rem;
 }
 /****************************************************/
 /*PROJECT
/****************************************************/
 .more-list {
  width: 90%;
 }
 .more-list .swing-item {
  width: calc(100% / 3 - 1vw);
  padding: .5vw;
 }
 .more-list .swing-item .tips {
  text-align: center;
 }
 .more-list .swing-item .tit {
  text-align: center;
  font-size: 1.125rem;
 }
 .swing-img .cate {
 }
 /****************************************************/
/*contact（メールフォーム）
/****************************************************/
.contact-link a {
 margin: 0 auto;
 font-size: 3rem;
}
  /****************************************************/
 /*modal
/****************************************************/
 .modal .pv-wrap{
  width: 60%;
 }
 /****************************************************/
 /*footer
/****************************************************/
 footer {
  padding: 7.36vw 0 6.43vw;
  letter-spacing: .2em;
  margin-bottom: 4rem;
 }
 footer a {}
 footer ul {
  text-align: center;
 }
 footer li {
  display: inline-block;
  text-align: center;
  margin: 0 3.21vw;
 }
 footer p {
  text-align: center;
  margin-top: 2.59vw;
  font-size: 1em;
 }
}