/* ========
  text-color
================ */
.black { color: #030303;}
.white { color: white;}
.green { color: #2ecc71;}
.green2 { color: #28813a;}
.blue { color: #292D4E;}
.gold { color: #a19026;}
.orange { color: #F9963C;}

.light-blue { color: #459EB1;}
.red { color: #B1456A;}
.light-gray { color: #F5F5F5;}
.dark-gray { color: #5D5D5D;}

/* ========
  background-color
================ */
.bg-black { background-color: #030303;}
.bg-white { background-color: white;}
.bg-green { background-color: #2ecc71;}
.bg-green2 { background-color: #28813a;}
.bg-purple {  background-color: #673ab7;}
.bg-light-green { background-color: #e3f1e7;}
.bg-light-green-gradation { 
  background: linear-gradient(#e8fbf4, #FCFEE9);
  /*background: linear-gradient(45deg, #e3ffe8, #feffee);*/
}
.bg-green-gradation { background: linear-gradient(45deg, #8CE737, #20BB9A);}
.bg-light-gray { background-color: #f5f6fa;}
.bg-blue { background-color: #2881D9;}
.bg-orange { background-color: #F9963C;}
.bg-yellow { background-color: yellow;}

.bg-light-blue { background-color: #459EB1;}
.bg-light-gray { background-color: #F5F5F5;}
.bg-dark-gray { background-color: #5D5D5D;}
.bg-gray { background-color: #D5D5D5;}



/* ========
  共通設定
================ */

a { 
  text-decoration: none;
  transition:.5s all;
}
a:hover { opacity: .7;}
li { list-style: none;}
.ls-2 { letter-spacing: .2rem;}
.lh-15 { line-height: 1.5;}
.object-fit { object-fit: cover;}
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow-multiple {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: initial;
}
.border-bottom-dashed {
  border-bottom: #28813a 2px dashed;
}



/* ========
  font
================ */
body {
  font-family: 游ゴシック, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-size: 14px;
  color: rgb(51, 51, 51);
  line-height: 1.8;
}
.mincho {
  font-family: 游明朝, YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* ========
  link
================ */
.link {
  position:relative;
}  
.link a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}


/* ========
  header
================ */
header {
	display: none;
}
header#lp-header {
	display: block!important;
}
.hero {
	background-image: url(/assets/images/lp/eyecatch-smp.jpg);
	background-position: center;
	background-size: cover;
}

.cta-button {
	display: inline-block;
	text-decoration: none;
	transition: background-color 0.3s;
}
.cta-button span {
  vertical-align: middle;
}
.cta-button:hover {
	opacity: .7;
}
/* 右から左に移動しながらフェードイン */
.fadeInLeft {
  opacity: 0;
  transform: translateX(-100px);
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
/* フェードインアニメーション */
@keyframes fadeIn {
  0% {
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}


.c-button._shiny {
  display: block;
  position: relative;
  max-width:500px;
  text-decoration: none;
  overflow: hidden;
  transition: 300ms;
}
.c-button._shiny::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #b5e7ff;
  transition: 300ms;
  animation: shinyshiny 4s ease-in-out infinite;
}

.c-button._shiny:hover {
  text-decoration: none;
  color: #fff;
  box-shadow: none;
  -webkit-transform: translateY(3px);
}

@-webkit-keyframes shinyshiny {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}









.gradation-line {
  animation: bg-gradient 5s linear infinite alternate;
  background: linear-gradient(45deg, #8CE737, #ACFAFA, #2881D9, #01cb5f,#8CE737) 0 / 200% 100%;
}
/*.gradation-line-green {
  animation: bg-gradient 15s linear infinite alternate;
  background: linear-gradient(60deg, #28813a, #efd359, #28813a, #28813a, #28813a, #efd359, #28813a, #28813a, #28813a, #efd359, #28813a, #28813a) 0 / 200% 100%;
}*/
.gradation-line-green {
  animation: bg-gradient 15s linear infinite alternate;
  background: linear-gradient(60deg,#efd359, #28813a, #28813a, #efd359, #28813a, #28813a, #efd359) 0 / 200% 100%;
}
.gradation-line-green-speed2 {
  animation: bg-gradient 5s linear infinite alternate;
  background: linear-gradient(60deg,#efd359, #28813a, #28813a, #efd359, #28813a, #28813a, #efd359) 0 / 200% 100%;
}

@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.gradation-cv-btn {
  animation: bg-gradient 5s linear infinite alternate;
  background: linear-gradient(45deg, #2881D9,#8CE737) 0 / 200% 100%;
}
@keyframes bg-gradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

div.test {
  margin: 30px;
  padding: 20px;
}

p.test {
  font-size: 18px;
  display: inline;
  line-height: 2;
}

[data-text-wrap] {
  display: inline-block;
  letter-spacing: .2rem;
}

[data-text-inner] {
  display: block;
  width: 0.001%;
  overflow-x: hidden;
  padding: 4px 0;
  background: linear-gradient( #8CE737, #20BB9A);
  background: white;
}

@keyframes text {
  0% {
    width: 0.001%;
  }
  100% {
    width: 100%;
  }
}


.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
  max-width: 45px;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.80);
  }
}

#hojyokin .border {
  border: solid 5px #28813a!important ;
}

.feature-card .box-shadow{
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#plans .balloon1-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  background: #28813a;
}
#plans .balloon1-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #28813a;
}
#point .rounded-circle {
  width: 100%;
  max-width: 310px;
  height: 310px;
  min-height: 290px;
}

#point .rounded-circle-in {
  width: 100%;
  max-width: 280px;
  height: 280px;
  min-height: 260px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#point .rounded-circle-illust {
  margin: auto;
  z-index: 100;
}
.bg-kakin {
  background-image: url(/assets/images/lp/bg-kakin.png);
  padding: 1px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.bg-tourokufuyou {
  background-image: url(/assets/images/lp/bg-tourokufuyou.png);
  padding: 1px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90% 100%;
}

header .box-shadow,
#point .box-shadow {
  box-shadow: #49ad73 1px 1px 5px;
}

@media screen and (min-width: 769px) {
  .hero {
    background-image: url(/assets/images/lp/eyecatch.jpg);
    /*background-color: var(--light-gray);*/
    padding: 4rem 2rem;
    background-position: center;
    background-size: cover;
  }
  .feature-card .box-shadow{
    min-height: 300px;
    height: 100%;
  }

  /* モダンでクリーンなデザインのベーススタイル */
  :root {
    --primary-color: #2ecc71;
    --secondary-color: #27ae60;
    --text-color: #333;
    --light-gray: #f5f6fa;
  }

  body {
    /*font-family: 'Helvetica Neue', Arial, sans-serif;*/
    line-height: 1.6;
    margin: 0;
    color: var(--text-color);
  }

  header {
    background-color: white;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .bg-tourokufuyou {
    background-size: 65% 100%;
  }

  .container {
  }

  .feature-grid {
    /*display: grid;*/
    /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;*/
    /*margin: 3rem 0;*//
  }




  footer {
    background-color: var(--text-color);
    color: white;
    padding: 2rem;
    margin-top: 4rem;
  }	
}