@charset "UTF-8";abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-style: normal
}

body {
  font-family: "Zen Maru Gothic",sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #000;
  -webkit-text-size-adjust: 100%;
  font-weight: 700;
  position: relative
}

@media only screen and (max-width: 750px) {
  body {
      line-height:1.5;
      font-size: 14px;
      letter-spacing: 0.02em
  }
}

html {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth
}

@media (prefers-reduced-motion:reduce) {
  html {
      scroll-behavior: auto
  }
}

h1,h2,h3,h4,h5,h6 {
  font-weight: normal
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block
}

ol,ul {
  list-style: none
}

blockquote,q {
  quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
  content: "";
  content: none
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: #000;
  transition: 0.5s
}

a:hover {
  text-decoration: none;
  opacity: 0.7
}

@media only screen and (max-width: 750px) {
  a:hover {
      opacity:1
  }
}

a:hover img {
  text-decoration: none;
  opacity: 0.7
}

@media only screen and (max-width: 750px) {
  a:hover img {
      opacity:1
  }
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold
}

del {
  text-decoration: line-through
}

abbr[title],dfn[title] {
  border-bottom: 1px dotted;
  cursor: help
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0
}

input,select {
  vertical-align: middle
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.clearfix:after,.clearfix:before {
  content: "";
  display: table
}

.clearfix:after {
  clear: both
}

.clearfix {
  zoom:1}

img {
  border: 0;
  outline: 0;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  image-rendering: -webkit-optimize-contrast;
  transition: 0.5s;
  border-radius: 25px
}

@media only screen and (max-width: 750px) {
  img {
      border-radius:15px
  }
}

img.line {
  border: 1px solid #ccc
}

img.illust {
  background-color: #fff;
  padding: 20px 30px
}

@media only screen and (max-width: 750px) {
  img.illust {
      padding:10px
  }
}

@media only screen and (min-width: 1025px) {
  .pcNone {
      display:none!important
  }

  .spOnly {
      display: none!important
  }
}

@media only screen and (max-width: 1024px) {
  .pcOnly {
      display:none!important
  }

  .pcNone {
      display: inline-block!important
  }

  .spOnly {
      display: none!important
  }
}

@media only screen and (max-width: 767px) {
  .pcNone {
      display:inline-block!important
  }

  .pcOnly {
      display: none!important
  }

  .spNone {
      display: none!important
  }

  .spOnly {
      display: inline-block!important
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

@keyframes fadeOut {
  0% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}

.fade-in {
  opacity: 0;
  transition-duration: 700ms;
  transition-property: opacity,transform
}

.fade-in-up {
  transform: translate(0,25px)
}

.scroll-in {
  opacity: 1;
  transform: translate(0,0)
}

.fade-top {
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.5s;
  animation-name: fadeIn;
  animation-fill-mode: forwards
}

@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(25px)
  }

  to {
      opacity: 1;
      transform: translateY(0px)
  }
}

.fade-foot {
  opacity: 0;
  animation-duration: 800ms;
  animation-delay: 0;
  animation-name: fadeFoot;
  animation-fill-mode: forwards
}

@keyframes fadeFoot {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

header.preload * {
  -webkit-transition: none!important;
  -moz-transition: none!important;
  -ms-transition: none!important;
  -o-transition: none!important
}

.anchor {
  display: block;
  padding-top: 80px;
  margin-top: -80px
}

.font-type02 {
  font-family: "Noto Sans JP",sans-serif;
  font-weight: 900
}

.wrap {
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box
}

@media only screen and (max-width: 767px) {
  .wrap {
      width:100%
  }
}

header {
  width: 100%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  padding: 20px 30px 20px 45px;
  z-index: 100
}

@media only screen and (max-width: 1100px) {
  header {
      padding:5px 15px 10px;
      position: absolute
  }
}

@media only screen and (max-width: 767px) {
  header {
      padding:15px 0 5px 10px;
      justify-content: center
  }
}

header h1 {
  display: inline-block;
  color: #fff;
  text-align: center
}

header h1 span {
  position: relative;
  font-size: 18px;
  display: inline-block;
  margin-bottom: 5px
}

@media only screen and (max-width: 1024px) {
  header h1 span {
      font-size:12px
  }
}

header h1 span:after,header h1 span:before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #fff
}

header h1 span:before {
  left: -22px;
  transform: rotate(60deg)
}

header h1 span:after {
  right: -18px;
  transform: rotate(-60deg)
}

header h1 img {
  display: block
}
header h1 .second-line {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
}

@media only screen and (max-width: 1100px) {
  header h1 img {
      width:200px;
      height: auto
  }
}

@media only screen and (max-width: 767px) {
  header h1 img {
      width:220px;
      height: auto;
      position: relative
  }
}

header.page {
  padding: 10px 45px 15px;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  position: relative
}

header.page h1 span {
  color: #4d6df8
}

header.page h1 span:after,header.page h1 span:before {
  background-color: #4d6df8
}

footer {
  background-color: #4d6df8;
  padding: 25px 0;
  margin-bottom: 158px
}

@media only screen and (max-width: 767px) {
  footer {
      margin-bottom:225px;
      padding: 18px 0
  }
}

footer.page {
  margin-bottom: 0
}

footer .inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}
footer .inner .navi .title {
  font-size: 18px;
  color: #fff;
  font-weight: 900;
}
@media only screen and (max-width: 1280px) {
  footer .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  footer .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  footer .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  footer .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 767px) {
  footer .inner {
      display:block;
      padding: 0 15px
  }
}

@media only screen and (max-width: 1024px) {
  footer .inner .navi {
      width:65%
  }
}

@media only screen and (max-width: 767px) {
  footer .inner .navi {
      width:100%
  }
}

@media only screen and (max-width: 767px) {
  footer .inner .navi img {
      margin-bottom:8px
  }
}

footer .inner .navi .attention {
  color: #fff;
  font-size: 11px
}

@media only screen and (max-width: 1024px) {
  footer .inner .navi .attention {
      font-size:9px
  }
}

@media only screen and (max-width: 767px) {
  footer .inner .navi .attention {
      font-size:9px;
      margin-bottom: 15px
  }
}

footer .inner .copyright {
  color: #fff;
  font-size: 11px;
  margin-top: 15px
}

@media only screen and (max-width: 767px) {
  footer .inner .copyright {
      font-size:9px
  }
}

footer .inner ul {
  display: flex
}

@media only screen and (max-width: 1024px) {
  footer .inner ul {
      display:block
  }
}

@media only screen and (max-width: 767px) {
  footer .inner ul {
      display:flex;
      flex-wrap: wrap
  }
}

footer .inner ul li {
  font-size: 13px;
  margin-right: 15px
}

@media only screen and (max-width: 767px) {
  footer .inner ul li {
      font-size:11px;
      margin-right: 8px
  }
}

@media only screen and (max-width: 360px) {
  footer .inner ul li {
      font-size:10px
  }
}

footer .inner ul li:last-child {
  margin-right: 0
}

footer .inner ul li a {
  color: #fff
}

.link-col {
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  background-color: rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 5px 25px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media only screen and (max-width: 1720px) {
  .link-col {
      width:550px
  }
}

@media only screen and (max-width: 1024px) {
  .link-col {
      width:100%
  }
}

.link-col .item:first-child {
  margin-right: 25px
}

@media only screen and (max-width: 767px) {
  .link-col .item:first-child {
      margin-right:0
  }
}

.link-col .external-link-preview-text-1 {
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin-bottom: 10px
}

.link-col .external-link-preview-text-2 {
  padding: 10px 20px 13px;
  background-color: #ededed;
  border-radius: 12px;
  color: #9e9e9e;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 24px;
  position: relative;
}

@media only screen and (max-width: 1720px) {
  .link-col .external-link-preview-text-2 {
      font-size:16px
  }
}

.link-col .external-link-preview-text-2 a {
  color: #fff;
  color: #ff699c
}

.link-col .external-link-preview-block {
  position: relative;
  width: 100%;
  height: 100px
}

.link-col .external-link-preview-block .external-link-preview-block-text {
  position: absolute;
  top: 5px;
  right: 0px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-align: right;
  margin: 0 0 5px
}

@media only screen and (max-width: 1720px) {
  .link-col .external-link-preview-block .external-link-preview-block-text {
      font-size:10px
  }
}

.external-link-preview-block-svg {
  position: absolute;
  top: 5px;
  left: -15px;
  width: 60px;
  height: 60px;
  background-color: rgb(253,220,62);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99
}

.link-col .external-link-preview-block .external-link-preview-block-num {
  box-sizing: border-box;
  position: relative;
  z-index: 98;
  top: 32px;
  left: 10px;
  width: 345px;
  padding-left: 120px;
  background-color: rgb(55,127,198);
  height: 46px;
  border-radius: 12px;
  color: rgb(255,255,255);
  font-size: 28px;
  line-height: 40px;
  font-weight: bold
}

@media only screen and (max-width: 1720px) {
  .link-col .external-link-preview-block .external-link-preview-block-num {
      width:250px;
      padding-left: 70px
  }
}

.link-col .external-link-preview-block .external-link-preview-block-num a {
  color: #fff
}

@media (min-width: 751px) {
  .link-col .external-link-preview-block .external-link-preview-block-num a[href*="tel:"] {
      pointer-events:none;
      cursor: default;
      text-decoration: none;
      color: #fff
  }
}

.link-col .external-link-preview-footer {
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-top: 1px solid #fff;
  padding-top: 5px
}

.link-col.footer {
  background-color: transparent;
  padding: 0;
  justify-content: center;
  width: 100%
}

@media only screen and (max-width: 767px) {
  .link-col.footer {
      display:block;
      padding: 0 25px
  }
}

@media only screen and (max-width: 320px) {
  .link-col.footer {
      padding:0 10px
  }
}

.link-col.footer .external-link-preview-text-1 {
  color: #000
}

@media only screen and (max-width: 320px) {
  .link-col.footer .external-link-preview-text-1 {
      font-size:9px
  }
}

@media only screen and (max-width: 767px) {
  .link-col.footer .external-link-preview-text-2 {
      font-size:16px;
      padding: 8px 10px 8px;
      line-height: 1.3
  }
}

@media only screen and (max-width: 767px) {
  .link-col.footer .external-link-preview-block {
      height:85px
  }
}

.link-col.footer .external-link-preview-block-text {
  color: #000
}

.link-col.footer .external-link-preview-block-num {
  text-align: left
}

@media only screen and (max-width: 767px) {
  .link-col.footer .external-link-preview-block-num {
      width:97%;
      padding-left: 100px;
      top: 27px
  }
}

@media only screen and (max-width: 360px) {
  .link-col.footer .external-link-preview-block-num {
      padding-left:90px
  }
}

@media only screen and (max-width: 320px) {
  .link-col.footer .external-link-preview-block-num {
      padding-left:75px
  }
}

@media only screen and (max-width: 767px) {
  .link-col.footer .external-link-preview-block-svg {
      width:60px;
      height: 60px
  }

  .link-col.footer .external-link-preview-block-svg svg {
      width: 25px
  }
}

.link-col.footer .external-link-preview-footer {
  border-top: 1px solid #ccc;
  color: #000
}

h2 {
  font-size: 40px;
  font-weight: 900
}

@media only screen and (max-width: 1024px) {
  h2 {
      font-size:30px
  }
}

@media only screen and (max-width: 767px) {
  h2 {
      font-size:25px
  }
}

@media only screen and (max-width: 360px) {
  h2 {
      font-size:23px
  }
}

@media only screen and (max-width: 320px) {
  h2 {
      font-size:21px
  }
}

.bread {
  text-align: left;
  padding: 20px 45px;
  color: #fff;
  font-size: 12px;
  display: flex
}

@media only screen and (max-width: 767px) {
  .bread {
      padding:10px 15px;
      font-size: 10px;
      overflow-x: scroll;
      word-break: keep-all;
      white-space: nowrap
  }

  .bread::-webkit-scrollbar {
      display: none
  }
}

.bread li {
  margin-right: 16px;
  position: relative
}

.bread li:after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: -9px;
  top: 8px
}

.bread li:last-child {
  margin-right: 0
}

.bread li:last-child:after {
  content: none
}

.bread li a {
  color: #fff
}

.sub {
  font-size: 200px;
  line-height: 0;
  z-index: -1
}

@media only screen and (max-width: 1024px) {
  .sub {
      font-size:130px
  }
}

@media only screen and (max-width: 767px) {
  .sub {
      font-size:80px
  }
}

.sub.blue {
  color: #eaedfe
}

.sub.pink {
  color: #ffedf2
}

.sub.vertical-right {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  right: 80px;
  top: 20px
}

