/*===============================================
 style.css
===============================================*/

/* サブセット化済みの為メニューボタンの文字以外使用できません */
@font-face {
    font-family: 'rounded';
    src: url('../font/rounded-x-mgenplus-1c-black.woff') format('woff'),
        url('../font/rounded-x-mgenplus-1c-black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

*:not(input, a){
    touch-callout:none;
    user-select:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
}

body {
    width: 100%;
    height: auto;
    font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
    font-weight: normal;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#BEE8F4', endColorstr='#3D97D9');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#BEE8F4', endColorstr = '#3D97D9')";
    background-image: -moz-linear-gradient(top, #BEE8F4, #3D97D9);
    background-image: -ms-linear-gradient(top, #BEE8F4, #3D97D9);
    background-image: -o-linear-gradient(top, #BEE8F4, #3D97D9);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#BEE8F4), to(#3D97D9));
    background-image: -webkit-linear-gradient(top, #BEE8F4, #3D97D9);
    background-image: linear-gradient(top, #BEE8F4, #3D97D9);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
}

h1 {
    font-size: 50px;
    font-weight: bold;
}

h2 {
    font-size: 26px;
    font-weight: bold;
}

h3 {
    font-size: 24px;
    font-weight: bold;
}

h4 {
    font-size: 20px;
    font-weight: normal;
}

h5 {
    font-size: 20px;
    font-weight: normal;
    font-weight: bold;
}

h6 {
    font-size: 16px;
    font-weight: normal;
    font-weight: bold;
}

p {
    font-size: 12px;
}

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

a .flex-item:hover {
    opacity: 0.7;
}

a .flex-item:active {
    opacity: 0.5;
}

a .flex-item:before,
a .flex-item:after,
a .logo:before,
a .logo:after {
    position: absolute;
    z-index: 0;
    display: block;
    content: '';
}

a .flex-item,
a .flex-item:before,
a .flex-item:after,
a .logo,
a .logo:before,
a .logo:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

hr {
    border: none;
    border-top: dashed 2px #FFFFFF;
    width: 98%;
    margin: 15px auto;
}

.ruby {
    font-weight: normal;
    font-size: 70%;
    color: #000000;
    speak: none !important;
}

.ruby.bk {
    color: #000000;
}

.ruby.wh {
    color: #FFFFFF;
}

h1 span.ruby,
h2 span.ruby,
h3 span.ruby,
h4 span.ruby,
h5 span.ruby,
h6 span.ruby {
    display: inline-block;
    font-size: 60%;
    width: 100%;
    line-height: 10px;
}

h4 span.ruby{
    text-align: center;
}

h5 span.ruby {
    margin-left: 15px;
    font-size: 60%;
}

/* ローディング */
#loader {
    width: 150px;
    height: auto;
    display: none;
    position: fixed;
    top: 42%;
    left: 42%;
    z-index: 9999;
}

#loader img {
    width: 150px;
}

#fade {
    width: 100%;
    height: auto;
    display: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.8;
    z-index: 9998;
}

/* 背景 波 */
#wave {
    position: absolute;
    top: 50px;
    width: 100%;
    min-height: 500px;
    background-image: url("../img/wave2.png"), url("../img/wave1.png");
    background-repeat: repeat-x;
    background-size: auto;
    animation: cloudMove 10s infinite;
}

@keyframes cloudMove {
    0% {
        background-position: 0 0, 0 0;
    }
    50% {
        background-position: 40px 0, 80px 0;
    }
    100% {
        background-position: 0 0, 0 0;
    }
}


#wrapper {
    width: 100%;
    min-height: 600px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#wrapper h1 {
    position: relative;
    text-align: center;
}

#wrapper h1 a .logo {
    color: #000000;
    background: url('../img/logo.png') no-repeat;
    background-size: 400px;
    width: 400px;
    height: 160px;
    font-family: 'KFhimajiFUDE';
}

#wrapper h1 a .logo:hover {
    opacity: 0.8;
}

#frame {
    position: relative;
    width: 800px;
    min-height: 500px;
    margin: 0 auto;
    background: url('../img/frame.png') no-repeat;
    background-size: 800px;
    margin-top: 30px;
}

