@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

body {
/* ゴシック ====================================================================== */
 font-family: 'Noto Sans JP', sans-serif;
 font-weight: 300;
 position: relative;
}

.font-min {
  /* 明朝 ====================================================================== */
  font-family: 'Noto Serif JP', serif;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.wrapper{
  width: 100%;
  max-width: 1440px;
  font-size:18px;
  color: #1d1d1d;
  margin: 0 auto;
 background: #ffffff;
 box-shadow: 0px 0px 20px -5px #c9c9c9;
}

header{
  background: url(../images/bgMain.png) top center no-repeat;
  background-size: cover;
  position: relative;
}
header #TOPimg::after {
  content: '';
  display:inline-block;
  width: 100%;
  padding-bottom: 53.8%;
}

header #TOPimg {
  background:
  url(../images/bgMainTopLeft.png),
  url(../images/bgMainTopRight.png),
  url(../images/../images/bgMainBottomRight.png),
  url(../images/../images/bgMainBottomLeft.png);
  background-repeat:
  no-repeat,
  no-repeat,
  no-repeat,
  no-repeat;
  background-position:
  left top,
  right top,
  right bottom,
  left bottom;
  width: 100%;
  background-size: 25%;
  /*height: 775px;*/
}

header #TOPimg .Topframe {
  position: absolute;
  top: 12%;
  left: 4%;
  z-index: 1;
  width:49.4%;
  max-width: 712px;
}

header #TOPimg .Topframe h1 {
  width: 88%;
  position: absolute;
  top: 47.5%;
  left: 6%;
  z-index: 2;
  text-align: center;
  font-size: 28px;
  line-height: 200%;
  text-shadow: 0px 3px 3px rgba(221,157,72, 0.3);
  letter-spacing: 1px;
  font-weight: 600;
}

header h1 p{
  display: inline-block;
  font-size: 200%;
}

header .TopimgRight {
  position: absolute;
  right: 0;
  bottom:0;
  width: 62%;
}
a {
  font-weight: 400;
}
.LinkBtn, .Bar a{
  transition: .3s;
}
.LinkBtn:hover, .Bar a:hover ,#branchPage .pageBox .pageBtn:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px rgba(100,100,105,0.3));
}

