body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
/* カードレイアウト部分をラッピングし、
Flexboxを指定"space-between"で各アイテムを均等に配置し、
最初と最後のアイテムを端に寄せます。*/
#cardlayout-wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
 
    margin: 0.8em auto;
    max-width: 900px;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

/* リンクテキストの下線を非表示 */
a.card-link {
    text-decoration: none;
}

/* カードレイアウト内の画像を幅いっぱいに表示 */
#cardlayout-wrap img {
    display: block;
    margin: 0.7em auto;
    max-width: 85%;
    height: auto;
}

.example {
  position: relative;
  }

/* 点滅 */
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.blink {
	animation: blinking 1s ease-in-out infinite alternate;
}

p7{
  color: #C1272D;
  font-size: 20px;
  font-weight: bold;
}
/* レンジ可 */
.example p {
  position: absolute;
  bottom: -65px;/*画像の左上に配置*/
  left: 122px;
  border-radius: 0.3rem;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #909090;/*背景色*/
  font-size: 11px;
  font-weight: bold;
  line-height: 1;/*行高は1に*/
  padding: 7px 7px;/*文字周りの余白*/
  }

/* サンプル可 */
.example p1 {
  position: absolute;
  bottom: -65px;/*画像の左上に配置*/
  left: 280px;
  border-radius: 0.3rem;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #00a61b;/*背景色*/
  font-size: 11px;
  font-weight: bold;
  line-height: 1;/*行高は1に*/
  padding: 7px 7px;/*文字周りの余白*/
  }

/* サンプル可2*/
.example p2 {
  position: absolute;
  bottom: -65px;/*画像の左上に配置*/
  left: 280px;
  border-radius: 0.3rem;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #00a61b;/*背景色*/
  font-size: 11px;
  font-weight: bold;
  line-height: 1;/*行高は1に*/
  padding: 7px 7px;/*文字周りの余白*/
  }


/* サンプル可3*/
.example p4 {
  position: absolute;
  bottom: -65px;/*画像の左上に配置*/
  left: 190px;
  border-radius: 0.3rem;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #00a61b;/*背景色*/
  font-size: 11px;
  font-weight: bold;
  line-height: 1;/*行高は1に*/
  padding: 7px 7px;/*文字周りの余白*/
  }

