@charset "UTF-8";
/* CSS Document */
main {
  background: linear-gradient(90deg, #fff 15%, #fff 50%, #fff 85%);
}
a:hover {
  opacity: 1.0;
}
.section-top_image {
  width: 100%;
  height: 120vh;
  padding: 340px 0 0;
  margin-top: -200px;
  margin-bottom: 100px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
  z-index: 90;
  position: relative;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, 'serif';
}
.section-top_image a {
  text-decoration: none;
}
.section-top_image-pc {
  height: 126px;
}
.section-top_image-sp {
  display: none;
}
.section-top_image h2 {
  color: #FFF;
  font-size: 120px;
  width: 600px;
  margin: 50px auto 0;
  text-align: right;
  font-weight: 300;
}
/*
.section-top_background {
  position: absolute;
  width: 92vw;
  height: 54vw;
  left: 5vw;
  top: -4vw;
  animation: flash 0.6s ease infinite alternate;
}
*/
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.82;
  }
}
@media (max-width: 1260px) {
.section-top_image {
  margin-top: -140px;
}
}
@media (max-width: 960px) {
.section-top_image-sp {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 65px;
}
.section-top_image-pc {
  display: none;
}
.section-top_image h2 {
  font-size: 60px;
  width: 80px;
  margin-top: 20px;
}
.section-top_background {
  display: none;
}
}

@media (max-width: 380px) {
.section-top_image-sp {
  display: block;
  margin: 0 auto;
  max-width: 80%;
}
.section-top_image-pc {
  display: none;
}
.section-top_image h2 {
  font-size: 40px;
  width: 10px;
  margin-top: 14px;
}
}
@media (max-width: 290px) {
.section-top_image h2 {
  font-size: 30px;
  width: 10px;
  margin-top: 14px;
}
}

.section-about {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: -100px;
}
.section-about img {
  max-width: 400px;
}
.section-about h1 {
  margin: auto;
  color: #1caec8;
  font-size: 2.4rem;
  text-align: left;
  font-weight: 400;
  line-height: 5.2rem;
  position: relative;
  z-index: 200;
}
.section-about h1 span {
  font-size: 3.4rem;
  font-weight: 600;
}
.section-about_discription {
  display: flex;
  width: 80vw;
  max-width: 1060px;
  margin: 0 auto;
  padding: 40px;
}
@media (max-width: 1220px) {
.section-about h1 span {
  margin: 0 auto 60px;
  font-size: 2.2rem;
  line-height: 46px;
  font-weight: 600;
}
.section-about h1 {
  font-size: 1.6rem;
  line-height: 36px;
}
.section-about img {
  max-width: 300px;
}
}
@media (max-width: 960px) {
.section-about_discription {
  display: flex;
  flex-direction: column;
  width: 80vw;
  margin: 0 auto;
  padding: 40px 0;
}
.section-about img {
  margin: 0 auto 40px;
  max-width: 60vw;
}
}
@media (max-width: 640px) {
.section-about h1 span {
  font-size: 1.8rem;
}
.section-about h1 {
}
}
.section-worries {
  position: relative;
  text-align: center;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw));
  margin-bottom: 60px;
  height: auto;
  background: linear-gradient(90deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 10s ease infinite;
}
@keyframes bggradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.section-worries_discription {
  color: #FFF;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.20);
  width: 80vw;
  max-width: 1060px;
  margin: 80px auto;
  display: flex;
}
.section-worries_discription-in {
  flex-direction: column;
  padding: 40px;
}
.section-worries img {
  margin: auto;
  padding: 40px 0 40px 40px;
  max-width: 360px;
  z-index: 100;
}
.section-worries_discription h3 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #FFF;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 54px;
  position: relative;
  z-index: 100;
}
.section-worries_discription p {
  font-size: 1.8rem;
  margin-top: 16px;
  color: #FFF;
  line-height: 36px;
  position: relative;
  z-index: 100;
}
@media (max-width: 960px) {
.section-worries h3 {
  font-size: 3.0rem;
}
.section-worries_discription {
  display: block;
  width: 90vw;
}
.section-worries_discription img {
  display: block;
  margin: 0 auto;
  padding: 40px 0 40px;
  max-width: 360px;
}
.section-worries_discription p {
  margin-top: 0;
  font-size: 1.6rem;
  line-height: 34px;
}
.section-worries_background {
  display: none;
}
.section-worries_discription-in {
  flex-direction: column;
  padding: 0 40px 40px;
}
}
@media (max-width: 660px) {
.section-worries h3 {
  font-size: 1.8rem;
  line-height: 3.0rem;
}
.section-worries_discription img {
  display: block;
  margin: 0 auto;
  padding: 40px 0 40px;
  max-width: 60vw;
}
}
@media (max-width: 360px) {
.section-worries_discription {
  display: block;
}
.section-worries_discription img {
  width: auto;
}
}