.green {  color: #008e8f;}
.blue  {  color: #4999cc;}
.pink  {  color: rgb(255,60,165);}
.yellow {  color:#ffedaf ;}
.yellow2 {color: #ffd489;}
.bold {font-weight: bold;}
.big{font-size: 160%;}
.small {font-size: 60%;}
.imgshadow{filter: drop-shadow(0 0 8px rgba(255,60,165,0.3));}
.under {
  border-bottom: 5px solid rgb(255,220,239);
  padding-bottom: 2px;
  display: inline-block;
}
.underline{text-decoration: underline;}
.right {text-align: right;}
.inlineB {display: inline-block;}
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

/* Box-ALL ================================================================== */
.boxYellow,
.boxPink,
.boxGreen {
  padding: 0 2px 100px;
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 180%;
  font-weight: bold;
  margin: 100px auto 60px;
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 60%;
  line-height: 130%;
}
h2::before {
  display: inline-block;
  content:'';
  width: 35px;
  height: 49px;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  left: -1.5em;
  bottom: -2px;
}
h2::after{
  display: inline-block;
  content:'';
  width: 35px;
  height: 49px;
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  right: -1.5em;
  bottom: -2px;
}

.img-center {
  text-align: center;
  margin: 0 auto;
}

.text-Box {
  line-height: 200%;
  padding: 0 20px;
  font-weight: 400;
}
.clm-2 {
  width: 92%;
  max-width: 960px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: stretch;
  margin: 0 auto;
}
.clm-2 li {
  max-width: 460px;
  margin: 0 0 40px;
  width: 48%;
}
.clm-2 li div {
  min-height: 204px;
  padding: 48px 2em 28px;
  margin: 0 auto;
}
.clm-3 {
 width: 96%;
 max-width: 1100px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-content: center;
 align-items: stretch;
 margin: 0 auto;
}
.clm-3 li {
  width: 46%;
  margin: 0 12px 40px;
  max-width: 340px;
}
.clm-3 li div {
  min-height: 340px;
  padding: 48px 28px 28px;
  margin: 0 auto;
}
.clm-4 {
  width: 98%;
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: stretch;
  margin: 0 auto;
}
.clm-4 li {
  width: 240px;
  margin:0 20px 60px;
}
.clm-4 li:first-child{
  margin-left: 0;
}
.clm-4 li:nth-child(4n){
  margin-right: 0;
}
.clm-4 li div {
  min-height: 240px;
  padding: 48px 28px 28px;
  margin: 0 auto;
}
.caption {
  margin: 30px auto 5px;
}
.caption dt {
  font-size: 120%;
  font-weight: 400;
  margin-bottom: 20px;
}
.caption dd {
  text-align: left;
  font-size: 88%;
  line-height: 150%;
  letter-spacing: 1px;
}
.salesModel {
  line-height: 200%;
  font-weight: bold;
}
.salesModel p {
  font-size: 160%;
  color: rgb(255,60,165);
  margin-bottom: 16px;
  letter-spacing: 1px;
}
.salesModel p.under {
  margin-bottom: 30px;
}


/* box-Yellow =============================================================== */
.BG-boxYellow {
  background-color: rgba(255, 249, 233, 1.0);
  line-height: 150%;
}
.boxYellow {
  background:
  url(../images/bgYellowTopLeft.png),
  url(../images/bgYellowTopRight.png),
  url(../images/../images/bgYellowBottomRight.png),
  url(../images/../images/bgYellowBottomLeft.png);
  background-repeat:
  no-repeat,  no-repeat,  no-repeat,  no-repeat;
  background-position:
  left top,  right top,  right bottom,  left bottom;
  width: 100%;
  background-size: 25%;
}

.boxYellow h2  {
  border-bottom: 5px solid rgb(255,207,53);
  padding-bottom: 3px;
}

.boxYellow h2::before {
  background: url(../images/icoStarYellowLeft.png) no-repeat;
}
.boxYellow h2::after {
  background: url(../images/icoStarYellowRight.png) no-repeat;
}
.clm-3 .frameYellow , .frameYellow-Single ,.frameYellow-SingleL {
  border:1px solid #fff;
  border-image: url('../images/img-FrameYellow.png');
  border-image-slice: 28 fill;
  border-image-width: auto;
  border-image-repeat: stretch;
  filter: drop-shadow(0px 0px 12px rgba(255,207,53,0.4));
  position: relative;
  border-radius: 50px;
  background: #fff;
}
.frameYellow .caption dt,
.frameYellow-Single .caption dt {
  color: rgb(229,157,0);
}
#Section-Point dt {
  text-align: left;
}
#appealSection .clm-3 li {
  width: 46%;
}
.frameYellow-Single {
  width: 96%;
  max-width: 640px;
  min-height: 208px;
}
.frameYellow-Single div,
.frameYellow-SingleL div {
  width: 100%;
  min-width: 640px;
  padding: 40px;
}
.frameYellow-SingleL div p {
  font-weight: 400;
}
.frameYellow-Single .caption {
  margin: 0 auto;
}
.frameYellow-SingleL {
  max-width: 1100px;
  width: 92%;
  margin: 0 auto;
}
.boxYellow .LinkBtn {
  max-width: 180px;
  color: rgb(229,159,0);
  background: rgb(255,249,233);
  border: 2px solid rgb(255,207,53);
  border-radius: 24px;
  text-align: center;
  margin: 0 auto;
}
.boxYellow .LinkBtn a {
  display: inline-block;
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxYellow .LinkBtn a::after {
  content: '';
  margin-left: 4px;
  display: block;
  background: url(../images/icoArrowBottom@3x.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  width: 10px;
  height: 10px;
}
#Section-Point .boxYellow {
  padding: 0;
  background: none;
}
#Section-Point .PC-Right {
  background: url(../images/bgStars.png) top right;
  position: relative;
  width: 100%;
}
#Section-Point .PC-Left {
  background: url(../images/bgStars.png) top left;
  position: relative;
  width: 100%;
}
#Section-Point .PC-Right::after,
#Section-Point .PC-Left::after{
  content: '';
  clear: both;
  display: block;
}
#Section-Point .PC-Right>img {
  float: left;
  width:50%;
}
#Section-Point .PC-Left>img {
  float: right;
  width:50%;
}
#Section-Point .PC-Right .frameYellow-Single {
  position: absolute;
  left:42%;
  top:50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  z-index: 2;
}
#Section-Point .PC-Left .frameYellow-Single {
  position: absolute;
  right:42%;
  top:50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  z-index: 2;
}
.entrySection li {
  margin: 0 10px;
}
.entrySection li div {
  padding: 0;
}
.entrySection .caption {
  margin: 4px auto 0;
  font-size: 88%;
}
.entrySection .caption dt {
  margin-bottom: 15px;
  color: rgb(229,157,0);
}
#staffSection .clm-4 {
  justify-content: space-evenly;
}
#staffSection .clm-4 li {
  width: 25%;
  min-width: 220px;
  text-align: center;
  margin: 0 auto;
  padding: 0 4px;
}
#staffSection .clm-4 li h4 {
  color: rgb(229,157,0);
  font-weight: bold;
  margin: 16px 0;
}


