@charset "UTF-8";

/* Template & Designed by Orihashi Ren */
/* http://kerry.php.xdomain.jp/ */

/* webフォントの読み込み */
@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,600,600i|Satisfy|Noto+Sans+JP|Noto+Serif+JP&display=swap');

/* 全体設定 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: 400;
    font-family: 'EB Garamond', 'Noto Serif JP', serif;
}

/* 基本設定 */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    line-height: 1.9;
    font: inherit;
    vertical-align: baseline;} 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;}
}
html,body {
    padding:0; 
    margin:0; 
    height: 100%;
    box-sizing: border-box; 
}
html {
    font-size: 14pt;
}
@media screen and (max-width: 1680px) {
    html {
        font-size: 12pt;
    }
}
@media screen and (max-width: 1280px) {
    html {
        font-size: 11pt;
    }
}
@media screen and (max-width: 360px) {
    html {
        font-size: 10pt;
    }
}
body {
    text-align: justify;
    word-wrap: break-word; /* 禁則処理 */
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%; /* Safari横向き対策 */
    background-color: #fff;
    color: #000;
}
*, *:before, *:after {
    box-sizing: inherit;
}
}
@-ms-viewport {
    width: device-width;
}
@media screen and (max-width: 480px) {
    html, body {
    }
}
body, input, select, textarea {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.075em;
}

/* リンク */
a {
    border-bottom: none;
    text-decoration: none;
    outline: none;
}
a:hover {
    border-bottom-color: transparent;
}

/* 文字装飾 */
strong, b {
    font-weight: 600; /*太字*/
}
em, i {
    font-style: italic; /*斜体*/
}
em {
    border-bottom: 1px dashed;
}

/* text */
p {
    text-align: justify;
    margin: 0 0 0em 0;
    padding: 0rem 0rem 0 0rem;
    font-size: 14px;
    line-height: 1.9rem; /*行間*/
}
h1, h2, h3, h4, h5, h6 {
    text-align: left;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: 0.05em; /*文字間隔*/
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    border-bottom: 0;
    color: inherit;
    text-decoration: none;
}
h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 0 0 1rem 0rem;
}
h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin: 0 0 1rem 0rem;
}
h3 {
    font-size: 1.5rem;
    margin: 0 0 1rem 0rem;
}
h4 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0rem;
}
h5 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0rem;
}
h6 {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0rem;
}

/* 上付き */
sub {
    font-size: 0.6rem;
    position: relative;
    top: 0.5rem;
}
/* 下付き */
sup {
    font-size: 0.6rem;
    position: relative;
    top: -0.5rem;
}

