/* * * * *

box
テキスト
上書き
footer
image
タブ上部 start
タブ上部 end
戻すよう ※レスポンシブ関連
既存から移設
レスポンシブ 959以下のものに+適応
レスポンシブ 480p以下のものに+適応

* * * * * */

/* box */

/*-・-みたいなの折り返しよう*/
.text {
    overflow-wrap: break-word;
    word-break: break-all;
}

/*codeタグの文字長かった時の折り返し*/
pre, code {
    white-space: pre-wrap ;
}

.app-nav {
    padding: 3px 30px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
}

/* テーブル上部の余分な線削除 topで確認 */
thead {
    visibility: hidden;
}

/* trでborder指定のため */
table {
    border-collapse: collapse;
}

/*テーブル上部に線*/
tbody {
    border-top: 0.1rem solid #e1e1e1;
}

/*テーブルアイテムに線*/
tr {
    border-bottom: 0.1rem solid #e1e1e1;
}

.app-tr-adjustment {
    width: 100%;
    display: block;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* 広告用(仮) */

.app-advertising {
    width: 100%;
    height: 250px;
    text-align: center;
    background-color: #e3feef;
}

/*幅の調節*/
.row .column-responsive.column-84 {
    flex: 0 0 84%;
    max-width: 84%;
}
.row .column.column-84 {
    flex: 0 0 84%;
    max-width: 84%;
}

/*
タグのタイトルに使用している文字部分を囲んで強調する箇所
 */

.app-color-inline-block {
    background-color: #feedf5;
    display: inline-block;
    border-radius: 5px;
    padding: 10px 30px;
    font-weight: bold;
}

.app-label {
    display: inline-block;
    padding: 0.5px 14px;
    border-radius: 2px;
    color: white;
    font-size: 12px;
}

/* 記事詳細一言記述箇所の吹き出し部分  80pxはアイコン分*/

.app-speech-bubble {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    background-color: #676767;
    color: white;
    word-wrap: break-word;
    padding: 10px;
    margin: 0px 3px;
    width: calc(100% - 80px - 6px - 10px);
}

/* 記事詳細一言記述箇所の吹き出し部分 実際の吹き出し作成*/

#service-img::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    background-image: url(/img/app_default.png);
    background-size: contain;
    vertical-align: middle;
}

.app-speech-bubble::before {
    content: "";
    border: 15px solid;
    /*線幅 */
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: #676767;
    display: inline-block;
    margin-left: -30px;
    margin-top: 0px;
    height: 0;
    position: absolute;
}

.app-speech-bubble2 {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    background-color: #676767;
    color: white;
    word-wrap: break-word;
    line-height: 35px;
    padding: 10px 20px;
    /* padding-bottom: 6px; */
    margin: 0px 3px;
    /* width: calc(100% - 6px - 10px); */
}

.app-box-flex-side {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.app-box-flex-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.app-box-flex-center {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

/* TODO 名前の変更 box全般*/

.app-box-flex-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.app-box-flex-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.app-box-flex-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.app-box-flex-vertical {
    display: flex;
    flex-direction: column;
}

.app-container {
    display: flex;
}

.app-reaction-box-img {
    width: 15px;
}

.app-profile {
    padding: 10px;
    border: 0.3px solid;
    border-color: #e1e1e1;
}

/* テキスト */


#before_article_marked_content > h1{
    border-bottom: 2px solid lightgray;
}

#before_article_marked_content > h2{
    border-bottom: 2px solid lightgray;
}

#revised_article_marked_content > h1{
    border-bottom: 2px solid lightgray;
}

#revised_article_marked_content > h2{
    border-bottom: 2px solid lightgray;
}

/* view タイトル */
.view {
    word-break: break-all;
    word-wrap: break-word;
}

.tweet::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    margin-left: 2px;
    background-image: url(/img/Feather/twitter.svg);
    background-size: contain;
    vertical-align: middle;
}

.app-reaction-box-text {
    width: 15;
    padding-right: 10px;
    padding-left: 3px;
}

.app-title {
    font-size: 18px;
    font-weight: bold;
    padding: 5px 10px;
}

.app-user-name {
    font-size: 10px;
    width: 80px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-time-text {
    font-size: 12px;
}

.app-two-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
}

.app-one-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;
}

/* 上書き */

.content {
    padding: 1rem;
}

/* TODO IE、Firefox対応できていない */

