@charset "UTF-8";
/*================================================
 *  一般・共通設定
 ================================================*/

body {
    width: 100%;
    margin: 0 auto;
    color: #333132;                     /*  黒色は noir で統一 */
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", GillSans, Calibri, Trebuchet, sans-serif;
}

h1 {
    color: #375a9a;  /* bleu de napoleon */
    font-size: 24px;
    line-height: 1.2;
}

h1 a {
    color: #333132;  /* noir */
    text-decoration: none;
}

h1 a:hover {
    color: #375a9a;  /* bleu de napoleon */
    text-decoration: underline;
}

h2 {
    margin-bottom: 0.5em;
    padding-left: 10px;
    font-size: 20px;
    color: #333132;                  /* noir */
    border-left: 5px solid #00628d;  /* versailles */
}

h3 {
    margin-top: 10px;
    margin-bottom: 0.5em;
    padding: 2px 5px;
    color: #006ba0;   /*  bleu de picasso */
    font-size: 16px;
    border-bottom: 1px solid #006ba0;   /*  bleu de picasso */
}

h4 {
    margin-bottom: 0.25em;
    font-size: 16px;
    color: #333;
}

h4:before {
    content: "\002605";  /* 星 */
    color: #375a9a;  /* bleu de napoleon */
}

h5 {
    margin-bottom: 0.25em;
    padding: 2px;
    color: #333132;                  /* noir */
    font-size: 16px;
    border-bottom: 1px dotted #9d927e;  /*  mastic */
}

h6 {
    margin-bottom: 0.25em;
    color: #043a33;    /* laurier  */
    font-size: 14px;
    font-weight: bold;
}

em {
    font-weight: bold;
}

span {
    font-size: 14px;
    line-height: 100%;
}

strong {
    font-weight: bold;
    color: #27468e; /* lapis lazuli */
}

pre {
    margin: 1em 0;
    padding: 1em;
}

blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #00839b; /* bleu de monet */
    ;
}

a {
    color: #00a8ba;  /* bleu de cote dazur */
}

img {
    vertical-align: middle;
}

.h-icon {
    font-size: 49px;
}

.title-font-size {
    margin-left: 100px;
    font-size: 400px;
    font-weight: bold;
    color: white;
    position: relative;
}
.container {
    z-index: 10;
}
/*************************************************
*            野球のスコアボード
*************************************************/

.scoreboard {
    background-color: darkgreen;
    color: white;
    width: 80%;
}

.scoreboard th {
    padding: 0px;
}

.scoreboard td {
    padding: 0px;
}
/********************************************************
                  角丸透明ボタン
********************************************************/

.btn-radius {
    color: #FFF;
    border-color: #FFF;
    background: transparent none repeat scroll 0% 0%;
    border: 2px solid #FFF;
    box-shadow: none;
    border-radius: 3em;
    display: inline-block;
    margin-bottom: 0px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}

.btn-radius:hover {
    background-color: #8EBEFF;
}
/*****************************************************
                     カラー設定
*****************************************************/
.red {
  background-color: #F44336!important;
  color: #fff!important;
  border-color: #F44336 transparent transparent transparent;
}
.pink {
  background-color: #f48fb1!important;
  color: #fff!important;
  border-color: #f48fb1 transparent transparent transparent;
}
.purple {
  background-color: #9c27b0!important; 
  color: #fff!important;
  border-color: #9c27b0 transparent transparent transparent;
}
.blue {
  background-color: #2196F3!important; 
  color: #fff!important;
  border-color: #2196F3 transparent transparent transparent;
}
.cyan {
  background-color: #00bcd4!important;
  color: #fff!important;
  border-color: #00bcd4 transparent transparent transparent;
}
.green {
  background-color: #4CAF50!important; 
  color: #fff!important;
  border-color: #4CAF50 transparent transparent transparent;
}
.yellow {
  background-color: #ffeb3b!important; 
  color: #000!important;
  border-color: #ffeb3b transparent transparent transparent;
}
.orange {
  background-color: #ff9800!important; 
  color: #fff!important;
  border-color: #ff9800 transparent transparent transparent;
}
.grey {
  background-color: #9e9e9e!important; 
  color: #fff!important;
  border-color: #9e9e9e transparent transparent transparent;
}
/****************************************************
                  ホバー時に四角囲み
****************************************************/

.btn-nav {
    color: black;
    border: medium none;
    border-radius: 5px;
    /*display: inline-block;*/
    
    display: block;
    outline: 0px none;
    padding: 8px;
    text-transform: uppercase;
    vertical-align: middle;
}

.btn-nav:hover {
    background-color: #8EBEFF;
}

.r-color:hover {
    background-color: #b0ffbf;
}

.e-color:hover {
    background-color: #ffb0cb;
}

.s-color:hover {
    background-color: #ffe1b0;
}

