@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/

body {
  font-size: 62.5%;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: normal;
  color: #000;
overflow-x: hidden;
}
a {
  text-decoration: underline;
}
a:link, a:visited {
  color: #39f;
}
a:hover, a:active {
  color: #2a74b5;
}
p {
  margin: 0 !important;
  padding: 0 0 1em !important;
  font-size: 18px;
  padding: 0;
  line-height: 180%;
  letter-spacing: 1px;
}
section {
  clear: both;
  overflow: auto;
}

section:nth-child(1) {
    background-position: left top;
}

/*--------------------------------------------------
見出しタグ設定（PC）
-----------------------------------------------------*/
h2 {
    position: relative;
    padding: 0 65px;
    text-align: center;
    color: #098bde;
    font-size: 2em;
    line-height: 140%;
    font-weight: bold;
}
h2:before {
    content: '';
    position: absolute;
    display: inline-block;
    bottom: -10px;
    width: 40px;
    height: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #098bde42;
    border-radius: 2px;
}

h3 {
  margin: 1.5em 0em 0 0;
  padding: 0.3em 0.6em;
  font-size: 1.6em;
  font-weight: bold;
    background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
color: #fff;
text-align: center;
min-height: 3.5em;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 1.4;
}
h3 span{
display: contents;}
h4 {
  position: relative;
  overflow: hidden;
padding: 0.3em 0 0.3em 9.6em!important;
  border: solid 2px #27acd9;
}
h4:before {
  position: absolute;
  content: '';
  top: -150%;
  left: -100px;
  width: 230px;
  height: 300%;
  transform: rotate(20deg);
  background: #27acd9;
}
h4 span {
position: absolute;
    display: block;
    top: 4px;
    left: 0;
    z-index: 1;
    font-size: 1.2rem;
    padding-left: 16px;
    color: #fff;
}
h5 {
  margin: 0.5em 0em;
  padding: 0.1em;
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 1px dotted #ccc;
}
/*--------------------------------------------------
全体レイアウト／背景設定（PC）
-----------------------------------------------------*/
/*全体エリア*/
.main {
  background-color: #fff;
}
/*記事(ボディ)エリア*/
.article {
  background-color: #fff;
  font-size: 1.6em; /*=16px*/
  overflow: hidden;
}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.6;
}

.article{
	width: 100%;
}

/*カラム全体の幅を変更する*/
.top_image_in{
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.section_inr {
  max-width: 950px;
  margin: 0 auto;
}
.section_inr2 {
  max-width: 750px;
  margin: 0 auto;
}
/*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
.top_image {
 /* background-image: url(../images/alphabet-bg.png);*/
    background-size: 40%;
    height: auto;
}
.top_image_in img {
  width:100%;
  margin: 0 auto;
  text-align: center;
}

.cta-point3 {
  list-style: none;
  margin: 0;
  overflow: hidden;
  font-size: 1.3em;
  padding: 0;
}
.cta-point3 li {
  display: inline-block;
}
.cta-point3 span {
  line-height: 26px;
  position: relative;
  display: inline-block;
  height: 26px;
  margin: 0 0px 10px 10px;
  padding: 0 20px 0 23px;
  -webkit-transition: color 0.2s;
          transition: color 0.2s;
  text-decoration: none;
  color: #ffffff;
  border-radius: 0 3px 3px 0;
  background: #1cdaa5!important;
}
.cta-point3 span::before, .cta-point3 span::after {
  background: #fe8211;/*背景色*/
}
.cta-point3 span::before {
  position: absolute;
  top: 10px;
  left: 3px;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 10px;
}
.cta-point3 span::after {
  position: absolute;
  top: -1px;
  left: -6px;
  width: 0;
  height: 0;
  content: '';
  border-style: solid;
  border-width: 14px 8px 14px 0;
  border-color: #fe8211 #1cdaa5 #fe8211 transparent;
  border-radius: 4px;
}

.cta-point3{
  width: 80%;
}

.cta-box{
  background: #fff;
  color: #222;
  padding:20px;
  border: 2px solid #f96239;
  box-shadow: 0 0 0 7px #fff;
  margin-top: 1em;
}