.flex-container {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.flex-container.menu .flex-item {
    padding: 10px 0 0 10px;
    -moz-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.flex-item.center {
    text-align: center;
}

.flex-item.left {
    text-align: left;
}

.flex-item.right {
    text-align: right;
}

.ratio7-2 .flex-item:nth-of-type(1) {
    flex: 7;
}
.ratio7-2 .flex-item:nth-of-type(2) {
    flex: 2;
}

.ratio3-7 .flex-item:nth-of-type(1) {
    flex: 3;
}
.ratio3-7 .flex-item:nth-of-type(2) {
    flex: 7;
}

.ratio7-3 .flex-item:nth-of-type(1) {
    flex: 7;
}
.ratio7-3 .flex-item:nth-of-type(2) {
    flex: 3;
}

.ratio1-2 .flex-item:nth-of-type(1) {
    flex: 1;
}
.ratio1-2 .flex-item:nth-of-type(2) {
    flex: 2;
}

.ratio2-1 .flex-item:nth-of-type(1) {
    flex: 2;
}
.ratio2-1 .flex-item:nth-of-type(2) {
    flex: 1;
}

.ratio3-2 .flex-item:nth-of-type(1) {
    flex: 3;
}
.ratio3-2 .flex-item:nth-of-type(2) {
    flex: 2;
}

.ratio2-3 .flex-item:nth-of-type(1) {
    flex: 2;
}
.ratio2-3 .flex-item:nth-of-type(2) {
    flex: 3;
}


.underline {
    text-decoration: underline;
}

/****************************************
 トップページ
****************************************/

.top .flex-container {
    width: 100%;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.top .menu {
    width: 100%;
}

.top .menu a {
    width: 100%;
    height: auto;
    line-height: 28px;
    font-size: 24px;
    font-weight: bold;
    color: #FFFFFF;
}

.top .menu .flex-item {
    margin-bottom: 3px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 130px;
    background-position: 90% 90%;
    font-family: 'KFhimajiFUDE';
    text-shadow:0px 2px 1px #000000,0px 1px 1px #000000,1px 1px 1px #000000,1px 0px 1px #000000,2px 0px 1px #000000,1px -1px 1px #000000,1px -2px 1px #000000,0px -2px 1px #000000,-1px -2px 1px #000000,-2px -2px 1px #000000,-2px -1px 1px #000000,-2px 0px 1px #000000,-2px 1px 1px #000000,-1px 1px 1px #000000;
    letter-spacing: 1px;
}

.top .menu .flex-item span {
    font-family: 'rounded';
    font-weight: 900;
}

.top .menu .flex-item:hover{
    background-size: 180px;
    background-position: 100% 100%;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;
    opacity: 1;
}


/****************************************
 トップページ バナー
****************************************/

.banner a {
    width: 33%;
    height: auto;
}

.banner .flex-item {
    width: 264px;
    height: 64px;
    background-color: #FFFFFF;
}

.banner .flex-item img {
    width: 264px;
    height: auto;
    line-height: 64px;
}

/****************************************
 サブページ
****************************************/

.sub h2 {
    display: inline-block;
    position: relative;
    margin: 10px 10px 10px 0px;
    padding: 10px;
    border-radius: 5px;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;
}

.sub h3 {
    position: relative;
    margin: 10px 10px 20px 10px;
    padding: 10px;
    border-style: solid !important;
    background-color: #FFFFFF !important;
    border-left-width: 15px !important;
}

.sub h4 {
    display: inline-block;
    position: relative;
    border-radius: 40px;
    margin: 0px 10px 0px 10px;
    padding: 10px 30px;
    text-align: center;
}

.sub h5 {
    display: inline-block;
    position: relative;
    margin: 10px;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;
}

.sub h5:before {
    margin-right: 5px;
    content: '■';
}

.sub h6 {
    display: inline-block;
    position: relative;
    margin: 10px;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;
    margin-left: 25px;
}

.sub .flex-container {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.sub .flex-item {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    color: #FFFFFF;
}

.sub .flex-container.menu a {
    width: 100%;
    margin: 1px;
}

.sub .menu .flex-item {
    width: 100%;
    height: 80px;
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    padding: 4px 0 0 4px;
    background-repeat: no-repeat;
    background-size: 60px auto;
    background-position: 95% 95%;
    font-family: 'KFhimajiFUDE';
    text-shadow:0px 1px 1px #000000,0px 0px 1px #000000,1px 0px 1px #000000,0px -1px 1px #000000,-1px -1px 1px #000000,-1px 0px 1px #000000;
    letter-spacing: 1px;
}

.sub .menu .flex-item span {
    font-family: 'rounded';
    font-weight: 900;
}

.sub .menu .flex-item:hover {
    padding: 4px 0 0 4px;
    font-size: 12px;
    line-height: 14px;
    background-size: 100px auto;
    background-position: 100% 580%;
    text-shadow:0px 1px 1px #FFFFFF,0px 0px 1px #FFFFFF,1px 0px 1px #FFFFFF,0px -1px 1px #FFFFFF,-1px -1px 1px #FFFFFF,-1px 0px 1px #FFFFFF;
    opacity: 1;
}

.sub .flex-item.text {
    width: 95% !important;
    color: #000000 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 10px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

.sub .flex-item.img {
    width: 95% !important;
    color: #000000 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 10px !important;
    padding: 10px !important;
    border-radius: 5px !important;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
}

.sub .flex-item.home-btn {
    display: inline-block;
    position: relative;
    z-index: 200;              /* sub-menu より必ず前 */
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    width: 120px;
    height: 50px;
    top: 15px;
    right: 10px;
    text-align: center;
    padding: 0;
    border-radius: 5px;
}

/* hover 表現 */
.sub .flex-item.home-btn:hover{
  transform: translateY(-2px) scale(1.03);
  opacity: 0.95;
}

/* クリック時 */
.sub .flex-item.home-btn:active{
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.4);
  opacity: 0.85;
}

/* 中の画像はクリックを奪わない */
.sub .flex-item.home-btn img{
  pointer-events: none;
}

.sub .flex-item.home-btn img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
}

.sub .flex-item.home-btn:after {
    position: absolute;
    left: 45px;
    content: "ホームへ";
    font-size: 16px;
    line-height: 50px;
}

.flex-container.link > a.flex-item > span:last-child {
    display: block;
    font-size: 16px;
    padding-top: 10px;
    padding-left: 30px;
    color: #333333;
    line-height: 30px;
}

.flex-container.link > a.flex-item > span:first-child {
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #003366;
  text-shadow: rgb(255, 255, 255) 0px 2px 1px, rgb(255, 255, 255) 0px 1px 1px, rgb(255, 255, 255) 1px 1px 1px, rgb(255, 255, 255) 1px 0px 1px, rgb(255, 255, 255) 2px 0px 1px, rgb(255, 255, 255) 1px -1px 1px, rgb(255, 255, 255) 1px -2px 1px, rgb(255, 255, 255) 0px -2px 1px, rgb(255, 255, 255) -1px -2px 1px, rgb(255, 255, 255) -2px -2px 1px, rgb(255, 255, 255) -2px -1px 1px, rgb(255, 255, 255) -2px 0px 1px, rgb(255, 255, 255) -2px 1px 1px, rgb(255, 255, 255) -1px 1px 1px;
}

.symbol .flex-item.img {
    max-height: 130px;
}

.symbol .flex-item.text.ganba,
.symbol .flex-item.text.ganba-mini {
    padding: 25px 20px !important;
    position: relative !important;
    background-color: rgba(255, 255, 255, 1) !important;
    font-size: 18px !important;
    line-height: 30px !important;
}

.symbol .ganba:after {
    position: absolute;
    right: 100%;
    top: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 1, 0);
    border-right-color: #FFFFFF;
    border-width: 15px;
    margin-top: -15px;
}

.symbol .ganba-mini:after {
    position: absolute;
    left: 100%;
    top: 30%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 1, 0);
    border-left-color: #FFFFFF;
    border-width: 10px;
    margin-top: -10px;
}

.symbol p.flex-item  {
    font-size: 12px;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;
    color: #333333;
    line-height: 30px;
    margin-left: 0;
    text-align: center;
}

.industry .flex-container,
.budget .flex-container {
    position: relative;
}

.history .flex-item img:not(.home-btn img) {
    margin-top: 20px;
}

/****************************************
 吹き出し
****************************************/

.flex-item.balloon {
    position: relative;
    width: 100%;
}

.flex-item.balloon p {
    position: relative;
    width: 86%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    padding: 10px;
    font-size: 20px;
    line-height: 34px;
    font-weight: bold;
    text-shadow: none;
    color: #000000;
    background-color: #FFFFFF;
    border-radius: 10px 10px 0 0;
    border: 2px solid #000000;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    z-index: 100;
}

.flex-item.balloon p:after,
.flex-item.balloon p:before {
    top: 100%;
    left: 60%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.flex-item.balloon p:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 20px;
    margin-left: -20px;
}

.flex-item.balloon p:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 23px;
    margin-left: -23px;
}

