@charset "UTF-8";
/* 
# Style Guide of Manmaru

## 1. html body基本設定

html bodyの基本設定。背景白、文字色黒、フォント13px/1.4 メイリオ、ヒラギノ角ゴ ProN W3、MSPゴシック、Osaka、sans-serif

```
	<p>フォント13px/1.4 メイリオ、ヒラギノ角ゴ ProN W3、MSPゴシック、Osaka、sans-serif</p>
```
*/
/*
 * "IPA明朝（Ver.003.02）" licensed under the IPA Font License Agreement v1.0
 * https://osdn.jp/projects/ipafonts/ (配布元のURL）
 * http://ipafont.ipa.go.jp/（IPAフォントのURL）
 * http://ipafont.ipa.go.jp/ipa_font_license_v1.html（IPAフォントライセンスv1.0のURL）
 */
@font-face {
  font-family: 'ipam';
  src: url("font/ipam.eot"), url("font/ipam.woff") format("woff"), url("font/ipam.ttf") format("truetype"); }
.container:after, .ul-2col:after, .ul-3col:after, #wrap .seminar_table td table tbody tr:after {
  content: "";
  clear: both;
  display: block; }

html {
 color: black;
 font-size: 62.5%;
  /*ベースを10pxにしています*/
 line-height: 1.8;
 background-color: none;
 }

body {
  font-size: 16px;
  font-family: "小塚ゴシック Pro",YuGothic,'游ゴシック', "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
  min-width: initial;
  background-color: transparent !important;
  }
  @media all and (-ms-high-contrast:none) {
	body{
		font-family: YuGothic,"游ゴシック", "Meiryo", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
	}
}

  @media only screen and (max-width: 480px) {
    body {
      min-width: inherit; } }

img {
  max-width: 100%;
  max-height: 100%; }

a:hover img {
  opacity: 0.7; }

.container {
  width: 100%;
  margin: 0 auto; }

.sp-view {
  display: none; }
  @media only screen and (max-width: 480px) {
    .sp-view {
      display: inherit; } }

@media only screen and (max-width: 480px) {
  .sp-hide {
    display: none; } }

.clearfix:after {
  content: "";
  clear: both;
  display: block; }

.mt0 {
  margin-top: 0px !important; }

