@charset "utf-8";
@import url("media.css");
@import url("frame.css");


html{overflow-x:hidden;}
html, body{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	color: #333333;
	margin:0 !important;
	padding:0 !important;
	font-size:15px;
	line-height:2.3;
	font-weight:bold;
	background-color: #fff;
	/*background: repeating-conic-gradient(#00a4ff,#00a4ff 8deg,#00c5ff 8deg 16deg);*/
}



p{margin:0;}

.bold{font-weight:bold;}
.center{text-align:center !important;}
.right{text-align:right;}
.left{text-align:left;}
.clear{display:block; overflow:hidden;}
.flex{display:flex !important;}
hr{border:dashed 2px #039;}

ul{margin:0; padding:0;}
li{margin:0; padding:0; list-style:none;}


/*
a{color:#039; outline:none; text-decoration:underline;}
a:hover{color:#039; text-decoration:none;} */

.pc{display:block !important;}
.sp{display:none !important;}


/* header
--------------------------------------------------*/
header{
	width: 100%;
	height: 50px;
	padding:6px 0px 0px 0px;
	text-align: left;
	margin:0; 
}
header img{position: absolute; top:0px; left:0; z-index: 30; max-width:100%; height:50px; margin:0 auto; padding:10px; border:none;}

.animation_main_img01 img{position: absolute; top:0px; left:0; right:0; margin: auto;}

/* contents
--------------------------------------------------*/
.main_container{position: relative; width:100%; z-index: 10; padding:0; height: 900px; justify-content: center; align-items: center; overflow: hidden; background-color: #25BAED;}

.main_contents{position: relative; max-width:1200px; z-index: 5; margin:0 auto; padding:0; height: 1200px;}


.container{padding:30px 0 80px 0;}

/* Content */
.container .content{}


#prologue{position: relative; width: 100%; height:1100px; z-index: 12; margin-top: -100px; padding:120px 0 80px 0; background-image: url(../img/backimg01.png); background-repeat: no-repeat; background-size:cover;}

.instagram-post iframe {
	width: 60%;
  margin-left: auto!important;
  margin-right: auto!important;
}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:50px 0 40px; background-color: #F0F0F0}

#footer .heading{margin-bottom:30px; font-size:1.4rem;}



/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1200px){
	.hoc{max-width:1200px;}
	.hoc02{max-width:1100px;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:850px){

	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
	
	#prologue{position: relative; width: 100%; height:1320px; margin-top: -100px; padding:30px 0 80px 0; background-image: url(../img/backimg01.png); background-repeat: no-repeat; background-size:cover;}
	.hoc02{max-width:80%;}
	
	.group{display: flex;}
	.parent01{flex-direction: column-reverse}
	.parent02{flex-direction: column}
	.pc{display:none !important;}
	.sp{display:block !important;}
}



@media screen and (max-width:1099px){
	.hoc{max-width:90%;}
	.hoc02{max-width:80%;}

	#header{padding:10px 0 8px 0; text-align:center;}
	#header #logo{margin:0 auto; width:80%; }
	#header h1{text-align:center; margin:0 !important; padding:0 !important;}

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block;}

	#breadcrumb{}

	.blur_page{margin:0 auto; width:90%;}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}




.illust_animate {
  animation: illust_animate 1s infinite ease-in-out .2s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  margin-top: 15px;
}
 
@keyframes illust_animate {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, -4px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(4deg);
  }
}

.anim-box.main_move.is-animated {
  animation: main_move 2.5s infinite;
  opacity: 1;
}
@keyframes main_move {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}




.text_animate {
  animation: text_animate 0.6s infinite ease-in-out .1s alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes text_animate {
  0% {
    transform:translate(0, 0) rotate(-5deg);
  }
  50% {
    transform:translate(0, -5px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(5deg);
  }
}



.text_animate02 {
  animation: text_animate02 0.6s infinite ease-in-out .1s alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes text_animate02 {
  0% {
    transform:translate(0, 0) rotate(7deg);
  }
  50% {
    transform:translate(0, 7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(-7deg);
  }
}



.line-container {
  position: absolute;
  width: 200vw;
  height: 200vw;
  left: calc(50% - 100vw);
  top: calc(50% - 100vw);
  background-image: repeating-conic-gradient(
      transparent 0,
      transparent 10deg,
      #51C8F1 10deg,
      #51C8F1 20deg
    ),
    repeating-conic-gradient(
      transparent 0,
      transparent 30deg,
      #51C8F1 30deg,
      #51C8F1 40deg
    ),
    repeating-conic-gradient(
      transparent 0,
      transparent 50deg,
      #51C8F1 50deg,
      #51C8F1 60deg
    ),
    repeating-conic-gradient(
      transparent 0,
      transparent 70deg,
      #51C8F1 70deg,
      #51C8F1 80deg
    )
	;
  -webkit-animation: backgroundAnimation 30s infinite linear;
  animation: backgroundAnimation 30s infinite linear;
}

@-webkit-keyframes backgroundAnimation {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes backgroundAnimation {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 中心のぼかした円 */
.line-container:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    #00c5ff 0%,
    #00c5ff 12%,
    transparent 30%,
    transparent
  );
}

/* mask-imageに対応している場合のスタイル */
@supports (
    (-webkit-mask-image: radial-gradient(white, white))
    or
    (mask-image: radial-gradient(white, white))
  )
  and (not (-ms-ime-align: auto)) {
  .line-container {
    /* 中心をくり抜く */
    -webkit-mask-image: radial-gradient(
      transparent 0%,
      transparent 12%,
      white 30%,
      white
    );
    mask-image: radial-gradient(
      transparent 0%,
      transparent 12%,
      white 30%,
      white
    );
  }
  .line-container:before {
    display: none;
  }
}

/* 縦持ちのときの対応 */
@media (orientation: portrait) {
  .line-container {
    width: 200vh;
    height: 200vh;
    left: calc(50% - 100vh);
    top: calc(50% - 100vh);
  }
}