.flex-item.balloon img {
    position: absolute;
    width: 180px;
    height:auto;
    bottom: 20px;
    right: 30px;
}


/****************************************
 テーブル
****************************************/

table {
    width: 100%;
    margin: 0 auto;
}


.table tr th,
.table tr td {
    padding: 5px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
}
.table tr th {
    text-align: left;
    background-color: #EEEEEE;
    font-weight: normal;
    border-right: solid 1px #666666;
    border-bottom: solid 1px #666666;
    text-shadow:0px 1px 1px #000000,0px 0px 1px #000000,1px 0px 1px #000000,0px -1px 1px #000000,-1px -1px 1px #000000,-1px 0px 1px #000000;
}

.table tr td {
    text-align: left;
    background-color: #FFFFFF;
    border-bottom: dashed 1px #666666;
    border-right: solid 1px #666666;
}

.table tr:last-child th,
.table tr:last-child td,
.table tr:last-child 
 {
    border-bottom: none;
}

.table tr:last-child td:last-child {
    border-right: none;
}

.table tr td.r1 {
    color: #000000;
    background-color: #EEEEEE;
    font-weight: bold;
    border-bottom: solid 1px #666666;
}

.table tr td.r2 {
    text-align: right;
}

.table .center{
    text-align: center !important;
}

.table .left{
    text-align: left !important;
}

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

.life .table tr th:nth-of-type(1),
.heritage .table tr th:nth-of-type(1) {
    border-right: none;
}

.life .table tr th:nth-of-type(2) {
    border-left: none;
    font-size: 18px;
    line-height: 22px;
    padding: 10px 10px 0px 10px;
    text-align: left;
    border-right: none;
}

.life .table tr td {
    font-size: 18px;
    text-align: center;
}

.heritage .table tr th:nth-of-type(2) {
    border-left: none;
    font-size: 16px;
    line-height: 18px;
    padding: 5px 5px 0px 5px;
    text-align: left;
    border-right: none;
}

.heritage .table tr td {
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}

.heritage .table tr td:nth-of-type(1) {
    font-size: 12px;
    text-align: left;
}

.symbol .table tr th {
    font-size: 22px;
}

.symbol .table h4 {
    top: 0px;
    font-size: 14px;
    padding: 10px 20px;
    text-shadow:0px 1px 1px #000000,0px 0px 1px #000000,1px 0px 1px #000000,0px -1px 1px #000000,-1px -1px 1px #000000,-1px 0px 1px #000000;
}

.symbol .table img {
    width: 120px;
    height: auto;
}

.hero .table tr td:nth-of-type(1) {
    color: #000000 !important;
    background-color: #EEEEEE !important;
    font-weight: bold;
    border-bottom: solid 1px #666666;
    border-right: none;
    text-shadow: none;
    height: 50px;
    width: 150px;
    line-height: 16px;
    text-align: center;
}

