@charset "UTF-8";

:root {
    --primary-color: #e57373;
    --primary-light-color: #ffa4a2;
    --alternative-light-color: #ffcccb;
    --alternative-light-color-2: #ffebee;
    --primary-dark-color: #af4448;
    --secondary-color: #25a59a;
    --secondary-light-color: #63d7cb;
    --secondary-dark-color: #00756c;
    --third-color: #fb8c00;
    --third-light-color: #ffbd45;
    --third-dark-color: #c25e00;
    --primary-text-color: black;
    --secondary-text-color: #fafafa;
    --alternative-text-color-1: #263238;
    --alternative-text-color-2: #37474f;
    --alternative-text-color-3: #bdbdbd;
    --alternative-text-color-4: #ececec;
    --card-box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.35);
    --strong-text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    --light-text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    --tab-shadow: -2px -2px 5px rgba(0, 0, 0, 0.2);
}

/*------------------------------------------------
  全般設定
 -----------------------------------------------*/
html {
    scroll-behavior: smooth;
}
* {
    scroll-padding-top: 100px;
}
body {
    font-family: Avenir, "Open Sans", "Helvetica Neue", Helvetica, Arial,
        Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "Meiryo UI", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic",
        "游ゴシック体", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    text-align: center;
    overflow-x: hidden;
    position: relative;
}
a:link {
    color: var(--alternative-text-color-1);
}
a:visited {
    color: var(--alternative-text-color-1);
}
a:hover {
    color: var(--alternative-text-color-1);
}
a:active {
    color: var(--alternative-text-color-1);
}
.clear {
    clear: both;
}
.right {
    float: right;
}
.left {
    float: left;
}
.center {
    text-align: center;
}
.ml20 {
    margin-left: 20px;
}
.mr20 {
    margin-right: 20px;
}
.mr40 {
    margin-right: 40px;
}
.mt10 {
    margin-top: 10px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb40 {
    margin-bottom: 40px;
}
.underline {
    text-decoration: underline;
}
.bold {
    font-weight: bold;
}
.size80 {
    font-size: 80%;
}
.size90 {
    font-size: 90%;
}
.size110 {
    font-size: 110%;
}
.size120 {
    font-size: 120%;
}
.size150 {
    font-size: 150%;
}
.size200 {
    font-size: 200%;
}
.red {
    color: #ff0000;
}
.green {
    color: var(--secondary-color);
}
ul.disc li {
    list-style-type: disc;
    margin-left: 20px;
}
ol.number li {
    list-style-type: decimal;
    margin-left: 20px;
}
ol.number2 {
    position: relative;
    margin: 0;
    padding: 0;
}
ol.number2 li {
    list-style: none;
    list-style-position: outside;
    margin: 0;
    padding-left: 1.5em !important;
}
ol.number2 li span {
    position: absolute;
    left: 0;
    margin: 0;
}
ol.number3 {
    position: relative;
    margin: 0;
    padding: 0;
}
ol.number3 li {
    list-style: none;
    list-style-position: outside;
    margin: 0;
    padding-left: 3em;
}
ol.number3 li span {
    position: absolute;
    left: 0;
    margin: 0;
}

/*-----------------------------------------
reset
-----------------------------------------*/
html {
    color: #000;
    background: #ffffff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset,
img {
    border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup {
    font-style: inherit;
    font-weight: inherit;
}
del,
ins {
    text-decoration: none;
}
li {
    list-style: none;
}
caption,
th {
    text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before,
q:after {
    content: "";
}
abbr,
acronym {
    border: 0;
    font-variant: normal;
}
sup {
    vertical-align: baseline;
}
sub {
    vertical-align: baseline;
}
legend {
    color: #000;
}
input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}
input,
button,
textarea,
select {
    *font-size: 100%;
}
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}
/* img {
	max-width: 100%;
} */
figure {
    margin: 20px 0;
}

h1 {
    font-weight: bold;
    font-size: 2.4rem;
    margin: 30px 0px;
}

/*-----------------------------------------
　ページ全体のブロック
-----------------------------------------*/
#container {
    width: 100%;
    margin: 0 auto;
    padding: 0px 0px;
    text-align: center;
    word-wrap: break-word;
}

/*-----------------------------------------
　ヘッダー
-----------------------------------------*/
#header {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}
#logo-menu {
    width: 1200px;
    margin: 0 auto;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#logo-menu img {
    width: 322px;
    float: left;
    margin-top: 15px;
}
#mainimg {
    background: url(../img/header/new-pc-header.jpg) no-repeat;
    width: 900px;
    height: 338px;
    position: relative;
    box-sizing: border-box;
    border-radius: 5px;
}
#mainimg-inner {
    padding: 3px 0;
    text-align: center;
    box-sizing: border-box;
    background: white;
    border-bottom: 3px solid var(--primary-color);
    width: 100%;
}
#mainimg-inner h1 {
    color: var(--secondary-color);
    font-weight: bold;
    font-size: 320%;
}
.metaslider .flexslider {
    margin-bottom: 10px;
}
ul#header-inquirybtn {
    float: left;
    margin-left: 20px;
}
ul#header-inquirybtn li {
    float: left;
    margin-left: 20px;
    box-sizing: border-box;
}
ul#header-inquirybtn li a {
    text-decoration: none;
    background: var(--primary-color);
    color: var(--secondary-text-color);
    font-size: 120%;
    font-weight: bold;
    padding: 10px 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    box-shadow: var(--card-box-shadow);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    display: inline-block;
    width: 220px;
    text-align: center;
}
ul#header-inquirybtn li a:hover {
    box-shadow: none;
    transform: translateY(2px);
}
span.inquiryBoxHolder {
    font-size: 1.1rem;
    padding: 0px 2px;
    color: var(--primary-color);
}
li:hover span.inquiryBoxHolder {
    color: var(--secondary-text-color);
}
#pcmenu.fixed span.inquiryBoxHolder {
    color: var(--primary-text-color);
}
a#header-beginner {
    background: #ffffff;
    background: -moz-linear-gradient(
        top,
        #ffffff 15%,
        #ffffff 15%,
        #dddddd 100%
    );
    background: -webkit-linear-gradient(
        top,
        #ffffff 15%,
        #ffffff 15%,
        #dddddd 100%
    );
    background: linear-gradient(
        to bottom,
        #ffffff 15%,
        #ffffff 15%,
        #dddddd 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 6px 0;
    text-align: center;
    text-decoration: none;
    color: var(--alternative-text-color-1);
    font-size: 90%;
    font-weight: bold;
    margin-top: 8px;
    display: block;
    width: 135px;
    float: right;
    box-sizing: border-box;
}
a#header-beginner:before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 18px;
    background: url(../img/header/beginner2.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
ul#header-sharemenu {
    float: right;
    margin-top: 5px;
}
ul#header-sharemenu li {
    float: left;
    line-height: 0;
    width: 45px;
}
ul#header-sharemenu li a {
    display: block;
    box-sizing: border-box;
    font-size: 40px;
    text-align: right;
}
ul#header-sharemenu li a .svg-inline--fa {
    padding: 0;
}
ul#header-sharemenu li a.icon-fb {
    color: #40529b;
}
ul#header-sharemenu li a.icon-tw {
    color: #58a8ec;
}
ul#header-sharemenu li a.icon-go {
    color: #df5140;
}
ul#header-sharemenu li a.icon-li {
    color: var(--secondary-text-color);
}

.cart-modal-text {
    text-align: left;
    padding: 10px;
    max-width: 300px;
    display: inline-block;
}
.modal-text {
    display: block;
    margin: 0px auto;
}
.modal-text-links {
    display: block;
    padding: 10px 10px 10px 0;
}
.modal-text-links a {
    display: block;
    text-decoration: none;
    text-align: left;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--alternative-text-color-2);
}

/*-----------------------------------------
　グローバルメニュー
-----------------------------------------*/
#pcmenu {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    background-color: var(--secondary-text-color);
}
#pcmenu ul {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#pcmenu ul li {
    float: left;
    width: 20%;
    box-sizing: border-box;
}
#pcmenu ul li a {
    padding: 10px 0;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--alternative-text-color-1);
    font-size: 110%;
    font-weight: bold;
    display: block;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#pcmenu ul li a:hover {
    background-color: var(--primary-color);
    border-radius: 5px;
    color: var(--alternative-text-color-1);
}
.fixed {
    position: fixed;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: 1000;
}
#pcmenu.fixed {
    border-bottom: none;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
}
#pcmenu.fixed #header-cart {
    background: var(--primary-color);
    color: var(--secondary-text-color);
    border-radius: 10px;
    box-shadow: var(--card-box-shadow);
}
#pcmenu.fixed #header-cart:hover {
    box-shadow: none;
    transform: translateY(2px);
}

#pcmenu.fixed ul .show-on-scroll a {
    background: var(--primary-color);
    color: var(--secondary-text-color);
    border-radius: 10px;
    box-shadow: var(--card-box-shadow);
}
#pcmenu.fixed .show-on-scroll:hover {
    box-shadow: none;
    transform: translateY(2px);
}

.show-on-scroll {
    display: none;
}

#pcmenu.fixed .show-on-scroll {
    display: list-item;
}

