@charset "UTF-8";
/* CSS Document */

/* reset css */
body,article,aside,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,legend,main,section,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{font-size:100%}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary{display: block;}
*{
  box-sizing: border-box;
}

@font-face {
  font-family: 'HigureGothic';
  src:
    url('./fonts/HigureGothic-Black.ttf') format('opentype'),
    url('./fonts/HigureGothic-Bold.ttf') format('opentype'), 
    url('./fonts/HigureGothic-Medium.ttf') format('opentype'),
    url('./fonts/HigureGothic-Regular.ttf') format('opentype'), 
    url('./fonts/HigureGothic-Light.ttf') format('opentype'),
}

body {
  background-color: #fff;
  color: #222;
  font-family: 'Noto Sans Japanese',
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
a {
	color: #0693cd;
	text-decoration: none;
}
a:visited {
	color: #0693cd;
}
a:focus {
	outline: none;
}
a:active,
a:hover {
	-moz-opacity: 0.7;
	opacity: 0.7;
}
a:hover img {
	-moz-opacity: 0.7;
	opacity: 0.7;
}
img, video, object {
	border: none;
	display: inline-block;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
.sp-only {
  display: none;
}
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
  .sp-only {
    display: block;
  }
  .pc-only {
    display: none;
  }
}


/*========================================================
共通
========================================================*/
.container {
  max-width: 1280px;
  margin: 0 auto;
}


/*========================================================
header
========================================================*/
.header {
  padding: 10px 0;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #23ac38;
  z-index: 1000;
  transition: transform 0.3s ease;
}
.header.hide {
  transform: translateY(-100%);
}

.header ul {
  display: flex;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}
.header li {
  text-align: center;
  width: 25%;
}
.header li a {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 700;
  padding: 5px;
}
@media (max-width: 500px) {
  .header {
    position: sticky;
  }
  .header ul {
    justify-content: center;
  }

  .header li a {
    padding: 5px 1px;
  }
  .header li:nth-child(1) {
    width: 18%;
  }
  .header li:nth-child(2) {
    width: 18%;
  }
  .header li:nth-child(3) {
    width: 32%;
  }
  .header li:nth-child(4) {
    width: 32%;
  }
}

/*========================================================
logo
========================================================*/
.logo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 480px;
  margin: 0 auto 0;
  width: 100%;
  padding: 15px 0;
}
.logo img {
  width: 50%;
}
.logo p {
  font-size: 20px;
  margin-left: 10px;
  text-align: center;
}
@media (max-width: 500px) {
  .logo {
    margin: 0 auto;
    width: 70%;
  }
  .logo p {
    font-size: 14px;
  }
}  

/*========================================================
hero-section
========================================================*/
.eyecatch {
  margin: 0 auto 0;
  max-width: 900px;
  position: relative;
  width: 100%;
}
.lp-title {
  display: block;
  margin: 0 auto;
  padding: 20px 10px 0;
  width: 95%;
}
.free-sticker {
  animation: bounce 1s ease infinite;
  animation-delay: 2s; /* 初回表示から5秒後に開始 */
  animation-play-state: paused; /* 最初は停止 */
  display: block;
  margin: 5px auto 15px;
}
.free-sticker-pc {
  position: absolute;
  top: 0;
  right: -50px;
}
.free-sticker-sp {
  display: block;
  max-width: 320px;
  margin: 0 auto;
  width: 70%;
}

.free-sticker.bounce-once {
  animation: bounce-once 1s ease;
}

/* アニメーションキー */
@keyframes bounce-once {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

@media (max-width: 1024px) {
  .lp-title {
    width: 85%;
  }
  .free-sticker-pc {
    position: absolute;
    top: 0;
    right: 0px;
  }
}
@media (max-width: 767px) {
  .lp-title {
    width: 100%;
  }
  .free-sticker-pc {
    display: none;
  }
}

/*========================================================
#about.lp-section
========================================================*/
#about.lp-section {
  background-color: #fff;
  padding: 50px 0 80px;
  position: relative;
}
.cal-frame {
  margin: 30px auto 50px;
  max-width: 900px;
}