@media only screen and (max-width: 1024px) {
  .sub.vertical-right {
      right:50px
  }
}

@media only screen and (max-width: 767px) {
  .sub.vertical-right {
      right:35px
  }
}

@media only screen and (max-width: 320px) {
  .sub.vertical-right {
      right:25px
  }
}

.sub.vertical-left {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  left: 110px;
  top: 20px
}

@media only screen and (max-width: 1024px) {
  .sub.vertical-left {
      left:70px
  }
}

@media only screen and (max-width: 767px) {
  .sub.vertical-left {
      left:50px
  }
}

.neumorphism {
  border-radius: 25px;
  background: #f8f9ff;
  box-shadow: 13px 13px 20px #e2e5f9,-13px -13px 20px #ffffff
}

@media only screen and (max-width: 767px) {
  .neumorphism {
      box-shadow:8px 8px 17px #e2e5f9,-8px -8px 17px #ffffff
  }
}

.neumorphism.pink {
  background: #ffedf2;
  box-shadow: 13px 13px 20px #f8e0e8,-13px -13px 20px #fff5f8
}

@media only screen and (max-width: 767px) {
  .neumorphism.pink {
      box-shadow:8px 8px 17px #f8e0e8,-8px -8px 17px #ffffff
  }
}

.underline {
  background: linear-gradient(transparent 50%,#efed3c 50%)
}

.button {
  position: relative;
  text-decoration: none
}

.button a {
  background-color: #ff5a00;
  font-weight: 900;
  border: 3px solid #fff;
  display: block;
  padding: 20px 25px;
  border-radius: 2.5em;
  color: #fff
}

@media only screen and (max-width: 767px) {
  .button a {
      padding:15px
  }
}

.button.top a {
  width: 250px;
  margin: auto;
  background-color: #fff;
  font-weight: 900;
  border: 1px solid #ccc;
  display: block;
  padding: 20px 25px;
  border-radius: 2.5em;
  color: #000
}

@media only screen and (max-width: 767px) {
  .button.top a {
      padding:15px
  }
}

.scroll-top {
  position: fixed;
  bottom: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background-color: rgba(255,255,255,0.7);
  width: 100%;
  text-align: center;
  padding: 15px 0
}

.scroll-top .button {
  width: 300px;
  margin: auto
}

@media only screen and (max-width: 767px) {
  .scroll-top .button {
      width:85%
  }
}

.scroll-top {
  opacity: 0;
  transition: opacity 350ms ease
}

.is-hide {
  pointer-events: none
}

button,input,select,textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 3px
}

.contents {
  position: relative;
  margin-bottom: 45px
}

