/*ここからCSP対応で追加　堀川201241121 外部化*/
.MJ_bgimg{
	background-image:url(../images/main/fmcbg.png); 
	background-repeat:no-repeat;
}
.MJ_margin{
	margin: 0px 0px 20px 0px
}
.MJ_margintop10{
	margin-top: 10px
}
.MJ_text_title{
	border-left:none; 
	border-top:1px solid #ccc; 
	vertical-align: middle;
}
.MJ_text_plan{
	border-top:1px solid #ccc; 
	vertical-align: middle;
}
.MJ_text12{
	font-size: 12px;
}
.MJ_text12R{
	font-size: 12px;
	text-align:right;
}

.MJ_text10{
	font-size: 10px;
}
.MJ_subtitle{
	border-left:none;
}
.MJ_ordertitle{
	border-left:none; 
	vertical-align:middle;
}
.MJ_text16{
	font-size:16px; 
	vertical-align:middle;
}
.MJ_text18{
	text-align:center; 
	font-size:18px;
}
.MJ_text16B{
	background-color:#FFFFDD; 
	font-size:16px; 
	font-weight:bold;
}
.MJ_margin-bottom6{
	margin-bottom: 6px;
}
.MJ_bold{
	font-weight:bold;
}

.MJ_border{
	border: #000000;
}

.MJ_display{
	display:block;
	margin:auto;
}
.MJ_margin_center{
	margin: 10px 0 0 0; 
	text-align: center
}
.MJ_align_center{
	text-align: center;
}
.MJ_normal{
	font-size: medium; 
	line-height: normal;
}
.MJ_promo_info{
	border-left:none;
	border-bottom:none;
}
.MJ_font_small{
	margin-bottom: 0.25em; 
	font-size: small;
}
.MJ_font_small_circle{
	list-style: circle; 
	font-size: small; 
	margin-top: 0em; 
	padding-left: 1.5em;
}
.MJ_wide60{
	width:60%;
}

.MJ_edutitle{
	padding: 20px; 
	background-color: #F6F6F6;
	margin: 20px 0 20px 0;
}
.MJ_edumargin{
	margin: 20px 0 0 0; 
	text-align: center
}
.MJ_limk_margin{
	margin: 40px 0 40px 0;
}
.MJ_footer{
	background-color:#252520; 
	height:200px;
}
.MJ_footeritems{
	height:100px; 
	margin-left:-28px;
}
.MJ_footermargin{
	margin-left:30px;
}
.MJ_displayblock{
	display: inline-block;
	/*左右だけ*/
  	padding: 30 10px
}
.MJ_link{
	text-decoration: none;
    color: #fff; 
}

.MJ_link:visited {
color:#fff;
}

	
	
#midCol td {
	vertical-align: top;
	padding:8px;
}

#others  ul li{
    padding: 3px 3px 0 5px;
    list-style: url(/images/buttons/small_blue_circle_bullet.png) outside;
}

.info {
	background-color: #EEEEEE;
	font-size: 120%;
	margin-top: 10px;
/*	margin-right: 50px;*/
	margin-bottom: 10px;
	line-height: 1.5;
/*	margin-left: 20px;*/
	border: solid 1px #333333;
	padding: 15px 15px 5px 15px;
}


#onpretable {
	font-size:14px;
}
.bl1c {
	border-left:1px solid #ccc;
}


.uk-tab {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #aaa;
}

.uk-tab > li > a {
  display: block;
  padding: 8px 12px 8px 12px;
  border: 1px solid #ccc;
  border-bottom-width: 0;
  color: #07D;
  text-decoration: none;
}

/* Active */
.uk-tab > li.uk-active > a {
  border-color: #aaa;
  border-bottom-color: transparent;
  background: #fff;
  color: #444;
}
	
@media(min-width:751px){
  /*PC版のみ*/
  .yokonarabe{
    display:flex;
    width:100%;
    margin:0;
	  border:1px solid #666;
  }
  .yokonarabe>div{
    width:33%;
	 vertical-align: middle;
  }
	  #cc24 h5 { margin-left: -10px; }
	}
