/*----------------------------------------
次階層ページCSS：second_base.css
次階層のベースCSS
TOPと共通のものはbase.css
任意のクラスには大文字を入れる
-------------------------------------------*/

/*-------------------------------------------------------------
h1ページタイトル
--------------------------------------------------------------*/

#pageTitle {
    background-image: url(../img/bg/bg-yellowstripe.png);
    background-repeat: repeat;
}

#pageTitle2 {
    background-image: url(../img/bg/bg-lightdot.png);
    background-repeat: repeat;
}




#pageTitle .ttlH1, #pageTitle2 .ttlH1 {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, .5);
    text-align: center;
}

#pageTitle .ttlH1B{
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, .5);
    text-align: center;
    border: 3px dotted #000;
}

#pageTitle h1, #pageTitle2 h1 {
    position: relative;
    padding: 0;
    text-align: center;
    font-size: 1.5rem;
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
}

/* h1タブ型のページタイトル */

#tabTitle {
    background-image: url(../img/bg/bg-yellowstripe.png);
    background-repeat: repeat;
}

#tabTitle .nav-item50 {
    padding: 1em 0 0 0;
    width: 50%;
    text-align: center;
}

#tabTitle .nav-item60 {
    padding: 1em 0 0 0;
    width: 60%;
    text-align: center;
}

#tabTitle .nav-item40 {
    padding: 1em 0 0 0;
    width: 40%;
    text-align: center;
}

#tabTitle .nav-link {
    padding: 1em;
}

#tabTitle .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

#tabTitle .nav-tabs .nav-link {
    border-color: white white #dee2e6;
    background-color: rgba(255, 255, 255, .5);
    color: #495057;
    font-family: 'Kosugi Maru', sans-serif;
}

#tabTitle .nav-link:hover, .nav-link:focus {
    border-color: white white #dee2e6;
    background-color: rgba(255, 255, 255, .8);
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
}

/*-------------------------------------------------------------
文字スタイル
--------------------------------------------------------------*/

.contSection {
    /* コンテンツボックス */
    background-color: #fff;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1rem 1.5rem 4rem 1.5rem;
}

.contSection2 {
    /* コンテンツボックス */
    background-color: #fff;
    display: block;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1rem 1.5rem 4rem 1.5rem;
}

h2.contSection  {
    /* メイン見出し */
    font-size: 1.75rem;
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    padding: 0.25em 0.5em;
    background: transparent;
    border-left: solid 5px var(--logocolor);
    margin: 0.5rem 0 1em 0;
}

.contSection .subh2 {
    /* メイン見出し */
    font-size: 1.5rem;
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    padding: 0.25em 0.5em;
    background: transparent;
    border-left: solid 5px var(--p-blue);
    margin: 0.5rem 0 1em 0;
}

.contSection h2 img.h2Icon {
    width: 32px;
    padding-bottom: 5px;
}

/* 記事の文字スタイル  */

.articleStyle h3 {
    color: black;
    font-size: 1.25rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    border: solid 2px var(--p-yellow);
    background-color: var(--p-yellow);
    margin: 1em 0;
}

.articleStyle h4 {
    color: black;
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    background-color: var(--p-blue2);
    margin-bottom: 1em;
}

.articleStyle h5 {
    color: black;
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    position: relative;
    /*アイコン分のスペース*/
    line-height: 1.4;
    margin-left: 0.5em;
    border-bottom: rgba(136, 232, 242, .5) solid 4px;
    display: table;
    border-radius: 2px;
    padding: 0 0.5em;
    margin-bottom: 1em;
}

.articleStyle h5.bbRed {
    font-weight: normal;
    border-left: var(--p-red) solid 4px;
    border-bottom: none;
    border-radius: 0;
}

.articleStyle h6 {
    font-family: 'Kosugi Maru', sans-serif;
}

.articleStyle p, .articleStyle dl {
    padding: 0 1rem;
    text-align: justify;
}

.card-body {
    text-align: justify !important;
}