.cal-sp {
  display: none;
}
@media (max-width: 767px) {
  .cal-sp {
    display: block;
  }
  .cal-pc {
    display: none;
  }
}

.cta {
  padding: 0 20px 20px;
}
.cta a {
  background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
  border-radius: 50px;
  color: #fff;
  display: block;
  font-family: 'HigureGothic';
  font-size: 28px;
  font-weight: 900;
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
  line-height: 1.4;
  margin: 0 auto 20px;
  max-width: 480px;
  overflow: hidden;
  padding: 25px 10px;
  position: relative;
  text-align: center;
  text-decoration: none;
}
@media (max-width: 500px) {
  .cta a {
    font-size: 20px;
  }
}

/*========================================================
#sanka.lp-section
========================================================*/
#sanka.lp-section {
  background-color: #fff;
  margin-bottom: -80px;
  padding: 50px 0 260px;
  position: relative;
}
.sanka-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 20px;
  max-width: 900px;
}
.sanka-box {
  border: 4px solid #ccc;
  border-radius: 8px;
  display: flex;
    align-items: center;
  padding: 10px 15px;
  width: calc(25% - 7.5px);
}
.sanka-box p {
  font-size: 21px;
  font-weight: 900;
  width: 60%;
}
.sanka-img {
  width: 40%;
}
.sanka-box img {
  display: block;
  width: 100%;
}
.sanka-caution {
  color: #cc0000;
  margin: 15px auto;
  padding: 0 30px;
  text-align: center;
}
.sanka-kome {
  color: #cc0000;
  font-size: 11px;
}
@media (max-width: 768px) {
  .sanka-frame {
    margin: 0 20px 20px;
  }
  .sanka-box {
    justify-content: center;
    width: calc(50% - 5px);
  }
  .sanka-box img {
    max-width: 60px;
  }
}
@media (max-width: 500px) {
  .sanka-box p {
    font-size: 16px;
    width: 70%;
  }
  .sanka-img {
    width: 30%;
  }
}

/*========================================================
#profile.lp-section
========================================================*/
#profile {
  line-height: 1.4;
  margin-top: -120px;
  position: relative;
}
#profile:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(225deg, #1F3181 0%, #1F3181 50%, #1e1e8c 100%);
  -webkit-transform: skewY(6deg);
  transform: skewY(6deg);
}

#profile.lp-section {
  padding: 70px 0 120px;
}
#profile .title-frame {
  padding: 10px;
  position: relative;
  width: 100%;
  z-index: 2;
}
#profile .title-box {
  max-width: 1280px;
  margin: 0 auto;
}
#profile .title-box h2 {
  color: #fff;
  font-family: 'HigureGothic';
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.profile-frame {
  display: flex;
  align-items: center;
  margin: 50px auto;
  width: 90%;
}
.profile-box-text {
  padding: 20px;
  width: 60%;
}
.profile-box-img {
  padding: 20px;
  width: 40%;
}
.profile-box-img img {
  display: block;
  margin: 0 auto;
  width: 80%;
}
.profile-name-box {
  padding: 10px 0;
}
.profile-name-box p {
  color: #fff;
  font-size: 24px;
  font-weight: 100;
}
.profile-name-box h3 {
  color: #fff;
  font-family: 'HigureGothic';
  font-size: 46px;
  font-weight: 500;
}
.profile-text-box {
  padding: 10px 0;
}
.profile-text-box h3 {
  background-color: #FFEE00;
  color: #111;
  display: inline-block;
  font-family: 'HigureGothic';
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin: 30px 0 15px;
  padding: 10px 15px;
}
.profile-text-box p {
  color: #fff;
  font-size: 18px;
}
.profile-box-img {
}
.profile-box-img img {
  border-radius: 25px;
}
@media (max-width: 767px) {
  #profile.lp-section {
    padding: 70px 0 100px;
  }
  #profile .title-box h2 {
    font-size: 24px;
  }
  .profile-frame {
    display: block;
  }
  .profile-box-text,
  .profile-box-img {
    width: 100%;
  }
  .profile-box-img img {
    margin: 0 auto;
    width: 70%;
  }
  .program-box-l {
    display: none;
  }
}