/*ボタン　disabled時の挙動*/
.button[disabled],
button[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {
    background: #676767;
    opacity: 1;
    border: solid 0.1px #676767;
}

.button[disabled]:focus,
.button[disabled]:hover,
button[disabled]:focus,
button[disabled]:hover,
input[type="button"][disabled]:focus,
input[type="button"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="reset"][disabled]:hover,
input[type="submit"][disabled]:focus,
input[type="submit"][disabled]:hover {
    background: #676767;
    opacity: 1;
    border: solid 0.1px #676767;
}

.button.button-outline,
button.button-outline,
input[type="button"].button-outline,
input[type="reset"].button-outline,
input[type="submit"].button-outline {
    background: #676767;
    opacity: 1;
    border: solid 0.1px #676767;
}

label {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 自動改行させたく */

pre {
    white-space: pre-wrap;
    border-left: none;
}

/* 選択時の青枠なくす */

summary {
    outline: none;
}

/* リンクを文字を囲っているボックスに反応させる */

.app-two-line a {
    display: block;
}

.error-message {
    color: #820000;
}

/* 絞り込み切替タブ */

.app-top-tab-link {
    background-color: transparent;
    margin-right: 3px;
    border: solid 0.5px #606c76;
    /*線*/
    border-radius: 10px;
    font-size: 13px;
    padding: 13px 13px;
    /*角の丸み*/
}

.app-top-tab-link:link,
.app-top-tab-link:visited,
.app-top-tab-link:hover,
.app-top-tab-link:active {
    color: #606c76;
}

.app-title-link {
    color: #7f7f7f;
}

.app-title-link:link,
.app-title-link:visited,
.app-title-link:hover,
.app-title-link:active {
    color: #7f7f7f;
}


/* button heart */

.heart .button,
.heart button,
.heart input[type="button"],
.heart input[type="reset"],
.heart input[type="submit"] {
    border: transparent;
    font-size: 2.3rem;
    color: #db116c;
    background-color: transparent;
}

/* button un-heart */

.un-heart .button,
.un-heart button,
.un-heart input[type="button"],
.un-heart input[type="reset"],
.un-heart input[type="submit"] {
    border: transparent;
    font-size: 2rem;
    color: #606c76;
    background-color: transparent;
}

.star .button,
.star button,
.star input[type="button"],
.star input[type="reset"],
.star input[type="submit"] {
    border: transparent;
    font-size: 2.3rem;
    color: #f0e68c;
    background-color: transparent;
}

.un-star .button,
.un-star button,
.un-star input[type="button"],
.un-star input[type="reset"],
.un-star input[type="submit"] {
    border: transparent;
    font-size: 2rem;
    color: #606c76;
    background-color: transparent;
}

.copy-link-text .button,
.copy-link-text button,
.copy-link-text input[type="button"],
.copy-link-text input[type="reset"],
.copy-link-text input[type="submit"] {
    border: transparent;
    font-size: unset;
    color: #606c76;
    background-color: transparent;
}

.copy-link-text {
    outline: none;
    border: transparent;
    font-size: unset;
    font-weight: unset;
    color: #7f7f7f;
    background-color: transparent;
    margin: 0;
    padding: 0 5px;
}

.copy-link-text:hover,
.copy-link-text:focus {
    background-color: transparent;
    font-size: unset;
    font-weight: unset;
    color: #7f7f7f;
}

.copy-link-text:active {
    background-color: transparent;
    font-size: unset;
    font-weight: unset;
    color: #7f7f7f;
    opacity: 0.7;
}

/* footer*/

.app-footer {
    text-align: center;
    background-color: #676767;
    margin-top: 15px;
}

.app-footer .link {
    display: flex;
    justify-content: center;
}

/* image */

/* タブ上部 start */

.app-tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

/* タブの下線 */

.app-tab-wrap:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #e53a90;
    display: block;
    order: -1;
}

.app-tab-label {
    color: White;
    background: #e1e1e1;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    cursor: pointer;
    /*カーソルを手のマークに*/
    border-radius: 1px 1px 0 0;
    flex-grow: 1;
    /*子要素伸びる率の指定*/
    order: -1;
    /*flex子要素順序*/
    margin-bottom: 0;
}

.app-tab-label:not(:last-of-type) {
    margin-right: 5px;
    /*間の要素に指定*/
}

/* コンテンツの非表示設定　switchチェックされないと表示されない*/

.app-tab-content {
    width: 100%;
    display: none;
}

/* コンテンツ表示　blockで他と区別*/

.app-tab-switch:checked + .app-tab-label + .app-tab-content {
    display: block;
}

/* アクティブなタブ */

.app-tab-switch:checked + .app-tab-label {
    background: #e53a90;
}

.app-tab-switch:checked + .app-tab-label + .app-tab-content {
    padding: 15px;
    border: 0.3px solid;
    border-color: #e1e1e1;
}

/* ラジオボタン非表示 */

.app-tab-switch {
    display: none;
}

/* タブ上部 end */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 戻すよう */
.row {
    display: flex;
    flex-direction: row;
}

.default-sub-contents-adjustment-show {
    display: block;
}

.screen-mini-sub-contents-adjustment-show {
    display: none;
}

.default-user-name-adjustment-show {
    display: block;
}

.screen-mini-user-name-adjustment-show {
    display: none;
}

#header-hamburger-menu-content {
    display: none;
}

