@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Schoolbell&display=swap');


.font1,
.intro_title,
.con_title{
    font-family:'Yomogi',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.font2,
.font_bar,
.cms_title p,
#page_title p{
    font-family: 'Schoolbell', cursive;
}

.linkStyle{
    color:#bf9d74;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}

/*
html, body{overflow: auto}
.pp-section{position: static}
.fluid{
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
*/


/*--all page---------------------------
-------------------------------------*/
#body{
    overflow:hidden;
}
#pc_nav .tel_bt,
.tel_box a{
    font-family: 'Barlow', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


/*--top page---------------------------
-------------------------------------*/
#video{
    position:relative;
}
#video::before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.1);
    top:0;
    left:0;
    z-index:1;
}
/*main_img*/
.frame{
    background-size:contain;
    background-repeat:no-repeat;
    z-index:2;
}
.frame1{
    width:27vw;
    height:41vh;
    background-image:url(./Dup/img/frame1.png);
    background-position:top left;
    top:0;
    left:0;
}
.frame2{
    width:30vw;
    height:40vh;
    background-image:url(./Dup/img/frame2.png);
    background-position:bottom right;
    bottom:0;
    right:0;
}
.catch_copy {
    z-index: 2;
    width: 28vw;
    height: 62vh;
}
.catch_item{
    z-index:2;
    transform-origin: center center;
    animation: swing 1s steps(2, start) infinite;
}
.catch_item2{
    z-index:2;
    transform-origin: center center;
    animation: swing2 1s steps(2, start) infinite;
}
@keyframes swing {
   0% {
    transform: rotate(20deg);
  }
  to {
    transform: rotate(-10deg);
  }
}
@keyframes swing2 {
   0% {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(20deg);
  }
}
.ryuck{
    top: 26%;
    left: 34%;
    width:76px;
    height:76px;
}
.denkyu{
    top: 43%;
    left: 30%;
    width:65px;
    height:75px;
} 
.benkyo{
    top: 60%;
    left: 35%;
    width:95px;
    height:75px;
} 
.loope{
    top: 42%;
    right: 36%;
    width:55px;
    height:75px;
} 
.sansu{
    top: 57%;
    right: 32%;
    width:65px;
    height:65px;
} 
.ball{
    top: 73%;
    right: 39%;
    width:65px;
    height:65px;
} 

.intro_left{
    background-image:url(./Dup/img/note.png);
    background-size:100% 100%;
}
.intro_left #logo img{
    max-width:400px;
}
.intro_left .intro_wrap .font_bar{
    font-size:3rem;
    line-height:1;
    margin-bottom:0;
}

.intro_img1,.intro_img2,.intro_img3{
    border:10px solid white;
    box-shadow: 3px 3px 10px #adadad;
}
.intro_img1{
    transform: rotate(3deg);
}
.intro_img2{
    transform: translateY(-20px) rotate(4deg);
}
.intro_img3{
    transform: translateY(-50px) rotate(-5deg);
}

#contents.trans .con_wrap{
    z-index:2;
}
#contents .con_bg{
    background-image:url(./Dup/img/bg1.png),url(./Dup/img/bg2.png);
    background-repeat:no-repeat,no-repeat;
    background-position:left bottom,right top;
}
/*流体シェイプ*/
.fluid {
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
  z-index:1;
}
.fluid1{
  width:40vh;
  height: 40vh;
  background:#1e90ff;  
  top:-15%;
  right:-3%;    
}
.fluid2{
  width:28vh;
  height: 26vh;
  background:#6ed1ba;  
  top:15%;
  right:-5%;    
}
.fluid3{
  width:25vh;
  height: 25vh;
  background:#ffe31e;  
  bottom:3%;
  right:49%;    
}


@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}

.con_no{
    font-size:3rem;
    line-height:1;
}

.cms_title{
    border:0;
    background-image:url(./Dup/img/cms_title.png);
    background-repeat:no-repeat;
    background-position:center center;
    padding-bottom: 20px;
    margin-bottom: 50px;
}
#top_cms .cms_title span{
    display:none;
}


/*--under page---------------------------
-------------------------------------*/



/* ---------- responsive ---------- */
@media screen and (max-width: 1280px){
.catch_item{
    width:5%!important;
}
.catch_item2{
    width:4%!important;
}
.catch_copy{
    height:21vh;
    top:30%;
}
.fluid1{
    top:-1%;
}
.fluid2{
    top:7%;
}
.loope{
    top:15%;
}
.sansu{
    top: 32%;
}
.ball {
    top: 62%;
}
}


@media screen and (max-width: 1100px){
.benkyo {
    top: 53%;
}
.ball {
    top: 55%;
}
}


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#custom{
    height:auto!important;
}
.catch_copy{
    top:50%;
}
.ball {
    top: 70%;
}
.sansu {
    top: 45%;
}
.loope {
    top: 20%;
}
.fluid1 {
    top: -7%;
    width: 25vh;
    height: 25vh;
}
.fluid2{
    width:17vw;
    height:17vh;
    right:-8%;
}
.fluid3{
    width:18vw;
    height:17vh;
    bottom:23%;
    right:auto;
    left:-4%;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
.catch_copy {
    width:40vw;
    height: 22vh;
}
.catch_item{
    width:8%!important;
}
.catch_item2{
    width:7%!important;
}
.ryuck{
    top:18%;
    left:25%;
}
.denkyu{
    left:26%;
}
.benkyo {
    top: 64%;
    left: 20%;
}

.loope {
    top: 27%;
    right: 26%;
}
.sansu {
    top: 54%;
    right: 24%;
}
.ball {
    top: 77%;
    right: 32%;
}
.intro_left {
    background-image: url(./Dup/img/note_sp.png);
}
.intro_title1{
    letter-spacing:-1px;
}
.fluid1{
    top:-3%;
}
.fluid2{
    top:2%;
    width:32vw;
    height:17vh;
    right:-12%;
}
#contents .con_bg{
    background-image:none;
}
.fluid3 {
    width: 31vw;
    height: 17vh;
    bottom: 10%;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){
#page_title h2 span{
    padding-top:5px;
}
}