.mt5 {
  margin-top: 5px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt50 {
  margin-top: 50px !important; }

.mr0 {
  margin-right: 0px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr20 {
  margin-right: 20px !important; }

.mr30 {
  margin-right: 30px !important; }

.mr40 {
  margin-right: 40px !important; }

.mr50 {
  margin-right: 50px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.ml0 {
  margin-left: 0px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml20 {
  margin-left: 20px !important; }

.ml30 {
  margin-left: 30px !important; }

.ml40 {
  margin-left: 40px !important; }

.ml50 {
  margin-left: 50px !important; }

.pt0 {
  padding-top: 0px !important; }

.pt10 {
  padding-top: 10px !important; }

.pt20 {
  padding-top: 20px !important; }

.pt30 {
  padding-top: 30px !important; }

.pt40 {
  padding-top: 40px !important; }

.pt50 {
  padding-top: 50px !important; }

.pr0 {
  padding-right: 0px !important; }

.pr10 {
  padding-right: 10px !important; }

.pr20 {
  padding-right: 20px !important; }

.pr30 {
  padding-right: 30px !important; }

.pr40 {
  padding-right: 40px !important; }

.pr50 {
  padding-right: 50px !important; }

.pb0 {
  padding-bottom: 0px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.pl0 {
  padding-left: 0px !important; }

.pl10 {
  padding-left: 10px !important; }

.pl20 {
  padding-left: 20px !important; }

.pl30 {
  padding-left: 30px !important; }

.pl40 {
  padding-left: 40px !important; }

.pl50 {
  padding-left: 50px !important; }

/*
## 7. t_l t_c t_r
 
文字の揃え指定
 
```
	<p class="t_l">text align left</p>
	<p class="t_c">text align center</p>
	<p class="t_r">text align right</p>
	
```
*/
.t_l {
  text-align: left !important; }

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

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

@media only screen and (max-width: 480px) {
  .sp-t_l {
    text-align: left !important; } }

@media only screen and (max-width: 480px) {
  .sp-t_c {
    text-align: center !important; } }

@media only screen and (max-width: 480px) {
  .sp-t_r {
    text-align: right !important; } }

/*
## 8. f_l f_r
 
フロート指定
 
```
	<p class="f_l" style="width:300px;border:1px solid black;">float left</p>
	<p class="f_r" style="width:300px;border:1px solid black;">float right</p>
	<p class="clr" style="width:300px;border:1px solid black;">clear both</p>
	
```
*/
.f_l {
  float: left; }

.f_r {
  float: right; }

.f_n {
  float: none; }

.clr {
  clear: both; }

/*
## 9. w49 w32
 
横幅指定　スマホの指定あり
 
```
	<p class="w100 f_l" style="border:1px solid black;">100</p>
	<p class="w49 f_l" style="border:1px solid black;">49 float left</p>
	<p class="w32 f_l" style="border:1px solid black;">32 float left</p>
	
```
*/
.w100 {
  width: 100%; }

.w80 {
  width: 80%; }

.w75 {
  width: 75%; }

.w65 {
  width: 65%; }

.w60 {
  width: 60%; }

.w50 {
  width: 50%; }

.w49 {
  width: 49%; }

.w40 {
  width: 40%; }

.w38 {
  width: 38%; }

.w32 {
  width: 32%; }

.w25 {
  width: 25%; }

.w20 {
  width: 20%; }

@media only screen and (max-width: 480px) {
  .sp-w100 {
    width: 100%; } }

@media only screen and (max-width: 480px) {
  .sp-w75 {
    width: 75%; } }

@media only screen and (max-width: 480px) {
  .sp-w49 {
    width: 49%; } }

@media only screen and (max-width: 480px) {
  .sp-w30 {
    width: 30%; } }

@media only screen and (max-width: 480px) {
  .sp-wauto {
    width: auto; } }

/*
## 9. ul-2col, ul-3col
 
リスト横並びクラス
3列並びはスマホで2列に変更
 
```
	<ul class="clearfix ul-2col">
		<li>あいうえお</li>
		<li>かきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてと</li>
		<li>なにぬねの</li>
		<li>はひふへほ</li>
		<li>まみむめも</li>
		<li>やゆよ</li>
    </ul>
    
	<ul class="clearfix ul-3col">
		<li>あいうえお</li>
		<li>かきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてと</li>
		<li>なにぬねの</li>
		<li>はひふへほ</li>
		<li>まみむめも</li>
		<li>やゆよ</li>
	</ul>
	
```
*/
.ul-2col {
  margin-left: 0 !important; }
  .ul-2col > li {
    width: 49%;
    display: block; }
    .ul-2col > li:nth-child(odd) {
      clear: both;
      float: left; }
    .ul-2col > li:nth-child(even) {
      float: right; }

.ul-3col {
  margin-left: 0 !important; }
  .ul-3col > li {
    width: 32%;
    display: block;
    float: left; }
    @media only screen and (max-width: 480px) {
      .ul-3col > li {
        width: 49%; } }
    .ul-3col > li:nth-child(3n + 1) {
      clear: both; }
      @media only screen and (max-width: 480px) {
        .ul-3col > li:nth-child(3n + 1) {
          clear: none; } }
    .ul-3col > li:nth-child(3n + 2) {
      margin: 0 2% 10px; }
      @media only screen and (max-width: 480px) {
        .ul-3col > li:nth-child(3n + 2) {
          margin: 0 0 10px; } }
    @media only screen and (max-width: 480px) {
      .ul-3col > li:nth-child(odd) {
        clear: both;
        float: left; } }
    @media only screen and (max-width: 480px) {
      .ul-3col > li:nth-child(even) {
        float: right; } }

.ul-ib > li {
  display: inline-block; }

@media only screen and (max-width: 480px) {
  .ul-sp1col > li {
    width: 100%;
    float: none; } }

@media only screen and (max-width: 480px) {
  .ul-sp2col > li {
    width: 49%;
    display: block; } }
@media only screen and (max-width: 480px) {
  .ul-sp2col > li:nth-child(odd) {
    clear: both;
    float: left; } }
@media only screen and (max-width: 480px) {
  .ul-sp2col > li:nth-child(even) {
    float: right; } }

/*
## 10. b-left,b-top,b-rigth,b-bottom

要素に罫線
 
```
	<p class="b-left" style="margin-bottom:10px;">左</p>
	<p class="b-top" style="margin-bottom:10px;">上</p>
	<p class="b-right" style="margin-bottom:10px;">右</p>
	<p class="b-bottom" style="margin-bottom:10px;">下</p>
```
*/
.b-left {
  border-left: 1px solid black; }

.b-top {
  border-top: 1px solid black; }

.b-right {
  border-right: 1px solid black; }

.b-bottom {
  border-bottom: 1px solid black; }

/*
## 11. list-none, list-disc, list-decimal

リストスタイル
 
```
	<ul>
		<li class="list-none">none</li>
		<li class="list-disc">disc</li>
		<li class="list-decimal">decimal</li>
	</ul>
```
*/
.list-none {
  list-style-type: none !important; }

.list-disc {
  list-style-type: disc !important; }

.list-decimal {
  list-style-type: decimal !important; }

/*
## 12. sp-table-block

スマホ用テーブル要素をブロック化
 
```
	<table class="sp-table-block">
		<tr>
			<th>ヘッダー</th>
			<td>ボディ</td>
	</table>
```
*/
@media only screen and (max-width: 480px) {
  .sp-table-block th,
  .sp-table-block td {
    display: block;
    width: auto; } }

#contents,
#main,
#main_contents,
#form1 {
  width: 100% !important; }
  @media only screen and (max-width: 480px) {
    #contents,
    #main,
    #main_contents,
    #form1 {
      float: none !important; } }
  #contents .news,
  #main .news,
  #main_contents .news,
  #form1 .news {
    width: auto;
    margin: 0; }
    #contents .news .newstb,
    #main .news .newstb,
    #main_contents .news .newstb,
    #form1 .news .newstb {
      width: 100%;
      border-top: #000 solid 1px;
      }
      @media only screen and (max-width: 480px) {
        #contents .news .newstb th,
        #contents .news .newstb td,
        #main .news .newstb th,
        #main .news .newstb td,
        #main_contents .news .newstb th,
        #main_contents .news .newstb td,
        #form1 .news .newstb th,
        #form1 .news .newstb td {
          display: block; } }
      #contents .news .newstb th,
      #main .news .newstb th,
      #main_contents .news .newstb th,
      #form1 .news .newstb th {
        width: 100px !important; }
        @media only screen and (max-width: 480px) {
          #contents .news .newstb th,
          #main .news .newstb th,
          #main_contents .news .newstb th,
          #form1 .news .newstb th {
            width: 46% !important;
            float: left;
            padding: 2%;
            border-bottom: none; } }
      #contents .news .newstb td,
      #main .news .newstb td,
      #main_contents .news .newstb td,
      #form1 .news .newstb td {
        width: auto !important; }
        @media only screen and (max-width: 480px) {
          #contents .news .newstb td,
          #main .news .newstb td,
          #main_contents .news .newstb td,
          #form1 .news .newstb td {
            clear: both;
            width: 96%;
            padding: 2%; } }