/*-----------------------------------------
　パンくずリスト
-----------------------------------------*/
#breadcrumbsDiv {
    padding-bottom: 20px !important;
}

/*-----------------------------------------
　コンテンツ
-----------------------------------------*/
#contents {
    width: 1200px;
    margin: 0 auto;
    text-align: left;
    background: #fff;
    box-sizing: border-box;
    padding: 20px 0;
    min-height: 60vh;
}
#contents-left {
    width: 260px;
    float: right;
    padding-left: 20px;
    box-sizing: border-box;
}
#contents-right {
    width: 900px;
    float: left;
    box-sizing: border-box;
}
#contents-right img {
    -webkit-filter: contrast(108%) brightness(110%) saturate(1.08);
    filter: contrast(108%) brightness(110%) saturate(1.08);
    display: block;
}
.split-right {
    width: 50%;
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
}
.split-left {
    width: 50%;
    float: right;
    padding-left: 20px;
    box-sizing: border-box;
}
#bundleleft {
    width: 480px;
    float: right;
    padding-right: 20px;
    box-sizing: border-box;
}
#bundleleft .hl-01 {
    padding-left: 40px;
    font-size: 2em;
}
#bundleright {
    width: 660px;
    float: left;
    box-sizing: border-box;
}
.agent-counselling-buttons a,
.agent-counselling-buttons button {
    display: block;
    width: 100%;
}
#contents.counselling-wrap #bundleleft {
    width: 800px;
    float: left;
}
#contents.counselling-wrap #bundleright {
    width: 360px;
    float: right;
}
#contents.counselling-wrap button.addCounsellingButton {
    max-width: 100%;
    padding: 10px 10px;
    font-weight: normal;
}
#contents.counselling-wrap .back {
    margin: 20px 0;
    font-size: 1.1em;
    color: var(--primary-color);
    font-weight: bold;
    display: inline-block;
}
div.counselling-offices {
    display: flex;
    flex-direction: column;
    padding: 10px;
}
div.counselling-offices span {
    font-weight: bold;
    color: var(--primary-color);
}

#bundleBottom {
    margin: 140px 0px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 70px;
    border-top: 2px solid var(--primary-color);
    padding-top: 20px;
}

.bundle-characteristic-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}
.bundle-characteristic {
    float: left;
    box-sizing: border-box;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
.bundle-characteristic h3 {
    color: var(--alternative-text-color-2);
    font-size: 100%;
    margin-bottom: 10px;
    font-weight: bold;
}
.bundle-characteristic h3 span {
    background-color: var(--primary-color);
    color: var(--secondary-text-color);
    font-weight: normal;
    font-size: 150%;
    margin-right: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 13px 0;
    box-sizing: border-box;
    float: left;
}
.bundle-characteristic h3 span.fa-building:before,
.bundle-characteristic h3 span.fa-file-text:before,
.bundle-characteristic h3 span.fa-graduation-cap:before,
.bundle-characteristic h3 span.fa-pencil:before {
    padding-right: 0 !important;
}

/*-----------------------------------------
　各パーツ
-----------------------------------------*/
.hl-01,
.hl-03 {
    padding: 10px 0px;
    color: black;
    font-weight: bold;
    font-size: 3em;
    box-sizing: border-box;
}
.hl-02 {
    font-weight: bold;
    font-size: 120%;
    padding: 0.5em;
    background: white;
    border-left: solid 15px var(--primary-color);
    margin: 70px 0 10px 0;
}
.hl-03 {
    background: #f393d0;
    background: -webkit-linear-gradient(
        top,
        #7ec8c1 0%,
        var(--secondary-color) 100%
    );
    background: -moz-linear-gradient(
        top,
        #7ec8c1 0%,
        var(--secondary-color) 100%
    );
    background: linear-gradient(
        to bottom,
        #7ec8c1 0%,
        var(--secondary-color) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7EC8C1', endColorstr='var(--secondary-color)',GradientType=0 );
}
.top-section {
    margin-top: 60px;
}
.top-section.hl-01 {
    padding: 5px 0px;
}
.top-section-lead {
    width: 95%;
}
img.single-top-image {
    width: 100%;
    max-width: 640px;
    border-radius: 5px;
    margin: 20px auto 20px 0;
    display: block;
}

.top-bundle-box-holder {
    margin: 70px auto;
    border: 10px solid var(--primary-color);
    border-radius: 15px;
    position: relative;
}
.top-bundle-box-holder h2.hl-01 {
    margin: 0px;
    padding: 20px 30px;
    background: var(--primary-light-color);
}
.top-bundle-box-holder h3.hl-02 {
    margin: 20px 0px 10px;
}
.top-bundle-form {
    width: 90%;
    margin: 20px auto 0px;
    font-size: 1.2em;
}
.top-bundle-form select {
    padding: 10px;
    border-radius: 5px;
    border: 2px solid var(--primary-color);
    font-weight: bold;
    width: 100%;
    cursor: pointer;
}
#contents-right .top-bundle-form img {
    border-radius: 3px;
    border: 1px solid var(--alternative-text-color-2);
    display: inline-block;
}
.top-bundle-form .checkbox-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 20px;
    padding: 3px;
    box-sizing: border-box;
}
.top-bundle-form .checkbox-holder {
    font-weight: bold;
    margin-top: 5px;
}
.top-bundle-form .checkbox-holder input,
.top-bundle-form .checkbox-holder label {
    cursor: pointer;
}
.top-bundle-form .checkbox-holder label {
    display: block;
}
.top-bundle-form .checkbox-holder input {
    height: 25px;
    width: 25px;
}
.top-bundle-form .checkbox-holder label span {
    display: block;
}
#top-bundle-button {
    border: none;
    cursor: pointer;
}
#top-bundle-button:active,
#top-bundle-button:focus {
    outline: none;
}
.country-alert-message {
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 130px;
    padding: 6px 0px;
    font-weight: bold;
    text-align: center;
    color: var(--primary-dark-color);
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: all 0.4s cubic-bezier(0.05, 1.05, 0.36, 1);
    -moz-transition: all 0.4s cubic-bezier(0.05, 1.05, 0.36, 1);
    transition: all 0.4s cubic-bezier(0.05, 1.05, 0.36, 1);
}

.agent-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 40px;
    grid-column-gap: 40px;
}
.agent-card {
    border-radius: 5px;
    position: relative;
}
a.agent-card-image {
    width: 35%;
    height: 100px;
    overflow: hidden;
    border-radius: 5px;
    display: inline-block;
    flex-shrink: 0;
}
a.agent-card-image img {
    border-radius: 5px;
}
#contents-right .agent-card-image img {
    -webkit-filter: none;
    filter: none;
}
.agent-card-body {
    padding: 10px 0px;
}
.agent-card-head {
    display: flex;
    flex-direction: row;
}
.agent-card-title {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
    display: inline-block;
}
.agent-card-text {
    padding: 0px 10px;
}
span.online-program-badge {
    display: inline-block;
    padding: 4px;
    border-radius: 5px;
    background: var(--primary-color);
    color: var(--secondary-text-color);
    margin-bottom: 5px;
}

.country-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 40px;
}
.country-card {
    width: 260px;
    height: 260px;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    position: relative;
}
#contents-right .country-card span img {
    -webkit-transition: -webkit-filter 0.8s, -webkit-transform 0.8s;
    transition: filter 0.8s, transform 0.8s;
}
#contents-right .country-card span img:hover {
    transform: scale(1.2);
}

.country-card-flag {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    border: 1px solid black;
}
.country-card-image span {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.country-card-image img {
    border-radius: 5px;
}
.country-card-image .rank-1st,
.country-card-image .rank-2nd,
.country-card-image .rank-3rd {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 3;
}
.country-card-title {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
    display: block;
    color: var(--secondary-text-color);
    padding: 10px;
    text-shadow: var(--strong-text-shadow);
}
.country-card-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
}
.country-card-buttons .detailsButton:hover {
    background: var(--secondary-light-color);
}

#single-country-content .country-segment {
    margin-top: 30px;
}
.single-country-list-lead {
    padding: 5px 10px 10px;
}
.country-header {
    display: flex;
    align-items: center;
}
.country-page-flag {
    margin-right: 20px;
}
.official-link-list {
    display: grid;
    grid-row-gap: 20px;
    grid-column-gap: 40px;
    grid-template-columns: 1fr 1fr;
}
.official-link-list .official-link-list-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.official-link-list .official-link-list-item div {
    display: flex;
    flex-direction: row;
    border-radius: 5px;
    width: 100%;
    margin: 10px 0px;
    box-sizing: border-box;
}
.official-link-list .official-link-list-item div a {
    font-size: 100%;
    font-weight: bold;
    color: var(--alternative-text-color-2);
}
.official-link-list .official-link-list-item div img {
    margin-right: 10px;
    height: 20px;
    width: auto;
}