.articleStyle .p-smaller {
    font-size: 0.87rem;
    line-height: 1.65em;
    padding: 0 1rem;
}

.articleStyle dd {
    padding-left: 1em;
}

.articleStyle ul.liTypeNone {
    list-style: none;
    padding-left: 0;
}

.articleStyle ul.liTypeNone li {
    padding-left: 1em;
}

/* 見出しテキスト効果クリア */

.textNone {
    color: inherit;
    font-size: inherit;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: inherit;
    padding: inherit;
    border: transparent !important;
    background-color: unset !important;
    margin: inherit;
}

.borderNone {
    border: transparent !important;
}

.lh15 {
    line-height: 1.5em;
}

.bLeft {
    border-left: solid 5px var(--logocolor);
}

.bBottom {
    color: var(--info);
    font-size: 1em;
    font-family: 'Kosugi Maru', sans-serif;
    border-bottom: dashed 2px var(--info);
}

.bBottomPrimary {
    color: var(--logocolor);
    font-size: 1em;
    font-family: 'Kosugi Maru', sans-serif;
    border-bottom: dashed 2px var(--primary);
}

.bBottomBlack {
    border-bottom: solid 2px black;
    display: inline-block;
}

.bBottomLogo {
    border-bottom: solid 2px var(--logocolor);
    display: inline-block;
}

.ttlSquare {
    position: relative;
    padding-left: 18px;
    /*アイコン分のスペース*/
    line-height: 1.4;
}

.ttlSquare:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c8";
    /*アイコンのユニコード*/
    font-weight: 900;
    position: absolute;
    /*絶対位置*/
    font-size: 1em;
    /*サイズ*/
    left: 0;
    /*アイコンの位置*/
    top: 0;
    /*アイコンの位置*/
    color: var(--p-blue3);
    /*アイコン色*/
    font-weight: 900;
}

.ttlCatch {
    display: inline-block;
    color: black;
    font-size: 28px;
    font-weight: bold;
    font-family: var(--fontKosugi);
    border-bottom: solid 3px var(--info);
    border-top: solid 3px var(--info);
    padding: 5px 10px;
}

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

/*テーブルSTART///*/

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

table#gakko, table.listV {
    border-collapse: collapse;
    /*テーブル内の余白削除*/
}

table.listV {
    border: 1px solid #6cb2e6;
    margin: 0 auto;
}

table.listV tr:first-child {
    border-top: #6cb2e6 solid 1px !important;
}

table.listV td {
    padding: 5px 15px;
    border-bottom: #6cb2e6 solid 1px;
    border-left: #6cb2e6 solid 1px;
    border-right: #6cb2e6 solid 1px;
    border-bottom: #6cb2e6 solid 1px;
}

.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #6cb2e6 !important;
}

