@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

html {
  font-size: 62.5%;
}
body, * {
  margin: 0;
  padding: 0;
}
body {
  background: #C1CEE0;
}
body {
  animation: notScroll 3s forwards;
}
@keyframes notScroll {
  0%{
    overflow: hidden;
  }
  95%{
    overflow: hidden;
  }
  100%{
    overflow: auto;
  }
}
.only-sp {
  display: none;
}
/* loading  */
.loading-wrapper {
  background: #C1CEE0;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 4;
  animation: opacity 3s forwards;
}
.loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes opacity {
  0% {
  opacity: 1;
  }
  80% {
    opacity: 1;
  }
  99% {
    left: 0;
  }
  100% {
    opacity: 0;
    left: 100vw;
  }
}
.loading-content p {
  font-size: 2.5rem;
  font-family: linotype-didot, serif;
font-weight: bold;
}
.loading-bar {
  background: #A1ADBF;
  height: 2px;
  position: relative;
  margin-top: 5%;
  border-radius: 30px;
}

.loading-bar::before {
  -webkit-animation: width-0to100 2s forwards;
  -moz-animation: width-0to100 2s forwards;
  -o-animation: width-0to100 2s forwards;
  -ms-animation: width-0to100 2s forwards;
  animation: width-0to100 2s forwards;
  border-radius: 30px;
  background: #22293C;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
}