.program-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 40px;
    grid-column-gap: 40px;
}
.program-card {
    width: 100%;
    border-top-left-radius: 5px;
    position: relative;
    padding-bottom: 15px;
    border-bottom: solid 1px var(--alternative-text-color-3);
}
.program-card-head .program-card-image {
    width: 25%;
    height: 75px;
    overflow: hidden;
    display: inline-block;
    border-radius: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.program-card-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.program-card-head {
    display: flex;
}

.program-card-title {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    display: inline-block;
    padding-left: 10px;
    box-sizing: border-box;
}
.program-card-text {
    margin-top: 10px;
}
.program-card-buttons {
    display: block;
    box-sizing: border-box;
    padding: 10px;
}
.program-card-buttons .detailsButton {
    padding: 10px 25px;
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    transition: background 0.7s;
    text-decoration: none;
}

.program-card-body {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: flex-start;
    margin-top: 10px;
}
img.program-card-country {
    display: inline-block;
    margin-right: 10px;
}
p.program-card-style {
    flex-shrink: 0;
}
p.program-card-style,
p.program-card-cost {
    display: inline-block;
    font-weight: bold;
    font-size: 0.9em;
    color: var(--alternative-text-color-2);
    padding: 5px 8px;
    background: var(--alternative-text-color-3);
    border-radius: 5px;
    box-sizing: border-box;
    margin-right: 10px;
}
.program-card-ranking {
    position: absolute;
    top: -15px;
    left: -15px;
    z-index: 3;
    color: var(--secondary-text-color);
    padding: 3px 7px;
    background: var(--primary-dark-color);
    border-radius: 5px;
}
.program-card-ranking span {
    font-weight: bold;
    font-size: 1em;
}
.noProgramsFound {
    background: var(--alternative-text-color-4);
    border-radius: 5px;
    padding: 20px;
    width: 100%;
    font-size: 1.1rem;
    border: 1px solid var(--primary-color);
}
.program-list-sticky-controls {
    background: white;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0px;
    z-index: 2;
    padding: 10px 0px;
    border-bottom: 2px solid var(--alternative-text-color-4);
}
.program-list-controls select {
    padding: 5px;
    margin-right: 10px;
    border-radius: 5px;
    max-width: 25%;
    margin-bottom: 10px;
}
.program-list-controls input {
    padding: 5px;
    margin-right: 5px;
    border-radius: 5px;
    border: 1px solid grey;
    margin-bottom: 10px;
}
.program-list-controls label {
    padding: 5px 0px;
}
.program-list-clear {
    background: var(--primary-color);
    padding: 5px;
    border-radius: 5px;
    color: white;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    margin-top: 10px;
}
.program-pagination-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}
.program-pagination-wrap .pageButton {
    padding: 0px 8px;
    line-height: 38px;
    font-size: 1rem;
    cursor: pointer;
}
.program-pagination-wrap .pageButton.currentPage {
    font-weight: bold;
    font-size: 1.4rem;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 5px;
    cursor: default;
    text-decoration: none;
}
.program-pagination-wrap .dots.pageButton {
    cursor: default;
    text-decoration: none;
    padding-left: 0px;
    padding-right: 0px;
}
.program-inquiry-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 5px;
    background: var(--primary-color);
    color: white;
    padding: 0px 2px;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
.program-inquiry-wrap label {
    display: block;
    padding: 5px;
    cursor: pointer;
    user-select: none;
}
input.program-inquiry-check {
    display: block;
    width: 25px;
    height: 25px;
    margin-left: 5px;
    border: 1px solid white;
    cursor: pointer;
}
.program-list-inquiry-controls {
    margin-top: 10px;
}
.program-list-bundle-inquiry {
    font-size: 1.1rem;
    background: var(--secondary-color);
    color: white;
    padding: 15px;
    flex-shrink: 0;
    border-radius: 15px;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
.program-list-bundle-inquiry:disabled {
    background: var(--alternative-text-color-4);
    color: var(--alternative-text-color-2);
    border: none;
}
.checkUncheckAllPrograms {
    font-size: 1.1rem;
    padding: 15px;
    margin-left: 5px;
    flex-shrink: 0;
    border-radius: 15px;
    background: var(--alternative-text-color-4);
    color: var(--alternative-text-color-2);
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
}
.checkUncheckAllPrograms.is-check {
    background: var(--secondary-color);
    color: white;
}
h1.program-list-header {
    font-size: 2.4rem;
    font-weight: bold;
    margin: 50px 0px;
}

.school-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 30px;
    grid-column-gap: 40px;
}
.school-card {
    width: 100%;
    border-radius: 5px;
    position: relative;
}
.school-card-image a {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.school-card-image img {
    border-radius: 5px;
}
#contents-right .school-card-image img {
    -webkit-filter: none;
    filter: none;
}
.school-card-body {
    padding: 10px 0px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.school-card-title {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.05em;
    display: inline-block;
    padding-left: 5px;
}
.school-card-text {
    margin-top: 10px;
}
img.school-card-country {
    position: absolute;
    top: -30px;
    left: 5px;
}

.school-card-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: block;
    box-sizing: border-box;
}
.school-card-buttons .detailsButton {
    padding: 10px 25px;
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    background-position: center;
    transition: background 0.7s;
    text-decoration: none;
}
.school-card-buttons .detailsButton:hover {
    background: var(--secondary-light-color);
}

.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}

.four-column-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.article-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 40px;
    grid-column-gap: 40px;
}
.article-card {
    width: 100%;
    border-radius: 5px;
    position: relative;
    background: var(--secondary-text-color);
    padding: 10px;
    border: 1px solid var(--alternative-text-color-3);
    box-sizing: border-box;
}
.article-card-head {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--alternative-text-color-3);
    text-decoration: none;
}
.article-card-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-top: 5px;
}
.article-card-image-trimmer {
    height: 57px;
    width: auto;
    border-radius: 5px;
    overflow: hidden;
    display: inline-block;
    flex-shrink: 0;
    max-width: 150px;
}
.article-card-image-trimmer img {
    display: inline-block;
    height: 57px;
    width: auto;
}
.article-card-text {
    position: absolute;
    width: 300px;
    top: 130px;
    right: 35px;
}
.article-card-text p {
    position: relative;
}

.article-card-time {
    font-size: 1.1em;
    color: var(--primary-dark-color);
    font-weight: bold;
    padding-left: 10px;
}
.article-card-title {
    display: inline-block;
    color: var(--alternative-text-color-1);
    font-size: 1.1em;
    font-weight: bold;
    padding-left: 10px;
}
.moretag {
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    box-sizing: border-box;
    display: inline-block;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    transition: background 0.7s transform 0.7s;
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.moretag a {
    color: var(--secondary-text-color);
    text-decoration: none;
    padding: 10px 25px;
    display: inline-block;
}
.article-card-writer-photo {
    border-radius: 5px;
}
.article-card-writer-name {
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    /* padding-left: 10px; */
}
.article-card-writer-name,
.article-card-writer-name:link,
.article-card-writer-name:visited {
    color: var(--alternative-text-color-1);
}
.article-card-writer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.experiences-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.experience-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.experience-card {
    background-color: #eee;
    display: inline-block;
    margin: 0.5em 0;
    width: 280px;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    position: relative;
}
#contents-right .experience-card span img {
    -webkit-transition: -webkit-filter 0.8s, -webkit-transform 0.8s;
    transition: filter 0.8s, transform 0.8s;
}
#contents-right .experience-card span img:hover {
    transform: scale(1.2);
}

.experience-card-flag {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    border: 1px solid black;
}
.experience-card-style {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    padding: 5px;
    background: var(--secondary-dark-color);
    color: var(--secondary-text-color);
    border-radius: 5px;
}
.experience-card-image span {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.experience-card-image img {
    border-radius: 5px;
}
.experience-card-title {
    text-decoration: none;
    font-size: 1em;
    display: block;
    color: var(--alternative-text-color-1);
    font-weight: bold;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 5px;
}
.experience-card-name {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
    display: block;
    color: var(--secondary-text-color);
    padding: 5px 10px 0px;
    text-shadow: var(--strong-text-shadow);
}
.experience-card-text {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
}
.experience-header {
    display: flex;
    align-items: center;
}
.experience-page-flag {
    margin-right: 20px;
}

.search-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
}
.search-card {
    margin: 0;
    border-bottom: 1px solid var(--alternative-text-color-3);
    width: 100%;
    padding-bottom: 5px;
}
.search-card-title {
    padding: 10px 0;
    box-sizing: border-box;
    font-weight: bold;
    display: inline-block;
    color: var(--alternative-text-color-2);
    font-size: 1em;
    margin-left: auto;
}
/* .search-card-image {
	max-height: 400px;
	overflow: hidden;
}
.search-card-image img{
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.search-card-excerpt {
	padding: 10px;
} */

.style-card-list {
    width: 100%;
    margin: 100px 0px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-row-gap: 80px;
}
.style-card {
    width: 100%;
    border-radius: 5px;
}
.style-card img {
    border: 1px solid var(--alternative-text-color-3);
}
.style-card-copy {
    width: 100%;
    color: var(--alternative-text-color-2);
    font-weight: bold;
    font-size: 1.15em;
    padding-top: 20px;
    box-sizing: border-box;
}

.style-page-link {
    top: 20px;
    left: 20px;
}