.card-list{
    padding: 0.3em 0.3em;
    margin: 0;
    background: -webkit-repeating-linear-gradient(-45deg, #EFEFEF, #EFEFEF 3px,#F7F8F8 3px, #F7F8F8 7px);
    background: repeating-linear-gradient(-45deg, #EFEFEF, #EFEFEF 3px,#F7F8F8 3px, #F7F8F8 7px);
}
.card-figure {
    margin: 0;
    padding: 0;
}

/* カードレイアウトのタイトル部分 */
.card-title {
    margin: 0.5em 0 0.5em;
    color: #000;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.3em;
}

.card__text_01 {
  font-family:MS PGothic, sans-serif;
  font-size: 1rem;
  text-align:center;
  text-decoration: none;
	padding-bottom: 0rem;
}


/* カードボタンレイアウト部分 */
a.btn,
button.btn {
  font-family:MS PGothic, sans-serif;
  font-size: 1rem;
  line-height: 1.3rem;
  position: relative;
  display: inline-block;
  padding: 0.9rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  vertical-align: middle;
  text-decoration: none;
  color: #000;
  border-radius: 0.5rem;
}

/* カードボタン全体部分 */
a.btn-c {
  text-align: left;
  font-size: 0.9rem;
  font-weight: bold;
  width: 100%; 
  margin: 0.4rem 0rem 0.4rem;
  padding: 0.8rem 1.3rem 0.8rem 5.5rem;
  border : solid 1px #000 ;
  color: #000;
  background: #fff;
}
/* カードボタン小部分 */
a.btn-c span {
  font-size: 1rem;
  display: inline-block;
  width: 100%;
  margin-top: 0.3em;
  margin-bottom: 0.5em;
  padding: 0.4rem 0.4rem;
  color: #fff;
  border-radius: 4px;
  background: #000;
}

/* カードボタン矢印部分 */
a.btn-c:before {
  font-family: "Font Awesome 5 Free";
  font-size: 2rem;
  line-height: 1;

  position: absolute;
  top: calc(50% - 0.7rem);
  left: 1.0rem;
  margin: auto;
  padding: 0;

  content: "\f105";
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

a.btn-c:hover {
  color: #fff;
  background: #AAAAAA;
}


@media all and and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
}
    .card-list {
        margin: 0.4em 0;
        width: calc(100% / 1); /* 100%幅を2で割るという指定 */
    }

/* 画面幅992px以上の場合カードレイアウトを3カラムで配置 */
@media all and (min-width: 900px) {
    .card-list {
        width: calc(98% / 2); /* 100%幅を3で割るという指定 */
    }
    
/* 最後の行が3列より少ない場合左寄せにレイアウトさせる */
    #cardlayout-wrap::after{
        content: "";
        display: block;
        width: calc(100% / 2);
    }
  
  }.wrapper{
}

/*タブ切り替え全体のスタイル*/
.tabs1 {
  margin-top: 50px;
  padding-bottom: 30px;
  background-color: #ffffff;
  width: 100%;
  margin: 10 auto;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  background-color: #FFFFFF;
  line-height: 50px;
  font-size: 17px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: left;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 7px 34px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
.tab_item01 {
 border-radius: 0 6px 6px 0;
}
.tab_item02 {
 border-radius: 0 6px 6px 0;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 10px 2px 10;
  clear: both;
  overflow: hidden;
}

.tab_content{
    position:  relative;            /* 位置指定 */
    animation: anime1 1s ease;      /* アニメーション指定 */
}

@keyframes anime1 {
    0% {
        opacity:  0;                /* 透明度指定 */
        top: 50px;                  /* 位置指定 */
    }
    100% {
        opacity:  1;                /* 透明度指定 */
        top: 0;                     /* 位置指定 */
    }
}

/*選択されているタブのコンテンツのみを表示*/
#all3:checked ~ #all3_content,
#programming3:checked ~ #programming3_content,
#design3:checked ~ #design3_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs2 input:checked + .tab_item {
  background-color: #c1272d;
  color: #fff;
}

.half {
  float: center;
  width: 100%;
  padding: 0 1em;
}
/* Acordeon styles */

span.sample2 {
  font-family:MS PGothic, sans-serif;
  font-weight: bold; 
  text-align: center;
  font-size: 18px;
}
span.sample3 {
  font-family:MS PGothic, sans-serif;
  font-weight: bold; 
  text-align: center; 
  font-size: 20px;
}
span.sample4 {
  font-family:MS PGothic, sans-serif;
  color:000;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  text-align: center;
}
table th {
  width: auto;
  background: #d6d6d6;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
}
table td {
  background: #fff;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  vertical-align: top;
  text-align: center;
}
@media all and (max-width: 767px) {
  table th, table td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  table tr:last-child td:last-child {
    border-bottom: none;
  }
}
/*主な共通部分は省略*/

.pic_frame {
      display: inline-block;
      text-align: center;
    }

      table {
      text-align: center;
    }
.tab {
  position: relative;
  margin-bottom: 2px;
  width: 100%;
  color: #FFFFFF;/* アコーディオン タブ文字色 */
  overflow: hidden;
}
	

input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 0.5em;
  background: #026837;/* アコーディオン タブ背景色 */
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.tab-content {
  max-height: 0;
  max-width:100%;
  overflow: hidden;
  text-align: center;
  background: #fff;/* タブ内背景色 */
  border: 0.8px solid #000;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}

.tab-content p {
  margin: 1.5em;
  color: #000;/* タブ内文字色 */
  border: none;
 
}
a.d2-1 { text-decoration: none; }
a.d2-1:hover { text-decoration: underline; }

table, th, td {
    border: none;
  
}

img.yohaku2{
  margin:13px auto 13px;
  display: flex;
}
img.yohaku3{margin-right:0px;}

/* :checked */
input:checked ~ .tab-content {
  max-height: 200em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
  -webkit-transition: all .45s;
  -o-transition: all .45s;
  transition: all .45s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}


//PCのデフォルトスタイルは割愛します
.tbl-r05 td:first-child {
  background: #000;
}

@media screen and (max-width:380px) { 
.example p4{
  font-size:10px;
}
}