#wrap {
  padding: 0; }
  #wrap .seminar_table {
    width: 100% !important; }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table {
        border: none; } }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table tr {
        display: block;
        margin-bottom: 10px;
        width: 100% !important; } }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table tr th,
      #wrap .seminar_table tr td {
        display: block;
        width: 96% !important;
        padding: 2%; } }
    #wrap .seminar_table th {
      width: 32% !important; }
      @media only screen and (max-width: 480px) {
        #wrap .seminar_table th {
          width: auto !important; } }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table td {
        margin-bottom: 10px; } }
    #wrap .seminar_table td table {
      width: 100%;
      display: block; }
      #wrap .seminar_table td table tbody {
        display: block;
        width: 100%; }
        #wrap .seminar_table td table tbody tr {
          display: block;
          width: 100%;
          margin-bottom: 0; }
          #wrap .seminar_table td table tbody tr td {
            border: none; }
            @media only screen and (max-width: 480px) {
              #wrap .seminar_table td table tbody tr td {
                margin-bottom: 0;
                display: block;
                width: 28% !important;
                border-top: 1px dashed #ccc;
                border-left: 1px dashed #ccc;
                border-bottom: none;
                float: left; } }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table .must {
        border-right: none;
        border-left: 3px solid red; } }
    @media only screen and (max-width: 480px) {
      #wrap .seminar_table .must + td {
        border-left: 3px solid red; } }

@media only screen and (max-width: 480px) {
  div#container-mid {
    width: 98%; }
    div#container-mid div#container-top {
      width: auto; }
      div#container-mid div#container-top div#container-bot {
        width: auto; }
        div#container-mid div#container-top div#container-bot div#sign-in {
          width: auto; }
        div#container-mid div#container-top div#container-bot div#wrap {
          width: auto; }
          div#container-mid div#container-top div#container-bot div#wrap .seminar_title {
            width: auto; }
          div#container-mid div#container-top div#container-bot div#wrap .seminar_detail {
            width: auto; }
          div#container-mid div#container-top div#container-bot div#wrap iframe {
            max-width: 100%; }
          div#container-mid div#container-top div#container-bot div#wrap table {
            clear: both; }
          div#container-mid div#container-top div#container-bot div#wrap p.application {
            float: none;
            width: auto; }
            div#container-mid div#container-top div#container-bot div#wrap p.application a {
              display: inline-block;
              margin: 0 auto; }
          div#container-mid div#container-top div#container-bot div#wrap textarea {
            width: 100% !important; }
        div#container-mid div#container-top div#container-bot div#footer {
          width: auto; } }

@media only screen and (max-width: 480px){
#wrap .seminar_table td #RadioButtonListSeibetsu tbody tr td {
    width: 100%!important;
    border:none;
}
}




a:link,
a:visited{
	color: #000;
}

a:hover{
	opacity: 0.7;
	text-decoration:none !important;
}

a:active{
	color:#096b9d;
}
td a{
	border-bottom:#000 solid 1px;
}
td a:hover{
	opacity: 0.7;
}
.newstb th,
.newstb td{
	padding: 0.8em;
	line-height:2;
	vertical-align:top;
	border-bottom: 1px solid #000;
}
.newstb th{
	/*width:14em;*/
	white-space:nowrap;
	line-height: 1.5;
	font-size: 95%;
	font-weight: bold;
}
.news .newstb caption a {
	background:none;
	width: 22%;
    margin-left: auto;
}

.news .newstb caption a:before{
	content:">";
	margin-right:5px;
	color:#000;
}

#wrap .privacy_table caption {
	display: block;
}
#wrap .privacy_table th {
	width: 100% !important;
	box-sizing: border-box;
	display: block;
}

#wrap .privacy_table td {
width: 100% !important;
box-sizing: border-box;
display: block;
}