.style-page-main-img {
    width: 900px;
    max-width: 100%;
    display: block;
    border-radius: 5px;
}
.style-top-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 40px;
}
.style-top-card {
    width: 100%;
    position: relative;
}
.style-top-card img {
    border: 1px solid var(--alternative-text-color-3);
    box-sizing: border-box;
}

.style-single-top-img {
    position: relative;
    width: 900px;
    height: 338px;
    max-width: 100%;
    border-radius: 5px;
}
.style-single-img-title {
    display: inline-flex;
    position: absolute;
    bottom: 20px;
    right: 10px;
    flex-direction: column;
}
.style-single-img-title span {
    font-weight: bold;
    color: white;
    padding: 0px 50px;
    text-shadow: var(--strong-text-shadow);
}
.style-single-title h1 {
    text-align: right;
    font-size: 2.8rem;
    border-bottom: 2px solid white;
    line-height: 48px;
    margin-bottom: 0px;
}
/* .style-single-title h1 {
	text-align: right;
	font-size: 2.8rem;
	line-height: 48px;
	margin-bottom: 0px;
	text-shadow: none;
	background: var(--primary-color);
	display: inline-block;
	margin-left:auto;
	padding: 7px;
} */
.style-single-img-title span.style-single-catch-copy {
    padding-top: 10px;
    text-align: left;
    font-size: 1.2rem;
}
#contents-right .country-card span img {
    -webkit-transition: -webkit-filter 0.8s, -webkit-transform 0.8s;
    transition: filter 0.8s, transform 0.8s;
}
#contents-right .country-card span img:hover {
    transform: scale(1.2);
}

.style-top-card-image span {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    position: relative;
}
.style-top-card-image img {
    border-radius: 5px;
    width: 100%;
    height: auto;
}
.style-top-card-title {
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em;
    display: block;
    color: var(--secondary-text-color);
    padding: 5px 10px;
    text-shadow: var(--strong-text-shadow);
}
.style-top-card-buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    background: var(--primary-light-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.style-top-card-buttons .detailsButton:hover {
    background: var(--secondary-light-color);
}
.style-top-header {
    display: flex;
    align-items: center;
}

.after-countryInfo-link {
    margin-left: auto;
}
.after-countryInfo-link::before {
    font-family: "icomoon", sans-serif;
    content: "\f054";
}

.event-card-list {
    width: 100%;
    margin: 50px 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 40px;
}
.event-card {
    /* width: 100%; */
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    position: relative;
    padding: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}
.event-card-title {
    text-decoration: none;
    color: var(--alternative-text-color-2);
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 10px;
}
.event-card-buttons {
    position: relative;
}
.event-card-buttons a,
.event-card-buttons button {
    display: inline-block;
    width: auto;
}

.visa-lead {
    padding: 25px 0px 0px;
    font-size: 90%;
    font-weight: normal;
}

.visa-card-list {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 600px;
}
.visa-card {
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: var(--card-box-shadow);
    position: relative;
    padding: 10px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30px;
    width: 100%;
}
.visa-card-flag {
    border: 1px solid #666;
    border-radius: 3px;
    margin-right: 20px;
}
.visa-card-title {
    text-decoration: none;
    color: var(--alternative-text-color-2);
    font-weight: bold;
    font-size: 1em;
}
.visa-card-buttons {
    position: relative;
}
.visa-card-buttons a {
    display: inline-block;
    width: 100px;
    margin-left: auto;
}

.list-buttons-wrap {
    margin: 50px 0;
    width: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}
.list-buttons-wrap a,
.list-buttons-wrap p {
    width: 90%;
}
.list-buttons-wrap p {
    text-align: center;
    padding: 20px;
    background: var(--alternative-text-color-3);
    color: var(--alternative-text-color-2);
    margin: 10px auto;
    box-shadow: none;
    cursor: unset;
}

table {
    border-radius: 5px;
}
table th {
    border-radius: 5px;
    font-weight: bold;
    color: var(--primary-color);
}

table th,
table td {
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid var(--alternative-text-color-3);
}

table.no-border-table,
table.no-border-table th,
table.no-border-table td {
    border: none;
}

table.striped {
    background: var(--alternative-light-color-2);
    border: none;
    border-radius: 0px;
    width: 100%;
    margin: 20px 0px;
}
table.striped tr {
    border: none;
    border-radius: 0px;
}
table.striped th,
table.striped td {
    font-weight: normal;
    color: var(--primary-text-color);
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
}
table.striped th {
    width: 30%;
    padding-right: 25px;
}
table.striped thead th,
table.striped thead td {
    font-weight: bold;
    color: var(--secondary-text-color);
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
    background: var(--primary-color);
}
table.striped tr:nth-child(even) {
    background: var(--alternative-light-color);
}

table.striped-alt {
    background: white;
    border: none;
    border-radius: 0px;
    width: 100%;
    margin: 20px 0px;
}
table.striped-alt tr {
    border: none;
    border-radius: 0px;
}
table.striped-alt th,
table.striped-alt td {
    font-weight: normal;
    color: var(--primary-text-color);
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
}
table.striped-alt th {
    width: 30%;
    padding-right: 25px;
}
table.striped-alt thead th,
table.striped-alt thead td {
    font-weight: bold;
    color: var(--secondary-text-color);
    border: none;
    border-radius: 0px;
    padding: 10px 15px;
    background: var(--third-color);
}
table.striped-alt tr:nth-last-child(odd) {
    background: var(--alternative-light-color-2);
}

table.w20 th,
table.w20 td {
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid var(--alternative-text-color-3);
}
table.w20 th {
    width: 20%;
    color: var(--primary-dark-color);
    font-weight: bold;
    border-radius: 0;
    text-align: right;
}
table.w20 a {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
    color: var(--alternative-text-color-2);
}
table.w50 {
    width: 100%;
}
table.w50 th,
table.w50 td {
    width: 50%;
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid var(--alternative-text-color-3);
}
table.w50 th {
    color: var(--primary-dark-color);
    font-weight: bold;
}
table.w80 {
    width: 100%;
}
table.w80 th,
table.w80 td {
    box-sizing: border-box;
    vertical-align: top;
}
table.w80 th {
    width: 80%;
    padding-right: 5%;
}
table.w33 {
    width: 100%;
}
table.w33 th {
    color: var(--primary-dark-color);
    font-weight: bold;
    border-radius: 0px;
}
table.w33 th,
table.w33 td {
    width: calc(100% / 3);
    box-sizing: border-box;
    padding: 5px 10px;
    border-bottom: 1px solid var(--alternative-text-color-3);
    word-break: break-all;
}
table.cost tbody {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
table.cost tr {
    border-bottom: 1px solid var(--alternative-text-color-3);
}
table.cost th,
table.cost td {
    box-sizing: border-box;
    padding: 5px 10px;
    border: none;
}
table.cost th {
    color: var(--primary-dark-color);
    font-weight: bold;
}
table.cost td {
    text-align: left;
}

table.experiences {
    width: 100%;
    margin: 20px 0;
}
table.experiences th {
    width: 70%;
    padding: 0 20px 0 0;
    vertical-align: top;
    box-sizing: border-box;
}
table.experiences td {
    width: 30%;
    padding: 0 0 20px 0;
    vertical-align: top;
    box-sizing: border-box;
}
div.counselling-description {
    width: 100%;
    margin: 20px auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    padding: 20px;
}
div.counselling-description img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.staff-list div.staff-list-head {
    display: flex;
    flex-direction: row;
}
div.staff-list-head img {
    width: 150px;
    height: auto;
    padding-right: 10px;
    padding-bottom: 10px;
}
.list,
.staff-list,
.experiences-list,
.country-list {
    padding: 10px 20px;
    margin: 50px 0 0 0;
    position: relative;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}
table.normal {
    width: 100%;
}
table.normal th,
table.normal td {
    padding: 10px 20px;
    border: 1px solid #ccc;
}
table.normal th {
    background-color: #ecedfe;
}
.list h4 a {
    font-size: 120%;
    font-weight: bold;
}
.list table,
.staff-list table,
.experiences-list table {
    width: 100%;
}
.list table th,
.staff-list table th,
.experiences-list table th {
    width: 15%;
    height: 60px;
    box-sizing: border-box;
    vertical-align: central;
}
.list table td,
.staff-list table td,
.experiences-list table td {
    width: 60%;
    box-sizing: border-box;
    vertical-align: top;
    padding-left: 20px;
}
.staff-list table td,
.experiences-list table td {
    width: 85%;
}
td.button {
    width: 30% !important;
    vertical-align: middle !important;
}
.staff-list a,
.experiences-list a {
    color: var(--alternative-text-color-1);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}
.posttype {
    display: inline-block;
    font-size: 75% !important;
    font-weight: bold;
    background-color: var(--primary-light-color);
    padding: 5px;
}
.country-list table {
    width: 100%;
}
.country-list table th {
    width: 15%;
    height: 70px;
    box-sizing: border-box;
    vertical-align: central;
}
.rank-1st,
.rank-2nd,
.rank-3rd {
    float: left;
    margin-right: 10px;
    padding: 14px 10px 0 10px;
    color: var(--secondary-text-color);
    font-size: 90%;
    font-weight: bold;
}
.rank-1st {
    background: url(../img/bg_rank-1st.png) no-repeat;
    background-size: contain;
}
.rank-2nd {
    background: url(../img/bg_rank-2nd.png) no-repeat;
    background-size: contain;
}
.rank-3rd {
    background: url(../img/bg_rank-3rd.png) no-repeat;
    background-size: contain;
}
.country-list table td {
    width: 60%;
    box-sizing: border-box;
    vertical-align: top;
    padding-left: 20px;
}
.country-list table td h4 {
    font-size: 120%;
    font-weight: bold;
    margin-top: 10px;
}

.big-button {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    text-decoration: none;
    padding: 20px;
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-light-color)
    );
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    width: 70%;
    font-weight: bold;
    color: var(--secondary-text-color);
    font-size: 180%;
    box-shadow: var(--card-box-shadow);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    text-align: left;
    margin: 70px auto;
    border: none;
}
.big-button img {
    height: 50px;
    width: 50px;
    margin-top: 10px;
    margin-right: 15px;
}
.big-button span {
    font-size: 0.8rem;
    color: white;
    display: block;
    font-weight: normal;
}
a.big-button,
a.big-button:link,
a.big-button:visited {
    color: var(--secondary-text-color);
}
.big-button.small-text {
    font-size: 100%;
    text-align: center;
    padding: 10px;
    margin: 10px auto;
}
.big-button.big-text {
    font-size: 180%;
}
.big-button.green-button {
    background: linear-gradient(
        135deg,
        var(--secondary-dark-color),
        var(--secondary-color)
    );
    width: 50%;
    min-width: 300px;
}
.big-button.small-margin {
    margin: 30px 0px;
}
.big-button.no-margin {
    margin: 0px;
}

