@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

html {
    overflow: auto;
    font-size: 62.5%;
}


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


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


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


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


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


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


/*body*/


/*トップページ(indexの-i)*/

.body-i {
    background: #f0eced
    /*.1*/
    ;
}


/*コンテンツページ*/

body {
    margin: auto;
    font: 1.2em/1.8em "Meiryo", sans-serif;
    color: #6d454c;
    background: #fff;
}


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


/*ヘッダー全体*/

header {
    width: 100%;
    background: #fff;
}


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


/*固定ヘッダー*/

.fixed-header {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 40px;
    margin: 0 0 16px;
    /*スクロール余白用*/
    color: #ec6d71;
    background: rgba(255, 255, 255, .7);
}

.fixed-header .title {
    margin: 6px 12px;
}


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


/*タイトル部分*/

.title {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: flex-end;
    width: 84px;
    height: 32px;
    line-height: 2.2rem;
}

.title-j {
    width: 124px !important;
    color: #4d9d73 !important;
}

.logo {
    width: 22px;
    margin: 0 2px 6px 0;
}

.title-lead {
    position: absolute;
    top: 0px;
    left: 25px;
    font-size: 1.0rem;
    transform: scale(.7);
    transform-origin: left top;
    white-space: nowrap;
    font-weight: bold;
}

h1,
h6 {
    font-size: 1.5rem;
    white-space: nowrap;
}


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


/*ヘッダー画像*/


/*トップページ*/

.header-i figure {
    position: relative;
    overflow: hidden;
    height: 140px;
    padding: 40px 0 0 0;
}

.header-i figure img:not(.d-profile img) {
    position: absolute;
    top: 55%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 100%;
    object-fit: cover;
}


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


/*ゆたくん*/

.yuta .header-i figure {
    height: 260px;
}


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


/*かーすけ*/

.kasuke .header-i figure {
    background: #fff;
}

.kasuke figure .d-profile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


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


/*アラーナヘッダー画像*/

.arana .header-i figure {
    height: 170px;
}

.arana .header-i figure img {
    opacity: .6;
    top: 106% !important;
}

.arana .header-i p {
    position: absolute;
    top: 10%;
    width: 100%;
    font: 100 1.4rem serif;
    text-align: center;
    text-shadow: 0 0 5px #6d454c, 0 0 20px #6d454c, 0 0 40px #6d454c;
    color: #fff;
}


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


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


/*コンテンツページ*/

header figure:not(.header-i figure) {
    position: relative;
    overflow: hidden;
    height: 80px;
    /*120-40*/
    margin: 40px 0 0 0;
}


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


/*かーすけ*/

.kasuke header figure {
    height: 100px !important;
}


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


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

.figure-bg {
    width: 100%;
    height: 100%;
    background: #ec6d71;
    opacity: .5;
}

.jissen .figure-bg {
    background: #4d9d73;
}


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


/*ゆたくん*/

.yuta .figure-bg {
    background: #fff;
}


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


/*コンテンツページ ヘッダー位置*/

header figure img {
    position: absolute;
    width: 130%;
}

.h-nyumon {
    top: -100%;
    left: -30%;
}

.h-rule {
    top: -100%;
    left: -20%;
}

.h-yaku {
    top: -100%;
    left: -20%;
}

.h-tensu {
    top: -120%;
    left: -20%;
}

.h-tatakai {
    top: -80%;
    left: -30%;
}

.h-yogo {
    top: -100%;
    left: -20%;
}


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


/*ゆたくん*/

.yuta header figure img:not(.header-i figure img) {
    width: 100%;
    top: -100%;
}


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


/*アラーナ*/

.h-gallery {
    width: 100% !important;
    top: -90%;
}

.h-mahjong {
    width: 100% !important;
    top: -180%;
}

.h-illustration {
    width: 110% !important;
    top: -90%;
}

.h-handicraft {
    width: 100% !important;
    top: -40%;
}

.h-karaoke {
    width: 100% !important;
    top: -80%;
}


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


/*ハンバーガーメニュー*/

.ham-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    width: 24px;
    padding: 10px 14px 0 0;
    color: #6d454c;
}


/*アイコン*/

.ham-i {
    position: absolute;
    width: 24px;
    height: 14px;
    cursor: pointer;
}

.bar {
    position: absolute;
    display: block;
    left: 50%;
    width: 22px;
    height: 3px;
    background: #6d454c;
    border-radius: 1px;
    transform: translateX(-50%);
    transition: .3s;
}

.bar-1 {
    top: 0;
}

.bar-2 {
    top: 50%;
    transform: translate(-50%, -50%);
}

.bar-3 {
    bottom: 0;
}

.close .bar-1 {
    transform: translate(-50%, 5px) rotate(45deg);
}

.close .bar-2 {
    opacity: 0;
}

.close .bar-3 {
    transform: translate(-50%, -6px) rotate(-45deg);
}


/*テキスト*/

.ham-open-text,
.ham-close-text {
    position: absolute;
    width: 30px;
    /*30*.8*/
    padding: 16px 0 0;
    font-size: 1.0rem;
    text-align: center;
    transform: scale(.8);
    transform-origin: left top;
}

.ham-close-text {
    display: none;
}

.ham-menu.close .ham-open-text {
    display: none;
}

.ham-menu.close .ham-close-text {
    display: block;
}


/*開閉*/

.ham-c.open {
    transform: translateX(0);
}


/*中身*/

.ham-c {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    overflow-y: scroll;
    -ms-overflow-style: none;
    /*IE Edge*/
    scrollbar-width: none;
    /*Firefox*/
    width: 40vw;
    height: 100%;
    margin: 40px 0 0;
    transform: translateX(100%);
    transition: .3s;
}


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


/*かーすけ*/

.kasuke .ham-c {
    width: 60vw;
}


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

.ham-c::-webkit-scrollbar {
    display: none;
    /*Crome Safari*/
}

.ham-c .u-menu {
    padding: 4px 8px 100%;
}

.ham-c form,
.ham-c .title {
    margin: 0 auto 6px;
    text-indent: 0px;
}

.ham-c .title {
    color: #ec6d71;
}

.ham-ad {
    text-align: center;
}


/*背景*/

.ham-menu.close .ham-back {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 40px;
    background: #6d454c;
    opacity: .7;
}


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


/*コンテンツ全体*/


/*トップページ*/

.content-i {
    padding: 12px 12px 24px;
}


/*共通*/

.content {
    padding: 12px;
    background: #f0eced
    /*.1*/
    ;
}


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


/*アラーナ*/

.arana .content-i {
    background: #fff !important;
}


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


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


/*メイン*/

.main {
    margin: 12px 0 0;
    padding: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
}


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


/*目次*/

.toc {
    width: 240px;
    margin: 16px auto;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
}

.toc-title {
    position: relative;
    padding: 2px 14px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    background: #ec6d71;
    border-radius: 3px 3px 0 0;
}

.jissen .toc-title {
    background: #4d9d73;
}


/*大*/

.toc-l {
    display: block;
    margin: 0;
    padding: 4px 20px;
    font-size: 1.0rem;
    white-space: nowrap;
    background: #fff;
    border-radius: 0 0 3px 3px;
}


/*閉じた状態開始にする用*/


/*.toc li {
    display: none;
    アコーディオンラグ用でjqではなくcss
}*/

.toc li:not(.search) {
    padding: 0 8px;
    line-height: 2.4rem;
    border-bottom: 1px #c4b4b7
    /*.4*/
    dotted;
}

.toc li a:before {
    font-weight: 900;
    content: '\f105';
}


/*中*/

.toc-m {
    padding: 0 0 0 20px;
}

.toc-m li a:before {
    color: #4d9d73;
}


/*小*/

.toc-s {
    padding: 0 0 0 20px;
}

.toc-s li a:before {
    color: #f6bd60;
}


/*目次アイコン*/

.toc i {
    font-size: 1.1rem;
    color: #fff;
}

.fa-list-ul {
    margin: 0 8px 0 0;
}

.toc-title .fa-angle-double-up {
    position: absolute;
    right: 0;
    margin: 4px 14px;
}

.toc-l li form {
    margin: 12px 0;
}


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


/*見出し*/

h2 {
    font-size: 1.4rem;
    color: #ec6d71;
}

.jissen h2 {
    color: #4d9d73;
}

.h2-hr-p {
    position: relative;
    left: 50%;
    display: flex;
    justify-content: center;
    width: 100vw;
    padding: 24px 0 12px;
    transform: translateX(-50%);
}

.h2-hr {
    width: 40px;
    margin: 10px;
    border-top: solid 1px #ec6d71;
}

.jissen .h2-hr {
    border-top: solid 1px #4d9d73;
}


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


