@charset "utf-8";

/* Modern CSS Reset
Version: 1.0.0
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-size: 100%;
}

ul[class],
ol[class] {
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  font-size: 1em;
}

article,
aside,
footer,
header,
nav,
section,
main {
  display: block;
}

ul[class],
ol[class] {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img {
  max-width: 100%;
}

article > * + * {
  margin-top: 1em;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* common
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
:root {
    --color-base: #004f8e;
    --color-main: #0db8c9;
    --color-notice: #f1726a;
    --color-link: #0db8c9;
    --color-subtitle: #fbc400;
    --color-title: #2d444a;
    --color-text: #51737d;
    --color-info: #ff8b47;
    --color-info_date: #ffd88f;

    --color-sv_single: #00a0e9;
    --color-sv_single_shadow: rgba(0, 89, 152, .1);
    --color-sv_mass: #9ec640;
    --color-sv_mass_shadow: rgba(0, 116, 22, .1);
    --color-sv_english: #f05613;
    --color-sv_english_shadow: rgba(205, 62, 0, .1);

    --color-elem: #f39800;
    --color-j_high: #7a4099;
    --color-high: #4fc0f3;
    --color-akamon: #a40000;

    --color-junior: #E5C900;
}

body {
    /* font-weight: light:300, regular:400, medium:500, bold:700 */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    position: relative;
}

span {
    font-size: 100%;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

.bold_p {
    padding: 0 2px;
    font-weight: 700;
}

.bold {
    font-weight: 700;
}

.pc {
    display: none;
}
.sp {
    display: block;
}

.notice {
    position: relative;
    margin-top: .5em;
    padding-left: 1.2em;
    font-size: 80% !important;
    opacity: .9;
    line-height: 1.3 !important;
    text-align: left;
    color: var(--color-notice);
}
.notice:before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-notice);
}


.notice_red {
    position: relative;
    margin-top: .5em;
    padding-left: 1.2em;
    font-size: 80% !important;
    opacity: 1;
    line-height: 1.3 !important;
    text-align: left;
    color: #51737d;
}
.notice_red:before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
    color: #ff0000;
}

.notice_v2 {
    position: relative;
    margin-top: .5em;
    padding-left: 1.2em;
    font-size: 80% !important;
    opacity: .9;
    line-height: 1.3 !important;
    text-align: left;
    color: var(--color-notice);
}
.notice_v2:before {
    content: '◉';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-notice);
}


.rednote {
    color: #ff0000 !important;
}

.tiny {
    font-size: 60% !important;
}
.small {
    font-size: 70%;
}
.medium {
    font-size: 80%;
}
.lesser {
    font-size: 90%;
}

.large {
    font-size: 125%;
}
.greater {
    font-size: 150%;
}
.big {
    font-size: 175%;
}
.huge {
    font-size: 200%;
}

.narrow {
    letter-spacing: 0;
}
.low {
    line-height: 1.15 !important;
}

.kome {
    position: relative;
    margin-top: .5em;
    padding-left: 1.2em;
    line-height: 1.3 !important;
    text-align: left;
}
.kome:before {
    content: '※';
    position: absolute;
    top: 0;
    left: 0;
}

.notice_color {
    color: var(--color-notice);
}
.title_color {
    color: var(--color-title);
}
.option_color {
    color: #1159A3;
}
.elem_color {
    color: var(--color-elem) !important;
}

.list {
    position: relative;
    margin-top: .5em;
    padding-left: 1em;
    line-height: inherit;
}
.list:before {
    content: '・';
    display: inline-block;
    line-height: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

.list2 {
    display: inline-block;
    position: relative;
    margin-top: .5em;
    padding-left: 1.2em;
    line-height: inherit;
    line-height: 1.2;
}
.list2:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 3px solid var(--color-text);
    line-height: inherit;
    position: absolute;
    top: .3em;
    left: 0;
    font-size: .8em;
    opacity: .9;
}

.smooth {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.link_button_wrap {
    width: 100%;
    font-size: 0;
    line-height: 1;
    text-align: center;
    margin: 15px auto;
}
.link_button {
    display: inline-block;
    position: relative;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-link);
    padding: .5em 2em;
    border-radius: 3em;
    border: 2px solid var(--color-link);
    text-decoration: none;
}
.link_button_b {
    display: block;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-link);
    padding: .7em 0;
    border-radius: 3em;
    border: 2px solid var(--color-link);
    text-decoration: none;
}

.op07 {
    opacity: .7;
}
.op08 {
    opacity: .8;
}

.thin {
    font-weight: 400 !important;
}

.line_tight {
    line-height: 1.2 !important;
}


/*
    background: linear-gradient(90deg, transparent 40%, rgba(21, 103, 167, .2) 80%);
    transition: all .4s;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);

    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
    transform: rotate(-1deg) translate3d(0, 0, 0);

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;

    word-break: break-all;

*/


/* base
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#base {
/*
    padding: 80px 0 0;
*/
}
.en #base {
    /*background: url(../images/aickids_home202.jpg) 0 9% no-repeat;*/
    background-size: 100%
}

.inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.section h2 {
    display: block;
    margin: 0 auto;
    padding: 105px 0 0;
    position: relative;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 2px;
    color: var(--color-title);
    text-align: center;
}
.section h2:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 55px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 4px;
    padding-left: 4px;
}

.content_base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.content_base .text_wrap,
.content_base .illust_wrap {
    width: 100%;
}

.content_base .text_wrap {
    margin: 0 auto;
    padding: 4em 0 2em;
    width: 100%;
}
.content_base .text_box {
    margin: 0 auto;
    padding: 3em 0 0;
    width: 76%;
}
.content_base .text_box > p {
    line-height: 2;
    letter-spacing: .175em;
}
.content_base .text_box > ul li {
    line-height: 1.5;
    letter-spacing: .175em;
    margin-bottom: 1em;
}
.content_base .illust_wrap {
    margin: 0 auto;
    padding: 0;
    width: 100%;
}



/* main_header
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#main_header {
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    transition: all .4s;
    z-index: 999;
    background: linear-gradient(rgba(255,255,255,1) 10%, rgba(255,255,255,.5) 70%, rgba(255,255,255,0) 100%);
}

#main_header .inner {
    padding: 15px 10px 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#main_header .item {
    display: block;
}
#main_header .logo_box {
    flex-grow: 1;
}

#main_logo {
    display: block;
    height: 40px;
}
#main_logo {
    display: block;
    width: 127px;
}
#main_logo > span {
    display: block;
    padding-bottom: 31.74%;
    height: 0;
    background-image: url(../images/logo_online.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#main_header.hide {
  transform: translateY(-80px);
}
#main_header.shadow {
    background-color: rgba(255,255,255,.8);
    box-shadow: 0 7px 16px rgba(0,0,0,.1);
    height: 70px;
}
#main_header.shadow .inner {
    padding: 5px 10px 0;
}

#main_header > .inner > .item.link {
    display: block;
    position: relative;
    white-space: nowrap;
    margin-right: 5px;
    padding: 35px 0 0 0;
    width: 50px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    color: var(--color-base);
    text-align: center;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto 30px;
}
#main_header > .inner > .item.exp { background-image: url(../images/main_ico_doc.svg); }
#main_header > .inner > .item.app { background-image: url(../images/main_ico_app.svg); background-position: 70% 0; }
#main_header > .inner > .item.usr { background-image: url(../images/main_ico_enter.svg); background-position: 30% 0; }



.main_buttons .burger {
    position: relative;
    top: -5px;
    margin: 0;
    z-index: 1000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-base);
}
.main_buttons .burger a {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 16px;
    transition: all .4s;
}
.main_buttons .burger a > span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: var(--color-base);
    transition: all .4s;
}
.main_buttons .burger a > span:nth-of-type(1) {
    top: 0;
}
.main_buttons .burger a > span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}
.main_buttons .burger a > span:nth-of-type(3) {
    bottom: 0;
}

.main_buttons .burger a.active span:nth-of-type(1) {
  -webkit-transform: translateY(6.5px) rotate(-45deg);
  transform: translateY(6.5px) rotate(-45deg);
}
.main_buttons .burger a.active span:nth-of-type(2) {
  opacity: 0;
}
.main_buttons .burger a.active span:nth-of-type(3) {
  -webkit-transform: translateY(-6.5px) rotate(45deg);
  transform: translateY(-6.5px) rotate(45deg);
}

#main_header nav {
    font-size: 15px;
}
.main_menu {
    display: inline-block;
    position: absolute;
    top: 80px;
    left: 100%;
    width: auto;
    height: auto;
    transition: all .3s;
    z-index: -1;
}
ul.main_menu_list {
    display: inline-block;
    padding: .5em 1em .3em 1em;
    background-color: var(--color-base);
    opacity: .95;
}

.main_menu.active {
    transform: translateX(-99%);
}

ul.main_menu_list li.sub01,
ul.main_menu_list li.sub02 {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all .3s;
    padding-left: 2.3em;
    position: relative;
}
ul.main_menu_list li.sub01:before,
ul.main_menu_list li.sub02:before {
    content: '';
    position: absolute;
    top: 1.34em;
    left: 2.5em;
    width: 0;
    height: 0;
    border-top: .25em solid transparent;
    border-bottom: .25em solid transparent;
    border-left: .45em solid rgba(255,255,255,.5);
}


ul.main_menu_list li a {
    display: block;
    line-height: 1;
    padding: 1em 1.5em;
    color: #fff;
    text-decoration: none;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.5);
    min-width: 150px;
    font-weight: 500;
    white-space: nowrap;
}
ul.main_menu_list li:nth-last-of-type(1) a {
    border-bottom: none;
}

/* 20240527 追加 */
.mold {
    width: 100% !important;
    max-width: initial;
    padding: 0 1em;
}
.n_header_box {
    justify-content: space-between !important;
}
.n_header_link_box {
    width: 45vw;
    display: flex;
    align-items: center;
    gap: 3%;
}
.n_header_link_box ul li a {
    font-size: .8rem;
    color: #fff;
    background: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 5px;
    padding: .5em 1em;
    margin: 0;
}
.n_header_link_box ul li a:hover {
    /* color: var(--color-link); */
}
/* .main_header_menu {
    width: 70%;
    min-width: 200px;
    justify-content: start !important;
    gap: 3%;
} */
.n_header_cta_box {
    max-width: 500px !important;
}
.n_cta_button {
    width: 100% !important;
    font-size: .8rem !important;
}
/* 20240529 追加 */
.n_header_logo {
    width: 30%;
    display: flex;
    min-width: 150px;
}
.n_header_logo_img01 {
    max-width: 180px;
    min-width: 150px;
    margin: 0 auto;
}
.n_header_logo_img02 {
    max-width: 80px;
    margin: 0 auto;
}


@media only screen and (max-width: 768px) {
    .mold {
        padding: 0 .5em;
    }
    .n_header_cta_box {
        max-width: 300px !important;
    }
    .n_cta_button {
        font-size: .5rem !important;
    }
    .n_header_link_box {
        width: 40vw;
    }
    .n_header_link_box ul li {
        font-size: .8rem;
    }
    .main_header_menu, .main_header_menu li {
        display: none;
    }
    .n_header_logo {
        width: 100%;
    }
    .n_header_logo_img01 {
        min-width: 130px;
    }
    .n_header_logo_img02 {
        max-width: 60px;
    }
}
/* 20240529 ここまで */






.dialog_wrap {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,1em);
    padding-top: 10px;
    height: 0;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    transition: all .3s;
}
.dialog_wrap.active {
    opacity: 1;
}