.halfleft,
.halfright {
    width: 48% !important;
    float: left;
    margin: 10px 1%;
}
.notlink.halfleft,
.notlink.halfright {
    margin: 10px auto;
    color: var(--secondary-text-color);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 5px;
    background: var(--alternative-text-color-3);
    width: 48% !important;
    margin: 10px 1%;
    cursor: default;
}
a.country-page-bundle-button {
    max-width: 40%;
    margin-left: 0px;
}

.addCounsellingButton {
    font-size: 0.9rem;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
    line-height: 1.7;
}
.addedToBox,
.addedToForm {
    color: var(--secondary-text-color);
}

.addCounsellingButton.addedToBox {
    background: linear-gradient(
        135deg,
        var(--secondary-dark-color),
        var(--secondary-color)
    );
}

.space-button {
    margin: 70px auto;
}
.box {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px;
}
.trim,
.trim-half {
    overflow: hidden;
    width: 150px;
    height: 150px;
    position: relative;
}
.trim-half {
    width: 50%;
    height: 300px;
}
.trim img,
.trim-half img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 5px;
}
.writer img {
    border-radius: 5px;
}
.tag {
    padding: 15px;
    border: 2px solid var(--primary-dark-color);
    border-radius: 10px;
    margin: 70px 0px 0px;
}
.tag-title {
    padding-bottom: 10px;
    font-size: 1.1em;
}
.tag ul li a {
    float: left;
    margin-right: 10px;
    line-height: 1em;
    background: var(--primary-dark-color);
    color: var(--secondary-text-color);
    display: inline-block;
    white-space: nowrap;
    padding: 10px;
    margin-top: 3px;
    border-radius: 5px;
    text-decoration: none;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
}
.tag ul li a:before {
    font-family: "icomoon", sans-serif;
    content: "\f02b";
    padding-right: 0.5em;
}
a.move {
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 1.2em;
}
a.move,
a.back {
    text-decoration: none;
    margin: 20px 0px;
}
a.move:before,
a.back:before {
    font-family: "icomoon", sans-serif;
    color: var(--alternative-text-color-1);
}
a.move:before {
    content: "\f054";
    padding-right: 5px;
}
a.back:before {
    content: "\f053";
    padding-right: 5px;
}
.notice-list {
    border-bottom: 1px solid var(--alternative-text-color-3);
    padding: 20px 20px 20px 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.notice-list .posttype {
    position: static;
    float: left;
    margin: 10px 10px 0 0;
}
.notice-list h4 {
    width: 80%;
    font-size: 110%;
    font-weight: bold;
    color: var(--primary-color);
    padding-top: 10px;
}
.notice-list a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.notice-list:after {
    font-family: "icomoon", sans-serif;
    content: "\f054";
    position: absolute;
    left: 95%;
    top: 33%;
    color: var(--primary-color);
    font-size: 1.8em;
}
.agent_country {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}
.agent_country img {
    display: block;
    float: left;
    margin: 0 3% 2% 0;
}
ul.city {
    width: 100%;
    margin: 10px 0;
}
ul.city li {
    margin: 5px 0;
}
ul.city li a {
    padding: 15px 0 10px;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    display: block;
    color: var(--alternative-text-color-2);
    position: relative;
    font-size: 110%;
    max-width: 600px;
    font-weight: bold;
}
ul.city li a:after {
    font-family: "icomoon", sans-serif;
    content: "\f054";
    position: absolute;
    left: 95%;
    font-size: 110%;
    line-height: 1.1em;
}
.writer {
    margin: 70px 0;
    width: 100%;
}
.writer p.writer-hl {
    background-color: var(--primary-dark-color);
    color: var(--secondary-text-color);
    padding: 5px 10px;
    display: inline-block;
    margin-top: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.writer p.writer-hl:before {
    font-family: "icomoon", sans-serif;
    content: "\f007";
    padding-right: 5px;
}
.writer table {
    border-top: 2px solid var(--primary-dark-color);
    width: 100%;
}
.writer table th {
    width: 15%;
    height: 80px;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    vertical-align: top;
}
.writer table td {
    width: 85%;
    padding: 10px;
    box-sizing: border-box;
    vertical-align: top;
}
.writer2 {
    margin: 20px 0;
    width: 100%;
}
.writer2 img {
    border-radius: 5px;
}
.writer2 table {
    width: 100%;
}
.writer2 table th {
    width: 15%;
    height: 80px;
    box-sizing: border-box;
    vertical-align: top;
}
.writer2 table td {
    width: 85%;
    padding-left: 10px;
    box-sizing: border-box;
    vertical-align: top;
}
dl.staff-question {
    margin-top: 20px;
}
dl.staff-question dt {
    border-left: 4px solid #f393d0;
    padding: 5px 0 5px 10px;
    font-weight: bold;
    font-size: 110%;
    margin: 20px 0 10px 0;
    background-color: #fff7da;
}
.paging {
    width: 900px;
    margin: 20px 0;
}
.next-post,
.prev-post {
    /* width:49%;
	box-shadow: var(--card-box-shadow); */
    text-align: center;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
/* .next-post{
	float:left;
}
.prev-post{
	float:right;
} */
.paging a {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
}
.paging a:before,
.paging a:after {
    font-family: "icomoon", sans-serif;
    color: var(--primary-color);
}
.paging a:before {
    content: "\f053";
    padding-right: 5px;
}
.paging a:after {
    content: "\f054";
    padding-left: 5px;
}
.program-info-badges {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.program-info-badges p {
    flex-shrink: 0;
}
.programphoto {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.programphoto div.trim {
    overflow: hidden;
    width: 100%;
    height: 300px;
    position: relative;
    border-radius: 5px;
}
.programphoto div.trim img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 5px;
    height: 300px;
}
.programphoto p {
    padding: 0 10px;
}
.product-type {
    margin: 10px 10px 10px 0;
    background: var(--primary-light-color);
    padding: 5px 10px;
    color: var(--alternative-text-color-1);
    border-radius: 5px;
    display: inline-block;
    font-size: 0.85em;
}

#main-form #submitOtoiawase {
    padding: 5px 20px !important;
    font-size: 1.1em;
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    border: none;
    box-shadow: var(--card-box-shadow);
    cursor: pointer;
    margin-top: 10px;
    border-radius: 5px;
}
#main-form label {
    display: block;
    margin: 20px 0px 5px;
}
#main-form input {
    border: none;
    border-bottom: 1px solid var(--alternative-text-color-2);
}
#main-form input:focus {
    outline: none;
}
#main-form textarea {
    border-radius: 5px;
}

/*-----------------------------------------
　サイドメニューアコーディオン
-----------------------------------------*/
#sidemenu {
    padding: 5px 10px;
    box-sizing: border-box;
}
#sidemenu h3 {
    box-sizing: border-box;
    font-size: 110%;
    background: white;
    border-bottom: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
    padding: 2px 10px;
    margin: 0 0 5px;
    width: 100%;
}
#sidemenu a {
    text-decoration: none;
}
#sidemenu a span {
    padding: 3px 10px;
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--alternative-text-color-2);
}
#sidemenu a img {
    border-radius: 5px;
}

#sidemenu label {
    display: block;
    cursor: pointer;
    background-color: #f4f4f4;
    font-weight: 700;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    margin: 5px 0;
    position: relative;
    color: var(--alternative-text-color-1);
}
#sidemenu label:after {
    font-family: "icomoon", sans-serif;
    content: "\f078";
    position: absolute;
    right: 10px;
    top: 20%;
}
#sidemenu input {
    display: none;
}