/* マーカー */
mark {
    display: inline-block;
    padding: .2rem .5rem;
    background: linear-gradient(transparent 60%, #ff1493 40%);
    color: #000
}

/* 小説説明文 */
extra {
    margin-left: 1.3rem;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

/* 引用 */
blockquote {
    border-left: solid 2px #ff1493; /*左側に線*/
    font-style: italic;
    margin: 0 0.5rem 2rem;
    padding: 0.5rem 0 0.5rem 1rem;
}
blockquote > p{
    padding: 0 0;
}
blockquote cite { /*引用元*/
    display: block;
    text-align: right;
    font-size: 0.9em;
    margin-top: 0.5rem;
}

/* コード */
.code_div {
    margin: 0 0rem;
}
code {
    border: none;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0.25rem;
    padding: 0.25rem 0.65rem;
}
pre {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    text-align: left;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    margin: 0 0 2rem 0;
}
pre code {
    display: block;
    line-height: 1.75;
    padding: 1rem 1.5rem;
    overflow-x: auto;
}

/* 区分線 */
hr {
    border: 0;
    border-bottom: solid 2px;
    margin: 3rem 0rem;
}

/* 文字揃え
<span class="align-center">例</span> 等と使用してください */
.align-left {
    text-align: left;
}
.align-center {
    text-align: center;
}
.align-center p{
    text-align: center;
}
.align-right {
    text-align: right;
}

/* color */
input, select, textarea {
    color: #000;
}
a {
    color: #ff1493;
    border-bottom-color: rgba(255, 255, 255, 0.5); /*リンク下線*/
}
a:hover {
    border-bottom: dotted 2px transparent;
    color: #00ff00 !important;
}
strong {
    color: #ff1493;
}
em {
    border-bottom-color: #ff1493;
}
blockquote {
    border-left-color: #eeeeee;
}
blockquote cite{
    color: rgba(0,0,0, 0.6)
}
code {
    background: rgba(220, 220, 220, 0.25);
    border-color: #eeeeee;
}
hr {
    border-bottom-color: #eeeeee;
}

/* Box */
.box {
    height: auto;
    margin: 5rem 0rem;
    padding: 1.5rem;
    border: none;
    background: rgba(255,255,255,0.175);
}
.box > p {
    padding: 0 0;
}
.box h2,
.box h3,
.box h4,
.box h5,
.box h6 {
    text-align: center;
}

/* lists */
ol, ul {
    list-style: none;
}
.list_no {
    list-style: none;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_un {
    list-style: disc;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_or {
    list-style: decimal;
    margin: 0 0rem;
    padding-left: 2rem;
}
.list_no > li, .list_un > li, .list_or > li {
    padding-left: 0.5rem;
    text-align: left;
}

/* dl */
.dltype1 {
    text-align: left;
    margin: 0 1rem;
}
.dltype1 > dt a,
.dltype1 > dt {
    color: #fff 
    font-size: 13px;
    border-bottom: none;
}

.dltype1 > dd {
    margin-left: 1.3rem;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
}

/* table */
.table_div {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    margin: 0 0rem;
}
table {
    margin: 0rem 0rem;
    width: 100%;
}
table thead {
    border-bottom: solid 2px;
    border-bottom-color: #eeeeee;
}
table tbody tr {
    border: solid 1px;
    border-left: 0;
    border-right: 0;
    border-color: #eeeeee;
}
table tbody tr:nth-child(odd) {
    background-color: rgba(220, 220, 220, 0.25);
}
table td {
    padding: 0.75rem 0.75rem;
}
table th {
    font-family: 'Averia Serif Libre',はんなり明朝, serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    line-height: 1.5;
    padding: 0 0.75rem 0.75rem 0.75rem;
    text-align: left;
}
table tfoot {
    border-top: solid 2px;
    border-top-color: #eeeeee;
}
@media screen and (max-width: 980px) {
    table th {
        font-size: 0.9rem;
    }
}

/* button */
.btn-def {
    -webkit-appearance: none; /* おまじない */
    display: inline-block;
    width: 200px;
    height: 54px;
    margin: 1rem;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;
    background-color: rgba(177,133,132,.7);
    border: 2px solid rgba(177,133,132,.7);
    color: #fff;
    line-height: 50px;
    font-family:  'Averia Serif Libre', serif !important;
    font-size: 14px;
    letter-spacing: 0.075rem;
}
.btn-def::before,
.btn-def::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.btn-def,
.btn-def::before,
.btn-def::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn-def:hover {
    background-color: transparent;
    border-color: rgba(155, 197, 195,1);
    border: solid 2px rgba(155, 197, 195,1);
    color: rgba(155, 197, 195,1) !important;
}

/* form */
form {
    text-align: center;
}
.box-a {
    text-align: center;
    max-width: 340px;
    margin: 4rem auto;
    padding: 1rem;
    border: 1px solid rgba(155, 197, 195,1);
    background-color: transparent;
    color: #fff;
}
.box-a h3 {
    text-align: center;
}
.form-field,
textarea {
    outline: none;
    display: block;
    width: 90%;
    -webkit-appearance: none;
    background: rgba(155, 197, 195,1);
    border: 1px solid rgba(155, 197, 195,1);
    padding: 8px 16px;
    line-height: 22px;
    font-size: 14px;
    color: #fff;
    border-radius: 0px;
    -webkit-transition: border .3s ease;
    transition: border .3s ease;
}
.form-field::-webkit-input-placeholder
textarea::-webkit-input-placeholder {
    color: rgba(85, 92, 98,.8);
}
.form-field::-moz-placeholder,
textarea::-moz-placeholder {
    color: rgba(85, 92, 98,.8);
}
.form-field:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: rgba(85, 92, 98,.8);
}
.form-field::placeholder,
textarea::placeholder {
    color: rgba(85, 92, 98,.8);
}
.form-field:focus,
textarea:focus {
    outline: none;
    border-color: #396B97;
}
.form-element {
    margin-bottom: 20px;
}
form label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--text-color-headline);
    font-weight: 500;
}


/*-------------------- 個別設定 --------------------*/

/* タイトル */
.title-nav {
    position: relative;
    text-align: right;
    height: 18rem;
    width: 90%;
    margin: 0;
    padding: 10em 3em;
    background-color: #fff;
    color: #fff;
    z-index: 1;
}
.title-nav div:nth-of-type(1) {
    top: 55%;
    left: 31%;
    position: absolute;
    width: 800px;
    height: 450px;
    margin: 3rem auto 6rem;
    background: url('../images/bg1.jpg') center/ cover;
    -ms-transform: translate(-50%,-50);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 1;
}
/* タイトル四角部分.title-nav div:nth-of-type(1)::before,
.title-nav div:nth-of-type(1)::after {
    top: -10%;
    position: absolute;
    content: '';
    display: block;
    width: 19rem;
    height: 19rem;
    border: solid 2px #222;
    -webkit-transform: translate(-50%, 50%) rotate(45deg);
    transform: translate(-50%, 50%) rotate(45deg);
    color: #fff;
    mix-blend-mode: difference;
} */

.title-nav div:nth-of-type(1)::before {
    left: 30%;
}
.title-nav div:nth-of-type(1)::after {
    left: 70%;
}
.title-nav span {
    position: absolute;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    font-family: 'Satisfy';
    z-index: 2; 
}
.title-nav div span:nth-of-type(1) {
    top: 63%;
    left: 39%;
    font-size: 4rem;
    color: #fff;

}
.title-nav  div span:nth-of-type(2) {
    top: 63%;
    left: 75%;
    white-space: nowrap;
    font-size: 3rem;
    color: #000;
}
@media screen and (max-width: 980px) {
    .title-nav {
        height: 10rem;
        width: auto;
        margin: 2rem;
    }
    .title-nav div:nth-of-type(1) {
        top: 50%;
        left: 50%;
        width: 15rem;
        height: 15rem;
        margin: 3rem auto;
    }
    .title-nav div:nth-of-type(1)::before,
    .title-nav div:nth-of-type(1)::after {
        top: -18%;
        width: 10rem;
        height: 10rem;
    }
    .title-nav div:nth-of-type(2) span {
        white-space: nowrap;
        width: 100%;
        font-size: 5rem;
        text-align: center
    }
    .title-nav  div span:nth-of-type(1) {
        top: 62%;
        left: 50%;
        font-size: 3rem;
    }
    .title-nav  div span:nth-of-type(2) {
        top: 97%;
        left: 50%;
        font-size: 1.5rem;
    }
}
        
/* サイド */
.side-nav {
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 5rem;
    height: 100%;
    color: #fff;
    text-align: center;
    mix-blend-mode: difference;
}
.side-nav span {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 100vh;
    -webkit-transform: translate(-50%, 50%) rotate(90deg);
    transform: translate(-50%, 50%) rotate(90deg);
    font-family: 'EB Garamond', serif;
    z-index: 100;
}
@media screen and (max-width: 980px) {
    .side-nav {
        width: 2rem;
    }
}

/* メインコンテンツ */
main {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}
main > div {
    padding: 1rem;
}
.div-1,
.div-3 {
    background: #fff;
}
.div-2 {
    background: #000;
    color: #fff !important;
}
section {
    padding: 2rem;
}
@media screen and (max-width: 980px) {
    main {
        background-color: rgba(255, 255, 255, 0.5);
    }
    main > div {
        padding: 2rem 2rem 2rem 2rem;
    }
    section {
        display: flex;
    }
    section h2 {
        margin: 0 1rem 0 -2rem;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
}
@media screen and (min-width: 1024px) {
    main > div {
        display: flex; 
    }
    .div-1,
    .div-3 {
        justify-content: flex-start;
    }
    .div-2 {
        justify-content: flex-end;
    }
    section {
        flex-basis: 30%;
    }
}

/* note */
#note > div > div {
    margin: 0 0 1.5rem;
}

/* pagenation */
.pagination {
    text-align: center;
    margin: 1rem auto 4rem;
}
.pagination li {
    display: inline-block;
    margin: 0 0.5em;
}
.pagination li a {
    border-bottom: none;
    color:  #ff1493;
}
.lnr-chevron-left,
.lnr-chevron-right {
    font-size: 14px;
}
.more {
    border-bottom: none;
}
time {
    margin: 10px 0 0;
    font-size: 12px;
}

/* link */
#link > div ol li a{
    color: #000;
}