/* box-Pink ================================================================= */
.BG-boxPink {
  background-color: rgba(255, 242, 249, 1.0);
}
.boxPink {
  background:
  url(../images/bgPinkTopLeft.png),
  url(../images/bgPinkTopRight.png),
  url(../images/bgPinkBottomRight.png),
  url(../images/bgPinkBottomLeft.png);
  background-repeat:
  no-repeat,  no-repeat,  no-repeat,  no-repeat;
  background-position:
  left top,  right top,  right bottom,  left bottom;
  width: 100%;
  background-size: 25%;
}
.boxPink h2{
  border-bottom: 5px solid rgb(255,60,165);
  padding-bottom: 3px;
}

.boxPink h2::before {
  background: url(../images/icoStarPinkLeft.png) no-repeat;
}
.boxPink h2::after {
  background: url(../images/icoStarPinkRight.png) no-repeat;
}
.clm-2 .caption {
  margin: 0 auto;
}
.framePink,
.framePink-Single,
.framePink-SingleL,
.framePink-SingleSS,
.framePinkLong {
  border:1px solid #fff;
  border-image: url('../images/img-FramePink.png');
  border-image-slice: 28 fill;
  border-image-width: auto;
  border-image-repeat: stretch;
  filter: drop-shadow(0px 0px 12px rgba(255,60,165,0.3));
  position: relative;
  border-radius: 50px;
  background: #fff;
}
.framePink .number {
    font-size: 350%;
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    color: rgb(255,60,165);
    text-shadow: 0 0 4px #fff;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-weight: bold;
}
.framePink .caption dt {
  color: rgb(255,60,165);
}
.teacherAbout .boxPink {
  padding-bottom: 0;
}
.teacherAbout .clm-3 {
  margin: 60px auto 0;
}
.teacherAbout .framePinkLong  {
  padding: 82px 2em 28px;
  margin: 0 12px 130px;
}
.clm-3 .framePinkLong h4,
.teacherAbout .framePinkLong h4 {
  display: block;
}
.teacherAbout .framePinkLong h4 {
  text-align: center;
}
.clm-3 .framePinkLong .caption {
  margin-top: 20px;
}
.teacherAbout .framePinkLong dt {
  font-size: 94%;
  text-align: left;
  color: rgb(255,60,165);
  line-height: 160%;
  margin-bottom: 10px;
}
.teacherAbout .framePinkLong .thumnail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  max-width: 160px;
}
.teacherAbout .framePinkLong div {
  padding:28px 0 0;
}
.teacherAbout .clm-2 .framePink .caption dt {
  color: #000;
}
.framePink-Single {
  max-width: 990px;
  margin: 0 auto 20px;
  width: 92%;
}
.teacherAbout .framePink-Single {
  max-width: 960px;
  min-height: 344px;
}
.framePink-Single div,
.framePink-SingleL div {
  width: 100%;
  min-width: 640px;
  padding: 40px;
}
.framePink-SingleSS div {
  padding: 16px 26px 40px;
}
.framePink-Single .caption {
  margin: 0 auto;
}
.framePink-SingleSS {
  max-width: 960px;
  width: 92%;
  margin: 0 auto 20px;
}
.framePink-SingleL {
  max-width: 990px;
  min-height: 428px;
  width: 92%;
  margin: 0 auto 40px;
}
.framePink-Single h3 {
  font-size: 160%;
  margin: 30px auto;
  font-weight: bold;
}
.framePink-Single .textBox{
  width: 80%;
  max-width: 670px;
  margin: 0 auto 30px;
  font-size: 89%;
  line-height: 150%;
}
.framePink-Single .stageList {
  width: 412px;
  min-width: 412px;
  background: rgb(255,242,249);
  margin: 0 auto;
  padding: 30px;
  text-align: left;
  font-size: 89%;
  line-height: 150%;
}
.framePink-Single .stageList p {
  text-align: center;
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 20px;
}
.framePink-SingleL h3 {
  color: rgb(255, 60, 165);
  font-size: 160%;
  margin: 30px auto;
  font-weight: bold;
}
.framePink-SingleL .caption dt {
  color: rgb(255, 60, 165);
  font-size: 160%;
  margin: 60px auto 30px;
  line-height: 160%;
}
.framePink-SingleL .caption dd {
  text-align: center;
  margin-bottom: 32px;
}
.boxPink .LinkBtn {
    width: 80%;
    max-width: 180px;
    color: rgb(255,60,165);
    background: rgb(255,242,249);
    border: 2px solid rgb(255,60,165);
    border-radius: 24px;
    text-align: center;
    margin: 20px auto 0;
}
.boxPink .LinkBtn a {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxPink .LinkBtn a::after {
    content: '';
    margin-left: 4px;
    display: block;
    background: url(../images/arrow-Pink@3x.png) no-repeat;
    background-position: 50% 70%;
    background-size: contain;
    width: 7px;
    height: 1em;
}
#recruitSection .framePink-Single {
  max-width: 720px;
}
#recruitSection .framePink-Single tr {
  border-bottom: 2px solid rgb(255,220,239);
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: block;
}
#recruitSection .framePink-Single tr:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}
#recruitSection .framePink-Single th {
  width:130px;
  font-weight: bold;
}
#recruitSection .framePink-Single td {
  text-align: left;
  line-height: 150%;
}

