@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Poppins:wght@600&display=swap');
*, *::before, *::after {
 box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
 margin: 0;
}
ul[role="list"], ol[role="list"] {
 list-style: none;
 margin: 0;
 padding: 0;
}
html:focus-within {
 scroll-behavior: smooth;
}
body {
 min-height: 100vh;
 text-rendering: optimizeSpeed;
 line-height: 1.5;
}
a:not([class]) {
 text-decoration-skip-ink: auto;
}
img, picture {
 max-width: 100%;
 height: auto;
 vertical-align: bottom;
 /*display: block;*/
}
input, button, textarea, select {
 font: inherit;
}
@media (prefers-reduced-motion: reduce) {
 html:focus-within {
  scroll-behavior: auto;
 }
 *, *::before, *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
 }
}
html {
 height: 100%;
 font-size: 62.5%;
}
body {
 font-family: 'Noto Sans JP', sans-serif;
 font-size: 1.4rem;
 line-height: 1.8;
 color: #111;
 -webkit-text-size-adjust: 100%;
 letter-spacing: .1em;
}
@media screen and (max-width: 767px) {
 body {
  font-size: 1.3rem;
 }
}
.ttl {
 position: relative;
 text-align: center;
}
.ttl.nm {
 top: -1.3em;
}
.ttl span {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 padding: 0 2em;
 font-size: 3.4rem;
 text-align: center;
 line-height: 1;
 letter-spacing: .05em;
}
.ttl span::before, .ttl span::after {
 content: "";
 position: absolute;
 bottom: 10px;
 display: inline-block;
 background-color: #fff100;
 width: 50px;
 height: 5px;
}
.ttl span::before {
 left: 0;
 transform: rotate(60deg);
}
.ttl span::after {
 right: 0;
 transform: rotate(-60deg);
}
@media screen and (max-width: 767px) {
 .ttl.nm {
  top: -.7em;
 }
 .ttl span {
  padding: 0 1.75em;
  font-size: 2.2rem;
 }
 .ttl span::before, .ttl span::after {
  width: 30px;
  height: 4px;
 }
}
.ml0 {
 margin-left: 0 !important;
}
.mt10 {
 margin-top: 10px !important;
}
.mt20 {
 margin-top: 20px !important;
}
.mt30 {
 margin-top: 30px !important;
}
.mt40 {
 margin-top: 40px !important;
}
@media (min-width: 768px) {
 .pc-hide {
  display: none !important;
 }
}
@media (max-width: 767px) {
 .sp-hide {
  display: none !important;
 }
 .mt10 {
  margin-top: 5px !important;
 }
 .mt20 {
  margin-top: 10px !important;
 }
 .mt30 {
  margin-top: 15px !important;
 }
 .mt40 {
  margin-top: 20px !important;
 }
 .sm-ta-c {
  text-align: center;
 }
 .sm-ta-r {
  text-align: right;
 }
 .sm-ta-l {
  text-align: left;
 }
}
@media (min-width: 1025px) {
 .lg-hide {
  display: none !important;
 }
}
@media (min-width: 768px) and (max-width: 1024px) {
 .md-hide {
  display: none !important;
 }
}
@media (max-width: 767px) {
 .sm-hide {
  display: none !important;
 }
}
@media (min-width: 1025px) {
 .lg-visible {
  display: inherit !important;
 }
}
@media (min-width: 768px) and (max-width: 1024px) {
 .md-visible {
  display: inherit !important;
 }
}
@media (max-width: 767px) {
 .sm-visible {
  display: inherit !important;
 }
}
ul.l-normal {
 margin-left: 1em;
 display: block;
}
ul.l-normal li {
 list-style-type: none;
 margin: 0;
 padding: 0;
 text-indent: -1em;
 line-height: 1.4;
 letter-spacing: 0;
}
ul.l-normal li:nth-child(n+2) {
 margin-top: 10px;
}
.t-ind {
 margin-left: 1em;
 text-indent: -1em;
}
.fz13 {
 font-size: 1.3rem;
}
.fz12 {
 font-size: 1.2rem;
}
.note {
 font-size: 1.2rem;
 line-height: 1.5;
}
@media screen and (max-width: 767px) {
 .note {
  font-size: 1.1rem;
 }
}
#scroolltop {
 position: fixed;
 right: 40px;
 bottom: 40px;
 border-radius: 50%;
 background: #fff100;
 color: #fff;
 font-size: 110%;
 text-align: center;
 text-decoration: none;
 z-index: 1000;
 -webkit-transition: all 0.3s;
 -moz-transition: all 0.3s;
 transition: all 0.3s;
 transform: scale(0);
}
#scroolltop:hover {
 opacity: 0.8;
 text-decoration: none;
}
#scroolltop.show {
 transform: scale(1);
 -webkit-transform: translateZ(1);
}
a#scroolltop {
 display: block;
}
#scroolltop:before, #scroolltop:after {
 position: absolute;
 left: 50%;
 content: "";
 width: 0;
 height: 0;
}
#scroolltop:before {
 top: 50%;
}
#scroolltop:after {
 top: 50%;
 z-index: -1;
}
@media screen and (min-width: 768px) {
 #scroolltop {
  width: 60px;
  height: 60px;
 }
 #scroolltop:before, #scroolltop:after {
  margin-left: -6px;
  border: 5px solid transparent;
 }
 #scroolltop:before {
  margin-top: -8px;
  border-bottom: 5px solid #fff100;
 }
 #scroolltop:after {
  margin-top: -9px;
  border-bottom: 5px solid #111;
 }
}
@media screen and (max-width: 767px) {
 #scroolltop {
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
 }
 #scroolltop:before, #scroolltop:after {
  margin-left: -5px;
  border: 5px solid transparent;
 }
 #scroolltop:before {
  margin-top: -6px;
  border-bottom: 5px solid #fff100;
 }
 #scroolltop:after {
  margin-top: -7px;
  border-bottom: 5px solid #111;
 }
}
.btn {
 display: block;
 position: relative;
 max-width: 400px;
 height: 75px;
 margin: 0 auto;
}
.btn a {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 18px 50px;
 height: 100%;
 border-radius: 10px;
 background-color: #129abd;
 font-size: 2.4rem;
 font-weight: 500;
 color: #fff;
 text-align: center;
 text-decoration: none;
 line-height: 1;
 transition: all .2s;
}
.btn.-sm {
 width: 270px;
 height: 64px;
}
.btn.-w500 {
 max-width: 500px;
}
.btn.-sm a {
 padding: 18px 30px;
 font-size: 2rem;
}
.btn.-back {
 width: 140px;
 height: 40px;
}
.btn.-back a {
 justify-content: flex-start;
 padding: 10px 10px 10px 30px;
 background-color: #f9f6f3;
 font-size: 1.4rem;
 color: currentColor;
}
@media screen and (max-width: 767px) {
 .btn.-sm {
  width: 130px;
  height: 42px;
 }
 .btn.-w500 {
  max-width: 100%;
 }
 .btn.-sm a {
  padding: 0 10px;
  font-size: 1.4rem;
  justify-content: flex-start;
 }
 .btn.-back {
  width: 100px;
  height: 30px;
 }
 .btn.-back a {
  justify-content: flex-start;
  padding: 5px 5px 5px 20px;
  font-size: 1.1rem;
 }
}
.btn a .arrow {
 position: absolute;
 top: 50%;
 right: 30px;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 width: 40px;
 height: 40px;
 border-width: 2px;
 border-style: solid;
 border-radius: 50%;
 border-color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
}
.btn.-sm a .arrow {
 right: 15px;
 border-width: 1px;
 width: 26px;
 height: 26px;
}
.btn.-back a .arrow {
 right: inherit;
 left: 10px;
 border-width: 1px;
 border-color: #111;
 width: 16px;
 height: 16px;
}
@media screen and (max-width: 767px) {
 .btn.-back a .arrow {
  left: 5px;
  width: 12px;
  height: 12px;
 }
}
.btn a .arrow em, .btn a .arrow em::before, .btn a .arrow em::after {
 background-color: #fff;
}
.btn.-back a .arrow em, .btn.-back a .arrow em::before, .btn.-back a .arrow em::after {
 background-color: #111;
}
.btn a .arrow em {
 position: relative;
 display: block;
 width: 14px;
 height: 2px;
}
.btn.-sm a .arrow em {
 width: 10px;
 height: 1px;
}
.btn.-back a .arrow em {
 width: 6px;
 height: 1px;
}
.btn a .arrow em::before {
 content: "";
 position: absolute;
 top: 3px;
 right: -2px;
 display: block;
 width: 10px;
 height: 2px;
 transform: rotate(-45deg);
}
.btn a .arrow em::after {
 content: "";
 position: absolute;
 bottom: 3px;
 right: -2px;
 display: block;
 width: 10px;
 height: 2px;
 transform: rotate(45deg);
}
.btn.-sm a .arrow em::before {
 top: 2px;
 width: 6px;
 height: 1px;
}
.btn.-sm a .arrow em::after {
 bottom: 2px;
 width: 6px;
 height: 1px;
}
.btn.-back a .arrow em::before {
 top: 1px;
 right: inherit;
 left: -1px;
 width: 4px;
 height: 1px;
 transform: rotate(-135deg);
}
.btn.-back a .arrow em::after {
 bottom: 1px;
 right: inherit;
 left: -1px;
 width: 4px;
 height: 1px;
 transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
 .btn.-sm a .arrow {
  right: 10px;
  border-width: 1px;
  width: 16px;
  height: 16px;
 }
 .btn.-sm a .arrow em {
  width: 6px;
  height: 1px;
 }
 .btn.-sm a .arrow em::before {
  top: 1px;
  right: -1px;
  width: 4px;
  height: 1px;
 }
 .btn.-sm a .arrow em::after {
  bottom: 1px;
  right: -1px;
  width: 4px;
  height: 1px;
 }
 .btn.-back a .arrow em {
  width: 5px;
  height: 1px;
 }
 .btn.-back a .arrow em::before {
  top: 1px;
  right: inherit;
  left: -1px;
  width: 3px;
  height: 1px;
  transform: rotate(-135deg);
 }
 .btn.-back a .arrow em::after {
  bottom: 1px;
  right: inherit;
  left: -1px;
  width: 3px;
  height: 1px;
  transform: rotate(135deg);
 }
}
.btn a:hover {
 animation: btn-ani .7s alternate;
 background-color: #e37800;
 opacity: 1;
}
.btn.-back a:hover {
 background-color: #fff100;
}
@keyframes btn-ani {
 0% {
  transform: scale(1);
 }
 50% {
  transform: scale(0.95);
 }
 75% {
  transform: scale(1.05);
 }
 100% {
  transform: scale(1);
 }
}
.btn a:hover .arrow {
 background-color: #fff;
}
.btn a:hover em, .btn a:hover em::before, .btn a:hover em::after {
 background-color: #e37800;
}
@media screen and (max-width: 767px) {
 .btn-box .btn-txt {
  margin-bottom: 20px;
 }
 .btn-box {
  margin-top: 60px;
  padding: 0 20px;
 }
 .btn {
  width: 100%;
  height: 75px;
 }
 .btn a {
  padding: 18px 50px;
  font-size: 2rem;
 }
 .btn a .arrow {
  right: 25px;
  width: 25px;
  height: 25px;
  border-width: 1px;
 }
 .btn a .arrow em {
  width: 9px;
  height: 1px;
 }
 .btn a .arrow em::before {
  top: 2px;
  right: -2px;
  width: 7px;
  height: 1px;
 }
 .btn a .arrow em::after {
  bottom: 2px;
  right: -2px;
  width: 7px;
  height: 1px;
 }
}
.wrp {
 overflow-x: hidden;
}
.main {
 position: relative;
 height: 100vh;
 overflow: hidden;
 background: url("../img/main-bg.png") no-repeat right 50% / contain;
}
.main::before {
 content: "";
 position: absolute;
 top: -15%;
 left: -5%;
 width: 1000px;
 height: 1000px;
 background-color: #f9f6f3;
 z-index: -1;
 -webkit-animation: spin 30s linear infinite;
 -moz-animation: spin 30s linear infinite;
 -ms-animation: spin 30s linear infinite;
 -o-animation: spin 30s linear infinite;
 animation: spin 30s linear infinite;
}
@-webkit-keyframes spin {
 0% {
  -webkit-transform: rotate(0deg);
 }
 100% {
  -webkit-transform: rotate(360deg);
 }
}
@-moz-keyframes spin {
 0% {
  -moz-transform: rotate(0deg);
 }
 100% {
  -moz-transform: rotate(360deg);
 }
}
@-ms-keyframes spin {
 0% {
  -ms-transform: rotate(0deg);
 }
 100% {
  -ms-transform: rotate(360deg);
 }
}
@-o-keyframes spin {
 0% {
  -o-transform: rotate(0deg);
 }
 100% {
  -o-transform: rotate(360deg);
 }
}
@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}
.main .m-ttl {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 left: calc(150 / 1920 * 100vw);
 z-index: 2;
 /*left: 10%;*/
}
.main .m-copy {
 position: absolute;
 top: 5%;
 right: 20px;
 text-align: right;
}
.main .m-photo {
 position: absolute;
 top: 3%;
 left: calc(600 / 1920 * 100vw);
 /*left: 40%;*/
}
@media screen and (min-width: 811px) and (max-width: 1080px) {
 .m-ttl img, .m-copy img, .m-photo img {
  width: 70%;
  height: auto;
 }
}
@media screen and (min-width: 811px) {
 .m-sp {
  display: none;
 }
}
@media screen and (max-width: 810px) {
 .main {
  background: none;
  height: auto;
 }
 .main::before {
  display: none;
 }
 .m-ttl, .m-copy, .m-photo {
  display: none;
 }
}
@media screen and (max-width: 767px) {
 .main .m-photo {
  position: absolute;
  top: 3%;
  left: 40%;
 }
}
.sec1 {
 padding: 0 5%;
 background-color: #fff100;
}
.sec1 .inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 100px 0;
}
.sec1 h2 span {
 display: inline;
 padding-left: 0;
 padding-right: .2em;
 background-color: #fff;
 font-size: 3.6rem;
}
.sec1 .box {
 display: flex;
 align-items: center;
}
.sec1 .box .box-l {
 width: 65%;
 padding-right: 50px;
}
.sec1 .box .box-r {
 flex: 1 0 0;
 /*width: 446px;*/
}
.sec1 .box .box-l p {
 margin-top: 30px;
 font-size: 1.8rem;
 font-weight: 500;
}
.sec1 ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-top: 50px;
}
.sec1 li {
 position: relative;
 padding: 20px;
 background-color: #fff;
 font-size: 1.8rem;
}
.sec1 li a {
 color: #dc3865;
 text-decoration: underline;
}
.sec1 li a:hover {
 text-decoration: none;
}
.sec1 h4 {
 position: absolute;
 top: -20px;
 left: 10px;
 background-color: #000;
 color: #fff;
}
.sec1 h4 span {
 padding: 5px;
 background-color: #000;
 color: #fff;
 line-height: 1;
}
@media screen and (max-width: 1024px) {
 .sec1 .inner {
  padding: 60px 0;
 }
 .sec1 .box .box-l {
  width: 55%;
  padding-right: 30px;
 }
 .sec1 h2 {
  text-align: center;
 }
 .sec1 h2 span {
  font-size: 3.2rem;
 }
 .sec1 .box .box-l p {
  margin-top: 30px;
  font-size: 1.6rem;
 }
 .sec1 li:nth-child(n+2) {
  margin-top: 55px;
 }
}
@media screen and (max-width: 767px) {
 .sec1 .inner {
  padding: 50px 0;
 }
 .sec1 h2 {
  text-align: center;
 }
 .sec1 h2 span {
  font-size: 2.6rem;
 }
 .sec1 .box {
  display: block;
 }
 .sec1 .box .box-l {
  padding-right: 0;
  width: 100%;
 }
 .sec1 .box .box-r {
  margin-top: 15px;
  text-align: center;
 }
 .sec1 .box .box-l p {
  margin-top: 20px;
  font-size: 1.5rem;
 }
 .sec1 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
 }
 .sec1 li {
  padding: 25px 15px 15px;
  font-size: 1.5rem;
 }
 .sec1 li:nth-child(n+2) {
  margin-top: 35px;
 }
 .sec1 h4 {
  position: absolute;
  top: -15px;
  left: 10px;
 }
 .sec1 h4 span {
  padding: 5px;
  background-color: #000;
  color: #fff;
  line-height: 1;
 }
}
.sec2 {
 padding: 0 5%;
}
.sec2 .inner {
 max-width: 900px;
 margin: 0 auto;
}
.sec2 .box {
 margin-top: 120px;
 background-color: #f9f6f3;
 text-align: center;
}
.sec2 .box .in {
 padding: 30px 50px 50px;
}
.sec2 .period {
 font-size: 3.8rem;
}
.sec2 .period span {
 font-family: 'Poppins', sans-serif;
 font-size: 5rem;
}
.sec2 .txt {
 font-size: 1.8rem;
 font-weight: 500;
}
.sec2 .btn {
 margin: 30px auto;
}
@media screen and (max-width: 767px) {
 .sec2 .box {
  margin-top: 60px;
 }
 .sec2 .box .in {
  padding: 10px 20px 20px;
 }
 .sec2 .period {
  font-size: 1.5rem;
 }
 .sec2 .period span {
  font-size: 3rem;
 }
 .sec2 .txt {
  font-size: 1.6rem;
 }
 .sec2 .btn {
  margin: 20px auto;
 }
 .sec2 li {
  text-align: left;
 }
}
.sec3 {
 margin-top: 120px;
 background-color: #f9f6f3;
}
.sec3 .inner {
 padding: 50px;
 max-width: 1200px;
 margin: 0 auto;
}
.sec3 ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.sec3 li {
 width: 22%;
}
.sec3 li p {
 padding-top: 10px;
 font-size: 2.2rem;
 text-align: center;
}
.sec3 .btn {
 margin-top: 50px;
}
@media screen and (max-width: 1024px) {
 .sec3 li p {
  font-size: 1.8rem;
 }
}
@media screen and (max-width: 767px) {
 .sec3 {
  margin-top: 60px;
 }
 .sec3 .inner {
  padding: 5%;
 }
 .sec3 li {
  width: 48%;
 }
 .sec3 li:nth-child(n+3) {
  margin-top: 25px;
 }
 .sec3 li p {
  padding-top: 5px;
  font-size: 1.5rem;
 }
 .sec3 .btn {
  margin-top: 30px;
 }
}
.sec4 {
 margin-top: 120px;
 padding: 0 5%;
}
.sec4 .inner {
 max-width: 900px;
 margin: 0 auto;
}
.sec4 .txt {
 padding-top: 30px;
 font-size: 1.8rem;
 text-align: center;
}
.sec4 .txt strong {
 font-weight: 700;
 color: #E37800;
}
.sec4 h4 {
 padding-top: 50px;
 text-align: center;
}
.sec4 h4 span {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 padding: 0 1.3em 0;
 font-size: 2.2rem;
 text-align: center;
 line-height: 1;
 letter-spacing: .05em;
}
.sec4 h4 span::before, .sec4 h4 span::after {
 content: "";
 position: absolute;
 bottom: 10px;
 display: inline-block;
 background-color: #707070;
 width: 24px;
 height: 1px;
}
.sec4 h4 span::before {
 left: 0;
 transform: rotate(60deg);
}
.sec4 h4 span::after {
 right: 0;
 transform: rotate(-60deg);
}
.sec4 .box {
 margin-top: 30px;
 padding: 50px 30px;
 background-color: #f9f6f3;
 box-shadow: 5px 5px 0 0 #d2d2d2;
}
.sec4 dl {
 display: flex;
 align-items: center;
}
.sec4 dt h5 {
 margin: 0;
 font-size: 5rem;
 font-weight: 700;
 color: #e37800;
 line-height: 1;
}
.sec4 dt h6 {
 margin: 5px 0 0;
 font-size: 1.5rem;
 font-weight: 500;
 color: #e37800;
}
.sec4 dt {
 width: 220px;
 text-align: center;
}
.sec4 dt p {
 display: inline-block;
 position: relative;
 color: #e37800;
 font-size: 2rem;
 font-weight: 500;
}
.sec4 dt em {
 position: absolute;
 top: -15px;
 left: 8px;
 font-style: normal;
 font-size: 1rem;
 font-weight: 500;
}
.sec4 dt em.st2 {
 left: 0;
}
.sec4 dt strong {
 font-family: 'Poppins', sans-serif;
 font-size: 7rem;
 line-height: 1;
}
.sec4 dt span {
 display: block;
 text-align: center;
 font-weight: 500;
}
.sec4 dd {
 flex: 1 0 0;
}
.sec4 .pre1 {
 position: relative;
}
.sec4 .pre1 p {
 position: absolute;
 bottom: 0;
 left: 20px;
 font-size: 1.3rem;
}
.sec4 .pre2 {
 display: flex;
}
.sec4 .pre2 li {
 width: 50%;
 text-align: center;
}
.sec4 .pre3 {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 justify-content: space-around;
}
.sec4 .pre3 li {
 width: 30%;
 text-align: center;
}
.sec4 .pre3 li:nth-child(n+4) {
 margin-top: 40px;
}
.sec4 li img {
 margin: 0 auto;
}
.sec4 li p {
 padding-top: 10px;
 font-size: 1.3rem;
 line-height: 1.4;
}
.sec4 .l-normal a {
 color: #dc3865;
 text-decoration: underline;
}
.sec4 .l-normal a:hover {
 text-decoration: none;
}
@media screen and (max-width: 767px) {
 .sec4 {
  margin-top: 60px;
 }
 .sec4 .txt {
  padding-top: 20px;
  font-size: 1.4rem;
 }
 .sec4 .txt strong {
  font-weight: 700;
  color: #E37800;
 }
 .sec4 h4 {
  padding-top: 30px;
 }
 .sec4 h4 span {
  padding: 0 20px 0 30px;
  font-size: 1.6rem;
  line-height: 1.4;
 }
 .sec4 h4 span::before, .sec4 h4 span::after {
  content: "";
  position: absolute;
  bottom: 10px;
  display: inline-block;
  background-color: #707070;
  width: 24px;
  height: 1px;
 }
 .sec4 .box {
  margin-top: 20px;
  padding: 30px 10px;
  box-shadow: 3px 3px 0 0 #d2d2d2;
 }
 .sec4 .box:nth-of-type(n+2) {
  padding-top: 40px;
 }
 .sec4 dl {
  display: block;
 }
 .sec4 dt h5 {
  font-size: 4rem;
 }
 .sec4 dt h6 {
  margin: 5px 0 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: #e37800;
 }
 .sec4 dt {
  width: 100%;
 }
 .sec4 dt p {
  display: inline-block;
  position: relative;
  color: #e37800;
  font-size: 2rem;
  font-weight: 500;
 }
 .sec4 dt em {
  position: absolute;
  top: -15px;
  left: 8px;
  font-style: normal;
  font-size: 1rem;
  font-weight: 500;
 }
 .sec4 dt em.st2 {
  left: 0;
 }
 .sec4 dt strong {
  font-size: 5rem;
 }
 .sec4 dt span {
  display: block;
  text-align: center;
  font-weight: 500;
 }
 .sec4 dd {
  padding-top: 15px;
 }
 .sec4 .pre1 p {
  position: relative;
  bottom: inherit;
  left: inherit;
  font-size: 1.2rem;
  text-align: center;
 }
 .sec4 .pre2 {
  justify-content: center;
 }
 .sec4 .pre2 li {
  width: 50%;
  padding-right: 2%;
  padding-left: 2%;
 }
 .sec4 .pre3 {
  justify-content: center;
 }
 .sec4 .pre3 li {
  width: 50%;
  padding-right: 2%;
  padding-left: 2%;
 }
 .sec4 .pre3 li:nth-child(n+4) {
  margin-top: inherit;
 }
 .sec4 .pre3 li:nth-child(n+3) {
  margin-top: 25px;
 }
 .sec4 li img {
  margin: 0 auto;
 }
 .sec4 li p {
  padding-top: 5px;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: 0;
 }
 .sec4 .l-normal a {
  color: #dc3865;
  text-decoration: underline;
 }
 .sec4 .l-normal a:hover {
  text-decoration: none;
 }
}
.sec5 {
 margin-top: 120px;
}
.sec5 .inner {
 max-width: 900px;
 margin: 0 auto;
}
.sec5 .txt-imp {
 padding: 30px;
 text-align: center;
}
.sec5 .txt-imp span {
 padding: 10px;
 background-color: #fff100;
 font-size: 1.8rem;
 font-weight: 700;
}
.sec5 .txt {
 padding: 30px 0 45px;
 font-size: 1.8rem;
 font-weight: 700;
 text-align: center;
}
.sec5 .txt2 p {
 font-size: 1.6rem;
}
.sec5 .txt2 {
 padding: 25px 0;
}
.sec5 .box {
 margin-top: 30px;
 padding: 50px;
 background-color: #f9f6f3;
}
.sec5 .box h3 {
 font-size: 2.4rem;
 font-weight: 700;
 color: #129abd;
 text-align: center;
}
.sec5 .box h3 + p {
 padding: 20px 0;
 text-align: center;
}
.sec5 .box .in {
 position: relative;
 padding: 35px 20px;
 background-color: #fff;
 border-radius: 5px;
}
.sec5 .box .in.arrow {
 margin-top: 70px;
}
.sec5 .box .in.arrow::before {
 content: "";
 background: url("../img/arrow.svg") no-repeat 0 0 / contain;
 width: 42px;
 height: 25px;
 position: absolute;
 top: -45px;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
}
.sec5 .box .in ul {
 display: flex;
 align-items: center;
}
.sec5 .box .in ul li:first-child {
 width: 30px;
}
.sec5 .box .in ul li:nth-child(2) {
 flex: 1 0 0;
 padding: 0 25px;
}
.sec5 .box .in ul li:last-child {
 width: 378px;
}
.sec5 .box .in.arrow ul li:last-child {
 width: 300px;
 text-align: center;
}
.sec5 .box .in ul li:last-child img {
 margin: 0 auto;
}
.sec5 .box .in ul li p {
 margin-bottom: 10px;
}
.sec5 .box .in ul li:last-child p {
 margin-top: 5px;
 margin-bottom: 0;
 font-size: 1rem;
 text-align: left;
}
/*
.sec5 .box-app{
	padding: 50px;
	border: 2px solid #111;
}
*/
.sec5 .box-app li {
 padding: 25px 0;
}
.sec5 .box-app li:nth-child(n+2) {
 padding: 25px 0;
 border-top: 2px solid #111;
}
.sec5 .box-app li:first-child {
 padding-top: 0;
}
.sec5 .box-app li:last-child {
 padding-bottom: 0;
}
.sec5 .box-app dl {
 display: flex;
}
.sec5 .box-app dt {
 width: 30px;
 font-size: 1.7rem;
}
.sec5 .box-app dd {
 flex: 1 0 0;
 font-size: 1.6rem;
}
@media screen and (max-width: 1024px) {
 .sec5 .txt-imp span {
  font-size: 1.7rem;
 }
}
@media screen and (max-width: 767px) {
 .sec5 {
  margin-top: 60px;
 }
 .sec5 .txt-imp {
  padding: 15px;
  text-align: center;
 }
 .sec5 .txt-imp span {
  padding: 5px;
  font-size: 1.5rem;
 }
 .sec5 .txt {
  padding: 15px 5% 25px;
  font-size: 1.5rem;
  text-align: left;
 }
 .sec5 .txt2 p {
  font-size: 1.4rem;
 }
 .sec5 .box-app dd {
  font-size: 1.4rem;
 }
 .sec5 .box-app {
  padding: 0 5%;
 }
 .sec5 .txt2 {
  padding: 5%;
 }
 .sec5 .box {
  margin-top: 30px;
  padding: 30px 5%;
 }
 .sec5 .box h3 {
  font-size: 2rem;
 }
 .sec5 .box h3 + p {
  padding: 15px 0;
  text-align: left;
 }
 .sec5 .box .in {
  padding: 25px 15px;
 }
 .sec5 .box .in ul {
  display: block;
 }
 .sec5 .box .in.arrow ul li:last-child {
  width: 100%;
 }
 .sec5 .box .in ul li:first-child, .sec5 .box .in ul li:nth-child(2), .sec5 .box .in ul li:last-child {
  width: 100%;
 }
 .sec5 .box .in ul li:first-child, .sec5 .box .in ul li:last-child {
  text-align: center;
 }
 .sec5 .box .in ul li:nth-child(2) {
  padding: 15px 0;
  text-align: left;
 }
}
.sec6 {
 margin-top: 120px;
 padding: 0 5%;
}
.sec6 .inner {
 max-width: 900px;
 margin: 0 auto;
}
.sec6 h4 span {
 padding: 5px 5px 5px 0;
 background-color: #fff100;
 font-size: 1.8rem;
 font-weight: 500;
}
.sec6 h4 + p {
 padding-top: 20px;
 font-size: 1.6rem;
}
.sec6 .btn {
 margin: 20px 0 60px;
}
@media screen and (max-width: 767px) {
 .sec6 {
  margin-top: 60px;
 }
 .sec6 h4 span {
  font-size: 1.6rem;
 }
 .sec6 h4 + p {
  padding-top: 15px;
  font-size: 1.4rem;
 }
 .sec6 .btn {
  margin: 15px 0 50px;
 }
}
.footer {
 margin-top: 90px;
 padding: 5%;
 /*border-top: 8px solid #fff100;*/
 background-color: #129abd;
 color: #fff;
}
.footer .inner {
 max-width: 1200px;
 margin: 0 auto;
}
.footer .box {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
}
.footer .box-l {
 flex: 1 0 0;
}
.footer .box-r {
 width: 256px;
 text-align: center;
}
.footer .box-r img {
 margin: 0 auto;
}
.footer p {
 font-size: 1.4rem;
}
.footer ul {
 margin-top: 15px;
}
.footer li:nth-child(n+2) {
 margin-top: 10px;
}
.footer li {
 font-size: 1.2rem;
}
.footer li span {
 font-size: 1.4em;
}
.footer small {
 display: block;
 margin-top: 5%;
 padding-top: 25px;
 border-top: 1px solid rgba(255, 255, 255, .5);
 text-align: center;
}
.footer em {
 display: block;
 font-style: normal;
 font-size: 1rem;
}
@media screen and (max-width: 767px) {
 .footer {
  margin-top: 60px;
  border-top-width: 4px;
 }
 .footer .box {
  flex-direction: column;
 }
 .footer .box-l {
  order: 2;
  padding-top: 25px;
 }
 .footer .box-r {
  order: 1;
  width: 100%;
 }
 .footer em {
  font-size: .9rem;
 }
}
.header {
 position: relative;
 text-align: center;
 padding: 40px 50px;
 overflow: hidden;
}
.header::before {
 content: "";
 position: absolute;
 top: -800px;
 left: 0;
 right: 0;
 margin-right: auto;
 margin-left: auto;
 width: 1000px;
 height: 1000px;
 background-color: #f9f6f3;
 z-index: -1;
 -webkit-animation: spin 30s linear infinite;
 -moz-animation: spin 30s linear infinite;
 -ms-animation: spin 30s linear infinite;
 -o-animation: spin 30s linear infinite;
 animation: spin 30s linear infinite;
}
.header .-back {
 position: absolute;
 top: 50%;
 left: 40px;
}
@media screen and (min-width: 951px) {
 .header .-back {
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
 }
}
@media screen and (max-width: 950px) {
 .header .-back {
  top: 15px;
  left: 15px;
 }
}
@media screen and (max-width: 767px) {
 .header {
  padding: 40px 50px 20px;
 }
 .header .-back {
  top: 10px;
  left: 10px;
 }
}
.pttl {
 padding: 50px 5%;
 background-color: #fff100;
}
.pttl h2 {
 position: relative;
 text-align: center;
}
.pttl h2 span {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 padding: 0 2em;
 font-size: 4rem;
 text-align: center;
 line-height: 1.3;
 letter-spacing: .05em;
}
.pttl h2 span::before, .pttl h2 span::after {
 content: "";
 position: absolute;
 bottom: 15px;
 display: inline-block;
 background-color: #111;
 width: 50px;
 height: 5px;
}
.pttl h2 span::before {
 left: 0;
 transform: rotate(60deg);
}
.pttl h2 span::after {
 right: 0;
 transform: rotate(-60deg);
}
@media screen and (max-width: 1024px) {
 .pttl {
  padding: 30px 5%;
 }
 .pttl h2 span {
  padding: 0 2.2em;
  font-size: 3.2rem;
 }
}
@media screen and (max-width: 767px) {
 .pttl {
  padding: 20px 5%;
 }
 .pttl h2 span {
  padding: 0 2.5em;
  font-size: 2.2rem;
 }
 .pttl h2 span::before, .pttl h2 span::after {
  bottom: 20px;
  width: 50px;
  height: 3px;
 }
}
.course {
 padding: 5%;
}
.course .inner {
 position: relative;
 max-width: 1200px;
 margin: 0 auto;
 display: flex;
 justify-content: flex-end;
}
.course .inner:nth-of-type(n+2) {
 margin-top: 120px;
}
.course .inner::before {
 content: "";
 position: absolute;
 top: -5px;
 right: 40px;
 display: block;
 background: url("../img/kira.svg") no-repeat 0 0 / contain;
 width: 185px;
 height: 152px;
}
.course .box {
 margin-top: 45px;
 width: calc(100% - 80px);
 padding: 50px 110px 50px 110px;
 background: #f9f6f3;
}
.course .flag {
 position: absolute;
 top: 0;
 left: 0;
}
.course .box h3 span {
 font-size: 3.6rem;
 font-weight: 700;
}
.course .box h3 span {
 display: inline;
 margin-left: .1em;
 margin-right: .1em;
 background: linear-gradient(transparent 60%, #fff100 60%);
}
.course .box h3 + p {
 padding: 30px 0;
 font-size: 1.5rem;
 line-height: 2.2;
}
.course .box .note {
 text-align: right;
}
.course .box ul {
 margin-top: 20px;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.course .box ul li {
 width: 30%;
 margin-right: 5%;
 text-align: center;
}
.course .box ul li:nth-child(3n) {
 margin-right: 0;
}
.course .box ul li:nth-child(n+4) {
 margin-top: 30px;
}
.course .box ul li a {
 color: #111;
 text-decoration: underline;
 transition: all .2s;
}
.course .box ul li a:hover {
 text-decoration: none;
 opacity: .7;
}
.course .box ul li a p {
 padding-top: 10px;
}
@media screen and (max-width: 1024px) {
 .course .inner:nth-of-type(n+2) {
  margin-top: 90px;
 }
 .course .inner::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 40px;
  display: block;
  background: url("../img/kira.svg") no-repeat 0 0 / contain;
  width: 185px;
  height: 152px;
 }
 .course .box {
  margin-top: 45px;
  width: calc(100% - 50px);
  padding: 50px 50px 50px 80px;
 }
 .course .flag {
  left: 10px;
  width: 90px;
  height: auto;
 }
 .course .box h3 span {
  font-size: 3rem;
 }
 .course .box h3 + p {
  padding: 30px 0;
  font-size: 1.3rem;
  line-height: 2.2;
 }
 .course .box ul li a p {
  padding-top: 10px;
  font-size: 1.3rem;
 }
}
@media screen and (max-width: 767px) {
 .course .inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
 }
 .course .inner::before {
  top: 10px;
  right: 20px;
  width: 110px;
  height: 90px;
 }
 .course .box {
  margin-top: 45px;
  width: 100%;
  padding: 50px 15px 25px 15px;
 }
 .course .flag {
  left: 10px;
  width: 60px;
  height: auto;
 }
 .course .box h3 span {
  font-size: 2.6rem;
 }
 .course .box h3 + p {
  padding: 20px 0;
  font-size: 1.4rem;
  line-height: 2;
 }
 .course .box .note {
  text-align: left;
 }
 .course .box ul {
  margin-top: 20px;
  display: block;
 }
 .course .box ul li {
  width: 100%;
  margin-right: 0;
  text-align: center;
 }
 .course .box ul li:nth-child(n+4) {
  margin-top: inherit;
 }
 .course .box ul li:nth-child(n+2) {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #ccc;
 }
 .course .box ul li a {
  color: #111;
  text-decoration: underline;
  transition: all .2s;
 }
 .course .box ul li a:hover {
  text-decoration: none;
  opacity: .7;
 }
 .course .box ul li a p {
  padding-top: 0;
  text-align: left;
 }
 .course .box ul li dl {
  display: flex;
  align-items: center;
 }
 .course .box ul li dl dt, .course .box ul li dl dd {
  padding: 15px;
 }
 .course .box ul li dl dt {
  width: 45%;
 }
 .course .box ul li dl dd {
  flex: 1;
 }
}
.fim-msg {
 padding: 2.5% 5%;
 background-color: #fff100;
 text-align: center;
 font-size: 1.8rem;
 font-weight: 600;
 color: #b22;
}
.period-msg {
 padding: 2.5% 5%;
 background-color: #b22;
 color: #fff;
 text-align: center;
 font-size: 1.8rem;
 font-weight: 600;
}
@media screen and (max-width: 1024px) {
 .fim-msg {
  padding: 2.5%;
  font-size: 1.6rem;
 }
 .period-msg {
  padding: 2.5% 5%;
  background-color: #b22;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
 }
}
@media screen and (max-width: 767px) {
 .fim-msg, .period-msg {
  text-align: left;
  font-size: 1.5rem;
  line-height: 1.5;
 }
}