/*広告*/

.ad {
    position: fixed;
    bottom: 4px;
    z-index: 9;
    width: 100%;
    text-align: center;
}

.ad i {
    position: absolute;
    left: calc(50% + -160px);
    top: -20px;
    font-size: 1.6rem !important;
    color: #b6a2a5
    /*.5*/
    !important;
    cursor: pointer;
}


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


/*上に戻るボタン*/

.page-top {
    position: fixed;
    right: 24px;
    bottom: 80px;
    z-index: 9;
    width: 34px;
    height: 34px;
    background: #4d9d73;
    border-radius: 100%;
    opacity: .5;
    cursor: pointer;
}

.jissen .page-top {
    background: #ec6d71;
}

.page-top span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.page-top span:after {
    position: absolute;
    top: 6.5px;
    right: 0;
    left: 0;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
    content: '\f0d8';
    opacity: 1;
}

.page-top:hover {
    opacity: .6;
}


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


/*フッター*/

footer {
    padding: 12px 0 80px;
    color: #fff;
    background: #ec6d71;
}

.jissen footer {
    background: #4d9d73;
}

.flex-f {
    display: flex;
    width: 100%;
    padding: 0 0 20px;
}

.u-menu-f {
    width: 100%;
    padding: 0 20px;
    border-right: 1px #fff dotted;
}

footer ul {
    display: block;
    margin: 0;
    padding: 0 12px;
}

footer li {
    position: relative;
    font-size: 1.2rem;
    text-indent: 4px;
    line-height: 2.6rem;
    border-bottom: 1px solid #fff;
}

footer li:after {
    position: absolute;
    top: 0;
    right: 4%;
    display: block;
    content: '\f0da';
}

.footer-o:not(.body-i .footer-o) {
    display: none;
}

.f-title {
    width: 86px;
    margin: auto;
}

p.copyright {
    font-size: 1.0rem;
    text-align: center;
}


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


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


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


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


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


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


/*トップページ*/

.lead {
    position: relative;
    left: 50%;
    width: 100vw;
    margin: 12px 0 0;
    padding: 8px 0;
    font-size: 1.0rem;
    text-align: center;
    line-height: 2rem;
    background: #fff
    /*.1*/
    ;
    transform: translateX(-50%);
}


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


/*アラーナ*/

.arana .lead {
    background: #f0eced
    /*.1*/
    ;
}


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


/*カードメニュー*/

.card {
    text-align: center;
    font-size: 0;
}

.card li {
    position: relative;
    display: inline-block;
    width: 44%;
    margin: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
}

.card-s li {
    width: 20%;
    line-height: 30px;
    margin: 6px;
}

.card-m li {
    width: 40%;
}

.card-t li {
    width: 90%;
}

.card li:hover {
    opacity: .7;
}

.card-h {
    position: relative;
    overflow: hidden;
    display: block;
    height: 40px;
    border-radius: 3px 3px 0 0;
    background: #ec6d71;
}

.jissen .card-h {
    background: #4d9d73;
}


/*大カード背景*/

.card-h-n {
    background: #ec6d71 !important;
}

.card-h-j {
    background: #4d9d73;
}

.card-h p,
.card .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 1.6rem;
    color: #fff;
}

.card .title {
    height: 32px;
    width: 83px;
}

.card img:not(.logo) {
    position: absolute;
    width: 180%;
    opacity: .5;
}

.card-t img:not(.logo) {
    width: 160%;
}

.card-l {
    position: relative;
    height: 40px;
}

.card-l p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 1.6rem;
    font-size: 1.0rem;
    color: #6d454c;
}

.card a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*位置*/

.nyumon {
    top: -120%;
    left: -40%;
}

.rule {
    top: -120%;
    left: -40%;
}

.yaku {
    top: -120%;
    left: -40%;
}

.tensu {
    top: -140%;
    left: -40%;
}

.tatakai {
    top: -100%;
    left: -60%;
}

.yogo {
    top: -120%;
    left: -40%;
}

.yaku-t {
    top: -270%;
    left: -40%;
}


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


/*カードゆたくんブログ用*/

.card-y {
    margin: 12px 0;
}

.card-y li {
    width: 100%;
    margin: 8px 0;
    text-align: left;
}

.card-y .card-h {
    height: 30px;
    padding: 0 10px;
    background: #f7f5f6
    /*.05*/
    ;
}

.card-y .card-h p,
.blog-d {
    position: relative;
    font-size: 1rem;
    font-weight: normal;
    color: #b6a2a5
    /*.5*/
    ;
}

.card-y .card-l {
    height: 36px;
    padding: 0 10px;
}

.card-y .card-l p {
    position: relative;
    font-size: 1.4rem;
}


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


/*アラーナ*/

.menuimg1 {
    top: -150%;
    left: -40%;
}

.menuimg2 {
    top: -300%;
    left: -30%;
}

.menuimg3 {
    top: -250%;
    left: -40%;
}

.menuimg4 {
    top: -800%;
    left: -0% !important;
    width: 100% !important;
}

.menuimg5 {
    top: -800%;
    left: -0% !important;
    width: 100% !important;
}


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


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


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


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


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


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


/*メイン内見出し*/

h3 {
    display: table;
    margin: 0 0 12px;
    padding: .2em .5em;
    font-size: 1.4rem;
    background: #fdfdfd
    /*.01*/
    ;
    border-left: 4px #ec6d71 solid;
    box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
}

.jissen h3 {
    border-left: 4px #4d9d73 solid;
}

h4 {
    margin: 0 0 12px;
    /*相殺回避用パディング*/
    padding: 12px 0 0;
    font-size: 1.3rem;
    border-bottom: 2px #ec6d71 solid;
}

.jissen h4 {
    border-bottom: 2px #4d9d73 solid;
}

h4:before {
    font-weight: 900;
    content: '\f304';
}


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


/*ゆたくん*/

.yuta h4:before {
    margin: 0;
    content: '';
    /*アイコン非表示*/
}


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

h5 {
    display: table;
    margin: 0 0 8px;
    /*相殺回避用パディング*/
    padding: 8px 0 0;
    font-size: 1.2rem;
}

h5:before {
    font-weight: 400;
    content: '\f14a';
}


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


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


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


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


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


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


/*リスト*/

li {
    list-style-type: none;
}


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


/*メイン*/

.u-menu {
    padding: 4px 8px;
    white-space: nowrap;
    background: #fff;
    z-index: 20;
}

.u-menu-h {
    display: block;
    margin: 8px 0 4px;
    font-weight: bold;
    text-align: center;
}

.u-menu li {
    position: relative;
    font-size: 1.2rem;
    text-indent: 4px;
    line-height: 2.6rem;
    border-bottom: 1px #c4b4b7
    /*.4*/
    solid;
}

.u-menu li:not(.a-n):after {
    position: absolute;
    top: 0;
    left: 90%;
    content: '\f0da';
}


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


/*チェック*/

.u-note {
    display: inline-block;
    margin: 4px 12px 16px 0;
    padding: 4px 8px;
    font-size: 1.0rem;
    vertical-align: top;
    background: #edf5f1
    /*.1*/
    ;
    border: 1px #a6ceb9
    /*.5*/
    solid;
    border-radius: 2px;
}

.u-note-y {
    background: #fef8ef
    /*.1*/
    ;
    border: 1px #fadeaf
    /*.5*/
    solid;
}

.u-note li {
    padding: 0 0 0 12px;
    text-indent: -6px;
}

.u-note li:not(:last-of-type) {
    border-bottom: 1px #b7d7c7
    /*0.4*/
    dotted;
}

.u-note-y li:not(:last-of-type) {
    border-bottom: 1px #fbe4bf
    /*.4*/
    dotted;
}

.u-note li:first-of-type,
.u-note-y li:first-of-type {
    padding: 0 0 4px 6px;
    font-weight: bold;
    line-height: 2rem;
    border-bottom: none;
}

.u-note li:first-of-type:before {
    content: '\f518';
    color: #4d9d73;
}

.u-note li:not(:first-of-type, .etc):before,
.u-note-j li:first-of-type:before {
    display: inline-block;
    color: #4d9d73;
    content: '\f00c';
    transform: scale(.7);
}

.u-note-y li:first-of-type:before,
.u-note-y li:not(:first-of-type, .etc):before {
    color: #f6bd60;
}


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


/*雀風　見出しなし*/

.u-note-j li:first-of-type {
    padding: 0 0 0 12px;
    font-weight: normal;
    border-bottom: 1px #a6ceb9
    /*.5*/
    dotted;
}


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


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


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


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


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


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


/*用語*/

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

