/* カラー */
:root {
    /* メインカラー */
    --capital-color: rgb(255, 199, 0);
    --capital-color-r: 255;
    --capital-color-g: 199;
    --capital-color-b: 0;
    --capital-color-h: 47;
    --capital-color-s: 100%;
    --capital-color-l: 50%;
    --capital-text-color: rgb(0, 0, 0);
    /* --capital-color: rgb(255, 214, 51);
    --capital-color-r: 255;
    --capital-color-g: 214;
    --capital-color-b: 51;
    --capital-color-h: 47;
    --capital-color-s: 100%;
    --capital-color-l: 60%;
    --capital-text-color: rgb(0, 0, 0); */
}
:root {
    /* メインカラー・ボーダー */
    --capital-border-color: hsl(var(--capital-color-h), var(--capital-color-s), calc(var(--capital-color-l) - 30%));
    /* メインカラー・微明　(1) */
    --capital-color-light1: hsl(var(--capital-color-h), var(--capital-color-s), calc(var(--capital-color-l) + 10%));
    /* メインカラー・明　　(2) */
    --capital-color-light2: hsl(var(--capital-color-h), var(--capital-color-s), calc(var(--capital-color-l) + 20%));
    /* メインカラー・微暗　(-1) */
    --capital-color-dark1: hsl(var(--capital-color-h), var(--capital-color-s), calc(var(--capital-color-l) - 5%));
    /* メインカラー・暗　　(-2) */
    --capital-color-dark2: hsl(var(--capital-color-h), var(--capital-color-s), calc(var(--capital-color-l) - 10%));
}


/* フォント */
@font-face {
	font-family: 'DancingScriptBold';
	src: url(/assets/font/DancingScript-Bold.ttf);
}


/* google recaptcha */
.g-recaptcha {
    margin-right:auto;
    margin-left:auto;
    text-align: center;
    width:300px;
    margin-top:20px;
}
























/* ----------------------------------------------------------------------
    html・body
---------------------------------------------------------------------- */

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    header
---------------------------------------------------------------------- */

/* ヘッダープロパティ */
:root {
    --header-color: var(--capital-color);
    --humberger-back-color: rgba(255,255,255,1);
}
@media screen and (min-width: 1025px) {
    /* PC large */
    :root {
        --header-height: 70px; /* ヘッダー高さ */
        --header-margin: 0.7rem;
        --header-padding-x: 1rem;
        --header-padding-y: 0.7rem;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    :root {
        --header-height: 60px; /* ヘッダー高さ */
        --header-margin: 0.7rem;
        --header-padding-x: 1rem;
        --header-padding-y: 0.6rem;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    :root {
        --header-height: 55px; /* ヘッダー高さ */
        --header-margin: 0.7rem;
        --header-padding-x: 1rem;
        --header-padding-y: 0.5rem;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    :root {
        --header-height: 55px; /* ヘッダー高さ */
        --header-margin: 0.7rem;
        --header-padding-x: 1rem;
        --header-padding-y: 0.5rem;
    }
}

header {
    position: fixed;
    top: var(--header-margin);
    left: var(--header-margin);
    right: var(--header-margin);
    z-index: 10000;
    height: var(--header-height);
}
header nav {
    height: calc(var(--header-height) - var(--header-padding-y)*2);
    padding: var(--header-padding-y) var(--header-padding-x);
    border-radius: 0.3rem;
    background-color: var(--header-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ヘッダーロゴ(&テキスト) */
.menu-brand {
    height: 100%;
    margin: 0;
    display: inline-flex;
    white-space: nowrap;
    text-decoration: none;
}
.menu-brand img {
    width: auto;
    height: 100%;
    display: inline-block;
}
.menu-brand:has(img) h1 {
    margin: 0;
    margin-top: 0.2rem;
    font-size: calc((var(--header-height) - var(--header-padding-y)*2) * 0.78);
    color: #000000;
}
.menu-brand:has(img) h1:first-letter {
    font-size: 1rem;
    margin: -0.5rem;
    color: transparent;
}
.menu-brand h1 {
    margin: 0;
    font-size: calc((var(--header-height) - var(--header-padding-y)*2) * 0.78);
    color: #000000;
    display: flex;
    align-items: center;
}

/* ログイン状態表示エリア */
header nav:has(.login-status) .humberger {
    margin-left: 1rem;
}
header nav .login-status {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 100%;
}
header nav .login-status img {
    width: 20vw;
    height: 20vw;
    margin: 0;
    max-width: calc(var(--header-height) - var(--header-padding-y)*2 - 0.1rem);
    max-height: calc(var(--header-height) - var(--header-padding-y)*2 - 0.1rem);
    cursor: pointer;
}
.login-status .dropdown {
    display: none;
    width: 10rem;
    position: absolute;
    top: calc(var(--header-height) - var(--header-padding-y) + 0.2rem);
    right: 0;
    margin: var(--header-padding-y) 0;
    padding: 0;
    background-color: var(--capital-color-light2);
    border-radius: 0.6rem;
}
.login-status .dropdown li {
    height: var(--header-height);
    transition: all .3s;
    position: relative;
    list-style: none;
    border-radius: 0.6rem;
}
.login-status .dropdown li:hover {
    background-color: var(--capital-color);
}
.login-status .dropdown li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--capital-text-color);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    height: 100%;
}
.login-status .dropdown li a:before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
    transform: rotate(135deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
}

/* ハンバーガーボタン */
:root {
    --humberger-btn-color: #000000;
}
.humberger {
    display: inline-block;
    margin-left: auto;
    margin-right: 0.3rem;
    position: relative;
    border: none;
    outline: 0!important;
    background-color: transparent;
    cursor: pointer;
    height: 100%;
    width: 30px;
    transition: 0.4s;
}
.humberger-line:before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: var(--humberger-btn-color);
    transition: inherit;
    top: calc(-1 * (var(--header-height) - var(--header-padding-y)*2) * 0.18);
}
.humberger-line {
    display: block;
    height: 4px;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--humberger-btn-color);
    transition: 0.4s;
}
.humberger-line:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: var(--humberger-btn-color);
    transition: inherit;
    top: calc((var(--header-height) - var(--header-padding-y)*2) * 0.18);
}
.humberger.humberger-active .humberger-line:before {
    top: 0;
    transform: rotate(45deg);
}
.humberger.humberger-active .humberger-line {
    background-color: transparent;
}
.humberger.humberger-active .humberger-line:after {
    top: 0;
    transform: rotate(-45deg);
}