table.listV th {
    background: var(--p-blue2);
    color: var(--logocolor);
    font-family: var(--fontKosugi);
    font-weight: 900;
    padding: 5px 15px;
    border-top: #6cb2e6 solid 1px;
    border-right: #6cb2e6 solid 1px;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/*テーブルEND///*/

/* テーブルスタイル ボーダーSTART///*/

.borderLightblue {
    border: 1px solid var(--p-blue3);
    padding: 1rem;
}

.borderYellow {
    border: 1px solid var(--p-yellow);
    padding: 1rem;
}

.lineLightblue {
    border: 1px solid #6cb2e6;
}

.lineYellow {
    border: 1px solid var(--p-yellow);
}

.bgLightblue {
    background-color: var(--p-blue3);
    padding: 0.5rem;
    color: #343a40;
}

.lineNone-tl {
    margin-top: -1px;
    margin-left: -1px;
}

/* テーブルスタイル ボーダーEND///*/

/* テーブル PDFリストSTART ///*/

.tablebox {
    padding: 0;
    border: 1px solid #eaeaea;
    border-radius: 0;
    background: #fff;
    margin-bottom: 15px;
}

.download li {
    padding: 10px;
}

.download li.title {
    background: var(--p-blue2);
    color: var(--logocolor);
    font-weight: 900;
    font-family: var(--fontKosugi);
    font-size: 14px;
    border-bottom: #ddd solid 1px;
    text-align: center;
    border: #6cb2e6 solid 1px;
    margin-top: -1px;
}

.download li.pdf {
    font-size: 14px;
    border-top: #ddd solid 1px;
    border: #6cb2e6 solid 1px;
    margin-top: -1px;
}

/* テーブル リストEND ///*/

/* 画像 -----------------------------*/

.thumbnail {
    border: none!important;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    margin-bottom: 20px;
    display: block;
}

/*---------------------------------------------------------------------
ページごと
----------------------------------------------------------------------*/

/* Study and Work in TOKYO 東京で学び、働く----------------------*/

h3.ttlbL, .ttlbL {
    /* 下線 ロゴカラー*/
    color: black;
    font-size: 1.12rem;
    border: transparent;
    border-bottom: solid 4px var(--info);
    background-color: var(--light);
    margin: 0;
}

h3.ttlbD, .ttlbD {
    /* 下線 赤*/
    color: black;
    font-size: 1.12rem;
    border: transparent;
    border-bottom: solid 4px var(--danger);
    background-color: var(--light);
}

h3.ttlbY, .ttlbY {
    /* 下線 黄色*/
    color: black;
    font-size: 1.12rem;
    border: transparent;
    border-bottom: solid 4px #dcad1f;
    background-color: var(--light);
    margin-top: 0;
}

h3.ttlbY-lg {
    /* 下線 黄色*/
    color: black;
    font-size: 1.5rem;
    border: transparent;
    border-bottom: solid 4px #B98F15;
    background-color: var(--light);
}

h3.ttllL, .ttllL {
    /* 下線 ロゴカラー*/
    color: black;
    font-size: 1.12rem;
    border: transparent;
    border-left: solid 4px var(--logocolor);
    background-color: var(--light);
}

h3.ttlQ {
    color: black;
    font-size: 1.12rem;
    display: inline-block;
    border: transparent;
    border-bottom: solid 4px var(--p-blue);
    background-color: white;
}

/* Study and Work in Tokyo ボタン */

.btnST-mus {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    background-color: var(--light);
    background-image: none;
}

.btnST-mus:hover {
    color: #fff;
    background-color: #B98F15;
    border-color: #B98F15;
}

.btnST-primary {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    background-color: var(--light);
    background-image: none;
}

.btnST-primary:hover {
    color: #fff;
    background-color: #53E7BF;
    border-color: #53E7BF;
}

.btnST-danger {
    color: black;
    font-family: 'Kosugi Maru', sans-serif;
    background-color: var(--light);
    background-image: none;
}

.btnST-danger:hover {
    color: #fff;
    background-color: #E752A3;
    border-color: #E752A3;
}

/* クイズフレーム */

h3.frameQ {
    /* クイズ　ポップなカラー*/
    color: black;
    font-weight: bold;
    border: transparent;
    margin-bottom: 0;
    border-bottom: solid 4px #5cd;
    background-color: var(--p-yellow);
    border-radius: 15px 15px 0 0;
}

.frameQ {
    /* クイズ　ポップなカラー*/
    color: black;
    font-size: small;
    font-weight: bold;
    border: transparent;
    margin-bottom: 0;
    border-bottom: solid 4px #5cd;
    background-color: var(--p-blue);
    border-radius: 15px 15px 0 0;
    padding: 5px 0 3px 10px;
}

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

.Tags {
    background: #5cd;
    border-radius: 3px 0 0 3px;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 0.5em 0 0.5em;
    position: relative;
    margin: 1em 1.5em 0 0;
}

.Tags::before {
    border: 15px solid transparent;
    border-left-color: #5cd;
    border-right-width: 0;
    content: '';
    display: block;
    height: 0;
    position: absolute;
    right: -15px;
    top: 0;
    width: 0;
}

/* クイズ　レベルボタン */

#quizJapanese {
    position: relative;
}