.cursor-cancel {
    cursor: auto;
}
/*****************************************************
              スライダーインジケーターの色を変更
****************************************************/

.slider .indicators .indicator-item.active {
    background-color: #8EBEFF;
}

.collapsible-body {
    background-color: #fafafa;
}
/***************************************************
             透明ナビバー
**************************************************/

.transparence-nav {
    padding: 20px;
    margin-left: 50px;
}
/*************************************************
          ニュースティッカー用
************************************************/

.ticker-container {
    margin: 70px auto 92px;
    width: 950px;
    height: 36px;
    overflow: hidden;
}

.ticker {
    float: left;
    width: 744px;
    height: 36px;
    position: relative;
    overflow: hidden;
    background: transparent repeat scroll left top;
    background-color: rgba(0, 0, 0, 0.5);
}

.ticker ul {
    width: 100%;
    position: relative;
    height: 36px;
}

.ticker ul li {
    padding-left: 18px;
    width: 100%;
    display: none;
    height: 36px;
    padding-top: 0px;
    top 0px;
}

.ticker a {
    text-decoration: none;
    height: 36px;
    color: aliceblue;
}
/************************************************
               ナビバー関係
*************************************************/
.navbar-default {
    background-color: #fff;
    border-color: #fff;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.navbar-brand{
    height: auto;
    padding: 0px;
}
.navbar {
    margin-bottom: 0px;
    padding-left: 40px;
    padding-right: 40px;
}

.navbar-default .navbar-text, .navbar-default,
.navbar-nav > li > a {
    color: #8ebeff;
}
.navbar-default .navbar-text, .navbar-default,
.navbar-nav > li > a:hover {
    color: #0654be;
}
.navbar-default .navbar-toggle {
    background-color: #8ebeff;
    border-color: #0654be;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #0654be;
}
.navbar-default .navbar-brand, .navbar-default .navbar-link, .navbar-default .btn-link {
    color: #8ebeff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #8ebeff;
}
.navbar-default .navbar-text, .navbar-default .navbar-nav > li > a {
    color: #8ebeff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #0654be;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: #fff;
    border-color: #0654be;
}
.navbar-toggle {
    padding: 9px 10px;
    margin-top: 8px;
    margin-left: 1px;
    margin-bottom: 8px;
}
/************************************************
               スライダー関係
************************************************/
/*ナビゲーションボタンの色*/
.sp-button {
    border:1px solid #ccc;
}
.sp-selected-button {
  background-color: #0490f7;
}
/*前矢印のアイコンフォント*/
.sp-next-arrow:before {
    font-family: FontAwesome !important;
    content: '\f105' !important;
}
/*後矢印のアイコンフォント*/
.sp-previous-arrow:before {
    font-family: FontAwesome !important;
  content: '\f104' !important;
}
/************************************************
               フッター関係
************************************************/
.footer {
    background-color: #26435e;       /* bleu de pari */
    font-size: 12px;
    color: #00839b;               /* bleu de monet */
}

.footer h5 {
    color: #f7f9fc; /* blanc de roi */
}
.footer .container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
/*.footer .container .clearfix {
    padding-left: 300px;
}*/
.footer dl {
    margin-top: 10px;
    margin-bottom: 10px;
}
.footer-logo {
    width: auto;
    height: auto;
}
.footer-logo span{
    line-height: 10px;
}

.footer-logo .btn{
    font-size: 12px;
}
.footer-logo img{
    margin-left: 80px;
}
 .footer-nav {
    padding: 5px;
     width: auto;
}
/************************************************
                色付きの帯
************************************************/
.container-coral {
    width: 100%;
    background-color: coral;
    height: auto;
    padding: 80px;
}
/************************************************
                バッジ
************************************************/
.btn, .badge-danger {
    margin-left: 10px;
}
.btn-default .badge {
    margin-left: 10px;
    color: #FFF;
    background-color: #3BAFDA;
}
/************************************************
                フローティングボタン
************************************************/
.floating {
    color: #FFF;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding-top: 17px;
    padding-left: 4px;
    right: 35px;
    bottom: 30px;
    position: fixed;
    z-index: 10;
    background-color: #4FC1E9;
    -webkit-box-shadow: 0 2px 5px 0px rgba(0,0,0,.2);
    -moz-box-shadow: 0 2px 5px 0px rgba(0,0,0,.2);
    box-shadow: 0 2px 5px 0px rgba(0,0,0,.2);
}
.floating:hover {
    color: #000;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding-top: 17px;
    padding-left: 4px;
    right: 35px;
    bottom: 30px;
    position: fixed;
    z-index: 10;
    background-color: #a9e5fa;
    border-color: #fff;
    -webkit-box-shadow: 0 5px 11px 0px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 11px 0px rgba(0,0,0,.2);
    box-shadow: 0 5px 11px 0px rgba(0,0,0,.2);
}
/************************************************
                タイムライン関係
************************************************/
.timeline dl dd .time {
    width: 150px;
    padding: 10px 20px;
    color: #4FC1E9;
}
.timeline dl dd .events {
    background-color: #8ebeff;
}
.timeline dl dd.pos-right .events::before {
    left: -12px;
    border-color: transparent #8ebeff transparent transparent;
}
.timeline dl dd.pos-left .events::before {
    right: -12px;
    border-color: transparent transparent transparent #8ebeff;
}
.timeline dl dd.pos-right .time {
    margin-left: -150px;
    text-align: right;
}
.timeline dl dd .time {
    font-size: 12px;
}

