/*----------------------------------------
全ページ共通CSS：base.css
CDNで適用されるcssは「_bootstrap-4.1.3-dist」参照のこと
bootstrapの既存クラス名はすべてのページに影響するので注意、
カスタムする場合は新規クラス/IDを追加
任意のクラスには大文字を入れる
-------------------------------------------*/

html {
  font-size: 16px;
}

body {
  background-color: #f8f9fa;
  color: var(--dark);
}

#brandLogo {
  /*TOPとマージンを合わせる*/
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

/* パンくずリスト */

#breadCrumb {
  font-size: 13px;
}

#breadCrumb2 {
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.breadcrumb {
  background-color: var(--light);
  border-radius: 0;
  margin-bottom: 0;
}

/* カラー----------------------------------- */

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #aaadaf;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --logocolor: #0e6eb3;
  --p-pink: #f26baa;
  --p-blue: #88e8f2;
  --p-blue2: #e5f7fd;
  --p-blue3: #a4cfef;
  --p-green: #aef2b9;
  --p-yellow: #f2d57e;
  --p-red: #f28d8d;
  --p-gray: #dee2e6;
  --p-purple: #bc94e2;
  --fontMincyo: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",
    "ＭＳ 明朝", serif;
  --fontKosugi: "Kosugi Maru", sans-serif;
  --fontEn: "Varela Round", sans-serif;
  --select-color1: #3598db;
  --select-color2: #2dcc70;
  --select-color3: #1bbc9b;
  --select-color4: rgb(241, 196, 15);
  --select-color5: #f39c11;
  --select-color6: #e84c3d;
  --select-color7: #9a59b5;
  --select-color8: #34495e;
}

.logocolor {
  color: rgba(14, 110, 179, 1);
}
.p-black{
  color: black;
}
.p-pink {
  color: rgba(242, 107, 170, 1);
}

.p-blue {
  color: rgba(136, 232, 242, 1);
}

.p-blue3 {
  color: #a4cfef;
}

.v-blue {
  color: #0a31ff;
}

.p-green {
  color: rgba(174, 242, 185, 1);
}

.p-yellow {
  color: rgba(242, 213, 126, 1);
}
.p-orange {
    color: rgb(215, 128, 61);
  }
  

.p-red {
  color: rgba(242, 141, 141, 1);
}

.tomato {
  color: tomato;
}

.choco {
  color: #a12000;
}
.purple {
  color: #4d08bc;
}
.brown{
  color: #5E3412;

}

/* 背景とボーダー */
.gdc-blue{
  color: #32B0C2;
}
.bg-gdc-blue{
  background-color: #32B0C2;
}

.bg-gdc-red{
  background-color: #DC6879;
}
.bg-gdc-yellow{
  background-color: #EEC53B;
}
.bg-gdc-green{
  background-color: #2CB280;
}

.bg-23blue{
  background-color: #93DEFE;
}

.bg-23yellow{
  background-color: #FDDD33;
}
.bg-23white{
  background-color: #F9F8FA;
}

.b-dot{
  border-bottom:  2px dotted rgb(103, 103, 108);
  padding-bottom: 0.25em; 
  margin-bottom: 0.5em; 
}

.bg-eme{
  background-color: #53E7BF;
}
.bg-pink{
  background-color: #E752A3;
}

.bg-logocolor {
  background-color: rgba(14, 110, 179, 1) !important;
}

.bg-logocolor-cl {
  background-color: rgba(14, 110, 179, 0.8);
}
.bg-logocolor-cl2 {
  background-color: rgba(14, 110, 179, 0.5);
}

.border-logocolor-cl {
  border-color: rgba(14, 110, 179, 0.8) !important;
}

.bg-logocolor-mul {
  /* ミックスブレンドモード 乗算 */
  mix-blend-mode: multiply;
  background-color: rgba(13, 143, 224, 1);
}

.bg-logocolor-ove {
  /* ミックスブレンドモード：オーバーレイ */
  background-blend-mode: overlay;
  background-color: rgba(13, 143, 224, 1);
}

