/* resetCSS */
html, body, div, span, applet, object, iframe,
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-size: 100%;
    font: inherit;
    vertical-align: baseline;

}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    box-sizing: border-box;
}

/*body
---------------------------------------------------------------------------*/
html {
    font-size: 20px;
}

div{
    display: block;
}

body {
    font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, Roboto, YuGothic, "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

a:hover {
    opacity: .6;
}

.pc-on {
    display: block;
}
.sp-on {
    display: none;
}
@media screen and (max-width: 768px) {
    .pc-on {
        display: none;
    }
    .sp-on {
        display: block;
    }

}
@media screen and (min-width: 768px){
    .br-sp {display: none; }
}





/*ヘッダー
---------------------------------------------------------------------------*/
.header {
    height: 60px;
}
.header__logo img{
    width: 110px;
}
.header__cat {
    display: flex;

    justify-content: space-between;
    align-items: center;
}
.header__cat input,
.header__cat label {
    display: none;
}
.header__navi__list {
    display: flex;
}
.header__navi__item span {
    position: relative;
}
.header__navi__item span:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 1px;
    background: #000;
    opacity: 0;
    transition: all .8s cubic-bezier(.19,1,.22,1);
    transition-timing-function: cubic-bezier(.19,1,.22,1);
}
.header__navi__item:hover span:after {
    opacity: 1;
    left: 0;
    width: 100%;
}
.header__navi a {
    text-decoration: none;
    font-family: ヒラギノ角ゴシック W4;
    padding-left: 10px;
    padding-right: 20px;
    font-size: .8rem;
    color: #000;
}
.header__navi__item5{
    margin-right: 30px;
}



/*キービジュアル
---------------------------------------------------------------------------*/
.mainKv_img img {
    width: 100%;
}