.hero .table tr td:nth-of-type(2) {
    color: #000000 !important;
    background-color: #EEEEEE !important;
    font-size: 11px;
    font-weight: bold;
    border-bottom: solid 1px #666666;
    border-left: none;
    line-height: 16px;
}
.hero .table tr td:nth-of-type(3),
.hero .table tr td:nth-of-type(4){
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.hero .table tr td:nth-of-type(5){
    line-height: 16px;
}


.kotohajime .table tr th {
    font-size: 14px;
    text-align: center;
}

.kotohajime .table tr td {
    font-size: 12px;
}

.history .table tr td {
    border: none;
    text-shadow:0px 1px 1px #FFFFFF,0px 0px 1px #FFFFFF,1px 0px 1px #FFFFFF,0px -1px 1px #FFFFFF,-1px -1px 1px #FFFFFF,-1px 0px 1px #FFFFFF;
}

.history .table a {
    color: #CC3333 !important;
    font-weight: bold
}

.history .table a:hover,
.history .table a:active {
    opacity: 0.6 !important;
}

.history .td01 {
    padding: 3px;
    text-align: center;
}

.history .td01 span {
    font-weight: bold;
}
.history .td01_1 {
    width:30px;
}
.history .td02,
.history .td03,
.history .td04{
    padding: 5px;
}

/****************************************
 メニューボタン
***************************************/

.top .menu a:nth-of-type(1) {
    width: 28%;
}

.top .menu a:nth-of-type(2) {
    width: 22%;
}

.top .menu a:nth-of-type(3) {
    width: 26%;
}

.top .menu a:nth-of-type(4) {
    width: 23%;
}

.top .menu a:nth-of-type(5) {
    width: 22%;
}

.top .menu a:nth-of-type(6) {
    width: 25%;
}

.top .menu a:nth-of-type(7) {
    width: 24%;
}

.top .menu a:nth-of-type(8) {
    width: 28%;
}

.menu a:nth-of-type(1) .flex-item {
    background-image: url('../img/menu/menu1.png');
    background-color: #98C438;
}

.menu a:nth-of-type(2) .flex-item {
    background-image: url('../img/menu/menu2.png');
    background-color: #F4B804;
}

.menu a:nth-of-type(3) .flex-item {
    background-image: url('../img/menu/menu3.png');
    background-color: #CC3333;
}

.menu a:nth-of-type(4) .flex-item {
    background-image: url('../img/menu/menu4.png');
    background-color: #3764B1;
}

.menu a:nth-of-type(5) .flex-item {
    background-image: url('../img/menu/menu5.png');
    background-color: #329866;
}

.menu a:nth-of-type(6) .flex-item {
    background-image: url('../img/menu/menu6.png');
    background-color: #EE9517;
}

.menu a:nth-of-type(7) .flex-item {
    background-image: url('../img/menu/menu7.png');
    background-color: #983265;
}

.menu a:nth-of-type(8) .flex-item {
    background-image: url('../img/menu/menu8.png');
    background-color: #61368A;
}

.menu a .flex-item:hover,
.menu a .flex-item:active {
    color: #111111;
    background-color: transparent;
}

.menu a:nth-of-type(1) .flex-item:hover,
.menu a:nth-of-type(1) .flex-item:active {
    background-image: url('../img/menu/menu1_h.png');
}

.menu a:nth-of-type(2) .flex-item:hover,
.menu a:nth-of-type(2) .flex-item:active {
    background-image: url('../img/menu/menu2_h.png');
}

.menu a:nth-of-type(3) .flex-item:hover,
.menu a:nth-of-type(3) .flex-item:active {
    background-image: url('../img/menu/menu3_h.png');
}

.menu a:nth-of-type(4) .flex-item:hover,
.menu a:nth-of-type(4) .flex-item:active {
    background-image: url('../img/menu/menu4_h.png');
}

.menu a:nth-of-type(5) .flex-item:hover,
.menu a:nth-of-type(5) .flex-item:active {
    background-image: url('../img/menu/menu5_h.png');
}

.menu a:nth-of-type(6) .flex-item:hover,
.menu a:nth-of-type(6) .flex-item:active {
    background-image: url('../img/menu/menu6_h.png');
}

.menu a:nth-of-type(7) .flex-item:hover,
.menu a:nth-of-type(7) .flex-item:active {
    background-image: url('../img/menu/menu7_h.png');
}

.menu a:nth-of-type(8) .flex-item:hover,
.menu a:nth-of-type(8) .flex-item:active {
    background-image: url('../img/menu/menu8_h.png');
}


/****************************************
 サブメニューボタン（sub-menu）
 目的：
  - 元サイトの丸ボタンUIをCMS（固定ページ）でも崩さず再現
  - CMS側で <span class="highlight"></span> が消えることがあるため
    光沢は擬似要素（::before）で描画して安定化
 前提HTML（例）：
  <a class="sub-menu-item" href="...">
    <div class="round-btn"><span class="label">ようす</span></div>
    <div class="info"><span class="label">ようす</span><img ...></div>
  </a>
****************************************/

/* =========================================
 1) コンテナ（並び）
========================================= */
.sub-menu{
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* about / updown の余白（元CSS互換） */
.sub-menu.about{ }
.sub-menu.updown{ }

/* =========================================
 2) 1ボタン（CMS用：a.sub-menu-item）
========================================= */
.sub-menu .sub-menu-item{
  display: block;
  position: relative;

  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  margin: 0 10px 20px;
}

.color01 .sub-menu .sub-menu-item{
     margin: 0 0 20px;
}

/* 上下ずらし（元の nth-of-type を sub-menu-item に移植） */
.sub-menu.updown .sub-menu-item:nth-of-type(5n+2),
.sub-menu.updown .sub-menu-item:nth-of-type(5n+4){
  margin-top: 80px;
}

/* =========================================
 3) 表/裏 共通（重ねる）
========================================= */
.sub-menu .sub-menu-item .round-btn,
.sub-menu .sub-menu-item .info{
  position: absolute;
  top: 0;
  left: 0;

  width: 150px;
  height: 150px;

  border-radius: 50%;
  border: 3px solid #FFFFFF;
  padding: 0;

  font-size: 18px;
  font-weight: bold;
}

/* =========================================
 4) 表面（round-btn）
  - 色/グラデは既存の .color01〜 .round-btn をそのまま利用
  - 影は既存の .round-btn の box-shadow を利用
========================================= */
.sub-menu .sub-menu-item .round-btn{
  overflow: visible; /* 光沢が上にはみ出すので切らない */
  text-shadow: none;
}

/* 表面の文字位置（元CSS：top:40px） */
.sub-menu .sub-menu-item .round-btn .label{
  position: relative;
  display: block;
  top: 40px;

  font-size: 18px;
  line-height: 24px;

  color: rgba(255,255,255,1);
  text-shadow: 0px 1px 1px #000000, 0px 0px 1px #000000, 1px 0px 1px #000000,
               0px -1px 1px #000000, -1px -1px 1px #000000, -1px 0px 1px #000000;
  z-index: 2; /* 光沢より前 */
}

/* ★光沢：CMSで span が消えても出る（擬似要素） */
.sub-menu .sub-menu-item .round-btn::before{
  content: "";
  position: absolute;
  left: 0;
  top: -19px;

  width: 100%;
  height: 100%;

  border-radius: 100px;
  -webkit-transform: scale(0.8, 0.6);
  -moz-transform: scale(0.8, 0.6);
  -ms-transform: scale(0.8, 0.6);
  -o-transform: scale(0.8, 0.6);
  transform: scale(0.8, 0.6);

  opacity: 0.8;
  pointer-events: none;
  z-index: 1;

  background-image: linear-gradient(
    to bottom,
    rgba(250, 250, 255, 1) 0%,
    rgba(250, 250, 255, 0.7) 10%,
    rgba(250, 250, 255, 0) 100%
  );
}

/* =========================================
 5) 裏面（info）
  - 元CSSの「下からスライド」演出を再現
========================================= */
.sub-menu .sub-menu-item .info{
  opacity: 0;

  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);

  box-shadow: 0 2px 6px rgba(100,100,100,0.2),
              0 2px 10px rgba(255,255,255,0.7),
              inset 0 0 10px rgba(255,255,255,0.6);

  background-image: -webkit-radial-gradient(50% 80%, circle, rgba(255,255,255,0.1), rgba(255,255,255,1));
  background-image: -moz-radial-gradient(50% 80%, circle, rgba(255,255,255,0.1), rgba(255,255,255,1));
  background-image: -o-radial-gradient(50% 80%, circle, rgba(255,255,255,0.1), rgba(255,255,255,1));
  background-image: -ms-radial-gradient(50% 80%, circle, rgba(255,255,255,0.1), rgba(255,255,255,1));
  background-image: radial-gradient(circle at 50% 80%, rgba(255,255,255,0.1), rgba(255,255,255,1));

  z-index: 0;
}

/* 裏面の文字（元CSS：top:25px） */
.sub-menu .sub-menu-item .info .label{
  position: relative;
  display: block;
  top: 25px;

  color: #000000;
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;

  text-shadow: 0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,
               1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,
               1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,
               -2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,
               -2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;

  z-index: 2;
}

/* 裏面の画像（元CSS位置） */
.sub-menu .sub-menu-item .info img{
  position: absolute;
  width: 90px;
  height: auto;
  right: 25px;
  bottom: -5px;
  padding: 0 0 10px 0;
}

/* =========================================
 6) hover / active（表→裏に切替）
========================================= */
.sub-menu .sub-menu-item:hover .round-btn,
.sub-menu .sub-menu-item:active .round-btn{
  opacity: 0;
}

.sub-menu .sub-menu-item:hover .info,
.sub-menu .sub-menu-item:active .info{
  opacity: 1;

  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

/* a を全面クリック可能にする */
.sub-menu-link{
  display:block;
  width:150px;
  height:150px;
  position:relative;
}

/* クリック時の押し込み（必要なら） */
.sub-menu .sub-menu-item:active .round-btn{
  opacity: 0.2;
}

/* =========================================
 7) 例外（元CSS互換）
========================================= */
.color06 .sub-menu .sub-menu-item .info .label{
  font-size: 15px;
  line-height: 17px;
}

/* =========================================
 8) 互換：旧HTML（.sub-menu a 直下）も残す場合のみ
  - CMS版が動いているなら基本不要
========================================= */
.sub-menu a:not(.sub-menu-item){
  width: 150px;
  height: 150px;
  border-radius: 50%;
  text-align: center;
  margin: 0 0 20px;
}


/****************************************
 カテゴリー丸ボタン
****************************************/
.round-btn {
    width: 100%;
    height: 100%;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        0 2px 10px rgba(0,100,255, 0.7),
        inset 0 0 10px rgba(0,0,150,0.6);
}

.round-btn .highlight {
    position: absolute;
    border-radius: 100px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( to bottom, rgba(250, 250, 255, 1) 0%, rgba(250, 250, 255, 0.7) 10%, rgba(250, 250, 255, 0) 100%) !important;
    top: -19px;
    left: 0;
    -webkit-transform: scale(0.8, 0.6);
    -moz-transform: scale(0.8, 0.6);
    -ms-transform: scale(0.8, 0.6);
    -o-transform: scale(0.8, 0.6);
    transform: scale(0.8, 0.6);
    z-index: 0;
    opacity: 0.8;
}

/****************************************
 追尾メニュー
****************************************/

#show-hide-menu {
    position: fixed;
    width: 800px;
    bottom: 120px;
    height: auto;
    margin: 0 auto;
    font-size: 12px;
    z-index: 9990;
}

.hero #show-hide-menu {
    bottom: 240px;
}