#sidemenu ul li {
    display: block;
    width: 80%;
}
.sidemenuac {
    margin: 5px 0;
}
.sidemenuac li {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li,
#menu_bar11:checked ~ #links11 li,
#menu_bar12:checked ~ #links12 li {
    max-height: 46px;
    opacity: 1;
}

/*-----------------------------------------
　並び替えボタン
-----------------------------------------*/
.result {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px 0;
    box-sizing: border-box;
    margin-top: 10px;
}
.result form {
    display: inline;
}
.result input[type="submit"] {
    color: #006efd;
    padding: 0;
    margin: 0;
    box-shadow: none;
    background: none;
    border: none;
    font-size: 0.85em;
    text-decoration: underline;
    cursor: pointer;
}
.sort_current {
    font-weight: bold;
    text-decoration: none;
}

/*-----------------------------------------
　検索フォーム
-----------------------------------------*/
.searchform {
    position: relative;
    width: 280px;
    float: left;
}
.searchfield {
    width: 100%;
    padding: 5px;
    border: solid 1px #bbb;
    border-radius: 4px;
    background-color: #efefef;
    box-sizing: border-box;
}
.search-submit {
    font-size: 1.4em;
    position: absolute;
    top: -7px;
    right: 0;
    margin-top: 10px;
    padding: 0;
    cursor: pointer;
    color: var(--alternative-text-color-2);
    border: none;
    background: transparent;
}

/*-----------------------------------------
　ページャー
-----------------------------------------*/
.pager {
    width: 100%;
    font-size: 100%;
    text-align: center;
}
.pager a {
    box-sizing: border-box;
    padding: 6px 13px;
    color: var(--secondary-color);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 4px solid var(--secondary-color);
    line-height: 3;
}
.pager a:hover {
    background: var(--secondary-color);
    color: var(--secondary-text-color);
    text-decoration: none;
    box-sizing: border-box;
    border-bottom: 4px solid var(--secondary-color);
    border-radius: 5px;
}
span.current {
    box-sizing: border-box;
    padding: 6px 13px;
    background: var(--primary-color);
    color: var(--secondary-text-color);
    border-bottom: 4px solid var(--primary-color);
    line-height: 3;
    border-radius: 5px;
}

/*-----------------------------------------
　タブ
-----------------------------------------*/
.tabs {
    margin: 50px 0px;
    width: 100%;
}
.tab_item {
    /* border-bottom:3px solid var(--primary-color); */
    background-color: var(--primary-light-color);
    font-size: 90%;
    text-align: center;
    color: var(--primary-text-color);
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    border-right: 2px solid #fff;
    box-sizing: border-box;
    padding: 10px 20px;
}
.tab_item:hover {
    opacity: 0.75;
}
input[name="tab_item"] {
    display: none;
}
.tab_content {
    display: none;
    padding: 20px 0;
    overflow: hidden;
    border-top: 3px solid var(--primary-color);
}
#companyinfo:checked ~ #companyinfo_content,
#program:checked ~ #program_content,
#staff:checked ~ #staff_content,
#experiences:checked ~ #experiences_content,
#event:checked ~ #event_content {
    display: block;
}
.tabs input:checked + .tab_item {
    background-color: var(--primary-color);
    color: var(--secondary-text-color);
    font-size: 120%;
}

/*-----------------------------------------
　手配可能な国＆スタイル
-----------------------------------------*/
.country-style-accordion {
    min-width: 300px;
    margin: 0 auto;
    padding: 0;
}
.country-style-accordion .ac-content {
    margin: 0 0 20px 0;
    padding: 0;
}
.country-style-accordion input {
    display: none;
}
.country-style-accordion label {
    display: block;
    background-color: var(--secondary-text-color);
    cursor: pointer;
    padding: 10px;
    border: 2px solid var(--primary-color);
    box-sizing: border-box;
    margin-top: 10px;
    position: relative;
    border-radius: 5px;
}
.country-style-accordion label:after {
    font-family: "icomoon", sans-serif;
    content: "\f078";
    position: absolute;
    left: 97%;
    top: 30%;
}
.country-style-accordion label.request {
    background-color: var(--secondary-color);
}
.country-style-accordion label img {
    vertical-align: middle;
    margin-right: 5px;
}
.country-style-accordion .ac-cont {
    transition: 0.2s;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;
}
.country-style-accordion input:checked + .ac-cont {
    height: auto;
    padding: 10px;
    box-sizing: border-box;
}

/*-----------------------------------------
　絞り込み検索
-----------------------------------------*/
.refine {
    background-color: var(--secondary-text-color);
    margin: 40px 0;
    box-sizing: border-box;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
.refine select {
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    border-radius: 5px;
}
.refine table th,
.refine table td {
    padding-right: 10px;
}
.refine input[type="submit"] {
    margin-left: 10px;
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    text-align: center;
    position: relative;
    border-style: none;
    cursor: pointer;
    font-size: 100%;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    box-shadow: var(--card-box-shadow);
}
.refine input[type="submit"]:hover {
    background: var(--secondary-light-color);
}

/*-----------------------------------------
　クリックで表示
-----------------------------------------*/
.hidden_box {
    padding: 0;
}
.hidden_box label {
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    color: #0083e1;
}

.hidden_box label:hover {
    background: #efefef;
}

.hidden_box input {
    display: none;
}
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/*-----------------------------------------
フッター
-----------------------------------------*/
#footer {
    /*position:absolute;*/
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    background: var(--primary-dark-color);
}
#footer p.copyright {
    font-size: 90%;
    color: var(--secondary-text-color);
}
#footer p.copyright a {
    color: var(--secondary-text-color);
    text-decoration: none;
}
#footer-link {
    padding: 20px 0;
    margin-top: 140px;
    font-size: 90%;
    background: var(--primary-dark-color);
    color: var(--secondary-text-color);
    /* border:1px solid #CCC; */
}
#footer-link ul {
    clear: both;
    width: 1025px;
    margin: 20px auto 0;
}
#footer-link ul.under,
#footer-link ul.over {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
#footer-link li {
    padding: 0 10px;
    box-sizing: border-box;
    margin: 3px 0;
}
#footer-link ul li a {
    text-decoration: none;
    color: var(--secondary-text-color);
    font-size: 1em;
}
.terms-of-use {
    font-weight: bold;
}

/*-----------------------------------------
ページトップへ戻る
-----------------------------------------*/
#page-top {
    position: fixed;
    bottom: 44px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
    background: url(../img/bg_totop.png) no-repeat;
    background-position: center;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    display: block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#page-top a:hover {
    opacity: 0.6;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/*------------------------------------------------
  ビジュアルエディタ用css
 -----------------------------------------------*/
table.voice p,
.news-detail p {
    display: block;
    margin: 0 0 20px 0;
}
.news-detail p.date {
    margin: 0 0 10px 0;
}
strong {
    font-weight: bold !important;
}
em {
    font-style: italic !important;
}
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
/* img */
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright {
    float: right;
}
.alignleft {
    float: left;
}
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
    border-radius: 5px;
}
/* clearfix */
.clearfix {
    overflow: hidden;
    zoom: 1;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.movie-wrap {
    text-align: center;
    margin-bottom: 40px;
}
figure.credit {
    position: relative;
}
figure.credit figcaption font {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

/*------------------------------------------------
  一括資料請求フォーム
-----------------------------------------------*/
.sugu {
    /* background-color:#F393D0; */
    color: black;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
}
.bundle-page-top-text {
    margin-bottom: 50px;
    padding: 15px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
}
.bundle-page-top-text img {
    margin-right: 20px;
    height: 100px;
    width: 100px;
    float: left;
}
textarea {
    resize: none;
}
#above-bundle-span {
    font-size: 120%;
    padding: 0;
}
#above-bundle-span div {
    padding: 5px 10px;
    background: var(--alternative-text-color-4);
    border-radius: 5px;
}
#above-bundle-span div span {
    display: block;
    font-weight: normal;
    font-size: 100%;
}
#above-bundle-span div span.aki-bundle-form-header {
    text-decoration: underline;
    font-weight: bold;
    font-size: 110%;
}

#form-agents h3#aboveForm {
    margin-top: 10px;
}
#counsellingDiv #form-agents h3 {
    font-weight: bold;
    font-size: 1.1em;
}
#bundleDiv,
#formInquiry,
#form-agents,
#counsellingDiv {
    width: 100%;
}
#request #formInquiry,
#request #form-programs {
    width: 80%;
    margin: 0 auto;
}
#form-programs .inquiry-info-left {
    width: 20%;
}
#form-programs .inquiry-info-left span {
    margin: 0 auto;
}
#form-programs .inquiry-info-right {
    width: 80%;
}

.inquiry-info-right {
    font-size: 120%;
    padding: 20px;
}

#relatedAgents {
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
    border: 3px solid var(--primary-color);
    border-radius: 5px;
}
.related-agent-header {
    font-weight: bold;
    font-size: 110%;
    color: var(--primary-color);
}
.related-agent {
    display: flex;
    flex-direction: row;
    align-content: center;
    padding: 5px 0px 0px;
}
.related-agent span {
    font-weight: bold;
    font-size: 110%;
}
.related-agent-checkbox {
    margin-right: 20px;
}