/*PC・スマホ共通*/
.yokonarabe>div{
	padding: 10px;
	vertical-align: middle;
  border:none;
  background:#f0f0f5;
	
}
	
	  #cc24 h2 { margin: 8px; font-weight: bold;}
	  #cc24 h3 { margin: 8px; font-weight: bold;}
	  #cc24 h4 { margin: 8px; font-weight: bold;}
	  #cc24 h5 { margin: 8px; font-size: 110%;}
	
	#cc24 button {
		margin-top:5px;
		border: none;
		height: 30px;
  border-radius: 4px; /* (buttonの高さ / 2) の値 */
  color: #fff;
  background-color:#40cf67;
		padding: 0px 15px 0px 15px;
		font-size: 16px;
  cursor: pointer;
	}
	#cc24 button:hover {
  background-color:#66dd88;
	}
	


    /* タブ親のコンテナスタイル */
    .tabs-container {
        display: flex; /* 子要素を横並びにする */
        gap: 20px; /* タブ親間のスペースを調整 */
        margin-bottom: 0; /* コンテンツとの境界でマージンをなくす */
        flex-wrap: wrap; /* 小さな画面で折り返す */
        align-items: flex-start; /* 上揃え */
        position: relative; /* z-indexの基準 */
		font-size:18px;
		line-height:180%;
        /* 背景色やボーダーを追加すると、タブとコンテンツのつながりが見えやすくなります */
    }

    /* ul要素（タブ親）の基本スタイル */
    ul {
        list-style: none;
        padding: 0;
        margin: 0; /* Flexboxで間隔を制御するためマージンをリセット */
    }
    
    /* タブ親のリストアイテムスタイル */
    ul > li {
        padding: 10px 0; /* 垂直方向のパディングを調整 */
        font-weight: bold;
        cursor: default; /* タブ親はクリック不可に */
        margin-bottom: 5px; /* 子タブとの間隔 */
        display: block; /* ブロック要素にして、その下のulを改行させる */
        color: #555; /* タブ親の色を調整 */
    }

    /* タブ子の親ulスタイル */
    ul ul {
        margin-left: 0; /* ネストされたulのインデントをなくす */
        padding-top: 0; /* 親タブからのパディングをなくす */
        display: flex; /* タブ子を横並びにするためにFlexboxを使用 */
        flex-wrap: wrap;
        /* タブ子のベースライン揃えを調整し、隙間をなくす */
        align-items: flex-end; /* タブ子の下端を揃える */
    }

    /* タブ子のリストアイテムスタイル（見出しタブデザイン） */
    li[data-target] {
        cursor: pointer;
        padding: 10px 15px; /* パディングを調整 */
        border: 1px solid #ccc;
        border-bottom: 1px solid #ccc; /* 非アクティブなタブの下線 */
        background-color: #f0f0f0;
        display: inline-block; /* 横並びにするため */
        border-top-left-radius: 8px; /* 左上を丸くする */
        border-top-right-radius: 8px; /* 右上を丸くする */
        border-bottom-left-radius: 0; /* 下は直線に */
        border-bottom-right-radius: 0; /* 下は直線に */
        margin-right: 5px; /* タブ子間の間隔 */
        position: relative; /* z-indexを有効にするため */
        z-index: 1; /* デフォルトで背景に配置 */
        white-space: nowrap; /* テキストの折り返しを防ぐ */
        line-height: 1.2; /* 行の高さを調整 */
        color: #333;
        /* ここが重要: 負のマージンでコンテンツのボーダーと重ねる */
        margin-bottom: -1px; 
		font-size:18px;
    }
    li[data-target]:hover {
        background-color: #e0e0e0;
    }
    li[data-target].active {
        background-color: #fff; /* アクティブなタブはコンテンツと同じ背景色に */
        border-color: #ccc; /* アクティブなタブのボーダー色 */
        border-bottom-color: #fff; /* アクティブなタブの下線はコンテンツの背景色と同じにして隠す */
        z-index: 3; /* アクティブなタブを一番手前に */
        font-weight: bold;
    }

    /* コンテンツエリアのスタイル */
    div[id^="1-"], div[id^="2-"] {
        border: 1px solid #ccc;
        padding: 15px;
        margin-top: 0; /* タブとコンテンツの間にマージンをなくす */
        display: none;
        background-color: #fff;
        min-height: 100px;
        position: relative; /* z-indexを有効にするため */
        z-index: 2; /* タブより少し手前に配置 */
        
        /* コンテンツの角丸を調整 */
        border-top-left-radius: 0; /* タブの直下なので丸めない */
        border-top-right-radius: 0; /* タブの直下なので丸めない */
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    div.active-content {
        display: block;
    }

	.onpretd {
		background-image:url(../images/bg/bg_pricing_box_2.jpg);
		font-color:#FFFFFF;
		border:none;
		border-left:1px solid #FFFFFF;
	}
	.text-w{ color:#FFFFFF; margin:0px; font-size:24px; line-height:140%;}
	.margintop5{margin-top:5px;}
	.dtc {vertical-align:middle;
		text-align:center;
		border-left:none;
		border-right:1px solid #CCC;
	}
	.dtl {
		vertical-align:middle;
		text-align:left;
		border-left:none;
		border-right:1px solid #CCC;
	}
	.nob{
		border-left:none;
		border-right:none;
		
	}
	.bln {border-left:none;}
	.brn {border-right:none;}
	.bbn {border-bottom:none;}
	.btn {border-top:none;}
	.br1c{ border-right:1px solid #CCC;}
	.bl1c{ border-right:1px solid #CCC;}
	.bt1c{ border-top:1px solid #CCC;}
	.lh200{line-height:200%;}
	.fts85{font-size:85%;
	
	}
	.uk-button-primary{
		line-height:130%;
		padding:5px;
	}

.verticalAlignTop{
vertical-align: top;
}

/* モーダルのz-indexを最前面に設定 */
/* UIkitのモーダル要素自体に適用するのが一般的ですが、uk-modal-dialogでも効果があります */
.uk-modal, .uk-modal-dialog {
    z-index: 10000; /* 他のどの要素よりも高い値に設定 */
}

/*タブ*/
.marginBottm15{
margin-bottom:-15px;
}
.margin00200{
margin: 0px 0px 20px 0px
}

.cloudtd2{
border-left:none; border-top:none; vertical-align: middle;
}

.cloudtd3{
border-left:none; vertical-align: middle;
}
.cloudtd4{
border-right:none;
}

.verticalAlignMiddle{
vertical-align: middle;
}
.borderLeftNone{
border-left:none;
}
.cloudtr1{
background-color:#FFFFDD; font-size:16px; font-weight:bold;
}

.marginTop10{
margin-top: 10px;
}

.cloudp{
font-size: medium; line-height: normal;
}

.clouddiv{
margin: 10px 0 0 0; text-align: center
}
.cloudtd5{
border-bottom:none
}
.cloudtd6{
border-top:none
}
.clouddiv2{
width:60%;z-index: 10000;
}
.cloudp2{
margin-bottom: 0.25em; font-size: small;
}

/*index.php の文章部分。行間調整で使う*/
.spacer {
display: block;
height: 4px;
}