/* box-Green ================================================================ */
.BG-boxGreen {
  background-color: rgba(239, 253, 251, 1.0);
}
.boxGreen {
  background:
  url(../images/bgGreenTopLeft.png),
  url(../images/bgGreenTopRight.png),
  url(../images/../images/bgGreenBottomRight.png),
  url(../images/../images/bgGreenBottomLeft.png);
  background-repeat:
  no-repeat,  no-repeat,  no-repeat,  no-repeat;
  background-position:
  left top,  right top,  right bottom,  left bottom;
  width: 100%;
  background-size: 25%;
}
.boxGreen h2 span {
  border-bottom: 5px solid rgb(50,177,163);
  padding-bottom: 3px;
}

.boxGreen h2::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 49px;
  background: url(../images/icoStarGreenLeft.png) no-repeat;
  background-size: contain;
  margin-right: 4px;
  vertical-align: middle;
}
.boxGreen h2::after {
  content: "";
  display: inline-block;
  width: 35px;
  height: 49px;
  background: url(../images/icoStarGreenRight.png) no-repeat;
  background-size: contain;
  margin-left: 4px;
  vertical-align: middle;
}
.clm-3 .frameGreen {
  border:1px solid #fff;
  border-image: url('../images/img-FrameGreen.png');
  border-image-slice: 28 fill;
  border-image-width: auto;
  border-image-repeat: stretch;
  filter: drop-shadow(0px 0px 12px rgba(117,218,207,0.5));
  position: relative;
  border-radius: 50px;
  background: #fff;
}
.frameGreen .caption {
  margin: 20px auto 5px;
}
.frameGreen .caption dt,
.frameGreen-Single .caption dt {
  color: rgb(0,131,117);
}
.frameGreen .caption dt {
  margin-bottom: 16px;
}


/* Q&A ====================================================================== */
.accordion {
  margin: 0 auto;
  max-width: 960px;
  width: 90%;
}
.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 #fff;
  outline: solid 2px rgb(255,207,53);
  outline-offset: 0px;
  padding: 1em 2em 1em 1em;
  display: block;
  color: #000;
  background: rgb(255,207,53);
  text-align: left;
  font-weight: bold;
}
.title::after,
.title::before {
content: "";
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: #000;
transition: all 0.3s;
}
.title::after {
transform: rotate(90deg);
}
.content {
max-height: 0;
overflow: hidden;
outline: solid solid 2px rgba(255,207,53,0);
outline-offset: 0px;
margin: 2px 0 0;
display: flex;
justify-content:flex-start;
align-items: flex-start;
flex-direction: row;
}
.content p {
margin: 0;
padding: 24px 24px 24px 20px;
font-size: 0.9em;
line-height: 1.75;
text-align: left;
}
.title span {
  font-size: 200%;
  margin-right: 20px;
  vertical-align: text-bottom;
}
.content:before {
  content: 'A';
  padding-top: 24px;
  padding-left: 40px;
  font-size: 200%;
  color: rgb(229,157,0);
}
.toggle:checked + .title + .content {
max-height: 500px;
transition: all 0.3s;
outline: solid 2px rgb(255,207,53);
outline-offset: 0px;
background: #fff;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}


/* Brunch page ====================================================================== */
#branchPage.wrapper {
  box-shadow: none;
  position: relative;
  min-height: 100vh;
}
#branchPage.wrapper::after {
  width: 5px;
}
#branchPage.wrapper footer {
  padding:16px 8px !important;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}