#quizJapanese p {
    /*pタグを画像の真ん中に*/
    position: absolute;
    top: 80%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0;
    /*余計な隙間を除く*/
    padding: 0;
    /*余計な隙間を除く*/
    color: white;
    /*文字色*/
    font-size: 25px;
    /*文字サイズ*/
    text-align: center;
    /*pタグ内で更に中央寄せ*/
    font-family: 'Quicksand', sans-serif;
}

/* ３カラムの画像を揃える------------------------- */

img.Thumbnail-Voice {
    width: 100%;
/*    height: 200px;
    object-fit: cover;*/
}

@media (min-width: 768px) and (max-width:992px) {
    img.Thumbnail-Voice {
        width: 100%;
/*        height: 100px;
        object-fit: cover;*/
    }
}

/*TOPICS------------------------------------------------------*/

.ttlNews {
    font-size: 1.25rem;
    color: var(--primary);
}

.Topics .newsDate {
    color: var(--yellow);
    padding-left: 0.5rem;
}

/*jumbotron 特集バナー------------------------------------------*/

.jumbotron {
    /*下のマージン消す*/
    margin-bottom: 0;
}

#kotoNews {
    /*専門学校の就職は*/
    background-image: url(../img/bg/bg_paper.jpg);
    background-repeat: repeat;
    background-blend-mode: lighten;
    padding: 1.25rem 0.5rem;
    border-radius: 5px;
    border: 2px solid var(--logocolor);
    max-width: 100%;
    background-color: rgb(216, 250, 253);
}

#kotoNews h4 {
    font-weight: bold;
    position: relative;
    padding: 0.25rem 0 1.5rem 0;
}

#kotoNews h4:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    content: '';
    background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
    background-size: 7px 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ルート　色別スタイル-------------------------------------------- */

/* ピンク(中学) */

.border-p-pink-cl .active img {
    outline: solid 2px var(--p-pink);
    outline-offset: -2px;
}

.card-group .border-p-pink-cl img:hover {
    outline: solid 2px var(--p-pink);
    outline-offset: -4px;
    transition: .2s;
}

.contSection h2.pink {
    border-left: solid 5px var(--p-pink);
}

.articleStyle h3.pink {
    border: solid 2px var(--p-pink);
    background-color: var(--p-pink);
}