.menu_dialog {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    padding: 5px;
    border: 2px solid var(--color-base);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    background-color: rgba(255,255,255,.8);
}
.menu_dialog:before,
.menu_dialog:after {
    position: absolute;
	left: 50%;
	bottom: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	border-width: 10px;
}
.menu_dialog:before {
    border-bottom-color: var(--color-base);
    transform: translate(-50%,0);
}
.menu_dialog:after {
    border-bottom-color: #fff;
    transform: translate(-50%,3px);
}



.menu_dialog a {
    display: block;
    position: relative;
    margin: 3px 0;
    padding: 5px 5px 5px 18px;
    color: var(--color-base);
}
.menu_dialog a:before {
    display: block;
    position: absolute;
    top: 10px;
    left: 7px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--color-main);
    content: '';
}





/* home_mv
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#home_mv {
    position: relative;
}
.v2 #home_mv {
    display: none;
}

/*
.kobetsu.course_detail #home_mv {
    background: linear-gradient( rgba(0, 160, 233, .1) 90%, rgba(228, 188, 45, .1) 92%);
}
.juku.course_detail #home_mv {
    background: linear-gradient( rgba(158, 199, 65, .2) 90%, rgba(228, 188, 45, .1) 92%);
}
.en.course_detail #home_mv {
    background: linear-gradient( rgba(240, 86, 20, .1) 90%, rgba(228, 188, 45, .1) 92%);
}
*/
#home_mv:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/mv001_back.svg);
    background-position: 15% 100%;
    background-repeat: no-repeat;
    background-size: 1080px;
    filter: opacity(20%) saturate(8%)blur(2px);
}
.kobetsu #home_mv:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/mv002_back.svg);
    background-position: 55% 100%;
    background-repeat: no-repeat;
    background-size: 1080px;
    filter: opacity(20%) saturate(8%)blur(3px);
}

.juku #home_mv:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/mv001_back.svg);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 1080px;
    filter: opacity(20%) saturate(8%)blur(3px);
}

.en #home_mv:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/mv003_back.svg);
    background-position: 15% 100%;
    background-repeat: no-repeat;
    background-size: 1080px;
    filter: opacity(20%) saturate(8%)blur(3px);
}

#home_mv .inner {
    max-width: 980px;
    min-height: 700px;
    position: relative;
}
.course_detail #home_mv .inner {
    max-width: 980px;
    min-height: 700px;
    position: relative;
}

.mv_item {
    position: absolute;
    /* overflow: hidden; */
}
.mv_item > h1,
.mv_item > div {
    height: 0;
}

#home_mv .mv_item.n1 {
    max-width: 250px;
    width: 64.5%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 24px;
    background-color: rgba(255,255,255,.6);
}
.kobetsu.course_detail #home_mv .mv_item.n1 {
    max-width: 250px;
    width: 64.5%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0);
    border-radius: 0;
    background-color: rgba(255,255,255,0);
}
/*
.kobetsu.course_detail #home_mv .mv_item.n1 h1 {
    background-image: none;
}
*/
.kobetsu.course_detail #home_mv .mv_item.n1 h1:before {
    content: none;
}
.kobetsu.course_detail #home_mv .mv_item.n1 h1:after {
    content: none;
}

#home_mv .mv_item.n1 h1 {
    padding-bottom: 86.65%;
    background-image: url(../images/back_dot_y_home.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}
#home_mv .mv_item.n1 h1:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/home_wifi_back.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 10%;
    right: 10%;
    transform: rotate(-135deg) translate3d(0, 0, 0);
}
#home_mv .mv_item.n1 h1:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/home_wifi_back.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 10%;
    left: 10%;
    transform: rotate(45deg) translate3d(0, 0, 0);
}

#home_mv .mv_item.n2 {
    max-width: 320px;
    width: 53.38%;
    top: 17%;
    left: 3.14%;
}
#home_mv .mv_item.n2 .mask {
    padding-bottom: 100%;
    background-image: url(../images/home_cloud001c.png);
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

#home_mv .mv_item.n3 {
    max-width: 320px;
    width: 53.38%;
    bottom: 95px;
    right: 3.14%;
}
#home_mv .mv_item.n3 .mask {
    padding-bottom: 100%;
    background-image: url(../images/home_cloud009c.png);
    background-position: 50% 50%;
    background-size: auto 100%;
    background-repeat: no-repeat;
}





.juku.course_detail #home_mv .mv_item.n1 {
    max-width: 250px;
    width: 64.5%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 0;
    background-color: rgba(255,255,255,0);
}

.course_detail #home_mv .mv_item.n0 {
    max-width: 600px;
    width: 96%;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-10%);
    overflow: visible;
}
.course_detail #home_mv .mv_item.n0 .mask {
    padding-bottom: 64.01%;
    background-image: url(../images/home_cloud013.png);
    background-position: 50% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
    overflow: visible;
}
.course_detail #home_mv .mv_item.n0 .mask:before,
.course_detail #home_mv .mv_item.n0 .mask:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    z-index: 1;
}
.course_detail #home_mv .mv_item.n0 .mask:before {
    top: -1.5em;
    left: 50%;
    transform: translateX(-300%) rotate(20deg);
}
.course_detail #home_mv .mv_item.n0 .mask:after {
    top: .5em;
    left: 50%;
    transform: translateX(200%) rotate(-30deg);
}

.course_detail #home_mv .mv_item.n2 {
    max-width: 170px;
    width: 47%;
    top: 80%;
    left: 50%;
    transform: translate(-120%,0);
    filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);
}
.course_detail #home_mv .mv_item.n2 .mask {
    padding-bottom: 100%;
    background-image: url(../images/tutorial2_home.svg);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
.course_detail #home_mv .mv_item.n3 {
    max-width: 170px;
    width: 50%;
    bottom: 0;
    left: 50%;
    transform: translate(35%,0);
    filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);
}
.course_detail #home_mv .mv_item.n3 .mask {
    padding-bottom: 100%;
    background-image: url(../images/tutorial1_home.svg);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}

.course_detail #home_mv .mv_item.n11 {
    max-width: 300px;
    width: 52%;
    bottom: 15%;
    left: -4%;
    /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
}
.course_detail #home_mv .mv_item.n11 .mask {
    padding-bottom: 130%;
    background-image: url(../images/home_cloud002c.png);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
.course_detail #home_mv .mv_item.n12 {
    max-width: 200px;
    width: 40%;
    bottom: 1%;
    right: 7%;
    transform: rotate(20deg);
    /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
}
.course_detail #home_mv .mv_item.n12 .mask {
    padding-bottom: 130%;
    background-image: url(../images/home_cloud005c.png);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
.course_detail #home_mv .mv_item.n13 {
    max-width: 280px;
    width: 60%;
    top: 15%;
    right: 3.14%;
    transform: rotate(-5deg);
    /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
}
.course_detail #home_mv .mv_item.n13 .mask {
    padding-bottom: 100%;
    background-image: url(../images/home_cloud004c.png);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}


.course_detail #home_mv .mv_item.n21 {
    max-width: 260px;
    width: 50%;
    bottom: 10%;
    left: 3.14%;
    transform: rotate(-10deg);
    /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
}
.course_detail #home_mv .mv_item.n21 .mask {
    padding-bottom: 130%;
    /* background-image: url(../images/home_aickids002c.webp);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat; */
    width: 110%;
}
@media screen and (max-width: 768px) {
    .course_detail #home_mv .mv_item.n21 .mask {
        width: 98%;
    }
}
.course_detail #home_mv .mv_item.n22 {
    max-width: 260px;
    width: 50%;
    top: 20%;
    right: 3.14%;
    /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
}
.course_detail #home_mv .mv_item.n22 .mask {
    padding-bottom: 110%;
    background-image: url(../images/home_aickids001c.png?2024);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
/*
.course_detail #home_mv .mv_item.n23 {
    max-width: 260px;
    width: 65%;
    bottom: -5%;
    left: 50%;
    transform: translate(10%,0);
}
.course_detail #home_mv .mv_item.n23 .mask {
    padding-bottom: 100%;
    background-image: url(../images/home_aickids003c.png);
    background-position: 50% 0;
    background-size: 100%;
    background-repeat: no-repeat;
}
*/


#home_mv .mv_item.n1 h1 .lining {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-45%);
    text-align: center;
}
#home_mv .mv_item.n1 h1 .lining > span {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}
#home_mv .mv_item.n1 h1 .lining > span:nth-of-type(1) {
    font-size: 18px;
    letter-spacing: 3px;
    margin: 0 0 10px 5px;
    color: var(--color-main);
}
#home_mv .mv_item.n1 h1 .lining > span:nth-of-type(2) {
    font-size: 24px;
    letter-spacing: 1px;
    margin: 0 0 10px 2px;
    color: var(--color-title);
}
#home_mv .mv_item.n1 h1 .lining > span:nth-of-type(3) {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-notice);
}

/* home_mv2
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#home_mv2 {
    width: 100%;
    position: relative;
    min-height: 300px;
    height: 50vh;
    overflow: hidden;
}
#home_mv2 .inner {
    max-width: initial;
    width: calc(100% + 50vh / 1.73);
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
}
.mv2 {
    position: relative;
    transform: skewX(-30deg);
    overflow: hidden;
    filter: contrast(130%);
}
.mv2.left {
    width: 55%;
}
.mv2.right {
    width: 45%;
}
.mv2:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.mv2.left:before {
    transform: skewX(30deg);
    transform-origin: right top;
    background: url(../images/home_cloud001.jpg) 50% 50% no-repeat;
    background-size: cover;
}
.mv2.right:before {
    transform: skewX(30deg);
    transform-origin: left bottom;
    background: url(../images/home_cloud009a.jpg) 0 100% no-repeat;
    background-size: cover;
}
.mv2:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    filter: brightness(50%);
}
.mv2.left:after {
    background-color: rgba(13, 184, 200, .3);
}
.mv2.right:after {
    background-color: rgba(189, 240, 79, .3);
}

#home_mv2 .mv_item.n1 {
    max-width: 200px;
    width: 55%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-30%);
    border-radius: 16px;
    border: 3px solid #fff;
    background-color: rgba(0,0,0,.2);
}

#home_mv2 .mv_item.n1 h1 {
    padding-bottom: 86.65%;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

#home_mv2 .mv_item.n1 h1 .lining > span {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 500;
}
.spn1,
.spn3 {
    padding-top: 10px;
    letter-spacing: 3px;
    /*
    text-shadow:
        2px  2px 5px rgba(0,0,0,.35),
        -2px  2px 5px rgba(0,0,0,.35),
        2px -2px 5px rgba(0,0,0,.35),
        -2px -2px 5px rgba(0,0,0,.35),
        2px  0px 5px rgba(0,0,0,.35),
        0px  2px 5px rgba(0,0,0,.35),
        -2px  0px 5px rgba(0,0,0,.35),
        0px -2px 5px rgba(0,0,0,.35);*/
}
.spn3 {
    padding-top: 0;
    letter-spacing: 0;
}
#home_mv2 .mv_item.n1 h1 .lining span.oshulogo img {
    margin: 3px 0 5px;
    width: 60%;
    filter:
        drop-shadow(1px 1px 0 rgba(255,255,255,.4))
        drop-shadow(-1px -1px 0 rgba(255,255,255,.4))
        drop-shadow(1px -1px 0 rgba(255,255,255,.4))
        drop-shadow(-1px 1px 0 rgba(255,255,255,.4));
}

