@charset "utf-8";

body , html
{
    margin: 0;
    padding: 0;
    height: 100%;
}
#container
{
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
#header
{
    position: fixed !important;
    position: absolute;
    top: 0;
    width: 100%;
    height: 96px;
    background-color: #f8f8f8;
}
@media screen and (max-width: 800px)
{
#contentsPart
{
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 8px;
/*    background-color: #f8f8f0;*/
    background-color: #ffffff;
}
}
@media screen and (min-width: 801px)
{
#contentsPart
{
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 80px;
/*    background-color: #f8f8f0;*/
    background-color: #ffffff;
}
}
#footer
{
    position: fixed !important;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 32px;
    background-color: #f8f8f8;
}
.MainFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 22pt;
}
.SubFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 16pt;
    color: #7f7f7f;
}
.SubFontb
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 12pt;
    color: #000000;
}
.SubFont2
{
    /*font-family: 'M PLUS 1p', sans-serif;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-weight: 300;
    font-size: 16pt;
    color: #606060;
}
.SubFont3
{
    /*font-family: 'M PLUS 1p', sans-serif;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-weight: 300;
    font-size: 11pt;
    color: #606060;
}
.SubFont4
{
    /*font-family: 'M PLUS 1p', sans-serif;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-weight: 300;
    font-size: 10pt;
    color: #606060;
}
.CurrentFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 16pt;
    color: #000000;
}
.TitleFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 12pt;
}
.TitleFontW
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 12pt;
    color: #7f7f7f;
}
.TextFont2
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 14pt;
}
.TextFont3
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 12pt;
}
.TextFont4
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 11pt;
}
.TextFont4I
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 11pt;
    font-style: italic;
}
.CopyrightFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 8pt;
    color: #444444;
}
.NoteFont
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 8pt;
    color: #dc143c;
}
.linkstyleMain
{
    text-decoration: none;
    color: #000000;
}
.linkstyle
{
    text-decoration: none;
    color: #7f7f7f;
}
.linkstyle:hover
{
    text-decoration: none;
    color: #0000ef;
}
.linkstyle_c
{
    text-decoration: none;
    color: #000000;
}
.linkstyle_c:hover
{
    text-decoration: none;
    color: #0000ef;
}
.linkstyle_m
{
    text-decoration: none;
    color: #606060;
}
.linkstyle_m:hover
{
    text-decoration: none;
    color: #0000ef;
}
.linkstyle2
{
    text-decoration: none;
    color: #000000;
}
.br:before
{
    content: "\A";
    white-space: pre;
}

/**************************************************************/
/* indexページ表示専用                                        */
/**************************************************************/
.contents2
{
    border-collapse: collapse;
    table-layout: fixed;
}
.contents2 th.middleSize
{
    width: 160px;                                              /* 画像サイズ / ulタグと連動させる ulのwidth - 2px */
    height: 226px;                                             /* 画像サイズ / ulタグと連動させる ulのheight - 2px */
    text-align: left;
    padding-top: 32px;                                         /* ウィンドウ上部からの距離 */
    padding-bottom: 12px;                                      /* 下行との距離 / middleSizeと同値にする */
    padding-left: 4px;                                         /* 左側余白サイズ */
    padding-right: 12px;                                       /* 右側余白サイズ */
}
.contents
{
    border-collapse: collapse;
    table-layout: fixed;
}
@media screen and (max-width: 800px)
{
    .contents th.middleSize_TopLine
    {
        width: 100%;                                               /* 画像サイズ / ulタグと連動させる ulのwidth - 2px */
        height: 32px;                                              /* 画像サイズ / ulタグと連動させる ulのheight - 2px */
        text-align: left;
        text-align: justify;
        padding-top: 128px;                                        /* ウィンドウ上部からの距離 */
        padding-bottom: 8px;                                       /* 下行との距離 / middleSizeと同値にする */
        padding-left: 4px;                                         /* 左側余白サイズ */
        padding-right: 12px;                                       /* 右側余白サイズ */
    }
}
@media screen and (min-width: 801px)
{
    .contents th.middleSize_TopLine
    {
        width: 638px;                                              /* 画像サイズ / ulタグと連動させる ulのwidth - 2px */
        height: 32px;                                              /* 画像サイズ / ulタグと連動させる ulのheight - 2px */
        text-align: left;
        text-align: justify;
        padding-top: 128px;                                        /* ウィンドウ上部からの距離 */
        padding-bottom: 8px;                                       /* 下行との距離 / middleSizeと同値にする */
        padding-left: 4px;                                         /* 左側余白サイズ */
        padding-right: 12px;                                       /* 右側余白サイズ */
    }
}
ul
{
    list-style: none;
    top: 0px;
    width: 160px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 226px;                                             /* 画像表示枠 / middleSizeと連動させる */
    margin: 0px;
    padding: 0px;
}
ul li
{
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 160px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 226px;                                             /* 画像表示枠 / middleSizeと連動させる */
    margin: 0px;
}
ul dl
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    width: 160px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 226px;                                             /* 画像表示枠 / middleSizeと連動させる */
    margin: 0px;
    padding: 0px;
    font-weight: normal;
}
.type1 dl
{
    opacity: 0.2;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;  /* ポップアップする時間 */
    transition: opacity 0.6s, transform 0.6s;                  /* ポップアップする時間 */
}
.type1:hover dl
{
    opacity: 1.0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.type1 dl.bgimg
{
    opacity: 0.0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;  /* 画像のフェイドアウト時間 */
    transition: opacity 0.8s, transform 0.8s;                  /* 画像のフェイドアウト時間 */
}
.type1:hover dl.bgimg
{
    opacity: 0.9;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
img.roundimg1
{
    border: 1px #c0c0c0 solid;                                 /* 画像の縁 / border * 2 + width = ulのwidth */
    opacity: 1.0;                                              /* 表示画像の透明度 */
    width: 158px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 224px;                                             /* 画像表示枠 / middleSizeと連動させる */
}
img.roundimg2
{
    border: 1px #c0c0c0 solid;                                 /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 158px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 224px;                                             /* 画像表示枠 / middleSizeと連動させる */
}
img.concept
{
    border: 1px #c0c0c0 solid;                                 /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 640px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 422px;                                             /* 画像表示枠 / middleSizeと連動させる */
}

/**************************************************************/
/* aboutページ表示専用                                        */
/**************************************************************/
.TextFont5
{
    /*font-family: Century Gothic, Meiryo, Arial;*/
    font-family: 'M PLUS 1p', 'Roboto Mono', monospace, sans-serif;
    font-size: 14pt;
    color:#7f7f7f;
}
.TextFont5:hover
{
    color:#0000ef;
    text-decoration:none;
}
.abTable
{
    border-collapse: collapse;
    table-layout: fixed;
}
.abTable th
{
    font-weight: normal;
}
.abTable th.Top
{
    padding-top: 128px;                                        /* 画像, コンタクト情報のウィンドウ上部からの位置 */
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
.abTableLeft
{
    text-align: left;
    vertical-align: top;
    height: 128px;                                             /* 画像のウィンドウ上部からの位置 */
}
.abTableRight
{
    text-align: left;
    vertical-align: top;
    height: 128px;                                             /* コンタクト情報のウィンドウ上部からの位置 */
}
.abInnerTable
{
    border-collapse: collapse;
    table-layout: fixed;
}
.abInnerTable th
{
    padding-top: 4px;
    padding-left: 32px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
.abInnerTable th.year
{
    padding-top: 4px;
    padding-left: 16px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
img.abportrait
{
    border: 1px #c0c0c0 solid;                                 /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 158px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 158px;                                             /* 画像表示枠 / middleSizeと連動させる */
}
/* クリックで表示するためのcss ********************************/
.hidden_box
{
    margin: 0em 0;                                             /*前後の余白*/
    padding-bottom: 8px;
}
/*ボタン装飾*/
.hidden_box label
{
    padding: 0px;
    border: none;
    cursor :pointer;
}
/*ボタンホバー時*/
.hidden_box label:hover
{
}
/*チェックは見えなくする*/
.hidden_box input
{
    display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show
{
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 1.0s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show
{
    padding: 0px 0;
    height: auto;
    opacity: 1;
}

/**************************************************************/
/* contactページ表示専用                                      */
/**************************************************************/
.cTable
{
    border-collapse: collapse;
    table-layout: fixed;
}
.cTable th
{
    font-weight: normal;
}
.cTable th.Top
{
    padding-top: 128px;                                        /* 画像, コンタクト情報のウィンドウ上部からの位置 */
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}
.cTableLeft
{
    text-align: left;
    vertical-align: top;
    height: 158px;                                             /* 画像のウィンドウ上部からの位置 */
}
.cTableRight
{
    text-align: left;
    vertical-align: top;
    height: 158px;                                             /* コンタクト情報のウィンドウ上部からの位置 */
}
img.contact
{
    border: 1px #c0c0c0 solid;                                 /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 158px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 158px;                                             /* 画像表示枠 / middleSizeと連動させる */
}
img.bsky
{
    border: 1px;                                               /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 130px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 39px;                                              /* 画像表示枠 / middleSizeと連動させる */
}
img.remap
{
    border: 0px;                                               /* 画像の縁 / border * 2 + width = ulのwidth */
    width: 130px;                                              /* 画像表示枠 / middleSizeと連動させる */
    height: 40px;                                              /* 画像表示枠 / middleSizeと連動させる */
}

/**************************************************************/
/* copyright表示専用                                          */
/**************************************************************/
.crTable
{
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}
.crTable th
{
    padding-right: 32px;
    text-align: center;
    vertical-align: middle;
    font-weight: normal;
}




/**************************************************************/
/*humberger menu(ボタン)の表示                                */
/**************************************************************/
@media screen and (max-width: 800px)
{
    .menu-btn
    {
        position: fixed;
        top: 10px;
        left: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #ffffff;    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after
    {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #cfcfcf;
        position: absolute;
    }
    .menu-btn span:before {
        bottom: 8px;
    }
    .menu-btn span:after {
        top: 8px;
    }
    #menu-btn-check:checked ~ .menu-btn span
    {
        background-color: rgba(255, 255, 255, 0);
    }
    #menu-btn-check:checked ~ .menu-btn span::before
    {
        bottom: 0;
        transform: rotate(45deg);
    }
    #menu-btn-check:checked ~ .menu-btn span::after
    {
        top: 0;
        transform: rotate(-45deg);
    }
    #menu-btn-check
    {
        display: none;
    }

/**************************************************************/
/*humberger menuの(メニュー)表示                              */
/**************************************************************/
    .menu-content
    {
        width: 100%;
        height: 232px; /* 1メニュー辺りの高さ×メニュー数(5)＋パディング×2(上下) */
        position: fixed;
        top: 70px;
        left: 100%;
        z-index: 80;
        background-color: #cfcfcf;        transition: all 0.5s;
    }
    .menu-content ul
    {
        height: 200px; /* 1メニュー辺りの高さ×メニュー数(5) */
        padding: 16px;
    }
    .menu-content ul li
    {
        width: 480px;
        height: 40px; /* 1メニュー辺りの高さ */
        list-style: none;
    }
    #menu-btn-check:checked ~ .menu-content
    {
        left: 0;
    }

    .menubar
    {        display: none;
    }
}

/* 480px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 801px)
{
    #menu-btn-check
    {
        display: none;
    }
    .menu-btn
    {
        display: none;
    }
    .menu-content
    {
        display: none;
    }

    .menubar
    {
        top: 0px;
        position: fixed;
        border-collapse: collapse;
        background-color: #ffffff;
    }
    .menubar th
    {
        padding: 32px;
        padding-bottom: 0px;
        text-align: left;
        vertical-align: bottom;
        font-weight: normal;
    }

    .menuTable2
    {
        width: 100%;
        height: 100%;
        table-layout: fixed;
        opacity: 0.5;
    }
    #contents2 {
        position: fixed !important;
        top: 62px;
        width: 100%;
        height: 12px;
        background-color: #ffffff;
        opacity: 0.9;
    }
    #contents3
    {
        position: fixed !important;
        top: 74px;
        width: 100%;
        height: 12px;
        background-color: #ffffff;
        opacity: 0.7;
    }
    #contents4
    {
        position: fixed !important;
        top: 86px;
        width: 100%;
        height: 12px;
        background-color: #ffffff;
        opacity: 0.3;
    }
    #contents5
    {
        position: fixed !important;
        top: 98px;
        width: 100%;
        height: 12px;
        background-color: #ffffff;
        opacity: 0.1;
    }
}