#branchPage h1 {
  text-align: center;
  padding-top: 10px;
}
#branchPage h2 {
  margin: 60px auto 40px;
  display: block;
}
#branchPage section {
  padding-bottom: 140px;
}
#branchPage .table_company {
  max-width: 500px;
  width: 96%;
  margin: 0 auto;
  font-size: 89%;
}
#branchPage .table_company tr {
  width: 100%;
  border-top: 1px solid rgba(221,221,221,1);
}
#branchPage .table_company th,
#branchPage .table_company td {
  padding: 1.25em 0;
  display: table-cell;
  vertical-align: middle;
}
#branchPage .table_company th {
  width: 28%;
}
#branchPage .pageBox {
    width: 92%;
    margin: 0 auto;
    max-width: 800px;
}
#branchPage .pageBox .about {
  margin-bottom: 40px;
  font-size: 89%;
  line-height: 160%;
}
#branchPage .pageBox .about h5 {
  font-size: 130%;
  font-weight: bold;
  margin: 0 0 20px;
}
#branchPage .pageBox .about p {
  margin-bottom: 20px;
}
#branchPage .pageBox .about p:last-child {
  margin-bottom: 0;
}
#branchPage .pageBox .about ul {
  margin: 10px 0 10px 2em;
}
#branchPage .pageBox .about ul li {
  margin-bottom: 10px;
}
#branchPage .pageBox .about ul li:last-child {
  margin-bottom: 0;
}
#branchPage .pageBox .about a {
  color: rgb(0,142,143);
  text-decoration: underline;
  transition: .3s;
}
#branchPage .pageBox .about a:hover {
  text-decoration: none;
}
#branchPage .pageBox .pageBtn {
  display: block;
  width: 84%;
  padding: 1em 0;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 120%;
  border-radius: 40px;
  background: rgb(0,142,143);
  box-shadow: 0px 3px 0px 0 rgba(0,112,112,1);
  transition: .3s;
}

/* Footer ====================================================================== */
footer {
  text-align: center;
  background: #fff;
  padding: 30px 8px 140px;
  text-align: center;
}

footer ul{
  display: flex;
  margin: 0 auto 20px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
footer ul li {
  margin: 0 10px;
}
footer ul li a {
  color: rgb(0,141,143);
}

footer p {
  margin-bottom: 8px;
  font-size: 88%;
}

footer a {
  text-decoration: underline;
  transition: .3s;
}
footer a:hover {
  color: #00d3d5;
}

/* Campaing ================================================================= */
.BG-campaing {
  padding: 2em 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background: rgb(255,253,246);
}
.BG-campaing a {
  display: block;
  width: 48%;
  max-width: 480px;
  background: #fff;
  box-shadow: 0px 4px 16px -4px rgb(193,184,154);
  text-align: center;
  padding-bottom: 8px;
  margin: 0 1%;
}
.BG-campaing a img {
  margin-bottom: 8px;
}
.BG-campaing a:hover {
  opacity: .5;
}

/* FormBar ====================================================================== */

#formBarSection {
  background: rgb(192,238,219);
  background: linear-gradient(90deg, rgba(192,238,219,0.8) 0%, rgba(237,253,168,0.8) 33%, rgba(255,232,161,0.8) 66%, rgba(255,232,161,0.8) 100%);
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
}

#formBarSection> div {
  width: 98%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

#formBarSection> div > div {
  margin: 0 15px;
  font-weight: bold;
  position: relative;
}
#formBarSection> div > div span {
  font-size: 120%;
}
#formBarSection .logoBar {
  position: relative;
  width: 197px;
  height: 125px;
}
#formBarSection .logoBar img {
  position: absolute;
  bottom: 6px;
  width: 197px;
}
#formBarSection .Bar a{
  display: inline-block;
}

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
}
 
