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;
  }
/* レンジ可 */
.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: 185px;
  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;
  top: 0px;/*画像の左上に配置*/
  left: 20px;
  border-radius: 0.3rem;
  margin: 0; /*余計な隙間を除く*/
  color: #ffffff;/*文字を白に*/
  background: #00a61b;/*背景色*/
  font-size: 12px;
  font-weight: bold;
  line-height: 1;/*行高は1に*/
  padding: 8px 8px;/*文字周りの余白*/
  }

.blink {-webkit-animation: blink 1s ease-in-out infinite alternate;
animation: blink 1s ease-in-out infinite alternate;
position: absolute;
top: 56px;/*画像の左上に配置*/
left: 20px;
border-radius: 0.3rem;
margin: 0; /*余計な隙間を除く*/
color: #ffffff;/*文字を白に*/
background: #ff0055;/*背景色*/
font-size: 15px;
font-weight: bold;
line-height: 1;/*行高は1に*/
padding: 9px 9px;/*文字周りの余白*/
}

.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.8em 0 0.8em;
    color: #000;
    text-align: center;
    font-size: 1.3em;
    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: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-selec
  t: 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 3.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: #000;
  color: #fff;
}