/*-------------------- novel --------------------*/

main > article {
    width: 80%;
    display: inline-block;
    background: #fff;
    max-width: 50rem;
    padding: 15rem 2.5rem 4rem;
}
article > h2,
article > div > h3 {
    text-align: center;
}
article > h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
article > h2::before,
article > h2::after {
    height: 3px;
    content: "";
    display: block;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
article > h2::before {
    margin-right: 1rem;
    background: url('../../images/bg2.jpg') center 30%;
}
article > h2::after {
    height: 3px;
    margin-left: 1rem;
    background: url('../../images/bg2.jpg') repeat center center;
}

.novel > p {
    /*小説部分の段落に間隔を作りたくない場合はmargin-topに0を指定してください*/
    width: 100%;
    display: inline-block;    
    margin-top: 2rem;
    font-size: 13px;
    line-height: 2rem; /*小説部分の行間*/
    letter-spacing: 0.025rem; /*小説部分の文字間隔*/
}
.novel > p:first-child {
    margin-top: 0;
}

.caption,
.afterword {
    margin: 5rem 0;
    background: url('../../images/bg2.jpg')repeat 40% center;
    padding: 5px;
}
.caption > div,
.afterword > div {
    padding: 1.5rem;
    background: repeating-linear-gradient(-45deg, #fff 0, #fff 2px, #f3f3f3 5px, #f3f3f3 10px);
    color: #000;
}

/* ruby */
ruby rt {
    top: -3px;
    font-family: 'Noto Sans JP', sans-serif !important;
}

@media screen and (max-width: 980px) {
    main > article {
        padding: 15rem 2rem 6rem 2.5rem;
    }
}

/*-------------------- article --------------------*/

.main-article main {
    background-color: #000;
    min-height: 100vh;
}

main > .track {
    width: 80%;
    display: inline-block;
    background: #f5f5f5;
    color: #000;
    max-width: 50rem;
    padding: 15rem 2.5rem 6rem;
}
.track > h2,
.track > h3,
.track > h4,
.track > h5,
.track > h6 {
    text-align: center;
}
.track > h3 {
    padding: 0 .75em;
    display: inline-block;
    position: relative;
}
.track > h3:before,
.track > h3:after{
    content: '';
    width: 5px;
    height: 10px;
    position: absolute;
}
.track > h3:before{
    top: 0;
    left: 0;
    border-top: #fff solid 1px;
    border-left: #fff solid 1px;
}
.track > h3:after{
    bottom: 0;
    right: 0;
    border-bottom: #fff solid 1px;
    border-right: #fff solid 1px;
}
.sub {
    text-align: center;
    margin: .3rem .5rem;
    font-size: 15px;
}
.sub span{
    padding: 0 55px;
    display: inline-block;
    position: relative;
}
.sub span:before,
.sub span:after {
    content: '';
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    border-top: #000 solid 1px;
    border-bottom: #000 solid 1px;
    position: absolute;
}
.sub span:before {
    left:0;
}
.sub span:after {
    right:0;
}
.track > .pagination {
    margin: 3rem;
}

/*-------------------- elements --------------------*/

.ele-con h3 {
    text-align: center;
}
.ele-con .sub span::before,
.ele-con .sub span::after {
    border-top: #000 solid 1px;
    border-bottom: #000 solid 1px;
}

/*-------------------- menu --------------------*/

.inner {
    width: 980px;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}

/* header */
#top-head {
    font-size: 14px;
    top: -100px;
    position: fixed;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0 0;
    line-height: 1;
    z-index: 999;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-family:  'EB Garamond', serif;
    font-size: 24px;
    color: #fff;
}
#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
    position: relative;
}
#global-nav ul li a {
    padding: 0 30px;
    border-bottom: none;
    font-family: 'EB Garamond', serif;
}
@media screen and (min-width: 980px) {
    #top-head {
        mix-blend-mode: difference;
    }
}