#choice_area {
    position: relative;
    margin-bottom: 3em;
}
#choice_area .inner {
    padding: 2em 0;
    text-align: center;
}
#choice_area .choice_box {
    display: inline-block;
}
#choice_area .choice_box > span {
    display: block;
}
#choice_area .choice_box > span .k {
    color: var(--color-sv_single);
}
#choice_area .choice_box > span .s {
    color: var(--color-sv_mass);
}


.choice_button_box {
    padding-top: 2em;
    display: flex;
    justify-content: center;
    align-content: center;
}
.choice_button_part {
    width: 48%;
    text-align: center;
}

#choice_area .choice_button {
    display: inline-block;
    width: 90%;
    padding: 1em;
    border-radius: 8px;
    color: #fff;
}

.left > .choice_button {
    background-color: var(--color-sv_single);
}
.right > .choice_button {
    background-color: var(--color-sv_mass);
}

#choice_area .n1 {
    margin-bottom: 2px;
    font-size: 1.5em;
    line-height: 1;
    font-weight: 700;
}
#choice_area .n1 .tiny {
    display: block;
    font-size: .5em;
}


#choice_area .arrow_box {
    display: inline-block;
    padding: 1em 1em .1em 0;
}
#choice_area .arrow_box .arrow {
    display: inline-block;
    position: relative;
    width: 1.75em;
    height: 1em;
    background-color: #fff;
}
#choice_area .arrow_box .arrow:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border-top: 1em solid rgba(255,255,255,0);
    border-bottom: 1em solid rgba(255,255,255,0);
    border-left: 1em solid rgba(255,255,255,1);
}

.choice_button_box .n2,
.choice_button_box .n3 {
    display: block;
    margin: 5px 0 0;
    font-size: .85em;
    line-height: 1;
    font-weight: 700;
}


.choice_button_box .left {
    color: var(--color-sv_single);
}
.choice_button_box .right {
    color: var(--color-sv_mass);
}


#choice_area .left .arrow_box {
    animation: stretcher11 400ms ease 50ms infinite alternate;
}
#choice_area .right .arrow_box {
    animation: stretcher12 410ms ease 150ms infinite alternate;
}

@keyframes stretcher11 {
  0% { transform: translateX(7%); }
  100% { transform: translateX(0); }
}
@keyframes stretcher12 {
  0% { transform: translateX(7%); }
  100% { transform: translateX(0); }
}



/* intro
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#intro {
    display: none;
}
.course_detail #intro {
    position: relative;
    padding: 0 0 3em;
    /*background-color: #f5f5ee;*/
}
.kobetsu .course_detail #intro {
    position: relative;
    padding: 0 0 3em;
    margin-top: -10em;
    /*background-color: #f5f5ee;*/
}
/*
#intro:before {
    content: '';
    position: absolute;
    top: -10em;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/wave_sub_back.svg) 0 0 no-repeat;
    background-size: 400%;
}
*/
#intro .inner {
    width: 96%;
}

#intro h2 {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 180px;
    width: 35vw;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}
#intro h2:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background-image: url(../images/cloud_mask_main.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(0,-30%) rotate(-130deg);
}

.course_detail #intro h1 {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 180px;
    width: 35vw;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}
.course_detail #intro h1:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background-color: rgba(255,255,255,.8);
}
.course_detail #intro h2:before {
    content: none;
}
.course_detail #intro h2 {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0,0);
    max-width: initial;
    width: 100%;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}

.course_detail #intro h2 span:nth-of-type(1) {
    display: block;
    font-size: 14px;
    letter-spacing: .1em;
    color: var(--color-notice);
}
.course_detail #intro h2 span:nth-of-type(2) {
    padding-top: .5em;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .15em;
    color: var(--color-title);
}


#intro h2 > span {
    position: relative;
}

#intro .cloud_item_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 500px;
}
#intro .cloud_item {
    width: 100%;
    height: 220px;
    font-size: 0;
    text-align: center;
}

#intro .cloud_item_inner {
    display: inline-block;
    position: relative;
    height: 100%;
    width: 220px;
    padding: 20px;
    border-radius: 20px;
    background-color: rgba(0, 160, 233, .1);
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
}

#intro .cloud_item_inner:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 30px;
    height: 30px;;
    background: url(../images/home_info_arrow.svg) 50% 50% no-repeat;
    background-size: contain;
    opacity: .3;
}


#intro .single .cloud_item_inner {
    left: 0;
}
#intro .mass .cloud_item_inner {
    top: 15%;
    right: 0;
    background-color: rgba(158, 198, 64, .2);
}

#intro .cloud_item.mass {
}
#intro .cloud_item.english {
}

#intro .cloud_item .mask {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#intro .cloud_item.single .mask {
}
#intro .cloud_item.mass .mask {
}
#intro .cloud_item.english .mask {
}
#intro .cloud_item .mask:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: url(../images/cloud_kobez_back.svg);*/
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro .cloud_item.mass .mask:before {
    /*background-image: url(../images/cloud_juku_back.svg);*/
    transform: rotate(180deg) translate3d(0, 0, 0);
}
#intro .cloud_item.english .mask:before {
    /*background-image: url(../images/cloud_en_back.svg);*/
    transform: rotate(-100deg) translate3d(0, 0, 0);
}
#intro .cloud_item .mask:after {
    content: '';
    position: absolute;
    top: 0;
    left: 85%;
    width: 80px;
    height: 80px;
    background-image: url(../images/video-tutorials.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro .cloud_item.mass .mask:after {
    top: auto;
    bottom: 20%;
    left: -55%;
    background-image: url(../images/elearning.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro .cloud_item.english .mask:after {
    content: '';
    position: absolute;
    top: auto;
    bottom: 27%;
    left: 85%;
    background-image: url(../images/desktop.svg);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
#intro .cloud_item .mask > .lining {
    text-align: center;
}

#intro .cloud_item .mask .lining h3 {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#intro .cloud_item.single .mask .lining h3 {
    color: var(--color-sv_single);
    opacity: 70%;
}
#intro .cloud_item.mass .mask .lining h3 {
    color: var(--color-sv_mass);
    opacity: 90%;
}
#intro .cloud_item.english .mask .lining h3 {
    color: var(--color-sv_english);
    opacity: 70%;
}
#intro .cloud_item .mask .lining .text {
    display: inline-block;
    position: relative;
    font-size: 13px;
    line-height: 1.4;
    margin-top: 20px;
    text-align: left;
    color: var(--color-title);
    white-space: nowrap;
}
#intro .cloud_item .mask .lining .text p {
    position: relative;
}
#intro .cloud_item.english .mask .lining .text {
    position: absolute;
    top: 75%;
    left: 115%;
}





/* service
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
.service,
a.service {
    display: inline-block;
}
.service .lining {
    display: inline-block;
    position: relative;
}
.service .lining > div {
    font-size: 14px;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    text-align: center;
}
.service .lining .bun {
    display: block;
    width: 7.5em;
    position: relative;
    margin: 0 auto;
}
.service .lining .bun:nth-of-type(1) {
    padding-right: 1.2em;
}
.service .lining .bun:nth-of-type(3) {
    padding-left: 1.2em;
}

.service .lining .bun > span {
    display: block;
    width: 100%;
    height: 1.4em;
}
.service .lining .bun > span:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 1.1em solid transparent;
    border-left: 1.1em solid transparent;
}
.service .lining .bun:nth-of-type(1) > span:before {
    bottom: 0;
    right: 0;
    border-bottom: 1.1em solid transparent;
    border-top-style: solid;
    border-top-width: 1.1em;
    transform: rotate(45deg) skew(calc((90deg - 70deg) / 2), calc((90deg - 70deg) / 2)) translate(45%,-25%);
    transform-origin: left top;
}
.service .lining .bun:nth-of-type(3) > span:before {
    top: 0;
    left: 0;
    border-top: 1.1em solid transparent;
    border-bottom-style: solid;
    border-bottom-width: 1.1em;
    transform: rotate(45deg) skew(calc((90deg - 70deg) / 2), calc((90deg - 70deg) / 2)) translate(-45%,25%);
    transform-origin: right bottom;
}

.service .lining .patty {
    padding: 4px 0;
}

.single .service .lining .bun > span { background-color: var(--color-sv_single); }
.single .service .lining .bun:nth-of-type(1) > span:before { border-top-color: var(--color-sv_single); }
.single .service .lining .bun:nth-of-type(3) > span:before { border-bottom-color: var(--color-sv_single); }
.single .service .lining .patty { color: var(--color-sv_single); }

.mass .service .lining .bun > span { background-color: var(--color-sv_mass); }
.mass .service .lining .bun:nth-of-type(1) > span:before { border-top-color: var(--color-sv_mass); }
.mass .service .lining .bun:nth-of-type(3) > span:before { border-bottom-color: var(--color-sv_mass); }
.mass .service .lining .patty { color: var(--color-sv_mass); }

.english .service .lining .bun > span { background-color: var(--color-sv_english); }
.english .service .lining .bun:nth-of-type(1) > span:before { border-top-color: var(--color-sv_english); }
.english .service .lining .bun:nth-of-type(3) > span:before { border-bottom-color: var(--color-sv_english); }
.english .service .lining .patty { color: var(--color-sv_english); }

.service .lining .bun > span > span {
    display: inline-block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
}



/* info
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/*
#info:before {
    content: '';
    position: absolute;
    top: 20em;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/wave_main_back_f.svg) 0 0 no-repeat;
    background-size: 400% 9%;
    top: 7.5%;
    opacity: .7;
    z-index: -1;
    filter: opacity(100%) saturate(20%) hue-rotate(90deg);
}
*/
#info.section .inner {
    margin: 0 auto;
    overflow: hidden;
}
.juku #info.section .inner,
.kobetsu #info.section .inner {
    padding-top: 10em;
}
#info.section h2:before {
    content: 'Information';
    color: var(--color-base);
    opacity: .10;
    font-size: 42px;
}

#info.section .base_box {
    position: relative;
    margin: 1em auto 0;
    max-width: 600px;
    width: 92%;
    padding: 0 1em 1em;
    overflow: hidden;
    transition: all .3s;
}

#info.section .base_box article {
    margin: .75em 0 0;
    padding: 0 1.2em;
    border-bottom: 2px solid rgba(45, 68, 74, .07);
}
#info.section .base_box article .date {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-info_date);
}
#info.section .base_box article h3 {
    margin: 0;
}
#info.section .base_box article h3 a {
    display: block;
    margin: 0;
    padding: .4em 2em .8em 0;
    font-size: 13px;
    letter-spacing: .1em;
    line-height: 1.3;
    color: var(--color-title);
    background: url(../images/home_info_arrow.svg) 100% 50% no-repeat;
    background-size: 15px;
}

.def_box {
    position: relative;
    padding: 0;
    background-color: #fff;
    z-index: 10;
    overflow: hidden;
}
.hide_box {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    padding: 0 1em;
    width: 100%;
    transition: all .3s;
}
.hide_box_lining {
    transition: all .3s;
    opacity: 0;
    overflow: hidden;
}

#info_more_button.link_button {
    font-size: 12px;
    border: 2px solid rgba(13, 184, 201, .5);
}
#info_more_button span {
    font-size: .5em;
}