#show-hide-menu #show-menu,
#show-hide-menu #hide-menu {
    position: absolute;
    bottom: 0px;
    left: 5px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 1);
    padding: 12px;
    border-radius: 2px;
}

#show-hide-menu #show-menu {
    display: none;
}

#show-hide-menu > *:hover,
#show-hide-menu > *:active {
    background-color: rgba(0, 0, 0, 0.7) !important;
    cursor: pointer;
}

#show-hide-menu > *:active {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.flex-container.follow-menu {
    position: fixed;
    bottom: 20px;
    width: 800px;
    margin: 0 auto;
    text-align: center;
    z-index: 9990;
    height: 100px;
}

.hero .flex-container.follow-menu {
    bottom: 140px;
}

.flex-container.follow-menu .flex-item {
    position: relative;
    top: 10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    z-index: 4;
}

.hero .flex-container.follow-menu .flex-item {
    width: 120px;
    height: 120px;
}

/* ==============================
 follow-menu：Shirasagi整形対策（確定版）
 目的：
 - a内をspan構造にしても崩れない
 - Shirasagiが <p> を勝手に挟んでも flex を壊さない
 - highlight が消えても ::before で光沢を出す
============================== */

/* Shirasagiが勝手に <p> を入れてもレイアウト上無視 */
.flex-container.follow-menu > p{
  margin: 0 !important;
  padding: 0 !important;
  display: contents;
}

/* 追尾メニュー本体 */
.flex-container.follow-menu{
  position: fixed;
  bottom: 20px;
  width: 800px;
  margin: 0 auto;
  text-align: center;
  z-index: 9990;
  height: 100px;

  -webkit-justify-content: center;
  justify-content: center;
  gap: 12px;
}

.hero .flex-container.follow-menu{
  gap: 0;
  width: auto;
}

/* hero時の位置 */
.hero .flex-container.follow-menu{
  bottom: 140px;
}