/* Btn Hover */
#global-nav ul li:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    bottom: -20px;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
    background: #fff;
    bottom: -30px;
}
#global-nav ul li a:hover {
    color: rgba(151, 216, 225,1) !important;
}

/* Transition */
#top-head,
#top-head .logo,
#global-nav ul li,
#global-nav ul li a {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #222;
    left: 0;
    -webkit-transition: .70s ease-in-out;
    -moz-transition: .70s ease-in-out;
    transition: .70s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 4px;
}
#nav-toggle span:nth-child(2) {
    top: 13px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

/* iPhone menu */
@media screen and (max-width: 980px) {
    .inner {
        width: 100%;
        padding: 0 20px;
    }
    #global-nav ul li a {
        padding: 0 20px;
    }
}
@media screen and (max-width: 980px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    #mobile-head {
        background: rgba(255,255,255,0.9);
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 20px;
        color: #222;
        font-size: 13px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .70s ease-in-out;
        -moz-transition: .70s ease-in-out;
        transition: .70s ease-in-out;
        z-index: 1;
        background-image: linear-gradient(-20deg, rgba(97, 97, 97,.7) 0%, #9bc5c3 100%);
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 11px;
    }
    #global-nav ul li {
        float: none;
        position: static;
    }
    #global-nav ul li:after  {
        display: none;
    }
    #top-head #global-nav ul li a {
        width: 100%;
        display: block;
        padding: 18px 0;
        font-size: 15px;
    }
    #nav-toggle {
        display: block;
    }
    
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}