/* summary
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#summary.section .inner {
    margin: 5em auto 0;
    max-width: initial;
}
.course_detail #summary.section .inner {
    margin: 11em auto 0;
    max-width: initial;
}
.kobetsu.course_detail #summary.section .inner {
    margin: -3em auto 0;
    max-width: initial;
}
.juku.course_detail #summary.section .inner {
    margin: 0 auto;
    max-width: initial;
}
#summary.section h2:before {
    content: 'Introduction';
    color: var(--color-base);
    opacity: .1;
    letter-spacing: 2px;
    font-size: 42px;
}
#summary.section h2 img {
    height: 40px;
    vertical-align: middle;
    margin-right: 10px;
}

#summary .illust_box {
    position: relative;
    width: 100%;
}
#summary .content_wrap {
    position: relative;
}
#summary .content_wrap:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 20px;
    left: 0;
    padding-bottom: 20%;
    width: 100%;
    height: 0;
    background-color: #e6eaf0;
}
.course_detail #summary .content_wrap:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -2em;
    left: 0;
    padding-bottom: 20%;
    width: 100%;
    height: 0;
    background-color: #e6eaf0;
}
#summary .content_base {
    margin: 0 auto;
    align-items: flex-end;
    max-width: 1080px;
}
#summary .text_wrap {
    position: relative;
}
#summary .illust_box .illust {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.7%;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 100%;
}
.course_detail #summary .illust_box .illust {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 48.37%;
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: 90%;
}
.content_base .text_box > ul,
.content_base .text_box > p {
    color: var(--color-title);
}


/* local menu
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#localmenu.section {
    overflow: hidden;
    background: url(../images/wave_main_back.svg) 50% 13em no-repeat;
    background-size: 300%;
}
#localmenu_bottom.section {
    overflow: hidden;
    background: url(../images/wave_main_back.svg) 50% 100% no-repeat;
    background-size: 300%;
    padding-bottom: 8em;
}

#localmenu.section .inner {
    margin: 5em auto 0;
    padding-top: 5em;
    max-width: initial;
}
.juku #localmenu.section h2:before {
    content: 'Courses';
    color: var(--color-base);
    opacity: .25;
}


.localmenu_box {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 3em 0 0;
    text-align: center;
}

.localmenu_box a {
    display: inline-block;
    margin: 0 .3em;
    padding: .4em 1.5em;
    border-radius: 3em;
    vertical-align: top;
    font-size: 15px;
    color: #fff;
}
.localmenu_box a.course_junior {
    background-color: var(--color-junior);
}
.localmenu_box a.course_high {
    background-color: var(--color-sv_mass);
}

.localmenu_box a > span.small {
    display: inline-block;
    padding-left: .7em;
    vertical-align: middle;
    line-height: 1;
}

.juku #features.section.high h2,
.juku #features.section.course_junior h2,
.juku #course_junior.section h2,
.juku #course_high.section h2 {
    padding-top: 58px;
}


.course_junior .n21 .package_box {
    margin: -4em 0 1em;
}

.juku #course_junior.section .inner {
    margin: 7em auto 0;
    padding-top: 5em;
    max-width: initial;
}
.juku #course_junior.section {
    overflow: hidden;
    background: url(../images/wave_ye_back.svg) 50% 14em no-repeat;
    background-size: 300%;
}
.juku #course_junior_bottom.section {
    overflow: hidden;
    background: url(../images/wave_ye_back.svg) 50% 100% no-repeat;
    background-size: 300%;
    padding-bottom: 6em;
}

.juku #features.section.course_junior h2:before,
.juku #course_junior.section h2:before {
    content: '小･中学生';
    color: var(--color-junior);
    opacity: .5;
    font-size: 40px;
    white-space: nowrap;
}

.juku #course_junior .service_box.single {
    padding: 2em 0 0;
    background: #FBF7E0;
}
.juku #course_junior .single .course_box {
    box-shadow: 0 6px 12px rgba(183, 160, 19, .15);
}

.juku #features.section.course_junior .inner {
    margin: 9em auto 0;
    max-width: initial;
    background: url(../images/wave_ye_back.svg) 50% 3% no-repeat;
    background-size: 300%;
}
.juku #features.section.course_junior {
    background: url(../images/wave_ye_back.svg) 50% 47% no-repeat;
    background-size: 300%;
}
.juku .course_junior .features_box.mass {
    background: url(../images/wave_ye_back.svg) 50% 100% no-repeat;
    background-size: 300%;
}

.juku #features.section.course_junior h2.summary:before {
    content: 'Summary';
    color: var(--color-junior);
    opacity: .5;
}
.juku .course_junior .device_desc h3 {
    color: var(--color-junior);
}


.juku #course_high.section {
    margin-top: 12em;
}

.juku #features.section.high h2:before,
.juku #course_high.section h2:before {
    content: '高校生';
    color: var(--color-sv_mass);
    font-size: 45px;
    opacity: .45;
}

.course_high_detail01 {
    margin: .5em 0 0;
    font-size: .9em;
    line-height: 1.75;
    letter-spacing: 0;
    opacity: .8;
}

.juku #course_high .service_box.single {
    padding: 0;
    background: linear-gradient(rgba(239, 250, 255, 0) 10%, #EEF5DF 50%);
}

.juku #course_high.section {
    margin: 11em auto 0;
    max-width: initial;
    background: url(../images/wave_gr_back.svg) 50% 4em no-repeat;
    background-size: 300%;
}
.juku #course_high_bottom.section {
    overflow: hidden;
    background: url(../images/wave_gr_back.svg) 50% 100% no-repeat;
    background-size: 300%;
    padding-bottom: 6em;
}


.juku #features.section.high .inner {
    margin: 9em auto 0;
    max-width: initial;
    background: url(../images/wave_gr_back.svg) 50% 4% no-repeat;
    background-size: 300%;
}
.juku #features.section.high {
    background: url(../images/wave_gr_back.svg) 50% 66% no-repeat;
    background-size: 300% ;
}
.juku #features.section.high .features_box.mass {
    background: none;
}

.juku #features.section.high h2.summary {
    margin-top: 15em;
}
.juku #features.section.high h2.summary:before {
    content: 'Summary';
    color: var(--color-sv_mass);
    font-size: 45px;
    opacity: .45;
}


.summary.v2 table caption {
    text-align: center;
    position: relative;
}
.summary.v2 table caption .captionotice {
    display: inline-block;
    position: absolute;
    right: .5em;
    bottom: .3em;
    font-size: 11px;
    color: var(--color-notice);
    line-height: 1;
    letter-spacing: 0;
    opacity: .8 !important;
}

.juku .summary.juku_junior.v2 table.overview tr td {
    text-align: center;
}
.juku .summary.juku_junior.v2 table.overview tr td.left {
    text-align: left;
}
.juku .summary.juku_junior.v2 table.overview tr td.right {
    text-align: right;
}








/* course
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#course.section .inner {
    margin: 5em auto 0;
    max-width: initial;
}
.course_detail #course.section .inner {
    margin: 5em auto 0;
    padding-top: 5em;
    max-width: initial;
}
#oshu.section h2:before,
#course.section h2:before {
    content: 'Courses';
    color: var(--color-main);
    opacity: .15;
}
.juku #course.section h2:before,
#course.section h2.no_back:before {
    content: 'Courses';
    color: var(--color-sv_mass);
    opacity: .25;
}
#course.section h2.no_back {
    margin-top: 4em;
}

.course_detail #oshu.section h2:before {
    content: '無料体験';
    color: var(--color-main);
    opacity: .15;
    font-size: 50px;
    white-space: nowrap;
}

.course_detail #oshu.section h2:before {
    content: '無料体験';
    color: var(--color-main);
    opacity: .9;
    font-size: 50px;
    white-space: nowrap;
}




.service_box {
    padding-bottom: 4em;
}
.course_detail .service_box {
    padding: 2em 0 4em;
}
.course_detail #oshu .service_box {
    padding: 2em 0 6em;
}
.service_box.single {
    background: linear-gradient(rgba(239, 250, 255, 0) 10%, rgba(239, 250, 255, 1) 50%);
}
.kobetsu #course .service_box.single {
    background: linear-gradient(rgba(232, 246, 252, 0) 10%, rgba(232, 246, 252, 1) 30%);
}
.service_box.english {
    background: linear-gradient(rgba(253, 238, 231, 0) 10%, rgba(253, 238, 231, 1) 50%);
    padding-top: 4em;
}
.service_box.mass {
    background: linear-gradient(rgba(244, 250, 230, 0) 10%, rgba(244, 250, 230, 1) 50%);
}
.juku #course .service_box.single {
    background: linear-gradient(rgba(238, 245, 223, 0) 10%, rgba(238, 245, 223, 1) 30%);
}

.service_box .content_base {
    margin: 0 auto;
    align-items: flex-start;
    max-width: 980px;
}

.service_box.english .content_base {
    justify-content: center;
}

.service_title {
    padding-top: 2em;
    text-align: center;
}
.service_title > .lining {
    display: inline-block;
    padding: 4em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
.service_title > .lining h3 {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1em;
    opacity: .7;
}
.service_title.single > .lining h3  { color: var(--color-sv_single); }
.service_title.mass > .lining h3    { color: var(--color-sv_mass); }
.service_title.english > .lining h3 { color: var(--color-sv_english); }
.service_title > .lining .text {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1.5em;
    color: var(--color-title);
}

#course .illust_box {
    margin-top: -20px;
    height: 170px;
    position: relative;
}
#course .illust_box .illust.i1 {
    width: 44.2%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-95%,-10%);
    overflow: hidden;
}
#course .illust_box .illust > span {
    display: inline-block;
    height: 0;
    width: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
}
#course .single .illust_box .illust > span {
    filter: drop-shadow(0 6px 12px rgba(0, 89, 152, .5) );
}
#course .mass .illust_box .illust > span {
    filter: drop-shadow(0 6px 12px rgba(0, 116, 22, .5));
}
#course .english .illust_box .illust > span {
    filter: drop-shadow(0 6px 12px rgba(205, 62, 0, .5));
}
#course .illust_box .illust > span {
    padding-bottom: 181.38%;
}
#course .illust_box .illust.i2 {
    width: 44.2%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(10%,0);
    overflow: hidden;
}
#course .illust_box .illust.i2 > span {
    padding-bottom: 174.6%;
}


#course .mass .illust_box .illust {
    position: absolute;
    overflow: hidden;
}
#course .mass .illust_box .illust > span {
    display: inline-block;
    height: 0;
    width: 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
}

#course .mass .illust_box .illust.i1 {
    width: 30%;
    top: 4%;
    left: 50%;
    transform: translate(-140%,0);
}
#course .mass .illust_box .illust.i1 > span {
    padding-bottom: 100%;
}
#course .mass .illust_box .illust.i2 {
    width: 40%;
    top: 0;
    left: 50%;
    transform: translate(0,0);
}
#course .mass .illust_box .illust.i2 > span {
    padding-bottom: 100%;
}
#course .mass .illust_box .illust.i3 {
    width: 27%;
    top: 57%;
    left: 50%;
    transform: translate(-160%,0);
}
#course .mass .illust_box .illust.i3 > span {
    padding-bottom: 100%;
}
#course .mass .illust_box .illust.i4 {
    width: 30%;
    top: 77%;
    left: 50%;
    transform: translate(-50%,0);
}
#course .mass .illust_box .illust.i4 > span {
    padding-bottom: 100%;
}
#course .mass .illust_box .illust.i5 {
    width: 28%;
    top: 72%;
    left: 50%;
    transform: translate(68%,0);
}
#course .mass .illust_box .illust.i5 > span {
    padding-bottom: 100%;
}



.service_box .course_wrap h4,
.service_box .text_wrap h4 {
    font-size: 20px;
    text-align: center;
    padding-bottom: .6em;
}
.service_box.single .course_wrap h4,
.service_box.single .text_wrap h4 {
    color: var(--color-sv_single);
}
.service_box.mass .course_wrap h4,
.service_box.mass .text_wrap h4 {
    color: var(--color-sv_mass);
}
.service_box.english .course_wrap h4,
.service_box.english .text_wrap h4 {
    color: var(--color-sv_english);
}


.service_box .content_base .text_wrap {
    padding: 0 0 2em;
}
.mass.service_box .content_base .text_wrap {
    padding: 3em 0 2em;
}

.service_box .content_base .text_box {
    margin: 0 auto;
    padding: 3em 1em 0;
    width: 90%;
}
.service_box .content_base .text_box > ul li {
    font-size: 13px;
}

.course_box_wrap {
    width: 100%;
    margin: .7em 0 .7em 0;
    padding: 1em 0 0;
}

.course_title {
    width: 100%;
}

.course_box {
    display: block;
    width: 96%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    padding: 1.2em;
    overflow: hidden;
    background-size: auto 90%;
    background-repeat: no-repeat;
}
.mass .junior .course_box,
.elem .course_box,
.high .course_box {
    background-position: 90% 50%;
}
.mass .high .course_box,
.single .high .course_box {
    background-size: 140px;
}
.mass .junior .course_box {
    background-position: 95% 10%;
    background-size: auto 50%;
}
.mass .high .course_box {
    background-position: 95% 10%;
}
.mass .elem .course_box,
.en .course_box,
.junior .course_box,
.akamon .course_box {
    background-position: 5% 50%;
}

.course_detail .course_box {
    display: block;
    width: 96%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    padding: 1.2em;
    overflow: hidden;
    background-size: auto 145px;
    background-repeat: no-repeat;
}
.course_detail .mass .junior .course_box {
    background-position: 95% .7em;
}
.course_detail .mass .junior .course_box,
.course_detail .elem .course_box,
.course_detail .high .course_box {
    background-position: 95% .7em;
}
.course_detail .mass .elem .course_box,
.course_detail .en .course_box,
.course_detail .junior .course_box,
.course_detail .akamon .course_box {
    background-position: .7em .7em;
}

.course_detail .detail_wrap {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.course_detail .detail_box > h6 {
    margin: 1.6em 0 .9em;
    font-size: 14px;
    line-height: 1;
    position: relative;
    padding-left: .7em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.course_detail .detail_box > h6:before {
    content: '';
    display: block;
    height: 1.5em;
    width: 3px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.course_detail .elem .detail_box > h6 { color: var(--color-elem); }
.course_detail .elem .detail_box > h6:before { background-color: var(--color-elem); }
.course_detail .junior .detail_box > h6 { color: var(--color-j_high); }
.course_detail .junior .detail_box > h6:before { background-color: var(--color-j_high); }
.course_detail .high .detail_box > h6 { color: var(--color-high); }
.course_detail .high .detail_box > h6:before { background-color: var(--color-high); }
.course_detail .akamon .detail_box > h6 { color: var(--color-akamon); }
.course_detail .akamon .detail_box > h6:before { background-color: var(--color-akamon); }

.course_detail .detail_box > .text {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 2px;
}

.course_detail .detail_box > .link_button_wrap {
    margin: 2em 0 1.5em;
    font-size: 15px;
}


.mass .elem .course_box {
    background-position: 5% 10%;
    background-size: auto 60%;
}
.single .course_box {
    box-shadow: 0 6px 12px var(--color-sv_single_shadow);
}
.mass .course_box {
    box-shadow: 0 6px 12px var(--color-sv_mass_shadow);
}
.juku #course .single .course_box {
    box-shadow: 0 6px 12px var(--color-sv_mass_shadow);
}
.english .course_box {
    box-shadow: 0 6px 12px var(--color-sv_english_shadow);
}

.course_contents {
    text-align: left;
}
.elem .course_contents,
.high .course_contents {
    width: 75%;
    margin-right: auto;
}
.en .course_contents,
.junior .course_contents,
.akamon .course_contents {
    width: 70%;
    margin-left: auto;
}

.course_detail .elem .course_contents,
.course_detail .high .course_contents {
    width: 80%;
    margin-right: auto;
}
.course_detail .en .course_contents,
.course_detail .junior .course_contents,
.course_detail .akamon .course_contents {
    width: 70%;
    margin-left: auto;
}


.mass .junior .course_contents {
    width: 75%;
    margin-right: auto;
    margin-left: 0;
}
.mass .elem .course_contents {
    width: 70%;
    margin-right: 0;
    margin-left: auto;
}
.mass .high .course_contents {
    width: 80%;
    margin-right: auto;
}


.course_contents .school_year {
    display: inline-block;
    padding: .15em 2.5em;
    margin-bottom: .3em;
    font-size: 12px;
    line-height: 1;
    color: #fff;
}
.elem .course_contents .school_year { background-color: var(--color-elem); }
.junior .course_contents .school_year { background-color: var(--color-j_high); }
.high .course_contents .school_year { background-color: var(--color-high); }
.akamon .course_contents .school_year { background-color: var(--color-akamon); }
.en .course_contents .school_year { background-color: var(--color-sv_english); }

.course_contents h5 {
    display: block;
    margin: 0 0 .8em;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 2px;
    text-shadow:
        2px  2px 1px #fff,
        -2px  2px 1px #fff,
        2px -2px 1px #fff,
        -2px -2px 1px #fff,
        2px  0px 1px #fff,
        0px  2px 1px #fff,
        -2px  0px 1px #fff,
        0px -2px 1px #fff;
}
.course_box .rev {
    display: inline-block;
    padding: 0 2px;
    margin: 0 1px;
    color: rgba(255,255,255,1);
    text-shadow: none;
}
.elem .course_contents h5 { color: var(--color-elem); }
.junior .course_contents h5 { color: var(--color-j_high); }
.high .course_contents h5 { color: var(--color-high); }
.akamon .course_contents h5 { color: var(--color-akamon); }
.en .course_contents h5 { color: var(--color-sv_english); }
.elem .course_box .rev { background-color: var(--color-elem); }
.junior .course_box .rev { background-color: var(--color-j_high); }
.high .course_box .rev { background-color: var(--color-high); }
.akamon .course_box .rev { background-color: var(--color-akamon); }
.en .course_box .rev { background-color: var(--color-sv_english); }

.course_contents .course_text {
    display: inline-block;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 2px;
    color: var(--color-title);
    text-shadow:
        2px  2px 1px #fff,
        -2px  2px 1px #fff,
        2px -2px 1px #fff,
        -2px -2px 1px #fff,
        2px  0px 1px #fff,
        0px  2px 1px #fff,
        -2px  0px 1px #fff,
        0px -2px 1px #fff;
}

.course_detail .course_contents .course_text {
    display: inline-block;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 2px;
    color: var(--color-title);
    text-shadow:
        2px  2px 1px #fff,
        -2px  2px 1px #fff,
        2px -2px 1px #fff,
        -2px -2px 1px #fff,
        2px  0px 1px #fff,
        0px  2px 1px #fff,
        -2px  0px 1px #fff,
        0px -2px 1px #fff;
}

.course_box .more_ear {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    padding: .7em .3em 0 0;
    text-align: right;
    font-size: 12px;
    line-height: 1.3;
    color: #fff;
}
.single .course_box .more_ear {
    background: linear-gradient(45deg, rgba(0, 160, 233, 0) 50%, rgba(0, 160, 233, .5) 50%);
}
.en .course_box .more_ear {
    background: linear-gradient(45deg, rgba(0, 160, 233, 0) 50%, rgba(240, 86, 19, .5) 50%);
}
.mass .course_box .more_ear {
    background: linear-gradient(45deg, rgba(158, 198, 64, 0) 50%, rgba(158, 198, 64, .7) 50%);
}


.en_logo_box {
    display: block;
}
.en_logo_box > span {
    display: block;
}
.en_logo_box > span:nth-of-type(1) {
    height: 16px;
    background: url(../images/aiclidsteens_ol_home.svg) 0 50% no-repeat;
    background-size: auto 100%;
}
.en_logo_box > span:nth-of-type(2) {
    margin-top: 4px;
    height: 12px;
    background: url(../images/online_single_logo.svg) 50% 50% no-repeat;
    background-size: auto 100%;
}

.course_box .bottom_box {
    margin: 1em auto .5em;
    width: 90%;
    padding: .8em 1em .8em 2em;
    border-radius: 5px;
    font-size: 13px;
}
.course_box .bottom_box > div:nth-of-type(2) {
    margin-top: 4px;
}
.high .course_box .bottom_box > div:nth-of-type(2) {
    margin-top: 0;
}
.course_box .bottom_box .rev {
    font-size: 12px;
}

.elem .course_box .bottom_box {
    background-color: rgba(243, 152, 0, .2);
    color: rgba(243, 152, 0, 1);
}
.junior .course_box .bottom_box {
    background-color: rgba(122, 64, 153, .2);
    color: rgba(122, 64, 153, 1);
}
.high .course_box .bottom_box {
    background-color: rgba(79, 192, 243, .2);
    color: rgba(79, 192, 243, 1);
}


/* oshu
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#oshu.section .inner {
    margin: 4em auto 0;
    max-width: initial;
    background-color: transparent;
}
.home #oshu.section .inner {
    margin: 8em auto 0;
    max-width: initial;
    background-color: transparent;
}

#oshu.section {
    overflow: hidden;
    background: url(../images/wave_sub_back.svg) 0 8em no-repeat;
    background-size: 400%;
}
.home #oshu.section {
    overflow: hidden;
    background: url(../images/wave_sub_back.svg) 0 16em no-repeat;
    background-size: 400%;
}

.course_detail #oshu.section .inner {
    margin: 10em auto 0;
    background-color: #ecf9fb;
    max-width: 1080px;
}
.course_detail #oshu.section {
    overflow: hidden;
    background: url(../images/wave_sub_back.svg) 0 1em no-repeat;
    background-size: 300%;
}



.service_box.oshu {
    width: 96%;
    margin: 0 auto;
}
.service_box.oshu .service_title.oshu {
    width: 200px;
    margin: 0 auto;
}
.service_box.oshu .lining {
    width: 100%;
    padding-bottom: 42.34%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
.service_box.oshu .banner {
    display: block;
    width: 90%;
    margin: 0 auto;
}
.service_box.oshu .banner img {
    display: block;
    box-shadow: 0 6px 12px rgba(209, 239, 243, 1);
}


.c2a {
    padding: 0 0 7em;
    text-align: center;
}
#course .c2a {
    padding: 3em 0 0;
}
.c2a .link_button {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .1em;
    padding-left: .1em;
    text-align: center;
    padding: .7em 3em;
}
.single .c2a .link_button {
    border-color: var(--color-sv_single);
    color: var(--color-sv_single);
}
.english .c2a .link_button {
    border-color: var(--color-sv_english);
    color: var(--color-sv_english);
}
.mass .c2a .link_button {
    border-color: var(--color-sv_mass);
    color: var(--color-sv_mass);
}



/* footer
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
footer {
    background-color: var(--color-base);
    color: rgba(255,255,255,.7);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .15em;
    text-align: center;
}

footer > .inner {
    padding: 5em 0;
}

#signature {
    height: 60px;
    font-size: 0;
    text-align: center;
}
#signature a {
    display: inline-block;
    padding-top: 50px;
    font-size: 10px;
    line-height: 1;
    color: rgba(255,255,255,.6);
    background: url(../images/logo_d_online.svg) 50% 0 no-repeat;
    background-size: auto 40px;
    width: 100%;
    max-width: 300px;
}

#signature .aic-online_text {
    display: inline-block;
    padding-top: 50px;
    font-size: 10px;
    line-height: 1;
    color: rgba(255,255,255,.6);
    background: url(../images/logo_d_online.svg) 50% 0 no-repeat;
    background-size: auto 40px;
    width: 100%;
    max-width: 300px;
}

footer nav {
    padding-top: 2em;
}

footer nav li {
    margin: .7em 0;
}
footer nav li a {
    color: rgba(255,255,255,.7);
}

footer .footer_menu.company {
    margin: 1.5em 0 0;
}
footer .footer_menu.company li {
    display: inline-block;
    margin: .7em 1em;
}

#copyright {
    margin: 2em;
    color: rgba(255,255,255,.5);
}



/* slogan
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#slogan .inner {
    margin: 0 auto;
}

.slogan_wrap {
    position: relative;
    max-width: 600px;
    width: 96%;
    margin: 1em auto 0;
    padding-bottom: 50%;
    height: 0;
}

.slogan_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.slogan_box h2 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,20%);
    text-align: center;
    width: 265px;
    height: 265px;
    background-image: url(../images/home_circle_bl_back.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    white-space: nowrap;
}
.kobetsu .slogan_box h2 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 265px;
    height: 265px;
    background-image: url(../images/home_circle_bl_back.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    white-space: nowrap;
}
.slogan_box h2 > span{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: .2em;
    color: var(--color-sv_single);
    text-align: center;
}

#slogan .item_box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    width: 100%;
    padding-bottom: 64.01%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
#slogan .item_box:before,
#slogan .item_box:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
}
#slogan .item_box:before {
    top: -1.5em;
    left: 50%;
    transform: translateX(-300%) rotate(20deg);
}
#slogan .item_box:after {
    top: .5em;
    left: 50%;
    transform: translateX(200%) rotate(-30deg);
}



.juku .slogan_wrap {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 1em auto;
    padding: 0;
    height: 265px;
}
.en .slogan_wrap {
    position: relative;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    height: 265px;
}


#slogan .item_box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-110%,-80%) rotate(-10deg);
    width: 50%;
    height: 0;
    padding-bottom: calc(129.07% * 0.5);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
#slogan .item_box2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%,-10%) rotate(10deg);
    width: 50%;
    height: 0;
    padding-bottom: calc(126.76% * 0.5);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
.en #slogan .item_box2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%,-10%) rotate(10deg);
    width: 65%;
    height: 0;
    padding-bottom: calc(67% * 0.65);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
#slogan .item_box3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-10%,-110%);
    width: 60%;
    height: 0;
    padding-bottom: 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

#slogan .item_box1:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -20px;
    left: 70%;
    transform: rotate(40deg);
}
#slogan .item_box2:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -24px;
    left: 17%;
    transform: rotate(-20deg);
}
#slogan .item_box3:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -10px;
    left: 0;
    transform: rotate(-40deg);
}

.item_box30_wrap {
    margin-top: 0;
    min-width: 260px;
    width: 100%;
}
.item_box30 {
    margin-top: 0;
    min-width: 260px;
    width: 100%;
    height: 119px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.item_box30a {
    width: 100%;
    height: 0;
    padding-bottom: 6.62%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
.item_box30b {
    margin-top: 7px;
    width: 100%;
    height: 0;
    padding-bottom: 6.5%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}



.en #intro .desc_wrap {
    margin-top: 1em;
}



#slogan .item_box31 {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-110%,0) rotate(-10deg);
    width: 50%;
    height: 0;
    padding-bottom: calc(129.07% * 0.5);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
#slogan .item_box32 {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-45%,100%) rotate(0);
    width: 65%;
    height: 0;
    padding-bottom: calc(78.81% * 0.65);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
#slogan .item_box33 {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-5%,0);
    width: 60%;
    height: 0;
    padding-bottom: 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

#slogan .item_box31:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -20px;
    left: 70%;
    transform: rotate(40deg);
}
#slogan .item_box32:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -24px;
    left: 50%;
    transform: rotate(0);
}
#slogan .item_box33:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 24px;
    background: url(../images/home_wifi_back.svg) 50% 50% no-repeat;
    background-size: contain;
    top: -10px;
    left: 0;
    transform: rotate(-40deg);
}


.juku .slogan_box h2 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 265px;
    height: 265px;
    background-image: url(../images/home_circle_gr_back.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}
.juku .slogan_box h2 > span {
    color: var(--color-sv_mass);
}

.en .slogan_box h2 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 265px;
    height: 265px;
    background-image: url(../images/home_circle_or_back.svg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .8;
}
.en .slogan_box h2 > span {
    color: var(--color-sv_english);
}




/* features
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#features.section {
    background: url(../images/wave_main_back_f.svg) 50% 80% no-repeat;
    background-size: 100% 20%;
}
.juku #features.section {
    background: url(../images/wave_gr_back_f.svg) 50% 40% no-repeat;
    background-size: 100% 13%;
}
.kobetsu #features.section {
    background: url(../images/wave_bl_back_f.svg) 50% 80% no-repeat;
    background-size: 100% 24%;
}
.en #features.section {
    background: url(../images/wave_or_back_f.svg) 50% 80% no-repeat;
    background-size: 100% 40%;
    background: none;
}
#features.section .inner {
    margin: 9em auto 0;
    max-width: initial;
    background: url(../images/wave_bl_back_f.svg) 50% 20% no-repeat;
    background-size: 100% 20%;
}
.kobetsu #features.section .inner {
    margin: 9em auto 0;
    max-width: initial;
    background: url(../images/wave_bl_back_f.svg) 50% 20% no-repeat;
    background-size: 100% 27%;
}
.juku #features.section .inner {
    margin: 9em auto 0;
    max-width: initial;
    background: url(../images/wave_gr_back_f.svg) 50% 4% no-repeat;
    background-size: 100% 16%;
}
.juku .features_box.mass {
    background: url(../images/wave_gr_back_f.svg) 50% 75.5% no-repeat;
    background-size: 100% 20%;
}
.en #features.section .inner {
    margin: 6em auto 0;
    max-width: initial;
    background: url(../images/wave_or_back_f.svg) 0 15% no-repeat;
    background-size: 200% 32%;
}

#features.section h2:before {
    content: 'Features';
    color: var(--color-sv_single);
    opacity: .2;
}
.juku #features.section h2:before {
    content: 'Features';
    color: var(--color-sv_mass);
    opacity: .2;
}
.en #features.section h2:before {
    content: 'Features';
    color: var(--color-sv_english);
    opacity: .2;
}


#features .content_wrap {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

.package_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    margin: 3em 0 1em;
}

.package_box > div {
    width: 92%;
    margin: 0 auto;
}

.package_box .title_box {
    margin: 2em 0 0;
}

.package_box .suffix {
    font-size: 12px;
    line-height: 1;
    color: #fbc400;
    position: relative;
    padding-left: .7em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.package_box .suffix:before {
    content: '';
    display: block;
    height: 1.5em;
    width: 3px;
    background-color: #fbc400;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.en .package_box .suffix {
    color: var(--color-main);
}
.en .package_box .suffix:before {
    background-color: var(--color-main);
}

.package_box h3 {
    margin-top: .7em;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: .1em;
    color: var(--color-title);
}
.oghks {
    width: auto;
    height: 24px;
    margin-right: 5px;
    margin-bottom: -4px;
}

.package_box .pack_contents {
    margin: 2em 0;
    /*word-break: break-all;*/
}
.package_box .pack_contents p {
    margin: 1em 0;
    font-size: 14px;
    line-height: 2;
    letter-spacing: .13em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.package_box .ill_box {
    width: 100%;
    padding-bottom: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}


/* Illust
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
.package.n1 .ill_box { padding-bottom: 67%; }
.package.n2 .ill_box { margin: 0 auto;width:80%;padding-bottom: 112%; }
.package.n3 .ill_box:nth-of-type(1) { padding-bottom: 100%; }
.package.n3 .ill { position: relative; }
.package.n3 .ill_box:nth-of-type(2) {
    width: 30%;
    padding-bottom: 40%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.package.n4 .ill_box { padding-bottom: 50%; }
.package.n5 .ill_box { padding-bottom: 50%; }

.package.n21 .ill_box { padding-bottom: 80%; }
.package.n22 .ill_box { padding-bottom: 80%; }
.package.n23 .ill_box { padding-bottom: 80%; }
.package.n24 .ill_box { padding-bottom: 80%; }
.package.n25 .ill_box { padding-bottom: 80%; }
.package.n26 .ill_box { padding-bottom: 80%; }
.package.n27 .ill_box { padding-bottom: 80%; }
.package.n28 .ill_box { padding-bottom: 80%; }

.package.n31 .ill_box { padding-bottom: 60%; }
.package.n32 .ill_box { padding-bottom: 60%; }
.package.n33 .ill_box { padding-bottom: 60%; }


/* course2
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/

.kobetsu.course_detail #course {
    background-image: url(../images/wave_bl_back_f.svg);
    background-repeat: no-repeat;
    background-position: 0 6.5%;
    background-size: 100% 20%;
}
.juku.course_detail #course {
    background-image: url(../images/wave_gr_back_f.svg);
    background-repeat: no-repeat;
    background-position: 0 6.5%;
    background-size: 100% 20%;
}


.mass_class_name {
    position: relative;
    top: 1em;
    display: inline-block;
    margin: 1.3em 0 0;
    padding: .2em .5em;
    color: #fff;
    line-height: 1;
    font-size: 13px;
    opacity: .5;
}

.elem .mass_class_name {
    background-color: var(--color-elem);
}
.junior .mass_class_name {
    background-color: var(--color-j_high);
}



/* table
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
#course.section h2.summary {
    margin-top: 5em;
}
#course.section h2.summary:before {
    content: 'Summary';
    color: var(--color-base);
    opacity: .1;
}
.table_overview,
.table_fee {
    margin: 4em 0;
    overflow: auto;
    white-space: nowrap;
}
.summary table {
    border-collapse: collapse;
    border-top-style: solid;
    border-top-width: 6px;
    margin: 0 auto;
    min-width: 810px;
}
.summary table th,
.summary table td {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.385;
    letter-spacing: .15em;
    padding: .7em 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.summary table caption {
    position: relative;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: .15em;
    color: var(--color-main);
    padding: 0 0 12px 5px;
    text-align: left;
}
.summary table caption .note {
    display: inline-block;
    position: absolute;
    bottom: .3em;
    right: .5em;
    color: #51737d;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .1em;
}


.summary table.overview {
    border-top-color: rgba(81, 115, 125, .1);
}

.summary table.overview th,
.summary table.overview td {
    border-left: 3px solid rgba(230, 234, 240, .6);
}
.summary table.overview th,
.summary table.overview td {
    border-bottom: 3px solid rgba(230, 234, 240, .6);
}
/*
.summary table.overview tr:nth-last-child(1) td {
    border-bottom: none;
}*/
.summary table.overview th {
    color: #2d444a;
}
.summary table.overview th {
    background-color: #f8f8f8;
}
.summary table.overview td {
    color: #51737d;
}

.kobetsu .td3 { text-align: center !important; }
.kobetsu .td4 { text-align: right !important; }
.kobetsu .td5 { text-align: center !important; }
.kobetsu .td6 { text-align: center !important; }



.summary table.fee {
    border-top-color: rgba(178, 136, 80, .1);
    border-bottom-color: rgba(178, 136, 80, .1);
    border-top-style: solid;
    border-top-width: 6px;
    border-bottom-style: solid;
    border-bottom-width: 6px;
}
.summary table.fee th {
    border-bottom: 3px solid rgba(235, 228, 218, .5);
}
.kobetsu .summary table.fee tr:nth-last-child(2) td {
    padding: 0;
    border-bottom: 9px double rgba(235, 228, 218, .5);
}
.juku .summary table.fee tr:nth-last-child(3) td {
    padding: 0;
    border-bottom: 9px double rgba(235, 228, 218, .5);
}
.summary table.fee tr:nth-child(even) {
    background-color: rgba(178, 136, 80, .1);
}
.juku .summary table.fee tr:nth-child(even) {
    background-color: rgba(178, 136, 80, 0);
}
.summary table.fee tr:nth-last-child(3) {
    background-color: rgba(255,255,255,0);
}
.summary table.fee th,
.summary table.fee td {
    border-left: 3px solid rgba(235, 228, 218, .5);
}
.juku .summary table.fee th,
.juku .summary table.fee td {
    border-bottom: 3px solid rgba(235, 228, 218, .5);
}
.summary table.fee th {
    color: #333333;
}
.juku .summary table.fee th {
    background-color: rgba(178, 136, 80, .07);
}
.summary table.fee td {
    color: #5d5d5d;
}

.summary table .tiny.elem,
.summary table .tiny.junior,
.summary table .tiny.high,
.summary table .tiny.akamon {
    display: block;
    padding: 0;
}
.summary table .tiny.elem,
.summary table .tiny.junior,
.summary table .tiny.high,
.summary table .tiny.akamon {
    display: block;
    padding: 0 0 2px;
}
.summary table .elem {
    color: var(--color-elem);
}
.summary table .junior {
    color: var(--color-j_high);
}
.summary table .high {
    color: var(--color-high);
}
.summary table .akamon {
    color: var(--color-akamon);
}
.summary table th:nth-child(1) {
    border-left: none;
    padding: 3px 1em;
    line-height: 1.15;
}

.summary table th {
    padding: 4px 0;
    line-height: 1.2;
}

.summary table td:nth-child(1) {
    text-align: center;
    border-left: none;
}
.summary table td:nth-child(2) {
    text-align: center;
}
.summary table td:nth-child(4) {
    text-align: right;
}
.summary table td:nth-child(5) {
    text-align: right;
}
.summary table.overview tr:nth-child(3) td:nth-child(3),
.summary table.overview tr:nth-child(3) td:nth-child(4) {
    text-align: right;
}
.summary table.overview tr:nth-child(3) td:nth-child(5) {
    text-align: left;
}




.summary table .slant {
    background: linear-gradient(-10deg, rgba(255,0,0,0), rgba(255,0,0,0) 45%, rgba(255,0,0,.5) 45%, rgba(255,0,0,.5) 55%, rgba(255,0,0,0) 55%, rgba(255,0,0,0));
}

.summary .table_note {
    max-width: 810px;
    margin: -3.6em auto 0;
    letter-spacing: .05em;
}

.lpadding_narrow {
    padding-left: 0 !important;
}


/* flow
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
.flow_item {
    margin: 1em 0;
}

.muryo_flow_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: .15em;
    text-align: left;
    color: rgba(13, 184, 201, .66);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flow_item {
    width: 100%;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: rgba(47, 158, 186, .66);
}

.flow_item_box {
    width: 88%;
    margin: 0 10px 1em auto;
    background-color: #ecf9fb;
    padding: 1em 1em 2em 2em;
    text-align: center;
    position: relative;
    z-index: 2;
}
.flow_item_box:before {
    width: 90%;
    height: 80%;
    left: -14px;
    bottom: -10px;
    background-color: #A1E4EC;
    content: '';
    position: absolute;
    z-index: -1;
    filter: blur(15px);
}
.flow_item_box:after {
    background-color: #ecf9fb;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.flow_step {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    color: rgba(13, 184, 201, .2);
    display: block;
    margin-bottom: 5px;
    text-align: center;
    overflow: visible;
    background-position: .25em 70%;
    background-repeat: no-repeat;
    background-size: auto 45px;
}
.flow_step {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
    color: rgba(13, 184, 201, .9);
    display: block;
    margin-bottom: 5px;
    text-align: center;
    overflow: visible;
    background-position: .25em 70%;
    background-repeat: no-repeat;
    background-size: auto 45px;
}
.step1 .flow_step { background-image: url(../images/home_flow_app_d.svg); }
.step2 .flow_step { background-image: url(../images/home_flow_calendar_d.svg); }
.step3 .flow_step { background-image: url(../images/home_flow_package_d.svg); }

.en .step2 .flow_step { background-image: url(../images/home_flow_guide_d.svg); }
.en .step3 .flow_step { background-image: url(../images/home_flow_calendar_d.svg); }
.en .step4 .flow_step { background-image: url(../images/home_flow_login_d.svg); }

.flow_title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .15em;
    text-align: center;
    color: rgba(13, 184, 201, .9);
    margin-bottom: 1em;
}

.flow_text {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    letter-spacing: .15em;
    text-align: left;
    color: rgba(47, 158, 186, .66);
}

.flow_note {
    margin-top: 1.2em;
    text-align: left;
}

.muryo_flow_box .info_space {
    margin: 1em 1em 1em auto;
    width: 88%;
}

.muryo_flow_box .link_button_wrap .link_button_b {
    font-size: 18px;
    padding: .7em 0;
}

.course_detail #oshu.section h2 {
    padding: 80px 0 0;
    color: rgba(45, 68, 74, .9);
}

.muryo_text {
    width: 85%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
}
.muryo_text p {
    display: inline-block;
    text-align: left;
}


/* aickids_course
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
#aickids_course {
    position: relative;
    background: url(../images/wave_pu_back.png) 50% 100% no-repeat;
    background-size: 400% 50%;
    padding: 12em 0 18em;
    color: #fff;
    /*filter: saturate(99%);*/
    filter: hue-rotate(-40deg) saturate(70%) brightness(110%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#aickids_course:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/wave_pu_back.png) 50% 0 no-repeat;
    background-size: 500% 50%;
    /*filter: saturate(99%);*/
    /*filter: hue-rotate(-40deg) saturate(70%) brightness(110%);*/
}
#aickids_course:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/wave_pu_back_back.png) 50% 50% no-repeat;
    background-size: 500% 60%;
    /*filter: saturate(99%);*/
    /*filter: hue-rotate(-40deg) saturate(70%) brightness(110%);*/
}
#aickids_course .inner {
    position :relative;
    z-index: 100;
}