/************************************************
                カード関係
************************************************/
.card {
    padding-top: 20px;
    margin: 10px 0 20px 0;
    background-color: #fafafa;
    border-top-width: 0;
    border-bottom-width: 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.card .card-heading {
    padding: 0 20px;
    margin: 0;
}

.card .card-heading.simple {
    font-size: 20px;
    font-weight: 300;
    color: #777;
    border-bottom: 1px solid #e5e5e5;
}

.card .card-heading.image img {
    display: inline-block;
    width: 46px;
    height: 46px;
    margin-right: 15px;
    vertical-align: top;
    border: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.card .card-heading.image .card-heading-header {
    display: inline-block;
    vertical-align: top;
}

.card .card-heading.image .card-heading-header h3 {
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    color: #262626;
}

.card .card-heading.image .card-heading-header span {
    font-size: 12px;
    color: #999999;
}

.card .card-body {
    padding: 0 20px;
    margin-top: 20px;
}

.card .card-media {
    padding: 0 20px;
    margin: 0 -14px;
}

.card .card-media img {
    max-width: 100%;
    max-height: 100%;
}

.card .card-actions {
    min-height: 30px;
    padding: 0 20px 20px 20px;
    margin: 20px 0 0 0;
}

.card .card-comments {
    padding: 20px;
    margin: 0;
    background-color: #f8f8f8;
}

.card .card-comments .comments-collapse-toggle {
    padding: 0;
    margin: 0 20px 12px 20px;
}

.card .card-comments .comments-collapse-toggle a,
.card .card-comments .comments-collapse-toggle span {
    padding-right: 5px;
    overflow: hidden;
    font-size: 12px;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-comments .media-heading {
    font-size: 13px;
    font-weight: bold;
}

.card.people {
    position: relative;
    display: inline-block;
    width: 170px;
    height: 300px;
    padding-top: 0;
    margin-left: 20px;
    overflow: hidden;
    vertical-align: top;
}

.card.people:first-child {
    margin-left: 0;
}

.card.people .card-top {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 170px;
    height: 150px;
    background-color: #ffffff;
}

.card.people .card-top.green {
    background-color: #53a93f;
}

.card.people .card-top.blue {
    background-color: #427fed;
}

.card.people .card-info {
    position: absolute;
    top: 150px;
    display: inline-block;
    width: 100%;
    height: 101px;
    overflow: hidden;
    background: #ffffff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.people .card-info .title {
    display: block;
    margin: 8px 14px 0 14px;
    overflow: hidden;
    font-size: 16px;
    font-weight: bold;
    line-height: 18px;
    color: #404040;
}

.card.people .card-info .desc {
    display: block;
    margin: 8px 14px 0 14px;
    overflow: hidden;
    font-size: 12px;
    line-height: 16px;
    color: #737373;
    text-overflow: ellipsis;
}

.card.people .card-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding: 10px 20px;
    line-height: 29px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
}

.card.hovercard .cardheader {
    background: url("../img/bg_photo02.jpg");
    background-size: cover;
    height: 135px;
}

.card.hovercard .avatar {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
}

.card.hovercard .avatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.5);
}

.card.hovercard .info {
    padding: 4px 8px 10px;
}

.card.hovercard .info .title {
    margin-bottom: 4px;
    font-size: 24px;
    line-height: 1;
    color: #262626;
    vertical-align: middle;
}

.card.hovercard .info .desc {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #737373;
    text-overflow: ellipsis;
}

.card.hovercard .bottom {
    padding: 0 20px;
    margin-bottom: 17px;
}

.r-btn { 
    border-radius: 50%; 
    width:32px; 
    height:32px; 
    line-height:18px; 
}
/************************************************
                更新情報関係
************************************************/
.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
   
}