.single-page-bundle {
    max-width: 600px;
    padding-bottom: 20px;
}
#bundleDiv h3 {
    background: var(--primary-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px 10px;
    color: var(--secondary-text-color);
    font-weight: bold;
    font-size: 130%;
    box-sizing: border-box;
    margin: 30px 0 20px 0;
}
#bundleDiv label,
#formInquiry label,
#counsellingDiv label {
    margin-top: 35px;
    display: inline-block;
}
#bundleDiv label[for="lastName"],
#bundleDiv label[for="lastFurigana"],
#bundleDiv label[for="age"],
#bundleDiv label[for="gender"],
#bundleDiv label[for="inquiryZip"],
#bundleDiv label[for="inquiryAddress"],
#bundleDiv label[for="inquiryPhone"],
#bundleDiv label[for="inquiryEmail"],
#bundleDiv label[for="job"],
#bundleDiv label[for="message"],
#formInquiry label[for="lastName"],
#formInquiry label[for="lastFurigana"],
#formInquiry label[for="age"],
#formInquiry label[for="gender"],
#formInquiry label[for="inquiryZip"],
#formInquiry label[for="inquiryAddress"],
#formInquiry label[for="inquiryPhone"],
#formInquiry label[for="inquiryEmail"],
#formInquiry label[for="job"],
#counsellingDiv label[for="message"],
#counsellingDiv label[for="lastName"],
#counsellingDiv label[for="lastFurigana"],
#counsellingDiv label[for="age"],
#counsellingDiv label[for="gender"],
#counsellingDiv label[for="inquiryZip"],
#counsellingDiv label[for="inquiryAddress"],
#counsellingDiv label[for="inquiryPhone"],
#counsellingDiv label[for="inquiryEmail"],
#counsellingDiv label[for="job"],
#counsellingDiv label[for="message"] {
    display: block;
}
#bundleDiv label[for="woman"],
#bundleDiv label[for="man"],
#counsellingDiv label[for="man"] {
    margin-top: 0;
}
#bundleDiv select#job,
#inquiryDiv select#job,
#counsellingDiv select#job {
    margin-bottom: 15px;
}

#bundleDiv select,
#inquiryDiv select,
#counsellingDiv select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--alternative-text-color-2);
    border-radius: 3px;
}

#inquiryDiv.visible {
    padding: 20px;
    box-shadow: var(--card-box-shadow);
}
#inquiryDiv h1 {
    width: 100%;
    padding: 20px 10%;
    font-size: 160%;
    font-weight: bold;
}
#inquiryDiv h1 img {
    margin-right: 10px;
}

#bundleDiv .fieldset {
    width: 100%;
    margin: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 30px;
}

#bundleDiv .fieldset div {
    width: 100%;
    box-sizing: border-box;
    padding: 1% 3% 1% 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#bundleDiv .fieldset div label {
    padding-left: 5px;
    font-size: 120%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-top: 0;
}
#bundleDiv .fieldset div img {
    border-radius: 5px;
    border: 1px solid var(--alternative-text-color-2);
    margin-right: 10px;
}
#bundleDiv input[type="radio"],
#inquiryDiv input[type="radio"],
#counsellingDiv input[type="radio"],
#bundleDiv input[type="checkbox"],
#inquiryDiv input[type="checkbox"],
#counsellingDiv input[type="checkbox"] {
    height: 20px;
    width: 20px;
}

#bundleDiv input[type="text"],
#bundleDiv input[type="number"],
#bundleDiv textarea,
#bundleDiv input[type="email"],
#bundleDiv input[type="date"],
#inquiryDiv input[type="text"],
#inquiryDiv input[type="number"],
#inquiryDiv textarea,
#inquiryDiv input[type="email"],
#inquiryDiv input[type="datel"],
#counsellingDiv input[type="text"],
#counsellingDiv input[type="number"],
#counsellingDiv textarea,
#counsellingDiv input[type="email"],
#counsellingDiv input[type="date"] {
    width: 100%;
    padding: 2px;
    border: none;
    border-bottom: 1px solid var(--alternative-text-color-2);
    box-sizing: border-box;
    /* border-radius: 3px; */
}
#bundleDiv textarea,
#inquiryDiv textarea,
#counsellingDiv textarea {
    border: 1px solid var(--alternative-text-color-2);
}
#inquiryDiv input:focus,
#bundleDiv input:focus,
#counsellingDiv input:focus,
#inquiryDiv select:focus,
#bundleDiv select:focus,
#counsellingDiv select:focus,
#inquiryDiv textarea:focus,
#bundleDiv textarea:focus,
#counsellingDiv textarea:focus {
    outline: none;
}
label[for="time2"],
label[for="time3"],
label[for="ampm1"] {
    display: block !important;
}
label[for^="countryInput"] {
    font-weight: bold;
}
#bundleDiv input[type="text"]#lastName,
#bundleDiv input[type="text"]#lastFurigana,
#inquiryDiv input[type="text"]#lastName,
#inquiryDiv input[type="text"]#lastFurigana,
#counsellingDiv input[type="text"]#lastName,
#counsellingDiv input[type="text"]#lastFurigana {
    width: 48%;
    margin-right: 1.5%;
}
#bundleDiv input[type="text"]#firstName,
#bundleDiv input[type="text"]#firstFurigana,
#inquiryDiv input[type="text"]#firstName,
#inquiryDiv input[type="text"]#firstFurigana,
#counsellingDiv input[type="text"]#firstName,
#counsellingDiv input[type="text"]#firstFurigana {
    width: 49%;
}
#form-agents ul li {
    border-bottom: 1px solid var(--alternative-text-color-3);
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
#form-agents ul li span {
    display: block;
    padding-right: 60px;
    word-break: break-all;
    font-weight: bold;
}
#form-agents button.removeAgent {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    padding: 5px 10px;
    text-align: center;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    position: absolute;
    right: 3%;
    top: 5px;
}
#form-agents button.removeAgent:hover {
    background-color: var(--secondary-light-color);
}
button#doOver {
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    padding: 8px 15px;
    text-align: center;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    margin-top: 10px;
}
button#doOver:hover {
    background-color: var(--secondary-light-color);
}
p.aki-no-agents-found {
    margin-top: 10px;
    padding: 20px 10px;
    background: var(--alternative-text-color-4);
    border-radius: 5px;
}
#form-programs {
    border: 3px solid var(--primary-color);
    border-radius: 10px;
}
.form-programs-header {
    padding: 10px 20px;
    display: block;
    font-size: 110%;
    font-weight: bold;
}
#form-programs table {
    width: 100%;
    font-size: 90%;
}
#form-programs table th {
    width: calc(100% / 3);
    padding: 8px;
    box-sizing: border-box;
    background-color: #f393d0;
    color: var(--secondary-text-color);
    font-weight: bold;
    text-align: center;
}
#form-programs table td {
    width: calc(100% / 3);
    padding: 10px;
    box-sizing: border-box;
}
.programPill,
.eventPill,
.agentPill,
.schoolPill {
    color: var(--secondary-text-color);
    width: 100px;
    text-align: center;
    display: block;
    padding: 5px 0;
    box-sizing: border-box;
    font-size: 100%;
    font-weight: bold;
    border-radius: 20px;
    -webkit-border-radius: 20px;
}
.programPill {
    background-color: var(--primary-color);
}
.eventPill {
    background-color: var(--primary-dark-color);
}
.agentPill {
    background-color: var(--secondary-dark-color);
}
.schoolPill {
    background-color: var(--secondary-color);
}

#form-age-div,
#form-gender-div {
    width: 48%;
    display: inline-block;
}
#form-age-div {
    margin-right: 2%;
}
.form-zip-region {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
.form-zip-div,
.form-region-div {
    width: 48%;
    flex-grow: 0;
    flex-shrink: 0;
}
.form-region-div {
    display: flex;
    flex-direction: column;
    width: 50%;
}
#counsellingDiv .form-zip-region > .form-region-div > select,
#bundleDiv .form-zip-region > .form-region-div > select,
#inquiryDiv .form-zip-region > .form-region-div > select {
    height: 22px;
    font-size: 14px;
    display: inline-block;
    padding: 0;
    flex-grow: 0;
}
#counsellingDiv label.form-error,
#bundleDiv label.form-error,
#inquiryDiv label.form-error {
    font-weight: bold;
    color: var(--primary-dark-color);
}
#counsellingDiv input.form-error,
#bundleDiv input.form-error,
#inquiryDiv input.form-error {
    border-bottom: 2px solid var(--primary-dark-color);
}
#counsellingDiv select.form-error,
#bundleDiv select.form-error,
#inquiryDiv select.form-error {
    border: 2px solid var(--primary-dark-color);
    color: var(--primary-dark-color);
}

/*------------------------------------------------
  個別資料請求フォーム
-----------------------------------------------*/
#request {
    width: 80%;
    margin: 0 auto;
}
.remodal ol {
    text-align: left !important;
}
.remodal ol li {
    list-style: decimal;
    margin-left: 20px;
}
.remodal ol li ul li {
    list-style: disc;
}