#aicteens_banner.no_filter {
    margin: 3em 0 1em;
    filter: hue-rotate(40deg) saturate(150%) brightness(80%);
}

#aickids_course .title_base {
    text-align: center;
    letter-spacing: .15em;
}

#aickids_course .title_base h2 span:nth-of-type(1) {
    display: block;
    font-size: 15px;
    color: var(--color-main);
}
#aickids_course .title_base h2 span:nth-of-type(2) {
    font-size: 28px;
}

#aickids_course .title_base .caption {
    margin: 1em auto;
}

#aickids_course .title_base .caption .seal_wrap {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: var(--color-notice);
    margin: 1em auto 0;
    border: 6px double #441D97;
}

#aickids_course .title_base .caption .seal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px double #441D97;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
    font-weight: 900;
}

#aickids_course .title_base .caption .text {
    margin: .5em auto 0;
}
#aickids_course .title_base .caption h3 {
    font-size: 1.5rem;
    line-height: 1.5;
}

.aickids_tabe table {
    border-collapse: collapse;
    margin: 1em auto;
    white-space: nowrap;
}
.aickids_tabe table caption {
    line-height: 1.3;
    letter-spacing: .15em;
    padding: 0 0 5px 5px;
    text-align: left;
    opacity: .8;
    color: var(--color-main);
}