/* a（クリック面） */
.flex-container.follow-menu a.balloon-menu{
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* hero時サイズ */
.hero .flex-container.follow-menu a.balloon-menu{
  width: 120px;
  height: 120px;
}

/* mini-btn（丸ボタン） */
.flex-container.follow-menu .mini-btn{
  position: relative;
  display: block;          /* spanでも確実に箱にする */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  overflow: visible;       /* 光沢を切らない */

  /* 既存の影（あなたのmini-btnと同等） */
  box-shadow:
      0 2px 6px rgba(0,0,0,0.5),
      0 2px 10px rgba(0,100,255, 0.7),
      inset 0 0 10px rgba(0,0,150,0.6);

  transition: transform .25s ease, opacity .25s ease;
  z-index: 4;
}

/* ★光沢：highlightが消えても出す（sub-menu方式） */
.flex-container.follow-menu .mini-btn::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100px;

  -webkit-transform: scale(0.8, 0.6);
  transform: scale(0.8, 0.6);

  opacity: 0.8;
  pointer-events: none;
  z-index: 1;

  background-image: linear-gradient(
    to bottom,
    rgba(250,250,255,1) 0%,
    rgba(250,250,255,0.7) 10%,
    rgba(250,250,255,0) 100%
  );
}

/* 既存highlightが残っていても見た目を合わせる（任意） */
.flex-container.follow-menu .mini-btn .highlight{
  position: absolute;
  inset: 0;
  border-radius: 100px;
  top: -10px;
  left: 0;

  -webkit-transform: scale(0.8, 0.6);
  transform: scale(0.8, 0.6);

  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

/* ラベル（p→span.label） */
.flex-container.follow-menu .mini-btn .label{
  position: relative;
  display: block;
  top: 10px;
  z-index: 2;
  pointer-events: none;

  font-size: 18px;         /* p{12px}の影響を受けない */
  font-weight: bold;
  color: #FFFFFF;
  line-height: 22px;

  text-shadow:
    0px 1px 1px #000000,
    0px 0px 1px #000000,
    1px 0px 1px #000000,
    0px -1px 1px #000000,
    -1px -1px 1px #000000,
    -1px 0px 1px #000000;
}

/* rubyは既存を活かす（白指定） */
.flex-container.follow-menu .mini-btn .label .ruby.wh{
  display: inline-block;
  margin-top: 2px;
}

/* hover / active */
.flex-container.follow-menu a.balloon-menu:hover .mini-btn{
  transform: translateY(-4px) scale(1.05);
  opacity: 0.95;
}
.flex-container.follow-menu a.balloon-menu:active .mini-btn{
  transform: translateY(0) scale(0.95);
  opacity: 0.85;
}

/* kotohajimeで小さくする（既存互換） */
.kotohajime .flex-container.follow-menu .mini-btn .label{
  font-size: 14px;
  line-height: 18px;
}

/* small指定互換（既存） */
.flex-container.follow-menu .mini-btn.small .label{
  top: 3px;
  font-size: 11px;
  line-height: 14px;
}

/* active（押し込み） */
.flex-container.follow-menu a:active .mini-btn{
  transform: translateY(0) scale(0.95);
  opacity: 0.85;
}

.hero .updown a:nth-of-type(8n+1),
.hero .updown a:nth-of-type(8n+3),
.hero .updown a:nth-of-type(8n+5),
.hero .updown a:nth-of-type(8n+7){
    position: relative;
    top: 5px;
}

.hero .updown a:nth-of-type(8n+3) {
    left: -50px;
}

.hero .updown a:nth-of-type(8n+5) {
    left: -100px;
}

.hero .updown a:nth-of-type(8n+7){
    left: -150px;
}

.hero .updown a:nth-of-type(8n+2),
.hero .updown a:nth-of-type(8n+4),
.hero .updown a:nth-of-type(8n+6),
.hero .updown a:nth-of-type(8n+8){
    position: relative;
    top: 100px;
    left: -25px;
}
.hero .updown a:nth-of-type(8n+4){
    left: -75px;
}

.hero .updown a:nth-of-type(8n+6) {
    left: -125px;
}
.hero .updown a:nth-of-type(8n+8){
    left: -175px;
}

.flex-container.follow-menu .flex-item p {
    position: relative;
    top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    z-index: 999 !important;
    text-shadow:0px 1px 1px #000000,0px 0px 1px #000000,1px 0px 1px #000000,0px -1px 1px #000000,-1px -1px 1px #000000,-1px 0px 1px #000000;
}

.kotohajime .flex-container.follow-menu .flex-item p {
    display: inline;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
}

.mini-btn {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        0 2px 10px rgba(0,100,255, 0.7),
        inset 0 0 10px rgba(0,0,150,0.6);
    z-index: 2;
}

.mini-btn.small p{
    top: 3px !important;
    font-size: 11px !important;
    line-height: 14px;
}

.mini-btn .highlight {
    position: absolute;
    border-radius: 100px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( to bottom, rgba(250, 250, 255, 1) 0%, rgba(250, 250, 255, 0.7) 10%, rgba(250, 250, 255, 0) 100%) !important;
    top: -10px;
    left: 0;
    -webkit-transform: scale(0.8, 0.6);
    -moz-transform: scale(0.8, 0.6);
    -ms-transform: scale(0.8, 0.6);
    -o-transform: scale(0.8, 0.6);
    transform: scale(0.8, 0.6);
    z-index: 0;
    opacity: 0.8;
}

/****************************************
 フッター
****************************************/

footer {
    position: relative;
    width: 100%;
}

footer p {
    color: #000000;
    text-align: center;
    line-height: 20px;
    padding: 20px;
}


/****************************************
 トップへ戻る
****************************************/

#go_top {
    display: none;
    width: 70px;
    height: 70px;
    background-color: #000000;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: #FFFFFF;
    text-align: center;
    z-index: 9990;
}

#go_top:after {
    position: relative;
    content: "▲";
    font-size: 20px;
    line-height: 35px;
}

#go_top:hover {
    opacity: 0.8;
}