/*--------------------------------------------------
sectionの設定
-----------------------------------------------------*/
.seciton_top {
  background-image: linear-gradient(135deg, #fcb828 10%, #FCCF31 100%);
  padding: 1em 3em 1em;
  color: #fff;
  text-align: center;
}
.seciton_cta {
  padding: 2em 3em 3em;
  color: #fff;
  text-align: center;
}
.seciton_check {
  background: #e0edfa;
  padding: 4em 3em 3em;
    overflow: hidden;
    background-image: url(../images/circle.png);
    background-position: top right;
    background-repeat: no-repeat;
}
.seciton_naiyou {
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
  padding: 4em 3em 3em;
}

.seciton_tokuten {
  background: linear-gradient(135deg, #fcb828 10%, #FCCF31 100%);
  padding: 4em 3em 3em;
}
.seciton_nayami {
    background: #e0edfa;
  padding: 0em 3em 3em;
position: relative;
overflow: hidden;
}
.seciton_nayami:before {
    content: "";
    width: 100%;
    height: 120px;
    background-color: #fff;
    position: absolute;
    bottom: -1px;
    left: 0;
    clip-path: polygon(50% 99%, 50% 100%, 0 100%, 0 0);
}
.seciton_nayami::after {
    content: "";
    width: 100%;
    height: 120px;
    background-color: #fff;
    position: absolute;
    bottom: -1px;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 99%);
}
.seciton_tokuchou {
  background: #e0edfa;
  padding: 4em 3em 3em;
}
.seciton_voice {
  background: #e0edfa;
  padding: 4em 3em 3em;
    overflow: hidden;
    background-image: url(../images/circle.png);
    background-position: top right;
    background-repeat: no-repeat;
}
.seciton_dream {
  background: #e0edfa;
  padding: 4em 3em 3em;
}
.seciton_koushi {
  background: #FFF;
  padding: 4em 3em 3em;
overflow: hidden;
    background-image: url(../images/circle2.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}
.seciton_naiyou2 {
  background-image: linear-gradient(135deg, #fcb828 10%, #FCCF31 100%);
  padding: 4em 3em 3em;
}
.seciton_qa {
  background: #e0edfa;
  padding: 4em 3em 6em;
}
.seciton_gaiyou {
  background: #FFF;
  padding: 4em 3em 3em;
}
.seciton_spec {
  background: #F7F6F5;
  padding: 4em 3em 3em;
}

.seciton_qa p{
padding-bottom: 0!important;
}

/* タイトル枠*/
.kakko-t {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 border-top: 2px solid #2a74b5; /* 枠線の太さ・色 */
 border-left: 2px solid #2a74b5; /* 枠線の太さ・色 */
 border-right: 2px solid #2a74b5; /* 枠線の太さ・色 */
 height: 20px;
 color: #2a74b5;
}
.title-kakko {
 position: absolute;
 padding: 0 .5em;
 transform: translateX(50%);
 font-size: 180%;
 top: -22px;
 border: 2px solid;
 border-radius: 20px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
}
.kakko-b {
 position: relative;
 margin: 2em auto;
 padding: 1.2em;
 border-bottom: 2px solid #2a74b5; /* 枠線の太さ・色 */
 border-left: 2px solid #2a74b5; /* 枠線の太さ・色 */
 border-right: 2px solid #2a74b5; /* 枠線の太さ・色 */
 height: 20px;
 color: #2a74b5;
 }


ul.checklist1 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    margin-bottom: 1em;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.checklist1 li:before {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    color: rgb(0, 173, 239);
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

/*吹き出し*/
.width50{
  width: 50%;
  margin: 0 auto;
}

@media only screen and (max-width : 768px) {
.width50{
  width: 100%;
}
}

ul.checklist2 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    margin-bottom: 1em;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.checklist2 li:before {
    content: "\f304";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #1cdaa5;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

.sankaku{
  position: relative;
}
/*
.sankaku:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -40px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  border-width: 50px 50px 0 50px;
}
*/
.tokuten-tit{
  margin: 0!important;
  line-height: 60px;
  position: relative;
  height: 60px;
  padding: 0 2rem;
  text-align: center;
  color: #fff;
  background: #ff5a97;
  font-size: 1.8em;
}

.tokuten-tit:before,
.tokuten-tit:after {
  position: absolute;
  top: 0;
  display: block;
  height: 48px;
  content: '';
  border: 30px solid #ff5a97;
}

.tokuten-tit:before {
  left: -14px;
  border-left-width: 15px;
  border-left-color: transparent;
}

.tokuten-tit:after {
  right: -14px;
  border-right-width: 15px;
  border-right-color: transparent;
}

.tokuten-tit span {
  position: relative;
  display: block;
}

/*枠*/

.tokuten-box{
background-color: #fff;
padding: 2% 2% 0 2%;
width: 100%;
margin: 30px auto 0px;
background-image: url(../images/bg-stripe.png);
}

.mt-img{
  margin-top: -40px;
}

/*--------------------------------------------------
こんな経験ない？外国人を前にすると・・・
-----------------------------------------------------*/
ul.checklist3 li{
    list-style: none;
    padding: 10px 10px 10px 30px;
    position: relative;
    border-bottom: 1px dotted #ccc;
    background: #fff;
}

.checklist3 li:before {
content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #e4e5e6;
    font-size: 100%;
    position: absolute;
    left: 5px;
    top: 15px;
    line-height: 1;
}


ul.checklist4 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    margin-bottom: 1em;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.checklist4 li:before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #1cdaa5;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

.tokuchou_box {
    margin: 0 auto 75px auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.tokuchou {
    width: 30%;
    margin: 0;
    text-align: center;
}

.tokuchou_title {
    font-size: 20px;
    margin: 0;
    padding: 0;
    font-size: 120%;
    font-weight: bold;
    line-height: 160%;
   display: flex;
   align-items: flex-end;
   height: 80px;
    margin: 10px auto 0px;
}

.tokuchou_pict {
    margin: 0;
    padding: 0px 0;
    text-align: center;
}

.tokuchou_number {
    padding: 10px 0 15px 0;
    font-size: 100%;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: 1px;
    text-align: center;
}

.tokuchou_number span {
    padding: 5px 15px;
    color: #ffffff;
    background: #3393d2;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
    border-radius: 20px;
}




.list {
  display: flex;
  justify-content: center;
  padding: 0px;
  flex-wrap: wrap;
}

.list li {
  list-style: none;
  width: 45%;
  background-color: #ddd;
  margin: 10px;
  padding: 0px;
}

.list li.card {
  background-color: #fff;
  color: #222;
  padding: 5px 15px;
  display: flex;
  flex-direction: column;
box-shadow: 0 0.8vw 5.3333333333vw 0 rgba(12, 67, 127, 0.1);
}

.list li.card .thum {
  height: 100px;
  background-color: white;
}

.list li.card .ttl {
  font-weight: bold;
font-size: 1.2em;
    color: #2c81c0;
text-align: center;
}

.list li.card .txt {
  margin: 0;
  padding: 10px 0 15px 0;
  font-size: 100%;
  font-weight: bold;
  line-height: 100%;
  letter-spacing: 1px;
}

.list li.card .sns {
  font-size: 70%;
  color: yellow;
  margin-top: auto;
}

ul.checklist5 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    margin-bottom: 1em;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.checklist5 li:before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: rgb(9 139 222);
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

ul.checklist6 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    position: relative;
  }

.checklist6 li:before {
    content: "・";
    font-weight: 900;
    color: #222;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

.teacher-name{
  max-width: 700px;
  margin: 0 auto;
  font-size: 120%;
}
/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/

.accordion_header_02 {
  margin: 10px 0px 0em 0px;
  background: url(../images/+.svg) no-repeat, url(../images/img_flower.png) no-repeat;
  background-color: #fff;
  background-size: 40px 40px;
  background-position: 8px 50%, 98% 50%;
  padding: 15px 2px 15px 55px;
  color: #222;
    border-bottom: 1px solid #dfedfa;
  height: auto;
  vertical-align: middle;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  display: block;
color: #138ddf;
    font-weight: bold;
}
.selected02 {
  background: url(../images/_.png) no-repeat, url(../images/img_flower.png) no-repeat;
  ;
  background-color: #fff;
  background-position: 8px 50%, 98% 50%;
}
.selected02 + * {
  background: #fff;
  background-position: 8px 50%;
}
.accordion_open_02 {
  margin: 0px 0px 15px 0px;
  padding: 10px;
  background: #fff;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
}
.accordion_open_02:before {
  content: "";
}
.accordion_field_02 {
  display: block;
  line-height: 1.5;
  text-align: left;
  padding: 0 0 0 0px;
  margin: 0px;
  color: #222;
  font-size: 100%;
  width: 100%;
}




ul.checklist7 li{
    list-style: none;
    padding-left: 30px;
    padding-bottom: 1em;
    margin-bottom: 1em;
    position: relative;
    border-bottom: 1px dotted #ccc;
}

.checklist7 li:before {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #2a74b5;
    font-size: 100%;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}


.naiyou-box{
    background: #fff;
    padding: 20px 40px;
}


table {
  width: 100%;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  margin: 1em 0em;
}
th, td {
  padding: 0.5em;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fdb727;
}
th {
  background-color: #ffffff;
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
    text-align: center;
    color: #fff;
}
td {
  background-color: #fff;
  text-align: left;
}

.table_style_01 {
  text-align: left;
  vertical-align: middle;
}
/*--------------------------------------------------------
吹き出し
--------------------------------------------------------*/
.chat-l, .chat-r {
  position: relative;
  overflow: hidden;
  margin: 0 0 0em;
}
.bubble {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 76%;
  min-height: 60px;
  margin-bottom: 2em;
  padding: 2em;
  border: 3px solid #fcd857;
  background: #FFF;
  border-radius: 10px;
}
.bubble .bubble-in {
  border-color: #FFF;
}
.talker {
  display: block;
  width: 22%;
  height: auto;
  text-align: center;
}
.talker b {
  font-weight: normal;
}
.talker img {
  display: block;
  width: 150px;
  max-width: 100%;
  max-width: none\9;/*IE8への対応*/
  margin: auto;
}
.chat-l .talker {
  float: left;
  margin-right: 2%;
}
.chat-r .talker {
  float: right;
  margin-left: 2%;
}
.chat-l .bubble {
  float: right;
}
.chat-r .bubble {
  float: left;
}
.bubble .bubble-in:after, .bubble .bubble-in:before {
  position: absolute;
  top: 20%;
  width: 0;
  height: 0;
  border: solid transparent;
  content: "";
}
/*吹き出しの微調整*/
.bubble .b-arw20:after, .bubble .b-arw20:before {
  top: 20%;
}
.bubble .b-arw30:after, .bubble .b-arw30:before {
  top: 30%;
}
.bubble .b-arw40:after, .bubble .b-arw40:before {
  top: 40%;
}
.bubble .b-arw60:after, .bubble .b-arw60:before {
  top: 60%;
}
.bubble .b-arw70:after, .bubble .b-arw70:before {
  top: 70%;
}
.bubble .b-arw80:after, .bubble .b-arw80:before {
  top: 80%;
}
.chat-l .bubble .bubble-in:after, .chat-l .bubble .bubble-in:before {
  right: 100%;
}
.chat-r .bubble div:after, .chat-r .bubble div:before {
  left: 100%;
}
.chat-l .bubble .bubble-in:after {
  margin-top: -7px;
  border-width: 7px 14px;
  border-color: transparent;
  border-right-color: inherit;
}
.chat-l .bubble .bubble-in:before {
  margin-top: -9px;
  border-width: 9px 21px;
  border-color: transparent;
  border-right-color: #fcd857;
}
.chat-r .bubble .bubble-in:after {
  margin-top: -7px;
  border-width: 7px 14px;
  border-color: transparent;
  border-left-color: inherit;
}
.chat-r .bubble .bubble-in:before {
  margin-top: -9px;
  border-width: 9px 21px;
  border-color: transparent;
  border-left-color: #fedc00;
}
.bubble p:first-child {
  margin-top: 0;
}
.sp_br {
  display: none;
}

/*--------------------------------------------------
CTAエリア
-----------------------------------------------------*/
.area_cta {
  background-color: #105FA3;
  padding: 1em 3em;
}
.area_cta_inr {
  background-color: #fff;
  padding: 1em 2em;
  overflow: auto;
}
.area_cta_inr_left {
  float: left;
  width: 48%;
}
.area_cta_inr_right {
  float: right;
  width: 48%;
}

.ctacheck{
  margin: 5px auto;
  width: 600px;
  display: flex;
}
ul.ctacheck li{
    list-style: none;
    position: relative;
    text-align: left;
    margin-right: 40px;
    font-size: 1.2em;
}

.ctacheck li:before {
    content: "\f14a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ff6906!important;
    font-size: 100%;
    margin-left: -1em;
    position: absolute;
    left: 0;
    top: 4px;
    line-height: 1;
}

/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
  height: 200px;
  background-color: #050505;
  padding: 2em 0em;
  text-align: center;
  font-size: 1.4em;
  color: #ffffff;
}
.footer a {
  color: #ffffff;
}

/*--------------------------------------------------
ボタン
-----------------------------------------------------*/

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn--green {
  color: #fff;
  background-color: #0faa5b;
}

a.btn--green:hover {
  color: #fff;
  background: #0faa5b;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #098a48;
width: 100%;
max-width: 400px;
font-feature-settings: "palt";
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #0faa5b;
}

a.btn-c {
  font-size: 2rem;
  position: relative;
  padding: 1rem 0 1rem;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

.title-kakko_sp{
  display: none;
}

.btn-img{
  width: 80%;
}

/*
a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}
*/

/*--------------------------------------------------
deco
-----------------------------------------------------*/


.deco2 {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  letter-spacing: .1em;
  font-weight: 800;
  font-size: 1.5em;
  color: #fff;
  text-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
}
.deco2:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(-130deg);
  transform: rotate(-130deg);
}
.deco2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 35px;
  height: 2px;
  background-color: #fff;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.deco2:before {
  left:0;
}
.deco2:after {
  right: 0;
}



.tokuten-tit{
  font-size: 1.2em;
}

.present-tit{
    margin: 0;
    padding: 10px 0 10px 0;
    font-size: 250%;
    font-weight: bold;
    line-height: 150%;
    letter-spacing: 1px;
    text-align: center;
}

.present-tit span {
    padding: 5px 15px;
    color: #fe8713;
    font-weight: bold;
    border-top: solid 2px #fe8713;
    border-bottom: solid 2px #fe8713;
    background-color: #ffffff;
}



.service-point {
    display: flex;
    justify-content: space-between;
}

.service-point_item {
    width: calc(33% - 0px);
    padding:10px;
}

 .service-point_body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 24px 23px 27px;
    border-radius: 10px;
    border: solid 2px #0fcd6c;
    background-color: #fff;
    justify-content: left;
}

.service-point_icon{
  font-size: 36px;
  padding: 0 20px 0 0;
  color: #0fcd6c;
}

.service-point_text{
  font-size: 20px;
  font-weight: bold;
  color: #0fcd6c;
  width: 300px;
}
.service-point_text2{
  font-size: 25px;
  color: #0fcd6c;
  font-weight: bold;
}

/*--------------------------------------------------
追従ボタン
-----------------------------------------------------*/

.footer_fix_btn {
position: fixed;
    bottom: 10px;
display: none;
    right: 0px;
    width: 550px;
    padding: 5px 15px 5px 0;
    text-align: center;
    z-index: 999;
    display: flex;
    justify-content: flex-end;

}
.footer_fix_btn a {
  display:block;
  width:100%;
  text-decoration:none;
}
.footer_fix_btn a:hover {
  opacity:0.8;
}

@media (max-width: 1020px) and (min-width: 768px) {
.footer_fix_btn {
  width:55%;
}
a.btn-c {
    font-size: 1.2rem;
}
}

.m0a{
  margin: 0 auto!important;
}
.voice-container {
    display: flex;
    flex-wrap: wrap; /* 複数列に対応 */
    justify-content: space-between; /* 列間のスペースを均等に */
}

.voice-item {
    display: flex;
    width: 48%;
    padding: 20px 20px 20px;
    flex-direction: column;
    display: block;
    border-radius: 8px;
    height: 100%;
    background-color: #fff;
    text-decoration: none;
    -webkit-box-shadow: 5px 8px 15px 0px rgba(25, 146, 212, 0.18);
    box-shadow: 5px 8px 15px 0px rgba(25, 146, 212, 0.18);
    margin-bottom: 20px;
text-align: center;
}
.voice-item p{
    color: #0098ec;
    font-weight: bold;
    height: 6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
font-size: 1.2em;
}

.class-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-align: center; /* タイトルを中央揃え */
}

.class-content {
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
}

.class-info {
    display: flex;
    flex-direction: row; /* 横並び */
    max-width: 800px; /* 最大幅を設定 */
    width: 100%; /* 幅を100%に */
}

.class-image {
    width: 40%;
    border-radius: 8px;
    margin-right: 20px;
height: 100%;
}

.text-content {
    flex: 1;
}

.text-content p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.course-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.course-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.course-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 30%;
    min-width: 250px;
    text-align: center;
}

.course-card h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.note {
    text-align: center;
    margin-top: 20px;
}

.schedule-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.schedule-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}