#header-hamburger-menu-btn-check:checked ~ #header-hamburger-menu-content {
    display: block;
}

div[id*="advice-hamburger-menu-content"] {
    display: none;
}

input[id*="advice-hamburger-menu-btn-check"]:checked
    ~ div[id*="advice-hamburger-menu-content"] {
    display: block;
}

#article-hamburger-menu-content {
    display: none;
}

#article-hamburger-menu-btn-check:checked ~ #article-hamburger-menu-content {
    display: block;
}

.screen-mini-reaction_box-adjustment-show {
    display: none;
}

.default-reaction_box-adjustment-show {
    display: block;
}

.default-contents-adjustment-show {
    display: block;
}

.screen-mini-contents-adjustment-show {
    display: none;
}

.default-litle-contents-adjustment-show {
    display: block;
}

.screen-mini-litle-contents-adjustment-show {
    display: none;
}

td,
th {
    padding: 1.2rem 1.5rem;
}

/* 既存から移設 */
table,
ul {
    margin-bottom: 0;
}
table {
    border-spacing: 0;
    width: 100%;
}
td,
th {
    padding: 1.2rem 1.5rem;
}

td:first-child,
th:first-child {
    padding-left: 0;
}
td:last-child,
th:last-child {
    padding-right: 0;
}

/* レスポンシブ 959（タブレット用） => 1070 以下のものに+適応 */
@media screen and (max-width: 1070px) {

    .app-nav {
        padding: 3px 5px;
    }

    /*通常時表示される更新日等の情報を非表示に*/
    .default-sub-contents-adjustment-show {
        display: none;
    }

    /*スクリーン小さい時に表示される更新日等の情報*/
    .screen-mini-sub-contents-adjustment-show {
        display: block;
    }

    .default-user-name-adjustment-show {
        display: none;
    }

    .screen-mini-user-name-adjustment-show {
        display: block;
    }

    .screen-mini-reaction_box-adjustment-show {
        display: block;
    }

    .default-reaction_box-adjustment-show {
        display: none;
    }

    .default-contents-adjustment-show {
        display: none;
    }

    .screen-mini-contents-adjustment-show {
        display: block;
    }

    .app-item {
        display: block;
        width: 100%;
    }

    td,
    th {
        padding: 1.2rem 0.1rem;
    }

    /*アイテムを縦に並べるクラス*/
    .table-item {
        /* width: calc(100vw - 20px); 記事一覧アイテム横はみ出るので記載しない*/
        display: block;
        /* padding: 10px 0 10px 10px; */
        padding-top: 10px;
        padding-bottom: 0;
        word-break: break-all;
        word-wrap: break-word;
        
    }

    /*アイテムを縦に並べ時下にプラスでマージンつけたい時に*/
    .table-item-bottom-margin {
        margin-bottom: 10px;
    }

    .table-side-padding-adjustment {
        padding-left: 0;
        padding-right: 0;
    }

    /*table-item使用時少し調整したいもの*/
    .table-item-bottom-adjustment {
        margin-bottom: 10px;
    }

    /*調整*/
    .app-footer .link {
        display: block;
    }

    /* flexコンテナに入るアイテムに付与するもの 横幅MAXに変更*/
    .row .column-responsive.column-84 {
        /* flex-grow(アイテムの伸びる比率), flex-shrink(アイテムの縮まる比率), flex-basis(コンテナに対するアイテム比率) */
        flex: 0 0 100%;
        /* 横幅 */
        max-width: 100%;
        display: block;
    }

    .row .column.column-84 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .row {
        display: flex;
        flex-direction: column;
    }

    img.user-img {
        margin-right: 8px !important;
        margin-left: 8px !important;
    }

    .app-user-name {
        width: 80px;
    }

    /* 既存のもの微調整 */
    .container {
        margin: 0 auto;
        max-width: 112rem;
        /* padding: 0 0.1rem; */
        padding: 0;
        position: relative;
        width: 100%;
    }
}

/* レスポンシブ 480p以下のものに+適応 基本こちらに記載しない*/
@media screen and (max-width: 480px) {

    .app-top-tab-link {
        background-color: transparent;
        margin-right: 3px;
        border: solid 0.5px #606c76;
        /*線*/
        border-radius: 10px;
        font-size: 13px;
        /*SEでギリギリ横表示OK*/
        padding: 13.11px 1.9px;
    }

    .app-nav {
        padding: 1px 3px;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 3px;
    }

    .app-footer {
        text-align: center;
        background-color: #676767;
        margin-top: 3px;
    }

    .default-litle-contents-adjustment-show {
        display: none;
    }

    .screen-mini-litle-contents-adjustment-show {
        display: block;
    }

    /* 2 => 0.5 上書き */
    .message {
        margin-bottom: 0.5rem;
    }


    
}