/* ハンバーガーメニュー */
.humberger-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    margin: 0;
    padding: 0;
    padding-top: calc(var(--header-height) + var(--header-margin)*2);
    display: none;
    width: 100%;
    height: calc(100% - var(--header-height) - var(--header-margin)*2);
    overflow: hidden;
    background: var(--humberger-back-color);
    outline: 0;
    /* transition: opacity .15s linear; */
}
.humberger-menu.humberger-active {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}
.humberger-menu > .humberger-menu-container {
    margin: 0.3rem calc(var(--header-margin) + 0.5rem);
}

/* ハンバーガーメニューリスト */
.menu-list {
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    text-align: center;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    height: 0;
    padding: 0;
    transition: height 0.5s ease 0.3s, visibility 0.3s ease 0s, opacity 0.3s ease 0s, padding 0.5s ease 0.3s;
}
.menu-list::-webkit-scrollbar {
    display: none;
}
.menu-list.humberger-active {
    overflow-y: scroll;
    visibility: visible;
    opacity: 1;
    height: calc(100vh - 1.4rem - var(--header-height) - 2.2rem);
    padding: 0.3rem;
    padding-top: 1.2rem;
    padding-bottom: 1rem;
    transition: height 0.5s ease 0s, visibility 1s ease 0.5s, opacity 1s ease 0.5s, padding 0.5s ease 0s;
}
.menu-ul {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
}
.menu-item {
    font-size: 2rem;
    display: block;
    padding: 0.5rem 1rem;
}
.menu-item:hover {
    color: var(--main-color);
}
.menu-item.active {
    pointer-events: none;
}
.menu-link {
    height: 100%;
    width: auto;
    text-decoration: none;
    color: #000000;
    transition: color .3s;
    font-weight: 500;
    background-color: transparent;
}
.menu-link:hover {
    color: #009aed;
    transition: color .3s;
}


/* ------------------------------------------------------------------- */







/* ----------------------------------------------------------------------
    ローディング画面
---------------------------------------------------------------------- */