#go_top span{
    color: #000000;
    font-size: 10px;
    position: relative;
    top: -20px;
    font-weight: bold;
    text-shadow:0px 1px 1px #FFFFFF,0px 0px 1px #FFFFFF,1px 0px 1px #FFFFFF,0px -1px 1px #FFFFFF,-1px -1px 1px #FFFFFF,-1px 0px 1px #FFFFFF;
}


/****************************************
 モーダルウィンドウ
****************************************/

.modal-content {
    position:fixed;
    display:none;
    width: 400px;
    margin:0;
    height: auto;
    z-index:9999;
}

.modal-content > div {
    color: #000000;
    max-height: 550px;
    overflow:scroll;
    background-color: #FFFFFF;
}

.modal-content h4 {
    font-size: 14px;
    margin-top: 20px;
}

.modal-content img {
    display: inline-block;
    width: auto;
    height: auto;
    text-align: center;
}

.modal-content p {
    width: 360px;
    margin:0;
    padding: 10px;
    color: #000000;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
}

.modal-content p span {
    width: 360px;
    font-size: 14px;
    line-height: 14px;
}

.modal-overlay {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.80);
    z-index:9998;
}

.modal-open:after {
    width:10px;
    height: 10px;
} 

.modal-open:hover {
    cursor:pointer;
}

.modal-close {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 50px;
    height: 50px;
    font-size: 12px;
    line-height: 50px;
    padding: 2px;
    border-radius: 50%;
    text-align: center;
    color:#FFFFFF;
    background-color: #333333;
    border: solid 3px #FFFFFF;
}

.modal-close:hover {
    cursor:pointer;
    color:#000000;
    background-color: #CCCCCC;
    border: solid 3px #EEEEEE;
}

/****************************************
 円グラフ
****************************************/

#canvas-holder {
    width: 100%;
    height: 400px;
    text-align: center;
}

#d1, #d2 {
    position: relative;
}
#d1 {
    top: 0px;
    left: 0px;
}
#d2 {
    border-radius: 150px;
    top: -300px;
    left: 100px;
}

#chartjs-tooltip {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: white;
    padding: 10px;
    line-height: 18px;
    border-radius: 3px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    pointer-events: none;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
#chartjs-tooltip.above {
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0, 0, 0, .8) transparent;
    border-width: 8px 8px 0 8px;
    bottom: 1em;
    content:"";
    display: block;
    left: 50%;
    top: 100%;
    position: absolute;
    z-index: 99;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.total,
.total-mini {
    position: absolute;
    border-radius: 50%;
    display: inline-block;
    color: #000000;
    font-weight: bold;
    text-align: right;
    top: 110px;
    right: 110px;
    width: 200px;
    height: 200px;
    line-height: 200px;
}

.total .num,
.total-mini .num {
    font-size: 30px;
    text-align: right;
    font-style: normal;
    z-index: -1;
}

.total .caption,
.total-mini .caption {
    text-align: right;
    margin-right: 3px;
}

.total-mini {
    top: 160px;
    right: 160px;
    width: 100px;
    height: 100px;
    line-height: 100px;
}

.total-mini .num {
    font-size: 20px;
}

.total-mini .caption {
    font-size: 12px;
}

.legend ul li {
    position: relative;
    list-style:none;
    margin: 5px 0;
    width: 100%;
}