.bg-logocolor-scr {
  background-color: rgba(13, 143, 224, 1);
  /* ミックスブレンドモード 乗算 */
  mix-blend-mode: screen;
}

.bb-logocolor {
  /* 下線 */
  border-bottom: solid 3px var(--logocolor) !important;
  padding-bottom: 5px;
}

.bb-danger {
  /* 下線 */
  border-bottom: solid 3px var(--danger) !important;
  padding-bottom: 5px;
}

.bg-p-pink {
  background-color: rgba(242, 107, 170, 1);
}

.bg-p-pink-cl {
  background-color: rgba(242, 107, 170, 0.8);
}

.border-p-pink-cl {
  border-color: rgba(242, 107, 170, 0.8) !important;
}

.bg-p-blue {
  background-color: rgba(136, 232, 242, 1);
}

.bg-p-blue2 {
  background-color: #e5f7fd;
}

.bg-p-blue3 {
  background-color: #a4cfef;
}

.bg-p-blue-cl {
  background-color: rgba(40, 149, 161, 0.8);
}

.border-p-blue-cl {
  border-color: rgba(40, 149, 161, 0.8) !important;
}

.bg-p-green {
  background-color: rgba(174, 242, 185, 1);
}

.bg-p-green2 {
  background-color: rgb(228, 255, 233);
}

.bg-p-green-cl {
  background-color: rgba(74, 177, 91, 0.8);
}

.border-p-green-cl {
  border-color: rgba(74, 177, 91, 0.8) !important;
}

.bg-p-orange {
    background-color: rgb(250, 209, 152) !important;
  }
.bg-p-yellow {
  background-color: rgba(242, 213, 126, 1) !important;
}

.bg-p-yellow-cl {
  background-color: rgba(250, 202, 57, 0.8);
}

.border-p-yellow-cl {
  border-color: rgba(250, 202, 57, 0.8) !important;
}

.bg-yellow {
  background-color: #f0cf4e;
}

.btn-outline-mus {
  color: #b98f15;
  background-color: transparent;
  background-image: none;
  border-color: #b98f15;
}

.btn-outline-mus:hover {
  color: #fff;
  background-color: #b98f15;
  border-color: #b98f15;
}

.bg-mus {
  background-color: #b98f15 !important;
}


.bb-mus {
  /* 下線 */
  border-bottom: solid 3px #b98f15 !important;
  padding-bottom: 5px;
}

.bb-brown{
  border-color: #dead83 !important;

}

.bg-p-red {
  background-color: rgba(242, 141, 141, 1);
}

.bg-p-red2 {
  background-color: rgb(253, 216, 216);
}

.bg-p-red-cl {
  background-color: rgba(231, 102, 102, 0.8);
}

.border-p-red-cl {
  border-color: rgba(231, 102, 102, 0.8) !important;
}

.bg-p-purple {
  background-color: #bc94e2 !important;
}

.bg-p-purple2 {
  background-color: #e8e0f5 !important;
}

.p-purple {
  color: #9a59b5;
}

.p-purple:hover {
  color: #bc94e2;
}

.border-p-purple {
  border-color: #9a59b5 !important;
}

.bg-lightdot,
.btn-lightdot {
  background-image: url(../img/bg/bg-lightdot.png);
}

.bg-Sdot {
  background-image: url(../img/bg/bg-smalldot.png);
  background-size: cover;
}

.bg-lightstripe,
.btn-lightstripe {
  background-image: url(../img/bg/bg-lightstripe_wide.png);
  background-repeat: repeat;
}

.bg-yellowstripe,
.btn-yellowstripe {
  background-image: url(../img/bg/bg-yellowstripe.png);
}

.bg-cl-bstripe {
  background-image: url(../img/bg/bg-cl-bstripe.png);
}

.bg-cl-wstripe {
  background-image: url(../img/bg/bg-cl-wstripe.png);
}

.bg-cl-wstripe-bold {
  background-image: url(../img/bg/bg-cl-wstripebold.png);
}

.bg-pinkarch {
  background-image: url(../img/bg/pink-arch.png);
}