.loading {
    width: 100vw;
    height: 100vh;
    background-color: var(--main-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loaded {
    transition: all 1s;
    opacity: 0;
    visibility: hidden;
}


.loading-box{
    width: 200px;
    height: 200px;
    position: relative;
}
.wave{
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: 50% 48%;
    border-radius: 43%;
    animation: loading-rotation 3000ms infinite linear;
    opacity: .3;
    background: rgb(255, 147, 244);
    background: linear-gradient(39deg, rgb(255, 147, 147) 0%, rgb(251, 177, 18) 100%);
}
.wave:nth-of-type(2){
    animation: loading-rotation 5000ms infinite linear;
    opacity: .2;
}
.wave:nth-of-type(3){
    animation: loading-rotation 7000ms infinite linear;
    opacity: .2;
}
.txt{
    color: #fff;
    font-size: 18px;
    text-align: center;
    width: 100%;
    height: 18px;
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    margin: auto;
    text-shadow: 0px 0px 20px #d03045;
}
@keyframes loading-rotation {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/* ------------------------------------------------------------------- */








/* ----------------------------------------------------------------------
    main
---------------------------------------------------------------------- */

:root {
    --main-color: rgb(230, 230, 230);
    --container-width: 1100px;
}

.wrapper {
    flex: 1;
    padding-top: calc(var(--header-height) + var(--header-margin)*2);
    padding-bottom: 3rem;
    background-color: var(--main-color);
    display: flex;
    flex-flow: column;
    /* justify-content: center; */
}
.container {
    width: calc(100% - var(--header-margin)*2);
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--header-margin);
}
main {
    width: auto;
    margin: 0;
    padding: 0;
    padding-bottom: 1rem;
    flex-grow: 1;
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    sidebar
---------------------------------------------------------------------- */

:root {
    --adsense-width: 300px;
}

.sidebar {
    /* display: none; */
    width: auto;
    margin: 0 5px;
}
.sidebar-wrapper {
    width: var(--adsense-width);
}
.adsense-area {
    width: 100%;
    padding-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.sidebar-list {
    width: 100%;
    padding-bottom: 2rem;
    word-break: break-all;
}
/* .sidebar-list ul.list1 > li:after {
    content: 'CONTENTS'!important;
} */

/* レスポンシブ */
@media screen and (min-width: 1025px) {
    /* PC large */
    .container:has(aside) {
        display: flex;
    }
    main {
        width: auto;
        padding-right: 1rem;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    .container:has(aside) {
        display: block;
    }
    main {
        width: 100%;
        padding-right: 0;
    }
    .sidebar-wrapper {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    .container:has(aside) {
        display: block;
    }
    main {
        width: 100%;
        padding-right: 0;
    }
    .sidebar-wrapper {
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    .container:has(aside) {
        display: block;
    }
    main {
        width: 100%;
        padding-right: 0;
    }
    .sidebar-wrapper {
        width: 100%;
    }
}

/* ------------------------------------------------------------------- */











/* ----------------------------------------------------------------------
    adsense
---------------------------------------------------------------------- */

/* レスポンシブ */
@media screen and (min-width: 1025px) {
    /* PC large */
    .gads-responsive {
        width: 728px;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    .gads-responsive {
        width: 728px;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    .gads-responsive {
        width: 300px;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    .gads-responsive {
        width: 320px;
    }
}
.gads-big {
    width: 728px;
    height: 90px;
}
.gads-large {
    width: 300px;
    height: 600px;
}
.gads-rectangle-big {
    width: 336px;
    height: 280px;
}
.gads-rectangle {
    width: 300px;
    height: 250px;
}
.gads-mobile {
    width: 320px;
    height: 100px;
}

/* ------------------------------------------------------------------- */








/* ----------------------------------------------------------------------
    footerbar
---------------------------------------------------------------------- */

.footerbar {
    width: 100%;
}
.footerbar-wrapper {
    width: 100%;
    margin: 0 5px;
}


/* ------------------------------------------------------------------- */











/* ----------------------------------------------------------------------
    footer
---------------------------------------------------------------------- */

/* フッタープロパティ */
:root {
    --footer-color: var(--capital-color);
    --footer-nav-max-len: 7rem; /* フッターナビの最大文字数を入力 */
}

footer {
    background-color: var(--footer-color);
    padding: 0;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}

/* フッターロゴ (&テキスト) */
.footer-brand {
    height: auto;
    margin: 0;
    display: inline-flex;
    text-decoration: none;
}
.footer-brand img {
    width: auto;
    height: 3.5rem;
    display: inline-block;
}
.footer-brand h1 {
    margin: 0;
    margin-top: 0.3rem;
    font-size: 2.5rem;
    color: black;
}
.footer-brand h1:first-letter {
    font-size: 1rem;
    margin: -0.5rem;
    color: transparent;
}

/* SNSリンク */
.sns {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.sns-content {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin: 0 0.rem;
}
.sns-content a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sns-icon {
    width: 2.5rem;
    height: 2.5rem;
}

/* フッターナビ */
.footer-nav {
    margin: 2rem 0;
}
.footer-ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0 1.5rem;
}
.footer-list {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    width: 70%;
    max-width: 11rem;
    min-width: calc(var(--footer-nav-max-len) + 1rem);
    text-align: center;
}

.copyright {
    margin: 0;
    margin-top: 1rem;
    text-align: center;
    color: #666;
}



/* ------------------------------------------------------------------- */









/* ----------------------------------------------------------------------
    レスポンシブ
---------------------------------------------------------------------- */

@media screen and (min-width: 1025px) {
    /* PC large */
    .hide-sp {
        display: initial;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    .hide-sp {
        display: initial;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    .hide-sp {
        display: initial;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    .hide-sp {
        display: none!important;
    }
}

/* ------------------------------------------------------------------- */








/* ----------------------------------------------------------------------
    error
---------------------------------------------------------------------- */

.error {
    margin-top: 1.5rem;
    text-align: center;
}
.error h3 {
    font-size: 2rem;
    margin: 0;
    margin-bottom: 1.2rem;
}
.error h6 {
    font-size: 1.5rem;
    margin: 0;
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    title系
---------------------------------------------------------------------- */

.title {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 1rem 0;
}
main > .title {
    margin-top: 0;
}
.sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.7rem 0;
    margin-bottom: 1rem;
}
main > .sub-title {
    margin-top: 0;
}

/* 画像ありタイトル */
.title-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.title-group > img {
    width: 20vw;
    height: 20vw;
    max-width: 80px;
    max-height: 80px;
    margin-right: 0.5rem;
}
.title-group > :not(img) {
    display: block;
}

/* ------------------------------------------------------------------- */



/* ----------------------------------------------------------------------
    table
---------------------------------------------------------------------- */

/* 共通 */
table[class^="table"] {
    /* table-layout: fixed;
    overflow-wrap: break-word;
    word-wrap: break-word; */
    margin: 0.5rem auto;
}

/* ノーマル */
.table {
    border-collapse: collapse;
    width: calc(100% - 1rem);
}
.table tr {
    padding: 0;
}
.table th, .table td{
    border-width: 1px 0px;
    border-color: rgba(50, 50, 50, .3);
    border-style: solid;
    padding: 10px 0;
}
.table th{
    min-width: 5rem;
    padding: 1rem 0.3rem;
    text-align: center;
}
.table td{
    padding: 1rem 0.3rem;
    text-align: left;
}

/* タイル風 */
.table-tile {
    border-collapse:separate;
    border-spacing: 5px;
    width: 100%;
}
.table-tile th, .table-tile td{
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
}
.table-tile th{
    padding: 1rem 0.3rem;
    background-color: var(--capital-color);
    color: var(--capital-text-color);
    border: solid 1px var(--capital-border-color);
}
.table-tile td{
    padding: 1rem 0.3rem;
    background-color: var(--capital-color-light2);
    border: solid 1px var(--capital-border-color);
}

/* ------------------------------------------------------------------- */




/* ----------------------------------------------------------------------
    list
---------------------------------------------------------------------- */

/* タイトル付きリスト */
ul.list1 {
    border: solid 2px var(--capital-color-dark1);
    padding: 0.5rem;
    position: relative;
    margin-top: 1.70rem;
}
ul.list1 > li {
    line-height: 1.5;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
    cursor: pointer;
    display: flex;
    align-items: center;
}
ul.list1 > li:last-of-type {
    border-bottom: none;
}
ul.list1 > li:first-child:after {
    /* タイトルタブ */
    background: var(--capital-color-dark1);
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: -2px;
    bottom: 100%;
    padding: 1px 7px;
    content: attr(data-title);
    letter-spacing: 0.05rem;
    cursor: initial;
}
ul.list1 > li > a:before {
    /* リスト内のアイコン */
    padding-right: 1rem;
    color: var(--capital-color-dark1);
    content: '>';
    font-weight: 900;
    /* -webkit-filter: hue-rotate(var(--capital-color-h)) saturate(var(--capital-color-s) brightness(var(--capital-color-l)));
    -moz-filter: hue-rotate(var(--capital-color-h)) saturate(var(--capital-color-s) brightness(var(--capital-color-l)));
    -ms-filter: hue-rotate(var(--capital-color-h)) saturate(var(--capital-color-s) brightness(var(--capital-color-l)));
    filter: hue-rotate(var(--capital-color-h)) saturate(var(--capital-color-s) brightness(var(--capital-color-l))); */
}
ul.list1 > li > a {
    display: flex;
    width: 100%;
    padding: 0.5rem;
    text-decoration: none;
    color: black;
    font-weight: 500;
}
ul.list1 > li > a:hover {
    background-color: var(--capital-color-light2);
}



/* 画像付きリスト */
ul.list2, ol.list2 {
    padding: 0;
    position: relative;
}
ul.list2 li, ol.list2 li {
    color: black;
    border-left: solid 8px var(--capital-color);
    background: #eeeeee;
    margin-bottom: 0.5rem;/*下のバーとの余白*/
    line-height: 1.5;
    border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
    padding: 0.5em;
    list-style-type: none!important;
    display: flex;
    align-items: center;
}
ul.list2 li img, ol.list2 li img {
    width: 20vw;
    height: 20vw;
    max-width: 3rem;
    max-height: 3rem;
    margin-right: 0.5rem;
}


/* スマホ対応リスト (横長用) */
ul.list3 {
    counter-reset:list;
    list-style-type:none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul.list3 > a > li {
    margin: 0.3rem 0;
    padding: 0.3rem;
    padding-right: 1.2rem;
    background-color: white;
    border-color: rgba(0,0,0,.125);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    display: flex;
    align-items: center;
}
ul.list3 > a {
    text-decoration: none;
    color: black;
}
ul.list3 > a:hover > li {
    background-color: #e9e9e9;
}
ul.list3 > a > li .li-wrapper {
    width: calc(100% - 1.2rem);
    display: flex;
    align-items: center;
}
ul.list3 > a > li:after {
    content: ">";
    width: 1.2rem;
    max-width: 1.2rem;
    text-align: right;
}
ul.list3 > a > li .li-wrapper .li-parent {
    flex: 1;
    display: flex;
    align-items: center;
}
ul.list3 > a > li .li-wrapper .li-child {
    flex: 1;
    display: flex;
    align-items: center;
}
ul.list3 > a > li .li-wrapper span {
    margin: 0;
    padding: 0.3rem 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width: 1025px) {
    /* PC large */
    ul.list3 > a > li .li-wrapper .li-parent {
        flex-direction: row;
    }
    ul.list3 > a > li .li-wrapper .li-child {
        flex-direction: column;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    ul.list3 > a > li .li-wrapper .li-parent {
        flex-direction: row;
    }
    ul.list3 > a > li .li-wrapper .li-child {
        flex-direction: column;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    ul.list3 > a > li .li-wrapper .li-parent {
        flex-direction: column;
    }
    ul.list3 > a > li .li-wrapper .li-child {
        flex-direction: row;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    ul.list3 > a > li .li-wrapper .li-parent {
        flex-direction: column;
    }
    ul.list3 > a > li .li-wrapper .li-child {
        flex-direction: row;
    }
}


/* ランキングリスト */
ul.list-ranking {
    counter-reset: chapter;
}
ul.list-ranking li {
    margin-bottom: 20px;
    border-radius: 10px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #cde2e8;
}
ul.list-ranking li > span:first-child {
    width: 5rem;
    min-width: 5rem;
    display: flex;
    justify-items: center;
    align-items: center;
}
ul.list-ranking li > span:first-child:before {
    content: counter(chapter) " 位";
    counter-increment: chapter;
    margin: 0 auto;
    padding:10px;
    border-radius: 50px;
    background: lightskyblue;
    color: #fff;
    text-align: center;
    font-size: 1rem;
}
ul.list-ranking li:nth-child(1) > span:first-child:before {
    background: gold;
    font-size: 1.5rem;
    font-weight: 900;
}
ul.list-ranking li:nth-child(2) > span:first-child:before {
    background: silver;
    font-size: 1.3rem;
    font-weight: 700;
}
ul.list-ranking li:nth-child(3) > span:first-child:before {
    background: #a17136;
    font-size: 1.1rem;
    font-weight: 600;
}
ul.list-ranking li .content {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 0.5rem;
}
ul.list-ranking li .user {
    display: flex;
    justify-content: left;
    align-items: center;
}
@media screen and (min-width: 1025px) {
    /* PC large */
    ul.list-ranking li .content {
        flex-direction: row;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    ul.list-ranking li .content {
        flex-direction: row;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    ul.list-ranking li .content {
        flex-direction: row;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    ul.list-ranking li .content {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    form
---------------------------------------------------------------------- */

/* サイズプロパティ */
@media screen and (min-width: 1025px) {
    /* PC large */
    :root {
        --label-width: 40%;
        --input-width: 60%;
        --label-align: center;
        --label-margin-bottom: 0;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    :root {
        --label-width: 40%;
        --input-width: 60%;
        --label-align: center;
        --label-margin-bottom: 0;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    :root {
        --label-width: 100%;
        --input-width: 100%;
        --label-align: left;
        --label-margin-bottom: 0.3rem;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    :root {
        --label-width: 100%;
        --input-width: 100%;
        --label-align: left;
        --label-margin-bottom: 0.3rem;
    }
}

.form-group {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 2rem 1rem;
}
.form-child {
    width: var(--input-width)!important;
}
/* ラベル */
.form-group > label {
    width: var(--label-width);
    justify-content: var(--label-align);
    margin-bottom: var(--label-margin-bottom);
}
label {
    display: flex;
    align-items: center;
}
label > span {
    text-align: var(--label-align);
}
label.required:after {
    content: "必須";
    color: #ffffff;
    background: #cc0000;
    font-size: 0.7rem;
    padding: 0.2rem;
    border-radius: 0.5rem;
    margin-left:0.5rem;
}
/* エラー */
.form-group .error-small {
    display: block;
    width: calc(100% - 1rem);
    color: #cc0000;
    text-align: right;
    margin: 0 0.5rem;
}
/* 確認 */
.form-confirm {
    display: block;
    font-size: 1.2rem;
}
/* テキスト入力 */
.form-input {
    display: block;
    width: calc(100% - 0.75rem*2);
    height: 2rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #ced4da;
    border-radius: 0.25rem;
}
/* テキストエリア入力 */
.form-textarea {
    display: block;
    width: calc(100% - 0.75rem*2);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #ced4da;
    border-radius: 0.25rem;
    resize: vertical;
}
/* ファイル入力 */
.form-file {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    padding: 2rem;
    text-align: center;
    width: var(100% - 1rem);
    padding: 0.5rem;
    border: 2px dashed #494949;
    background: rgba(22, 165, 191, 0);
    transition: all 0.25s cubic-bezier(0.21, 0.51, 0.51, 1);
}
.form-file.dragover {
    border: 2px solid var(--capital-color);
    background: rgba(var(--capital-color-r),var(--capital-color-g),var(--capital-color-b),0.5);
}
.form-file > p {
    margin: 0;
    margin-bottom: 0.5rem;
}
.form-file > .form-file-input {
    position: relative;
    display: inline-block;
    justify-content: center;
}
.form-file > .form-file-input > input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.form-file > .form-file-input > #input_button {
    margin: 0!important;
}
.form-file > #input_detail {
    margin: 0 auto!important;
    margin-top: 0.5rem!important;
    font-size: 1.2rem;
}
.form-file > #del_input_button {
    margin: 0 auto!important;
    margin-top: 0.5rem!important;
    padding: 0.3rem 0.5rem!important;
    display: none;
    font-size: 1rem;
}
/* 画像入力 (画像プレビューの部分だけ。ファイル選択は「ファイル入力」で。) */
.form-image {
    width: 100%;
}
.form-image > .form-image-img {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}
.form-image > .form-image-img > img {
    display: block;
    margin: 0 auto;
    width: 20vw;
    height: 20vw;
    max-width: 200px;
    max-height: 200px;
    min-width: 180px;
    min-height: 180px;
}
/* ラジオボタン */
.form-radio-area {
    padding: 0.375rem 0.75rem;
}
.form-radio {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}
.form-radio input {
    margin: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    outline: none;
    transition: border-color 0.2s ease-in-out;
}
.form-radio input:checked {
    border-color: #06c;
}
.form-radio label {
    margin-left: 0.5rem;
    cursor: pointer;
}
/* チェックボックス */
.form-checkbox-area {
    padding: 0.375rem 0.75rem;
}
.form-checkbox {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0;
    font-size: 1rem;
    line-height: 1.5;
}
.form-checkbox input {
    margin: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 2px solid #ccc;
    outline: none;
    transition: background-color 0.2s ease-in-out;
}
.form-checkbox input:checked {
    border-color: #06c;
}
.form-checkbox label {
    margin-left: 0.5rem;
    cursor: pointer;
}

/* 入力幅 */
.form-group > :not(label) {
    width: calc(var(--input-width) - 2rem);
}


/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    text
---------------------------------------------------------------------- */

.h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 1.2rem;
}
.h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 1rem;
}
.h3 {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 0.8rem;
}
.h4 {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 0.7rem;
}
.h5 {
    font-size: 0.8rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 0.5rem;
}
.h6 {
    font-size: 0.7rem;
    font-weight: bold;
    margin: 0;
    margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    badge
---------------------------------------------------------------------- */

.badge {
    display: inline-block;
    margin: 0.3rem!important;
    padding: 0.3rem!important;
    background-color: white;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.3rem;
}
/* ? */
.instruction {
    position: relative;
}
.instruction[data-num="0"]::before {
    display: none;
}
.instruction::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    cursor: pointer;
    /* content: attr(data-num); */
    content: '？';
    min-width: 30px;
    height: 30px;
    box-sizing: border-box;
    padding: 4px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #777777;
    border: 1px solid #fff;
    border-radius: 50%;
    top: -3px;
    right: 5px;
    transform: translate(40%, -40%);
    z-index: 1;
}
.instruction-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #777777;
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 1;
}
/* 吹き出し */
.speech-bubble {
    position: absolute;
    width: 20rem;
    max-width: calc(100vw - var(--header-margin)*2 - 15px - 18px);
    height: auto;
    display: inline-block;
    margin: 0;
    padding: 0.5rem 0.8rem;
    font-size: 1rem;
    font-weight: 400;
    color: black;
    text-align: left;
    z-index: 100;
    background-color: var(--capital-color-light1);
    border-top-color: var(--capital-color-light1);
    border-bottom-color: var(--capital-color-light1);
    border-left-color: var(--capital-color-light1);
    border-right-color: var(--capital-color-light1);
}
.speech-bubble > .title {
    font-weight: bold;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}
.speech-bubble.top-left {
    bottom: calc(100% + 15px + 18px);
    right: -5px;
}
.speech-bubble.top-left > span {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid inherit;
    border-top-color: inherit;
}
.speech-bubble.bottom-left {
    top: calc(15px + 18px);
    right: -5px;
}
.speech-bubble.bottom-left > span {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid inherit;
    border-bottom-color: inherit;
}


/* ------------------------------------------------------------------- */




/* ----------------------------------------------------------------------
    color
---------------------------------------------------------------------- */

/* 背景 */
.bg-red {
    background-color: #dc3545!important;
}
.bg-blue {
    background-color: #0d6efd!important;
}
.bg-yellow {
    background-color: #ffc107!important;
}
.bg-lightblue {
    background-color: #0dcaf0!important;
}
.bg-green {
    background-color: #198754!important;
}
.bg-gray {
    background-color: #6c757d!important;
}

/* テキスト */
.text-red {
    color: #dc3545!important;
}
.text-blue {
    color: #0d6efd!important;
}
.text-yellow {
    color: #ffc107!important;
}
.text-lightblue {
    color: #0dcaf0!important;
}
.text-green {
    color: #198754!important;
}
.text-gray {
    color: #6c757d!important;
}

/* ------------------------------------------------------------------- */







/* ----------------------------------------------------------------------
    image
---------------------------------------------------------------------- */

.image-area {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 50vh;
}
.image-area img {
    min-width: 280px;
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
}
img.icon-circle {
    border-radius: 50%;
    border: 2px solid #000000;
    object-fit: cover;
}

/* ------------------------------------------------------------------- */







/* ----------------------------------------------------------------------
    link
---------------------------------------------------------------------- */

a {

}

.link {

}
.link:hover {

}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    alert
---------------------------------------------------------------------- */

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert.alert-capital {
    background-color: var(--capital-color-light2);
    border-color: var(--capital-color-light2);
}
.alert.alert-red {
    /* color: #721c24; */
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert.alert-blue {
    /* color: #004085; */
    background-color: #cce5ff;
    border-color: #b8daff;
}
.alert.alert-yellow {
    /* color: #856404; */
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert.alert-lightblue {
    /* color: #0c5460; */
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert.alert-green {
    /* color: #155724; */
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert.alert-gray {
    /* color: #383d41; */
    background-color: #e2e3e5;
    border-color: #d6d8db;
}

/* ------------------------------------------------------------------- */



/* ----------------------------------------------------------------------
    button
---------------------------------------------------------------------- */

.btn-group {
    display: flex;
    justify-content: center;
}
.btn {
    display: block;
	text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.2rem;
}

/* ノーマルボタン */
.btn-normal {
    margin: 0.5rem 1rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid transparent;
    border-radius: 0.25rem;
}
/* 小ボタン */
.btn-small {
    margin: 0.5rem 1rem;
    padding: 0.3rem 0.7rem;
    border: 2px solid transparent;
    border-radius: 0.25rem;
    font-size: 1rem;
}
/* 角丸ボタン */
.btn-round {
    margin: 0.5rem 1rem;
    padding: 0.75rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 100vh;
}

/* ボタンカラー */
.btn.btn-capital, *[class$="-btn"].btn-capital {
    color: white;
    background-color: var(--capital-color);
    border-color: var(--capital-color);
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-capital:hover, *[class$="-btn"].btn-capital:hover {
    background-color: var(--capital-color-light1);
    border-color: var(--capital-color-light1);
}
.btn.btn-red, *[class$="-btn"].btn-red {
    color: white;
    background-color: #dc3545;
    border-color: #dc3545;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-red:hover, *[class$="-btn"].btn-red:hover {
    background-color: #E25E6B;
    border-color: #E25E6B;
}
.btn.btn-blue, *[class$="-btn"].btn-blue {
    color: white;
    background-color: #0d6efd;
    border-color: #0d6efd;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-blue:hover, *[class$="-btn"].btn-blue:hover {
    background-color: #3F8EFD;
    border-color: #3F8EFD;
}
.btn.btn-yellow, *[class$="-btn"].btn-yellow {
    color: black;
    background-color: #ffc107;
    border-color: #ffc107;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-yellow:hover, *[class$="-btn"].btn-yellow:hover {
    background-color: #FFCD38;
    border-color: #FFCD38;
}
.btn.btn-lightblue, *[class$="-btn"].btn-lightblue {
    color: black;
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-lightblue:hover, *[class$="-btn"].btn-lightblue:hover {
    background-color: #39D4F3;
    border-color: #39D4F3;
}
.btn.btn-green, *[class$="-btn"].btn-green {
    color: white;
    background-color: #198754;
    border-color: #198754;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-green:hover, *[class$="-btn"].btn-green:hover {
    background-color: #21AF6D;
    border-color: #21AF6D;
}
.btn.btn-gray, *[class$="-btn"].btn-gray {
    color: white;
    background-color: #6c757d;
    border-color: #6c757d;
    transition: background-color 0.5s, border-color 0.5s;
}
.btn.btn-gray:hover, *[class$="-btn"].btn-gray:hover {
    background-color: #848C94;
    border-color: #848C94;
}

/* ボタンミュート状態 */
.btn:disabled, *[class$="-btn"]:disabled {
    background-color: #cccccc;
    border-color: #cccccc;
}
.btn:disabled:hover, *[class$="-btn"]:disabled:hover {
    background-color: #cccccc;
    border-color: #cccccc;
}

/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    パンくずリスト
---------------------------------------------------------------------- */

.breadcrumb { 
    background-color: #cccccc;
    border-radius: 2rem;
    margin: 0;
    margin-bottom: 1rem;
}
.breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0.2rem 0.8rem;
}
.breadcrumb ol li {
    display: inline-flex;
    align-items: center;
}
.breadcrumb ol li:not(:last-of-type)::after {
    content: "»";
    font-size: 1.5rem;
    margin: 0 .6em;
    color: #777;
    padding-bottom: 0.3rem;
}
.breadcrumb a {
    color: #1492AF;
    font-weight: 700;
    text-decoration: none;
}

/* ------------------------------------------------------------------- */






/* ----------------------------------------------------------------------
    tab
---------------------------------------------------------------------- */

:root {
    --tab-height: 60px;
}
.tabs {
    display: flex;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    height: var(--tab-height);
    margin: 0 auto;
    margin-bottom: 1.5rem;
}
.tab_item {
    flex: 1;
    height: 100%;
    border-bottom: 3px solid var(--capital-color);
    background-color: #d9d9d9;
    line-height: var(--tab-height);
    font-size: calc(var(--tab-height) / 3);
    text-align: center;
    color: #565656;
    display: block;
    float: left;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}
.tab_item:hover {
    opacity: 0.75;
}
input[name="tab_item"] {
    display: none;
}
.tabs input:checked + .tab_item {
    background-color: var(--capital-color);
    color: #fff;
}

/* ------------------------------------------------------------------- */



/* ----------------------------------------------------------------------
    image popup
---------------------------------------------------------------------- */

#image-popup-modal {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, .6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
#image-popup-modal > div {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--header-margin)*2);
    margin-top: calc(var(--header-height) + var(--header-margin)*2);
    justify-content: center;
    align-items: center;
}
#image-popup-modal > div > img {
    max-width: calc(100vw - var(--header-margin)*2);
    max-height: calc(100vh - var(--header-height) - var(--header-margin)*3 - 1.5rem);
}
#image-popup-modal > div > p {
    margin: 0;
    padding: 0;
    margin-top: 0.3rem;
    margin-bottom: var(--header-margin);
    height: 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    color: white;
}
img.popup {
    cursor: pointer;
}
/* ------------------------------------------------------------------- */





/* ----------------------------------------------------------------------
    card
---------------------------------------------------------------------- */

/* カードプロパティ */
@media screen and (min-width: 1025px) {
    /* PC large */
    :root {
        --card-width: calc(100% / 3);
        --card-margin: 7px;
    }
}
@media screen and (max-width: 1024px) {
    /* PC */
    :root {
        --card-width: 50%;
        --card-margin: 10px;
    }
}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */
    :root {
        --card-width: 100%;
        --card-margin: 7px;
    }
}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */
    :root {
        --card-width: 100%;
        --card-margin: 5px;
    }
}

.card-area {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
}

/* 普通のカード */
/*
    <div class="card-vertical">
        <div class="photo">
            <img src="/assets/src/sample.jpg">
        </div>
        <ul class="details">
            <li><a href="#">copypet</a></li>
            <li>2018.06.21</li>
        </ul>
        <div class="description">
            <h5 class="title-in-card">記事タイトル記事タイトル</h5>
            <p class="sub-title-in-card">サブタイトルやキャッチコピーなどサブタイトルやキャッチコピーなど</p>
            <p class="text">テキスト</p>
            <div class="read-more">
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
*/
.card-vertical {
	font-size: 0.85rem;
	line-height: 1.45em;
	position: relative;
	overflow: hidden;
    width: calc(var(--card-width) - var(--card-margin)*2);
	margin: var(--card-margin);
	-webkit-transition: height 0.3s ease;
	        transition: height 0.3s ease;
	border-radius: 3px;
	background: #ffffff;
	-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
	        box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
}
.card-vertical::after {
    /* 説明の背景 (contentに追加で反映) */
	content: '';
	position: absolute;
	bottom: 60px;
	right: -20px;
	color: rgba(236, 239, 241, 0.7);
	font-size: 180px;
	transform: rotate(-26deg);
	z-index: 0;
}
.card-vertical:hover .details {
	left: 0;
}
.card-vertical .photo {
	position: relative;
	height: var(--card-width);
	height: 200px;
	overflow: hidden;
    display: flex;
    justify-content: center;
}
.card-vertical .photo > img {
	width: 100%;
	height: 100%;
    object-fit: cover;
	background-size: cover;
}
.card-vertical .details {
	font-family: 'Open Sans';
	position: absolute;
	top: 0;
	left: -100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: 200px;
	margin: 0;
	padding: 10px 15px;
	list-style: none;
	-webkit-transition: all 0.3s ease;
	        transition: all 0.3s ease;
	color: black;
	vertical-align: middle;
	background: rgba(var(--capital-color-r),var(--capital-color-g),var(--capital-color-b),0.7);
}
.card-vertical ul.details > li {
	padding: 3px 0;
}
.card-vertical ul.details > li:before {
    content: '＞';
	margin-right: 0.3rem;
	vertical-align: middle;
}
.card-vertical .description {
	position: relative;
	padding: 0.8rem;
	z-index: 1;
}
.card-vertical .description .title-in-card {
	font-size: 1.4rem;
	line-height: 1.5rem;
	margin: 0 0 0.8rem 0;
}
.card-vertical .description .sub-title-in-card {
	font-size: 1rem;
	line-height: 1.2rem;
	margin: 1.2% 0;
	color: #9b9b9b;
}
.card-vertical .description .text {
	position: relative;
	margin: 0;
	padding-top: 1.2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.card-vertical .description .text::after {
	position: absolute;
	top: 6px;
	left: 0;
	width: 35%;
	height: 6px;
	content: '';
	background: var(--capital-color);
}
.card-vertical .description .read-more {
	float: right;
	margin-bottom: 0.8rem;
    text-align: right;
}
.card-vertical .description .read-more a {
    text-decoration: none;
}
.card-vertical .description .read-more a::after {
	margin-left: -10px;
	content: '→';
	-webkit-transition: all 0.3s ease;
	        transition: all 0.3s ease;
	vertical-align: middle;
	opacity: 0;
}
.card-vertical .description .read-more a:hover::after {
	margin-left: 5px;
	opacity: 1;
}



/* 横長カード */
/*
    <div class="card-horizon">
        <a class="a-in-card" href="#">
            <img src="/assets/src/sample.png" class="image-in-card">
            <div>
                <h3 class="title-in-card">タイトル</h3>
                <h6 class="tag-in-card">タグ</h6>
                <h4 class="content-in-card">テキスト</h4>
            </div>
        </a>
    </div>
*/
.card-horizon {
    width: calc(var(--card-width) - var(--card-margin)*2);
    margin: var(--card-margin);
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 3px 6px #ccc;
}
.card-horizon > .a-in-card {
    display: flex;
    text-decoration: none;
    height: 100%;
}
.card-horizon > .a-in-card > .image-in-card {
    width: 20%;
    height: auto;
    margin: 5px;
    /* object-fit: cover; */
    object-fit: scale-down;
    border-radius: 5px 0 0 5px;
}
.card-horizon > .a-in-card > div {
    display: flex;
    flex-direction: column;
}
.card-horizon > .a-in-card > div > .title-in-card {
    font-size: 1.5rem;
    margin: 0.5rem;
    color: #444;
    flex-grow: 1;
}
.card-horizon > .a-in-card > div > .tag-in-card {
    font-size: 0.8rem;
    margin: 0 0.5rem;
    color: #666;
    flex-grow: 1;
}
.card-horizon > .a-in-card > div > .content-in-card {
    font-size: 1rem;
    margin: 0.3rem 0.5rem;
    color: #555;
    flex-grow: 1;
}

/* ホバー */
.card-horizon:hover {
    background-color: var(--capital-color);
    box-shadow: 0 5px 10px #888;
}


/* ------------------------------------------------------------------- */
















/* ----------------------------------------------------------------------
    白背景グリッド
---------------------------------------------------------------------- */

.block {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    margin: 0;
    /* margin-top: 0.5rem; */
    margin-bottom: 1.5rem;
}
.block-white {
    background-color: white;
    border-color: rgba(0,0,0,.125);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.block-gray {
    background-color: #eee;
    border-color: rgba(0,0,0,.125);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.block .block-body {
    padding: 1rem 1.5rem;
}
.block .block-body .block-title {
    font-size: 2.2rem;
    font-weight: bold;
    margin: 1rem 0;
}
.block .block-body .block-sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0.7rem 0;
    margin-bottom: 1rem;
}
.block .block-body .block-contents {
    margin: 0.5rem;
}

/* ------------------------------------------------------------------- */











/* ----------------------------------------------------------------------
    アナログ時計
---------------------------------------------------------------------- */

:root {
    --clock-width: 300px;
    --clock-height: 300px;
    --clock-h-length: 100px;
    --clock-m-length: 140px;
    --clock-s-length: 140px;
}
.c-clock {
    position: relative;
    width: var(--clock-width);
    height: var(--clock-height);
    border: 1px solid #333;
    border-radius: 50%;
    margin: 0 auto;
}
.c-clock > span.hour {
    position: absolute;
    top: calc(50% - var(--clock-h-length));
    left: calc(50% - 5px);
    width: 10px;
    height: var(--clock-h-length);
    background: #333;
    transform-origin: bottom;
}
.c-clock > span.min {
    position: absolute;
    top: calc(50% - var(--clock-m-length));
    left: calc(50% - 2px);
    width: 4px;
    height: var(--clock-m-length);
    background: #333;
    transform-origin: bottom;
}
.c-clock > span.sec {
    position: absolute;
    top: calc(50% - var(--clock-s-length));
    left: calc(50% - 1px);
    width: 2px;
    height: var(--clock-s-length);
    background: #ff0000;
    transform-origin: bottom;
}
.c-clock > span.c12 {
    position: absolute;
    top: 10px;
    left: calc(50%);
    transform: translateX(-50%);
    font-size: 18px;
}
.c-clock > span.c3 {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 18px;
}
.c-clock > span.c6 {
    position: absolute;
    bottom: 10px;
    left: calc(50%);
    transform: translateX(-50%);
    font-size: 18px;
}
.c-clock > span.c9 {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 18px;
}


/* ------------------------------------------------------------------- */








































.edit-link {
    text-align: right;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.date {
    text-align: right;
    margin-bottom: 0.5rem;
}

header .logo {
    font-family: 'YuseiMagic';
}
footer .logo {
    font-family: 'YuseiMagic';
    font-size: 3rem;
}

/* マッチリスト */
/* .match-list-area {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
} */

@media screen and (min-width: 1025px) {
    /* PC large */

}
@media screen and (max-width: 1024px) {
    /* PC */

}
@media screen and (max-width: 768px) {
    /* タブレット・メニュー表示 */

}
@media screen and (max-width: 480px) {
    /* スマホ・メニュー表示 */

}