.d-yogo {
    width: 99%;
    margin: 4px 0 12px 0;
    border: 1px #f5b6b8
    /*.5*/
    solid;
    border-radius: 3px;
}

.d-yogo dt {
    position: relative;
    background: #fdf0f0
    /*.1*/
    ;
    border-top: 1px #f5b6b8
    /*.5*/
    solid;
    border-bottom: 1px #f5b6b8
    /*.5*/
    solid;
}

.sub-dt {
    background: #eef0f4
    /*.1*/
    ;
    border-top: 1px #abb8c8
    /*.5*/
    solid;
    border-bottom: 1px #abb8c8
    /*.5*/
    solid;
}

.d-yogo dt,
.sub-dt {
    margin: 0 0 8px 0;
    padding: 4px 8px;
    font-weight: bold;
}

.d-yogo dt i {
    position: absolute;
    right: 0;
    padding: 4px 14px;
}

.d-yogo dt:first-of-type {
    border-top: none;
}

.d-yogo dd:not(.sub-dt, .detail) {
    padding: 0 12px 4px;
}


/*カクカク回避用疑似要素*/

.detail {
    padding: 0 12px;
    font-size: 1.0rem;
    text-align: right;
    border-top: 1px #f5b6b8
    /*.5*/
    dashed;
}

.detail:after {
    padding: 0 0 0 4px;
    color: #ec6d71;
    content: '\f0da';
}


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


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


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


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


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


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


/*テーブル*/

[class^="t-"] {
    margin: 4px 0 16px;
    font-size: 1.0rem;
    text-align: left;
    line-height: 1.8rem;
    background: #fef8ef
    /*.1*/
    ;
    border: 1px #fadeaf
    /*.5*/
    solid;
    border-radius: 3px;
    white-space: nowrap;
}

[class^="t-"] p {
    white-space: normal;
    text-align: left;
}


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


/*角丸*/

.t-main,
.t-ms,
.t-block,
.t-yaku,
.t-mentsu,
.t-tamen,
.t-tooltip {
    border-collapse: separate;
    border-spacing: 4px;
    padding: 4px 8px;
}


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


/*麻雀牌の種類*/

.w-1 {
    width: 1px;
}

.t-ms {
    table-layout: fixed;
    width: 100%;
}

.t-ms col:first-child {
    width: 10%;
}

.t-ms td {
    text-align: center;
}

.t-ms tr:nth-child(2) td {
    transform: scale(.8);
    transform-origin: center;
}

.t-ms tr:nth-child(5) td:nth-child(1),
.t-ms tr:nth-child(7) td:nth-child(1),
.t-ms tr:nth-child(9) td:nth-child(1),
.t-ms tr:nth-child(11) td:nth-child(1) {
    transform: scale(.8);
    transform-origin: left;
}

.ms-t {
    display: inline-block;
    margin: -8px -10px;
    padding: 8px 0 4px;
    transform: scale(.6);
    transform-origin: center;
}


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


/*ブロック*/

.t-block td {
    text-align: center;
}

.t-block tr:nth-child(2) td {
    text-align: left;
}


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


/*ブロックライン*/

[class^="hr-y"],
[class^="hr-g"],
[class^="hr-p"] {
    width: 100%;
    border-top: solid 2px;
    border-radius: 6px;
}

.hr-y {
    color: #f6bd60;
}

.hr-g {
    color: #4d9d73;
}

.hr-p {
    color: #ec6d71;
}


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


/*役*/

.t-yaku tr th:before {
    font-size: 1.3em;
    content: '\f02e';
}

.t-yaku tr:nth-child(1) td:nth-child(2) {
    padding: 4px 0 0;
    text-align: right;
    vertical-align: top;
}

.t-yaku tr:nth-child(3) td {
    margin: 0 auto;
    vertical-align: bottom;
}

.t-yaku tr:nth-child(3) td:nth-child(6) {
    width: 100%;
}

.t-yaku tr:nth-child(6) td:nth-child(1) {
    padding: 0 2px;
}

.t-yaku .detail {
    padding: 0 2px;
}


/*七対子*/

.t-yaku-7 tr:nth-child(3) td:nth-child(6) {
    width: auto;
}

.t-yaku-7 tr:nth-child(3) td:nth-child(8) {
    width: 100%;
}


/*国士*/

.t-yaku-k tr:nth-child(3) td:nth-child(3) {
    width: 100%;
}


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


/*九種九牌*/

.t-9s9h {
    border-spacing: 0 4px !important;
    text-align: center;
    color: #ec6d71;
}


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


/*面子*/

.t-mentsu td:nth-child(2) {
    padding: 0 4px 0 0;
}


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


/*多面張*/

.t-tamen tr:nth-child(1) {
    font-weight: bold;
    text-align: center;
}

.t-tamen td:not(:last-child) {
    width: 1px;
}

.t-tamen tr:nth-child(5) td {
    white-space: normal;
}


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


/*ツールチップ*/

.t-tooltip {
    position: absolute;
    z-index: 20;
    margin: 4px 12px 16px;
    background: rgba(255, 255, 255, .9);
    border: 1px #a6ceb9
    /*.5*/
    solid;
}

.t-tooltip tr th:before {
    color: #4d9d73;
    content: '\f02b';
}

.t-tooltip td:nth-child(even) {
    padding: 0 4px 0 0;
}

.t-tooltip td:not(:last-child) {
    width: 1px;
}


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


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


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


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


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


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


/*表*/

.t-chart,
.t-category,
.t-z {
    display: inline-block;
    border-spacing: 0;
    overflow: hidden;
    margin: 4px 4px 16px 0;
    padding: 0;
    text-align: center;
    vertical-align: top;
}

.t-chart th,
.t-chart td {
    padding: 6px;
    border-right: 1px #fadeaf
    /*.5*/
    solid;
    border-bottom: 1px #fadeaf
    /*.5*/
    solid;
}

.t-chart th:last-child,
.t-chart td:last-child {
    border-right: none;
}

.t-chart tr:last-child td {
    border-bottom: none;
}


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


/*紫*/

.t-tensu,
.t-tensu th,
.t-tensu td,
.t-fu-1,
.t-fu-1 th,
.t-fu-1 td,
.t-fu-2,
.t-fu-2 th,
.t-fu-2 td,
.t-yomi,
.t-yomi th,
.t-yomi td {
    background: #fff;
    border-color: #b6a2a5
    /*.5*/
    ;
}


/*点数表*/

.t-tensu td:last-child {
    padding: 0;
}


/*符*/

.t-tensu th:first-child,
.t-fu-2 th:nth-child(2n-1),
.t-fu-2 td:nth-child(2n-1):not(:first-child) {
    width: 30px;
    height: 20px;
    background: #fbe1e2
    /*.2*/
    ;
}


/*翻*/

.t-tensu th:nth-child(n+2):nth-child(-n+7) {
    width: 44px;
    height: 20px;
    background: #dbebe3
    /*.2*/
    ;
}


/*ロン　面子*/

.ron td,
.t-fu-2 td:nth-child(2n) {
    width: 44px;
    height: 32px;
    background: #fdf1df
    /*.2*/
    ;
}


/*ツモ*/

.tsumo-k td:first-of-type {
    width: 22px;
    height: 32px;
    background: #dbebe3
    /*.2*/
    ;
}

.tsumo-k td {
    height: 20px;
    background: #dde2e9
    /*.2*/
    ;
}

.tsumo-o td {
    background: #fbe1e2
    /*.2*/
    ;
}


/*下ダッシュ*/

.border-bd td:not(:first-of-type),
.border-bd th:not(:first-of-type) {
    border-bottom: 1px #d3c7c9
    /*.3*/
    dashed;
}


/*右ダッシュ*/

.t-fu-2 td:nth-child(2n),
.border-rd {
    border-right: 1px #d3c7c9
    /*.3*/
    dashed !important;
}


/*満貫*/

.mangan {
    border: none !important;
    background: #f7f5f6
    /*.05*/
    !important;
}

.k-mangan {
    color: #d3c7c9
    /*.3*/
    ;
    border-right: 1px #d3c7c9
    /*.3*/
    dashed !important;
    border-bottom: 1px #d3c7c9
    /*.3*/
    dashed !important;
    background: #f7f5f6
    /*.05*/
    !important;
}


/*符見出し*/

.t-fu-1 th:first-child,
.t-fu-2 th:first-child {
    width: 44px;
    height: 32px;
    background: #dde2e9
    /*.2*/
    ;
}


/*カラーimp*/

.fu-p {
    background: #fbe1e2
    /*.2*/
    !important;
}

.fu-b {
    background: #dde2e9
    /*.2*/
    !important;
}