.aickids_tabe table th,
.aickids_tabe table td {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.385;
    letter-spacing: .15em;
    padding: .7em 1em;
    border-bottom: 3px solid rgba(255,255,255,.3);
    text-align: center;
}
.aickids_tabe table th:nth-child(1),
.aickids_tabe table td:nth-child(1) {
    border-left: none;
}
.aickids_tabe table th:not(:first-child),
.aickids_tabe table td:not(:first-child) {
    border-left: 3px solid rgba(255,255,255,.1);
}
.aickids_tabe table td:first-child {
    border-right: 3px solid rgba(255,255,255,.1);
}
.aickids_tabe table tr.note td {
    border-right: none;
}

.aickids_tabe table th {
    border-top: 6px solid rgba(255,255,255,.3);
    background-color: rgba(255,255,255,.05);
}
.aickids_tabe table tr:nth-last-child(1) td {
    border-top: 6px solid rgba(255,255,255,.3);
    border-bottom: none;
}
.mid-table td {
    border-top: 3px solid rgba(255,255,255,.3);
}

.vertical {
    display: inline-block;
    transform: rotate(90deg);
}

#aicteens_banner {
    padding: 0 0 5em;
}

.aicteens_banner_wrap {
    width: 98%;
    margin: 0 auto;
}