@keyframes width-0to100 {
  0% {
    width: 0;
  }
  30% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* header */
header {
  position: relative;

}
.header-fixed-content {
  padding: 2.5% 0;
  position: fixed;
  width: 100vw;
  background: linear-gradient(to top,#9DDBFC , #91D4FE);
  z-index: 3;
}
header img {
  position:  absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17vw;
}
header nav ul {
  position: absolute;
  width: 24vw;
  top: 50%;
  right: 3vw;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}
header nav ul li {
  list-style: none;
  font-size: 1.5rem;
}
header nav ul li a {
  text-decoration: none;
  color: #22293C;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
	transition: .5s;
}
header nav ul li a:hover {
	color: #FF83C8;
	transition: .5s;
}
.header-toggle {
  display: none;
}
/* header end */
/* top */
.scroll-top:before {
    content: '';
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 1vw;
    height: 1vw;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
}
.scroll-top {
    width: 5vw;
    height: 5vw;
    position: fixed;
    bottom: 3vw;
    right: 3vw;
    background: #ff83c8;
    border-radius: 100vw;
}
.top-bg {
  width: 100vw;
}
.top-bg img {
  width: 100%;
}
.top-phone {
  position: absolute;
  top: 10vw;
  left: 0vw;
  width: 37vw;
  z-index: 1;
}
.top-phone img {
  width: 100%;
}
.top-details-content {
  position: absolute;
  top: 7vw;
  left: 3.1vw;
  width: 14vw;
  padding: 1.5% 0;
  background: #fff;
  border-radius: 15px;
	animation: translate 1s infinite alternate ease-in-out;
}
.top-details-relative {
  position: relative;
}
@keyframes translate {
	0% {
		transform:translateY(0px);
	}
	100% {
		transform:translateY(15px);
	}
}
.top-details-content img {
  width: 71%;
  margin: 0 14.5%;
}
.top-details-content p {
  text-align: center;
  font-size: 1.2rem;
  font-family: m-plus-1c, sans-serif;
}
.top-details-content:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
height: 0;
border-style: solid;
border-width: 1.5vw 1.5vw 0 1.5vw;
border-color: #fff transparent transparent transparent;
}
.news-fixed-content {
  position: fixed;
  top: 14%;
  right: -26vw;
  transition: 1s;
  z-index: 3;
  background: #fff;
  border-radius: 50px 0 0 50px ;
  padding: 1% 1vw 1% 1vw;
  width: 45vw;
}
.news-fixed-flex-content {
	display: flex;
	align-items: center;
}
.news-fixed-flex {
	writing-mode: vertical-rl;
	font-size: 2.0rem;
	width: 5%;
	color: #ff0000;
	font-weight: bold;
}
.news-fixed-content.news-open {
  right: 0;
  transition: 1s;
}
.news-text {
  font-size: 1rem;
  border-top: none;
  border-bottom: 1px solid #ddd;
  margin-left: 5%;
  padding-bottom: 2%;
  font-family: m-plus-1c, sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
	width: 90%;
}
.news-date {
  color: #B1B1B1;
}
.news-text a {
  text-decoration: none;
  color: #22293C;
}
.news-text:first-child {
  margin-top: 0;
}
.news-text:last-child {
  border-bottom:  none;
}
.news-new-text {
  font-size: 1.2rem;
  color: #ff0000;
  display: inline-block;
  margin-left: 1%;
}
/* catchcopy */
.catchcopy-bg {
  width: 100vw;
  margin-top: 10%;
}
.catchcopy-bg img {
  width: 100%;
}
/* catchcopy cend */
/* application-download */
.application-download-wrapper {
  width: 60vw;
  margin: 3% 20vw 10% 20vw;
  background: #fff;
  padding: 3% 5vw;
  border-radius: 10px;
}
.application-download-wrapper p {
  font-size: 3.3rem;
  text-align: center;
  color: #E03F78;
  font-family: a-otf-ud-shin-go-pr6n, sans-serif;
}
.application-download-wrapper a {
	text-decoration: none;
}
.application-download-logo {
  width: 26.4vw;
  margin: 3% auto 0 auto;
  text-align: center;
}
.application-download-logo img {
  width: 100%;
}
.application-download-flex-content {
  display: flex;
  justify-content:space-between;
  align-items: center;
  margin-top: 3%;
}
.application-download-flex {
  width: 46.7%;
}
.application-download-flex img {
  width: 100%;
}
/* application-download end */
/* footer */
footer{
  width: 100%;
  background: #758DAF;
}
footer p {
  color: #fff;
  font-family: myriad-pro, sans-serif;
  text-align: center;
  font-size: 2.2rem;
  padding: 1.5% 0;
}
/* contact */
.contact-wrapper {
	margin-top: 10%;
}
.footer-bg {
	width: 100%;
}
.footer-bg img {
	width: 100%;
	vertical-align: bottom;
}
.footer-content {
	padding-bottom: 3%;
}
.footer-flex-wrapper {
	display: flex;
	justify-content: space-between;
	width: 66.4vw;
	margin: 0 16.8%;
	padding-top: 5%;
}

.footer-left {
	width: 20.7vw;
}
.footer-description {
	margin-top: 15%;
	line-height: 2.03rem;
}
.footer-right {
	width: 39.9vw;
}
.contact-name input, .contact-subject input{
	width: 100%;
	border: none;
	outline: none;
	padding: 2% 0 2% 3%;
	border-radius: 10px;
	margin-top: 3%;
	font-size: 1.38rem;
}
.contact-name input {
	margin-top: 0;
}
.contact-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-top: 3%;
}
.contact-mail, .contact-number {
	width: 47%;
}
.contact-mail input, .contact-number input {
	display: inline-block;
	border: none;
	outline: none;
	padding: 5% 0 5% 6%;
	border-radius: 10px;
	font-size: 1.38rem;
	width: 100%;
}
.footer-flex-wrapper a {
	text-decoration: none;
	color: #292F33;
}
textarea {
	width: 100%;
	padding: 2%;
	border: none;
	outline: none;
	margin-top: 3%;
	border-radius: 10px;
	resize: none;
	font-size: 1.38rem;
}
::placeholder {
	font-size: 1.38rem;
}
label img {
	width: 100%;
	margin-top: 4%;
}
input[type="submit"] {
	display: none;
}
.news-top-button a {
	display: inline-block;
    text-decoration: none;
    text-align: center;
    color: #fff;
    background: #FF83C8;
    width: 15vw;
    margin: 5% 17.5vw 0 17.5vw;
    padding: 1.5% 0;
    border-radius: 1000vh;
    font-weight: bold;
	
}
@media (max-width: 768px) {
  .only-pc {
    display: none;
  }
  .only-sp {
    display: block;
  }
  /*
  /* loading  */
  .loading-content p {
    font-size: 1.6rem;
  }


  /* header */
  .header-fixed-content {
    padding: 4% 0;
    background: #91D4FE;
  }
  header img {
    width: 30vw;
  }
  header nav ul {
    width: 100vw;
    top: 0%;
    right: 0vw;
    display: block;
    transform: scale(0);
    text-align: center;
    background: #E03F78;
    opacity: 0;
    transition: .5s;
    padding: 5% 0;
  }
    header nav ul.active {
      transform: scale(1);
      opacity: 1;
      z-index: 1;
      transition: .5s;
    }
  header nav ul li {
    width: 90%;
    margin: 0 5%;
    border-bottom: 1px solid #fff;
    font-size: 1.2rem;
    margin-top: 5%;
    padding-bottom: 2%;
  }
  header nav ul li a{
    color: #fff;
  }
  .header-toggle {
    position: absolute;
    display: block;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    z-index: 4;
  }
  .header-toggle-relative {
    position: relative;
    width: 30px;
    height: 30px;
    z-index: 5;
  }
    .header-toggle-bar {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 3px;
      background: #E03F78;
      transition: .5s;
      z-index: 5;
    }
    .header-toggle-bar:before {
      content: '';
      position: absolute;
      top: -8px;
      left: 0;
      width: 30px;
      height: 3px;
      background: #E03F78;
      transition: .5s;
      z-index: 5;
    }
    .header-toggle-bar.toggle-rotete:before{
      top: 0;
      transform: rotate(45deg);
      background: #fff;
      opacity: 1;
    }
    .header-toggle-bar:after {
      content: '';
      position: absolute;
      top: 8px;
      left: 0;
      width: 30px;
      height: 3px;
      background: #E03F78;
      transition: .5s;
      z-index: 5;
    }
    .header-toggle-bar.toggle-rotete2:after {
      top: 0;
      transform: rotate(-45deg);
      background: #fff;
      opacity: 1;
    }
  /* header end */
  /* top */
  .top-phone {
    top: 25vw;
    left: 20vw;
    width: 60vw;
  }
  .top-details-content {
    position: absolute;
    top: 20vw;
    left: 15vw;
    width: 35vw;
  }
  .top-details-content:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5vw 1.5vw 0 1.5vw;
  border-color: #fff transparent transparent transparent;
  }
  .news-fixed-content {
    display: none;
  }
  .application-download-wrapper p {
    font-size: 1.6rem;
  }
  footer p {
    font-size: 1.6rem;
}
}
@media (max-width: 500px) {
.header-toggle-bar {
    height: 2px;
}
.header-toggle-bar:before {
    height: 2px;
    top: -6px;
}
.header-toggle-bar:after {
    height: 2px;
    top: 6px;
}
.application-download-wrapper p {
  font-size: 1.4rem;
}
  footer p {
    font-size: 1.2rem;
}
}