.fu-y {
    background: #fdf1df
    /*.2*/
    !important;
}

.fu-g {
    background: #dbebe3
    /*.2*/
    !important;
}


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


/*語呂合わせ*/

.t-ga td {
    width: 100px;
}


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


/*リーチ条件*/

.t-rj td {
    width: 60px;
}


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


/*ツモ点差*/

.t-tensa th {
    width: 80px;
}


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


/*順位点*/

.b-r-n,
.b-r-n td,
.t-jt td {
    border-right: none !important;
}

.b-b-n td,
.t-jt tr:last-of-type th {
    border-bottom: none;
}

.t-jt td {
    text-align: right;
}


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


/*安牌*/

.t-yomi th {
    background: #e1d9db
    /*.2*/
    ;
}

.t-yomi td {
    width: 80px;
    background: #f7f5f6
    /*.05*/
    ;
}


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


/*ズームテーブル*/

.t-z {
    padding: 8px;
    vertical-align: middle;
    line-height: 0;
}

.t-z td {
    font-size: 1.2rem;
    text-align: center;
    /*回転用*/
    vertical-align: bottom;
    /*牌下揃え用*/
}

.t-z-h td {
    padding: 4px 0;
}


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


/*符計算*/

.t-fu td {
    border-right: none;
}


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


/*計算例*/

.t-keisan {
    margin: 0 0 6px 0 !important;
}

.t-keisan td:first-child {
    font-weight: bold;
}

.t-keisan td {
    width: 50px;
}

.d-keisan {
    display: inline-block;
    vertical-align: middle;
    margin: 4px 12px 10px 0;
}

.d-tensu {
    position: relative;
    overflow: hidden;
    height: 80px;
    margin: 0 0 12px;
}

.d-tensu-s {
    height: 44px;
}

.keisan-r {
    position: absolute;
    top: -128px;
}

.keisan-t {
    position: absolute;
    top: -66px;
}

.keisan-h {
    position: absolute;
    top: 0px;
}

.keisan-b {
    border: 2px #ec6d71 solid !important;
}

.keisan-b-t-n {
    border-top: none !important;
}


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


/*分類*/

.t-category {
    padding: 8px;
}

.t-category td {
    padding: 6px;
}

.category-y {
    background: #fdf1df
    /*.2*/
    ;
    border: 1px #fadeaf
    /*.5*/
    solid;
}

[class*="category-p"] {
    background: #fbe1e2
    /*.2*/
    ;
    border: 1px #f5b6b8
    /*.5*/
    solid;
}

.category-p {
    border-radius: 3px;
}

.category-p-t {
    border-right: none;
    border-left: none;
    border-bottom: none;
}

.category-p-tbl {
    border-right: none;
    border-radius: 3px 0 0 3px;
}

.category-p-trb {
    border-left: none;
    border-radius: 0 3px 3px 0;
}

.category-p-b {
    border-top: none;
    border-right: none;
    border-left: none;
}

[class^="category-b"] {
    background: #dde2e9
    /*.2*/
    ;
    border: 1px #abb8c8
    /*.5*/
    solid;
}

.category-b-rl {
    border-top: none;
    border-bottom: none;
}