.notice-sm {
    padding: 10px;
    font-size: 80%;
}
.notice-lg {
    padding: 35px;
    font-size: large;
}
.notice-r {
    border-color: #80D651;
}
.notice-r>strong {
    color: #80D651;
}
.notice-m {
    border-color: #45ABCD;
}
.notice-m>strong {
    color: #45ABCD;
}
.notice-club {
    border-color: #FEAF20;
}
.notice-club>strong {
    color: #FEAF20;
}
.notice-e {
    border-color: #d73814;
}
.notice-e>strong {
    color: #d73814;
}
.notice-red {
  border-color: #F44336;
}
.notice-pink {
  border-color: #f48fb1;
}
.notice-purple {
  border-color: #9c27b0;
}
.notice-blue {
  border-color: #2196F3;
}
.notice-cyan {
  border-color: #00bcd4;
}
.notice-green {
  border-color: #4CAF50;
}
.notice-yellow {
  border-color: #ffeb3b;
}
.notice-orange {
  border-color: #ff9800;
}
.notice-grey {
  border-color: #9e9e9e;
}
/*****************************************************************
                背景色の変更
*****************************************************************/
.well {
    background-color: #F7F9Fc;               /* 白は blanc de roi で統一 */
    border-radius: 3px;
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.thumbnail {
    background-color: #F7F9Fc;
    border-radius: 3px;
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.panel {
    background-color: #F7F9Fc;
    border-radius: 3px;
    border: medium none;
    border-radius: 0 5px 8px -6px rgba(0,0,0,.2);
}

.panel-red-heading {
    color: #FFF;
    background-color: #BB262E;
    border-color: #BB262E;
}
.panel-blue-heading {
    color: #FFF;
    background-color: #005BA9;
    border-color: #005BA9;
}
.panel-green-heading {
    color: #FFF;
    background-color: #009856;
    border-color: #009856;
}
.panel-gray-heading {
    color: #FFF;
    background-color: #999;
    border-color: #999;
}
.panel-yellow-heading {
    color: #FFF;
    background-color: #FFD900;
    border-color: #FFD900;
}
/****************************************************************
                 カラーボックス
***************************************************************/
.color-box {
    background-color: #fafafa;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.color-box .title {
    background-color: #8EBEFF;
    color: #fff;
     padding: 1px 1px 5px 20px;
    margin: 0;
}

.color-box .box-body {
padding: 10px 20px 10px 20px;
}
/****************************************************************
                 フェードフレーム
***************************************************************/
.fade-frame {
	display: inline-block;
	position: relative;
}
.fade-frame:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(left, rgba(255, 255, 255, 0) 40%, #fff 100%); /* 塗りつぶす */
}
/****************************************************************
                 リボン
***************************************************************/
.new-ribon {
	position: relative;
	display: inline-block;
	overflow: hidden;/* 不要部分を消す */
	/* padding: 1px; */
}
.new-ribon:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100px;
	height: auto;
	background-color: #fdce00;            /* jonquille  */
	content: "New";	/* 表示するテキスト */
	text-align: center;
	color: #333132;                      /* noir */
	font-family: 'Arial';
    font-size: 10px;
	font-weight: bold;
	padding: 1px 10px;
	left: -30px;
	top: 3px;
	transform: rotate(-35deg);
}    
/****************************************************************
                 差し込み
***************************************************************/
.plug-frame {
	display: inline-block;
	position: relative;
	overflow: hidden; /* 不要部分を消す */
	padding: 6px; /* 6px だけは写真からはみ出す */
}
.plug-frame img {
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.plug-frame:before,
.plug-frame:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 97px;
	height: 50px;
	background: #fff; /* 背景色 */
	transform: rotate(-30deg);
}
/* 左上 */
.plug-frame:before {
	box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
	top: -24px;
	bottom: auto;
	right: auto;
	left: -26px;

}
/* 右下 */
.plug-frame:after {
	box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
	top: auto;
	bottom: -22px;
	right: -25px;
	left: auto;
}
/****************************************************************
                 見出し
***************************************************************/
    .heading6{
    	position:relative;
    	padding-left:30px;
    	border-bottom:2px solid #ccc;
    	font-weight: bold;
    	font-size: 22px;
    	line-height: 38px;
    }
     
    .heading6:before{
    	content:''; 
    	border-radius:30px;
    	-webkit-border-radius:30px;
    	-moz-border-radius:30px; 
    	height:12px; 
    	width:12px; 
    	display:block; 
    	position:absolute; 
    	top:14px; 
    	left:7px; 
    	background-color:#6B0CE8;
    	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
    	filter:alpha(opacity=50);
    	-moz-opacity:0.50;
    	-khtml-opacity: 0.50;
    	opacity:0.50;
    	z-index: 1;
    }
     
    .heading6:after{
    	content:''; 
    	border-radius:30px;
    	-webkit-border-radius:30px;
    	-moz-border-radius:30px; 
    	height:15px; 
    	width:15px; 
    	display:block; 
    	position:absolute; 
    	top:7px; 
    	left:2px; 
    	background-color:#00A8FF;
    	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset
    }