.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
}
 
@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.25; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.75; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


p.btnCopy {
color: #fff;
background: rgb(255,60,165);
padding: 8px 10px;
border-radius: 20px;
position: absolute;
top: -35px;
width: 100%;
text-align: center;
box-shadow: 0 2px 6px -1px rgba(0,0,0,.2);
}

p.btnCopy:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid rgb(255,60,165);
}

p.btnCopy.floatV {
  -webkit-animation: floatV 1s ease-in-out infinite alternate;
          animation: floatV 1s ease-in-out infinite alternate;
}
 
@-webkit-keyframes floatV {
  0% {
    -webkit-transform: translate3d(0, -0.25em, 0);
            transform: translate3d(0, -0.25em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.5em, 0);
            transform: translate3d(0, 0.5em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.25em, 0);
            transform: translate3d(0, -0.25em, 0);
  }
}
@keyframes floatV {
  0% {
    -webkit-transform: translate3d(0, -0.25em, 0);
            transform: translate3d(0, -0.25em, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 0.5em, 0);
            transform: translate3d(0, 0.5em, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -0.25em, 0);
            transform: translate3d(0, -0.25em, 0);
  }
}


/* Modale ====================================================================== */
.modaal-container{
  background: rgba(255,255,255,0) !important;
  box-shadow: none !important;
}
.modaal-content-container {
    padding: 100px 0 0 !important;
}
.modaal-container .teacherAbout .framePinkLong{
  font-size: 120%;
  padding: 3em 2em 2em;
  max-width: 810px;
  margin:0 auto !important;
}
.modaal-container .teacherAbout .framePinkLong .thumnail {
  width: 140px;
}
.modaal-container .teacherAbout .framePinkLong dd {
  margin-bottom: 2em;
}
.modaal-wrapper .modaal-close {
  background: rgba(0,0,0,0.8) !important;
}
.modaal-close {
  right: 30px!important;
}


/* SP ========================================================================== */