.dlPink dt {
    color: var(--p-pink);
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* グリーン(高校) */

.border-p-green-cl .active img {
    outline: solid 2px var(--p-green);
    outline-offset: -2px;
}

.card-group .border-p-green-cl img:hover {
    outline: solid 2px var(--p-green);
    outline-offset: -4px;
    transition: .2s;
}

.contSection h2.green {
    border-left: solid 5px var(--p-green);
}

.articleStyle h3.green {
    border: solid 2px var(--p-green);
    background-color: var(--p-green);
}

.dlGreen dt {
    color: var(--success);
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* 赤(大学) */

.border-p-red-cl .active img {
    outline: solid 2px var(--p-red);
    outline-offset: -2px;
}

.card-group .border-p-red-cl img:hover {
    outline: solid 2px var(--p-red);
    outline-offset: -4px;
    transition: .2s;
}

.contSection h2.red {
    border-left: solid 5px var(--p-red);
}

.articleStyle h3.red {
    border: solid 2px var(--p-red);
    background-color: var(--p-red);
}

.dlRed dt {
    color: var(--danger);
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* 青紫(社会人) */

.border-logocolor-cl .active img {
    outline: solid 2px #3D8AC1;
    outline-offset: -2px;
}

.card-group .border-logocolor-cl img:hover {
    outline: solid 2px #3D8AC1;
    outline-offset: -5px;
    transition: .2s;
}

.contSection h2.blue {
    border-left: solid 5px #3D8AC1;
}

.articleStyle h3.blue {
    border: solid 2px #3D8AC1;
    background-color: #3D8AC1;
    color: white;
}

.dlBlue dt {
    color: #3D8AC1;
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* 黄(外国人) */

.border-p-yellow-cl .active img {
    outline: solid 2px var(--p-yellow);
    outline-offset: -2px;
}

.card-group .border-p-yellow-cl img:hover {
    outline: solid 2px var(--p-yellow);
    outline-offset: -4px;
    transition: .2s;
}

.contSection h2.yellow {
    border-left: solid 5px var(--p-yellow);
}

.articleStyle h3.yellow {
    border: solid 2px var(--p-yellow);
    background-color: var(--p-yellow);
}

.dlYellow dt {
    color: var(--warning);
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* 紫 */

.border-p-purple .active img {
    outline: solid 2px var(--p-purple);
    outline-offset: -2px;
}

.card-group .border-p-purple img:hover {
    outline: solid 2px var(--p-purple);
    outline-offset: -4px;
    transition: .2s;
}

.contSection h2.purple {
    border-left: solid 5px var(--p-purple);
}

.articleStyle h3.purple {
    border: solid 2px var(--p-purple);
    background-color: var(--p-purple);
}

.dlPurple dt {
    color: var(--warning);
    /* display: inline-block; */
    font-size: 1rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    padding: 0.5em;
    margin: 0 0 1em 0;
}

/* ポイントバブル　吹き出し風見出し-------------------------------------- */

.bubble {
    /* 角まる吹き出しベース */
    color: black;
    font-size: 1.25rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    position: relative;
    padding: 1.5rem 2rem;
    border-radius: 10px;
}

.bubble:before {
    position: absolute;
    bottom: -14px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
}

.bubble:after {
    position: absolute;
    bottom: -10px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
}

.bubble .pointNum {
    font-size: 2rem;
    font-family: var(--fontEn);
}

.bubble2 {
    /* 角カク吹き出しベース */
    color: black;
    font-size: 1.25rem;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5em;
    position: relative;
    padding: 1.5rem 2rem;
}

.bubble2:before {
    position: absolute;
    bottom: -14px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
}

.bubble2:after {
    position: absolute;
    bottom: -10px;
    left: 1em;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
}

/* ピンク 　.bubbleと合わせて使う*/

.bubblePink {
    border: 3px solid var(--p-pink);
    background: rgb(255, 229, 241);
}

.bubblePink:before {
    border-color: var(--p-pink) transparent transparent transparent;
}

.bubblePink:after {
    border-color: rgb(255, 229, 241) transparent transparent transparent;
}

/* 紫 .bubbleと合わせて使う*/

.bubblePurple {
    border: 3px solid #bc94e2;
    background: #ebd9fc;
}

.bubblePurple:before {
    border-color: #bc94e2 transparent transparent transparent;
}

.bubblePurple:after {
    border-color: #ebd9fc transparent transparent transparent;
}

/* 水色ボーダー */

h3.bubbleStripe, .bubbleStripe {
    background-image: url(../img/bg/bg-lightstripe_square.png);
    background-repeat: repeat;
    border: none;
}

h3.bubbleStripe:before, .bubbleStripe :before {
    border-color: #D8EBF8 transparent transparent transparent;
}

h3.bubbleStripe:after, .bubbleStripe:after {
    border-color: #D8EBF8 transparent transparent transparent;
}

/* 黄色ボーダー */

h3.bubbleStripeY, .bubbleStripeY {
    background-image: url(../img/bg/bg-yellowstripe.png);
    background-repeat: repeat;
    border: none;
}

h3.bubbleStripeY:before, .bubbleStripeY :before {
    border-color: #F4DA78 transparent transparent transparent;
}

h3.bubbleStripeY:after, .bubbleStripeY:after {
    border-color: #F4DA78 transparent transparent transparent;
}

/* 検索一覧------------------------------------------------------*/

/* バッジ */

.badge-guide {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    margin: 0 1px;
}

.badge-form {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    margin: 0 1px;
}

.badge-inquiry {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    margin: 0 1px;
}

/* newsletter----------------------------------------------------- */

/* メール見本　 */

.newsletter-topics {
    /* 上下に線*/
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding-top: 1em;
}

.newsletter-sub {
    /* 下に線*/
    border-bottom: 1px solid black;
    display: table;
    padding-top: 1em;
}

/* publication出版物のご案内とお申込  テーブル----------------------------------------------------- */
#table2to6{
  border: 1px solid #ccc;
}
#table2to6 li{
    list-style: none;
    }
    #table2to6 ul{
      margin: 0;
      padding: 0;
    }
    ul.price-flex{
      width: 100%;
    }
    ul.price-flex ul{
      display:-webkit-flex;
      display: flex;
    }
    ul.price-flex ul li{
      -webkit-flex-grow:1;
      flex-grow: 1;
      width: 25%;
      text-align: center;
      padding: 10px;
    }
    ul.price-flex ul .hd02,
    ul.price-flex ul .li02{
    /* 商品名 */
        width: 70%;
      }
      ul.price-flex ul .hd03,
      ul.price-flex ul .li03{
      /* 数量 */
          width: 30%;
        }
      ul.price-flex ul .hd04,
      ul.price-flex ul .li04{
      /* 数量 */
          width: 20%;
        }

    #table2to6 .head .hd{
        font-size: 0.75rem;
        font-weight: bold;
        text-align: left;
        color: white;
      
    }
    ul.price-flex ul .hd01,
    ul.price-flex ul .hd02,
    ul.price-flex ul .hd03,
    ul.price-flex ul .hd04,
    ul.price-flex ul .hd05,
    ul.price-flex ul .hd06{
        background-color: var(--dark); 
    }
    #table2to6 .price .li04,
    #table2to6 .price .li05{
        text-align: right;
      }

    @media screen and (max-width: 768px) {
      ul.price-flex ul{
        flex-wrap:wrap;
      }
     
      ul.price-flex ul .hd01,
      ul.price-flex ul .li01{
        width: 30%;
      }
      ul.price-flex ul .hd02,
      ul.price-flex ul .li02{
        width: 70%;
      }
      ul.price-flex ul .hd03,
      ul.price-flex ul .hd04,
      ul.price-flex ul .hd05,
      ul.price-flex ul .hd06{
        background-color: var(--gray); 
      }
    }

    

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

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