.aicteens_banner_box {
    padding-bottom: 39.25%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

#aicteens_banner .inner {
    text-align: center;
}

#aicteens_banner .inner .intro {
    width: 80%;
    margin: 2em 0 -4em;
    display: inline-block;
    text-align: left;
    line-height: 2;
    letter-spacing: .13em;
}


/* aickids_voice
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
#aickids_voice{
    padding: 5em 0 10em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#aickids_voice .title_base {
    text-align: center;
    letter-spacing: .15em;
}

#aickids_voice .title_base h2 span:nth-of-type(1) {
    display: block;
    font-size: 15px;
    color: var(--color-main);
}
#aickids_voice .title_base h2 span:nth-of-type(2) {
    font-size: 22px;
    color: var(--color-title);
}


.voice_base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}


.voice_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.voice_box {
    height: 280px;
    width: 280px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2em auto;
}
.voice_box:before {
    width: 92%;
    height: 92%;
    left: -14px;
    bottom: -14px;
    background: rgba(0, 2, 72, 0.1);
    content: "";
    position: absolute;
    z-index: -1;
    transform-style: preserve-3d;
    transform: rotateY(-10deg);
    filter: blur(25px);
    transition: 0.3s;
}
.voice_box:after {
    background: #ffffff;
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transform: perspective(500px) rotateY(-5deg);
    transform: perspective(500px) rotateY(-5deg);
    box-shadow: 0 0 1px transparent;
}


.voice_box .voice_area {
    padding: 0 0 1em 3em;
    font-size: 13px;
    letter-spacing: .15em;
    line-height: 1.7;
}

.voice_box .name {
    color: rgba(0, 79, 142, .6);
}
.voice_box h3 {
    color: var(--color-title);
    font-size: 15px;
    position: relative;
}
.voice_box h3::before {
    content: '';
    position: absolute;
    top: -1em;
    left: -1em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: rgba(241, 114, 106, .2);
}
.voice_box h3 > span {
    position: relative;
}

.voice_box .text {
    margin-top: .7em;
}

.voice_wrap {
    width: 100%;
}
.aickids_illust {
    width: 100%;
}
.aickids_illust_area {
    width: 100%;
}

.aickids_illust_box {
    padding-bottom: 96.65%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    position: relative;
    margin-top: 4em;
}




/* information
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
#main_head {
    padding-top: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#main_head .headline_box {
    margin: 3em auto 0;
    padding: 7px 0 7px 1em;
    width: 96%;
    position: relative;
}

#main_head .headline_box:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: var(--color-main);
    border-radius: 2px;
}


#main_head .headline_box h2 {
    font-size: 22px;
    letter-spacing: .1em;
    line-height: 1.35;
    color: var(--color-title);
}
#main_head .caption_box {
    font-weight: 500;
    margin-top: 4px;
    color: var(--color-main);
    opacity: .8;
}

#main_head .mv_box {
    margin: 2em auto 0;
    width: 90%;
    height: auto;
}

#infomation > .inner {
    margin: 3em auto;
    width: 90%;
}

#infomation #content {
    margin: 0 0 3em;
}

#infomation .text {
    letter-spacing: .15em;
    line-height: 2;
    word-break: break-all;
    font-weight: 500;
}

#infomation .text p {
    margin: 1em 0;
    line-height: 1.5;
    word-break: break-all;
}


#infomation .pagination > .inner {
    text-align: center;
}

#infomation .pagination > .inner {
    text-align: center;
}

#infomation .pagin {
    display: inline-block;
    margin: .5em 1em;
}


.device_desc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1080px;
    width: 85%;
    margin: 0 auto;
    padding: 3em 0 1em;
}
.device_desc h3 {
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .1em;
    color: var(--color-sv_single);
}
.juku .device_desc h3 {
    color: var(--color-sv_mass);
}

.device_illust_box {
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background-color: var(--color-sv_single);
    overflow: hidden;
    margin: 1em auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.juku .device_illust_box {
    background-color: var(--color-sv_mass);
}
.device_illust_box img {
    width: 70%;
    height: 70%;
}

.device_text {
    margin-top: 1em;
    width: 100%;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: .15em;
    /* word-break: break-all; */
    opacity: .8;
}