@media screen and (max-width:1399px) {
  header #TOPimg .Topframe h1{
    font-size: 2vw;
  }
}
@media screen and (max-width: 1110px) {
  #Section-Point .PC-Right>img,
  #Section-Point .PC-Left>img {
    width: 100%;
    float: none;
  }
  #Section-Point .PC-Right,
  #Section-Point .PC-Left {
    background: url(../images/bgStars.png) bottom left;
    background-size: contain;
    padding-bottom: 20px;
  }
  #Section-Point .PC-Right .frameYellow-Single,
  #Section-Point .PC-Left .frameYellow-Single {
    position: inherit;
    left: inherit;
    right: inherit;
    top: inherit;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    margin: 20px auto 0;
    min-height: inherit;
  }
}
@media screen and (max-width: 1024px) {
  header #TOPimg .Topframe h1{
    font-size: 20px;
  }
  #formBarSection > div {
    padding: 15px;
    width: 100%;
  }
  #formBarSection div div:nth-child(-n+2) {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  .text-Box {
    text-align: left;
    line-height: 150%;
  }
  header #TOPimg,.boxPink,.boxYellow,.boxGreen {
    background-size: 40%;
  }
  header #TOPimg::after{
    padding-bottom: 0;
  }
  header .TopimgRight {
    position: inherit;
    right: inherit;
    bottom: inherit;
    width: 100%;
    height: 97%;
    background: url(../images/mainAdvisorsMobile.png) top center no-repeat;
    background-size: 100%;
    padding-bottom: 120%;
  }
  header .TopimgRight img {
    display: none;
  }
  header #TOPimg .Topframe {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 90%;
    max-width: inherit;
    transform: translate(-50%, -20%);
    -webkit-transform: translate(-50%, -20%);
    -ms-transform: translate(-50%, -20%);
  }
  header #TOPimg .Topframe h1 {
    font-size: 3.5vw;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    font-size: 16px;
  }
  .frameYellow-SingleL {
    width: 96%;
    margin: 0 auto;
  }
  .clm-3 li {
    margin: 0 auto 10px;
  }
  .clm-3 li div {
    min-height: inherit;
  }
  .salesModel {
    width: 92%;
    margin: 40px auto 0;
    text-align: left;
    font-size: 90%;
  }
  .salesModel p {
    text-align: center;
  }
  .framePink-Single div, .framePink-SingleL div,.frameYellow-Single div, .frameYellow-SingleL div {
    width: 100%;
    min-width: inherit;
    padding: 28px;
  }
  .teacherAbout .framePinkLong {
    margin: 0 12px 130px;
    width: 96%;
    max-width: inherit;
  }
    .clm-3 .frameYellow div {
    padding: 28px;
  }
    .clm-3 .frameYellow .caption dd{
    text-align: center;
  }
  .framePink-Single .stageList {
    width: 96%;
    min-width: inherit;
  }
  .framePink-SingleL .caption dd,
  .framePink-Single .textBox {
    text-align: left;
  }
  #staffSection .clm-4 li {
    width: 44%;
    min-width: 150px;
  }

  .modaal-wrapper .modaal-close {
    left: 50%;
    top: inherit;
    bottom:1em;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
  }

  .modaal-inner-wrapper {
    padding-bottom: 80px !important;
  }
}
@media screen and (max-width: 430px) {
  h2 {
    font-size: 160%;
    margin: 50px auto 30px;
  }
  .wrapper {
    font-size: 15px;
  }
  .clm-2 {
    width: 100%;
  }
  .clm-3 li,
  .clm-2 li {
    width: 92%;
    max-width: inherit;
    margin: 0 auto 30px;
  }
  .boxYellow, .boxPink, .boxGreen {
    padding-bottom: 50px;
  }
  .salesModel p {
    font-size: 140%;
  }
  .frameYellow-SingleL
   {
    width: 92%;
    text-align: left;
  }
  .clm-3 .frameYellow div {
    padding: 28px;
  }
  .entrySection .clm-4 li {
    width: 100%;
    margin: 0 0 16px;
  }
  .entrySection .clm-4 li div {
    display: flex;
    min-height: inherit;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .entrySection .clm-4 li div img {
    width: 100px;
  }
  .entrySection .clm-4 li div .caption {
    margin: auto 10px;
  }
  .entrySection .clm-4 li div .caption dt {
    text-align: left;
    margin-bottom: 10px;
  }
  #staffSection .clm-3 .frameYellow div img {
    height: 70px;
  }
  .clm-3 .frameYellow .caption dd {
    text-align: left;
  }
  .teacherAbout .clm-2 li div,
  .teacherAbout .framePink-SingleSS div {
    min-height: inherit;
    padding: 24px;
    margin: 0 auto;
  }
  .teacherAbout .framePink-SingleSS .caption {
    margin: 0 auto;
  }
    .teacherAbout .caption dt,
    .teacherAbout .clm-2 .framePink .caption dd {
      margin: 14px auto;
    }
  .teacherAbout .framePinkLong:first-child {
    margin: 40px auto 130px;
  }
  .modaal-container .teacherAbout .framePinkLong{
    font-size: 100%;
  }
  .title {
    padding: 0.5em 2em 0.5em 0.5em;
  }
  .title span {
    font-size: 120%;
    margin-right: 6px;
    vertical-align: baseline;
  }
  .title::after, .title::before{
    right: 1em;
    top: 0.75em;
  }
  .content p{
    padding: 12px;
  }
  .content:before {
    padding-top: 12px;
    padding-left: 20px;
  }
  .framePink-Single .stageList {
    padding: 20px;
  }
  .framePink-Single .stageList p {
    margin-bottom: 15px;
  }
  .framePink-Single h3 {
    font-weight: bold;
    margin: 10px auto 15px;
  }
  .framePink-Single .textBox {
    width: 96%;
    margin: 0 auto 20px;
  }
  #appealSection .clm-3 li {
    margin: 0 auto 10px;
  }
  #appealSection .clm-3 .frameYellow div {
    padding: 20px;
    font-size: 90%;
  }
  #appealSection .clm-3 .frameYellow div img {
    width: auto;
    height: 64px;
  }
  #appealSection .clm-3 .frameYellow .caption {
    margin: 15px auto 5px;
  }
  #appealSection .clm-3 .frameYellow .caption dt {
    margin-bottom: 15px;
  }
  #formBarSection > div {
    padding: 8px;
  }
  #formBarSection .Bar_PC {
    display: none;
  }
  #recruitSection .framePink-Single th {
    display: block;
    margin-bottom: 10px;
  }
  footer {
    padding: 15px 8px 130px;
  }
  footer ul {
    justify-content: space-between;
    margin-bottom: 14px;
  }
  footer ul li {
      margin: 0 3px;
      font-size: 70%;
  }
}