.legend ul li span.c-label {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    width: 80%;
    text-align: left;
    padding:5px 5px 5px 10px;
    border-radius: 5px;
    text-shadow:0px 2px 1px #FFFFFF,0px 1px 1px #FFFFFF,1px 1px 1px #FFFFFF,1px 0px 1px #FFFFFF,2px 0px 1px #FFFFFF,1px -1px 1px #FFFFFF,1px -2px 1px #FFFFFF,0px -2px 1px #FFFFFF,-1px -2px 1px #FFFFFF,-2px -2px 1px #FFFFFF,-2px -1px 1px #FFFFFF,-2px 0px 1px #FFFFFF,-2px 1px 1px #FFFFFF,-1px 1px 1px #FFFFFF;}

.legend ul li span.c-value {
    position: absolute;
    text-align: right;
    width: 10%;
    top: 0;
    right: 10px;
}

/****************************************
 サイズ
****************************************/
img,
img.img100,
.w100
{
    width: 100%;
}
img.img90,
.w90 {
    width: 90%;
}
img.img80,
.w80 {
    width: 80%;
}
img.img70,
.w70 {
    width: 70%;
}
img.img60,
.w60 {
    width: 60%;
}
img.img50,
.w50 {
    width: 50%;
}
img.img40,
.w40 {
    width: 40%;
}
img.img30,
.w30 {
    width: 30%;
}
img.img20,
.w20 {
    width: 20%;
}
img.img10,
.w10 {
    width: 10%;
}

/****************************************
 カラー
****************************************/

.color01 h3{
    border-color: #98C438 !important;
}

.color02 h3 {
    border-color: #F4B804 !important;
}

.color03 h3 {
    border-color: #CC3333 !important;
}

.color04 h3 {
    border-color: #3764B1 !important;
}

.color05 h3 {
    border-color: #329866 !important;
}

.color06 h3 {
    border-color: #EE9517 !important;
}

.color07 h3 {
    border-color: #983265 !important;
}

.color08 h3 {
    border-color: #61368A !important;
}

.color01 h2,
.color01 h3 span.ruby {
    color: #98C438 !important;
}

.color02 h2,
.color02 h3 span.ruby {
    color: #F4B804 !important;
}

.color03 h2,
.color03 h3 span.ruby {
    color: #CC3333 !important;
}

.color04 h2,
.color04 h3 span.ruby {
    color: #3764B1 !important;
}

.color05 h2,
.color05 h3 span.ruby {
    color: #329866 !important;
}

.color06 h2,
.color06 h3 span.ruby {
    color: #EE9517 !important;
}

.color07 h2,
.color07 h3 span.ruby {
    color: #983265 !important;
}

.color08 h2,
.color08 h3 span.ruby {
    color: #61368A !important;
}


.color01 h4,
.color01 .table tr th,
.color01 .flex-item.home-btn {
    background-color: #98C438 !important;
}

.color02 h4,
.color02 .table tr th,
.color02 .flex-item.home-btn {
    background-color: #F4B804 !important;
}

.color03 h4,
.color03 .table tr th,
.color03 .flex-item.home-btn {
    background-color: #CC3333 !important;
}

.color04 h4,
.color04 .table tr th,
.color04 .flex-item.home-btn {
    background-color: #3764B1 !important;
}

.color05 h4,
.color05 .table tr th,
.color05 .flex-item.home-btn {
    background-color: #329866 !important;
}

.color06 h4,
.color06 .table tr th,
.color06 .flex-item.home-btn {
    background-color: #EE9517 !important;
}

.color07 h4,
.color07 .table tr th,
.color07 .flex-item.home-btn {
    background-color: #983265 !important;
}

.color08 h4,
.color08 .table tr th,
.color08 .flex-item.home-btn {
    background-color: #61368A !important;
}

.color01 h3,
.color02 h3,
.color03 h3,
.color04 h3,
.color05 h3,
.color06 h3,
.color07 h3,
.color08 h3 {
    color: #333333 !important;
}

.color01 h4,
.color02 h4,
.color03 h4,
.color04 h4,
.color05 h4,
.color06 h4,
.color07 h4,
.color08 h4,
.table tr th {
    color: #FFFFFF !important;
}
.color01 h5,
.color02 h5,
.color03 h5,
.color04 h5,
.color05 h5,
.color06 h5,
.color07 h5,
.color08 h5 {
    color: #333333 !important;
}

/* button color */

.color01 .round-btn,
.color01 .follow-menu .flex-item {
    /* rgba(156, 197, 0, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(156, 197, 0, 0.7), rgba(156, 197, 0, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(156, 197, 0, 1), rgba(156, 197, 0, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(156, 197, 0, 0.7), rgba(156, 197, 0, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(156, 197, 0, 0.7), rgba(156, 197, 0, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(156, 197, 0, 0.7), rgba(156, 197, 0, 1));
}

.color02 .round-btn,
.color02 .follow-menu .flex-item  {
    /* rgba(242, 185, 0, 1) */
    background-image: -webkit-linear-gradient(50% 80%, rgba(242, 185, 0, 0.), rgba(242, 185, 0, 1));
    background-image: -moz-linear-gradient(50% 80%, rgba(242, 185, 0, 0.7), rgba(242, 185, 0, 1));
    background-image: -o-linear-gradient(50% 80%, rgba(242, 185, 0, 0.7), rgba(242, 185, 0, 1));
    background-image: -ms-linear-gradient(50% 80%, rgba(242, 185, 0, 0.7), rgba(242, 185, 0, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(242, 185, 0, 0.7), rgba(242, 185, 0, 1));
}

.color03 .round-btn,
.color03 .follow-menu .flex-item  {
    /* rgba(199, 53, 47, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(219, 35, 30, 0.7), rgba(219, 35, 30, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(219, 35, 30, 0.7), rgba(219, 35, 30, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(219, 35, 30, 0.7), rgba(219, 35, 30, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(219, 35, 30, 0.7), rgba(219, 35, 30, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(219, 35, 30, 0.7), rgba(219, 35, 30, 1));
}

.color04 .round-btn,
.color04 .follow-menu .flex-item  {
    /* rgba(55, 99, 182, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(55, 99, 182, 0.7), rgba(55, 99, 182, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(55, 99, 182, 0.7), rgba(55, 99, 182, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(55, 99, 182, 0.7), rgba(55, 99, 182, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(55, 99, 182, 0.7), rgba(55, 99, 182, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(55, 99, 182, 0.7), rgba(55, 99, 182, 1));
}

.color05 .round-btn,
.color05 .follow-menu .flex-item  {
    /* rgba(63, 152, 96, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(63, 152, 96, 0.7), rgba(63, 152, 96, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(63, 152, 96, 0.7), rgba(63, 152, 96, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(63, 152, 96, 0.7), rgba(63, 152, 96, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(63, 152, 96, 0.7), rgba(63, 152, 96, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(63, 152, 96, 0.7), rgba(63, 152, 96, 1));
}

.color06 .round-btn,
.color06 .follow-menu .flex-item  {
    /* rgba(235, 150, 0, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(235, 150, 0, 0.7), rgba(235, 150, 0, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(235, 150, 0, 0.7), rgba(235, 150, 0, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(235, 150, 0, 0.7), rgba(235, 150, 0, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(235, 150, 0, 0.7), rgba(235, 150, 0, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(235, 150, 0, 0.7), rgba(235, 150, 0, 1));
}

.color07 .round-btn,
.color07 .follow-menu .flex-item  {
    /* rgba(148, 50, 103, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(148, 50, 103, 0.7), rgba(148, 50, 103, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(148, 50, 103, 0.7), rgba(148, 50, 103, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(148, 50, 103, 0.7), rgba(148, 50, 103, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(148, 50, 103, 0.7), rgba(148, 50, 103, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(148, 50, 103, 0.7), rgba(148, 50, 103, 1));
}

.color08 .round-btn,
.color08 .follow-menu .flex-item  {
    /* rgba(94, 53, 143, 1) */
    background-image: -webkit-linear-gradient(50% 80%, circle, rgba(94, 53, 143, 0.7), rgba(94, 53, 143, 1));
    background-image: -moz-linear-gradient(50% 80%, circle, rgba(94, 53, 143, 0.7), rgba(94, 53, 143, 1));
    background-image: -o-linear-gradient(50% 80%, circle, rgba(94, 53, 143, 0.7), rgba(94, 53, 143, 1));
    background-image: -ms-linear-gradient(50% 80%, circle, rgba(94, 53, 143, 0.7), rgba(94, 53, 143, 1));
    background-image: radial-gradient(circle at 50% 80%, rgba(94, 53, 143, 0.7), rgba(94, 53, 143, 1));
}