/*------------------------------------------------
  カート
 -----------------------------------------------*/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
#inquiryBoxContent {
    background-color: #fefefe;
    margin: 120px auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 40%;
    display: inline-block;
    min-width: 200px;
    border-radius: 5px;
}
/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#inquiryBoxContent {
    position: relative;
}
span#closeInquiryBox {
    position: absolute;
    left: 20px;
    top: 10px;
    cursor: pointer;
}
#modalPrograms table {
    font-size: 90%;
    width: 100%;
    margin: 20px 0;
}
#modalPrograms table th,
#modalPrograms table td {
    border-bottom: 1px solid var(--alternative-text-color-3);
    padding: 10px 20px;
    box-sizing: border-box;
    cursor: pointer;
}

#modalPrograms table td {
    width: 20%;
    background-color: white;
    color: var(--primary-color);
    font-weight: bold;
}
#modalPrograms table th {
    text-decoration: none;
    font-weight: bold;
    color: var(--alternative-text-color-2);
    border-right: 1px solid var(--alternative-text-color-3);
}
#modalPrograms table tr:first-child {
    border: none;
    border-bottom: 2px solid var(--alternative-text-color-1);
    font-weight: bold;
}
#modalPrograms table tr:first-child th,
#modalPrograms table tr:first-child td {
    border: none;
    background: white;
}

#modalPrograms strong {
    font-size: 1.2em;
}

.removeFromBox {
    font-weight: bold;
    font-size: 1.4em;
}

/*------------------------------------------------
  投稿記事用ヘッダー
 -----------------------------------------------*/
.article {
    margin: 20px 0 40px;
}
.article p {
    margin: 10px 0;
}
h2 {
    font-weight: bold;
    font-size: 2.3em;
    margin: 30px 0;
}
.article h2,
.citycontents h2,
.stylecontents h2,
.experoencecontents h2,
.countrycontents h2 {
    background: var(--primary-color);
    margin: 50px 0;
    color: var(--secondary-text-color);
    padding: 0px 5px;
}
.article h3,
.citycontents h3,
.stylecontents h3,
.experoencecontents h3,
.countrycontents h3 {
    font-weight: bold;
    margin: 50px 0;
    font-size: 1.7em;
    color: var(--primary-color);
}
.countrycontents h3 {
    margin: 40px 0 15px 0;
}
.article h4,
.citycontents h4,
.stylecontents h4,
.experoencecontents h4,
.countrycontents h4 {
    font-weight: bold;
    font-size: 1.4em;
    border-left: solid 5px var(--primary-color);
    color: var(--primary-text-color);
    margin: 30px 0;
    padding: 0em 0.5em;
}

.article h5,
.citycontents h5,
.stylecontents h5,
.experoencecontents h5,
.countrycontents h5 {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 30px 0;
    color: var(--primary-text-color);
}
.article h5:before,
.citycontents h5:before,
.stylecontents h5:before,
.experoencecontents h5:before,
.countrycontents h5:before {
    content: "■";
    color: var(--primary-color);
    padding-right: 10px;
}
.article h6,
.citycontents h6,
.stylecontents h6,
.experoencecontents h6,
.countrycontents h6 {
    margin: 30px 0;
    font-weight: bold;
    font-size: 1rem;
}
.article h6:before,
.citycontents h6:before,
.stylecontents h6:before,
.experoencecontents h6:before,
.countrycontents h6:before {
    content: "・";
    padding-right: 5px;
}

.article img {
    border-radius: 5px;
}

.article-h1 {
    font-size: 2.2em;
    font-weight: bold;
    margin-top: 10px;
}

div.mokuji {
    display: flex;
    flex-direction: column;
    text-align: left;
    border-radius: 5px;
    padding: 10px;
    font-size: 110%;
    font-weight: bold;
}
div.mokuji a {
    border-left: 5px solid var(--primary-color);
    padding: 0px 10px;
    border-radius: 5px;
    align-self: flex-start;
    font-size: 85%;
    margin: 7px 0;
}
div.mokuji h4 {
    margin: 10px 0;
    padding-bottom: 5px;
}
div.mokuji a.mokuji-small {
    text-decoration: none;
    padding-left: 20px;
    border: none;
}
div.mokuji div {
    display: flex;
    flex-direction: row;
    align-content: center;
}

div.auto-mokuji {
    display: flex;
    flex-direction: column;
    text-align: left;
    border-radius: 5px;
    padding: 10px;
    font-size: 110%;
    font-weight: bold;
}
div.auto-mokuji a {
    padding: 0px 10px;
    border-radius: 5px;
    align-self: flex-start;
    font-size: 85%;
    margin: 7px 0;
}
div.auto-mokuji h4 {
    margin: 10px 0;
    padding-bottom: 5px;
}
div.auto-mokuji a.mokuji-small {
    text-decoration: none;
    padding-left: 20px;
    border: none;
}
div.auto-mokuji div {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.country-info-top-img {
    position: relative;
    width: 900px;
    height: 338px;
    max-width: 100%;
    border-radius: 5px;
}
.country-info-flag {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 2;
    /* border: 1px solid black; */
    box-shadow: var(--strong-text-shadow);
}
.country-info-img-title {
    display: inline-flex;
    position: absolute;
    bottom: 20px;
    right: 10px;
    flex-direction: column;
}
.country-info-img-title span {
    font-weight: bold;
    color: white;
    padding: 0px 50px;
    text-shadow: var(--strong-text-shadow);
}
.country-info-title-country-name {
    text-align: right;
    font-size: 2.4rem;
    border-bottom: 2px solid white;
    line-height: 40px;
}
.country-info-title-style-name {
    text-align: left;
    font-size: 2.8rem;
}

.country-info-related-link {
    margin-top: 70px;
    margin-right: 5px;
    padding: 10px 15px;
    font-size: 120%;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    border-left: 5px solid var(--primary-dark-color);
    border-top: 5px solid var(--primary-dark-color);
    border-bottom: 5px solid var(--primary-dark-color);
    border-right: 3px solid var(--primary-dark-color);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}
.country-info-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 10px;
}
.country-info-list-item {
    font-weight: bold;
    display: flex;
    align-items: center;
    padding: 10px;
    border: 3px solid var(--alternative-text-color-2);
    color: var(--alternative-text-color-2);
    position: relative;
    font-size: 110%;
    max-width: 600px;
    border-radius: 5px;
}
.country-info-list li a {
    text-decoration: none;
}

/*------------------------------------------------
  コメント欄
 -----------------------------------------------*/
.comment-respond {
    margin: 20px 0;
}
.comment-respond textarea {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.comment-respond input[type="submit"] {
    width: 60%;
    margin: 10px auto;
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    display: block;
    text-align: center;
    position: relative;
    border-style: none;
    cursor: pointer;
    font-size: 120%;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px #333;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.comment-respond input[type="submit"]:hover {
    box-shadow: none;
    transform: translateY(2px);
}
.comment-form-author,
.comment-form-email,
.comment-form-url {
    width: 100%;
    margin: 10px 0;
}
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
    padding: 5px;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    display: inline-block;
    width: 15%;
}

.ak-social-link {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    font-weight: bold;
    margin-bottom: 5px;
}
.ak-social-logo {
    height: 20px;
    margin-right: 5px;
}

/*------------------------------------------------
  icomoon
 -----------------------------------------------*/
@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?hv6jfx");
    src: url("../fonts/icomoon.eot?hv6jfx#iefix") format("embedded-opentype"),
        url("../fonts/icomoon.ttf?hv6jfx") format("truetype"),
        url("../fonts/icomoon.woff?hv6jfx") format("woff"),
        url("../fonts/icomoon.svg?hv6jfx#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="fa-"],
[class*=" fa-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-line:before {
    content: "\e900";
    color: #00c300;
}
.fa-user:before {
    content: "\f007";
}
.fa-tag:before {
    content: "\f02b";
    padding-right: 0.5em;
}
.fa-pencil:before {
    content: "\f040";
    padding-right: 10px;
}
.fa-map-marker:before {
    content: "\f041";
    padding-right: 10px;
}
.fa-chevron-left:before {
    content: "\f053";
}
.fa-chevron-right:before {
    content: "\f054";
}
.fa-plane:before {
    content: "\f072";
}
.fa-chevron-down:before {
    content: "\f078";
}
.fa-shopping-cart:before {
    content: "\f07a";
}
.fa-twitter-square:before {
    content: "\f081";
}
.fa-facebook-square:before {
    content: "\f082";
}
.fa-google-plus-square:before {
    content: "\f0d4";
}
.fa-envelope:before {
    content: "\f0e0";
    padding-right: 10px;
}
.fa-file-text:before {
    content: "\f15c";
    padding-right: 10px;
}
.fa-graduation-cap:before {
    content: "\f19d";
    padding-right: 10px;
}
.fa-mortar-board:before {
    content: "\f19d";
}
.fa-building:before {
    content: "\f1ad";
    padding-right: 10px;
}
.fa-user-circle:before {
    content: "\f2bd";
    padding-right: 10px;
}
.fa-share-alt:before {
    content: "\f1e0";
}
.fa-arrow-circle-up:before {
    content: "\f0aa";
}