@charset "utf-8";
html,p,h1,h2,h3,h4,h5,h6{font-family: 'Noto Sans JP', sans-serif!important;}
h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3{font-weight: bold!important;}
p,li{font-size: 18px;color:#333;}
.fz16{font-size: 16px!important;}
.fc-ora{color: #fe6d00!important;}
/* ヘッダー */
header {
  background-color: #FFFFFF;
  padding: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  color: #333333;
  text-decoration: none;
}

.uk-container{
  max-width:800px;
}
.fz08{
  font-size: 0.8em!important;
}
.lh20{
  line-height: 2;
}
#hero{
  padding:0;
}
#hero .uk-container{
  padding:0;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255,255,255,1);
  animation: overlayAnimation 1s forwards;
  animation-delay: 2s;
  animation-duration: 2s;
  opacity:1;
}
.hero-text0 {
  width:90%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  animation: catchAnimation 1s forwards;
  animation-delay: 2s;
}
.hero-text1 {
  position: absolute;
  width:100%;
  top: 10%;
  left: -100%;
  /* transform: translate(-50%, -50%); */
  animation: slideInLeft 1s forwards;
  animation-delay: 3s;
}

.hero-text2 {
  position: absolute;
  bottom: 20%;
  right: -100%;
  animation: slideInRight 1s forwards;
  animation-delay: 4s;
}
@keyframes catchAnimation{
  0% {opacity: 1;
  }
  100% {
    opacity: 0;
  }

}
@keyframes overlayAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}

@keyframes slideInLeft {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
    /* transform: translate(-50%, -50%); */
  }
}

@keyframes slideInRight {
  0% {
    bottom: 20%;
    right: -100%;
  }
  100% {
    bottom: 20%;
    right: 5%;
  }
}
/* ヒーローセクション */
/* #hero {
  --s: 82px;
  --c1: #f3f3f3;
  --c2: #ffffff;
  --c3: #ebebeb;
  
  --_g: var(--c3) 0 120deg,#0000 0;
  background:
    conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
    conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
    conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
    conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
    linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                          var(--c1) 0 calc(500%/6),var(--c2) 0);
  background-size: calc(1.732*var(--s)) var(--s);
  padding: 50px;
  position:relative;
  z-index:1;
}

#hero h1 {
  font-size: 32px;
}

#hero h2 {
  font-size: 24px;
}

.main-image img {
  max-width: 100%;
  height: auto;
} */


/* CTAエリア */
#cta {
  padding: 30px 0;
  text-align: center;
  position:relative;
}
#cta .uk-container{
  position:relative;
  z-index:3;
}
#cta h2 {
  color: #FFFFFF;
  font-size: 24px;
  margin-bottom: 20px;
}

.cta-button:hover{
  text-decoration: none;
  opacity: 0.8;
}
.text-white{
  color:#FFFFFF!important;
}
#cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #ED7000, #F89B00);


  transform: skewY(-4deg);
  transform-origin: top left;
  z-index: 2;
}

#cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #ED7000, #F89B00);
  transform: skewY(-4deg);
  transform-origin: top right;
  z-index: 2;
}
.jump-button {
  animation-name: jump;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display:block;
}

@keyframes jump {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.95, 0.95) translate(0%, 5%); }
	30%  { transform: scale(1.05, 0.85) translate(0%, 10%); }
	40%  { transform: scale(0.85, 1.05) translate(0%, -10%); }
	50%  { transform: scale(1.05, 0.95) translate(0%, 5%); }
	75% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

.issue-section {
  text-align: center;
  margin-bottom: 40px;
}

.issue-section h2 {
  margin-bottom: 20px;
}

.issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.issue-list li {
  margin-bottom: 10px;
}
main .uk-section{
  padding:60px 0;
}

#nayami,#misunderstanding {
  position: relative;
  padding: 50px 0 50px;
  background-color: #F5F5F5; /* 背景色 */
}

#nayami::before,#misunderstanding::before {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #F5F5F5;
  transform: rotate(45deg) translate(-50%,25%);
  transform-origin: center center;
  z-index: -1;
}
/* #answer ul{
  list-style-type: none;
  padding: 0;
  margin: 30px 0;
  text-align: center;
}
#answer ul li{
  font-size: 1.6em;
  font-weight: bold;
  display: block;
  background: linear-gradient(to left, #ED7000, #F89B00);
  padding: 10px 20px;
  margin: 10px auto;
  color: white;
  width: fit-content;
} */
span.gradiate{
  font-size: 1.6em;
  font-weight: bold;
  display: block;
  background: linear-gradient(to left, #ED7000, #F89B00);
  padding: 10px 20px;
  margin: 10px auto;
  color: white;
  width: fit-content;
}
.note {
  background: #fff;
  margin:20px;
  padding:20px;
}

.column {
  position: relative;
}

.column:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translate(150%,-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid orange;
}

@media (max-width: 959px) {
  .column:not(:last-child)::after {
    top: calc(100% + 15px);
    right: calc(50% - 15px);
    transform: translate(50%,-50%);
    border-bottom: none;
    border-top: 25px solid orange;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
  }
}
#strengths {
  background-color: #ffffff;
  padding: 100px 0;
}


.point h3 {
  color: #000;
}

.point p {
  color: #000;
}
#counseling{
  position:relative;
  overflow: hidden;
}
.bgCounseling{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 200%;
  transform-origin: top right;
  background-image: url('../img/bgCounseling.webp');
  background-size: cover;
  background-position: center;
  z-index:-1;
}
#counseling .uk-container{
  padding-top:50px;
  padding-bottom:50px;
}

span.gradiate2{
  font-size: 2em;
  font-weight: bold;
  display: block;
  background: linear-gradient(to left, #ED7000, #F89B00);
  padding: 10px 20px;
  margin: 30px 10px;
  color: white;
  width: fit-content;
}
span.white1{
  font-size: 1.4em;
  display: block;
  padding:10px 20px;
  margin:10px auto 30px 0;
  color:#F89B00;
  background:#FFF;
  width: fit-content;
  font-weight: bold;
}
span.white2{
  font-size: 1.4em;
  display: block;
  padding:10px 20px;
  margin:10px 0 10px auto;
  color:#F89B00;
  background:#FFF;
  width: fit-content;
  font-weight: bold;
}
.fz1{font-size: 1em!important;}
footer .uk-section{
  padding:100px 0 20px;
}