/* campain */
.campain-img-wrapper {
  position: relative;
	margin-bottom: -3%;
}
.campain-logo {
  position: fixed;
  top: 0;
  right: 2.9vw;
  width: 18.9vw;
  background: #fff;
  padding: 1.5% 3%;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
	z-index: 2;
}
.campain-img {
  width: 100vw;
	vertical-align: bottom;
}
.campain-img-wrapper .campain-ios,
.campain-img-wrapper .campain-android {
  width: 24.1vw;
  position: absolute;
  left: 34.4vw;
}
.campain-img-wrapper .campain-ios {
  top: 43.3%;
}
.campain-img-wrapper .campain-android {
  top: 51.5%;
}
.corporate-wrapper {
  background: #C61E4F;
  padding: 5% 0;
}
.campain-wrapper .corporate-wrapper h2 {
  text-align: center!important;
  font-size: 6.0rem;
  position: relative;
  color: #fff;
}
.corporate-wrapper h2:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 8.6vw;
  transform: translateY(-50%);
  width: 29.3vw;
  height: 2px;
  background: #fff;
}
.corporate-wrapper h2:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8.6vw;
  transform: translateY(-50%);
  width: 29.3vw;
  height: 2px;
  background: #fff;
}
.campain-wrapper .corporate-wrapper ul {
	padding-left: 0!important;
}
.campain-wrapper .corporate-wrapper ul li {
  text-align: center;
  list-style: none;
  margin: 3% 0 0 0;
}
.corporate-wrapper ul li a {
  color: #fff;
  font-size: 4.0rem;
}
.campain-footer-wrapper {
  background: #F0378D;
	margin-bottom: 7%;
}
.campain-footer-wrapper p {
  text-align: center;
  font-size: 2.2rem;
  color: #fff;
  padding: 2% 0;
}
.footer-fixed-wrapper {
  position: fixed;
  bottom: 0;
}
.footer-fixed-flex-content {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  background: #fff;
  padding: 1% 0;
}
.footer-fixed-flex-content img {
  /* width: 32.2vw; */
  width: 20vw;
}
.period-content {
  background: #C61E4F;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
	padding:0.5% 0;
}
@media (min-width: 1919px) {
  html {
    font-size: 83.3125%;
  }
}
@media (max-width: 1024px) {
  html {
    font-size: 44.588%;
  }
}
@media (max-width: 768px) {
	.campain-img-wrapper {
		margin-bottom: -5%;
	}
  .campain-logo {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }
.campain-wrapper .corporate-wrapper h2 {
    font-size: 3.3rem;
  }
  .corporate-wrapper h2:before {
    height: 1px;
  }
  .corporate-wrapper h2:after {
    height: 1px;
  }
  .corporate-wrapper ul li a {
    font-size: 2.2rem;
  }
  .campain-footer-wrapper p {
    font-size: 1.8rem;
  }
	.campain-footer-wrapper {
		margin-bottom: 14%;
	}
  .footer-fixed-flex-content {
    padding: 1% 0;
  }
  .footer-fixed-flex-content img {
    width: 32.2vw;
  }
  .period-content {
    font-size: 1.8rem;
  }
}
@media (max-width: 500px) {
  .campain-logo {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
.campain-wrapper .corporate-wrapper h2{
    font-size: 2.0rem;
  }
  .corporate-wrapper ul li a {
    font-size: 1.6rem;
  }
  .campain-footer-wrapper p {
    font-size: 1.6rem;
  }
  .footer-fixed-flex-content {
    padding: 1% 0;
  }
  .footer-fixed-flex-content img {
    width: 25vw;
  }
  .period-content {
    font-size: 1.6rem;
  }
}