.category-b-trl {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

.category-b-rbl {
    border-top: none;
    border-radius: 0 0 3px 3px;
}

.category-g {
    background: #dbebe3
    /*.2*/
    ;
    border: 1px #a6ceb9
    /*.5*/
    solid;
}


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


/*記録票*/


/*フレーム*/

.t-score-f {
    table-layout: fixed;
    width: 100%;
    text-align: center;
    color: #b6a2a5
    /*.5*/
    ;
    background: #fff;
    border: 1px #b6a2a5
    /*.5*/
    solid;
    border-radius: 0;
}


/*下線*/

.score-b-b {
    margin: 0 10px;
    border-bottom: 1px #b6a2a5
    /*.5*/
    solid;
}


/*内側*/

.t-score {
    table-layout: fixed;
    border-collapse: collapse;
    width: 94%;
    margin: 0 auto 4px;
    background: #fff;
    border: 2px #b6a2a5
    /*.5*/
    solid;
}

.t-score td {
    text-align: center;
    border: 1px #b6a2a5
    /*.5*/
    solid;
}


/*背景色*/

.score-b-p {
    background: #e1d9db
    /*.2*/
    ;
}

.score-log {
    font-weight: bold;
    color: #6d454c;
}


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

.explanation-i:hover {
    opacity: .7;
}

.explanation-c {
    white-space: normal;
}


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


/*スコアシート*/

.score {
    width: 260px;
}

.lightboxOverlay {
    background: #6d454c;
    opacity: .7;
}


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


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


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


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


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


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


/*画像*/

img {
    vertical-align: middle;
}


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


/*牌サイズ 余白*/


/*s8*/

.pai-sss {
    width: 8px;
}


/*s12*/

.pai-ss {
    width: 12px;
}


/*s16*/

.pai-s {
    width: 16px;
}


/*m18*/

.pai-m {
    width: 18px;
}


/*山横向き幅*/

.pai-sss-v {
    width: 10.35px;
}

.pai-ss-v {
    width: 15.53px;
}

.pai-s-v {
    width: 20.71px;
}

.pai-m-v {
    width: 23.29px;
}


/*加槓高さ*/

.pai-s-kk {
    height: 32px;
    /*32-20.71*/
    margin: 0 -11.29px 0 0;
    vertical-align: bottom;
}

.pai-m-kk {
    height: 36px;
    /*36-23.29*/
    margin: 0 -12.71px 0 0;
    vertical-align: bottom;
}


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


/*点棒サイズ*/

.tenbo-m {
    width: 80px;
}

.tenbo-s {
    width: 70px;
}

.tenbo-ss {
    width: 40px;
}


/*起家マークサイズ*/

.c-mark-ss {
    width: 20px;
}

.c-mark-s {
    width: 30px;
}

.c-mark-m {
    width: 60px;
}


/*サイコロサイズ*/

.dice-s {
    width: 10px;
}

.dice-m {
    width: 20px;
}


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


/*フィルター*/


/*牌フィルター*/

[class*="pai-f"] {
    background-color: #000;
}

[class*="pai-f"] img {
    opacity: .7;
}


/*角丸*/

.pai-f {
    border-radius: 2px;
}


/*上のみ*/

.pai-ft {
    border-radius: 2px 2px 0 0;
}


/*チョンチョン下のみ*/

.pai-f-c {
    border-radius: 0 0 2px 2px;
}


/*山*/

.pai-f-y {
    border-radius: 1px;
}


/*上段*/

.pai-f-yt {
    border-radius: 1px 1px 0 0;
}


/*下段*/

.pai-f-yb {
    border-radius: 0 0 1px 1px;
}


/*卓フィルター*/

.table-f-w {
    width: 100px;
    height: 100px;
    border-radius: 9px;
    background: #fff;
    opacity: .3;
}


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


/*回転*/

.r-90,
.r-180,
.r-270 {
    display: inline-block;
}

.r-90 {
    transform: rotate(90deg);
}

.r-180 {
    transform: rotate(180deg);
}

.r-270 {
    transform: rotate(270deg);
}

.r-225 {
    transform: rotate(225deg);
}

[class*="pai-"] {
    display: inline-block;
    line-height: 0;
}


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


/*トリミング*/

[class^="of-sh"] {
    width: 8px;
    object-fit: cover;
}

.of-sht {
    height: 20.71px;
    object-position: left top;
}

.of-shb {
    height: 5.65px;
    object-position: left top;
}

.of-sh2 {
    height: 26.35px;
    object-position: left top;
}

.of-sh2r {
    height: 26.35px;
    object-position: right top;
}

.of-shtr {
    height: 20.71px;
    object-position: right top;
}

.of-shbr {
    height: 5.65px;
    object-position: right top;
}


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


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


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


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


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


/*div*/


/*卓*/

[class^="d-table"] {
    position: relative;
    display: inline-block;
    margin: 0 8px 12px;
    font-size: 1.4rem;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background: #4d9d73;
    border: 1px solid #000;
    border-radius: 10px;
}

.d-table {
    width: 100px;
    height: 100px;
}

.d-table-s {
    width: 80px;
    height: 80px;
    margin: 0 2px 12px;
    font-size: 1.2rem;
}


/*変形*/

.d-table-rb {
    width: 140px;
    height: 80px;
    border: 1px solid #000;
    border-top: none;
    border-left: none;
    border-radius: 0 0 10px;
}

.d-table-b-n-s {
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 0;
}

.d-table-b-n {
    width: 200px;
    height: 200px;
    border: none;
    border-radius: 0;
}

.d-table-l-v {
    width: 240px;
    height: 170px;
}


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


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


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


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


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


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


/*xyポジション*/


/*横*/

[class*="tnsp-t"],
[class*="tnsp-s"],
.b4-p,
.b6-p,
.dice-p,
.dice-p-hp {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


/*縦*/

[class*="tnsp-n"],
[class*="tnsp-p"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


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


/*風位置*/

.tnsp-t {
    bottom: 4%;
}

.tnsp-n {
    right: 6%;
}

.tnsp-s {
    top: 4%;
}

.tnsp-p {
    left: 6%;
}


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


/*牌位置*/

.tnsp-t-p {
    bottom: 22%;
}

.tnsp-n-p {
    right: 24%;
}

.tnsp-s-p {
    top: 20%;
}

.tnsp-p-p {
    left: 24%;
}


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


/*捨牌位置*/

.tnsp-t-sh,
.tnsp-n-sh,
.tnsp-s-sh,
.tnsp-p-sh {
    text-align: left;
    line-height: 0;
}

.tnsp-t-sh {
    bottom: 16%;
    left: 50%;
}

.tnsp-n-sh {
    top: 50%;
    right: 6%;
}

.tnsp-s-sh {
    top: 16%;
    left: 50%;
}

.tnsp-p-sh {
    top: 50%;
    left: 6%;
}


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


/*四風連打位置*/

.tnsp-t-s {
    bottom: 16%;
    left: 45%;
}

.tnsp-n-s {
    top: 55%;
    right: 16%;
}

.tnsp-s-s {
    top: 16%;
    left: 55%;
}

.tnsp-p-s {
    top: 45%;
    left: 16%;
}


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


/*牌山*/

[class$="-ym"],
[class$="-hp"] {
    line-height: 0;
    white-space: nowrap;
}

.tnsp-t-ym {
    bottom: 16%;
    z-index: 3;
}

.tnsp-n-ym {
    right: 13%;
    z-index: 2;
}

.tnsp-s-ym {
    top: 16%;
    z-index: 1;
}

.tnsp-p-ym {
    left: 13%;
    z-index: 2;
}


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


/*配牌*/

.tnsp-t-hp {
    bottom: 4%;
}

.tnsp-n-hp {
    right: 4%;
}

.tnsp-s-hp {
    top: 4%;
}

.tnsp-p-hp {
    left: 4%;
}


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


/*場風位置*/

.tnsp-tn {
    bottom: 38%;
    z-index: 4;
    font-size: 5.0rem;
    color: #4d9d73;
}


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


/*牌裏位置*/


/*４枚*/

.b4-p {
    top: 40%;
}


/*６枚*/

.b6-p {
    top: 18%;
}


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


/*同順フリテン*/

.tnsp-n-s-2 {
    top: 43%;
    right: 16%;
}


/*○×位置*/

.df-c {
    top: 44%;
    right: 29%;
    transform: scale(.5) !important;
    transform-origin: left top;
}

.df-t {
    top: 32%;
    left: 49%;
    transform: scale(.9);
    transform-origin: left top;
}


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


/*起家マーク位置*/

.c-mark-p {
    position: absolute;
    bottom: 4%;
    left: 70%;
}

.c-mark-p-l {
    position: absolute;
    bottom: 4%;
    left: 82%;
}


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


/*積み棒位置*/

.tenbo-p {
    position: absolute;
    bottom: 20%;
    left: 30%;
}

.tenbo-p-2 {
    position: absolute;
    bottom: 40%;
    left: 30%;
}


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


/*リーチ棒位置*/

.tenbo-p-r {
    position: absolute;
    left: 50%;
    bottom: 35%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


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


/*サイコロ位置*/

.dice-p {
    bottom: 14%;
}

.dice-p-hp {
    bottom: 30%;
}


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


/*数字位置*/

.n-p-hp {
    position: absolute;
    top: 2px;
    z-index: 10;
    transform: scale(.8);
}


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


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


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


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


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


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


/*矢印*/

[class*="arrow-t"],
[class*="arrow-a"] {
    position: absolute;
    font-size: 1.4rem;
    color: #f6bd60;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


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

.arrow-t-45 {
    top: 18%;
    left: 18%;
    transform: rotate(45deg);
}

.arrow-t-135 {
    top: 18%;
    right: 18%;
    transform: rotate(135deg);
}

.arrow-t-225 {
    bottom: 18%;
    right: 18%;
    transform: rotate(225deg);
}

.arrow-t-315 {
    bottom: 18%;
    left: 18%;
    transform: rotate(315deg);
}


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


/*頭ハネ*/

.arrow-a-225,
.arrow-a-315 {
    top: -14%;
    font-size: 1.6rem;
}

.arrow-a-225 {
    left: -14%;
    transform: rotate(225deg);
}

.arrow-a-315 {
    right: -14%;
    transform: rotate(315deg);
}


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


/*取り出し*/

.arrow-hp,
.arrow-hp-r {
    position: absolute;
    top: 26%;
    font-size: 1.4rem;
}

.arrow-hp {
    left: 22%;
}

.arrow-hp-r {
    left: 58%;
}

.arrow-hp-b {
    position: absolute;
    bottom: 18%;
    right: 14%;
    z-index: 10;
    font-size: 2.6rem;
}


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


/*サイト内検索*/

.input-s {
    width: 75%;
    box-sizing: border-box;
    margin: 0 2px 0 0;
}

.submit-s {
    text-align: center;
    width: 20%;
    color: #6d454c;
}

.input-s,
.submit-s,
.input-i,
textarea {
    padding: 4px;
    font-size: 1.0rem;
    border: 1px solid #6d454c;
    border-radius: 3px;
}

::placeholder {
    color: #d3c7c9
    /*.3*/
    ;
}

input:focus,
textarea:focus {
    border: 1px solid #ec6d71;
    outline: 0;
}

input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #f7f5f6
    /*.05*/
    inset;
}

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}


/*指カーソル*/

input[type="submit"],
input[type="button"],
button {
    cursor: pointer;
}


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


/*問い合わせフォーム*/

.t-inquiry {
    border: none;
    background: none;
}

.t-inquiry td {
    padding: 4px;
    vertical-align: bottom;
}

.t-inquiry td:first-child {
    vertical-align: top;
    text-align: center;
}

.input-i,
.input-i-c {
    width: 150px;
}

textarea,
.textarea-c {
    display: block;
    width: 150px;
    height: 100px;
}

.textarea-c {
    height: auto;
}

.submit-se {
    width: 40px;
}


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


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


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


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


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


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


/*付加クラスなど*/


/*文字*/

a {
    display: block;
    text-decoration: none;
    color: inherit;
}

a:hover {
    opacity: .7;
}

.a-line {
    display: inline-block;
    text-decoration: underline #f5b6b8
    /*.5*/
    solid;
    color: #ef8a8d
    /*0.8*/
    ;
}

em {
    font-family: '游ゴシック';
    font-size: 110%;
}


/*ページ内*/

.a-line-p {
    display: inline;
    text-decoration: underline #fadeaf
    /*.5*/
    dotted;
    color: #f7ca7f
    /*.8*/
    ;
}


/*ノート内*/

.a-line-u {
    display: inline;
    text-decoration: underline #b6a2a5
    /*.5*/
    dotted;
}


/*ツールチップ*/

.a-line-t {
    text-decoration: underline #a6ceb9
    /*.5*/
    dashed;
    color: #70b08f
    /*.8*/
    ;
}


/*下線白*/

.a-line-w {
    text-decoration-color: rgba(255, 255, 255, .5);
}


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

.text-c,
.text-c td {
    text-align: center !important;
}

.text-r {
    text-align: right !important;
}

.text-l,
.text-l td {
    text-align: left !important;
}

.f-s-08 {
    transform: scale(.8);
}

.f-s-12 {
    font-size: 1.2rem !important;
}

.f-s-14 {
    font-size: 1.4rem;
}


/*色*/

.c-p {
    color: #ec6d71;
}

.c-y {
    color: #f6bd60;
}

.c-b {
    color: #587291;
}

.c-g {
    color: #4d9d73;
}

.c-w {
    color: #fff !important;
}

.bg-w {
    background: #fff !important;
}


/*透明*/

.c-0 {
    opacity: 0;
}


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


/*アイコン*/

i {
    margin: 0 4px 0 0;
    color: #ec6d71;
}

:not(i):before {
    margin: 0 4px 0 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    line-height: 0;
    color: #ec6d71;
}

.jissen h4:before,
.jissen h5:before {
    color: #4d9d73;
}

:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

:hover:after {
    opacity: .7;
}


/*左マージン*/

.ham-menu i,
.u-menu i {
    margin: 0 0 0 8px;
    color: #6d454c;
}


/*before色変え*/

.b-c-b:before {
    color: #587291;
}

.b-c-y:before {
    color: #f6bd60;
}

.b-c-g:before {
    color: #4d9d73;
}

.clip:before {
    content: '\f0c6';
}

.smile:first-of-type:before {
    font-weight: 400 !important;
    content: '\f118' !important;
}

.frown:first-of-type:before {
    font-weight: 400 !important;
    content: '\f119' !important;
}

.book:before {
    content: '\f518';
}

.check:before {
    font-weight: 400;
    content: '\f14a';
}


/*○✕*/

.fa-circle {
    margin: 1.2px;
    vertical-align: middle;
    transform: scale(.9);
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: .13rem #ec6d71;
}

.fa-times {
    margin: 2px;
    font-size: 1.2rem;
    color: #587291;
}


/*右矢印*/

.fa-forward {
    margin: 0 0 0 2px;
}


/*テーブル内‣*/

.fa-caret-right {
    margin: 0 4px;
}


/*下向きアイコン*/

table .fa-angle-double-up {
    margin: 0 4px;
}

.fa-angle-double-up {
    transition: .3s;
}

.fa-angle-double-up:hover {
    opacity: .7;
}


/*クローズ後トランスフォーム
同じ要素内のためスペース無し*/

.close.fa-angle-double-up {
    transform: rotate(180deg);
    transition: .3s;
}


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


/*ゆたくんブログページ用*/

.card-y i,
.blog-d i {
    color: #b6a2a5
    /*.5*/
    ;
}


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


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


/*自作*/

.yogo {
    font-size: 1.4rem;
    background: linear-gradient(transparent 60%, rgba(236, 109, 113, .5) 0%);
}

.guide {
    background: linear-gradient(transparent 70%, rgba(246, 189, 96, .5) 0%);
}

.guide-d {
    background: linear-gradient(transparent 80%, rgba(77, 157, 115, .5) 0%);
}

.guide-p {
    background: linear-gradient(transparent 60%, rgba(236, 109, 113, .5) 0%);
}


/*ハイライト*/

.highlight {
    font-weight: bold;
    background: rgba(246, 189, 96, .5);
}


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


/*メモ*/

.cat {
    width: 30px;
}

.cat-l {
    width: 45px;
}

.d-profile {
    /* 水平方向に中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    margin: 8px auto;
    border-radius: 50%;
    border: solid 1px #b6a2a5
    /*.5*/
    ;
    box-shadow: 0 1px 10px rgba(109, 69, 76, .3);
}

.d-memo {
    display: flex;
    align-items: flex-end;
    margin: 0 0 12px;
    padding: 6px 0 0;
    /*相殺回避用*/
}

.d-memo-cat-p,
.d-memo-cat-g {
    margin: 0 4px 4px;
}

[class^="memo"] {
    position: relative;
    display: inline-block;
    margin: 0 8px 0px 8px;
    padding: 6px;
    font-size: 1.0rem;
    vertical-align: bottom;
    color: #fff;
    border-radius: 10px;
}

.memo-p {
    background: #f5b6b8
    /*.5*/
    ;
}

.memo-g {
    background: #a6ceb9
    /*.5*/
    ;
}

.memo-p:after,
.memo-g:after {
    position: absolute;
    bottom: 10px;
    content: "";
    border: 6px solid transparent;
}

.memo-p:hover:after,
.memo-g:hover:after {
    opacity: 1;
}

.memo-p:after {
    left: -14px;
    border-right: 8px solid #f5b6b8
    /*.5*/
    ;
}

.memo-g:after {
    right: -14px;
    border-left: 8px solid #a6ceb9
    /*.5*/
    ;
}


/*パネル*/

[class^="panel"] {
    display: inline-block;
    width: 50px;
    padding: 4px 0;
    text-align: center;
    color: #fff;
    white-space: nowrap;
    border-radius: 3px;
}

.panel-p {
    background: #ec6d71;
}

.panel-b {
    background: #587291;
}

.panel-y {
    background: #f6bd60;
}

.panel-g {
    background: #4d9d73;
}

.panel-j {
    margin: auto 4px;
    padding: 0 3px;
    line-height: 1.8rem;
    width: 40px;
    font-size: 1rem;
    background: #4d9d73;
    color: #fff;
}

.panel-w {
    background: #fff;
    color: rgba(77, 157, 115, .6);
}

.flame-p,
.flame-g {
    display: inline-block;
    margin: 0 4px;
    padding: 4px;
    font-weight: bold;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px #ec6d71 solid;
    border-radius: 3px;
}

.flame-g {
    border: 1px #4d9d73 solid;
}

.tnsp-in {
    font-size: 1.0rem;
    opacity: .7;
}


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


/*線*/

.b-b-b {
    border-bottom: 2px #587291 solid;
}

.b-b-y {
    border-bottom: 2px #f6bd60 solid;
}

.b-b-g {
    border-bottom: 2px #4d9d73 solid;
}

.b-t-n {
    border-top: none !important;
}

.b-b-n {
    border-bottom: none !important;
}

.b-n {
    border: none !important;
}


/*区切り線*/

hr {
    border: 0;
}

.hr-d {
    margin: 12px 8px;
    border-bottom: dashed 1px #b6a2a5
    /*.5*/
    ;
}


/*テーブルリスト内ドット線*/

.hr-d-t {
    margin: 4px 8px;
    border-bottom: dashed 1px #b6a2a5
    /*.5*/
    ;
}


/*間隔調整用td*/

.w-100 {
    width: 100%;
}


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


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


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


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


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


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


/*マージン*/

.m-0 {
    margin: 0;
}

.m-2 {
    margin: 2px;
}

.m-trb-2 {
    margin: 2px 2px 2px 0;
}

.m-tbl-2 {
    margin: 2px 0 2px 2px;
}

.m-r-4 {
    margin: 0 4px 0 0;
}

.m-l-4 {
    margin: 0 0 0 4px;
}

.m-r-8 {
    margin: 0 8px 0 0;
}


/*基本p*/

.m-b-8 {
    margin: 0 0 8px;
}


/*テーブル内p*/

.m-b-4 {
    margin: 0 0 4px;
}


/*テーブル前などp*/

.m-b-12 {
    margin: 0 0 12px;
}


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


/*ゆたくん歌詞用マージン*/

.m-b-16 {
    margin: 0 0 16px;
}

.m-b-24 {
    margin: 0 0 24px;
}

.m-b-32 {
    margin: 0 0 32px;
}


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


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


/*パディング*/

.p-0 {
    padding: 0 !important;
}

.p-b-4 {
    padding: 0 0 4px 0 !important;
}


/*など*/

.p-rl-8 {
    padding: 0 4px !important;
}


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


/*一時的消去display: none*/

.d-n {
    display: none;
}


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


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


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


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


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


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


/*ゆたくん追加*/


/*配信*/

.item {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 8px auto;
}

.item a {
    display: flex;
    align-items: center;
}

.item img {
    width: 30%;
    margin: 0 20px;
}

.item .text {
    width: 70%;
}

.video {
    position: relative;
    width: 80%;
    margin: 8px auto;
    overflow: hidden;
    /* 溢れた部分を隠す */
    /*アスペクト比を16:9に設定*/
    aspect-ratio: 16 / 9;
    /* アスペクト比を指定 */
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*プロフィール*/

.slide-show {
    position: relative;
    width: 50%;
    padding-bottom: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 3s;
}

.slide.active {
    opacity: 1;
}


/*ダウンロード*/


/*lightbox*/

.gallery {
    display: flex;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    /*左寄せ*/
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    /*more用
    height: auto;
    position: absolute;*/
}

.gallery li {
    margin: 4px 4px;
    height: 80px;
    width: 80px;
    overflow: hidden;
    position: relative;
}

.gallery li img,
.gallery li video {
    height: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*ブログ内*/

.gallery-b li {
    margin: 4px 4px;
    height: 160px;
    width: 320px;
    overflow: hidden;
    position: relative;
}

.gallery-b li img,
.gallery-b li video {
    top: 0;
    /* 上に合わせる */
    left: 0;
    /* 左寄せ */
    transform: none;
    /* 中央寄せを解除 */
}


/*li画像の背景,拡大画像の背景*/

.gallery-bg,
.lb-image[src="../../common/images/material/punch.png"],
.lb-image[src="../../common/images/material/punch-2.png"],
.lb-image[src="../../common/images/material/punch-3.png"],
.lb-image[src="../../common/images/material/spear.png"],
.lb-image[src="../../common/images/material/grunge.png"] {
    background-color: #000;
    /* 背景色を黒に設定 */
}


/* Lightboxの背景全体の色 */

.lb-backdrop {
    background: rgba(109, 69, 76, 0.7);
}


/*文字*/

.yuta .lead {
    padding: 16px 0;
}


/*ギャラリー*/

.card-g .menuimg1 {
    top: -60%;
    left: -50%;
}

.card-g .menuimg2 {
    top: -180%;
    left: -30%;
}

.card-g .menuimg3 {
    top: -90%;
    left: -20%;
}

.card-g .menuimg4 {
    top: -80%;
    left: -40%;
}


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


/*アラーナ*/

.arana .gallery {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    /*more用*/
    height: auto;
    position: absolute;
}

.arana .gallery li {
    padding: 4px 0;
    height: 40px;
    overflow: hidden;
}

.arana .gallery li img {
    width: 60px;
}


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


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


/*もっと見る*/

.more {
    height: 300px;
    margin: 0 0 16px 0;
    overflow: hidden;
    /*決めた高さまでで非表示*/
    transition: .3s;
    position: relative;
    /*開閉ボタン固定配置の基準点用*/
}

.more-open,
.more-close {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 30px;
    font-size: 2.0rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f0eced 50%);
    /*グラデーションでかぶせる*/
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.more-open i,
.more-close i {
    padding: 4px 20px;
    vertical-align: bottom;
}

.more-close {
    display: none;
}

.more-close i {
    transform: rotate(180deg);
}


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


/*ブログページ移動*/

.page {
    width: 100%;
    text-align: center;
    margin: 40px 0 20px;
}

.page li {
    display: inline-block;
    margin: 0 4px;
}

.page a {
    color: #ec6d71;
}

.page i {
    margin: 4px;
}

.page-h {
    visibility: hidden;
}


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


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


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


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


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


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


/*アラーナ追加*/


/*カラオケ*/

.karaoke {
    position: relative;
    height: 44px !important;
    width: 70px;
    margin: 4px;
    padding: 4px 0;
    overflow: hidden;
    background: url('../images/_20211112_183518.JPG');
    background-size: cover;
}

.karaoke a {
    display: block;
    height: 100%;
}

.karaoke span {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0;
    font-size: 1.0rem;
    line-height: 1.6rem;
    background: #fff;
    text-align: center;
    opacity: .7;
}


/*空のデータ用*/

.none {
    display: none;
}


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


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


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


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


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


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


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


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


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


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


/*スマホ非表示*/

.sidebar,
.n-menu,
.n-menu-j,
.h-index-p {
    display: none;
}


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


/*pc*/

@media screen and (min-width:700px) {
    /*--------------------------------*/
    /*pc非表示*/
    .fixed-header-i,
    .fixed-header,
    .lead,
    .content .toc,
    .ad,
    .h-index-s {
        display: none;
    }
    /*--------------------------------*/
    html {
        font-size: 74%;
    }
    /*--------------------------------*/
    .body-i {
        background: #f7f5f6
        /*.05*/
        ;
    }
    /*--------------------------------*/
    /* ナビゲーション */
    .n-menu {
        display: block;
        width: 100%;
    }
    .n-menu-bg {
        height: 56px;
        background: #ec6d71;
    }
    .jissen .n-menu-bg {
        background: #4d9d73;
    }
    .n-u-menu {
        position: fixed;
        top: 0;
        display: flex;
        width: 100%;
        margin: auto;
        height: 56px;
        padding: 8px 60px;
        background-color: rgba(236, 109, 113, .7);
        box-shadow: 0 1px 10px rgba(109, 69, 76, .3);
        z-index: 20;
        box-sizing: border-box;
        line-height: 1.4rem
    }
    .jissen .n-u-menu {
        background-color: rgba(77, 157, 115, .7);
    }
    .n-u-menu li:not(.n-u-menu-c li) {
        width: 100%;
        height: 40px;
        display: table;
        border-left: #fff 1px solid;
        text-align: center;
    }
    .n-u-menu li:last-child {
        border-right: #fff 1px solid;
    }
    .n-u-menu li a:not(.n-u-menu-c li a,
    .title) {
        display: table-cell;
        vertical-align: middle;
        color: #fff;
    }
    /*--------------------------------*/
    /*プルダウンサブ*/
    .n-u-menu-i {
        position: relative;
    }
    .n-u-menu-c {
        position: absolute;
        top: 48px;
        right: 0;
        width: 200px;
        text-align: left;
        box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
    }
    /*--------------------------------*/
    /*タイトル*/
    .title {
        height: 38px;
        width: 107px;
    }
    .title-j {
        width: 153px !important;
    }
    .logo {
        width: 30px;
    }
    .title-lead {
        left: 36px;
    }
    h1,
    h6 {
        font-size: 1.6rem;
    }
    .n-u-menu li:first-child {
        position: relative;
        min-width: 127px;
    }
    .n-u-menu li .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
    }
    /*--------------------------------*/
    /*ヘッダー*/
    /*トップページ*/
    .h-index-p {
        display: block;
    }
    .header-i figure {
        height: 180px;
        margin: 0 0 24px 0;
    }
    .header-i figure img {
        width: 100%;
    }
    /*--------------------------------*/
    /*ゆたくん*/
    .yuta .header-i figure {
        height: 420px;
    }
    /*--------------------------------*/
    /*--------------------------------*/
    /*コンテンツページ*/
    header figure:not(.header-i figure) {
        height: 160px;
        margin: 0;
    }
    /*--------------------------------*/
    /*ゆたくんかーすけ*/
    .yuta header figure:not(.header-i figure),
    .kasuke header figure:not(.header-i figure) {
        height: 240px !important;
    }
    header figure img:not(.header-i figure img):not(.kasuke header figure img) {
        width: 100%;
    }
    /*--------------------------------*/
    /*--------------------------------*/
    /*ゆたくん*/
    .yuta header figure img:not(.header-i figure img) {
        top: -320px;
    }
    /*--------------------------------*/
    /*アラーナ*/
    .arana .header-i figure {
        height: 280px;
    }
    .header-i p {
        top: 20%;
    }
    .arana header figure img:not(.header-i figure img) {
        width: 100%;
    }
    .h-gallery {
        top: -160%;
    }
    .h-mahjong {
        top: -250%;
    }
    .h-illustration {
        top: -160%;
    }
    .h-handicraft {
        top: -110%;
    }
    .h-karaoke {
        top: -150%;
    }
    /*--------------------------------*/
    /*--------------------------------*/
    .h-nyumon {
        top: -80%;
        left: 10%;
    }
    .h-rule {
        top: -80%;
        left: 10%;
    }
    .h-yaku {
        top: -80%;
        left: 10%;
    }
    .h-tensu {
        top: -100%;
        left: 10%;
    }
    .h-tatakai {
        top: -60%;
        left: 0%;
    }
    .h-yogo {
        top: -90%;
        left: 10%;
    }
    /*--------------------------------*/
    /*コンテンツエリア*/
    .flex {
        display: flex;
        justify-content: space-between;
        padding: 24px 10%;
        background: #f7f5f6
        /*.05*/
        ;
    }
    /*--------------------------------*/
    .content {
        width: 60%;
        background: #f7f5f6
        /*.05*/
        ;
        line-height: 2.6rem;
    }
    /*--------------------------------*/
    /*サイドバー*/
    .sidebar {
        display: block;
        width: 30%;
        padding: 12px;
        /*コンテンツと合わせて*/
    }
    .sidebar-c {
        position: sticky;
        top: 80px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        /*IE Edge*/
        scrollbar-width: none;
        /*Firefox*/
        max-height: calc(100vh - 100px);
    }
    .sidebar-c::-webkit-scrollbar {
        display: none;
        /*Crome Safari*/
    }
    .s-menu {
        margin: 0 0 16px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(109, 69, 76, .3);
    }
    .s-menu-title {
        position: relative;
        padding: 2px 14px;
        font-weight: bold;
        text-align: left;
        color: #fff;
        background: #ec6d71;
        border-radius: 3px 3px 0 0;
    }
    .jissen .s-menu-title {
        background: #4d9d73;
    }
    .s-menu-title i {
        margin: 0 8px 0 0;
    }
    .s-menu-c {
        padding: 20px;
    }
    .s-menu-c .title {
        margin: 0 auto;
        color: #ec6d71;
    }
    /*--------------------------------*/
    /*目次*/
    .s-toc {
        width: 100%;
        margin: 0 0 16px;
    }
    .toc li:not(.search) {
        padding: 0 0 0 10px;
    }
    /*--------------------------------*/
    .s-menu-ad {
        text-align: center;
    }
    /*--------------------------------*/
    /*上へ戻る*/
    .page-top {
        bottom: 40px;
        width: 54px;
        height: 54px;
    }
    .page-top span:after {
        top: 13px;
    }
    /*--------------------------------*/
    /*フッター*/
    footer {
        padding: 12px 0;
    }
    .f-title {
        width: 107px;
    }
    footer li:after {
        right: 1%;
    }
    /*--------------------------------*/
    /*トップページ*/
    .card li {
        margin: 10px;
    }
    .card-h {
        height: 80px;
    }
    .card-l {
        height: 60px
    }
    .card-s li {
        width: 22%;
        line-height: 50px;
    }
    .card-m li {
        width: 44%;
    }
    .card .title {
        height: 38px;
        width: 107px;
    }
    .nyumon {
        top: -100%;
        left: -40%;
    }
    .rule {
        top: -100%;
        left: -40%;
    }
    .yaku {
        top: -100%;
        left: -40%;
    }
    .tensu {
        top: -120%;
        left: -40%;
    }
    .tatakai {
        top: -80%;
        left: -60%;
    }
    .yogo {
        top: -100%;
        left: -40%;
    }
    .yaku-t {
        top: -240%;
    }
    /*--------------------------------*/
    /*アラーナ*/
    .menuimg2 {
        top: -200%;
    }
    .menuimg3 {
        top: -200%;
    }
    .menuimg4 {
        top: -600%;
    }
    .b-c-w {
        background: #fff !important;
    }
    /*--------------------------------*/
    /*見出し*/
    .h2-hr-p {
        background: #f7f5f6
        /*.05*/
        ;
        padding: 6px;
    }
    /*--------------------------------*/
    /*ゆたくん*/
    .yuta .h2-hr-p {
        padding: 30px 0 12px;
    }
    /*--------------------------------*/
    /*メイン*/
    .main {
        padding: 18px;
    }
    /*--------------------------------*/
    /*メイン内*/
    .br-n {
        display: none;
    }
    /*--------------------------------*/
    /*リスト*/
    /*メニュータイトル*/
    .u-note {
        padding: 6px 12px;
    }
    /*--------------------------------*/
    .d-yogo dt i {
        padding: 8px 14px;
    }
    /*--------------------------------*/
    /*テーブル*/
    .t-main,
    .t-ms,
    .t-block,
    .t-yaku,
    .t-mentsu,
    .t-tamen,
    .t-tooltip {
        padding: 6px 12px;
        border-spacing: 6px;
    }
    /*役幅*/
    .t-yaku {
        margin: 0 10% 16px 0;
    }
    .t-yaku tr th:before {
        margin: 0 6px 0 0;
    }
    .t-z {
        padding: 12px;
    }
    .t-chart td {
        padding: 8px;
    }
    .t-ms {
        width: 80%;
    }
    .t-category td {
        padding: 12px;
    }
    .d-tensu {
        height: 92px;
    }
    /*--------------------------------*/
    /*牌サイズ 余白*/
    /*s8*/
    .pai-sss {
        width: 12px;
    }
    /*s12*/
    .pai-ss {
        width: 18px;
    }
    /*s16*/
    .pai-s {
        width: 24px;
    }
    /*m18*/
    .pai-m {
        width: 27px;
    }
    /*山横向き幅*/
    .pai-sss-v {
        width: 15.525px;
    }
    .pai-s-v {
        width: 31.065px;
    }
    .pai-m-v {
        width: 34.935px;
    }
    /*加槓高さ*/
    .pai-s-kk {
        height: 48px;
        margin: 0 -16.935px 0 0;
        vertical-align: bottom;
    }
    .pai-m-kk {
        height: 54px;
        margin: 0 -19.065px 0 0;
        vertical-align: bottom;
    }
    /*卓サイズ*/
    .d-table {
        width: 150px;
        height: 150px;
    }
    .d-table-s {
        width: 120px;
        height: 120px;
    }
    .table-l {
        width: 315px;
        margin: -30px 0;
    }
    .d-table-rb {
        width: 210px;
        height: 120px;
    }
    .d-table-b-n-s {
        width: 150px;
        height: 150px;
    }
    .d-table-b-n {
        width: 300px;
        height: 300px;
    }
    .d-table-l-v {
        width: 350px;
        height: 255px;
    }
    /*点棒サイズ*/
    .tenbo-m {
        width: 120px;
    }
    .tenbo-s {
        width: 105px;
    }
    .tenbo-ss {
        width: 60px;
    }
    /*起家マークサイズ*/
    .c-mark-ss {
        width: 30px;
    }
    .c-mark-s {
        width: 45px;
    }
    .c-mark-m {
        width: 90px;
    }
    /*サイコロサイズ*/
    .dice-s {
        width: 15px;
    }
    .dice-m {
        width: 30px;
    }
    /*トリミング*/
    [class^="of-sh"] {
        width: 12px;
    }
    .of-sht {
        height: 31.065px;
    }
    .of-shb {
        height: 8.475px;
    }
    .of-sh2 {
        height: 39.525px;
    }
    .of-sh2r {
        height: 39.525px;
    }
    .of-shtr {
        height: 31.065px;
    }
    .of-shbr {
        height: 8.475px;
    }
    /*フィルター*/
    .pai-f {
        border-radius: 3px;
    }
    /*卓フィルター*/
    .table-f-w {
        width: 150px;
        height: 150px;
    }
    /*○×位置*/
    .df-c {
        top: 45%;
        right: 31%;
    }
    .df-t {
        top: 32%;
        left: 49.5%;
    }
    .cat {
        width: 45px;
    }
    .cat-l,
    .kasuke .header-i figure img,
    .kasuke .header figure img {
        width: 67.5px;
    }
    .d-profile {
        width: 90px;
        height: 90px;
        line-height: 90px;
    }
    [class^="panel"] {
        width: 60px;
    }
    /*--------------------------------*/
    /*付加*/
    .m-r-4 {
        margin: 0 8px 0 0
    }
    .br-t {
        display: none;
    }
    .more {
        height: 500px;
    }
}


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


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


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


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


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


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


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


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


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


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


/*タブレット*/

@media screen and (max-width: 1000px) and (min-width:700px) {
    /*メインページ*/
    /*--------------------------------*/
    /*--------------------------------*/
    /*ゆたくん*/
    .yuta header figure img:not(.header-i figure img) {
        top: -120px;
    }
    /*--------------------------------*/
    /*--------------------------------*/
    /*めたぴん*/
    .h-nyumon {
        top: -50%;
    }
    .h-rule {
        top: -50%;
    }
    .h-yaku {
        top: -50%;
    }
    .h-tensu {
        top: -70%;
    }
    .h-tatakai {
        top: -60%;
    }
    .h-yogo {
        top: -80%;
    }
    /*--------------------------------*/
    .flex {
        padding: 24px 12px;
    }
    /*--------------------------------*/
    /*トップページ*/
    .card-s li {
        width: 22%;
        height: 50px;
    }
    .card-m li {
        width: 44%;
    }
    .nyumon {
        top: -70%;
    }
    .rule {
        top: -70%;
    }
    .yaku {
        top: -70%;
    }
    .tensu {
        top: -90%;
    }
    .tatakai {
        top: -50%;
    }
    .yogo {
        top: -70%;
    }
    .yaku-t {
        top: -160px
    }
    /*--------------------------------*/
    .t-yaku {
        margin: 4px 0 16px;
    }
    /*--------------------------------*/
    /*牌サイズ 余白*/
    /*s8*/
    .pai-sss {
        width: 10.4px;
    }
    /*s12*/
    .pai-ss {
        width: 15.6px;
    }
    /*s16*/
    .pai-s {
        width: 20.8px;
    }
    /*m18*/
    .pai-m {
        width: 23.4px;
    }
    /*山横向き幅*/
    .pai-sss-v {
        width: 13.455px;
    }
    .pai-s-v {
        width: 26.923px;
    }
    .pai-m-v {
        width: 30.277px;
    }
    /*加槓高さ*/
    .pai-s-kk {
        height: 41.6px;
        margin: 0 -14.677px 0 0;
        vertical-align: bottom;
    }
    .pai-m-kk {
        height: 46.8px;
        margin: 0 -16.523px 0 0;
        vertical-align: bottom;
    }
    /*--------------------------------*/
    /*トリミング*/
    [class^="of-sh"] {
        width: 10.4px;
    }
    .of-sht {
        height: 26.923px;
    }
    .of-shb {
        height: 7.345px;
    }
    .of-sh2 {
        height: 34.255px;
    }
    .of-sh2r {
        height: 34.255px;
    }
    .of-shtr {
        height: 26.923px;
    }
    .of-shbr {
        height: 7.345px;
    }
    .br-t {
        display: block;
    }
}