.environment {
    line-height: 1.2;
}
.environment p {
    margin: 0;
}
.device_note_title {
    font-weight: 900;
    margin: 1em 0 0;
}




/* @media 375
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
@media only screen and (min-width: 375px) {

    #intro h2 > span {
        display: inline-block;
        padding-top: 5%;
}


}

/* @media 768
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
@media only screen and (min-width: 768px) {
/*
    #info:before {
        background-size: 100% 7%;
        top: 9.2%;
    }
*/
    #home_mv2 {
        display: none;
    }
    #choice_area {
        display: none;
    }

    .v2 #home_mv {
        display: block;
        position: relative;
    }

    #home_mv:before {
        background-position: 50% -10%;
        background-size: 1400px;
    }
    .kobetsu #home_mv:before {
        background-position: 50% 30%;
        background-size: 1400px;
    }
    .juku #home_mv:before {
        background-position: 50% 30%;
        background-size: 1400px;
    }
    .en #home_mv:before {
        background-position: 50% 50%;
        background-size: 90%;
        background-size: 1400px;
    }

    .kobetsu.course_detail #home_mv .mv_item.n1 {
        max-width: 250px;
        width: 64.5%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,20%);
        border-radius: 0;
        background-color: rgba(255,255,255,0);
    }

    #main_header .inner {
        padding: 15px 5% 0;
    }
/*
    .course_detail #home_mv .inner {
        min-height: 500px;
    }
*/

    #intro {
        display: block;
        position: relative;
        padding: 6em 0;
        /*background-color: #f5f5ee;*/
    }

    #intro h2 {
        font-size: 20px;
    }

    #main_header > .inner > .item.link {
        margin-right: 15px;
    }



    .content_base .text_wrap,
    .content_base .illust_wrap {
        width: 50%;
    }

    .juku #summary .content_base .text_wrap {
        width: 30%;
    }
    .juku #summary .content_base .illust_wrap {
        width: 70%;
    }


    #summary .content_wrap:before {
        padding-bottom: 9%;
    }
    #summary .content_base .text_wrap {
        padding: 0 0 10em;
    }

    .service_box {
        padding-bottom: 6em;
    }

    .home .service_box {
        padding-bottom: 9em;
    }

    .service_box .content_base .text_box {
        padding: 1em 1em 0;
    }

    .course_wrap {
        padding: 5em 0 0;
    }
    .mass .course_wrap {
        padding: 9em 0 0;
    }
    .course_box_wrap {
        width: 50%;
    }

    .course_box {
        width: 85%;
    }

    #oshu.section {
        background-size: 100%;
    }
    .home #oshu.section {
        background-size: 100%;
    }
    .course_detail #oshu.section {
        background-size: 100%;
    }
    .service_box.oshu {
        padding-bottom: 3em;
    }
    .course_detail .service_box.oshu {
        padding-bottom: 9em;
    }
    .service_box.oshu .banner {
        width: 400px;
    }

    .kobetsu .slogan_wrap {
        position: relative;
        max-width: 600px;
        width: 96%;
        height: 256px;
        margin: -1em auto 9em;
        padding-bottom: 0;
    }

    .kobetsu #summary.section .inner {
        margin: 11em auto 0;
    }
    .course_detail #summary .content_wrap:before {
        padding-bottom: 100px;
    }

    .package_box > div {
        width: 46%;
    }

    .n32 .package_box,
    .n28 .package_box,
    .n26 .package_box,
    .n25 .package_box,
    .n22 .package_box,
    .n2 .package_box,
    .n4 .package_box {
        flex-direction: row-reverse;
    }
    .package_box .title_wrap,
    .package_box .ill_wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .package.n1 .ill_box { padding-bottom: 67%; }
    .package.n2 { width: 100%; }
    .package.n2 .package_box { margin: 0 0 1em; }
    .package.n2 .ill_box { width:60%; margin:0 auto; padding-bottom: 70%; }
    .package.n3 .ill_box:nth-of-type(1) { padding-bottom: 100%; }
    .package.n3 .ill { position: relative; }
    .package.n3 .ill_box:nth-of-type(2) {
        width: 30%;
        padding-bottom: 40%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .package.n4 .ill_box { padding-bottom: 50%; }
    .package.n5 .ill_box { padding-bottom: 50%; }


    .package.n21 .ill_box { padding-bottom: 90%; }
    .package.n22 .ill_box { padding-bottom: 100%; }
    .package.n23 .ill_box { padding-bottom: 90%; }
    .package.n24 .ill_box { padding-bottom: 90%; }
    .package.n25 .ill_box { padding-bottom: 90%; }
    .package.n26 .ill_box { padding-bottom: 100%; }
    .package.n27 .ill_box { padding-bottom: 100%; }
    .package.n28 .ill_box { padding-bottom: 90%; }
    .package.n29 .ill_box { padding-bottom: 80%; }

    .package.n31 .ill_box { padding-bottom: 100%; }
    .package.n32 .ill_box { padding-bottom: 100%; }
    .package.n33 .ill_box { padding-bottom: 100%; }

    .course_detail .course_box {
        width: 85%;
        margin-bottom: 2em;
    }

    .flow_item {
        width: 50%;
    }

    #slogan .item_box1 {
        width: 40%;
        padding-bottom: calc(129.07% * 0.4);
    }
    #slogan .item_box2 {
        width: 40%;
        padding-bottom: calc(126.76% * 0.4);
    }
    #slogan .item_box3 {
        width: 50%;
        padding-bottom: 50%;
    }


    #slogan .item_box30 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%,0) rotate(0);
        width: 400px;
        height: 119px;
        padding-bottom: 0;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .item_box30_wrap {
        margin: 0 auto;
        min-width: 260px;
        width: 600px;
    }

    .en #intro .desc_wrap {
        margin-top: -2em;
    }


    #aickids_course {
        background-size: 100% 50%;
    }
    #aickids_course:before {
        background-size: 100% 50%;
    }
    #aickids_course:after {
        background-size: 100% 70%;
    }
    #aicteens_banner.no_filter {
        width: 70%;
        margin: 5em auto 0;
    }
    #aicteens_banner .inner .intro {
        width: 100%;
        width: 90%;
        margin: 3em 0 0;
        display: inline-block;
        text-align: left;
        line-height: 2;
        letter-spacing: .13em;
    }

    .voice_wrap {
        width: 60%;
    }
    .aickids_illust {
        width: 40%;
    }
    .aickids_illust_box {
        margin-top: 4em;
    }

    .home #course.section .inner {
        margin: 9em auto 0;
    }

    .home .service_box.english {
        background: linear-gradient(rgba(253, 238, 231, 0) 10%, rgba(253, 238, 231, 1) 50%);
        padding-top: 10em;
        padding-bottom: 10em;
    }

    .home #course.section h2.no_back {
        margin-top: 8em;
    }

    .home #oshu.section .inner {
        margin: 12em auto 0;
    }

    .juku.course_detail #intro {
        position: relative;
        padding: 0 0 3em;
        margin-top: -5em;
        /*background-color: #f5f5ee;*/
    }
    .juku.course_detail #summary.section .inner {
        margin: 6em auto 0;
        max-width: initial;
    }
    .course_detail #home_mv .mv_item.n11 {
        max-width: 300px;
        width: 52%;
        bottom: 15%;
        left: 5%;
        /*filter: drop-shadow(3px 3px 7px rgba(0,0,0,.4)) saturate(70%) opacity(70%);*/
    }
    .en #features.section {
        /*padding-top: 8em;*/
    }

    #intro .cloud_item_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 320px;
    }
    #intro .cloud_item {
        width: 50%;
        height: 220px;
        font-size: 0;
        text-align: center;
    }

    #intro .single .cloud_item_inner {
        left: 10%;
    }
    #intro .mass .cloud_item_inner {
        right: 10%;
        top: 0;
    }

    .kobetsu .service_box .content_base {
        align-items: stretch;
    }
    .kobetsu .service_box .content_base #akamon {
        display: flex;
        align-items: stretch;
    }

    .device_desc {
        display: block;
        width: 70%;
        overflow: hidden;
    }

    .device_illust {
        font-size: 16px;
        width: 130px;
        height: 130px;
        float: left;
        margin-top: 2em;
    }
    .device_illust_box {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .device_desc h3,
    .device_desc .device_text {
        float: right;
        width: calc(100% - 150px);
        text-align: left;
    }

    .table_overview {
        clear: both;
    }

    .summary table caption {
        text-align: center;
    }


    .juku #features.section.high,
    .juku #features.section.high .inner,
    .juku #course_high_bottom.section,
    .juku #course_high.section,
    .juku .course_junior .features_box.mass,
    .juku #features.section.course_junior .inner,
    .juku #features.section.course_junior,
    .juku #course_junior_bottom.section,
    .juku #course_junior.section,
    #localmenu_bottom.section,
    #localmenu.section {
        background-size: 100%;
    }

.localmenu_box a {
    font-size: 18px;
}

#features.high .package.n27 {
    width: 100%;
}
#features.high .package.n27 .ill_box {
    padding-bottom: 50%;
}




}


/* @media 1080
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""*/
@media only screen and (min-width: 1080px) {
    .clearfix::after {
      content: '';
      display: block;
      clear: both;
    }

    .pc {
        display: block;
    }
    .sp {
        display: none;
    }

    #main_header .inner {
        padding: 15px 10px 0;
    }

    #summary .content_wrap:before {
        padding-bottom: 100px;
    }

    .summary table {
        min-width: 810px;
    }

    .flow_item {
        width: 33%;
        justify-content: center;
    }


    .en .muryo_flow_box {
        justify-content: center;
    }
    .en .flow_item {
        width: 40%;
        justify-content: center;
    }

}