/*========================================================
#target.lp-section
========================================================*/
#target {
  line-height: 1.4;
  margin-top: -120px;
  padding: 60px 0 120px;
  position: relative;
}
#target:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  -webkit-transform: skewY(6deg);
  transform: skewY(6deg);
}
#target .container {
  max-width: 1024px;
  position: relative;
  z-index: 5;
}
#target .title-frame {
  padding: 10px;
  width: 100%;
}
#target .title-box {
  max-width: 1280px;
  margin: 0 auto;
}
#target .title-box h2 {
  color: rgba(0 0 0 / 0);
  font-family: 'HigureGothic';
  font-size: 60px;
  font-weight: 500;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px #23ac38;
}
.target-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 10px 20px;
  max-width: 1280px;
}
.target-box {
  border: 4px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  width: calc(25% - 7.5px);
}
.target-box p {
  font-size: 21px;
  font-weight: 900;
  text-align: center;
  width: 100%;
}
.target-img {
  width: 100%;
}
.target-box img {
  display: block;
  margin: 0 auto;
  width: 70%;
}
.target-caution {
  color: #666;
  margin: 15px auto;
  padding: 0 30px;
  text-align: center;
}

@media (max-width: 1024px) {
  .target-box p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .target-box p {
    font-size: 15px;
  }
}
@media (max-width: 580px) {
  #target .title-box h2 {
    font-size: 40px;
    text-align: center;
    text-shadow: 2px 2px #23ac38;
  }
  .target-frame {
    margin: 0 20px 20px;
  }
  .target-box {
    width: calc(50% - 5px);
  }
  .target-box img {
    width: 50%;
  }
  .target-box p {
    font-size: 16px;
  }
  .target-img {
  }
}
/*========================================================
#program.lp-section
========================================================*/
#program {
  margin-top: -120px;
}
#program.lp-section {
  padding: 180px 0 50px;
  background-image: url('./images/office_wall01.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
#program .title-frame {
  padding: 10px;
  width: 100%;
}
#program .title-box {
  max-width: 1280px;
  margin: 0 auto;
}
#program .title-box h2 {
  color: rgba(0 0 0 / 0);
  font-family: 'HigureGothic';
  font-size: 60px;
  font-weight: 500;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px #23ac38;
}
.program-frame {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.program-box-l {
  padding: 20px;
  width: 35%;
}
.program-box-l img {
  width: 90%;
}
.program-box-r {
  padding: 0 20px;
  width: 65%;
}
.program-content {
  background-color: #fff;
  padding: 30px;
}
.program-item {
  display: flex;
    align-items: center;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 6px 10px;
}
.program-item p {
  font-family: 'HigureGothic';
  line-height: 1.4;
  font-weight: 300;
}
.program-num {
  background-color: #FFEE00;
  border-radius: 50%;
  color: #111;
  display: block;
  font-weight: 900;
  line-height: 1.2;
  margin-right: 10px;
  padding: 10px;
}
@media (max-width: 767px) {
  #program.lp-section {
    padding: 120px 0 50px;
  }
  #program .title-frame {
    padding: 20px 10px;
  }
  .program-frame {
    display: block;
  }
  .program-box-l {
    width: 100%;
  }
  .program-box-r {
    width: 100%;
  }
  .program-content {
    padding: 20px;
  }
  .program-item {
    padding: 6px 0;
  }
  .program-item p {
    font-size: 21px;
    padding: 6px 0;
  }
}