.bg-paper-Red {
  background-image: url(../img/bg/bg-lightstripe_red.png);
}

.bg-school-white{
  background-image: url(../img/bg/bg-school-white.png);
}

.bg-school-blue{
  background-image: url(../img/bg/bg-school-blue.png);
  background-repeat: repeat;
}

.bg-grd-blgr {
  background-image: linear-gradient(90deg, rgba(1, 233, 189, 1), rgba(0, 124, 222, 1));
}

/* テキスト ----------------------------------- */

.fontKosugi {
  /* webフォントに整形 */
  font-family: "Kosugi Maru", sans-serif;
}

.fontEn {
  /* 英語用webフォントに整形 */
  font-family: "Varela Round", sans-serif;
  font-weight: 900;
}

.fontMincyo {
  /* 明朝体 */
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3",
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝",
    "ＭＳ 明朝", serif;
}

.fontGothic {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.fs10 {
  font-size: 0.63rem;
}

.fs12 {
  font-size: 0.73rem;
  line-height: 0.87rem;
}

.fs14 {
  font-size: 0.87rem !important;
  line-height: 1.25rem;
}

.fs16 {
  font-size: 1rem !important;
  line-height: 1.12rem;
}

.fs18 {
  font-size: 1.12rem !important;
  line-height: 1.22rem;
}

.fs20 {
  font-size: 1.22rem !important;
  line-height: 1.5rem;
}

.fs30 {
  font-size: 30px !important;
}

.fsBig {
  font-size: 3rem !important;
}

.fsSmaller {
  font-size: smaller !important;
}

.fsBtn {
  font-size: 1rem;
}

/* 基本 ----------------------------------- */

/*アイコンの前後*/

i {
  padding-left: 0.25em;
  padding-right: 0.25em;
}

/*ホバーの下線をなくす*/

a:hover {
  color: #0056b3;
  text-decoration: none;
}

/*画像のホバーアクション*/

.img-hover:hover {
  background-color: rgba(14, 110, 179, 0.5);
  transition: 0.5s;
}

a:hover .imgWrap {
  background-color: rgba(14, 110, 179, 0.5);
}

/*画像のホバーアクション 角丸*/

.img-hoverMaru:hover {
  background-color: rgba(14, 110, 179, 0.5);
  border-radius: 10px;
  transition: 0.5s;
}

/* リストの文字化け対策 */

li {
  text-align: left;
}

/* リストアイコンを部分的になくす */

.listNone {
  list-style: none;
  margin-left: -2rem;
  padding-right: 0.5rem;
}

/* リストアイコンを矢印に */

.listArrow li {
  margin-left: -2rem;
  list-style: none;
  position: relative;
  padding-left: 10px;
}

.listArrow li:before {
  content: "";
  position: absolute;
  top: 0.35em;
  left: 0;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #8b6b4e;
}

/* 背景画像をなくす */

.bgNone {
  background-image: none !important;
}

/* 背景カラーをなくす */

.bcNone {
  background-color: transparent !important;
}

/* 画像をフィットさせる */
.img-fit {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 長いURLが折り返さない時 */

.longURL {
  word-break: break-all;
}

/* ボタンの文字がはみ出す */

.btn {
  white-space: normal !important;
}

/* レイアウト ----------------------------------- */

/* 上にずらす */
.mt--4{
    margin-top: -40px;
}
.mt--6{
    margin-top: -60px;
}

.row-eq-height {
  display: flex;
  flex-wrap: wrap;
}

/* 右寄せ */

.pull-right {
  float: right !important;
}

/* リストの字下げ　1em */

.indentLi {
  text-indent: -1em;
  padding-left: 1em;
}

/* リストの字下げ　2em */

.indentLi-2em {
  text-indent: -2em;
  padding-left: 2em;
}

.indentType {
  display: table;
}

.indentType .indentTypeIcon {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

.indentType .indentTypeText {
  display: table-cell;
  vertical-align: top;
}

.indentType .indentTypeText2 {
  display: table-cell;
  vertical-align: middle;
}

/* 装飾 ----------------------------------- */

/* 背景ボタン */

.btn-q {
  background-image: url(../img/bg/bg-q.png);
}

.btn-pinkarch {
  background-image: url(../img/bg/pink-arch-btn.PNG);
  background-repeat: repeat;
}

.btn-yellowstripe:hover,
.btn-lightstripe:hover,
.btn-lightdot:hover,
.btn-pinkarch:hover,
.btn-q:hover {
  opacity: 0.8;
}

/* バッジ */

.badge-q {
  color: #fff;
  font-size: 24px;
  background-color: var(--p-red);
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}

.badge-a {
  color: #fff;
  font-size: 24px;
  background-color: var(--p-blue);
  padding-top: 0.55em;
  padding-bottom: 0.55em;
}

/* 矢印タグ-------------------- */

/* 右矢印タグ */

.TagRight {
  border-radius: 8px 0 0 8px;
  color: #fff;
  display: inline-block;
  height: 70px;
  line-height: 70px;
  padding: 0 2em 0 3em;
  position: relative;
}

.TagRight::before {
  border: 35px solid transparent;
  border-right-width: 0;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: -35px;
  top: 0;
  width: 0;
}

.TagRight::after {
  border-radius: 8px 0 0 8px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 1em;
}

.TagRight:hover,
.TagLeft:hover {
  color: var(--dark);
}

/* 左矢印タグ */

.TagLeft {
  border-radius: 0 8px 8px 0;
  color: #fff;
  display: inline-block;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  text-align: center;
  padding: 0 2em 0 3em;
  position: relative;
  left: 35px;
}

.TagLeft::before {
  border: 35px solid transparent;
  border-left-width: 0;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  left: -35px;
  top: 0;
  width: 0;
}

.TagLeft::after {
  border-radius: 0 8px 8px 0;
  content: "";
  display: block;
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  width: 1em;
}

/* 矢印に追加+カラー青(answer) */

.TagColor-a {
  background: #5cd;
}

.TagColor-a::before {
  border-left-color: #5cd;
  border-right-color: #5cd;
}

.TagColor-a::after {
  background: var(--p-blue);
}

/* 矢印に追加+カラーオレンジ(question) */

.TagColor-q {
  background: rgb(255, 104, 104);
}

.TagColor-q::before {
  border-left-color: rgb(255, 104, 104);
  border-right-color: rgb(255, 104, 104);
}

.TagColor-q::after {
  background: rgb(255, 148, 148);
}

.TagText2 {
  /* 文字２行の時にpタグで囲んで追加 */
  line-height: 35px !important;
  padding: 0 0 0 1em !important;
}

p.TagText2 {
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}

/* 矢印バッジ */

.badgeTag-a {
  background: #5cd;
  border-radius: 8px 0 0 8px;
  color: #fff;
  display: inline-block;
  height: 70px;
  line-height: 70px;
  padding: 0 2em 0 3em;
  position: relative;
}

.badgeTag-a::before {
  border: 35px solid transparent;
  border-left-color: #5cd;
  border-right-width: 0;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: -35px;
  top: 0;
  width: 0;
}

.badgeTag-a::after {
  background: var(--p-blue);
  border-radius: 8px 0 0 8px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 1em;
}

.badgeTag-a:hover {
  color: var(--dark);
}

.badgeTag-q {
  background: rgb(255, 104, 104);
  border-radius: 8px 0 0 8px;
  color: #fff;
  display: inline-block;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  text-align: center;
  padding: 0 2em 0 3em;
  position: relative;
}

.badgeTag2 {
  /* 文字２行の時にpタグで囲んで追加 */
  line-height: 35px !important;
  padding: 0 0 0 1em !important;
}

.badgeTag-q::before {
  border: 35px solid transparent;
  border-left-color: rgb(255, 104, 104);
  border-right-width: 0;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: -35px;
  top: 0;
  width: 0;
}

.badgeTag-q::after {
  background: rgb(255, 148, 148);
  border-radius: 8px 0 0 8px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 1em;
}

/* .badgeTag-q:hover {
    background: rgb(255, 148, 148);
} */

.badgeTag-back {
  background: #5cd;
  border-radius: 0 8px 8px 0;
  color: #fff;
  display: inline-block;
  height: 70px;
  line-height: 70px;
  vertical-align: middle;
  text-align: center;
  left: 20px;
  padding: 0 2em 0 3em;
  position: relative;
}

p.badgeTag2 {
  display: inline-block;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
}

.badgeTag-back::before {
  border: 35px solid transparent;
  border-right-color: #5cd;
  border-left-width: 0;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  left: -35px;
  top: 0;
  width: 0;
}

.badgeTag-back::after {
  background: var(--p-blue);
  border-radius: 0 8px 8px 0;
  content: "";
  display: block;
  height: 100%;
  right: 0;
  position: absolute;
  top: 0;
  width: 1em;
}

/* 背景ボックス */

.bgBox {
  padding: 1em 0.75em 1em 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
}

/*ボタン*/

.btn-Special {
  color: var(--logocolor);
  border-color: #ffc107;
  border-width: 2px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fa709a),
    to(#fee140)
  );
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.btn-Special:hover {
  color: #ffc107;
  background-color: transparent;
  background-image: none;
  border-color: #ffc107;
  border-width: 2px;
}

/*ボタン アウトライン*/

.btn-outline-yellow {
  color: var(--logocolor);
  background-color: #ffc107;
  border-color: #ffc107;
  border-width: 2px;
}

.btn-outline-yellow:hover {
  color: #ffc107;
  background-color: transparent;
  background-image: none;
  border-color: #ffc107;
  border-width: 2px;
}

/*バッジ*/

.badge {
  /*日本語に合わせteズラす*/
  vertical-align: text-top;
}

.badgePrepend {
  /*バッジ前パーツ*/
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: text-top;
  border-radius: 0.25rem 0 0 0.25rem;
}

.badgeAppend {
  /*バッジ後ろパーツ*/
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: text-top;
  border-radius: 0 0.25rem 0.25rem 0;
}

/* リボン */

.ribbon4 {
  display: inline-block;
  position: relative;
  height: 40px;
  /*高さ*/
  line-height: 40px;
  /*高さ*/
  text-align: center;
  padding: 0 40px 0 18px;
  /*文字の左右の余白*/
  font-size: 18px;
  /*文字サイズ*/
  background: var(--logocolor);
  /*背景色*/
  color: #f8f9fa;
  /*文字色*/
  box-sizing: border-box;
  left: -1.5em;
}

.ribbon4:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon4:after {
  top: 0;
  right: 0;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #f8f9fa transparent transparent;
  border-style: solid;
}

@media (min-width: 768px) {
  .ribbon4 {
    left: -2em;
  }
}

/*バナー*/

.bnr-info {
  background-color: var(--logocolor);
  background-image: url(../img/bg/bg-cl-bstripe.png);
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
  color: white;
}

.bnr-title {
  font-size: 1.75rem;
  font-weight: bold;
  border-bottom: oldlace 2px solid;
}

/*バナーボタンにテキストホバーSTART///*/

.buttonArea {
  /* ---ボタンを表示する親要素---  */
  position: relative;
  display: inline-block;
  /* border: 2px solid var(--light);
    全体に枠を付ける
    background: var(--light);
   背景を枠色と合わせる */
  overflow: hidden;
  /* はみ出し範囲は非表示 */
  cursor: pointer;
  /* カーソル形状         */
  border-radius: 5px;
  /* 角丸                 */
  text-align: center;
}

.buttonArea:hover > div {
  /* ---親要素にマウスオーバー時に文字を表示する---  */
  left: 0;
  /* 親要素の左端に移動   */
  bottom: 0;
  /* 親要素の下端に移動   */
}

.buttonArea > div {
  /*---マウスオーバー時に表示される文字の要素--- */
  position: absolute;
  left: 0;
  /* 親要素の左に合わせる */
  bottom: -100%;
  /* 見えない上に移動     */
  transition: 0.5s;
  /* 変化時間             */
  box-sizing: border-box;
  /* 余白・罫線を含める   */
  width: 100%;
  /* 親要素の幅に合わせる */
  height: 70px;
  /* 文字要素の高さ       */
  color: white;
  /* 文字色               */
  background-color: rgba(14, 110, 179, 0.8);
  /* 背景色               */
  border-radius: 5px 5px 0px 0px;
  text-align: center;
  /* 文字位置             */
  font-size: 12pt;
  /* 文字サイズ           */
  line-height: 1.2;
  /* 1行の高さ            */
  padding-top: 8px;
}

/*バナーボタンにテキストホバーEND///*/

/*カードカラースタイルSTART///*/

.bg-opacity {
  /*画像に透明背景を載せる、画像後&テキストを囲うタグに入れる*/
  background: rgba(255, 255, 255, 0.7);
  height: 100%;
}

.cardBlue .bg-opacity,
.cardRed .bg-opacity {
  padding: 1em;
}

.cardRed .card-title {
  /*カードRed タイトル*/
  font-weight: bold;
  color: tomato;
  position: relative;
  padding: 1rem 0.5rem;
}

.cardRed .card-title::after {
  /*カードRed タイトル下線*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: "";
  border-radius: 3px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fa709a),
    to(#fee140)
  );
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

.cardBlue .card-title {
  /*カードBlue タイトル*/
  font-weight: bold;
  color: var(--logocolor);
  position: relative;
  padding: 1rem 0.5rem;
}

.cardBlue .card-title:after {
  /*カードBlue タイトル下線*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: "";
  border-radius: 3px;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#2af598),
    to(#009efd)
  );
  background-image: -webkit-linear-gradient(right, #2af598 0%, #009efd 100%);
  background-image: linear-gradient(to left, #2af598 0%, #009efd 100%);
}

/*カードスタイルEND///*/

/*----------------------------------------
メディアクエリ：
575px以下で適用するCSSはメディアクエリの外、
576px以上で適用するCSSはメディアクエリにて適用
-------------------------------------------*/

/* // モバイル〜横向きモバイル(sm), 576px 以下　基本的に使わない*/

@media (max-width: 576px) {
  .img-fluidSP {
    max-width: 100%;
    height: auto;
  }
  #studyTOKYO > h1 > .lead {
    font-size: smaller;
    line-height: 0.75em;
  }
  .TagLeft {
    padding: 0 1.5em 0 0;
    position: relative;
  }
  .TagRight {
    padding: 0 0 0 1.5em;
    position: relative;
  }
  .TagText2 {
    /* 文字２行の時にpタグで囲んで追加 */
    line-height: 23px !important;
    padding: 0 0.75em 0 0.75em !important;
    font-size: smaller;
  }
}

/* // タブレット(md), 768px 以下 */

@media (max-width: 768px) {
  /*SPで非表示、PCで表示*/
  .onlyPC {
    display: none;
  }
  /* フォントサイズ */
  .fs20 {
    font-size: 1.12rem !important;
    line-height: 1.5rem;
    font-weight: bold;
  }
  #studyTOKYO .fs30 {
    font-size: 24px !important;
  }
  .fsBig {
    font-size: 1.25rem !important;
    line-height: 1.5rem;
    font-weight: bold;
  }
  .fsBtn {
    font-size: 0.75rem;
  }
  .i-circle .fs20 {
    font-size: 1.12rem !important;
    line-height: 1.5rem;
    font-weight: normal !important;
  }
}

/* // タブレット(md), 769px 以上 */

@media (min-width: 769px) {
  /*PCで非表示、SPで表示*/
  .onlySP {
    display: none;
  }
}

/* // デスクトップ(lg) 以下 */

@media (max-width: 992px) {
  /*小さいPC以下で非表示、小さいPC以上で表示*/
  .overLg {
    display: none;
  }
}

/* // デスクトップ(lg) 以上 */

@media (min-width: 992px) {
  /*小さいPC以上で非表示、小さいPC以下で表示*/
  .lessLg {
    display: none;
  }
}

/* // デスクトップ(lg)・ワイド(xl), 1200px 以上 */

@media (min-width: 1200px) {
}