.section-price_info {
  position: relative;
  text-align: center;
  width: 100%;
  padding-bottom: 60px;
  margin-top: -60px;
  padding-top: 60px;
}
.section-price_info h2 {
  margin: 0 auto 40px;
  color: #1caec8;
  font-size: 4.6rem;
  font-weight: 600;
  font-family: "筑紫A丸ゴシック";
  position: relative;
  z-index: 100;
}
.section-price_info h2 span {
  color: #3e3e3e;
}
.section-price_info h3 {
  margin: 0 auto 80px;
  color: #3e3e3e;
  font-size: 1.8rem;
  font-weight: 200;
  position: relative;
  z-index: 100;
}
.section-price_info ul {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.section-price_info ul li {
  list-style: none;
  float: left;
  margin: 0 40px;
}
.section-price_info ul li a {
  text-decoration: none;
}
.section-price_info ul li img {
  max-width: 300px;
  margin-bottom: 40px;
  position: relative;
  z-index: 100;
}
.section-price_info ul li p {
  font-size: 1.8rem;
  color: #000;
  line-height: 24px;
  position: relative;
  z-index: 100;
}
.pli1 {
  padding-top: 18px;
}
.section-price_info ul li h4 {
  font-size: 4.2rem;
  color: #3e3e3e;
  padding-top: 20px;
}
.section-price_info ul li h4 span {
  font-size: 1.8rem;
}
.section-price_info_button {
  position: relative;
  margin: 0 auto;
  font-size: 2.6rem;
  font-weight: 600;
  background-color: #F76CA6;
  width: 380px;
  height: 60px;
  border-width: inherit;
  border-radius: 30px;
  color: #FFF;
  transition: all .2s;
}
/*hoverした際の変化*/
.section-price_info_button:hover{
  background: linear-gradient(-30deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 14s ease infinite;
  color:#fff;
}

.section-price_info_button span{
    /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  display: block;
  white-space: nowrap;
}

.section-price_info_button::before {
  content: '';
    /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
    /*キラッと光る形状*/
    width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.section-price_info_button:hover::before {
  animation: shine 0.8s;
}
@keyframes shine {
  100% {
    left: 60%;
  }
}

/*差し替わるテキストの設定*/
.section-price_info_button span:nth-child(2){
  opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.section-price_info_button:hover span:nth-child(1){
  opacity:0;/*透過0に*/
}

.section-price_info_button:hover span:nth-child(2){
  opacity:1;/*不透明に*/
}
.section-price_info_button a,.section-price_info_button a:hover,.section-price_info_button a:visited{
    color: #a6428b;
}

.section-price_info_button a {
  text-decoration: none;
}
@media (max-width: 960px) {
.section-price_info h2 {
  font-size: 3.6rem;
}
.section-price_info h3 {
  font-size: 1.6rem;
}
.section-price_info ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.section-price_info ul li {
  margin: 0 40px 80px;
}
.section-price_info ul li img {
  width: 80vw;
}
.section-price_info_button {
  width: 80vw;
}
}
@media (max-width: 480px) {
.section-price_info h2 {
  font-size: 3.0rem;
}
.section-price_info h3 {
  font-size: 1.4rem;
}
}
@media (max-width: 480px) {
.section-price_info h2 {
  padding: 0 20px;
  line-height: 46px;
}
.section-price_info h3 {
  padding: 0 20px;
}
}
@media (max-width: 348px) {
.section-price_info ul li p {
  font-size: 1.6rem;
}
.pli1 {
  padding-top: 0;
}
.section-price_info ul li h4 {
  font-size: 3.6rem;
}
.section-price_info ul li h4 span {
  font-size: 1.6rem;
}
}
@media (max-width: 318px) {
.section-price_info ul li p {
  font-size: 1.4rem;
}
.section-price_info ul li h4 {
  font-size: 3.0rem;
  line-height: 46px;
}
.section-price_info ul li h4 span {
  font-size: 1.4rem;
}
}
.section-quality {
  position: relative;
  text-align: center;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 calc(100% - 7vw));
  margin-bottom: 40px;
  height: auto;
  background: linear-gradient(90deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 10s ease infinite;
}
.section-quality_discription {
  color: #3e3e3e;
  text-align: center;
  width: 80vw;
  max-width: 1080px;
  margin: 80px auto;
  display: flex;
}
.section-quality ul {
  display: flex;
  justify-content: center;
}
.section-quality ul li {
  color: #fff;
  list-style: none;
  float: left;
  margin: 0 50px;
  width: 260px;
}
.section-quality ul li h2 {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.20);
  margin: 0 auto 40px;
}
.section-quality ul li h2 span {
  display: inline-block;
  position: absolute;
  width: 200px;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  font-size: 3.6rem;
  line-height: 54px;
  font-weight: 600;
}
.section-quality ul li h3 {
  font-size: 2.0rem;
  line-height: 30px;
  margin: 0 auto 40px;
}
.section-quality ul li p {
  text-align: left;
  margin: 0 auto 40px;
  max-width: 200px;
}

@media (max-width: 1350px) {
.section-quality_discription {
  width: 92%;
}
}
@media (max-width: 1180px) {
.section-quality_discription {
  width: 100%;
}
}
@media (max-width: 1080px) {
.section-quality_discription {
  max-width: 900px;
}
.section-quality ul li {
  margin: 0 20px;
}
}
@media (max-width: 980px) {
.section-quality ul {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.section-quality ul li {
  color: #fff;
  list-style: none;
  float: left;
  margin: 10px;
  width: 260px;
}
}
@media (max-width: 380px) {
.section-quality ul li {
  width: 260px;
}
}
@media (max-width: 280px) {
.section-quality ul li {
  margin: 10px 0;
  width: 240px;
}
}
.section-contact-e {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 auto 40px;
  max-width: 800px;
}
.section-contact-e h2 {
  font-family: "筑紫A丸ゴシック";
  font-size: 3.6rem;
  margin-bottom: 60px;
}
.section-contact-e img {
  max-width: 200px;
  margin: 0 50px;
}
.section-contact-e_bb p {
  font-family: "筑紫A丸ゴシック";
  font-size: 2.4rem;
  margin-top: 88px;
  margin-bottom: 20px;
}
.section-contact-e_button {
  position: relative;
  font-size: 2.6rem;
  font-weight: 600;
  background-color: #F76CA6;
  width: 400px;
  height: 60px;
  border-color: #a6428b;
  border-width: inherit;
  border-radius: 30px;
  color: #FFF;
  margin: 0 50px;
  transition: all .2s;
}
/*hoverした際の変化*/
.section-contact-e_button:hover{
  background: linear-gradient(-30deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 14s ease infinite;
  color:#fff;
}

.section-contact-e_button span{
    /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  display: block;
  white-space: nowrap;
}

.section-contact-e_button::before {
  content: '';
    /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
    /*キラッと光る形状*/
    width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}
/*hoverした際の移動のアニメーション*/
.section-contact-e_button:hover::before {
  animation: shine 0.8s;
}
@keyframes shine {
  100% {
    left: 60%;
  }
}

/*差し替わるテキストの設定*/
.section-contact-e_button span:nth-child(2){
  opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.section-contact-e_button:hover span:nth-child(1){
  opacity:0;/*透過0に*/
}

.section-contact-e_button:hover span:nth-child(2){
  opacity:1;/*不透明に*/
}
.section-contact-e_button a,.section-contact-e_button a:hover,.section-contact-e_button a:visited{
    color: #a6428b;
}
.section-contact-e_discription {
  display: flex;
  margin: 0 auto;
}
@media (max-width: 830px){
.section-contact-e_discription {
  flex-direction: column-reverse;
  margin: 0 auto;
}
.section-contact-e img {
  margin: 0 auto;
}
.section-contact-e_bb p {
  margin-top: 40px;
}
}
@media (max-width: 520px){
.section-contact-e_button {
  width: 80vw;
  margin: 0 auto;
}
}
@media (max-width: 360px){
.section-contact-e h2 {
  font-size: 2.6rem;
  margin-bottom: 60px;
}
.section-contact-e_bb p {
  font-size: 2.0rem;
}
.section-contact-e_button {
  font-size: 2.0rem;
}
}
.section-flow {
  position: relative;
  text-align: center;
  color: #fff;
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  clip-path: polygon(0 calc(0% + 7vw), 100% 0, 100% 100%, 0 100%);
  height: auto;
  background: linear-gradient(90deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 10s ease infinite;
}
.section-flow_discription {
  margin: 80px auto 0;
}
.section-flow h3 {
  font-size: 3.6rem;
  margin-bottom: 40px;
}
.section-flow p {
  font-size: 2.0rem;
  margin-bottom: 60px;
}
.section-flow_button {
  position: relative;
  font-size: 2.6rem;
  font-weight: 600;
  background-color: #F76CA6;
  width: 400px;
  height: 60px;
  border-color: #a6428b;
  border-width: inherit;
  border-radius: 30px;
  color: #FFF;
  transition: all .2s;
}
/*hoverした際の変化*/
.section-flow_button:hover{
  background: linear-gradient(-30deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 14s ease infinite;
  color:#fff;
}

.section-flow_button span{
    /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top:50%;
    transform:translate(-50%,-50%);
    /*アニメーションの指定*/
    transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  display: block;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.section-flow_button span:nth-child(2){
  opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.section-flow_button:hover span:nth-child(1){
  opacity:0;/*透過0に*/
}

.section-flow_button:hover span:nth-child(2){
  opacity:1;/*不透明に*/
}
.section-flow_button a,.section-flow_button a:hover,.section-flow_button a:visited{
    color: #a6428b;
}

@media (max-width: 960px){
.section-flow h3 {
  padding: 0 20px 40px;
}
.section-flow p {
  font-size: 2.0rem;
  padding: 0 20px 40px;
}
}
@media (max-width: 780px){
.section-flow p {
  font-size: 1.6rem;
}
}
@media (max-width: 580px){
 .section-flow h3 {
  font-size: 2.2rem;
  line-height: 3.6rem;
}
}
@media (max-width: 520px){
.section-flow_button {
  width: 80vw;
  margin: 0 auto;
  padding: 0 20px;
}
  .section-flow h3 {
  padding: 0 20px;
  }
}
@media (max-width: 360px){
.section-flow h3 {
  margin-bottom: 60px;
}
.section-flow p {
  font-size: 1.4rem
}
.section-flow_button {
  font-size: 2.0rem;
}
}
.section-pro {
  position: relative;
  text-align: center;
  width: 100%;
}
.section-pro img {
  max-width: 130px;
  margin-right: 80px;
}
.section-pro h3 {
  margin: auto;
  color: #3E3E3E;
  font-size: 1.6rem;
  text-align: left;
  font-weight: 400;
  line-height: 50px;
  position: relative;
  z-index: 200;
}
.section-pro h2 {
  text-align: left;
  color: #3E3E3E;
  font-size: 3.0rem;
  font-weight: 600;
  margin-bottom: 30px;
}
.section-pro p {
  text-align: left;
  color: #3E3E3E;
  line-height: 32px;
  max-width: 540px;
}
.section-pro_discription {
  display: flex;
  justify-content: center;
  width: 80vw;
  max-width: 1060px;
  margin: 0 auto;
  padding: 60px 40px;
}

.section-pro_discription-in {
  flex-direction: column;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.60);
}
@media(max-width: 960px){
.section-pro_discription {
  flex-direction: column;
  width: 90vw;
  padding: 60px 10px;
}
.section-pro img {
  margin: 0 auto 60px;
}
}
@media(max-width: 320px){
.section-pro_discription {
  padding: 60px 0;
}
.section-pro h3 {
  line-height: 3.0rem;
}
}

.section-contact {
  position: relative;
  text-align: center;
  color: #FFF;
  width: 100%;
  padding-top: 0;
  padding-bottom: 240px;
  background: linear-gradient(90deg, #21d4fd 15%, #b721ff 85%);
  background-size: 280% 280%; /*サイズを大きくひきのばす*/
  animation: bggradient 10s ease infinite;
}
.section-contact h2 {
  margin: 0 auto 20px;
  font-size: 4.6rem;
  font-weight: 600;
  position: relative;
  top: 100px;
  z-index: 100;
}
.section-contact h2 a {
  color: #fff;
}
.section-contact h3 {
  margin: 0 auto 60px;
  font-size: 1.8rem;
  font-weight: 200;
  position: relative;
  top: 100px;
  z-index: 100;
}
.section-contact ul {
  position: relative;
  display: block;
  text-align: center;
  margin: 160px auto 60px;
  width: 66vw;
  z-index: 100;
}
.section-contact ul li {
  display: block;
  margin-bottom: 40px;
}
.section-contact ul li h4 {
  font-size: 2.6rem;
  width: 160px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 20px;
}
.contact-form input[type="text"] {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 10px;
  border: solid 1px #777;
}
.contact-form textarea {
  display: block;
  width: 100%;
  height: 300px;
  padding: 10px 10px;
  border: solid 1px #777;
}
.contact-form a {
  text-decoration: none;
}



.btbt {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  background-color: rgba(240, 110, 30, 1.0);
  border-style: none;
  -webkit-box-shadow: 2px 2px 3px rgb(0 0 0 / 60%);
  box-shadow: 2px 2px 3px rgb(0 0 0 / 60%);
  color: #FFFFFF;
  line-height: 48px;
  width: 300px;
  margin: 0 auto;
}
.section-contact_discription {
  margin: 0 auto;
  text-align: center;
  display: block;
}
.section-contact_discription p {
  line-height: 30px;
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 100;
}
.section-contact_discription h3 {
  font-size: 1.6rem;
  position: relative;
  z-index: 100;
  margin-bottom: 40px;
}
@media (min-width: 1900px) {
  .section-contact_background-under {
    display: none;
  }
}
@media (max-width: 960px) {
.section-contact {
  padding-bottom: 160px;
  }
.section-contact h2 {
  font-size: 4.0rem;
}
.section-contact_discription {
  margin: 0 10vw;
  text-align: center;
  display: block;
}
.section-contact_background {
  display: none;
}
.section-contact_background-under {
  display: none;
}
.btbt {
  line-height: 48px;
  width: 180px;
  margin: 0 auto;
}
}
@media (max-width: 600px) {
.section-contact_discription h2 {
  font-size: 3.0rem;
}
}
@media (max-width: 450px) {
.section-contact_discription h2 {
  font-size: 2.4rem;
}
}
@media (max-width: 360px) {
.section-contact_discription h2 {
  font-size: 1.6rem;
}
}
@media (max-width: 301px) {
.btbt {
  line-height: 48px;
  width: 100px;
  margin: 0 auto;
}
}