/*========================================================
#flow.lp-section
========================================================*/
#flow {
  line-height: 1.4;
  padding: 60px 0 120px;
  position: relative;
}
#flow .container {
  max-width: 1024px;
  position: relative;
  z-index: 5;
}
#flow .title-frame {
  padding: 10px;
  width: 100%;
}
#flow .title-box {
  max-width: 1280px;
  margin: 0 auto;
}
#flow .title-box h2 {
  color: rgba(0 0 0 / 0);
  font-family: 'HigureGothic';
  font-size: 70px;
  font-weight: 500;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px #23ac38;
}
.flow-cta-frame {
  margin: 0 10px 10px;
  max-width: 1024px;
}
.flow-cta-box {
  border: 4px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
}
.flow-cta-box p {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  width: 100%;
}
.flow-cta-box img {
  display: block;
  max-width: 140px;
  margin: 0 auto;
  width: 100%;
}
.flow-frame {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 10px 20px;
  max-width: 1024px;
}
.flow-box {
  border: 4px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  width: calc(33.3333% - 7px);
}
.flow-box p {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  width: 100%;
}
.flow-box-inner-caution {
  color: #c00;
  font-size: 12px;
  margin: 8px 0 0;
  text-align: center;
}
.flow-img {
  width: 100%;
}
.flow-box img {
  display: block;
  max-width: 140px;
  margin: 0 auto;
  width: 100%;
}
.flow-caution {
  color: #666;
  margin: 15px auto;
  padding: 0 30px;
  text-align: center;
}
#flow .cta {
  padding-bottom: 0;
}
#flow .cta a {
  font-size: 20px;
  margin-bottom: 5px;
  padding: 15px;
}
@media (max-width: 1024px) {
  .flow-box p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .flow-box p {
    font-size: 15px;
  }
}
@media (max-width: 580px) {
  #flow {
    margin-top: 20px;
  }
  #flow .title-box h2 {
    font-size: 32px;
    text-align: center;
    text-shadow: 2px 2px #23ac38;
  }
  .flow-cta-frame {
    margin: 0 20px 20px;
  }
  .flow-frame {
    margin: 0 20px 20px;
  }
  .flow-box {
    width: calc(50% - 5px);
  }
  .flow-box p {
    font-size: 24px;
    margin: 10px 0 0;
  }
  .flow-box {
    width: 100%;
  }
}
/*========================================================
#contact.lp-section
========================================================*/
#contact {
  background-color: #23ac38;
  position: relative;
}
#contact.lp-section {
  padding: 50px 0;
}
#contact .container {
}
#contact .title-frame {
  padding: 10px;
  width: 100%;
}
#contact .title-box {
  max-width: 1280px;
  margin: 0 auto;
}
#contact .title-box h2 {
  color: #fff;
  font-family: 'HigureGothic';
  font-size: 50px;
  font-weight: 500;
  text-align: center;
}
.contact-frame {
  max-width: 340px;
  margin: 0 auto;
}
.contact-frame p {
  color: #fff;
  margin: 15px 0;
}
.contact-frame p a {
  color: #fff;
  text-decoration: underline;
}
.copy {
  background-color: #23ac38;
  padding: 50px 20px 0;
}
.copy p {
  color: #fff;
  text-align: center;
}



/*========================================================
アニメーション
========================================================*/
.profile-box-text,
.profile-box-img {
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.profile-box-text {
  transform: translateX(-100px); /* 左から */
}
.profile-box-img {
  transform: translateX(100px); /* 右から */
}
.profile-box-text.in-view,
.profile-box-img.in-view {
  opacity: 1;
  transform: translateX(0);
}
.slide-item {
  opacity: 0;
  transform: translateX(-60px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.slide-item.in-view {
  opacity: 1;
  transform: translateX(0);
}
.slide-item-kome {
  font-size: 12px !important;
  margin-top: 25px;
}

.program-item {
  opacity: 0;
  transform: translateX(100px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.program-item.in-view {
  opacity: 1;
  transform: translateX(0);
}
@media screen and (max-width: 768px) {
  .profile-box-text,
  .profile-box-img,
  .slide-item,
  .program-item {
    transform: translateX(0) !important;
  }
}