@media (max-width: 576px) {
    #btnPage .btn-group {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
    }
    #btnPage .btn-group>.btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

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

@media (max-width: 768px) {
    .contSection {
        padding: 1rem 0.75rem 4rem 0.75rem;
    }
    .articleStyle p, .articleStyle dl {
        padding: 0 0.75rem;
    }
    .contSection h2, .bubblePink .pointNum {
        /* メイン見出し */
        font-size: 1.5rem;
    }
    .ttlCatch {
        font-size: 1.22em !important;
        line-height: 1.5rem;
    }
    /*タブレット以下でtable切り替え*/
    .tableCellBara th {
        display: none;
        font-size: 14px;
    }
    .tableCellBara td {
        display: block !important;
        font-size: 14px;
        width: 100% !important;
        float: left;
    }
    .tableCellBara td:nth-child(1) {
        background: var(--p-blue2);
        color: var(--logocolor);
        font-family: var(--fontKosugi);
        margin-bottom: -1px;
        font-weight: 500;
    }
    #tableSPNone td.d-none {
        display: none !important;
    }
}

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

@media (min-width: 768px) {
    .contSection h2 img.h2Icon {
        width: 36px;
        padding-bottom: 5px;
    }
    /*3行分 */
    #pubTitle {
        font-size: 14px;
        height: 80px;
    }
}

/* // デスクトップ980px 以上 */

@media (min-width: 990px) {
    /*2行分 */
    #pubTitle {
        font-size: 14px;
        height: 56px;
    }
}

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

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