/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require font-awesome
 *= require ./lib/bootstrap-4.0.0/bootstrap.min
 *= require ./lib/jquery.smartmenus.bootstrap.css
 *= require_tree .
 *= require_self

 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');

@charset "UTF-8";
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 2;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

a img {
  border: none;
}

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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  word-break: break-word;
}

html, body {
  font-family:  "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro", "游ゴシック", "游明朝", "ヒラギノ明朝 Pro", "Oswald", "メイリオ", "游ゴシック", "Noto Serif", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
  line-height: 1.8;
  text-align: justify;
  -webkit-text-size-adjust: 100%;
  font-size: 10px;
  font-weight: normal;
}

a,a:hover {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

h1, h2, h3, h4, h5,  h6, p {
  margin: auto;
}

p, dt, dd {
  overflow-wrap: break-word;
}

body {
  margin: auto; 
  position: relative;
}

/*--------------------------responsive ---------------------*/
.clearfix::before,
.clearfix::after {
    display: block;
    content: "";
    clear: both;
  }


/*--------------------------------------------------------------------------*/
/* Common
---------------------------------------------------------------------------------*/

body {
  position: relative;
  margin: 0;
  background: white;
}

h1 {
  margin: initial;
}

h2 {
  font-size: 4rem;
  font-weight: 900;
  color: #0061C1;
  text-align: center;
}

h3 {
  font-size: 2.5rem;
  color:#0061C1;
  font-weight: 700; 
}

h1, h2, h3, h4 {
    line-height: 1.3;
  font-weight: bold;
  margin: 0;
}

p, td, ul, li, strong  {
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
}
p {
  white-space: pre-line;
}
.c_con {
  width: 120rem;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
  position: relative;
}
main {
  position: relative;
}
.sCom {
  padding: 8rem 0;
}
.sBody {
  margin-top: 5rem;
}
.btn {
  display: block;
  cursor: pointer;
}
.btn_main {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: pulse;
  display: block;
  max-width: 100%;
  width: 40.5rem;
  margin-left: auto;
  margin-right: auto;
}
.boxShadow {
  box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
  -moz-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
}
.fv {
  position: relative;
  background: #ECF3FB;
}
.fvImgWrapper{
  position: relative;
}
#particles-js {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.fvImg {
  height: 86.5rem;
  object-fit: cover;
}
.topImg {
  height: 66rem;
  object-fit: cover;
  margin: auto;
  margin-top: -34rem;
  width: 108.9rem;
  position: relative;
}
.onayami {
  background-color: #ECF3FB;
  -webkit-clip-path: polygon(50% 100%, 100% 90%, 100% 0, 0 0, 0 90%);
  clip-path: polygon(50% 100%, 100% 90%, 100% 0, 0 0, 0 90%);
  padding-top: 8rem;
}
main {
  background: url(img/bg1.png);
  background-repeat: repeat-y;
  background-size: contain;
}
.tanto {
  padding: 3rem 0;
}
.tanto h2 {
  font-size: 5.5rem;
  text-align: center;
  color: #0061C1;
}
.tanto p {
  font-size: 3.5rem;
  text-align: center;
  margin-top: 1rem;
  font-weight: 700;
}
.title p {
  font-size: 2rem;
  text-align: center;
  color: #0061C1;
  font-weight: 700;
}
.title h2 {
  margin-top: 0.5rem;
}
.title.white h2 {
  margin-top: 0.5rem;
}
.title.white h2,
.title.white p {
  color: white;
}
.title {
  padding-bottom: 2rem;
  position: relative;
}
.title:before {
  content: "";
  width: 10rem;
  position: absolute;
  left: calc(50% - 5rem);
  height: 0.4rem;
  background: #0061C1;
  bottom: 0;
}
.title.white:before {
  background: white;
}
.bg1 {
  position: relative;
}
.bg1:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgb(0,75,177);
  background: linear-gradient(90deg, rgba(0,75,177,1) -75%, rgba(0,190,255,1) 0%, rgba(0,75,177,1) 100%);
}
.bg2 {
  background: #ECF3FB;
}
.bg3 {
  background: url(img/bg3.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.bg4 {
  background: url(img/bg4.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.promiseList {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.promiseItem  {
  width: 29rem;
  border-radius: 1rem;
  background: white;
  position: relative;
  padding: 5rem 1.5rem 3rem;
}
.promiseItemIcon {
  width: 6.4rem;
  object-fit: contain;
  position: absolute;
  top: -3.2rem;
  left: calc(50% - 3.2rem);
}
.promiseItem h3 {
  line-height: 1.3;
  text-align: center;
}
.promiseItemImg {
  width: 12rem;
  margin: 1rem auto;
}
.promiseItem p {
  font-size: 1.4rem;
}
.promise .sBody {
  margin-top: 8rem;
}
.promise:before {
  bottom: 16rem;
}
.earnTtl {
  width: 51.3rem;
  margin: auto;
}
.earn {
  padding-bottom: 5rem;
}
.resultInfo p {
  font-size: 2rem;
  text-align: center;
  margin-top: 2rem;
}
.resultImg {
  margin-top: 2rem;
}
.resultInfo span {
  color: #4D4D4D;
  display: block;
  text-align: center;
  margin-top: 2rem;
}
.revenueItemInfo {
  width: 60rem;
}
.revenueItemInfo span {
  color: #FFFF00;
}
.revenueItemImg {
  width: 57.6rem;
}
.revenueItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.revenueItemReserve{
  flex-direction: row-reverse;
}
.revenueItemInfo p{
  line-height: 2;
}
.revenueItemInfo p.white {
  color: white;
}
.strategyItem{
  width: 58rem;
  background: white;
  border-radius: 1rem;
  overflow: hidden;
}
.strategyList {
  display: flex;
  justify-content: space-between;
}
.strategyItem h3 {
  height: 20rem;
  background: #0061C1;
  color: white;
  font-size: 3rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}
.strategyItemInfo {
  padding: 6rem 3rem 3rem;
}
.strategyDetails {
  list-style: none;
}
.strategyDetailItem {
  padding-bottom: 1.7rem;
  position: relative;
  padding: 4rem 2rem 2rem;
}
.strategyDetailItem:before{
  content: '';
  position: absolute;
  left: 0;
  top: 1.7rem;
  right: 0;
  bottom: 0;
  background: #FAF6E2;
  border-radius: 1rem;
  box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
  -webkit-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
  -moz-box-shadow: -0.1rem 0.2rem 0.5rem 0px rgba(0,0,0,0.2);
}
.strategyDetailItem span {
  width: 18.6rem;
  height: 3.4rem;
  line-height: 3.4rem;
  background: #8CC63F;
  color: white;
  border-radius: 1.7rem;
  position: absolute;
  left: calc(50% - 9.3rem);
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
}
.strategyDetailItem h4 {
  font-size: 2rem;
  text-align: center;
    position: relative;
}
.strategyDetails>li:not(:first-child) {
  margin-top: 3.6rem;
}
.strategyDetails>li:not(:first-child):after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3rem solid transparent;
  border-right: 3rem solid transparent;
  border-top: 1rem solid #8CC63F;
  position: absolute;
  left: calc(50% - 3rem);
  top: -2.5rem;
}
.strategyDesc{
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.strategyList {
  margin-top: 4rem;
}
.courseItemTitle {
  height: 21.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #F2F2F2;
}
.courseItemMark {
  width: 7rem;
  object-fit: contain;
  margin: 0 auto;
}
.courseItemTitle h3 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0061C1;
  text-align: center;
  margin-top: 0.5rem; 
}
.courseItemTitle p {
  color: #4D4D4D;
  text-align: center;
  margin: 0;
}
.courseItem {
  width: 36rem;
  background: white;
  border-radius: 1rem;
  overflow: hidden;
}
.courseList{
  display: flex;
  justify-content: space-between;
}
.courseItemInfo {
  padding: 3rem 2rem 2rem;
}
.courseItemInfo ul li {
  position: relative;
  font-weight: 700;
  padding-left: 2rem;
  list-style: none;
  line-height: 2.2;
}
.courseItemInfo ul li:before {
  content: "";
  width: 1.3rem;
  height: 1.4rem;
  background: url(img/icon_check.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: calc(50% - 0.7rem);
}
.coursePro .courseItemTitle {
  background: #ff931e;
}
.coursePro .courseItemTitle h3,
.coursePro .courseItemTitle p {
  color: white;
}
.courseUltimate .courseItemTitle {
  background: #39B54A;
}
.courseUltimate .courseItemTitle h3,
.courseUltimate .courseItemTitle p {
  color: white;
}
.courseItemInfo p {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #4D4D4D;
}
.faqList dl {
  padding: 4rem 10rem;
  background: #ECF3FB;
}
.faqList dt,
.faqList dd {
  display: block;
  position: relative;
}
.faqList dt {
  font-size: 2.5rem;
  color: red;
  font-weight: 700;
    padding-top: 1rem;
}
.faqList dt,
.faqList dd {
  padding-left: 7rem;
}
.faqList dt:before,
.faqList dd:before {
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.faqList dt:before {
  background: red;
  content: "Q";
}
.faqList dd:before {
  background: #0061C1;
  content: "A";
}
.faqList dd {
  margin-top: 3rem;
  font-size: 1.8rem;
  padding-top: 1rem;
}
.faqList>dl:not(:first-child) {
  margin-top: 4rem;
}
.priceDesc {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}
.priceImg {
  margin-top: 4rem;
}
.applicationAct{
  width: 72.5rem;
  margin: auto;
}
.applicationAct>a:not(:first-child) {
  margin-top: 3rem;
}
.footerInfo p, 
.footerInfo a {
  font-size: 1.4rem;
  text-align: center;
  color: white;
}
.footerInfo a {
  text-decoration: underline;
}
.footerInfo {
  background: black;
  padding: 1.5rem 0;
}
.footerInfo .c_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form .sBody {
  width: 100rem;
  margin-left: auto;
  margin-right: auto;
}


/*----------------------my63p custom css--------------------*/
.form form.myForm div.submit input {
    width: 72.5rem;
    height: 10rem;
    border-radius: 5rem;
    background: #0061c1 !important;
    outline: "" !important;
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    border: none;
    box-shadow: none;
    cursor: pointer;
}
.form .content_title label, 
.form .content_box label, 
.form .content_confirm label, 
.form .content_form label {
  font-size: 2rem;
}
.form form.myForm .required .my_column.my_left label:first-child:after, 
.form form.myForm th.required label:first-child:after, 
.form form.myForm span.required:after {
    font-size: 0.7em;
    height: auto;
    padding: 0;
}






.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

@media screen and (max-width: 1250px) {
  html, body {
    font-size: calc(100vw / 125);
  }
}





@media screen and (max-width: 767px) {
  .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }
  html, body {
    font-size: calc(100vw / 60);
  }
  h2 {
    font-size: 4rem;
  }
  .mt7 {
    margin-top: 5rem;
  }
  .mt5 {
    margin-top: 4rem;
  }
  .mt4 {
    margin-top: 3rem;
  }
  .mt3 {
    margin-top: 2rem;
  }
  .c_con {
    width: calc(100% - 4rem);
  }
  .fvImg {
    content: url(img/fv_sp.png);
    height: auto;
  }
  .topImg {
    width: 100%;
    height: auto;
    margin-top: -16rem;
  }
  .onayamiImg {
    content: url(img/onayami_sp.png);
  }
  .promiseList {
    display: block;
  }
  .promiseItem {
    width: 100%;
    margin: 1rem 0;
  }
  .promiseItemImg {
    width: 20rem;
  }
  .promiseItem h3 {
    font-size: 3.5rem;
  }
  .promiseItem p {
    font-size: 2rem;
  }
  .promiseItemIcon {
    width: 10rem;
    top: -5rem;
    left: calc(50% - 5rem);
  }
  .promiseList>li:not(:first-child) {
    margin-top: 8rem;
  }
  .revenueItem {
    display: block;
  }
  .revenueItemImg,
  .revenueItemInfo {
    width: 100%;
  }
  .revenueItemInfo {
    margin-top: 3rem;
  }
  .revenueItemInfo p,
  .strategyDesc  {
    font-size: 2rem;
  }
  .strategyList {
    display: block;
  }
  .strategyItem  {
    width: 100%;
  }
  .strategyItem h3 {
    height: 14rem;
  }
  .strategyItemInfo {
    padding: 3rem 2rem 2rem;
  }
  .strategyDetailItem {
    position: relative;
    padding: 7rem 1rem 2rem;
  }
  .strategyDetailItem h4 {
    font-size: 2.5rem;
  }
  .strategyDetailItem span {
    height: 4.5rem;
    line-height: 4.5rem;
    border-radius: 2.5rem;
    font-size: 2.5rem;
  }
  .courseList{
    display: block;
  }
  .strategyList>div:not(:first-child),
  .courseList>li:not(:first-child) {
    margin-top: 4rem;
  }
  .courseItem  {
    width: 100%;
  }
  .courseItemMark {
    width: 10rem;
  }
  .courseItemTitle h3 {
    font-size: 3rem;
  }
  .courseItemTitle p {
    font-size: 2rem;
  }
  .courseItemInfo ul li {
    font-size: 2.5rem;
    padding-left: 3rem;
  }
  .courseItemInfo ul li:before {
    width: 2rem;
    height: 2.2rem;
    top: calc(50% - 1.1rem);
  }
  .courseItemInfo p {
    font-size: 2rem;
  }
  .faqList dl {
    padding: 2rem;
  }
  .applicationAct {
    width: 100%;
  }
  .footerInfo p, .footerInfo a {
    font-size: 2rem;
  }
  .priceImg {
    content: url(img/price_sp.svg);
  }
  .form .sBody {
    width: 100%;
  }
  .footerInfo .c_con {
    display: block;
  }
  .footerInfo p {
    width: 100%;
  }
  .footerMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
  }
  .footerMenu a {
    margin: 0 1rem;
  }

/*----------------------my63p custom css--------------------*/
  .form form.myForm div.submit input {
    width: 56rem;
    height: 8rem;
    border-radius: 4rem;
  }
  .form .content_form .input_unit .my_left.my_column,
  .form .content_form .input_unit .my_right.my_column {
    padding: 0;
    width: 100%;
  }
  .form .content_form .input_unit .my_right.my_column {
    margin-top: 1rem;
  }
  .form .content_form .input_unit {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .form form.myForm input[type="text"], 
  .form form.myForm input[type="password"],
  .form form.myForm textarea {
    width: 100%;
  }

}