.contents .mainimage {
  height: 100vh;
  background-image: url(../img/mainimage_bg_pc.webp);
  background-size: cover;
  border-radius: 0 0 50px 50px;
  position: relative
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage {
      height:85vh
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage {
      height:100vh;
      background-image: url(../img/mainimage_bg_sp.webp);
      background-size: 100%
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage {
      height:80vh
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage {
      height:100%;
      background-image: url(../img/mainimage_bg_sp.webp);
      padding-top: 70px;
      padding-bottom: 20px;
      border-radius: 0 0 40px 40px
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage {
      padding-bottom:30px
  }
}

.contents .mainimage:before {
  content: "";
  background-image: url(../img/maimimage_bg_parts_pc.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 0;
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.1s;
  animation-name: fadeIn;
  animation-fill-mode: forwards
}

@media only screen and (max-width: 767px) {
  .contents .mainimage:before {
      background-image:url(../img/maimimage_bg_parts_sp.png);
      margin-right: 0
  }
}

.contents .mainimage .inner {
  height: 100vh;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  z-index: 5;
  padding-top: 65px
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .mainimage .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner {
      height:85vh;
      padding-top: 80px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner {
      display:block
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage .inner {
      display:flex;
      justify-content: space-between;
      height: 80vh;
      padding-top: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner {
      height:100%;
      display: block;
      padding-top: 0
  }
}

.contents .mainimage .inner .item {
  width: 62%;
  flex-shrink: 0
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item {
      width:52%
  }
}

.contents .mainimage .inner .item:first-child {
  text-align: center;
  opacity: 0;
  margin-right: 30px;
  animation-duration: 700ms;
  animation-delay: 0.3s;
  animation-name: fadeIn;
  animation-fill-mode: forwards
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child {
      width:100%;
      margin-right: 0
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage .inner .item:first-child {
      width:60%
  }
}

.contents .mainimage .inner .item:first-child .catch {
  font-weight: 900;
  background-color: #fff;
  padding: 20px 25px;
  border-radius: 2em;
  font-size: 23px;
  color: #4d6df8;
  margin-bottom: 20px;
  display: inline-block
}
.contents .mainimage .inner .item:first-child .catch img {
  width: 40px;
  margin-right: 20px;
}

@media only screen and (min-width: 1025px) and (max-width:1500px) {
  .contents .mainimage .inner .item:first-child .catch {
      font-size:20px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .catch {
      font-size:16px;
      padding: 8px 20px 5px;
      margin-bottom: 15px;
      line-height: 1.3
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .catch {
      font-size:13px;
  }
}

.contents .mainimage .inner .item:first-child .catch .text-small {
  font-size: 20px
}

@media only screen and (min-width: 1280px) and (max-width:1500px) {
  .contents .mainimage .inner .item:first-child .catch .text-small {
      font-size:20px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .catch .text-small {
      font-size:13px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .catch .text-small {
      font-size:11px
  }
}

.contents .mainimage .inner .item:first-child .catch .text-large {
  color: #ff699c
}

.contents .mainimage .inner .item:first-child .catch .pink {
  color: #ff699c
}

.contents .mainimage .inner .item:first-child .catch .strong {
  background-image: radial-gradient(circle at center,#ff699c 20%,transparent 20%);
  background-position: top left;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: 0.1em;
  line-height: -1.2;
  font-size: 25px
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .catch .strong {
      padding-top:0.1em;
      font-size: 16px;
      position: relative;
      top: 10px;
  }
}

.contents .mainimage .inner .item:first-child h2 {
  color: #fff;
  font-size: 40px;
  line-height: 1.4;
  position: relative;
  margin-bottom: 55px;
  display: inline-block
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child h2 {
      font-size:35px;
      margin-bottom: 45px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child h2 {
      font-size:23px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child h2 {
      font-size:18px;
      margin-bottom: 25px
  }
}

.contents .mainimage .inner .item:first-child h2 span {
  display: block;
  font-size: 42px
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child h2 span {
      font-size:38px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child h2 span {
      font-size:32px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child h2 span {
      font-size:20px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child h2 span {
      font-size:18px
  }
}

.contents .mainimage .inner .item:first-child h2:after {
  content: "";
  width: 100%;
  height: 9px;
  background-color: #efed3c;
  position: absolute;
  bottom: -20px;
  right: 0;
  left: 0;
  margin: auto;
  border-radius: 2em
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child h2:after {
      height:6px;
      bottom: -13px
  }
}

.contents .mainimage .inner .item:first-child .open {
  color: #fff;
  font-size: 35px;
  margin-bottom: 60px;
  line-height: 1.4;
  letter-spacing: -0.03em
}

@media only screen and (min-width: 768px) and (max-width:1280px) {
  .contents .mainimage .inner .item:first-child .open {
      font-size:30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .open {
      font-size:22px;
      margin-bottom: 30px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .open {
      font-size:20px;
      line-height: 1.3
  }
}

.contents .mainimage .inner .item:first-child .open span {
  font-size: 27px
}

@media only screen and (min-width: 768px) and (max-width:1280px) {
  .contents .mainimage .inner .item:first-child .open span {
      font-size:20px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .open span {
      font-size:18px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .open span {
      font-size:14px
  }
}

.contents .mainimage .inner .item:first-child .open span.yellow {
  font-size: 35px;
  color: #efed3c
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .open span.yellow {
      font-size:25px
  }
}

.contents .mainimage .inner .item:first-child ul {
  display: flex;
  justify-content: space-between;
  position: relative
}

.contents .mainimage .inner .item:first-child ul:before {
  content: "×";
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  margin: auto
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child ul:before {
      font-size:20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child ul:before {
      font-size:25px;
      top: 30%
  }
}

.contents .mainimage .inner .item:first-child ul li {
  width: 47%;
  font-weight: 900;
  position: relative;
  border-radius: 20px;
  border: 3px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px 15px 20px;
  font-size: 23px;
  color: #fff
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child ul li {
      padding:25px 15px 15px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child ul li {
      font-size:16px;
      padding: 25px 5px 15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child ul li {
      width:46%;
      padding: 20px 5px 10px;
      border: 2px solid #fff
  }
}

.contents .mainimage .inner .item:first-child ul li span {
  font-size: 18px
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child ul li span {
      font-size:16px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child ul li span {
      font-size:10px
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage .inner .item:first-child ul li span {
      font-size:9px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child ul li span {
      letter-spacing:-0.08em
  }
}

.contents .mainimage .inner .item:first-child ul li:before {
  content: "";
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child ul li:before {
      width:45px;
      height: 45px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child ul li:before {
      width:35px;
      height: 35px;
      top: -18px
  }
}

.contents .mainimage .inner .item:first-child ul li:after {
  content: "";
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 30px;
  height: 29px;
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  margin: auto
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child ul li:after {
      width:25px;
      height: 24px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child ul li:after {
      width:20px;
      height: 19px;
      top: -10px
  }
}

.contents .mainimage .inner .item:first-child ul li:last-child:after {
  background-image: url(../img/mainimage_icon02.svg);
  left: 2px
}

.contents .mainimage .inner .item:first-child .feature {
/*  background-color: rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 15px 40px 20px 60px; */
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 45px
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature {
      padding:15px 30px 15px 50px;
      margin-bottom: 35px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .feature {
      padding:20px 30px 25px 60px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature {
      display:block;
      padding: 10px 30px 10px;
      margin-bottom: 20px
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage .inner .item:first-child .feature {
      padding:20px 25px 10px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .feature {
      padding:20px 20px 10px
  }
}

.contents .mainimage .inner .item:first-child .feature .limit {
    background-color: #ff5a00;
    color: #fff;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* padding: 17px 10px 10px; */
    line-height: 1.3;
    font-size: 20px;
    margin-right: 25px;
    position: absolute;
    left: -100px;
    top: -50px;
}
.contents .mainimage .inner .item:first-child .feature .limit2 {
    background-color: #ff5a00;
    color: #fff;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* padding: 17px 10px 10px; */
    line-height: 1.3;
    font-size: 20px;
    margin-right: 25px;
    position: absolute;
    left: -100px;
    top: 150px;
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .limit {
      width:100px;
      height: 100px;
      font-size: 17px;
      left: -60px
  }
  .contents .mainimage .inner .item:first-child .feature .limit2 {
      width:100px;
      height: 100px;
      font-size: 17px;
      left: -60px;
      top: 80px;
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:first-child .feature .limit {
      top:-15px;
      left: -30px
  }
  .contents .mainimage .inner .item:first-child .feature .limit2 {
      top:-15px;
      left: 130px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .limit {
      width:68px;
      height: 68px;
      top: -4px;
      left: -20px;
      font-size: 13px;
      padding: 0;
      z-index: 5
  }
  .contents .mainimage .inner .item:first-child .feature .limit2 {
      width:68px;
      height: 68px;
      top: 84px;
      left: -20px;
      font-size: 13px;
      padding: 0;
      z-index: 5
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .feature .limit {
      font-size:10px;
      width: 55px;
      height: 55px;
  }
  .contents .mainimage .inner .item:first-child .feature .limit2 {
      font-size:10px;
      width: 55px;
      height: 55px;
  }
}

.contents .mainimage .inner .item:first-child .feature .limit span {
  font-size: 35px;
  line-height: 0.8
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .limit span {
      font-size:30px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .limit span {
      font-size:20px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .feature .limit span {
      font-size:16px
  }
}

.contents .mainimage .inner .item:first-child .feature .text {
  width: 100%
}

.contents .mainimage .inner .item:first-child .feature .text h3 {
  font-size: 25px;
  font-weight: 900;
  margin-bottom: 15px;
  text-shadow: 1px 1px 0 #FFF,-1px -1px 0 #FFF,-1px 1px 0 #FFF,1px -1px 0 #FFF,0px 1px 0 #FFF,-1px 0 #FFF,-1px 0 0 #FFF,1px 0 0 #FFF
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .text h3 {
      margin-bottom:15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .text h3 {
      font-size:17px;
      margin-bottom: 10px;
      margin-left: 30px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .feature .text h3 {
      font-size:15px;
      margin-left: 20px
  }
}

.contents .mainimage .inner .item:first-child .feature .text h3 span {
  color: #ff699c
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .text ul {
      display:block
  }
}

.contents .mainimage .inner .item:first-child .feature .text ul:before {
  content: none
}

.contents .mainimage .inner .item:first-child .feature .text ul li {
  width: 32%;
  padding: 15px 10px 12px;
  background-color: #eaedfe;
  font-size: 16px;
  color: #000;
  display: block;
  border: none
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li {
      font-size:15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li {
      width:100%;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 5px;
      font-size: 14px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li {
      font-size:12px;
      letter-spacing: -0.05em
  }
}

.contents .mainimage .inner .item:first-child .feature .text ul li span {
  color: #ff699c;
  font-size: 20px;
  line-height: 1
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li span {
      font-size:18px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li span {
      font-size:16px
  }
}

.contents .mainimage .inner .item:first-child .feature .text ul li.mg {
  padding: 15px 10px 15px
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li.mg {
      padding:24px 20px 20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature .text ul li.mg {
      padding:10px
  }
}

.contents .mainimage .inner .item:first-child .feature .text ul li:after,.contents .mainimage .inner .item:first-child .feature .text ul li:before {
  content: none
}

.contents .mainimage .inner .item:nth-child(2) {
  width: 38%;
  position: relative;
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.4s;
  animation-name: fadeIn;
  animation-fill-mode: forwards
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:nth-child(2) {
      width:48%
  }

  .contents .mainimage .inner .item:nth-child(2) img {
      width: 85%;
      margin: auto
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) {
      width:100%;
      margin-top: 130px
  }

  .contents .mainimage .inner .item:nth-child(2) img {
      width: 55%;
      margin: 0 0 0 140px
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage .inner .item:nth-child(2) {
      width:40%
  }

  .contents .mainimage .inner .item:nth-child(2) img {
      width: 90%;
      margin: 0 0 0 25px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:nth-child(2) {
      width:100%;
      margin-top: 20px
  }

  .contents .mainimage .inner .item:nth-child(2) img {
      width: 78%;
      margin: 0 0 0 30px
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage .inner .item:nth-child(2) img {
      width:75%;
      margin-top: 100px;
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:nth-child(2) img {
      width:70%
  }
}

.contents .mainimage .inner .item:nth-child(2) .subject {
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.5s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  background-color: #fff;
  border: 5px solid #bbc7fa;
  border-radius: 50%;
  width: 170px;
  height: 170px;
  position: absolute;
  top: 75px;
  right: -45px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #4d6df8;
  line-height: 1.1
}

@media only screen and (max-width: 1280px) {
  .contents .mainimage .inner .item:nth-child(2) .subject {
      top:45px;
      right: 35px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) .subject {
      border:4px solid #bbc7fa;
      width: 150px;
      height: 150px;
      top: 55px;
      right: 120px
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage .inner .item:nth-child(2) .subject {
      width:140px;
      height: 140px;
      top: 35px;
      right: -35px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:nth-child(2) .subject {
      border:4px solid #bbc7fa;
      width: 115px;
      height: 115px;
      top: 25px;
      right: -10px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:nth-child(2) .subject {
      border:3px solid #bbc7fa;
      width: 95px;
      height: 95px;
      right: -7px
  }
}

.contents .mainimage .inner .item:nth-child(2) .subject .headline {
  background-color: #4d6df8;
  color: #fff;
  padding: 2px 15px;
  border-radius: 2em;
  margin-bottom: 5px
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .headline {
      margin-bottom:3px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .headline {
      font-size:12px;
      margin-bottom: 5px;
      position: relative;
      top: 0
  }
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) .subject p {
      position:relative;
      top: 2px
  }
}

.contents .mainimage .inner .item:nth-child(2) .subject .grade {
  font-size: 22px
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade {
      font-size:16px;
      line-height: 1.1;
      top: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade {
      font-size:13px;
      line-height: 0.8
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade {
      font-size:12px
  }
}

.contents .mainimage .inner .item:nth-child(2) .subject .grade span {
  font-size: 28px
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade span {
      font-size:22px
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade span {
      font-size:18px
  }
}

@media only screen and (max-width: 320px) {
  .contents .mainimage .inner .item:nth-child(2) .subject .grade span {
      font-size:16px
  }
}

.contents .mainimage .inner .campaign {
  width: 100%;
  background-color: #fff;
  text-align: center
}

.contents .mainimage .rate {
  position: absolute;
  width: 150px;
  right: 420px;
  bottom: 45px;
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.3s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  transition: 0.5s
}
.contents .mainimage .rate div {
    color: rgb(255, 255, 255);
    width: 150px;
    height: auto;
    line-height: 1.3;
    font-size: 20px;
    margin-right: 25px;
    position: absolute;
    left: 0;
    bottom: 90px;
    border-radius: 50%;
    padding: 17px 10px 10px;
    font-size: 12px;
    z-index: 3;
}
.contents .mainimage .rate span {
    background-color: rgb(255, 90, 0);
    color: rgb(255, 255, 255);
    width: 120px;
    height: 120px;
    line-height: 1.3;
    font-size: 20px;
    margin-right: 25px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 50%;
    padding: 45px 0 10px 10px;
    font-size: 12px;
    text-align: center;
}
.contents .mainimage .rate span strong {
  font-size: 24px;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .contents .mainimage .rate {
      right:inherit;
      left: 120px;
      bottom: -24%
  }
  .contents .mainimage .rate div {
    color: #4d6df8;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .contents .mainimage .rate {
      left: 15%;
      bottom: -6%;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width:1024px) and (orientation:landscape) {
  .contents .mainimage .rate {
      width:120px;
      right: 280px;
      bottom: 10px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .rate {
      width:90px;
      right: inherit;
      left: 15px;
      bottom: 170px
  }
  .contents .mainimage .rate span {
      width: 100px;
      height: 100px;
      top: -60px;
      left: -10px;
      font-size: 13px;
      z-index: 5;
      padding: 35px 0 10px 10px;
  }
  .contents .mainimage .rate span strong {
    font-size: 21px;
  }
  .contents .mainimage .rate div {
    bottom: 25px;
    z-index: 10;
    color: #fff;
  }
}

@media only screen and (max-width: 360px) {
  .contents .mainimage .rate {
      left: 15px;
      bottom: -5%;
  }
}

.contents .mainimage button {
  position: absolute;
  right: 45px;
  bottom: 45px;
  border-radius: 0;
  background-color: transparent;
  opacity: 0;
  animation-duration: 700ms;
  animation-delay: 0.3s;
  animation-name: fadeIn;
  animation-fill-mode: forwards;
  transition: 0.5s;
  border-style: none;
  outline: none;
  width: 350px
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage button {
      right:35px;
      bottom: 20px;
      width: 220px
  }
}
@media only screen and (max-width: 768px) {
  .contents .mainimage button {
      right:35px;
      bottom: -10%;
      width: 220px
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage button {
      right:0;
      left: 0;
      bottom: 25px;
      margin: auto;
      width: 85%
  }
}

.contents .mainimage button img {
  border-radius: 0;
  border-style: none;
  outline: none
}

@media only screen and (max-width: 1024px) {
  .contents .mainimage button img {
      width:100%
  }
}

@media only screen and (max-width: 767px) {
  .contents .mainimage button img {
      width:100%
  }
}

.contents .mainimage button:hover img {
  opacity: 0.7
}

@media only screen and (max-width: 767px) {
  .contents .mainimage button:hover img {
      opacity:1
  }
}

.contents .mainimage button:active,.contents .mainimage button:focus,.contents .mainimage button:visited {
  outline: none;
  border-style: none;
  box-shadow: none
}

.contents .mainimage .btn-primary {
  border-color: transparent
}

.contents .mainimage .btn-primary:not(:disabled):not(.disabled).active:focus,.contents .mainimage .btn-primary:not(:disabled):not(.disabled):active:focus,.contents .mainimage .show>.btn-primary.dropdown-toggle:focus {
  box-shadow: none
}

.contents .about {
  text-align: center;
  overflow: hidden;
  position: relative;
  padding-top: 90px
}

@media only screen and (max-width: 1024px) {
  .contents .about {
      padding:450px 35px 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .about {
      padding:45px 20px 0
  }
}
@media only screen and (max-width: 360px) {
  .contents .about {
      padding:170px 20px 0
  }
}
.contents .about:after {
  content: "";
  background-image: url(../img/about_bg_parts_pc.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  right: 0;
  top: -150px;
  bottom: 0;
  margin: auto;
  z-index: 0
}

@media only screen and (max-width: 1024px) {
  .contents .about:after {
      top:0
  }
}

@media only screen and (max-width: 767px) {
  .contents .about:after {
      background-image:url(../img/about_bg_parts_sp.png);
      z-index: -1
  }
}

.contents .about .sub {
  position: relative;
  line-height: 0;
  z-index: -1;
  top: 115px
}

@media only screen and (max-width: 1024px) {
  .contents .about .sub {
      top:85px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .sub {
      top:55px
  }
}

.contents .about .caption {
  background-color: #ffedf2;
  font-size: 20px;
  display: inline-block;
  color: #ff699c;
  padding: 10px 20px;
  border-radius: 2em;
  margin-bottom: 25px;
  width: auto;
}

@media only screen and (max-width: 1024px) {
  .contents .about .caption {
      font-size:16px;
      margin-bottom: 20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .caption {
      font-size:15px;
      margin-bottom: 15px;
      line-height: 1.3;
      padding: 10px 20px 12px
  }
}

.contents .about h2 {
  color: #4d6df8;
  margin-bottom: 50px
}
.contents .about h3 {
  color: #4d6df8;
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 900;
}

@media only screen and (max-width: 1024px) {
  .contents .about h2 {
      margin-bottom:30px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about h2 {
      margin-bottom:20px
  }
}

.contents .about .catch {
  font-size: 18px;
  margin-bottom: 80px
}

@media only screen and (max-width: 1280px) {
  .contents .about .catch {
      margin-bottom:60px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .about .catch {
      font-size:16px;
      text-align: left;
      margin-bottom: 50px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .catch {
      font-size:14px;
      margin-bottom: 30px
  }
}

.contents .about .read-col {
  position: relative;
  background-color: #f8f9ff
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col {
      margin:0 calc(50% - 50vw);
      width: 100vw
  }
}

.contents .about .read-col:before {
  content: "";
  background-color: #f8f9ff;
  width: 115%;
  min-height: 400px;
  border-top-right-radius: 1000px 200px;
  border-top-left-radius: 1000px 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
  position: absolute;
  right: 0;
  left: -100px;
  top: -160px;
  margin: auto;
  z-index: -1
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col:before {
      left:-70px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col:before {
      width:100%;
      border-top-right-radius: 800px 200px;
      border-top-left-radius: 800px 200px;
      left: 0;
      top: -200px
  }
}

.contents .about .read-col .inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding-bottom: 200px
}

@media only screen and (max-width: 1280px) {
  .contents .about .read-col .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .about .read-col .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .about .read-col .inner {
      padding:0 10px 100px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner {
      display:block;
      padding: 0 40px 60px
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner {
      padding:0 25px 40px
  }
}

.contents .about .read-col .inner .item {
  width: 30%;
  padding: 40px 30px
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner .item {
      width:100%;
      padding: 40px 40px;
      margin-bottom: 25px;
      display: flex;
      align-items: center
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item {
      padding:25px;
      margin-bottom: 20px;
      display: block
  }
}

.contents .about .read-col .inner .item h3 {
  font-weight: 900;
  color: #4d6df8;
  font-size: 23px;
  margin-bottom: 25px
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner .item h3 {
      width:45%;
      font-size: 20px;
      margin-right: 10px;
      flex-shrink: 0;
      text-align: left;
      margin-bottom: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item h3 {
      width:100%;
      font-size: 20px;
      margin-bottom: 10px;
      margin-right: 0;
      text-align: center
  }
}

@media only screen and (max-width: 320px) {
  .contents .about .read-col .inner .item h3 {
      font-size:18px
  }
}

.contents .about .read-col .inner .item p {
  text-align: left
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner .item p {
      width:65%
  }
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item p {
      width:100%
  }
}

.contents .about .read-col .inner .item:first-child {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  ms-transition-delay: 200ms
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item:first-child {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .about .read-col .inner .item:nth-child(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  ms-transition-delay: 400ms;
  position: relative;
  top: 45px
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item:nth-child(2) {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

@media only screen and (max-width: 1024px) {
  .contents .about .read-col .inner .item:nth-child(2) {
      top:0
  }
}

.contents .about .read-col .inner .item:last-child {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  ms-transition-delay: 600ms
}

@media only screen and (max-width: 767px) {
  .contents .about .read-col .inner .item:last-child {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .about-bg {
  height: 375px;
  overflow: hidden
}

@media only screen and (max-width: 1280px) {
  .contents .about-bg {
      height:auto
  }
}

.contents .about-bg img {
  width: 100%;
  overflow: hidden;
  border-radius: 0
}

.contents .point {
  text-align: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px
}

@media only screen and (max-width: 1024px) {
  .contents .point {
      padding-top:60px
  }
}

@media only screen and (max-width: 767px) {
  .contents .point {
      padding-top:40px
  }
}

.contents .point h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  margin-bottom: 80px
}

@media only screen and (max-width: 1024px) {
  .contents .point h2 {
      font-size:30px;
      margin-bottom: 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .point h2 {
      font-size:25px;
      margin-bottom: 30px;
      line-height: 1.4
  }
}

@media only screen and (max-width: 320px) {
  .contents .point h2 {
      font-size:23px
  }
}

.contents .point h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(-45deg,#ff5a00,#ff5a00 2px,white 2px,white 4px)
}

.contents .point h2 span {
  color: #4d6df8;
  background-image: radial-gradient(circle at center,#ff699c 20%,transparent 20%);
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: 0.2em
}

@media only screen and (max-width: 767px) {
  .contents .point h2 span {
      padding-top:0
  }
}

.contents .point .point-col {
  max-width: 1200px;
  margin: auto
}

@media only screen and (max-width: 1280px) {
  .contents .point .point-col {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .point .point-col {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col {
      padding:0 25px
  }
}

.contents .point .point-col .item {
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding-bottom: 45px;
  margin-bottom: 85px;
  border-bottom: 1px solid #ededed
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item {
      display:block;
      margin-bottom: 45px
  }
}

@media only screen and (max-width: 320px) {
  .contents .point .point-col .item {
      padding-bottom:35px;
      margin-bottom: 30px
  }
}

.contents .point .point-col .item:last-child {
  border-bottom: none
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item:last-child {
      margin-bottom:0
  }
}

.contents .point .point-col .item .title {
  width: 450px;
  padding-left: 30px;
  position: relative
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item .title {
      width:100%;
      padding-left: 0
  }
}

.contents .point .point-col .item .title h3 {
  position: relative;
  font-size: 30px;
  color: #4d6df8;
  font-weight: 900
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item .title h3 {
      font-size:25px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .title h3 {
      font-size:20px;
      margin-bottom: 10px
  }
}

@media only screen and (max-width: 360px) {
  .contents .point .point-col .item .title h3 {
      font-size:19px
  }
}

@media only screen and (max-width: 320px) {
  .contents .point .point-col .item .title h3 {
      font-size:17px
  }
}

.contents .point .point-col .item .title:before {
  content: "01";
  color: #ffedf2;
  font-size: 130px;
  font-weight: 900;
  position: absolute;
  left: 0;
  top: -120px
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item .title:before {
      top:-100px;
      left: -20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .title:before {
      font-size:100px;
      top: -70px;
      left: -15px
  }
}

@media only screen and (max-width: 320px) {
  .contents .point .point-col .item .title:before {
      font-size:90px;
      top: -65px
  }
}

.contents .point .point-col .item .text {
  width: calc(100% - 450px)
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item .text {
      width:100%
  }
}

.contents .point .point-col .item .text .image {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 35px
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .image {
      display:block;
      margin-top: 25px
  }
}

.contents .point .point-col .item .text .image .caption-image {
  width: 100%;
  margin-left: 20px;
}

@media only screen and (max-width: 1024px) {
  .contents .point .point-col .item .text .image .caption-image {
      width:100%
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .image .caption-image {
      width:100%;
      margin-left: 0
  }
}

.contents .point .point-col .item .text .image .caption {
  font-size: 9px;
  line-height: 1.2;
  margin-top: 7px;
  font-weight: 500;
  word-wrap: break-word;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .image .caption {
      margin-top:0
  }
}
p.caption {
  width: 100%;
  text-align: right;
  font-size: 12px;
}

.contents .point .point-col .item .text .image img {
  box-shadow: 13px 13px 20px #e2e5f9,-13px -13px 20px #ffffff;
  width: auto
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .image img {
      box-shadow:8px 8px 17px #e2e5f9,-8px -8px 17px #ffffff
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .image img {
      width:100%;
      margin-bottom: 10px
  }
}

.contents .point .point-col .item .text .device {
  display: flex;
  justify-content: space-between;
  margin-top: 35px
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device {
      display:block;
      margin-top: 20px
  }
}

.contents .point .point-col .item .text .device .item {
  width: 48%;
  background-color: #fff;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
  box-shadow: 13px 13px 20px #eaeaea,-13px -13px 20px #ffffff;
  border-radius: 25px;
  text-align: center;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device .item {
      box-shadow:8px 8px 17px #eaeaea,-8px -8px 17px #ffffff
  }
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device .item {
      width:100%;
      padding: 20px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 320px) {
  .contents .point .point-col .item .text .device .item {
      padding:16px
  }
}

.contents .point .point-col .item .text .device .item h4 {
  font-size: 20px;
  color: #4d6df8;
  font-weight: 900;
  margin-bottom: 5px
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device .item h4 {
      font-size:18px
  }
}

.contents .point .point-col .item .text .device .item ul li {
  text-align: left;
  position: relative;
  padding-left: 20px
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device .item ul li {
      padding-left:18px
  }
}

.contents .point .point-col .item .text .device .item ul li:before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff699c;
  position: absolute;
  left: 0;
  top: 8px
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item .text .device .item ul li:before {
      width:10px;
      height: 10px;
      top: 6px
  }
}

.contents .point .point-col .item:first-child img {
  width: 100%
}

.contents .point .point-col .item:nth-child(2) .title:before {
  content: "02"
}

.contents .point .point-col .item:nth-child(2) .text img,.contents .point .point-col .item:nth-child(3) .text img {
  width: 50%
}

@media only screen and (max-width: 767px) {
  .contents .point .point-col .item:nth-child(2) .text img,.contents .point .point-col .item:nth-child(3) .text img {
      width:100%
  }
}

.contents .point .point-col .item:nth-child(3) .title:before {
  content: "03"
}

.contents .point .point-col .item:nth-child(4) .title:before {
  content: "04"
}

.contents .lesson {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: #f8f9ff;
  text-align: center;
  padding: 150px 0;
  border-radius: 50px 50px 0 0
}

@media only screen and (max-width: 1024px) {
  .contents .lesson {
      padding:100px 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson {
      padding:70px 0;
      border-radius: 40px 40px 0 0
  }
}

.contents .lesson h2 {
  margin-bottom: 80px
}

@media only screen and (max-width: 1024px) {
  .contents .lesson h2 {
      margin-bottom:45px
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson h2 {
      margin-bottom:35px
  }
}

.contents .lesson .inner {
  max-width: 1200px;
  margin: auto
}

@media only screen and (max-width: 1280px) {
  .contents .lesson .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .lesson .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner {
      padding:0 25px
  }
}

.contents .lesson .inner .sub {
  color: #eaedfe
}

.contents .lesson .inner .item {
  display: flex;
  text-align: left;
  position: relative;
  margin-bottom: 90px
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner .item {
      display:block;
      margin-bottom: 45px
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item {
      margin-bottom:35px
  }
}

.contents .lesson .inner .item:last-child {
  margin-bottom: 0
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner .item .text {
      margin-bottom:20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item .text {
      margin-bottom:15px
  }
}

.contents .lesson .inner .item .text h3 {
  font-size: 30px;
  color: #4d6df8;
  font-weight: 900;
  position: relative;
  margin-bottom: 40px
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item .text h3 {
      font-size:20px;
      margin-bottom: 35px
  }
}

@media only screen and (max-width: 320px) {
  .contents .lesson .inner .item .text h3 {
      font-size:18px
  }
}

.contents .lesson .inner .item .text h3:after {
  content: "";
  width: 30px;
  height: 7px;
  border-radius: 2em;
  background-color: #ff699c;
  position: absolute;
  left: 0;
  bottom: -20px
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item .text h3:after {
      width:25px;
      height: 4px;
      bottom: -17px
  }
}

.contents .lesson .inner .item .image {
  flex-shrink: 0
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner .item .image {
      text-align:center
  }
}

.contents .lesson .inner .item .image img {
  margin-left: 55px;
  box-shadow: 13px 13px 20px #e2e5f9,-13px -13px 20px #ffffff
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item .image img {
      box-shadow:8px 8px 17px #e2e5f9,-8px -8px 17px #ffffff
  }
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner .item .image img {
      width:70%
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item .image img {
      width:100%;
      margin-left: 0
  }
}

.contents .lesson .inner .item:nth-child(2n) .text {
  order: 2
}

.contents .lesson .inner .item:nth-child(2n) .image {
  order: 1
}

.contents .lesson .inner .item:nth-child(2n) .image img {
  margin-left: 0;
  margin-right: 55px
}

@media only screen and (max-width: 1024px) {
  .contents .lesson .inner .item:nth-child(2n) .image img {
      margin-right:0
  }
}

@media only screen and (max-width: 767px) {
  .contents .lesson .inner .item:nth-child(2n) .image img {
      margin-right:0
  }
}

.contents .success {
  position: relative;
  padding-top: 80px;
  text-align: center;
  margin-bottom: 150px
}

.success-item {
    max-width: 1200px;
    margin: auto;
}
.success-item-set {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 50px;
}
.success-wrapper {
  width: calc((100% - 20px * 4) / 5);
  box-sizing: border-box;
  position: relative;
}

@media only screen and (max-width: 1024px) {
  .contents .success {
      margin-bottom:60px
  }
  .success-item {
    max-width: 90%;
}
  .success-wrapper {
    width: calc((100% - 20px * 2) / 3);
  }
}

@media only screen and (max-width: 767px) {
  .contents .success {
      padding-top:50px;
      margin-bottom: 50px
  }

}

.contents .success h2 {
  margin-bottom: 35px
}

@media only screen and (max-width: 1024px) {
  .contents .success h2 {
      margin-bottom:20px
  }
}

.contents .success .catch-col {
  margin-bottom: 45px
}

@media only screen and (max-width: 767px) {
  .contents .success .catch-col {
      margin-bottom:35px
  }
}

.contents .success .catch-col .item {
  position: relative
}

.contents .success .catch-col .item .title {
  position: relative;
  display: inline-block;
  margin-right: 20px;
  color: #fff;
  font-size: 18px
}

@media only screen and (max-width: 767px) {
  .contents .success .catch-col .item .title {
      top:-10px
  }
}

.contents .success .catch-col .item .title:before {
  content: "";
  width: 60px;
  height: 60px;
  background-color: #ff699c;
  border-radius: 50%;
  position: absolute;
  left: -11px;
  top: -12px;
  z-index: -1
}

@media only screen and (max-width: 767px) {
  .contents .success .catch-col .item .title:before {
      top:-15px
  }
}

.contents .success .catch-col .catch {
  color: #ff699c;
  font-size: 25px;
  display: inline-block;
  font-weight: 900;
  position: relative;
  padding-bottom: 8px
}

@media only screen and (max-width: 1024px) {
  .contents .success .catch-col .catch {
      font-size:20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .catch-col .catch {
      font-size:18px;
      padding-bottom: 12px;
      line-height: 1.3
  }
}

.contents .success .catch-col .catch span {
  font-size: 35px
}

@media only screen and (max-width: 1024px) {
  .contents .success .catch-col .catch span {
      font-size:30px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .catch-col .catch span {
      font-size:22px
  }
}

.contents .success .catch-col .catch:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(-45deg,#ff5a00,#ff5a00 2px,white 2px,white 4px)
}

.contents .success .movie-col {
  margin-bottom: 45px;
  text-align: center
}

@media only screen and (max-width: 767px) {
  .contents .success .movie-col {
      padding:0 25px
  }
}

.contents .success .movie-col span {
  background-color: #4d6df8;
  color: #fff;
  display: inline-block;
  padding: 2px 10px 5px;
  border-radius: 2em;
  margin-bottom: 10px
}

.contents .success .movie-col h3 {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
  .contents .success .movie-col h3 {
      font-size:15px;
      margin-bottom: 10px
  }
}

@media only screen and (max-width: 320px) {
  .contents .success .movie-col h3 {
      font-size:14px;
      margin-bottom: 5px
  }
}

.contents .success .movie-col video {
  width: 450px;
  height: 280px
}

@media only screen and (max-width: 1024px) {
  .contents .success .movie-col video {
      width:70%;
      height: 320px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .movie-col video {
      width:90%;
      height: 180px
  }
}

.contents .success .movie-col video img {
  width: 100%
}

.contents .success .success-slider {
  margin-bottom: 55px
}

@media only screen and (max-width: 767px) {
  .contents .success .success-slider {
      margin-bottom:75px
  }
}

.contents .success .success-slider .swiper {
  width: 100%;
  position: relative
}

@media only screen and (max-width: 767px) {
  .contents .success .success-slider .swiper {
      width:100%;
      padding: 0 45px
  }
}

.contents .success .success-slider .swiper-wrapper {
  transition-timing-function: linear;
  z-index: 0
}

.contents .success .success-slider .swiper-slide {
  text-align: center;
  position: relative;
  width: auto;
  overflow: inherit;
  padding: 50px 0
}

@media only screen and (max-width: 767px) {
  .contents .success .success-slider .swiper-slide {
      padding:0
  }
}

.contents .success .success-slider .swiper-slide img {
  margin-bottom: 15px;
  width: 100%
}

@media only screen and (max-width: 767px) {
  .contents .success .success-slider .swiper-slide img {
      margin-bottom:5px
  }
}

.contents .success .success-slider .swiper-slide:nth-child(2n) {
  position: relative;
  top: 45px
}

@media only screen and (max-width: 767px) {
  .contents .success .success-slider .swiper-slide:nth-child(2n) {
      top:35px
  }
}

.success-wrapper .pass {
  width: 80px;
  height: 80px;
  background-image: url(../img/success_icon.png);
  background-size: 80px;
  background-repeat: no-repeat;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
  padding-top: 10px
}
.success-wrapper img {
    height: 300px;
    object-fit: cover;
    width: 100%;
    display: block;
}
@media only screen and (max-width: 767px) {
  .success-wrapper .pass {
      width:65px;
      height: 65px;
      background-size: 65px;
      left: -20px;
      top: -25px;
      font-size: 14px;
      padding-top: 10px
  }
  .success-wrapper img {
    height: 180px;
  }
}

.success-wrapper .pass span {
  font-size: 28px
}

@media only screen and (max-width: 767px) {
  .success-wrapper .pass span {
      font-size:20px
  }
}

.success-wrapper .name span {
  font-size: 13px
}

@media only screen and (max-width: 767px) {
  .success-wrapper .name span {
      font-size:10px
  }
}

.contents .success .experience {
  max-width: 1200px;
  margin: auto;
  background-color: #ffedf2;
  padding: 35px 45px 45px
}

@media only screen and (max-width: 1280px) {
  .contents .success .experience {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .success .experience {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .success .experience {
      padding:35px 45px 45px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience {
      padding:30px 30px 45px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience {
      padding:25px
  }
}

.contents .success .experience h2 {
  color: #ff699c
}

@media only screen and (max-width: 767px) {
  .contents .success .experience h2 {
      margin-bottom:15px
  }
}

.contents .success .experience .inner {
  background-color: #fff;
  border-radius: 25px;
  padding: 40px;
  overflow: hidden
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner {
      padding:0 0 15px
  }
}

.contents .success .experience .inner .experience-slider {
  width: 100%
}

.contents .success .experience .inner .experience-slider .swiper-slide {
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 30px 0 0
}

.contents .success .experience .inner .experience-slider .swiper-slide img {
  margin-bottom: 12px
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide img {
      margin-bottom:5px
  }
}

.contents .success .experience .inner .experience-slider .swiper-slide:nth-child(2n) {
  position: relative
}

.contents .success .experience .inner .experience-slider .swiper-slide ul {
  display: flex;
  justify-content: center
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul {
      justify-content:flex-start
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul {
      justify-content:center
  }
}

.contents .success .experience .inner .experience-slider .swiper-slide ul li {
  position: relative;
  margin: 0 15px
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li {
      width:31%;
      margin: 0 5px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li {
      width:auto;
      margin: 0
  }

  .contents .success .experience .inner .experience-slider .swiper-slide ul li:first-child {
      margin-right: 20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li:first-child {
      margin-right:5px
  }
}

.swiper-slide ul li .pass {
  width: 100px;
  height: 100px;
  background-image: url(../img/success_icon.png);
  background-size: 100px;
  background-repeat: no-repeat;
  position: absolute;
  left: -25px;
  top: -25px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  padding-top: 18px
}

.swiper-slide ul li .pass span {
  font-size: 25px
}

@media only screen and (max-width: 767px) {
  .swiper-slide ul li .pass span {
      font-size:18px
  }
}

@media only screen and (max-width: 1024px) {
  .swiper-slide ul li .pass {
      width:70px;
      height: 70px;
      background-size: 70px;
      left: 5px;
      top: -25px;
      padding-top: 5px;
      line-height: 1.2
  }
}

@media only screen and (max-width: 767px) {
  .swiper-slide ul li .pass {
      width:50px;
      height: 50px;
      background-size: 50px;
      left: -15px;
      top: -25px;
      font-size: 13px;
      padding-top: 5px
  }
}

@media only screen and (max-width: 360px) {
  .swiper-slide ul li .pass {
      left:-10px;
      font-size: 12px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li .name {
      line-height:1.2
  }
}

.contents .success .experience .inner .experience-slider .swiper-slide ul li .name span {
  font-size: 13px
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li .name span {
      display:block;
      font-size: 10px
  }
}

@media only screen and (max-width: 360px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li .name span {
      font-size:9px
  }
}

.contents .success .experience .inner .experience-slider .swiper-slide ul li img {
  cursor: pointer
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li img {
      width:195px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li img {
      width:92px
  }
}

@media only screen and (max-width: 320px) {
  .contents .success .experience .inner .experience-slider .swiper-slide ul li img {
      width:80px
  }
}

.contents .success .experience .inner .experience-slider .swiper-button-next,.contents .success .experience .inner .experience-slider .swiper-button-prev {
  height: 60px;
  width: 60px;
  top: 55%
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next,.contents .success .experience .inner .experience-slider .swiper-button-prev {
      height:50px;
      width: 50px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next,.contents .success .experience .inner .experience-slider .swiper-button-prev {
      height:30px;
      width: 30px;
      top: 65%
  }
}

.contents .success .experience .inner .experience-slider .swiper-button-next:before,.contents .success .experience .inner .experience-slider .swiper-button-prev:before {
  content: "";
  height: 60px;
  width: 60px;
  background-color: #ff699c;
  border-radius: 50%
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next:before,.contents .success .experience .inner .experience-slider .swiper-button-prev:before {
      height:50px;
      width: 50px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next:before,.contents .success .experience .inner .experience-slider .swiper-button-prev:before {
      height:30px;
      width: 30px
  }
}

.contents .success .experience .inner .experience-slider .swiper-button-next:after,.contents .success .experience .inner .experience-slider .swiper-button-prev:after {
  content: "";
  margin: auto;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next:after,.contents .success .experience .inner .experience-slider .swiper-button-prev:after {
      width:6px;
      height: 6px
  }
}

.contents .success .experience .inner .experience-slider .swiper-button-prev:after {
  display: inline-block;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  left: 25px
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-button-prev:after {
      left:20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-button-prev:after {
      left:12px
  }
}

.contents .success .experience .inner .experience-slider .swiper-button-next:after {
  display: inline-block;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  right: 25px
}

@media only screen and (max-width: 1024px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next:after {
      right:20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .success .experience .inner .experience-slider .swiper-button-next:after {
      right:12px
  }
}

.contents .thumbnails-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  position: relative
}

@media only screen and (max-width: 767px) {
  .contents .thumbnails-wrapper {
      flex-wrap:no-wrap;
      justify-content: flex-start;
      gap: 5px
  }
}

.contents .thumbnails-wrapper img:hover {
  opacity: 0.7;
  cursor: pointer
}

.contents .images-overlay {
  display: none
}

.contents .images-wrapper {
  max-width: 2000px
}

.contents .images-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.8);
  visibility: hidden;
  opacity: 0;
  z-index: 1003;
  transition: 0.3s
}

.contents .images-overlay.active {
  visibility: visible;
  opacity: 1;
  transition: 0.3s
}

.contents .images-overlay img {
  display: none
}

.contents .images-overlay img.active {
  display: block;
  border-radius: 0;
  width: 500px;
  height: auto
}

@media only screen and (max-width: 767px) {
  .contents .images-overlay img.active {
      width:85%;
      margin: auto
  }
}

.contents #close-01,.contents #close-02 {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 5%;
  right: 5%;
  background-color: rgba(0,0,0,0.8);
  transition: 0.3s
}

.contents #close-01:hover,.contents #close-02:hover {
  opacity: 0.7;
  transition: 0.3s
}

.contents #close-01:before,.contents #close-02:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%,-50%) rotate(45deg)
}

.contents #close-01:after,.contents #close-02:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%,-50%) rotate(-45deg)
}

.contents .merit {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  text-align: center;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
  z-index: -2
}

@media only screen and (max-width: 1024px) {
  .contents .merit {
      background-color:#f8f9ff;
      padding: 60px 0
  }
}

.contents .merit:before {
  content: "";
  width: 95%;
  height: 100%;
  background-color: #f8f9ff;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50px 0 0 50px;
  z-index: -5
}

@media only screen and (max-width: 767px) {
  .contents .merit:before {
      content:none
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit {
      padding:40px 0
  }
}

.contents .merit h2 {
  margin-bottom: 35px
}

.contents .merit .merit-col {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 55px
}

@media only screen and (max-width: 1280px) {
  .contents .merit .merit-col {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .merit .merit-col {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .merit .merit-col {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .merit-col {
      padding:0 25px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .merit .merit-col {
      display:block;
      width: 100%;
      margin-bottom: 45px
  }
}

.contents .merit .merit-col .item {
  width: 48%;
  padding: 35px 50px 40px
}

@media only screen and (max-width: 1024px) {
  .contents .merit .merit-col .item {
      width:100%;
      padding: 30px 40px 40px;
      margin-bottom: 25px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .merit-col .item {
      padding:25px 30px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 320px) {
  .contents .merit .merit-col .item {
      padding:25px 20px
  }
}

.contents .merit .merit-col .item h3 {
  font-size: 30px;
  color: #4d6df8;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.3
}

@media only screen and (max-width: 1024px) {
  .contents .merit .merit-col .item h3 {
      font-size:25px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .merit-col .item h3 {
      font-size:18px
  }
}

@media only screen and (max-width: 360px) {
  .contents .merit .merit-col .item h3 {
      font-size:17px
  }
}

@media only screen and (max-width: 320px) {
  .contents .merit .merit-col .item h3 {
      font-size:16px;
      margin-bottom: 10px
  }
}

.contents .merit .merit-col .item p {
  text-align: left
}

.contents .merit .merit-col .item:first-child {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  ms-transition-delay: 200ms
}

@media only screen and (max-width: 767px) {
  .contents .merit .merit-col .item:first-child {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .merit .merit-col .item:last-child {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  ms-transition-delay: 400ms
}

@media only screen and (max-width: 767px) {
  .contents .merit .merit-col .item:last-child {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .merit .school {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center
}

@media only screen and (max-width: 1280px) {
  .contents .merit .school {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .merit .school {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .merit .school {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .school {
      padding:0 25px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .school {
      display:block
  }
}

.contents .merit .school h3 {
  font-size: 25px;
  font-weight: 900;
  text-align: left
}

@media only screen and (max-width: 1024px) {
  .contents .merit .school h3 {
      font-size:20px;
      flex-shrink: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .school h3 {
      font-size:18px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 320px) {
  .contents .merit .school h3 {
      font-size:16px
  }
}

.contents .merit .school ul {
  position: relative;
  padding-left: 45px;
  margin-left: 35px
}

@media only screen and (max-width: 1024px) {
  .contents .merit .school ul {
      padding-left:35px;
      margin-left: 25px
  }
}

@media only screen and (max-width: 767px) {
  .contents .merit .school ul {
      padding-left:0;
      margin-left: 0
  }
}

.contents .merit .school ul:before {
  content: "";
  width: 2px;
  height: 100%;
  background-color: #eaedfe;
  position: absolute;
  left: 0;
  top: 0
}

@media only screen and (max-width: 767px) {
  .contents .merit .school ul:before {
      content:none
  }
}

.contents .merit .school ul li {
  text-align: left;
  position: relative;
  padding-left: 20px
}

@media only screen and (max-width: 767px) {
  .contents .merit .school ul li {
      padding-left:17px
  }
}

.contents .merit .school ul li:before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #4d6df8;
  position: absolute;
  left: 0;
  top: 8px
}

@media only screen and (max-width: 767px) {
  .contents .merit .school ul li:before {
      width:10px;
      height: 10px;
      top: 6px
  }
}

.contents .flow {
  text-align: center;
  padding: 150px 0 100px
}

@media only screen and (max-width: 1024px) {
  .contents .flow {
      padding:100px 40px 80px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow {
      padding:60px 25px 60px
  }
}

.contents .flow h2 {
  margin-bottom: 80px
}

@media only screen and (max-width: 1024px) {
  .contents .flow h2 {
      margin-bottom:50px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow h2 {
      margin-bottom:40px
  }
}

.contents .flow .inner {
  max-width: 1200px;
  margin: auto;
  border-radius: 25px;
  border: 7px solid #4d6df8;
  padding: 60px 55px;
  display: flex;
  justify-content: center;
  align-items: center
}

@media only screen and (max-width: 1280px) {
  .contents .flow .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .flow .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .flow .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .flow .inner {
      padding:60px 55px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .flow .inner {
      display:block;
      padding: 40px 55px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner {
      display:block;
      padding: 25px;
      border: 5px solid #4d6df8
  }
}

.contents .flow .inner ul {
  text-align: left;
  margin-right: 150px;
  position: relative
}

@media only screen and (max-width: 1024px) {
  .contents .flow .inner ul {
      margin-right:0;
      margin-bottom: 30px;
      width: 38%;
      margin: 0 auto 35px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner ul {
      margin-right:0;
      margin-bottom: 25px;
      width: 100%
  }
}

.contents .flow .inner ul:before {
  content: "";
  width: 1px;
  height: 95%;
  background-color: #ff699c;
  position: absolute;
  left: 6px;
  top: 7px
}

.contents .flow .inner ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 15px
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner ul li {
      margin-bottom:10px
  }
}

.contents .flow .inner ul li:last-child {
  margin-bottom: 0
}

.contents .flow .inner ul li:before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 4px solid #ff699c;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 7px
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner ul li:before {
      width:12px;
      height: 12px;
      top: 5px
  }
}

.contents .flow .inner ul li:first-child:before,.contents .flow .inner ul li:last-child:before {
  border: none;
  background-color: #ff699c;
  width: 14px;
  height: 14px
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner ul li:first-child:before,.contents .flow .inner ul li:last-child:before {
      width:12px;
      height: 12px
  }
}

.contents .flow .inner .movie-col h3 {
  background-color: #eaedfe;
  color: #4d6df8;
  font-size: 18px;
  font-weight: 900;
  border-radius: 2em;
  padding: 5px 15px;
  margin-bottom: 20px
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner .movie-col h3 {
      font-size:15px;
      margin-bottom: 15px
  }
}

.contents .flow .inner .movie-col video {
  width: 450px;
  height: 280px
}

@media only screen and (max-width: 1024px) {
  .contents .flow .inner .movie-col video {
      width:100%;
      height: 320px
  }
}

@media only screen and (max-width: 767px) {
  .contents .flow .inner .movie-col video {
      width:100%;
      height: 180px
  }
}

.contents .flow .inner .movie-col video img {
  width: 100%
}

.contents .price {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: #ffedf2;
  text-align: center;
  padding: 80px 0;
  margin-bottom: 110px;
  border-radius: 50px 50px 0 0
}

@media only screen and (max-width: 1024px) {
  .contents .price {
      padding:60px 40px;
      margin-bottom: 70px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price {
      border-radius:40px 40px 0 0;
      padding: 40px 25px;
      margin-bottom: 50px
  }
}

.contents .price h2 {
  margin-bottom: 35px
}

.contents .price .campaign {
  max-width: 1200px;
  margin: auto;
  background-color: #fff;
  border-radius: 25px;
  padding: 30px 60px 40px;
  margin-bottom: 60px
}

@media only screen and (max-width: 1280px) {
  .contents .price .campaign {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .price .campaign {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .price .campaign {
      padding:30px 30px 40px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign {
      padding:30px;
      margin-bottom: 35px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign {
      border-radius:20px;
      padding: 25px;
      margin-bottom: 30px
  }
}

.contents .price .campaign h3 {
  font-size: 25px;
  color: #ff699c;
  display: inline-block;
  font-weight: 900;
  margin-bottom: 20px;
  position: relative
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign h3 {
      font-size:20px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .campaign h3 {
      font-size:18px
  }
}

.contents .price .campaign h3:after,.contents .price .campaign h3:before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: #ff699c
}

.contents .price .campaign h3:before {
  left: -32px;
  transform: rotate(60deg)
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign h3:before {
      left:-28px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .campaign h3:before {
      left:-26px
  }
}

.contents .price .campaign h3:after {
  right: -28px;
  transform: rotate(-60deg)
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign h3:after {
      right:-24px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .campaign h3:after {
      right:-22px
  }
}

.contents .price .campaign .campaign-col {
  display: flex;
  justify-content: center
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col {
      display:block
  }
}

.contents .price .campaign .campaign-col .item {
  width: 40%;
  background-color: #f8f9ff;
  padding: 30px;
  border-radius: 25px;
  position: relative;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item {
      width:45%;
      padding: 30px 20px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item {
      width:100%;
      margin: 0 0 40px;
      padding: 20px 20px 25px
  }
}

.contents .price .campaign .campaign-col .item:before {
  content: "+";
  font-size: 30px;
  color: #000;
  position: absolute;
  right: -33px;
  top: 30%;
  font-weight: 900
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item:before {
      right:0;
      left: 0;
      top: inherit;
      bottom: -40px;
      margin: auto
  }
}

.contents .price .campaign .campaign-col .item:last-child {
  margin-bottom: 0
}

.contents .price .campaign .campaign-col .item:last-child:before {
  content: none
}

.contents .price .campaign .campaign-col .item h4 {
  font-weight: 900;
  background-color: #4d6df8;
  color: #fff;
  font-size: 20px;
  padding: 3px 20px;
  border-radius: 2em;
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  margin: auto;
  width: 60%
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item h4 {
      width:80%
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item h4 {
      top:-10px;
      font-size: 18px;
      width: 70%
  }
}

@media only screen and (max-width: 360px) {
  .contents .price .campaign .campaign-col .item h4 {
      width:80%
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .campaign .campaign-col .item h4 {
      font-size:16px
  }
}

.contents .price .campaign .campaign-col .item .price-text {
  display: flex;
  align-items: center;
  font-weight: 900
}

.contents .price .campaign .campaign-col .item .price-text .title {
  font-size: 20px;
  line-height: 1.2;
  margin-right: 20px
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .title {
      font-size:18px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item .price-text .title {
      font-size:14px
  }
}

.contents .price .campaign .campaign-col .item .price-text .title span {
  font-size: 34px
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .title span {
      font-size:30px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item .price-text .title span {
      font-size:23px
  }
}

.contents .price .campaign .campaign-col .item .price-text .detail {
  text-align: left
}

.contents .price .campaign .campaign-col .item .price-text .detail .cancellation {
  position: relative;
  font-size: 24px;
  line-height: 1.1
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .cancellation {
      font-size:22px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .cancellation {
      font-size:20px
  }
}

.contents .price .campaign .campaign-col .item .price-text .detail .cancellation:before {
  content: "";
  transform: rotate(-10deg);
  width: 90px;
  border: 0;
  border-top: 2px solid #000;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -3px;
  top: 12px
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .cancellation:before {
      width:80px
  }
}

.contents .price .campaign .campaign-col .item .price-text .detail .cancellation span {
  font-size: 15px
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .cancellation span {
      font-size:13px
  }
}

.contents .price .campaign .campaign-col .item .price-text .detail .text-large {
  font-size: 48px;
  color: #f93f3f;
  line-height: 1.5
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .text-large {
      font-size:40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .text-large {
      font-size:30px
  }
}

.contents .price .campaign .campaign-col .item .price-text .detail .text-large span {
  font-size: 30px
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .price-text .detail .text-large span {
      font-size:18px
  }
}

.contents .price .campaign .campaign-col .item .text-large {
  font-weight: 900;
  font-size: 30px;
  line-height: 1.5
}

@media only screen and (max-width: 1024px) {
  .contents .price .campaign .campaign-col .item .text-large {
      font-size:20px
  }
}

.contents .price .campaign .campaign-col .item .text-large span {
  color: #f93f3f
}

.contents .price .course {
  max-width: 1200px;
  margin: auto
}

@media only screen and (max-width: 1280px) {
  .contents .price .course {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .price .course {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .price .course {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .course {
      padding:0 25px
  }
}

@media only screen and (max-width: 1280px) {
  .contents .price .course {
      padding:0
  }
}

.contents .price .course h3 {
  font-size: 35px;
  font-weight: 900;
  margin-bottom: 25px
}

@media only screen and (max-width: 767px) {
  .contents .price .course h3 {
      font-size:25px;
      margin-bottom: 20px
  }
}

.contents .price .course .course-col {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col {
      display:block
  }
}

.contents .price .course .course-col .item {
  width: 31%;
  padding: 30px 30px 40px;
  position: relative
}

@media only screen and (max-width: 1024px) {
  .contents .price .course .course-col .item {
      width:100%;
      padding: 30px 40px;
      margin-bottom: 25px;
      display: flex;
      align-items: center
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item {
      width:100%;
      padding: 25px;
      margin-bottom: 15px;
      display: block
  }
}

@media only screen and (max-width: 360px) {
  .contents .price .course .course-col .item {
      padding:25px 20px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item {
      padding:25px 18px
  }
}

.contents .price .course .course-col .item:first-child {
  -moz-transition-delay: 200ms;
  -webkit-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  ms-transition-delay: 200ms
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:first-child {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .price .course .course-col .item:nth-child(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  ms-transition-delay: 400ms
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:nth-child(2) {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .price .course .course-col .item:nth-child(3) {
  -moz-transition-delay: 600ms;
  -webkit-transition-delay: 600ms;
  -o-transition-delay: 600ms;
  ms-transition-delay: 600ms
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:nth-child(3) {
      -moz-transition-delay:0;
      -webkit-transition-delay: 0;
      -o-transition-delay: 0;
      ms-transition-delay: 0
  }
}

.contents .price .course .course-col .item:last-child {
  width: 100%;
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: center
}

@media only screen and (max-width: 1024px) {
  .contents .price .course .course-col .item:last-child {
      margin-top:0
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:last-child {
      display:block
  }
}

.contents .price .course .course-col .item:last-child h4 {
  margin-right: 35px;
  margin-top: 45px;
  flex-shrink: 0
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:last-child h4 {
      margin-right:0;
      margin-top: 15px
  }
}

.contents .price .course .course-col .item:last-child .balloon {
  position: relative;
  display: inline-block;
  margin: 0 0;
  padding: 2px 10px;
  min-width: 140px;
  max-width: 100%;
  color: #fff;
  background: #ff699c;
  top: -48px;
  left: 180px;
  border-radius: 2em
}

@media only screen and (max-width: 1024px) {
  .contents .price .course .course-col .item:last-child .balloon {
      position:absolute;
      top: 45px;
      left: 100px
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:last-child .balloon {
      position:relative;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      min-width: 100px
  }
}

.contents .price .course .course-col .item:last-child .balloon span {
  font-size: 28px;
  line-height: 1
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:last-child .balloon span {
      font-size:20px
  }
}

.contents .price .course .course-col .item:last-child .balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ff699c
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item:last-child .balloon:before {
      margin-left:-8px;
      border: 8px solid transparent;
      border-top: 8px solid #ff699c
  }
}

.contents .price .course .course-col .item h4 {
  font-size: 20px;
  color: #ff699c;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.4;
  letter-spacing: 0
}

@media only screen and (max-width: 1024px) {
  .contents .price .course .course-col .item h4 {
      font-size:18px;
      margin-right: 20px;
      flex-shrink: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item h4 {
      margin-bottom:15px;
      margin-right: 0
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item h4 {
      font-size:17px
  }
}

.contents .price .course .course-col .item h4 span {
  font-size: 16px;
  color: #4d6df8
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item h4 span {
      font-size:14px
  }
}

.contents .price .course .course-col .item ul {
  border-top: 1px solid #f4c6d5
}

@media only screen and (max-width: 1024px) {
  .contents .price .course .course-col .item ul {
      width:100%
  }
}

.contents .price .course .course-col .item ul li {
  border-bottom: 1px solid #f4c6d5;
  display: flex;
  padding: 22px 0
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li {
      font-size:13px;
      padding: 18px 0
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item ul li {
      display:block;
      padding: 13px 0
  }
}

.contents .price .course .course-col .item ul li h5 {
  font-weight: 900;
  width: 130px;
  text-align: left
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li h5 {
      width:110px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item ul li h5 {
      width:100%;
      margin-bottom: 5px
  }
}

.contents .price .course .course-col .item ul li h5 span {
  font-size: 12px
}

.contents .price .course .course-col .item ul li .text {
  width: calc(100% - 130px);
  display: flex
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li .text {
      width:calc(100% - 110px)
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item ul li .text {
      width:100%
  }
}

.contents .price .course .course-col .item ul li p {
  line-height: 1.4;
  text-align: left
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item ul li p {
      width:100%
  }
}

.contents .price .course .course-col .item ul li p span {
  font-size: 11px;
  display: block
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li p span {
      font-size:10px
  }
}

@media only screen and (max-width: 320px) {
  .contents .price .course .course-col .item ul li p span {
      display:inline-block
  }
}

.contents .price .course .course-col .item ul li p span.del {
  font-size: 16px;
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: #f93f3f
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li p span.del {
      font-size:14px
  }
}

.contents .price .course .course-col .item ul li p.attention {
  display: inline-block;
  color: #f93f3f;
  position: relative;
  padding-left: 22px;
  margin-left: 5px
}

.contents .price .course .course-col .item ul li p.attention:before {
  content: "→";
  font-size: 18px;
  color: #000;
  position: absolute;
  left: 0;
  top: -2px
}

@media only screen and (max-width: 767px) {
  .contents .price .course .course-col .item ul li p.attention:before {
      font-size:15px
  }
}

.contents .price .course .course-col .item ul li p.attention span {
  display: inline-block
}

.contents .manager {
  text-align: center;
  margin-bottom: 110px
}

@media only screen and (max-width: 1024px) {
  .contents .manager {
      margin-bottom:80px
  }
}

@media only screen and (max-width: 767px) {
  .contents .manager {
      margin-bottom:60px
  }
}

.contents .manager h2 {
  margin-bottom: 35px
}

.contents .manager .inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center
}

@media only screen and (max-width: 1280px) {
  .contents .manager .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .manager .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .manager .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .manager .inner {
      align-items:flex-start
  }
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner {
      display:block
  }
}

.contents .manager .inner .image {
  flex-shrink: 0;
  margin-right: 65px
}

@media only screen and (max-width: 1024px) {
  .contents .manager .inner .image {
      margin-right:35px;
      width: 40%
  }
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner .image {
      margin-right:0;
      margin-bottom: 20px;
      width: 100%
  }
}

.contents .manager .inner .image img {
  box-shadow: 13px 13px 20px #eaeaea,-13px -13px 20px #ffffff
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner .image img {
      box-shadow:8px 8px 17px #eaeaea,-8px -8px 17px #ffffff
  }
}

.contents .manager .inner .text {
  text-align: left
}

.contents .manager .inner .text .title {
  font-size: 13px;
  line-height: 1.4
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner .text .title {
      font-size:12px
  }
}

.contents .manager .inner .text .name {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 900
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner .text .name {
      font-size:18px;
      margin-bottom: 10px
  }
}

.contents .manager .inner .text .profile {
  margin-bottom: 25px
}

@media only screen and (max-width: 1024px) {
  .contents .manager .inner .text .profile {
      margin-bottom:15px
  }
}

.contents .manager .inner .text .license h3 {
  font-size: 20px;
  font-weight: 900
}

@media only screen and (max-width: 767px) {
  .contents .manager .inner .text .license h3 {
      font-size:18px
  }
}

@media only screen and (max-width: 320px) {
  .contents .manager .inner .text .license h3 {
      font-size:16px
  }
}

.contents .access {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: #f8f9ff;
  text-align: center;
  padding: 80px 0;
  margin-bottom: 110px
}

@media only screen and (max-width: 1024px) {
  .contents .access {
      padding:60px 0;
      margin-bottom: 80px
  }
}

@media only screen and (max-width: 767px) {
  .contents .access {
      padding:40px 0;
      margin-bottom: 50px
  }
}

.contents .access h2 {
  margin-bottom: 35px
}

@media only screen and (max-width: 767px) {
  .contents .access h2 {
      margin-bottom:25px
  }
}

.contents .access .inner {
  max-width: 1200px;
  margin: auto
}

@media only screen and (max-width: 1280px) {
  .contents .access .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .access .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .access .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .access .inner {
      padding:0 25px
  }
}

.contents .access .inner .catch {
  font-size: 23px;
  font-weight: 900;
  margin-bottom: 25px
}

@media only screen and (max-width: 767px) {
  .contents .access .inner .catch {
      font-size:18px;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 320px) {
  .contents .access .inner .catch {
      font-size:16px
  }
}

.contents .access .inner .address {
  font-size: 18px;
  margin-bottom: 50px
}

@media only screen and (max-width: 767px) {
  .contents .access .inner .address {
      font-size:16px;
      margin-bottom: 30px
  }
}

@media only screen and (max-width: 320px) {
  .contents .access .inner .address {
      font-size:14px
  }
}

.contents .access .inner .address span {
  font-size: 14px;
  display: block
}

@media only screen and (max-width: 767px) {
  .contents .access .inner .address span {
      font-size:13px
  }
}

@media only screen and (max-width: 320px) {
  .contents .access .inner .address span {
      font-size:12px
  }
}

.contents .access .inner ul {
  display: grid;
  grid-template-rows: 200px 200px;
  grid-template-columns: 755px auto;
  gap: 20px;
  margin-bottom: 40px
}

@media only screen and (max-width: 1280px) {
  .contents .access .inner ul {
      grid-template-rows:180px 180px;
      grid-template-columns: 700px auto
  }
}

@media only screen and (max-width: 1024px) {
  .contents .access .inner ul {
      grid-template-rows:108px 108px;
      grid-template-columns: 430px auto
  }
}

@media only screen and (max-width: 767px) {
  .contents .access .inner ul {
      display:flex;
      flex-wrap: wrap;
      gap: 19px;
      margin-bottom: 30px
  }
}

@media only screen and (max-width: 360px) {
  .contents .access .inner ul {
      gap:15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .access .inner ul li {
      width:47%
  }
}

.contents .access .inner ul li img {
  width: 100%;
  box-shadow: 13px 13px 20px #eaeaea,-13px -13px 20px #ffffff
}

@media only screen and (max-width: 767px) {
  .contents .access .inner ul li img {
      box-shadow:8px 8px 17px #eaeaea,-8px -8px 17px #ffffff
  }
}

.contents .access .inner ul li:first-child {
  grid-row: span 2;
  grid-column: span 1
}

@media only screen and (max-width: 767px) {
  .contents .access .inner ul li:first-child {
      width:100%
  }
}

.contents .access .inner .map-col iframe {
  width: 100%;
  height: 450px
}

@media only screen and (max-width: 1024px) {
  .contents .access .inner .map-col iframe {
      height:300px
  }
}

@media only screen and (max-width: 767px) {
  .contents .access .inner .map-col iframe {
      height:250px
  }
}

.contents .company {
  text-align: center;
  margin-bottom: 150px
}

@media only screen and (max-width: 767px) {
  .contents .company {
      padding:0 25px;
      margin-bottom: 100px
  }
}

.contents .company h2 {
  margin-bottom: 35px
}

@media only screen and (max-width: 320px) {
  .contents .company h2 {
      margin-bottom:20px
  }
}

.contents .company table {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  border-top: 1px solid #ededed
}

.contents .company table td,.contents .company table th {
  padding: 25px 10px
}

@media only screen and (max-width: 767px) {
  .contents .company table td,.contents .company table th {
      padding:15px 8px
  }
}

.contents .company table th {
  width: 30%;
  border-bottom: 1px solid #ededed
}

@media only screen and (max-width: 767px) {
  .contents .company table th {
      width:20%
  }
}

@media only screen and (max-width: 320px) {
  .contents .company table th {
      width:25%
  }
}

.contents .company table td {
  width: 70%;
  border-bottom: 1px solid #ededed
}

@media only screen and (max-width: 767px) {
  .contents .company table td {
      width:80%
  }
}

@media only screen and (max-width: 320px) {
  .contents .company table td {
      width:75%
  }
}

.contents .blog {
  text-align: center;
  padding: 150px 0 30px
}

@media only screen and (max-width: 1024px) {
  .contents .blog {
      padding:100px 0 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog {
      padding:60px 0 0
  }
}

.contents .blog h2 {
  margin-bottom: 80px
}

@media only screen and (max-width: 1024px) {
  .contents .blog h2 {
      margin-bottom:50px
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog h2 {
      margin-bottom:30px
  }
}

.contents .blog .inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 35px
}

@media only screen and (max-width: 1280px) {
  .contents .blog .inner {
      padding:0 45px
  }
}

@media screen and (min-width: 1025px) and (max-width:1160px) {
  .contents .blog .inner {
      max-width:100%;
      padding: 0 30px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .blog .inner {
      max-width:100%;
      padding: 0 40px
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog .inner {
      padding:0 25px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .blog .inner {
      flex-wrap:wrap;
      margin-bottom: 15px
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog .inner {
      display:block
  }
}

.contents .blog .inner .item {
  width: 270px;
  text-align: left
}

@media screen and (min-width: 1025px) and (max-width:1280px) {
  .contents .blog .inner .item {
      width:230px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .blog .inner .item {
      width:48.5%;
      margin-bottom: 15px
  }

  .contents .blog .inner .item a {
      display: flex
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog .inner .item {
      width:100%;
      margin-bottom: 10px
  }
}

.contents .blog .inner .item img {
  width: 270px;
  height: 270px;
  object-fit: cover;
  margin-bottom: 10px;
  border-radius: 10px
}

@media screen and (min-width: 1025px) and (max-width:1280px) {
  .contents .blog .inner .item img {
      width:230px;
      height: 230px
  }
}

@media only screen and (max-width: 1024px) {
  .contents .blog .inner .item img {
      width:100px;
      height: 100px;
      margin-right: 20px;
      margin-bottom: 0
  }
}

@media only screen and (max-width: 767px) {
  .contents .blog .inner .item img {
      width:80px;
      height: 80px;
      margin-right: 15px
  }
}

.contents .blog .inner .item .date {
  font-size: 12px
}

.contents .blog .inner .item .title {
  line-height: 1.3
}

@media only screen and (max-width: 1024px) {
  .contents .blog .inner .item .title {
      overflow:hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3
  }
}

.contents .blog .button {
  width: 200px;
  margin: auto
}

.contents .blog .button a {
  padding: 12px 20px;
  background-color: #4d6df8
}

#campaign {
  z-index: 15000
}

#campaign .modal-dialog {
  max-width: 1080px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-dialog {
      width:90%;
      margin: 50px auto 0
  }
}

#campaign .modal-content {
  margin: auto;
  border: none;
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));
  max-height: 80vh;
  overflow: auto;
  overflow-x: hidden
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content {
      height:70vh
  }
}

#campaign .modal-content .modal-body {
  padding: 45px 70px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body {
      padding:30px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body {
      padding:30px 20px
  }
}

#campaign .modal-content .modal-body .inner {
  position: relative;
  text-align: center
}

#campaign .modal-content .modal-body .inner h2 {
  font-size: 35px;
  font-weight: 900;
  margin-bottom: 25px;
  border-bottom: 3px solid #ff699c;
  display: inline-block;
  padding-bottom: 10px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner h2 {
      font-size:25px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner h2 {
      font-size:20px
  }
}

#campaign .modal-content .modal-body .inner .mg {
  margin-bottom: 45px
}

#campaign .modal-content .modal-body .inner .item {
  text-align: left;
  background-color: #f8f9ff;
  border: 1px solid #eaedfe;
  margin-bottom: 25px;
  border-radius: 25px;
  padding: 40px 60px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .item {
      padding:30px 40px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item {
      padding:25px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .item {
      padding:20px
  }
}

#campaign .modal-content .modal-body .inner .item h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
  color: #4d6df8
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item h3 {
      font-size:16px;
      margin-bottom: 10px
  }
}

#campaign .modal-content .modal-body .inner .item .caption {
  font-size: 13px;
  margin-bottom: 5px;
  color: #ff699c
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item .caption {
      font-size:12px
  }
}

#campaign .modal-content .modal-body .inner .item .detail {
  font-size: 14px;
  margin-bottom: 25px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item .detail {
      font-size:13px;
      margin-bottom: 15px
  }
}

#campaign .modal-content .modal-body .inner .item table {
  background-color: #fff;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ededed;
  margin-bottom: 25px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item table {
      font-size:13px
  }
}

#campaign .modal-content .modal-body .inner .item table td,#campaign .modal-content .modal-body .inner .item table th {
  padding: 15px;
  border-bottom: 1px solid #ededed
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item table td,#campaign .modal-content .modal-body .inner .item table th {
      padding:10px
  }
}

#campaign .modal-content .modal-body .inner .item table th {
  width: 20%;
  background-color: #f5f5f5
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item table th {
      width:35%
  }
}

#campaign .modal-content .modal-body .inner .item table td {
  width: 80%
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item table td {
      width:65%
  }
}

#campaign .modal-content .modal-body .inner .item table td span {
  font-size: 12px
}

#campaign .modal-content .modal-body .inner .item .button {
  width: 200px;
  margin: auto;
  text-align: center
}

#campaign .modal-content .modal-body .inner .item .button a {
  padding: 15px 20px
}

#campaign .modal-content .modal-body .inner .item.no-bg {
  background-color: transparent;
  border: none;
  padding: 0;
  text-align: center
}

#campaign .modal-content .modal-body .inner .item.no-bg .image {
  width: 80%;
  margin: auto
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item.no-bg .image {
      width:100%
  }
}

#campaign .modal-content .modal-body .inner .item.no-bg .catch-text {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 15px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item.no-bg .catch-text {
      font-size:16px
  }
}

#campaign .modal-content .modal-body .inner .item.no-bg .catch-text span {
  background: linear-gradient(transparent 70%,#efed3c 70%)
}

#campaign .modal-content .modal-body .inner .item.no-bg .catch-text.type02 {
  position: relative;
  display: inline-block;
  padding: 0 30px;
  line-height: 1.4
}

#campaign .modal-content .modal-body .inner .item.no-bg .catch-text.type02:before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  width: 1px;
  height: 100%;
  background: #000;
  border-radius: 3px;
  transform: rotate(-30deg)
}

#campaign .modal-content .modal-body .inner .item.no-bg .catch-text.type02:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #000;
  border-radius: 3px;
  transform: rotate(30deg)
}

#campaign .modal-content .modal-body .inner .item.no-bg .image-photo {
  display: flex;
  justify-content: space-between
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item.no-bg .image-photo {
      flex-wrap:wrap
  }
}

#campaign .modal-content .modal-body .inner .item.no-bg .image-photo li {
  width: 24%;
  padding-left: 0
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .item.no-bg .image-photo li {
      width:48.5%
  }
}

#campaign .modal-content .modal-body .inner .item.no-bg .image-photo li:before {
  content: none
}

#campaign .modal-content .modal-body .inner button {
  position: absolute;
  top: -10px;
  right: -20px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner button {
      top:-10px;
      right: -10px
  }
}

#campaign .modal-content .modal-body .inner .gym .caption {
  font-weight: 900;
  margin-bottom: 8px;
  color: #4d6df8
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .caption {
      font-size:12px;
      margin-bottom: 5px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .gym .caption {
      font-size:10px
  }
}

#campaign .modal-content .modal-body .inner .gym .caption span {
  font-size: 20px;
  font-weight: 900
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym .caption span {
      font-size:15px
  }
}

@media only screen and (max-width: 360px) {
  #campaign .modal-content .modal-body .inner .gym .caption span {
      font-size:13px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .gym .caption span {
      font-size:12px
  }
}

#campaign .modal-content .modal-body .inner .gym h2 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 30px;
  border-bottom: 3px solid #ff699c;
  display: inline-block;
  padding-bottom: 5px;
  line-height: 1.5
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym h2 {
      font-size:14px;
      margin-bottom: 20px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .gym h2 {
      font-size:14px
  }
}

#campaign .modal-content .modal-body .inner .gym h2 span {
  display: block;
  font-size: 30px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym h2 span {
      font-size:25px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym h2 span {
      font-size:18px
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .gym h2 span {
      font-size:16px
  }
}

#campaign .modal-content .modal-body .inner .gym .item h2 {
  margin-bottom: 15px
}

#campaign .modal-content .modal-body .inner .gym .item ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item ul li {
      padding-left:14px
  }
}

#campaign .modal-content .modal-body .inner .gym .item ul li:before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #4d6df8;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item ul li:before {
      width:10px;
      height: 10px;
      top: 5px
  }
}

#campaign .modal-content .modal-body .inner .gym .item ul.flex {
  display: flex
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym .item ul.flex {
      display:block
  }
}

#campaign .modal-content .modal-body .inner .gym .item ul.flex li {
  margin-right: 20px
}

#campaign .modal-content .modal-body .inner .gym .item .detail {
  display: flex;
  align-items: center;
  margin-bottom: 40px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail {
      align-items:flex-start
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail {
      flex-wrap:wrap;
      margin-bottom: 20px
  }
}

#campaign .modal-content .modal-body .inner .gym .item .detail p {
  margin-right: 30px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail p {
      margin-right:0;
      order: 2
  }
}

#campaign .modal-content .modal-body .inner .gym .item .detail p span {
  color: #4d6df8;
  font-weight: 900
}

#campaign .modal-content .modal-body .inner .gym .item .detail img {
  width: 380px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail img {
      width:250px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail img {
      width:100%;
      order: 1;
      margin-bottom: 10px
  }
}

#campaign .modal-content .modal-body .inner .gym .item .detail:nth-child(2n) p {
  order: 2;
  margin-right: 0;
  margin-left: 30px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail:nth-child(2n) p {
      margin-left:0
  }
}

#campaign .modal-content .modal-body .inner .gym .item .detail:nth-child(2n) img {
  order: 1
}

#campaign .modal-content .modal-body .inner .gym .item .detail:last-of-type {
  margin-bottom: 0
}

#campaign .modal-content .modal-body .inner .gym .item .detail.type02 {
  justify-content: space-between
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail.type02 ul {
      width:calc(100% - 250px);
      margin-right: 15px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .item .detail.type02 ul {
      width:100%;
      margin-right: 0
  }
}

#campaign .modal-content .modal-body .inner .gym table {
  background-color: #fff;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ededed;
  margin-bottom: 25px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym table {
      font-size:13px
  }
}

#campaign .modal-content .modal-body .inner .gym table td,#campaign .modal-content .modal-body .inner .gym table th {
  padding: 15px;
  border-bottom: 1px solid #ededed;
  text-align: left
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym table td,#campaign .modal-content .modal-body .inner .gym table th {
      padding:10px
  }
}

#campaign .modal-content .modal-body .inner .gym table th {
  width: 20%;
  background-color: #f5f5f5
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym table th {
      width:100%;
      display: block
  }
}

#campaign .modal-content .modal-body .inner .gym table td {
  width: 80%
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym table td {
      width:100%;
      display: block
  }
}

#campaign .modal-content .modal-body .inner .gym table td .small {
  font-size: 12px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym table td .small {
      font-size:11px
  }
}

#campaign .modal-content .modal-body .inner .gym .catch {
  text-align: left;
  margin-bottom: 45px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .catch {
      margin-bottom:30px
  }
}

#campaign .modal-content .modal-body .inner .gym .catch span {
  font-weight: 900;
  color: #4d6df8
}

#campaign .modal-content .modal-body .inner .gym .pickup-text {
  margin-top: 25px;
  text-align: center;
  color: #ff699c;
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 900;
  background-color: rgba(255,105,156,0.1);
  padding: 8px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .pickup-text {
      font-size:16px;
      padding: 5px
  }
}

@media only screen and (max-width: 360px) {
  #campaign .modal-content .modal-body .inner .gym .pickup-text {
      font-size:14px
  }
}

#campaign .modal-content .modal-body .inner .gym .button {
  width: 400px;
  margin: auto;
  text-align: center;
  background-color: #ededed;
  padding: 15px 20px;
  border-radius: 5px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .button {
      width:100%
  }
}

#campaign .modal-content .modal-body .inner .gym .button a {
  padding: 15px 20px
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-body .inner .gym .button a {
      border-radius:3em
  }
}

@media only screen and (max-width: 320px) {
  #campaign .modal-content .modal-body .inner .gym .button a {
      padding:10px
  }
}

#campaign .modal-content .modal-body .inner .flow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .flow {
      display:block
  }
}

#campaign .modal-content .modal-body .inner .flow li {
  width: 18%;
  padding: 10px!important;
  background-color: #fff;
  border: 1px solid #eaedfe;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  position: relative
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .flow li {
      width:100%;
      margin-bottom: 18px!important
  }
}

#campaign .modal-content .modal-body .inner .flow li:before {
  content: none!important
}

#campaign .modal-content .modal-body .inner .flow li:after {
  content: "";
  width: 8px;
  aspect-ratio: 1/2;
  clip-path: polygon(0 0,100% 50%,0 100%);
  background: #d9dffd;
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translate(0,-50%)
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-body .inner .flow li:after {
      width:12px;
      height: 8px;
      aspect-ratio: 2;
      clip-path: polygon(50% 100%,100% 0,0 0);
      right: 0;
      left: 0;
      top: inherit;
      bottom: -18px;
      margin: auto
  }
}

#campaign .modal-content .modal-body .inner .flow li:last-child:after {
  content: none
}

#campaign .modal-content .modal-footer {
  margin-top: 30px;
  text-align: center;
  border: none;
  display: block;
  border-top: 1px solid #ededed;
  padding: 30px 0
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-footer {
      margin-top:20px;
      padding: 20px 0
  }
}

#campaign .modal-content .modal-footer button {
  background-color: #d6d9e1;
  border: none;
  padding: 10px 25px;
  width: 200px
}

@media only screen and (max-width: 1024px) {
  #campaign .modal-content .modal-footer button {
      width:100px
  }
}

@media only screen and (max-width: 767px) {
  #campaign .modal-content .modal-footer button {
      font-size:13px
  }
}

/* ヒーローテキスト強調ライン */
.highlight-line {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 24px;
  z-index: 1;
}

.highlight-line::before {
    content: "";
    position: absolute;
    bottom: 0.1em;
    left: -5%;
    width: 110%;
    height: 6px;
    background-color: #ff699c;
    border-radius: 3px;
    z-index: -1;
}

/* リボン */
.contents .mainimage .inner .item:first-child .feature {
  margin-top: 20px;
}
.ribbon-banner {
  position: absolute; /* 画像の上に重ねる前提 */
  top: -85px; /* 必要に応じて調整 */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background: linear-gradient(to bottom, #f8b500, #efed3c, #f8b500);
  color: #fff;
  padding: 0 24px 10px;
  border-radius: 4px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  z-index: 10;
  width: 105%;
}

.ribbon-text {
  text-align: center;
  padding: 6px 0;
  letter-spacing: 0.3em;
}

.ribbon-text .main {
  display: block;
  font-size: 30px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #00000066;
  line-height: 1.3;
  border-bottom: 1px solid #fff;
}

.ribbon-text .big {
  font-size: 45px;
  font-weight: 900;
  margin-left: 4px;
  text-shadow: 2px 2px 3px #9b5e00;
}

.ribbon-text .sub {
  display: block;
  font-size: 27px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #00000066;
  line-height: 1.3;
  margin-top: 4px;
}
.contents .mainimage button {
  display: none !important;
}
.contents .mainimage .rate {
  bottom: 350px;
  left: 20px;
  right: auto;
}

@media only screen and (max-width: 767px) {
  .contents .mainimage .inner .item:first-child .feature {
    margin-top: 30px;
  }
  .ribbon-banner {
    top: -60px;
  }
  .ribbon-text .main {
    font-size: 20px;
  }

  .ribbon-text .big {
    font-size: 24px;
  }

  .ribbon-text .sub {
    font-size: 18px;
  }
  .contents .mainimage .rate {
    bottom: 165px;
    left: -10px;
  }
  .contents .mainimage .rate div {
    color: #4d6df8;
    text-shadow: 1px 1px 2px #fff;
  }
  .contents .about {
    padding: 250px 20px 0;
  }
}

.navi .brand-links {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: space-between;
}

.navi .brand-links ul {
  display: flex;
  gap: 10px; /* ブログとインスタの間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.navi .brand-links ul a {
  font-size: 16px;
}
.navi .brand-links ul a .fa-brands {
  padding-top: 5px;
}

/* ▼ ブログリンクだけボタン風 */
.company ul {
  display: flex;
  gap: 40px;
  margin-top: 16px;
  justify-content: center;
  align-items: center;
}

.company ul li a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all .2s ease;
}

/* ブログボタン */
.company ul li a.blog-button {
  padding: 10px 18px;
  border-radius: 999px;
  background: #3a66ff;     /* コーポレート寄りの青 */
  color: #fff;
  font-weight: 600;
  font-size: 1.05em;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.company ul li a.blog-button:hover {
  background: #1c3faa;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}

/* インスタはアイコン強調だけ */
.company ul li a i {
  font-size: 35px;
  color: #bc2a8d; /* IGっぽい紫系にしてもOK */
  transition: color .2s ease;
}

.company ul li a:hover i {
  color: #e95950;
}