/*ボタン
---------------------------------------------------------------------------*/
.banners {
    background-image: url(../images/banners_bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 60px 6px;
    display: flex;
    align-items: center;
}
.banners_item {
    width: 50%;
}
.banners_btn {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #65d1bb;
    padding: 24px 60px;
    border-radius: 16px;
    font-size: 2rem;
    width: 90%;
    text-align: center;
}
.bannersInner__sub_text {
    font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    color:#EE3333;
    letter-spacing:-0.04em;
    text-shadow:
      4px 4px 0 #000,
      -2px 2px 0 #000,
      2px -2px 0 #000,
      -2px -2px 0 #000;
    -webkit-text-stroke: 2px #fff;
}
.bannersInner__sub_text23{
    font-size: 3rem;
    text-align: center;
    margin-top: -20px;
    font-weight: 800;
    letter-spacing:-0.04em;
    text-shadow:
      4px 4px 0 #000,
      -2px 2px 0 #000,
      2px -2px 0 #000,
      -2px -2px 0 #000;
    -webkit-text-stroke: 2px #ede15f;
}
.bannersInner__sub_text23 span{
    font-size: 2rem;
}

/*ビデオ
---------------------------------------------------------------------------*/
.detail {
    background-image: url(../images/kv_bg.jpg);
    background-size: 100%;
    background-repeat: repeat;
}

.detailBox{
color: #fff;
    margin: 0 auto 50px;
    text-align: center;
    padding-bottom: 40px;
}
.detail .detailVideo {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 24px;
  max-width: 645px;
  margin: auto;
  padding-bottom: 18px;
}
.detail h3{
    font-size: 3rem;
    font-weight: 700;
    padding-top: 30px;  
    margin-left: 22px;
}
.detail h3:first-letter {
    font-size: 150%;
    color: #eb6100;
}
.detail h2{
    font-size: 1.1rem;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
}



/*お悩み
---------------------------------------------------------------------------*/
.message1{
    width:100%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 50px;

}
.problems h2 .ssa{
    font-size: 2.5rem;
    font-weight: 600;
    color: #4F73D9;
    padding-top: .5em;
    background-position: top left -2px;
    background-repeat: repeat-x;
    background-size: 1.3em .3em;
    background-image: -webkit-radial-gradient(.15em .15em at center center,#4F73D9,#4F73D9 100%,transparent);
    background-image: radial-gradient(.15em .15em at center center,#4F73D9,#4F73D9 100%,transparent);
}
.problems h2{
    width:100%;
    text-align: center;
    font-size: 3rem;
    font: weight 7px;;
    margin-top: 30px;
    margin-bottom: 10px;
}
.problems h2 span{
    font-size: 2.6rem;
    color: #121111;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -5.2px;
}
.problemsList{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 930px;
    margin: 0 auto 0px;
    background-color: #DCDCDC;
    padding: 15px .3% 0 3%;
    height: 550px;
}
.problemsList div p::before{
     content: "";
    background-image: url(../images/check.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 38px;
    height: 46px;
    text-align: center;
    left: 0;
    z-index: 2;
}
.problemsList div img{
    padding-top: 112px;
    width: 316px;
}
.problemsList div p{
    top: 50px;
    font-size: 1rem;
    padding: 15px 0 15px 48px;
    border-bottom: 1px dotted #ababa7;
    position: relative; 
    font-weight: 700;   
}
.emphasisYellow{
    background: linear-gradient(rgba(0 0 0 / 0) 50%, #ede15f 50%);
}
.probremMen {
     height: 280px;
     text-align: center;
}

/*オススメPC
---------------------------------------------------------------------------*/

.arrow img{
    display: flex;
    width: 300px;
    margin: auto;
    padding: 30px;
}
.recommend__title{
    background-color: #2E4B71;
    font-size: 3rem;
    text-align: center;
    padding: 10px;
    color: #FFF706;
    font-weight: 700;
}
.recommend{
    background-image: url("../images/test.pc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: 75px;
    padding-bottom: 30px;
}
.recommendImg{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.recommendImg img {
    max-width: 900px;
    height: auto;
    margin-bottom: 60px;
}
.recommendSP .recoSpList {
    margin-top: 40px;
}
.recommendMen{
    display: flex;
}
.recommendMen p{
    color: #000;
}
.recommendMen img{
    width: 60px;
    height: auto;
}
.recommendMen-left {
    position: relative;
    display: inline-block;
    margin: 2.5em 16px 1.5em 14px;
    padding: 24px 44px 18px 11px;
    min-width: 120px;
    max-width: 100%;
    background: #FFF;
    border: solid 4px #0165d3;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: bold;
}
.recommendMen-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}
.recommendMen-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #0165d3;
    z-index: 1;
}
  
.recommendMen-left p {
    margin: 0;
    padding: 0;
}
  
.recommendMen span{
    color: #0165d3;
}

.recommendList{
    display: flex;
    justify-content: center
}


    
/*spオススメ
---------------------------------------------------------------------------*/
 
.recommendSP .recoSpList {
    margin-top: 40px;
}
.recommendSP .recoSpList > li {
    position: relative;
    margin-top: 10px;
    padding: 15px 20px;
    padding-left: 90px;
    border-radius: 4px;
    background-color: #F1F1F1;
    font-size: 24px;
    font-weight: bold;
    list-style-type: none;
    box-shadow: 0 0 8px #0165d3;
}


/*オススメここまで*/






/*メインコンテンツ
---------------------------------------------------------------------------*/

.mainContent__title{
    background-color: #2E4B71;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    padding: 10px;
}
.ryouga {
    background-image: url("../images/concept_bg.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: 75px;
    padding-bottom: 80px;
}
.ryouga .numberList {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.numberList img {
    max-width: 100%;
    height: auto;
    width: 300px;
}
.ryougaBox {
    padding: 20px 60px 0 40px;
    margin: 20px auto 0;
    max-width: 900px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}
.ryougaBox p{
    font-size: 16px;
    font-weight: 300;
}
.rimg1 {
    width: 100%;
    max-width: 272px;
    max-height: 228px;
    margin-right: 48px;
}
  
.rimg2 {
    width: 100%;
    max-width: 298px;
    max-height: 118px;
    margin-left: 35px;

}
.ryougaflexbox {
    margin: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}

/*特徴
---------------------*/
.feature{
    background-color: #F5F5F5;
    padding: 0 0 80px;
}

.feature h3{
    color: #125EFF;
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    padding: 40px;
}
.feature p{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 30px;
}
.feature img{
    background-color: #fff;
    display: flex;
    width: 800px;
    margin: auto;
}
.featureTxet{
    display: flex;
    margin: auto;
    max-width: 900px;
}
.featureImg{
    padding: 16px 60px 16px 40px;
    margin: 20px auto 0;
    max-width: 900px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}


/*気になる機能解説
---------------------*/
.logic_top {
    background-image: url("../images/function_bg.jpeg");
    background-repeat: repeat;
    background-size: cover;
    background-position: inherit;
    padding-top: 75px;
    padding-bottom: 80px;
    overflow: hidden;
}
.logic {
  background-image: url("../images/logic_bg.jpg");
  background-repeat: repeat;
  background-size: contain;
  background-position: inherit;
  padding-top: 75px;
  padding-bottom: 80px;
  overflow: hidden;
}
.logic_top h2 {
  background-color: #2E4B71;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  padding: 10px;
  margin-top: -80px;
  margin-bottom: 140px;
  }

.logic img{
  display: block;
  width: 900px;
  margin: auto;
}
.abcde .a{
  position: absolute;
  display: block;
  margin-top: -160px;
  margin-left: 236px;
  width: 700px;
}
.logic p{
  font-size: 1.2rem;
}

.logic_01{
  display: block;
  margin: auto;
  margin-top: -80px;
}

.t_box{
    display: block;
    text-align: center;
}
.title img{
    display: block;
    width: 100%;
}

.logicPc{
  display: block;
  width: 800px;
  height: auto;
  margin: auto;
  margin-top: -100px;
}
@media screen and (max-width: 768px) {
.logicPc {
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: -50px;
  margin-bottom: 20px;
}
}

.logic .logicIMG1{
  display: block;

}
.logic_top img{
    display: block;
    width: 800px;
    height: auto;
    margin: auto;
    margin-top: 20px;
}
.controller .logic_body {
    margin-top: 20px;
    padding: 90px 50px;
    background-color: #fff;
    width: 900px;
    margin: auto;
    margin-bottom: 30px
}
.controller .logic_body .logic_box {
    position: relative;
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 30px 22px;
    background-color: #2A2828;
    width: 800px;
    color: #fff;
}
.controller .logic_body .logic_box::before {
    content: '';
    background-image: url("../images/point.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 220px;
    height: 35px;
    display: block;
    position: absolute;
    top: -18px;
}
.logic_box .chart img{
    margin-top: 20px;
    margin-bottom: 20px;    
    width: 760px;  
}
.slick-prev:before {
    color:blue;
}
.slick-next:before {
    color:blue;
}
.slick-slide img {
    display: block;
    margin: auto;
}
.slick-dots li.slick-active button:before {
    color: blue;
}

.slick-dots{
  position: absolute;
  bottom: -80px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  display: block;
}
.slick-dots{
  display: none;
}

@media screen and (max-width: 768px) {
  .slick-dots   {
    position: absolute;
    /* display: none; */
    bottom: -120px;
  } 
  /* .slick-dots li button {
    display: none;
  } */

}


.slick_slide img{
    display: block;
    width: 100%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
.logic_abcde{
    margin-top: 30px;
}

.differences h2 {
    background-color: #2E4B71;
    font-size: 2rem;
    text-align: center;
    padding: 10px;
    color: #FFF706;
    font-weight: 700;
}
.differences{
    background-color: #F5F5F5;
    padding: 0 0 80px;
}
.differences img{
    background-color: #fff;
    display: flex;
    width: 800px;
    margin: auto;
}
.differencesImg{
    padding: 16px 60px 16px 40px;
    margin: 20px auto 0;
    max-width: 900px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}


/*青ボタン
---------------------------------------------------------------------------*/
.banners2 {
    background-image: url(../images/blue_btn.jpeg);
    background-size: 100%;
    background-repeat: repeat;
    padding: 60px 6px;
    display: flex;
    align-items: center;
}
.banners_item2 {
    width: 50%;
}
.banners_btn2 {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #65d1bb;
    padding: 24px 60px;
    border-radius: 16px;
    font-size: 1.6rem;
    width: 90%;
    text-align: center;
    margin: auto;
}
.bannersInner__sub_text2 {
    font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    color:#EE3333;
    letter-spacing:-0.04em;
    text-shadow:
      4px 4px 0 #000,
      -2px 2px 0 #000,
      2px -2px 0 #000,
      -2px -2px 0 #000;
    -webkit-text-stroke: 2px #fff;
}
.bannersInner__sub_text23{
    font-size: 3rem;
    text-align: center;
    margin-top: -20px;
    font-weight: 800;
    letter-spacing:-0.04em;
    text-shadow:
      4px 4px 0 #000,
      -2px 2px 0 #000,
      2px -2px 0 #000,
      -2px -2px 0 #000;
    -webkit-text-stroke: 2px #ede15f;
}
.bannersInner__sub_text23 span{
    font-size: 2rem;
}

/*青ボタンfooter
---------------------------------------------------------------------------*/
.banners3 {
    background-image: url(../images/blue_btn.jpeg);
    background-size: 100%;
    background-repeat: repeat;
    padding: 60px 6px;
    display: flex;
    align-items: center;
}
.banners_item3 {
    width: 50%;
}
.banners_btn3 {
    display: block;
    text-decoration: none;
    color: #fff;
    background: #65d1bb;
    padding: 24px 60px;
    border-radius: 16px;
    font-size: 1.6rem;
    width: 90%;
    text-align: center;
    margin: auto;
}
.bannersInner__sub_text3 {
    font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    color:yellow;
    letter-spacing:-0.04em;

}
.bannersInner__sub_text233{
    font-size: 3rem;
    text-align: center;
    margin-top: -20px;
    font-weight: 800;
    color: #fff;
    letter-spacing:-0.04em;
}
.bannersInner__sub_text233 span{
    font-size: 2rem;
}

/*利用者比率
---------------------------------------------------------------------------*/

.ratio h3{
    color: #125EFF;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    padding: 40px;
}
.ratio p{
    font-size: 16px;
    font-weight: 300;
    line-height: 2;
    margin-bottom: 30px;
}
.ratio{
    background-color: #fff;
    display: block;
    width: 800px;
    margin: auto;
}
.ratio{
    padding: 0px 60px 16px 40px;
    margin: 0px auto 0;
    max-width: 900px;
    width: 100%;
    background-color: #E8EFFB;
}
.ratio h4{
    display: block;
    padding: 1rem 2rem;
    border-left: 10px solid #2E4B71;
    background: #f6f6f6;
    width: 800px;
    margin: auto;
    margin-bottom: 40px;
}
.ratio img{
    display: block;
    width: 800px;
    height: auto;
}

/*ドーナツ
---------------------------------------------------------------------------*/

.pie {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 300px;
	font-size: 26px;
	font-weight: 700;
	background-image: radial-gradient(rgba(255,255,255,0.8) 0%, transparent 61%), conic-gradient(#ffea00 0% 80%, #d9d9d9 60% 100%);
	border-radius: 50%;
}
.pie2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	width: 300px;
	height: 300px;
	font-size: 26px;
	font-weight: 700;
	background-image: radial-gradient(rgba(255,255,255,0.8) 0%, transparent 61%), conic-gradient(#ffea00 0% 90%, #d9d9d9 60% 100%);
	border-radius: 50%;
}
.donut{
    background-image: url(../images/donut_bg.png);
    background-size: 100%;
    background-repeat: repeat;
    padding: 60px 6px;
    align-items: center;
}
.donut_box{
    display: flex;
    width: 800px;
    margin: auto;
}
.donut h2{
    display: block;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1.4;
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 70px;
}
.donut_box .red{
    color:red;
    font-size: 3.5rem;
    font-weight: 800;
}
.donut_box{
    text-align: center;
}



/*ポイント
---------------------*/
.feature{
    background-color: #F5F5F5;
    padding: 0 0 80px;
}

.feature h3{
    color: #125EFF;
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    padding: 40px;
}
.feature p{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    margin-bottom: 30px;

}
.feature img{
    background-color: #fff;
    display: flex;
    width: 800px;
    margin: auto;
}
.featureTxet{
    display: flex;
    margin: auto;
    max-width: 900px;
}
.featureImg{
    padding: 16px 60px 16px 40px;
    margin: 20px auto 0;
    max-width: 900px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}






/*ポイント
---------------------------------------------------------------------------*/

.point {
    background-color: #F5F5F5;
    padding: 0 0 80px;
}
  
.pointCard__title {
    font-weight: 700;
    font-size: .8rem;
    margin: 10px;
}
  
  @media screen and (max-width: 528px) {
    .courseSection__title {
      font-size: 18px;
    }
  }
  .point_inner {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    justify-content: center;
    justify-self: center;
    gap: 48px;
  }
  
  @media screen and (max-width: 1104px) {
    .point_inner {
      grid-template-columns: repeat(2, 240px);
    }
  }
  
  @media screen and (max-width: 528px) {
    .point_inner {
      gap: 20px;
      grid-template-columns: 75%;
    }
  }
  
  .pointSection.is-paid .pointCard_icon {
    margin: 40px auto 24px;
    height: 100px;
    width: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .pointSection.is-paid .pointCard {
    background-color: #ffffff;
    border: none;
  }
  
  .pointSection.is-paid .pointCard_title {
    font-weight: 600;
    color: #51565c;
  }
  
  .pointSection.is-paid  {
    color: #51565c;
  }
  

  
  @media screen and (max-width: 1104px) {
    .point {
      width: auto;
    }
  }
  
  @media screen and (max-width: 528px) {
    .point{
      width: auto;
    }
  }

  .pointCard {
    position: relative;
    padding: 12px 12px;
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 4px #2a2c2c80;
  }
  
  .pointCard--img {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .pointCard--new {
    position: relative;
    overflow: hidden;
    padding: 12px 12px;
  }
  
  .pointCard--new::after {
    position: absolute;
    top: 10px;
    right: -36px;
    content: "NEW!";
    width: 130px;
    background-color: #ea4f8b;
    color: #ffffff;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    line-height: 16px;
    transform: rotate(30deg);
  }


  .pointCard--exclusive {
    position: relative;
    overflow: hidden;
    padding: 12px 12px;
  }
  
  .pointCard--exclusive::after {
    position: absolute;
    top: 10px;
    right: -36px;
    content: "期間限定!";
    width: 130px;
    background-color: #ff0000;
    color: #ffffff;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    line-height: 16px;
    transform: rotate(30deg);
  }
  
  .pointCard_icon {
    width: 130px;
    height: 130px;
  }
  
  .pointCard.is-new {
    padding: 0;
  }
  
  .pointCard__original::after {
    content: "\25B2";
    transform: rotate(90deg);
    display: inline-block;
    margin-left: 10px;
    color: #ea4f8b;
  }
  

  


  
/*お申し込みプランカテゴリ
---------------------------------------------------------------------------*/
.ryougaSystem_title{
    background-color: rgb(58, 94, 210);
}





.ryougaSystem h2{
    display: block;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}
.ryougaSystem p{
    display: block;
    font-size: .8rem;
    text-align: center;
    margin-bottom: 38px;
}
.plan_img img{
    display: block;
    width: 600px;
    height: auto;
    margin: auto;
}
.check_box {
    width: 800px;
    height: 200px;
    padding: 3em;
    overflow-y: scroll;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 11px;
    margin: auto;
    margin-top: -30px;
    margin-bottom: 20px;
    color:#808080;
    font-weight: 600;
  }
.ccc{
    margin: 20px;
}
.check_wrap{
   text-align: center;
   padding: 10px;
   font-weight: 700;
}



.check{
  background-color: #fff;
}


.check_box span{
font-size: 1rem;

}
.check_box span p{
  text-align: center;
}

.checks1{
  background-color: rgb(58, 94, 210);;
}

.check{
  background-color: #fff;
  display: block;
  width: 900px;
  height: auto;
  margin: auto;
 padding-top: 30px;
 padding-bottom: 30px;
  
}
@media screen and (max-width: 736px) {
  .check{
    display: block;
    max-width: 400px;
    padding: 10px;
    margin-bottom: 30px;
  }
  .checks1{
    display: block;
    max-width:100%;
  }
  .check_ttl p{
    font-size: 16px;
  }
  .check_wrap{
    font-size: 14px;
  }
}


.check_ttl{
  font-size: 1.5rem;
  font-weight: 900;
  color: #0165d3;
  margin-bottom: 70px;
  margin-top: 30px;
  text-align: center;
}
/*お申し込み3つカテゴリ
---------------------------------------------------------------------------*/

img .credit{
  display: block;
  margin-bottom: -10px;
}

.ryouga_inner h3{
    font-weight: 100;
    line-height: 1.6;
    font-size: .8rem;
}
.ryouga_inner p{
    color: #01cde7;
    padding: 10px;
    font-size: .96rem;
    margin-bottom: 10px;
    margin-top: 10px;
}



.ryougaCorse_plan{
    display: block;
    width: 100%;
    margin-top: -60px;
}
.ryougaSystem {
    padding: 0 0 80px;
}

.ryouga_inner {
    display: grid;
    grid-template-columns: repeat(3, 386px);
    justify-content: center;
    justify-self: center;
    gap: 20px;
    align-items: baseline;
    margin-top: -60px;
}
/* .ryougaCorse--exclusive {
    display: grid;
    grid-template-columns: repeat(1, 380px);
    justify-content: center;
    justify-self: center;
    gap: 38px;
    margin-right: 10px;
    align-items: baseline;
} */
  
/* 青 */
.btn1,
a.btn1 {
  color: #fff;
  background-color: rgb(58, 94, 210);
      padding: 10px;
    text-decoration: none;
    margin-bottom: 20px;
}
.btn1:hover,
a.btn1:hover {
  color: #fff;
  background: rgb(58, 94, 210);
}

.btn1{
    display: block;
    margin-bottom: 38px;
}

/* カード */
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #65d1bb;
      padding: 10px;
    text-decoration: none;
    margin-bottom: 20px;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #65d1bb;
}

.btn{
    display: block;
    margin-bottom: 38px;
}

  @media screen and (max-width: 1104px) {
    .ryouga_inner {
      grid-template-columns: repeat(2, 420px);
    }
  }
  
  @media screen and (max-width: 528px) {
    .ryouga_inner {
      gap: 20px;
      grid-template-columns: 88%;
    }
  }
  
.ryougaCorse_icon {
    margin: 40px auto 0px;
    height: 100px;
    width: auto;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .ryougaCorse {
    background-color: #ffffff;
    border: none;
  }
  
.ryougaCorse_title {
    font-weight: 600;
    color: #000;
    text-align: left;
    font-size: .8rem;
    line-height: 1.4;
  }
  
  
  @media screen and (max-width: 1104px) {
    .ryougaSystem {
      width: auto;
    }
  }
  
  @media screen and (max-width: 528px) {
    .ryougaSystem{
      width: auto;
      margin-bottom: -80px;
    }
  }

  .ryougaCorse {
    position: relative;
    padding: 12px 12px;
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 0 4px #2a2c2c80;
  }
  
  .ryougaCorse--img {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .ryougaCorse--new {
    position: relative;
    overflow: hidden;
    padding: 12px 12px;
  }
  
  .ryougaCorse--new::after {
    position: absolute;
    top: 10px;
    right: -36px;
    content: "NEW!";
    width: 130px;
    background-color: #ea4f8b;
    color: #ffffff;
    font-size: 12px;
    font-family: "Lato", sans-serif;
    line-height: 16px;
    transform: rotate(30deg);
  }


  .ryougaCorse--exclusive {
    position: relative;
    overflow: hidden;
    padding: 12px 12px;
  }
  
  .ryougaCorse--exclusive::after {
    position: absolute;
    top: 27px;
    right: -46px;
    content: "人気";
    width: 193px;
    background-color: red;
    color: #ffffff;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    line-height: 43px;
    transform: rotate(45deg);
  }

  .ryougaCorse--exclusive_z {
    position: relative;
    overflow: hidden;
    padding: 12px 12px;
  }
  
  .ryougaCorse--exclusive_z::after {
    position: absolute;
    top: 27px;
    right: -46px;
    content: "大人気";
    width: 193px;
    background-color: red;
    color: #ffffff;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    line-height: 43px;
    transform: rotate(45deg);
  }

 


  .ryougaCorse_icon {
    width: 88%;
    height: auto;
    border-radius: 10px;
    margin-left: 46px;
  }
  
  .ryougaCorse.is-new {
    padding: 0;
  }
  
  .ryougaCorse__original::after {
    content: "\25B2";
    transform: rotate(90deg);
    display: inline-block;
    margin-left: 10px;
    color: #ea4f8b;
  }









/*コメント
---------------------------------------------------------------------------*/

.voiceArea{
    background-color: #E8EFFB;
}
.voiceArea img{
    display: block;
    margin: auto;
    width: 300px;
    height: 300px;
    padding: 50px;
}
.voiceArea h3{
    color: #125EFF;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    padding: 40px;
    margin-top: -60px;
}


/* 受講生の声 */
.voH2Flex{
    display: flex;
    justify-content: center;
  }
  
  .box1{
      margin-left: 20px;
      height: 32px;
      width: 10px;
      border-top: 3px solid transparent;
      border-bottom: 32px solid transparent;
      border-right: #2A90C0 solid 10px;
      transform: translate(5px, 95px) rotate(-54deg);
  }
  
  .box2{
      margin-left: 20px;
      height: 51px;
      width: 13px;
      border-top: 3px solid transparent;
      border-bottom: 51px solid transparent;
      border-right: #2A90C0 solid 15px;
      transform: translate(-25px, 72px) rotate(-30deg);
  }
  
  .box3 {
      margin-left: 20px;
      height: 51px;
      width: 13px;
      border-top: 3px solid transparent;
      border-bottom: 51px solid transparent;
      border-left: #2A90C0 solid 15px;
      transform: translate(0px, 72px) rotate(30deg);
  }
  
  .box4 {
    margin-left: 20px;
    height: 32px;
    width: 10px;
    border-top: 3px solid transparent;
    border-bottom: 32px solid transparent;
    border-right: #2A90C0 solid 10px;
    transform: translate(-33px, 91px) rotate(70deg);
  }
  
  span.DIN{
    font-size: 1.4em;
    font-weight: 500;
  }
  
  .students{
    text-align: center;
    margin-bottom: 100px;
  }
  
  .students :nth-last-child(){
    padding-bottom: 50px;
  }
  
  .voH2Flex>div>h2 {
    color: #2a90c0;
    font-size: 3.5rem;
    margin-bottom: 43px;
  }
  
  div.voiceBox{
    margin: 0 auto 35px;
    width: 100%;
    max-width: 900px;
    border: #2a90c0 solid 5px;
    border-radius: 3px;
    background-color: #fff;
  }
  
  .voiceNumber{
    width: 90px;
    min-width: 80px;
    background-color: #2a90c0;
    margin-left: 40px;
    padding-top: 4%;
  }
  
  .voiceNumber>p{
    color: #fff;
  }
  
  .voiceNumber>p.vo {
    font-size: 1rem;
    line-height: 10px;
  }
  
  .voiceNumber>p.num{
    font-size: 2.5rem;
    line-height: 50px;
  }
  
  .voiceFlex{
    display: flex;
    margin-bottom: 30px;
    flex-direction: column;
    background-color: #fff;
  }
  
  .voiceFlex>h3 {
    color: #1b2631;
    padding: 0px 20px 20px 20px;
    font-size: 1.7em;
    border-bottom: #2a90c0 solid 4px;
    margin-bottom: 10px;
    margin-left: 3px;
    text-align: left;
    max-width: 730px;
    width: 100%;
  }
  
  .voiceAccordion {
    display: none;
  }
  
  
  .flexBas{
    display: flex;
    margin-left: 10px;
  }
  
  .flexItem1{
    flex-basis: 30%;
  }
  
  
  .flexItem1>p{
    padding-top: 15px;
  }
  
  .flexItem1>p>span{
    font-size: .7rem;
  }
  
  .flexItem2{
    flex-basis: 70%;
  }
  
  .flexItem2>p {
    text-align: left;
    font-size: 1em;
    font-weight: 500;
    padding-right: 50px;
    padding-bottom: 35px;
    line-height: 1.8;
  }
  
  .hideVoice{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.4em;
    color: #fff;
    padding: 25px 40px 25px 40px;
    margin: 0 auto;
    background-color: #1b2631;
    max-width: 400px;
    border-radius: 50px;
  }
  
  .hideVoice:hover {
    opacity: .7;
  }
  
  .hideVoice::after{
    position: relative;
    content: '';
      width: 10px;
      height: 10px;
      right: -10px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(135deg);
  }
  


  .voiceFlex h2 {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 2rem 1.5rem 230px;
    border: 2px solid #2a90c0;
  }
  
  .voiceFlex h2:before {
    position: absolute;
    top: -150%;
    left: 4px;
    width: 200px;
    height: 300%;
    content: '';
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    background: #2a90c0;
  }
  
  .voiceFlex h2 span {
    font-size: 40px;
    font-size: 2rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    padding-top: 12px;
    padding-left: 16px;
    color: #fff;
  }



/* もっとみるカテゴリ */
  .button {
    display: block;
    margin: auto;
    text-align:center;
    padding:10px;
    color:#fff;
    background:#2E4B71;
    width:300px;
    border-radius:52px;
    font-size: 1.2rem;
    font-weight: 700;
    }
    .close {
    display:none;
    }










  .accordion {
    margin: 3em auto;
    max-width: 60vw;
    }
    .toggle {
    display: none;
    }
    .option {
    position: relative;
    margin-bottom: 1em;
    }
    .title,
    .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
    }
    .title {
    border: solid 1px #ccc;
    padding: .8rem;
    display: block;
    color: #fff;
    font-weight: bold;
    background-color: #2E4B71;
    border-radius: 68px;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 30px;
    }
  



    .p01{
      font-size: .8rem;
      color: #2A2828;

    }




/*=========
accordion
=========*/

.s_section h3{
    display: block;
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    color:#125EFF;
    margin-top: 30px;
    margin-bottom: 60px;

}

.accordion_area .accordion_one .ac_header {
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 1.5rem 4rem 1.5rem 2rem;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition: .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover {
  background-color: #f1f8ff;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header {
  background-color: #f5f5f5;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
  background-color: #f1f8ff;
}
.accordion_area .accordion_one .ac_header .i_box {
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}
.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
  position: absolute;
  content: "";
  margin: auto;
  box-sizing: border-box;
  vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
  border-top: 2px solid #014897;
  width: 20px;
  height: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
  border-left: 2px solid #014897;
  width: 0;
  height: 20px;
  top: 0;
  bottom: 0;
  right: 9px;
  transition: .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
  height: 0;
}
.accordion_area .accordion_one .ac_inner {
  display: none;
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  background: #fff;
}
@media screen and (max-width: 736px) {
  .accordion_area .accordion_one .ac_header {
    padding: 1.5rem 2rem 1.5rem 1.0rem;
  }
  .accordion_area .accordion_one .ac_header .i_box {
    right: 0.8rem;
    width: 15px;
    height: 15px;
    margin-top: -7px;
  }
  .accordion_area .accordion_one .ac_header .i_box:before {
    width: 15px;
  }
  .accordion_area .accordion_one .ac_header .i_box:after {
    height: 15px;
    right: 7px;
  }
  .accordion_area .accordion_one .ac_inner {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
}

/*=========
faq
=========*/

.p-faq__headinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__headinner::before {
  position: absolute;
  left: 0;
  content: "Q．";
  color: #09357f;
  font-size: 20px;
  font-weight: bold;
}
.p-faq__headinner p.p-faq__q-txt {
  font-size: 20px;
}
@media screen and (max-width: 736px) {
  .p-faq__headinner {
    padding-left: 25px;
  }
  .p-faq__headinner::before {
    font-size: 14px;
  }
  .p-faq__headinner p.p-faq__q-txt {
    font-size: 14px;
  }
}
.p-faq__bodyinner {
  display: block;
  padding-left: 35px;
  position: relative;
  line-height: 1.5;
}
.p-faq__bodyinner::before {
  position: absolute;
  left: 0;
  content: "A．";
  color: #de0000;
  font-size: 20px;
  font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt {
  font-size: 20px;
}
@media screen and (max-width: 736px) {
  .p-faq__bodyinner {
    padding-left: 25px;
  }
  .p-faq__bodyinner::before {
    font-size: 14px;
  }
  .p-faq__bodyinner p.p-faq__a-txt {
    font-size: 14px;
  }
}

/*=========
base
=========*/

html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: .025em;
  line-height: 1.8;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.s_section {
  max-width: 1020px;
  margin: 0 auto;
  padding: 1rem 10px;
}
.gutter>*:not(:last-child) {
  margin-bottom: 1.5rem;
}
h2 {
  color: #333;
  font-size: 22px;
  font-weight: bold;
  text-align: left;
  border-left: 5px solid #333333;
  padding-left: 8px;
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 736px) {
  h2 {
    font-size: 16px;
  }
}
ul.list-disc {
  margin-bottom: 0;
  padding-left: 0;
}
.list-disc__item {
  margin-left: 1.5em;
  list-style: disc;
}
a._a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 2.0em 1.0em;
  border: 1px solid #222222;
  background: linear-gradient(to right, #ffffff 50%, #222222 50%);
  background-size: 200% auto;
  box-sizing: border-box;
  color: #222222;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transition: .3s;
  position: relative;
}
a._a:after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  border-right: 1px solid #222222;
  border-bottom: 1px solid #222222;
}
a._a:hover {
  color: #ffffff;
  background-position: -100% 0;
}






/*フッター
---------------------------------------------------------------------------*/

.footer{
    padding: 6px 0 30px 0;
}
.footer p {
    color: #353131;
    padding: 8px;
    font-size: 14px;
    text-align: center;
    letter-spacing:0.5;
}
.copyright a{
    padding: 2px;
    text-decoration: none;
    color: #353131;
    font-size: 14px;
    margin: 6px;
    letter-spacing:0.5;
}
.copyright a:hover {
    opacity: .8;
  }
.contactBox{
    background-image: url(../images/footer_bg.jpeg);
    background-size: 100%;
    background-repeat: repeat;
    width: 100%;
    margin-top: 80px;
  }

.contactBox p{
    display: block;
    text-align: center;
    color: yellow;
    font-weight: 700;
    font-size: 5rem;
    padding: 10px;
}
.contactBox span{
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
    margin-top: -50px;
    padding-bottom: 6px;
}

.contactImg{
    display: flex;
    justify-content: center;
    padding: 10px;
}
.contact1{
    width: 460px;
}
.contact2{
    padding: 18px;
    width: 560px;
}

    





/*レスポンシブ
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
    }
	.header {
	    height: 55px;
        position: fixed;
        z-index: 111;
        width: 100%;
        background: rgba(255,255,255,.7);
	}

    .header__logo img {
        width: 80px;
        padding-top:5px;
        margin-left:8px;
    }

    /* ヘッダーハンバーガーメニュー */
    .header__cat input,
    .header__cat label {
        display: block;
    }
    .header__cat input {
        display: none;
    }
    .header__cat label {
        position: fixed;
        right: 22px;
        clear: both;
    }
    span.hamburger__icon {
        display: inline-block;
        width: 28px;
        height: 16px;
    }
    span.hamburger__icon i {
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #000;
        display: block;
        transition: all .3s ease-in-out;
        text-align: center;
    }
    span.hamburger__icon i:nth-child(1) {
        top: 0;
    }
    span.hamburger__icon i:nth-child(2) {
        margin: auto;
        top: 0;
        bottom: 0;
    }
    span.hamburger__icon i:nth-child(3) {
        bottom: 0;
    }
    .header__cat input:checked + label span.hamburger__icon i:nth-child(1) {
        margin: auto;
        transform: rotate(45deg);
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
    }
    .header__cat input:checked + label span.hamburger__icon i:nth-child(2) {
        transform: rotateX(90deg);
        top: 0;
        bottom: 0;
    }
    .header__cat input:checked + label span.hamburger__icon i:nth-child(3) {
        margin: auto;
        transform: rotate(-45deg);
        top: 0;
        right: 0;
        bottom: 0;
    }
    .header__cat input:checked ~ .header__navi {
        z-index: 99;
        opacity: 1;
        transform: translateX(0);
    }
    .header__navi {
        position: fixed;
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.7);
        top: 80px;
        right: 0;
        transform: translateX(100%);
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: all 1s ease-out;
    }
    .header__navi__wrap {
        width: 100%;
        background-color: #fff;
        position: absolute;
        right: 0;
        top: 0px;
        bottom: 0;
        transition-duration: 1s;
        transition-property: right;
        overflow-y: scroll;
    }
    .header__cat input:checked ~ .header__navi .header__navi__wrap {
        right: 0;
    }
    .header__navi__list {
        margin: 0;
        display: block;
        justify-content: inherit;
    }
    .header__navi__item {
        border-bottom: 1px solid #000;
    }
    .header__navi__item a {
        padding: 0 50px;
        color: #000;
        font-size: 24px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        font-weight: 700;
        line-height: 1;
        transition: background-color .3s ease-in-out;
    }

     /* キーヴィジュアル */
    .mainKv {
        padding-top: 55px;
    }

     /* ビデオここから */
    .detail {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px 0pxpx;
        text-align: center;
    }
	.detail_message img {
	    width: 80%;
	    margin-top: -60px;
	}
	iframe {
	    width: 100%;
	    height: 180px;
	}
	.detail .detailVideo {
	    background-color: rgba(255, 255, 255, 0.4);
	    padding: 10px;
	    max-width: 380px;
	}
    /* ビデオここまで */


     /* お申し込みカテゴリここから */
    .banners_btn{
        font-size: 1.4rem;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: auto;
        text-align: center;
        padding: 22px;
    }
    .banners {
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px 0px;
        text-align: center;
    }
    .banners_item {
        width: 100%;
    }
    .banners_item + .banners_item {
        margin-top: 40px;
    }
    .bannersInner__sub_text {
        font-size: 3rem;
    }
    .message1{
        font-size: 1rem;
    }
    /* お申し込みカテゴリここまで */


    /* お悩みここから */
    .message1{
        font-weight: 700;
    }
    .problems h2 {
        padding: 0 10%;
        font-size: 18px;
        line-height: 1.4;
        margin-top: 8px;
    }     
    .arrow img{
        width: 200px;
        height: auto;
        margin-top: -38px;
    }
    .problemsList div.probremMen img {
        padding-top: unset;
    }
    .problemsList div p {
        font-size: 4.5vw;
        font-weight: bold;
        padding: 15px 0 15px 21px;
        border-bottom: 1px dotted #ababa7;
        position: relative;
        top: -20px;
    }
    .problemsList {
        flex-direction: column-reverse;
        margin-bottom: 30px;
        padding: 32px;
        height: 720px;
    }
    .probremMen {
        height: 270px;
        text-align: center;
    } 
    .problemsList>div>p::before{
        width: 20px;
    }
    .problems h2 span {
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0px;
    }
    .filter{
        backdrop-filter: blur(12px);
    }     
    .problems div.arrowField div.arrow {
        margin: auto;
        width: 200px;
        height: 180px;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 50px solid #2a90c0;
    }  
    .problems div.arrowField p {
        font-size: 6vw;
        color: #fff;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    /* お悩みここまで */

    /* 凌駕シリーズシステムここから */
    .mainContent__title{
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 700;
        margin-top: -10px;
    }
    .mainContent__inner {
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 700;
        margin-top: -12px;
    }
    .ryouga .numberList {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: -40px;
    }
    .numberList img {
        width: 120px;
        height: auto;
    }
    .ryougaBox div{
        display: block;
    }
    .ryougaflexbox .rimg1 {
        display: block;
        width: 60%;
        height: 60%;
        margin: auto;
        margin-right: 34px;
    }
    .rimg2 {
        display: block;
        width: 30%;
        height: 30%;
        margin: auto;
    }
    .ryougaBox{
    background-color: rgba(255, 255, 255, 0.4);
    padding: 10px;
    max-width: 380px;
    line-height: 1.6;
    }
    .ryougaBox p{
        font-size: 3.5vw;
        padding-top: 20px;
        line-height: 1.6;
    }
    .ryougaBox{
    flex-direction: column-reverse;
    margin-bottom: 30px;
    padding: 30px;
    height: auto;
    }
    .ryougaBox {
        padding: 20px 60px 0 40px;
        margin: 20px auto 0;
        max-width: 380px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
    }
    /* 凌駕シリーズシステムここまで */



    .recommendSP .recoSpList > li::before {
        content: '';
        background-image: url("../images/10.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto;
        display: block;
    }
    .recommendSP {
        padding-top: -20px;
        padding-bottom: 10px;
        margin: 10px;
    }
    .recommendSP .recoSpList > li {
        font-size: 14px;
        padding-left: 60px;
    }
    .recommend__title{
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 700;
    }
    .recommendImg img{
        width: 100%;
        padding: 10px 10px;
        margin: -60px;
        margin-bottom: 6px;
    }
    .recoSpList span{
        color: #0165d3;
    }
    .recommendSP img{
        display: flex;
        width: 50%;
        margin: auto;
        margin-bottom: -36px;
    }


    /* 特徴ここから */
    .feature h3 {
        font-size: 2rem;
        line-height: 1.4;
        font-weight: 700;
        margin-top: -30px;
        padding: 16px;
    }  
    .feature p{
        font-size: 3.5vw;
        padding: 38px;
        margin-top: -30px;
        margin-bottom: -80px;
        line-height: 1.6;
    }
    .featureImg{
        background-color: #fff;
        padding: 10px;
        max-width: 380px;
    }
    .featureImg img{
        width: 100%;
    }
    /* 特徴ここまで */

    /* 気になる解説 */
    .controller .a_head {
        margin-bottom: 10px;
        padding: 20px 30px;
        height: 100%;
    }
    .controller .a_head::after {
        display: none;
      }
    .controller .a_head > img {
        position: relative;
        top: 0;
      }
    .controller {
        padding-bottom: 20px;
    }
    .controller .logic_body {
        padding: 5px 5px 136px;
        width: 360px;
        margin-top: 20px;
      }
    .controller .logic_body .logic_box {
        margin-top:  22px;
        padding: 1px 8px;
        width: 350px;
      }
    .controller#a08 {
        padding-bottom: 30px;
    }
    .logic_box img{
        width: 100%;
        height: auto;

    }
    .logic_itle {
        width: 30px;
        height: auto;
    }
    .logic_top h2{
        padding: 2px ;
        margin: -75px;
        margin-bottom: 120px;
    }
    .logic h3 {
        font-size: 15px;
        padding: 18px;

    }
    .logic h3 span.red{
        font-weight: 600;
        font-size: 24px;
    }
    .logic h3 span.black{
      font-weight: 600;
      font-size: 26px;
    }
    .slick_slide img{
        display: block;
        width: 100%;
        height: auto;
        margin-top: -20px;
        margin-bottom: -20px;
    }

    .logic_box .chart img {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
    }
    .logic_box p{
        margin-top: 70px;
        font-size: .8rem;
    }
    .controller .logic_body .logic_box::before {
      content: '';
      background-image: url(../images/point.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 160px;
      height: 35px;
      display: block;
      position: absolute;
      top: -10px;
  }
  .abcde .a {
    position: absolute;
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    width: 300px;
}

    .logic img {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 0px;
      margin-top: 0px;
    }
    .logic_top img{
      width: 98%;
    }
    .logic_top{
      background-image: url("../images/function_bg.jpeg");
      background-size: contain;
      background-repeat: no-repeat;
      margin-bottom: -50px;

    }
    .logic .logicIMG1{
      margin-top: -78px;
    }


    /*3つの違い
    ---------------------*/


    .differences h2{
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 700;
    }

    .differences img{
        padding: 10px;
        max-width: 360px;
        margin-bottom: -56px;
    }
    .differencesImg{
        width: 100%;
        padding: 0%;
    }
    /* 青お申し込みカテゴリここから */
    .banners_btn2{
        font-size: 1.4rem;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        height: auto;
        text-align: center;
        padding: 22px;
    }
    .banners2 {
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px 0pxpx;
        text-align: center;
    }
    .banners_item2 {
        width: 100%;
    }
    .banners_item2 + .banners_item2 {
        margin-top: 40px;
    }
    .bannersInner__sub_text2 {
        font-size: 3rem;
    }
    .message1{
        font-size: 1rem;
    }


  /* 青お申し込みカテゴリ2ここから */
    .banners_btn3{
        font-size: 1.4rem;
        margin-left: auto;
        margin-right: auto;
        width: 88%;
        height: auto;
        text-align: center;
        padding: 10px;
        margin-top: -20px;
        margin-bottom: -20px;
    }
    .banners3 {
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        padding: 20px 0pxpx;
        text-align: center;
    }
    .banners_item3 {
        width: 100%;
    }
    .banners_item3 + .banners_item3 {
        margin-top: 40px;
    }
    .bannersInner__sub_text3 {
        font-size: 2.5rem;
        margin-top: -30px;
    }
    .message1{
        font-size: 1rem;
    }
    
    /* お申し込みカテゴリここまで */

    /* 利用者比率ここから */
    .ratio h3 {
        display: block;
        padding: initial;
        font-size: 2rem;
        line-height: 1.4;
        font-weight: 700;
        margin-top: 0px;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }  
    .ratio p{
        font-size: 3.5vw;
        line-height: 1.6;
    }
    .ratio img{
        width: 100%;
    }
    .ratio h4 {
        width: 100%;
        padding: 0.2rem 0.2rem;
    }
    .ratio{
        display: block;
        max-width: 350px;
        padding: 10px;
    }



    /* 利用者比率ここまで */


    /* 円グラフここから */
    .donut h2 {
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 700;
        margin-top: -30px;
        margin-bottom: 8px;
    }  
    .donut_box{
        width: 100%;
    }
    .pie{
        width: 160px;
        height: 160px;
        font-size: 16px;
    }
    .pie2{
        width: 160px;
        height: 160px;
        font-size: 16px;
    }
    .donut_box .red{
        color:red;
        font-size: 2rem;
        font-weight: 700;
    }
    /* 円グラフここまで */


     /* お申し込みプラン */
    .planList {
        display: block;
        width: 100%;
    }
    .check_box {
        width: 350px;
        height: 200px;
        margin-bottom: 10px;
        padding: 0.5em;
        overflow-y: scroll;
        box-sizing: border-box;
        border: 1px solid #ccc;
        font-size: 10px;
        margin: auto;
        margin-top: -50px;
    }

    .plan_img img{
        display: block;
        width: 100%;
        height: auto;
        margin: auto;
    }
    .planimg {
        display: block;
        width: 300px;
        margin: auto;
    }
    .ryougaSystem h2{
        font-size: 1.6rem;
        margin-bottom: 18px;
        padding-top: 26px;
        padding-bottom: 50px;

    }
    .ryougaSystem span{
        font-size: .8rem;
        color:#000;

    }


/* 声 */

.voiceFlex h2 {
  position: relative;
  overflow: hidden;
  padding: .5rem 1rem .5rem 118px;
  border: 2px solid #2a90c0;
  font-size: 20px;
}
.voiceFlex h2 span {
  font-size: 40px;
  font-size: 1.4rem;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  padding-top: 12px;
  padding-left: 16px;
  color: #fff;
  text-align: center;
}
.voiceFlex h2:before {
  position: absolute;
  top: -190%;
  left: 0px;
  width: 96px;
  height: 322%;
  content: '';
  -webkit-transform: rotate(0deg);
  background: #2a90c0;
}




.voiceArea h3{
margin-top: -98px;
}

.box1 {
    transform: translate(5px, 16px) rotate(-54deg);
  }
  
  .box2 {
    transform: translate(-25px, -6px) rotate(-30deg);
  }
  
  .voH2Flex div h2 {
    color: #2a90c0;
    font-size: 34px;
    margin: 0 auto;
    font-weight: 700;
  }
  
  .box3 {
    transform: translate(0px, -6px) rotate(30deg);
  }
  
  .box4 {
    transform: translate(-33px, 13px) rotate(70deg);
  }
  
  .voiceNumber {
    width: 80px;
    min-width: inherit;
    background-color: #2a90c0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 40px;
    background-color: #2a90c0;
    margin-left: 0;
    padding-top: 0;
  }
  
  
  .voiceNumber p.vo {
    font-size: 12px;
    line-height: 8px;
    font-weight: 700;
  }
  
  .voiceNumber p.num {
    font-size: 22px;
    font-weight: 400;
    line-height: unset;
  }
  
  
  .voiceFlex h3 {
    color: #1b2631;
    margin: 0;
    padding: 10px;
    font-size: 18px;
    line-height: 1.2;
    border-bottom: #2a90c0 solid 4px;
    text-align: left;
    min-width: unset;
    line-height: 1.6;
  }
  
  .voiceFlex h3 br{
    display: block;
  }
  
  div.voiceBox {
    margin: 0 auto 16px;
  }
  
  .hideVoice {
    padding: 16px;
    font-size: 16px;
    text-align: center;
    display: block;
    font-weight: 700;
    position: relative;
    max-width: 280px;
  }
  
  .hideVoice::after {
    position: absolute;
    right: 30px;
    top: 40%;
  }
  
  .flexBas {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    margin: 0;
  }
  .flexItem1 p {
    padding: 16px 0;
    font-weight: 700;
    text-align: center;
    font-size: 1.2rem;
  }
  .voiceArea img {
    display: block;
    margin: auto;
    width: 150px;
    height: 150px;
    padding: 0px;
    margin-bottom: 60px;
  }
  
  .flexItem2 p {
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    padding-right: 0;
    padding-bottom: 24px;
  }
  
  a.hideVoice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-size: 1.em;
    color: #fff;
    font-size: 6vw;
    padding: 5px 20px;
    margin: 0 auto;
    background-color: #1b2631;
    max-width: 400px;
    border-radius: 50px;
  }
  



  /* フッター */
    .contactBox{
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 20px;
    }
    .contactBox p{
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 700;
    margin-top: -10px;
    }
    .contactBox span{
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    margin-top: 2px;
    }

    .contactImg{
    padding: 30px;
    flex-direction: column-reverse;
    display: flex;
    background-size: 100%;
    }
    .contact1{
    width: 100%;
    margin-bottom: -20px;
    margin-top: 6px;
    }
    .contact2{
    padding: 0px;
    width:100%;
    margin-top: -33px;
    }
    .footer a{
        font-size: .6rem;
        margin: 0;
    }
    .footer p{
        font-size: .6rem;
        margin: 0;
        padding: 6px;
        letter-spacing: .2px;
    }
    .footer{
        margin-top: 6px;
    }
    .p01{
      font-size: 10px;
      color: #2A2828;

    }




}



/* チェックボックスが付いてない時 */
.ryouga_inner li {
    opacity:0.5;
    pointer-events: none
    
}
/* チェックボックスが付いてる時 */
.ryouga_inner li.is-active {
    opacity:1;
    pointer-events: inherit;
}