.method-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.method-container {
display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
}

.method-box {
background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 0 10px;
    text-align: center;
    width: 30%;
    background-image: linear-gradient(135deg, rgb(0, 173, 239) 10%, #2973b4 100%);
    color: #fff;
    font-weight: bold;
min-height: 8em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.method-separator {
    font-size: 24px;
    margin: 0px;
    color: #2973b4;
}

.course-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.course-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.course-table td{
padding: 10px !important;}

.course-table th, .course-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.course-table th {
    background-color: #222;
    font-weight: bold;
}

.goal {
    text-align: center;
    padding-top: 10px!important;
font-size: 14px;
}
.platinum-container {
display: flex;
    justify-content: center;
    align-items: stretch;
}

.platinum-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 0 10px;
    text-align: center;
    width: 50%;
}

.platinum-separator {
    font-size: 24px;
    margin: 0 10px;
display: flex;
    align-items: center;
}
.deco {
    font-size: 1.4em;
    padding-bottom: 2em;
}
.course-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.table-responsive {
    overflow-x: auto; /* 横スクロールを可能にする */
    position: relative; /* スクロールヒントの位置を調整 */
}

.scroll-hint {
    position: absolute;
    top: -30px; /* テーブルの上に配置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #333;
    z-index: 10; /* テーブルの上に表示 */
}

.course-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.course-table th, .course-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.course-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.course-title {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

.table-responsive {
    overflow-x: auto; /* 横スクロールを可能にする */
    position: relative; /* スクロールヒントの位置を調整 */
}

.scroll-hint {
    position: absolute;
    top: -30px; /* テーブルの上に配置 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    color: #333;
    z-index: 10; /* テーブルの上に表示 */
}

.course-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.course-table th, .course-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.course-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.pricing-table {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
margin-bottom: 30px;
}


.plan {
    width: 300px;
    border-radius: 5px;
    overflow: hidden;
    background: white!important;
color: #333!important;
box-shadow: 2px 4px 1px #80c6ffe0;
    border: 1px solid #2b78ba;
    font-weight: bold;
}

.plan-header {
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #0064bc;
    text-align: center;
}

.plan-a .plan-header {
    background-color: #C0C0C0; /* シルバー */
    color: #333; /* 文字色をダークグレーに変更 */
}

.plan-b .plan-header {
    background-color: #FFD700; /* ゴールド */
    color: #333; /* 文字色をダークグレーに変更 */
}

.plan-c .plan-header {
    background-color: #E0E0E0; /* プラチナカラーを明るく変更 */
    color: #333; /* 文字色をダークグレーに変更 */
}

.plan-price {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0;
    color: #333;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 20px 20px;
    text-align: left;
}

.plan-features li {
    padding: 5px 0;
}

.plan-limit {
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
text-align: center;
background: #fff;
    color: #333;
        display: flex;
        justify-content: center;
    background: #e0f7ff;
}

.plan-total {
    font-size: 16px;
    color: #555;
    margin-bottom: 10px;
}

.plan-support {
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    background-color: #f0f0f0;
}


.pricing2-table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.pricing2-table th{
    border-bottom: 1px solid #ccc!important;
    padding: 15px;
    text-align: center;
line-height: 1;
}

.pricing2-table td {
    border-bottom: 1px solid #ccc!important;
    padding: 15px;
    text-align: center;
}

.pricing2-table th {
    font-size: 18px;
    font-weight: bold;
}

.column-title {
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
    color: white;
    font-weight: bold;
    text-align: left!important;
}

.plan-a {
    background: #C0C0C0!important;
background-image: none;
    color: #333;
}

.plan-b {
    background-color: #FFD700!important;
background-image: none;
    color: #333;
}

.plan-c {
    background-color: #a6e6ff !important;
background-image: none;
    color: #333;
}

.plan-price {
    font-weight: bold;
    color: #333;
width: 25%;
}

.plan-feature {
    text-align: left;
}

.plan-limit {
    font-size: 20px;
    font-weight: bold;
}

.plan-limit span {
    font-size: 14px;
    color: #555;
}

.plan-rating {
    font-size: 24px;
    color: #ff9800;
}

.plan-support {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
}

.plan-check {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
}

.cp-section {
    padding: 20px 0;
}

/* コンテナー */
.cp-container {
    width: 100%;
    max-width: 1065px;
    margin: auto;
    padding-right: 20px;
    padding-left: 20px;
}

@media screen and (max-width: 599px) {
    /* セクション */
    .cp-section {
        padding: 20px 0 40px;
    }

    /* コンテナー */
    .cp-container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

/* 更新情報 ------------------------------*/
/* アイテム */
.cp-infoText03__item:not(:last-child) {
    margin-bottom: 40px;
}


.cp-infoText03__info {
    display: flex;
    align-items: center;
}

/* 日付 */
.cp-infoText03__date {
    position: relative;
    margin-right: 32px;
    padding-right: 40px;
    font-size: 16px;
    line-height: 1.5;
    color: #707070;
    white-space: nowrap;
min-width: 25%;
}
.cp-infoText03__date:after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 1px;
    margin: auto;
        background: #2b79ba;
}
.cp-infoText03__date span {
    font-size: 24px;
    font-weight: bold;
color: #2c7cbc;
        font-weight: bold;
}

/* テキスト */
.cp-infoText03__text {
    padding-right: 32px;
    line-height: 1.5;
}

@media screen and (max-width: 1024px) {
    /* 日付 */
    .cp-infoText03__date {
        margin-right: 24px;
        padding-right: 0px;
    }
}

.cp-container li{
list-style: none;}

section.about-class {
    padding: 20px 20px 100px;
position: relative;
    overflow: hidden;
    background-image: url(../images/circle2.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}
.about-class:before {
    content: "";
    width: 100%;
    height: 120px;
    background-color: #e0edfa;
    position: absolute;
    bottom: -1px;
    left: 0;
    clip-path: polygon(50% 99%, 50% 100%, 0 100%, 0 0);
}
.about-class::after {
    content: "";
    width: 100%;
    height: 120px;
    background-color: #e0edfa;
    position: absolute;
    bottom: -1px;
    right: 0;
    clip-path: polygon(100% 0, 100% 100%, 50% 100%, 50% 99%);
}

.vip{
background: #fff9e3;
padding: 20px;
margin: 20px 0;}

.p1{
background-image: linear-gradient(135deg, #32a852 10%, #268b3c 100%)!important;
}

.p1-t{
color: #32a852!important;
}

.p1-i li:before {
    color: #32a852!important;
}

.p1-arrow-down {
    border-top: 10px solid #32a852!important;
}

.p1-h3{
background-image: linear-gradient(135deg, #32a852 10%, #268b3c 100%)!important;
min-height: 2em;
}

.p2{
background-image: linear-gradient(135deg, #e68a2e 10%, #d16a18 100%)!important;
}
.p2-t{
color: #d16a18!important;
}
.p2-i li:before {
    color: #d16a18!important;
}

.p3{
background-image: linear-gradient(135deg, #d32f2f 10%, #b71c1c 100%)!important;
}
.p3-t{
color: #b71c1c!important;
}
.p3-i li:before {
    color: #b71c1c!important;
}


.p1-h4 {
  border: solid 2px #32a852;
font-size: 1em!important;
}
.p1-h4:before {
background-image: linear-gradient(135deg, #32a852 10%, #268b3c 100%)!important;
}

.p2-h4 {
  border: solid 2px #e68a2e;
font-size: 1em!important;
}
.p2-h4:before {
background-image: linear-gradient(135deg, #e68a2e 10%, #d16a18 100%)!important;
}

.p3-h4 {
  border: solid 2px #d32f2f;
font-size: 1em!important;
}
.p3-h4:before {
background-image: linear-gradient(135deg, #d32f2f 10%, #b71c1c 100%)!important;
}
.p4-h4 {
  border: solid 2px #d4af37;
padding: 0.3em 0 0.3em 14.6em !important;
background-color: #fff;
}

.p4-h4:before {
    background-image: linear-gradient(135deg, #d4af37 10%, #b8860b 100%) !important;
    width: 304px !important;
    transform: rotate(18deg);
}

.p1-h4 span,
.p2-h4 span,
.p3-h4 span{
font-size: 1em!important;}

.me-t{
padding: 0 30px;}

.solution {
    font-size: 1.8rem;
    display: inline;
    letter-spacing: 0.08em;
    line-height: 6.5rem;
    font-weight: 600;
    border-bottom: 5px solid #41b9dc;
}

.line-banner {
    display: flex;
    align-items: stretch; /* 子要素を同じ高さにする */
    justify-content: center;
    max-width: 950px;
    margin: 40px auto;
    border: 2px solid #ddd; /* 枠を追加 */
    border-radius: 10px;
    overflow: hidden; /* 枠内に収める */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.text-content {
    width: 50%;
    padding: 40px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.line-logo {
    width: 50px;
    height: auto;
}



.arrow {
    font-size: 24px;
    margin: 10px 0;
}

.highlight {
    color: green;
    font-weight: bold;
}

.image-content {
    width: 43%;
    display: flex;
    align-items: center;
    justify-content: center;
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
}

.image-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠にフィット */
}

.henka {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    margin: 60px auto;
    position: relative;
}

/* 画像部分 */
.henka-image-content {
    width: 50%;
    position: relative;
    z-index: 2;
margin-right: -3em;
margin-top: -3em;
}

.henka-image-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* テキスト部分 */
.henka-text-content {
    width: 50%;
    background-color: white;
    border-radius: 20px;
    padding:40px 30px 40px 60px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}



.henka2 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 700px;
    margin: 60px auto;
    position: relative;
}

/* 画像部分（右側に配置） */
.henka-image-content2 {
    width: 50%;
    position: relative;
    z-index: 2;
    margin-left: -3em; /* 画像を左へ寄せる */
    margin-top: -3em;  /* 上にずらす */
}

.henka-image-content2 img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* テキスト部分（左側に配置） */
.henka-text-content2 {
    width: 50%;
    background-color: white;
    border-radius: 20px;
    padding: 40px 60px 40px 30px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    text-align: left;
}

.henka-h2{
padding-bottom: 2em;}

.arrow-down {
width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2e83c3;
    margin: -2px auto;
    display: block;
}

.grade{
background-image: linear-gradient(135deg, #3393d2 10%, #2973b4 100%);
color: #fff;
font-weight: bold;}
td.grade{
text-align: center;}
.m-ti{
max-width: 800px;
text-align: center;
margin: auto;}

.speech-bubble {
    position: relative;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
font-weight: bold;
    color: rgb(0, 173, 239);
}

.speech-bubble:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #ffffff;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

.fukidashi-01-03 {
    position: relative;
    width: fit-content;
    padding: 12px 16px;
    border-bottom: 2px solid #328ecd !important;
    background-color: #ffffff;
    font-size: 18px;
    font-weight: bold;
color: #328ecd !important;
}

.fukidashi-01-03::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #ffffff; /* 吹き出しの背景色 */
    border-bottom: 2px solid #328ecd !important;
    border-right: 2px solid #328ecd !important;
    transform: translateX(-50%) rotate(45deg);
}