/* for Microsoft Edge */
@supports (-ms-ime-align:auto) {
    #top-head .logo,
    #global-nav ul li,
    #global-nav ul li a,
    .side-nav span {
        color: #626369;
    }
}
/* for IE 11 */
@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop, #top-head .logo,
    #global-nav ul li,
    #global-nav ul li a,
    .side-nav span {
        color: #626369;
    } 
}
/* for IE 10 */
@media all and (-ms-high-contrast:none){
    #top-head .logo,
    #global-nav ul li,
    #global-nav ul li a,
    .side-nav span {
        color: #626369;
    }
}

/*-------------------- other --------------------*/

/* pagetop button */
#page-top {
    position: fixed;
    bottom: 4%;
    right: 2%;
}
#page-top a {
    display: block;
    padding: 0.1rem 0.4rem;
    border-radius: 50%;
    font-size: 0.9rem;
    color: #000;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 100;
}
@media screen and (max-width: 980px) {
    #page-top {
        right: 0.5%;
    }
}

/* loader */
.page-loader {
    display: inline-block;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: #000;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 9998;
}
.spring-spinner, .spring-spinner * {
    box-sizing: border-box;
}
.spring-spinner {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px;
    width: 60px;
    padding: 0;
    margin: 0;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
}
.spring-spinner .spring-spinner-part {
    overflow: hidden;
    height: calc(60px / 2);
    width: 60px;
}
.spring-spinner  .spring-spinner-part.bottom {
    transform: rotate(180deg) scale(-1, 1);
}
.spring-spinner .spring-spinner-rotator {
    width: 60px;
    height: 60px;
    border: calc(60px / 7) solid transparent;
    border-right-color: #fff;
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    animation: spring-spinner-animation 3s ease-in-out infinite;
    transform: rotate(-200deg);
}
@keyframes spring-spinner-animation {
    0% {
        border-width: calc(60px / 7);
    }
    25% {
        border-width: calc(60px / 23.33);
    }
    50% {
        transform: rotate(115deg);
        border-width: calc(60px / 7);
    }
    75% {
        border-width: calc(60px / 23.33);
    }
    100% {
        border-width: calc(60px / 7);
    }
}

/*-------------------- color --------------------*/
/* green */
.green {
    color: rgba(155, 197, 195,1) !important;
    display: inline;
}
/* blue */
.blue {
    color: #396B97 !important;
    display: inline;
}
/* red */
.red {
    color: rgba(177,133,132,1) !important;
    display: inline;
}

/* white */
.white {
    color: #fff !important;
    display: inline;
}

/*-------------------- font size --------------------*/
.s_12 {
    font-size: 12px;
}
.s_14 {
    font-size: 14px;
}

/* ruby */
[data-ruby] {
    display: inline-block;
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    display: inline-block;
    position: absolute;
    transform: translateX(-50%) scale(.5);
    white-space: nowrap;
    top: -1.2rem;
    left: calc(50%);
    text-align: center;
    letter-spacing: 0.25em;
    font-size: 1em;
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}
[data-ruby] rt {
    display: none;
}

/* 折り畳みボックス */
.acMenu dt{cursor:pointer;border-bottom: 2px solid #ff1493;display: inline-block;}
.acMenu dd{display:none;margin-top: 10px;padding: 10px; background: rgba(0,0,250,0); font-size: 10px; color: rgba(255, 255, 255, 0.7);}